/* ==========================================================================
   THE WEBSITE CHECKUP LAYER
   Loaded after art.css, before lp.css, in the one bundle. Like lp.css it
   defines no colour, no type scale and no spacing of its own: every value
   below is a token the rest of the site already sets, and every component it
   can reuse — .btn, .f, .card, .panel, .eyebrow, .mono, .prose — it reuses.

   What is genuinely new is five things, and nothing else:

     1. the entry point on the homepage: one input and one action, on the
        light ground, contained the way every other V5.11 surface is
     2. the checkup's own form card, which is .lp-form's twin: white paper on
        the navy hero panel, with the same light-island token switch
     3. the progress list, which is the only thing on this site that reports
        state over time
     4. .ck-mark, one severity glyph used by every part of the report
     5. the report: header and verdict, what to fix first, findings by area,
        what passed, the bottom line and the offer

   SEVERITY IS NEVER CARRIED BY COLOUR ALONE. Every flag, tile, chip and
   priority row has a WORD in it ("Critical", "Needs Attention") and a SHAPE
   in front of that word which is different per level: a triangle, a diamond,
   a disc, a tick, a hollow square. Print the report in greyscale and it still
   reads; hand it to somebody who cannot separate red from amber and it still
   reads. The colour is a third channel, not the channel.

   V5.18 rewrote everything from section 4 down. The scanner did not change:
   the report did, because a correct report nobody can read is not a finished
   product. See report.php for the six changes and the reason for each.
   ========================================================================== */

/* --- 1. the entry point --------------------------------------------------
   Used on the homepage and on /website-help/. A contained white panel on the
   paper ground with a blue keyline: the only INTERACTIVE object on either
   page, which is where its interest comes from. It is deliberately not
   another coloured band — the homepage already opens on navy and closes on
   blue, and a third coloured surface between them would flatten both. */
.ck-entry {
  background: var(--surface);
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius-feature);
  box-shadow: var(--lift-2);
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.ck-entry-copy h2 { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
.ck-entry-copy .lead { margin-top: var(--s5); max-width: 40ch; }
.ck-entry-copy .eyebrow { margin-bottom: var(--s5); }

/* The motto, set apart. It is the sentence the whole feature exists to prove,
   so it gets the keyline the eyebrows get and nothing else. */
.ck-motto {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 2px solid var(--keyline);
  display: inline-block;
  font-size: var(--t-sm); font-weight: var(--w-bold);
  color: var(--text-2); letter-spacing: var(--tr-text);
}

/* --- 2. the form ---------------------------------------------------------
   One field and one button. On the homepage they sit side by side above
   600px; in the hero they stack, because the hero column is narrow. */
.ck-entry-form .f { gap: 7px; }
.ck-entry-form .ck-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: start; }
.ck-entry-form .ck-row .btn { min-height: 54px; }
.ck-entry-form .hint { margin-top: var(--s2); }

@media (max-width: 62em) {
  .ck-entry { grid-template-columns: minmax(0, 1fr); }
  .ck-entry-copy .lead { max-width: none; }
}
@media (max-width: 34em) {
  .ck-entry-form .ck-row { grid-template-columns: minmax(0, 1fr); }
  .ck-entry-form .ck-row .btn { width: 100%; justify-content: center; }
}

/* The hero form card. Same construction as .lp-form: white paper standing on
   the navy panel, and the same token switch run in reverse so every label,
   border and focus ring inside it is drawn for a light ground. */
.ck-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: start; }
.phero-ck .phero-copy h1 { max-width: 14ch; }
.phero-ck .phero-copy .lead { max-width: 46ch; }

