/* bfm-swiss.css — shared Swiss / International Typographic design system for BFM. * * Philosophy: strict grid, restrained palette, precise typography, generous * whitespace, ZERO decoration (no gradients, shadows, emoji). Maximize data-ink. * EVERY options/flow page follows the same anatomy: * 1) thin header rail → app · symbol · spot · freshness * 2) VERDICT hero → the directional call, large + unmistakable * 3) WHY → ranked evidence/drivers, each with a bias bar + note * 4) DETAIL → precise data table / chart * Token-based: flip the :root tokens for a LIGHT variant (one-line swap). * Use by adding class="sw" to and including this file. */ :root{ --sw-bg:#0a0c10; --sw-surface:#12151b; --sw-surface2:#171b22; --sw-ink:#eef1f5; --sw-dim:#79828f; --sw-faint:#414956; --sw-line:#212630; --sw-up:#22c55e; --sw-down:#ef4444; --sw-flat:#79828f; --sw-accent:#4c8bf5; --sw-pad:clamp(16px,3.2vw,44px); --sw-sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",system-ui,sans-serif; } .sw,.sw *{box-sizing:border-box} .sw{margin:0;background:var(--sw-bg);color:var(--sw-ink);font-family:var(--sw-sans); font-size:15px;line-height:1.5;letter-spacing:-.006em;-webkit-font-smoothing:antialiased} .sw .num{font-variant-numeric:tabular-nums} .sw .up{color:var(--sw-up)} .sw .down{color:var(--sw-down)} .sw .flat{color:var(--sw-flat)} /* micro label — the Swiss workhorse */ .sw-label{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--sw-dim);font-weight:600} /* header rail */ .sw-top{display:flex;align-items:baseline;gap:clamp(18px,3vw,40px);flex-wrap:wrap; padding:16px var(--sw-pad);border-bottom:1px solid var(--sw-line)} .sw-top h1{margin:0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700} .sw-top .stat{display:flex;flex-direction:column;gap:3px} .sw-top .stat b{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em} /* controls rail */ .sw-ctl{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px var(--sw-pad);border-bottom:1px solid var(--sw-line)} .sw input,.sw button,.sw select{font:inherit;background:transparent;color:var(--sw-ink); border:1px solid var(--sw-line);border-radius:0;padding:8px 12px;letter-spacing:.01em} .sw input[type=text]{width:96px;text-transform:uppercase} .sw button{cursor:pointer} .sw button:hover{border-color:var(--sw-dim)} .sw button.go{background:var(--sw-ink);color:var(--sw-bg);border-color:var(--sw-ink);font-weight:600} .sw .dim{color:var(--sw-dim)} .sw .mono{font-variant-numeric:tabular-nums} /* layout grid */ .sw-wrap{padding:clamp(24px,4vw,52px) var(--sw-pad);max-width:1120px;margin:0 auto; display:grid;gap:clamp(28px,4vw,52px)} /* VERDICT hero */ .sw-verdict{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,44px);align-items:center} @media(max-width:620px){.sw-verdict{grid-template-columns:1fr}} .sw-dir{font-size:clamp(46px,10vw,92px);font-weight:800;letter-spacing:-.035em;line-height:.86} .sw-verdict .meta{display:grid;gap:10px;align-content:center} .sw-verdict .prob{font-size:clamp(26px,4.5vw,40px);font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .sw-verdict .prob b{font-weight:600} .sw-verdict .summary{color:var(--sw-ink);font-size:clamp(15px,2vw,17px);max-width:56ch;line-height:1.45} .sw-verdict .sub{color:var(--sw-dim);font-size:13px} /* section */ .sw-section>.sw-label{display:block;padding-bottom:9px;margin-bottom:6px;border-bottom:1px solid var(--sw-line)} /* R-UI-12 — NEVER a second line directly under a header that already has an underline. When a chart sits right under the header, the header's own underline becomes the chart's top edge (drop the gap; the chart's top border is removed below) → exactly ONE line, never two stacked. */ .sw-section>.sw-label:has(+ .sw-chart), .sw-section>.sw-label:has(+ .sw-chart-wrap){margin-bottom:0} /* WHY / evidence rows */ .sw-ev{display:grid;grid-template-columns:minmax(120px,1.3fr) minmax(120px,2fr) minmax(96px,.8fr); gap:clamp(12px,2vw,28px);align-items:center;padding:14px 0;border-bottom:1px solid var(--sw-line)} @media(max-width:620px){.sw-ev{grid-template-columns:1fr auto;gap:6px 14px}.sw-ev .barcell{grid-column:1/-1}} .sw-ev .name{font-weight:600} .sw-ev .note{color:var(--sw-dim);font-size:13px;margin-top:2px} .sw-ev .val{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;font-size:16px} /* directional CONCLUSION chip — every data row resolves to one of these so the read is obvious at a glance. Arrows are functional (the direction), not decoration. */ .sw-call{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700; letter-spacing:.04em;padding:3px 10px;border:1px solid var(--sw-line);white-space:nowrap} .sw-call.up{color:var(--sw-up);border-color:rgba(34,197,94,.45)} .sw-call.down{color:var(--sw-down);border-color:rgba(239,68,68,.45)} .sw-call.flat{color:var(--sw-flat)} .sw-call b{font-weight:800} /* bias bar — centered 50%, fills left(down)/right(up) */ .sw-bias{position:relative;height:8px;background:var(--sw-surface2)} .sw-bias .mid{position:absolute;top:-3px;bottom:-3px;left:50%;width:1px;background:var(--sw-faint)} .sw-bias .f{position:absolute;top:0;bottom:0} .sw-bias .f.up{left:50%;background:var(--sw-up)} .sw-bias .f.down{right:50%;background:var(--sw-down)} /* LABELED scale bar (bfmBar) — every bar states what it measures: domain ends, a 0/neutral reference tick, the value+units, and direction words. No naked bars. */ .sw-scale{display:flex;flex-direction:column;gap:3px;min-width:128px} .sw-scale-track{position:relative;height:8px;background:var(--sw-surface2)} .sw-scale-track .z{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--sw-faint)} .sw-scale-track .f{position:absolute;top:0;bottom:0} .sw-scale-track .f.up{background:var(--sw-up)} .sw-scale-track .f.down{background:var(--sw-down)} .sw-scale-track .f.flat{background:var(--sw-faint)} .sw-scale-track .m{position:absolute;top:-2px;width:2px;height:12px;margin-left:-1px} .sw-scale-track .m.up{background:var(--sw-up)} .sw-scale-track .m.down{background:var(--sw-down)} .sw-scale-track .m.flat{background:var(--sw-dim)} .sw-scale-ax{display:flex;justify-content:space-between;gap:6px;font-size:9.5px;letter-spacing:.03em; color:var(--sw-faint);font-variant-numeric:tabular-nums} .sw-scale-ax .c{color:var(--sw-dim);font-weight:700} /* sparkline — a value vs its OWN recorded history (relative context). bfmSpark. */ .sw-spark{display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums} .sw-spark svg{display:block;background:var(--sw-surface2);border:1px solid var(--sw-line)} .sw-spark .pp{font-size:11px;font-weight:700;letter-spacing:.02em} .sw-spark.na{font-size:10.5px;color:var(--sw-faint);letter-spacing:.03em;font-variant-numeric:tabular-nums} /* horizons help block — explains what Bias/Lean/Conf measure + how (bfmHorizons) */ .sw-hz-help{font-size:12.5px;color:var(--sw-dim);line-height:1.55;margin-bottom:12px;padding:10px 13px;background:var(--sw-surface);border:1px solid var(--sw-line)} .sw-hz-help b{color:var(--sw-ink);font-weight:600} .sw-hz-help .hz-meas{margin-top:7px;padding-top:7px;border-top:1px solid var(--sw-line)} /* explanations live in tooltips (R-UI-11): compact caption + hoverable ⓘ */ .sw-hz-cap{font-size:13px;color:var(--sw-ink);margin-bottom:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .sw-tip-ic{cursor:help;color:#6ea8ff;border-bottom:1px dotted #6ea8ff;font-size:12px;white-space:nowrap} /* DETAIL table */ .sw-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .sw-table th{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--sw-dim); font-weight:600;text-align:right;padding:0 0 12px} .sw-table th:first-child,.sw-table td:first-child{text-align:left} .sw-table td{padding:13px 0;border-top:1px solid var(--sw-line);text-align:right;font-size:15px} .sw-table tr td:first-child{font-weight:700} .sw-tag{font-size:11px;font-weight:700;letter-spacing:.04em} .sw-foot{color:var(--sw-dim);font-size:12.5px;line-height:1.6} /* visible definitions block — every app states, on-screen, what each thing means */ .sw-defs{display:grid;gap:11px} .sw-defs>div{font-size:13.5px;line-height:1.5;color:var(--sw-dim)} .sw-defs b{color:var(--sw-ink);font-weight:600} .sw-defs a{color:#6ea8ff;text-decoration:none} .sw-defs a:hover{text-decoration:underline} .sw-sigmap>div{font-size:13.5px;line-height:1.7} /* a chart canvas inside a section */ .sw-chart{width:100%;display:block;background:#0b0e13;border:1px solid var(--sw-line);border-top:0} /* per-chart controls: Y-scale, fullscreen, save-png (added by bfm-chart.js) */ .sw-chart-wrap{position:relative} .sw-chart-ctrl{position:absolute;top:6px;right:6px;display:flex;gap:4px;z-index:6} .sw-chart-ctrl button{background:rgba(12,15,20,.82);border:1px solid var(--sw-line);color:var(--sw-dim); font:700 10px/1 var(--sw-sans);min-width:24px;height:22px;padding:0 6px;cursor:pointer;border-radius:0; display:inline-flex;align-items:center;justify-content:center} /* flex-centre the ⤢ / PNG glyphs */ .sw-chart-ctrl button:hover{color:var(--sw-ink);border-color:var(--sw-dim)} .sw-chart-wrap:fullscreen{background:var(--sw-bg);padding:18px;display:flex;flex-direction:column;justify-content:center} .sw-chart-wrap:fullscreen .sw-chart{height:90vh!important} /* timeframe bar (bfmPriceChart): candle granularity + window selectors. R-UI-7. */ .sw-tf{display:flex;flex-wrap:wrap;gap:7px 16px;align-items:center;margin:0 0 9px;font-size:11px;color:var(--sw-dim)} .sw-tf .grp{display:flex;gap:4px;align-items:center} .sw-tf .lab{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--sw-faint);font-weight:700;margin-right:2px} .sw-tf button{background:transparent;border:1px solid var(--sw-line);color:var(--sw-dim);font:600 11px/1 var(--sw-sans);padding:5px 9px;cursor:pointer;border-radius:0} .sw-tf button.on{border-color:var(--sw-accent);color:var(--sw-ink)} .sw-tf button:hover{border-color:var(--sw-dim)} /* chart legend — click a chip to HIDE/show that line */ .sw-legend{display:flex;flex-wrap:wrap;margin-top:10px} .sw-leg{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--sw-line); color:var(--sw-ink);font:600 11px/1 var(--sw-sans);letter-spacing:.02em;padding:5px 9px;margin:0 6px 6px 0;cursor:pointer} .sw-leg i{width:12px;height:3px;border-radius:2px;display:inline-block} .sw-leg:hover{border-color:var(--sw-dim)} .sw-leg.off{color:var(--sw-faint)} .sw-leg.off i{opacity:.25} /* ── Tooltips ────────────────────────────────────────────────────────────── Runtime in bfm-ui.js: hover (desktop) / tap (mobile) any [data-tip]. RULE: EVERY datapoint carries a plain-language data-tip (layman, no jargon). */ .sw [data-tip]{cursor:help} .sw .sw-label[data-tip],.sw th[data-tip],.sw .sw-ev .name[data-tip]{ text-decoration:underline dotted var(--sw-faint);text-underline-offset:3px;text-decoration-thickness:1px} /* 2026-06-28 (ui-ux-designer): GLOBAL data-tip cursor cue — applies even on pages that load this stylesheet for the .bfm-tip popover but do NOT put class="sw" on (e.g. apps/crypto Coin Screener, which keeps its own dark theme). The styled tooltip popover fires via bfm-ui.js on ANY [data-tip] regardless of .sw scope; this gives those elements the matching help cursor. Additive + low-specificity so any app rule still wins. */ [data-tip]{cursor:help} .bfm-tip{position:fixed;z-index:9999;max-width:300px;background:#1b1f27;color:#eef1f5;border:1px solid #2f3744; padding:10px 12px;border-radius:2px;font:13px/1.45 var(--sw-sans);opacity:0;pointer-events:none; transform:translateY(3px);transition:opacity .12s ease,transform .12s ease;box-shadow:0 8px 28px rgba(0,0,0,.45)} .bfm-tip.show{opacity:1;pointer-events:auto;transform:none} .bfm-tip-content{white-space:pre-wrap} /* close control lives ONLY on touch (a corner ✕ inside the tip card) — never a stray standalone button on desktop, where hover-out / scroll already dismisses. */ .bfm-tip-dismiss{display:none;cursor:pointer} .bfm-tip-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;opacity:0;pointer-events:none;transition:opacity .12s} .bfm-tip-backdrop.show{opacity:1;pointer-events:auto} @media (hover:none) and (pointer:coarse){ .bfm-tip.show{left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;max-width:84vw;padding:18px 18px 16px;font-size:15px} .bfm-tip-dismiss{display:block;position:absolute;top:4px;right:6px;margin:0;border:0;background:transparent; color:#9aa3b0;font-size:20px;line-height:1;padding:4px 8px;font:inherit} } /* ============================================================================ * TILE GRID + KEY FIGURE + GROUP SEPARATOR (added 2026-06-23) * User directive: ONE continuous flow of UNIFORM, SAME-SIZE tiles (no stretch). * Rows are respected (tiles pack row by row, wrapping); columns are NOT (tiles * need not line up vertically). Occasional span-2 colspan tiles. Groups stay * INLINE in the same flow — a thin vertical-text spine (.sw-vsep) sits in the * flow and the next group's tiles continue right after it. NEVER a separate * grid per group. ONE key datum per page at h1 scale 3.8em. Additive only. * ========================================================================== */ /* uniform tile flow — single flex-wrap container. Every tile is the SAME fixed * size (flex-grow 0) so tiles never stretch to different widths; rows fill left * to right and wrap. Columns deliberately don't align — group spines and span2 * tiles offset the packing, which is accepted. Tune --sw-tile-min per page so * full rows sit close to the container width. Spines + next group live in the * SAME container (see the .sw-vsep example in the ui-ux-designer agent). */ .sw-tilegrid{display:flex;flex-wrap:wrap;gap:1px;background:var(--sw-line);align-items:stretch} .sw-tilegrid > .sw-tile{flex:0 0 var(--sw-tile-min,220px);min-width:0; background:var(--sw-surface);padding:clamp(14px,1.6vw,22px)} .sw-tilegrid > .sw-tile.span2{flex-basis:calc(var(--sw-tile-min,220px) * 2 + 1px)} @media(max-width:620px){.sw-tilegrid > .sw-tile,.sw-tilegrid > .sw-tile.span2{flex-basis:100%}} /* thin vertical-text group separator — sits INLINE in the tile flow between * groups; the next group's tiles continue right after it (no new container). */ .sw-vsep{flex:0 0 auto;writing-mode:vertical-rl;text-orientation:mixed; background:var(--sw-surface);color:var(--sw-dim); font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600; display:flex;align-items:center;justify-content:center; padding:10px 0;min-width:22px;border-left:1px solid var(--sw-line); border-right:1px solid var(--sw-line)} /* KEY FIGURE — the single dominant datum on a page/tile */ .sw-keyfig{font-size:3.8em;font-weight:800;letter-spacing:-.03em;line-height:.92; color:var(--sw-ink);font-variant-numeric:tabular-nums;display:block} .sw-keyfig.accent{color:var(--sw-accent)} .sw-keyfig.up{color:var(--sw-up)} .sw-keyfig.down{color:var(--sw-down)}