/* Idearail — Swiss structure, subway lines (Heimdall DESIGN.md tokens). One typeface, hairlines, route colour is the only saturated colour. */
/* @tokens:start — GENERATED from design/tokens/tokens.json by design/build/tokens.mjs (2026-10-27). Do not edit; run `npm run tokens` in design/. */
:root{--ground:#F7F6F2;--surface:#FFFFFF;--sunken:#F1F0EB;--ground-rgb:247,246,242;--glass:rgba(247,246,242,.86);--scrim:rgba(17,18,20,.42);--ink:#111214;--ink-2:#4F5459;--ink-3:#666C72;--on-ink:#F7F6F2;--on-accent:#FFFFFF;--hair:rgba(17,18,20,.10);--hair-strong:rgba(17,18,20,.22);--line:#E5E4DF;--edge:#83898F;--accent:#0A84FF;--accent-ink:#0B6BD6;--accent-bg:rgba(10,132,255,.10);--ok:#197634;--ok-bg:rgba(30,142,62,.12);--warn:#9A5B00;--bad:#C92A20;--bad-bg:rgba(214,48,37,.12);--judge-diss:#3F0569;--bull:#00933C;--bear:#EE352E;--lvol:#0039A6;--svol:#FF6319;--rv:#B933AD;--oth:#A7A9AC;--bull-ink:#007A32;--bear-ink:#C9241D;--lvol-ink:#0039A6;--svol-ink:#B04300;--rv-ink:#9A2A90;--oth-ink:#666C72;--pf:#53295E;--pf-bg:rgba(83,41,94,.10);--bench:#0C7680;--brand:#FFD43B;--brand-ink:#111214;--brand-unlit:#2A2D31;--brand-paper:#F7F6F2;--brand-card:#FFFFFF;--surface-2:var(--sunken);--dir-bullish:var(--bull);--dir-bearish:var(--bear);--dir-long_vol:var(--lvol);--dir-short_vol:var(--svol);--dir-rv:var(--rv);--dir-other:var(--oth);--dir-bullish-ink:var(--bull-ink);--dir-bearish-ink:var(--bear-ink);--dir-long_vol-ink:var(--lvol-ink);--dir-short_vol-ink:var(--svol-ink);--dir-rv-ink:var(--rv-ink);--dir-other-ink:var(--oth-ink);--font:Inter,"SF Pro Text","PingFang SC","Hiragino Sans GB","Helvetica Neue",Helvetica,Arial,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--fs-xs:11px;--fs-sm:12px;--fs-md:13px;--fs-lg:15px;--fs-xl:17px;--fs-2xl:20px;--fs-3xl:24px;--fs-4xl:32px;--lh-tight:1.15;--lh-snug:1.3;--lh-normal:1.45;--lh-relaxed:1.6;--ls-label:.06em;--ls-tight:-.015em;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--target-floor:24px;--target-touch:44px;--target-judge:56px;--emblem-sm:32px;--emblem-md:48px;--emblem-lg:96px;--r-sm:4px;--r-md:8px;--r-lg:14px;--r-pill:999px;--r:var(--r-lg);--rs:var(--r-md);--shadow-card:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);--shadow-float:0 1px 2px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.10);--shadow-ring:0 0 0 2px #0A84FF;--shadow-ring-ink:0 0 0 2px #111214;--shadow-ring-thin:0 0 0 1.5px #111214;--shadow-ring-ground:0 0 0 1px #F7F6F2;--shadow-halo:0 0 0 2px #FFFFFF,0 0 0 3.5px #111214;--shadow:var(--shadow-card);--shadow-h:var(--shadow-float);--t-fast:120ms;--t:200ms;--ease:cubic-bezier(.2,.7,.2,1);--z-chrome:20;--z-menu:40;--z-modal:50;--z-toast:60;--z-pop:70}
:root[data-theme="dark"]{color-scheme:dark;--ground:#131517;--surface:#1B1E22;--sunken:#24282D;--ground-rgb:19,21,23;--glass:rgba(19,21,23,.86);--scrim:rgba(0,0,0,.62);--ink:#ECEEF0;--ink-2:#B7BCC2;--ink-3:#8D939A;--on-ink:#131517;--hair:rgba(255,255,255,.10);--hair-strong:rgba(255,255,255,.24);--line:#30353B;--edge:#6C7279;--accent:#5EA3FF;--accent-ink:#7FB5FF;--accent-bg:rgba(94,163,255,.16);--ok:#4CC06A;--ok-bg:rgba(76,192,106,.16);--warn:#E0A94C;--bad:#F2756B;--bad-bg:rgba(242,117,107,.16);--judge-diss:#E3C1FE;--bull:#35B65C;--bear:#FF6F66;--lvol:#6B8FFF;--svol:#FF8A4C;--rv:#D66BCB;--oth:#8A8F94;--bull-ink:#35B65C;--bear-ink:#FF6F66;--lvol-ink:#6B8FFF;--svol-ink:#FF8A4C;--rv-ink:#D66BCB;--oth-ink:#8D939A;--pf:#D6AEDA;--pf-bg:rgba(214,174,218,.16);--bench:#33A5B0;--shadow-card:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.5);--shadow-float:0 1px 2px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.6);--shadow-ring:0 0 0 2px #5EA3FF;--shadow-ring-ink:0 0 0 2px #ECEEF0;--shadow-ring-thin:0 0 0 1.5px #ECEEF0;--shadow-ring-ground:0 0 0 1px #131517;--shadow-halo:0 0 0 2px #1B1E22,0 0 0 3.5px #ECEEF0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--ground:#131517;--surface:#1B1E22;--sunken:#24282D;--ground-rgb:19,21,23;--glass:rgba(19,21,23,.86);--scrim:rgba(0,0,0,.62);--ink:#ECEEF0;--ink-2:#B7BCC2;--ink-3:#8D939A;--on-ink:#131517;--hair:rgba(255,255,255,.10);--hair-strong:rgba(255,255,255,.24);--line:#30353B;--edge:#6C7279;--accent:#5EA3FF;--accent-ink:#7FB5FF;--accent-bg:rgba(94,163,255,.16);--ok:#4CC06A;--ok-bg:rgba(76,192,106,.16);--warn:#E0A94C;--bad:#F2756B;--bad-bg:rgba(242,117,107,.16);--judge-diss:#E3C1FE;--bull:#35B65C;--bear:#FF6F66;--lvol:#6B8FFF;--svol:#FF8A4C;--rv:#D66BCB;--oth:#8A8F94;--bull-ink:#35B65C;--bear-ink:#FF6F66;--lvol-ink:#6B8FFF;--svol-ink:#FF8A4C;--rv-ink:#D66BCB;--oth-ink:#8D939A;--pf:#D6AEDA;--pf-bg:rgba(214,174,218,.16);--bench:#33A5B0;--shadow-card:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.5);--shadow-float:0 1px 2px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.6);--shadow-ring:0 0 0 2px #5EA3FF;--shadow-ring-ink:0 0 0 2px #ECEEF0;--shadow-ring-thin:0 0 0 1.5px #ECEEF0;--shadow-ring-ground:0 0 0 1px #131517;--shadow-halo:0 0 0 2px #1B1E22,0 0 0 3.5px #ECEEF0}}
/* @tokens:end */
/* Inter is the first family in --font (design/tokens/tokens.json font.sans). Self-hosted so it is loaded, not just named (2026-10-17);
   the variable file covers 100–900, CJK falls through to PingFang. SIL OFL 1.1 — fonts/LICENSE.txt. */
@font-face{
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- a face must name its family literally */
  font-family:Inter;
  font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/InterVariable.woff2) format("woff2")}
*{box-sizing:border-box}html,body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--fs-md)/var(--lh-normal) var(--font);-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0;padding:0}h1,h2,h3,h4,h5,p{margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.muted{color:var(--ink-3)}small{font-size:var(--fs-xs)}.label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.pos{color:var(--ok)}.neg{color:var(--bad)}

/* top bar: floating glass, like the Heimdall explorer */
.top{position:sticky;top:0;z-index:20;padding:12px 16px 0}
.top-in{max-width:1440px;margin:0 auto;height:56px;display:flex;align-items:center;gap:14px;padding:0 12px 0 20px;background:var(--glass);backdrop-filter:blur(16px) saturate(1.2);border-radius:var(--r);box-shadow:var(--shadow)}
.wordmark{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-lg);letter-spacing:-.01em;margin:0}.wordmark .dot{width:10px;height:10px;border-radius:50%;background:var(--ink);box-shadow:var(--shadow-halo)}
.wordmark small{font-weight:400;color:var(--ink-3);font-size:var(--fs-sm);margin-left:4px}
.seg{display:inline-flex;background:var(--sunken);border-radius:var(--rs);padding:2px}.seg button{height:30px;border-radius:var(--r-md);padding:0 12px;color:var(--ink-2);font-weight:500}.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.seg .n{font-weight:400;color:var(--ink-3);margin-left:4px;font-size:var(--fs-xs)}
.search{margin-left:auto;width:320px;height:34px;border:0;border-radius:var(--rs);background:var(--sunken);padding:0 12px;outline:0}.search:focus{box-shadow:var(--shadow-ring)}
.user{height:34px;border-radius:var(--r-pill);padding:0 12px 0 4px;background:var(--sunken);color:var(--ink-2);font-weight:500;display:inline-flex;align-items:center;gap:8px}
.user .av{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--ground);font-weight:700;font-size:var(--fs-sm);display:inline-grid;place-items:center;flex:none}.user .av.guest{background:var(--ink-3)}.user.on{color:var(--ink)}

/* chips */
.chips{max-width:1440px;margin:0 auto;padding:12px 32px 0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;align-items:center}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:26px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--hair);background:var(--surface);color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:box-shadow var(--t) var(--ease)}
.chip:hover{box-shadow:var(--shadow)}.chip.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}.chip.f{border-color:var(--accent-ink);color:var(--accent-ink)}
.chips .hint{flex:none;color:var(--ink-3);font-size:var(--fs-xs);margin-left:8px}

/* wall */
.wall{max-width:1440px;margin:0 auto;padding:14px 32px 80px;column-width:250px;column-gap:16px}
.post{break-inside:avoid;margin-bottom:16px;border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);cursor:pointer;position:relative;transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.post:hover{box-shadow:var(--shadow-h);transform:translateY(-2px)}
.route{height:4px;background:var(--oth)}
.cover{display:block;width:100%;background:var(--surface);min-height:120px}.cover svg{display:block;width:100%;height:auto}
.body{padding:10px 14px 6px}.hl{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xl);font-weight:600;line-height:1.15;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;min-width:0}.hl .hd{overflow:hidden;text-overflow:ellipsis;min-width:0}.struct{font-size:var(--fs-md);color:var(--ink-2);margin-top:3px;font-weight:500}
.reason{font-size:var(--fs-md);color:var(--ink-3);margin-top:6px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;align-items:center;gap:6px;padding:4px 10px 6px 14px;font-size:var(--fs-sm);color:var(--ink-3);border-top:1px solid var(--hair);margin-top:6px;white-space:nowrap;overflow:hidden;min-width:0}.meta .who-chip{min-width:0;overflow:hidden}.meta .who-chip .pn{overflow:hidden;text-overflow:ellipsis}.meta .dt{flex:none}
.station{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none;border:2px solid var(--surface);outline:1px solid currentColor;background:currentColor;box-sizing:border-box}
.cnt{margin-left:auto;display:inline-flex;gap:2px;align-items:center;flex:none}.cnt button{display:inline-flex;align-items:center;justify-content:center;gap:2px;color:var(--ink-3);min-width:28px;height:28px;padding:0 4px;border-radius:var(--r-md)}.cnt button:hover{background:var(--sunken);color:var(--ink)}.cnt button.on{color:var(--accent-ink)}.cnt button span{font-size:var(--fs-xs);font-family:var(--mono)}
.ribbon{position:absolute;top:12px;right:10px;background:var(--surface);border-radius:var(--r-pill);padding:4px 9px;font-size:var(--fs-xs);font-weight:500;box-shadow:var(--shadow);opacity:0;transition:opacity .15s}.post:hover .ribbon,.ribbon.on{opacity:1}.ribbon.on{color:var(--accent-ink)}
.cover-wrap{position:relative}
/* trade state = a station sign at the foot of the chart (white plate, hairline, station dot in the state colour);
   it no longer sits on the chart's own % label at the top-left */
.badge{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--hair);color:var(--ink-2);border-radius:var(--r-pill);padding:3px 9px 3px 8px;font-size:var(--fs-xs);font-weight:500;letter-spacing:.01em;box-shadow:var(--shadow);line-height:1.3}
.badge .ic{width:14px;height:14px;margin-right:-2px}
.badge b{font-family:var(--mono);font-weight:600;color:var(--ink)}
.badge.won{color:var(--ok)}.badge.lost{color:var(--bad)}.badge.open{color:var(--accent-ink)}.badge.closed{color:var(--ink-3)}.badge.today{color:var(--accent-ink)}
.badge.won b{color:var(--ok)}.badge.lost b{color:var(--bad)}
.sentinel{height:1px}.empty{text-align:center;color:var(--ink-3);padding:80px 0}

/* detail sheet */
.modal{position:fixed;inset:0;background:var(--scrim);display:none;z-index:50;align-items:center;justify-content:center;padding:24px}body.modal-open .modal{display:flex}
.sheet{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-h);width:min(1160px,100%);height:92vh;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:minmax(0,1fr);overflow:hidden}
.sheet>.left,.sheet>.right{min-height:0;max-height:92vh}
@media (max-width:700px),(max-height:500px){.modal{padding:0}.sheet{display:block;overflow:auto;height:100%;width:100%;border-radius:0}.sheet>.left,.sheet>.right{max-height:none;overflow:visible}.left{border-right:0;border-bottom:1px solid var(--hair)}}
@media (min-width:701px) and (max-width:1000px){.sheet{grid-template-columns:1fr 1fr}}  /* #88: tablet gives the right pane room for the four actions */
@media (max-width:480px){.facts{grid-template-columns:1fr}}
.left{background:var(--ground);padding:20px;display:flex;flex-direction:column;gap:14px;overflow:auto;border-right:1px solid var(--hair)}.left svg{width:100%;height:auto;border-radius:var(--rs);background:var(--surface)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}.facts div span{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}.facts div b{font-weight:500;font-size:var(--fs-md)}
.right{padding:20px 24px 28px;overflow:auto;display:flex;flex-direction:column;gap:12px}.right>*{flex:none}
.who{display:flex;align-items:center;gap:10px}.who b{display:block;font-weight:600}.who small{color:var(--ink-3)}
.follow{margin-left:auto;height:30px;border:1px solid var(--accent);color:var(--accent-ink);border-radius:var(--rs);padding:0 12px;font-weight:500;white-space:nowrap}.follow.on{background:var(--accent);color:var(--on-accent)}
.right h2{font-size:var(--fs-3xl);font-weight:600;letter-spacing:-.02em;line-height:1.1;min-width:0}.right .struct{font-size:var(--fs-lg)}.right .call{margin:6px 0 12px;font-size:var(--fs-md)}.right .call .rn{font-size:var(--fs-xl)}
.right .summary{font-size:var(--fs-lg);line-height:1.4;color:var(--ink);display:flex;flex-direction:column;gap:3px}.right .summary b{font-weight:600}.right .summary span{color:var(--ink-2);font-size:var(--fs-lg)}
.actions{display:flex;gap:var(--sp-3);min-width:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:10px 0;font-size:var(--fs-md)}.actions button{display:inline-flex;gap:6px;align-items:center;min-height:24px;color:var(--ink-2)}.actions button.on{color:var(--ink);font-weight:500}