.ck-form-card {
  position: relative; z-index: 2;
  background: var(--paper);
  border-radius: var(--radius-panel);
  padding: clamp(22px, 2.6vw, 34px);
  box-shadow: var(--lift-3);
  scroll-margin-top: var(--s9);

  --bg: var(--paper);          --bg-2: var(--paper-2);
  --surface: var(--paper);     --surface-2: var(--paper-2);
  --text: var(--ink);          --text-2: var(--ink-2);
  --text-dim: var(--ink-3);    --text-faint: var(--ink-4);
  --rule: var(--line);         --rule-strong: var(--line-2);
  --surface-edge: var(--line); --control-edge: var(--edge);
  --link: var(--blue);         --link-hover: var(--blue-deep);
  --mark: var(--blue);         --keyline: var(--blue);  --focus: var(--blue);
  --state-warn: var(--warn);   --state-fault: var(--fault); --state-ok: var(--ok);
  --film: var(--blue-film);
  color: var(--text);
}
.ck-form-h {
  font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3);
  color: var(--text); margin-bottom: var(--s6);
}
.ck-form .btn { margin-top: var(--s5); }
.ck-form-foot {
  margin-top: var(--s6); font-size: var(--t-sm);
  color: var(--text-dim); line-height: 1.55;
}

@media (max-width: 62em) {
  .ck-grid { grid-template-columns: minmax(0, 1fr); }
  .ck-form-card { margin-top: var(--s8); }
}

/* --- 3. the progress list ------------------------------------------------
   The one component on this site that reports state over time. Three states,
   and each one is a word plus a shape as well as a colour: waiting is a
   hollow square, running is a square with a pulsing fill, done is a tick.
   Squares, not circles: a pixel is the site's brand mark and it is never
   rounded.

   V5.18 added the counter and the bar. Both are REAL: the number is the
   stage the scanner has actually reached and the bar is the fraction of
   stages that have actually finished, set from the stream by checkup.js.
   Neither moves on a timer, and if the scan stalls they stop where they are,
   which is the honest thing for them to do.

   The pulse is the only looping animation in the build. It is allowed here
   because it means "this is still happening", which is information, and it
   stops the moment the stage finishes. Under reduced motion the token
   collapse takes the duration to 1ms and the fill simply sits there. */
.ck-stage-sec { padding-block: 0; }
.ck-stage:empty { display: none; }
.ck-stage-sec:has(.ck-stage:empty) { display: none; }

.ck-progress {
  --ck-p: 0;
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius-panel);
  background: var(--surface);
  padding: clamp(20px, 2.6vw, 32px);
  box-shadow: var(--lift-1);
  margin-top: var(--s9);
}
.ck-progress-top {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s3) var(--s5);
}
.ck-progress-h {
  font-size: var(--t-h4); font-weight: var(--w-black);
  letter-spacing: var(--tr-h4); color: var(--text);
  overflow-wrap: anywhere; min-width: 0;
}
.ck-progress-h b { color: var(--mark); font-weight: inherit; }
.ck-progress-n {
  flex: none;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}

/* The bar. A fraction of finished stages, nothing else. */
.ck-bar {
  margin-top: var(--s5);
  height: 4px; border-radius: 999px;
  background: var(--rule); overflow: hidden;
}
.ck-bar > i {
  display: block; height: 100%; width: calc(var(--ck-p) * 100%);
  background: var(--mark);
  transition: width var(--m-panel) var(--e-out);
}

.ck-steps { display: grid; gap: var(--s3); margin-top: var(--s6); }
.ck-step {
  display: grid; grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--s4); align-items: center;
  font-size: var(--t-sm); color: var(--text-faint);
  transition: color var(--m-state) var(--e-out);
}
.ck-step::before {
  content: ""; width: 12px; height: 12px; margin-left: 3px;
  border: 2px solid var(--rule-strong);
  background: transparent;
}
.ck-step[data-state="run"] { color: var(--text); font-weight: var(--w-bold); }
.ck-step[data-state="run"]::before {
  border-color: var(--mark);
  background: var(--mark);
  animation: ck-pulse 1100ms var(--e-inout) infinite;
}
.ck-step[data-state="done"] { color: var(--text-dim); }
.ck-step[data-state="done"]::before {
  border-color: var(--state-ok); background: var(--state-ok);
  /* the tick, as a mask, so it inherits the state colour */
  -webkit-mask: var(--ck-tick) center / 9px 9px no-repeat;
  mask: var(--ck-tick) center / 9px 9px no-repeat;
}
:root {
  --ck-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4 4.4 9.3 10.5 3' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
}
@keyframes ck-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --- 4. the severity mark ------------------------------------------------
   ONE glyph, used by the tiles, the flags, the chips, the priority list and
   the passed grid. Five levels, five different SHAPES, and the colour is the
   third channel rather than the only one: greyscale print, a colour-blind
   reader and a screen reader all still get the level, because the word is
   always beside it and the shape is always different.

   It is decorative in the markup (aria-hidden), because the word next to it
   already says the same thing and announcing both would read every finding
   twice. */
