/* Today's app fields, drawn by site/js/now.js. Sources: keeper-ui RadioUnit, CheckboxUnit, Slider, TextField, OrderedList,
   ExclusiveToggleButtonGroup and the theme (matchmaking origin/prod), with the computed values the question-ideas site
   measured live on Oct 18 (assets-src/today-app). Phone sizes apply on the Phone stage (under 680px in the app). */
.kn-fields{display:flex;flex-direction:column;gap:16px}
.stage[data-size=phone] .kn-fields{gap:12px}
.kn-field[hidden]{display:none}
.kn-label{display:block;margin:0 0 4px;font:500 16px/24px var(--body);color:var(--olive);text-wrap:pretty}
.stage[data-size=phone] .kn-label{font-size:14px;line-height:21px}
.kn-helper{font:400 12px/1.3 var(--body);color:#71717A;margin-left:6px}

/* RadioUnit and CheckboxUnit rows: fill, 8px corners, 12px padding, 4px apart; white 16px control that turns club green;
   the picked row gets a #7D9366 rule; Book 16/24 olive (14/21 on a phone); the 24px key chip on desktop only. */
.kn-opts{display:flex;flex-direction:column;gap:4px}
.kn-row{display:flex;align-items:flex-start;gap:12px;width:100%;padding:11px 12px;border-radius:8px;background:var(--fill);border:1px solid transparent;
  font:350 16px/24px var(--body);color:var(--olive);text-align:left;cursor:pointer;transition:border-color .15s,background-color .15s}
@media (hover:hover){.kn-row:hover{border-color:#E5D2B8}}
.kn-row:active{background:#EFE4D6}
.kn-row.on{border-color:#7D9366}
.kn-row:focus-visible{outline:none;border-color:#A18372}
.kn-row .kn-dot{flex:none;width:16px;height:16px;margin-top:4px;border-radius:16px;background:#fff;display:grid;place-items:center}
.kn-row.on .kn-dot{background:var(--club)}
.kn-row.on .kn-dot::after{content:"";width:6px;height:6px;border-radius:4px;background:#fff}
.kn-row .kn-box{flex:none;width:16px;height:16px;margin-top:4px;border-radius:4px;background:#fff;display:grid;place-items:center;color:#fff}
.kn-row.on .kn-box{background:var(--club)}
.kn-row .kn-box svg{width:9px;height:9px;opacity:0}
.kn-row.on .kn-box svg{opacity:1}
.kn-row .kn-t{flex:1;min-width:0}
.kn-row .kn-key{flex:none;width:24px;height:24px;border-radius:4px;background:#FFFAF5;box-shadow:0 1px 0 #F4E7D7;
  font:400 11px/24px var(--mono);letter-spacing:1.1px;text-indent:1.1px;text-align:center;color:var(--olive)}
.stage[data-size=phone] .kn-row{font-size:14px;line-height:21px;padding:12px}
.stage[data-size=phone] .kn-row .kn-dot,.stage[data-size=phone] .kn-row .kn-box{margin-top:2px}
.stage[data-size=phone] .kn-row .kn-key{display:none}
@media (hover:none){.kn-row .kn-key{display:none}}

/* Slider (keeper-ui Slider): label left, value right (blank until answered); a 4px cream rail that goes pale green on hover;
   the olive range; a 16px olive thumb ringed in the card colour that grows to 24px on hover, drag or keyboard focus;
   the two ends under the track. With no default the slider starts unanswered: no thumb, no range. */
.kn-sl{display:flex;flex-direction:column;gap:4px}
.kn-sl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;min-height:24px}
.kn-sl-head .kn-label{margin:0;flex:1;min-width:0}
.kn-sl-val{flex:none;min-width:50px;text-align:right;font:500 16px/24px var(--body);color:var(--olive);overflow-wrap:break-word}
.kn-sl-val.text{min-width:140px;max-width:50%}
.stage[data-size=phone] .kn-sl-val{font-size:14px;line-height:21px}
.kn-sl-track{position:relative;height:26px;cursor:pointer;touch-action:pan-y;outline:none}
.kn-sl-rail{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:4px;border-radius:2px;background:#F8EEE2;transition:background-color .075s}
@media (hover:hover){.kn-sl-track:hover .kn-sl-rail{background:#D7DFCE}}
.kn-sl.dragging .kn-sl-rail,.kn-sl.fv .kn-sl-rail{background:#D7DFCE}
.kn-sl-lane{position:relative;height:100%;margin:0 8px}
.kn-sl-range{position:absolute;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--olive)}
.kn-sl-thumb{position:absolute;top:50%;left:0;width:16px;height:16px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--card);background:var(--olive);cursor:grab;
  transition:width .1s,height .1s}
@media (hover:hover){.kn-sl-thumb:hover{width:24px;height:24px}}
.kn-sl.dragging .kn-sl-thumb{width:24px;height:24px;cursor:grabbing;z-index:1}
.kn-sl.fv .kn-sl-thumb.f{width:24px;height:24px;outline:1px solid #A18372;z-index:1}
.kn-sl.unset .kn-sl-range{display:none}
.kn-sl.unset .kn-sl-thumb{opacity:0}
.kn-sl.unset.fv .kn-sl-thumb{opacity:1}
.kn-sl-foot{display:flex;justify-content:space-between;gap:48px;font:400 12px/1.3 var(--body);color:#71717A}
.kn-sl-foot span:last-child{text-align:right}
.stage[data-size=phone] .kn-sl-foot{font-size:11px}

/* TextField: multiline boxes are 11 rows on desktop and 13 on a phone, fixed, scrolling inside. */
.kn-ta{display:block;width:100%;height:290px;overflow-y:auto}
.stage[data-size=phone] .kn-ta{height:338px}
.kn-brainstorm{align-self:flex-end;margin-top:8px;height:32px;padding:2px 12px 0;border:0;border-radius:4px;background:var(--pine);color:var(--eggshell);
  font:400 12px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;cursor:pointer}
.kn-text{display:flex;flex-direction:column}
.kn-currency{position:relative}
.kn-currency .kq-input{padding-left:26px}
.kn-currency::before{content:"$";position:absolute;left:12px;top:12px;font:350 16px/24px var(--body);color:var(--olive);pointer-events:none}
.kn-search{position:relative}
.kn-search .kq-input{padding-right:40px}
.kn-search .kq-ic{position:absolute;right:12px;top:16px;color:var(--olive);pointer-events:none}
.kn-search .kq-ic svg{width:16px;height:16px}

/* ExclusiveToggleButtonGroup (segmented). */
.kn-seg{display:flex;width:100%;border-radius:4px;background:var(--fill);padding:2px;gap:2px}
.kn-seg button{flex:1 1 0;min-width:0;min-height:44px;padding:8px 6px;border:0;border-radius:3px;background:none;font:350 14px/1.2 var(--body);color:var(--olive);cursor:pointer}
@media (hover:hover){.kn-seg button:not(.on):hover{background:rgba(255,255,255,.6)}}
.kn-seg button.on{background:var(--pine);color:var(--eggshell)}
.stage[data-size=phone] .kn-seg button{font-size:13px}

/* OrderedList (rank): the number, then a fill row with the drag dots and the label. */
.kn-rank{display:flex;flex-direction:column;gap:4px;padding:4px 0 0;margin:0;list-style:none}
.kn-rank li{display:flex;gap:12px;border-radius:8px;cursor:grab;touch-action:pan-y}
.kn-rank .kn-n{display:flex;align-items:center;justify-content:center;min-width:16px;font:500 16px/24px var(--body);color:var(--olive)}
.kn-rank .kn-item{flex:1;display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;background:var(--fill);font:350 16px/24px var(--body);color:var(--olive);
  border:1px solid transparent}
.kn-rank .kn-item .kq-ic{color:#A18372}
.kn-rank .kn-item .kq-ic svg{width:6px;height:10px}
.kn-rank li.lift .kn-item{background:#fff;border-color:#E5D2B8;box-shadow:0 6px 16px rgba(22,36,18,.14)}
.kn-rank li:focus-visible{outline:2px solid #A18372;outline-offset:2px}
.stage[data-size=phone] .kn-rank .kn-item{font-size:14px;line-height:21px}

/* Chips with a level each (ListWithImportanceField). */
.kn-lwi{display:flex;flex-direction:column;gap:8px}
.kn-lwi-list{display:flex;flex-direction:column;gap:4px}
.kn-lwi-row{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-radius:8px;background:var(--fill);font:350 15px/22px var(--body);color:var(--olive)}
.kn-lwi-row span{flex:1}
.kn-lwi-row select{height:32px;border:1px solid #E5D2B8;border-radius:4px;background:#fff;color:var(--olive);font:350 14px/1 var(--body);padding:0 6px}
.kn-lwi-row button{width:32px;height:32px;border:0;border-radius:4px;background:none;color:#A1A1AA;cursor:pointer}
.kn-menu{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;max-height:240px;overflow:auto;background:#fff;border:1px solid #7D9366;border-radius:4px}
.kn-menu button{display:block;width:100%;min-height:44px;padding:12px 16px;border:0;border-bottom:1px solid #F4F4F5;background:#fff;text-align:left;font:350 16px/20px var(--body);color:var(--olive);cursor:pointer}
.kn-menu button.hi,.kn-menu button:hover{background:#EBEDE9}

/* Toggle switch (traits), and the steps' own bits. */
.kn-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:0;border:0;background:none;font:500 16px/24px var(--body);color:var(--olive);cursor:pointer;text-align:left}
.kn-switch i{flex:none;position:relative;width:40px;height:24px;border-radius:12px;background:#D9D0C4;transition:background .15s}
.kn-switch i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.kn-switch[aria-checked=true] i{background:var(--club)}
.kn-switch[aria-checked=true] i::after{transform:translateX(16px)}
.stage[data-size=phone] .kn-switch{font-size:14px}
.kn-tabs{display:flex;gap:4px;padding:3px;border-radius:24px;background:var(--fill)}
.kn-tabs button{flex:1;min-height:40px;padding:6px 10px;border:0;border-radius:20px;background:none;font:350 14px/1.2 var(--body);color:var(--olive);cursor:pointer}
.kn-tabs button.on{background:var(--pine);color:var(--eggshell)}
.kn-tier{display:flex;flex-direction:column;gap:4px}
.kn-tier .kn-rest{font:350 14px/1.4 var(--body);color:#71717A;padding:4px 0}
.kn-meter{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.kn-meter-row{display:flex;justify-content:space-between;font:400 12px/1.3 var(--body);color:#71717A}
.kn-meter-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.kn-meter-bar i{height:4px;border-radius:2px;background:#EDE4D8}
.kn-meter-bar i.on{background:var(--olive)}
.kn-hint{font:400 12px/1.4 var(--body);color:#71717A}
.kn-toggle2{display:inline-flex;gap:0;border-radius:4px;background:var(--fill);padding:2px}
.kn-toggle2 button{min-width:96px;min-height:44px;padding:0 16px;border:0;border-radius:3px;background:none;font:350 16px/1 var(--body);color:var(--olive);cursor:pointer}
.kn-toggle2 button.on{background:var(--pine);color:var(--eggshell)}
.kn-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;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}
.kn-btn.light{background:#F8EEE2;color:#162412}
.kn-btn .kq-ic svg{width:16px;height:16px}
.stage[data-size=phone] .kn-btn{font-size:14px}
.kn-textlink{align-self:center;min-height:44px;padding:0 12px;border:0;background:none;font:400 14px/1 var(--body);color:#52525B;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kn-photo{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:#E8DFD3}
.kn-photo img{width:100%;height:100%;object-fit:cover;display:block}
.kn-rates{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kn-rates button{min-height:48px;border:1px solid #E5D2B8;border-radius:4px;background:#fff;font:400 14px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);cursor:pointer}
.kn-rates button.on{background:var(--pine);border-color:var(--pine);color:var(--eggshell)}
.kn-memo{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 0}
.kn-memo button{width:72px;height:72px;border:0;border-radius:50%;background:var(--pine);color:var(--eggshell);display:grid;place-items:center;cursor:pointer}
.kn-memo button.rec{background:#A3271C}
.kn-memo .kq-ic svg{width:22px;height:22px}
.kn-memo p{margin:0;font:400 13px/1.3 var(--body);color:#71717A}
.kn-progress{font:400 14px/1.4 var(--body);color:var(--olive)}
.kn-heard{display:flex;flex-direction:column;gap:0;margin:-32px -64px 0;border-radius:24px 24px 0 0;overflow:hidden}
.stage[data-size=phone] .kn-heard{margin:-32px -24px 0}
.kn-heard .kn-paint{aspect-ratio:16/7;background:#CDBB9F center/cover no-repeat}
.kn-eyebrow{display:flex;align-items:center;justify-content:space-between;margin:24px 0 8px}
.kn-eyebrow span{font:400 12px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--olive-mid)}
.kn-answers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.kn-answers button{min-height:48px;padding:10px 12px;border:1px solid #E5D2B8;border-radius:8px;background:#fff;font:350 15px/1.25 var(--body);color:var(--ink);text-align:left;cursor:pointer}
.kn-answers button.on{border-color:var(--pine);background:#F2F4EE}
.stage[data-size=phone] .kn-answers{grid-template-columns:1fr}

/* Today's match counter: desktop rail cards and the phone stats bar. */
.kn-rail-demo{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px;align-items:start;width:100%;max-width:860px;margin:0 auto}
.kn-rail-demo.phone{display:flex;flex-direction:column;gap:12px;max-width:390px}
.kn-rail{display:flex;flex-direction:column;gap:12px}
.kn-rc{border-radius:20px;padding:18px 20px;font:400 15px/1.4 var(--body)}
.kn-rc h3{margin:0 0 4px;font:500 17px/1.3 var(--body)}
.kn-rc.verified{background:#1D3018;color:#A9B98F}
.kn-rc.verified h3{color:#F8EEE2}
.kn-rc.potential{background:#F8EEE2;color:#7D9366}
.kn-rc.potential h3{color:#4C6234}
.kn-rc.potential .r{display:flex;justify-content:space-between;color:#7D9366;margin-top:6px}
.kn-rc.ruled{background:#2B2117;color:#E5D2B8}
.kn-statsbar{display:flex;align-items:center;gap:24px;padding:12px 16px;border-radius:16px;background:#1D3018;color:#F8EEE2;font:400 13px/1.3 var(--body)}
.kn-statsbar b{display:block;font:500 18px/1.2 var(--body)}
.kn-statsbar button{margin-left:auto;min-height:40px;padding:0 18px;border:0;border-radius:20px;background:#3B532B;color:#F8EEE2;font:500 14px/1 var(--body)}
.kn-caption{font:400 12px/1.4 var(--body);color:#71717A;text-align:center;margin-top:6px}