/* Next Kopi · the key wizard · ported verbatim from design round 4 (patterns.css, 'Round 4' block). */
/* ==== Round 4 · the key wizard (additions) ========================================
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark. */
:root,[data-theme]{
--wz-tile:var(--paper-sunk);--wz-tile-ink:var(--ink);--wz-tile-edge:var(--line);
--wz-best:var(--kopi);--wz-best-soft:var(--kopi-soft);--wz-ring:var(--kopi);
--wz-ok:var(--in);--wz-ok-soft:var(--in-soft);--wz-stop:var(--maybe);--wz-stop-soft:var(--maybe-soft);
--wz-schem:var(--paper);--wz-schem-bar:var(--line);--wz-schem-btn:var(--ink-2);
--r-tile:14px;--paste-h:76px;
}
:root{--os-callout:#1C1C1E;--os-callout-ink:#FFFFFF}
:root{
--dur-spin:900ms; /* @kind other */
}
/* service monogram: a neutral tile, never a borrowed logo */
.mono{width:48px;height:48px;border-radius:var(--r-tile);background:var(--wz-tile);color:var(--wz-tile-ink);border:1px solid var(--wz-tile-edge);display:grid;place-items:center;font:500 19px/1 var(--font-display);flex:none}
.mono.sm{width:36px;height:36px;border-radius:10px;font-size:15px}
.mono.lg{width:64px;height:64px;border-radius:18px;font-size:26px}
/* choose a service */
.svcs{display:flex;flex-direction:column;gap:8px}
.svc{display:grid;grid-template-columns:48px minmax(0,1fr) 20px;gap:12px;align-items:center;padding:12px;border:1.5px solid var(--line);border-radius:var(--r-card);background:var(--paper-raised);text-align:left;width:100%;color:var(--ink)}
.svc .n{font:600 17px/1.3 var(--font-body);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.svc .n small{font:400 17px var(--font-body);color:var(--ink-2)}
.svc .d{font-size:var(--t-sub);line-height:1.4}
.svc .c{font-size:var(--t-cap);line-height:1.4;color:var(--ink-2)}
.svc>.ic{color:var(--ink-3)}
.svc.best{border-color:var(--wz-best);background:var(--wz-best-soft)}
.svc.best .mono{background:var(--paper-raised)}
.tag.best{background:var(--wz-best);color:var(--on-kopi)}
/* step cards: now (open), done (collapsed, ticked), next (dashed) */
.wz{display:flex;flex-direction:column;gap:10px}
.wzs{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-raised);padding:16px;display:flex;flex-direction:column;gap:14px}
.wzs>.h{display:flex;align-items:center;gap:12px}
.wzs .no{width:28px;height:28px;border-radius:14px;border:1.5px solid var(--line-strong);display:grid;place-items:center;font:600 14px var(--font-body);color:var(--ink-2);flex:none}
.wzs .no .ic{width:16px;height:16px}
.wzs .ttl{font:600 17px/1.3 var(--font-body);flex:1;min-width:0}
.wzs.now{border:1.5px solid var(--kopi)}
.wzs.now .no{background:var(--kopi);border-color:var(--kopi);color:var(--on-kopi)}
.wzs.done,.wzs.next{padding:10px 16px;background:transparent}
.wzs.done .no{background:var(--wz-ok-soft);border-color:transparent;color:var(--wz-ok)}
.wzs.done .ttl{font-weight:500;color:var(--ink-2)}
.wzs.done a{font-size:var(--t-sub);font-weight:600}
.wzs.next{border-style:dashed}
.wzs.next .ttl{font-weight:500;color:var(--ink-3)}
.wb{display:flex;align-items:center;gap:8px;font-size:var(--t-sub);line-height:1.4;color:var(--ink)}
.wb:before{content:"";width:8px;height:8px;border-radius:4px;background:var(--kopi);flex:none}
/* schematic of the service's own page: drawn, not a screenshot */
.schem{border:1px solid var(--line-strong);border-radius:12px;background:var(--wz-schem);overflow:hidden;position:relative}
.schem .u{height:24px;display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1px solid var(--line);font:500 10px var(--font-mono);color:var(--ink-3);white-space:nowrap}
.schem .u i{width:6px;height:6px;border-radius:3px;background:var(--line-strong);flex:none}
.schem .u span{margin-left:6px;overflow:hidden;text-overflow:ellipsis}
.schem .bd{padding:14px 20px 18px;display:flex;flex-direction:column;gap:9px}
.schem .br{height:7px;border-radius:4px;background:var(--wz-schem-bar);display:block}
.schem .br.hd{height:10px;background:var(--line-strong)}
.schem .sbtn{height:26px;padding:0 10px;border-radius:7px;border:1px solid var(--line-strong);font:600 11px var(--font-body);color:var(--ink);display:inline-flex;align-items:center;gap:4px;background:var(--paper-raised);white-space:nowrap;flex:none}
.schem .sbtn.solid{background:var(--wz-schem-btn);color:var(--paper-raised);border-color:transparent}
.schem .sfld{height:28px;border:1px solid var(--line-strong);border-radius:7px;background:var(--paper-raised);display:flex;align-items:center;padding:0 8px;font:500 12px var(--font-body);color:var(--ink);gap:6px}
.schem .sfld code{font:500 11px var(--font-mono);color:var(--ink-2);flex:1;min-width:0;overflow:hidden}
.schem .cap{position:absolute;right:10px;bottom:6px;font:500 9px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ring{position:relative}
.ring:after{content:"";position:absolute;inset:-7px -9px;border:2.5px solid var(--wz-ring);border-radius:var(--r-pill);transform:rotate(-4deg);pointer-events:none}
/* paste */
.paste{height:var(--paste-h);border-radius:var(--r-card);background:var(--kopi);color:var(--on-kopi);font:600 20px var(--font-body);display:flex;align-items:center;justify-content:center;gap:12px;width:100%}
.paste .ic{width:26px;height:26px}
.paste.ready{box-shadow:0 0 0 5px var(--kopi-soft)}
.or{display:flex;align-items:center;gap:10px;font-size:var(--t-cap);color:var(--ink-2)}
.or:before,.or:after{content:"";height:1px;flex:1;background:var(--line)}
.osb{position:absolute;left:50%;top:-50px;transform:translateX(-50%);height:38px;padding:0 16px;border-radius:10px;background:var(--os-callout);color:var(--os-callout-ink);font:500 16px -apple-system,system-ui,sans-serif;display:flex;align-items:center;box-shadow:var(--shadow-float);z-index:5}
.osb:after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:var(--os-callout);transform:translateX(-50%) rotate(45deg)}
/* the key, masked */
.keyv{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-field);background:var(--paper-sunk)}
.keyv code{font:500 16px var(--font-mono);color:var(--ink)}
/* checking */
.ckl{display:flex;flex-direction:column}
.ckl>div{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:var(--t-body);line-height:1.35;border-top:1px solid var(--line)}
.ckl>div:first-child{border-top:0}
.ckl .st{width:24px;height:24px;display:grid;place-items:center;flex:none;color:var(--wz-ok)}
.ckl .wait{color:var(--ink-3)}
.ckl .wait .st{color:var(--ink-3)}
.ckl .no{width:24px;height:24px;border-radius:12px;border:1.5px solid var(--line-strong);display:grid;place-items:center;font:600 13px var(--font-body);color:var(--ink-2)}
.spin{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--kopi);animation:wz-spin var(--dur-spin) linear infinite}
@keyframes wz-spin{to{transform:rotate(360deg)}}
/* results */
.res{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:8px 0 4px}
.res h4{font:500 28px/1.2 var(--font-display);text-wrap:balance}
.res p{text-wrap:pretty}
.flour{width:112px;height:112px;border-radius:56px;background:var(--kopi-soft);display:grid;place-items:center;position:relative}
.flour .sk2{position:absolute}
.stop{width:64px;height:64px;border-radius:32px;display:grid;place-items:center;background:var(--wz-stop-soft);color:var(--wz-stop)}
.stop .ic{width:28px;height:28px}
@media (prefers-reduced-motion:reduce){.spin{animation:none;border-top-color:var(--line-strong)}}