.ck-mark {
  flex: none;
  display: inline-block; width: 11px; height: 11px;
  background: currentColor;
}
.ck-mark[data-sev="critical"]    { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ck-mark[data-sev="important"]   { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ck-mark[data-sev="recommended"] { border-radius: 999px; }
.ck-mark[data-sev="passed"] {
  -webkit-mask: var(--ck-tick) center / 11px 11px no-repeat;
  mask: var(--ck-tick) center / 11px 11px no-repeat;
}
.ck-mark[data-sev="unknown"] { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }

/* The five colours, set once as a colour on the ELEMENT so the mark, the
   number and the word inside a tile or a flag all take it from currentColor.
   Nothing below re-states a hex. */
.ck-report [data-sev="critical"]    { --ck-tone: var(--state-fault); }
.ck-report [data-sev="important"]   { --ck-tone: var(--state-warn); }
.ck-report [data-sev="recommended"] { --ck-tone: var(--mark); }
.ck-report [data-sev="passed"]      { --ck-tone: var(--state-ok); }
.ck-report [data-sev="unknown"]     { --ck-tone: var(--text-faint); }

/* --- 5. the report -------------------------------------------------------
   Header, verdict, nav, what to fix first, the findings by area, what
   passed, the bottom line, the offer.

   The order is the order somebody reads it in: what did you check and how did
   it come out, what should I do about it, and then the evidence. The old
   report opened with the evidence. */
.ck-report { margin-top: var(--s9); scroll-margin-top: calc(var(--hdr-h) + 16px); }

/* NO RING ON THE REPORT ITSELF. It carries tabindex="-1" so that focus can be
   moved to it when it arrives -- that is what puts a screen reader at the top
   of the result instead of leaving it in the form -- and tabindex="-1" means
   it is never reachable by Tab, so a ring here can never be the answer to
   "where am I?". Chromium matches :focus-visible on a programmatic focus when
   the visitor has not touched the page yet, which is exactly the homepage
   handoff: arrive, scan, and a 2px outline is drawn around fourteen thousand
   pixels of report. The live region announces the result; the outline only
   ever framed it. */
.ck-report:focus, .ck-report:focus-visible { outline: none; }

/* --- the header ----------------------------------------------------------
   What was checked, when, and the one-word verdict. It is a band rather than
   a card: the report is a document, and a document has a masthead. */
.ck-rpt-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: var(--s5) var(--s7);
  padding-bottom: var(--s6);
  border-bottom: 2px solid var(--keyline);
}
.ck-rpt-id { min-width: 0; }
.ck-rpt-site {
  margin-top: var(--s4);
  font-size: var(--t-h3); font-weight: var(--w-black);
  line-height: var(--lh-h3); letter-spacing: var(--tr-h3);
  color: var(--text); overflow-wrap: anywhere;
}
.ck-rpt-when {
  margin-top: var(--s3);
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.06em; color: var(--text-faint);
}

/* The verdict word. Shape, word, colour — in that order. */
.ck-status {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: 10px 18px;
  border: 2px solid currentColor; border-radius: var(--radius-pill);
  font-size: var(--t-sm); font-weight: var(--w-black);
  letter-spacing: var(--tr-text);
  color: var(--ck-status-tone, var(--text-faint));
  background: var(--surface);
}
.ck-status-mark { flex: none; width: 13px; height: 13px; background: currentColor; }
.ck-status-w { white-space: nowrap; }
.ck-report[data-status="work"]      { --ck-status-tone: var(--state-fault); }
.ck-report[data-status="attention"] { --ck-status-tone: var(--state-warn); }
.ck-report[data-status="better"]    { --ck-status-tone: var(--mark); }
.ck-report[data-status="good"]      { --ck-status-tone: var(--state-ok); }
.ck-report[data-status="error"]     { --ck-status-tone: var(--text-faint); }
.ck-report[data-status="work"] .ck-status-mark      { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ck-report[data-status="attention"] .ck-status-mark { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ck-report[data-status="better"] .ck-status-mark    { border-radius: 999px; }
.ck-report[data-status="good"] .ck-status-mark {
  -webkit-mask: var(--ck-tick) center / 13px 13px no-repeat;
  mask: var(--ck-tick) center / 13px 13px no-repeat;
}
.ck-report[data-status="error"] .ck-status-mark {
  background: transparent; box-shadow: inset 0 0 0 2px currentColor;
}

/* --- the verdict --------------------------------------------------------- */
.ck-verdict { margin-top: var(--s7); }
.ck-head { max-width: 24ch; }
.ck-sub { margin-top: var(--s5); max-width: 56ch; color: var(--text-dim); }

/* The four tiles. Shape, number, word — the number is the loudest thing on
   the page after the verdict, and a zero is dimmed rather than removed,
   because "0 critical" is the most reassuring line in the whole report. */
.ck-tiles {
  margin-top: var(--s8);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
}
.ck-tile {
  color: var(--ck-tone);
  border: 1px solid var(--surface-edge);
  border-top: 3px solid currentColor;
  border-radius: var(--radius-inset);
  background: var(--surface);
  padding: var(--s5) var(--s5) var(--s6);
  min-width: 0;
}
.ck-tile .ck-mark { display: block; }
.ck-tile-n {
  display: block; margin-top: var(--s4);
  font-size: var(--t-h2); font-weight: var(--w-black);
  line-height: 0.9; letter-spacing: var(--tr-h2);
  color: var(--text);
}
.ck-tile-l {
  display: block; margin-top: var(--s3);
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.ck-tile[data-zero="1"] { opacity: 0.5; }
.ck-tile[data-zero="1"] .ck-tile-n { color: var(--text-faint); }

.ck-note { margin-top: var(--s5); font-size: var(--t-sm); color: var(--text-dim); }

@media (max-width: 46em) {
  .ck-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- the section nav -----------------------------------------------------
   One row of anchors, each with its area's worst level and its count. It
   sticks under the site header on a wide screen, where there is room for it,
   and scrolls horizontally on a phone rather than wrapping into four lines
   of chips above the thing they are meant to introduce. */
.ck-nav {
  margin-top: var(--s8);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.ck-nav-in {
  display: flex; gap: var(--s3);
  padding-block: var(--s4);
  overflow-x: auto; scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.ck-chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--surface-edge); border-radius: var(--radius-pill);
  font-size: var(--t-xs); font-weight: var(--w-bold);
  color: var(--text-2); text-decoration: none;
  background: var(--surface);
  transition: border-color var(--m-state) var(--e-out),
              background-color var(--m-state) var(--e-out);
}
.ck-chip .ck-mark { color: var(--ck-tone); }
.ck-chip b {
  font-family: var(--font-mono); font-size: var(--t-mono);
  color: var(--text-faint); font-weight: var(--w-mid);
}
.ck-chip:hover { border-color: var(--control-edge); background: var(--surface-2); }
.ck-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* Above the breakpoint the row wraps rather than scrolling: a chip that is
   half off the edge of a sticky bar is a chip nobody knows is there, and on a
   wide screen there is no reason to hide one. Below it, it scrolls, because
   seven chips wrapped into four lines would be taller than the section they
   introduce. */
@media (min-width: 62em) {
  .ck-nav { position: sticky; top: var(--hdr-h); z-index: 3; }
  .ck-nav-in { flex-wrap: wrap; overflow: visible; }
}

/* --- fix these first -----------------------------------------------------
   A slice of the findings below, never a new judgement about them, and it is
   only called "fix these first" when something critical or important is
   actually in it. Three recommendations dressed up as an emergency is the
   move this whole feature exists not to make. */
.ck-first {
  margin-top: var(--s10);
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius-feature);
  background: var(--surface);
  box-shadow: var(--lift-2);
  padding: clamp(24px, 3vw, 44px);
}
.ck-first[data-urgent="1"] { border-color: var(--rule-strong); }
.ck-first-head { max-width: 54ch; }
.ck-first-lead { margin-top: var(--s4); font-size: var(--t-sm); color: var(--text-dim); }
.ck-first-list { margin-top: var(--s7); display: grid; gap: var(--s4); }
.ck-first-item {
  color: var(--ck-tone);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s3) var(--s5);
  align-items: start;
  padding: var(--s5) var(--s5) var(--s5) 0;
  border-top: 1px solid var(--rule);
}
.ck-first-item:first-child { border-top: 0; padding-top: 0; }
.ck-first-n {
  flex: none;
  font-family: var(--font-mono); font-size: var(--t-h4); font-weight: var(--w-mid);
  line-height: 1.1; color: currentColor;
  min-width: 1.4em;
}
.ck-first-body { min-width: 0; }
.ck-first-t {
  font-size: var(--t-body); font-weight: var(--w-bold);
  color: var(--text); line-height: 1.4; overflow-wrap: anywhere;
}
.ck-first-do { margin-top: var(--s3); font-size: var(--t-sm); color: var(--text-dim); line-height: 1.55; }
.ck-first-jump { margin-top: var(--s3); font-size: var(--t-sm); }
.ck-first-more { margin-top: var(--s6); font-size: var(--t-sm); color: var(--text-faint); }
@media (max-width: 46em) {
  .ck-first-item { grid-template-columns: auto minmax(0, 1fr); }
  .ck-first-item .ck-flag { grid-column: 2; order: -1; justify-self: start; }
}

/* --- sections ------------------------------------------------------------ */
.ck-sections { margin-top: var(--s10); display: grid; gap: var(--s10); }
.ck-sec { scroll-margin-top: calc(var(--hdr-h) + 72px); }
.ck-sec-head { max-width: 52ch; }
.ck-sec-count {
  margin-top: var(--s3);
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.ck-sec-note { margin-top: var(--s3); font-size: var(--t-sm); color: var(--text-dim); }
.ck-list { margin-top: var(--s6); display: grid; gap: var(--s5); }

/* --- one finding ---------------------------------------------------------
   Flag and title, then the two sentences that say what we saw and why it
   matters, then the action in its own inset, then the technical name of the
   check one click away.

   The labels went. "What we found." in front of a sentence that plainly
   states what we found is the report telling the reader how to read, forty
   times in a row, and it was the thing that made the old version feel like a
   form. "What to do" stayed, because it is the part somebody acts on. */
.ck-item {
  color: var(--ck-tone);
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: var(--s6) var(--s7);
  border-left: 3px solid currentColor;
  min-width: 0;
  scroll-margin-top: calc(var(--hdr-h) + 72px);
}
.ck-item[data-sev="critical"] { background: var(--fault-film); }
.ck-item[data-sev="unknown"]  { background: var(--bg-2); }

.ck-item-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3) var(--s4); min-width: 0;
}
.ck-item-h {
  font-size: var(--t-h4); font-weight: var(--w-black);
  letter-spacing: var(--tr-h4); line-height: 1.25; color: var(--text);
  flex: 1 1 18ch; min-width: 0; overflow-wrap: anywhere;
}

/* The flag. Shape first, word second, colour third. */
.ck-flag {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  color: var(--ck-tone, var(--text-faint));
}

.ck-item-body { margin-top: var(--s5); display: grid; gap: var(--s4); max-width: 72ch; }
.ck-found {
  font-size: var(--t-body); line-height: 1.6; color: var(--text-2);
  overflow-wrap: anywhere;
}
.ck-why { font-size: var(--t-sm); line-height: 1.65; color: var(--text-dim); }

/* The action. An inset rather than a third paragraph, because it is the only
   part of a finding anybody has to do anything with. */
.ck-do {
  margin-top: var(--s5);
  background: var(--bg-2);
  border-radius: var(--radius-inset);
  padding: var(--s5) var(--s6);
  max-width: 72ch;
}
.ck-do p { font-size: var(--t-sm); line-height: 1.6; color: var(--text-2); }
.ck-do-l {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: var(--t-mono);
  font-weight: var(--w-mid); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint);
}

/* The technical name of the check, and the value we read. Closed by default:
   the owner does not need it and the developer they forward this to opens one
   line to get it. Nothing that changes the severity of a finding is in here. */
.ck-tech { margin-top: var(--s4); }
.ck-tech > summary {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.06em; color: var(--text-faint);
  padding: 4px 0;
}
.ck-tech > summary::-webkit-details-marker { display: none; }
.ck-tech > summary::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); margin-bottom: 2px;
  transition: transform var(--m-state) var(--e-out);
}
.ck-tech[open] > summary::before { transform: rotate(45deg); margin-bottom: 0; }
.ck-tech > summary:hover { color: var(--text-dim); }
.ck-tech > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ck-tech-dl {
  margin-top: var(--s3);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 6px var(--s5);
  padding: var(--s4) var(--s5);
  border-left: 2px solid var(--rule);
}
.ck-tech-dl dt {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.06em; color: var(--text-faint);
}
.ck-tech-dl dd {
  font-family: var(--font-mono); font-size: var(--t-mono);
  text-transform: none; letter-spacing: var(--tr-mono);
  color: var(--text-dim); overflow-wrap: anywhere;
}