/* the brief: STE-lite reasoning */
.brief h4,.orig h4{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:14px 0 6px}.brief h4:first-child{margin-top:4px}
.steps{list-style:none;margin:0;padding:0;counter-reset:step}.steps li{position:relative;padding:0 0 10px 30px;counter-increment:step;font-size:var(--fs-md);line-height:1.45}
.steps li::before{content:counter(step);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--ground);font-size:var(--fs-xs);font-weight:600;display:flex;align-items:center;justify-content:center}
.steps li::after{content:'';position:absolute;left:9.5px;top:22px;bottom:-2px;width:1px;background:var(--hair-strong)}.steps li:last-child::after{display:none}
.ev,.rk{list-style:none;margin:0;padding:0}.ev li,.rk li{position:relative;padding:3px 0 3px 16px;font-size:var(--fs-md);line-height:1.45}
.ev li::before{content:'';position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--ink-3)}.rk li::before{content:'';position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--bad)}
.exits{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.exits span{font-family:var(--mono);font-size:var(--fs-sm);background:var(--sunken);border-radius:var(--r-md);padding:3px 8px}.exits span.take{color:var(--ok)}.exits span.stop{color:var(--bad)}
.brief p{font-size:var(--fs-md);color:var(--ink-2)}
details.orig{margin-top:8px}details.orig summary{cursor:pointer;color:var(--ink-3);font-size:var(--fs-sm);user-select:none}details.orig summary:hover{color:var(--ink)}
.md p{margin:0 0 6px;font-size:var(--fs-md);line-height:1.5;color:var(--ink-2)}.md ul,.md ol{margin:0 0 8px;padding-left:20px;font-size:var(--fs-md);line-height:1.5;color:var(--ink-2)}.md li{margin:2px 0}.md b{font-weight:600;color:var(--ink)}.md code{font-family:var(--mono);font-size:var(--fs-sm);background:var(--sunken);padding:0 4px;border-radius:var(--r-sm)}
.md h5{font-size:var(--fs-sm);font-weight:600;margin:8px 0 4px}.md table{border-collapse:collapse;font-size:var(--fs-sm);margin:4px 0 8px;width:100%}.md th{text-align:left;font-weight:600;border-bottom:1px solid var(--hair-strong);padding:3px 6px;color:var(--ink-2)}.md td{border-bottom:1px solid var(--hair);padding:3px 6px;font-variant-numeric:tabular-nums}
.pending{font-size:var(--fs-sm);color:var(--ink-3);background:var(--sunken);border-radius:var(--rs);padding:6px 10px}

.tags{display:flex;flex-wrap:wrap;gap:6px}.tags .tag{min-width:24px;text-align:center}.tag{color:var(--accent-ink);font-size:var(--fs-md)}.tag.on{text-decoration:underline}
.rel{border-top:1px solid var(--hair);padding-top:8px}.rel h4{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:4px}
.rel .r{display:flex;gap:10px;padding:5px 0;font-size:var(--fs-md);cursor:pointer;border-bottom:1px solid var(--hair)}.rel .r:hover{color:var(--accent-ink)}.rel .r span:first-child{color:var(--ink-3);flex:none;width:56px;font-family:var(--mono);font-size:var(--fs-xs);padding-top:2px}
.comments{border-top:1px solid var(--hair);padding-top:10px}.comments h4{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:6px}
.comment{padding:6px 0;border-bottom:1px solid var(--hair);font-size:var(--fs-md)}.comment b{margin-right:6px;font-weight:600}.comment small{color:var(--ink-3);margin-left:6px;font-family:var(--mono);font-size:var(--fs-xs)}
.cform{display:flex;gap:8px;margin-top:8px}.cform textarea{flex:1;border:1px solid var(--edge);border-radius:var(--rs);padding:8px 10px;resize:vertical;min-height:38px;outline:0;background:var(--surface)}.cform textarea:focus{box-shadow:var(--shadow-ring)}.cform button{background:var(--ink);color:var(--ground);border-radius:var(--rs);padding:0 14px;font-weight:500}
.close{position:absolute;top:18px;right:22px;width:32px;height:32px;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:8px 14px;border-radius:var(--r-pill);font-size:var(--fs-sm);opacity:0;transition:opacity .2s;pointer-events:none;z-index:60}.toast.on{opacity:1}

/* runway: one idea at a time */
.wall.runway{column-width:auto;columns:auto;padding-top:18px}
.wall.agora{column-width:auto;columns:auto}/* the bar sits above the masonry; #railwall is the only one, so column 1 starts level with 2–4 (#98) */
.stage,.pu-col{max-width:580px;margin:0 auto}.stage{display:flex;flex-direction:column;align-items:center;gap:14px;user-select:none}
.rw-progress{font-size:var(--fs-sm);color:var(--ink-3)}.rw-progress b{color:var(--ink);font-weight:600}
.stack{position:relative;width:100%;margin-bottom:26px;transition:height .28s var(--ease)}
.rw-card{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-h);display:flex;flex-direction:column;transition:transform .26s var(--ease),opacity .26s,top .26s var(--ease),left .26s var(--ease),right .26s var(--ease),bottom .26s var(--ease);touch-action:none}
.rw-card.under{pointer-events:none;box-shadow:var(--shadow)}.rw-card.u1{top:8px;left:6px;right:6px;bottom:-8px;z-index:3}.rw-card.u2{top:16px;left:12px;right:12px;bottom:-16px;z-index:2}.rw-card.u3{top:24px;left:18px;right:18px;bottom:-24px;z-index:1}.rw-card.enter{opacity:0}
.rw-card.top{cursor:default;z-index:4}.rw-card.gone{z-index:5;pointer-events:none}
.veil{position:absolute;inset:0;background:var(--surface);opacity:1;transition:opacity .3s var(--ease);z-index:6;border-top:1px solid var(--hair)}.rw-card.top .veil{opacity:0;pointer-events:none}.rw-card.top .rw-body{cursor:pointer}.rw-card.drag{transition:none;cursor:grabbing}.rw-card.pop{transform:scale(1.02)}
.rw-card.fly-like{transform:translate(640px,-40px) rotate(16deg);opacity:0}.rw-card.fly-pass{transform:translate(-640px,-40px) rotate(-16deg);opacity:0}.rw-card.fly-super{transform:translateY(-120%);opacity:0;transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}.rw-card.fly-diss{transform:translateY(120%);opacity:0;transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.rw-cover{background:var(--surface)}.rw-cover svg{display:block;width:100%;height:auto}
.rw-card>*{flex:none}.rw-body{padding:12px 18px 16px;overflow:hidden}.rw-top{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-3);margin-bottom:6px;white-space:nowrap;overflow:hidden;min-width:0}
.rw-body .hl{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;line-height:1.1}.rw-body .call{margin-top:10px;font-size:var(--fs-md)}.rw-body .call .rn{font-size:var(--fs-xl)}.rw-body .struct{font-size:var(--fs-md)}.rw-act{font-size:var(--fs-lg);font-weight:600;margin:10px 0 0;color:var(--ink);line-height:1.35}.rw-sum{font-size:var(--fs-lg);font-weight:400;margin:4px 0 0;color:var(--ink-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rw-body .steps li{font-size:var(--fs-md);padding-bottom:8px}.rw-steps-fallback{font-size:var(--fs-md);color:var(--ink-2);margin-top:4px}
.rw-sig{font-size:var(--fs-xs);color:var(--ink-3);margin-top:10px;border-top:1px solid var(--hair);padding-top:8px}
.rw-stamp{position:absolute;top:22px;padding:6px 14px;border:3px solid;border-radius:var(--r-md);font-weight:800;font-size:var(--fs-3xl);letter-spacing:.08em;opacity:0;transform:rotate(-12deg);z-index:3;transition:opacity .12s;background:var(--glass)}
.rw-stamp.like{right:22px;color:var(--ok);border-color:var(--ok)}.rw-stamp.pass{left:22px;color:var(--ink-3);border-color:var(--ink-3);transform:rotate(12deg)}
.rw-stamp.super{top:auto;bottom:22px;left:50%;transform:translateX(-50%);color:var(--accent-ink);border-color:var(--accent-ink);display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap}.rw-stamp.super .ic{width:24px;height:24px}
.rw-stamp.diss{left:50%;transform:translateX(-50%);color:var(--judge-diss);border-color:var(--judge-diss);display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap}.rw-stamp.diss .ic{width:24px;height:24px}
.rw-card.show-like .rw-stamp.like,.rw-card.show-pass .rw-stamp.pass,.rw-card.show-super .rw-stamp.super,.rw-card.show-diss .rw-stamp.diss{opacity:1}
.rw-card.show-super,.rw-card.show-diss{box-shadow:var(--shadow-float)}
.rw-empty{position:relative;min-height:240px;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;color:var(--ink-3);font-size:var(--fs-lg);background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow)}
.rw-actions{display:flex;gap:14px;align-items:center;margin-top:6px;position:sticky;bottom:0;z-index:6;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--ground);border-radius:var(--r-pill) var(--r-pill) 0 0}.rw-btn{width:var(--target-judge);height:var(--target-judge);border-radius:50%;background:var(--surface);box-shadow:var(--shadow);font-size:var(--fs-2xl);display:inline-flex;align-items:center;justify-content:center;transition:transform .12s,box-shadow .12s;color:var(--ink)}
.rw-btn:hover{transform:scale(1.06);box-shadow:var(--shadow-h)}.rw-btn:disabled{opacity:.35;transform:none}
.rw-btn.pass{color:var(--ink-3)}.rw-btn.like{color:var(--ok);font-size:var(--fs-3xl)}.rw-btn.save{color:var(--accent-ink)}.rw-btn.diss{color:var(--judge-diss)}.rw-btn.undo{color:var(--ink-3)}.rw-btn.read{width:auto;padding:0 18px;border-radius:var(--r-pill);font-size:var(--fs-md);font-weight:500;height:42px}
.rw-hint{font-size:var(--fs-xs);color:var(--ink-3)}

/* authors and the personal hub */
.who-chip{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:500}.who-chip:hover{color:var(--ink)}.who-chip .av{width:18px;height:18px;font-size:var(--fs-xs)}
.av{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--on-accent);font-size:var(--fs-xs);font-weight:700;flex:none}
.page{max-width:1440px;margin:0 auto;padding:14px 32px 0}
.profile{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;display:grid;grid-template-columns:auto 1fr auto;gap:18px 20px;align-items:start}
.profile .big{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--on-accent);font-size:var(--fs-3xl);font-weight:700}
.profile h1{font-size:var(--fs-3xl);font-weight:600;letter-spacing:-.02em;line-height:1.1}.profile .handle{color:var(--ink-3);font-size:var(--fs-sm);margin-top:2px}.profile .bio{font-size:var(--fs-md);color:var(--ink-2);margin-top:8px;max-width:720px;line-height:1.5}
.profile .follow{align-self:start}
@media (max-width:600px){.profile{grid-template-columns:auto 1fr;padding:18px 16px}.profile>div:first-of-type{grid-column:1/-1;grid-row:2}.profile>:nth-child(3){grid-column:2;grid-row:1;justify-self:end;align-self:center}}
.stats{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:26px;border-top:1px solid var(--hair);padding-top:14px}.stat b{display:block;font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;line-height:1.1}.stat span{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.stat.ok b{color:var(--ok)}.stat.bad b{color:var(--bad)}
.mix{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:18px 28px;border-top:1px solid var(--hair);padding-top:14px}.mix h4{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:6px}
.bars{display:flex;flex-direction:column;gap:4px;min-width:220px}.bar{display:grid;grid-template-columns:92px 1fr 36px;gap:8px;align-items:center;font-size:var(--fs-sm)}.bar i{display:block;height:6px;border-radius:3px}.bar span:last-child{text-align:right;color:var(--ink-3);font-family:var(--mono);font-size:var(--fs-xs)}
.pills{display:flex;flex-wrap:wrap;gap:6px}.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-pill);background:var(--sunken);font-size:var(--fs-md)}.pill .x{color:var(--ink-3);font-size:var(--fs-lg);line-height:1}.pill .x:hover{color:var(--bad)}
.section{margin-top:18px}.section h3{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:8px}
.subtabs{display:inline-flex;background:var(--sunken);border-radius:var(--rs);padding:2px;margin:18px 0 6px}.subtabs button{height:30px;border-radius:var(--r-md);padding:0 12px;color:var(--ink-2);font-weight:500}.subtabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.mycomment{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 16px;margin-bottom:10px;cursor:pointer}.mycomment b{display:block;font-size:var(--fs-lg);font-weight:600}.mycomment small{color:var(--ink-3);font-family:var(--mono);font-size:var(--fs-xs)}.mycomment p{margin-top:4px;font-size:var(--fs-md)}
.ribbon.unpass{opacity:1;color:var(--ink-2)}
.crumb{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);font-size:var(--fs-sm);margin-bottom:10px}.crumb:hover{color:var(--ink)}


/* sheet header: author left-aligned; ticker row gets a watch pill, not a second Follow */
.who-chip{text-align:left}.who .who-chip>span:last-child{display:flex;flex-direction:column;align-items:flex-start}
.watch{margin-left:auto;height:26px;border:1px solid var(--hair);border-radius:var(--r-pill);padding:0 10px;color:var(--ink-2);font-size:var(--fs-sm);white-space:nowrap}.watch:hover{color:var(--ink);box-shadow:var(--shadow)}.watch.on{color:var(--warn);background:var(--sunken);border-color:transparent}
/* exits as rows */
.exit-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}.exit-row{display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:start;font-size:var(--fs-md);line-height:1.45}
.elabel{display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 7px;border-radius:var(--r-md);margin-top:1px;text-align:center}
.elabel.take{color:var(--ok);background:var(--ok-bg)}.elabel.stop{color:var(--bad);background:var(--bad-bg)}.elabel.time{color:var(--ink-2);background:var(--sunken)}.elabel.hz{color:var(--accent-ink);background:var(--accent-bg)}
svg[data-chart]{cursor:crosshair}

/* runway: a quiet "more" strip; the chart stays crisp and interactive */
.rw-more{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--hair);font-size:var(--fs-sm);color:var(--ink-3);transition:color var(--t) var(--ease)}
.rw-more b{font-weight:500;color:var(--ink-2);border:1px solid var(--hair);border-radius:var(--r-pill);padding:4px 12px;transition:all var(--t) var(--ease)}
.rw-card.top .rw-body:hover .rw-more{color:var(--ink-2)}.rw-card.top .rw-body:hover .rw-more b{color:var(--on-ink);background:var(--ink);border-color:var(--ink)}

/* following: a rail of what you follow, the wall beside it */
.wall.with-rail{column-width:auto;columns:auto;display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:700px){.wall.with-rail{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}.wall.with-rail .rail{position:static;max-height:none}}
.rail-wall{column-width:250px;column-gap:16px}.rail-wall>.empty{column-span:all}/* one message across the masonry, not balanced into two columns (#13) */
.rail{position:sticky;top:84px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:8px;max-height:calc(100vh - 100px);overflow:auto}
.rail h5{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:12px 10px 4px}
.rrow{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--rs);cursor:pointer;font-size:var(--fs-md);color:var(--ink-2)}.rrow:hover{background:var(--sunken);color:var(--ink)}.rrow.on{background:var(--ink);color:var(--ground)}
.rrow .rlabel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.rrow .rn{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-3)}.rrow.on .rn{color:var(--ground);opacity:.7}
.rrow .rx{color:var(--ink-3);font-size:var(--fs-sm);opacity:0;width:16px}.rrow:hover .rx{opacity:1}.rrow .rx:hover{color:var(--bad)}.rrow.on .rx{color:var(--ground)}
.rrow.all{font-weight:600;color:var(--ink)}.rrow.all.on{color:var(--ground)}.rrow.all.on .rn{color:var(--ground)}.rrow .station{width:8px;height:8px}.rrow .rhash{color:var(--ink-3);width:18px;text-align:center;font-weight:600}
.rsug{display:flex;flex-direction:column;gap:6px;padding:0 6px 6px}.rsug .pill{justify-content:flex-start;height:30px;white-space:nowrap;overflow:hidden;width:100%}.rsug .pill .pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}.rsug .pill em{font-style:normal;color:var(--accent-ink);font-size:var(--fs-sm);flex:none}

