/* 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}
.kq-card :where(button,a,[role=button],[role=radio],[role=checkbox],[role=slider],label,input,select,textarea){-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:#A99E92;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;max-width:min(300px,80vw);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;
  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:#A1A1AA;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}
.kq-clarify.fold.open .kq-clarify-link{display: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}
.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),0 2px 6px rgba(22,36,18,.3);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),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{transition:transform .15s var(--ease),background .2s,box-shadow .2s}
.kq-slider.held{cursor:grabbing}
.kq-slider.held .thumb{box-shadow:0 0 0 4px var(--card),0 0 0 7px rgba(76,98,52,.24),0 7px 16px rgba(22,36,18,.3)}
.kq-slider.setdown .thumb{animation:kq-setdown .38s}
@keyframes kq-setdown{0%{box-shadow:0 0 0 4px var(--card),0 0 0 7px rgba(76,98,52,.24),0 7px 16px rgba(22,36,18,.3)}100%{}}
.kq-slider:focus-visible .thumb{box-shadow:0 0 0 4px var(--card),0 0 0 6px rgba(76,98,52,.45)}
@media (hover:hover){.kq-slider:hover .thumb{box-shadow:0 0 0 4px var(--card),0 0 0 6px rgba(76,98,52,.16),0 2px 6px rgba(22,36,18,.3)}}
/* 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}
.kq-slider.fresh .kq-tag{background:#fff;color:var(--olive);box-shadow:0 0 0 1px rgba(76,98,52,.35)}
.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. */
.kq-art{position:relative;border-radius:12px;overflow:hidden;background:#d8cbb7;box-shadow:0 6px 18px rgba(22,36,18,.14)}
.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,.08),0 4px 12px rgba(22,36,18,.12);transition:box-shadow .2s,filter .3s}
.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),0 8px 22px rgba(22,36,18,.2)}
.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);box-shadow:0 1px 2px rgba(22,36,18,.06);text-align:left;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.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}}
.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)}

/* 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;box-shadow:0 3px 8px rgba(22,36,18,.28);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}}