/* KoiShark tier quiz — styles.
   Generated from koishark-tier-quiz.html. Namespaced ks-. */

/* ==========================================================================
   1. DESIGN TOKENS  —  swap this block to retheme the quiz.
   Nothing below this block hard-codes a color, font, or radius.
   ========================================================================== */
.ks-quiz {
  --ks-ink:        #0A2226;
  --ks-muted:      #5C7A7C;
  --ks-hairline:   #D3E0DE;
  --ks-surface:    #F1F5F4;
  --ks-paper:      #FFFFFF;

  --ks-brand:      #7BB5B2;   /* KoiShark green */
  --ks-shallow:    #C9E2DF;

  --ks-t-starter:    #7BB5B2;
  --ks-t-pro:        #2E7A78;
  --ks-t-enterprise: #0E3B44;

  --ks-koi:        #E2603A;   /* tier badges */

  --ks-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --ks-body:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --ks-label:   "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --ks-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;  /* test bar only */

  --ks-r-sm: 4px;
  --ks-r-md: 10px;
  --ks-r-lg: 18px;

  --ks-step: clamp(1.2rem, 2.4vw, 1.9rem);

  --ks-help-gap: 1.4rem;    /* equal space above and below the question help line */
  --ks-type: 1.13;          /* readable-type multiplier; every body/heading font-size
                               is calc(base * this). Never set html{font-size} — this
                               is embedded in a Squarespace page. Dialed back on phones. */
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
.ks-quiz *, .ks-quiz *::before, .ks-quiz *::after { box-sizing: border-box; }
.ks-quiz {
  font-family: var(--ks-body);
  color: var(--ks-ink);
  background: var(--ks-surface);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* No container queries any more: the layout is single-column at every width,
     so nothing keys off .ks-quiz's own width. `container-type` (and the
     containment it brings) is removed — it behaved differently once this was
     wrapped in Squarespace theme markup. Remaining breakpoints are @media only. */
}
.ks-quiz p, .ks-quiz h1, .ks-quiz h2, .ks-quiz h3, .ks-quiz ul, .ks-quiz li { margin: 0; padding: 0; }
.ks-quiz ul { list-style: none; }
.ks-quiz button { font: inherit; cursor: pointer; }
.ks-quiz :focus-visible {
  outline: 2px solid var(--ks-t-pro);
  outline-offset: 3px;
  border-radius: var(--ks-r-sm);
}

/* Fix 1 — was max-width: 1460px with wider side padding, centering the shell
   and leaving a dead zone on both edges at wide viewports. Removed the cap so
   the shell uses the full panel width; only the side padding now controls the
   edge gap. Top/bottom padding unchanged — this is a horizontal-only fix. */
.ks-shell {
  max-width: none; margin: 0 auto;
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.25rem, 4vw, 3rem);
  padding-bottom: 4rem;
  padding-left: clamp(1.25rem, 4vw, 3rem);
}

/* --- eyebrow / utility type ---------------------------------------------- */
.ks-eyebrow {
  font-family: var(--ks-label);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ks-muted);
}

/* ==========================================================================
   3. SIGNATURE ELEMENT — the depth gauge.
   During the quiz it tracks progress. On the results it becomes the tier
   scale: deeper water = higher tier. Same object, two jobs.
   ========================================================================== */
/* Single column at every width. The depth gauge lies horizontally across the
   top; the panel fills the full content width beneath it. (Was a 152px rail +
   1fr grid that only collapsed under an @container (max-width: 780px) query —
   which behaved unpredictably once embedded in Squarespace.) */
.ks-stage { display: block; }

.ks-gauge { position: static; height: auto; width: 100%; padding-bottom: 1.9rem; display: flex; }
.ks-gauge-track {
  position: relative; width: 100%; height: 2px;
  background: linear-gradient(to right, var(--ks-shallow), var(--ks-t-enterprise));
}
.ks-gauge-fill {
  position: absolute; inset: 0 auto auto 0; height: 2px;
  background: var(--ks-ink); width: calc(var(--ks-p) * 1%);
  transition: width .55s cubic-bezier(.22,.8,.3,1);
}
.ks-gauge-dot {
  position: absolute; top: 50%; left: calc(var(--ks-p) * 1%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ks-paper); border: 2px solid var(--ks-ink);
  transform: translate(-50%, -50%);
  transition: left .55s cubic-bezier(.22,.8,.3,1);
}
.ks-gauge-label {
  position: absolute; left: 0; top: 14px; transform: none;
  font-family: var(--ks-label); font-weight: 600; font-size: 0.72rem; letter-spacing: .06em;
  color: var(--ks-muted); white-space: nowrap;
}

