* { box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 14px; line-height: 1.5; margin: 0; padding: 18px; } /* breathing room on wide desktops — content centered, never edge-to-edge */ @media (min-width: 1100px) { body { padding: 26px max(40px, calc((100vw - 1500px) / 2)); } } body.page-macro { padding-top: 26px; } a { text-decoration: none; } h1 { font-size: 20px; margin: 0 0 2px; } h2 { font-size: 15px; margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } h3 { font-size: 13px; margin: 14px 0 6px; color: var(--text); } .grid { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; } .sb-section-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 6px;border-top:1px solid var(--line);padding-top:10px} .sb-section-lbl:first-child{border-top:none;margin-top:0;padding-top:0} .span12 { grid-column: span 12; } .span8 { grid-column: span 8; } .span6 { grid-column: span 6; } .span4 { grid-column: span 4; } @media (max-width: 900px) { .span8, .span6, .span4 { grid-column: span 12; } } .badge { display: inline-block; padding: 3px 12px; border-radius: 14px; font-weight: 600; font-size: 13px; } /* quad badge keeps its solid vivid colour; ink + fill tuned per quad so this 13px size clears 4.5:1 in BOTH themes (hero badges pass at the 3:1 large-text bar elsewhere). Mid-luminance hues carry near-black ink (gold, green) or a slightly deepened fill (blue, light green); zh swaps q1/q3 hues at the token level, so the ink/fill choices swap with them in the zh rules below (kept after the light rules — the tie resolves in source order). */ .quad-Q3, .quad-Q4 { color: #fff; } .quad-Q1, .quad-Q2 { color: #1a1a1a; } .quad-Q1 { background: var(--q1); } .quad-Q2 { background: var(--q2); } .quad-Q3 { background: var(--q3); } .quad-Q4 { background: var(--q4); } html:not([data-theme="light"]) .quad-Q4 { background: color-mix(in srgb, var(--q4) 88%, var(--bg)); } html[data-theme="light"] .quad-Q1 { background: color-mix(in srgb, var(--q1) 90%, var(--text)); color: #fff; } html[data-lang="zh"] .quad-Q1 { background: var(--q1); color: #fff; } html[data-lang="zh"] .quad-Q3 { color: #1a1a1a; } html[data-theme="light"][data-lang="zh"] .quad-Q3 { background: color-mix(in srgb, var(--q3) 90%, var(--text)); color: #fff; } .kv { color: var(--muted); } .kv b { color: var(--text); font-weight: 600; } table { border-collapse: collapse; width: 100%; font-size: 13px; } th, td { text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-weight: 500; } th:first-child, td:first-child { text-align: left; } td.l, th.l { text-align: left; } .pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; } .alert { display: block; padding: 10px 13px; border-radius: 8px; margin: 8px 0; background: var(--panel2); border-left: 3px solid var(--muted); color: var(--text); transition: transform .12s, box-shadow .12s; } a.alert:hover { transform: translateX(2px); box-shadow: 0 3px 14px rgba(0,0,0,.22); } .alert-act { border-left-color: var(--act); } .alert-warn { border-left-color: var(--warn); } .alert-info { border-left-color: var(--info); } .alert-head { display: flex; align-items: baseline; gap: 8px; } .alert-ico { font-size: 15px; flex: none; line-height: 1; } .alert-head b { font-size: 13.5px; color: var(--text); } .alert-jump { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-link, var(--link)); flex: none; white-space: nowrap; } .alert-detail { margin: 6px 0 0; font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; } .alert-what { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); line-height: 1.5; } .alert-edge { margin: 5px 0 0; font-size: 12px; color: var(--text); line-height: 1.45; } .alert-edge b { color: var(--muted); font-weight: 600; } /* deep-linked panel flash: when an alert jumps here, pulse a glow once */ .panel { scroll-margin-top: 16px; } @keyframes panelflash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--link) 0%, transparent); } 12% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 60%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--link) 0%, transparent); } } .panel.flash { animation: panelflash 2.4s ease-out 1; border-color: var(--link); } /* Dislocation stress-filter CSS removed 2026-07-30 with the panel it styled — the readout now lives on macro_signals.html (its own scoped `.dislo-panel` block). Nothing on this page carries `dislo-strip` / `dlx-*` any more. */ .muted { color: var(--muted); } .chart { width: 100%; } .topline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } /* ============================================================================ RISK RADAR CARD (.rrx) — the one shared, redesigned alert used on the US Macro + US-Stocks pages AND the China / HK / Canada Market-State boards (the macros live in _risk_radar_card.html.j2). GLOBAL theme vars only + an inline --rc state accent, so it renders the same in the page-macro, page-stocks and china/hk/canada scopes. The escalating odds ramp replaces the old cramped "5d.. 10d.. 21d.." run. Included by dashboard.html.j2 (both modes) + _market_state.css.j2 (CN/HK/CA). ==== */ .rrx { --rc: var(--warn); display: grid; gap: 12px; margin: 12px 0 2px; padding: 15px 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--rc); font-size: 12.5px; line-height: 1.4; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 16px 32px -24px rgba(0,0,0,.4); } body.page-macro .ms-front > .rrx { margin: 0 0 14px; } /* grouping wrappers: inert everywhere by default (the card keeps its single-column stack on the China/HK/Canada/stocks placements); the macro front-page overrides these to display:flex to build the 2-column banner. */ .rrx > .rrx-main, .rrx > .rrx-side { display: contents; min-width: 0; } /* Perf: loud pulse = pseudo animating ONLY opacity (compositor-run); animating box-shadow on the card repainted it every frame (2026-07-21 mobile audit). mmGlowBreathe keyframes ship in theme.css (loaded on every placement). */ .rrx.rrx-loud { background: color-mix(in srgb, var(--rc) 5%, var(--panel)); position: relative; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 20%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--rc) 70%, transparent); } .rrx.rrx-loud::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--rc) 6%, transparent); opacity: 0; animation: mmGlowBreathe 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .rrx.rrx-loud::before { animation: none; opacity: 0; } .rrx.rrx-loud { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 30%, transparent); } } /* header */ .rrx .rrx-hd { display: flex; align-items: flex-start; gap: 10px; } .rrx .rrx-ic { font-size: 18px; line-height: 1.1; flex: none; } .rrx .rrx-id { min-width: 0; flex: 1; } .rrx .rrx-ttl { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-weight: 700; font-size: 13px; color: var(--text); } .rrx .rrx-badge { font-weight: 800; letter-spacing: .03em; color: var(--rc); font-size: 11.5px; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 5px; background: color-mix(in srgb, var(--rc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 38%, transparent); } .rrx .rrx-dom { color: var(--muted); font-size: 11.5px; margin-top: 2px; } .rrx .rrx-authority { font-size: 10.5px; line-height: 1.35; margin-top: 3px; font-weight: 600; } .rrx .rrx-authority.is-advisory { color: var(--muted); } .rrx .rrx-authority.is-binding { color: var(--rc); } .rrx .rrx-amp { color: var(--rc); font-weight: 600; font-size: 11px; margin-top: 3px; } .rrx .rrx-gross { flex: none; text-align: center; padding: 3px 11px; border-radius: 9px; background: color-mix(in srgb, var(--rc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 32%, transparent); } .rrx .rrx-gross .gv { display: block; font-weight: 800; font-size: 15px; color: var(--rc); font-variant-numeric: tabular-nums; line-height: 1.1; } .rrx .rrx-gross .gn { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } /* odds hero — flat on the card (the amber wash now lives on .rrx itself, not a nested box) */ .rrx .rrx-odds { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; } .rrx .rrx-odds-l { flex: 1 1 150px; display: flex; flex-direction: column; justify-content: center; } .rrx .rrx-cap { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); } .rrx .rrx-cap-sub { font-weight: 600; letter-spacing: .02em; opacity: .8; } .rrx .rrx-big { font-weight: 800; font-size: 40px; line-height: .95; color: var(--rc); margin: 4px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .rrx .rrx-big .pct { font-size: 22px; margin-left: 1px; } .rrx .rrx-big .rrx-hz { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 7px; letter-spacing: 0; } .rrx .rrx-vsn { font-size: 11.5px; color: var(--muted); } .rrx .rrx-vsn b { color: var(--text); font-variant-numeric: tabular-nums; } /* escalating ramp */ .rrx .rrx-ramp { flex: 1 1 240px; min-width: 0; max-width: 430px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; position: relative; padding-top: 18px; } .rrx .rrx-col { flex: 1 1 0; min-width: 0; max-width: 76px; display: flex; flex-direction: column; align-items: center; gap: 5px; } .rrx .rrx-v { font-size: 12.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .rrx .rrx-col.is-hd .rrx-v { color: var(--rc); } .rrx .rrx-tk { width: 100%; max-width: 54px; height: 64px; position: relative; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--line); } .rrx .rrx-norm { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px 2px 0 0; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--muted) 32%, transparent) 0 4px, transparent 4px 8px); border-top: 1px dashed color-mix(in srgb, var(--muted) 60%, transparent); } .rrx .rrx-fill { width: 100%; border-radius: 3px 3px 0 0; position: relative; z-index: 1; min-height: 6px; background: linear-gradient(180deg, var(--rc), color-mix(in srgb, var(--rc) 50%, transparent)); } .rrx .rrx-hl { font-size: 10.5px; font-weight: 600; color: var(--muted); } .rrx .rrx-col.is-hd .rrx-hl { color: var(--text); } .rrx .rrx-leg { position: absolute; top: 0; right: 2px; display: flex; align-items: center; gap: 4px; font-size: 9.5px; color: var(--muted); } .rrx .rrx-leg-n { width: 13px; border-top: 1px dashed color-mix(in srgb, var(--muted) 60%, transparent); } /* threat meters */ .rrx .rrx-threats { display: flex; flex-wrap: wrap; gap: 6px; } .rrx .rrx-th { --sb: var(--muted); display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px; font-size: 11px; background: var(--panel); border: 1px solid var(--line); } .rrx .rrx-th.dom { background: color-mix(in srgb, var(--sb) 10%, var(--panel)); border-color: color-mix(in srgb, var(--sb) 50%, var(--line)); } .rrx .rrx-th.dim { opacity: .58; } .rrx .rrx-th-n { color: var(--text); font-weight: 600; } .rrx .rrx-th.dom .rrx-th-n { color: var(--sb); } .rrx .rrx-meter { display: inline-flex; gap: 1.5px; } .rrx .rrx-meter i { width: 3px; height: 11px; border-radius: 1px; background: color-mix(in srgb, var(--muted) 28%, transparent); } .rrx .rrx-meter i.on { background: var(--sb); } .rrx .rrx-th-s { color: var(--text); font-weight: 800; font-size: 11.5px; font-variant-numeric: tabular-nums; } .rrx .rrx-tag { font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; } .rrx .rrx-ev { font-size: 11px; color: var(--muted); } .rrx .rrx-ev-k { font-weight: 700; color: var(--text); margin-right: 6px; } .rrx .rrx-ev-p { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } /* action */ .rrx .rrx-do { font-size: 12px; color: var(--text); padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--rc) 20%, var(--line)); } .rrx .rrx-do-k { font-weight: 800; color: var(--rc); text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; margin-right: 8px; } /* election-cycle context chip (US radar only; engine/election_cycle.py) */ /* compressed to <=2 dense lines so the cycle context never balloons the card */ .rrx .rrx-cyc { font-size: 10.5px; color: var(--muted); padding-top: 7px; margin-top: 2px; line-height: 1.4; border-top: 1px solid color-mix(in srgb, var(--rc) 16%, var(--line)); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 1px; } .rrx .rrx-cyc-k { font-weight: 700; color: var(--text); } .rrx .rrx-cyc-tag { color: var(--rc); font-weight: 700; font-size: 9.5px; } /* RC-R11 washout counter-read chip — a cyan-tinted variant of the modulator row. */ .rrx .rrx-cyc.rrx-washout { border-top-color: color-mix(in srgb, var(--cyan, #38bdf8) 22%, var(--line)); } .rrx .rrx-cyc.rrx-washout .rrx-cyc-k { color: var(--cyan, #38bdf8); } .rrx .rrx-cyc-sub { color: var(--muted); font-size: 10px; margin: 0; } .rrx .rrx-cyc-sec { color: var(--text); font-size: 10px; margin: 0; flex-basis: 100%; font-variant-numeric: tabular-nums; } /* self-audit line (international radars only) */ .rrx .rrx-audit { font-size: 10.5px; color: var(--muted); } .rrx .rrx-audit-k { font-weight: 700; color: var(--text); margin-right: 6px; } .rrx .rrx-audit b { color: var(--text); font-variant-numeric: tabular-nums; } /* track-record line — one muted glance-tier line surfacing the forward-ledger scorecard */ .rrx .rrx-trk { font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; line-height: 1.4; } /* de-escalation panel (engine/risk_radar_recovery.py) — "risk peaking / risk-off may be ending". Display-only; --rvc = green when receding, blue when merely peaking. Cool palette so it never reads like a green "all-clear" buy signal. */ .rrx .rrx-rec { --rvc: var(--info); display: flex; flex-direction: column; gap: 7px; padding: 9px 11px; border-radius: 9px; background: color-mix(in srgb, var(--rvc) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--rvc) 30%, var(--line)); border-left: 3px solid var(--rvc); } .rrx .rrx-rec.is-turn { background: color-mix(in srgb, var(--rvc) 13%, var(--panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rvc) 26%, transparent); } .rrx .rrx-rec-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .rrx .rrx-rec-ar { color: var(--rvc); font-weight: 800; font-size: 14px; line-height: 1; } .rrx .rrx-rec-ttl { font-weight: 700; font-size: 12px; color: var(--text); } .rrx .rrx-rec-tag { font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rvc); background: color-mix(in srgb, var(--rvc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--rvc) 42%, transparent); border-radius: 4px; padding: 0 5px; } .rrx .rrx-rec-mid { display: flex; align-items: center; gap: 9px; } .rrx .rrx-rec-spark { width: 84px; height: 24px; flex: none; background: color-mix(in srgb, var(--rvc) 5%, transparent); border-radius: 4px; } .rrx .rrx-rec-spark .pk { fill: var(--muted); } .rrx .rrx-rec-spark .lx { fill: var(--rvc); } .rrx .rrx-rec-sub { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 0; } .rrx .rrx-rec-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .rrx .rrx-rec-k { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .rrx .rrx-rec-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text); padding: 2px 7px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); } .rrx .rrx-rec-chip.fresh { color: var(--fresh-ok); font-weight: 600; border-color: color-mix(in srgb, var(--fresh-ok) 45%, var(--line)); background: color-mix(in srgb, var(--fresh-ok) 10%, var(--panel)); } .rrx .rrx-rec-cats.none { font-size: 10.5px; color: var(--muted); font-style: italic; } /* RRX2 WA: drivers line ("what faded / still warm") + muted "no signal" chip */ .rrx .rrx-rec-drv { font-size: 10px; color: var(--muted); line-height: 1.4; margin-top: -2px; } /* RLT-R5: measured-edge salience line — receipt/muted styling, demoted below catalyst chips */ .rrx .rrx-rec-sal { font-size: 10px; color: var(--muted); font-style: italic; line-height: 1.4; padding: 2px 0 0; border-top: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); margin-top: 1px; } .rrx .rrx-rec-chip.muted { color: var(--muted); font-style: italic; border-style: dashed; } .rrx .rrx-rec-do { font-size: 11px; color: var(--text); line-height: 1.4; } .rrx .rrx-rec-do-k { font-weight: 800; color: var(--rvc); text-transform: uppercase; letter-spacing: .06em; font-size: 9.5px; margin-right: 6px; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx { gap: 10px; padding: 13px 16px; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-odds { gap: 14px; align-items: center; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-big { font-size: 34px; margin: 2px 0 1px; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-big .pct { font-size: 19px; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-vsn { font-size: 11px; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-ramp { gap: 10px; padding-top: 12px; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-col { gap: 3px; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-v { font-size: 11.5px; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-tk { height: 44px; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-hl { font-size: 10px; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-audit, body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-th.dim, body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-rec-mid, body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-rec-do, body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-cyc-sub, body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-cyc-sec { display: none; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-rec { gap: 5px; padding: 7px 10px; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-cyc { padding-top: 5px; line-height: 1.25; } body:is(.page-macro, .page-china, .page-canada) { padding-top: 26px; } @media (max-width: 760px) { .rrx .rrx-odds { flex-direction: column; gap: 14px; } .rrx .rrx-odds-l { flex: 0 0 auto; } .rrx .rrx-ramp { flex: 0 0 auto; width: 100%; max-width: none; justify-content: space-around; } } /* phone: collapse to a SIMPLE, STRONG alert — headline + the one number that matters + the action. The ramp, the verbose amplification line and the non-dominant threat meters are desktop-only detail, not a mobile wall. */ @media (max-width: 560px) { .rrx { padding: 14px 15px; gap: 10px; } .rrx .rrx-amp, .rrx .rrx-ramp, .rrx .rrx-ev, .rrx .rrx-cyc, .rrx .rrx-audit { display: none; } .rrx .rrx-cgl { display: flex; } .rrx .rrx-big { font-size: 34px; } .rrx .rrx-threats { gap: 5px; } .rrx .rrx-th:not(.dom) { display: none; } } /* desktop: the consolidated 2-column board (header/odds/ramp | threats/evidence/ action/cycle) on EVERY market's .ms-front board, not just the US macro one — roughly halves the card height vs the single-column stack. The US dashboard keeps its own (higher-specificity, identical) copy; this is what reaches the China / HK / Canada boards that only load this shared partial. `.imd-radar` is the international dashboards' section wrapper (JP/KR/EZ/GB/IN, templates/international_macro.html.j2) — a full-page-width placement, so it takes the same wide board instead of stranding the ramp beside an empty middle. Inert on every page that has no such wrapper. */ @media (min-width: 1100px) { :is(.ms-front, .imd-radar) > .rrx { grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 22px; row-gap: 0; align-items: stretch; } :is(.ms-front, .imd-radar) > .rrx > .rrx-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; } :is(.ms-front, .imd-radar) > .rrx > .rrx-main .rrx-odds { flex: 1 1 auto; } :is(.ms-front, .imd-radar) > .rrx > .rrx-main .rrx-ramp { align-items: stretch; } :is(.ms-front, .imd-radar) > .rrx > .rrx-main .rrx-tk { height: auto; flex: 1 1 auto; min-height: 64px; } :is(.ms-front, .imd-radar) > .rrx > .rrx-side { display: flex; flex-direction: column; justify-content: center; gap: 9px; min-width: 0; padding-left: 22px; border-left: 1px solid color-mix(in srgb, var(--rc) 22%, var(--line)); } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx > .rrx-main .rrx-odds { flex: 0 0 auto; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx > .rrx-main .rrx-ramp { align-items: flex-end; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx > .rrx-main .rrx-tk { height: 44px; flex: 0 0 44px; min-height: 44px; } body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx > .rrx-side { gap: 7px; padding-left: 20px; } } /* ── AI BRIEF v2 (aib2-*) — shared token spine ──────────────────────────────── */ .aib2{ /* accent defaults to a stable Western blue (never red-flips in ZH); macro overrides to its green brief accent on its own dialog root. */ --aib2-acc:var(--info,#3b82f6); --aib2-mut:var(--muted,rgba(255,255,255,.55)); --aib2-surf:rgba(255,255,255,.035); --aib2-hair:rgba(255,255,255,.09); --aib2-track:rgba(255,255,255,.12); /* tone palette — engine-computed key_facts + stance tints. These are SEMANTIC quality tints (good/warn/bad), NOT price direction, so they use FIXED hexes and must NOT bind to --up/--down (which swap red<->green under html[data-lang="zh"]). This matches the sibling china chip idiom (.cnx-chip.turn = fixed green, .cnx-chip.hot = fixed red) — a "good" reading stays green in EN and ZH alike. */ /* Bound to the HEALTH tokens rather than fixed hexes: --ok/--act encode safety, never direction, so they already do not flip under 红涨绿跌 — which is exactly the property this block was hand-rolling. Binding also earns the light twins and the --ink-* text grades for free (the fixed pair measured 2.7:1 and 3.5:1 on a white panel). Same intent, one source of truth. */ --aib2-good:var(--ok,#45b873); --aib2-bad:var(--act,#e06464); --aib2-warn:var(--warn,#f59e0b); /* amber — does not flip in ZH */ --aib2-info:var(--info,#5b9bf0); /* blue — does not flip in ZH */ color:var(--text); } [data-theme="light"] .aib2{ --aib2-surf:rgba(0,0,0,.028);--aib2-hair:rgba(0,0,0,.09);--aib2-track:rgba(0,0,0,.12); --aib2-good:#1f9a55;--aib2-bad:#cf4040; /* light-theme fixed variants (match theme.css) */ } /* ── 1 · header strip ───────────────────────────────────────────────────────── */ .aib2-hdr{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;padding-bottom:15px; border-bottom:1px solid color-mix(in srgb,var(--aib2-acc) 16%,var(--aib2-hair));} .aib2-icon{width:38px;height:38px;flex-shrink:0;border-radius:11px; background:linear-gradient(150deg,color-mix(in srgb,var(--aib2-acc) 22%,transparent),color-mix(in srgb,var(--aib2-acc) 8%,transparent)); border:1px solid color-mix(in srgb,var(--aib2-acc) 30%,transparent); color:var(--aib2-acc);font-size:13px;font-weight:800;letter-spacing:.02em; display:flex;align-items:center;justify-content:center;} .aib2-hdr-meta{flex:1;min-width:0;} .aib2-hdr-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:4px;} .aib2-hdr-sub{display:flex;align-items:center;gap:9px;flex-wrap:wrap;} .aib2-hdr-date{font-size:12px;color:var(--aib2-mut);font-variant-numeric:tabular-nums;letter-spacing:.02em;} .aib2-cadence{font-size:10.5px;font-weight:650;letter-spacing:.02em; padding:2px 9px;border-radius:999px; background:color-mix(in srgb,var(--aib2-acc) 11%,transparent); border:1px solid color-mix(in srgb,var(--aib2-acc) 24%,transparent); color:color-mix(in srgb,var(--aib2-acc) 82%,var(--text));} .aib2-badge{margin-left:auto;align-self:center;font-size:10.5px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--aib2-acc);opacity:.85;text-align:right;line-height:1.45; white-space:normal;max-width:210px;flex-shrink:0;} [data-theme="light"] .aib2-badge{opacity:.95;} /* ── section spine — a labelled hairline naming each movement ────────────────── */ .aib2-sec{display:flex;align-items:center;gap:10px;margin:20px 0 11px;} .aib2-sec:first-child{margin-top:4px;} .aib2-sec::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,color-mix(in srgb,var(--aib2-acc) 26%,var(--aib2-hair)),transparent);} .aib2-sec-label{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:var(--aib2-mut);display:inline-flex;align-items:center;gap:7px;} .aib2-sec-label::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--aib2-acc);} /* ── 2 · the gist (glance tick-list) ────────────────────────────────────────── */ .aib2-gist{margin-bottom:16px;} .aib2-gist-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:9px;} .aib2-gist-list li{position:relative;padding-left:20px; font-size:14.5px;line-height:1.55;color:var(--text);font-weight:500;} .aib2-gist-list li::before{content:"";position:absolute;left:2px;top:.58em; width:7px;height:7px;border-radius:2px;transform:rotate(45deg); background:color-mix(in srgb,var(--aib2-acc) 62%,transparent);} .aib2-gist-list li b{font-weight:750;color:var(--text);} /* first gist item = the most important thing today — a touch louder */ .aib2-gist-list li:first-child{font-size:15px;font-weight:600;} /* STANCE PILL — the signature. Accent-tinted directive; the stance verb is bold. */ .aib2-stance{display:flex;align-items:flex-start;gap:11px; padding:13px 16px;border-radius:13px; background:color-mix(in srgb,var(--aib2-acc) 12%,transparent); border:1px solid color-mix(in srgb,var(--aib2-acc) 30%,transparent); border-left:4px solid color-mix(in srgb,var(--aib2-acc) 72%,transparent); box-shadow:0 1px 0 color-mix(in srgb,var(--aib2-acc) 8%,transparent);} [data-theme="light"] .aib2-stance{background:color-mix(in srgb,var(--aib2-acc) 9%,#fff);} .aib2-stance-mark{color:var(--aib2-acc);font-size:15px;line-height:1.4;flex-shrink:0;margin-top:1px;} .aib2-stance-body{font-size:15px;line-height:1.5;color:var(--text);font-weight:600;} .aib2-stance-body b{font-weight:800; /* the stance verb gets the accent so the eye lands on the directive first */ color:color-mix(in srgb,var(--aib2-acc) 55%,var(--text));} /* tone variants — protect/stand-aside lean amber; act leans green; ignore muted */ .aib2-stance--warn{--aib2-acc:var(--aib2-warn);} .aib2-stance--go{--aib2-acc:var(--aib2-good);} .aib2-stance--muted{--aib2-acc:var(--aib2-mut);} .aib2-stance--muted .aib2-stance-body b{color:var(--text);} /* v1 lead card (summary fallback when tldr absent) */ .aib2-lead{font-size:16.5px;font-weight:600;line-height:1.62;color:var(--text); padding:16px 18px;border-radius:13px;margin-bottom:16px; background:color-mix(in srgb,var(--aib2-acc) 7%,transparent); border:1px solid color-mix(in srgb,var(--aib2-acc) 18%,transparent); border-left:3px solid color-mix(in srgb,var(--aib2-acc) 60%,transparent);} [data-theme="light"] .aib2-lead{background:color-mix(in srgb,var(--aib2-acc) 6%,#fff);} /* ── 3 · key readings (key_facts chip rail) ─────────────────────────────────── */ .aib2-kf-rail{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;} .aib2-kf{display:inline-flex;align-items:baseline;gap:7px; padding:6px 12px;border-radius:999px;font-size:12.5px;line-height:1.3; background:var(--aib2-surf);border:1px solid var(--aib2-hair);max-width:100%;} .aib2-kf-k{color:var(--aib2-mut);font-weight:600;white-space:nowrap;} .aib2-kf-v{color:var(--text);font-weight:700;min-width:0;} /* tone tints — the value carries the read; the chip border/wash confirms it */ .aib2-kf--good{background:color-mix(in srgb,var(--aib2-good) 10%,var(--aib2-surf)); border-color:color-mix(in srgb,var(--aib2-good) 34%,transparent);} .aib2-kf--good .aib2-kf-v{color:color-mix(in srgb,var(--aib2-good) 72%,var(--text));} .aib2-kf--warn{background:color-mix(in srgb,var(--aib2-warn) 10%,var(--aib2-surf)); border-color:color-mix(in srgb,var(--aib2-warn) 34%,transparent);} .aib2-kf--warn .aib2-kf-v{color:color-mix(in srgb,var(--aib2-warn) 74%,var(--text));} .aib2-kf--bad{background:color-mix(in srgb,var(--aib2-bad) 11%,var(--aib2-surf)); border-color:color-mix(in srgb,var(--aib2-bad) 36%,transparent);} .aib2-kf--bad .aib2-kf-v{color:color-mix(in srgb,var(--aib2-bad) 74%,var(--text));} .aib2-kf--info{background:color-mix(in srgb,var(--aib2-info) 10%,var(--aib2-surf)); border-color:color-mix(in srgb,var(--aib2-info) 32%,transparent);} .aib2-kf--info .aib2-kf-v{color:color-mix(in srgb,var(--aib2-info) 78%,var(--text));} .aib2-kf--neutral{/* uses base surf/hair; value stays --text */} /* ── 4 · confidence meter ────────────────────────────────────────────────────── */ .aib2-conf{display:flex;align-items:center;gap:13px;margin-bottom:4px; padding:11px 14px;background:var(--aib2-surf);border:1px solid var(--aib2-hair);border-radius:11px;} .aib2-conf-bar{display:flex;gap:4px;align-items:center;padding:4px;border-radius:7px;background:var(--aib2-track);cursor:help;} .aib2-conf-seg{width:26px;height:6px;border-radius:3px; background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 8%,transparent);transition:background .2s;} .aib2-conf-seg.on{background:var(--aib2-acc);box-shadow:none;} .aib2-conf-label{font-size:12.5px;font-weight:650;color:var(--text);} .aib2-conf-asof{font-size:11.5px;color:var(--aib2-mut);margin-left:auto;font-variant-numeric:tabular-nums;} /* ── 5 · the full read (regime prose) ───────────────────────────────────────── */ .aib2-regime{font-size:14px;color:var(--text);line-height:1.72;margin-bottom:16px;opacity:.94;} /* ── 6/7/8/9 · cards + grid ─────────────────────────────────────────────────── */ .aib2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:13px;margin-bottom:12px;} @media(max-width:560px){.aib2-grid{grid-template-columns:1fr;}} .aib2-card{padding:14px 16px 15px;border-radius:12px;background:var(--aib2-surf);border:1px solid var(--aib2-hair);} .aib2-card--full{margin-bottom:12px;} .aib2-card--conflicts{border-left:3px solid var(--aib2-warn);} .aib2-card--tx{border-left:3px solid var(--aib2-info);} .aib2-card--playbook{border-left:3px solid var(--aib2-acc);} .aib2-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--aib2-mut);margin-bottom:9px;display:flex;align-items:center;gap:6px;} .aib2-card--conflicts .aib2-eyebrow{color:color-mix(in srgb,var(--aib2-warn) 78%,var(--aib2-mut));} .aib2-card--tx .aib2-eyebrow{color:color-mix(in srgb,var(--aib2-info) 74%,var(--aib2-mut));} .aib2-card--playbook .aib2-eyebrow{color:color-mix(in srgb,var(--aib2-acc) 74%,var(--aib2-mut));} .aib2-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;} .aib2-items li{position:relative;padding-left:14px;font-size:13px;color:var(--text);line-height:1.6;} .aib2-items li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%; background:color-mix(in srgb,currentColor 32%,transparent);} .aib2-card--conflicts .aib2-items li::before{background:color-mix(in srgb,var(--aib2-warn) 55%,transparent);} .aib2-card--tx .aib2-items li::before{background:color-mix(in srgb,var(--aib2-info) 55%,transparent);} .aib2-items li b,.aib2-prose b,.aib2-watch-body b{font-weight:700;color:var(--text);} .aib2-prose{font-size:13.5px;color:var(--text);line-height:1.72;} /* what to watch */ .aib2-watch{list-style:none;margin:0;padding:0;} .aib2-watch-row{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text);line-height:1.6;padding:5px 0;} .aib2-watch-row + .aib2-watch-row{border-top:1px solid var(--aib2-hair);} .aib2-watch-mark{color:var(--aib2-acc);flex-shrink:0;margin-top:1px;font-size:13px;line-height:1.5;} /* upcoming catalysts */ .aib2-cat-rail{display:flex;flex-wrap:wrap;gap:8px;} .aib2-cat{display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;border-radius:999px; font-size:12.5px;font-weight:600;background:var(--aib2-surf);border:1px solid var(--aib2-hair);color:var(--text);} .aib2-cat-d{color:var(--aib2-mut);font-variant-numeric:tabular-nums;font-weight:700;} .aib2-cat-read{font-size:12.5px;color:var(--aib2-mut);line-height:1.55;margin-top:11px;} /* ── 10 · degraded notice ────────────────────────────────────────────────────── */ .aib2-degraded{font-size:12px;color:var(--aib2-mut);margin:8px 0 4px;padding:9px 13px;border-radius:9px; background:color-mix(in srgb,var(--aib2-warn) 9%,transparent); border:1px solid color-mix(in srgb,var(--aib2-warn) 22%,transparent); border-left:3px solid var(--aib2-warn);} /* ── responsive — 390px bleed guard ─────────────────────────────────────────── */ @media(max-width:560px){ .aib2-hdr{flex-wrap:wrap;} /* the house-law badge takes its own wrapped row (aligned under the title, past the 38px icon + 14px gap) — without a flex-basis it stays on row 1 and clips at the panel edge on narrow phones */ .aib2-badge{flex-basis:calc(100% - 52px);margin-left:52px;text-align:left;max-width:none;align-self:flex-start;} .aib2-conf{flex-wrap:wrap;gap:9px;} .aib2-conf-asof{margin-left:0;width:100%;} .aib2-kf{width:100%;justify-content:space-between;} } /* help-tip-framework:BEGIN — legacy help() "?" hover framework. Byte-identical twin in templates/dashboard.html.j2 AND templates/_us_act_now_board.html.j2 (the shared board include ships it to hosts that have no page-level copy — sector_central leaked the whole tip sentence inline without it, 2026-08-06). Deliberately NOT in theme.css: editing theme.css re-stamps ~176 pages, and its span.help glyph metrics must keep outranking these bare-.help rules. Keep both copies in step — pinned by tests/test_us_act_now.py::test_help_tip_framework_is_byte_identical_in_both_copies. */ .help { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font-size: 10px; font-weight: 600; cursor: help; position: relative; vertical-align: middle; margin-left: 5px; flex: none; } .help .tip { display: none; position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%); width: 330px; background: var(--panel); border: 1px solid var(--line); padding: 10px 13px; border-radius: 8px; z-index: 60; font-size: 12px; line-height: 1.5; color: var(--text); text-align: left; font-weight: 400; text-transform: none; letter-spacing: normal; box-shadow: var(--popover-shadow); pointer-events: auto; cursor: auto; white-space: normal; max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; } /* invisible hover pad across the gap between the ? icon and the tip box — without it the :hover chain breaks mid-travel and the tip vanishes before the cursor can reach (and scroll) it. Lives on .help, not .tip: the tip is a scroll container (overflow-y:auto), which clips its own pseudos. */ .help:hover::before { content: ''; position: absolute; bottom: 100%; left: -30px; right: -30px; height: 10px; } .help:hover .tip, .help.tip-open .tip { display: block; } th .help .tip, .help.below .tip { bottom: auto; top: 140%; } th .help:hover::before, .help.below:hover::before { bottom: auto; top: 100%; } /* keep tooltips on-screen near the right/left viewport edges */ .help.edge-right .tip { left: auto; right: 0; transform: none; } .help.edge-left .tip { left: 0; right: auto; transform: none; } .help .tip.tip-wide { width: min(430px, calc(100vw - 32px)); } @media (max-width: 640px) { .help .tip.tip-wide { width: calc(100vw - 28px); font-size: 11.5px; line-height: 1.45; } } /* help-tip-framework:END */ .tip-map { width: 360px !important; } .tip-seas { width: 350px !important; box-sizing: border-box; padding: 11px 14px; } .tip.tip-seas table { table-layout: fixed; width: 100%; margin: 0; } .tip.tip-seas th, .tip.tip-seas td { padding: 2px 5px; font-size: 11px; white-space: nowrap; } /* structured tooltip building blocks */ .tip table { width: 100%; margin: 6px 0 2px; font-size: 11.5px; } .tip th, .tip td { padding: 3px 6px; border-bottom: 1px solid var(--line); } .tip .lad { display: block; padding: 3px 8px; border-radius: 5px; margin: 3px 0; font-size: 11.5px; } .tip .scale { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 6px 0 2px; font-size: 9.5px; font-weight: 700; } .tip .scale span { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; } .tip .sl { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-bottom: 4px; } .qgrid { display: grid; grid-template-columns: 58px 1fr 1fr; gap: 4px; margin: 8px 0; } .qax { color: var(--muted); font-size: 10.5px; align-self: center; text-align: center; } .qcell { border-radius: 6px; padding: 7px 6px; text-align: center; color: #fff; font-weight: 700; font-size: 11px; line-height: 1.25; } .qcell small { font-weight: 400; opacity: .85; } .qcell.qcur { outline: 2px solid #fff; } .dial { display: flex; gap: 4px; margin: 8px 0 12px; } .dial > span { flex: 1; text-align: center; padding: 6px 2px; border-radius: 6px; background: var(--panel2); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; } .dial .active-DEFENSIVE { background: var(--act); color: #fff; } .dial .active-CAREFUL { background: var(--orange); color: #fff; } .dial .active-NEUTRAL { background: var(--muted); color: #fff; } .dial .active-CONSTRUCTIVE { background: var(--up); color: #fff; } .dial .active-AGGRESSIVE { background: var(--ok); color: #fff; } @media (max-width: 520px) { .dial > span { font-size: 8.5px; padding: 5px 1px; } } .reason { margin: 7px 0; padding-left: 24px; position: relative; line-height: 1.4; } /* +/−/i markers — own class (rsig) so they don't collide with the signal-atom .sig card (grid + ::before rail), which was hijacking them into a quarter-filled look. */ .reason b.rsig { position: absolute; left: 0; top: 1px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 11px; font-weight: 800; line-height: 1; } .reason b.rsig-p { color: var(--ink-up, var(--up)); background: color-mix(in srgb, var(--up) 16%, transparent); } .reason b.rsig-m { color: var(--ink-down, var(--down)); background: color-mix(in srgb, var(--down) 16%, transparent); } .reason b.rsig-i { color: var(--ink-2, var(--muted)); background: color-mix(in srgb, var(--ink-2, var(--muted)) 14%, transparent); } /* lead the bullet with the read; demote the parenthetical stats so it scans */ .reason .reason-main { font-weight: 600; color: var(--ink-1, var(--text)); } .reason .reason-det { color: var(--ink-3, var(--muted)); font-size: .92em; } .card { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 6px 0; } .card b.tk { font-size: 14px; } .calltag { float: right; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 9px; } /* .tag-lead/avoid/watch and .chip-pos/neg colours come from theme.css */ .chip { display: inline-block; padding: 2px 9px; margin: 2px 3px 2px 0; border-radius: 10px; font-size: 12px; border: 1px solid var(--line); } /* action board */ .actiongrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; } @media (max-width: 1100px) { .actiongrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .actiongrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .actiongrid { grid-template-columns: minmax(0, 1fr); } } /* V2 action board — lane column card, restyled to the china anv2 lane idiom (operator request 2026-07-11): panel card, 14px radius, 3px accent bar inside the header, colored uppercase lane titles, chips-below-name rows. Class names unchanged — fold JS (.actcol/.actbody/.act-fold) and the View-all modal (.acth-name/.acth-sub) query them. */ .actcol { background: var(--panel); border: 1px solid var(--line); min-width: 0; border-radius: 14px; padding: 0; overflow: hidden; display: flex; flex-direction: column; --act-accent: var(--muted); } /* --act-accent stays fill-grade for the lane bar; --act-accent-ink is the text-grade twin for .acth-name (violet measured 4.19:1 dark / 3.89 light). */ .act-buy { --act-accent: var(--up); --act-accent-ink: var(--ink-up, var(--up)); } .act-soon { --act-accent: var(--info); --act-accent-ink: var(--ink-info, var(--info)); } .act-run { --act-accent: #8b5cf6; --act-accent-ink: color-mix(in srgb, #8b5cf6 80%, var(--text)); } /* neutral violet — NOT green/buy */ .act-trim { --act-accent: var(--warn); --act-accent-ink: var(--ink-warn, var(--warn)); } .act-hold { --act-accent: var(--muted); --act-accent-ink: var(--muted); } html[data-theme="light"] .act-run { --act-accent-ink: color-mix(in srgb, #8b5cf6 72%, var(--text)); } /* ── Monoline marks (doctrine §5.8 — emoji are not UI icons) ────────────── Lane heads, row marks, the legend and the hover-card mark all draw from templates/_icons.html.j2 (24×24, stroke=currentColor), so each mark inherits its context's ink: the lane icons ride --act-accent-ink, which is what carries forward the per-lane colour identity the coloured dots used to supply — and the glyph now says what the lane DOES, which a coloured dot never did. The bottoming-watch strip (_us_bottoming_watch.html.j2, the board's own watch surface) reuses .acth-icon / .ai-bdg for its two marks instead of shipping a third icon rule, so it is sized from here. NO bare `.ic-svg {}` rule here on purpose: sector_central.html.j2 scopes its own copy under #si-confluence, and a global rule shipped from a panel would fight its host. Explicit selectors only, one size per context. .row-pop-mark is deliberately NOT scoped to #action-board — theme.js clones the hover card onto document.body, so an id-scoped rule would style the hidden source and miss the card the reader actually sees. */ .ai-bdg .ic-svg, .acth-icon .ic-svg, .row-pop-mark .ic-svg, .ab-shock-ic .ic-svg, #action-board .help .tip .ic-svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ai-bdg .ic-svg { width: 13px; height: 13px; display: block; } .acth-icon .ic-svg { width: 14px; height: 14px; display: block; } .row-pop-mark .ic-svg { width: 17px; height: 17px; display: block; } /* inline runs — a mark inside a sentence keeps the text baseline, never block */ .ab-shock-ic { color: var(--ink-warn, var(--warn)); } .ab-shock-ic .ic-svg { width: 14px; height: 14px; display: inline-block; vertical-align: -.17em; } #action-board .help .tip .ic-svg { width: 12px; height: 12px; display: inline-block; vertical-align: -.14em; } /* Lane header — accent top bar via ::before (anv2-lane-hd idiom) */ .acth { padding: 10px 13px 8px; border-bottom: 1px solid var(--line); position: relative; } .acth::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 14px 14px 0 0; background: var(--act-accent); } .acth-title-row { display: flex; align-items: center; gap: 5px; } .acth-icon { display: flex; line-height: 1; flex: none; color: var(--act-accent-ink, var(--act-accent)); } .acth-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--act-accent-ink, var(--act-accent)); flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acth-count { flex: none; font-size: 11px; font-weight: 400; color: var(--muted); } .acth-count::before { content: "("; } .acth-count::after { content: ")"; } .acth-sub { font-size: 10.5px; color: var(--muted); line-height: 1.4; margin-top: 3px; } /* Lane body list */ .actbody { padding: 6px 0; flex: 1; } /* V2 row — anv2-row anatomy: name row on top, chips row below, stat line last */ .actitem { display: block; padding: 7px 13px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); font-size: 13px; min-width: 0; overflow: hidden; text-decoration: none; color: inherit; cursor: pointer; transition: background 0.1s; position: relative; } .actitem:last-child { border-bottom: none; } .actitem:hover, .actitem:focus { background: color-mix(in srgb, var(--panel2) 55%, transparent); outline: none; } .actitem.hovered { background: color-mix(in srgb, var(--panel2) 80%, transparent); } .act-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; } /* Row kind mark. --muted, not text-at-85%: it is a type label (fund vs basket), never a signal, so it must stay subordinate to the name in BOTH themes — near-black at .85 on white is a heavier mark than the same rule on dark. */ .ai-bdg { display: flex; flex: none; color: var(--muted); cursor: default; } .act-row-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* theme composite score — anv2-score idiom (big number, right of the name) */ .act-row-score { flex: none; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .act-score-hi { color: var(--ink-up, var(--up)); } .act-score-mid { color: var(--ink-warn, var(--warn)); } .act-score-lo { color: var(--ink-down, var(--down)); } /* V2 stat line — last line of the row; muted label, china-anv2-style colored value (var(--up)/var(--down) so the zh red/green flip rides along); hidden on mobile */ .act-row-stat { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.35; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .act-row-stat .up { color: var(--ink-up, var(--up)); font-weight: 600; } .act-row-stat .dn { color: var(--ink-down, var(--down)); font-weight: 600; } @media (max-width: 560px) { .act-row-stat { display: none; } } .act-row-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 4px; } /* V2 action chip — anv2-chip idiom (uppercase 10px, 4px radius) */ .ab-chip { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; line-height: 15px; white-space: nowrap; flex: none; } .ab-chip--warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--ink-warn, var(--warn)); border: 1px solid color-mix(in srgb, var(--ink-warn, var(--warn)) 28%, transparent); } .ab-chip--pos { background: color-mix(in srgb, var(--up) 14%, transparent); color: var(--ink-up, var(--up)); border: 1px solid color-mix(in srgb, var(--ink-up, var(--up)) 28%, transparent); } .ab-chip--neg { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--ink-down, var(--down)); border: 1px solid color-mix(in srgb, var(--ink-down, var(--down)) 28%, transparent); } .ab-chip--info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--ink-info, var(--info)); border: 1px solid color-mix(in srgb, var(--ink-info, var(--info)) 28%, transparent); } .ab-chip--muted { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--muted); border: 1px solid color-mix(in srgb, var(--muted) 22%, transparent); } /* gate-override ✓ pill */ .ab-chip--gate { background: color-mix(in srgb, var(--up) 10%, transparent); color: var(--ink-up, var(--up)); border: 1px solid color-mix(in srgb, var(--up) 22%, transparent); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; line-height: 15px; flex: none; cursor: help; } /* theme item star/check/lens glyphs */ .ai-book { flex: none; margin-left: 4px; font-size: 10px; font-weight: 800; cursor: help; color: var(--ink-up, var(--up)); white-space: nowrap; } .ai-val { flex: none; margin-left: 4px; font-size: 10.5px; font-weight: 800; color: var(--ink-up, var(--up)); cursor: help; } .ai-lens { flex: none; margin-left: 4px; font-size: 11px; color: var(--muted); cursor: help; } /* theme item name */ .actitem.ai-theme .act-row-name { font-weight: 700; } /* legacy chips kept for non-board uses */ .ew-chip { display: none; } /* hidden in V2 board; moved to popover */ .acttag, .actage, .acteta, .eqmini { display: none; } /* moved to popover in V2 */ /* action-board rows opt in to the shared row-pop engine via [data-rpop] */ /* .notable is its own .panel since 2026-07-11 — panel chrome carries the separation */ .sm { font-size: 12px; margin: 4px 0; } /* keep legacy references alive for non-board code */ .actitem b { color: var(--text); } .gauge { position: relative; height: 10px; border-radius: 5px; margin: 6px 0 2px; background: linear-gradient(90deg, var(--down) 0%, var(--g-mid) 50%, var(--up) 100%); opacity:.9; } .gauge i { position: absolute; top: -4px; width: 4px; height: 18px; background: var(--text); border-radius: 2px; box-shadow: 0 0 0 1px var(--panel); } /* crowding gauge: both ENDS are danger zones */ .pgauge { position: relative; height: 9px; border-radius: 5px; margin: 4px 0 2px; background: linear-gradient(90deg, var(--g-cold) 0%, var(--g-mid) 28%, var(--g-mid) 72%, var(--down) 100%); opacity: .9; min-width: 130px; } .pgauge i { position: absolute; top: -3px; width: 4px; height: 15px; background: var(--text); border-radius: 2px; box-shadow: 0 0 0 1px var(--panel); } .pends { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); } .plabel { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; background: var(--panel2); } .plabel-hot { color: var(--ink-down, var(--down)); } .plabel-cold { color: var(--ink-info, var(--info)); } .plabel-norm { color: var(--muted); } /* regime lifespan bar */ .lifebar { position: relative; height: 16px; border-radius: 8px; overflow: hidden; background: var(--panel2); margin: 8px 0 4px; } .lifebar .zone { position: absolute; top: 0; bottom: 0; } .lifebar .marker { position: absolute; top: -2px; bottom: -2px; width: 4px; background: var(--text); border-radius: 2px; z-index: 5; box-shadow: 0 0 0 1px var(--panel); } .lifelabels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); } /* regime stance verdict: let-winners-run … look-for-a-change */ .stance { margin: 12px 0 2px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); border-left: 3px solid var(--muted); background: var(--panel2); } .stance-run { border-left-color: var(--up); background: color-mix(in srgb, var(--up) 7%, var(--panel2)); } .stance-hold { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--panel2)); } .stance-shift { border-left-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, var(--panel2)); } .stance-reset { border-left-color: var(--info); background: color-mix(in srgb, var(--info) 9%, var(--panel2)); } .stance-hd { display: flex; align-items: center; gap: 9px; } .stance-ico { font-size: 17px; line-height: 1; flex: none; } .stance-v { font-size: 15px; font-weight: 800; letter-spacing: .01em; } .stance-sub { font-size: 12px; color: var(--muted); margin-top: 1px; } .stance-track { position: relative; height: 9px; border-radius: 5px; margin: 10px 0 0; background: linear-gradient(90deg, var(--up) 0%, var(--warn) 52%, var(--down) 100%); opacity: .9; } .stance-track i { position: absolute; top: -4px; width: 4px; height: 17px; background: var(--text); border-radius: 2px; box-shadow: 0 0 0 2px var(--panel); } .stance-ends { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 4px; } .stance-meta { font-size: 11px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; } /* next-regime probability bars */ .prob { display: flex; align-items: center; gap: 10px; margin: 7px 0; } .prob .nm { width: 110px; font-weight: 600; font-size: 13px; flex: none; } .prob .bar { flex: 1; height: 14px; background: var(--panel2); border-radius: 7px; overflow: hidden; } .prob .bar i { display: block; height: 100%; border-radius: 7px; } .prob .pc { width: 44px; text-align: right; font-weight: 600; flex: none; } .legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 12px; } .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; } details.howto { margin-top: 10px; } details.howto summary { cursor: pointer; color: var(--ink-link, var(--link)); font-size: 13px; } details.howto div { background: var(--panel2); border-radius: 8px; padding: 12px 14px; margin-top: 8px; font-size: 13px; line-height: 1.6; } ul.compact { margin: 4px 0; padding-left: 18px; } ul.compact li { margin: 3px 0; } /* ---- Regime Time Machine -------------------------------------------------- */ #time-machine .tm-wrap { position: relative; margin: 4px 0 2px; } .tm-canvas { display: block; width: 100%; height: 56px; cursor: ew-resize; border-radius: 8px; touch-action: none; } .tm-range { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; margin: 2px 0 0; cursor: ew-resize; } .tm-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line); } .tm-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); } .tm-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--text); border: 2px solid var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,.35); } .tm-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 2px solid var(--panel); } .tm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 8px 0 12px; } .tm-presets { display: inline-flex; flex-wrap: wrap; gap: 6px; } /* tm-btn — gbtn glass recipe (macro sweep 2026-07) */ .tm-btn { font: inherit; font-size: 12px; font-weight: 600; color: var(--text); background: var(--gbtn-bg); border: 1px solid var(--gbtn-brd); border-radius: 8px; -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); box-shadow: inset 0 1px 0 var(--gbtn-sheen); padding: 5px 11px; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .16s ease, box-shadow .25s ease; } .tm-btn:hover { border-color: var(--gbtn-brd-hover); background: var(--gbtn-bg-hover); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--gbtn-sheen), 0 8px 20px -10px rgba(3,7,18,.55); } .tm-btn:active { transform: translateY(0) scale(.985); box-shadow: inset 0 1px 0 var(--gbtn-sheen); } @media (prefers-reduced-motion: reduce){ .tm-btn, .tm-btn:hover, .tm-btn:active { transform: none; } } .tm-play { display: inline-flex; align-items: center; gap: 7px; } .tm-play-ico { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--text); transition: none; } .tm-play.is-playing .tm-play-ico { width: 9px; height: 11px; border: none; border-left: 3px solid var(--text); border-right: 3px solid var(--text); } .tm-readout { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; } .tm-asof { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; } .tm-date { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; } .tm-state-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 10px; } .tm-state-tag.is-live { color: color-mix(in srgb, var(--up) 85%, var(--text)); background: color-mix(in srgb, var(--up) 16%, var(--panel)); } .tm-state-tag.is-hist { color: var(--muted); background: color-mix(in srgb, var(--muted) 16%, var(--panel)); } .tm-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .tm-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 12px 0 4px; } @media (max-width: 640px) { .tm-gauges { grid-template-columns: 1fr; } } .tm-glabel { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; margin-bottom: 2px; font-variant-numeric: tabular-nums; } .tm-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .tm-flag { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 10px; background: color-mix(in srgb, var(--c) 16%, var(--panel)); color: color-mix(in srgb, var(--c) 82%, var(--text)); } .tm-nowarn { font-size: 12px; color: var(--muted); } /* ---- Sortable / filterable data tables ------------------------------------ */ table.sortable th.th-sort { cursor: pointer; user-select: none; } table.sortable th.th-sort:hover { color: var(--text); } table.sortable th .sarrow { font-size: 9px; opacity: .32; margin-left: 3px; font-weight: 700; } table.sortable th.sorted { color: var(--text); } table.sortable th.sorted .sarrow { opacity: .9; color: var(--ink-link, var(--link)); } /* .tbl-filter (live table filter) is styled centrally in theme.css */ /* ---- hover-to-chart: reveal a definition + mini history on metric hover --- */ .hovchart { position: relative; cursor: help; border-bottom: 1px dotted var(--muted); display: inline-block; } .hovchart > .tip { display: none; position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%); width: 280px; background: var(--panel); border: 1px solid var(--line); padding: 10px 12px; border-radius: 8px; z-index: 60; font-size: 12px; line-height: 1.45; color: var(--text); text-align: left; font-weight: 400; text-transform: none; letter-spacing: normal; box-shadow: var(--popover-shadow); pointer-events: none; white-space: normal; } .hovchart:hover > .tip { display: block; } .hovchart.below > .tip { bottom: auto; top: 150%; } .hovchart.edge-right > .tip { left: auto; right: 0; transform: none; } .hovchart.edge-left > .tip { left: 0; right: auto; transform: none; } .nch { display: block; width: 100%; margin: 7px 0 5px; border-radius: 5px; background: var(--panel2); } .nph { font-weight: 700; font-size: 12px; } .npstat { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; } /* directional trend words next to nowcast metrics */ .tw { font-size: 11.5px; font-weight: 600; white-space: nowrap; } .tw-good { color: var(--ink-up, var(--up)); } .tw-bad { color: var(--ink-orange, var(--orange)); } .tw-flat { color: var(--muted); } /* ---- collapsed jargon: a compact "details ▾" reveal inside a card --------- */ .jarg { margin-top: 7px; font-size: 11.5px; } .jarg > summary { cursor: pointer; color: var(--ink-link, var(--link)); list-style: none; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .jarg > summary::-webkit-details-marker { display: none; } .jarg > summary::after { content: "▾"; font-size: 9px; opacity: .7; } .jarg[open] > summary::after { content: "▴"; } .jarg .jbody { margin-top: 6px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; } .jarg .jrow { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; } .jarg .jrow:last-child { border-bottom: none; } .jarg .jrow .jk { flex: none; width: 96px; color: var(--muted); } .jarg .jrow .jv { flex: 1; } .jarg .jrow .jn { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; } /* ---- structured tooltip visuals (signal checklist, factor bars, odds) ----- */ .sigtab { width: 100%; margin: 7px 0 3px; border-collapse: collapse; } .sigtab td { padding: 3px 5px; border-bottom: 1px solid var(--line); font-size: 11px; vertical-align: middle; } .sigtab td:last-child { text-align: right; white-space: nowrap; } .sig-on { color: var(--ink-up, var(--up)); font-weight: 700; } .sig-off { color: var(--muted); } .fbar { display: grid; grid-template-columns: 74px 1fr 42px; align-items: center; gap: 7px; margin: 4px 0; font-size: 11px; } .fbar .ft { color: var(--text); } .fbar .fn { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; } .fbar .fb { position: relative; height: 8px; background: var(--panel2); border-radius: 5px; overflow: hidden; } .fbar .fb i { position: absolute; top: 0; bottom: 0; left: 50%; } .oddsbar { display: flex; height: 26px; border-radius: 7px; overflow: hidden; margin: 8px 0 3px; font-size: 11px; font-weight: 700; } .oddsbar .ob-hit { background: color-mix(in srgb, var(--up) 75%, var(--panel)); color: #fff; display: flex; align-items: center; justify-content: center; } .oddsbar .ob-miss { background: var(--panel2); color: var(--muted); display: flex; align-items: center; justify-content: center; } .ocmp { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; } .ocmp .oc-now { color: var(--ink-up, var(--up)); font-weight: 700; } .ocmp .oc-alt { color: var(--muted); font-weight: 700; } /* ---- standout-stock cards ------------------------------------------------- */ .nbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; margin-top: 11px; } /* mobile: pack the standout cards 2-up so the list doesn't scroll on and on (paired with the 3-row cap via data-showmore-rows + theme.js). Cards are already overflow-guarded + compact. */ @media (max-width:680px){ .nbgrid[data-showmore-rows]{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .nbgrid[data-showmore-rows] .nb-tk{ font-size:13px; } .nbgrid[data-showmore-rows] .nb-px{ font-size:12px; } /* 2-up columns are ~150px: row 1 is just ticker · sector · price. Cap the sector so it fits on one line beside them; flex-wrap stays as a last-resort guard against clipping. The name lives on the sub-line and shrinks to an ellipsis there. */ .nbgrid[data-showmore-rows] .nb-top{ flex-wrap:wrap; row-gap:2px; } .nbgrid[data-showmore-rows] .nb-nm{ flex:1 1 0; } .nbgrid[data-showmore-rows] .nb-sec{ max-width:7.5em; } /* 2-up columns are ~150px: the conviction row (score + edge%ile + verdict) would otherwise crush the verdict into a ~30px column that wraps every word mid-character. Let the row wrap and drop the verdict to its own full-width line (readable whole words). */ .nbgrid[data-showmore-rows] .nb-conv{ flex-wrap:wrap; row-gap:2px; } .nbgrid[data-showmore-rows] .nb-verdict{ flex:1 0 100%; overflow-wrap:normal; word-break:normal; } .nbgrid[data-showmore-rows] .nb-edge-pct{ font-size:8.5px; } } .nbcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px 10px; position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; transition: transform .12s, box-shadow .12s, border-color .12s; color: var(--text); cursor: pointer; } /* every flex/grid child may shrink below content width — kills horizontal bleed */ .nbcard > * { min-width: 0; max-width: 100%; } .nbcard:hover { transform: translateY(-2px); box-shadow: 0 5px 18px rgba(0,0,0,.22); border-color: var(--link); } /* triage accent ring: cards with strong edge + entry open get a subtle highlight (no re-ordering) */ .nbcard.nb-triage { box-shadow: 0 0 0 2px color-mix(in srgb, var(--up) 55%, transparent), 0 2px 8px rgba(0,0,0,.15); } /* head-link: the anchor inside the div card; wraps nb-top so Terminal interceptor still fires */ .nb-head-link { display: block; text-decoration: none; color: inherit; } .nb-head-link:hover { text-decoration: none; } /* lane sub-heading separators (additive) — LEGACY path, kept byte-identical: an artifact with no row.stage still renders the old bottoming/continuation groups. */ .nb-lane-hd { grid-column: 1 / -1; margin: 6px 0 2px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 3px 6px; border-bottom: 1px solid var(--line); } /* ═══ PROPHET BOARD PRIORITY ENGINE — US board display layer (2026-08-02) ═══ research/PROPHET_BOARD_PRIORITY_ENGINE_MASTERPLAN_BY_FABLE.md §0 G0.1/G0.4–G0.6. Everything below renders ONLY when the artifact carries row.stage; the legacy lane-partition path above is untouched so an old artifact renders unchanged. ── stage-bucket headings ────────────────────────────────────────────────── These replaced the lane headings as the board's PRIMARY structure, so they get more presence than .nb-lane-hd had: a coloured left bar plus a tint that fades out to the right, instead of a hairline underline. The bar is the non-verbal encoding of the bucket (canonized §7 pattern) and the label is the stance — "Live now", "Ran — don't chase" are complete instructions on their own; the lighter tail sentence is the ≤14-word Tier-1 subtitle. --sgc carries the tone so one rule set serves all five buckets. Tones are --pv-* and follow the active language convention: green-up/red-down in English, red-up/green-down in Chinese — except the two direction-NEUTRAL tones (--pv-wait, --muted), which mean the same thing in both and are the right home for a stance with no direction in it. */ .nb-stage-hd { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 9px; margin: 15px 0 4px; padding: 5px 11px 5px 9px; border-left: 3px solid var(--sgc, var(--muted)); border-radius: 0 8px 8px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--sgc, var(--muted)) 12%, transparent), transparent 62%); } .nb-stage-hd:first-child { margin-top: 2px; } .nb-stage-hd .sh-l { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--sgc, var(--muted)) 52%, var(--text)); } .nb-stage-hd .sh-n { font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--sgc, var(--muted)) 17%, transparent); color: color-mix(in srgb, var(--sgc, var(--muted)) 55%, var(--text)); } .nb-stage-hd .sh-s { font-size: 11px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; } html[data-lang="zh"] .nb-stage-hd .sh-l { letter-spacing: 0; } .sg-live { --sgc: var(--pv-buy); } .sg-setting_up { --sgc: var(--pv-near); } .sg-ran { --sgc: var(--muted); } /* Basing is the "watch — don't chase" shelf, so it takes the wait tone, not the avoid tone it used to inherit by sitting inside Blocked. --pv-wait is amber and is deliberately one of the two verb tones the zh 红涨绿跌 block does NOT remap (theme.css) — a directionless stance must read the same in both languages. */ .sg-basing { --sgc: var(--pv-wait); } .sg-blocked { --sgc: var(--pv-avoid); } /* ── stage filter chips (G0.6) ───────────────────────────────────────────── Same segmented idiom as the China board's facet bar, with the count pills the stage headings use, so the panel counts one way throughout. Real