/* The onboarding card, matched to the live app's computed styles (dynamic questions card). */
:root{
  --forest:#111A0F;--pine:#1D3018;--ink:#162412;--olive:#4C6234;--olive-mid:#7D9366;
  --cream:#E5D2B8;--eggshell:#F8EEE2;--card:#FFFAF5;--fill:rgba(243,234,223,.75);
  --fill-solid:#F6EEE4;--taupe:#A18372;--grey:#71717A;--gold:#C89B3C;--gold-soft:#E9C979;
  --line:rgba(22,36,18,.12);
  --display:'SN Gangster','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'NB International Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'NB International Pro Mono',ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.22,.8,.24,1);
}

/* Matched to today's onboarding QuestionCard (keeper-ui theme + QuestionCard.styles.ts, measured live Oct 18; see
   assets-src/today-app/REFERENCE.md): desktop 576 wide, 24px corners, padding 32/64/64; phone full width, square corners,
   padding 32/24/24. Seth, Oct 18: "match today".
   On this page the phone card floats on the painting instead of filling a screen, so it keeps today's rounded corners
   (Wes, Oct 21: "they should be rounded like current"); square corners only make sense edge to edge. */
.kq-card{position:relative;box-sizing:border-box;width:100%;max-width:576px;margin:0 auto;background:var(--card);isolation:isolate;
  border-radius:24px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:32px 64px 64px;color:var(--ink);
  font:400 16px/1.6 var(--body);display:flex;flex-direction:column;min-height:var(--card-min,640px);text-align:left}
.stage[data-size=phone] .kq-card{max-width:390px;padding:32px 24px 24px;border-radius:24px;--card-min:720px}
.kq-card *,.kq-card *::before,.kq-card *::after{box-sizing:border-box}
.kq-top[hidden]{display:none}
/* Header. On the redesign tabs it is the title and the question under it, starting at the top of the card: Back sits beside
   Next instead (kit.js K.card; Wes, Oct 26: the arrow's own row was white space). The Today tab keeps today's header, the
   arrow in it (.has-back): desktop = the arrow on its own row, the title 24px below; phone step cards = the arrow inline
   left of the title (16px gap) and the grey line under the title. */
.kq-head{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start}
.kq-head>*{justify-self:stretch}
.kq-head .kq-back{justify-self:start;margin-bottom:24px}
.stage[data-size=phone] .kq-head.has-back{grid-template-columns:32px minmax(0,1fr);column-gap:16px;align-items:center}
.stage[data-size=phone] .kq-head.has-back .kq-back{grid-row:1;grid-column:1;margin:0}
.stage[data-size=phone] .kq-head.has-back>:not(.kq-back){grid-column:2}
.stage[data-size=phone] .kq-head.has-back.first{grid-template-columns:minmax(0,1fr)}
.stage[data-size=phone] .kq-head.has-back.first>*{grid-column:1}
.kq-head.first .kq-back{display:none}
.kq-back{width:32px;height:32px;padding:0;border-radius:32px;border:0;background:rgba(243,234,223,.75);color:#A18372;display:grid;place-items:center;
  cursor:pointer;flex:none;transition:background-color .2s,color .2s,opacity .2s}