@media (max-width: 40em) {
  .ck-item { padding: var(--s5); }
  .ck-item-h { flex-basis: 100%; }
  .ck-do { padding: var(--s4) var(--s5); }
  .ck-tech-dl { grid-template-columns: minmax(0, 1fr); gap: 2px var(--s4); }
  .ck-tech-dl dd { margin-bottom: 6px; }
}

/* --- what passed ---------------------------------------------------------
   Titles only, three across. It is on the page because a report that lists
   only faults is a sales pitch, and it is compact because giving twenty
   clean results the same weight as five real findings was the main reason
   the old report felt like it never ended. */
.ck-passed {
  margin-top: var(--s6);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3) var(--s6);
}
.ck-passed li {
  color: var(--state-ok);
  display: grid; grid-template-columns: 13px minmax(0, 1fr);
  gap: var(--s3); align-items: start;
  padding-block: var(--s3);
  border-top: 1px solid var(--rule);
  min-width: 0;
}
.ck-passed li .ck-mark { margin-top: 4px; }
.ck-passed span {
  font-size: var(--t-sm); color: var(--text-2); line-height: 1.45;
  overflow-wrap: break-word;
}
@media (max-width: 62em) { .ck-passed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40em) { .ck-passed { grid-template-columns: minmax(0, 1fr); } }