/* pages (author, hub): a normal block above their own masonry */
.wall.with-page{column-width:auto;columns:auto;display:block}.wall.with-page .page{padding-left:0;padding-right:0}.wall.with-page .rail-wall{margin-top:14px}
.profile .bio{max-width:none}

/* follow / watch: explicit unfollow on hover */
.follow i,.watch i{display:none;font-style:normal}.follow:not(.on) .l-off,.watch:not(.on) .l-off{display:inline}.follow.on .l-on,.watch.on .l-on{display:inline}
.follow.on:hover .l-on,.watch.on:hover .l-on{display:none}.follow.on:hover .l-hover,.watch.on:hover .l-hover{display:inline}
.follow.on:hover{background:var(--surface);color:var(--bad);border-color:var(--bad)}.watch.on:hover{color:var(--bad);background:var(--surface);border-color:var(--bad)}
.follow em,.watch em{font-style:normal}
/* hub: search + remove */
.subrow{display:flex;align-items:center;gap:14px;margin:18px 0 6px}.subrow .subtabs{margin:0}
.hub-search{height:34px;width:320px;border:0;border-radius:var(--rs);background:var(--surface);box-shadow:var(--shadow);padding:0 12px;outline:0}.hub-search:focus{box-shadow:var(--shadow-ring)}
.ribbon.trash{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2)}.ribbon.trash:hover{color:var(--bad)}
.pill .x{opacity:0;font-size:var(--fs-xs);color:var(--bad);transition:opacity .15s}.pill:hover .x{opacity:1}

/* language switch (English default / 中文) — same chip as the user button */
.top-in .lang{display:inline-flex;align-items:center;gap:4px;appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:var(--r-pill);padding:5px 10px;font:inherit;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap}
.top-in .lang:hover{color:var(--ink);border-color:var(--ink-2)}

/* the legend was retired on 2026-10-17 (public-help text folds into the help sheet, design/labels.yaml) */

/* user menu: opens on hover / focus under the avatar chip */
.usermenu{position:relative;display:inline-block}.usermenu::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.umenu{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--rs);box-shadow:var(--shadow);padding:6px;z-index:40}
.usermenu:hover .umenu,.usermenu:focus-within .umenu{display:block}
.umenu .uhead{padding:6px 10px 8px;font-size:var(--fs-xs);color:var(--ink-3);border-bottom:1px solid var(--hair);margin-bottom:4px;white-space:nowrap}
.umenu button{display:flex;width:100%;align-items:center;gap:8px;text-align:left;padding:7px 10px;border-radius:var(--r-md);font-size:var(--fs-md);color:var(--ink)}.umenu button:hover{background:var(--sunken)}
.umenu button .k{margin-left:auto;font-size:var(--fs-xs);color:var(--ink-3)}.umenu .usep{height:1px;background:var(--hair);margin:4px 0}
/* preferences dialog: a Swiss plate, pills for choices */
.dlg{position:fixed;inset:0;display:none;place-items:center;background:var(--scrim);z-index:60;padding:16px}.dlg.on{display:grid}
.dlg form{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);width:min(560px,100%);max-height:92vh;overflow:auto;padding:22px 24px 18px}
.dlg h3{margin:0 0 4px;font-size:var(--fs-xl);font-weight:600;letter-spacing:-.01em}.dlg .intro{margin:0 0 14px;font-size:var(--fs-md);color:var(--ink-2)}
.dlg .f{display:grid;grid-template-columns:120px 1fr;gap:10px 14px;align-items:start;padding:10px 0;border-top:1px solid var(--hair)}.dlg .f>span{font-size:var(--fs-sm);color:var(--ink-3);padding-top:6px}
.dlg .pills{display:flex;flex-wrap:wrap;gap:6px}.dlg .pills label{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--line);font-size:var(--fs-md);cursor:pointer;background:var(--surface)}
.dlg .pills label:has(input:checked){background:var(--ink);color:var(--ground);border-color:var(--ink)}.dlg .pills input{position:absolute;opacity:0;width:0;height:0}
.dlg .authors label{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-md);font-size:var(--fs-md);cursor:pointer}.dlg .authors label:hover{background:var(--sunken)}.dlg .authors input{accent-color:var(--ink)}
.dlg .authors .av{width:20px;height:20px;border-radius:50%;color:var(--on-accent);font-size:var(--fs-xs);font-weight:700;display:inline-grid;place-items:center}.dlg .authors small{color:var(--ink-3);margin-left:auto}
.dlg input[type=text]{height:32px;border:1px solid var(--edge);border-radius:var(--rs);padding:0 10px;font:inherit;width:min(260px,100%)}.dlg input[type=text]:focus{outline:0;box-shadow:var(--shadow-ring)}
.dlg .acts{display:flex;gap:8px;justify-content:flex-end;padding-top:14px;border-top:1px solid var(--hair);margin-top:4px}
.dlg .acts button{height:34px;padding:0 16px;border-radius:var(--r-pill);font-size:var(--fs-md);font-weight:500;color:var(--ink-2)}.dlg .acts button.primary{background:var(--ink);color:var(--ground)}.dlg .acts button:hover{color:var(--ink)}.dlg .acts button.primary:hover{color:var(--ground)}
@media (max-width:600px){.dlg .f{grid-template-columns:1fr}.dlg form{padding:18px 16px}}

/* portfolios: the what-if book */
.pf-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 24px;margin-bottom:14px}.pf-head h1{margin:0;font-size:var(--fs-3xl);letter-spacing:-.01em}.pf-head .intro{flex:1 1 420px;margin:0;font-size:var(--fs-md);color:var(--ink-2);max-width:720px}
.pf-new{display:flex;gap:8px}.pf-new input{height:34px;border:1px solid var(--edge);border-radius:var(--rs);padding:0 10px;font:inherit;width:240px}.pf-new input:focus{outline:0;box-shadow:var(--shadow-ring)}
.pf-new .primary,.pf-actions .primary{height:34px;padding:0 14px;border-radius:var(--r-pill);background:var(--ink);color:var(--ground);font-weight:500;font-size:var(--fs-md)}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.pf-card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px 12px;display:flex;flex-direction:column;gap:10px;cursor:pointer}.pf-card:hover{box-shadow:var(--shadow-h)}
.pf-card h3{margin:0;font-size:var(--fs-xl);font-weight:600}.pf-card .n{font-size:var(--fs-xs);color:var(--ink-3);margin-left:8px;font-weight:400}
.pf-card .pf-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.pf-mini div{font-size:var(--fs-xs);color:var(--ink-3)}.pf-mini b{display:block;font-family:var(--mono);font-size:var(--fs-lg);color:var(--ink);font-weight:600}
.pf-card svg{display:block;width:100%;height:56px}.pf-card .pf-actions{display:flex;gap:6px;justify-content:flex-end;border-top:1px solid var(--hair);padding-top:8px}.pf-actions button{font-size:var(--fs-sm);color:var(--ink-2);padding:4px 8px;border-radius:var(--r-md)}.pf-actions button:hover{background:var(--sunken);color:var(--ink)}.pf-actions button.danger:hover{color:var(--bad)}
.pf-curve{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px 8px;margin:14px 0}.pf-curve svg{display:block;width:100%;height:auto}.pf-curve .cap{font-size:var(--fs-xs);color:var(--ink-3);margin-top:4px}
/* the NAV chart's legend row, the SPY toggle and the day callout (2026-10-19): the swatches are the lines' own colours */
.pf-leg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin-bottom:4px;font-size:var(--fs-sm);color:var(--ink-2)}
.pf-key,.pf-bench{display:inline-flex;align-items:center;gap:8px;min-height:24px}.pf-key i,.pf-bench i,.pf-tip i{display:inline-block;width:16px;height:0;border-top:2.5px solid var(--pf);border-radius:2px}
.pf-bench{cursor:pointer;user-select:none}.pf-bench i,.pf-tip i.b{border-top-color:var(--bench)}.pf-bench input{width:16px;height:16px;margin:0;accent-color:var(--bench);cursor:pointer}
.pf-plot{position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pf-tip{position:absolute;top:4px;z-index:2;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-float);padding:8px 12px;font-family:var(--mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.pf-tip .d{color:var(--ink-3);font-size:var(--fs-xs);margin-bottom:4px}.pf-tip div{display:flex;align-items:center;gap:8px}.pf-tip b{margin-left:auto;padding-left:12px;font-weight:600}.pf-tip i{width:12px}
.hv-dot.p{fill:var(--pf)}.hv-dot.b{fill:var(--bench)}
.pf-table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;font-size:var(--fs-md)}.pf-table th{font-size:var(--fs-xs);font-weight:500;color:var(--ink-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair);letter-spacing:.02em}
.pf-table td{padding:9px 12px;border-bottom:1px solid var(--hair);vertical-align:middle}.pf-table tr:last-child td{border-bottom:0}.pf-table td.num,.pf-table th.num{text-align:right;font-family:var(--mono)}
.pf-table input[type=number]{width:72px;height:28px;border:1px solid var(--edge);border-radius:var(--r-md);padding:0 6px;font:inherit;font-family:var(--mono);text-align:right}.pf-table .idea{cursor:pointer;font-weight:500}.pf-table .idea:hover{color:var(--accent-ink)}
.pf-table .st{font-size:var(--fs-xs);color:var(--ink-3)}.pf-table .st.open{color:var(--accent-ink)}.pf-table .st.closed{color:var(--ink-2)}.pf-table .rm{color:var(--ink-3);font-size:var(--fs-sm);min-height:var(--target-floor);display:inline-flex;align-items:center}   /* was 17 px tall (f_2026-10-19_0488) */.pf-table .rm:hover{color:var(--bad)}
.pf-wrap,#lb{overflow-x:auto}.pf-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 10px}.pf-title h1{margin:0;font-size:var(--fs-3xl);letter-spacing:-.01em}.pf-title .tag{font-size:var(--fs-sm)}
/* add-to-portfolio popover */
.pfpop{position:fixed;z-index:70;min-width:240px;max-width:320px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--rs);box-shadow:var(--shadow);padding:8px}
.pfpop h5{margin:2px 8px 6px;font-size:var(--fs-xs);font-weight:500;color:var(--ink-3);letter-spacing:.02em}.pfpop label{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-md);font-size:var(--fs-md);cursor:pointer}.pfpop label:hover{background:var(--sunken)}.pfpop label small{margin-left:auto;color:var(--ink-3)}.pfpop input[type=checkbox]{accent-color:var(--ink)}
.pfpop form{display:flex;gap:6px;padding:6px 8px 2px;border-top:1px solid var(--hair);margin-top:4px}.pfpop form input{flex:1;height:28px;border:1px solid var(--edge);border-radius:var(--r-md);padding:0 8px;font:inherit;font-size:var(--fs-md);min-width:0}.pfpop form button{font-size:var(--fs-sm);padding:0 10px;border-radius:var(--r-pill);background:var(--ink);color:var(--ground)}
.cnt button[data-addpf]{font-size:var(--fs-lg)}.actions button[data-addpf]{font-weight:500}
@media (max-width:700px){.pf-card .pf-mini{grid-template-columns:repeat(2,1fr)}}

.pf-ctl{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin:4px 0 10px;font-size:var(--fs-sm);color:var(--ink-3)}
.pf-ctl .grp{display:inline-flex;align-items:center;gap:8px}.pf-ctl .pills{display:inline-flex;gap:4px}.pf-ctl .pills button{padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-2);background:var(--surface)}
.pf-ctl .pills button.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}.pf-ctl input[type=number]{width:64px;height:26px;border:1px solid var(--edge);border-radius:var(--r-md);padding:0 6px;font:inherit;font-family:var(--mono);text-align:right}
.pf-ctl .share{display:inline-flex;align-items:center;gap:6px}.pf-ctl .share button{font-size:var(--fs-sm);color:var(--ink-2);padding:4px 8px;border-radius:var(--r-md);border:1px solid var(--line)}.pf-ctl .share button.on{color:var(--accent-ink);border-color:var(--accent-ink)}
.pf-ro{display:inline-block;font-size:var(--fs-xs);color:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 8px}

.agora-bar{max-width:1440px;margin:0 auto 10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.agora-bar .pills{display:inline-flex;gap:4px}.agora-bar .pills button{padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--line);font-size:var(--fs-md);color:var(--ink-2);background:var(--surface)}.agora-bar .pills button.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}.agora-bar .hint{font-size:var(--fs-sm);color:var(--ink-3)}
.score .title-chip,.title-chip{display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--accent);border-radius:var(--r-pill);padding:1px 8px;vertical-align:middle}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}.bdg{display:inline-flex;align-items:center;font-size:var(--fs-sm);font-weight:500;color:var(--ink);background:var(--sunken);border-radius:var(--r-pill);padding:4px 10px}
.segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 24px;margin-top:10px}.seg h5{margin:0 0 6px;font-size:var(--fs-xs);font-weight:500;color:var(--ink-3);letter-spacing:.02em}
.segrow{display:grid;grid-template-columns:1fr 90px 72px;align-items:center;gap:8px;font-size:var(--fs-md);padding:3px 0}.segrow i{display:block;height:6px;background:var(--sunken);border-radius:3px;overflow:hidden}.segrow i b{display:block;height:100%;background:var(--ok)}.segrow small{color:var(--ink-3);text-align:right;font-family:var(--mono)}
.footer{max-width:1440px;margin:18px auto 28px;padding:0 32px;font-size:var(--fs-sm);color:var(--ink-3);text-align:center}.footer .tag{font-size:var(--fs-sm)}.disclnote{font-size:var(--fs-xs);margin:10px 0 0}
.disclaimer p{font-size:var(--fs-lg);line-height:1.6;max-width:760px}.dlg .f.ack label{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-md);color:var(--ink-2);line-height:1.45}.dlg .f.ack input{margin-top:3px;accent-color:var(--ink)}
@media (max-width:700px){.footer{padding:0 16px}}

.dlg form.terms{width:min(680px,100%)}.termsbody{max-height:46vh;overflow:auto;border:1px solid var(--hair);border-radius:var(--r-lg);padding:4px 16px;background:var(--ground)}.termsbody p{font-size:var(--fs-md);line-height:1.55}
.terms .agree{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-md);margin:12px 0 0;color:var(--ink)}.terms .agree input{appearance:none;width:24px;height:24px;flex:none;margin:0;border:1.5px solid var(--ink-3);border-radius:var(--r-sm);display:grid;place-items:center;cursor:pointer}.agree input:checked{border-color:var(--accent-ink);background:var(--accent-ink)}.agree input:checked::after{content:"";width:11px;height:6px;border:2px solid var(--on-accent);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}.dlg .acts button.primary:disabled{opacity:.4;cursor:not-allowed}
.footer .copy{display:inline-block;margin-top:4px;color:var(--ink-3)}
.badge.bt{left:auto;right:10px;color:var(--ink-3)}

