/* The onboarding card and the kit's components, matched to today's app (computed styles measured live on Oct 18,
   keeper-question-ideas assets-src/today-app/REFERENCE.md). Forked from the question-ideas app.css with the QA fixes. */
:root{
  --forest:#111A0F;--pine:#1D3018;--ink:#162412;--olive:#4C6234;--olive-mid:#7D9366;--club:#3B532B;
  --cream:#E5D2B8;--eggshell:#F8EEE2;--card:#FFFAF5;--fill:rgba(243,234,223,.75);
  --fill-solid:#F6EEE4;--taupe:#A18372;--grey:#71717A;--zinc:#A1A1AA;--gold:#C89B3C;--gold-soft:#E9C979;
  --line:rgba(22,36,18,.12);
  --display:'SN Gangster',Georgia,'Times New Roman',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);
}

/* Today's QuestionCard: desktop 576 wide, 24px corners, padding 32/64/64; phone padding 32/24/24. On this page the phone
   card floats on the painting, so it keeps today's rounded corners (Wes, Oct 21). The card fits its content (Wes, Oct 21);
   a card that reveals things reserves their space itself so Next never moves (Jake, Sep 7). */
.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,0px);text-align:left}
.stage[data-size=phone] .kq-card{max-width:390px;padding:32px 24px 24px}
.kq-card *,.kq-card *::before,.kq-card *::after{box-sizing:border-box}
/* No grey tap flash anywhere on a card (JD19), the visibility line and a card's own tappable divs included (B02, E04 K4,
   E06 K6); press feedback comes from each control's own :active style. */
.kq-card,.kq-card *{-webkit-tap-highlight-color:transparent}
.kq-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0}
.kq-ic svg{display:block}