/* genuine small screens */
@media (max-width: 640px) {
  .ks-quiz { --ks-type: 1.03; }              /* dial the type bump back on phones */
  .ks-reason { grid-template-columns: 1fr; gap: .3rem; }
  .ks-reason-tier { display: inline-block; }
}

/* ==========================================================================
   4. QUESTIONS
   ========================================================================== */
.ks-panel { min-height: 26rem; position: relative; }
.ks-panel:has(.ks-result-head) { min-height: 0; }
/* Fix #3 — question screens lock to the tallest question's height, measured in
   JS into --ks-stage-height. renderQuestion() adds this class; the picker and
   results screens never carry it and size naturally. Falls back to the 26rem
   floor if the measurement never runs. */
/* Item 3 — keep the locked minimum height, but centre the question block
   vertically inside it so short (two-option) questions do not leave a void
   below the buttons. min-height, not height, so a taller-than-measured
   question still grows the panel rather than clipping. */
.ks-panel-locked {
  min-height: var(--ks-stage-height, 26rem);
  display: flex; flex-direction: column; justify-content: center;
}
.ks-ghost {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--ks-surface); pointer-events: none;
  opacity: 1; transition: opacity .18s ease-out;
}


.ks-q {
  font-family: var(--ks-display);
  font-weight: 700;
  font-size: clamp(calc(1.55rem * var(--ks-type)), 3.6vw, calc(2.35rem * var(--ks-type)));
  line-height: 1.3;              /* was 1.2; loosened for the longer question titles */
  letter-spacing: -0.01em;       /* loosened from -0.02em now the text isn't all caps */
  max-width: 860px;              /* was 720px (item 9); widened so long titles keep to two lines */
  text-transform: none;          /* defensive: the Squarespace theme uppercases bare h2 */
  font-style: normal;
}
/* Item 10 — helper text: 20px, body ink at ~70% rather than the light grey,
   capped at 640px. Scoped with .ks-quiz (like the margin rule below and the
   Fix #4 colour pins) so the embedding Squarespace theme's bare `p` rules
   can't out-specify the font-size and flatten it to the theme size. */
.ks-quiz .ks-q-help { margin-top: .7rem; color: var(--ks-ink); opacity: .7; font-size: 20px; max-width: 640px; }
/* Fix #2 — centre the help line: equal gap to the question above and to the
   first option below, both driven by one token, scoped past `.ks-quiz p{margin:0}`.
   Picker variants (.ks-q-help-wide / .ks-options-grid) are excluded. */
.ks-quiz .ks-q-help:not(.ks-q-help-wide) { margin-top: var(--ks-help-gap); }

/* Item 1 — the header area (title + optional help) sizes to its content; the
   old fixed 13.75rem reserve is gone. One fixed 40px gap sits below it, so the
   answers start at a different height on each question. Item 3's flex-centring
   on .ks-panel-locked keeps the whole block off the top edge. questionBodyHTML()
   still wraps heading + help in .ks-qhead; the picker builds its own heading and
   never uses .ks-qhead, so it is unaffected. */
.ks-quiz .ks-qhead + .ks-options { margin-top: 40px; }
.ks-retake {
  margin-top: 0; margin-bottom: 1.4rem; padding: .8rem 1rem;
  border-left: 3px solid var(--ks-brand); background: var(--ks-surface);
  border-radius: 0 8px 8px 0; color: var(--ks-ink);
}

.ks-options { margin-top: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: .6rem; max-width: 820px; }
/* Item 2 — one grid rule, keyed only off the option count (targetColumns() in
   the JS): 2 options -> 2 cols, 3 -> 3 cols, 4 -> 2 cols / 2 rows. The grid
   always fills the full card width. Item 11 — align-items: stretch (grid
   default, stated here for intent) plus height:100% on the card makes every
   card in a row the same height. */
