* { box-sizing: border-box; } body { background: var(--bg); color: var(--text); font: 14px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif; margin: 0; padding: 18px; } @media (min-width: 1100px) { body { padding: 26px max(40px, calc((100vw - 1500px) / 2)); } } html[data-lang="zh"] body { font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",-apple-system,sans-serif; } a { text-decoration: none; color: var(--ink-link, var(--link)); } h1 { font-size: 21px; margin: 0 0 2px; color: var(--text); } h2 { font-size: 14.5px; margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } /* ---- hover tooltips (the ? help icons) — hidden until hover ---------------- */ .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: 150%; left: 50%; transform: translateX(-50%); width: 330px; background: var(--panel); border: 1px solid var(--line); padding: 10px 12px; border-radius: 9px; 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 icon→tip gap — keeps :hover alive mid-travel (on .help, not .tip: the tip is a scroll container and clips its pseudos) */ .help:hover::before { content: ''; position: absolute; bottom: 100%; left: -30px; right: -30px; height: 10px; } .help:hover .tip { display: block; } th .help .tip, .help.below .tip { bottom: auto; top: 150%; } th .help:hover::before, .help.below:hover::before { bottom: auto; top: 100%; } .help.edge-right .tip { left: auto; right: 0; transform: none; } .help.edge-left .tip { left: 0; right: auto; transform: none; } .help.wide .tip { width: min(92vw, 372px); } /* structured tooltip building blocks (tables / scale bars / tinted rows) */ .tip p { margin: 0 0 6px; } .tip p:last-child { margin-bottom: 0; } .tip b { color: var(--text); } .tip table { width: 100%; margin: 7px 0 2px; font-size: 11.5px; border-collapse: collapse; } .tip th, .tip td { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .tip th { color: var(--muted); font-weight: 600; } .tip tr:last-child td { border-bottom: none; } .tip .scale { display: flex; height: 15px; border-radius: 7px; overflow: hidden; margin: 8px 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: 0 0 4px; } .tip .lad { display: block; padding: 4px 9px; border-radius: 6px; margin: 4px 0; font-size: 11.5px; background: color-mix(in srgb, var(--c, var(--muted)) 16%, var(--panel)); color: color-mix(in srgb, var(--c, var(--muted)) 84%, var(--text)); } .tip .lad.up { --c: var(--up); } .tip .lad.down { --c: var(--down); } .tip .lad.warn { --c: var(--warn); } .tip .lad.orange { --c: var(--orange); } .tip .lad.info { --c: var(--info); } .tip .lad.muted { --c: var(--muted); } /* consolidated stock-screener: segmented mode toggle */ .sb-seg { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:11px; background:var(--panel2,color-mix(in srgb,var(--muted) 10%,var(--panel))); border:1px solid var(--line); margin:2px 0 14px; } .sb-seg button { font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid transparent; background:transparent; color:var(--muted); padding:6px 13px; border-radius:8px; line-height:1.2; transition:all .14s ease; white-space:nowrap; } .sb-seg button:hover { color:var(--text); } .sb-seg button[aria-selected="true"] { background:var(--panel); color:var(--text); border-color:var(--line); box-shadow:var(--popover-shadow,0 1px 3px rgba(0,0,0,.12)); } .sb-cap { margin:0 0 12px; text-transform:none; line-height:1.55; } .sb-table th.th-sort { cursor:pointer; user-select:none; } .sb-table th.th-sort:hover { color:var(--text); } .sb-table th.sorted { color:var(--text); } .sb-table .sarrow { font-size:9px; opacity:.32; margin-left:3px; font-weight:700; } .sb-table th.sorted .sarrow { opacity:.9; color:var(--ink-link, var(--link)); } /* W8-R7: CN MTF upturn panel (reuses dash-mtf-* class names from dashboard.html) */ .cn-mtf-tbl { width:100%; border-collapse:collapse; margin-top:7px; font-size:11.5px; } .cn-mtf-tbl th { text-align:left; font-weight:700; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.03em; padding:3px 6px; border-bottom:1px solid var(--line); } .cn-mtf-tbl td { text-align:left; padding:4px 6px; border-bottom:1px solid var(--line); } .cn-mtf-tbl tr:hover { background:color-mix(in srgb,var(--muted) 4%,transparent); } .dash-mtf-badge { display:inline-flex; align-items:center; padding:1px 6px; border-radius:10px; font-size:9px; font-weight:800; letter-spacing:.04em; white-space:nowrap; } .dash-mtf-badge.confirmed { background:color-mix(in srgb,var(--up) 14%,transparent); border:1px solid color-mix(in srgb,var(--up) 36%,transparent); color:var(--ink-up, var(--up)); } .dash-mtf-badge.watch { background:color-mix(in srgb,var(--info) 12%,transparent); border:1px solid color-mix(in srgb,var(--info) 30%,transparent); color:var(--ink-info, var(--info,var(--link))); } .dash-mtf-badge.none { background:color-mix(in srgb,var(--muted) 8%,transparent); border:1px solid color-mix(in srgb,var(--muted) 18%,transparent); color:var(--muted); } .dash-mtf-leg { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:4px; font-size:9px; font-weight:700; } .dash-mtf-leg.on { background:color-mix(in srgb,var(--up) 18%,transparent); color:var(--ink-up, var(--up)); border:1px solid color-mix(in srgb,var(--up) 30%,transparent); } .dash-mtf-leg.off { background:color-mix(in srgb,var(--muted) 8%,transparent); color:var(--muted); border:1px solid color-mix(in srgb,var(--muted) 18%,transparent); } .dash-mtf-leg.partial { background:color-mix(in srgb,var(--warn) 10%,transparent); color:var(--ink-warn, var(--warn)); border:1px solid color-mix(in srgb,var(--warn) 25%,transparent); } .dash-mtf-legs { display:flex; gap:3px; align-items:center; } .dash-mtf-phase { font-size:10px; color:var(--muted); } .dash-mtf-k { font-weight:700; font-variant-numeric:tabular-nums; font-size:11px; } @media(max-width:560px){.cn-mtf-tbl{font-size:10px;}.cn-mtf-tbl th,.cn-mtf-tbl td{padding:3px 4px;}} /* sector washout→turn boost: row tint + chip (display re-rank only, never a filter) */ .sb-table tr.sbt2 td { background:color-mix(in srgb,var(--up) 9%,transparent); } .sb-table tr.sbt1 td { background:color-mix(in srgb,var(--up) 4.5%,transparent); } .sb-table tr.sbt2 td:first-child { box-shadow:inset 3px 0 0 var(--up); } .sb-table tr.sbt1 td:first-child { box-shadow:inset 3px 0 0 color-mix(in srgb,var(--up) 45%,transparent); } .sbt-chip { display:inline-block; font-size:9px; font-weight:700; line-height:1.5; padding:0 6px; border-radius:999px; margin-left:6px; white-space:nowrap; background:color-mix(in srgb,var(--up) 14%,transparent); color:var(--ink-up, var(--up)); border:1px solid color-mix(in srgb,var(--up) 35%,transparent); vertical-align:1px; } .sbt-chip.soft { background:color-mix(in srgb,var(--up) 7%,transparent); color:color-mix(in srgb,var(--up) 72%,var(--muted)); } .sbt-legend { margin:0 0 10px; font-size:11px; text-transform:none; } /* ---- standout-stock cards — zoned V2 architecture ------------------- */ /* Dynamic columns: ~240px min → ~4-5 cards per row on a normal laptop, more on an ultrawide screen, fewer as the viewport narrows. auto-fill does the responsive work — no fixed count. */ .nbgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin-top:11px; } /* mobile: 2-up (paired with the 3-row cap via data-showmore-rows + theme.js). */ @media (max-width:680px){ .nbgrid[data-showmore-rows]{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } /* Prophet v2's honest "Priority" label is wider than the old "Edge". Keep the full ticker legible on 2-up phone cards and compact only the label; the score tooltip still carries the complete definition. */ #standouts .nbgrid[data-showmore-rows] .pv-tk{ flex:none; } #standouts .nbgrid[data-showmore-rows] .pv-edl .l-en, #standouts .nbgrid[data-showmore-rows] .pv-edl .l-zh{ display:none!important; } #standouts .nbgrid[data-showmore-rows] .pv-edl::after{ content:"Rank"; font-size:9px; font-weight:700; letter-spacing:.04em; } html[data-lang="zh"] #standouts .nbgrid[data-showmore-rows] .pv-edl::after{ content:"序"; } .nbgrid[data-showmore-rows] .nbcard{ padding:0; gap:0; } .nbgrid[data-showmore-rows] .nb-tk{ font-size:14px; } .nbgrid[data-showmore-rows] .nb-px{ font-size:12px; } .nbgrid[data-showmore-rows] .nb-nm{ font-size:10px; } .nbgrid[data-showmore-rows] .nb-verdict{ font-size:9.5px; } .nbgrid[data-showmore-rows] .nb-state{ font-size:8.5px; } .nbgrid[data-showmore-rows] .nb-id{ padding:6px 8px 5px; gap:3px; } .nbgrid[data-showmore-rows] .nb-act{ padding:5px 8px 5px; gap:4px; } .nbgrid[data-showmore-rows] .nb-ctx{ padding:3px 8px 5px; font-size:8px; } .nbgrid[data-showmore-rows] .nb-conv-top{ padding:4px 7px; } .nbgrid[data-showmore-rows] .nb-conv-top .nb-verdict{ font-size:9.5px; } .nbgrid[data-showmore-rows] .nb-conv-top .nb-cscore{ font-size:11px; } .nbgrid[data-showmore-rows] .nb-entry{ padding:4px 7px 5px; } /* On 2-up narrow cards the buy zone + cycle STAY VISIBLE (primary action info — adjudicated; the judged V2 mockup hid them and that was ruled a blocker). They compact instead: smaller type, tighter gaps, window text dropped. */ .nbgrid[data-showmore-rows] .nbe-zone{ gap:4px; margin-top:2px; } .nbgrid[data-showmore-rows] .nbe-zone .nbe-px{ font-size:10px; } .nbgrid[data-showmore-rows] .nbe-zone .nbe-pct{ font-size:8px; } .nbgrid[data-showmore-rows] .nbe-cyc{ font-size:7.5px; gap:3px; flex-wrap:wrap; } .nbgrid[data-showmore-rows] .nbe-status{ font-size:9px; } .nbgrid[data-showmore-rows] .nb-asof{ display:none; } /* secondary freshness note only */ .nbgrid[data-showmore-rows] .nb-rip-nm{ font-size:9.5px; } } a.nbcard { background:var(--panel2,var(--panel)); border:1px solid var(--line); border-radius:10px; padding:0; display:flex; flex-direction:column; gap:0; min-width:0; overflow:hidden; transition:transform .12s, box-shadow .12s, border-color .12s; } /* every flex child may shrink below its content width AND never exceed the card — this is what stops a long verdict / chip row from blowing the card (and with it the whole auto-fill grid) hundreds of px wide. The single most important rule here. */ a.nbcard > * { min-width:0; max-width:100%; } a.nbcard:hover { transform:translateY(-2px); box-shadow:0 5px 18px rgba(0,0,0,.22); border-color:var(--link); } /* state accent as a TOP gradient stripe (RIPENING-shelf idiom) — not a left border. class-scoped (not a.nbcard) so div.nbcard scorecards (coiled/washout grid) get their state stripe too — an in-flow block child, safe on non-flex divs. */ .nbcard::before { content:""; display:block; flex:none; height:3px; background:linear-gradient(90deg,var(--muted),transparent); opacity:.6; } .nbcard.nb-up::before { background:linear-gradient(90deg,var(--up),color-mix(in srgb,var(--up) 30%,transparent)); opacity:1; } .nbcard.nb-down::before { background:linear-gradient(90deg,var(--down),color-mix(in srgb,var(--down) 30%,transparent)); opacity:1; } .nbcard.nb-caution::before { background:linear-gradient(90deg,var(--warn),color-mix(in srgb,var(--warn) 30%,transparent)); opacity:1; } /* ── IDENTITY ZONE ─────────────────────────────────────────────────────── */ .nb-id { padding:8px 11px 7px; background:color-mix(in srgb,var(--muted) 7%,transparent); border-bottom:1px solid var(--line); border-radius:7px 7px 0 0; display:flex; flex-direction:column; gap:4px; min-width:0; } html[data-theme="light"] .nb-id { background:color-mix(in srgb,var(--muted) 5%,transparent); } /* row 0: stage badge + gate badge */ .nb-badges { display:flex; align-items:center; gap:5px; flex-wrap:wrap; min-width:0; } /* size the shared gate badge for this page only */ .nbcard .sig-gate { font-size:9px; white-space:nowrap; } /* why-ranked chip de-emphasized in badges row */ .nb-badges .nb-why { font-size:7.5px; opacity:.7; } /* row 1: ticker + price */ .nb-tkrow { display:flex; align-items:baseline; justify-content:space-between; gap:6px; min-width:0; } .nb-tk { font-weight:800; font-size:15px; color:var(--text); } /* row 2: full name — own full-width line */ .nb-nm { font-size:11.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; line-height:1.3; display:block; } /* row 3: sector + off-high */ .nb-secrow { display:flex; align-items:center; gap:5px; min-width:0; font-size:10px; color:var(--muted); } .nb-sec { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1 1 auto; } .nb-offh { margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums; flex:none; font-size:9.5px; } .nb-px { font-weight:700; font-size:13.5px; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; flex:none; } /* ── ACTION ZONE ─────────────────────────────────────────────────────────── */ .nb-act { padding:7px 11px 7px; display:flex; flex-direction:column; gap:6px; min-width:0; } /* sparkline inside action zone */ .nb-act .nch { margin:0; border-radius:4px; } /* The fused READY score + verdict + entry gauge block */ .nb-conv { background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; min-width:0; display:flex; flex-direction:column; gap:0; /* keep old margin for compat */ margin:0; } /* top sub-row: score + verdict */ .nb-conv-top { display:flex; align-items:flex-start; gap:7px; padding:5px 8px 5px; border-bottom:1px solid var(--line); min-width:0; } .nb-conv-top .nb-cscore { flex:none; } .nb-conv-top .nb-verdict { flex:1 1 auto; min-width:0; font-size:10.5px; } /* RAN card modifier: muted gate badge */ .nb-stage-ran-card .sig-gate { filter:grayscale(.75); opacity:.55; } /* Entry gauge fused inside conv block */ .nb-conv .nb-entry { margin:0; border:none; border-radius:0; background:transparent; padding:6px 8px 6px; border-top:2px solid var(--muted); } .nb-conv .nbe-buy_now, .nb-conv .nbe-partial { border-top-color:var(--up); background:color-mix(in srgb,var(--up) 5%,transparent); } .nb-conv .nbe-buy_soon, .nb-conv .nbe-watch { border-top-color:var(--g-cold,var(--link)); } .nb-conv .nbe-wait_pullback, .nb-conv .nbe-hold, .nb-conv .nbe-bounce_wait { border-top-color:var(--warn); } .nb-conv .nbe-extended, .nb-conv .nbe-topping { border-top-color:var(--warn); } .nb-conv .nbe-exit, .nb-conv .nbe-avoid, .nb-conv .nbe-blocked { border-top-color:var(--down); background:color-mix(in srgb,var(--down) 5%,transparent); } /* ── CONTEXT STRIP ──────────────────────────────────────────────────────── */ .nb-ctx { padding:4px 11px 6px; display:flex; align-items:center; gap:4px 5px; flex-wrap:wrap; min-width:0; font-size:9px; color:var(--muted); border-top:1px solid var(--line); background:color-mix(in srgb,var(--muted) 3%,transparent); border-radius:0 0 7px 7px; } /* state chip in context strip */ .nb-ctx .nb-state { font-size:8.5px; padding:1px 5px; border-radius:6px; letter-spacing:.02em; } .nb-up .nb-ctx .nb-state { color:var(--ink-up, var(--up)); background:color-mix(in srgb,var(--up) 14%,var(--panel)); } .nb-down .nb-ctx .nb-state { color:var(--ink-down, var(--down)); background:color-mix(in srgb,var(--down) 14%,var(--panel)); } .nb-caution .nb-ctx .nb-state { color:var(--ink-warn, var(--warn)); background:color-mix(in srgb,var(--warn) 14%,var(--panel)); } /* condition chips smaller in context strip */ .nb-ctx .nb-washout, .nb-ctx .nb-coiled, .nb-ctx .nb-ext { font-size:7.5px; padding:1px 4px; } /* caution button compact in context strip */ .nb-ctx .nb-cau { margin-top:0; } .nb-ctx .nb-cau-btn { font-size:8px; height:16px; padding:0 4px 0 3px; } /* signal as-of pushed right */ .nb-asof { font-size:8px; color:var(--muted); margin-left:auto; white-space:nowrap; opacity:.75; } .nb-washout { flex:none; font-size:8px; font-weight:800; letter-spacing:.02em; padding:1px 5px; border-radius:6px; white-space:nowrap; background:color-mix(in srgb,var(--up) 16%,transparent); color:var(--ink-up, var(--up)); border:1px solid color-mix(in srgb,var(--up) 38%,transparent); } .nb-coiled{flex:none;font-size:8px;font-weight:800;letter-spacing:.02em;padding:1px 5px;border-radius:6px;white-space:nowrap;background:color-mix(in srgb,var(--link) 14%,transparent);color:var(--ink-link, var(--link));border:1px solid color-mix(in srgb,var(--link) 36%,transparent)} .nb-coiled.star{background:color-mix(in srgb,var(--up) 16%,transparent);color:var(--ink-up, var(--up));border-color:color-mix(in srgb,var(--up) 40%,transparent)} .nb-coiled.fire{box-shadow:0 0 6px color-mix(in srgb,var(--up) 45%,transparent);border-color:color-mix(in srgb,var(--up) 55%,transparent);color:var(--ink-up, var(--up));background:color-mix(in srgb,var(--up) 20%,transparent)} .nb-ext { flex:none; font-size:8px; font-weight:800; letter-spacing:.02em; padding:1px 5px; border-radius:6px; white-space:nowrap; background:color-mix(in srgb,var(--orange) 15%,transparent); color:var(--ink-orange, var(--orange)); border:1px solid color-mix(in srgb,var(--orange) 42%,transparent); } .nbcard .nch { background:transparent; margin:0; width:100%; height:42px; border-radius:4px; } /* nb-state defaults (overridden per-dir in context strip above) */ .nb-state { font-size:10px; font-weight:800; letter-spacing:.02em; padding:1px 7px; border-radius:8px; } /* ---- Entry-timing gauge (inside nb-conv fused block) ---- */ /* standalone nb-entry (outside nb-conv) still possible on non-zoned cards — keep base rules */ .nb-entry { margin:5px 0 1px; padding:5px 7px; border-radius:8px; background:var(--panel); border:1px solid var(--line); border-top:2px solid var(--muted); } .nbe-buy_now, .nbe-partial { border-top-color:var(--up); background:color-mix(in srgb,var(--up) 8%,var(--panel)); } .nbe-buy_soon, .nbe-watch { border-top-color:var(--g-cold); } .nbe-wait_pullback, .nbe-hold, .nbe-bounce_wait { border-top-color:var(--warn); } .nbe-extended, .nbe-topping { border-top-color:var(--warn); background:color-mix(in srgb,var(--warn) 9%,var(--panel)); } .nbe-exit, .nbe-avoid, .nbe-blocked { border-top-color:var(--down); background:color-mix(in srgb,var(--down) 8%,var(--panel)); } .nbe-head { display:flex; align-items:center; gap:5px; } .nbe-dot { width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none; } .nbe-dot.a3 { background:var(--up); box-shadow:0 0 0 3px color-mix(in srgb,var(--up) 22%,transparent); } .nbe-dot.a2 { background:var(--g-cold); } .nbe-dot.a1 { background:var(--warn); } .nbe-dot.a0 { background:var(--down); } .nbe-status { font-size:10px; font-weight:800; color:var(--text); line-height:1.2; } .nbe-zone { display:flex; align-items:baseline; gap:5px; margin-top:3px; } .nbe-lbl { color:var(--muted); font-size:8px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .nbe-px { font-weight:800; font-size:11px; color:var(--text); font-variant-numeric:tabular-nums; } .nbe-pct { color:var(--muted); font-size:9px; font-variant-numeric:tabular-nums; } .nbe-cyc { font-size:8.5px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums; min-width:0; } .nbe-cyc > span:first-child { flex:none; white-space:nowrap; } /* slim progress bar stretches to fill the row (V3 graft) */ .nbe-bar { display:inline-block; flex:1 1 auto; min-width:24px; height:3px; border-radius:2px; background:var(--line); overflow:hidden; } .nbe-bf { display:block; height:100%; background:var(--g-cold); } /* ---- Conviction Profile score + verdict ---- */ .nb-cscore { font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; min-width:30px; flex:none; text-align:center; padding:1px 5px; border-radius:8px; border:1px solid var(--line); color:var(--text); } .nb-crank { font-size:7.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.7; margin-right:3px; vertical-align:1px; } .nb-cscore.band-high { color:var(--ink-up, var(--up)); border-color:color-mix(in srgb,var(--up) 45%,var(--line)); background:color-mix(in srgb,var(--up) 12%,var(--panel)); } .nb-cscore.band-constructive { color:var(--g-cold); border-color:color-mix(in srgb,var(--g-cold) 40%,var(--line)); } .nb-cscore.band-neutral { color:var(--muted); } .nb-cscore.band-low { color:var(--ink-down, var(--down)); border-color:color-mix(in srgb,var(--down) 35%,var(--line)); } .nb-verdict { font-size:10.5px; font-weight:700; line-height:1.25; color:var(--text); flex:1 1 auto; min-width:0; overflow-wrap:anywhere; } /* ---- Caution icon + popover (replaces old pill-row; ported from dashboard #1061) ---- */ .nb-cau { position:relative; display:inline-flex; margin-top:4px; } .nb-cau-btn { display:inline-flex; align-items:center; gap:3px; padding:0 5px 0 4px; height:18px; border-radius:9px; border:none; cursor:pointer; font-size:9px; font-weight:700; line-height:1; color:var(--ink-warn, var(--warn)); background:color-mix(in srgb,var(--warn) 14%,var(--panel)); text-decoration:none; animation:nb-cau-pulse 2.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .nb-cau-btn { animation:none; } } @keyframes nb-cau-pulse { 0%, 100% { opacity:1; } 50% { opacity:.55; } } .nb-cau-badge { display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border-radius:50%; font-size:8px; font-weight:800; background:var(--warn); color:var(--panel); } .nb-cau-pop { display:none; position:absolute; z-index:120; bottom:calc(100% + 5px); left:0; min-width:180px; max-width:min(260px, calc(100vw - 24px)); padding:7px 9px; border-radius:8px; background:var(--panel); border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line)); box-shadow:0 4px 16px rgba(0,0,0,.18); font-size:10px; font-weight:600; line-height:1.45; color:var(--ink-warn, var(--warn)); pointer-events:none; } .nb-cau-pop .cau-row { display:block; padding:2px 0; } .nb-cau-pop .cau-row + .cau-row { border-top:1px solid color-mix(in srgb,var(--warn) 20%,var(--line)); padding-top:4px; margin-top:2px; } /* Show on hover/focus (desktop) */ .nb-cau:hover .nb-cau-pop, .nb-cau:focus-within .nb-cau-pop, .nb-cau.nb-cau-open .nb-cau-pop { display:block; pointer-events:auto; } /* Flip to below if near top of viewport (added by JS) */ .nb-cau.pop-below .nb-cau-pop { bottom:auto; top:calc(100% + 5px); } /* Clamp to right edge */ .nb-cau.pop-right .nb-cau-pop { left:auto; right:0; } /* The card clips overflow; release it while the popover is showing or the top of a tall popover is cut off at the card edge */ a.nbcard:has(.nb-cau:hover), a.nbcard:has(.nb-cau:focus-within), a.nbcard:has(.nb-cau-open) { overflow:visible; } /* ── W1-C: LIFECYCLE SHELF HEADERS + STAGE BADGES ──────────────────────── */ /* Shelf header — separates ENTRY / RIPENING / RAN shelves visually */ .nb-shelf-hdr { display:flex; align-items:center; gap:10px; margin:14px 0 6px; padding:0 0 7px; border-bottom:1px solid var(--line); } .nb-shelf-hdr:first-of-type { margin-top:0; } .nb-shelf-tag { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 10px; border-radius:20px; flex:none; } .nb-shelf-tag.st-entry { color:#fff; background:var(--up); } .nb-shelf-tag.st-ripe { color:var(--ink-warn, var(--warn)); background:color-mix(in srgb,var(--warn) 18%,var(--panel)); border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line)); } .nb-shelf-tag.st-ran { color:var(--muted); background:color-mix(in srgb,var(--muted) 10%,var(--panel)); border:1px solid var(--line); } .nb-shelf-expl { font-size:10.5px; color:var(--muted); line-height:1.4; } /* Stage badge — top-left of each card (loudest element on the card) */ .nb-stage { display:inline-flex; align-items:center; font-size:8.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:9px; white-space:nowrap; } .nb-stage.stg-entry { color:#fff; background:var(--up); box-shadow:0 0 0 1px color-mix(in srgb,var(--up) 60%,transparent); } .nb-stage.stg-ran { color:var(--muted); background:color-mix(in srgb,var(--muted) 12%,var(--panel)); border:1px solid var(--line); } /* why_ranked chip — small, beside rank indicator on ENTRY cards */ .nb-why { font-size:8px; color:var(--muted); padding:1px 5px; border-radius:6px; border:1px solid var(--line); white-space:nowrap; cursor:help; } /* RAN card: muted score, prominent detail string — sits between identity zone and action zone */ .nb-ran-detail { font-size:10px; color:var(--muted); line-height:1.35; margin:0; padding:5px 11px; background:color-mix(in srgb,var(--down) 7%,var(--panel)); border-bottom:1px solid color-mix(in srgb,var(--down) 20%,var(--line)); } /* RAN card modifier: de-emphasise score display */ .nb-stage-ran-card .nb-cscore { opacity:.45; } /* ── W8-R1: RIPENING SHELF three-zone CSS is in theme.css (.rip-shelf / .rip-zone / .rip-card) ── */ /* Legacy compact card CSS kept for RAN shelf backward compat (nb-rip-* not used by new W8 markup) */ .nb-rip-sec { font-size:9px; color:var(--muted); } .nb-rip-range { font-size:8px; color:var(--muted); margin-left:auto; } .grid { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 15px 17px; } .span12 { grid-column: span 12; } .span8 { grid-column: span 8; } .span6 { grid-column: span 6; } .span4 { grid-column: span 4; } .span5 { grid-column: span 5; } .span7 { grid-column: span 7; } @media (max-width: 900px) { .span8, .span7, .span6, .span5, .span4 { grid-column: span 12; } } /* ---- consolidated sub-sections: several former panels share one panel now. A merged panel keeps ONE

; each former panel becomes a .msec sub-section with a small uppercase .msec-h heading. Stacked sub-sections get a hairline top divider; grid-arranged ones (side-by-side columns) do not. ------------ */ .msec { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); min-width: 0; } .msec.flush, .grid > .span4 > .msec.flush, .grid > .span5 > .msec.flush, .grid > .span6 > .msec.flush, .grid > .span7 > .msec.flush, .grid > .span8 > .msec.flush { margin-top: 0; padding-top: 0; border-top: none; } .grid > .msec { margin-top: 4px; padding-top: 0; border-top: none; } @media (max-width: 900px) { .grid > .msec + .msec { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); } } h3.msec-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; color: var(--muted); margin: 0 0 11px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; line-height: 1.35; } h3.msec-h .note, h3.msec-h .help { text-transform: none; letter-spacing: normal; font-weight: 400; } h3.msec-h .help { font-weight: 600; } /* regime hero */ .hero { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .quad-badge { font-size: 22px; font-weight: 800; padding: 8px 18px; border-radius: 13px; color: #fff; } .quad-Q1 { background: var(--q1); } .quad-Q2 { background: var(--q2); color: #1a1a1a; } .quad-Q3 { background: var(--q3); } .quad-Q4 { background: var(--q4); } /* US-parity header pills (mirror dashboard.html.j2 .badge) — small Regime/Posture chips replacing the oversized 22px .quad-badge in the stock-dashboard header. */ .badge { display: inline-block; padding: 3px 12px; border-radius: 14px; font-weight: 600; font-size: 13px; } .quad-Q1, .quad-Q3, .quad-Q4 { color: #fff; } .metric { display: flex; flex-direction: column; gap: 1px; } .metric .v { font-size: 18px; font-weight: 700; color: var(--text); } .metric .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .chip { display: inline-block; padding: 3px 11px; border-radius: 12px; font-weight: 600; font-size: 12.5px; background: color-mix(in srgb, var(--c, var(--muted)) 16%, var(--panel)); color: color-mix(in srgb, var(--c, var(--muted)) 82%, var(--text)); } .c-up { --c: var(--up); } .c-down { --c: var(--down); } .c-warn { --c: var(--warn); } .c-info { --c: var(--info); } .c-muted { --c: var(--muted); } table { border-collapse: collapse; width: 100%; font-size: 13px; } th, td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-weight: 500; } th:first-child, td:first-child, td.l, th.l { text-align: left; } .pos { color: var(--ink-up, var(--up)); } .neg { color: var(--ink-down, var(--down)); } .lad { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--c, var(--muted)) 16%, var(--panel)); color: color-mix(in srgb, var(--c, var(--muted)) 82%, var(--text)); } .lad.up { --c: var(--up); } .lad.down { --c: var(--down); } .lad.flat { --c: var(--muted); } .agechip { font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; margin-left: 5px; } .eqmini { font-size: 10.5px; font-weight: 700; white-space: nowrap; margin-left: 5px; cursor: help; } .eqmini.eq-up { color: var(--ink-up, var(--up)); } .eqmini.eq-down { color: var(--ink-down, var(--down)); } .eqmini.eq-flat { color: var(--muted); } .note { font-size: 12.5px; color: var(--muted); line-height: 1.6; } .mtf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .mtf-card .mtf-name { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; color: var(--text); } /* ---- gauges / dials / tiles for the new internals panels ------------------ */ .dial { position: relative; height: 9px; border-radius: 5px; margin: 6px 0 3px; background: linear-gradient(90deg, var(--up), var(--warn) 55%, var(--down)); } .dial.rev { background: linear-gradient(90deg, var(--down), var(--warn) 45%, var(--up)); } .dial i { position: absolute; top: -3px; width: 4px; height: 15px; border-radius: 2px; background: var(--text); transform: translateX(-50%); box-shadow: 0 0 0 2px var(--panel); } .dial-ends { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); } .tiles { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 2px; } .tile { flex: 1 1 90px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; min-width: 88px; } .tile .tv { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); } .tile .tk { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .bignum { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .sub { font-size: 11.5px; color: var(--muted); } .chart { margin: 4px 0 2px; } /* legacy macro-panel action board (actcol, mode=macro sub-panel, untouched) */ .act-col h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; } .act-col { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; } .act-item { font-size: 12.5px; padding: 3px 0; border-bottom: 1px solid var(--line); } .act-item:last-child { border-bottom: none; } .act-item .an { font-weight: 600; color: var(--text); } .act-item .at { font-size: 10.5px; color: var(--muted); } .act-now h3 { color: var(--ink-up, var(--up)); } .act-soon h3 { color: var(--ink-info, var(--info)); } .act-run h3 { color: #8b5cf6; } /* neutral violet — NOT green/buy */ .act-tp h3 { color: var(--ink-warn, var(--warn)); } .act-avoid h3 { color: var(--ink-down, var(--down)); } .act-hold h3 { color: var(--muted); } /* ---- regime hero: quad map + meaning + regime watch ----------------------- */ .herogauges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; max-width: 580px; margin: 16px 0 2px; } .hg-l { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; margin-bottom: 6px; } .hg-l .hv { font-variant-numeric: tabular-nums; } .qmeaning { font-size: 14px; line-height: 1.55; margin: 14px 0 2px; color: var(--text); } .regwatch { font-size: 13px; font-weight: 600; margin: 6px 0 0; padding: 7px 11px; border-radius: 9px; background: color-mix(in srgb, var(--warn) 14%, var(--panel)); color: color-mix(in srgb, var(--warn) 88%, var(--text)); } .qmap { display: grid; grid-template-columns: 78px 1fr 1fr; gap: 8px; margin: 16px 0 4px; } .qmap .ax { font-size: 11px; color: var(--muted); display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25; } .qmap .cell { border-radius: 12px; padding: 16px 20px; color: #fff; font-weight: 700; font-size: 16.5px; opacity: .42; display: flex; flex-direction: column; justify-content: center; min-height: 168px; transition: opacity .15s; } .qmap .cell small { display: block; font-weight: 500; font-size: 12px; opacity: .92; margin-top: 6px; line-height: 1.4; } .qmap .cell.cur { opacity: 1; box-shadow: inset 0 0 0 2px var(--text); } @media (max-width: 900px) { .qmap .cell { min-height: 96px; font-size: 14px; } } .qmap .q1 { background: var(--q1); } .qmap .q2 { background: var(--q2); color: #1a1a1a; } .qmap .q3 { background: var(--q3); } .qmap .q4 { background: var(--q4); } /* ---- playbook: lifespan bar + next-quad odds + exposure dial --------------- */ .lifebar { position: relative; height: 16px; border-radius: 8px; overflow: hidden; margin: 12px 0 3px; background: var(--panel2); } .lifebar .zone { position: absolute; top: 0; height: 100%; } .lifebar .marker { position: absolute; top: -2px; height: calc(100% + 4px); width: 3px; background: var(--text); border-radius: 2px; box-shadow: 0 0 0 1px var(--panel); } .lifelabels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); } .prob { display: flex; align-items: center; gap: 9px; margin: 7px 0; } .prob .nm { flex: 0 0 96px; font-size: 12.5px; font-weight: 600; } .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 { flex: 0 0 38px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; } .pdial { display: flex; gap: 4px; margin: 6px 0 12px; } .pdial > span { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-word; text-align: center; font-size: 11.5px; font-weight: 700; padding: 7px 4px; border-radius: 8px; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); } .pdial .on-def { background: color-mix(in srgb, var(--down) 80%, var(--panel)); color: #fff; border-color: transparent; } .pdial .on-car { background: color-mix(in srgb, var(--warn) 75%, var(--panel)); color: #1a1a1a; border-color: transparent; } .pdial .on-neu { background: color-mix(in srgb, var(--muted) 55%, var(--panel)); color: var(--text); border-color: transparent; } .pdial .on-con { background: color-mix(in srgb, var(--up) 62%, var(--panel)); color: #fff; border-color: transparent; } .pdial .on-agg { background: color-mix(in srgb, var(--up) 88%, var(--panel)); color: #fff; border-color: transparent; } .reason { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; margin: 5px 0; line-height: 1.45; } .sig { flex: none; width: 17px; height: 17px; border-radius: 50%; font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; } .sig-p { background: color-mix(in srgb, var(--up) 22%, var(--panel)); color: var(--ink-up, var(--up)); } .sig-m { background: color-mix(in srgb, var(--down) 22%, var(--panel)); color: var(--ink-down, var(--down)); } .sig-i { background: color-mix(in srgb, var(--muted) 22%, var(--panel)); color: var(--muted); } .pcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; margin: 6px 0; font-size: 12.5px; } .pcard .tk { color: var(--text); } .calltag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 8px; margin-right: 6px; text-transform: uppercase; letter-spacing: .03em; } .tag-pref { background: color-mix(in srgb, var(--info) 18%, var(--panel)); color: color-mix(in srgb, var(--info) 85%, var(--text)); } .tag-lead { background: color-mix(in srgb, var(--up) 18%, var(--panel)); color: color-mix(in srgb, var(--up) 85%, var(--text)); } .tag-avoid { background: color-mix(in srgb, var(--down) 18%, var(--panel)); color: color-mix(in srgb, var(--down) 85%, var(--text)); } h3 { font-size: 12.5px; margin: 12px 0 6px; color: var(--text); } /* ---- sortable tables (tablesort.js) --------------------------------------- */ 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)); } .foot { margin-top: 26px; color: var(--muted); font-size: 12px; text-align: center; line-height: 1.7; } /* ---- fired alerts (ported from the US dashboard) -------------------------- */ .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-high { border-left-color: var(--down); } .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; } /* major-index health strip (macro page) */ .idx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 760px) { .idx-grid { grid-template-columns: 1fr; } } .idx-tile { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; } .idx-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .idx-px { font-variant-numeric: tabular-nums; color: var(--muted); } .idx-row, .idx-trend { display: flex; justify-content: space-between; font-size: 12px; gap: 8px; } .idx-trend { margin-top: 3px; color: var(--muted); } .idx-grid .pos { color: var(--ink-up, var(--up)); } .idx-grid .neg { color: var(--ink-down, var(--down)); } .idx-grid .warn { color: var(--ink-warn, var(--warn)); } /* live-price tiles (cn-live-tiles strip — SSE, CSI 300 ETF, Hang Seng) */ .cn-lt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .cn-live-tile { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; } .cn-lt-sym { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .cn-lt-sub { font-size: 11px; color: var(--muted); margin-bottom: 4px; } .cn-lt-px { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); } .cn-lt-chg { font-size: 12px; font-weight: 600; margin-top: 2px; } @media (max-width: 600px) { #cn-live-tiles .cn-lt-grid { grid-template-columns: 1fr; } } /* index-health risk row + Income-Vector allocation button (mirrors the US macro page) */ .idx-risk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; } @media (max-width: 900px) { .idx-risk { grid-template-columns: 1fr; } } .idx-gauge, .idx-alloc { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; } .idx-alloc { display: block; text-decoration: none; color: inherit; border-color: var(--link); } .idx-alloc:hover { background: var(--panel); } .idx-gk { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .idx-gv { font-size: 24px; font-weight: 800; color: var(--text); } .idx-gv small { font-size: 12px; font-weight: 600; color: var(--muted); } /* nav split-dropdown (macro / stocks / lookup) */ .nav-dd { position: relative; } .nav-dd .caret { font-size: 9px; opacity: .6; } .nav-dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 12px 34px rgba(0,0,0,.28); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 70; } .nav-dd:hover > .nav-dd-menu, .nav-dd:focus-within > .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dd-menu a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; } .nav-dd-menu a:hover, .nav-dd-menu a.active { background: var(--panel2); color: var(--text); } /* ===================== COMMAND-CENTER REGIME HERO (shared) ===================== The modern macro scorecard ported from the US macro terminal (dashboard.html.j2) to China / HK / Canada. Scoped under .cmd-hero on the hero panel so it never restyles the rest of the page; every colour routes through the existing theme vars so dark/light + the zh Asia red/green swap propagate at paint. A 3-column bar: 2x2 quadrant locator · headline regime + plain-English standfirst · a vitals strip of the market's NATIVE drivers (LABEL · VALUE · MEANING). */ .cmd-hero { --num: var(--font-mono, ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace); --hair: color-mix(in srgb, var(--line) 72%, transparent); --tile: color-mix(in srgb, var(--panel2, var(--panel)) 86%, var(--panel)); --ink-1: var(--text); --ink-2: color-mix(in srgb, var(--text) 64%, transparent); --ink-3: var(--muted); --rule: 1px; padding: 19px 21px; } html[data-theme="light"] .cmd-hero { --ink-2: color-mix(in srgb, var(--text) 70%, transparent); --hair: color-mix(in srgb, var(--line) 90%, transparent); } .cmd-hero .num, .cmd-hero .num-lg, .cmd-hero .v-num, .cmd-hero .v-chip { font-family: var(--num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -.01em; } .cmd-hero .num-lg { font-size: 22px; font-weight: 800; line-height: 1.05; color: var(--ink-1); } .cmd-hero .hero-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 26px; } .cmd-hero .hero-main { padding: 2px 28px; min-width: 0; border-left: var(--rule) solid var(--hair); border-right: var(--rule) solid var(--hair); } /* LEFT — 2x2 quadrant locator (growth↑ top, inflation→ right; lit cell only) */ .cmd-hero .hero-loc { display: grid; gap: 7px; justify-items: start; } .cmd-hero .qmini { display: grid; grid-template-columns: repeat(2, 31px); grid-template-rows: repeat(2, 31px); gap: 5px; } .cmd-hero .qm { border-radius: 6px; background: color-mix(in srgb, var(--qc) 14%, var(--tile)); border: var(--rule) solid color-mix(in srgb, var(--qc) 28%, var(--hair)); transition: box-shadow .2s ease; } .cmd-hero .qm.on { background: var(--qc); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--qc), 0 0 18px color-mix(in srgb, var(--qc) 55%, transparent); } .cmd-hero .loc-axes { display: flex; justify-content: space-between; width: 100%; gap: 8px; font-family: var(--num); font-size: 8px; letter-spacing: .05em; color: var(--ink-3); text-transform: uppercase; font-weight: 700; } /* CENTER — the read */ .cmd-hero .hero-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .cmd-hero .hero-eyebrow .num { color: var(--ink-2); } .cmd-hero .hero-regime { display: flex; align-items: center; gap: 12px; margin: 7px 0 6px; } .cmd-hero .hr-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; } .cmd-hero h1.hr-name { font-size: 33px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--ink-1); margin: 0; } html[data-lang="zh"] .cmd-hero h1.hr-name { font-size: 31px; letter-spacing: 0; } .cmd-hero .hero-says { margin: 0; font-size: 14px; color: var(--ink-2); max-width: 54ch; line-height: 1.5; } .cmd-hero .hero-says b { color: var(--ink-1); font-weight: 700; } /* RIGHT — vitals strip: 4 cells, each LABEL · VALUE · plain-English MEANING */ .cmd-hero .hero-vitals { display: grid; grid-template-columns: repeat(2, minmax(124px, 1fr)); gap: 13px 20px; } .cmd-hero .vital { display: grid; gap: 4px; align-content: start; } .cmd-hero .v-top { display: flex; align-items: center; gap: 5px; } .cmd-hero .v-label { font-family: var(--num); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; } .cmd-hero .v-num { color: var(--ink-1); } .cmd-hero .v-num small { font-size: 14px; color: var(--ink-3); font-weight: 600; font-family: var(--num); } .cmd-hero .v-mean { font-size: 11px; color: var(--ink-2); line-height: 1.35; } .cmd-hero .v-meter { height: 4px; border-radius: 2px; background: var(--tile); position: relative; overflow: hidden; } .cmd-hero .v-meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--mc, var(--ink-2)); border-radius: 2px; } .cmd-hero .v-chip { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 7px; width: max-content; border: var(--rule) solid var(--hair); background: var(--tile); color: var(--ink-1); } .cmd-hero .v-chip.tone-up, .cmd-hero .v-chip.liq-expanding { color: var(--ink-up, var(--up)); border-color: color-mix(in srgb, var(--up) 45%, var(--hair)); background: color-mix(in srgb, var(--up) 13%, var(--tile)); } .cmd-hero .v-chip.tone-down, .cmd-hero .v-chip.liq-contracting { color: var(--ink-down, var(--down)); border-color: color-mix(in srgb, var(--down) 45%, var(--hair)); background: color-mix(in srgb, var(--down) 13%, var(--tile)); } .cmd-hero .v-chip.tone-warn { color: var(--ink-warn, var(--warn)); border-color: color-mix(in srgb, var(--warn) 45%, var(--hair)); background: color-mix(in srgb, var(--warn) 11%, var(--tile)); } .cmd-hero .v-chip.tone-info { color: var(--ink-info, var(--info, var(--link))); border-color: color-mix(in srgb, var(--info, var(--link)) 45%, var(--hair)); background: color-mix(in srgb, var(--info, var(--link)) 11%, var(--tile)); } @media (max-width: 900px) { .cmd-hero .hero-bar { grid-template-columns: 1fr; gap: 16px; } .cmd-hero .hero-main { border: 0; padding: 14px 0; border-top: var(--rule) solid var(--hair); border-bottom: var(--rule) solid var(--hair); } .cmd-hero h1.hr-name { font-size: 28px; } .cmd-hero .hero-vitals { grid-template-columns: repeat(2, 1fr); } } /* ===================== MARKET STATE board (shared) ===================== The side-by-side .ms-front board ported from the US macro terminal (#646): Market State (verdict + evidence) left, the growth×inflation hero-bar right, the multi-timeframe tape full-width below. Lives INSIDE the .cmd-hero panel so it inherits its theme vars (--num/--hair/--tile/--ink-*/--rule); include this AFTER _cmd_hero.css.j2 so the verdict's .v-* rules win over the vitals' on the left column only (every verdict rule is scoped under .ms-verdict so the hero-bar vitals are never restyled). Colour spent only on signal. */ .cmd-hero .ms-front { --hair-strong: var(--line); --ms-c: var(--ink-3); } .cmd-hero .ms-front.ms-green { --ms-c: var(--up); } .cmd-hero .ms-front.ms-yellow { --ms-c: var(--warn); } .cmd-hero .ms-front.ms-red { --ms-c: var(--down); } /* base = mobile: one tight stack (radar → eyebrow → verdict/evidence → tape → divider → backdrop). At >=1100px it promotes to the side-by-side grid. */ .cmd-hero .ms-front.ms { display: flex; flex-direction: column; gap: 14px; } .cmd-hero .ms-front > .rrx, .cmd-hero .ms-front > .ms-head { margin: 0; } .cmd-hero .ms-front > .ms-top, .cmd-hero .ms-front > .ms-tape { margin-top: 0; } .cmd-hero .ms-front > .ms-divider { margin: 4px 0 0; } @media (min-width: 1100px) { .cmd-hero .ms-front.ms { display: grid; gap: 0 30px; align-items: start; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "radar radar" "head head" "state hero" "tape tape"; } .cmd-hero .ms-front > .rrx { grid-area: radar; margin-bottom: 12px; } .cmd-hero .ms-front > .ms-head { grid-area: head; } .cmd-hero .ms-front > .ms-top { grid-area: state; margin-top: 14px; } .cmd-hero .ms-front > .ms-tape { grid-area: tape; } .cmd-hero .ms-front > .ms-divider { display: none; } /* the backdrop, recomposed for the narrow right column: [locator | regime] on top, the four vitals as a 2×2 strip beneath — never the 3-up layout */ .cmd-hero .ms-front > .hero-bar { grid-area: hero; margin-top: 14px; padding-left: 30px; border-left: var(--rule) solid var(--hair); grid-template-columns: auto minmax(0, 1fr); gap: 12px 18px; } .cmd-hero .ms-front > .hero-bar .hero-main { grid-column: 2; border: 0; padding: 0; } .cmd-hero .ms-front > .hero-bar .hero-vitals { grid-column: 1 / -1; gap: 12px 18px; } } /* Risk Radar — the shared .rrx card (engine/risk_radar_intl.py feeds it on these boards). Same markup + CSS as the US Macro/Stocks pages; global theme tokens only. */ /* ============================================================================ 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; } } /* Shared country Risk Radar DIALOG (.rrd-) — the full US-style modal cloned from #dlg-risk, opened from each country page's pullback-risk entry points. Markup: _risk_radar_dlg.html.j2. Included here because this file is the one style include china / hk / canada already share, and the dialog scopes its own .rrx overrides. */ /* ==================== SHARED country Risk Radar dialog (.rrd-) ==================== Design cloned from the US modal #dlg-risk (templates/dashboard.html.j2 §1-§8): driver headline ladder -> embedded .rrx card -> 2-col signal-tile grid -> context chips -> country factor rows -> leaders -> FX -> one merged footer. Same rhythm, same type ladder, PAGE-NEUTRAL classes so china / hk / canada share one source. Tokens only. The US dialog leans on the mx5 --ink-1/2/3 ladder, which does NOT exist on the country pages — this file uses the global --text / --muted / --line / --panel2 set instead, so the same markup renders correctly in both scopes. RISK COLOUR LAW: severity is painted ONLY from the zh-flipping --down / --warn / --up family (theme.css `html[data-lang="zh"]` swaps --up/--down globally, Asia convention), never a literal green/red hex. Tone is carried on --rrd-c by the .tone-* helper classes so one variable drives icon, chip, bar and value together. Included from _market_state.css.j2 (the single style include already shared by china / hk / canada). Markup: _risk_radar_dlg.html.j2. ============================ */ .rrd { font-family: var(--font-ui, inherit); --rrd-c: var(--muted); } .rrd, .rrd * { min-width: 0; } .rrd .tone-down { --rrd-c: var(--down); } .rrd .tone-warn { --rrd-c: var(--warn); } .rrd .tone-up { --rrd-c: var(--up); } .rrd .tone-muted{ --rrd-c: var(--muted); } /* ── headline ladder (clone of .mx5-dlg-driver-hd) ───────────────────────── */ .rrd-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 16px 18px; border-radius: 12px; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); } .rrd-hd-ico { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--rrd-c); background: color-mix(in srgb, var(--rrd-c) 13%, transparent); } .rrd-hd-ico svg { width: 20px; height: 20px; display: block; } .rrd-hd-txt { min-width: 0; } .rrd-hd-label { font-size: 13px; font-weight: 700; margin-bottom: 3px; color: var(--rrd-c); } .rrd-hd-sub { font-size: 11px; line-height: 1.5; color: var(--muted); } .rrd-hd-sub + .rrd-hd-sub { margin-top: 3px; } .rrd-hd-sub b { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); } /* ── section furniture (clone of .mx5-dlg-eyebrow / .mx5-dlg-sep) ─────────── */ .rrd-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; } html[data-lang="zh"] .rrd-eyebrow { letter-spacing: 0; } .rrd-sep { height: 1px; margin: 22px 0; background: color-mix(in srgb, var(--text) 8%, transparent); } .rrd-absent { font-size: 11.5px; line-height: 1.5; color: var(--muted); } /* ── signal tiles (clone of .rkc-sig-grid / .rkc-sig) ─────────────────────── */ .rrd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 4px; } @media (max-width: 700px) { .rrd-tiles { grid-template-columns: 1fr; } } .rrd-tile { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: 11px; background: color-mix(in srgb, var(--text) 3%, transparent); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); transition: border-color .2s ease, transform .16s ease, background .2s ease; } .rrd-tile[data-tip-en] { cursor: help; } .rrd-tile:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--rrd-c) 34%, var(--line)); background: color-mix(in srgb, var(--text) 5%, transparent); } @media (prefers-reduced-motion: reduce) { .rrd-tile:hover { transform: none; } } .rrd-tile-ico { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--rrd-c); background: color-mix(in srgb, var(--rrd-c) 12%, transparent); } .rrd-tile-ico svg { width: 15px; height: 15px; display: block; } .rrd-tile-body { flex: 1; min-width: 0; } .rrd-tile-lbl { font: 700 12px/1.25 var(--font-ui, inherit); color: var(--text); } .rrd-tile-state { font-size: 11px; line-height: 1.45; color: var(--muted); margin-top: 2px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; } .rrd-tile-state b { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); } .rrd-tile-chip { display: inline-flex; align-items: center; white-space: nowrap; font: 700 10px/1 var(--font-ui, inherit); letter-spacing: .03em; padding: 2px 6px; border-radius: 5px; color: var(--rrd-c); background: color-mix(in srgb, var(--rrd-c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--rrd-c) 32%, transparent); } html[data-lang="zh"] .rrd-tile-chip { letter-spacing: 0; } .rrd-tile-tip { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: 0 0 auto; margin-left: auto; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); color: var(--muted); font: 700 10px/1 var(--font-ui, inherit); cursor: help; user-select: none; transition: border-color .2s, color .2s; } .rrd-tile-tip:hover { border-color: var(--rrd-c); color: var(--rrd-c); } /* calendar tile stacks its dated rows under the label */ .rrd-cal { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; } .rrd-cal-row { display: flex; align-items: baseline; gap: 7px; font-size: 11px; color: var(--muted); line-height: 1.35; } .rrd-cal-d { flex: 0 0 auto; font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); letter-spacing: .01em; } .rrd-cal-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── context chips (clone of .mx5-dlg-chips-row / .mx5-dlg-chip) ──────────── */ .rrd-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rrd-chips-k { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } html[data-lang="zh"] .rrd-chips-k { letter-spacing: 0; } .rrd-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--muted); background: color-mix(in srgb, var(--rrd-c) 9%, transparent); border: 1px solid color-mix(in srgb, var(--rrd-c) 30%, transparent); } .rrd-chip[data-tip-en] { cursor: help; } .rrd-chip b { font-weight: 700; color: var(--rrd-c); } /* ── country factor rows (label · bar · figure · one-word read) ───────────── */ .rrd-frows { display: flex; flex-direction: column; gap: 2px; } .rrd-frow { display: grid; grid-template-columns: minmax(110px, 1.25fr) minmax(0, 1fr) 62px 62px; align-items: center; gap: 12px; padding: 8px 0; font-size: 12px; border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .rrd-frow:first-child { border-top: 0; } .rrd-frow[data-tip-en] { cursor: help; } .rrd-fname { color: var(--text); font-weight: 600; } .rrd-fbar { height: 7px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--text) 7%, transparent); } .rrd-fbar i { display: block; height: 100%; border-radius: 4px; transform-origin: 0 50%; background: linear-gradient(90deg, color-mix(in srgb, var(--rrd-c) 50%, transparent), var(--rrd-c)); } .rrd-fval { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); } .rrd-fread { text-align: right; font-size: 11px; font-weight: 700; color: var(--rrd-c); } @media (max-width: 640px) { .rrd-frow { grid-template-columns: minmax(0, 1fr) 56px 56px; } .rrd-frow .rrd-fbar { display: none; } } .rrd-fnote { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--muted); } /* ── gauges slot (CN deep-drawdown / slowdown charts ported from the old dialog) ─ */ .rrd-gauges { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } @media (max-width: 820px) { .rrd-gauges { grid-template-columns: minmax(0, 1fr); } } .rrd-gauge-hd { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; } .rrd-gauge-name { font: 700 12px/1.25 var(--font-ui, inherit); color: var(--text); } .rrd-gauge-score { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 800; color: var(--rrd-c); line-height: 1; } .rrd-gauge-read { font-size: 11px; font-weight: 700; color: var(--rrd-c); } .rrd-gauge-chart { max-width: 100%; overflow-x: auto; } .rrd-gauge-chart img, .rrd-gauge-chart svg, .rrd-gauge-chart .chart-ph { max-width: 100%; } /* ── leaders (clone of .rkc-ldr-*) ────────────────────────────────────────── */ .rrd-ldr-line { font: 600 12.5px/1.45 var(--font-ui, inherit); color: var(--text); margin-bottom: 10px; } .rrd-ldr-rows { display: flex; flex-direction: column; gap: 6px; } .rrd-ldr-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 1fr 54px; align-items: center; gap: 9px; } /* no magnitude to draw -> the bar column is not emitted at all */ .rrd-ldr-row.is-plain { grid-template-columns: 58px minmax(0, 1fr) 54px; } .rrd-ldr-tkr { font: 700 11px/1 var(--font-mono, ui-monospace, 'SF Mono', monospace); color: var(--text); letter-spacing: .02em; } .rrd-ldr-name { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rrd-ldr-track { height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--text) 6%, transparent); overflow: hidden; } .rrd-ldr-fill { height: 100%; border-radius: 5px; transform-origin: 0 50%; background: linear-gradient(90deg, color-mix(in srgb, var(--rrd-c) 55%, transparent), var(--rrd-c)); } .rrd-ldr-val { text-align: right; font: 800 11px/1 var(--font-ui, inherit); font-family: var(--num); font-variant-numeric: tabular-nums; color: var(--rrd-c); } @media (max-width: 640px) { .rrd-ldr-row { grid-template-columns: 58px minmax(0, 1fr) 54px; } .rrd-ldr-row .rrd-ldr-track { display: none; } } /* ── risk ladder (clone of #dlg-risk .scare-ladder, §6 of the US modal) ───── */ .rrd-ladder { display: flex; flex-direction: column; gap: 2px; } .rrd-lrow { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(0, 1fr) 38px 66px; align-items: center; gap: 10px; padding: 7px 0; font-size: 12px; border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .rrd-lrow:first-child { border-top: 0; } .rrd-lname { color: var(--text); font-weight: 600; } .rrd-lscore { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 800; color: var(--rrd-c); } .rrd-lband { justify-self: end; font: 700 9.5px/1 var(--font-ui, inherit); letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; white-space: nowrap; color: var(--rrd-c); background: color-mix(in srgb, var(--rrd-c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rrd-c) 30%, transparent); } html[data-lang="zh"] .rrd-lband { letter-spacing: 0; } @media (max-width: 640px) { .rrd-lrow { grid-template-columns: minmax(0, 1fr) 38px 62px; } .rrd-lrow .rrd-fbar { display: none; } } /* ── FX rows ──────────────────────────────────────────────────────────────── */ .rrd-fx { display: flex; flex-direction: column; gap: 2px; } .rrd-fxrow { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 0; font-size: 12px; border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .rrd-fxrow:first-child { border-top: 0; } .rrd-fxk { color: var(--text); font-weight: 600; } .rrd-fxv { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; color: var(--muted); } .rrd-fxnum { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); } /* ── merged footer (clone of .rsx-dlg-footer) ─────────────────────────────── */ .rrd-foot { font-size: 10.5px; line-height: 1.55; color: var(--muted); margin-top: 4px; } /* ── the embedded .rrx card, dialog-scoped (mirrors the #dlg-risk overrides) ─ The card's own stacked prose rows are REBUILT above as tiles / rows, so the duplicates are suppressed here ONLY — the shared board default (the .rrx card on the china / hk / canada home boards) is untouched. The de-escalation panel (.rrx-rec) has no tile twin, so it STAYS. */ .rrd .rrx { box-shadow: none; border-left-width: 3px; background: color-mix(in srgb, var(--rc) 5%, var(--panel)); border-color: color-mix(in srgb, var(--rc) 22%, var(--line)); } .rrd .rrx .rrx-ev, .rrd .rrx .rrx-do, .rrd .rrx .rrx-cgl, .rrd .rrx .rrx-fxc, .rrd .rrx .rrx-trk, .rrd .rrx .rrx-audit { display: none; } .rrd .rrx .rrx-ramp { padding-top: 22px; } .rrd .rrx .rrx-tk { height: 66px; } /* header strip */ .cmd-hero .ms-head { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 0 0 4px; } .cmd-hero .ms-eyebrow { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-family: var(--num); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); margin: 0; } html[data-lang="zh"] .cmd-hero .ms-eyebrow { letter-spacing: 0; } .cmd-hero .ms-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ms-c); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-c) 20%, transparent); } .cmd-hero .ms-date { font-family: var(--num); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; } /* top: verdict | evidence */ .cmd-hero .ms-top { display: grid; grid-template-columns: minmax(0, 236px) minmax(0, 1fr); margin-top: 16px; } .cmd-hero .ms-verdict { padding-right: 22px; border-right: var(--rule) solid var(--hair); } .cmd-hero .ms-evidence { padding-left: 22px; min-width: 0; } @media (max-width: 760px) { .cmd-hero .ms-top { grid-template-columns: 1fr; } .cmd-hero .ms-verdict { padding: 0 0 16px; border-right: 0; border-bottom: var(--rule) solid var(--hair-strong); } .cmd-hero .ms-evidence { padding: 16px 0 0; } } /* verdict column — every rule scoped under .ms-verdict so the hero vitals' .v-label / .v-meter are never restyled */ .cmd-hero .ms-verdict .v-label { font-family: var(--num); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 9px; } .cmd-hero .ms-verdict .v-word { font-size: 40px; line-height: .94; font-weight: 800; letter-spacing: -.025em; margin: 0; color: var(--ms-c); display: flex; align-items: center; gap: .2em; } .cmd-hero .ms-verdict .v-word .arr { font-family: var(--num); font-size: .42em; font-weight: 700; transform: translateY(-.04em); } html[data-lang="zh"] .cmd-hero .ms-verdict .v-word { letter-spacing: 0; } .cmd-hero .ms-verdict .v-scorerow { display: flex; align-items: baseline; gap: 7px; margin-top: 11px; } .cmd-hero .ms-verdict .v-score { font-family: var(--num); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--ink-1); } .cmd-hero .ms-verdict .v-outof { font-family: var(--num); font-size: 13px; color: var(--ink-3); } .cmd-hero .ms-verdict .v-meter { margin-top: 12px; height: 6px; border-radius: 3px; position: relative; overflow: hidden; background: linear-gradient(90deg, color-mix(in srgb, var(--down) 30%, var(--panel2)) 0 42%, color-mix(in srgb, var(--warn) 30%, var(--panel2)) 42% 60%, color-mix(in srgb, var(--up) 30%, var(--panel2)) 60% 100%); } .cmd-hero .ms-verdict .v-meter .tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ms-c); border-radius: 2px; box-shadow: 0 0 0 2px var(--panel); } .cmd-hero .ms-verdict .v-scale { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--num); font-size: 9.5px; letter-spacing: .02em; color: var(--ink-3); } .cmd-hero .ms-verdict .v-thesis { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-1); } .cmd-hero .ms-verdict .v-override { margin: 10px 0 0; display: flex; align-items: flex-start; gap: 7px; padding: 8px 11px; border-radius: 7px; border: var(--rule) solid color-mix(in srgb, var(--act) 38%, var(--hair)); background: color-mix(in srgb, var(--act) 11%, transparent); font-size: 11.5px; line-height: 1.4; color: var(--ink-1); } .cmd-hero .ms-verdict .v-override .ic { color: var(--ink-act, var(--act)); flex: none; font-size: 12px; line-height: 1.3; } .cmd-hero .ms-verdict .v-flip { margin: 13px 0 0; padding: 8px 11px; border-left: 2px solid var(--warn); background: color-mix(in srgb, var(--warn) 7%, transparent); font-size: 12px; line-height: 1.45; color: var(--ink-2); } /* evidence matrix — one tight row per factor (arrow · title · bar · score) */ .cmd-hero .e-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 2px; } .cmd-hero .e-title { font-family: var(--num); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin: 0; } .cmd-hero .e-cols { font-family: var(--num); font-size: 9.5px; letter-spacing: .06em; color: var(--ink-3); } .cmd-hero .ms-f { border-top: var(--rule) solid var(--hair); display: grid; align-items: center; grid-template-columns: 14px minmax(0, 1fr) 70px 28px; column-gap: 11px; padding: 6px 3px; } .cmd-hero .ms-f.tone-good { --ft: var(--up); } .cmd-hero .ms-f.tone-warn { --ft: var(--warn); } .cmd-hero .ms-f.tone-bad { --ft: var(--down); } .cmd-hero .ms-f.tone-flat { --ft: var(--ink-3); } .cmd-hero .ms-f .f-dir { font-family: var(--num); font-size: 11px; line-height: 1; text-align: center; color: var(--ft); } /* the title IS the hover target: reuse .help/.tip but strip the ?-circle to plain dotted text */ .cmd-hero .ms-f .f-name.help { position: relative; display: block; min-width: 0; width: auto; height: auto; border: 0; border-radius: 0; margin: 0; overflow: visible; cursor: help; } .cmd-hero .ms-f .f-name .f-txt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ink-1); text-decoration: underline dotted color-mix(in srgb, var(--ink-3) 55%, transparent); text-underline-offset: 3px; } .cmd-hero .ms-f .f-name.help:hover .f-txt { text-decoration-color: var(--ink-2); } html[data-lang="zh"] .cmd-hero .ms-f .f-name .f-txt { text-underline-offset: 2px; } .cmd-hero .ms-f .f-name .tip { width: 248px; font-weight: 400; } .cmd-hero .ms-f .f-tipread { display: block; color: var(--ink-1); line-height: 1.45; margin-bottom: 7px; } .cmd-hero .ms-f .f-tipmetrics { display: flex; flex-wrap: wrap; gap: 6px 7px; } .cmd-hero .ms-f .f-tone { height: 4px; border-radius: 2px; background: var(--panel2); overflow: hidden; } .cmd-hero .ms-f .f-tone i { display: block; height: 100%; border-radius: 2px; background: var(--ft); } .cmd-hero .ms-f .f-score { font-family: var(--num); font-size: 15px; font-weight: 700; text-align: right; line-height: 1; color: var(--ft); } .cmd-hero .ms-metric { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 9px; background: var(--tile); border: var(--rule) solid var(--hair); border-radius: 6px; font-size: 11px; color: var(--ink-3); } .cmd-hero .ms-metric b { font-family: var(--num); font-weight: 700; color: var(--ink-1); } @media (max-width: 760px) { .cmd-hero .ms-f { grid-template-columns: 14px minmax(0, 1fr) 72px 26px; column-gap: 9px; } } @media (max-width: 560px) { .cmd-hero .ms-f .f-score { font-size: 14px; } } /* multi-timeframe tape */ .cmd-hero .ms-tape { margin-top: 16px; padding-top: 13px; border-top: var(--rule) solid var(--hair-strong); } .cmd-hero .tape-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .cmd-hero .tape-title { display: inline-flex; align-items: center; gap: 7px; font-family: var(--num); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin: 0; } html[data-lang="zh"] .cmd-hero .tape-title { letter-spacing: 0; } .cmd-hero .tape-sub { font-family: var(--num); font-size: 9.5px; letter-spacing: .04em; color: var(--ink-3); } .cmd-hero table.ms-tapetbl { width: 100%; border-collapse: collapse; } .cmd-hero table.ms-tapetbl th { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 6px 6px; border-bottom: var(--rule) solid var(--hair); } .cmd-hero table.ms-tapetbl th.l, .cmd-hero table.ms-tapetbl td.l { text-align: left; } .cmd-hero table.ms-tapetbl th.r, .cmd-hero table.ms-tapetbl td.r { text-align: right; } .cmd-hero table.ms-tapetbl td { padding: 6px 6px; border-bottom: var(--rule) solid var(--hair); } .cmd-hero table.ms-tapetbl tr:last-child td { border-bottom: 0; } .cmd-hero .t-inst { font-size: 13px; font-weight: 600; color: var(--ink-1); } .cmd-hero .ms-cell2 { display: inline-flex; align-items: baseline; gap: 6px; justify-content: center; font-family: var(--num); } .cmd-hero .ms-cell2 .ar { font-size: 11px; line-height: 1; } .cmd-hero .ms-cell2 .rsi { font-size: 12.5px; color: var(--ink-2); } .cmd-hero .ms-cell2.good, .cmd-hero .ms-conf.good { color: var(--ink-up, var(--up)); } .cmd-hero .ms-cell2.bad, .cmd-hero .ms-conf.bad { color: var(--ink-down, var(--down)); } .cmd-hero .ms-cell2.flat, .cmd-hero .ms-conf.warn, .cmd-hero .ms-conf.flat { color: var(--ink-warn, var(--warn)); } .cmd-hero .ms-conf { font-size: 12px; font-weight: 700; white-space: nowrap; } .cmd-hero .ms-confstrip { display: flex; flex-wrap: wrap; gap: 8px; } .cmd-hero .ms-confchip { display: inline-flex; align-items: baseline; gap: 9px; min-width: 0; padding: 7px 10px; border: var(--rule) solid var(--hair); border-radius: 8px; background: var(--tile); } .cmd-hero .ms-confchip.good { border-color: color-mix(in srgb, var(--up) 32%, var(--hair)); } .cmd-hero .ms-confchip.bad { border-color: color-mix(in srgb, var(--down) 32%, var(--hair)); } .cmd-hero .ms-confchip.warn { border-color: color-mix(in srgb, var(--warn) 32%, var(--hair)); } .cmd-hero .ms-tech { margin-top: 12px; padding-top: 12px; border-top: var(--rule) solid var(--hair); } .cmd-hero .ms-tech-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; font-weight: 700; } .cmd-hero .ms-tech-head .note { font-weight: 400; text-transform: none; } .cmd-hero .ms-tech-stat { font-family: var(--num); font-size: 17px; font-weight: 800; color: var(--ink-1); } .cmd-hero .ms-tech .mtf-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } @media (max-width: 560px) { .cmd-hero table.ms-tapetbl th, .cmd-hero table.ms-tapetbl td { padding-left: 3px; padding-right: 3px; } .cmd-hero .ms-cell2 .rsi { display: none; } .cmd-hero .ms-confchip { width: 100%; justify-content: space-between; } } .cmd-hero .ms-caveat { margin: 9px 0 0; font-size: 10.5px; line-height: 1.45; color: var(--ink-3); } /* divider into the macro-backdrop column (full-width label on mobile, hidden on the desktop grid) */ .cmd-hero .ms-divider { display: flex; align-items: center; gap: 12px; font-family: var(--num); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .cmd-hero .ms-divider::after { content: ""; flex: 1; height: 1px; background: var(--hair); } html[data-lang="zh"] .cmd-hero .ms-divider { letter-spacing: 0; } @media (prefers-reduced-motion: reduce) { .cmd-hero .qm { transition: none; } } body.page-china, body.page-china-stocks { padding-top: 26px; } /* ── W8-E: Standout table view ─────────────────────────────────────────── */ .st-view-toggle { display:inline-flex; gap:3px; padding:3px; border-radius:8px; background:var(--panel2,color-mix(in srgb,var(--muted) 10%,var(--panel))); border:1px solid var(--line); margin-left:10px; vertical-align:middle; } .st-view-toggle button { font:inherit; font-size:12px; font-weight:700; cursor:pointer; border:1px solid transparent; background:transparent; color:var(--muted); padding:4px 9px; border-radius:5px; line-height:1; transition:all .12s; } .st-view-toggle button[aria-selected="true"] { background:var(--panel); color:var(--text); border-color:var(--line); box-shadow:0 1px 3px rgba(0,0,0,.1); } #stocktable-wrap { display:none; } #standouts.st-table-mode #stocktable-wrap { display:block; } #standouts.st-table-mode .nb-grid-section { display:none; } /* count chips row */ #st-count-chips { display:inline-flex; gap:5px; flex-wrap:wrap; align-items:center; margin:8px 0; } .st-chip { display:inline-block; font-size:10px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; } .st-chip-entry { background:color-mix(in srgb,var(--up) 14%,transparent); color:var(--ink-up, var(--up)); border:1px solid color-mix(in srgb,var(--up) 35%,transparent); } .st-chip-ran { background:color-mix(in srgb,var(--muted) 12%,transparent); color:var(--muted); border:1px solid var(--line); } .st-chip-rip { background:color-mix(in srgb,var(--link) 12%,transparent); color:var(--ink-link, var(--link)); border:1px solid color-mix(in srgb,var(--link) 30%,transparent); } .st-chip-knife { background:color-mix(in srgb,var(--down) 12%,transparent); color:var(--ink-down, var(--down)); border:1px solid color-mix(in srgb,var(--down) 25%,transparent); } /* ── W-FCT: stage facet bar (grid view) — browse one shelf at a time ──── stgf- prefix on purpose: .stf-* belongs to the stocktable.js filter chrome (it already ships a .stf-bar) — do not reuse that prefix here. */ .stgf-bar { margin:2px 0 12px; } .stgf-n { display:inline-block; margin-left:6px; font-size:10px; font-weight:800; padding:1px 7px; border-radius:999px; vertical-align:1px; background:color-mix(in srgb,var(--muted) 14%,transparent); color:var(--muted); } .sb-seg button[aria-selected="true"] .stgf-n { background:color-mix(in srgb,var(--link) 16%,transparent); color:var(--ink-link, var(--link)); } /* facet visibility — tagged groups not matching the active facet hide; facet "all" matches no rule so everything stays visible */ #standouts[data-stfacet="entry"] .nb-grid-section [data-stf]:not([data-stf~="entry"]), #standouts[data-stfacet="rip"] .nb-grid-section [data-stf]:not([data-stf~="rip"]), #standouts[data-stfacet="early"] .nb-grid-section [data-stf]:not([data-stf~="early"]), #standouts[data-stfacet="ran"] .nb-grid-section [data-stf]:not([data-stf~="ran"]) { display:none; } /* the ripening shelf is shared by two facets — split its zones */ #standouts[data-stfacet="rip"] .rip-zone:not(.rz-ready) { display:none; } #standouts[data-stfacet="early"] .rip-zone.rz-ready { display:none; } /* ── unified live grid key (prophet board priority engine G0.2, 2026-08-02) ── One quiet line above 111 cards. Its bullet is a MINIATURE OF THE GLOW — same --pv-buy token, same aura recipe as .pvcard.pv-featured — so the sentence "glowing = act today" shows the reader the thing it is naming instead of asking them to hold a colour in memory while they scroll. It is the only ornament added to this panel; the featured aura keeps the boldness budget. Pinned to --pv-buy so it matches the board's bullish convention in either language: green in English and red in Chinese. */ .cn-gridkey { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:11.5px; line-height:1.45; color:var(--muted); } .cn-gridkey-dot { flex:none; width:9px; height:9px; border-radius:50%; background:color-mix(in srgb,var(--pv-buy) 78%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--pv-buy) 45%,transparent), 0 0 10px -1px color-mix(in srgb,var(--pv-buy) 75%,transparent); } @media(max-width:560px) { .cn-gridkey { align-items:flex-start; font-size:11px; } .cn-gridkey-dot { margin-top:4px; } } /* Phone: ONE mark per card. The grid goes 2-up below 560px (~150px cards at 390), where a second chip wraps to a new line — and a wrapped row on some cards and not others breaks the prophet card's founding contract that the tracker and zone rows line up across a grid row. The marks list is already built in descending importance, so keeping only the first chip keeps the RIGHT one: ★ Featured on a pick, the gate it failed on everything else. It stays a WORD, never collapsed to a glyph — that is the macro's own mobile law (a colour-only mark is not a mark). */ @media(max-width:560px) { #standouts .nbgrid .pv-mk-i ~ .pv-mk-i { display:none; } } /* China Prophet v2 depth lanes. The featured shelf keeps full decision cards; the much wider discovery population uses compact, collapsed cards so breadth remains inspectable without masquerading as another buy board. */ .cn-depth { margin-top:12px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--muted) 3%,var(--panel)); overflow:hidden; } .cn-depth > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px; padding:10px 12px; color:var(--text); font-size:12px; font-weight:750; user-select:none; } .cn-depth > summary::-webkit-details-marker { display:none; } .cn-depth > summary::before { content:"›"; font-size:17px; line-height:1; color:var(--muted); transform:rotate(0deg); transition:transform .13s; } .cn-depth[open] > summary::before { transform:rotate(90deg); } .cn-depth > summary .cn-depth-n { margin-left:auto; border-radius:999px; padding:1px 8px; color:var(--muted); background:color-mix(in srgb,var(--muted) 12%,transparent); font-size:10px; font-variant-numeric:tabular-nums; } .cn-depth-sub { display:block; color:var(--muted); font-size:10.5px; font-weight:500; } .cn-depth-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:7px; padding:0 10px 11px; } .cn-depth-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 10px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:inherit; min-width:0; } .cn-depth-card:hover { border-color:var(--link); } .cn-depth-id { min-width:0; } .cn-depth-tk { color:var(--text); font-weight:800; font-size:11.5px; } .cn-depth-name { color:var(--muted); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cn-depth-score { color:var(--text); font-size:11.5px; font-weight:850; font-variant-numeric:tabular-nums; text-align:right; } .cn-depth-metrics { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:4px; } .cn-depth-chip { border:1px solid var(--line); border-radius:999px; padding:1px 6px; color:var(--muted); font-size:10px; line-height:1.45; white-space:nowrap; } .cn-depth-reason { grid-column:1/-1; color:var(--muted); font-size:10.5px; line-height:1.4; } .cn-depth.late > summary { color:var(--ink-warn, var(--warn)); } .cn-depth.forming > summary { color:var(--muted); } @media(max-width:560px) { .cn-depth-grid { grid-template-columns:1fr; } .cn-depth > summary { align-items:flex-start; } .cn-depth-name,.cn-depth-reason { font-size:11px; } .cn-depth-chip { font-size:10.5px; } } /* filter row */ /* filter-row + column-chooser chrome (.stf-*) is injected by stocktable.js since v3 */ /* table wrapper — horizontal scroll, sticky first col */ .st-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; border:1px solid var(--line); border-radius:9px; } .st-table { border-collapse:collapse; width:100%; font-size:12px; font-variant-numeric:tabular-nums; } .st-table thead { position:sticky; top:0; z-index:4; background:var(--panel2,color-mix(in srgb,var(--muted) 9%,var(--panel))); } .st-table th { padding:7px 10px; font-size:11px; font-weight:700; color:var(--muted); text-align:left; white-space:nowrap; border-bottom:2px solid var(--line); user-select:none; } .st-table th.st-sortable { cursor:pointer; } .st-table th.st-sortable:hover { color:var(--text); } .st-table td { padding:6px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; vertical-align:middle; } .st-table td.st-r, .st-table th.st-r { text-align:right; } .st-table tbody tr:last-child td { border-bottom:none; } .st-table tbody tr:hover td { background:color-mix(in srgb,var(--link) 5%,transparent); } /* sticky first column */ .st-sticky-col { position:sticky; left:0; z-index:2; background:var(--panel); } thead .st-sticky-col { z-index:5; background:var(--panel2,color-mix(in srgb,var(--muted) 9%,var(--panel))); } /* row accents by stage */ .st-row-entry td { background:color-mix(in srgb,var(--up) 4%,transparent); } .st-row-entry td.st-sticky-col { background:color-mix(in srgb,var(--up) 8%,var(--panel)); } .st-row-entry td:first-child { box-shadow:inset 3px 0 0 var(--up); } .st-row-ran td:first-child { box-shadow:inset 3px 0 0 var(--muted); } .st-row-ready td:first-child { box-shadow:inset 3px 0 0 var(--link); } .st-row-basing td:first-child { box-shadow:inset 3px 0 0 color-mix(in srgb,var(--link) 45%,var(--muted)); } .st-row-falling td:first-child { box-shadow:inset 3px 0 0 var(--down); } .st-row-falling td { color:var(--muted); } /* sort arrow */ .st-sarrow { font-size:8px; margin-left:2px; opacity:.28; } .st-sarrow-idle { font-size:8px; } .st-table th:has(.st-sarrow:not(.st-sarrow-idle)) .st-sarrow { opacity:.9; color:var(--ink-link, var(--link)); } /* cell colors */ .st-pos { color:var(--ink-up, var(--up)); font-weight:600; } .st-neg { color:var(--ink-down, var(--down)); font-weight:600; } .st-muted { color:var(--muted); } .st-new-dot::before { content:"NEW"; display:inline-block; font-size:8px; font-weight:800; background:var(--up); color:#fff; padding:0 4px; border-radius:4px; margin-right:4px; vertical-align:1px; } html[data-lang="zh"] .st-new-dot::before { content:"新"; font-size:10px; } /* th tooltip */ .st-th-tip { display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border-radius:50%; border:1px solid var(--muted); color:var(--muted); font-size:9px; font-weight:700; cursor:help; position:relative; vertical-align:1px; margin-left:3px; } .st-th-tip::after { content:attr(data-tip-en); display:none; position:absolute; bottom:150%; left:50%; transform:translateX(-50%); width:220px; max-width:90vw; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:11px; font-weight:400; color:var(--text); text-align:left; white-space:normal; box-shadow:var(--popover-shadow,0 3px 12px rgba(0,0,0,.18)); z-index:30; } html[data-lang="zh"] .st-th-tip::after { content:attr(data-tip-zh); } .st-th-tip:hover::after { display:block; } /* long names truncate instead of widening the table */ .st-table td.st-name { max-width:230px; overflow:hidden; text-overflow:ellipsis; } /* mobile: keep EVERY column but let the lower-priority ones (sector / price / mkt-cap / off-high, marked .st-hide-sm) scroll horizontally instead of vanishing. The identity stays on screen first (Stage · Ticker · Name), and the sticky Stage column keeps the row anchored while the reader swipes across to the metrics. Spacing is tightened and the Name column is language-aware: long English names truncate hard, while the compact 3–4-character Chinese names get a narrower cap. */ @media (max-width:680px) { .st-table { font-size:10.5px; } .st-table td, .st-table th { padding:4px 6px; } .st-table .st-chip { font-size:8px; padding:1px 5px; } .st-table .st-sarrow-idle { display:none; } .st-table td.st-name, .st-table th.st-name { max-width:96px; } /* long EN names truncate */ html[data-lang="zh"] .st-table td.st-name, html[data-lang="zh"] .st-table th.st-name { max-width:60px; } /* compact CJK names */ /* the .st-hide-sm columns are now on-screen (scrollable) here, so the shared stocktable.js rule that hides their column-chooser rows at ≤680px is wrong for this page — restore them so they can still be toggled off. (Higher specificity than the injected `.stf-ch-row.st-hide-sm{display:none}`.) */ body.page-china-stocks .stf-ch-row.st-hide-sm { display:flex; } } /* ===== MX5 CHINA GLANCE REDESIGN (body.page-china scope) ===== */ body.page-china .aurora{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden} /* Base aurora: green blobs (risk-on default) */ body.page-china .aurora::before{content:"";position:absolute;top:-220px;left:12%;width:820px;height:560px;border-radius:50%;filter:blur(90px);background:radial-gradient(ellipse,rgba(34,217,122,.12) 0%,transparent 70%)} body.page-china .aurora::after{content:"";position:absolute;bottom:-100px;right:-100px;width:700px;height:600px;border-radius:50%;filter:blur(90px);background:radial-gradient(ellipse,rgba(99,102,241,.10) 0%,transparent 70%)} /* Aurora inner blob (au-a3) — default green */ body.page-china .aurora .au-a3{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:600px;height:500px;border-radius:50%;filter:blur(90px);background:radial-gradient(ellipse,rgba(34,217,122,.07) 0%,transparent 70%)} /* State tint: yellow (Mixed) */ body.page-china .aurora.au-yellow::before{background:radial-gradient(ellipse,rgba(245,158,11,.10) 0%,transparent 70%)} body.page-china .aurora.au-yellow .au-a3{background:radial-gradient(ellipse,rgba(245,158,11,.06) 0%,transparent 70%)} /* State tint: red (Risk-off) */ body.page-china .aurora.au-red::before{background:radial-gradient(ellipse,rgba(239,68,68,.10) 0%,transparent 70%)} body.page-china .aurora.au-red .au-a3{background:radial-gradient(ellipse,rgba(239,68,68,.06) 0%,transparent 70%)} /* LIGHT: no aurora. "Much fainter" was the wrong fix — an additive bloom that reads as light on a black field reads as INK on paper, and a 90px-blurred colour wash over a pale canvas is a stain, not atmosphere. It was most obvious as the soft concentric wash sitting in the empty canvas below the fold (the layer is position:fixed, so it spans the whole scroll). The state it tints is already said out loud by the score, the verdict word and the regime pill, so nothing is lost. Depth in light comes from the panel/canvas value step and the shadow recipe. Dark keeps the aurora untouched. */ [data-theme="light"] body.page-china .aurora{display:none} /* Reduced-motion: no animations */ @media(prefers-reduced-motion:reduce){body.page-china .aurora,body.page-china .aurora::before,body.page-china .aurora::after,body.page-china .aurora .au-a3{animation:none}} /* zh direction-convention mirrors (operator ruling 2026-07-21): the aurora state wash and the big-score glow are literal rgba (not token-driven), so they can't flip via the --up/--down remap — mirror them here. green wash #22d97a ↔ red wash #ef4444 (light mode: 34,217,122 ↔ 220,38,38); yellow is direction-neutral and stays. */ html[data-lang="zh"] body.page-china .aurora::before{background:radial-gradient(ellipse,rgba(239,68,68,.12) 0%,transparent 70%)} html[data-lang="zh"] body.page-china .aurora .au-a3{background:radial-gradient(ellipse,rgba(239,68,68,.07) 0%,transparent 70%)} html[data-lang="zh"] body.page-china .aurora.au-yellow::before{background:radial-gradient(ellipse,rgba(245,158,11,.10) 0%,transparent 70%)} html[data-lang="zh"] body.page-china .aurora.au-yellow .au-a3{background:radial-gradient(ellipse,rgba(245,158,11,.06) 0%,transparent 70%)} html[data-lang="zh"] body.page-china .aurora.au-red::before{background:radial-gradient(ellipse,rgba(34,217,122,.10) 0%,transparent 70%)} html[data-lang="zh"] body.page-china .aurora.au-red .au-a3{background:radial-gradient(ellipse,rgba(34,217,122,.06) 0%,transparent 70%)} /* (the light+zh aurora mirrors are gone with the light aurora itself — the dark zh mirrors above still bind, since 红涨绿跌 only has to hold where it renders) */ html[data-lang="zh"] body.page-china .ms-green .cnx-big-score{text-shadow:0 0 36px rgba(239,68,68,.3)} html[data-lang="zh"] body.page-china .ms-red .cnx-big-score{text-shadow:0 0 36px rgba(34,217,122,.3)} /* The redesigned macro page lays out with its own .cnx-tiles/.rack grids, so the theme's 12-column .grid must be a plain block here — otherwise .cnx-wrap is placed into a single content-sized grid column and the page renders at ~half width. */ body.page-china .grid{display:block} /* width parity with US macro.html: the body padding rule above already centers content at 1500px (same as page-macro) — no extra cap here. */ body.page-china .cnx-wrap{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:0} /* ═══ MX5 Aurora-Glass token layer (ported from US macro.html; §Model routing design lane) ═══ The US mx5-* scorecard components (hero gauge, path graph, market tiles, sentiment odometer) read these tokens. theme.css already provides --up/--down/--warn/--ok/--act (all zh-flip aware); this layer adds the glass surface + ink + mx5 accent tokens they need. Values mirror the US block verbatim so a future DRY extraction is mechanical. */ body.page-china{ --ink-1: var(--text); --ink-2: color-mix(in srgb, var(--text) 64%, transparent); --ink-3: var(--muted); --isle-brief: #38c472; --glass-border: var(--mx5-glass-border); --mx5-glass-bg: rgba(16,22,30,.55); --mx5-pop-bg: rgba(13,18,26,.96); --mx5-glass-border: rgba(255,255,255,.12); --mx5-glass-shadow: 0 8px 32px rgba(0,0,0,.55), 0 1.5px 0 rgba(255,255,255,.07) inset; --mx5-glass-hover: 0 12px 40px rgba(0,0,0,.65), 0 1.5px 0 rgba(255,255,255,.09) inset; --mx5-blur: blur(20px); --mx5-radius-card: 18px; --mx5-radius-pill: 999px; --mx5-accent: var(--up); --mx5-accent-glow: color-mix(in srgb, var(--up) 30%, transparent); --mx5-accent-dim: color-mix(in srgb, var(--up) 10%, transparent); --mx5-accent-ink: var(--ink-up, var(--up)); --mx5-warn: var(--warn); --mx5-warn-dim: color-mix(in srgb, var(--warn) 10%, transparent); --mx5-warn-ink: var(--ink-warn, var(--warn)); --mx5-hover-bg: rgba(22,29,38,.62); --mx5-hover-border: rgba(255,255,255,.16); --mx5-hover-shadow: 0 6px 24px rgba(0,0,0,.25); --mx5-focus-ring: 0 0 0 2px color-mix(in srgb, var(--up) 55%, transparent); } /* Round-3 depth pass — same recipe as body.page-macro, so the two dashboards stay one product: opaque white panels on the deepened estate canvas, a soft hairline, and a two-stop shadow (tight contact + wide ambient) carrying the depth. The old 82%-white fill sat within ~1.07:1 of the canvas — the card and the page were the same value, so nothing read as a card. */ [data-theme="light"] body.page-china{ --ink-2: color-mix(in srgb, var(--text) 70%, transparent); --mx5-glass-bg: #ffffff; --mx5-pop-bg: #ffffff; --mx5-glass-border: #dde2ea; --mx5-glass-shadow: 0 1px 2px rgba(23,32,55,.05), 0 8px 24px -12px rgba(23,32,55,.10); --mx5-glass-hover: 0 2px 4px rgba(23,32,55,.07), 0 14px 32px -14px rgba(23,32,55,.16); --mx5-hover-bg: #ffffff; --mx5-hover-border: #c3cbd9; --mx5-hover-shadow: 0 2px 4px rgba(23,32,55,.07), 0 14px 32px -14px rgba(23,32,55,.16); } /* glass card */ body.page-china .cnx-card{background:var(--mx5-glass-bg,rgba(16,22,30,.55));border:1px solid var(--mx5-glass-border,rgba(255,255,255,.12));border-radius:18px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 8px 32px rgba(0,0,0,.55),0 1.5px 0 rgba(255,255,255,.07) inset;padding:18px 20px;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s;margin-bottom:14px} body.page-china .cnx-card[role="button"]{cursor:pointer} body.page-china .cnx-card[role="button"]:hover{background:rgba(22,29,38,.62);border-color:rgba(255,255,255,.16);box-shadow:0 6px 24px rgba(0,0,0,.25);transform:translateY(-1px)} body.page-china .cnx-ctitle{font-size:11.5px;font-weight:650;letter-spacing:.8px;text-transform:uppercase;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:8px} /* hero */ /* z-index:30 lifts the whole hero (and the factor/risk popovers that overflow it) ABOVE the tiles + cards below. The cards use backdrop-filter, which makes each its own stacking context at level 0; without this the popover — trapped in the hero's own backdrop-filter context — renders BEHIND the later cards. Stays below dialogs (60). */ body.page-china .cnx-hero{display:grid;grid-template-columns:minmax(360px,2fr) minmax(400px,3fr);gap:0;padding:0;position:relative;z-index:30} body.page-china .cnx-hero.cnx-hero-solo{grid-template-columns:1fr} body.page-china .cnx-hero.cnx-hero-solo .cnx-hero-right{display:none} body.page-china .cnx-hero-left{padding:22px 26px;border-right:1px solid rgba(255,255,255,.12);position:relative} body.page-china .cnx-hero-right{padding:18px 24px 14px} body.page-china .cnx-regime-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:4px 12px;font-size:11.5px;background:rgba(208,69,69,.10)} body.page-china .cnx-regime-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--q3)} body.page-china .ms-green .cnx-regime-pill{background:color-mix(in srgb,var(--up) 10%,transparent)} body.page-china .ms-green .cnx-regime-pill .dot{background:var(--up)} body.page-china .ms-yellow .cnx-regime-pill{background:rgba(224,160,48,.10)} body.page-china .ms-yellow .cnx-regime-pill .dot{background:var(--warn)} body.page-china .ms-red .cnx-regime-pill{background:color-mix(in srgb,var(--down) 10%,transparent)} body.page-china .ms-red .cnx-regime-pill .dot{background:var(--down)} body.page-china .cnx-live-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.8px;color:var(--muted);border:1px solid var(--line);padding:2px 8px;border-radius:999px;margin-left:8px;opacity:.45} body.page-china .cnx-live-pill .d{width:6px;height:6px;border-radius:50%;background:var(--muted)} body.page-china .cnx-live-pill.on{opacity:1;color:var(--ink-up, var(--up));border-color:color-mix(in srgb,var(--up) 40%,var(--line))} body.page-china .cnx-live-pill.on .d{background:var(--up);box-shadow:0 0 5px var(--up)} body.page-china .cnx-gauge-row{display:flex;gap:20px;align-items:center;margin-top:10px;margin-bottom:16px} /* Gauge scaled up to US parity: 192×120px CSS box, viewBox 0 0 120 78 UNCHANGED (JS needle math: rotate(score*1.8-90 60 68) depends on viewBox coords staying as-is) */ body.page-china .cnx-gauge-svg{flex:0 0 192px;width:192px;height:120px;overflow:visible;display:block} @media(max-width:560px){body.page-china .cnx-gauge-svg{width:90px;height:58px;flex:0 0 90px}} /* gauge fill colour follows the .ms-{color} class (which the live lane swaps) so it never shows a red arc next to a green/yellow live verdict. (Fill fraction is baked.) COLOUR TOKENS (operator ruling 2026-07-21, reverses #2947's no-flip): the market-state gauge and the whole pullback-risk family are market-DIRECTION reads (risk-on vs risk-off) — same family as theme.css's .rrx radar remap and the factor bars below — so they paint from the zh-flipping pair --up/--down. Asia convention in zh: red=bullish /trend-following, green=defend capital. The zh legend words in .cnx-sub-line name the TIER (偏多/避险) not the colour, so there is no colour-word contradiction (matches macro.html). --warn is direction-neutral and never flips. Genuine health/staleness signals (not market reads) keep --ok/--act so red=bad stays in both langs. The mx5 gauge arc/needle carry .cnx-gauge-fill/.cnx-needle-* so these rules colour them; the mx5-only #mx5-score-numeral + .cnx-needle-ring get their own .ms-* --up/--down rules near the needle-ring block. */ body.page-china .ms-green .cnx-gauge-fill{stroke:var(--up)} body.page-china .ms-yellow .cnx-gauge-fill{stroke:var(--warn)} body.page-china .ms-red .cnx-gauge-fill{stroke:var(--down)} /* needle accents follow the same .ms-* class as the arc (US idiom: hub ring + core + glowing tip dot in the verdict colour; stem is theme-text) */ body.page-china .cnx-needle-hub{fill:var(--panel,rgba(8,12,18,.85));stroke:var(--warn);stroke-width:1.5} body.page-china .cnx-needle-core,body.page-china .cnx-needle-tip{fill:var(--warn)} body.page-china .cnx-needle-tip{filter:drop-shadow(0 0 3.5px var(--warn))} body.page-china .ms-green .cnx-needle-hub{stroke:var(--up)} body.page-china .ms-green .cnx-needle-core,body.page-china .ms-green .cnx-needle-tip{fill:var(--up)} body.page-china .ms-green .cnx-needle-tip{filter:drop-shadow(0 0 3.5px var(--up))} body.page-china .ms-red .cnx-needle-hub{stroke:var(--down)} body.page-china .ms-red .cnx-needle-core,body.page-china .ms-red .cnx-needle-tip{fill:var(--down)} body.page-china .ms-red .cnx-needle-tip{filter:drop-shadow(0 0 3.5px var(--down))} body.page-china .cnx-score-line{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} /* Big score: US parity — 68px/800, tabular-nums, state-keyed glow */ body.page-china .cnx-big-score{font-size:68px;font-weight:800;line-height:.95;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink-warn, var(--warn));text-shadow:0 0 36px rgba(245,158,11,.3)} body.page-china .ms-green .cnx-big-score{color:var(--ink-up, var(--up));text-shadow:0 0 36px rgba(34,217,122,.3)} body.page-china .ms-red .cnx-big-score{color:var(--ink-down, var(--down));text-shadow:0 0 36px rgba(239,68,68,.3)} @media(max-width:560px){body.page-china .cnx-big-score{font-size:34px}} /* Verdict word: 19px/700 to match US spec */ body.page-china .cnx-verdict{font-size:19px;font-weight:700;white-space:nowrap} @media(max-width:560px){body.page-china .cnx-verdict{font-size:13px}} body.page-china .cnx-verdict .arr{color:var(--ink-warn, var(--warn))} body.page-china .ms-green .cnx-verdict .arr{color:var(--ink-up, var(--up))} body.page-china .ms-red .cnx-verdict .arr{color:var(--ink-down, var(--down))} body.page-china .cnx-sub-line{font-size:11.5px;font-weight:650;letter-spacing:.4px;color:var(--ink-warn, var(--warn));margin-top:2px} body.page-china .ms-green .cnx-sub-line{color:var(--ink-up, var(--up))} body.page-china .ms-red .cnx-sub-line{color:var(--ink-down, var(--down))} /* stance line follows the .ms-{color} class — default caution (yellow), green/red override */ body.page-china .cnx-sub-line .cnx-sub-g,body.page-china .cnx-sub-line .cnx-sub-r{display:none} body.page-china .cnx-sub-line .cnx-sub-y{display:inline} body.page-china .ms-green .cnx-sub-line .cnx-sub-g{display:inline} body.page-china .ms-green .cnx-sub-line .cnx-sub-y{display:none} body.page-china .ms-red .cnx-sub-line .cnx-sub-r{display:inline} body.page-china .ms-red .cnx-sub-line .cnx-sub-y{display:none} body.page-china .cnx-thesis{font-size:13px;color:var(--text);max-width:42ch;margin:12px 0 10px} body.page-china .cnx-flip{font-size:11.5px;color:var(--muted);background:rgba(224,160,48,.08);border:1px solid rgba(224,160,48,.25);border-radius:10px;padding:7px 10px;max-width:46ch} body.page-china .cnx-hero-btns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;position:relative} body.page-china .cnx-hbtn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);color:var(--text);border-radius:999px;padding:5px 12px;font-size:11.5px;cursor:pointer;display:inline-flex;gap:6px;align-items:center} body.page-china .cnx-hbtn:hover{background:rgba(255,255,255,.09)} body.page-china .cnx-hbtn .n{font-weight:700} body.page-china .cnx-path-h{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:4px} body.page-china .cnx-path-svg{width:100%;height:auto;display:block} /* popovers */ body.page-china .cnx-pop{position:absolute;top:calc(100% + 10px);left:0;width:300px;background:rgba(13,18,26,.97);border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.6);padding:16px 18px;z-index:40;display:none} body.page-china .cnx-pop.open{display:block;animation:cnx-popin .18s ease-out} @keyframes cnx-popin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} body.page-china .cnx-pop-h{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--text);margin-bottom:12px} body.page-china .cnx-pop-row{margin:9px 0} body.page-china .cnx-pop-row .pr-t{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px} body.page-china .cnx-pop-row .pr-t b{font-weight:700} body.page-china .cnx-pop-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden} body.page-china .cnx-pop-bar i{display:block;height:100%;border-radius:3px} body.page-china .cnx-pop-flag{font-size:9.5px;font-weight:700;letter-spacing:.8px;color:var(--ink-warn, var(--warn));margin:10px 0 2px} body.page-china .cnx-pop-link{display:block;font-size:11.5px;font-weight:650;color:var(--ink-link, var(--link));margin-top:12px;cursor:pointer} body.page-china .cnx-pop-big{display:flex;align-items:baseline;gap:10px;margin:2px 0 4px} body.page-china .cnx-pop-big .n{font-size:30px;font-weight:750;color:var(--ink-down, var(--down))} body.page-china .cnx-pop-big .t{font-size:12.5px;font-weight:700;color:var(--ink-down, var(--down))} body.page-china .cnx-pop-sub{font-size:11.5px;color:var(--muted);margin-bottom:8px} /* tiles rack */ body.page-china .cnx-secbar{display:flex;align-items:baseline;justify-content:space-between;margin:20px 2px 12px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)} body.page-china .cnx-secbar b{color:var(--text);font-weight:700} body.page-china .cnx-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px} @media(max-width:1100px){body.page-china .cnx-tiles{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){body.page-china .cnx-tiles{grid-template-columns:1fr}} body.page-china .cnx-tile{padding:13px 15px} body.page-china .cnx-tile .sym{font-size:11px;font-weight:700;letter-spacing:.6px} body.page-china .cnx-tile .nm{font-size:9.5px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-top:1px} body.page-china .cnx-tile .px{font-size:19px;font-weight:700;margin-top:7px} body.page-china .cnx-tile .chg{font-size:11.5px;font-weight:650;margin-top:1px} body.page-china .cnx-tile .chg.up{color:var(--ink-up, var(--up))} body.page-china .cnx-tile .chg.dn{color:var(--ink-down, var(--down))} body.page-china .cnx-tile .chg.pos{color:var(--ink-up, var(--up))} body.page-china .cnx-tile .chg.neg{color:var(--ink-down, var(--down))} body.page-china .cnx-rack2{display:grid;grid-template-columns:3fr 2fr;gap:14px;margin-bottom:14px} body.page-china .cnx-rack3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px} @media (max-width:1000px){body.page-china .cnx-rack2,body.page-china .cnx-rack3{grid-template-columns:1fr}body.page-china .cnx-hero{grid-template-columns:1fr}body.page-china .cnx-hero-left{border-right:none;border-bottom:1px solid rgba(255,255,255,.12)}} /* kv / row / chips */ body.page-china .cnx-row{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12.5px} body.page-china .cnx-row:last-child{border-bottom:none} body.page-china .cnx-row .ic{flex:0 0 20px;text-align:center;font-size:12px;padding-top:1px;opacity:.9} body.page-china .cnx-row .tx{flex:1;min-width:0} body.page-china .cnx-row .tx b{font-weight:650} body.page-china .cnx-row .sub{display:block;font-size:10.5px;color:var(--muted);margin-top:1px} body.page-china .cnx-kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12.5px} body.page-china .cnx-kv:last-of-type{border-bottom:none} body.page-china .cnx-kv .k{color:var(--muted)} body.page-china .cnx-kv .v{font-weight:650;text-align:right} body.page-china .cnx-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px} body.page-china .cnx-chip{font-size:11px;border-radius:999px;padding:3px 10px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04)} body.page-china .cnx-chip.hot{background:rgba(224,100,100,.13);border-color:rgba(224,100,100,.4);color:#eda8a8} body.page-china .cnx-chip.turn{background:rgba(69,184,115,.12);border-color:rgba(69,184,115,.4);color:#8fd7ae} body.page-china .cnx-lbl{font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:8px 0 4px} body.page-china .cnx-foot{font-size:10.5px;color:var(--muted);margin-top:10px;border-top:1px solid rgba(255,255,255,.05);padding-top:8px} body.page-china .cnx-bignum{font-size:30px;font-weight:750;line-height:1.05} body.page-china .cnx-bigsub{font-size:12px;font-weight:650;margin-top:3px} body.page-china .cnx-dial-word{text-align:center;font-size:14.5px;font-weight:700;color:var(--ink-warn, var(--warn));margin-top:6px} body.page-china .cnx-dial-sub{text-align:center;font-size:10.5px;color:var(--muted)} body.page-china .cnx-estrip{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px} body.page-china .cnx-ev{flex:1 1 86px;text-align:center;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:9px 6px;background:rgba(255,255,255,.02)} body.page-china .cnx-ev .edot{width:9px;height:9px;border-radius:50%;margin:0 auto 5px} body.page-china .cnx-ev .en{font-size:11.5px;font-weight:650;margin:2px 0} body.page-china .cnx-ev .ed{font-size:10px;color:var(--muted)} body.page-china .cnx-ev .imp{font-size:9px;font-weight:700;letter-spacing:.6px;border-radius:4px;padding:1px 6px} body.page-china .cnx-imp.high{background:rgba(224,100,100,.2);color:#eda8a8} body.page-china .cnx-imp.med{background:rgba(224,160,48,.16);color:var(--ink-warn, var(--warn))} body.page-china .cnx-edot.h{background:var(--down)} body.page-china .cnx-edot.m{background:var(--warn)} body.page-china .cnx-alert-pill{margin-left:auto;font-size:10px;font-weight:700;background:rgba(224,160,48,.16);color:var(--ink-warn, var(--warn));border-radius:999px;padding:2px 9px;letter-spacing:.5px} body.page-china .cnx-heat{display:flex;gap:4px;margin-top:6px} body.page-china .cnx-heat i{flex:1;height:12px;border-radius:3px;background:var(--up);opacity:.85} body.page-china .cnx-heat i.h2{opacity:.55}body.page-china .cnx-heat i.h3{opacity:.3} body.page-china .cnx-heat i.c{background:var(--down)} body.page-china .cnx-heat i.c2{background:var(--down);opacity:.45} body.page-china .cnx-heat i.n{background:rgba(255,255,255,.12)} body.page-china .cnx-view-all{font-size:11px;color:var(--ink-link, var(--link));text-align:right;margin-top:8px} /* top-stocks card */ body.page-china .cnx-stk{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px} body.page-china .cnx-stk .tkr{flex:0 0 auto} body.page-china .cnx-stk:last-of-type{border-bottom:none} body.page-china .cnx-tkr-btn{display:inline-block;background:rgba(91,155,240,.10);border:1px solid rgba(91,155,240,.35);color:#a9c8f5;border-radius:8px;padding:3px 10px;font-weight:700;font-size:12px;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s} body.page-china .cnx-tkr-btn:hover{background:rgba(91,155,240,.22);border-color:rgba(91,155,240,.6)} body.page-china .cnx-stk .meta{flex:1;min-width:0;color:var(--muted);font-size:10.5px;line-height:1.35} body.page-china .cnx-stk .meta b{color:var(--text);font-weight:650;font-size:11.5px} body.page-china .cnx-stage{flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.6px;border-radius:5px;padding:2px 7px;background:rgba(69,184,115,.14);color:#8fd7ae;border:1px solid rgba(69,184,115,.35)} body.page-china .cnx-screener-btn{display:block;width:100%;text-align:center;margin-top:12px;background:linear-gradient(135deg,rgba(91,155,240,.18),rgba(69,184,115,.14));border:1px solid rgba(91,155,240,.4);color:var(--text);font-weight:700;font-size:12.5px;border-radius:12px;padding:10px 0;cursor:pointer;text-decoration:none;letter-spacing:.4px;transition:box-shadow .2s,transform .2s} body.page-china .cnx-screener-btn:hover{box-shadow:0 6px 22px rgba(91,155,240,.25);transform:translateY(-1px)} /* footer links + data-health strip */ body.page-china .cnx-links{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 12px} body.page-china .cnx-links a{color:var(--text);text-decoration:none;font-size:12px;border:1px solid rgba(255,255,255,.12);background:rgba(16,22,30,.55);border-radius:999px;padding:7px 15px} body.page-china .cnx-links a:hover{border-color:rgba(255,255,255,.25)} body.page-china .cnx-dh{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);padding:12px 20px;background:rgba(16,22,30,.55);border:1px solid rgba(255,255,255,.12);border-radius:18px;backdrop-filter:blur(20px);margin-top:8px} body.page-china .cnx-dh b{color:var(--text);font-weight:650} body.page-china .cnx-dh .d{width:8px;height:8px;border-radius:50%;background:var(--ok,var(--up))} /* dialogs */ /* z-index 200, not 60 (2026-08-11): the site nav sits at z-150 (templates/navigation-refresh.css, theme.css .site-nav) and was painting straight over the open dialog's header — the search field landed on top of the dialog title. HK (.hkx-dlg), Canada (.cax-dlg) and the eleven US .mx5-dlg modals are all already at 200; this only brings China onto the same rung. Closed dialogs are display:none, so the nav dropdowns are unaffected. */ body.page-china .cnx-dlg{position:fixed;inset:0;display:none;align-items:flex-start;justify-content:center;z-index:200;overflow:auto;padding:5vh 16px} body.page-china .cnx-dlg.open{display:flex} body.page-china .cnx-dlg-backdrop{position:fixed;inset:0;background:rgba(5,8,12,.6);backdrop-filter:blur(6px)} body.page-china .cnx-dlg-panel{position:relative;width:min(900px,94vw);background:rgba(13,17,24,.94);border:1px solid rgba(255,255,255,.14);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.6);backdrop-filter:blur(28px) saturate(1.4);margin-bottom:6vh} body.page-china .cnx-dlg-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.09)} body.page-china .cnx-dlg-title{font-size:13px;font-weight:700;letter-spacing:.7px;text-transform:uppercase} body.page-china .cnx-dlg-close{background:none;border:1px solid rgba(255,255,255,.16);color:var(--text);width:28px;height:28px;border-radius:50%;font-size:15px;cursor:pointer;line-height:1} body.page-china .cnx-dlg-body{padding:18px 22px 22px} /* Dialog open/close animation — ported from the US mx5 dialogs: the backdrop fades, the panel rises + scales in, and the body's first children stagger-fade-up. JS adds .cnx-in on the next frame after .open so the transitions actually run; .cnx-closing reverses faster on close. Reduced-motion shows everything instantly. */ @media(prefers-reduced-motion:no-preference){ body.page-china .cnx-dlg-backdrop{opacity:0;transition:opacity 240ms ease-out} body.page-china .cnx-dlg.cnx-in .cnx-dlg-backdrop{opacity:1} body.page-china .cnx-dlg-panel{opacity:0;transform:translateY(14px) scale(.965);transition:opacity 320ms cubic-bezier(.22,.9,.26,1.02),transform 320ms cubic-bezier(.22,.9,.26,1.02)} body.page-china .cnx-dlg.cnx-in .cnx-dlg-panel{opacity:1;transform:translateY(0) scale(1)} body.page-china .cnx-dlg.cnx-closing .cnx-dlg-backdrop{transition-duration:180ms} body.page-china .cnx-dlg.cnx-closing .cnx-dlg-panel{transition-duration:180ms} body.page-china .cnx-dlg-body > *{opacity:0;transform:translateY(10px);transition:opacity 300ms ease-out,transform 300ms cubic-bezier(.22,.9,.26,1.02)} body.page-china .cnx-dlg.cnx-in .cnx-dlg-body > *{opacity:1;transform:translateY(0)} body.page-china .cnx-dlg.cnx-in .cnx-dlg-body > *:nth-child(1){transition-delay:60ms} body.page-china .cnx-dlg.cnx-in .cnx-dlg-body > *:nth-child(2){transition-delay:100ms} body.page-china .cnx-dlg.cnx-in .cnx-dlg-body > *:nth-child(3){transition-delay:140ms} body.page-china .cnx-dlg.cnx-in .cnx-dlg-body > *:nth-child(4){transition-delay:180ms} body.page-china .cnx-dlg.cnx-in .cnx-dlg-body > *:nth-child(5){transition-delay:220ms} body.page-china .cnx-dlg.cnx-in .cnx-dlg-body > *:nth-child(n+6){transition-delay:0ms} body.page-china .cnx-dlg.cnx-closing .cnx-dlg-body > *{transition-delay:0ms!important} body.page-china .cnx-pop{transform-origin:top left;animation:cnxPopIn .16s cubic-bezier(.22,.9,.26,1.02)} @keyframes cnxPopIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}} } @media(prefers-reduced-motion:reduce){ body.page-china .cnx-dlg.open .cnx-dlg-backdrop{opacity:1} body.page-china .cnx-dlg.open .cnx-dlg-panel{opacity:1;transform:none} body.page-china .cnx-dlg.open .cnx-dlg-body > *{opacity:1;transform:none} } body.page-china .cnx-eyebrow{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:14px 0 8px} body.page-china .cnx-eyebrow:first-child{margin-top:0} body.page-china .cnx-sep{height:1px;background:rgba(255,255,255,.07);margin:14px 0} body.page-china .cnx-frow{display:grid;grid-template-columns:200px 1fr 56px;gap:12px;align-items:center;padding:7px 0;font-size:12.5px} body.page-china .cnx-frow .fread{font-size:11px;color:var(--muted)} body.page-china .cnx-fbar{height:7px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden} body.page-china .cnx-fbar i{display:block;height:100%;border-radius:4px} body.page-china .cnx-fscore{text-align:right;font-weight:700} body.page-china .cnx-cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px} @media (max-width:980px){body.page-china .cnx-cols2{grid-template-columns:minmax(0,1fr)}} /* ilx / Signal-Ink charts stretch to the column width intrinsically (illus.css); no per-chart resize needed. */ /* wide tables (rotation, RRR history…) scroll within the dialog on narrow screens instead of overflowing the panel. */ body.page-china .cnx-dlg-body .cnx-mt{display:block;max-width:100%;overflow-x:auto} body.page-china .cnx-dlg-body .chart-ph,body.page-china .cnx-dlg-body img,body.page-china .cnx-dlg-body svg{max-width:100%} body.page-china .cnx-chart-ph{height:100px;border:1px dashed rgba(255,255,255,.14);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);margin:8px 0} body.page-china .cnx-receipt{font-size:11px;color:var(--muted);border-top:1px solid rgba(255,255,255,.07);margin-top:14px;padding-top:10px} /* fq pills for regime quadrant labels in dialogs */ body.page-china .cnx-fq{font-size:10.5px;font-weight:650;letter-spacing:.4px;border-radius:7px;padding:4px 9px} body.page-china .cnx-fq.stag{background:rgba(208,69,69,.18);color:#e8a0a0;border:1px solid rgba(208,69,69,.4)} body.page-china .cnx-fq.refl{background:rgba(212,160,23,.16);color:#e5c46a;border:1px solid rgba(212,160,23,.4)} body.page-china .cnx-ihcard{border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.02)} body.page-china .cnx-ihgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px} body.page-china .cnx-ihcard .t{font-size:11px;font-weight:700;letter-spacing:.5px} body.page-china .cnx-ihcard .p{font-size:17px;font-weight:700;margin:4px 0 6px} body.page-china .cnx-okchip{display:inline-block;font-size:10px;font-weight:650;border-radius:6px;padding:2px 8px;margin:2px 4px 0 0;background:rgba(69,184,115,.13);color:#8fd7ae} body.page-china .cnx-badchip{display:inline-block;font-size:10px;font-weight:650;border-radius:6px;padding:2px 8px;margin:2px 4px 0 0;background:rgba(224,100,100,.13);color:#eda8a8} /* zh mirror (2026-07-21 ruling): ok/bad chips carry direction reads (above/below MA, flow supportive/strain) — swap tint pair in zh like the factor bars. hot/turn/stage chips are labelled metaphor badges, not direction paint — they stay. */ html[data-lang="zh"] body.page-china .cnx-okchip{background:rgba(224,100,100,.13);color:#eda8a8} html[data-lang="zh"] body.page-china .cnx-badchip{background:rgba(69,184,115,.13);color:#8fd7ae} body.page-china .cnx-nchip{display:inline-block;font-size:10px;font-weight:650;border-radius:6px;padding:2px 8px;margin:2px 4px 0 0;background:rgba(255,255,255,.06);color:var(--muted)} body.page-china .cnx-ledd{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px} body.page-china .cnx-ledd .rk{color:var(--muted);font-size:10.5px} /* heatmap in dialog */ body.page-china .cnx-hm-wrap{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.02);padding:12px;transition:all .35s cubic-bezier(.2,.8,.2,1)} body.page-china .cnx-hm-wrap.hm-full{position:fixed;inset:18px;z-index:120;background:rgba(11,14,19,.99);overflow:auto;box-shadow:0 40px 120px rgba(0,0,0,.8);padding:22px} body.page-china .cnx-hm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:10.5px;color:var(--muted)} body.page-china .cnx-hm-expand{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:var(--text);border-radius:8px;padding:4px 12px;font-size:11px;font-weight:650;cursor:pointer} body.page-china .cnx-hm-expand:hover{background:rgba(255,255,255,.11)} body.page-china .cnx-hm-legend{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:10px;color:var(--muted)} /* table mt style inside dialogs */ body.page-china table.cnx-mt{width:100%;border-collapse:collapse;font-size:12px} body.page-china table.cnx-mt th{font-size:9.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.09)} body.page-china table.cnx-mt td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.05)} body.page-china table.cnx-mt td.r,body.page-china table.cnx-mt th.r{text-align:right} body.page-china .cnx-tt-dn{color:var(--ink-down, var(--down));font-weight:650} body.page-china .cnx-tt-up{color:var(--ink-up, var(--up));font-weight:650} body.page-china .cnx-tt-fl{color:var(--ink-warn, var(--warn));font-weight:650} /* stword for key-value color coding */ body.page-china .cnx-stword.ok{color:var(--ink-up, var(--up))} body.page-china .cnx-stword.warn{color:var(--ink-warn, var(--warn))} body.page-china .cnx-stword.bad{color:var(--ink-down, var(--down))} /* ── Light-mode tokens + overrides — align page-china with body.page-macro ── The mx5 glass CSS was ported dark-only: .cnx-card reads var(--mx5-glass-bg,) which was never defined for light, and popovers / dialogs / hairline borders were hardcoded dark rgba — so in light mode every card rendered as a dark block with dark text. Define the light glass tokens (same values as body.page-macro.mx4-grid) + override every hardcoded dark surface. All scoped to [data-theme="light"] so dark mode is untouched; colored chips (.hot/.turn) are excluded so their tints survive. */ [data-theme="light"] body.page-china{--mx5-glass-bg:#ffffff;--mx5-glass-border:#dde2ea;--mx5-pop-bg:#ffffff} /* base card + hover shadows are hardcoded dark (rgba(0,0,0,.55)/.25); light mode uses the EXACT body.page-macro.mx4-grid light tokens so the two dashboards match (the estate depth recipe: contact shadow + wide ambient, no inset sheen — a bright inset line on an opaque white card reads as a seam, not a highlight). */ [data-theme="light"] body.page-china .cnx-card{box-shadow:0 1px 2px rgba(23,32,55,.05),0 8px 24px -12px rgba(23,32,55,.10)} [data-theme="light"] body.page-china .cnx-card[role="button"]:hover{background:#ffffff;border-color:#c3cbd9;box-shadow:0 2px 4px rgba(23,32,55,.07),0 14px 32px -14px rgba(23,32,55,.16)} [data-theme="light"] body.page-china .cnx-pop{background:rgba(255,255,255,.98);border-color:rgba(0,0,0,.1);box-shadow:0 8px 32px rgba(0,0,0,.13)} [data-theme="light"] body.page-china .cnx-dlg-panel{background:rgba(255,255,255,.98);border-color:rgba(0,0,0,.1)} [data-theme="light"] body.page-china .cnx-dlg-backdrop{background:rgba(20,24,30,.34)} [data-theme="light"] body.page-china .cnx-dlg-head{border-bottom-color:rgba(0,0,0,.09)} [data-theme="light"] body.page-china .cnx-dlg-close{border-color:rgba(0,0,0,.18)} [data-theme="light"] body.page-china .cnx-hm-wrap.hm-full{background:rgba(255,255,255,.99)} [data-theme="light"] body.page-china .cnx-links a,[data-theme="light"] body.page-china .cnx-dh{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.09)} [data-theme="light"] body.page-china .cnx-hero-left{border-right-color:rgba(0,0,0,.08)} [data-theme="light"] body.page-china .cnx-row,[data-theme="light"] body.page-china .cnx-kv,[data-theme="light"] body.page-china .cnx-foot,[data-theme="light"] body.page-china .cnx-stk,[data-theme="light"] body.page-china .cnx-ledd,[data-theme="light"] body.page-china .cnx-receipt,[data-theme="light"] body.page-china table.cnx-mt td,[data-theme="light"] body.page-china table.cnx-mt th{border-color:rgba(0,0,0,.08)} [data-theme="light"] body.page-china .cnx-pop-bar,[data-theme="light"] body.page-china .cnx-sep,[data-theme="light"] body.page-china .cnx-fbar,[data-theme="light"] body.page-china .cnx-heat i.n{background:rgba(0,0,0,.09)} [data-theme="light"] body.page-china .cnx-hbtn{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.12)} [data-theme="light"] body.page-china .cnx-hbtn:hover{background:rgba(0,0,0,.06)} [data-theme="light"] body.page-china .cnx-chip:not(.hot):not(.turn),[data-theme="light"] body.page-china .cnx-ev,[data-theme="light"] body.page-china .cnx-ihcard,[data-theme="light"] body.page-china .cnx-hm-wrap,[data-theme="light"] body.page-china .cnx-nchip{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1)} [data-theme="light"] body.page-china .cnx-regime-pill{border-color:rgba(0,0,0,.12)} [data-theme="light"] body.page-china .cnx-chart-ph{border-color:rgba(0,0,0,.14)} [data-theme="light"] body.page-china .cnx-hm-expand{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.16)} [data-theme="light"] body.page-china .cnx-chip.hot,[data-theme="light"] body.page-china .cnx-imp.high,[data-theme="light"] body.page-china .cnx-fq.stag{color:#b4232a} [data-theme="light"] body.page-china .cnx-chip.turn{color:#1f7a44} [data-theme="light"] body.page-china .cnx-tkr-btn{color:#2456a8} /* The reflation pill keeps its own amber wash (rgba(212,160,23,.16) → #f8f0da on a white card), so the ink has to clear 4.5:1 against THAT, not against white: #9a6b0e measured 4.68 on white but only 4.12 on the chip it actually sits in. #8a5f0c lands 4.96 there — and matches the weight of its sibling stagflation pill (#b4232a, 5.12 on its own red wash), so the two regime states read as a matched pair rather than one bold and one washed out. */ [data-theme="light"] body.page-china .cnx-fq.refl{color:#8a5f0c} /* ═══════════════════════════════════════════════════════════════════════ PORTED US mx5-* SCORECARD COMPONENTS (A hero gauge · B path graph · C market tiles · D sentiment odometer). Selectors re-scoped from the US body.page-macro.mx4-grid → body.page-china. State colour routes through --up/--warn/--down (theme.css), so the hero/needle/spark/zone reads flip correctly in zh (红涨绿跌). See CLAUDE.md §Design lane. ═══════════════════════════════════════════════════════════════════════ */ /* ── A · Scorecard left cluster (regime pill + semicircle gauge + score) ── */ body.page-china .mx5-sc-left{ padding:22px 26px; display:flex;flex-direction:column;position:relative;overflow:visible; } body.page-china .mx5-sc-gauge-row{ display:flex;align-items:center;gap:20px;margin-bottom:14px; } body.page-china .mx5-gauge-svg{ width:184px;height:132px;overflow:visible;display:block;flex-shrink:0; } /* Light mode: the gauge's white-alpha track/ticks/scale-labels vanish on white — repaint in dark ink. #mx5-score-numeral keeps its own id rule (state colour). */ /* Dial scale labels (0 / 50 / 100) are text, not decoration — they are what makes the needle position mean anything. At .42 they composited to #989b9e = 2.79:1 on a white card, under the 4.5 floor at 10px. .62 lands 5.37:1 and still reads a full step quieter than the body copy, so the big score keeps the hierarchy. (Identical twin rule on body.page-macro — the dial is the same component.) */ [data-theme="light"] body.page-china .mx5-gauge-svg > text{fill:rgba(10,16,24,.62);} [data-theme="light"] body.page-china .mx5-gauge-svg path:first-of-type{stroke:rgba(10,16,24,.10);} [data-theme="light"] body.page-china .mx5-gauge-svg g[stroke]{stroke:rgba(10,16,24,.20);} /* theme.css owns the shared light pointer; bind it to the arc's semantic state. */ body.page-china .cnx-gauge-needle{--odo-accent:var(--warn)} body.page-china .ms-green .cnx-gauge-needle{--odo-accent:var(--up)} body.page-china .ms-red .cnx-gauge-needle{--odo-accent:var(--down)} /* Regime pill (sizes to content, never clips) */ body.page-china .mx5-regime-pill{ display:inline-flex;align-items:center;gap:6px; padding:4px 11px;border-radius:var(--mx5-radius-pill); border:1px solid var(--mx5-accent);background:var(--mx5-accent-dim); font-size:11px;font-weight:600;color:var(--mx5-accent-ink); letter-spacing:.02em;margin-bottom:12px;line-height:1.3; max-width:100%;box-sizing:border-box;text-align:left;width:auto; } body.page-china .mx5-sc-gauge-row > div:last-child{min-width:0;} body.page-china .mx5-regime-pill > span{flex:0 1 auto;min-width:0;} body.page-china .mx5-regime-pill.rp-yellow{ border-color:var(--mx5-warn);background:var(--mx5-warn-dim);color:var(--mx5-warn-ink); } body.page-china .mx5-regime-pill.rp-yellow .mx5-dot{ background:var(--mx5-warn);box-shadow:0 0 6px color-mix(in srgb,var(--warn) 30%,transparent); } body.page-china .mx5-regime-pill.rp-red{ border-color:var(--down);background:color-mix(in srgb,var(--down) 12%,transparent);color:var(--ink-down, var(--down)); } body.page-china .mx5-regime-pill.rp-red .mx5-dot{ background:var(--down);box-shadow:0 0 6px color-mix(in srgb,var(--down) 30%,transparent); } body.page-china .mx5-regime-pill .mx5-dot{ width:6px;height:6px;border-radius:50%; background:var(--mx5-accent);box-shadow:0 0 6px var(--mx5-accent-glow); } body.page-china .mx5-pill-info{font-size:10px;opacity:.6;margin-left:3px;flex-shrink:0;} /* Score + verdict beside gauge */ body.page-china .mx5-score-line{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;} body.page-china .mx5-verdict-word{ white-space:nowrap;font-size:19px;font-weight:700;color:var(--ink-1); } body.page-china .mx5-big-score{ font-size:64px;font-weight:800;line-height:.95;color:var(--mx5-accent-ink); text-shadow:0 0 40px var(--mx5-accent-glow); letter-spacing:-.035em;font-variant-numeric:tabular-nums; } body.page-china .mx5-sub-line{ font-size:11px;color:var(--mx5-accent-ink);font-weight:600;margin-top:3px; letter-spacing:.02em; } body.page-china .mx5-score-yellow .mx5-sub-line{color:var(--mx5-warn-ink);} body.page-china .mx5-score-red .mx5-sub-line{color:var(--ink-down, var(--down));} /* The big score beside the gauge already states the number; the in-arc numeral sat at y=62 with its "/ 100" at y=73 over a needle hub at cy=75, so the 24px figure printed ON the needle blade and the "/ 100" overprinted the "100" axis label — the same number twice, two inches apart (DOCTRINE Law 4 / design system §9.5 one-integer law). Hidden, not deleted: china_risk_state_live.js patches #mx5-score-numeral by id and needs the node alive. macro, hk and canada each killed this independently; china was the last. Byte-for-byte the same rule as hk.html.j2. */ body.page-china #mx5-score-numeral, body.page-china .mx5-gauge-svg text:last-of-type{ display:none; } /* needle inner ring: accent STROKE, dark fill (kept from the presentation attr) */ body.page-china .cnx-needle-ring{stroke:var(--warn);} body.page-china .ms-green .cnx-needle-ring{stroke:var(--up);} body.page-china .ms-red .cnx-needle-ring{stroke:var(--down);} /* ── B · 60-session path panel (right) ── */ body.page-china .mx5-sc-right{padding:22px 28px 20px;display:flex;flex-direction:column;} body.page-china .mx5-path-header{ display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px; } body.page-china .mx5-path-title{ font-size:11px;font-weight:700;letter-spacing:.10em; text-transform:uppercase;color:var(--ink-3); } body.page-china .mx5-path-meta{font-size:11px;color:var(--ink-3);} body.page-china .mx5-path-plot{position:relative;flex:1;min-height:190px;display:flex;} body.page-china .mx5-path-svg{ display:block;width:100%;flex:1;min-height:190px;overflow:visible;touch-action:pan-y; } body.page-china .mx5-path-labels{ position:absolute;inset:0;pointer-events:none; font-family:Inter,-apple-system,sans-serif;font-size:11px;line-height:1; } body.page-china .mx5-path-labels > span{position:absolute;white-space:nowrap;} body.page-china .mx5-pl-y{ left:6px;transform:translateY(-50%);color:var(--ink-3);font-variant-numeric:tabular-nums; } body.page-china .mx5-pl-zone{right:14px;transform:translateY(-50%);font-weight:600;} body.page-china .mx5-pl-zone.on{color:var(--ink-up,var(--up));} body.page-china .mx5-pl-zone.mid{color:var(--ink-warn,var(--warn));} body.page-china .mx5-pl-zone.off{color:var(--ink-down,var(--down));} body.page-china .mx5-pl-x{top:96.4%;color:var(--ink-3);} body.page-china .mx5-pl-today{ width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%); background:currentColor;box-shadow:0 0 6px currentColor; } body.page-china .mx5-path-cross{ position:absolute;top:0;width:1px;height:100%; background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.06)); opacity:0;transform:translateX(-1px);pointer-events:none; transition:opacity .12s ease-out;will-change:left,opacity; } body.page-china .mx5-path-dot{ position:absolute;width:11px;height:11px;border-radius:50%; background:var(--mx5-accent);border:2px solid var(--mx5-pop-bg); box-shadow:0 0 10px var(--mx5-accent-glow),0 0 0 1px rgba(255,255,255,.25); opacity:0;pointer-events:none;transform:translate(-50%,-50%); transition:opacity .12s ease-out;will-change:left,top,opacity; } body.page-china .mx5-path-tip{ position:absolute;z-index:6;pointer-events:none; display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:10px; background:rgba(15,19,26,.72);border:1px solid rgba(255,255,255,.12); box-shadow:0 8px 30px rgba(0,0,0,.5); backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3); opacity:0;transform:translate(-50%,calc(-100% - 14px)) translateY(4px); transition:opacity .13s ease-out,transform .13s ease-out;white-space:nowrap; } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ body.page-china .mx5-path-tip{background:var(--mx5-pop-bg);} } [data-theme="light"] body.page-china .mx5-path-tip{ background:rgba(255,255,255,.82);border-color:rgba(0,0,0,.10);box-shadow:0 8px 30px rgba(0,0,0,.16); } body.page-china .mx5-path-tip.show{opacity:1;transform:translate(-50%,calc(-100% - 14px));} body.page-china .mx5-path-tip-date{ font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--ink-3);text-transform:uppercase; } body.page-china .mx5-path-tip-row{display:flex;align-items:baseline;gap:7px;} body.page-china .mx5-path-tip-score{ font-size:16px;font-weight:800;line-height:1;color:var(--ink-1);font-variant-numeric:tabular-nums; } body.page-china .mx5-path-tip-verdict{font-size:12px;font-weight:600;} @media(prefers-reduced-motion:reduce){ body.page-china .mx5-path-cross, body.page-china .mx5-path-dot, body.page-china .mx5-path-tip{transition:none;} } /* ── C · Market tiles face (ONE glass button → markets dialog) ── */ /* The face now replaces the four separate tiles inside .cnx-tiles (a 4-col grid), so it must span the full row; its own .mx5-mkt-grid holds the four tiles. */ body.page-china .cnx-tiles > .sxg-face.mx5-card-face{grid-column:1 / -1;} body.page-china .sxg-face{display:flex;} body.page-china .sxg-face.mx5-card-face{ flex-direction:column;cursor:pointer;user-select:none;position:relative; background:var(--mx5-glass-bg);border:1px solid var(--mx5-glass-border); border-radius:var(--mx5-radius-card);backdrop-filter:var(--mx5-blur);-webkit-backdrop-filter:var(--mx5-blur); box-shadow:var(--mx5-glass-shadow); padding:18px 20px 14px;min-height:unset;height:100%; transition:background .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out,transform .2s ease-out; } body.page-china .sxg-face.mx5-card-face::before{ content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 55%);pointer-events:none; } body.page-china .sxg-face.mx5-card-face:hover{ background:var(--mx5-hover-bg);border-color:var(--mx5-hover-border); box-shadow:var(--mx5-hover-shadow);transform:translateY(-1px); } body.page-china .sxg-face.mx5-card-face:focus-visible{ outline:none;box-shadow:var(--mx5-focus-ring),var(--mx5-hover-shadow); } body.page-china .mx5-mkt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} @media(max-width:1100px){body.page-china .mx5-mkt-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){body.page-china .mx5-mkt-grid{grid-template-columns:1fr 1fr;}} body.page-china .mx5-mkt-tile{ background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08); border-radius:12px;padding:16px 18px 12px;position:relative;overflow:hidden;cursor:pointer; transition:background .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out,transform .2s ease-out; } /* Index tiles — the exact twin of body.page-macro's futures strip, so the two dashboards keep reading as one product. The dark "3% fill on glass" trick inverts into a grey smudge (#f7f7f7) with a 1.10:1 edge on a white card; each tile becomes its own white surface with the recipe hairline and one contact shadow instead, and the grid gap does the separating. */ [data-theme="light"] body.page-china .mx5-mkt-tile{background:#ffffff;border-color:#dde2ea;box-shadow:0 1px 2px rgba(23,32,55,.05);} body.page-china .mx5-mkt-tile.up, body.page-china .mx5-mkt-tile.dn{border-color:var(--glass-border);} body.page-china .mx5-mkt-tile:hover, body.page-china .mx5-mkt-tile.up:hover, body.page-china .mx5-mkt-tile.dn:hover{ background:var(--mx5-hover-bg);border-color:var(--mx5-hover-border); box-shadow:var(--mx5-hover-shadow);transform:translateY(-1px); } body.page-china .mx5-mkt-tile:focus-visible{outline:none;box-shadow:var(--mx5-focus-ring),var(--mx5-hover-shadow);} body.page-china .mx5-mkt-ticker{ font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--ink-3);text-transform:uppercase;margin-bottom:3px; } body.page-china .mx5-mkt-sub{ font-size:11px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px; } body.page-china .mx5-mkt-price{ font-size:19px;font-weight:700;line-height:1;color:var(--ink-1);margin-bottom:4px;font-variant-numeric:tabular-nums; } body.page-china .mx5-mkt-delta{font-size:13px;font-weight:600;} body.page-china .mx5-mkt-delta.up{color:var(--ink-up, var(--up));} body.page-china .mx5-mkt-delta.dn{color:var(--ink-down, var(--down));} body.page-china .mx5-spark{margin-top:10px;} body.page-china .mx5-spark svg{width:100%;height:32px;display:block;} /* spark colour follows sign, routed through --up/--down so it flips in zh */ body.page-china .mx5-spark-up path.mx5-spark-area{fill:color-mix(in srgb,var(--up) 10%,transparent);} body.page-china .mx5-spark-up path.mx5-spark-line, body.page-china .mx5-spark-up polyline{stroke:var(--up);} body.page-china .mx5-spark-dn path.mx5-spark-area{fill:color-mix(in srgb,var(--down) 8%,transparent);} body.page-china .mx5-spark-dn path.mx5-spark-line, body.page-china .mx5-spark-dn polyline{stroke:var(--down);} @media(prefers-reduced-motion:reduce){ body.page-china .sxg-face.mx5-card-face, body.page-china .mx5-mkt-tile{transition:none!important;} body.page-china .sxg-face.mx5-card-face:hover, body.page-china .mx5-mkt-tile:hover, body.page-china .mx5-mkt-tile.up:hover, body.page-china .mx5-mkt-tile.dn:hover{transform:none!important;} } /* ── D · Market Sentiment odometer (dial-only; lives in the cnx-rack cnx-card) ── */ body.page-china .mx5-sentiment-dial-wrap{text-align:center;margin-bottom:4px;} body.page-china .mx5-sentiment-zone-text{color:var(--fg-col-ink, var(--ink-warn, var(--warn))); font-size:15px;font-weight:700;color:var(--mx5-accent-ink);text-align:center;margin-bottom:3px; } body.page-china .mx5-sentiment-label{ font-size:11px;color:var(--ink-3);text-align:center;margin-top:2px; } /* zh 红涨绿跌 for the sentiment gauge: Euphoria=bullish→red, Panic=bearish→green (neutral amber). --fg-col routes through --up/--warn/--down so it auto-flips in zh; SVG marks + zone word read it. */ body.page-china .fg-greed{--fg-col:var(--up);--fg-col-ink:var(--ink-up, var(--up))} body.page-china .fg-fear{--fg-col:var(--down);--fg-col-ink:var(--ink-down, var(--down))} body.page-china .fg-neutral{--fg-col:var(--warn);--fg-col-ink:var(--ink-warn, var(--warn))} body.page-china #cnx-sentiment .fg-mark-s{stroke:var(--fg-col)} body.page-china #cnx-sentiment .fg-mark-f{fill:var(--fg-col)} body.page-china #cnx-sentiment .fg-lab-panic{fill:var(--down)} body.page-china #cnx-sentiment .fg-lab-euph{fill:var(--up)} /* ── AI BRIEF DIALOG — ABX v2: rules live in the shared _aibrief_css.j2 include (.aib2-* namespace, appended below). China keeps the ZH-safe blue accent by inheriting the shared --aib2-acc default (--info) — no override needed. Empty- brief fallback text keeps a local class. ──────────────────────────────────── */ body.page-china .aib-empty{font-size:13px;color:var(--muted);line-height:1.6;margin:4px 0;} /* ── 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;} } /* light: bloom off (DESIGN_DOCTRINE §5.8) — a coloured glow behind text is a jewel on graphite and a stain on white; dark keeps every one of these). */ html[data-theme="light"] :is( body.page-china .cnx-big-score, body.page-china .ms-green .cnx-big-score, body.page-china .ms-red .cnx-big-score, body.page-china .mx5-big-score ) { text-shadow:none; } html[data-lang="zh"][data-theme="light"] body.page-china .ms-green .cnx-big-score { text-shadow:none; } html[data-lang="zh"][data-theme="light"] body.page-china .ms-red .cnx-big-score { text-shadow:none; }