/* guest mode: try first, sign in to keep it */
.user.signin{background:var(--ink);color:var(--ground);padding:0 16px;font-weight:600}.user.signin .av{display:none}.user.signin:hover,.user.signin.on{color:var(--ground)}
.umenu .uhead.wrap{white-space:normal;max-width:250px;line-height:1.45}
.lk-plate{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--ground);display:inline-grid;place-items:center;font-weight:700;font-size:var(--fs-xl);box-shadow:var(--shadow-halo);margin:4px 0 14px;font-family:var(--mono)}
.perks{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:var(--fs-md);color:var(--ink-2);text-align:left}.perks li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}.perks li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;margin-top:6px}
a.primary{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 18px;border-radius:var(--r-pill);background:var(--ink);color:var(--ground);font-weight:500;font-size:var(--fs-md);text-decoration:none;white-space:nowrap}a.primary:hover{opacity:.9;color:var(--on-ink)}
.dlg form.login{width:min(460px,100%)}.dlg form.login .acts{justify-content:space-between;align-items:center}.dlg form.login .perks{margin-bottom:6px}
.rw-lock{flex-direction:column;align-items:flex-start;text-align:left;color:var(--ink);padding:28px 30px 30px}.rw-lock h3{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.01em;margin:0 0 6px}.rw-lock p{font-size:var(--fs-md);color:var(--ink-2);margin:0;line-height:1.45}.rw-lock .perks{margin:12px 0 18px}
.gfree b{color:var(--ink)}
/* the band overlaps the bottom of the columns: backdrop blur + fade in from the top (mask), solid ground where the card sits */
.gwall{column-span:all;position:relative;z-index:2;margin-top:-460px;height:580px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;
background:linear-gradient(to bottom,rgba(var(--ground-rgb),0) 0%,rgba(var(--ground-rgb),.55) 38%,var(--ground) 60%);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 42%);mask-image:linear-gradient(to bottom,transparent 0%,#000 42%)}
.gcard{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-h);padding:24px 28px;max-width:460px;text-align:center}.gcard h3{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.01em;margin:0 0 6px}.gcard p{font-size:var(--fs-md);color:var(--ink-2);margin:0 0 14px;line-height:1.45}
.gpage{max-width:520px;margin:18px auto 0;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:28px 30px}.gpage h1{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.01em;margin:0 0 6px}.gpage p{font-size:var(--fs-md);color:var(--ink-2);line-height:1.5}.gpage .perks{margin:12px 0 18px}
.empty .gact{margin-top:14px}
.gsign{display:inline-flex;height:32px;align-items:center;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--hair-strong);font-size:var(--fs-md);color:var(--ink);text-decoration:none;margin-top:8px}.gsign:hover{background:var(--ink);color:var(--ground);border-color:var(--ink)}

/* runway buttons carry their word; first-run guide = three plates on the card + one dark card at its foot */
.rwb{display:flex;flex-direction:column;align-items:center;gap:5px}.rwb small{font-size:var(--fs-sm);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3)}
.coach{position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:var(--r);transition:opacity .25s}.coach.out{opacity:0}
.c-mark{position:absolute;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--ink);background:var(--surface);border:1px solid var(--hair-strong);border-radius:var(--r-lg);padding:8px 12px;box-shadow:var(--shadow-h);font-size:var(--fs-md);font-weight:600;animation:c-in .5s var(--ease) both}
.c-mark b{font-size:var(--fs-2xl);line-height:1;display:inline-grid}.c-mark b .ic{width:20px;height:20px}.c-mark small{font-weight:400;color:var(--ink-3);font-size:var(--fs-sm);white-space:nowrap}
.c-left{left:14px;top:38%;animation-delay:.15s}.c-right{right:14px;top:38%;animation-delay:.3s}.c-up{left:50%;top:var(--sp-4);animation:c-in-up .5s var(--ease) .45s both}
.c-left b{color:var(--ink-3)}.c-right b{color:var(--ok)}.c-up b,.c-up-t b{color:var(--accent)}
.c-card{position:absolute;left:14px;right:14px;bottom:14px;pointer-events:auto;background:var(--ink);color:var(--ground);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--shadow-h);animation:c-in .5s var(--ease) .6s both}
.c-card h4{font-size:var(--fs-md);font-weight:600;margin:0 0 6px;letter-spacing:.02em}.c-card p{font-size:var(--fs-md);color:var(--on-ink);opacity:.85;margin:0 0 4px;line-height:1.4}.c-card .primary{margin-top:8px;height:30px;padding:0 14px;border-radius:var(--r-pill);background:var(--ground);color:var(--ink);font-size:var(--fs-md);font-weight:500}
@keyframes c-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes c-in-up{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
.rw-card.peek{animation:rw-peek 2.2s var(--ease) 1s 1}@keyframes rw-peek{0%,100%{transform:none}18%{transform:translateX(calc(-1 * var(--sp-2))) rotate(-1deg)}40%{transform:translateX(var(--sp-2)) rotate(1deg)}58%{transform:translateX(calc(-1 * var(--sp-1)))}70%{transform:none}84%{transform:translateY(calc(-1 * var(--sp-4)))}}
.tip{column-span:all;grid-column:1/-1;max-width:1440px;margin:0 auto 10px;display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--ground);border-radius:var(--rs);padding:9px 12px 9px 14px;font-size:var(--fs-md);width:100%;line-height:1.4}.tip span{flex:1}.tip button{color:var(--on-ink);opacity:.7;font-size:var(--fs-md);flex:none;display:inline-grid;place-items:center;width:24px;height:24px}.tip button:hover{color:var(--ground)}
@media (max-width:700px){.c-left,.c-right{top:30%}.gwall{margin-top:-380px;height:480px}.rw-lock{padding:22px 20px}}
/* agents are rounded squares (an app/bot face), users stay round, tickers are a bare $ (projects-84, Alan 2026-10-16) */
.av.ag,.dlg .authors .av.ag{border-radius:28%}
.profile .big.ag{border-radius:var(--r-lg)}
.av[data-av]{cursor:pointer;transition:transform .12s var(--ease,ease)}.av[data-av]:hover{transform:scale(1.08)}
.av[data-av]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tkav{font-family:var(--mono);font-weight:700;font-size:var(--fs-md);width:18px;text-align:center;flex:none;color:var(--ink-2)}
.pill .tkav{width:auto}.tkn,.rrow[data-sel^="ticker:"] .rlabel{font-family:var(--mono);letter-spacing:.02em}

/* runway deck: mode pills, the corner thumbnail (a mini landscape of the deck) and the jump grid */
.stage{position:relative}
.rw-modes{display:inline-flex;gap:4px;background:var(--sunken);border-radius:var(--r-pill);padding:3px}.rw-modes button{height:28px;padding:0 12px;border-radius:var(--r-pill);font-size:var(--fs-md);color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.rw-modes button span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-3)}.rw-modes button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}.rw-modes button.on span{color:var(--ink-2)}
.rw-progress{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.rw-thumb{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px 0 8px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow);font-size:var(--fs-sm);color:var(--ink-2);font-family:var(--mono);flex:none}.rw-thumb:hover{box-shadow:var(--shadow-h);color:var(--ink)}
.rw-thumb .dots{display:grid;grid-template-columns:repeat(12,5px);gap:2px}.rw-thumb .dots b{width:5px;height:5px;border-radius:1.5px;background:var(--sunken);border:1px solid var(--hair-strong);box-sizing:border-box}
.rw-thumb .dots b.liked,.rw-grid .cell.liked,.rw-grid .lg b.liked{background:var(--bull);border-color:var(--bull)}.rw-thumb .dots b.passed,.rw-grid .cell.passed,.rw-grid .lg b.passed{background:var(--ink-3);border-color:var(--ink-3)}
.rw-thumb .dots b.saved,.rw-grid .cell.saved,.rw-grid .lg b.saved{background:var(--accent);border-color:var(--accent-ink)}.rw-thumb .dots b.cur{box-shadow:var(--shadow-ring-thin)}
.rw-grid{position:absolute;top:76px;right:0;z-index:9;width:min(100%,420px);background:var(--surface);border:1px solid var(--hair);border-radius:var(--rs);box-shadow:var(--shadow-h);padding:12px 12px 10px}
.rw-grid h5{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0 0 8px}
.rw-grid .cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:4px;max-height:46vh;overflow:auto}
.rw-grid .cell{height:30px;border-radius:var(--r-md);background:var(--sunken);border:1px solid var(--hair);font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-2);display:inline-grid;place-items:center}.rw-grid .cell:hover{border-color:var(--ink)}
.rw-grid .cell.liked,.rw-grid .cell.passed,.rw-grid .cell.saved{color:var(--on-accent)}.rw-grid .cell.cur{box-shadow:var(--shadow-ring-ink);color:var(--ink)}.rw-grid .cell.liked.cur,.rw-grid .cell.passed.cur,.rw-grid .cell.saved.cur{color:var(--on-accent)}
.rw-grid .lg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px;font-size:var(--fs-xs);color:var(--ink-3)}.rw-grid .lg span{display:inline-flex;align-items:center;gap:5px}.rw-grid .lg b{width:10px;height:10px;border-radius:3px;background:var(--sunken);border:1px solid var(--hair-strong);box-sizing:border-box}.rw-grid .lg b.cur{box-shadow:var(--shadow-ring-thin);background:var(--surface)}
.rw-empty .rw-replay{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}.rw-empty .rw-replay button{height:32px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--hair-strong);font-size:var(--fs-md);color:var(--ink)}.rw-empty .rw-replay button:hover{background:var(--ink);color:var(--ground);border-color:var(--ink)}
@media (max-width:700px){.rw-grid{top:70px;left:0;width:100%}.rw-thumb .dots{display:none}}

/* company plate: icon · name · what · known for · sector › industry · size · country */
.plate{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-1) 0 2px;font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;overflow:hidden;min-width:0}
.plate .pi{width:22px;height:22px;border-radius:var(--r-sm);background:var(--sunken);display:inline-grid;place-items:center;flex:none;color:var(--ink-2)}
.plate b{flex:none;font-weight:600;color:var(--ink);font-size:var(--fs-md)}.plate .tk{flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--ink);letter-spacing:.02em}.plate .pw{overflow:hidden;text-overflow:ellipsis;min-width:0}
/* the card plate is one line: a name wider than the card truncates with an ellipsis instead of pushing the row past its
   box (a long fund name clipped by 4px, #60); the phrase after it takes only the room the name leaves */
.plate:not(.full) b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.plate:not(.full) .pw{flex:1 1 0}
.plate.full{flex-wrap:wrap;white-space:normal;gap:var(--sp-1) var(--sp-2)}.plate.full .pw{white-space:nowrap}.plate.full .pc{background:var(--sunken);border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap;font-size:var(--fs-xs)}
.rw-body .plate{margin:8px 0 2px}.sheet .plate{margin:6px 0 10px}
/* first-run wizard */
.dlg form.wizard{width:min(520px,100%)}.wz-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:var(--fs-xs)}
.wz-dots{display:inline-flex;gap:6px}.wz-dots i{width:18px;height:4px;border-radius:2px;background:var(--sunken)}.wz-dots i.on{background:var(--ink)}.wz-dots i.done{background:var(--ink-3)}
.wz-opts{display:grid;gap:8px;margin:14px 0 6px}.wz-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:1px solid var(--hair-strong);border-radius:var(--r-lg);text-align:left;background:var(--surface)}
.wz-opt b{font-size:var(--fs-lg)}.wz-opt small{color:var(--ink-3);font-size:var(--fs-sm)}.wz-opt.on{border-color:var(--ink);box-shadow:var(--shadow-ring-thin)}
.wz-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}.wz-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--hair-strong);border-radius:var(--r-pill);font-size:var(--fs-md);background:var(--surface)}
.wz-chip small{color:var(--ink-3);font-size:var(--fs-xs)}.wz-chip.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}.wz-chip.on small{color:var(--on-ink);opacity:.7}.wz-chip.on .av{box-shadow:var(--shadow-ring-ground)}
.wizard .acts{justify-content:flex-start}.wizard .acts .sp{flex:1}.dlg .f>span small{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px}

/* ---- design language v1 (2026-10-17, design/principles.md): icons from the sprite, market codes, one-line rows, chart classes, theme ---- */
.ic{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px;fill:none;color:inherit}
button .ic,.who .ic{pointer-events:none}
.mk{display:inline-flex;align-items:center;height:18px;padding:0 5px;border:1px solid var(--hair-strong);border-radius:var(--r-sm);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.04em;color:var(--ink-2);flex:none;line-height:1}
.call{display:flex;align-items:baseline;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap;overflow:hidden;min-width:0;margin-top:var(--sp-2)}
.call .dir{display:inline;font-weight:600;flex:none}.call .dir .ic{margin-right:4px}.call .since{overflow:hidden;text-overflow:ellipsis;min-width:0}
.call .ret{margin-left:auto;display:inline-flex;align-items:baseline;gap:6px;flex:none}.call .rn{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--fs-lg);color:var(--ink-2)}.call .rn.pos{color:var(--ok)}.call .rn.neg{color:var(--bad)}.call .rn.flat{color:var(--ink-3)}
/* the live dot: this return is newer than the desk's own mark (prices.py intraday / post-close pull). Drawn, never a
   character, so the glyph gate stays clean; 6px keeps it off the one-line budget of .call. */
.call .livedot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;align-self:center}
/* the as-of under a return that could not be brought forward (an option: the spot cannot mark it). Its own row, so
   .call stays a single line for design_lint. */
.asof{font-size:var(--fs-sm);color:var(--ink-3);text-align:right;margin-top:var(--sp-1);white-space:nowrap}
.rw-top .st{color:var(--warn)}.rw-top .rw-who{display:inline-flex;align-items:center;gap:var(--sp-1);min-width:0}.rw-top .pn{overflow:hidden;text-overflow:ellipsis}.rw-top .dt{flex:none}
.who-chip .pn{white-space:nowrap}
.rw-btn .ic{width:24px;height:24px}   /* one icon size in every Runway round button (Alan 2026-10-20) */
.actions button{min-width:0}.actions button .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}  /* #88: the row never runs past the pane; a label shrinks with an ellipsis first */
.rw-more b{display:inline-flex;align-items:center;gap:2px}
.chips .follow,.chips .watch{margin-left:0;height:26px;border-radius:var(--r-pill)}
.chip.help{width:28px;height:28px;padding:0;justify-content:center;color:var(--ink-3)}.chip.help:hover{color:var(--ink)}
.chips .hint{margin-left:0}
.tag,.crumb,.pill .x,.rx,.bdg{min-height:24px;display:inline-flex;align-items:center;gap:4px}
.follow .ic,.watch .ic{margin-right:2px}
/* the chart draws with classes so both themes read it; the direction colour is data (inline style) */
.ch-grid{stroke:var(--ink);stroke-opacity:.07}.ch-axis{stroke:var(--ink);stroke-opacity:.18}.ch-tick{fill:var(--ink-3);font-family:var(--mono)}.ch-tick-l{stroke:var(--ink-3)}
.ch-strike{stroke:var(--ink);stroke-opacity:.45}.ch-idea{stroke:var(--ink);stroke-opacity:.5}.ch-exit{stroke:var(--ink-3)}
.ch-lbl{fill:var(--ink-2);stroke:var(--surface);stroke-width:3;paint-order:stroke}.ch-lbl.muted{fill:var(--ink-3)}.ch-dot{fill:var(--surface)}
.ch-last{font-family:var(--mono);font-weight:600}
/* a pair's chart (2026-10-23): the 0% line both legs start on, and the legend swatch that carries a leg's own colour.
   The baseline is read, not decoration — it sits between --grid and --axis so it reads as a level, not as the frame. */