.ks-options-2up { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .8rem; align-items: stretch; }
.ks-options-2up .ks-opt:hover { transform: translateY(-1px); }
.ks-options-3up { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem .8rem; align-items: stretch; }
.ks-options-3up .ks-opt:hover { transform: translateY(-1px); }
.ks-options-2up .ks-opt, .ks-options-3up .ks-opt { height: 100%; }

/* Item 2 — below 768px every answer set is a single full-width column. */
@media (max-width: 768px) {
  .ks-options-2up, .ks-options-3up { grid-template-columns: 1fr; max-width: none; }
  .ks-options-2up .ks-opt, .ks-options-3up .ks-opt { height: auto; }
}

.ks-opt {
  color: var(--ks-ink);
  display: flex; align-items: center; gap: .9rem;
  width: 100%; text-align: left;
  background: var(--ks-paper);
  border: 1px solid var(--ks-hairline);
  border-radius: var(--ks-r-md);
  padding: 1rem 1.15rem;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.ks-opt:hover { border-color: var(--ks-brand); transform: translateX(3px); }
.ks-opt[aria-pressed="true"] {
  border-color: var(--ks-ink);
  box-shadow: inset 0 0 0 1px var(--ks-ink);
}
.ks-opt-key {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--ks-hairline);
  display: grid; place-items: center;
  font-family: var(--ks-label); font-weight: 600; font-size: .68rem; color: var(--ks-muted);
}
.ks-opt[aria-pressed="true"] .ks-opt-key { background: var(--ks-ink); border-color: var(--ks-ink); color: var(--ks-paper); }
.ks-opt-text { font-size: calc(1rem * var(--ks-type)); }
.ks-opt-text small { display: block; color: var(--ks-muted); font-size: calc(.85rem * var(--ks-type)); margin-top: .15rem; }

/* Picker only. .ks-options is shared with renderQuestion(), which must stay
   single-column, so the grid lives on this modifier. */