/* --- the bottom line -----------------------------------------------------
   Three or four sentences, every one of them assembled from a count or a
   title printed elsewhere on the same page. It is the paragraph somebody
   reads out to their business partner. */
.ck-bottom {
  margin-top: var(--s10);
  display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: var(--s5) var(--s8);
  padding-top: var(--s7);
  border-top: 2px solid var(--keyline);
}
.ck-bottom-h { color: var(--text); }
.ck-bottom-body { display: grid; gap: var(--s4); max-width: 60ch; }
.ck-bottom-body p { font-size: var(--t-body); line-height: 1.65; color: var(--text-dim); }
.ck-bottom-lead { color: var(--text) !important; font-weight: var(--w-bold); }
@media (max-width: 56em) { .ck-bottom { grid-template-columns: minmax(0, 1fr); } }

/* --- the offer -----------------------------------------------------------
   The closer's composition, at section scale: message left, actions on a
   tinted inset right. It is deliberately the same shape as the band at the
   bottom of every page, because it is the same offer. */
.ck-cta {
  margin-top: var(--s10);
  background: var(--navy);
  border-radius: var(--radius-feature);
  padding: clamp(28px, 3.6vw, 52px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;

  --bg: var(--navy);           --bg-2: var(--navy-2);
  --surface: var(--navy-3);    --surface-2: var(--navy-4);
  --text: var(--snow);         --text-2: var(--snow);
  --text-dim: var(--snow-2);   --text-faint: var(--snow-3);
  --rule: var(--line-dark);    --rule-strong: var(--navy-5);
  --surface-edge: var(--line-dark); --control-edge: var(--edge-dark);
  --link: var(--blue-light);   --link-hover: var(--cyan-soft);
  --mark: var(--blue-light);   --keyline: var(--cyan); --focus: var(--cyan);
  --film: var(--dark-film);
  color: var(--text);
}
.ck-cta h3 { color: var(--text); }
.ck-cta .lead { margin-top: var(--s5); color: var(--text-dim); max-width: 46ch; }
.ck-cta-act {
  background: var(--film);
  border-radius: var(--radius-panel);
  padding: clamp(20px, 2.4vw, 30px);
}
.ck-cta-note {
  margin-top: var(--s5); font-size: var(--t-sm);
  color: var(--text-faint); line-height: 1.55; overflow-wrap: anywhere;
}
@media (max-width: 56em) {
  .ck-cta { grid-template-columns: minmax(0, 1fr); }
  .ck-cta .lead { max-width: none; }
}

/* The second path, under the offer. One sentence and a link, on the light
   ground below the navy panel rather than inside it: it is an alternative to
   the offer, not part of it, and a second button in the panel would turn one
   clear action into a choice. */
.ck-cta-alt {
  margin-top: var(--s6);
  font-size: var(--t-sm); color: var(--text-dim); line-height: 1.6;
  max-width: 70ch;
}
.ck-cta-alt .arrow { display: inline-flex; margin-left: 4px; min-height: 0; }

/* The slim one, directly under the priority list. One sentence and one
   button: the same offer at the moment somebody has just read three things
   to do and decided they are not doing them. */
.ck-cta-slim {
  margin-top: var(--s5);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius-panel);
  gap: var(--s5) var(--s7);
}
.ck-cta-slim-t {
  font-size: var(--t-body); font-weight: var(--w-bold);
  color: var(--text); line-height: 1.5; max-width: 56ch;
}
@media (max-width: 46em) {
  .ck-cta-slim { grid-template-columns: minmax(0, 1fr); }
  .ck-cta-slim .btn { width: 100%; justify-content: center; }
}