.ch-base{stroke:var(--ink);stroke-opacity:.14}.ch-sw{rx:1.25}
.hv-x{stroke:var(--ink);stroke-opacity:.35}.hv-y{stroke:var(--ink);stroke-opacity:.2}.hv-dot{stroke:var(--surface)}.hv-box{fill:var(--ink);opacity:.92}.hv-txt{fill:var(--on-ink);font-family:var(--mono)}
.cv-bg{opacity:.08}
.pf-curve .ch-tick,.pf-card .ch-tick{fill:var(--ink-3)}
/* help sheet: the retired legend, folded */
.dlg form.help{width:min(520px,100%)}.help h4{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-3);margin:14px 0 6px}.help h4:first-of-type{margin-top:4px}
.help .row{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--fs-md);color:var(--ink-2)}.help .row span{display:inline-flex;align-items:center;gap:6px}.help .row i{width:14px;height:4px;border-radius:var(--r-sm);display:inline-block}
.help .row .badge{position:static;box-shadow:none}.help p{font-size:var(--fs-md);color:var(--ink-2);line-height:1.5;margin:0}.help kbd{font-family:var(--mono);font-size:var(--fs-xs);border:1px solid var(--hair-strong);border-radius:var(--r-sm);padding:0 5px}
/* top bar: the wall count is public-help; phones do not get it */
.top-in .wordmark small{display:none}@media (min-width:860px){.top-in .wordmark small{display:inline}}
@media (max-width:600px){.user #uname{display:none}.user{padding:0 4px}.user.signin #uname{display:inline}}
.umenu button .ic{color:var(--ink-3)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- 2026-10-17 pass 2: AA on every text pair, 24 px targets, a top bar that fits a phone ---- */
.who-chip,.ribbon,.rrow .rx,.pill .x,.tag,.crumb,.bdg,.rw-thumb,.rw-modes button,.chips .chip{min-height:24px}.rrow .rx{width:24px;display:inline-grid;place-items:center}.pill .x{min-width:24px;display:inline-grid;place-items:center}
.subrow{flex-wrap:wrap}.hub-search{width:min(320px,100%)}
.search{width:min(320px,40vw);min-width:120px}
@media (max-width:1000px){.top{padding:8px 8px 0}.top-in{height:auto;min-height:56px;flex-wrap:wrap;gap:8px 10px;padding:8px 10px 8px 14px}.wordmark{flex:1 1 auto}.seg{order:3;flex:1 1 100%;overflow-x:auto;scrollbar-width:none;justify-content:space-between}.seg::-webkit-scrollbar{display:none}.seg button{padding:0 10px;flex:none}
.search{order:4;flex:1 1 100%;width:auto;margin-left:0;min-width:0}.usermenu{margin-left:auto}.wall{padding:12px 16px 80px}.chips{padding:10px 16px 0}.page{padding:12px 16px 0}.stage{gap:10px}}
.segs .seg{display:block;background:none;border-radius:0;padding:0}.segrow{grid-template-columns:minmax(0,1fr) 90px 72px}
/* privacy policy (#/privacy and the consent dialog's second document) · account deletion confirm */
.privacy h2,.dlg .privacy h2{font-size:var(--fs-lg);font-weight:600;letter-spacing:0;margin:var(--sp-4) 0 var(--sp-1)}.privacy p{margin:0 0 var(--sp-2)}.privacy a{color:var(--accent-ink);padding:var(--sp-1) 0}
/* the title of #/disclaimer and #/privacy: spacing and type from the scale */
.doc-title{margin:var(--sp-2) 0 var(--sp-3);font-size:var(--fs-3xl)}
.termsdocs{display:flex;gap:var(--sp-2);align-items:center;margin:0 0 var(--sp-2);font-size:var(--fs-sm);color:var(--ink-3)}.termsdocs .tag{font-size:var(--fs-sm);min-height:24px}
.profile .acct{margin-top:var(--sp-2)}.profile .acct .tag{font-size:var(--fs-sm);min-height:24px;color:var(--bad)}
.dlg .acts button.danger,.dlg .acts button.danger:hover{background:var(--bad);color:var(--on-ink)}.dlg .acts button.danger:disabled{opacity:.6}

/* phone browsers (qa-mobile-web, 2026-10-18): a thumb, an on-screen keyboard, a short screen */
@media (pointer:coarse){.pf-bench{min-height:44px}
.rw-card{touch-action:pan-y}   /* a vertical drag scrolls the page; left / right judge; Save is the button (f_2026-10-18_0445) */
:root input:not([type=checkbox]):not([type=radio]),:root textarea,:root select{font-size:var(--fs-xl)}   /* under 16 px iOS Safari zooms in on focus and stays zoomed (f_2026-10-18_0442) */
}
@media (hover:none){
.post .ribbon,.pill .x,.rrow .rx{opacity:1}   /* Save, Remove and unfollow have no hover to appear on: drawn, not an invisible hotspot (f_2026-10-18_0447) */
}
.sheet,.sheet>.left,.sheet>.right,.termsbody{overscroll-behavior:contain}   /* the end of a sheet does not scroll the wall behind it (f_2026-10-18_0441) */
@media (max-width:700px),(max-height:500px){body.modal-open{overflow:hidden}}
@media (max-height:500px){.top{position:relative}}   /* a phone on its side: a 142 px sticky bar leaves no room for the card (f_2026-10-18_0450) */
@media (max-height:500px){.rw-actions{position:static}}   /* nor a 93 px sticky Pass/Like dock: it covered the top card's name and Return at scrollY 0; the dock follows the card (#141) */
@media (min-width:1001px){.rw-actions{position:static}}   /* desktop: the card and a 150 px sticky dock do not fit one 800 px screen; the dock overlay hid the Open row and the Diss tip sat on it, so the dock follows the card (#356) */
@media (max-width:600px){.pf-new{width:100%}.pf-new input{flex:1;min-width:0;width:auto}   /* 320 px: the field gives way to Create (f_2026-10-18_0440) */
.pfpop.bottom{left:8px;right:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom));max-width:none}}   /* a bottom sheet, so the name field rides above the keyboard (f_2026-10-18_0444) */
/* ---- 2026-10-18 restructure (dev/specs/2026-10-18-runway-album.md): the Album / Agora timeline, the one-shot Runway, portfolio entry and close ---- */
.wall.timeline{column-width:auto;columns:auto;display:block}
.tl-head{display:flex;flex-direction:column;gap:var(--sp-3);margin:var(--sp-1) 0 var(--sp-3)}
.tl-intro{margin:0;color:var(--ink-3);font-size:var(--fs-md)}
.tl-bar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.tl-bar .pills{display:inline-flex;flex-wrap:nowrap;gap:2px;background:var(--sunken);border-radius:var(--r-pill);padding:3px}
.tl-bar .pills button{min-height:28px;padding:0 var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-md);color:var(--ink-2);white-space:nowrap}
.tl-bar .pills button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.tl-n{margin-left:auto;font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap}
.tl-guest{font-size:var(--fs-md);color:var(--ink-2);margin:0 0 var(--sp-3)}
/* the axis: one hairline down the left, a dot per day; the day label stays in view while its cards scroll */
.tl{position:relative;padding-left:var(--sp-6)}
.tl::before{content:"";position:absolute;left:5px;top:var(--sp-2);bottom:0;width:2px;border-radius:var(--r-pill);background:var(--line)}
.tl-group{display:grid;grid-template-columns:136px minmax(0,1fr);gap:var(--sp-6);align-items:start;padding:var(--sp-4) 0}
.tl-date{position:sticky;top:calc(var(--top-h,72px) + var(--sp-3));margin:0;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-lg);font-weight:600;line-height:var(--lh-snug)}
.tl-date::before{content:"";position:absolute;left:calc(-1 * var(--sp-6));top:5px;width:12px;height:12px;border-radius:var(--r-pill);background:var(--ink);box-shadow:var(--shadow-ring-ground)}
.tl-date small{font-size:var(--fs-sm);font-weight:400;color:var(--ink-3)}
.tl-date .mk{margin-right:2px}
/* A day's cards read across the row and wrap to the next one. They were in CSS columns, which fill each column
   top-to-bottom before moving right, so a day of likes read as a single file down the page (2026-10-19). A grid of
   equal-height rows instead; the covers are one height on the timeline (app.js TL_COVER_H) so the headlines line up
   across a row, and a narrow screen fits one column on its own. The track floor is min(250px,100%), not a bare 250px:
   a bare one cannot shrink, so a content box under 250px (a 320px phone zoomed, a narrow split window) pushed the card
   sideways out of the page — the old column-width shrank to fit. */
.tl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:var(--sp-4)}
.tl-cards>.post{margin-bottom:0;display:flex;flex-direction:column}   /* the gap spaces them now; the masonry walls still need the margin */
.tl-cards>.post>.body{padding-bottom:var(--sp-2)}   /* .meta's own margin-top goes below, so the body keeps the gap itself */
.tl-cards>.post>.meta{margin-top:auto}   /* a row is as tall as its tallest card, so the date line sits on the floor of all of them */
.tl>.empty{margin-left:calc(-1 * var(--sp-6))}
@media (max-width:700px){
  .tl{padding-left:var(--sp-4)}.tl::before{left:3px}
  .tl-group{grid-template-columns:minmax(0,1fr);gap:var(--sp-2);padding:var(--sp-2) 0 var(--sp-3)}
  .tl-date{top:var(--top-h,72px);z-index:5;flex-direction:row;align-items:baseline;gap:var(--sp-2);padding:var(--sp-2) 0;background:var(--ground)}
  .tl-date::before{left:calc(-1 * var(--sp-4) - 1px);top:13px;width:10px;height:10px}
  .tl-n{margin-left:0}
}
/* the admin Agora: a card's live / offline switch; an offline card is dimmed */
.post.off{opacity:.55}
.pubrow{display:flex;padding:0 var(--sp-3) var(--sp-3)}
.pub{display:inline-flex;gap:2px;background:var(--sunken);border-radius:var(--r-pill);padding:2px;flex:none}
.pub button{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-sm);color:var(--ink-3)}
.pub button .ic{width:14px;height:14px}
.pub button.on{background:var(--surface);box-shadow:var(--shadow)}
.pub button.on[data-pub$=":1"]{color:var(--ok)}.pub button.on[data-pub$=":0"]{color:var(--bad)}
.sheet .who .pub{margin-left:auto}
/* the Runway: a help button beside the progress, the end-of-edition card, two judgements */
.rw-tools{display:inline-flex;align-items:center;gap:var(--sp-2);flex:none}
.rw-help{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r-pill);color:var(--ink-3)}.rw-help:hover{background:var(--sunken);color:var(--ink)}
.rw-done{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.rw-done h3{margin:0;font-size:var(--fs-xl);color:var(--ink)}.rw-done p{margin:0 0 var(--sp-2);font-size:var(--fs-md);max-width:34ch}
.rw-actions{justify-content:center;align-self:stretch;gap:0}.rw-actions .rwb{flex:1 1 0;min-width:0;max-width:calc(var(--target-judge) + var(--sp-12))}.rw-actions .rwb small{white-space:nowrap;text-align:center}.rw-actions .rwb small.reset{white-space:normal;width:max-content;max-width:calc(var(--target-judge) + var(--sp-6))}   /* Diss · Pass · Super like · Like (Alan 2026-10-20): one size (--target-judge) in equal cells, so the circles' centres are evenly spaced and the row is centred; a label is one line and may run past its cell ("SUPER LIKE" at 320), the two-line "Resets at midnight" excepted; the bar still spans the stage and covers the card's last row on a phone */
.actions .sj-pass{color:var(--ink-2)}.actions .sj-like{color:var(--ok);font-weight:600}
.actions span.act.on{display:inline-flex;gap:6px;align-items:center;color:var(--ink);font-weight:500}
/* the hub's liked count opens the Album */
.stat.link{cursor:pointer;border-radius:var(--r-md)}.stat.link:hover b{color:var(--accent-ink)}
/* portfolio rows: the entry day, the weight with its share, close / reopen */
.pf-table input.pf-date{width:132px;height:28px;border:1px solid var(--edge);border-radius:var(--r-md);padding:0 6px;font:inherit;font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface);color:var(--ink)}
.pf-table .pf-share{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.pf-table .pf-acts{white-space:nowrap}.pf-table .pf-acts .rm+.rm{margin-left:var(--sp-2)}
.pf-table .st.pending{color:var(--warn)}
/* the Album's empty state and the Runway's end card: a real button, 44 px like the Runway's own (principles.md) */
.empty .gact button.primary,.rw-done button.primary{display:inline-flex;align-items:center;justify-content:center;min-height:var(--target-touch);padding:0 var(--sp-6);border-radius:var(--r-pill);background:var(--ink);color:var(--ground);font-weight:500;font-size:var(--fs-md)}
/* the search box shows on the Album and the Agora only; where it is hidden, the language button and the user chip still sit on the right */
.top-in .search[hidden]+.lang{margin-left:auto}
/* a backtest idea on the Runway says so on its card, as an Album card does (f_2026-10-18_0416) */
.rw-top .bt{display:inline-flex;align-items:center;gap:4px;flex:none;padding:2px var(--sp-2);border-radius:var(--r-pill);border:1px solid var(--hair-strong);color:var(--ink-2);font-size:var(--fs-xs);font-weight:500}.rw-top .bt .ic{width:12px;height:12px}
/* ---- reading on a phone (design/specs/ios-reading-2026-10-19.md §4, Alan 2026-10-19) ---- */
.plate .kf::before{content:" · "}
.evd>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;min-height:var(--target-touch)}.evd>summary::-webkit-details-marker{display:none}
.evd>summary h4{margin:0}.evd>summary h4 .n{font-weight:400;letter-spacing:0}.evd>summary .ic{width:16px;height:16px;color:var(--ink-3);transition:transform var(--t-fast) var(--ease)}.evd[open]>summary .ic{transform:rotate(180deg)}
@media (max-width:700px){
  /* the plate never ends in "…": its phrases wrap under the name, at most three lines */
  .plate,.plate.full{position:relative;flex-wrap:wrap;white-space:normal;overflow:visible;align-items:baseline;min-height:22px;padding-left:calc(22px + var(--sp-2));gap:var(--sp-1) var(--sp-2);font-size:var(--fs-md)}
  .plate .pi{position:absolute;left:0;top:0}
  .plate b,.plate:not(.full) b,.plate .tk{overflow:visible;text-overflow:clip;white-space:normal;flex:0 1 auto;min-width:0}
  .plate .pw,.plate:not(.full) .pw{display:contents}
  .plate .ph{flex:0 1 auto;min-width:0}
  .plate .kf::before{content:"· "}
  /* the headline takes two lines rather than an ellipsis */
  .hl{white-space:normal;align-items:flex-start}.hl .hd{overflow:visible;text-overflow:clip;white-space:normal}
  /* the brief: reading size, room between the lines, more for CJK */
  .brief .steps li,.brief .ev li,.brief .rk li,.sheet .summary{font-size:var(--fs-xl);line-height:var(--lh-normal)}
  .brief .steps li{padding:0 0 var(--sp-3) var(--sp-6)}.brief .ev li,.brief .rk li{padding:var(--sp-1) 0 var(--sp-1) var(--sp-6)}
  .brief .ev li::before,.brief .rk li::before{top:13px}
  .brief h4{font-size:var(--fs-md);margin:var(--sp-6) 0 var(--sp-2)}
  :lang(zh) .brief .steps li,:lang(zh) .brief .ev li,:lang(zh) .brief .rk li,:lang(zh) .sheet .summary{line-height:var(--lh-relaxed)}
}

/* tap targets on a touch screen (design/specs/phone-targets.md, 2026-10-19; principles.md): every control's hit area is at least
   --target-touch. A = a transparent ::after around a control drawn smaller; B = the box grows where nothing is drawn at rest;
   C = drawn at 44 (filled buttons, fields, stacked menu rows). Privacy and terms links in running text keep their line. */