.ks-options-grid { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.ks-options-grid .ks-opt { padding: .8rem 1rem; }
.ks-options-grid .ks-opt:hover { transform: translateY(-1px); }
.ks-options-grid .ks-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Picker heading + intro. The base .ks-q (24ch) / .ks-q-help (52ch) reading
   measures are for question screens; the picker heading fills the panel and the
   picker intro keeps a wide-but-readable 72ch measure. */
.ks-q-wide { max-width: none; }
.ks-q-help-wide { max-width: 72ch; }
/* Picker paragraph equidistant: same gap above as below (the grid's inherited
   margin-top). Scoped with .ks-quiz so it outweighs the `.ks-quiz p { margin:0 }`
   reset, which a bare .ks-q-help-wide selector cannot; same clamp as the grid so
   the two gaps track together at every width. */
.ks-quiz .ks-q-help-wide { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
@media (max-width: 640px) {
  .ks-options-grid { grid-template-columns: 1fr; max-width: 640px; }
}

.ks-nav { margin-top: 1.6rem; display: flex; gap: .8rem; align-items: center; }
.ks-btn {
  border: 1px solid var(--ks-ink); background: var(--ks-ink); color: var(--ks-paper);
  border-radius: 999px; padding: .7rem 1.5rem; font-weight: 600; font-size: calc(.95rem * var(--ks-type));
  transition: opacity .16s;
}
.ks-btn:hover { opacity: .86; }
.ks-btn[disabled] { opacity: .3; cursor: not-allowed; }

/* ==========================================================================
   5. RESULTS
   ========================================================================== */
/* Fix #5 — was 30ch, which wrapped the headline into a narrow column beside the
   full-width panel. The eyebrow shares this element, so both now run panel-wide. */
.ks-result-head { max-width: none; }
.ks-result-head h1 {
  font-family: var(--ks-display); font-weight: 700;
  font-size: clamp(calc(2.1rem * var(--ks-type)), 5.4vw, calc(3.4rem * var(--ks-type)));
  line-height: 1.1; letter-spacing: -0.025em;
  margin-top: .5rem;
  color: var(--ks-ink);       /* explicit: the theme colours bare h1 (Fix #4) */
  text-transform: none;       /* explicit: the theme uppercases bare h1 (Fix #1/#6) */
  font-style: normal;
  padding-bottom: .08em;      /* clears descenders (g p y j q) at this line-height (Fix #5) */
  overflow: visible;
}
/* Fix #6 — the generated headline runs ~25–120 chars; step the size down by
   length. Less aggressive than before now the panel is ~1360px, not 827px. */
.ks-result-head h1[data-len="md"] { font-size: clamp(calc(1.95rem * var(--ks-type)), 4.6vw, calc(3rem * var(--ks-type))); letter-spacing: -0.02em; }
.ks-result-head h1[data-len="lg"] { font-size: clamp(calc(1.7rem * var(--ks-type)), 4vw, calc(2.5rem * var(--ks-type))); letter-spacing: -0.015em; line-height: 1.16; }

.ks-gates {
  margin-top: 2rem;
  background: var(--ks-ink); color: var(--ks-paper);
  border-radius: var(--ks-r-lg);
  padding: clamp(1.3rem, 3vw, 1.9rem);
}
.ks-gates h2 {
  font-family: var(--ks-display); font-weight: 700;
  font-size: clamp(calc(1.15rem * var(--ks-type)), 2.4vw, calc(1.45rem * var(--ks-type))); line-height: 1.25;
  letter-spacing: -0.015em; max-width: 40ch;
  color: var(--ks-paper);        /* Fix #4 — was inherited; theme colours bare h2 dark-on-dark */
  text-transform: none;
}
.ks-needs { margin-top: .9rem; }
.ks-needs li { margin-top: .7rem; padding-left: 1.05rem; position: relative; }
.ks-needs li::before { content: ""; position: absolute; left: 0; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ks-need { display: block; font-family: var(--ks-display); font-weight: 600; font-size: calc(.98rem * var(--ks-type)); }
.ks-need-why { display: block; margin-top: .12rem; font-size: calc(.88rem * var(--ks-type)); color: var(--ks-muted); max-width: 75ch; }
.ks-gates .ks-needs { color: var(--ks-brand); }
.ks-gates .ks-need { color: var(--ks-paper); }
.ks-gates .ks-need-why { color: rgba(255,255,255,.62); }
.ks-covered .ks-needs { color: var(--ks-t-pro); }
.ks-covered .ks-need { color: var(--ks-ink); }

.ks-gates-lede { margin-top: 1.1rem; font-size: calc(.93rem * var(--ks-type)); color: var(--ks-shallow); max-width: 72ch; }

.ks-covered {
  margin-top: 2rem; border-left: 3px solid var(--ks-t-pro);
  background: var(--ks-paper); border-radius: 0 var(--ks-r-md) var(--ks-r-md) 0;
  padding: 1.15rem 1.3rem;
}
.ks-covered h2 { font-family: var(--ks-display); font-size: calc(1.08rem * var(--ks-type)); font-weight: 600; color: var(--ks-ink); text-transform: none; }
.ks-covered p { font-size: calc(.93rem * var(--ks-type)); color: var(--ks-ink); max-width: 75ch; }
.ks-covered p { margin-top: 1rem; }

.ks-hubs { margin-top: 2rem; display: grid; gap: 1rem; }
.ks-hub {
  background: var(--ks-paper); border: 1px solid var(--ks-hairline);
  border-radius: var(--ks-r-lg); padding: clamp(1.2rem, 3vw, 1.8rem);
}
.ks-hub-top { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; }
.ks-hub-name { font-family: var(--ks-display); font-size: calc(1.4rem * var(--ks-type)); font-weight: 600; letter-spacing: -0.01em; }
.ks-tier-badge {
  font-family: var(--ks-label); font-weight: 600; font-size: .72rem;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ks-paper); background: var(--ks-koi);
  padding: .3rem .72rem; border-radius: 999px; white-space: nowrap;
}

/* the depth scale, restated horizontally per hub */
.ks-scale { margin-top: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.ks-scale-seg { height: 5px; border-radius: 999px; background: var(--ks-hairline); }
.ks-scale-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: .4rem; }
.ks-scale-labels span { font-family: var(--ks-label); font-weight: 600; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ks-hairline); }
.ks-scale-labels span.on { color: var(--ks-ink); }

.ks-reasons { margin-top: 1.3rem; display: grid; gap: .85rem; }
.ks-reason { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; align-items: start; }
.ks-reason-tier {
  font-family: var(--ks-label); font-weight: 600; font-size: .66rem;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: .3rem 0 0; border-top: 2px solid; color: var(--ks-muted);
}
.ks-reason p { font-size: calc(.93rem * var(--ks-type)); max-width: 75ch; }

.ks-notes { margin-top: 1.6rem; display: grid; gap: .8rem; }
.ks-note {
  border: 1px dashed var(--ks-hairline); border-radius: var(--ks-r-md);
  padding: .9rem 1.1rem; font-size: calc(.92rem * var(--ks-type)); background: var(--ks-paper);
  max-width: 80ch;
}
.ks-note strong { font-family: var(--ks-display); font-weight: 600; }

/* Fix 1 — was max-width: 80ch, far narrower than the shell's content width,
   so the summary rows stopped well short of where the gauge and the capture
   card end. Both are decorative list rows, not reading paragraphs, so there's
   no readability reason to cap them — let them share the shell's full edges. */
.ks-teaser { margin-top: 1.6rem; max-width: none; }
.ks-teaser li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; padding: .9rem 0; border-top: 1px solid var(--ks-hairline); font-size: calc(.95rem * var(--ks-type)); }
.ks-teaser li:last-child { border-bottom: 1px solid var(--ks-hairline); }
.ks-teaser-n { font-family: var(--ks-display); font-weight: 700; font-size: calc(1.6rem * var(--ks-type)); line-height: 1; letter-spacing: -0.02em; }
.ks-teaser-sub { flex-basis: 100%; color: var(--ks-muted); font-size: calc(.85rem * var(--ks-type)); }

