* { 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; } } /* ── 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; }