/* ══════════════════════════════════════════════════════ MX2 — v2 row-ledger layout (macro mode only) Scoped to body.page-macro to protect stocks mode. Tokens reuse theme.css vars throughout. ══════════════════════════════════════════════════════ */ /* ── Topbar v2 (within the macro panel) ── */ body.page-macro .mx2-topbar{ display:flex;align-items:center;justify-content:space-between; padding:14px 0 12px;border-bottom:1px solid var(--line); } body.page-macro .mx2-topbar-brand{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} body.page-macro .mx2-topbar-right{display:flex;align-items:center;gap:10px} body.page-macro .mx2-topbar-date{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} /* mx2-expand-btn — gbtn glass recipe with the info/up expand accent (macro sweep 2026-07): frosted fill + inset sheen + diagonal sheen sweep on hover; keeps the .ea-ic caret rotate contract. */ body.page-macro .mx2-expand-btn{ position:relative;overflow:hidden; display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap; padding:6px 15px;border-radius:999px;min-height:0; background:linear-gradient(180deg,color-mix(in srgb,var(--info) 15%,var(--gbtn-bg)),var(--gbtn-bg)); border:1px solid color-mix(in srgb,var(--info) 42%,var(--gbtn-brd)); -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%); color:var(--text);font-size:11px;font-weight:700;letter-spacing:.05em; box-shadow:inset 0 1px 0 var(--gbtn-sheen),0 2px 12px -7px color-mix(in srgb,var(--info) 55%,transparent); transition:transform .16s ease,box-shadow .25s,border-color .2s,background .2s; } body.page-macro .mx2-expand-btn::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.13) 50%,transparent 60%); transform:translateX(-140%) skewX(-8deg);} body.page-macro .mx2-expand-btn:hover::after{transform:translateX(140%) skewX(-8deg);transition:transform .55s ease;} body.page-macro .mx2-expand-btn:hover{ transform:translateY(-1px);border-color:var(--info); background:linear-gradient(180deg,color-mix(in srgb,var(--info) 22%,var(--gbtn-bg)),var(--gbtn-bg)); box-shadow:inset 0 1px 0 var(--gbtn-sheen),0 8px 22px -9px color-mix(in srgb,var(--info) 60%,transparent); } body.page-macro .mx2-expand-btn:active{transform:translateY(0) scale(.985)} @media (prefers-reduced-motion: reduce){ body.page-macro .mx2-expand-btn,body.page-macro .mx2-expand-btn:hover,body.page-macro .mx2-expand-btn:active{transform:none;} body.page-macro .mx2-expand-btn::after{display:none;} } body.page-macro .mx2-expand-btn .ea-ic{ display:inline-block;font-size:12px;line-height:1;color:var(--ink-info, var(--info)); transition:transform .28s cubic-bezier(.4,0,.2,1); } body.page-macro .mx2-expand-btn.all-open .ea-ic{transform:rotate(180deg)} /* ── HERO section ── */ body.page-macro .mx2-hero{padding:22px 0 0} /* The v-thesis p BECOMES the gradient headline in v2 — restyle in place */ body.page-macro .mx2-hero .v-thesis{ font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.02em; -webkit-text-fill-color:transparent;text-fill-color:transparent; background-clip:text;-webkit-background-clip:text; margin-bottom:4px; } body.page-macro .mx2-hero .v-thesis.ms-green{ background-image:linear-gradient(120deg,var(--up) 0%,#5fc89a 40%,var(--info) 80%); } body.page-macro .mx2-hero .v-thesis.ms-yellow{ background-image:linear-gradient(120deg,var(--warn) 0%,color-mix(in srgb,var(--warn) 55%,var(--info)) 50%,var(--info) 90%); } body.page-macro .mx2-hero .v-thesis.ms-red{ background-image:linear-gradient(120deg,var(--down) 0%,color-mix(in srgb,var(--down) 60%,var(--warn)) 45%,var(--warn) 85%); } /* VIS-01: light-theme thesis gradient — darken mid-stops to ≥3.0:1 on #f7f8fa (bg). Dark theme keeps the bright stops; light overrides to darker shades. ms-green: #1f9a55→#166b3c, #5fc89a→#2f9e6a (was 1.93:1, now ≥3.5:1 on near-white bg) ms-yellow: warn already ~3.19:1 in light; darken mid to #8a5a00 for the mid-range ms-red: down is dark blue; override mid to a darker amber */ [data-theme="light"] body.page-macro .mx2-hero .v-thesis.ms-green{ background-image:linear-gradient(120deg,#166b3c 0%,#2f9e6a 40%,#1a5cc8 80%); } [data-theme="light"] body.page-macro .mx2-hero .v-thesis.ms-yellow{ background-image:linear-gradient(120deg,#8a5a00 0%,#6a4800 50%,#1a5cc8 90%); } [data-theme="light"] body.page-macro .mx2-hero .v-thesis.ms-red{ background-image:linear-gradient(120deg,#a8000f 0%,#8a3400 45%,#804400 85%); } body.page-macro .mx2-hero .v-override, body.page-macro .mx2-hero .v-flip{ font-size:12px;color:var(--muted);margin-top:3px; } body.page-macro .mx2-hero-sub{font-size:12px;color:var(--muted);margin-bottom:16px} body.page-macro .mx2-hero-row{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:14px} /* Score panel — the hero-score-block; .ms-front provides color scope */ body.page-macro .mx2-score-block{ display:flex;flex-direction:column;gap:10px;flex-shrink:0; min-width:280px;padding:14px 18px 12px; border-radius:14px; /* VIS-05: glow + border keyed to verdict color (--ms-c set by .ms-green/.ms-yellow/.ms-red) */ border:1px solid color-mix(in srgb,var(--ms-c,var(--up)) 18%,var(--line)); box-shadow:0 0 40px -12px color-mix(in srgb,var(--ms-c,var(--up)) 20%,transparent); } body.page-macro .ms-front.ms-green .mx2-score-block{ background:linear-gradient(145deg,var(--panel) 0%,color-mix(in srgb,var(--up) 5%,var(--panel)) 100%); border-color:color-mix(in srgb,var(--up) 20%,var(--line)); } body.page-macro .ms-front.ms-yellow .mx2-score-block{ background:linear-gradient(145deg,var(--panel) 0%,color-mix(in srgb,var(--warn) 5%,var(--panel)) 100%); border-color:color-mix(in srgb,var(--warn) 20%,var(--line)); } body.page-macro .ms-front.ms-red .mx2-score-block{ background:linear-gradient(145deg,var(--panel) 0%,color-mix(in srgb,var(--down) 5%,var(--panel)) 100%); border-color:color-mix(in srgb,var(--down) 20%,var(--line)); } body.page-macro .mx2-score-top{display:flex;align-items:baseline;gap:10px} /* Restyle existing #ms-score el */ body.page-macro .mx2-score-block .v-score{ font-size:72px;font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--ms-c,var(--up)); text-shadow:0 0 60px color-mix(in srgb,var(--ms-c,var(--up)) 35%,transparent); } body.page-macro .mx2-score-block .v-outof{font-size:18px;font-weight:500;color:var(--muted);align-self:flex-end;margin-bottom:10px} body.page-macro .mx2-score-label-stack{display:flex;flex-direction:column;gap:3px;padding-bottom:8px} body.page-macro .mx2-score-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase} /* Restyle existing #ms-word el */ body.page-macro .mx2-score-block .v-word{font-size:15px;font-weight:800;color:var(--ms-c,var(--up));margin:0;padding:0} body.page-macro .mx2-score-block .v-word .arr{margin-left:4px} /* Progress bar — wraps existing #ms-tick */ body.page-macro .mx2-prog-wrap{display:flex;flex-direction:column;gap:0} body.page-macro .mx2-prog-track{ height:8px;border-radius:4px; background:color-mix(in srgb,var(--muted) 15%,transparent); overflow:visible;position:relative; } body.page-macro .mx2-prog-fill{ height:8px;border-radius:4px; background:linear-gradient(90deg,var(--q1) 0%,var(--up) 60%,#6ee7b7 100%); transition:width .6s cubic-bezier(.4,0,.2,1);pointer-events:none; } body.page-macro .ms-yellow .mx2-prog-fill{ background:linear-gradient(90deg,var(--q2) 0%,var(--warn) 100%); } body.page-macro .ms-red .mx2-prog-fill{ background:linear-gradient(90deg,var(--q3) 0%,var(--down) 100%); } /* Restyle existing #ms-tick */ body.page-macro .mx2-prog-track .tick{ position:absolute;top:-3px;bottom:-3px;width:2.5px;border-radius:2px; background:var(--text);transform:translateX(-50%); box-shadow:0 0 8px color-mix(in srgb,var(--up) 60%,transparent); pointer-events:none; } body.page-macro .mx2-prog-labels{ display:flex;justify-content:space-between; font-size:9px;color:var(--muted);margin-top:4px; } /* ms-live-pill stays in score top */ body.page-macro .mx2-score-block .ms-live-wrap{display:flex;align-items:center;gap:6px;margin-left:auto} /* v-meter hide (replaced by mx2-prog-track) */ body.page-macro .mx2-score-block .v-meter{display:none} body.page-macro .mx2-score-block .v-scale{display:none} body.page-macro .mx2-score-block .v-label{display:none} /* Hero context card */ body.page-macro .mx2-hero-ctx{ flex:1;min-width:200px;max-width:420px; font-size:12px;color:var(--muted); padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-radius:10px; line-height:1.6; display:flex;flex-direction:column;gap:8px; } body.page-macro .mx2-hero-ctx strong{color:var(--text)} body.page-macro .mx2-hero-ctx .mx2-alerts-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* Leadership context line — muted context, not an alert; hidden when sector_bias absent */ body.page-macro .mx2-leadership-ctx{font-size:11px;color:var(--muted);line-height:1.55;padding:5px 8px;background:color-mix(in srgb,var(--muted) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--muted) 14%,transparent);border-radius:6px;margin-top:2px} body.page-macro .mx2-leadership-ctx strong{color:var(--ink-2);font-weight:600} /* "What would flip this call" strip — calibrated regime keys only (flip margin / odds drift / conviction); shared by ledger hero and grid scorecard. Theme-var colors so it holds in light mode too. */ body.page-macro .mxfs{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--panel2) 55%,transparent);display:flex;flex-direction:column;gap:6px} body.page-macro .mxfs-hd{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} body.page-macro .mxfs-badge{margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.03em;text-transform:none;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 7px;white-space:nowrap} body.page-macro .mxfs-subtitle{font-size:11px;color:var(--ink-3,rgba(255,255,255,.36));line-height:1.4;margin-top:-2px} body.page-macro .mxfs-row{display:flex;gap:10px;align-items:baseline;font-size:12px;line-height:1.5;color:var(--text)} body.page-macro .mxfs-k{flex:none;width:118px;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--muted)} body.page-macro .mxfs-v{min-width:0} body.page-macro .mxfs-v b{font-weight:700;color:var(--text)} body.page-macro .mxfs-stance{font-size:11px;color:var(--ink-3,rgba(255,255,255,.36));line-height:1.5;padding-top:4px;border-top:1px solid var(--line);margin-top:2px} /* ── Goldilocks explainer — quad-map hero (macro sweep 2026-07) ────────────── Full-width 2×2 map with odds printed inside each rounded tile, a pulsing position dot and an animated drift arrow. The old side-by-side odds list is retired (odds now live in the tiles). */ body.page-macro .mxqm-eyebrow-row{display:flex;align-items:center;gap:8px;margin-bottom:8px} body.page-macro .mxqm-eyebrow-chip{margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.02em;color:var(--muted); border:1px solid var(--gbtn-brd);border-radius:999px;padding:2px 9px;white-space:nowrap;background:var(--gbtn-bg)} /* Inside the pop: the eyebrow row already carries the "context, not a forecast" chip, so suppress the duplicate badge in the shared regime_flip_strip header. */ body.page-macro #mx5FlipCtxPop .mxfs-badge{display:none} body.page-macro .mxqm-glance{font-size:12.5px;line-height:1.5;color:var(--ink-2,rgba(255,255,255,.78));margin:2px 0 10px} /* The regime name was --warn, i.e. the SAME token the position dot used — so the headline word and a dot sitting in a different quadrant were painted alike, which is half of why the two read as one self-contradicting claim. It is also 3.6:1 on white (12.5px bold is not WCAG large text, so it wanted 4.5:1). Full text ink fixes both, and leaves hue to mean quadrant and nothing else. */ body.page-macro .mxqm-glance b{color:var(--text,#c8d0dc);font-weight:700} /* Divergence line — shown ONLY when today's reading and the confirmed label sit in different quadrants. A watch condition, never an alarm: no falsifier/refutation vocabulary on a user surface (operator 2026-07-27). */ body.page-macro .mxqm-diverge{display:block;margin-top:3px;color:var(--muted)} /* Legend. The map carries two different KINDS of object — a measurement and a label — and shipped naming neither, so the dot read as a broken "you are here". One row, defined once, under the plot. */ body.page-macro .mxqm-legend{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px; margin:6px 0 0;font-size:9.5px;letter-spacing:.02em;color:var(--muted)} body.page-macro .mxqm-lg-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} body.page-macro .mxqm-lg-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--mxqm-mark,#f2f6fc)} /* swatch = the active tile's exact composite (its hue at .42 over the plate), the same color-mix the odds halo uses, so it re-shades per theme and through the zh q1/q3 swap for free. */ body.page-macro .mxqm-lg-tile{width:9px;height:9px;border-radius:2.5px;flex:none} body.page-macro .mxqm-lg-q1{background:color-mix(in srgb,var(--q1,#2e9e4f) 42%,var(--mxqm-plate,rgba(16,21,30,.97)))} body.page-macro .mxqm-lg-q2{background:color-mix(in srgb,var(--q2,#d4a017) 42%,var(--mxqm-plate,rgba(16,21,30,.97)))} body.page-macro .mxqm-lg-q3{background:color-mix(in srgb,var(--q3,#d04545) 42%,var(--mxqm-plate,rgba(16,21,30,.97)))} body.page-macro .mxqm-lg-q4{background:color-mix(in srgb,var(--q4,#3f78d8) 42%,var(--mxqm-plate,rgba(16,21,30,.97)))} body.page-macro .mxqm-wrap{margin:0 0 8px} body.page-macro .mxqm-svg-box{width:100%;max-width:300px;margin:0 auto} body.page-macro .mxqm-svg-box svg{width:100%;height:auto;display:block;overflow:visible} /* Quad fill classes — CSS rules (not presentation attrs) so var() resolves fine; --q1/--q3 swap under zh (theme.css 红涨绿跌) and all four re-shade per theme, which also retires the old per-theme literal overrides. Active tile lifts brighter. */ body.page-macro .mxqm-q1-fill{fill:var(--q1,#2e9e4f);opacity:.14} body.page-macro .mxqm-q2-fill{fill:var(--q2,#d4a017);opacity:.14} body.page-macro .mxqm-q3-fill{fill:var(--q3,#d04545);opacity:.14} body.page-macro .mxqm-q4-fill{fill:var(--q4,#3f78d8);opacity:.14} body.page-macro .mxqm-q1-fill.active{opacity:.42} body.page-macro .mxqm-q2-fill.active{opacity:.42} body.page-macro .mxqm-q3-fill.active{opacity:.42} body.page-macro .mxqm-q4-fill.active{opacity:.42} body.page-macro .mxqm-axis-label{fill:rgba(255,255,255,.34);font-size:7.5px;letter-spacing:.04em;font-family:Inter,-apple-system,sans-serif} body.page-macro .mxqm-quad-label{fill:rgba(255,255,255,.62);font-size:6.6px;letter-spacing:.04em;font-family:Inter,-apple-system,sans-serif;font-weight:700; paint-order:stroke fill;stroke-width:2.2;stroke-linejoin:round} body.page-macro .mxqm-quad-label.l-zh{font-size:8px;letter-spacing:.06em} /* The odds numeral carries a HALO so the position dot (drawn beneath it — see the marker-layer note in the SVG) can pass behind the glyphs without eating them. paint-order:stroke fill lays the stroke down first, so the stroke reads as an outline OUTSIDE the letterform instead of thinning it. The halo has to be the colour of the tile it sits on, or it shows up as a glow: each tile is `fill:var(--qN); opacity:.14` (or .42 when active) composited over the popup plate, which color-mix() reproduces exactly. Referencing --qN keeps this correct through both themes AND the zh 红涨绿跌 q1/q3 swap for free. */ body.page-macro .mxqm-odds{fill:rgba(255,255,255,.72);font-size:17px;font-weight:800;font-family:Inter,-apple-system,sans-serif;font-variant-numeric:tabular-nums; paint-order:stroke fill;stroke-width:3.4;stroke-linejoin:round; stroke:color-mix(in srgb,var(--q1,#2e9e4f) 14%,var(--mxqm-plate,rgba(16,21,30,.97)))} body.page-macro .mxqm-halo-q1{stroke:color-mix(in srgb,var(--q1,#2e9e4f) 14%,var(--mxqm-plate,rgba(16,21,30,.97)))} body.page-macro .mxqm-halo-q2{stroke:color-mix(in srgb,var(--q2,#d4a017) 14%,var(--mxqm-plate,rgba(16,21,30,.97)))} body.page-macro .mxqm-halo-q3{stroke:color-mix(in srgb,var(--q3,#d04545) 14%,var(--mxqm-plate,rgba(16,21,30,.97)))} body.page-macro .mxqm-halo-q4{stroke:color-mix(in srgb,var(--q4,#3f78d8) 14%,var(--mxqm-plate,rgba(16,21,30,.97)))} /* active tile = the .42 fill. NOT necessarily the tile the dot lands in: the dot is today's raw growth x inflation reading, the active tile is the hysteresis-confirmed label, and during a transition they legitimately differ (see .mxqm-diverge). Every tile therefore needs its halo mix at BOTH opacities. */ body.page-macro .mxqm-halo-q1.active{stroke:color-mix(in srgb,var(--q1,#2e9e4f) 42%,var(--mxqm-plate,rgba(16,21,30,.97)))} body.page-macro .mxqm-halo-q2.active{stroke:color-mix(in srgb,var(--q2,#d4a017) 42%,var(--mxqm-plate,rgba(16,21,30,.97)))} body.page-macro .mxqm-halo-q3.active{stroke:color-mix(in srgb,var(--q3,#d04545) 42%,var(--mxqm-plate,rgba(16,21,30,.97)))} body.page-macro .mxqm-halo-q4.active{stroke:color-mix(in srgb,var(--q4,#3f78d8) 42%,var(--mxqm-plate,rgba(16,21,30,.97)))} body.page-macro .mxqm-odds.active{fill:#fff} /* ── Colour law for this map: HUE = quadrant, INK = measurement ──────────────── All four hues are spoken for (--q1..--q4), and --q1/--q3 additionally SWAP under zh 红涨绿跌 — so any hue the position marker picks collides with some tile in some theme x language. It shipped on --warn, which resolves to #b9791a on light: six degrees of hue from --q2 #b07d05, the REFLATION tile. The "you are here" dot was therefore painted in one of the four categories it is supposed to be neutral about — it camouflaged on an active Reflation tile, and over the pale Stagflation tile it read as a brown smudge rather than a marker (operator report 2026-08-11). The old light-theme stroke rgba(0,0,0,.5) made that worse: a translucent black rim over a dark ochre fill is mud, and it separates the dot from nothing. --mxqm-mark is theme ink and carries NO category meaning; the ring is the plate colour, opaque, so the marker separates from all four tile hues in both themes. Anything painted here that means "the reading" (dot, pulse, drift arrow) takes --mxqm-mark. Never a --qN, never a state token. */ body.page-macro .mxqm-dot{fill:var(--mxqm-mark,#f2f6fc);stroke:var(--mxqm-plate,rgba(16,21,30,.97));stroke-width:2} body.page-macro .mxqm-pulse{fill:var(--mxqm-mark,#f2f6fc);opacity:.26;transform-box:fill-box;transform-origin:center;animation:mxqmPulse 2.4s ease-out infinite} body.page-macro .mxqm-arrow{stroke:var(--mxqm-mark,#f2f6fc);stroke-width:2;fill:none;marker-end:url(#mxqmArrowHead);opacity:.62; stroke-dasharray:120;stroke-dashoffset:120;animation:mxqmDraw .9s ease-out .15s forwards} body.page-macro .mxqm-arrowhead{fill:var(--mxqm-mark,#f2f6fc)} @keyframes mxqmPulse{0%{transform:scale(1);opacity:.30}70%{transform:scale(2.9);opacity:0}100%{transform:scale(2.9);opacity:0}} @keyframes mxqmDraw{to{stroke-dashoffset:0}} @media (prefers-reduced-motion: reduce){ body.page-macro .mxqm-pulse{animation:none;opacity:.20} body.page-macro .mxqm-arrow{animation:none;stroke-dashoffset:0} } [data-theme="light"] body.page-macro .mxqm-axis-label{fill:rgba(0,0,0,.58)} [data-theme="light"] body.page-macro .mxqm-quad-label{fill:rgba(0,0,0,.62)} [data-theme="light"] body.page-macro .mxqm-odds{fill:rgba(0,0,0,.6)} [data-theme="light"] body.page-macro .mxqm-odds.active{fill:rgba(0,0,0,.9)} /* ── Task 6: leadership drawdown bar strip ── */ body.page-macro .rsx-ldr-bars{margin:6px 0 4px;display:flex;flex-direction:column;gap:3px;position:relative} body.page-macro .rsx-ldr-bar-row{display:flex;align-items:center;gap:5px;font-size:10.5px;min-height:16px} body.page-macro .rsx-ldr-bar-ticker{flex:none;width:38px;font-weight:700;color:var(--ink-2,rgba(255,255,255,.72));font-size:10px} body.page-macro .rsx-ldr-bar-track{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.06);position:relative;overflow:visible} body.page-macro .rsx-ldr-bar-fill{height:100%;border-radius:4px;background-color:var(--down,#ef4444);opacity:.75} body.page-macro .rsx-ldr-bar-pct{flex:none;font-size:10px;font-weight:700} /* index reference line — absolutely positioned over the track; drawn via inline style left:% */ body.page-macro .rsx-ldr-idx-line{ position:absolute;top:0;bottom:0;width:1.5px; background:rgba(255,255,255,.35);border-radius:1px;pointer-events:none; } body.page-macro .rsx-ldr-idx-label{ position:absolute;top:-12px;transform:translateX(-50%); font-size:8.5px;color:var(--ink-3,rgba(255,255,255,.4));white-space:nowrap; } [data-theme="light"] body.page-macro .rsx-ldr-bar-ticker{color:rgba(0,0,0,.72)} [data-theme="light"] body.page-macro .rsx-ldr-bar-fill{background-color:#ef4444} [data-theme="light"] body.page-macro .rsx-ldr-idx-line{background:rgba(0,0,0,.3)} [data-theme="light"] body.page-macro .rsx-ldr-idx-label{color:rgba(0,0,0,.58)} @media(max-width:640px){body.page-macro .mxfs-row{flex-direction:column;gap:1px}body.page-macro .mxfs-k{width:auto} /* the longer honest-stance pill text ("… — not all-clear") must wrap on narrow phones instead of bleeding past the card edge (pill is nowrap on desktop; nowrap removed in 1c so this override is now redundant but harmless) */ body.page-macro.mx4-grid .mx5-regime-pill{white-space:normal}} /* ── Flip-context hover panel (grid view only) ── */ /* Panel floats over the thesis/buttons; hover on gauge row or panel itself keeps it open */ body.page-macro.mx4-grid .mx5-flipctx-anchor{position:relative;} body.page-macro.mx4-grid .mx5-flipctx-pop{ position:absolute;left:0;right:0; top:34px;z-index:120; opacity:0;visibility:hidden;transform:translateY(-4px); transition:opacity .18s ease .05s,transform .18s ease .05s,visibility 0s linear .3s; pointer-events:none; /* Goldilocks trim (2026-07-20): the pop now fits without scrolling (flip-strip section deleted, weakest+grip compressed to one line), so the scroll cap + bottom fade are removed per Fable's "a hover popup must never scroll" ruling. */ background:var(--mx5-pop-bg,rgba(16,21,30,.97)); /* the plate the quad tiles composite over — the quad-map numeral halo mixes its tile hue into this to land on the tile's exact colour. Kept as its own token because the light theme overrides `background` with a literal below rather than re-pointing --mx5-pop-bg, so the halo cannot read the background. */ --mxqm-plate:var(--mx5-pop-bg,rgba(16,21,30,.97)); /* the MEASUREMENT ink — position dot, its pulse and the drift arrow. Deliberately NOT a state token: see the colour law above .mxqm-dot. Denser than --text so a 4.5-unit dot still reads as a marker rather than as a stray glyph. */ --mxqm-mark:#f2f6fc; border:1px solid var(--mx5-glass-border,rgba(255,255,255,.12)); border-radius:14px; box-shadow:0 18px 48px rgba(0,0,0,.5); padding:12px 14px 14px; backdrop-filter:blur(20px); } [data-theme="light"] body.page-macro.mx4-grid .mx5-flipctx-pop{ background:#fff; --mxqm-plate:#fff; --mxqm-mark:#1b2333; border-color:rgba(0,0,0,.12); box-shadow:0 18px 48px rgba(20,30,50,.18); } /* reveal on regime pill hover/focus, or when cursor enters the panel itself */ body.page-macro.mx4-grid .mx5-regime-pill:hover ~ .mx5-flipctx-pop, body.page-macro.mx4-grid .mx5-flipctx-pop:hover, body.page-macro.mx4-grid .mx5-regime-pill:focus ~ .mx5-flipctx-pop{ opacity:1;visibility:visible;transform:none;pointer-events:auto; transition:opacity .18s ease .12s,transform .18s ease .12s,visibility 0s linear 0s; } /* neutralize the .mxfs card chrome inside the pop — the pop provides its own container */ body.page-macro.mx4-grid .mx5-flipctx-pop .mxfs{border:none;background:transparent;margin-top:0;} /* affordance: pill cursor + info icon */ body.page-macro.mx4-grid .mx5-regime-pill{cursor:help;} body.page-macro.mx4-grid .mx5-pill-info{ font-size:10px;margin-left:3px;flex-shrink:0; } /* mobile: pop is static and initially hidden; toggled by JS tap */ @media(max-width:700px){ body.page-macro.mx4-grid .mx5-flipctx-pop{ position:static;box-shadow:none; border:1px solid var(--line); display:none;opacity:1;visibility:visible;transform:none;pointer-events:auto; } body.page-macro.mx4-grid .mx5-flipctx-pop.open{display:block;} } /* Grid view: hide driver-ctx text block (Zone 2 covers it); keep alerts+catalyst pill row */ body.page-macro.mx4-grid .mx2-hero-ctx>div:first-child{display:none;} /* In grid view, ctx card becomes a slim row with just alerts */ body.page-macro.mx4-grid .mx2-hero-ctx{ background:transparent;border:none;padding:4px 0;flex:none;min-width:0; } /* ── Island system color tokens per section ── */ body.page-macro{ --isle-evidence:#20c0a0; --isle-events:#e0a030; --isle-markets:#4d8ef5; --isle-risk:#e05c5c; --isle-policy:#a070e8; --isle-brief:#38c472; --isle-news:#7a8494; --isle-deep:#4d8ef5; /* tri-layer shadow stack */ --island-shadow-tight:0 2px 10px rgba(0,0,0,.6); --island-shadow-mid:0 10px 40px -6px rgba(0,0,0,.55); --island-shadow-ambient:0 36px 90px -18px rgba(0,0,0,.40); } [data-theme="light"] body.page-macro,[data-theme="light"].page-macro{ --island-shadow-tight:0 2px 8px rgba(20,30,50,.12); --island-shadow-mid:0 10px 32px -6px rgba(20,30,50,.16); --island-shadow-ambient:0 32px 72px -14px rgba(20,30,50,.14); } /* ── Row-ledger sections ── */ body.page-macro .sx{ position:relative; margin-top:0;border-bottom:1px solid var(--line); transition:opacity .35s ease,transform .35s ease,filter .35s ease; } body.page-macro .sx:last-of-type{border-bottom:none} body.page-macro .sx[data-open]{z-index:10} /* Sibling recession when any island is open */ body.page-macro.has-open-island .sx:not([data-open]){ opacity:.45; filter:saturate(.4) brightness(.85); transform:scale(.998); } [data-theme="light"] body.page-macro.has-open-island .sx:not([data-open]){ opacity:.55;filter:saturate(.5) brightness(.93); } /* sx-sum / sx-label / sx-chev / sx-glance CSS removed (v5.1: ledger rows retired) */ /* ── v3 ISLAND TRAY — grid-template-rows expand mechanism ── */ body.page-macro .sx-tray{ display:grid; grid-template-rows:0fr; opacity:0; transition: grid-template-rows .40s cubic-bezier(.34,1.08,.64,1), opacity .28s ease; } body.page-macro .sx-tray-inner-wrap{overflow:hidden} body.page-macro .sx[data-open] .sx-tray{ grid-template-rows:1fr; opacity:1; } /* Legacy sx-tray-inner (still present in RISK/POLICY/AIBRIEF/NEWS/DEEP trays) */ body.page-macro .sx-tray-inner{padding:0 0 24px} /* ── ISLAND CARD — the dimensional lift container ── */ body.page-macro .sx-island{ position:relative; margin:0 -6px 20px -6px; padding:20px 22px 24px; border-radius:18px; border:1.5px solid var(--isle-color,var(--info)); transform-style:preserve-3d; background:var(--panel); background-image:linear-gradient(160deg,rgba(255,255,255,.025) 0%,transparent 60%); border-top-color:color-mix(in srgb,var(--isle-color,var(--info)) 55%,rgba(255,255,255,.6)); box-shadow:none; transition: box-shadow .4s cubic-bezier(.34,1.08,.64,1), transform .4s cubic-bezier(.34,1.08,.64,1), border-color .3s ease; } body.page-macro .sx[data-open] .sx-island{ transform:translateY(-3px) rotateX(0.6deg) scale(1.012); box-shadow: var(--island-shadow-tight), var(--island-shadow-mid), var(--island-shadow-ambient), 0 0 60px -10px color-mix(in srgb,var(--isle-color,var(--info)) 30%,transparent), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); animation:isle-breathe 6s ease-in-out infinite; } body.page-macro .sx:not([data-open]) .sx-island{ transform:translateY(0) rotateX(0deg) scale(1); box-shadow:none;animation:none; backdrop-filter:none;-webkit-backdrop-filter:none; } /* Light mode island */ [data-theme="light"] body.page-macro .sx[data-open] .sx-island{ background:var(--panel); border-width:2px; border-color:color-mix(in srgb,var(--isle-color,var(--info)) 70%,transparent); border-top-color:var(--isle-color,var(--info)); box-shadow: var(--island-shadow-tight), var(--island-shadow-mid), var(--island-shadow-ambient), 0 0 30px -10px color-mix(in srgb,var(--isle-color,var(--info)) 22%,transparent), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:none;-webkit-backdrop-filter:none; } /* many-open: ≥3 islands open → halve glow mass */ body.page-macro.many-open .sx[data-open] .sx-island{ box-shadow: var(--island-shadow-tight), var(--island-shadow-mid), 0 0 30px -12px color-mix(in srgb,var(--isle-color,var(--info)) 18%,transparent), inset 0 1px 0 rgba(255,255,255,.06); } /* Aurora edge drift ::before */ body.page-macro .sx-island::before{ content:''; position:absolute;inset:-1.5px;border-radius:inherit;z-index:-1; background:conic-gradient( from var(--isle-aurora-angle,0deg), color-mix(in srgb,var(--isle-color,var(--info)) 50%,transparent) 0%, transparent 22%, color-mix(in srgb,var(--isle-color,var(--info)) 28%,transparent) 50%, transparent 72%, color-mix(in srgb,var(--isle-color,var(--info)) 50%,transparent) 100% ); opacity:0;transition:opacity .5s ease; } body.page-macro .sx[data-open] .sx-island::before{ /* Perf (2026-07-21 mobile audit): the angle sweep restyles + repaints the whole island every frame (custom-property animation is main-thread). steps(84) keeps the drift at ~6fps — visually identical on this soft gradient — and cuts ~90% of the paint work; touch devices hold the lit rim entirely. */ opacity:.38;animation:isle-aurora 14s steps(84) infinite; } @media (pointer:coarse){ body.page-macro .sx[data-open] .sx-island::before{animation:none} } body.page-macro .sx:not([data-open]) .sx-island::before{opacity:0;animation:none} [data-theme="light"] body.page-macro .sx[data-open] .sx-island::before{opacity:.2} /* Under-glow floor ::after */ body.page-macro .sx-island::after{ content:''; position:absolute;left:10%;right:10%;bottom:-14px;height:30px; border-radius:50%; background:color-mix(in srgb,var(--isle-color,var(--info)) 38%,transparent); /* blur frozen at the midpoint — animating blur() re-rasterizes every frame (2026-07-21 mobile audit); the breathing lives in opacity alone below. */ filter:blur(16px);opacity:0;transition:opacity .4s ease;z-index:-2; } body.page-macro .sx[data-open] .sx-island::after{ opacity:.55;animation:isle-underglow 5s ease-in-out infinite; } body.page-macro .sx:not([data-open]) .sx-island::after{opacity:0;animation:none} body.page-macro.many-open .sx[data-open] .sx-island::after{opacity:.28} [data-theme="light"] body.page-macro .sx[data-open] .sx-island::after{ opacity:.25;background:color-mix(in srgb,var(--isle-color,var(--info)) 50%,transparent); } /* Island keyframes */ @keyframes isle-breathe{ 0%,100%{transform:translateY(-3px) rotateX(0.6deg) scale(1.012)} 50%{transform:translateY(-5px) rotateX(0.7deg) scale(1.013)} } @keyframes isle-aurora{ from{--isle-aurora-angle:0deg}to{--isle-aurora-angle:360deg} } @keyframes isle-underglow{ 0%,100%{opacity:.50} 50%{opacity:.70} } /* Island header beacon */ body.page-macro .isle-head{ display:flex;align-items:center;gap:10px; margin-bottom:18px;padding-bottom:12px; border-bottom:1px solid color-mix(in srgb,var(--isle-color,var(--info)) 20%,var(--line)); } body.page-macro .isle-head-dot{ width:8px;height:8px;border-radius:50%; background:var(--isle-color,var(--info)); box-shadow:0 0 10px 2px color-mix(in srgb,var(--isle-color,var(--info)) 55%,transparent); flex-shrink:0; } body.page-macro .isle-head-label{ font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--isle-color,var(--info)); } body.page-macro .isle-head-line{flex:1;height:1px;background:color-mix(in srgb,var(--isle-color,var(--info)) 18%,transparent)} /* Staggered content entrance */ body.page-macro .isle-stagger{ opacity:0;transform:translateY(8px); transition:opacity .3s ease,transform .32s cubic-bezier(.34,1.10,.64,1); } body.page-macro .sx[data-open] .isle-stagger{opacity:1;transform:none} body.page-macro .isle-s1{transition-delay:.06s} body.page-macro .isle-s2{transition-delay:.12s} body.page-macro .isle-s3{transition-delay:.18s} body.page-macro .isle-s4{transition-delay:.24s} body.page-macro .isle-s5{transition-delay:.30s} body.page-macro .isle-s6{transition-delay:.36s} body.page-macro .isle-s7{transition-delay:.42s} body.page-macro .isle-s8{transition-delay:.48s} /* reduced-motion */ @media(prefers-reduced-motion:reduce){ body.page-macro .sx[data-open] .sx-island{ animation:none!important; transform:translateY(-2px) scale(1.005)!important; } body.page-macro .sx-island::before,body.page-macro .sx-island::after{animation:none!important} body.page-macro .isle-stagger{ transition:none!important;opacity:1!important;transform:none!important; } } /* @property for aurora conic-gradient animation (guarded by try/catch in JS) */ @property --isle-aurora-angle{ syntax:'';inherits:false;initial-value:0deg; } /* tray as-of stamp */ body.page-macro .isle-stamp{font-size:10px;color:var(--muted);padding:10px 0 2px;text-align:right;font-variant-numeric:tabular-nums} /* ── v2 chip vocabulary (matches v2_final.html) ── */ body.page-macro .v2chip{ display:inline-flex;align-items:center;gap:4px; padding:3px 9px;border-radius:100px; font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap; } body.page-macro .v2chip.c-q1{background:color-mix(in srgb,var(--q1) 16%,var(--panel));color:var(--q1);border:1px solid color-mix(in srgb,var(--q1) 28%,transparent)} body.page-macro .v2chip.c-q2{background:color-mix(in srgb,var(--q2) 16%,var(--panel));color:var(--q2);border:1px solid color-mix(in srgb,var(--q2) 28%,transparent)} body.page-macro .v2chip.c-q3{background:color-mix(in srgb,var(--q3) 16%,var(--panel));color:var(--q3);border:1px solid color-mix(in srgb,var(--q3) 28%,transparent)} body.page-macro .v2chip.c-q4{background:color-mix(in srgb,var(--q4) 16%,var(--panel));color:var(--q4);border:1px solid color-mix(in srgb,var(--q4) 28%,transparent)} body.page-macro .v2chip.c-up{background:color-mix(in srgb,var(--up) 14%,var(--panel));color:var(--ink-up, var(--up));border:1px solid color-mix(in srgb,var(--up) 25%,transparent)} body.page-macro .v2chip.c-down{background:color-mix(in srgb,var(--down) 14%,var(--panel));color:var(--ink-down, var(--down));border:1px solid color-mix(in srgb,var(--down) 25%,transparent)} body.page-macro .v2chip.c-warn{background:color-mix(in srgb,var(--warn) 14%,var(--panel));color:var(--ink-warn, var(--warn));border:1px solid color-mix(in srgb,var(--warn) 25%,transparent)} body.page-macro .v2chip.c-info{background:color-mix(in srgb,var(--info) 14%,var(--panel));color:var(--ink-info, var(--info));border:1px solid color-mix(in srgb,var(--info) 25%,transparent)} body.page-macro .v2chip.c-muted{background:color-mix(in srgb,var(--muted) 12%,var(--panel));color:var(--muted);border:1px solid color-mix(in srgb,var(--muted) 20%,transparent)} body.page-macro .v2-display-badge{ display:inline-flex;align-items:center;font-size:11px;font-weight:600; letter-spacing:.06em;color:var(--muted);background:var(--panel2); border:1px solid var(--line);border-radius:5px;padding:2px 7px; } /* ── EVENTS TRAY (v3 island design) ── */ body.page-macro .mx2-events-glance{display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* ── MARKETS TRAY ── */ body.page-macro .mx2-mkt-glance{display:flex;gap:8px;flex-wrap:wrap} /* Collapsed mini-tiles — premium v3 style */ body.page-macro .mx2-mkt-tile{ background:var(--panel2);border:1px solid var(--line);border-radius:9px; padding:9px 13px;min-width:115px;flex:1; } body.page-macro .mx2-mkt-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px} body.page-macro .mx2-mkt-name{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase} body.page-macro .mx2-mkt-chg{font-size:11px;font-weight:700} body.page-macro .mx2-mkt-chg.up{color:var(--ink-up, var(--up))} body.page-macro .mx2-mkt-chg.dn{color:var(--ink-down, var(--down))} body.page-macro .mx2-mkt-px{font-size:18px;font-weight:800;color:var(--ink,var(--text));line-height:1.1;margin-top:2px;font-variant-numeric:tabular-nums} /* Legacy mkt-detail for backward compat */ body.page-macro .mx2-mkt-detail{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px} body.page-macro .mx2-mkt-d-ticker{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase} body.page-macro .mx2-mkt-d-name{font-size:11px;font-weight:600;color:var(--text);margin:3px 0} body.page-macro .mx2-mkt-d-px{font-size:22px;font-weight:800;color:var(--text);line-height:1.1;font-variant-numeric:tabular-nums} body.page-macro .mx2-mkt-d-chg{font-size:12px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums} body.page-macro .mx2-mkt-d-chg.up{color:var(--ink-up, var(--up))} body.page-macro .mx2-mkt-d-chg.dn{color:var(--ink-down, var(--down))} body.page-macro .mx2-mkt-d-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)} body.page-macro .mx2-stat{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600} body.page-macro .mx2-stat.ok{color:var(--ink-up, var(--up));background:color-mix(in srgb,var(--up) 10%,transparent)} body.page-macro .mx2-stat.wn{color:var(--ink-warn, var(--warn));background:color-mix(in srgb,var(--warn) 10%,transparent)} body.page-macro .mx2-stat.mt{color:var(--muted);background:color-mix(in srgb,var(--muted) 8%,transparent)} /* Legacy sector */ body.page-macro .mx2-sh-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px} body.page-macro .mx2-sh-col{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px 16px} body.page-macro .mx2-sh-col-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px} body.page-macro .mx2-sh-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent)} body.page-macro .mx2-sh-row:last-child{border-bottom:none} body.page-macro .mx2-sh-arr{font-size:11px;width:12px;text-align:center;flex-shrink:0} body.page-macro .mx2-sh-arr.heat{color:var(--ink-up, var(--up))} body.page-macro .mx2-sh-arr.cool{color:var(--ink-down, var(--down))} body.page-macro .mx2-sh-name{font-size:12px;font-weight:600;color:var(--text);flex:1} body.page-macro .mx2-sh-rk{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums} /* Heatmap chrome wrapper (v3) */ body.page-macro .isle-heatmap-wrap{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;min-height:120px;margin-top:14px} body.page-macro .isle-heatmap-chrome-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:10px 14px 0} /* MOB-05: hide heatmap sublabels at mobile — heatmap.js renders labels with inline style="font-size:Xpx" where X can be 4–5px on a 281px canvas at 390px viewport. Target via CSS attr substring matching on the inline style; silence text ≤7px while preserving ≥8px. */ @media(max-width:560px){ /* px-anchored so 40-79px labels never match the substring (verify F6) */ body.page-macro #heatmap-scorecard [style*="font-size:4px"], body.page-macro #heatmap-scorecard [style*="font-size: 4px"], body.page-macro #heatmap-scorecard [style*="font-size:5px"], body.page-macro #heatmap-scorecard [style*="font-size: 5px"], body.page-macro #heatmap-scorecard [style*="font-size:6px"], body.page-macro #heatmap-scorecard [style*="font-size: 6px"], body.page-macro #heatmap-scorecard [style*="font-size:7px"], body.page-macro #heatmap-scorecard [style*="font-size: 7px"], body.page-macro #heatmap-scorecard [style*="font-size:4."], body.page-macro #heatmap-scorecard [style*="font-size:5."], body.page-macro #heatmap-scorecard [style*="font-size:6."], body.page-macro #heatmap-scorecard [style*="font-size:7."]{color:transparent!important} } /* PERMA-FIX — recurring black-label regression (operator: the institutional board is ALWAYS white text). This guard lives in the freshly-rendered page CSS, so it overrides a STALE cached heatmap.js (script tag carries no ?v=) that still computes a dark contrast colour for some tiles — heatmap.js sets the label colour as an inline style, which a stylesheet !important beats. Kept at low specificity (no #id) so the MOB-05 sublabel-hide above still wins on mobile and silences tiny sub-labels. */ body.page-macro .hm-tile, body.page-macro .hm-tile .sym, body.page-macro .hm-tile .pc{color:#fff!important} body.page-macro .mx2-tray-stamp{font-size:10px;color:var(--muted);padding:8px 0 4px;text-align:right;font-variant-numeric:tabular-nums} /* Section eyebrow label */ body.page-macro .isle-section-eyebrow{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px} /* ── Hide old macro sections replaced by v2 ── */ body.page-macro #sector-heat.mx2-hidden, body.page-macro #heatmap-scorecard.mx2-hidden{display:none!important} /* Hide old index-health grid (moved into markets tray) */ body.page-macro .idx-grid.mx2-hidden{display:none} /* Stage-B: hide standalone sentiment/news/link-out in macro (moved to v2 trays). The markup is kept for CI test extraction by text-landmark; hidden from display. NOTE: :has(.mx-linkout-strip) is REMOVED — the v2 panel also contains .mx-linkout-strip inside sx-deep-context; use v2-retired-macro class instead (added to old link-out div). */ body.page-macro details#sentiment-regime.panel{display:none!important} body.page-macro .panel#now-board.span6{display:none!important} /* now-board-legacy + v2-retired-macro rules removed — the blocks no longer render (INT-07/09dt) */ /* ── Responsive ── */ @media(max-width:900px){ body.page-macro .isle-ev-row{grid-template-columns:20px 1fr 100px 32px} body.page-macro .mx2-mkt-grid{grid-template-columns:1fr 1fr} body.page-macro .isle-sector-block{grid-template-columns:1fr} body.page-macro .isle-asset-strip{grid-template-columns:1fr 1fr} body.page-macro .isle-event-grid{grid-template-columns:1fr} body.page-macro .idx-card-grid{grid-template-columns:1fr 1fr} body.page-macro .mx2-hero-ctx{max-width:none} } @media(max-width:680px){ body.page-macro .mx2-hero .v-thesis{font-size:22px} body.page-macro .mx2-score-block .v-score{font-size:52px} body.page-macro .mx2-mkt-glance{gap:6px} body.page-macro .mx2-hero-row{gap:12px} body.page-macro .mx2-score-block{padding:10px 14px;min-width:220px} body.page-macro .mx2-mkt-tile{min-width:calc(50% - 4px)} } @media(max-width:390px){ body.page-macro .mx2-mkt-grid{grid-template-columns:1fr} body.page-macro .isle-asset-strip{grid-template-columns:1fr 1fr} body.page-macro .mx2-mkt-glance{flex-wrap:wrap} body.page-macro .mx2-mkt-tile{min-width:calc(50% - 4px)} body.page-macro .isle-ev-row{grid-template-columns:16px 1fr 60px 28px;gap:6px} } @media(max-width:390px){body.page-macro .mx2-mkt-tile{width:100%;min-width:unset;flex:1 1 100%}} /* ── RISK TRAY (Stage B) ── */ body.page-macro .mx2-risk-glance{display:flex;align-items:center;gap:10px;flex-wrap:wrap} body.page-macro .mx2-risk-state{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} body.page-macro .mx2-risk-intensity{display:flex;align-items:center;gap:5px;flex:1;min-width:80px;max-width:140px} body.page-macro .mx2-risk-bar{height:5px;border-radius:3px;background:color-mix(in srgb,var(--muted) 15%,transparent);flex:1;position:relative;overflow:hidden} body.page-macro .mx2-risk-bar-fill{height:5px;border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1)} body.page-macro .mx2-risk-tray{display:flex;flex-direction:column;gap:14px;padding-top:18px} body.page-macro .mx2-risk-section{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px 16px} body.page-macro .mx2-risk-section-hd{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} /* ── RISK TRAY v3: scare-ladder, dd-ladder, sentiment-grid ── */ body.page-macro .scare-ladder{display:flex;flex-direction:column;gap:6px;margin-top:14px} body.page-macro .scare-row{display:grid;grid-template-columns:minmax(140px,220px) 1fr 52px 60px;align-items:center;gap:12px;padding:11px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:10px} body.page-macro .sc-name{font-size:12px;font-weight:700;color:var(--text);line-height:1.3} body.page-macro .sc-bar-track{height:5px;background:color-mix(in srgb,var(--muted) 15%,transparent);border-radius:3px;overflow:hidden} body.page-macro .sc-bar-fill{height:5px;border-radius:3px} body.page-macro .sc-score{font-size:15px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums} body.page-macro .sc-band{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;text-align:center;white-space:nowrap} body.page-macro .sc-band-watch{color:var(--ink-warn, var(--warn));background:rgba(224,160,48,.13);border:1px solid rgba(224,160,48,.25)} body.page-macro .sc-band-calm{color:var(--ink-up, var(--up));background:rgba(62,200,122,.1);border:1px solid rgba(62,200,122,.2)} body.page-macro .sc-band-elev{color:var(--ink-info, var(--info));background:rgba(77,142,245,.1);border:1px solid rgba(77,142,245,.2)} body.page-macro .sc-band-high{color:var(--ink-down, var(--down));background:rgba(224,92,92,.1);border:1px solid rgba(224,92,92,.2)} body.page-macro .dd-ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px} body.page-macro .dd-box{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:11px 13px;text-align:center} body.page-macro .dd-horizon{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:5px} body.page-macro .dd-val{font-size:22px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums} body.page-macro .dd-sub{font-size:9px;color:var(--muted);margin-top:3px} body.page-macro .dd-caveat{font-size:10px;color:var(--muted);margin-top:10px;padding:9px 13px;border:1px solid var(--line);border-radius:8px;line-height:1.55} body.page-macro .sentiment-section{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} body.page-macro .sent-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:12px} body.page-macro .fe-synth{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 12px;padding:10px 14px;background:color-mix(in srgb,var(--panel2) 70%,transparent);border:1px solid var(--line);border-radius:10px} .sentiment-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} body.page-macro .sent-card{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:16px} body.page-macro .sent-card-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px} body.page-macro .sent-num{font-size:32px;font-weight:900;line-height:1;margin-bottom:8px} body.page-macro .froth-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(36,43,56,.5)} body.page-macro .froth-row:last-child{border-bottom:none} body.page-macro .froth-lbl{font-size:11px;color:var(--muted);flex:1} body.page-macro .froth-bar-wrap{width:70px;height:5px;background:color-mix(in srgb,var(--muted) 15%,transparent);border-radius:3px;overflow:hidden} body.page-macro .froth-bar{height:5px;border-radius:3px;background:var(--warn)} body.page-macro .froth-val{font-size:11px;font-weight:700;min-width:26px;text-align:right;font-variant-numeric:tabular-nums} body.page-macro .froth-split{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px} body.page-macro .froth-split-item{text-align:center;padding:8px;background:rgba(224,160,48,.06);border:1px solid rgba(224,160,48,.17);border-radius:7px} body.page-macro .froth-split-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:3px} body.page-macro .froth-split-val{font-size:18px;font-weight:900;color:var(--ink-warn, var(--warn));font-variant-numeric:tabular-nums} @media(max-width:700px){body.page-macro .scare-row{grid-template-columns:1fr 1fr 40px 52px}} @media(max-width:560px){body.page-macro .dd-ladder{grid-template-columns:1fr 1fr}.body.page-macro .sentiment-grid{grid-template-columns:1fr}} @media(max-width:480px){body.page-macro .sentiment-grid{grid-template-columns:1fr}} /* ── POLICY TRAY v3 grid ── */ body.page-macro .mx2-policy-glance{display:flex;align-items:center;gap:8px;flex-wrap:wrap} body.page-macro .mx2-policy-tray{display:flex;flex-direction:column;gap:12px;padding-top:18px} body.page-macro .policy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} body.page-macro .policy-col{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:15px 16px} body.page-macro .pc-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:10px} body.page-macro .pc-val{font-size:15px;font-weight:800;margin-bottom:10px} body.page-macro .pc-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);font-size:11px} body.page-macro .pc-row:last-of-type{border-bottom:none} body.page-macro .pc-key{color:var(--muted)} body.page-macro .pc-chip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px} body.page-macro .pc-warn{background:rgba(224,160,48,.13);color:var(--ink-warn, var(--warn));border:1px solid rgba(224,160,48,.22)} body.page-macro .pc-info{background:rgba(77,142,245,.11);color:var(--ink-info, var(--info));border:1px solid rgba(77,142,245,.2)} body.page-macro .pc-up{background:rgba(62,200,122,.11);color:var(--ink-up, var(--up));border:1px solid rgba(62,200,122,.2)} body.page-macro .pc-mt{background:rgba(122,132,148,.11);color:var(--muted);border:1px solid rgba(122,132,148,.18)} body.page-macro .pc-note{font-size:10px;color:var(--muted);margin-top:8px;line-height:1.5} body.page-macro .lever-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:10px} body.page-macro .lever-bar-lbl{color:var(--muted);flex:1;min-width:80px} body.page-macro .lever-bar-track{flex:2;height:4px;background:color-mix(in srgb,var(--muted) 15%,transparent);border-radius:2px;overflow:hidden} body.page-macro .lever-bar-fill{height:4px;border-radius:2px} body.page-macro .lever-bar-val{min-width:26px;text-align:right;font-weight:700;font-size:10px;font-variant-numeric:tabular-nums} body.page-macro .regime-path-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} body.page-macro .regime-path-eyebrow{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px} /* isle sub-head for tape heading */ body.page-macro .isle-sub-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:10px;margin-top:16px} @media(max-width:700px){body.page-macro .policy-grid{grid-template-columns:1fr}} @media(max-width:900px){body.page-macro .policy-grid{grid-template-columns:1fr 1fr}} /* ── AI BRIEF TRAY (Stage B) ── */ body.page-macro .mx2-aibrief-glance{font-size:12px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.page-macro .mx2-aibrief-tray{padding-top:18px;display:flex;flex-direction:column;gap:10px} /* ── NEWS TRAY (Stage B) ── */ body.page-macro .mx2-news-glance{font-size:12px;color:var(--muted)} body.page-macro .mx2-news-tray{padding-top:18px} /* ── DEEP CONTEXT ROW (Stage B) ── */ body.page-macro .mx2-deep-row{display:flex;align-items:center;gap:0;justify-content:space-between;width:100%;flex-wrap:wrap} body.page-macro .mx2-deep-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1} body.page-macro .mx2-deep-chip{ display:inline-flex;align-items:center;gap:7px; padding:7px 14px;border-radius:999px; background:var(--panel2);border:1px solid var(--line); font-size:12px;font-weight:600;color:var(--text); text-decoration:none;transition:border-color .14s,background .14s; } body.page-macro .mx2-deep-chip:hover{border-color:var(--info);background:color-mix(in srgb,var(--info) 6%,var(--panel2));text-decoration:none} body.page-macro .mx2-deep-chip-ic{font-size:14px} body.page-macro .mx2-deep-health{font-size:11px;color:var(--muted);padding:10px 0 0;border-top:1px solid var(--line);margin-top:12px;width:100%} @media(max-width:680px){body.page-macro .mx2-deep-chips{gap:6px}} @media(max-width:390px){body.page-macro .mx2-mkt-tile{width:100%;min-width:unset;flex:1 1 100%}} @media(max-width:390px){body.page-macro .mx2-topbar-brand{display:none}} /* Fix 12: v2 idiom for transplanted section headers inside trays */ body.page-macro .sx-tray #release-radar h2,body.page-macro .sx-tray details.jarg>summary{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 8px} /* ── STAGE-2 TRAY CSS — RISK / POLICY / AIBRIEF / NEWS / DEEP ── */ /* isle-head badge */ body.page-macro .isle-head-badge{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:.7;white-space:nowrap} /* AI BRIEF — accent card */ body.page-macro .isle-aibrief-card{display:block;text-decoration:none;font-size:13px;line-height:1.75;color:var(--muted);background:color-mix(in srgb,var(--isle-brief,var(--up)) 6%,var(--panel2));border:1.5px solid color-mix(in srgb,var(--isle-brief,var(--up)) 22%,transparent);border-radius:13px;padding:20px 24px;transition:border-color .18s,box-shadow .18s} body.page-macro .isle-aibrief-card:hover{border-color:color-mix(in srgb,var(--isle-brief,var(--up)) 45%,transparent);box-shadow:0 4px 20px color-mix(in srgb,var(--isle-brief,var(--up)) 10%,transparent)} body.page-macro .isle-aibrief-hdr{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--isle-brief,var(--up)) 15%,var(--line))} body.page-macro .isle-aibrief-icon{width:34px;height:34px;border-radius:9px;background:color-mix(in srgb,var(--isle-brief,var(--up)) 15%,var(--panel2));color:var(--isle-brief,var(--up));font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0} /* VIS-02 fix: allow badge to wrap — remove max-width and white-space:nowrap */ body.page-macro .isle-aibrief-badge{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--isle-brief,var(--up));opacity:.75;text-align:right;line-height:1.4;white-space:normal;max-width:none;min-width:0;} body.page-macro .isle-aibrief-body{font-size:13px;color:var(--text);line-height:1.75;margin-bottom:16px} body.page-macro .isle-aibrief-footer{display:flex;justify-content:space-between;align-items:center;gap:8px} body.page-macro .isle-aibrief-chips{display:flex;flex-wrap:wrap;gap:6px} body.page-macro .isle-aibrief-link{font-size:12px;font-weight:700;color:var(--isle-brief,var(--up));white-space:nowrap;margin-left:auto} /* DEEP — linkout chips */ body.page-macro .isle-linkouts{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px} body.page-macro .isle-lout{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 14px;text-decoration:none;color:var(--text);font-size:13px;font-weight:600;transition:border-color .15s,transform .15s,box-shadow .15s} body.page-macro .isle-lout:hover{border-color:var(--link);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.14)} body.page-macro .isle-lout-icon{font-size:14px;opacity:.85} body.page-macro .isle-deep-health{font-size:11px;color:var(--muted);padding:10px 0 0;border-top:1px solid var(--line);margin-top:12px} /* Light-mode Stage-2 overrides */ [data-theme="light"] body.page-macro .isle-aibrief-card{background:color-mix(in srgb,var(--isle-brief,var(--up)) 5%,#fff);border-color:color-mix(in srgb,var(--isle-brief,var(--up)) 25%,transparent)} [data-theme="light"] body.page-macro .isle-lout{background:#fff;border-color:var(--line)} [data-theme="light"] body.page-macro .isle-lout:hover{border-color:var(--link);box-shadow:0 2px 8px rgba(0,0,0,.08)} /* Mobile Stage-2 */ @media(max-width:680px){body.page-macro .isle-linkouts{gap:6px}body.page-macro .isle-lout{padding:8px 11px;font-size:12px}} @media(max-width:480px){body.page-macro .isle-aibrief-hdr{flex-wrap:wrap}body.page-macro .isle-aibrief-badge{max-width:100%;margin-left:0}} /* VIS-06: light-theme — darken small-text green/amber to ≥4.5:1 on near-white bg. The global --up (rgb 31,154,85) = 3.19:1 on #f7f8fa; --warn = 3.19:1. These local overrides apply ONLY to small (<14px) stat/change text in the macro section. */ /* Evidence tone classes (inline colors removed so these can theme — VIS-06) */ body.page-macro .evs-good{color:var(--ink-up, var(--up))} body.page-macro .evs-bad{color:var(--ink-down, var(--down))} body.page-macro .evs-flat{color:var(--ink-warn, var(--warn))} [data-theme="light"] body.page-macro .evs-good{color:#157a42} [data-theme="light"] body.page-macro .evs-flat{color:#7a4500} [data-theme="light"] body.page-macro .mx2-mkt-chg.up, [data-theme="light"] body.page-macro .sxg-mkt-chg.up{color:#157a42} [data-theme="light"] body.page-macro .mx2-mkt-chg.up{color:#157a42} [data-theme="light"] body.page-macro .idx-stat.ok{color:#157a42} [data-theme="light"] body.page-macro .idx-card-chg.up{color:#157a42} [data-theme="light"] body.page-macro .idx-stat.wn{color:#7a4500} /* 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-macro .mx2-score-block .v-score ) { text-shadow:none; }