/* Shared atoms for the three concepts: type, logo tile, pill, term, sheet, chart marks.
   Layout lives in each concept. Colours ONLY through var(--...) from tokens.css (Adam's pick);
   tints are color-mix() of his tokens, never a new hue. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.35;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.ink2{color:var(--ink-2)}
.t13{font-size:13px}
.t15{font-size:15px}
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}

/* logo tile: one rounded square, one size per context, letter fallback that looks deliberate */
.logo{position:relative;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;width:36px;height:36px;border-radius:9px;background:var(--fill);border:1px solid var(--hair);color:var(--ink-2);font-weight:700;font-size:12px;letter-spacing:.02em}
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--surface)}
.logo.s24{width:24px;height:24px;border-radius:6px;font-size:8px}
.logo.s28{width:28px;height:28px;border-radius:7px;font-size:10px}
.logo.s44{width:44px;height:44px;border-radius:11px;font-size:13px}
.logo.s56{width:56px;height:56px;border-radius:14px;font-size:16px}

/* state pill: a word on a quiet tint, never colour alone */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;line-height:1;padding:6px 10px;border-radius:999px;white-space:nowrap;background:var(--fill);color:var(--ink)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--st-nodata)}
.pill.buy{background:color-mix(in srgb,var(--st-buy) var(--pill-mix),var(--surface))}
.pill.buy::before{background:var(--st-buy)}
.pill.near{background:color-mix(in srgb,var(--st-wait) var(--pill-mix),var(--surface))}
.pill.near::before{background:var(--st-wait)}
.pill.high::before{background:var(--st-notnow)}
.pill.nodata{background:transparent;border:1px solid var(--hair);color:var(--ink-2)}
.pill.nodata::before{background:transparent;border:1.5px solid var(--st-nodata)}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.03em;line-height:1;padding:3px 6px;border-radius:5px;border:1px solid var(--hair);color:var(--ink-2);vertical-align:2px;white-space:nowrap}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--st-nodata);flex:0 0 auto}
.dot.buy{background:var(--st-buy)}
.dot.near{background:var(--st-wait)}
.dot.high{background:var(--st-notnow)}
.dot.nodata{background:transparent;border:1.5px solid var(--st-nodata)}

/* "what is this?" term: dotted underline, opens the plain-word sheet */
.term{background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;text-decoration:underline dotted var(--accent);text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:help}
.qbtn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--accent);border-radius:10px}
.qbtn svg,.ibtn svg,.btn-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ibtn{display:inline-grid;place-items:center;min-width:44px;min-height:44px;border:0;background:none;color:var(--accent);border-radius:10px;padding:0 6px}

/* segmented control (ranges, views) */
.seg{display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:var(--fill);border:1px solid var(--hair)}
.seg button{min-height:32px;min-width:44px;padding:0 12px;border:0;border-radius:7px;background:transparent;font-size:14px;font-weight:500}
.seg button[aria-pressed="true"]{background:var(--surface);box-shadow:var(--depth);font-weight:650}
.seg button:disabled{color:var(--ink-2);opacity:.55;cursor:not-allowed}
.seg.tall button{min-height:40px}

