/* Free mini Health Check. Uses the site palette and type, standalone page. */

/* No hero image on this page, so the site's fixed header would float over the
   content. Pin it in the flow instead. */
.mhc-page .page-header { position: relative; background: #003469; }
.mhc-page .page-header__top {
  position: static;
  padding: 1.6rem 0;
  background: #003469;
}

/* The site's main wrapper pads top and bottom, which on this page shows as a
   white strip between the dark intro and the dark footer. Each section here
   carries its own padding instead. The wrapper is also a flex item with
   flex-grow 1, the site's sticky footer, so on a page as short as the intro it
   stretches past its content and the same white strip comes back. Making it a
   column and letting the one visible section grow gives that space to the
   section instead of leaving it bare. */
.mhc-page .page-main { padding: 0; display: flex; flex-direction: column; }
.mhc-page .page-main > section { flex: 1 0 auto; }

.mhc-intro,
.mhc-quiz,
.mhc-result { padding: clamp(4.8rem, 6vw, 8rem) 0; }

/* A light intro: the navy header is the only dark band above the fold, and
   the page reads as a document rather than a hero. */
.mhc-intro { background: #fff; color: #003469; }
.mhc-intro h1 { color: #003469; max-width: 20ch; text-wrap: balance; }
.mhc-intro .cb__kicker { color: #00abb6; }
.mhc-lead { max-width: 62rem; font-size: var(--font-size--s); line-height: 1.5; }
.mhc-intro .mhc-lead { color: #42536a; }

.mhc-meta { display: flex; flex-wrap: wrap; gap: .8rem 2.4rem; margin: 2.4rem 0 3.2rem; }
.mhc-meta span { display: flex; align-items: center; gap: .8rem; color: #42536a; font-size: 1.6rem; }
.mhc-meta span::before { width: .8rem; height: .8rem; border-radius: 50%; background: #00abb6; content: ""; }
.mhc-meta span:nth-child(2)::before { background: #f99f3f; }
.mhc-meta span:nth-child(3)::before { background: #a967aa; }

.mhc-start { background: #00abb6 !important; color: #000e3c !important; }
.mhc-start span { color: inherit !important; }
.mhc-note { max-width: 62rem; margin-top: 2.4rem; color: #42536a; font-size: 1.5rem; }

/* Quiz */
.mhc-quiz { background: #f3f6f9; }
.mhc-progress { max-width: 76rem; margin: 0 auto 2.4rem; }
.mhc-progress__bar { height: .6rem; border-radius: 999px; background: #dce5ed; overflow: hidden; }
.mhc-progress__bar span { display: block; height: 100%; background: #00abb6; transition: width .25s ease; }
.mhc-progress__label { margin: 1rem 0 0; color: #42536a; font-size: 1.5rem; }

.mhc-card {
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(2.8rem, 4vw, 4.4rem);
  border-radius: 1.6rem;
  background: #fff;
  box-shadow: 0 1.6rem 4rem rgba(0,52,105,.10);
}
.mhc-area {
  margin: 0 0 1rem;
  color: #00abb6;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mhc-question { margin: 0 0 2.8rem; font-size: var(--font-size--m); line-height: 1.2; text-wrap: balance; }

.mhc-options { display: grid; gap: 1rem; }
.mhc-option {
  padding: 1.6rem 2rem;
  border: 1px solid #dce5ed;
  border-radius: 1rem;
  background: #fff;
  color: #003469;
  font-family: inherit;
  font-size: var(--font-size--s);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.mhc-option:hover,
.mhc-option:focus-visible { border-color: #00abb6; background: #f7fbfc; }
/* Focus used to be drawn exactly like hover, so a keyboard visitor could not
   tell which option they were on. It carries the site ring instead. */
.mhc-option:focus-visible { outline: 2px solid #00abb6; outline-offset: 3px; }
.mhc-option.is-selected { border-color: #00abb6; background: #eaf7f8; }
/* Long option sets, such as the version and high availability questions, would
   otherwise push the last option and the "Not sure" control below the fold on a
   390px screen. Padding alone is not enough once four of the seven options wrap
   to two lines, so the gaps around the set tighten as well. The minimum height
   keeps every tap target at 44px. */
/* Only a phone needs the tighter layout. On wider screens the page scrolls and
   every question keeps the same option size, so the type does not jump between
   a four-option and a seven-option question. */
@media (max-width: 768px) {
  .mhc-options--compact { margin-top: -1rem; gap: .6rem; }
  .mhc-options--compact .mhc-option { padding: .8rem 1.4rem; font-size: 1.6rem; min-height: 44px; }
  .mhc-options--compact + .mhc-actions { margin-top: 1.6rem; }
}

.mhc-actions { display: flex; justify-content: space-between; gap: 1.6rem; margin-top: 2.4rem; }
.mhc-back, .mhc-skip {
  border: 0; background: none; color: #42536a;
  font-family: inherit; font-size: 1.6rem; cursor: pointer; padding: .8rem 0;
}
.mhc-back:hover:not(:disabled), .mhc-skip:hover { color: #003469; text-decoration: underline; }
.mhc-back:disabled { opacity: .35; cursor: default; }

/* Result */
.mhc-score { display: grid; gap: clamp(2.4rem, 4vw, 5rem); align-items: center; margin-bottom: clamp(3.2rem, 4vw, 5rem); }
.mhc-score__dial { position: relative; width: 18rem; justify-self: center; }
.mhc-score__dial svg { width: 100%; height: auto; transform: rotate(-90deg); }
.mhc-score__track { fill: none; stroke: #dce5ed; stroke-width: 10; }
/* The brand's semantic secondaries are pale by design, and none of them reaches
   3:1 against the track, so on four of five bands the arc carried no
   information at all. The arc is now navy on every band, which is a documented
   neutral, and carries the data through its length. The band's own colour moves
   to the chip beside the heading, where there is room for the word as well. */
.mhc-score__value { fill: none; stroke: #003469; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.mhc-score__number {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: .2rem;
  font-family: "PT Sans Narrow", Verdana, sans-serif; color: #003469;
}
/* The numeral is suppressed when the visitor was mostly unsure. The rule above
   sets display:flex, which would otherwise beat the browser's [hidden]. */
.mhc-score__number[hidden] { display: none; }
.mhc-score__number strong { font-size: 4.8rem; line-height: 1; }
.mhc-score__number span { color: #42536a; font-size: 1.8rem; }
.mhc-score__head { margin: .6rem 0 1.2rem; }
.mhc-score__copy h2 { margin: 0; }
/* The heading carries the band's meaning as well as the word: the brand tint
   as the fill, a navy border so its edge is visible against the page, and navy
   text that is large and bold, so 3:1 is the right contrast threshold for it. */
.mhc-score__copy h2[data-band] {
  display: inline-block;
  padding: .4rem 1.6rem;
  border: 1px solid #003469;
  border-radius: 999px;
  background: #b1d9a9;
  color: #003469;
  line-height: 1.25;
}
.mhc-score__copy h2[data-band="Solid, with gaps"] { background: #a3d5ff; }
.mhc-score__copy h2[data-band="Exposed in places"] { background: #f7f6c5; }
.mhc-score__copy h2[data-band="At risk"] { background: #f1615a; }
.mhc-score__copy h2[data-band="Not enough visibility"] { background: #cbced0; }

.mhc-noscore { margin: 1.6rem 0 0; color: #003469; font-weight: 700; }
.mhc-legend { margin: 1.2rem 0 0; color: #42536a; font-size: 1.5rem; line-height: 1.5; }
.mhc-sent {
  margin: 0 0 clamp(2.4rem, 3vw, 3.2rem);
  padding: 1.4rem 1.8rem;
  border: 1px solid #00abb6;
  border-radius: 1rem;
  background: #eaf7f8;
  color: #003469;
  font-weight: 700;
}

.mhc-subhead { margin: 0 0 1.8rem; font-size: var(--font-size--m); }

.mhc-areas { display: grid; gap: 1.2rem; margin-bottom: clamp(3.2rem, 4vw, 5rem); }
.mhc-area-row { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.mhc-area-row__label { margin: 0; font-weight: 700; color: #003469; }
.mhc-area-row__bar { height: 1rem; border-radius: 999px; background: #eef3f7; overflow: hidden; }
.mhc-area-row__bar span { display: block; height: 100%; border-radius: 999px; background: #00abb6; }
.mhc-area-row__pct { margin: 0; color: #42536a; font-variant-numeric: tabular-nums; }
/* An area where every answer was "not sure" has no percentage to draw. Give the
   empty track more contrast so it reads as a state, not a rendering failure. */
.mhc-area-row.is-unknown .mhc-area-row__bar { background: #dce5ed; }

.mhc-actions-list { margin: 0 0 clamp(3.2rem, 4vw, 5rem); padding: 0; list-style: none; counter-reset: mhc; }
.mhc-actions-list li {
  position: relative;
  padding: 1.8rem 0 1.8rem 5.2rem;
  border-top: 1px solid #dce5ed;
  counter-increment: mhc;
}
.mhc-actions-list li::before {
  position: absolute; left: 0; top: 1.8rem;
  content: counter(mhc);
  width: 3.2rem; height: 3.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #003469; color: #fff;
  font-family: "PT Sans Narrow", Verdana, sans-serif; font-weight: 700;
}
/* Nothing to rank, so no number: "1. Nothing stands out" reads as a finding. */
.mhc-actions-list li.is-empty { padding-left: 0; }
.mhc-actions-list li.is-empty::before { content: none; }
.mhc-actions-list strong { display: block; color: #003469; }
.mhc-actions-list span { display: block; margin-top: .4rem; color: #42536a; }

.mhc-next { display: grid; gap: 2.4rem; padding-top: clamp(2.4rem, 3vw, 4rem); border-top: 1px solid #dce5ed; }
.mhc-next__copy h3, .mhc-next__mail h3 { margin: 0 0 1rem; font-size: var(--font-size--m); }
.mhc-next__copy p, .mhc-next__mail p { color: #42536a; }
.mhc-next__copy .button--default { margin-top: 1.6rem; }
.mhc-next__mail {
  padding: clamp(2.4rem, 3vw, 3.2rem);
  border-radius: 1.6rem;
  background: #f3f6f9;
}
.mhc-next__mail form { display: grid; gap: 1.4rem; margin-top: 1.6rem; }
.mhc-next__mail label { display: grid; gap: .6rem; font-weight: 700; color: #003469; }
.mhc-next__mail input {
  padding: 1.2rem 1.4rem; border: 1px solid #dce5ed; border-radius: .8rem;
  font-family: inherit; font-size: var(--font-size--s);
}
.mhc-next__mail input:focus-visible { outline: none; border-color: #00abb6; box-shadow: 0 0 0 3px rgba(0,171,182,.3); }
.mhc-label-text small { font-weight: 400; color: #42536a; }
.hp { position: absolute; left: -9999px; }

.mhc-restart {
  margin-top: 3.2rem; border: 0; background: none; color: #42536a;
  font-family: inherit; font-size: 1.6rem; cursor: pointer; text-decoration: underline;
}
.mhc-restart:hover { color: #003469; }

@media (min-width: 769px) {
  .mhc-score { grid-template-columns: auto minmax(0, 1fr); }
  .mhc-score__dial { justify-self: start; }
  .mhc-area-row { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr) auto; align-items: center; gap: 2rem; }
  .mhc-area-row__label, .mhc-area-row__pct { margin: 0; }
  .mhc-next { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .mhc-score__value, .mhc-progress__bar span { transition: none; }
}

/* Offer to answer the remaining questions after the first result */
.mhc-extend {
  display: grid;
  gap: 1.6rem;
  align-items: center;
  margin: 0 0 clamp(3.2rem, 4vw, 5rem);
  padding: clamp(2.4rem, 3vw, 3.2rem);
  border: 1px solid #dce5ed;
  border-radius: 1.6rem;
  background: #f3f6f9;
}
.mhc-extend h3 { margin: 0 0 .6rem; font-size: var(--font-size--m); }
.mhc-extend p { margin: 0; color: #42536a; }
.mhc-extend .button--white { justify-self: start; white-space: nowrap; }
@media (min-width: 769px) {
  .mhc-extend { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; }
  .mhc-extend .button--white { justify-self: end; }
}

/* Announced to screen readers only: the current question, and the result. */
.mhc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Intro: the headline column ran to about 560px inside a 1440px container and
   left the whole right half empty. The panel fills it and says what the check
   actually covers, which is the question a visitor has before starting. */
.mhc-intro__grid { display: grid; gap: clamp(2.8rem, 4vw, 5rem); align-items: start; }
.mhc-covers {
  padding: clamp(2.4rem, 3vw, 3.2rem);
  border: 1px solid #dce5ed;
  border-radius: 1.6rem;
  background: #f3f6f9;
}
.mhc-covers h2 { margin: 0 0 1.8rem; color: #003469; font-size: var(--font-size--m); }
.mhc-covers ul { display: grid; gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.mhc-covers li {
  position: relative;
  padding-left: 2rem;
  color: #42536a;
  font-size: 1.5rem;
  line-height: 1.5;
}
.mhc-covers li::before {
  position: absolute; left: 0; top: .8rem;
  width: .8rem; height: .8rem; border-radius: 50%;
  background: #00abb6; content: "";
}
.mhc-stale {
  max-width: 62rem;
  margin: 2.4rem 0 0;
  padding: 1.4rem 1.8rem;
  border: 1px solid #00abb6;
  border-radius: 1rem;
  background: #eaf7f8;
  color: #003469;
  font-size: 1.5rem;
}
@media (min-width: 769px) {
  .mhc-intro__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

/* Two collapsed panels: how the number was worked out, and what every answer
   scored. Both are closed on load so they do not bury the priorities. */
.mhc-explain, .mhc-answers {
  margin: 0 0 clamp(3.2rem, 4vw, 5rem);
  border: 1px solid #dce5ed;
  border-radius: 1.6rem;
  background: #fff;
}

.mhc-explain summary, .mhc-answers summary {
  padding: 1.6rem 2rem;
  color: #003469;
  font-weight: 700;
  cursor: pointer;
}
.mhc-explain summary:focus-visible, .mhc-answers summary:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(0,171,182,.35); border-radius: 1.6rem;
}
.mhc-explain__body, .mhc-answers__body { padding: 0 2rem 2rem; }
.mhc-explain__body p { margin: 0 0 1.2rem; color: #42536a; font-size: 1.5rem; line-height: 1.55; }
.mhc-explain__body p:last-child { margin-bottom: 0; }

.mhc-answer { padding: 1.4rem 0; border-top: 1px solid #dce5ed; }
.mhc-answer:first-child { padding-top: 0; border-top: 0; }
.mhc-answer__q { margin: 0; color: #003469; font-weight: 700; }
.mhc-answer__said { margin: .4rem 0 0; color: #42536a; }
/* Marker: navy text on white everywhere, with the band tint carried by a dot
   so the state is legible by shape as well as colour and no small text has to
   sit on a tint. */
.mhc-answer__mark {
  display: flex; align-items: center; gap: .8rem;
  margin: .6rem 0 0;
  color: #003469; font-size: 1.4rem; font-weight: 700;
}
.mhc-answer__mark::before {
  flex: none;
  width: 1rem; height: 1rem;
  border: 1px solid #003469; border-radius: 50%;
  background: #cbced0;
  content: "";
}
.mhc-answer__mark[data-marker="Strong"]::before { background: #b1d9a9; }
.mhc-answer__mark[data-marker="Adequate"]::before { background: #a3d5ff; }
.mhc-answer__mark[data-marker="Not sure"]::before { background: #f7f6c5; }
.mhc-answer__mark[data-marker="Gap"]::before { background: #f1615a; }

/* Links out of a priority, always labelled with the page's own title. */
.mhc-actions-list .mhc-links a { color: #003469; text-decoration: underline; }
.mhc-actions-list .mhc-links a + a { margin-left: 1.6rem; }
.mhc-actions-list .mhc-links a:hover { color: #00707a; }

.mhc-expect { margin: 0; color: #42536a; font-size: 1.5rem; line-height: 1.5; }

/* Keep this result: the link and the printout, the two ways to leave with it. */
.mhc-keep {
  margin-top: clamp(2.4rem, 3vw, 4rem);
  padding-top: clamp(2.4rem, 3vw, 4rem);
  border-top: 1px solid #dce5ed;
}
.mhc-keep__buttons { display: flex; flex-wrap: wrap; gap: 1.2rem; }
/* These sit on the white page, where a white button has no edge. */
.mhc-keep .button--white { box-shadow: inset 0 0 0 1px #003469; }
.mhc-keep__note { max-width: 62rem; margin: 1.6rem 0 0; color: #42536a; font-size: 1.5rem; }
.mhc-keep__status:empty { display: none; }
.mhc-keep__status { margin: .8rem 0 0; color: #003469; font-size: 1.5rem; font-weight: 700; }

.mhc-print-foot { display: none; }

/* On paper the result is the whole point, so everything that asks the visitor
   for something is dropped and both panels open regardless of screen state. */
@media print {
  .page-header,
  .page-footer,
  .mhc-next,
  .mhc-extend,
  .mhc-keep,
  .mhc-sent,
  button { display: none !important; }

  body { background: #fff; color: #000; }
  .mhc-result {
    padding: 0;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .mhc-result h2, .mhc-result h3, .mhc-result p, .mhc-result li,
  .mhc-result strong, .mhc-result span, .mhc-result summary, .mhc-result a { color: #000 !important; }
  /* A closed <details> hides its content through the UA's ::details-content
     box, not through the element inside it, so both have to be opened up or
     the printout loses the per-answer list entirely. */
  details::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
  }
  details > *:not(summary) {
    display: block !important;
    content-visibility: visible !important;
  }
  .mhc-explain, .mhc-answers { border-color: #000; }
  .mhc-actions-list li, .mhc-answer, .mhc-area-row { break-inside: avoid; }
  .mhc-print-foot {
    display: block;
    margin: 2.4rem 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid #000;
    font-size: 1.3rem;
    word-break: break-all;
  }
}