/* Header like today: desktop = Back on its own row, the title 24px below; phone = Back inline left of the title (16px gap). */
.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{grid-template-columns:32px minmax(0,1fr);column-gap:16px;align-items:center}
.stage[data-size=phone] .kq-head .kq-back{grid-row:1;grid-column:1;margin:0}
.stage[data-size=phone] .kq-head>:not(.kq-back){grid-column:2}
.stage[data-size=phone] .kq-head>.kq-sub,.stage[data-size=phone] .kq-head>.kq-hint{grid-column:1/-1}
.stage[data-size=phone] .kq-head.first{grid-template-columns:minmax(0,1fr)}
.stage[data-size=phone] .kq-head.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,opacity .2s}
@media (hover:hover){.kq-back:not([disabled]):hover{background:#F3EADF}}
.kq-back:focus-visible{outline:2px solid #A18372;outline-offset:2px}
.kq-back[disabled]{cursor:default}
/* A Back with nothing behind it (a one-step card) looks it, so nobody reads it as broken (QA WESA-17). */
.kq-back.dead{opacity:.45}
.kq-back svg{width:12px;height:10px}
.kq-title{font:400 30px/1.3 var(--display);letter-spacing:-.6px;color:var(--olive);margin:0;text-wrap:balance;overflow-wrap:anywhere}
.stage[data-size=phone] .kq-title{font-size:28px}
.kq-sub{margin:4px 0 0;font:500 16px/1.5 var(--body);color:#71717A;text-wrap:pretty}
.stage[data-size=phone] .kq-sub{font-size:14px;margin-top:4px}
.kq-hint{margin:2px 0 0;font:400 14px/1.4 var(--body);color:var(--olive-mid);text-wrap:pretty}
.stage[data-size=phone] .kq-hint{font-size:13px}
.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-pane{display:flex;flex-direction:column;flex:1;animation:kqIn .18s var(--ease) both}
@keyframes kqIn{from{opacity:0}to{opacity:1}}

/* The footer, as in the live app: Next is one bar across the whole bottom of the card (Wes, Oct 16), the visibility line
   sits under it. The key hint rides at the line's right end or just above the bar, never adding height. */
.kq-foot{position:relative;display:block;margin-top:24px}
.stage[data-size=phone] .kq-foot{margin-top:12px}
.kq-next{display:block;width:100%;min-width:0;height:48px;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:not([disabled]):active{background:#2A4423}
.kq-next[disabled]{background:rgba(12,12,13,.05);color:rgba(0,0,0,.15);cursor:default}
.kq-next:focus-visible{outline:2px solid #A18372;outline-offset:2px}
.kq-keyhint{position:absolute;right:0;top:calc(100% + 24px);margin:0;line-height:15.6px;white-space:nowrap;pointer-events:none;
  font:400 11px/1 var(--mono);letter-spacing:1px;color:#71717A;text-transform:uppercase}
.kq-foot.hint-up .kq-keyhint{top:auto;bottom:calc(100% + 4px)}
.stage[data-size=phone] .kq-keyhint{display:none}
@media (hover:none){.kq-keyhint{display:none}}

/* "Your match will see this": the eye (crossed out for private answers), underlined text, today's tooltip. Wraps on the
   narrowest phones instead of running past the card (QA WESA-09). */
.kq-vis{position:relative;display:flex;align-items:center;gap:4px;margin-top:24px;align-self:flex-start;max-width:100%;
  font:400 12px/1.3 var(--body);color:#71717A}
.stage[data-size=phone] .kq-vis{margin-top:12px;font-size:11px}
.kq-vis .kq-vis-t{text-decoration:underline;text-underline-offset:2px;min-width:0;text-wrap:pretty}
.kq-vis .kq-vis-ic svg{width:14px;height:9px}
.kq-vis .kq-ic svg[viewBox="0 0 17 12"]{width:15px;height:11px}
.kq-vis.has-tip{cursor:help}
.kq-vis-tip{position:absolute;left:0;bottom:calc(100% + 8px);z-index:20;width:max-content;padding:10px 12px;border-radius:6px;
  background:#1D3018;color:#F8EEE2;font:400 12px/1.45 var(--body);white-space:pre-line;opacity:0;transform:translateY(3px);pointer-events:none;max-width:min(300px,80vw,calc(100vw - 96px));
  transition:opacity .15s,transform .15s}
@media (hover:hover){.kq-vis.has-tip:hover .kq-vis-tip{opacity:1;transform:none}}
.kq-vis.has-tip:focus-visible .kq-vis-tip,.kq-vis.tip-on .kq-vis-tip{opacity:1;transform:none}
.kq-vis.has-tip:focus-visible{outline:2px solid #A18372;outline-offset:2px;border-radius:2px}

.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}
@media (hover:hover){.kq-link:hover{text-decoration-color:var(--olive)}}
.kq-link.on{color:var(--pine);font-weight:500;text-decoration-color:var(--pine)}

/* Everything you can click shows the pointing hand (Jake, Oct 17). :where() keeps this at zero specificity, so a card's own
   cursor (grab, text) still wins. */
: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}

/* 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. 16px text so phones never zoom in. */
.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;display:block}
.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:pretty}
.stage[data-size=phone] .kq-label{font-size:14px;line-height:21px}
.kq-label .opt{font:400 13px/1 var(--body);color:#71717A;margin-left:6px;white-space:nowrap}

/* Folded "Something to add/clarify?" (Wes, Oct 21): the link sits just above Next; a click opens the box. */
.kq-clarify{margin-top:14px;opacity:0;transform:translateY(4px);transition:opacity .25s var(--ease),transform .25s var(--ease);pointer-events:none}
.kq-clarify.on{opacity:1;transform:none;pointer-events:auto}
.kq-body>.kq-clarify,.kq-pane>.kq-clarify{margin-top:auto;padding-top:14px}
.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;overflow-y:auto}
/* The link looks small but its tap area is 44px tall (padding with a matching negative margin). */
.kq-clarify-link{display:block;margin:-11px auto;padding:13px 10px;text-align:center}
.kq-clarify.fold .kq-clarify-box{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s var(--ease)}
.kq-clarify.fold.open .kq-clarify-box{grid-template-rows:1fr}
.kq-clarify-in{min-height:0;overflow:hidden;padding:0 3px 3px;margin:0 -3px -3px}
/* Folded, the box keeps a 3px row for the field's focus edge, and the top of its label showed in it as a faint line
   under the link (F6, Nov 9). Its contents hide once it has folded and show at once when it opens. */
.kq-clarify.fold:not(.open) .kq-clarify-in{visibility:hidden;transition:visibility 0s linear .2s}
@media (prefers-reduced-motion:reduce){.kq-clarify.fold:not(.open) .kq-clarify-in{transition:none}}
.kq-clarify.fold.open .kq-clarify-link{display:none}
/* A card whose "Unsure/something else" opens this box (K.clarify unsure, Oct 27): the link keeps a 40px row (its 44px tap
   area, less of it hidden in the gaps) and the box Unsure asks for opens in that row as one 48px line, today's text field
   height, 4px into the gaps above and below. The row stays when the box opens, so Next never moves. */
.kq-clarify.unsure{position:relative}
.kq-clarify.unsure .kq-clarify-link{margin:-2px auto}
.kq-clarify.unsure.fold.open.inline .kq-clarify-link{display:block;visibility:hidden}
.kq-clarify.unsure.inline .kq-clarify-box{display:block;position:absolute;left:0;right:0;bottom:-4px;height:48px;animation:kq-inline-in .16s var(--ease)}
.kq-clarify.unsure.inline .kq-clarify-in{overflow:visible;padding:0;margin:0}
.kq-clarify.unsure.inline .kq-label{display:none}
.kq-clarify.unsure.inline .kq-textarea{height:48px;padding:11px 12px;overflow-y:auto}
@keyframes kq-inline-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.kq-clarify.unsure.inline .kq-clarify-box{animation: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 .2s,transform .2s;text-wrap:balance}
.kq-readout>span>b{font:inherit}
.kq-readout>span.out{opacity:0;transform:translateY(-4px)}
.kq-readout>span.pending{color:#8B7E70;font:400 13px/1.3 var(--body)}

/* Kit slider: a hollow handle parked mid-scale until touched, ticks on the track, the answer counts once touched.
   touch-action pan-y: a vertical swipe scrolls the page (QA WESB-04, QC-02). */
.kq-slider{position:relative;height:44px;margin:0 11px;touch-action:pan-y;cursor:pointer;outline:none;user-select:none;-webkit-user-select:none}
.kq-slider.has-tag{margin-top:26px}
.kq-slider .rail{position:absolute;left:0;right:0;top:21px;height:3px;border-radius:3px;background:#E7DED2}
.kq-slider .fill{position:absolute;left:0;top:21px;width:100%;height:3px;border-radius:3px;background:var(--olive);transform-origin:0 50%;transition:opacity .2s}
.kq-slider .tick{position:absolute;top:16px;width:1px;height:13px;background:#D3C7B8;transform:translateX(-.5px)}
.kq-slider .tick.mid{height:17px;top:14px;background:#BDAE9C}
/* Flat handle (Nov 8, the FEEL round): no drop shadow and no glow, in any state (Jake, Oct 29: "I don't think we use a
   lot of shadows throughout our design system"; "big shadow/glow on hover" off-brand). The card-coloured ring keeps it
   off the track; holding it adds one crisp olive ring, a keyboard focus a darker one. */
.kq-slider .thumb{position:absolute;left:0;top:11px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--olive);
  box-shadow:0 0 0 4px var(--card);transition:transform .18s var(--ease),background .2s,box-shadow .2s}
.kq-slider.fresh .thumb{background:#fff;box-shadow:0 0 0 1.5px var(--olive)}
/* The waiting handle is a plain hollow ring (Oct 24: the two grip bars read as a pause sign, six critiques). */
.kq-slider.dragging .thumb{transition:transform .15s var(--ease),background .2s,box-shadow .2s}
.kq-slider.held{cursor:grabbing}
.kq-slider.held .thumb,.kq-slider.dragging .thumb{background:var(--pine);box-shadow:0 0 0 4px var(--card),0 0 0 5.5px rgba(76,98,52,.55)}
.kq-slider.setdown .thumb{animation:kq-setdown .32s var(--ease)}
@keyframes kq-setdown{0%{box-shadow:0 0 0 4px var(--card),0 0 0 5.5px rgba(76,98,52,.55)}100%{}}
.kq-slider:focus-visible .thumb{box-shadow:0 0 0 4px var(--card),0 0 0 6px var(--olive)}
@media (hover:hover){.kq-slider:hover .thumb{background:var(--pine)}.kq-slider.fresh:hover .thumb{background:#fff;box-shadow:0 0 0 2px var(--olive)}}
/* The value rides on the handle as a tag (Wes, Oct 21). */
.kq-tag{position:absolute;left:0;top:-22px;transform:translateX(-50%);padding:3px 7px 2px;border-radius:5px;background:var(--pine);color:var(--eggshell);
  font:500 12px/1.2 var(--body);white-space:nowrap;pointer-events:none}
/* "Tap to choose" on a waiting handle is plain text, not a pill, and a tap on the words picks nothing (they sit above the
   slider and take no pointer): you pick on the track. One rule for the whole site (Oct 24: B14, E04, E05 already). */
.kq-slider.fresh .kq-tag{background:none;box-shadow:none;padding:3px 0 2px;color:var(--olive);font-weight:400}
.kq-slider.fresh .kq-tag:empty{display:none}
.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}
@media (prefers-reduced-motion:reduce){.kq-slider .thumb,.kq-slider .fill,.kq-slider.setdown .thumb{transition:none;animation:none}}

/* Option rows (the kit's own, for ideas). Today's exact rows are in now.css. */
.kq-opts{display:flex;flex-direction:column;gap:8px}
.kq-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;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}
@media (hover:hover){.kq-opt:hover{border-color:#E5D2B8}}
.kq-opt:active{background:#EFE5D8}
.kq-opt .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid #B9AC9D;flex:none;display:grid;place-items:center}
.kq-opts.multi .kq-opt .dot{border-radius:4px}
.kq-opt.on{background:#E9EEDF;border-color:rgba(76,98,52,.35)}
.kq-opt.on .dot{border-color:var(--olive);background:var(--olive)}
.kq-opt.on .dot::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.kq-opts.multi .kq-opt.on .dot::after{width:9px;height:5px;border-radius:0;background:none;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.kq-opt .t{flex:1;min-width:0}
.kq-opt .key{margin-left:auto;font:400 11px/1 var(--mono);color:#A99E92;border:1px solid #E2D8CB;border-radius:4px;padding:3px 5px}
@media (hover:none){.kq-opt .key{display:none}}
.stage[data-size=phone] .kq-opt .key{display:none}

/* A painted frame: flat on the card, no shadow (FEEL, Nov 8). */
.kq-art{position:relative;border-radius:12px;overflow:hidden;background:#d8cbb7}
.kq-art img{display:block;width:100%;height:100%;object-fit:cover}
.kq-art.missing{background:linear-gradient(160deg,#F1E2C4,#D9C3A0)}

/* Fresco choice tiles. No hover lift on art (Jake, Aug 14): hover only shows the number. */
.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,.1);transition:box-shadow .2s,filter .3s}
/* Press feedback while the finger is down (JD19): the painting dims a touch; no lift, no scale. */
.kq-fresco:active img{filter:brightness(.94)}
.kq-fresco img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .3s}
.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 11px/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:focus-visible{outline:2px solid #A18372;outline-offset:3px}
.kq-frescos.has .kq-fresco:not(.on) img{filter:grayscale(.85) brightness(.92)}
.kq-fresco.on{box-shadow:0 0 0 2px var(--gold)}
.kq-fresco.on .lab{background:#FFF6E3}
.kq-fresco.missing{background:linear-gradient(160deg,#F1E2C4,#D9C3A0)}

/* 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);text-align:left;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.kq-frow:active .art{filter:brightness(.92)}
.kq-frow .art{position:absolute;inset:0;transition:filter .3s 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 .3s 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%)}
.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%;background:rgba(17,26,15,.42);
  border:1px solid rgba(248,238,226,.35);color:#F8EEE2;font:400 11px/18px var(--mono);text-align:center}
@media (hover:none){.kq-frow .num{display:none}}
.stage[data-size=phone] .kq-frow .num,.stage[data-size=phone] .kq-fresco .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 0 0 1px var(--olive)}
.kq-frow.on .num{background:var(--olive);border-color:rgba(248,238,226,.6)}

/* Writing areas that overflow look scrollable (Jake, Oct 17). */
.kq-scroll{--sc-fade:34px;scrollbar-width:thin;scrollbar-color:rgba(76,98,52,.5) transparent}
.kq-scroll::-webkit-scrollbar{width:6px}.kq-scroll::-webkit-scrollbar-thumb{background:rgba(76,98,52,.45);border-radius:6px}
.kq-scroll.kq-sc-bot{-webkit-mask:linear-gradient(#000 calc(100% - var(--sc-fade)),rgba(0,0,0,.06));mask:linear-gradient(#000 calc(100% - var(--sc-fade)),rgba(0,0,0,.06))}
.kq-scroll.kq-sc-top{-webkit-mask:linear-gradient(rgba(0,0,0,.06),#000 var(--sc-fade));mask:linear-gradient(rgba(0,0,0,.06),#000 var(--sc-fade))}
.kq-scroll.kq-sc-top.kq-sc-bot{-webkit-mask:linear-gradient(rgba(0,0,0,.06),#000 var(--sc-fade),#000 calc(100% - var(--sc-fade)),rgba(0,0,0,.06));mask:linear-gradient(rgba(0,0,0,.06),#000 var(--sc-fade),#000 calc(100% - var(--sc-fade)),rgba(0,0,0,.06))}
.kq-sc-more{position:absolute;z-index:3;width:26px;height:26px;margin:-13px 0 0 -13px;border:0;padding:0;border-radius:50%;background:var(--olive);color:#FFFAF5;
  display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}
.kq-sc-more.on{opacity:.92;pointer-events:auto}
.kq-sc-more svg{width:14px;height:14px}

/* Dragging never selects text, even off the card (Jake, Oct 17). Controls only, never content (Jake, pg#43). */
.kq-nosel,.kq-nosel *{user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none}
.kq-card img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

.kq-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.kq-card *{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---- K.feel (Nov 8, the FEEL round) ---- */
/* Write family: characters typed at the end fade in (K.feel.ink). */
.kq-ink{display:inline}
/* Follow family: painted frames stacked in one box (K.feel.frames). The box has its size before the paintings arrive. */
.kq-frames{position:relative;overflow:hidden;border-radius:12px;background:#d8cbb7}
.kq-frames>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none}

/* Deck family (K.feel.deck, also K.r3b): the battery engine's own rules, moved here from the six R3 card files, so they
   apply whichever card loads first. */
.r3b .r3b-obj{position:relative;margin:2px 0 6px;-webkit-user-select:none;user-select:none}
.stage[data-size=phone] .r3b .r3b-obj{margin-bottom:4px}
.r3b .r3b-steps{display:grid}
/* Every statement sits on the floor of the shared cell, so the scale stays in one place whatever its length. */
.r3b .r3b-step{grid-area:1/1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end}
.r3b .r3b-step.off{visibility:hidden;pointer-events:none}
.r3b .r3b-q{margin:0;padding-top:6px;font:500 16px/24px var(--body);color:var(--olive);text-wrap:pretty}
.stage[data-size=phone] .r3b .r3b-q{font-size:14px;line-height:21px}
.r3b .kq-slider>*{pointer-events:none}
.r3b .kq-slider.fresh .kq-tag{background:none;box-shadow:none;padding:3px 0 2px;color:var(--olive);font-weight:400}
.r3b .kq-slider.fresh .thumb::after{display:none}
.r3b .kq-slider .kq-tag{font-variant-numeric:tabular-nums;min-width:26px;text-align:center}
.r3b .kq-ends{margin-top:2px;font-size:12px;white-space:nowrap}
.r3b .kq-ends span{color:#66666E;transition:color .2s var(--ease)}
.r3b .kq-ends span.lean{color:var(--pine)}
/* A part of the object you can tap to go back to its statement: no tap flash, press feedback, a pointer. */
.r3b .r3b-part{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.r3b .r3b-part:focus-visible{outline:2px solid var(--olive);outline-offset:2px;border-radius:6px}
/* The marks: one tab per statement that looks like what it is, a button (Seth, Nov 8): today's cream fill and rule, a
   firm olive edge on the open one, the answer's value beside the name once given. 44px tall on touch, one line at 320. */
.kq-marks{display:flex;gap:6px;margin:0 0 10px}
.kq-mark{flex:1 1 0;min-width:0;height:36px;padding:0 6px;border:1px solid #E5D2B8;border-radius:999px;background:rgba(243,234,223,.75);
  display:flex;align-items:center;justify-content:center;gap:5px;font:500 13px/1 var(--body);color:#71717A;white-space:nowrap;
  transition:background-color .15s,border-color .15s,color .15s}
.kq-mark .t{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* The value's place is there before the answer (a short rule while it waits), so a tab's name never moves when its value
   arrives; the value fades in (Nov 9: an empty value took no room and the name jumped about 6px; F4 drew the rule). */
.kq-mark .v{flex:none;min-width:1.3em;text-align:center;font-variant-numeric:tabular-nums;color:var(--olive)}
.kq-mark .v:empty{display:block;height:1.1em;background:linear-gradient(#D6C2A6,#D6C2A6) center/12px 1.5px no-repeat}
.kq-mark.done .v{animation:kq-mark-v .22s var(--ease) both}
@keyframes kq-mark-v{from{opacity:0;transform:translateY(2px)}}
.kq-mark.done{color:var(--club)}
.kq-mark.on{background:#fff;border-color:var(--olive);color:var(--olive);box-shadow:inset 0 0 0 1px var(--olive)}
@media (hover:hover){.kq-mark:not(.on):hover{background:#F3EADF;border-color:#D6C2A6}}
.kq-mark:active{background:#EFE5D8}
.kq-mark:focus-visible{outline:2px solid #A18372;outline-offset:2px}
@media (hover:none){.kq-mark{height:44px}}
/* On a phone the value sits under the name, so four or five tabs keep whole names at 320. */
.stage[data-size=phone] .kq-mark{flex-direction:column;gap:2px;font-size:12px;line-height:1.1;padding:0 3px;height:44px}
.stage[data-size=phone] .kq-mark .v{font-size:11px}
.stage[data-size=phone] .kq-mark .t{max-width:100%}
/* Five tabs (a deck of five statements): the name over its value at every size, squarer corners, closer together, so
   whole names fit at 320 (F4's look on C26 and C83 to C85, made the kit's for every deck on Nov 9). */
.kq-marks.five{gap:4px}
.kq-marks.five .kq-mark{flex-direction:column;gap:2px;height:44px;padding:0 3px;border-radius:12px;font-size:12px;line-height:1.1}
.kq-marks.five .kq-mark .t{max-width:100%}
.stage[data-size=phone] .kq-marks.five .kq-mark{padding:0 2px;font-size:11px}
@media (prefers-reduced-motion:reduce){.r3b .kq-ends span,.kq-mark{transition:none}.kq-mark.done .v{animation:none}}

/* Career's FogGate bloom (js/cards/traits/career.js) animates this property, so it is registered here, at load. A card's
   stylesheet with an @property rule restyled every element of the review page when the card arrived: 45 to 64 ms on a
   phone at 4x, in the middle of a scroll (lag pass, Oct 25). */
@property --e1c-bloom{syntax:'<percentage>';inherits:false;initial-value:0%}