/* plain-word sheet (glossary) */
.sheet-back{position:fixed;inset:0;z-index:50;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.gl{position:fixed;z-index:51;left:50%;bottom:16px;transform:translateX(-50%);width:min(520px,calc(100% - 24px));background:var(--surface);border:1px solid var(--hair);border-radius:20px;box-shadow:var(--depth);padding:18px 18px 16px}
.gl h3{font-size:19px;font-weight:700;padding-right:48px}
.gl p{margin-top:8px;font-size:17px}
.gl.big{max-height:calc(100vh - 32px);overflow:auto;overscroll-behavior:contain;bottom:16px}
.gl.big dl{display:grid;gap:12px;margin-top:12px}
.gl.big dt{font-weight:700;font-size:16px}
.gl.big dd{font-size:15px;color:var(--ink-2);margin-top:2px}
.gl.big h4{margin:16px 0 0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.gl.big .keys{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:10px;font-size:15px}
.gl.big kbd{font:inherit;font-size:13px;border:1px solid var(--hair);border-radius:5px;padding:1px 7px;color:var(--ink)}
.gl .pro{margin-top:10px;color:var(--ink-2);font-size:13px}
.gl .x{position:absolute;top:8px;right:8px}
.gl:focus,[role=dialog]:focus{outline:none}

/* the price chart (shared engine, used differently by each concept) */
.pc{position:relative;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.pc svg{display:block;width:100%;overflow:visible}
.pc .grid{stroke:var(--hair);stroke-width:1}
.pc .ax{paint-order:stroke;stroke:var(--surface);stroke-width:3px;fill:var(--ink-2);font-size:11px;font-family:var(--font);font-variant-numeric:tabular-nums}
.pc .line{fill:none;stroke:var(--ch-line);stroke-width:2;stroke-dasharray:6 5;stroke-linecap:round}
.pc .price{fill:none;stroke:var(--ch-price);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pc .gap{fill:color-mix(in srgb,var(--st-buy) 18%,transparent);stroke:none}
.pc .gap.over{fill:color-mix(in srgb,var(--ink) 5%,transparent)}
.pc .end{fill:var(--ch-price);stroke:var(--surface);stroke-width:2}
.pc .peak{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.pc .lbl{fill:var(--ink);font-size:12px;font-weight:600;font-family:var(--font);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.pc .lbl2{fill:var(--ink-2);font-size:11px;font-family:var(--font);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.pc .lblbg{fill:var(--surface);opacity:.9}
.pc .rep{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:2 3}
.pc .zero{stroke:var(--ink-2);stroke-opacity:.5}
.pc .cmp1{stroke-dasharray:none}
.pc .cmp2{stroke:var(--ink-2);stroke-dasharray:6 4}
.pc .cmp3{stroke-dasharray:1.5 4;stroke-width:2.5}
.pc .cross{stroke:var(--ink-2);stroke-width:1}
.pc .hot{fill:var(--ch-price);stroke:var(--surface);stroke-width:2}
.pc .brush{fill:color-mix(in srgb,var(--accent) 14%,transparent);stroke:var(--accent);stroke-width:1}
.pc-read{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;min-height:44px;font-size:15px;font-variant-numeric:tabular-nums}
.pc-read .rd{white-space:nowrap}
.pc-read .rd-p{font-size:19px;font-weight:700}
.pc-read b{font-weight:650}
.pc-read .ink2{font-size:13px}
.pc-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;color:var(--ink-2);font-size:13px}
.pc-legend i{display:inline-block;width:18px;height:0;border-top:2px solid var(--ch-price);vertical-align:middle;margin-right:6px}
.pc-legend i.l2{border-top:2px dashed var(--ch-line)}
.pc-legend i.l3{width:16px;height:10px;border:0;border-radius:2px;background:color-mix(in srgb,var(--st-buy) 30%,transparent)}
.pc-legend i.l4{width:10px;height:10px;border:2px solid var(--ink);border-radius:50%;background:var(--surface)}
.pc-hint{color:var(--ink-2);font-size:13px;margin-top:4px}
.pc-table{margin-top:10px;font-size:13px;width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pc-table th,.pc-table td{text-align:right;padding:6px 4px;border-bottom:1px solid var(--hair)}
.pc-table th:first-child,.pc-table td:first-child{text-align:left}
.linkbtn{background:none;border:0;padding:0 2px;min-height:44px;color:var(--accent);font-weight:600;font-size:15px}

/* mini chart (row sparkline): price + line, no axes */
.mini{display:block;overflow:visible}
.mini .mp{fill:none;stroke:var(--ch-price);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mini .ml{fill:none;stroke:var(--ch-line);stroke-width:1.2;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}

.empty{color:var(--ink-2)}
.sbtn{cursor:help;background:none;font-family:inherit}
.sample{font-size:11px;font-weight:700;letter-spacing:.03em;padding:2px 6px;border-radius:5px;border:1px dashed var(--ink-2);color:var(--ink-2);vertical-align:2px}
.foot-label{color:var(--ink-2);font-size:13px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---- shared content parts (concepts set size and placement) ---- */
.p-price{font-size:15px}
.p-price b{font-size:17px;font-weight:650}
.p-price .sep{color:var(--ink-2)}
.three{--tn:34px;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px 22px}
.three-c{min-width:0}
.three-n{display:flex;align-items:flex-end;height:calc(var(--tn) * 1.08);font-size:var(--tn);font-weight:700;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.three-l{margin-top:4px;font-size:13px;color:var(--ink-2)}
.three-c.is-date .three-n{font-size:calc(var(--tn) * .74);letter-spacing:-.01em}
.three-l .term{color:var(--ink-2)}
.why{display:grid;gap:8px;padding-left:22px;list-style:decimal;font-size:17px}
.why li::marker{color:var(--ink-2);font-variant-numeric:tabular-nums}
.plines{display:grid;gap:0}
.pl{display:grid;grid-template-columns:8.2em minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--hair)}
.pl:first-child{border-top:0}
.pl dt{font-size:15px;color:var(--ink-2)}
.pl dt .term{color:var(--ink-2)}
.pl dd{font-size:16px}
.abar{display:block;width:100%;max-width:220px;height:6px;margin-top:8px}
.abar .ab-b{fill:var(--ink)}
.abar .ab-h{fill:color-mix(in srgb,var(--ink) 35%,var(--surface))}
.abar .ab-s{fill:color-mix(in srgb,var(--ink) 15%,var(--surface))}
.sum-l{display:grid;gap:6px;list-style:disc;padding-left:20px;font-size:16px}
.chg{font-size:17px}
.sumcard,.nbcard{border:1px solid var(--hair);border-radius:14px;padding:14px;background:var(--surface)}
.sumcard{display:grid;gap:8px;justify-items:start}
.nbcard{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center}
.nbcard>svg{width:24px;height:24px;fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linejoin:round}
.sum-h{font-weight:650;font-size:16px}
.btn2{min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--hair);background:var(--fill);font-size:15px;font-weight:600;color:var(--ink)}
.btn2:disabled{color:var(--ink-2);cursor:not-allowed}
.btn1{min-height:44px;padding:0 18px;border-radius:12px;border:0;background:var(--accent);color:var(--surface);font-size:16px;font-weight:650}
.news{display:grid;gap:12px}
.nw-h{font-size:16px}
.ladder{display:block;overflow:visible}
.ladder .lad-rail{stroke:var(--hair);stroke-width:2;stroke-linecap:round}
.ladder .lad-sale{fill:color-mix(in srgb,var(--st-buy) 45%,transparent)}
.ladder .lad-over{fill:color-mix(in srgb,var(--ink) 14%,transparent)}
.ladder .lad-peak{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.ladder .lad-line{stroke:var(--ch-line);stroke-width:2;stroke-dasharray:3 2}
.ladder .lad-now{fill:var(--ink);stroke:var(--surface);stroke-width:2}
.ladder .lad-t{fill:var(--ink);font-size:13px;font-weight:600;font-family:var(--font);font-variant-numeric:tabular-nums}
.ladder .lad-t2{fill:var(--ink-2);font-size:12px;font-family:var(--font);font-variant-numeric:tabular-nums}
.gauge{display:block;overflow:visible}
.gauge .g-under{fill:color-mix(in srgb,var(--st-buy) 22%,var(--surface))}
.gauge .g-over{fill:var(--fill)}
.gauge .g-mid{stroke:var(--ch-line);stroke-width:1.5}
.gauge .g-dot{fill:var(--st-nodata);stroke:var(--surface);stroke-width:2}
.gauge .g-dot.buy{fill:var(--st-buy)}
.gauge .g-dot.near{fill:var(--st-wait)}
.gauge .g-dot.high{fill:var(--st-notnow)}
.state-banner{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:10px 14px;border-radius:12px;border:1px solid var(--hair);background:var(--fill);font-size:15px}
.state-banner b{font-weight:650}
.state-banner span{color:var(--ink-2)}
.loading-frame{display:grid;place-items:center;min-height:60vh;text-align:center;color:var(--ink-2)}
.loading-frame b{display:block;color:var(--ink);font-size:20px;margin-bottom:6px}
.loading-frame .bar{width:120px;height:3px;border-radius:2px;margin:16px auto 0;background:var(--hair);overflow:hidden;position:relative}
.loading-frame .bar::after{content:"";position:absolute;inset:0;width:40%;background:var(--accent);border-radius:2px;animation:ld 1.1s ease-in-out infinite}
@keyframes ld{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* every tap target reaches 44 px, on a finger device and on the laptop alike */
.seg button,.lchip,.chip,.mchip,.replay,.btn2,.cchip,.linkbtn,.dp,.tab{min-height:44px}

/* round 2: no cut names, nowrap dates, letter tiles that fit, link headlines */
.nw{white-space:nowrap}
.logo[data-len="4"]{font-size:10px;letter-spacing:0}
.logo[data-len="5"]{font-size:8.5px;letter-spacing:-.02em}
.logo.s24[data-len="4"],.logo.s24[data-len="5"]{font-size:6.5px}
.logo.s28[data-len="4"]{font-size:8px}
.logo.s28[data-len="5"]{font-size:7px}
.logo.s44[data-len="4"],.logo.s56[data-len="4"]{font-size:12px}
.nw-a{color:var(--ink);text-decoration:none;display:block}
.nw-a:hover{text-decoration:underline}
.nb-a{display:inline-flex;align-items:center;text-decoration:none}
.lad-leg{max-width:44ch}
.three-l{white-space:nowrap}
.three-c{min-width:max-content}
.logo.fam{background:var(--surface);border:1.5px solid color-mix(in srgb,var(--ink) 30%,var(--surface));color:var(--ink);letter-spacing:.02em}
.logo.glyph{background:var(--surface);color:var(--ink);font-size:20px;font-weight:700}
.logo.s24.glyph{font-size:14px}
.logo.s28.glyph{font-size:16px}
.logo.s44.glyph{font-size:24px}
.logo.s56.glyph{font-size:30px}
.logo[data-len="1"]:not(.glyph),.logo[data-len="2"]{font-size:14px}
.logo.s24[data-len="2"]{font-size:9px}
.logo.s24[data-len="3"]{font-size:7.5px}