@media (pointer:coarse){
:is(.seg button,#user,#lang,.rw-help,.crumb,.tag,.stat.link,.tl-bar .pills button,.pf-ctl .pills button,.pf-ctl .share button,.pf-table .rm,.wz-chip,.dlg .pills label){position:relative}
:is(.seg button,#user,#lang,.rw-help,.crumb,.tag,.stat.link,.tl-bar .pills button,.pf-ctl .pills button,.pf-ctl .share button,.pf-table .rm,.wz-chip,.dlg .pills label,#close)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--target-touch));height:max(100%,var(--target-touch));transform:translate(-50%,-50%)}
.seg{overflow:visible;flex-wrap:wrap}.top-in{row-gap:var(--sp-3)}.usermenu::after{display:none}
.top-in .search{height:var(--target-touch);border:var(--sp-1) solid transparent;background-clip:padding-box;margin-block:calc(-1 * var(--sp-1))}
.rw-top{overflow-x:clip;overflow-y:visible}
.meta{padding-block:0}.cnt button{min-width:var(--target-touch);min-height:var(--target-touch)}
.actions{padding-block:0}.actions button{min-width:var(--target-touch);min-height:var(--target-touch);justify-content:center}
.tag{min-width:var(--target-touch);justify-content:center}
.tl-bar .pills button{min-width:var(--target-touch)}.tl-bar .pills button::after{width:100%}   /* the segments sit 2 px apart: vertical slop only */
.pf-ctl .pills button,.pf-ctl .share button,.pf-table .rm{min-width:var(--target-touch)}.pf-ctl{row-gap:var(--sp-3)}.pf-title{margin-bottom:var(--sp-4)}
.pf-ctl input,.pf-table input,#pfnewform input,#pfnewform .primary,.umenu button,.pfpop label,.pfpop form input,.pfpop form button,.dlg .acts button,.dlg input[type=text],.dlg input[type=email],a.primary,.c-card .primary{min-height:var(--target-touch)}
.dlg .pills{gap:var(--sp-2)}.dlg .pills label{min-height:calc(var(--target-touch) - var(--sp-2))}
.terms .agree{min-height:var(--target-touch);align-items:center}
}
/* a statistic's explanation (z, t, beta, σ): the help icon after the term, a tap opens one plain line under the item (Alan 2026-10-19) */
.gl{display:inline-grid;place-items:center;width:24px;height:24px;margin:0 0 0 2px;vertical-align:-6px;border-radius:var(--r-pill);color:var(--accent-ink)}
.gl .ic{width:16px;height:16px}.gl:hover,.gl[aria-expanded="true"]{background:var(--accent-bg)}
.gl-tip{display:block;margin:var(--sp-2) 0 var(--sp-1);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);background:var(--sunken);color:var(--ink-2);font-size:var(--fs-md);line-height:var(--lh-normal)}
/* ---- 2026-10-19 · Pulse, Super like + Crowd, the compact Album (design/specs/pulse-crowd-album-2026-10-19.md) ---- */
/* the unread dot (tab, feed footer) · tab counts give way below 360 so four tabs keep one row (§1.1, D5) */
.udot{display:inline-block;width:var(--sp-2);height:var(--sp-2);border-radius:var(--r-pill);background:var(--accent);box-shadow:var(--shadow-ring-ground);flex:none}
#tabs .udot{margin-left:var(--sp-1);vertical-align:middle}
@media (max-width:359px){#tabs .n{display:none}}
.ic.big{display:block;width:calc(var(--sp-6) + var(--sp-1));height:calc(var(--sp-6) + var(--sp-1));margin:0 auto var(--sp-2);color:var(--ink-3)}
/* the Pulse column: the Runway's width, one column at every width (§1.2) */
.wall.pulse{column-width:auto;columns:auto}
.pu-col{display:flex;flex-direction:column;gap:var(--sp-3)}
.pu-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.pu-group+.pu-group{margin-top:var(--sp-6)}
.pu-slot{position:sticky;top:var(--top-h,72px);z-index:5;margin:0;padding-block:var(--sp-2);background:var(--ground);display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-lg);font-weight:600;color:var(--ink);white-space:nowrap}
.pu-time{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-sm);font-weight:400;color:var(--ink-3)}
.pu-intro{margin:0;font-size:var(--fs-md);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:359px){.pu-intro{white-space:normal;overflow:visible;text-overflow:clip}}
/* the item card (§1.6) and the Crowd row (§2.2): one card language */
.pu-item,.cr-row{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--sp-4);cursor:pointer;text-align:left;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.pu-item:active,.cr-row:active{transform:scale(.98);box-shadow:var(--shadow-float)}
.pu-a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);white-space:nowrap;min-width:0}
.pu-mv{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-4xl);font-weight:600;letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}.pu-mv.pos{color:var(--ok)}.pu-mv.neg{color:var(--bad)}
.pu-chip,.cr-you{display:inline-flex;align-items:center;gap:var(--sp-1);flex:none;background:var(--sunken);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-2);font-size:var(--fs-sm);font-weight:500;color:var(--ink-2)}
.pu-chip.like .ic{color:var(--ok)}.pu-chip.superlike .ic,.cr-you .ic{color:var(--accent)}.pu-chip.pass .ic{color:var(--ink-3)}.pu-chip.diss .ic{color:var(--judge-diss)}
.pu-item>.hl{margin-top:var(--sp-2)}.pu-item>.call{margin-top:var(--sp-1)}
.pu-item>.hl,.cr-row .hl{white-space:normal;align-items:flex-start}.pu-item>.hl .hd,.cr-row .hl .hd{white-space:normal;overflow:visible;text-overflow:clip}
.pu-line{margin:var(--sp-3) 0 0;font-size:var(--fs-lg);line-height:var(--lh-normal);color:var(--ink)}:lang(zh) .pu-line{line-height:var(--lh-relaxed)}
.pu-chart{position:relative;margin-top:var(--sp-3);height:calc(var(--sp-12) + var(--sp-4))}
@media (min-width:768px){.pu-chart{height:calc(var(--sp-12) * 2)}}
.pu-chart:empty{display:none}
.pu-chart svg{display:block;width:100%;height:100%;overflow:visible}
.pu-chart i{position:absolute;width:var(--sp-2);height:var(--sp-2);border-radius:var(--r-pill);transform:translate(-50%,-50%)}
.pu-chart .pt0{background:var(--surface);border:1.5px solid var(--ink-3)}.pu-chart .pt1{box-shadow:var(--shadow-ring-ground)}
.pu-f{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap}
.pu-f .badge{position:static;box-shadow:none;font-family:var(--font)}
.pu-item.sk{cursor:default;gap:var(--sp-3)}.pu-item.sk i{display:block;background:var(--sunken);border-radius:var(--r-md);animation:pu-sk calc(var(--t) * 4) var(--ease) infinite alternate}
.pu-item.sk .sk-a{height:var(--sp-8);width:40%}.pu-item.sk .sk-b{height:var(--sp-4);width:70%}.pu-item.sk .sk-c{height:calc(var(--sp-12) + var(--sp-4))}
@keyframes pu-sk{from{opacity:.6}to{opacity:1}}
.pu-err{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-2) 0;font-size:var(--fs-md);color:var(--ink-3)}
.pu-empty{padding:var(--sp-12) var(--sp-4)}.pu-empty p{margin:0 auto;max-width:36ch;font-size:var(--fs-lg);color:var(--ink-2)}.pu-empty .lk-plate{margin:0 auto var(--sp-3)}
.pu-note{margin:0;font-size:var(--fs-md);color:var(--ink-2)}
/* Crowd (§2): the bar super · like · pass with gaps, the legend, n and the you-chip */
.cr-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.cr-ret{flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-lg);font-weight:600;color:var(--ink-2)}.cr-ret.pos{color:var(--ok)}.cr-ret.neg{color:var(--bad)}.cr-ret.flat{color:var(--ink-3)}
.cr-row .cr-bar{margin-top:var(--sp-3)}
.cr-bar{display:flex;height:var(--sp-2);border-radius:var(--r-pill);overflow:hidden}.cr-bar.few{background:var(--sunken)}
.cr-bar i{display:block;flex-basis:0;min-width:0}.cr-bar i.su{background:var(--accent)}.cr-bar i.lk{background:var(--ok)}.cr-bar i.ps{background:var(--hair-strong)}
.cr-bar b{flex:none;width:calc(var(--sp-1) / 2);background:var(--surface)}
.cr-leg{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3);margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;min-width:0}
.cr-leg span{display:inline-flex;align-items:center;gap:var(--sp-1)}.cr-leg b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-md);font-weight:600;color:var(--ink)}
.cr-leg .ps{margin-left:auto}
.cr-leg .su .ic{color:var(--accent)}.cr-leg .lk .ic{color:var(--ok)}.cr-leg .ps .ic{color:var(--ink-3)}
.cr-few{font-size:var(--fs-md);color:var(--ink-3)}
.cr-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap}
.cr-n{display:inline-flex;align-items:center;gap:var(--sp-1)}
.crowd-sec{margin:var(--sp-3) 0}.crowd-sec:empty{display:none}
.crowd-sec h4{display:flex;align-items:baseline;gap:var(--sp-2);margin:0 0 var(--sp-2);font-size:var(--fs-md);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-3)}.crowd-sec h4 .n{font-weight:400;text-transform:none;letter-spacing:0}
:lang(zh) .crowd-sec h4{font-size:var(--fs-lg);letter-spacing:0}
/* super like: the Runway star (§3.1), its badge, the 0-left state (§3.3), the stamp; the earned mark (§3.5) and the Today control (§3.4) */
.rw-btn.super{position:relative;color:var(--accent)}
.rw-btn.super.none{opacity:.35;color:var(--ink-3)}.rwb small.reset{text-transform:none;letter-spacing:0}
.sl-n{position:absolute;top:calc(-1 * var(--sp-1));right:calc(-1 * var(--sp-1));box-sizing:border-box;min-width:var(--sp-4);height:var(--sp-4);padding:0 var(--sp-1);display:inline-grid;place-items:center;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--hair-strong);font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;line-height:1;color:var(--accent-ink);pointer-events:none}
.rw-btn.super.none .sl-n{color:var(--ink-3)}
.sl-n.shake{animation:sl-shake var(--t-fast) var(--ease) 2}@keyframes sl-shake{25%{transform:translateX(calc(-1 * var(--sp-1)))}75%{transform:translateX(var(--sp-1))}}
.sl-mark{display:inline-grid;place-items:center;flex:none;color:var(--accent)}.sl-mark.lg{align-self:flex-start;margin-left:auto}.sl-mark.lg .ic{width:20px;height:20px}
.sl-mark.pop{animation:sl-pop var(--t-fast) var(--ease)}@keyframes sl-pop{50%{transform:scale(1.2)}}
.sl-ctl{flex:none;width:calc(var(--sp-6) + var(--sp-1));height:calc(var(--sp-6) + var(--sp-1));display:inline-grid;place-items:center;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--hair-strong);color:var(--ink-2)}
.sl-ctl.none,.cnt .slt.none,.actions .sj-super.none{opacity:.35}.sl-ctl.none{color:var(--ink-3)}
.actions .sj-super{color:var(--ink)}.actions .sj-super .ic{color:var(--accent)}.actions .sl-c{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-3)}
.actions .sl-done{display:inline-flex;align-items:center;gap:6px;color:var(--accent-ink);font-weight:500}.actions .sl-done .ic{color:var(--accent)}
@media (max-width:599px){.actions{flex-wrap:wrap;row-gap:var(--sp-2)}}
.meta .sl-done{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-sm);color:var(--accent-ink)}.meta .sl-done .ic{color:var(--accent)}
.help h4.h-super{display:flex;align-items:center;gap:var(--sp-2)}.help h4.h-super .ic{width:20px;height:20px;color:var(--accent)}.help h4.h-diss{display:flex;align-items:center;gap:var(--sp-2)}.help h4.h-diss .ic{width:20px;height:20px;color:var(--judge-diss)}
/* the coach on touch: the up mark stands over the star in the dock and points down at it (§5.2) · the one-time tip (§5.3) */
.rw-actions .coach.c-dock{inset:auto 0 100% 0;height:0;border-radius:0}
.c-up-t{left:50%;bottom:var(--sp-2);flex-direction:row;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);animation:c-in-up .5s var(--ease) .45s both}.c-up-t b{order:3}   /* one row, so it stays clear of the coach card above it on a phone */
.stage .tip{margin:0;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md)}.tip>.ic{color:var(--on-ink)}
/* the one-time Diss bubble: over the Diss button, its left edge --sp-6 before the cell's centre and its point on it; the whole bubble is the dismiss target */
.rwb.diss{position:relative}.rw-actions:has(.diss-tip){flex-wrap:wrap;row-gap:var(--sp-3)}.rw-actions:has(.diss-tip) .rwb{flex-basis:20%}.rw-actions .diss-tip{position:relative;flex:0 0 100%;order:-1;box-sizing:border-box;width:100%;max-width:none;margin:0;display:block;text-align:left;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);box-shadow:var(--shadow-float);font-size:var(--fs-md);line-height:var(--lh-snug);cursor:pointer;z-index:7}
.rw-actions .diss-tip::after{content:"";position:absolute;top:100%;left:calc(50% - 1.5 * min(var(--target-judge) + var(--sp-12), (100% - var(--sp-8)) / 4));transform:translateX(-50%);border:var(--sp-1) solid transparent;border-top-color:var(--ink)}
/* the compact Album (§4): a day per row, two tiles and a peek, snapping sideways by tile and up / down by day (proximity) */
html.al-snap{scroll-snap-type:y proximity;scroll-padding-top:var(--top-h,72px)}
html.al-snap .tl-head{scroll-snap-align:start;scroll-margin-top:100vh}
.tl.al-c{padding-left:0}.tl.al-c::before{display:none}.tl.al-c>.empty{margin-left:0}
.al-row{scroll-snap-align:start;padding-top:var(--sp-4)}
.al-head{display:flex;align-items:baseline;gap:var(--sp-2);margin:0 0 var(--sp-2);font-size:var(--fs-lg);font-weight:600;line-height:var(--lh-snug);white-space:nowrap}
.al-head small{font-size:var(--fs-sm);font-weight:400;color:var(--ink-3)}
.al-head.tk{flex-direction:column;align-items:flex-start;gap:2px;white-space:normal}.al-head .mk{margin-right:2px}
.al-tiles{display:flex;gap:var(--sp-3);margin-right:calc(-1 * var(--sp-4));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline-start:0;overscroll-behavior-x:contain;scrollbar-width:none}
.al-tiles::-webkit-scrollbar{display:none}.al-tiles::after{content:"";flex:none;width:var(--sp-1)}
.al-tile{position:relative;flex:none;width:calc((100% - 2 * var(--sp-3) - var(--sp-8)) / 2);scroll-snap-align:start;display:flex;flex-direction:column;gap:var(--sp-2);padding:calc(var(--sp-1) + var(--sp-3)) var(--sp-3) var(--sp-3);background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.al-tile:has(.al-hit:active){transform:scale(.97);background:var(--sunken)}
.al-route{position:absolute;left:0;right:0;top:0;height:var(--sp-1)}
.al-hit{position:absolute;inset:0;z-index:1;border-radius:var(--r-lg)}.al-hit:focus-visible{outline:0;box-shadow:var(--shadow-ring)}
.al-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-1);min-height:calc(var(--sp-6) + var(--sp-1))}   /* the star control's height, so a tile with it and one without are the one height */
.al-top .sl-ctl,.al-top .sl-mark{position:relative;z-index:2}
.al-ret{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-3xl);font-weight:600;line-height:var(--lh-tight);color:var(--ink-2);white-space:nowrap}.al-ret.pos{color:var(--ok)}.al-ret.neg{color:var(--bad)}.al-ret.flat{color:var(--ink-3)}
@media (max-width:359px){.al-ret{font-size:var(--fs-2xl)}}
.al-name{height:calc(2 * var(--fs-lg) * var(--lh-snug));font-size:var(--fs-lg);font-weight:600;line-height:var(--lh-snug);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.al-name.sm{font-size:var(--fs-md)}.al-name.on{font-size:var(--fs-md);font-weight:400;color:var(--ink-2)}
.al-delay{margin-top:calc(-1 * var(--sp-1));font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* live-delay: the minutes a delayed price is behind, under the tile's return */
.al-side{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-md);font-weight:600;white-space:nowrap;overflow:hidden}
@media (prefers-reduced-motion:reduce){.sl-n.shake,.sl-mark.pop,.pu-item.sk i,.rw-card.peek{animation:none}.al-tile,.pu-item,.cr-row{transition:none}}
@media (pointer:coarse){
:is(.sl-ctl,.tip button){position:relative}
:is(.sl-ctl,.tip button)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--target-touch));height:max(100%,var(--target-touch));transform:translate(-50%,-50%)}
}
/* invite friends (2026-10-22, dev/specs/2026-10-22-invites-growth-monitor.md): the link, selectable, full width */
.dlg .invlink{display:block;width:100%;box-sizing:border-box;height:40px;border:1px solid var(--edge);border-radius:var(--rs);padding:0 var(--sp-3);font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface-2);margin-top:var(--sp-2)}.dlg .invlink:focus{outline:0;box-shadow:var(--shadow-ring)}

/* ---- 2026-10-24 · identity · streak · share card · schools · the board (design/specs/identity-streak-share-2026-10-24.md) ----
   Three chips, three shapes (§0): the title an ink outline pill in uppercase, a badge a sunken pill with a check, the school a
   sunken rectangle, the you-chip an ink pill. Accent stays links, focus and the super like. */
