/* ────────────────────────────────────────────────────────────────── Symbol Screen — BROADSHEET stylesheet A warm-paper, ink-black, serif-headline financial system. Authored on top of tokens.css (the design-handoff source of truth). Components drawn as hairline-ruled broadsheet blocks, not boxed cards. ────────────────────────────────────────────────────────────────── */ /* ── Fonts ─────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;0,8..60,900;1,8..60,400;1,8..60,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ═══════════════════════════════════════════════════════════════════ 1. TOKENS — single source of truth (copied from design_handoff tokens.css) ═══════════════════════════════════════════════════════════════════ */ :root { /* Paper & ink */ --paper: #f4efe6; /* warm cream — default page */ --paper-warm: #ebe4d6; /* darker paper band (mastheads, pullouts) */ --paper-soft: #faf7f0; /* brightest — hover/card interiors */ --paper-deep: #e3dccc; /* deepest paper — sidebars */ --ink: #1a1610; /* primary text — warm near-black */ --ink-soft: #3d362a; /* secondary */ --ink-dim: #756b58; /* meta, labels */ --ink-muted: #9c9583; /* fineprint */ --rule: #1a1610; /* hairline rules in full ink */ --rule-soft: rgba(26,22,16,0.15); --rule-hair: rgba(26,22,16,0.08); /* Spot colors — used sparingly, like a 2-color press run */ --bull: #1f6b3a; --bull-ink: #0f4422; --bear: #a81e1e; --bear-ink: #6b0f0f; --warn: #a56500; --accent: #2b4a7a; /* navy — editorial accent, links */ --star: #a56500; /* Sentiment margin band (left row rule) */ --sentiment-bull: #1f6b3a; --sentiment-neu: #9c9583; --sentiment-bear: #a81e1e; /* Tier background tints (paper-printed feel, not UI highlights) */ --tier-base-bg: rgba(31,107,58,0.08); --tier-base-fg: #0f4422; --tier-stabilising-bg: rgba(165,101,0,0.10); --tier-stabilising-fg: #6b4200; --tier-danger-bg: rgba(168,30,30,0.08); --tier-danger-fg: #6b0f0f; --tier-pullback-bg: rgba(43,74,122,0.08); --tier-pullback-fg: #1c3354; --tier-accum-bg: rgba(0,110,130,0.08); --tier-accum-fg: #005566; --tier-jpattern-bg: rgba(88, 56, 140, 0.08); --tier-jpattern-fg: #3d1f7a; --tier-etf-bg: rgba(26,22,16,0.05); --tier-etf-fg: #3d362a; /* Fonts */ --font-serif: 'Source Serif 4', 'Iowan Old Style', 'Charter', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --num-features: 'tnum'; /* Type scale */ --fs-masthead: 42px; --fs-hero: 64px; --fs-display: 36px; --fs-h1: 22px; --fs-h2: 17px; --fs-body: 14px; --fs-read: 16px; --fs-sm: 13px; --fs-xs: 12px; --fs-2xs: 11px; --fs-caps: 10px; --lh-body: 1.55; --lh-read: 1.5; --lh-tight: 1.1; --tr-tight: -0.01em; --tr-caps: 0.12em; /* Spacing (4px grid) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Radii — tight */ --r-xs: 2px; --r-sm: 3px; --r: 4px; --r-pill: 999px; /* Elevation — almost none */ --shadow-card: 0 1px 0 rgba(26,22,16,0.06); --shadow-drawer: -8px 0 24px rgba(26,22,16,0.12); } /* ── Dark theme tokens ───────────────────────────── */ /* Applied via system preference OR explicit [data-theme="dark"] on . */ @media (prefers-color-scheme: dark) { :root { --paper: #1c1814; --paper-warm: #161310; --paper-soft: #211e18; --paper-deep: #120f0c; --ink: #f0eadc; --ink-soft: #d4ccbc; --ink-dim: #9e9585; --ink-muted: #6b6357; --rule: rgba(240,234,220,0.80); --rule-soft: rgba(240,234,220,0.12); --rule-hair: rgba(240,234,220,0.07); --bull: #2ea854; --bull-ink: #2ea854; --bear: #d44040; --bear-ink: #d44040; --warn: #c98a2a; --accent: #5b8ec4; --star: #c98a2a; --sentiment-bull: #2ea854; --sentiment-bear: #d44040; --tier-base-bg: rgba(46,168,84,0.15); --tier-base-fg: #2ea854; --tier-stabilising-bg: rgba(201,138,42,0.15); --tier-stabilising-fg: #c98a2a; --tier-danger-bg: rgba(212,64,64,0.15); --tier-danger-fg: #d44040; --tier-pullback-bg: rgba(91,142,196,0.15); --tier-pullback-fg: #5b8ec4; --tier-accum-bg: rgba(0,175,204,0.12); --tier-accum-fg: #1aafcc; --tier-jpattern-bg: rgba(158,123,219,0.12); --tier-jpattern-fg: #9e7bdb; --tier-etf-bg: rgba(240,234,220,0.08); --tier-etf-fg: #d4ccbc; --shadow-card: 0 1px 0 rgba(0,0,0,0.30); --shadow-drawer: -8px 0 24px rgba(0,0,0,0.50); }} [data-theme="dark"] { --paper: #1c1814; --paper-warm: #161310; --paper-soft: #211e18; --paper-deep: #120f0c; --ink: #f0eadc; --ink-soft: #d4ccbc; --ink-dim: #9e9585; --ink-muted: #6b6357; --rule: rgba(240,234,220,0.80); --rule-soft: rgba(240,234,220,0.12); --rule-hair: rgba(240,234,220,0.07); --bull: #2ea854; --bull-ink: #2ea854; --bear: #d44040; --bear-ink: #d44040; --warn: #c98a2a; --accent: #5b8ec4; --star: #c98a2a; --sentiment-bull: #2ea854; --sentiment-bear: #d44040; --tier-base-bg: rgba(46,168,84,0.15); --tier-base-fg: #2ea854; --tier-stabilising-bg: rgba(201,138,42,0.15); --tier-stabilising-fg: #c98a2a; --tier-danger-bg: rgba(212,64,64,0.15); --tier-danger-fg: #d44040; --tier-pullback-bg: rgba(91,142,196,0.15); --tier-pullback-fg: #5b8ec4; --tier-accum-bg: rgba(0,175,204,0.12); --tier-accum-fg: #1aafcc; --tier-jpattern-bg: rgba(158,123,219,0.12); --tier-jpattern-fg: #9e7bdb; --tier-etf-bg: rgba(240,234,220,0.08); --tier-etf-fg: #d4ccbc; --shadow-card: 0 1px 0 rgba(0,0,0,0.30); --shadow-drawer: -8px 0 24px rgba(0,0,0,0.50); } [data-theme="light"] { --paper: #f4efe6; --paper-warm: #ebe4d6; --paper-soft: #faf7f0; --paper-deep: #e3dccc; --ink: #1a1610; --ink-soft: #3d362a; --ink-dim: #756b58; --ink-muted: #9c9583; --rule: #1a1610; --rule-soft: rgba(26,22,16,0.15); --rule-hair: rgba(26,22,16,0.08); --bull: #1f6b3a; --bull-ink: #0f4422; --bear: #a81e1e; --bear-ink: #6b0f0f; --warn: #a56500; --accent: #2b4a7a; --star: #a56500; --sentiment-bull: #1f6b3a; --sentiment-bear: #a81e1e; --tier-base-bg: rgba(31,107,58,0.08); --tier-base-fg: #0f4422; --tier-stabilising-bg: rgba(165,101,0,0.10); --tier-stabilising-fg: #6b4200; --tier-danger-bg: rgba(168,30,30,0.08); --tier-danger-fg: #6b0f0f; --tier-pullback-bg: rgba(43,74,122,0.08); --tier-pullback-fg: #1c3354; --tier-accum-bg: rgba(0,110,130,0.08); --tier-accum-fg: #005566; --tier-jpattern-bg: rgba(88,56,140,0.08); --tier-jpattern-fg: #3d1f7a; --tier-etf-bg: rgba(26,22,16,0.05); --tier-etf-fg: #3d362a; --shadow-card: 0 1px 0 rgba(26,22,16,0.06); --shadow-drawer: -8px 0 24px rgba(26,22,16,0.12); } /* ═══════════════════════════════════════════════════════════════════ 2. BASE — reset, body, typography primitives ═══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Kill iOS WKWebView pull-to-refresh: rubber-banding past the top of the page triggers a native reload, which on first launch yanks the user out of "Loading…" before Firestore can deliver data. */ overscroll-behavior: none; /* Anchor the scroll root so WKWebView cannot rubber-band past the top. height:100% on both html and body gives the WebView a defined scroll boundary and ensures the paper background fills the full viewport, eliminating any dark WKWebView chrome bleeding through on overscroll. */ height: 100%; } /* iOS/WKWebView: kill double-tap-zoom + 300ms delay + grey tap-flash. touch-action: manipulation disables double-tap-zoom on all descendants; paired with user-scalable=no in the viewport meta as belt-and-suspenders. */ body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; letter-spacing: var(--tr-tight); margin: 0; line-height: var(--lh-tight); } h1 { font-size: var(--fs-h1); font-weight: 700; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h2); } h4 { font-size: var(--fs-sm); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--ink-dim); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Utility type classes */ .caps { font-family: var(--font-sans); font-size: var(--fs-caps); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--ink-dim); } .kicker { font-family: var(--font-sans); font-size: var(--fs-caps); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--ink-dim); } .kicker .sep { margin: 0 .4em; color: var(--ink-muted); } .mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .serif { font-family: var(--font-serif); } .serif-italic { font-family: var(--font-serif); font-style: italic; } .pos, .up, .chg-pos { color: var(--bull-ink); } .neg, .down, .chg-neg { color: var(--bear-ink); } .dim { color: var(--ink-dim); } .arrow-up::before { content: '▲\0020'; font-size: 0.78em; } .arrow-down::before { content: '▼\0020'; font-size: 0.78em; } /* Hairline rule primitives */ .rule { border: 0; border-top: 1px solid var(--rule); height: 0; margin: 0; } .rule-soft { border: 0; border-top: 1px solid var(--rule-soft); height: 0; margin: 0; } .rule-hair { border: 0; border-top: 1px solid var(--rule-hair); height: 0; margin: 0; } .rule-double{ border: 0; border-top: 3px double var(--ink); height: 3px; margin: 0; } hr { border: 0; border-top: 1px solid var(--rule-soft); margin: var(--sp-4) 0; } /* ═══════════════════════════════════════════════════════════════════ 3. LAYOUT — masthead + ribbon + 3-column page grid ═══════════════════════════════════════════════════════════════════ */ /* Outer page wrapper — only shown when signed-in. */ body.signed-in .page-wrap { display: grid; grid-template-rows: auto auto auto 1fr auto; min-height: 100vh; } body.signed-out .page-wrap { display: none; } /* ── Masthead ─────────────────────────────────────────────────── */ .masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--sp-5); /* env(safe-area-inset-top) keeps the wordmark out of the Dynamic Island on iOS; falls back to 0 on web and non-notched devices. */ padding: calc(var(--sp-5) + env(safe-area-inset-top, 0px)) var(--sp-10) var(--sp-2); border-bottom: 1px solid var(--rule); background: var(--paper); } .masthead-left, .masthead-right { font-family: var(--font-sans); font-size: var(--fs-2xs); color: var(--ink-dim); line-height: 1.5; text-transform: uppercase; letter-spacing: 0.08em; } .masthead-right { text-align: right; } .masthead-left .bold, .masthead-right .bold { color: var(--ink); font-weight: 700; } /* Screener commit SHA + staleness pill in masthead-left */ .masthead-sha { display: inline-block; } .sha-link { color: var(--ink-dim); text-decoration: none; letter-spacing: 0.04em; font-family: var(--font-mono, monospace); } .sha-link:hover { color: var(--ink); text-decoration: underline; } .sha-stale { display: inline-block; margin-left: 5px; color: #a0531a; font-family: var(--font-sans); letter-spacing: 0.06em; cursor: help; } .masthead-title { text-align: center; padding-bottom: 2px; } .masthead-wordmark { font-family: var(--font-serif); font-weight: 900; font-style: italic; font-size: 48px; line-height: 0.9; letter-spacing: -0.025em; color: var(--ink); } .masthead-wordmark .the { font-weight: 700; font-style: normal; font-size: 0.42em; vertical-align: 0.85em; letter-spacing: 0.2em; margin-right: 6px; color: var(--ink-soft); } .masthead-motto { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 4px; } .masthead-auth { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; text-transform: none; letter-spacing: 0; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; background: transparent; cursor: pointer; color: var(--ink-dim); border-radius: var(--r); transition: color 0.15s, background 0.15s; text-transform: none; letter-spacing: 0; vertical-align: middle; } .theme-toggle:hover { color: var(--ink); background: var(--rule-hair); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline-block; } @media (prefers-color-scheme: dark) { .theme-toggle .icon-sun { display: inline-block; } .theme-toggle .icon-moon { display: none; } } [data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: inline-block; } /* ── Ribbon: static market indices + run status ───────────────── */ .ribbon { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--sp-2) var(--sp-10); font-family: var(--font-sans); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); background: var(--paper-warm); } .ribbon-indices { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); justify-self: start; } .ribbon-index { font-family: var(--font-mono); letter-spacing: 0; text-transform: none; } .ribbon-index .t { color: var(--ink); font-weight: 600; margin-right: 6px; font-family: var(--font-sans); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.1em; } .ribbon-index .v { color: var(--ink); font-weight: 600; } .ribbon-sep { margin: 0 var(--sp-2); color: var(--ink-muted); } .ribbon-status { display: flex; align-items: center; gap: var(--sp-2); justify-self: center; } .ribbon-sync::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bull); margin-right: 4px; vertical-align: 1px; } /* ── 3-col page grid ──────────────────────────────────────────── */ .page { display: grid; grid-template-columns: 260px minmax(0,1fr) 300px; gap: 0; min-height: 0; } .page > .col { padding: var(--sp-5) var(--sp-5); min-width: 0; /* allow center col to shrink + scroll */ } .page > .col + .col { border-left: 1px solid var(--rule); } .page > .col.center { padding: var(--sp-5) var(--sp-6); } /* Right rail: Calendar/About hide it. Screener/Watchlist/Positions keep it. */ body.view-calendar .page > .col.right, body.view-about .page > .col.right { display: none; } /* Positions: right rail shows earnings only (hide watchlist movers module) */ body.view-positions #rr-watchlist, body.view-positions .rail-rule { display: none; } /* Screener: right rail shows watchlist + callout only — hide earnings module */ body.view-screen #rr-earnings, body.view-screen .rail-rule:has(+ #rr-earnings) { display: none; } /* Left column: uniform 260px on all pages so section-nav items are the same size. Filter rail sections are hidden on non-screener pages, but the column width stays consistent so the nav doesn't jump. */ body.view-watchlist .page, body.view-positions .page { grid-template-columns: 260px minmax(0, 1fr) 300px; } body.view-about .page { grid-template-columns: 260px minmax(0, 1fr); } /* Calendar: full-width — left nav hides, bottom tabs take over navigation */ body.view-calendar .page { grid-template-columns: 1fr; } body.view-calendar .page > .col.left { display: none; } body.view-calendar .bottom-tabs { display: flex; } body.view-calendar.signed-in { padding-bottom: calc(57px + env(safe-area-inset-bottom, 0px)); } body.view-calendar .page > .col.center { padding-left: 0; padding-right: 0; } body.view-calendar .center-head { padding: 0 var(--sp-6) var(--sp-3); } body.view-calendar .cal-sub-wrap { padding: 0 var(--sp-6); } /* Filter rail: visible by default (screener is the landing tab). Hidden on every non-screener view. */ body.view-watchlist .page > .col.left .rail-section, body.view-calendar .page > .col.left .rail-section, body.view-positions .page > .col.left .rail-section, body.view-about .page > .col.left .rail-section, body.view-watchlist .page > .col.left #prefs-sync-status, body.view-calendar .page > .col.left #prefs-sync-status, body.view-positions .page > .col.left #prefs-sync-status, body.view-about .page > .col.left #prefs-sync-status { display: none; } /* ── Footer ───────────────────────────────────────────────────── */ .page-footer { border-top: 1px solid var(--rule); padding: 6px var(--sp-4); font-size: 10px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; background: var(--paper); } .footer-disclaimer { font-family: var(--font-sans); font-size: 10px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; text-align: center; } .page-footer a { color: var(--ink-soft); } .footer-about-btn { background: none; border: none; padding: 0; font: inherit; font-size: 0.78rem; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .footer-about-btn:hover { color: var(--ink); } /* Phone-only account row — email + sign-out. Hidden ≥761px (auth pill in the masthead covers it there). */ .footer-account { display: none; align-items: center; justify-content: center; gap: var(--sp-3); width: 100%; padding-top: 4px; text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); color: var(--ink-soft); } .footer-account-email { font-weight: 500; color: var(--ink); } .footer-signout-btn { background: none; border: 1px solid var(--rule); padding: 4px var(--sp-3); font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--ink-soft); cursor: pointer; border-radius: var(--r-xs); } .footer-signout-btn:hover { color: var(--accent); border-color: var(--accent); } @media (max-width: 760px) { body.signed-in .footer-account { display: flex !important; } } /* ═══════════════════════════════════════════════════════════════════ 4. LEFT RAIL — section nav + filters ═══════════════════════════════════════════════════════════════════ */ .rail-kicker { font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.14em; font-size: 10px; color: var(--ink-muted); margin-bottom: var(--sp-2); text-transform: uppercase; } /* ── Section nav: vertical activity-bar rail ────────────────────── Items are full-width rows: a fixed 36×36 icon cell on the left, then a label that fades in when the whole nav group is hovered. Active item gets a 2px accent left-border + tinted background. Separated from the filters below by a double rule. */ .section-nav { display: flex; flex-direction: column; gap: 2px; border-top: none; border-bottom: 3px double var(--ink); padding: 4px 0 0; margin-bottom: 6px; } .section-nav .nav-item { display: flex; flex-direction: row; align-items: center; gap: 0; width: 100%; height: 36px; font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); background: transparent; border: none; border-left: 2px solid transparent; border-radius: 0 4px 4px 0; cursor: pointer; text-align: left; transition: color 0.15s, background 0.15s, border-color 0.15s; } .section-nav .nav-item:hover { color: var(--ink); background: var(--paper-soft); border-left-color: var(--rule); } .section-nav .nav-item.active { color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); border-left-color: var(--accent); } .section-nav .nav-item.active:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); } /* Icon wrapper: fixed 36×36 square */ .section-nav .nav-icon-wrap { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; pointer-events: none; } .section-nav .nav-item.active .nav-icon { stroke: var(--accent); } .section-nav .nav-item:hover .nav-icon { stroke: var(--ink); } /* Label: always visible */ .section-nav .nav-label { flex: 1; white-space: nowrap; overflow: hidden; padding-right: 8px; line-height: 1; } /* Count badge */ .section-nav .nav-item .nav-count { display: none; flex-shrink: 0; padding: 0 5px; margin-right: 6px; height: 16px; line-height: 16px; font-size: 9px; font-weight: 700; background: var(--paper-deep); border-radius: 8px; color: var(--ink-dim); white-space: nowrap; } .section-nav .nav-item .nav-count:not(:empty) { display: block; } .section-nav .nav-item .count { display: none; } /* Range mode toggle (52w / 26w) */ .range-mode-toggle { display: flex; gap: 2px; margin-bottom: var(--sp-4); background: var(--surface-2, #f0f0f0); border-radius: 6px; padding: 2px; } .range-mode-btn { flex: 1; padding: 4px 0; font-size: var(--fs-xs); font-family: var(--font-sans); font-weight: 600; border: none; border-radius: 4px; background: transparent; color: var(--ink-dim); cursor: pointer; transition: background 0.15s, color 0.15s; } .range-mode-btn.active { background: var(--surface, #fff); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); } .range-mode-btn:not(.active):hover { color: var(--ink); } .rail-section { margin-bottom: var(--sp-5); } .rail-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-2); } .rail-section-head h4 { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-sm); text-transform: none; letter-spacing: var(--tr-tight); color: var(--ink); } .rail-section-head .clear { font-size: var(--fs-2xs); color: var(--ink-dim); cursor: pointer; background: none; border: 0; padding: 0; font-family: var(--font-sans); } .rail-section-head .clear:hover { color: var(--accent); text-decoration: underline; } /* Filter rows — label-on-left, value-right */ .filter-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: var(--fs-sm); border-bottom: 1px dotted var(--rule-soft); gap: var(--sp-2); } .filter-row:last-child { border-bottom: 0; } .filter-row .k { color: var(--ink-soft); white-space: nowrap; display: flex; align-items: center; gap: 4px; } /* ⓘ tooltip icon next to filter labels */ .filter-tip { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--ink-muted); color: var(--ink-muted); font-size: 9px; font-style: normal; font-weight: 600; line-height: 1; cursor: help; position: relative; } .filter-tip::after { content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--paper); padding: 6px 9px; border-radius: 5px; font-size: 11px; font-weight: 400; font-style: normal; white-space: normal; width: 190px; line-height: 1.45; z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.15s; } .filter-tip:hover::after { opacity: 1; } /* On narrow left rails, flip to right side only — left side has no room */ .col.left .filter-tip::after { left: calc(100% + 8px); right: auto; } .check-row .filter-tip { margin-left: 2px; } /* ── Dossier sidebar info tips (tooltip floats left, toward article body) ── */ .info-tip { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; flex-shrink: 0; margin-left: 3px; border-radius: 50%; border: 1px solid var(--ink-muted); color: var(--ink-muted); font-size: 9px; font-weight: 600; line-height: 1; font-style: normal; cursor: help; position: relative; vertical-align: middle; } .info-tip::after { content: attr(data-tip); position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--paper); padding: 6px 9px; border-radius: 5px; font-size: 11px; font-weight: 400; white-space: normal; width: 210px; line-height: 1.45; z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.15s; } .info-tip:hover::after { opacity: 1; } .filter-row select, .filter-row input[type="text"], .filter-row input[type="number"] { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid transparent; padding: 2px 4px; text-align: right; min-width: 0; max-width: 120px; appearance: none; -webkit-appearance: none; cursor: pointer; } /* Pin select width so dropdowns line up in a clean column on the right — without this, each