.ks-capture {
  margin-top: 2rem; background: var(--ks-ink); color: var(--ks-paper);
  border-radius: var(--ks-r-lg); padding: clamp(1.4rem, 3.5vw, 2.2rem);
}
.ks-capture h2 { font-family: var(--ks-display); font-size: clamp(calc(1.3rem * var(--ks-type)), 3vw, calc(1.75rem * var(--ks-type))); font-weight: 600; letter-spacing: -0.02em; max-width: 28ch; color: var(--ks-paper); text-transform: none; }
.ks-capture p { color: var(--ks-shallow); font-size: calc(.93rem * var(--ks-type)); margin-top: .6rem; max-width: 56ch; }
/* Fix 2 — #ks-reveal ("See my results") keeps the base .ks-btn class for its
   shape, weight, transition, hover and focus behavior; only this modifier
   changes. .ks-btn's own fill is var(--ks-ink) — identical to .ks-capture's
   background — so with no override the button had no visible chrome at all
   against this card and read as inert text. This flips to a light fill for
   contrast; the dark-on-dark hover from .ks-btn:hover{opacity:.86} still
   applies unmodified.
   Scoped with .ks-quiz (not just .ks-btn-reveal alone) so font-weight can
   outweigh `.ks-quiz button { font: inherit; }` — that shorthand resets
   font-weight along with it, and a bare single-class selector can't beat a
   class+element selector on specificity. Same pre-existing gap affects
   .ks-btn/.ks-btn-quiet everywhere else (Take Quiz Again, Download as PDF,
   etc. all compute to 400, not the 600 in their own rules) — out of scope
   here since it's a global rule and this task is CSS for these two fixes
   only, but worth a follow-up pass. */
.ks-quiz .ks-btn-reveal {
  display: inline-block;
  background: #ffffff;
  color: var(--ks-ink);
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  margin: 1.25rem 0 0;
}
/* Fix #4 — pin every results text colour to a token. These elements set no
   colour of their own and inherited it; the embedding theme's bare h1/h2/p/span
   colour rules then won, producing dark-on-dark in the dark cards. */
