/* Next Kopi · the ✦ helper · ported verbatim from design round 3 (patterns.css, 'Round 3' block). */
/* ==== Round 3 · the helper (additions) ============================================
   Tokens first. Declared on :root and every [data-theme] so aliases re-resolve in dark. */
:root,[data-theme]{
--helper-spark:var(--kopi-mark);--helper-fill:var(--kopi-soft);--helper-fill-edge:var(--kopi);--helper-web:var(--maybe);
--toast-bg:var(--ink);--toast-ink:var(--on-ink);
--r-pop:18px;
}
:root{--toast-link:#F4B3A2}
[data-theme="dark"]{--toast-link:#A9432C}
:root{
--dur-fill:1000ms; /* @kind other */
--dur-helper:1800ms; /* @kind other */
--ease-helper:cubic-bezier(.45,0,.55,1); /* @kind other */
}
/* the mark as a control: header (44) and in-field (32, 44 hit area) */
.hb,.hin{transition:transform var(--dur-tap),background var(--dur-tap),border-color var(--dur-tap)}
.hb.pressed,.hb:active{background:var(--kopi-soft);border-color:var(--kopi);transform:scale(.94)}
.hb.off{background:transparent;border-style:dashed}
.hin{width:32px;height:32px;border-radius:16px;display:grid;place-items:center;color:var(--ink);flex:none;position:relative;margin-right:-6px}
.hin:before{content:"";position:absolute;inset:-6px}
.hin.pressed,.hin:active{background:var(--kopi-soft)}
.inp.area .hin{align-self:flex-end;margin:0 -6px -6px 0}
.hm{display:block;flex:none;overflow:visible}
.hm.busy .sp{transform-box:fill-box;transform-origin:center;animation:hm-spark var(--dur-helper) var(--ease-helper) infinite}
.hm .tr{animation:hm-trace var(--dur-helper) linear infinite}
@keyframes hm-spark{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(45deg) scale(.7)}}
@keyframes hm-trace{to{stroke-dashoffset:-39.27}}
/* asking */
.hask{min-height:124px;position:relative;padding-right:52px}
.hask .hin{position:absolute;right:12px;bottom:8px;margin:0}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--kopi);vertical-align:-3px;margin-left:1px}
.modal .sh-h,.hpop .sh-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal .sh-h h3{font:500 24px/1.2 var(--font-display);flex:1;min-width:0}
.hpop .sh-h h3{font:600 16px/1.3 var(--font-body);flex:1}
/* drafting */
.sk.live{background-size:200% 100%;animation:sk-shim 1.6s linear infinite}
@keyframes sk-shim{from{background-position:100% 0}to{background-position:-100% 0}}
.hstat{display:flex;align-items:center;gap:8px;font-size:var(--t-sub);color:var(--ink-2);line-height:1.4}
/* the draft */
.hrows{display:flex;flex-direction:column}
.hrow{display:grid;grid-template-columns:68px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:baseline}
.hrow:first-child{border-top:0;padding-top:4px}
.hrow>dt{font:700 11px/1.6 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.hrow>dd{font-size:var(--t-body);line-height:1.4;color:var(--ink);display:flex;flex-direction:column;gap:4px;text-wrap:pretty}
.webv{text-decoration:underline dotted var(--helper-web);text-decoration-thickness:2px;text-underline-offset:4px}
.hsrc{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:var(--t-cap);color:var(--ink-2);line-height:1.35}
.hsrc .ic{width:14px;height:14px;color:var(--helper-web)}
.hsrc a{font-weight:600}
/* the fill: each changed field glows kopi, then settles */
.inp.filled{animation:hl-fill var(--dur-fill) ease-out 1}
.inp.filled.loop{animation:hl-loop 4s ease-out infinite}
.inp.filled.hold{background:var(--helper-fill);border-color:var(--helper-fill-edge);animation:none}
.inp.filled.mid{background:color-mix(in oklab,var(--helper-fill) 45%,var(--paper-sunk));border-color:color-mix(in oklab,var(--helper-fill-edge) 35%,transparent);animation:none}
.inp.filled.done{animation:none}
@keyframes hl-fill{0%{background:var(--helper-fill);border-color:var(--helper-fill-edge)}}
@keyframes hl-loop{0%,6%{background:var(--helper-fill);border-color:var(--helper-fill-edge)}30%,100%{background:var(--paper-sunk);border-color:transparent}}
/* single-field helper, attached under its field */
.hpop{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--r-pop);box-shadow:var(--shadow-float);padding:14px;display:flex;flex-direction:column;gap:12px;position:relative;z-index:3}
.hpop:before{content:"";position:absolute;top:-7px;right:20px;width:12px;height:12px;background:var(--paper-raised);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
/* one-line confirmation */
.toast{position:absolute;left:16px;right:16px;bottom:36px;z-index:60;background:var(--toast-bg);color:var(--toast-ink);border-radius:16px;padding:4px 6px 4px 16px;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow-float);font:500 15px/1.35 var(--font-body)}
.toast>button{height:44px;padding:0 12px;font-weight:700;color:var(--toast-link);flex:none}
@media (prefers-reduced-motion:reduce){.hm.busy .sp,.hm .tr,.sk.live,.inp.filled,.inp.filled.loop{animation:none}}