/* --- what this report is, and is not -------------------------------------
   V5.19. This was two paragraphs of 14px grey text lying loose under the
   navy offer, starting at the report's left edge and running most of its
   width -- body copy dropped at the bottom of a page rather than a part of
   the report. It is now a contained note, on the same left edge and the same
   width as everything else in the report, with its own heading.

   Three rules it keeps:

     1. It is NOT fine print. The type is the report's own small body size,
        not smaller, because the thing this note says -- we did not log in,
        this is one page, a clean result is not a guarantee -- is the most
        important honesty on the page. A disclaimer nobody can read has not
        been given to anybody.
     2. It is clearly secondary. A quiet tint, a hairline, a muted heading:
        the reader can see at a glance that the report ended above it.
     3. The line length is short enough to read. The panel spans the report;
        the text inside it stops at 68 characters. */
.ck-fine {
  margin-top: var(--s9);
  padding: clamp(26px, 2.6vw, 36px) clamp(22px, 2.4vw, 34px) clamp(28px, 2.8vw, 38px);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-panel);
  /* The same two-column proportion as "The bottom line" directly above it, so
     the last two blocks of the report are read as one piece of writing rather
     than as a report and then a legal footer. */
  display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: var(--s5) var(--s8); align-items: start;
}
.ck-fine-h { color: var(--text-faint); padding-top: var(--s4); margin: 0; }
.ck-fine-h::before { width: 26px; background: var(--rule-strong); }
.ck-fine-h b { color: inherit; font-weight: inherit; }
.ck-fine-body { display: grid; gap: var(--s5); max-width: 62ch; }
.ck-fine-body p { font-size: var(--t-sm); color: var(--text-dim); line-height: 1.65; }
.ck-fine-body b { color: var(--text-2); font-weight: var(--w-bold); }