.kq-back:not([disabled]):hover{background:#F3EADF}
.kq-back:focus-visible{outline:2px solid #A18372;outline-offset:2px}
.kq-back[disabled]{cursor:default}
.kq-back svg{width:12px;height:10px}
/* The redesign's Back: a square the height of Next at the left end of its row, in the cream of today's secondary buttons,
   with today's arrow in olive. Pressed, it darkens while the finger is down. Nowhere to go back to (a single-step card, or
   the first step): today's greyed-out button, like Next's own disabled state, so it reads as off rather than broken. */
.kq-back.kq-sq{width:48px;height:48px;border-radius:4px;background:#F3EADF;color:var(--olive);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.kq-back.kq-sq svg{width:14px;height:12px}
@media (hover:hover) and (pointer:fine){.kq-back.kq-sq:not([disabled]):hover{background:#EBE0D1}}
.kq-back.kq-sq:not([disabled]):active{background:#E3D5C2;transition:none}
.kq-back.kq-sq[disabled]{background:rgba(12,12,13,.05);color:rgba(12,12,13,.18)}
.kq-eyebrow{font:400 10.5px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--olive-mid)}
.kq-step{margin-left:auto;font:400 10.5px/1 var(--mono);letter-spacing:1.2px;color:#B3A79B}
.kq-title{font:400 30px/1.3 var(--display);letter-spacing:-.6px;color:var(--olive);margin:0;text-wrap:balance}
/* Lines run as full as they go (Wes, Oct 26, W4: "This text wraps too early?"): "pretty" wrapping pulled a word down to
   keep the last line from being short, so a question broke well before the edge. The Today tab keeps the app's own
   wrapping (its rules below). */
.kq-sub,.kq-hint,.kq-label{text-wrap:wrap}
.stage[data-size=phone] .kq-title{font-size:28px}
.kq-sub{margin:4px 0 0;font:500 16px/1.5 var(--body);color:#71717A}
.stage[data-size=phone] .kq-sub{font-size:14px}
.kq-hint{margin:2px 0 0;font:350 14px/1.4 var(--body);color:#71717A}
.stage[data-size=phone] .kq-hint{font-size:12px}
.kq-body{flex:1;display:flex;flex-direction:column;margin-top:24px;min-height:0}
.stage[data-size=phone] .kq-body{margin-top:12px}
.kq-foot{display:flex;align-items:center;gap:14px;margin-top:24px}
.stage[data-size=phone] .kq-foot{margin-top:12px}
.kq-next{height:48px;min-width:77px;padding:2px 16px 0;border:0;border-radius:4px;background:var(--pine);color:var(--eggshell);
  font:400 15px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:background .18s}
.stage[data-size=phone] .kq-next{font-size:14px}
.kq-next[disabled]{background:rgba(12,12,13,.05);color:rgba(0,0,0,.15);cursor:default}
.kq-skip{background:none;border:0;font:400 12px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--taupe);cursor:pointer;padding:8px 4px}
.kq-skip:hover{color:var(--olive)}
.kq-vis{display:flex;align-items:center;gap:4px;white-space:nowrap;margin-top:24px;font:400 12px/1.3 var(--body);color:#71717A}
.stage[data-size=phone] .kq-vis{margin-top:12px;font-size:11px}
/* One line, as today (a 320 phone card has room for today's longest line). On anything narrower it ends in an ellipsis
   instead of running past the card's edge. */
.kq-vis .kq-vis-t{text-decoration:underline;text-underline-offset:2px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.kq-vis svg{width:14px;height:9px;flex:none}
.kq-link{background:none;border:0;padding:2px 0;font:400 14px/1.3 var(--body);color:var(--olive);text-decoration:underline;text-decoration-color:rgba(76,98,52,.35);text-underline-offset:3px;cursor:pointer}
.kq-link:hover{text-decoration-color:var(--olive)}
.kq-link.on{color:var(--pine);font-weight:500;text-decoration-color:var(--pine)}
.kq-keyhint{margin-left:auto;font:400 10px/1 var(--mono);letter-spacing:1px;color:#BDB2A6;text-transform:uppercase}
@media (hover:none){
.kq-link{background:none;border:0;padding:2px 0;font:400 14px/1.3 var(--body);color:var(--olive);text-decoration:underline;text-decoration-color:rgba(76,98,52,.35);text-underline-offset:3px;cursor:pointer}
.kq-link:hover{text-decoration-color:var(--olive)}
.kq-link.on{color:var(--pine);font-weight:500;text-decoration-color:var(--pine)}
.kq-keyhint{display:none}}

/* Everything you can click shows the pointing hand (Jake, Oct 17). :where() keeps this at zero specificity, so a module's own
   cursor (grab, ew-resize, text) still wins where it sets one. */
:where(.kq-card) :where(button,a[href],label[for],summary,select,[role=button],[role=radio],[role=checkbox],[role=option],[role=tab],[role=switch],[role=slider],[data-click]):not([disabled]):not([aria-disabled=true]){cursor:pointer}
:where(.kq-card) :where(button[disabled],[aria-disabled=true]){cursor:default}

/* Text inputs, app fill */
/* Today's text field (keeper-ui TextField): 48px, 4px corners, fill, olive Book text, zinc placeholder; hover white with a
   cream rule, focus white with a taupe rule and no ring. */
.kq-input,.kq-textarea{width:100%;border:1px solid transparent;border-radius:4px;background:rgba(243,234,223,.75);color:var(--olive);
  font:350 16px/24px var(--body);padding:12px;outline:none;transition:border-color .18s,background .18s;resize:none}
.kq-input{height:48px}
@media (hover:hover){.kq-input:hover,.kq-textarea:hover{background:#fff;border-color:#E5D2B8}}
.kq-input:focus,.kq-textarea:focus{border-color:#A18372;background:#fff}
.kq-input::placeholder,.kq-textarea::placeholder{color:#A1A1AA}
.kq-label{display:block;font:500 16px/1.5 var(--body);color:var(--olive);margin:0 0 4px;text-wrap:wrap}
.stage[data-size=phone] .kq-label{font-size:14px}
.stage[data-size=phone] .kq-keyhint{display:none} /* key hints mean nothing on a touch screen */
.kq-label .opt{font:400 13px/1 var(--body);color:#A1A1AA;margin-left:6px;white-space:nowrap}

/* Optional notes (kit.js K.clarify): space is reserved so nothing below it jumps. */
.kq-clarify{margin-top:14px;opacity:0;transform:translateY(4px);transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none}
.kq-clarify.on,.kq-clarify.has-alt{opacity:1;transform:none;pointer-events:auto}
/* Sits just above Next when the card has room to spare (Jake, Oct 17, W19). Jake, Oct 29 (W4): the room above the link
   and below it should match, and so should the room around the box once it opens. So the link line, or the open box, has
   --kq-gap on both sides: 16px on a phone, 24 on a computer. Below, the foot's own margin (12 on a phone, 22 on a
   computer, --kq-foot) makes up most of it. An open box under the alt link ("Unsure/something else") sits 12px under it
   (16 on a computer). */
.kq-card{--kq-gap:24px;--kq-foot:22px;--kq-under:16px}
.stage[data-size=phone] .kq-card{--kq-gap:16px;--kq-foot:12px;--kq-under:12px}
.kq-body>.kq-clarify,.kq-pane>.kq-clarify{margin-top:auto;padding-top:var(--kq-gap);padding-bottom:calc(var(--kq-gap) - var(--kq-foot))}
.kq-clarify.need .kq-label{color:var(--pine)}
.kq-clarify.need .kq-textarea{border-color:rgba(76,98,52,.35)}
.kq-clarify .kq-textarea{height:72px!important;overflow-y:auto!important}
/* The quiet links' line (Jake, Oct 29: no more two underlined links stacked). The note link "Something to add/clarify?",
   and on W3, W7, W11 and W14 "Unsure/something else" beside it, centred on one line with an even gap; 13px on a phone so
   the pair fits a 390 card. A link not on the line yet waits out of it (.away), or holds its own hidden line where the
   pair can't fit (.hold), so it never moves Next when it comes in. A line with nothing on it folds away (W7 after Unsure). */
.kq-links{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s var(--ease)}
.kq-links.empty{grid-template-rows:0fr}
.kq-links-in{position:relative;min-height:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:28px;row-gap:6px}
.stage[data-size=phone] .kq-links-in{column-gap:20px}
.kq-links.empty .kq-links-in{overflow:hidden}
.kq-links .kq-link{flex:none;white-space:nowrap;text-align:center;transition:opacity .3s var(--ease),color .2s,text-decoration-color .2s}
.stage[data-size=phone] .kq-links .kq-link{font-size:13px}
.kq-links .kq-link.away{position:absolute;left:0;top:0;visibility:hidden;opacity:0;pointer-events:none;transition:none}
.kq-links .kq-link.hold{visibility:hidden;opacity:0}
.kq-links .kq-link.off{visibility:hidden;opacity:0;transition:opacity .2s var(--ease),visibility 0s linear .2s}
/* Folded: just the link; a click opens the box (the rows ease open) and the link turns into it. */
.kq-clarify.fold .kq-clarify-box{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease),margin-top .28s var(--ease)}
.kq-clarify.fold.open .kq-clarify-box{grid-template-rows:1fr}
.kq-clarify.fold.open.has-alt.alt-on .kq-clarify-box{margin-top:var(--kq-under)}
.kq-clarify-in{min-height:0;overflow:hidden;padding:0 3px 3px;margin:0 -3px -3px}
@media (prefers-reduced-motion:reduce){.kq-clarify.fold .kq-clarify-box,.kq-links{transition:none}}

/* Readout under sliders: fixed height, cross-fades between answers */
.kq-readout{position:relative;height:var(--ro-h,36px);margin-top:10px;text-align:center}
.kq-readout span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 22px/1.15 var(--display);
  letter-spacing:-.3px;color:var(--ink);transition:opacity .22s,transform .22s;text-wrap:balance}
.kq-readout span.out{opacity:0;transform:translateY(-4px)}
.kq-readout span.pending{color:#B3A79B;font:400 13px/1.3 var(--body)}
.kq-sublabel{text-align:center;font:400 10.5px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--olive-mid);height:12px;margin-top:4px}

/* Slider: handle visible from the start, number-line ticks on the track. pan-y: a thumb swiping up or down over it scrolls the
   page; the glider (touchDefer) takes taps and sideways drags. */
.kq-slider{position:relative;height:40px;margin:0 11px;touch-action:pan-y;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.kq-slider .rail{position:absolute;left:0;right:0;top:19px;height:3px;border-radius:3px;background:#E7DED2}
.kq-slider .fill{position:absolute;top:19px;height:3px;border-radius:3px;background:var(--olive);transition:left .12s,width .12s}
.kq-slider .tick{position:absolute;top:14px;width:1px;height:13px;background:#D3C7B8;transform:translateX(-.5px)}
.kq-slider .tick.mid{height:17px;top:12px;background:#BDAE9C}
.kq-slider .thumb{position:absolute;top:9px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--olive);
  box-shadow:0 0 0 4px var(--card),0 2px 6px rgba(22,36,18,.3);transition:left .12s var(--ease),transform .15s,background .2s}
.kq-slider.fresh .thumb{background:#fff;box-shadow:0 0 0 1.5px var(--olive),0 2px 6px rgba(22,36,18,.22)}
.kq-slider.fresh .thumb::after{content:"";position:absolute;inset:7px 7.5px;border-left:2px solid var(--olive);border-right:2px solid var(--olive)}
.kq-slider.dragging .thumb{transform:scale(1.12);transition:transform .15s}
.kq-slider.dragging .thumb,.kq-slider.dragging .fill{transition:none}
.kq-slider:focus-visible .thumb{box-shadow:0 0 0 4px var(--card),0 0 0 6px rgba(76,98,52,.45)}
.kq-slider:hover .thumb{transform:scale(1.06)}
.kq-ends{display:flex;justify-content:space-between;gap:16px;font:400 13px/1.25 var(--body);color:#71717A;margin-top:2px}
.kq-ends span:last-child{text-align:right}

/* Option rows like the app's radio/checkbox units */
.kq-opts{display:flex;flex-direction:column;gap:8px}
.kq-opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;background:var(--fill);border:1px solid transparent;cursor:pointer;
  font:400 16px/1.4 var(--body);color:var(--ink);text-align:left;transition:background .15s,border-color .15s,transform .15s;width:100%}
.kq-opt:hover{transform:translateX(3px)}
.kq-opt .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid #B9AC9D;flex:none;display:grid;place-items:center}
.kq-opt.on{background:#E9EEDF;border-color:rgba(76,98,52,.35)}
.kq-opt.on .dot{border-color:var(--olive)}
.kq-opt.on .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--olive)}
.kq-opt .key{margin-left:auto;font:400 10px/1 var(--mono);color:#BDB2A6;border:1px solid #E2D8CB;border-radius:4px;padding:3px 5px}
.kq-opt .key.k0{display:none} /* the tenth row's 0 chip is the Today tab's (the app's hotkeys) */
@media (hover:none){.kq-opt .key{display:none}}

/* Painted frame used by most redesigns */
.kq-art{position:relative;border-radius:12px;overflow:hidden;background:#d8cbb7;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 6px 18px rgba(22,36,18,.16)}
.kq-art img{display:block;width:100%;height:100%;object-fit:cover}
.kq-cap{font:400 10px/1.3 var(--mono);letter-spacing:1px;text-transform:uppercase;color:#B3A79B;margin-top:6px}

/* Fresco choice buttons (same component as the readiness moons) */
.kq-frescos{display:grid;gap:10px}
.kq-fresco{position:relative;border:0;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#e9dfd2;aspect-ratio:3/4;
  box-shadow:0 0 0 1px rgba(22,36,18,.08),0 4px 12px rgba(22,36,18,.12);transition:transform .2s var(--ease),box-shadow .2s,filter .3s}
.kq-fresco img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .35s,transform .5s var(--ease)}
.kq-fresco .lab{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(255,250,245,.94);border-radius:6px;padding:7px 6px 6px;text-align:center;
  font:400 17px/1.1 var(--display);color:var(--ink)}
.kq-fresco .num{position:absolute;top:8px;left:8px;width:20px;height:20px;border-radius:5px;background:rgba(255,250,245,.85);font:400 10px/20px var(--mono);
  text-align:center;color:var(--taupe);opacity:0;transition:opacity .2s}
@media (hover:hover){.kq-frescos:hover .kq-fresco .num{opacity:1}}
.kq-fresco:hover{transform:translateY(-2px)}
.kq-frescos.has .kq-fresco:not(.on) img{filter:grayscale(.85) brightness(.92)}
.kq-frescos.has .kq-fresco:not(.on){box-shadow:0 0 0 1px rgba(22,36,18,.06)}
.kq-fresco.on{box-shadow:0 0 0 2px var(--gold),0 8px 22px rgba(22,36,18,.2)}
.kq-fresco.on .lab{background:#FFF6E3}

/* Fresco strip buttons, matched to the approved No. 47 component */
.kq-frows{display:flex;flex-direction:column;gap:12px}
.kq-frow{position:relative;display:block;width:100%;height:68px;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#3b3a2e;
  border:1px solid rgba(22,36,18,.16);box-shadow:0 1px 2px rgba(22,36,18,.06);text-align:left;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),transform .2s var(--ease)}
.kq-frow:hover{transform:translateY(-1px)}
.kq-frow .art{position:absolute;inset:0;transition:filter .45s var(--ease)}
.kq-frow .art img{display:block;width:100%;height:100%;object-fit:cover}
.kq-frow .wash{position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .45s var(--ease)}
.kq-frow .shade{position:absolute;left:0;top:0;bottom:0;width:68%;background:linear-gradient(to right,rgba(17,26,15,.82) 0%,rgba(17,26,15,.5) 45%,rgba(17,26,15,0) 100%)}
/* Centred with flex, not translateY(-50%), which can land the words on a half pixel and soften them (Seth, Oct 18). */
.kq-frow .lab{position:absolute;left:16px;right:44px;top:0;bottom:0;display:flex;align-items:center;font:500 16px/1.25 var(--body);color:#F8EEE2}
.kq-frow .num{position:absolute;right:12px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;box-sizing:border-box;background:rgba(17,26,15,.42);
  border:1px solid rgba(248,238,226,.35);color:#F8EEE2;font:400 11px/18px var(--mono);letter-spacing:1.1px;text-align:center;transition:background-color .3s var(--ease)}
@media (hover:none){.kq-frow .num{display:none}}
.kq-frows.has .kq-frow:not(.on) .art{filter:saturate(.4) brightness(1.02)}
.kq-frows.has .kq-frow:not(.on) .wash{opacity:.12}
.kq-frow.on{border-color:var(--olive);box-shadow:0 10px 24px rgba(22,36,18,.18)}
.kq-frow.on .num{background:var(--olive);border-color:rgba(248,238,226,.6)}

/* Step transitions inside one card (two-step questions) */
.kq-pane{animation:kqIn .32s var(--ease) both}
@keyframes kqIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .kq-pane{animation:none}
  .kq-card *{transition:none!important;animation-duration:.01ms!important}
}

/* ==================================================================== Today
   The Today tab is the live app's onboarding card, nothing more: measured from the prod frontend on Oct 24
   (build/today/TODAY-SPEC.md GENERIC, and keeper-ui's own styles in matchmaking origin/prod). Phone = the app under 680px
   (the card edge to edge, square corners); desktop = its 576px card. Everything is scoped to the Today stage, so the
   redesign tabs keep their own rules. kit.js draws the pieces (K.card current, K.today*, K.current*). Hover styles use
   the app's own gate, (hover: hover) and (pointer: fine), so a tap never leaves one stuck. */

/* Page around the card: the app's painted sky (dynamic-questions-bg.webp, a web copy; the app fills its window with it: cover,
   top edge pinned, 53% across, #a18664 under it). Drawn at the size the app's own window gives it, and placed so the card
   sits on the same part of it: a 1440x900 window makes it 1440x960 with the card 104px down (ours is 40px down the stage);
   a 390x844 phone makes it 844 tall with the card 84px down (ours 18px). A stage taller than that window scales it up so
   it never runs out. */
.stage[data-mode=current]{background:#a18664 url(/img/today-sky.webp) 50% -64px/auto max(960px,calc(100% + 64px)) no-repeat}
.stage[data-mode=current][data-size=phone]{background-position:53% -66px;background-size:auto max(844px,calc(100% + 66px))}

/* Card. --kt-gap: between the fields; --kt-cardgap: the arrow to the title, the last field to the button, the button to the
   footer (and a step card's header to its fields); --kt-lab: a label to its own box (labels also hold a 24px-high slot, so a
   one-line phone label ends 7px over its box). Type steps down a size on the phone card. */
/* The app's page sets text-wrap: pretty on everything (keeper-ui CssBaseline), which is why a question can break a word early. */
.stage[data-mode=current] .kq-card{--kt-gap:16px;--kt-cardgap:24px;--kt-lab:4px;--kt-fs:16px;--kt-lh:24px;--kt-mfs:12px;--kt-mlh:15.6px;
  max-width:576px;min-height:0;padding:32px 64px 64px;border-radius:24px;background:#FFFAF5;box-shadow:0 8px 24px rgba(0,0,0,.12);color:#4C6234;text-wrap:pretty;letter-spacing:normal}
.stage[data-mode=current][data-size=phone] .kq-card{--kt-gap:12px;--kt-cardgap:12px;--kt-lab:4px;--kt-fs:14px;--kt-lh:21px;--kt-mfs:11px;--kt-mlh:14.3px;
  max-width:390px;padding:32px 24px 24px;border-radius:0}

/* Header. Question cards: the arrow on its own row, the title, and only on W2, W5 and W17 a grey subtitle 4px under it.
   Step cards (Education, Location, Location preference): on a phone the arrow shares the title's row and the grey line lines
   up under the title (8px down); on a computer the arrow has its own row. */
.stage[data-mode=current] .kq-card.kt-q .kq-head{display:block}
.stage[data-mode=current] .kq-card.kt-q .kq-back{margin:0 0 var(--kt-cardgap)}
.stage[data-mode=current] .kq-card .kq-back{width:32px;height:32px;padding:0;border:0;border-radius:32px;background:rgba(243,234,223,.75);color:#A18372;opacity:1;transition:background-color .15s ease}
@media (hover:hover) and (pointer:fine){.stage[data-mode=current] .kq-card .kq-back:not([disabled]):hover{background:#F4E7D7}}
.stage[data-mode=current] .kq-card .kq-back[disabled]{opacity:1;cursor:default}
.stage[data-mode=current] .kq-card .kq-title{margin:0;font:400 30px/39px var(--display);letter-spacing:-.6px;color:#4C6234;text-wrap:balance} /* the h2 variant balances */
.stage[data-mode=current][data-size=phone] .kq-card .kq-title{font-size:28px;line-height:36.4px}
/* The app's step cards ask for 'Store Norske Gangster', a name no web font has (the app registers Gangster as "snGangster"),
   so browsers draw those three titles in their serif: Times on a Mac and an iPhone. Same name here, so the same Times. */
.stage[data-mode=current] .kq-card.kt-step .kq-title{font-family:'Store Norske Gangster',serif;text-wrap:pretty}
.stage[data-mode=current] .kq-card .kq-sub{margin:4px 0 0;font:500 var(--kt-fs)/var(--kt-lh) var(--body);color:#71717A;text-wrap:pretty}
.stage[data-mode=current] .kq-card.kt-step .kq-sub{margin-top:8px}
/* The "Required step" tag, only on a required step card and only for two arms of the required-basics test. */
.stage[data-mode=current] .kq-card .kt-required{position:absolute;top:36px;right:64px;display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:4px;
  background:#F8EEE2;color:#71717A;font:400 12px/15.6px var(--body);white-space:nowrap}
.stage[data-mode=current][data-size=phone] .kq-card .kt-required{top:8px;right:8px;font-size:11px;line-height:14.3px}

/* Green labels: each field's question (and on a question card the question itself, .kt-ask). Each holds a 24px-high slot and
   sits 4px over its box. */
.stage[data-mode=current] .kq-card :is(.kt-ask,.kq-label){display:block;min-height:24px;margin:0 0 var(--kt-lab);font:500 var(--kt-fs)/var(--kt-lh) var(--body);color:#4C6234;text-wrap:pretty}
/* A question over option rows is the form's legend: its lines stand on the app's 16px/24px strut, so on a phone each line is
   24px and the words sit 1px lower than a plain 14px line would; the rows start 4px under it. */
.stage[data-mode=current] .kq-card :is(.kt-ask,.kq-label):has(+.kq-opts){margin-bottom:4px;line-height:24px}
.stage[data-mode=current][data-size=phone] .kq-card :is(.kt-ask,.kq-label):has(+.kq-opts){position:relative;top:1px}
.stage[data-mode=current] .kq-card .kq-label .opt{display:none} /* the app never tags a box "Optional" */
.stage[data-mode=current] .kq-card .kt-field{display:block}

/* Fields: 12px apart on a phone, 16 on a computer (after the label rules, which these override by order). */
.stage[data-mode=current] .kq-card .kq-body{margin-top:var(--kt-gap);gap:0}
.stage[data-mode=current] .kq-card.kt-step .kq-body{margin-top:var(--kt-cardgap)}
.stage[data-mode=current] .kq-card .kq-body>*+*{margin-top:var(--kt-gap)}
.stage[data-mode=current] .kq-card .kq-body>:is(.kt-ask,.kq-label)+*{margin-top:0}

/* Option rows (keeper-ui RadioUnit): cream rows 4px apart, a white dot that fills green, the row's edge green when picked. */
.stage[data-mode=current] .kq-card .kq-opts{display:flex;flex-direction:column;gap:4px}
.stage[data-mode=current] .kq-card .kq-opt{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px;border:1px solid transparent;border-radius:8px;
  background:rgba(243,234,223,.75);font:350 var(--kt-fs)/var(--kt-lh) var(--body);color:#4C6234;text-align:left;transform:none;transition:border-color .15s ease}
.stage[data-mode=current] .kq-card .kq-opt:hover{transform:none}
@media (hover:hover) and (pointer:fine){.stage[data-mode=current] .kq-card .kq-opt:hover{border-color:#E5D2B8}}
.stage[data-mode=current] .kq-card .kq-opt.on{background:rgba(243,234,223,.75);border-color:#7D9366}
.stage[data-mode=current] .kq-card .kq-opt:focus-visible{outline:none;border-color:#A18372}
/* The review page's progress dots share the class name (review.css .dot: a faint inset ring, and 1.3x on hover); none of
   that belongs on the app's radio, so it is undone here. */
.stage[data-mode=current] .kq-card .kq-opt .dot{position:static;display:grid;place-items:center;flex:none;width:16px;height:16px;margin-top:4px;border:0;border-radius:16px;background:#fff;
  overflow:visible;box-shadow:none;transform:none;transition:none;animation:none}
.stage[data-mode=current][data-size=phone] .kq-card .kq-opt .dot{margin-top:2px}
.stage[data-mode=current] .kq-card .kq-opt.on .dot{border:0;background:#3B532B}
.stage[data-mode=current] .kq-card .kq-opt.on .dot::after{content:"";width:6px;height:6px;border-radius:4px;background:#fff}
.stage[data-mode=current] .kq-card .kq-opt .kq-opt-t{flex:1;min-width:0}
/* Number keys: a chip at the end of each row on a computer (1 to 9, then 0), none on a phone. */
.stage[data-mode=current] .kq-card .kq-opt .key{display:grid;place-items:center;flex:none;width:24px;height:24px;margin:0 0 0 4px;padding:0;border:0;border-radius:4px;
  background:#FFFAF5;box-shadow:0 1px 0 #F4E7D7;font:400 11px/11px var(--mono);letter-spacing:1.1px;color:#4C6234}
.stage[data-mode=current][data-size=phone] .kq-card .kq-opt .key{display:none}

/* Text boxes (keeper-ui TextField): the essay box is a fixed 290px (338 on a phone) and never grows; white with a brown edge
   when focused, white with a cream edge under a mouse. One-line search fields are 48px with the magnifier on the right. */
.stage[data-mode=current] .kq-card .kq-textarea{display:block;width:100%;height:290px;min-height:0;max-height:none;margin:0;padding:12px;border:1px solid transparent;border-radius:4px;
  background:rgba(243,234,223,.75);font:350 16px/24px var(--body);color:#4C6234;resize:none;overflow-y:auto;outline:none;
  transition:background-color .25s ease-in-out,border-color .25s ease-in-out}
.stage[data-mode=current][data-size=phone] .kq-card .kq-textarea{height:338px}
/* keeper-ui's text fields set text-wrap back to plain wrapping, so their words and placeholders break greedily, not "pretty"
   like the rest of the card (W16's example breaks after "take on"). */
.stage[data-mode=current] .kq-card :is(textarea,input){text-wrap:wrap}
.stage[data-mode=current] .kq-card :is(.kq-textarea,.kt-search-in)::placeholder{color:#A1A1AA;opacity:1}
@media (hover:hover) and (pointer:fine){.stage[data-mode=current] .kq-card :is(.kq-textarea,.kt-search-in):hover{background:#fff;border-color:#E5D2B8}}
.stage[data-mode=current] .kq-card :is(.kq-textarea,.kt-search-in):focus{background:#fff;border-color:#A18372}
/* The app's input row squeezes its 16px magnifier to 15.4px wide (15.2 on a phone), 13px in from the edge, and the typed text
   stops where the magnifier starts. */
.stage[data-mode=current] .kq-card .kt-search{position:relative;--kt-ic:15.4px}
.stage[data-mode=current][data-size=phone] .kq-card .kt-search{--kt-ic:15.2px}
.stage[data-mode=current] .kq-card .kt-search-in{display:block;width:100%;height:48px;padding:12px calc(var(--kt-ic) + 12px) 12px 12px;border:1px solid transparent;border-radius:4px;
  background:rgba(243,234,223,.75);font:350 16px/24px var(--body);color:#4C6234;outline:none;transition:background-color .25s ease-in-out,border-color .25s ease-in-out}
.stage[data-mode=current] .kq-card .kt-search-ic{position:absolute;right:13px;top:16px;width:var(--kt-ic);height:16px;color:#4C6234;pointer-events:none}
.stage[data-mode=current] .kq-card .kt-search-ic svg{display:block;width:100%;height:100%}
/* "Help me brainstorm" (W6a, W6b): small, dark, right-aligned 8px under its box. */
.stage[data-mode=current] .kq-card .kt-brainstorm,.stage[data-mode=current] .kq-card .kq-body>.kt-brainstorm{display:block;margin:8px 0 0 auto;height:32px;padding:0 12px;border:0;border-radius:4px;
  background:#1D3018;color:#F8EEE2;font:400 11px/11px var(--mono);letter-spacing:1.1px;text-transform:uppercase;cursor:pointer}
.stage[data-mode=current][data-size=phone] .kq-card .kt-brainstorm{font-size:10px;line-height:10px}
@media (hover:hover) and (pointer:fine){.stage[data-mode=current] .kq-card .kt-brainstorm:hover{background:#2B4225;color:#fff}}

/* Sliders (keeper-ui Slider): the label and the value on one line, the 4px track 4px under it in a 26px band, the thumb 16px
   with a cream ring (24px while pointed at, pressed or keyed), the end labels 4px under the band. No ticks, no tag. */
.stage[data-mode=current] .kq-card .kt-slider{position:relative}
.stage[data-mode=current] .kq-card .kt-sl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;font:500 var(--kt-fs)/var(--kt-lh) var(--body);color:#4C6234}
.stage[data-mode=current] .kq-card .kt-sl-label{flex:1;min-width:0;text-wrap:pretty}
.stage[data-mode=current] .kq-card .kt-sl-val{flex-shrink:0;min-width:50px;text-align:right;word-break:break-word}
.stage[data-mode=current] .kq-card .kt-slider.words .kt-sl-val{min-width:140px}
.stage[data-mode=current] .kq-card .kt-sl-in{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.stage[data-mode=current] .kq-card .kt-sl-wrap{position:relative;height:26px;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.stage[data-mode=current] .kq-card .kt-sl-track{position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);border-radius:2px;background:#F8EEE2;transition:background-color 75ms}
.stage[data-mode=current] .kq-card .kt-sl-range{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:#4C6234}
.stage[data-mode=current] .kq-card .kt-sl-thumbs{position:relative;height:100%;margin:0 8px}
.stage[data-mode=current] .kq-card .kt-sl-thumb{position:absolute;top:50%;width:16px;height:16px;box-sizing:border-box;border:2px solid #FFFAF5;border-radius:50%;
  background:#4C6234;transform:translate(-50%,-50%);cursor:grab;outline:none}
@media (hover:hover) and (pointer:fine){
  .stage[data-mode=current] .kq-card .kt-sl-wrap:hover .kt-sl-track{background:#D7DFCE}
  .stage[data-mode=current] .kq-card .kt-sl-thumb:hover{width:24px;height:24px}
}
.stage[data-mode=current] .kq-card .kt-slider:is(.dragging,.fv) .kt-sl-track{background:#D7DFCE}
.stage[data-mode=current] .kq-card .kt-slider:is(.dragging,.fv) .kt-sl-thumb{width:24px;height:24px;z-index:1}
.stage[data-mode=current] .kq-card .kt-slider.dragging .kt-sl-thumb{cursor:grabbing}
.stage[data-mode=current] .kq-card .kt-slider.fv .kt-sl-thumb{outline:1px solid #A18372}
.stage[data-mode=current] .kq-card .kt-sl-ends{display:flex;justify-content:space-between;gap:48px;font:400 var(--kt-mfs)/var(--kt-mlh) var(--body);color:#71717A}
.stage[data-mode=current] .kq-card .kt-sl-max{text-align:right}

/* Skip for now / Next: one dark bar, the label in mono capitals, centred on its cap height where the browser can. */
.stage[data-mode=current] .kq-card .kq-foot{margin-top:var(--kt-cardgap)}
.stage[data-mode=current] .kq-card .kq-keyhint{display:none}
.stage[data-mode=current] .kq-card .kq-next{height:48px;padding:2px 16px 0;border:0;border-radius:4px;background:#1D3018;color:#F8EEE2;
  font:400 15px/15px var(--mono);letter-spacing:1.5px;text-transform:uppercase;touch-action:manipulation;
  transition:background-color .15s ease,color .15s ease,transform .1s ease}
.stage[data-mode=current][data-size=phone] .kq-card .kq-next{font-size:14px;line-height:14px}
@supports (text-box:trim-both cap alphabetic){.stage[data-mode=current] .kq-card .kq-next{align-content:center;text-align:center;text-box:trim-both cap alphabetic;padding-top:0}}
@media (hover:hover) and (pointer:fine){.stage[data-mode=current] .kq-card .kq-next:not([disabled]):hover{background:#2B4225;color:#fff}}
.stage[data-mode=current] .kq-card .kq-next:active:not([disabled]){transform:scale(.97)}
.stage[data-mode=current] .kq-card .kq-next:focus-visible{outline:2px solid #1D3018;outline-offset:2px}
.stage[data-mode=current] .kq-card .kq-next[disabled]{background:rgba(12,12,13,.05);color:rgba(12,12,13,.15);transform:none}

/* Footer: who sees the answer, 11px and underlined, 12px (24) under the button; the eye, or the crossed eye when it stays
   private. Pointing at a line that has a tooltip turns it orange and shows the dark tooltip over it. */
.stage[data-mode=current] .kq-card .kq-vis{position:relative;width:fit-content;max-width:100%;margin-top:var(--kt-cardgap);padding-bottom:2px;align-items:baseline;gap:4px;
  font:400 11px/14.3px var(--body);color:#71717A}
.stage[data-mode=current] .kq-card .kq-vis.off svg{width:17px;height:12px}
.stage[data-mode=current] .kq-card .kq-vis .kq-vis-t{text-decoration:underline;text-underline-offset:auto}
.stage[data-mode=current] .kq-card .kq-vis.tip{cursor:pointer}
@media (hover:hover) and (pointer:fine){.stage[data-mode=current] .kq-card .kq-vis.tip:hover{color:#F19835}}
.kt-tip{position:absolute;left:50%;bottom:calc(100% + 14px);z-index:30;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:max-content;max-width:320px;
  padding:17px 16px 15px;border-radius:8px;background:rgba(12,12,13,.95);color:#F8EEE2;font:400 12px/15.6px var(--body);text-align:left;white-space:normal;text-decoration:none;
  transform:translateX(calc(-50% + var(--tip-dx,0px)));opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility 0s linear .15s}
.kt-tip svg{flex:none}
.stage[data-mode=current] .kq-card .kq-vis.off .kt-tip svg{width:17px;height:12px}
.kq-vis.show .kt-tip{opacity:1;visibility:visible;transition:opacity .15s ease}
.stage[data-size=phone] .kt-tip{bottom:calc(100% + 9px);padding:12.5px 12px 11.5px;font-size:11px;line-height:14.3px}

/* Motion: the app swaps cards without a transition; only the small states above change. */
.stage[data-mode=current] .kq-card .kq-pane{animation:none}

.kq-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Redesign tab, question cards: today's question-card header (Wes, Oct 24, on W2: the title and the line under it "feel
   off-center", and "we always put the question text ... in dark green"). The title and the question both start at the
   card's left edge, and the question is today's dark green question text; helper lines (.kq-hint) stay grey. The step
   cards (W1 Education, L1 Location, L2 Location preference) keep the grey line under the title of today's step cards. The
   Today tab is drawn by its own rules. */
.q:not(#w1):not(#w22):not(#w23) .stage[data-mode=redesign] .kq-sub{color:var(--olive)}