.ks-hub-name, .ks-teaser-n, .ks-note, .ks-note strong, .ks-reason p { color: var(--ks-ink); }
.ks-field { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.ks-field input {
  flex: 1 1 240px; font: inherit; font-size: calc(.95rem * var(--ks-type));
  background: transparent; color: var(--ks-paper);
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: .7rem 1.1rem;
}
.ks-field input::placeholder { color: rgba(255,255,255,.5); }
.ks-field input:focus { outline: 2px solid var(--ks-brand); outline-offset: 2px; }
.ks-field .ks-btn { background: var(--ks-brand); border-color: var(--ks-brand); color: var(--ks-ink); }
.ks-fineprint { margin-top: .9rem; font-size: .78rem; color: rgba(255,255,255,.55); }
.ks-fine-err { color: #FFC2AC; }
.ks-capture-flat { margin-top: 1.6rem; }
.ks-capture-flat .ks-field { margin-top: 0; }

.ks-devbar {
  margin-top: 2.5rem; border-top: 1px solid var(--ks-hairline); padding-top: 1rem;
  font-family: var(--ks-mono); font-size: .74rem; color: var(--ks-muted);
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
}
.ks-devbar code { background: var(--ks-paper); padding: .25rem .5rem; border-radius: var(--ks-r-sm); border: 1px solid var(--ks-hairline); word-break: break-all; }
.ks-devbar button { color: var(--ks-muted); background: none; border: 1px solid var(--ks-hairline); border-radius: var(--ks-r-sm); padding: .25rem .6rem; font-family: inherit; font-size: inherit; }

/* ==========================================================================
   6. PRINT / SAVE AS PDF
   The dark cards become light with a rule, because browsers drop background
   colours by default and a half-printed dark block looks broken.
   ========================================================================== */
.ks-printhead, .ks-printfoot { display: none; }

/* Concatenated <button> markup has no whitespace between tags, so this needs
   its own gap now that it can hold more than one button (PDF/copy/restart on
   results, copy/restart on the gate screen). */
.ks-actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.ks-btn-quiet {
  background: none; color: var(--ks-ink); border: 1px solid var(--ks-ink);
}
.ks-btn-quiet:hover { background: var(--ks-ink); color: var(--ks-paper); opacity: 1; }

@media print {
  @page { margin: 16mm 14mm 22mm; }

  body { background: #fff; }
  .ks-quiz { background: #fff; }
  .ks-shell { max-width: none; padding: 0; }
  .ks-stage { display: block; }
  .ks-panel { min-height: 0; }

  /* screen-only furniture */
  .ks-gauge, .ks-devbar, .ks-capture, .ks-actions, .ks-ghost { display: none !important; }

  .ks-printhead {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; padding-bottom: .6rem; margin-bottom: 1.4rem;
    border-bottom: 1.5px solid #0A2226;
  }
  .ks-printlogo { max-height: 34px; width: auto; }
  .ks-printmark {
    font-family: var(--ks-display); font-weight: 700; font-size: 1.25rem;
    letter-spacing: -0.02em; color: #0A2226;
  }
  .ks-printmeta {
    font-family: var(--ks-label); font-weight: 600; font-size: .62rem;
    letter-spacing: .06em; text-transform: uppercase; text-align: right;
    line-height: 1.7; color: #5C7A7C;
  }

  /* repeats at the foot of every page in most browsers */
  .ks-printfoot {
    display: block; position: fixed; bottom: 0; left: 0; right: 0;
    padding-top: .4rem; border-top: 1px solid #D3E0DE;
    font-family: var(--ks-label); font-weight: 600; font-size: .58rem;
    letter-spacing: .07em; text-transform: uppercase; color: #5C7A7C;
  }

  .ks-result-head h1 { font-size: 1.9rem; }

  /* dark cards -> light, so nothing depends on background printing */
  .ks-gates {
    background: #fff !important; color: #0A2226 !important;
    border: 1px solid #D3E0DE; border-left: 3px solid #0A2226;
    border-radius: 0; padding: 1rem 1.1rem;
  }
  .ks-gates .ks-need { color: #0A2226 !important; }
  .ks-gates .ks-need-why, .ks-gates-lede { color: #5C7A7C !important; }
  .ks-gates .ks-needs { color: #0A2226 !important; }

  .ks-tier-badge {
    background: none !important; color: #0A2226 !important;
    border: 1.5px solid #E2603A; padding: .15rem .5rem;
  }

  .ks-hub, .ks-covered, .ks-note {
    border: 1px solid #D3E0DE; border-radius: 0;
    break-inside: avoid; page-break-inside: avoid;
  }
  .ks-reason, .ks-needs li { break-inside: avoid; page-break-inside: avoid; }
  .ks-scale-seg { border: 1px solid #D3E0DE; }
  .ks-scale-labels span { color: #B8CBC8; }
  .ks-scale-labels span.on { color: #0A2226; }

  a[href]::after { content: ""; }
}

@media (prefers-reduced-motion: reduce) {
  .ks-quiz *, .ks-quiz *::before { animation: none !important; transition: none !important; }
}