/* Minuet — chrome tokens for the DESIGN CANVASES.
   Identical to handoff-v1.0/assets/chrome.css minus seven rules that
   minuet-app.css also defines in full (.dev .dev* .status .chd .csubline
   .srow .prow). The handoff bundle keeps its copy because it is the SOLE
   stylesheet for handoff-v1.0/screens/*.html — deleting from that file breaks
   four shipped screens (learned 2026-08-09). Canvases load this one. */
/* Minuet chrome tokens + chrome components — V1.0
   Chrome = app furniture (Store · My Skins · Settings, later Pieces · Practice).
   Skins never touch these. Two appearances, one token set.
   Every functional-text token clears 4.5:1 on its own ground (Scripts/tests/contrast_gate.sh).

   --accsoft / --accmark / --accground / --accrule carry the SAME value today and
   are four tokens on purpose (R2 item 16, mirroring ChromeTokens.swift): active
   state / a row marked out of the flow / container furniture / the accent
   hairline. Do not collapse them — the names exist so a future retune of one
   cannot silently move the other three. */
.chrome-light{--bg:#F3ECDB;--surf:#FDFAF1;--ink:#3A2412;--ink2:rgba(58,36,18,.8);--ink3:rgba(58,36,18,.68);--line:rgba(58,36,18,.16);--acc:#9B7F30;--accink:#6E5518;--accsoft:rgba(155,127,48,.12);--accmark:rgba(155,127,48,.12);--accground:rgba(155,127,48,.12);--accrule:rgba(155,127,48,.12);--cdink:#A63A2E;--tabbg:#EBE0C8;--chipink:#5C3A1E;--rad:12px;--shadow:none;--imgb:1px solid rgba(58,36,18,.2)}
.chrome-dark{--bg:#121009;--surf:#1D1811;--ink:#F5F0E8;--ink2:rgba(245,240,232,.82);--ink3:rgba(245,240,232,.62);--line:rgba(224,200,114,.15);--acc:#E0C872;--accink:#E0C872;--accsoft:rgba(224,200,114,.12);--accmark:rgba(224,200,114,.12);--accground:rgba(224,200,114,.12);--accrule:rgba(224,200,114,.12);--cdink:#FF9D92;--tabbg:#0B0905;--chipink:#E0C872;--rad:16px;--shadow:0 0 24px rgba(224,200,114,.07);--imgb:1px solid rgba(224,200,114,.22)}
.chrome{background:var(--bg);color:var(--ink);position:relative;height:762px;overflow:hidden;padding-top:47px}
.chrome-dark .chrome::before{content:"";position:absolute;left:-10%;top:-6%;width:120%;height:46%;background:radial-gradient(ellipse at 50% 0%,rgba(224,200,114,.11),transparent 70%);pointer-events:none}
.cbody{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;padding-top:16px}
.ctitle{font-family:'Playfair Display',serif;font-weight:700;font-size:14px;letter-spacing:6px;color:var(--accink)}
.csub{display:flex;justify-content:center;gap:20px;margin-top:14px}
.csub span{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--ink3);padding-bottom:6px}
.csub span.on{color:var(--accink);border-bottom:1.5px solid var(--acc)}
.chips{display:flex;gap:7px;padding:14px 20px 10px}
.chip{font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:1px;padding:5px 13px;border-radius:999px;border:1px solid var(--line);color:var(--ink2)}
.chip.on{background:var(--accsoft);border-color:var(--acc);color:var(--chipink)}
.scroll{flex:1;overflow:hidden;position:relative}
.fadeb{position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(180deg,transparent,var(--bg))}
.hero{margin:2px 20px 0;border-radius:var(--rad);overflow:hidden;display:flex;height:160px;background:var(--surf);border:1.5px solid var(--acc);box-shadow:var(--shadow)}
.hero img{width:108px;height:100%;object-fit:cover;object-position:top}
.hero .ht{padding:14px 15px 12px;display:flex;flex-direction:column;min-width:0}
.kick{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:2.4px;font-weight:700;color:var(--accink)}
.hn{font-family:'Playfair Display',serif;font-size:20px;color:var(--ink);margin-top:4px}
.hg{font-family:'DM Sans',sans-serif;font-size:10.5px;line-height:1.45;color:var(--ink2);margin-top:4px}
.hc{margin-top:auto}
.cta{display:inline-block;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;padding:6px 16px;border-radius:999px;border:1.5px solid var(--acc);color:var(--accink);background:var(--accsoft)}
.lim{margin:12px 20px 0;display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:var(--rad);border:1px solid rgba(196,75,63,.5);background:rgba(196,75,63,.08)}
.lim .lt{flex:1}
.lim .lt b{display:block;font-family:'DM Sans',sans-serif;font-size:12px;color:var(--ink)}
.lim .lt span{font-family:'DM Sans',sans-serif;font-size:9.5px;letter-spacing:1px;color:var(--ink3)}
.lim .cd{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cdink)}
.secrow{display:flex;justify-content:space-between;align-items:baseline;padding:0 20px;margin:18px 0 10px}
.secrow h3{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:3px;font-weight:700;color:var(--accink);margin:0}
.secrow .more{font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--ink3)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 20px}
.gi{height:224px;border-radius:var(--rad);overflow:hidden;position:relative;border:var(--imgb);box-shadow:var(--shadow)}
.gi img{width:100%;height:100%;object-fit:cover;object-position:top}
.gn{font-family:'Playfair Display',serif;font-size:14px;font-weight:500;color:var(--ink);text-align:center;margin-top:8px}
.gp{text-align:center;margin-top:5px}
.bdg{position:absolute;top:9px;left:9px;font-family:'DM Sans',sans-serif;font-size:8.5px;font-weight:700;letter-spacing:1.5px;padding:3px 8px;border-radius:6px;z-index:2}
.bdg.sale{background:#C44B3F;color:#fff}
.staff{height:1px;margin:10px 20px 4px;border-top:1px solid var(--line)}
.chrome-light .staff{height:17px;border-top:0;background:repeating-linear-gradient(180deg,rgba(58,36,18,.22) 0 1px,transparent 1px 4px);margin:8px 20px 6px;opacity:.8}
.pi{flex:1;min-width:0}
.pi b{display:block;font-family:'Playfair Display',serif;font-weight:600;font-size:16px;color:var(--ink)}
.pi span{font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--ink3)}
.pm{text-align:right}
.pm b{display:block;font-family:'JetBrains Mono',monospace;font-size:17px;color:var(--accink)}
.pm span{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink3)}
.addrow{margin:16px 20px 0;height:46px;border-radius:var(--rad);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--accink)}
.quiet{font-family:'Playfair Display',serif;font-style:italic;font-size:12.5px;line-height:1.5;color:var(--ink3);padding:18px 26px 0;text-align:center}
.week{display:flex;gap:9px;padding:16px 22px 8px;align-items:flex-end}
.wd{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px}
.wbar{width:100%;height:78px;border-radius:5px;background:var(--line);display:flex;align-items:flex-end;overflow:hidden}
.wbar i{width:100%;background:var(--acc);border-radius:5px}
.wd span{font-family:'DM Sans',sans-serif;font-size:10px;color:var(--ink3)}
.tot{text-align:center;padding:6px 0 12px}
.tot b{display:block;font-family:'Playfair Display',serif;font-weight:700;font-size:38px;color:var(--ink)}
.tot span{font-family:'DM Sans',sans-serif;font-size:9.5px;letter-spacing:2.4px;color:var(--ink3)}
.si{flex:1;min-width:0}
.si b{display:block;font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
.si span{font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--ink3)}
.sd{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--accink)}
.ctab{height:82px;display:flex;padding-bottom:34px;background:var(--tabbg);border-top:1px solid var(--line)}
.ctab .tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink3)}
.ctab .tb.on{color:var(--accink)}
.ctab .tb svg{width:20px;height:20px;display:block}
.ctab .tb span{font-family:'DM Sans',sans-serif;font-size:10px;line-height:1}
.badge-dot{width:6px;height:6px;border-radius:50%;background:#C44B3F;position:absolute;top:-2px;right:-3px}