@media (max-width: 56em) {
  .ck-fine { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .ck-fine-body { max-width: none; }
}
@media (max-width: 34em) {
  .ck-fine { border-radius: var(--radius-card); }
}

/* --- the live region -----------------------------------------------------
   Empty until something has to be announced, exactly like .f-live on the
   intake forms. It carries the scan's state for a screen reader, which is
   the only way the progress list means anything to somebody who cannot see
   the squares change. */
.ck-live {
  margin-top: var(--s5);
  font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--text-2);
}
.ck-live:empty { display: none; }

/* A scan in flight disables its own button rather than letting a second one
   start behind the first. */
.ck-form .btn[aria-disabled="true"],
.ck-entry-form .btn[aria-disabled="true"] {
  opacity: 0.6; pointer-events: none;
}

/* The aside on /website-checkup/ reuses .phero-note, which is written for the
   navy hero. On the light ground it needs its own top rule back. */
.ck-aside { border-top: 1px solid var(--rule); padding-top: var(--s6); }

/* The one price on a report. Its own line under the lead rather than inside
   it, because a figure buried mid-sentence is missed, and set in the panel's
   own body size rather than as a price component: this is the end of a report
   somebody asked for, not an offer. It never appears on a report with a
   critical finding in it -- see checkup_render_cta(). */
