/* ═══════════════════════════════════════════════════════════════════════════ BASE. House tokens come from theme.css; .soft-contrast is applied to by theme.js for every visitor and re-tunes --bg/--panel/--panel2/--text/--line — inherited automatically, NEVER re-declared here. No prefers-color-scheme rule: the house has zero, and theme comes from the no-flash boot script above. body top padding = the nav-gap law (scripts/check_nav_gap.py, #3324). ═══════════════════════════════════════════════════════════════════════════ */ *{box-sizing:border-box} body{background:var(--bg);color:var(--text);font-family:var(--font-ui); font-size:13.5px;line-height:1.5;margin:0;padding:18px 0 0;-webkit-font-smoothing:antialiased} /* TYPE ROLE LAW — machine-recorded facts are monospaced, human interpretation is not. Never put Hanzi inside .mono (CJK falls back to a mismatched face). The --font-mono token already leads with ui-monospace: never hand-roll an "SF Mono"-first stack, which renders SERIF in Chrome (#3371). */ .oew .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em} /* ═══════════════════════════════════════════════════════════════════════════ WORKSPACE TOKENS — the Options workspace identity. --oew-accent SLATE-INDIGO. STRUCTURE ONLY: close line, active tab, focus rings, pip fills. NEVER encodes data, never encodes direction. Non-directional on purpose — it must be unmistakable for --up or --down in BOTH languages (zh flips those two), and distinct from every sibling desk (gex=coral, flow=teal, market_structure=violet). --oew-stamp BRASS. THE RECORD INK. Exactly three uses: the session date stamp, as-of / vintage micro-labels, and the coverage label on the close line. Darker and browner than --warn so a vintage mark can never be misread as an amber warning. ═══════════════════════════════════════════════════════════════════════════ */ .oew{ --oew-accent:#8e97c8; --oew-stamp:#b49256; --hair: color-mix(in srgb, var(--line) 72%, transparent); --tile: color-mix(in srgb, var(--panel2) 86%, var(--panel)); --ink-2: color-mix(in srgb, var(--text) 66%, transparent); --ink-3: var(--muted); /* stance ramp — ONE hue, intensity = urgency. Direction-STABLE and deliberately NOT zh-flipped, exactly like the --pv-* prophet verbs. A stance is an urgency scale, never a direction, so it never borrows --up/--down. --warn is allowed for "protect" because house law already treats --warn as health/danger, not price direction, and leaves it un-flipped in zh. */ --oew-st-act: var(--oew-accent); --oew-st-ready: var(--oew-accent); --oew-st-watch: var(--ink-2); --oew-st-protect:var(--warn); --oew-st-aside: var(--muted); --oew-st-ignore: var(--muted); --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:44px; --r-pill:999px; --r-ctl:8px; --r-panel:14px; --r-shell:14px; } html[data-theme="light"] .oew{ --oew-accent:#4c55a8; --oew-stamp:#8a6a2e; --hair: color-mix(in srgb, var(--line) 92%, transparent); --ink-2: color-mix(in srgb, var(--text) 72%, transparent); } .oew-eyebrow{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)} html[data-lang="zh"] .oew-eyebrow{letter-spacing:.02em;text-transform:none} .oew-wrap{max-width:1240px;margin:0 auto;padding:0 var(--s5) var(--s8)} @media (max-width:560px){.oew-wrap{padding:0 var(--s3) var(--s7)}} /* ═══════════════════════════════════════════════════════════════════════════ THE PERSISTENT CHROME (identity · stamp · posture console · close line · tabs). This is the product: all four modes inherit it unchanged. That inheritance is the entire argument for a workspace rather than four pages. ═══════════════════════════════════════════════════════════════════════════ */ .oew-chrome{padding:var(--s6) 0 0} .oew-idrow{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)} .oew-title{margin:0;font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.15} .oew-title .sub{display:block;font-size:11.5px;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:3px} .oew-receipt{display:grid;grid-template-columns:minmax(196px,232px) 1fr;gap:var(--s5);align-items:stretch} @media (max-width:900px){.oew-receipt{grid-template-columns:1fr;gap:var(--s4)}} /* ── THE SESSION STAMP — brass, monospaced, reads as a settlement record ── */ .oew-stampblock{border:1px solid var(--hair);border-radius:var(--r-panel);background:var(--tile); padding:var(--s4) var(--s4) var(--s3);position:relative;overflow:hidden} .oew-stampblock::before{content:'';position:absolute;inset:0 auto 0 0;width:2px;background:var(--oew-stamp);opacity:.8} .oew-stamp-k{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--oew-stamp);margin-bottom:5px} html[data-lang="zh"] .oew-stamp-k{letter-spacing:.03em;text-transform:none} .oew-stamp-date{font-size:27px;font-weight:700;line-height:1;color:var(--text)} .oew-stamp-closed{font-size:11px;color:var(--muted);margin-top:6px} .oew-stamp-rows{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--hair);display:grid;gap:4px} .oew-stamp-row{display:flex;gap:var(--s2);font-size:11px;align-items:baseline} .oew-stamp-row .k{color:var(--muted)} .oew-stamp-row .v{margin-left:auto;color:var(--ink-2);font-weight:600} .oew-stamp-row .v.brass{color:var(--oew-stamp)} .oew-source-receipt{margin-top:7px;border-top:1px solid var(--hair);padding-top:6px} .oew-source-receipt summary{cursor:pointer;color:var(--muted);font-size:10px;letter-spacing:.04em} .oew-source-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:4px;font-size:10px;color:var(--muted)} .oew-source-row .stale{color:var(--orange);font-weight:650}.oew-source-row .current{color:var(--up)} /* ── THE POSTURE CONSOLE — four co-displayed readings, NEVER fused ───────── Four equal cells, hairline-divided, no arithmetic between them. The refusal to fuse is made legible by the layout, then stated in words below. */ .oew-console{border:1px solid var(--hair);border-radius:var(--r-panel);background:var(--panel);display:flex;flex-direction:column} .oew-console-grid{display:grid;grid-template-columns:repeat(4,1fr);flex:1} @media (max-width:760px){.oew-console-grid{grid-template-columns:repeat(2,1fr)}} .oew-read{padding:var(--s4);border-left:1px solid var(--hair);display:flex;flex-direction:column;gap:6px;justify-content:center} .oew-read:first-child{border-left:none} @media (max-width:760px){ .oew-read:nth-child(odd){border-left:none} .oew-read:nth-child(n+3){border-top:1px solid var(--hair)} } .oew-read-k{display:flex;align-items:center;gap:5px} .oew-read-v{font-size:15px;font-weight:650;line-height:1.2;color:var(--text)} .oew-read-n{font-size:10.5px;color:var(--muted)} .oew-vetted{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%; background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ink-ok, var(--ok));font-size:8.5px;font-weight:900;cursor:help;flex:none} /* ── THE PIP STRIP — the atomic fill-track. The DENOMINATOR must be as visible as the reading: an unfilled pip is a filled tile, not an empty outline. */ .oew-pips{display:inline-flex;gap:3px;align-items:center;cursor:help;margin-top:2px} .oew-pip{width:17px;height:6px;border-radius:2px;background:color-mix(in srgb,var(--text) 13%,transparent);border:none} .oew-pip.on{background:var(--oew-accent)} .oew-pip.nul{background:transparent;border:1px dotted var(--hair);opacity:.6} .oew-pips.sm .oew-pip{width:9px;height:5px} .oew-nofuse{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4);font-size:12.5px;color:var(--ink-2)} .oew-aib>.oew-nofuse{margin:0;padding:10px var(--s4);border-bottom:1px solid var(--hair);background:var(--tile)} /* ── STANCE CHIP — the most important words on the page ─────────────────── */ .oew-stance{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:11.5px;font-weight:700; letter-spacing:.01em;white-space:nowrap;padding:4px 11px;border-radius:var(--r-pill);border:1px solid} .oew-stance::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor} .st-act{color:#fff;background:var(--oew-st-act);border-color:var(--oew-st-act)} .st-ready{color:var(--oew-st-ready);border-color:color-mix(in srgb,var(--oew-st-ready) 55%,var(--hair)); background:color-mix(in srgb,var(--oew-st-ready) 13%,var(--tile))} .st-watch{color:var(--oew-st-watch);border-color:var(--hair);background:var(--tile)} .st-protect{color:var(--oew-st-protect);border-color:color-mix(in srgb,var(--oew-st-protect) 45%,var(--hair)); background:color-mix(in srgb,var(--oew-st-protect) 10%,var(--tile))} .st-aside{color:var(--oew-st-aside);border-color:var(--hair);background:transparent;opacity:.85} .st-ignore{color:var(--oew-st-ignore);border:1px solid transparent;background:transparent;opacity:.7} /* Data-outage chip — NOT a doctrine stance. Same geometry as .oew-stance so the lede row does not jump; info tint, never the aside posture colour. */ .oew-aib-lede-chip{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:11.5px;font-weight:700; letter-spacing:.01em;white-space:nowrap;padding:4px 11px;border-radius:var(--r-pill); border:1px solid var(--hair);color:var(--ink-info, var(--info));background:var(--tile)} /* ═══════════════════════════════════════════════════════════════════════════ ★ THE SIGNATURE — THE CLOSE LINE ★ A full-width rule marking the boundary between "what settled" (above) and "what you do about it" (below). ITS FILLED PORTION IS THE COVERAGE NUMBER — the page's most structural element carries its most important honesty fact. When coverage is complete the signature is nearly silent; when data degrades the hatched remainder grows and the page visibly changes. An instrument, not an ornament — which is why it gets no floor, no minimum and no rounding. ═══════════════════════════════════════════════════════════════════════════ */ .oew-closeline{position:relative;height:3px;margin-top:var(--s7);border-radius:3px; background:repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 6px)} .oew-closeline::before{content:'';position:absolute;inset:0;border-radius:3px; background:color-mix(in srgb,var(--line) 55%,transparent)} .oew-closeline::after{content:'';position:absolute;left:0;top:0;height:3px;width:var(--oew-cov,100%); background:var(--oew-accent);border-radius:3px; box-shadow:0 0 14px -2px color-mix(in srgb,var(--oew-accent) 70%,transparent)} .oew-cov-tick{position:absolute;top:-5px;left:var(--oew-cov,100%);width:2px;height:13px;background:var(--oew-stamp);border-radius:1px} .oew-cov-label{position:absolute;top:-21px;left:var(--oew-cov,100%);transform:translateX(-100%); font-size:10px;font-weight:600;color:var(--oew-stamp);white-space:nowrap;padding-right:7px;letter-spacing:.03em} @media (max-width:560px){.oew-cov-label{font-size:9px}} /* ── MODE TABS — sit directly under the close line; the active tab caps it ── */ .oew-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:var(--s6)} .oew-tabs::-webkit-scrollbar{display:none} .oew-tab{appearance:none;background:none;border:none;border-top:2px solid transparent;margin-top:-2px; padding:11px var(--s4) 10px;font:inherit;font-size:13px;font-weight:650;color:var(--muted);cursor:pointer; white-space:nowrap;flex:none;display:inline-flex;align-items:baseline;gap:6px} .oew-tab:hover{color:var(--text)} .oew-tab:focus-visible{outline:2px solid var(--oew-accent);outline-offset:-3px;border-radius:2px} .oew-tab .cnt{font-size:10.5px;font-weight:600;color:var(--muted);opacity:.8} .oew-tab[aria-selected="true"]{color:var(--text);border-top-color:var(--oew-accent)} .oew-tab[aria-selected="true"] .cnt{color:var(--oew-accent);opacity:1} /* ═══ PANEL SHELL — shared by every panel in every mode ═══ */ .oew-panel{border:1px solid var(--hair);border-radius:var(--r-panel);background:var(--panel); box-shadow:var(--card-shadow);margin-bottom:var(--s4);overflow:hidden} .oew-phead{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) var(--s4);border-bottom:1px solid var(--hair)} .oew-ph-title{font-size:14px;font-weight:700;margin:0;letter-spacing:-.01em} .oew-ph-sub{font-size:11.5px;color:var(--muted)} /* Wraps because the Scanner header packs a segmented control AND the CSV button in here: at 375px that pair measured 319px inside a 317px header content box, overhanging the padding. Most .oew-ph-right instances hold a single ? chip, so the wrap only engages where the content genuinely does not fit. */ .oew-ph-right{margin-left:auto;display:flex;align-items:center;gap:var(--s2); flex-wrap:wrap;justify-content:flex-end;min-width:0} .oew-pbody{padding:var(--s4)} .oew-pfoot{padding:10px var(--s4);border-top:1px solid var(--hair);background:var(--tile); font-size:11px;color:var(--muted);display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap} .oew-asof{margin-left:auto;font-size:10px;color:var(--oew-stamp);opacity:.9;letter-spacing:.02em} /* the ? help affordance — the Tier-2 home for mechanics (LENS popover) */ .oew-help{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%; border:1px solid var(--hair);color:var(--muted);font-size:9.5px;font-weight:800;cursor:help;flex:none;background:var(--tile)} .oew-help:hover,.oew-help:focus-visible{color:var(--text);border-color:var(--oew-accent);outline:none} .oew [data-tip-en]{cursor:help} /* ═══ MODE SURFACES ═══ */ .oew-mode{display:none} .oew-mode.active{display:block;animation:oewIn .18s ease-out} @keyframes oewIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}} .oew-skel{padding:var(--s7) var(--s4)} .oew-skel-bar{height:11px;border-radius:3px;background:var(--tile);border:1px solid var(--hair);margin-bottom:10px} .oew-skel-note{font-size:11.5px;color:var(--muted);margin-top:var(--s4)} .oew-banner{display:flex;gap:var(--s3);align-items:flex-start;padding:11px var(--s4);border-radius:var(--r-ctl); margin-bottom:var(--s4);font-size:12.5px;border:1px solid color-mix(in srgb,var(--warn) 35%,var(--hair)); background:color-mix(in srgb,var(--warn) 8%,var(--tile));color:var(--ink-2)} .oew-banner .ico{color:var(--ink-warn, var(--warn));font-weight:900;flex:none} .oew-empty{font-size:12.5px;color:var(--ink-2);line-height:1.5} /* ── BRIEF: AD-1 · OPTIONS INTELLIGENCE BRIEF ───────────────────────────── contracts/options/OPTIONS_INTEL_BRIEF_V1.md. scripts/build_options_command.py is a PASS-THROUGH adapter (zero scoring here); state hues bind to the EXISTING --up/--down/--info/--warn ink tokens only — no new palette. */ .oew-aib-stamps{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center; padding:8px var(--s4);border-bottom:1px solid var(--hair);font-size:10.5px;color:var(--muted)} .oew-aib-pending{color:var(--oew-stamp)} .oew-aib-elig{margin-left:auto} .oew-aib-honesty{font-size:10px;color:var(--ink-2);font-weight:600;white-space:nowrap} .oew-aib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s3)} @media (max-width:700px){.oew-aib-grid{grid-template-columns:1fr}} .oew-aib-card{border:1px solid var(--hair);border-left:3px solid var(--hair);border-radius:var(--r-ctl); background:var(--tile);padding:var(--s3);display:flex;flex-direction:column;gap:7px;min-width:0} .oew-aib-card.is-up{border-left-color:var(--ink-up, var(--up))} .oew-aib-card.is-down{border-left-color:var(--ink-down, var(--down))} .oew-aib-card.is-vol{border-left-color:var(--ink-info, var(--info))} .oew-aib-card.is-risk{border-left-color:var(--ink-warn, var(--warn))} .oew-aib-top{display:flex;align-items:baseline;gap:7px} .oew-aib-rank{font-size:10px;color:var(--muted)} .oew-aib-sym{font-size:14px;font-weight:700} .oew-aib-state{margin-left:auto;font-size:11.5px;font-weight:650;text-align:right} .oew-aib-card.is-up .oew-aib-state{color:var(--ink-up, var(--up))} .oew-aib-card.is-down .oew-aib-state{color:var(--ink-down, var(--down))} .oew-aib-card.is-vol .oew-aib-state{color:var(--ink-info, var(--info))} .oew-aib-card.is-risk .oew-aib-state{color:var(--ink-warn, var(--warn))} .oew-aib-legs{display:flex;align-items:center;gap:8px;font-size:11px;cursor:help;flex-wrap:wrap} .oew-aib-legs .leg{display:inline-flex;align-items:center;gap:3px;font-weight:700} .oew-aib-legs .leg.up{color:var(--ink-up, var(--up))} .oew-aib-legs .leg.down{color:var(--ink-down, var(--down))} .oew-aib-legs .leg.flat{color:var(--muted)} .oew-aib-legverdict{margin-left:auto;font-size:10px;color:var(--ink-2)} .oew-aib-meter{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--ink-2)} .oew-aib-meter .lbl{color:var(--muted)} .oew-aib-band{margin-left:auto;font-size:10px;font-weight:700} .oew-aib-band.band-tentative{color:var(--muted)} .oew-aib-band.band-moderate{color:var(--ink-2)} .oew-aib-band.band-firm{color:var(--text)} .oew-aib-why{font-size:12px;color:var(--ink-2);line-height:1.4;margin:0} .oew-aib-facts{display:flex;gap:var(--s3);flex-wrap:wrap;font-size:10.5px;color:var(--muted)} .oew-aib-chips{display:flex;gap:6px;flex-wrap:wrap} .oew-aib-prophet,.oew-aib-crowd{font-size:10px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill); border:1px solid var(--hair);background:var(--panel);color:var(--ink-2);cursor:help} .oew-aib-crowd{border-color:color-mix(in srgb,var(--warn) 45%,var(--hair));color:var(--ink-warn, var(--warn))} .oew-aib-detail{border-top:1px solid var(--hair);margin-top:2px;padding-top:6px} .oew-aib-detail summary{font-size:10.5px;color:var(--ink-2);cursor:pointer;font-weight:600} .oew-aib-detail summary:focus-visible{outline:2px solid var(--oew-accent);outline-offset:2px} .oew-aib-detailbody{margin-top:6px;display:flex;flex-direction:column;gap:7px} .oew-aib-dline{display:flex;flex-direction:column;gap:2px;font-size:11px} .oew-aib-dline .k{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em} .oew-aib-dline .v{color:var(--ink-2);line-height:1.4} .oew-aib-empty,.oew-aib-degraded{font-size:12.5px;color:var(--ink-2);line-height:1.5} .oew-aib-empty-lead{margin:0 0 4px} .oew-aib-empty-sub{margin:0;color:var(--muted);font-size:11px} .oew-aib-more{margin-left:auto;font-size:10.5px;color:var(--muted)} /* ── A-F03-W2-2 · BRIEF glance-tier lede ────────────────────────────────── Dark (default, this page's bare selectors) = raised instrument slab — luminance depth via an inner top highlight, no shadow. Light (html[data-theme="light"], the page's own light-mode mechanism — see html[data-theme="light"] .oew above) = white material on the cool canvas — the highlight is deleted (a white-on-white bevel is a smudge) and a hairline + one shallow shadow carry the depth instead. Same structure, same semantics (lede -> evidence -> detail, stance vocabulary, EN/ZH parity); only the material differs. Packet A-F03-W2-2 §6. */ .oew-aib-lede{padding:var(--s3) var(--s4);border-bottom:1px solid var(--hair); background:var(--tile);border-left:3px solid var(--hair); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent)} .oew-aib-lede.is-current{border-left-color:var(--oew-accent)} .oew-aib-lede.is-lagging{border-left-color:var(--ink-info, var(--info))} .oew-aib-lede.is-stale, .oew-aib-lede.is-unknown{border-left-color:var(--ink-warn, var(--warn))} .oew-aib-lede-head{margin:0 0 6px;font-size:15.5px;line-height:1.35;font-weight:680; letter-spacing:-.005em;color:var(--text)} .oew-aib-lede-stance{margin:0 0 7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .oew-aib-lede-todo{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)} .oew-aib-lede-said{font-size:12.5px;line-height:1.45;color:var(--ink-2)} .oew-aib-fresh{margin:0;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap; font-size:11px;color:var(--muted)} .oew-aib-fresh-age{padding:2px 8px;border-radius:var(--r-pill); background:var(--tile);border:1px solid var(--hair);font-weight:600} .oew-aib-fresh-age.lvl-stale, .oew-aib-fresh-age.lvl-unknown{color:var(--ink-warn, var(--warn)); background:color-mix(in srgb,var(--warn) 12%,var(--tile));border-color:transparent} .oew-aib-degraded-lead{margin:0 0 4px;font-weight:620;color:var(--text)} .oew-aib-degraded-why{margin:0 0 8px;font-size:12px;color:var(--ink-2);line-height:1.5} .oew-aib-degraded-rcp{font-size:11.5px} .oew-aib-degraded-rcp>summary{cursor:pointer;color:var(--muted)} /* LIGHT — white material: delete the inner highlight, add a hairline (top + right; bottom + left are already set above) and one shallow shadow — the page's OWN shallow-shadow token (--card-shadow, already themed light/dark at :theme.css), reused here rather than a new literal so this stays within existing token discipline. The stale/unknown chip re-weights its fill down (12% -> 8%) and gains a defined border, which the dark tile-fill version does not need. */ html[data-theme="light"] .oew-aib-lede{box-shadow:var(--card-shadow); border-top:1px solid var(--hair);border-right:1px solid var(--hair)} html[data-theme="light"] .oew-aib-lede.is-current{border-left-color:var(--oew-accent)} html[data-theme="light"] .oew-aib-lede.is-lagging{border-left-color:var(--ink-info, var(--info))} html[data-theme="light"] .oew-aib-lede.is-stale, html[data-theme="light"] .oew-aib-lede.is-unknown{border-left-color:var(--ink-warn, var(--warn))} html[data-theme="light"] .oew-aib-lede-chip{background:transparent;border-color:var(--hair)} html[data-theme="light"] .oew-aib-fresh-age{background:transparent} html[data-theme="light"] .oew-aib-fresh-age.lvl-stale, html[data-theme="light"] .oew-aib-fresh-age.lvl-unknown{ background:color-mix(in srgb,var(--warn) 8%,transparent); border-color:color-mix(in srgb,var(--warn) 35%,var(--hair))} @media (max-width:520px){ .oew-aib-lede{padding:var(--s3)} .oew-aib-lede-head{font-size:14.5px} .oew-aib-lede-stance{align-items:flex-start} .oew-aib-fresh{gap:6px 10px} } /* ── AD-1 B5 band 2 · directional watch: a CONTINUATION of the ranked grid, so it reuses .oew-tkchip verbatim (incl. its data-goto jump) and adds only the machine-supplied rank + direction word. The keyline, not a box, is what says "same list, below the cut". */ .oew-aib-watch{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap; margin-top:var(--s3);padding-left:var(--s3);border-left:2px solid var(--hair)} .oew-aib-wlbl{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);flex:none;cursor:help} .oew-aib-wchip{display:inline-flex;align-items:baseline;gap:5px} .oew-aib-wchip .rk{font-size:9.5px;font-weight:600;color:var(--muted)} .oew-aib-wchip .dir{font-size:10.5px;font-weight:700} .oew-aib-wchip.is-up .dir{color:var(--ink-up, var(--up))} .oew-aib-wchip.is-down .dir{color:var(--ink-down, var(--down))} .oew-aib-wnull{font-size:11.5px;color:var(--ink-2);margin-top:var(--s3)} /* ── AD-1 B5 band 3 · evidence rail. Two lanes, .oew-rg surface reused; the 860px breakpoint is the page's existing .oew-rail value, not a new one. */ .oew-aib-rail{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s4)} @media (max-width:860px){.oew-aib-rail{grid-template-columns:1fr}} .oew-aib-rgbody{display:flex;flex-direction:column;gap:7px} .oew-aib-rghead{display:flex;align-items:baseline;gap:6px;margin-bottom:7px} .oew-aib-rrow{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:11.5px;min-width:0} .oew-aib-rsym{font-family:var(--font-mono);font-size:11.5px;font-weight:700;flex:none} .oew-aib-rline{color:var(--ink-2);min-width:0;overflow-wrap:anywhere;line-height:1.4} .oew-aib-rmeta{margin-left:auto;flex:none;font-family:var(--font-mono);font-size:10px;color:var(--muted)} .oew-aib-rref{font-size:9.5px;color:var(--muted);flex:none} .oew-aib-rempty{font-size:11.5px;color:var(--muted);line-height:1.45} .oew-aib-rmore{font-size:10px;color:var(--muted)} /* ── AD-1 B5 band 4 · the control line. Deliberately NOT a card, NOT a chip and NOT clickable — it must never read as a seventh opportunity. */ .oew-aib-control{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap; margin-top:var(--s4);padding-top:10px;border-top:1px solid var(--hair); font-size:11.5px;color:var(--muted);line-height:1.45} .oew-aib-ctlk{flex:none;font-size:9.5px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-2);cursor:help} .oew-aib-ctlsym{flex:none;font-family:var(--font-mono);font-weight:700;color:var(--ink-2)} /* ── AD-1 B5 Prophet separation: AD evidence chips sit left, the external echo sits far right with a dashed edge. Dashed = "context, not our evidence" with no new token and no extra word. (Amends .oew-aib-prophet above.) */ .oew-aib-chips .oew-aib-prophet{margin-left:auto;border-style:dashed} /* ── BRIEF: what-changed chips ── */ .oew-chips{display:flex;gap:var(--s2);flex-wrap:wrap} .oew-chg{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px; border-radius:var(--r-pill);border:1px solid var(--hair);background:var(--tile);color:var(--ink-2)} .oew-chg .ar{font-size:10px;font-weight:900} .oew-chg .ar.u{color:var(--ink-up, var(--up))}.oew-chg .ar.d{color:var(--ink-down, var(--down))}.oew-chg .ar.f{color:var(--muted)} /* ── BRIEF: index close row ── */ .oew-idx{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)} @media (max-width:1000px){.oew-idx{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.oew-idx{grid-template-columns:1fr}} .oew-ic{border:1px solid var(--hair);border-radius:var(--r-ctl);background:var(--tile);padding:var(--s3)} .oew-ic-top{display:flex;align-items:baseline;gap:var(--s2)} .oew-ic-sym{font-size:15px;font-weight:700} .oew-ic-px{margin-left:auto;font-size:14px;font-weight:650} .oew-ic-regime{font-size:13px;font-weight:650;margin-top:7px} .oew-ic-line{font-size:11.5px;color:var(--ink-2);margin-top:3px;line-height:1.4} .oew-ic-levels{display:flex;gap:var(--s3);margin-top:9px;padding-top:9px;border-top:1px solid var(--hair)} .oew-ic-lv{flex:1;min-width:0} .oew-ic-lv .k{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;display:block} html[data-lang="zh"] .oew-ic-lv .k{letter-spacing:.02em;text-transform:none} .oew-ic-lv .v{font-size:12.5px;font-weight:650;display:block;margin-top:1px} .oew-ic-foot{margin-top:10px;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap} .oew-ic-em{font-size:11px;color:var(--muted)} /* ── BRIEF: sector bars. The bar is a PURE length encoding; the value lives in its own right-aligned mono column (a value inside the fill overflows on short bars and fights the fill for contrast). ── */ .oew-sect{display:grid;gap:5px} .oew-sr{display:grid;grid-template-columns:118px 1fr 58px auto;gap:var(--s3);align-items:center;font-size:12px} @media (max-width:560px){ .oew-sr{grid-template-columns:92px 1fr 52px} .oew-sr .tone{grid-column:2/4;justify-self:start} } .oew-sr-name{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .oew-sr-track{position:relative;height:16px;background:color-mix(in srgb,var(--text) 7%,transparent);border-radius:3px;overflow:hidden} .oew-sr-fill{position:absolute;inset:0 auto 0 0;border-radius:3px;min-width:2px} .oew-sr-fill.buy{background:color-mix(in srgb,var(--up) 62%,transparent)} .oew-sr-fill.sell{background:color-mix(in srgb,var(--down) 62%,transparent)} .oew-sr-fill.mix{background:color-mix(in srgb,var(--muted) 42%,transparent)} .oew-sr-val{font-size:11.5px;font-weight:650;text-align:right;color:var(--text)} .oew .tone{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:5px;border:1px solid var(--hair); background:var(--tile);color:var(--muted);white-space:nowrap} .oew .tone.buy{color:var(--ink-up, var(--up));border-color:color-mix(in srgb,var(--up) 38%,var(--hair))} .oew .tone.sell{color:var(--ink-down, var(--down));border-color:color-mix(in srgb,var(--down) 38%,var(--hair))} /* ── BRIEF: biggest bets. The `overflow:hidden` below is CORNER-ROUNDING duty — it clips the square corners of the child rows against the 1px-gap hairline grid. It is NOT an overflow remedy, so the row must be made to FIT rather than be sliced: with a nowrap row, `.oew-bet-r`'s nowrap chips set a min-content floor that blew the auto grid track past the panel (measured 366.8px of track inside 349px of panel at 375px viewport — every chip lost its right edge, and the note was squeezed to one character per line). Both the row and the chip cluster wrap, and every child carries min-width:0, so the cluster REFLOWS onto a second line instead of being clipped. No breakpoint: chip count varies per row, so the wrap has to be content-driven, not width-driven. Desktop is untouched — nothing wraps until the content actually stops fitting. ── */ .oew-bets{display:grid;gap:1px;background:var(--hair);border-radius:var(--r-ctl);overflow:hidden;border:1px solid var(--hair)} .oew-bet{display:flex;align-items:center;gap:var(--s3);row-gap:7px;flex-wrap:wrap;min-width:0; padding:8px var(--s3);background:var(--panel);font-size:12.5px} .oew-bet:hover{background:var(--tile)} .oew-bet-sym{font-weight:700;width:56px;flex:none} .oew-bet-amt{font-weight:650;width:78px;flex:none} .oew-bet-amt.pos{color:var(--ink-up, var(--up))}.oew-bet-amt.neg{color:var(--ink-down, var(--down))} .oew-bet-note{color:var(--muted);font-size:11.5px;min-width:0;overflow-wrap:anywhere} .oew-bet-r{margin-left:auto;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap; justify-content:flex-end;min-width:0} /* ── BRIEF: names-for-tomorrow rail ── */ .oew-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)} @media (max-width:860px){.oew-rail{grid-template-columns:1fr}} .oew-rg{border:1px solid var(--hair);border-radius:var(--r-ctl);background:var(--tile);padding:var(--s3)} .oew-rg-h{font-size:12px;font-weight:700;margin-bottom:3px} .oew-rg-s{font-size:11px;color:var(--muted);margin-bottom:9px;line-height:1.4} .oew-tkchips{display:flex;gap:5px;flex-wrap:wrap} .oew-tkchip{font-family:var(--font-mono);font-size:11.5px;font-weight:650;letter-spacing:-.01em;padding:3px 9px; border-radius:5px;border:1px solid var(--hair);background:var(--panel);color:var(--text);cursor:pointer} .oew-tkchip:hover{border-color:var(--oew-accent);color:var(--oew-accent)} .oew-tkchip:focus-visible{outline:2px solid var(--oew-accent);outline-offset:1px} /* ── Terminal handoff ── */ .oew-handoff{border:1px solid var(--hair);border-radius:var(--r-panel); background:linear-gradient(100deg,color-mix(in srgb,var(--oew-accent) 11%,var(--panel)),var(--panel) 62%); padding:var(--s4);display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap} .oew-ho-t{font-size:14px;font-weight:700} .oew-ho-s{font-size:12px;color:var(--ink-2);margin-top:2px;max-width:56ch;line-height:1.45} .oew-ho-clock{font-size:11px;color:var(--oew-stamp);margin-top:6px} .oew-cta{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--oew-accent); color:#fff;border:none;border-radius:var(--r-ctl);padding:10px 17px;font:inherit;font-size:13px;font-weight:650; cursor:pointer;text-decoration:none} .oew-cta:hover{filter:brightness(1.08)} .oew-cta:focus-visible{outline:2px solid var(--oew-accent);outline-offset:2px} @media (max-width:640px){.oew-cta{margin-left:0;width:100%;justify-content:center}} /* ═══ SCANNER ═══ */ .oew-sc-bar{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin-bottom:var(--s3)} /* font:inherit FIRST — a