.title-chip,.score .title-chip{display:inline-flex;align-items:center;height:var(--sp-6);padding:0 var(--sp-2);font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2);border:1px solid var(--hair-strong);border-radius:var(--r-pill);white-space:nowrap;line-height:1}
.bdg{height:var(--sp-6);padding:0 var(--sp-2);gap:var(--sp-1);color:var(--ink);background:var(--sunken);font-size:var(--fs-sm);font-weight:500;white-space:nowrap}.bdg .ic{width:16px;height:16px;color:var(--ink-2)}
.sc-tag{display:inline-flex;align-items:center;height:var(--sp-6);padding:0 var(--sp-2);border-radius:var(--r-sm);background:var(--sunken);color:var(--ink-2);font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.lb-you{display:inline-flex;align-items:center;height:var(--sp-6);padding:0 var(--sp-2);border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.chips{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);min-width:0;overflow:hidden}
.sc-row{display:inline-flex;align-items:center;gap:var(--sp-1);position:relative;min-width:var(--target-touch);color:var(--ink-3)}.sc-row .ic{width:16px;height:16px}.sc-row::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--target-touch));height:max(100%,var(--target-touch));transform:translate(-50%,-50%)}
.sc-pickrow{margin-top:var(--sp-2);max-width:100%}.tag.sc-pick,.tag.lb-link{font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);gap:var(--sp-1);white-space:nowrap}.tag.sc-pick{white-space:normal;text-align:left;line-height:var(--lh-snug)}   /* one line at 390 (the table's budget); at 320 it may take two rather than overflow */.tag.sc-pick .ic,.tag.lb-link .ic{width:16px;height:16px}
/* the profile header (§1): avatar · name + chips · the streak line · the actions row; the liked / passed row and the bio are gone */
.profile.me,.profile.rd{padding:var(--sp-4);gap:var(--sp-3) var(--sp-4);grid-template-columns:auto 1fr auto;box-shadow:var(--shadow-card);border-radius:var(--r-lg)}
.profile.me .big,.profile.rd .big{width:calc(var(--sp-12) + var(--sp-2));height:calc(var(--sp-12) + var(--sp-2));color:var(--on-ink)}
.profile .pf-who{min-width:0}.profile .pf-who h1{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.profile .st-slot{align-self:start;justify-self:end}
.profile .actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);border-top:1px solid var(--hair);padding-top:var(--sp-3);color:var(--ink-3);font-size:var(--fs-sm)}.profile .actions .tag{font-size:var(--fs-sm)}.profile .actions .tag.del{color:var(--bad)}
@media (min-width:600px){.profile.me,.profile.rd{padding:var(--sp-6)}}
@media (max-width:600px){.profile.me,.profile.rd{grid-template-columns:auto 1fr}.profile.me>div:first-of-type,.profile.rd>div:first-of-type{grid-column:auto;grid-row:auto}.profile.me>:nth-child(3),.profile.rd>:nth-child(3){grid-column:1/-1;grid-row:auto;justify-self:start;align-self:start;width:100%;border-top:1px solid var(--hair);padding-top:var(--sp-3)}.profile .actions{border-top:0;padding-top:0}}
/* the streak line (§1.2): mark · days · best · the fraction; S0 start, S1 building, S2 at risk (warn), S3 counted (ok) */
.st-line{display:inline-flex;align-items:baseline;gap:var(--sp-1);font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap;max-width:100%;overflow:hidden}.st-line .ic{width:20px;height:20px;align-self:center;color:var(--ink-3);flex:none}
.st-line .st-days{font-size:var(--fs-lg);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}.st-line .st-frac{font-weight:600;font-variant-numeric:tabular-nums}.st-line.s1 .st-frac{color:var(--ink-2)}.st-line.s2 .ic,.st-line.s2 .st-frac{color:var(--warn)}.st-line.s3 .ic{color:var(--ok)}.st-sep{color:var(--ink-3)}
.st-line.mini .ic{color:var(--ink-2)}.st-line.mini .st-days{font-size:var(--fs-lg)}
/* the judgement card (§2): a surface card; seven tiles with the spread as a double tile; badges; neutral segment bars */
.section.score.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--sp-4);margin-top:var(--sp-4)}
@media (min-width:600px){.section.score.card{padding:var(--sp-6)}}
.sc-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);min-width:0}.sc-head h3{margin:0;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-3);white-space:nowrap}.sc-head .lb-link{margin-left:auto}.sc-head .chip.help{flex:none}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tiles .stat{background:var(--sunken);border-radius:var(--r-md);padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}.tiles .stat.span2{grid-column:span 2}
.tiles .stat b{font-family:var(--mono);font-size:var(--fs-2xl);font-weight:600;font-variant-numeric:tabular-nums;line-height:var(--lh-tight);letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tiles .stat span{font-size:var(--fs-sm);text-transform:none;letter-spacing:0;color:var(--ink-3);line-height:var(--lh-snug);min-height:calc(2 * var(--fs-sm) * var(--lh-snug))}
.tiles .stat.sk{min-height:calc(var(--sp-12) + var(--sp-6));animation:pu-sk calc(var(--t) * 4) ease-in-out infinite alternate}
.sc-none{font-size:var(--fs-md);color:var(--ink-3);margin:0 0 var(--sp-3)}.rw-go{display:inline-flex;align-items:center;justify-content:center;min-height:var(--target-touch);padding:0 var(--sp-6);border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font-weight:500;font-size:var(--fs-md)}
.score .badges{margin:var(--sp-3) 0 0;gap:var(--sp-2)}.score .segs{margin-top:var(--sp-4);gap:var(--sp-3) var(--sp-6)}.score .seg h5{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-3);font-weight:500}
.segrow{grid-template-columns:minmax(0,1fr) calc(var(--sp-12) * 2 - var(--sp-2)) auto}.segrow i{height:var(--sp-2);background:var(--hair-strong);border-radius:var(--r-pill)}.segrow i b{background:var(--ink-2)}.segrow small{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the board (§3): one 580 column of two-line rows at every width; the reader card (§3.3) */
.lb-col{max-width:580px;margin:0 auto}.lb-title{margin:var(--sp-1) 0;font-size:var(--fs-3xl);font-weight:600;letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}
.lb-intro{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-md);color:var(--ink-3);margin-bottom:var(--sp-3);min-width:0}.lb-intro>span{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lb-intro .chip.help{flex:none}
.lb-bar{margin-bottom:var(--sp-3)}.lb-note{font-size:var(--fs-sm);margin:0 0 var(--sp-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-list.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}
.lb-row{display:grid;grid-template-columns:var(--sp-6) minmax(0,1fr) auto;column-gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--hair);cursor:pointer;position:relative;min-height:var(--target-touch)}.lb-row:first-child{border-top:0}.lb-row:active{background:var(--sunken)}
.lb-rank{grid-row:1/3;font-family:var(--mono);font-size:var(--fs-md);color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums;padding-top:calc(var(--sp-1) / 2)}
.lb-a{display:flex;align-items:center;gap:var(--sp-2);min-width:0}.lb-name{font-size:var(--fs-lg);font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.lb-a .title-chip,.lb-a .lb-you{flex:none}
.lb-spread{font-family:var(--mono);font-size:var(--fs-lg);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;align-self:baseline;white-space:nowrap}.lb-spread.pos{color:var(--ok)}.lb-spread.neg{color:var(--bad)}.lb-spread.flat{color:var(--ink-3)}
.lb-b{grid-column:2/-1;margin-top:var(--sp-1);display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-sm);color:var(--ink-3);overflow:hidden;white-space:nowrap;min-width:0}.lb-b>span{flex:none}.lb-b>span:last-child{overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}.lb-st{display:inline-flex;align-items:center;gap:var(--sp-1)}.lb-st .ic{width:16px;height:16px}.lb-st b{color:var(--ink-2);font-variant-numeric:tabular-nums;font-weight:500}
.lb-row.sk{cursor:default}.lb-row.sk i{display:block;background:var(--sunken);border-radius:var(--r-sm);animation:pu-sk calc(var(--t) * 4) ease-in-out infinite alternate}.lb-row.sk .a{grid-column:2;height:var(--sp-4);width:40%}.lb-row.sk .c{grid-column:3;height:var(--sp-4);width:var(--sp-12)}.lb-row.sk .b{grid-column:2/-1;height:var(--sp-3);width:70%;margin-top:var(--sp-1)}
.lb-empty{padding:var(--sp-12) 0}.lb-empty .ic{width:28px;height:28px;color:var(--ink-3)}.lb-empty p{font-size:var(--fs-lg);color:var(--ink-2);margin:var(--sp-2) 0 var(--sp-4)}.lb-join,.lb-err{font-size:var(--fs-sm);margin-top:var(--sp-3)}
.rd-few,.rd-since,.rd-private{font-size:var(--fs-sm);margin:var(--sp-3) 0 0}.rd-gone p{font-size:var(--fs-lg);color:var(--ink-2)}
/* schools (§4): the picker row in Preferences — buttons, not radios, so a second tap clears */
.dlg .f.wide{grid-template-columns:1fr}.dlg .f.wide>span{padding-top:0}.dlg .f.wide>span small{font-size:var(--fs-sm)}
.sc-grid{display:grid;gap:var(--sp-2);grid-template-columns:1fr;margin-top:var(--sp-2)}@media (min-width:600px){.sc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sc-opt{display:grid;gap:var(--sp-1);padding:var(--sp-3) var(--sp-4);border:1px solid var(--hair-strong);border-radius:var(--r-lg);background:var(--surface);text-align:left;color:var(--ink);min-height:var(--target-touch);min-width:0}.sc-opt:active{background:var(--sunken)}.sc-opt:focus-visible{outline:0;box-shadow:var(--shadow-ring)}.sc-opt.on{border-color:var(--ink);box-shadow:var(--shadow-ring-thin)}
.sc-name{display:flex;align-items:center;gap:var(--sp-2);min-width:0}.sc-name b{font-size:var(--fs-lg);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-name .ic{margin-left:auto;width:20px;height:20px;flex:none}
.sc-blurb{font-size:var(--fs-md);color:var(--ink-2);line-height:var(--lh-normal)}html[lang="zh-CN"] .sc-blurb{line-height:var(--lh-relaxed)}
.sc-stat{display:grid;margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:0}.sc-stat span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-stat .few{color:var(--ink-3)}
.sc-effect{display:block;margin-top:var(--sp-2);font-size:var(--fs-sm)}
/* the Runway end card's streak line (§5), the toast with an action (§7), the share dialog (§6.5) */
.rw-done .rw-streak{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:calc(var(--fs-lg) * var(--lh-snug));margin:0;font-size:var(--fs-md);font-weight:500;color:var(--ink-2);max-width:100%;overflow:hidden;white-space:nowrap}.rw-done .rw-streak b{font-size:var(--fs-lg);font-weight:600;color:var(--ink)}.rw-done .rw-streak .ic{width:20px;height:20px;color:var(--ink-3)}.rw-done .rw-streak .ok .ic{color:var(--ok)}
.toast.act{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:var(--target-touch);padding:0 var(--sp-2) 0 var(--sp-4);pointer-events:auto;font-weight:500;color:var(--on-ink)}
.toast .ta{display:inline-flex;align-items:center;gap:var(--sp-1);height:var(--sp-8);padding:0 var(--sp-3);border-radius:var(--r-pill);background:var(--ground);color:var(--ink);font-size:var(--fs-sm);font-weight:600;position:relative;min-width:var(--target-touch);white-space:nowrap}.toast .ta .ic{width:16px;height:16px}.toast .ta::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--target-touch));height:max(100%,var(--target-touch));transform:translate(-50%,-50%)}
.dlg form.share{width:min(460px,100%)}.sh-img{display:block;width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--hair);margin:var(--sp-2) 0 var(--sp-3)}.dlg form.share .acts button{min-height:var(--target-touch)}
.act.sj-share .ic{width:16px;height:16px}

/* ---- the honours system (design/specs/honours-2026-10-24.md): emblems at three sizes, ink held / ink-3 not yet; the title row
   control, the badge chip with its emblem, the board's emblem column, the school card's emblem, the wall, the sheet, the moment */
.em{display:inline-block;flex:none;color:var(--ink);vertical-align:middle}.em.ny{color:var(--ink-3)}.em-sm{width:var(--emblem-sm);height:var(--emblem-sm)}.em-md{width:var(--emblem-md);height:var(--emblem-md)}.em-lg{width:var(--emblem-lg);height:var(--emblem-lg)}
.chips{min-height:var(--emblem-sm)}.hn-row,.hn-static{display:inline-flex;align-items:center;gap:var(--sp-1);min-width:0}.hn-row{position:relative;min-width:var(--target-touch);color:var(--ink-3)}.hn-row .ic{width:16px;height:16px}.hn-row::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--target-touch));height:max(100%,var(--target-touch));transform:translate(-50%,-50%)}
.bdg{height:calc(var(--sp-8) + var(--sp-2));padding:0 var(--sp-3) 0 var(--sp-1);gap:var(--sp-2);position:relative}.bdg .em{color:var(--ink)}button.bdg{cursor:pointer}button.bdg::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--target-touch));height:max(100%,var(--target-touch));transform:translate(-50%,-50%)}
.lb-row{grid-template-columns:var(--sp-6) var(--sp-8) minmax(0,1fr) auto}.lb-em{grid-row:1/3;align-self:center;display:inline-flex}.lb-b{grid-column:3/-1}
.sc-opt{grid-template-columns:var(--sp-8) minmax(0,1fr);column-gap:var(--sp-3)}.sc-em{grid-row:1/4;align-self:start;display:inline-flex}
/* the wall (§2.5) */
.hn-intro{font-size:var(--fs-md);margin:0 0 var(--sp-3)}.hn-group.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--sp-4);margin-bottom:var(--sp-3)}
.hn-head{display:flex;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-3);min-width:0}.hn-head h3{margin:0;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-3);white-space:nowrap}.hn-right{margin-left:auto;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.hn-right .tag{font-family:var(--font);white-space:normal;text-align:right}
.hn-grid{display:grid;gap:var(--sp-2);grid-template-columns:repeat(2,minmax(0,1fr))}@media (min-width:600px){.hn-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hn-cell{position:relative;display:grid;gap:var(--sp-1);padding:var(--sp-3);border-radius:var(--r-md);text-align:left;background:none;color:var(--ink);justify-items:start;min-width:0}.hn-cell .em{margin-bottom:var(--sp-1)}.hn-cell:active{background:var(--sunken)}.hn-cell:focus-visible{outline:0;box-shadow:var(--shadow-ring)}.hn-cell.cur{box-shadow:var(--shadow-ring-thin)}
.hn-cell .udot{position:absolute;top:var(--sp-2);right:var(--sp-2)}.hn-name{font-size:var(--fs-md);font-weight:600;overflow-wrap:anywhere;min-height:calc(2 * var(--fs-md) * var(--lh-snug));line-height:var(--lh-snug)}.hn-cell.ny .hn-name{color:var(--ink-3)}.hn-line{font-size:var(--fs-sm);color:var(--ink-3);line-height:var(--lh-snug);min-height:calc(3 * var(--fs-sm) * var(--lh-snug));overflow-wrap:anywhere}.hn-cell.held .hn-line{font-variant-numeric:tabular-nums}.hn-cur{height:var(--sp-6)}
.hn-empty{font-size:var(--fs-sm);margin:calc(-1 * var(--sp-1)) 0 var(--sp-3)}.hn-guest{margin-top:var(--sp-4);text-align:center}
/* the sheet and the moment (§2.5, §3): a dialog, centred allowed */
.dlg form.honour,.dlg form.moment{width:min(420px,100%);text-align:center}.hn-big{display:flex;justify-content:center;margin:var(--sp-2) 0 var(--sp-4)}.hn-big .em{color:var(--ink)}.hn-big.ny .em{color:var(--ink-3)}
.hn-sheet-name{font-size:var(--fs-2xl);font-weight:600;color:var(--ink);margin:0;display:flex;align-items:center;justify-content:center;gap:var(--sp-2)}.hn-kind{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-3);margin-top:var(--sp-1)}
.hn-story{font-size:var(--fs-md);color:var(--ink-2);line-height:var(--lh-normal);margin:var(--sp-3) 0 0}html[lang="zh-CN"] .hn-story{line-height:var(--lh-relaxed)}.hn-how{margin-top:var(--sp-3)}.hn-how span{display:block;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-3);margin-bottom:var(--sp-1)}.hn-how p{margin:0;font-size:var(--fs-md);color:var(--ink-2);line-height:var(--lh-normal)}.hn-state{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}
.dlg form.honour .acts,.dlg form.moment .acts{justify-content:center;margin-top:var(--sp-4)}.dlg form.honour .acts button,.dlg form.moment .acts button{min-height:var(--target-touch)}
.hn-kicker{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-3);margin-bottom:var(--sp-2)}.hn-line2{font-size:var(--fs-md);color:var(--ink-2);margin:var(--sp-2) 0 0}.hn-more{font-size:var(--fs-sm);margin:var(--sp-1) 0 0}
.hn-land .em{animation:hn-land calc(var(--t) * 2) var(--ease) both}.hn-after{animation:hn-fade var(--t) var(--ease) calc(var(--t) * 2) both}
@keyframes hn-land{from{opacity:0;transform:scale(1.5) rotate(-12deg)}to{opacity:1;transform:none}}@keyframes hn-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hn-land .em,.hn-after{animation:hn-fade var(--t) var(--ease) both}}