.ck-cta-price {
  margin-top: var(--s5);
  font-size: var(--t-body); font-weight: var(--w-bold);
  color: var(--text); line-height: 1.5; max-width: 40ch;
}

/* --- 6. printed and saved as PDF -----------------------------------------
   A checkup gets forwarded. Somebody prints it, or saves it to PDF and sends
   it to whoever built the site, and what arrives has to be the findings
   rather than a navy advertisement and a row of chips that do not click.

   Every collapsed technical block is opened, because on paper there is
   nothing to click, and the whole point of forwarding the report is that the
   person receiving it wants exactly that. */
@media print {
  .ck-nav, .ck-cta-slim, .ck-first-jump, .ck-live, .ck-progress { display: none !important; }
  .ck-cta-alt .arrow { display: none; }

  .ck-report { margin-top: 0; }
  .ck-report, .ck-first, .ck-item, .ck-tile, .ck-status {
    box-shadow: none !important;
    background: #fff !important;
  }
  .ck-first, .ck-item, .ck-tile { border-color: #999 !important; }
  .ck-item { break-inside: avoid; page-break-inside: avoid; }
  .ck-first-item { break-inside: avoid; page-break-inside: avoid; }
  .ck-sec { break-inside: auto; }
  .ck-sec-head, .ck-first-head { break-after: avoid; page-break-after: avoid; }

  /* Every technical block open. Three mechanisms, because one engine's
     <details> is another engine's ::details-content: the old UA rule is
     `display: none` on the children, the current one hides a generated part
     with content-visibility, and neither is reachable from the page in every
     browser -- so checkup.js also sets the `open` attribute on beforeprint
     and takes it off again afterwards. Belt, braces and a second belt,
     because the printed report is the copy that gets forwarded to whoever
     will actually do the work, and the technical name of the check is the
     part they need. */
  .ck-tech[open] > summary, .ck-tech > summary { color: #444 !important; }
  .ck-tech { display: block !important; }
  .ck-tech > *:not(summary) { display: block !important; }
  .ck-tech::details-content { content-visibility: visible !important; block-size: auto !important; }
  .ck-tech-dl { display: grid !important; }

  /* The offer, printed as a line of text rather than as a panel. */
  .ck-cta {
    background: #fff !important; color: #000 !important;
    border: 1px solid #999; border-radius: 0;
    padding: 12pt; margin-top: 18pt;
    display: block;
  }
  .ck-cta h3, .ck-cta .lead, .ck-cta-price, .ck-cta-note { color: #000 !important; }
  .ck-cta-act .btn { display: none !important; }
  .ck-cta-act { background: none !important; padding: 0; }

  .ck-fine { background: none !important; border-color: #ccc !important;
              padding: 16px 0 0 !important; border-width: 1px 0 0 !important;
              border-radius: 0 !important; }
  .ck-fine p { color: #444 !important; }
}