/* the eye on a locked cell (art honours-more §2): two buttons, never one inside the other; the reveal fades in the same slot */
.hn-cell{display:flex;flex-direction:column;align-items:stretch;padding:var(--sp-3)}.hn-open{display:grid;gap:var(--sp-1);justify-items:start;text-align:left;background:none;color:var(--ink);min-width:0;padding:0}.hn-open:focus-visible{outline:0}.hn-cell:has(.hn-open:focus-visible){box-shadow:var(--shadow-ring)}.hn-cell:has(.hn-open:active){background:var(--sunken)}
.hn-eye{width:var(--target-touch);height:var(--target-touch);min-height:calc(3 * var(--fs-sm) * var(--lh-snug));display:flex;align-items:flex-start;justify-content:flex-start;padding:0;margin-top:var(--sp-1);background:none;border-radius:var(--r-md);color:var(--ink-3)}.hn-eye .ic{width:16px;height:16px}.hn-eye:hover,.hn-eye:focus-visible{color:var(--ink);outline:0;box-shadow:var(--shadow-ring)}.hn-shown .hn-line{animation:hn-fade var(--t-fast,var(--t)) var(--ease) both}
.hn-cell.fresh{box-shadow:var(--shadow-ring-ink)}.hn-row .udot,.bdg .udot{margin-left:var(--sp-1);vertical-align:middle}
/* the moment v2 (art honours-more §3): T = motion.base × 6; stroke i of n starts at i·T/n and takes 1.5·T/n; the settle and one ripple at T; the words at T */
.hn-big{position:relative}.hn-draw{overflow:visible;transform:scale(1.06);animation:hn-settle var(--t) var(--ease) calc(var(--t) * 6) both}.hn-draw.still{transform:none;animation:hn-fade var(--t-fast,var(--t)) var(--ease) both}
.hn-draw [pathLength]{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;animation:hn-draw calc(var(--t) * 6 / var(--n) * 1.5) var(--ease) calc(var(--t) * 6 / var(--n) * var(--i)) both}.hn-draw .dot{opacity:0;animation:hn-fade var(--t-fast,var(--t)) var(--ease) calc(var(--t) * 6 / var(--n) * var(--i)) both}.hn-draw.still .dot{animation:none;opacity:1}
.hn-ripple{fill:none;stroke:var(--hair);stroke-width:1;transform-box:fill-box;transform-origin:center;opacity:0;animation:hn-ripple calc(var(--t) * 3) var(--ease) calc(var(--t) * 6) both}.hn-draw.still .hn-ripple{animation:none;opacity:0}
.hn-after{animation:hn-fade var(--t) var(--ease) calc(var(--t) * 6) both}.hn-draw.still~.hn-after,.still .hn-after{animation-delay:0s}
form.moment.done .hn-draw,form.moment.done .hn-draw *,form.moment.done .hn-after{animation-duration:0s;animation-delay:0s}
@keyframes hn-draw{from{opacity:1;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}@keyframes hn-settle{from{transform:scale(1.06)}to{transform:none}}@keyframes hn-ripple{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}
.hn-nod{font-size:var(--fs-sm);margin:var(--sp-1) 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.hn-draw,.hn-draw *,.hn-after,.hn-kicker{animation:none!important;opacity:1;transform:none}.hn-ripple{opacity:0}}

.st-line.s4 .ic{color:var(--ink-3)}.st-line .st-safe{color:var(--ink-3)}
/* S4 under 600 (art director 2026-10-25, identity §1.2): the sentence is the state and prints whole; best (and its separator) returns at ≥ 600 */
@media (max-width:600px){.st-line.s4 .st-best,.st-line.s4 .st-best+.st-sep{display:none}}
/* the Pulse streak item (design/specs/pulse-streak-2026-10-25.md): the streak mark in the move's slot, no chart, no call row */
.pu-streak .pu-mv.st-mark{color:var(--warn);display:inline-flex;align-items:center}.pu-streak .pu-mv .ic,.pu-chip.streak .ic{width:20px;height:20px}.pu-chip.streak{color:var(--ink-2)}.pu-streak .hl .hd{font-size:var(--fs-lg);font-weight:600}

/* ── intro + cover (intro.js, 2026-10-26 Alan): the mark lights on the night ground, its yellow floods into the cover ──
   Night ground and yellow never flip with the theme (brand-* tokens). Timeline in ms: bulb 0 · neck 150 · bars 300 ·
   line 500 · head 880 · light 1050 · word 1200 · flood 2050 (intro.js) · cover copy 2400. */
html.pw-lock,html.pw-lock body{overflow:hidden}
.pw-intro{position:fixed;inset:0;z-index:calc(var(--z-pop) + 10);--fs-hero:clamp(calc(var(--fs-4xl) * 1.25),8.4vw,calc(var(--fs-4xl) * 2.6));--pw-ease:cubic-bezier(.7,0,.2,1);--pw-spring:cubic-bezier(.34,1.56,.64,1)}
.pw-night{position:absolute;inset:0;background:var(--brand-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);cursor:pointer;transition:opacity .45s var(--ease) .3s}
.pw-mark{width:min(34vw,168px);height:auto;overflow:visible}
.pw-mark .mk-bulb,.pw-mark .mk-neck{fill:var(--brand-unlit);animation:pw-light .28s var(--ease) 1.05s forwards}
.pw-mark .mk-bulb{transform-box:fill-box;transform-origin:50% 50%;animation:pw-pop .55s var(--pw-spring) both,pw-light .28s var(--ease) 1.05s forwards}
.pw-mark .mk-neck{opacity:0;animation:pw-in .3s var(--ease) .15s forwards,pw-light .28s var(--ease) 1.05s forwards}
.pw-mark .mk-bar{fill:var(--brand-paper);opacity:0;transform:translateY(6px);animation:pw-up .34s var(--pw-spring) forwards}
.pw-mark .mk-bar1{animation-delay:.3s}.pw-mark .mk-bar2{animation-delay:.38s}
.pw-mark .mk-line,.pw-mark .mk-head{fill:none;stroke:var(--brand);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:pw-draw .42s var(--ease) .5s forwards,pw-ink .2s var(--ease) 1.05s forwards}
.pw-mark .mk-head{animation-duration:.18s,.2s;animation-delay:.88s,1.05s}
.pw-mark .mk-glow{fill:var(--brand);opacity:0;filter:blur(9px);animation:pw-glow 1s var(--ease) 1.05s forwards}
.pw-mark .mk-ring{fill:none;stroke:var(--brand);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:pw-ring .8s var(--ease) 1.05s forwards}
.pw-word{color:var(--brand-paper);font:700 var(--fs-4xl)/1 var(--font);letter-spacing:.02em;opacity:0;transform:translateY(10px);animation:pw-word .6s var(--ease) 1.2s forwards}
.pw-skip{position:absolute;right:var(--sp-4,16px);bottom:var(--sp-4,16px);color:var(--brand-paper);opacity:.5;font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-3,12px);border-radius:var(--r-pill)}
.pw-skip:hover,.pw-skip:focus-visible{opacity:.9}
@keyframes pw-pop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes pw-in{to{opacity:1}}
@keyframes pw-up{to{opacity:1;transform:none}}
@keyframes pw-draw{to{stroke-dashoffset:0}}
@keyframes pw-light{to{fill:var(--brand)}}
@keyframes pw-ink{to{stroke:var(--brand-ink)}}
@keyframes pw-glow{0%{opacity:0}35%{opacity:.85}100%{opacity:.32}}
@keyframes pw-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
@keyframes pw-word{0%{opacity:0;transform:translateY(10px);letter-spacing:.2em}100%{opacity:1;transform:none;letter-spacing:.02em}}

/* the flood: the cover (warm white, 2026-10-27) is clipped to the bulb and opens to the whole screen */
.pw-cover{position:absolute;inset:0;background:var(--brand-paper);color:var(--brand-ink);display:flex;flex-direction:column;padding:max(var(--sp-4,16px),env(safe-area-inset-top)) clamp(16px,5vw,64px) max(var(--sp-4,16px),env(safe-area-inset-bottom));clip-path:circle(0 at var(--cx,50%) var(--cy,50%));visibility:hidden;overflow:hidden}
.is-cover .pw-cover{visibility:visible;clip-path:circle(150vmax at var(--cx,50%) var(--cy,50%));transition:clip-path .8s var(--pw-ease)}
.is-cover .pw-night{opacity:0;pointer-events:none}
.is-cover .pw-skip{display:none}
.pw-top{display:flex;align-items:center;justify-content:space-between;height:56px}
.pw-brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:var(--fs-xl);letter-spacing:-.01em}
.pw-brand svg{width:34px;height:34px}
.pw-brand .tl-ground{fill:var(--brand-ink)}.pw-brand .tl-bulb{fill:var(--brand)}.pw-brand .tl-bar{fill:var(--brand-paper)}
.pw-brand .tl-line{fill:none;stroke:var(--brand-ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pw-lang{display:inline-flex;align-items:center;gap:6px;height:36px;min-width:44px;padding:0 14px 0 10px;border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-sm);color:var(--brand-ink);box-shadow:var(--shadow-ring-thin)}
.top-in .lang .ic{width:14px;height:14px}.pw-lang .ic{width:16px;height:16px}
.pw-lang:hover{background:var(--brand-ink);color:var(--brand-paper)}
.pw-body{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(24px,5vw,72px);max-width:1200px;width:100%;margin:0 auto}
.pw-h1{font-weight:800;font-size:var(--fs-hero);line-height:.98;letter-spacing:-.035em;margin:0}
.pw-sub{margin-top:clamp(16px,2.4vw,28px);max-width:30em;font-size:var(--fs-3xl);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--brand-ink);opacity:.72}
.pw-go{margin-top:clamp(24px,3.6vw,40px);height:56px;padding:0 26px 0 30px;display:inline-flex;align-items:center;gap:12px;border-radius:var(--r-pill);background:var(--brand-ink);color:var(--brand);font-weight:700;font-size:var(--fs-xl);transition:transform .2s var(--pw-spring),gap .2s var(--ease)}
.pw-go .ic{width:20px;height:20px}
.pw-go:hover{transform:translateY(-2px);gap:18px}.pw-go:active{transform:scale(.97)}
.pw-go:focus-visible{outline:2px solid var(--brand-ink);outline-offset:4px}
.pw-note{font-size:var(--fs-xs);opacity:.62;text-align:center}
.is-cover .pw-top,.is-cover .pw-h1,.is-cover .pw-sub,.is-cover .pw-go,.is-cover .pw-note{animation:pw-rise .7s var(--ease) both}
.is-cover .pw-top{animation-delay:.45s}.is-cover .pw-h1{animation-delay:.35s}.is-cover .pw-sub{animation-delay:.5s}.is-cover .pw-go{animation-delay:.62s}.is-cover .pw-note{animation-delay:.8s}
@keyframes pw-rise{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:none}}

/* the card stack: three blank cards, the front one teases a right swipe */
.pw-stack{position:relative;height:min(62vh,440px);display:grid;place-items:center}
.ic-card{position:absolute;width:min(78%,300px);aspect-ratio:3/4;background:var(--brand-card);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:10px;filter:drop-shadow(0 18px 30px rgba(17,18,20,.18)) drop-shadow(0 2px 4px rgba(17,18,20,.10));opacity:0}
.is-cover .ic-card{animation:pw-deal .8s var(--pw-spring) forwards}
.ic-card3{--r0:-10deg;--x0:-30px;animation-delay:.55s!important}
.ic-card2{--r0:7deg;--x0:26px;animation-delay:.66s!important}
.ic-card1{--r0:-1deg;--x0:0px;animation-delay:.78s!important}
.is-cover .ic-card1{animation:pw-deal .8s var(--pw-spring) .78s forwards,pw-tease 4.2s var(--ease) 2.2s infinite}
@keyframes pw-deal{0%{opacity:0;transform:translateY(80px) rotate(0)}100%{opacity:1;transform:translateX(var(--x0)) rotate(var(--r0))}}
@keyframes pw-tease{0%,62%,100%{transform:translateX(0) rotate(-1deg)}74%{transform:translateX(22px) rotate(5deg)}86%{transform:translateX(-4px) rotate(-2deg)}}
.ic-top{display:flex;justify-content:space-between;align-items:center}
.ic-pill{display:block;width:44%;height:14px;border-radius:var(--r-pill);background:var(--brand-ink)}
.ic-chip{display:block;width:22%;height:14px;border-radius:var(--r-pill);background:var(--brand)}
.ic-line1,.ic-line2{display:block;height:8px;border-radius:var(--r-pill);background:var(--hair-strong)}
.ic-line1{width:88%}.ic-line2{width:62%}
.ic-spark{flex:1;width:100%;margin-top:6px}
.ic-area{fill:var(--brand);opacity:.55}
.ic-path{fill:none;stroke:var(--brand-ink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.is-cover .ic-card1 .ic-path{animation:pw-draw .9s var(--ease) 1.4s forwards}
.ic-card2 .ic-path,.ic-card3 .ic-path{stroke-dashoffset:0}
.ic-acts{display:flex;justify-content:center;gap:18px}
.ic-act{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--brand-ink);box-shadow:var(--shadow-ring-thin)}
.ic-act .ic{width:20px;height:20px}
.ic-yes{background:var(--brand-ink);color:var(--brand)}

/* a signed-in reader: the night ground fades straight into the wall (no cover) */
.is-home{pointer-events:none}.is-home .pw-night{opacity:0;transition:opacity .45s var(--ease)}.is-home .pw-skip{display:none}
/* entering the wall: the cover lifts away */
.is-gone .pw-cover{transform:translateY(-100%);border-radius:0 0 var(--r-lg) var(--r-lg);transition:transform .65s var(--pw-ease)}
.is-gone{pointer-events:none}

@media (max-width:760px){
  .pw-body{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;gap:8px;padding-top:clamp(8px,4vh,40px)}
  .pw-sub{font-size:var(--fs-2xl)}
  .pw-go{width:100%;justify-content:center}
  .pw-stack{height:auto;min-height:200px;align-self:stretch}
  .ic-card{width:min(52%,210px)}
  .ic-card3{--x0:-56px}.ic-card2{--x0:52px}
}
@media (max-height:620px) and (max-width:760px){.pw-stack{display:none}}
@media (prefers-reduced-motion:reduce){
  .pw-intro *,.pw-intro{animation:none!important;transition:none!important}
  .pw-cover{visibility:visible;clip-path:none}
  .ic-card{opacity:1;transform:translateX(var(--x0)) rotate(var(--r0))}
  .ic-path{stroke-dashoffset:0}
}