/* ============================================================================ GSB SALES FLASH — EDITORIAL THEME ---------------------------------------------------------------------------- Translates the Sales Flash page (#newdev-screen) into the Green Shoot Brands identity defined in gsb-tokens.css: warm paper ground, soil-ink text, a SINGLE shoot-green accent, Newsreader display serif, JetBrains Mono figures, squared/restrained corners, clay/ochre for deltas (never red/green RGB). • Consumes only var(--gsb-*) / var(--color-*) tokens — never raw hex. To restyle, edit gsb-tokens.css, not this file. • Scoped to #newdev-screen so the rest of the app is untouched. To roll the look out site-wide, lift the #newdev-screen prefix (or duplicate per page). • Uses !important deliberately: the legacy markup carries inline style="..." and the base style.css uses !important; a stylesheet !important still wins over non-important inline styles, which is how we recolor without editing the inline HTML. ============================================================================ *//* ---- 1. PAGE GROUND + BASE TYPE ----------------------------------------- */ #newdev-screen { background: var(--gsb-paper) !important; color: var(--gsb-soil-ink) !important; font-family: var(--font-body) !important; -webkit-font-smoothing: antialiased; }/* Numbers: tabular mono everywhere figures stack. The JS tables ship inline font-family:'Inter' on the , so we need !important to win. Figure columns + their headers go mono; the FIRST column (names/labels) stays Inter. */ #newdev-screen table td, #period-insights-screen table td, #newdev-screen table th, #period-insights-screen table th { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } #newdev-screen table td, #period-insights-screen table td, #newdev-screen table th, #period-insights-screen table th, #newdev-screen table td *, #period-insights-screen table td *, #newdev-screen table th *, #period-insights-screen table th *, #newdev-screen .gsb-tnum, #period-insights-screen .gsb-tnum, #newdev-screen [class*="kpi"] .value, #newdev-screen [class*="-value"] { font-family: var(--font-mono) !important; }/* ---- 2. PAGE TITLE — full logo lettering + GSB monogram mark ------------ The whole title reads as the GSB wordmark: "Sales Flash" matches the logo's Inter 700 / tight-tracked / soil-ink lettering (not the editorial serif), so it sits flush with the "GSB." monogram instead of switching typeface. */ #newdev-screen .nav-bar h2, #venue-deep-dive-screen .nav-bar h2, #labor-matrix-screen .nav-bar h2 { font-family: var(--font-main) !important; font-weight: 700 !important; font-size: 22px !important; letter-spacing: -0.04em !important; color: var(--gsb-soil-ink) !important; line-height: var(--lh-heading) !important; display: flex; align-items: baseline; /* logo baseline (its bottom edge) aligns to the title baseline */ gap: 2px; }/* GSB monogram rendered as LIVE TEXT (not an SVG image) in the exact same Inter 700 / -0.04em run as "Sales Flash" — so the whole title shares one true baseline and reads as a single wordmark. Only the trailing period takes the leaf accent. */ #newdev-screen .nav-bar h2 .gsb-title-mark, #venue-deep-dive-screen .nav-bar h2 .gsb-title-mark, #labor-matrix-screen .nav-bar h2 .gsb-title-mark { flex: 0 0 auto; color: var(--gsb-soil-ink); } #newdev-screen .nav-bar h2 .gsb-title-dot, #venue-deep-dive-screen .nav-bar h2 .gsb-title-dot, #labor-matrix-screen .nav-bar h2 .gsb-title-dot { color: var(--gsb-leaf); }/* "vs Budget" mode badge: rest its box bottom on the title's text baseline so it sits on the same line as "GSB. Sales Flash". flex-end aligns it to the line-box bottom (which falls ~4px below the baseline since the title has no descenders); the -4px nudge brings the pill bottom up onto the baseline. */ #newdev-screen .nav-bar h2 #newdev-mode-badge { align-self: flex-end !important; transform: translateY(-4px); }/* Keyword highlight — a leaf-green "highlighter" swipe behind the leading noun. Reads clearly at small header sizes (where green text alone was too subtle) and keeps the editorial ink word. */ #newdev-screen .gsb-kw, #period-insights-screen .gsb-kw, #venue-deep-dive-screen .nav-bar h2 .gsb-kw, #labor-matrix-screen .nav-bar h2 .gsb-kw { color: var(--gsb-soil-ink) !important; background: linear-gradient(transparent 58%, rgba(130, 187, 144, 0.50) 58%) !important; padding: 0 2px; border-radius: 1px; }/* All Sales Flash section headers read as editorial serif (catches the exception-panel h3s that ship with inline Inter + slate/amber color). */ #newdev-screen h3 { font-family: var(--font-display) !important; font-weight: 400 !important; color: var(--gsb-soil-ink) !important; letter-spacing: var(--tracking-tight) !important; }/* Mode badge beside the title — quiet ink chip, not a loud pill */ #newdev-screen #newdev-mode-badge { background: var(--gsb-oat) !important; color: var(--gsb-stone) !important; font-family: var(--font-mono) !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: var(--tracking-label) !important; border-radius: var(--radius-sm) !important; } #newdev-screen #newdev-filter-label { color: var(--gsb-stone) !important; font-family: var(--font-body) !important; }/* ---- 3. COMMAND BAR (filters) — flat paper, no glass --------------------- */ #newdev-screen .newdev-command-bar { background: var(--color-surface) !important; border: var(--rule-hairline) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #newdev-screen .newdev-command-bar .cmdbar-label { font-family: var(--font-mono) !important; color: var(--gsb-stone) !important; letter-spacing: var(--tracking-label) !important; font-weight: 500 !important; } #newdev-screen .newdev-command-bar .cmdbar-divider { background: var(--color-border) !important; }/* Brand / Region filter buttons + their group wrappers */ #newdev-screen #newdev-compbrand-buttons button, #newdev-screen #newdev-region-buttons button { font-family: var(--font-body) !important; border: var(--rule-hairline) !important; border-radius: var(--radius-md) !important; box-shadow: none !important; color: var(--gsb-soil-ink) !important; background: var(--color-surface) !important; } #newdev-screen #newdev-compbrand-buttons button:hover, #newdev-screen #newdev-region-buttons button:hover { transform: none !important; border-color: var(--gsb-shoot-green) !important; box-shadow: none !important; }/* Active / selected filter = the single shoot-green accent */ #newdev-screen #newdev-compbrand-buttons button.active, #newdev-screen #newdev-region-buttons button.active, #newdev-screen #newdev-compbrand-buttons button[aria-pressed="true"], #newdev-screen #newdev-region-buttons button[aria-pressed="true"] { background: var(--gsb-shoot-green) !important; border-color: var(--gsb-shoot-green) !important; color: var(--gsb-paper) !important; } #newdev-screen .newdev-brand-group, #newdev-screen .newdev-region-group { border: var(--rule-hairline) !important; border-radius: var(--radius-md) !important; background: var(--gsb-oat) !important; box-shadow: none !important; } #newdev-screen .newdev-brand-group:hover, #newdev-screen .newdev-region-group:hover { border-color: var(--gsb-shoot-green) !important; background: var(--gsb-oat) !important; } #newdev-screen .newdev-brand-group span, #newdev-screen .newdev-region-group span { background: var(--color-border) !important; }/* ---- 4. SEGMENTED TOGGLES (Mode / Period) ------------------------------- *//* Active button inline bg is #1e293b; inactive is #fff. Recolor both. *//* SHARED SEGMENTED CONTROL — the base treatment lives in gsb-clean.css. These #newdev-screen-scoped rules carry equal/higher specificity than gsb-clean's plain id selectors, so we re-state the same flat oat-track / ink-pill design here to keep the newdev screen identical. Container = oat track, no border; active = solid ink pill. */ #newdev-screen #newdev-tracker-mode-toggle, #newdev-screen #newdev-tracker-period-toggle, #newdev-screen #newdev-chart-toggle { background: var(--gsb-oat) !important; border: none !important; border-radius: 6px !important; padding: 3px !important; gap: 2px !important; box-shadow: none !important; overflow: visible !important; } #newdev-screen #newdev-tracker-mode-toggle button, #newdev-screen #newdev-tracker-period-toggle button, #newdev-screen #newdev-chart-toggle button { font-family: var(--font-mono) !important; background: transparent !important; color: var(--gsb-stone) !important; border: none !important; border-left: none !important; border-radius: 4px !important; box-shadow: none !important; letter-spacing: 0.04em !important; }/* The "on" state ships as inline background:#221E18 (soil ink) — older builds used slate (#1e293b / rgb(30,41,59)) or emerald (rgb(16,185,129)). Match all so the active button reads as one solid ink pill on the oat track. */ #newdev-screen #newdev-tracker-mode-toggle button[style*="background:#221E18"], #newdev-screen #newdev-tracker-mode-toggle button[style*="background: rgb(34, 30, 24)"], #newdev-screen #newdev-tracker-mode-toggle button[style*="background:#1e293b"], #newdev-screen #newdev-tracker-mode-toggle button[style*="background: rgb(30, 41, 59)"], #newdev-screen #newdev-tracker-mode-toggle button[style*="background: rgb(16, 185, 129)"], #newdev-screen #newdev-tracker-period-toggle button[style*="background:#221E18"], #newdev-screen #newdev-tracker-period-toggle button[style*="background: rgb(34, 30, 24)"], #newdev-screen #newdev-tracker-period-toggle button[style*="background:#1e293b"], #newdev-screen #newdev-tracker-period-toggle button[style*="background: rgb(30, 41, 59)"], #newdev-screen #newdev-tracker-period-toggle button[style*="background: rgb(16, 185, 129)"], #newdev-screen #newdev-chart-toggle button[style*="background:#221E18"], #newdev-screen #newdev-chart-toggle button[style*="background: rgb(34, 30, 24)"], #newdev-screen #newdev-chart-toggle button[style*="background:#1e293b"], #newdev-screen #newdev-chart-toggle button[style*="background: rgb(30, 41, 59)"], #newdev-screen #newdev-chart-toggle button.active { background: var(--gsb-soil-ink) !important; color: var(--gsb-paper) !important; box-shadow: none !important; }/* ---- 5. VENUE PILL + SELECTS + ACTIONS ---------------------------------- */ #newdev-screen #newdev-venue-pill { border: var(--rule-hairline) !important; border-radius: var(--radius-md) !important; background: var(--color-surface) !important; } #newdev-screen #newdev-venue-pill button { color: var(--gsb-shoot-green) !important; background: transparent !important; } #newdev-screen #newdev-venue-display { color: var(--gsb-soil-ink) !important; } #newdev-screen #newdev-store-count, #newdev-screen #newdev-store-badge { color: var(--gsb-stone) !important; }/* Custom List action — ink outline, not purple */ #newdev-screen #newdev-custom-list-toggle { border: var(--rule-hairline) !important; border-radius: var(--radius-md) !important; background: var(--color-surface) !important; color: var(--gsb-soil-ink) !important; font-family: var(--font-body) !important; } #newdev-screen #newdev-custom-list-toggle:hover { border-color: var(--gsb-shoot-green) !important; } #newdev-screen #newdev-custom-badge { background: var(--gsb-shoot-green) !important; color: var(--gsb-paper) !important; }/* Reset = a cautionary action → clay, never red */ #newdev-screen #newdev-reset-btn { border: 1px solid var(--gsb-clay) !important; background: var(--gsb-paper) !important; color: var(--gsb-clay) !important; border-radius: var(--radius-md) !important; font-family: var(--font-mono) !important; }/* Selects */ #newdev-screen select, #newdev-screen .modern-select { background: var(--color-surface) !important; color: var(--gsb-soil-ink) !important; border: var(--rule-hairline) !important; border-radius: var(--radius-md) !important; font-family: var(--font-body) !important; }/* Custom store-list panel */ #newdev-screen #newdev-custom-panel { background: var(--gsb-oat) !important; border: var(--rule-hairline) !important; border-radius: var(--radius-lg) !important; } #newdev-screen #newdev-custom-panel input[type="text"], #newdev-screen #newdev-avail-list, #newdev-screen #newdev-selected-list { background: var(--color-surface) !important; border: var(--rule-hairline) !important; border-radius: var(--radius-md) !important; } #newdev-screen #newdev-selected-count { color: var(--gsb-shoot-green) !important; } #newdev-screen #newdev-save-btn { border: 1px solid var(--gsb-shoot-green) !important; color: var(--gsb-shoot-green) !important; background: var(--color-surface) !important; } #newdev-screen #newdev-delete-list-btn { color: var(--gsb-clay) !important; }/* Apply = primary action → shoot green; Clear = secondary → ink outline */ #newdev-screen #newdev-apply-btn { background: var(--gsb-shoot-green) !important; color: var(--gsb-paper) !important; border: 1px solid var(--gsb-shoot-green) !important; border-radius: var(--radius-md) !important; } #newdev-screen #newdev-clear-btn { background: var(--color-surface) !important; color: var(--gsb-soil-ink) !important; border: var(--rule-hairline) !important; border-radius: var(--radius-md) !important; }/* ---- 6. STATUS: FRESHNESS + ANOMALIES ----------------------------------- *//* Anomaly pill is an alert → clay family, not RGB red */ #newdev-screen #anomalies-widget-container button { background: rgba(181, 83, 46, 0.08) !important; /* clay @ 8% */ border: 1px solid rgba(181, 83, 46, 0.35) !important; color: var(--gsb-clay) !important; font-family: var(--font-mono) !important; } #newdev-screen #anomalies-list { background: var(--color-surface) !important; border: 1px solid rgba(181, 83, 46, 0.25) !important; border-radius: var(--radius-md) !important; }/* ---- 7. PERFORMANCE CARDS (Brand / Region) ------------------------------ */ #newdev-screen .performance-card { background: var(--color-surface) !important; border: var(--rule-hairline) !important; border-top: none !important; /* de-stacked top: the 2px ::before accent is the ONE top edge */ border-radius: var(--radius-md) !important; box-shadow: none !important; /* flat editorial — no drop shadow */ } #newdev-screen .performance-card:hover { transform: none !important; /* no hover lift */ box-shadow: none !important; border-color: var(--color-border) !important; }/* ONE accent: the Brand card (the story) carries the green hairline; the Region card stays neutral stone so green appears once. */ #newdev-screen .performance-card.brand-card::before { background: var(--gsb-shoot-green) !important; height: 2px !important; } #newdev-screen .performance-card.region-card::before { background: var(--gsb-stone) !important; height: 2px !important; } #newdev-screen .performance-card-header { background: transparent !important; border-bottom: none !important; /* de-stacked: the th hairline is the only divider */ } #newdev-screen .performance-card-header h3 { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 17px !important; color: var(--gsb-soil-ink) !important; letter-spacing: var(--tracking-tight) !important; } #newdev-screen .performance-card-subtitle { font-family: var(--font-mono) !important; color: var(--gsb-stone) !important; }/* Inset the summary tables from the card edges so rows (incl. the dark ALL-row) don't run flush to the card border — matches the header's inset. */ #newdev-screen #newdev-brand-summary-container, #newdev-screen #newdev-region-summary-container { padding: 0 12px 12px !important; }/* Tables inside cards */ #newdev-screen .performance-card th { font-family: var(--font-mono) !important; color: var(--gsb-stone) !important; letter-spacing: var(--tracking-label) !important; border-bottom: 1px solid var(--gsb-oat) !important; /* single hairline divider */ background: transparent !important; } #newdev-screen .performance-card td { color: var(--gsb-soil-ink) !important; border-bottom: var(--rule-hairline) !important; } #newdev-screen .performance-card tr:hover td { background-color: var(--gsb-oat) !important; }/* Summary rows (ALL BRANDS / ALL REGIONS): the "night" reverse surface. On dark, text is paper and the accent becomes leaf. */ #newdev-screen tr[data-filter-brand="All"] td, #newdev-screen tr[data-filter-region="All"] td { background: var(--gsb-soil-ink) !important; color: var(--gsb-paper) !important; border-bottom-color: rgba(243, 238, 227, 0.12) !important; } #newdev-screen tr[data-filter-brand="All"]:hover td, #newdev-screen tr[data-filter-region="All"]:hover td { background: var(--gsb-espresso) !important; }/* ---- 8. PANELS (calendar, non-comp, KPI, charts, exception lists) ------- */ #newdev-screen #newdev-calendar-panel, #newdev-screen #newdev-noncomp-panel, #newdev-screen #newdev-zerocy-panel, #newdev-screen #newdev-unbudgeted-panel, #newdev-screen #newdev-variance-chart-wrap, #newdev-screen [id^="newdev-"][id$="-panel"] { background: var(--color-surface) !important; border: var(--rule-hairline) !important; border-radius: var(--radius-md) !important; box-shadow: none !important; /* flat */ } #newdev-screen .panel-header { background: transparent !important; border-bottom: 1px solid var(--gsb-oat) !important; /* single hairline */ } #newdev-screen .panel-header h3, #newdev-screen .panel-header .panel-title { font-family: var(--font-display) !important; font-weight: 400 !important; color: var(--gsb-soil-ink) !important; letter-spacing: var(--tracking-tight) !important; }/* Chart titles */ #newdev-screen #newdev-chart-title { font-family: var(--font-display) !important; font-weight: 400 !important; color: var(--gsb-soil-ink) !important; letter-spacing: var(--tracking-tight) !important; }/* ---- 9. DELTA SEMANTICS (color-blind-safe: glyph + sign + color) -------- *//* The JS emits inline colored deltas. These classes/attrs catch the common ones; JS edits (below, in newdev-app.js) handle the rest. Positive = shoot green, negative = clay (NEVER red), watch/flat = ochre. */ #newdev-screen .delta-pos, #newdev-screen [data-delta="pos"], #newdev-screen .positive { color: var(--gsb-shoot-green) !important; } #newdev-screen .delta-neg, #newdev-screen [data-delta="neg"], #newdev-screen .negative { color: var(--gsb-clay) !important; } #newdev-screen .delta-flat, #newdev-screen [data-delta="flat"], #newdev-screen .watch { color: var(--gsb-ochre) !important; }/* ---- 10. GENERIC HEADINGS / KPI CARDS ----------------------------------- */ #newdev-screen #newdev-kpi-cards { font-family: var(--font-body) !important; }/* Tame the legacy "lift on hover" everywhere — editorial brand sits flat. */ #newdev-screen .newdev-glass-toolbar-panel:hover { transform: none !important; }/* ============================================================================ 11. BUDGET CALENDAR HEATMAP (desktop grid) beat = shoot green · miss = clay · holiday = ochre · today/future = stone ============================================================================ */ #newdev-screen .newdev-cal-table th, #period-insights-screen .newdev-cal-table th { font-family: var(--font-mono) !important; color: var(--gsb-stone) !important; background: var(--gsb-oat) !important; border: var(--rule-hairline) !important; border-radius: var(--radius-sm) !important; } #newdev-screen .newdev-cal-table td, #period-insights-screen .newdev-cal-table td { background: var(--color-surface) !important; border: var(--rule-hairline) !important; border-radius: var(--radius-md) !important; } #newdev-screen .newdev-cal-table td.newdev-cal-cell:hover, #period-insights-screen .newdev-cal-table td.newdev-cal-cell:hover, #newdev-screen .newdev-cal-table td.newdev-cal-wtd:hover, #period-insights-screen .newdev-cal-table td.newdev-cal-wtd:hover { transform: none !important; box-shadow: var(--shadow-md) !important; }/* WTD summary column (LAST column) — hairline left separator + oat tint so it reads as a summary, distinct from the white Mon–Sun weekday tiles. */ #newdev-screen .newdev-cal-table th:last-child, #period-insights-screen .newdev-cal-table th:last-child, #newdev-screen .newdev-cal-table td:last-child, #period-insights-screen .newdev-cal-table td:last-child { border-left: 1px solid rgba(34, 30, 24, 0.14) !important; padding-left: 10px !important; } #newdev-screen .newdev-cal-table th:last-child, #period-insights-screen .newdev-cal-table th:last-child { background: rgba(232, 224, 209, 0.95) !important; } #newdev-screen .newdev-cal-table td:last-child, #period-insights-screen .newdev-cal-table td:last-child { background: var(--gsb-oat) !important; } #newdev-screen .newdev-cal-cell .cal-date { color: var(--gsb-stone) !important; font-family: var(--font-mono) !important; } #newdev-screen .newdev-cal-cell .cal-actual { color: var(--gsb-soil-ink) !important; } #newdev-screen .newdev-cal-cell .cal-budget { color: var(--gsb-stone) !important; }/* Beat budget → shoot green */ #newdev-screen .newdev-cal-cell.beat-budget { background: rgba(47, 107, 69, 0.05) !important; border-color: rgba(47, 107, 69, 0.20) !important; border-left: 4px solid rgba(47, 107, 69, 0.7) !important; } #newdev-screen .newdev-cal-cell.beat-budget-strong { background: rgba(47, 107, 69, 0.10) !important; border-color: rgba(47, 107, 69, 0.30) !important; border-left: 5px solid var(--gsb-shoot-green) !important; }/* Miss budget → clay (never red) */ #newdev-screen .newdev-cal-cell.miss-budget { background: rgba(181, 83, 46, 0.05) !important; border-color: rgba(181, 83, 46, 0.20) !important; border-left: 4px solid rgba(181, 83, 46, 0.7) !important; } #newdev-screen .newdev-cal-cell.miss-budget-strong { background: rgba(181, 83, 46, 0.10) !important; border-color: rgba(181, 83, 46, 0.30) !important; border-left: 5px solid var(--gsb-clay) !important; }/* Holiday → ochre dashed */ #newdev-screen .newdev-cal-cell.holiday { border: 1px dashed var(--gsb-ochre) !important; border-left: 4px dashed var(--gsb-ochre) !important; background-image: linear-gradient(135deg, rgba(185, 139, 50, 0.07) 0%, transparent 60%) !important; } #newdev-screen .newdev-cal-cell.holiday.beat-budget { border-left: 4px solid rgba(47, 107, 69, 0.7) !important; } #newdev-screen .newdev-cal-cell.holiday.beat-budget-strong { border-left: 5px solid var(--gsb-shoot-green) !important; } #newdev-screen .newdev-cal-cell.holiday.miss-budget { border-left: 4px solid rgba(181, 83, 46, 0.7) !important; } #newdev-screen .newdev-cal-cell.holiday.miss-budget-strong { border-left: 5px solid var(--gsb-clay) !important; }/* Comp-shadow + holiday "LY" flags → ochre */ #newdev-screen .cal-comp-shadow-flag, #newdev-screen .flash-cal-shadow { color: var(--gsb-ochre) !important; background: rgba(185, 139, 50, 0.10) !important; border: 1px dashed var(--gsb-ochre) !important; }/* Selected day → green outline (was blue) */ #newdev-screen .newdev-cal-cell.selected, #newdev-screen td.newdev-cal-cell.selected { outline: 2px solid var(--gsb-shoot-green) !important; box-shadow: 0 0 10px rgba(47, 107, 69, 0.22) !important; }/* Today badge → ink */ #newdev-screen .newdev-cal-cell.today { border: 1px dashed var(--gsb-stone) !important; }/* ============================================================================ 12. MOBILE SALES FLASH (hero, holdings, accordion, chips, controls) These live inside max-width media queries in style.css; our later-loaded !important rules win below the breakpoint and are inert above it. pos = shoot green · neg = clay · muted = stone ============================================================================ *//* Hero glance card */ #newdev-screen .flash-hero { background: var(--color-surface) !important; color: var(--gsb-soil-ink) !important; border: var(--rule-hairline) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; } #newdev-screen .flash-hero-label { color: var(--gsb-stone) !important; font-family: var(--font-mono) !important; } #newdev-screen .flash-hero-scope { background: rgba(47, 107, 69, 0.08) !important; color: var(--gsb-shoot-green) !important; border: 1px solid rgba(47, 107, 69, 0.25) !important; }/* Three-up metric glance (Sales / Traffic / Check) — the selected cell drives the list */ #newdev-screen .flash-hero-metrics { gap: var(--space-2, 6px) !important; } #newdev-screen .flash-metric.active { background: var(--color-surface) !important; border-color: var(--gsb-oat) !important; } #newdev-screen .flash-metric-k { color: var(--gsb-stone) !important; font-family: var(--font-mono) !important; } #newdev-screen .flash-metric-v { color: var(--gsb-soil-ink) !important; font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: var(--tracking-tight) !important; } #newdev-screen .flash-metric-d.pos { background: rgba(47, 107, 69, 0.10) !important; color: var(--gsb-shoot-green) !important; } #newdev-screen .flash-metric-d.neg { background: rgba(181, 83, 46, 0.10) !important; color: var(--gsb-clay) !important; } #newdev-screen .flash-metric-d.muted { background: var(--gsb-oat) !important; color: var(--gsb-stone) !important; } #newdev-screen .flash-hero-vsnote { color: var(--gsb-stone) !important; font-family: var(--font-mono) !important; }/* Holdings list */ #newdev-screen .flash-holdings-empty { color: var(--gsb-stone) !important; } #newdev-screen .flash-hold { border-bottom: var(--rule-hairline) !important; } #newdev-screen .flash-hold-name { color: var(--gsb-soil-ink) !important; } #newdev-screen .flash-hold.lvl0 { background: var(--gsb-oat) !important; } #newdev-screen .flash-hold.lvl0 .flash-hold-name { color: var(--gsb-soil-ink) !important; } #newdev-screen .flash-hold.flash-hold-child .flash-hold-name { color: var(--gsb-stone) !important; } #newdev-screen .flash-hold.flash-hold-child::before, #newdev-screen .flash-hold.lvl2.flash-hold-sub-deep::before { background: var(--gsb-oat-dk) !important; } #newdev-screen .flash-hold.lvl2 .flash-hold-name { color: var(--gsb-stone) !important; } #newdev-screen .flash-hold-amt { color: var(--gsb-soil-ink) !important; } /* Unit count + NON-COMP tag inside a mobile holdings card name — mirrors the desktop .sf-unitcount / .sf-nc treatment; explicit weight/size so lvl0's bold-uppercase name styling doesn't inherit onto them. */ #newdev-screen .flash-hold-name .flash-hold-count { font-family: var(--font-mono) !important; font-size: 10px; font-weight: 500; letter-spacing: 0; color: var(--gsb-stone) !important; margin-left: 5px; } #newdev-screen .flash-hold-name .flash-hold-nc { font-family: var(--font-mono) !important; font-size: 8.5px; font-weight: 500; color: var(--gsb-clay) !important; letter-spacing: 0.05em; margin-left: 4px; } #newdev-screen .flash-hold-pill.pos { color: var(--gsb-shoot-green) !important; background: rgba(47, 107, 69, 0.10) !important; } #newdev-screen .flash-hold-pill.neg { color: var(--gsb-clay) !important; background: rgba(181, 83, 46, 0.10) !important; } #newdev-screen .flash-hold-pill.muted { color: var(--gsb-stone) !important; background: var(--gsb-oat) !important; } #newdev-screen .flash-hold-chev { color: var(--gsb-stone) !important; } #newdev-screen .flash-hold.open .flash-hold-chev { color: var(--gsb-soil-ink) !important; } #newdev-screen .flash-hold-detail { background: var(--gsb-paper) !important; } #newdev-screen .flash-hold-dlabel { color: var(--gsb-stone) !important; font-family: var(--font-mono) !important; } #newdev-screen .flash-hold-damt { color: var(--gsb-soil-ink) !important; } #newdev-screen .flash-hold-dpill.pos { color: var(--gsb-shoot-green) !important; } #newdev-screen .flash-hold-dpill.neg { color: var(--gsb-clay) !important; } #newdev-screen .flash-hold-dpill.muted { color: var(--gsb-stone) !important; }/* Mobile calendar accordion */ #newdev-screen .flash-cal-period { border: var(--rule-hairline) !important; background: var(--color-surface) !important; } #newdev-screen .flash-cal-period.current { border-color: var(--gsb-shoot-green) !important; box-shadow: 0 0 0 1px rgba(47, 107, 69, 0.2) !important; } #newdev-screen .flash-cal-week-hd { background: var(--gsb-oat) !important; border-top: var(--rule-hairline) !important; } #newdev-screen .flash-cal-chev { color: var(--gsb-stone) !important; } #newdev-screen .flash-cal-pname { color: var(--gsb-soil-ink) !important; } #newdev-screen .flash-cal-wname { color: var(--gsb-soil-ink) !important; } #newdev-screen .flash-cal-now { background: var(--gsb-shoot-green) !important; color: var(--gsb-paper) !important; } #newdev-screen .flash-cal-prange, #newdev-screen .flash-cal-wrange, #newdev-screen .flash-cal-vs, #newdev-screen .flash-cal-dcomp { color: var(--gsb-stone) !important; } #newdev-screen .flash-cal-amt, #newdev-screen .flash-cal-dval { color: var(--gsb-soil-ink) !important; } #newdev-screen .flash-cal-dname { color: var(--gsb-stone) !important; } #newdev-screen .flash-cal-chip.pos { color: var(--gsb-shoot-green) !important; background: rgba(47, 107, 69, 0.10) !important; } #newdev-screen .flash-cal-chip.neg { color: var(--gsb-clay) !important; background: rgba(181, 83, 46, 0.10) !important; } #newdev-screen .flash-cal-chip.muted { color: var(--gsb-stone) !important; background: var(--gsb-oat) !important; } #newdev-screen .flash-cal-chip3.pos { color: var(--gsb-shoot-green) !important; } #newdev-screen .flash-cal-chip3.neg { color: var(--gsb-clay) !important; } #newdev-screen .flash-cal-chip3.muted { color: var(--gsb-stone) !important; background: rgba(232, 224, 209, 0.7) !important; } #newdev-screen .flash-cal-prog { background: var(--gsb-oat) !important; }/* Width/style/top border stay theme-enforced, but the per-day accent (border-left-color) and the green/red performance fill (background) are set INLINE by renderCalendarMobile — leave those overridable (no !important) so they show on mobile like the desktop grid. */ #newdev-screen .flash-cal-day { border-left-width: 4px !important; border-left-style: solid !important; border-left-color: var(--gsb-oat); border-top: var(--rule-hairline) !important; background: var(--color-surface); } #newdev-screen .flash-cal-day.selected { background: rgba(47, 107, 69, 0.06) !important; outline: 2px solid var(--gsb-shoot-green) !important; }/* Mobile controls panel + venue pill + chart toggle */ #newdev-screen .newdev-controls-panel { background: var(--color-surface) !important; border: var(--rule-hairline) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; } #newdev-screen .newdev-controls-panel .newdev-control-label { color: var(--gsb-stone) !important; font-family: var(--font-mono) !important; } #newdev-screen #newdev-chart-toggle { background: var(--gsb-oat) !important; border: none !important; box-shadow: none !important; } #newdev-screen #newdev-chart-toggle button { color: var(--gsb-stone) !important; background: transparent !important; border: none !important; box-shadow: none !important; } #newdev-screen #newdev-chart-toggle button.active { background: var(--gsb-soil-ink) !important; color: var(--gsb-paper) !important; box-shadow: none !important; }/* Focus rings → shoot green */ #newdev-screen .flash-hold-row:focus-visible, #newdev-screen .flash-cal-day:focus-visible, #newdev-screen .flash-cal-period-hd:focus-visible, #newdev-screen .flash-cal-week-hd:focus-visible, #newdev-screen .flash-metric:focus-visible { outline: 2px solid var(--gsb-shoot-green) !important; }/* ---- Daily Flash slim bar (between command bar and brand/region tables) ---- *//* Container mirrors .newdev-command-bar (white surface card on paper). */ #newdev-screen .daily-flash-bar, #period-insights-screen .daily-flash-bar { margin:0 0 var(--space-3); background:var(--color-surface); border:var(--rule-hairline); border-radius:var(--radius-lg); box-shadow:none; overflow:hidden; } #newdev-screen .dff-header, #period-insights-screen .dff-header { display:flex; align-items:center; gap:var(--space-2); width:100%; min-height:36px; padding:0 var(--space-3); background:transparent; border:0; font-family:var(--font-body); color:var(--gsb-soil-ink); cursor:pointer; text-align:left; } #newdev-screen .dff-chev, #period-insights-screen .dff-chev { font-size:10px; color:var(--gsb-stone); transition:transform var(--motion-base) var(--ease-out); flex:0 0 auto; } #newdev-screen .dff-header[aria-expanded="true"] .dff-chev, #period-insights-screen .dff-header[aria-expanded="true"] .dff-chev { transform:rotate(90deg); }/* "DAILY FLASH" label = mono uppercase, matching .cmdbar-label */ #newdev-screen .dff-label, #period-insights-screen .dff-label { font-family:var(--font-mono); font-weight:500; font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); flex:0 0 auto; } #newdev-screen .dff-date, #period-insights-screen .dff-date { font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--gsb-stone); flex:0 0 auto; } #newdev-screen .dff-headline, #period-insights-screen .dff-headline { font-family:var(--font-body); font-size:12px; color:var(--gsb-soil-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } #newdev-screen .dff-spacer, #period-insights-screen .dff-spacer { flex:1 1 auto; } #newdev-screen .dff-badge, #period-insights-screen .dff-badge { font-family:var(--font-mono); font-size:12px; font-weight:500; flex:0 0 auto; } #newdev-screen .dff-badge.pos, #period-insights-screen .dff-badge.pos { color:var(--gsb-shoot-green); }/* growth/beat */ #newdev-screen .dff-badge.neg, #period-insights-screen .dff-badge.neg { color:var(--gsb-clay); }/* decline — clay, never red */ #newdev-screen .dff-body, #period-insights-screen .dff-body { border-top:var(--rule-hairline); padding:var(--space-3) var(--space-4); max-height:440px; overflow:auto; }/* Period Flash is a once-per-period deep read ("fine financial broadsheet"), not a quick daily glance — the 440px cap above is right for the Daily bar's short preview but was silently squeezing the whole period brief (headline through every exhibit table) into its own tiny inner scrollbar. Let it flow in the page instead; the outer page scroll is the only scroll. */ #newdev-screen .pff-bar .dff-body, #period-insights-screen .pff-bar .dff-body { max-height:none; overflow:visible; } #newdev-screen .dff-md, #period-insights-screen .dff-md { font-family:var(--font-body); font-size:12.5px; line-height:1.4; color:var(--gsb-soil-ink); } #newdev-screen .dff-md > p, #period-insights-screen .dff-md > p { margin:0 0 var(--space-2); font-size:var(--fs-caption); color:var(--gsb-stone); } #newdev-screen .dff-md strong, #period-insights-screen .dff-md strong { font-weight:600; } #newdev-screen .dff-md em, #period-insights-screen .dff-md em { font-style:italic; color:var(--gsb-stone); }/* --- scorecard chip row (deterministic, from pack.company) --- */ #newdev-screen .dff-chips, #period-insights-screen .dff-chips { display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-3); padding-bottom:var(--space-2); border-bottom:var(--rule-hairline); } #newdev-screen .dff-chip-kpi, #period-insights-screen .dff-chip-kpi { display:inline-flex; align-items:baseline; gap:5px; font-family:var(--font-mono); font-size:var(--fs-caption); padding:3px 9px; border-radius:var(--radius-sm); border:1px solid color-mix(in srgb, currentColor 28%, transparent); background:color-mix(in srgb, currentColor 7%, transparent); } #newdev-screen .dff-chip-kpi .k, #period-insights-screen .dff-chip-kpi .k { text-transform:uppercase; letter-spacing:var(--tracking-label); font-size:10px; color:var(--gsb-stone); } #newdev-screen .dff-chip-kpi .v, #period-insights-screen .dff-chip-kpi .v { font-weight:700; } #newdev-screen .dff-chip-kpi.pos, #period-insights-screen .dff-chip-kpi.pos { color:var(--gsb-shoot-green); } #newdev-screen .dff-chip-kpi.neg, #period-insights-screen .dff-chip-kpi.neg { color:var(--gsb-clay); }/* --- section blocks + chip labels + left accent --- */ #newdev-screen .dff-section, #period-insights-screen .dff-section { position:relative; border-left:2px solid var(--gsb-stone); padding:0 0 0 var(--space-3); margin:0 0 var(--space-3); } #newdev-screen .dff-section[data-section="bottom-line"], #period-insights-screen .dff-section[data-section="bottom-line"] { border-left-color:var(--gsb-shoot-green); } #newdev-screen .dff-section[data-section="watch"], #period-insights-screen .dff-section[data-section="watch"], #newdev-screen .dff-section[data-section="spotlights"], #period-insights-screen .dff-section[data-section="spotlights"] { border-left-color:var(--gsb-ochre); } #newdev-screen .dff-section-chip, #period-insights-screen .dff-section-chip { display:inline-block; font-family:var(--font-mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); background:var(--gsb-oat); padding:2px 7px; border-radius:var(--radius-sm); margin:0 0 var(--space-1); }/* --- bullets: tight, dot marker, bold lead → muted detail --- */ #newdev-screen .dff-md ul, #period-insights-screen .dff-md ul { margin:0; padding:0; list-style:none; } #newdev-screen .dff-md li, #period-insights-screen .dff-md li { position:relative; margin:0 0 var(--space-2); padding-left:15px; line-height:1.4; } #newdev-screen .dff-md li::before, #period-insights-screen .dff-md li::before { content:""; position:absolute; left:1px; top:0.5em; width:4px; height:4px; border-radius:50%; background:var(--gsb-stone); opacity:0.45; } #newdev-screen .dff-md .dff-lead, #period-insights-screen .dff-md .dff-lead { font-weight:600; color:var(--gsb-soil-ink); margin-right:5px; } #newdev-screen .dff-md .dff-rest, #period-insights-screen .dff-md .dff-rest { color:var(--gsb-stone); } #newdev-screen .dff-md .dff-rest strong, #period-insights-screen .dff-md .dff-rest strong { color:var(--gsb-soil-ink); font-weight:600; }/* --- inline directional numbers --- */ #newdev-screen .dff-md .dff-num, #period-insights-screen .dff-md .dff-num { font-family:var(--font-mono); font-weight:600; } #newdev-screen .dff-md .dff-num.pos, #period-insights-screen .dff-md .dff-num.pos { color:var(--gsb-shoot-green); } #newdev-screen .dff-md .dff-num.neg, #period-insights-screen .dff-md .dff-num.neg { color:var(--gsb-clay); }/* --- Period Insights taxonomy tag pills ([CHRONIC], [RATE STEP-UP], …) — uppercase mono kicker, ~10% tinted fill; tone by severity: clay = structural miss, ochre = watch, stone = neutral --- */ #newdev-screen .dff-md .dff-tag, #period-insights-screen .dff-md .dff-tag { display:inline-block; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; line-height:1; padding:3px 6px 2px; border-radius:2px; vertical-align:1px; margin-right:6px; white-space:nowrap; } #newdev-screen .dff-md .dff-tag--clay, #period-insights-screen .dff-md .dff-tag--clay { color:var(--gsb-clay); background:rgba(181,83,46,0.10); border:1px solid rgba(181,83,46,0.28); } #newdev-screen .dff-md .dff-tag--ochre, #period-insights-screen .dff-md .dff-tag--ochre { color:#8A6420; background:rgba(185,139,50,0.12); border:1px solid rgba(185,139,50,0.32); } #newdev-screen .dff-md .dff-tag--stone, #period-insights-screen .dff-md .dff-tag--stone { color:var(--gsb-stone); background:rgba(111,105,91,0.10); border:1px solid rgba(111,105,91,0.26); }/* Field note (the education bullet) reads as an aside, not a finding */ #newdev-screen .dff-md .dff-section[data-section="field-note"] .dff-rest, #period-insights-screen .dff-md .dff-section[data-section="field-note"] .dff-rest { font-style:italic; }/* --- context demoted to a muted footnote --- */ #newdev-screen .dff-context, #period-insights-screen .dff-context { font-size:var(--fs-caption); color:var(--gsb-stone); font-style:italic; line-height:1.4; margin-top:var(--space-1); padding-top:var(--space-2); border-top:var(--rule-hairline); } #newdev-screen .dff-context .dff-section-chip, #period-insights-screen .dff-context .dff-section-chip { display:none; } #newdev-screen .dff-context ul, #period-insights-screen .dff-context ul { margin:0; } #newdev-screen .dff-context li::before, #period-insights-screen .dff-context li::before { display:none; } #newdev-screen .dff-context li, #period-insights-screen .dff-context li { padding-left:0; }/* ============================================================================ PERIOD FINANCIAL FLASH bar (.pff-*) — period-anchored sibling of the daily bar. Reuses .daily-flash-bar + .dff-* (body, chips, sections, bullets) so the P&L brief inherits all the mobile + desktop-grid + tier styling for free. Only the chrome (ink top-rule, taller header, period dateline, glance cluster, period selector) is period-specific. Mobile-first: the glance cluster is hidden until ≥720px. ============================================================================ */ #newdev-screen .pff-bar, #period-insights-screen .pff-bar { border-top:var(--rule-ink); }/* heavier top rule distinguishes it from the daily bar *//* .daily-flash-bar's overflow:hidden (shared with the Daily bar) exists only to clip the card's border-radius — nothing inside has a contrasting background that would poke past the rounded corners — but it also silently defeats position:sticky on .pff-rail. Scoped to Period Flash only so the Daily bar's clipping is untouched. */ #newdev-screen .pff-bar, #period-insights-screen .pff-bar { overflow:visible; } #newdev-screen .pff-header, #period-insights-screen .pff-header { min-height:44px; }/* taller masthead — this is the monthly verdict */ #newdev-screen .pff-period, #period-insights-screen .pff-period { font-family:var(--font-mono); font-size:var(--fs-caption); font-weight:500; color:var(--gsb-soil-ink); letter-spacing:var(--tracking-label); flex:0 0 auto; }/* desktop-only "glance" cluster (EBITDA $ / margin) — hidden on phones to keep the collapsed bar clean */ #newdev-screen .pff-glance, #period-insights-screen .pff-glance { display:none; align-items:baseline; gap:var(--space-3); flex:0 0 auto; margin-right:var(--space-2); } #newdev-screen .pff-glance .pff-g, #period-insights-screen .pff-glance .pff-g { display:inline-flex; align-items:baseline; gap:4px; } #newdev-screen .pff-glance .pff-g .k, #period-insights-screen .pff-glance .pff-g .k { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); } #newdev-screen .pff-glance .pff-g .v, #period-insights-screen .pff-glance .pff-g .v { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--gsb-soil-ink); }/* period selector — horizontally scrollable on narrow screens, ≥36px touch targets */ #newdev-screen .pff-seg, #period-insights-screen .pff-seg { display:flex; gap:var(--space-1); margin:0 0 var(--space-3); padding-bottom:var(--space-2); border-bottom:var(--rule-hairline); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } #newdev-screen .pff-seg-btn, #period-insights-screen .pff-seg-btn { flex:0 0 auto; min-width:44px; min-height:32px; padding:4px 10px; cursor:pointer; font-family:var(--font-mono); font-size:var(--fs-caption); font-weight:500; letter-spacing:var(--tracking-label); color:var(--gsb-stone); background:var(--color-surface); border:var(--rule-hairline); border-radius:var(--radius-sm); transition:background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); } #newdev-screen .pff-seg-btn:hover, #period-insights-screen .pff-seg-btn:hover { color:var(--gsb-soil-ink); border-color:var(--gsb-stone); } #newdev-screen .pff-seg-btn.active, #period-insights-screen .pff-seg-btn.active { color:var(--gsb-paper); background:var(--gsb-shoot-green); border-color:var(--gsb-shoot-green); } #newdev-screen .pff-header:focus-visible, #period-insights-screen .pff-header:focus-visible, #newdev-screen .pff-seg-btn:focus-visible, #period-insights-screen .pff-seg-btn:focus-visible { outline:2px solid var(--gsb-shoot-green); outline-offset:-2px; } @media (min-width:720px){ #newdev-screen .pff-glance, #period-insights-screen .pff-glance { display:inline-flex; }/* reveal the glance cluster on tablet/desktop */}/* --- 2-column grid on wide screens (big height cut) --- */ @media (min-width:880px){/* grid-auto-flow:dense backfills the right column into the top row so left/right sections top-align (sparse placement was pushing Spotlights/Connections down a row). */ #newdev-screen .dff-md, #period-insights-screen .dff-md { display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:dense; gap:0 var(--space-4); align-items:start; } #newdev-screen .dff-md > p, #period-insights-screen .dff-md > p, #newdev-screen .dff-chips, #period-insights-screen .dff-chips, #newdev-screen .dff-context, #period-insights-screen .dff-context { grid-column:1 / -1; } #newdev-screen .dff-section[data-section="bottom-line"], #period-insights-screen .dff-section[data-section="bottom-line"], #newdev-screen .dff-section[data-section="watch"], #period-insights-screen .dff-section[data-section="watch"] { grid-column:1; } #newdev-screen .dff-section[data-section="spotlights"], #period-insights-screen .dff-section[data-section="spotlights"], #newdev-screen .dff-section[data-section="connections"], #period-insights-screen .dff-section[data-section="connections"] { grid-column:2; } /* Phase-2 fix: masthead + footer chrome are direct grid children — pin them full-width so the tape/heat-strip stop landing in opposite columns and dense-flow stops backfilling sections above the lede. New sections get explicit columns (menu-mix/field-note left, steady right). 2026-07-11: added .dff-bustrip-cap + .dff-footbar — they were missing from this list, so dense flow packed Movers beside the stranded caption (400px+ blank gap in column 1) and pulled the breadth meter away from the footer ledger it labels. */ #newdev-screen .dff-tape, #period-insights-screen .dff-tape, #newdev-screen .dff-bustrip-cap, #period-insights-screen .dff-bustrip-cap, #newdev-screen .dff-bustrip, #period-insights-screen .dff-bustrip, #newdev-screen .dff-mhmeta, #period-insights-screen .dff-mhmeta, #newdev-screen .dff-landing, #period-insights-screen .dff-landing, #newdev-screen .dff-footbar, #period-insights-screen .dff-footbar, #newdev-screen .dff-footledger, #period-insights-screen .dff-footledger { grid-column:1 / -1; } #newdev-screen .dff-section[data-section="menu-mix"], #period-insights-screen .dff-section[data-section="menu-mix"], #newdev-screen .dff-section[data-section="field-note"], #period-insights-screen .dff-section[data-section="field-note"] { grid-column:1; } #newdev-screen .dff-section[data-section="steady"], #period-insights-screen .dff-section[data-section="steady"], #newdev-screen .dff-section[data-section="verdicts"], #period-insights-screen .dff-section[data-section="verdicts"], #newdev-screen .dff-section[data-section="other"], #period-insights-screen .dff-section[data-section="other"] { grid-column:2; }}/* ============================================================================ BREADTH TIERS — designed components (built client-side from pack data, not markdown). COLLAPSED by default so the at-rest view stays the clean exec brief; one click opens the full-portfolio detail. Full-width below the 2-col exec grid. Card design + sparklines per the world-class-designer swarm; written "Read" takeaway carries co-equal weight to the figures. ============================================================================ */ #newdev-screen .dff-tier, #period-insights-screen .dff-tier { grid-column:1 / -1; border-top:var(--rule-hairline); margin:0 0 var(--space-4); padding-top:var(--space-3); } #newdev-screen .dff-tier > summary, #period-insights-screen .dff-tier > summary { cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:8px; font-family:var(--font-mono); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-soil-ink); padding:3px 0; user-select:none; } #newdev-screen .dff-tier > summary::-webkit-details-marker, #period-insights-screen .dff-tier > summary::-webkit-details-marker { display:none; } #newdev-screen .dff-tier > summary::before, #period-insights-screen .dff-tier > summary::before { content:"▸"; font-size:9px; color:var(--gsb-stone); transition:transform var(--motion-base,180ms) var(--ease-out,ease); flex:0 0 auto; transform:translateY(-1px); } #newdev-screen .dff-tier[open] > summary::before, #period-insights-screen .dff-tier[open] > summary::before { transform:rotate(90deg) translateX(-1px); } #newdev-screen .dff-tier > summary:hover, #period-insights-screen .dff-tier > summary:hover { color:var(--gsb-shoot-green); } #newdev-screen .dff-tier .tier-sub, #period-insights-screen .dff-tier .tier-sub { font-family:var(--font-body); font-weight:400; text-transform:none; letter-spacing:0; font-size:var(--fs-caption); color:var(--gsb-stone); font-style:italic; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #newdev-screen .dff-tier .tier-rollup, #period-insights-screen .dff-tier .tier-rollup { font-family:var(--font-mono); font-size:11px; font-weight:600; flex:0 0 auto; } #newdev-screen .tier-body { padding-top:var(--space-3); } #newdev-screen .dff-md .num, #period-insights-screen .dff-md .num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; } #newdev-screen .dff-md .pos, #period-insights-screen .dff-md .pos { color:var(--gsb-shoot-green); } #newdev-screen .dff-md .neg, #period-insights-screen .dff-md .neg { color:var(--gsb-clay); } #newdev-screen .dff-md .mut, #period-insights-screen .dff-md .mut { color:var(--gsb-stone); } #newdev-screen .spk { vertical-align:middle; flex:0 0 auto; }/* ---- company scoreboard strip (board-grade context: period landing · YTD-to-plan · new-dev share) ---- */ #newdev-screen .dff-scoreboard, #period-insights-screen .dff-scoreboard { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); align-items:baseline; padding:var(--space-2) var(--space-3); margin:0 0 var(--space-3); background:var(--gsb-oat); border:var(--rule-hairline); border-radius:var(--radius-sm); } #newdev-screen .sb-item { display:flex; align-items:baseline; gap:6px; } #newdev-screen .sb-item .sk { font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); } #newdev-screen .sb-item .sv { font-family:var(--font-mono); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; } #newdev-screen .sb-item .ss { font-family:var(--font-mono); font-size:9.5px; color:var(--gsb-stone); font-variant-numeric:tabular-nums; } #newdev-screen .sb-item.watch .sv { font-family:var(--font-body); font-weight:600; font-size:11.5px; }/* ---- BU cards — composed two-up (kills the stretch: identity/stats | trends, snug inner columns) ---- */ #newdev-screen .bu-grid { display:grid; grid-template-columns:1fr; gap:var(--space-3); } @media(min-width:680px){ #newdev-screen .bu-grid { grid-template-columns:1fr 1fr; }} #newdev-screen .bu-card { background:var(--color-surface); border:var(--rule-hairline); border-radius:var(--radius-sm); border-left:3px solid var(--gsb-stone); display:grid; grid-template-columns:1fr; overflow:hidden; } #newdev-screen .bu-card.is-beat { border-left-color:var(--gsb-shoot-green); } #newdev-screen .bu-card.is-miss { border-left-color:var(--gsb-clay); } #newdev-screen .bu-card.is-watch { border-left-color:var(--gsb-ochre); } #newdev-screen .bu-card.is-flat { border-left-color:var(--gsb-stone); } #newdev-screen .bu-top { display:grid; grid-template-columns:1fr; gap:0; } @media(min-width:400px){ #newdev-screen .bu-top { grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); }} #newdev-screen .bu-left { padding:var(--space-3); } #newdev-screen .bu-right { padding:var(--space-3); border-top:var(--rule-hairline); } @media(min-width:420px){ #newdev-screen .bu-right { border-top:none; border-left:var(--rule-hairline); }} #newdev-screen .bu-head { display:flex; align-items:baseline; gap:var(--space-2); margin-bottom:var(--space-2); } #newdev-screen .bu-name { font-family:var(--font-display); font-weight:500; font-size:1.3rem; line-height:1; letter-spacing:-0.01em; color:var(--gsb-soil-ink); } #newdev-screen .bu-units { font-family:var(--font-mono); font-size:var(--fs-micro,10px); color:var(--gsb-stone); text-transform:uppercase; letter-spacing:0.06em; flex:0 0 auto; transform:translateY(-1px); } #newdev-screen .bu-verdict { display:inline-block; font-family:var(--font-mono); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; padding:2px 6px; border-radius:var(--radius-sm); white-space:nowrap; margin-bottom:var(--space-2); } #newdev-screen .bu-verdict.is-beat { color:var(--gsb-shoot-green); background:rgba(47,107,69,0.10); } #newdev-screen .bu-verdict.is-miss { color:var(--gsb-clay); background:rgba(181,83,46,0.10); } #newdev-screen .bu-verdict.is-watch { color:var(--gsb-ochre); background:rgba(185,139,50,0.12); } #newdev-screen .bu-verdict.is-flat { color:var(--gsb-stone); background:rgba(111,105,91,0.10); }/* per-BU traffic-vs-check diagnosis — routes the problem to the right exec */ #newdev-screen .bu-diag { font-family:var(--font-mono); font-size:9px; color:var(--gsb-stone); margin-bottom:var(--space-2); line-height:1.3; } #newdev-screen .bu-diag b { color:var(--gsb-soil-ink); font-weight:700; } #newdev-screen .bu-stats { display:flex; flex-direction:column; } #newdev-screen .bu-stat { display:grid; grid-template-columns:46px 1fr auto; align-items:baseline; gap:var(--space-2); padding:4px 0; border-top:var(--rule-hairline); } #newdev-screen .bu-stat:first-child { border-top:none; } #newdev-screen .bu-stat .k { font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); } #newdev-screen .bu-stat .v { font-family:var(--font-mono); font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; text-align:right; } #newdev-screen .bu-stat .sub { font-family:var(--font-mono); font-size:9.5px; color:var(--gsb-stone); font-variant-numeric:tabular-nums; text-align:right; min-width:46px; } #newdev-screen .bu-lens { display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; gap:6px; padding:var(--space-2) 0; } #newdev-screen .bu-lens + .bu-lens { border-top:var(--rule-hairline); } #newdev-screen .bu-lens .lens-label { font-family:var(--font-mono); font-size:8.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--gsb-stone); line-height:1.15; width:30px; } #newdev-screen .bu-lens.seq .lens-label { color:var(--gsb-sage,#3A4A3A); } #newdev-screen .bu-lens .lens-vals { display:flex; gap:var(--space-2); justify-content:flex-end; min-width:0; } #newdev-screen .lens-cell { display:flex; flex-direction:column; align-items:flex-end; } #newdev-screen .lens-cell .lk { font-family:var(--font-mono); font-size:8px; color:var(--gsb-stone); letter-spacing:0.03em; } #newdev-screen .lens-cell .lv { font-family:var(--font-mono); font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.15; white-space:nowrap; } #newdev-screen .lens-well { display:inline-flex; align-items:center; justify-content:center; width:38px; height:18px; border-radius:var(--radius-sm); flex:0 0 auto; } #newdev-screen .bu-lens.comp .lens-well { border:var(--rule-hairline); background:var(--color-surface); } #newdev-screen .bu-lens.seq .lens-well { background:var(--gsb-oat); } #newdev-screen .bu-bw { display:flex; flex-direction:column; gap:2px; font-family:var(--font-mono); font-size:10px; margin-top:var(--space-2); padding-top:var(--space-2); border-top:var(--rule-hairline); } #newdev-screen .bu-bw .bw-line { display:flex; align-items:baseline; gap:var(--space-2); } #newdev-screen .bu-bw .bw-k { color:var(--gsb-stone); text-transform:uppercase; letter-spacing:0.04em; font-size:8px; width:30px; flex:0 0 auto; } #newdev-screen .bu-bw .bw-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #newdev-screen .bu-bw .bw-v { font-variant-numeric:tabular-nums; flex:0 0 auto; } #newdev-screen .bu-weather { font-family:var(--font-mono); font-size:9px; color:var(--gsb-stone); margin-top:var(--space-2); padding-top:var(--space-2); border-top:var(--rule-hairline); line-height:1.35; } #newdev-screen .bu-weather .wk { text-transform:uppercase; letter-spacing:0.04em; color:var(--gsb-ochre); font-weight:600; }/* written takeaway — full-width pull-quote, co-equal weight with the figures */ #newdev-screen .bu-read { font-family:var(--font-display); font-style:italic; font-size:13.5px; line-height:1.5; color:var(--gsb-soil-ink); background:var(--gsb-oat); border-top:var(--rule-hairline); border-left:3px solid var(--gsb-shoot-green); padding:var(--space-3); } #newdev-screen .bu-card.is-miss .bu-read { border-left-color:var(--gsb-clay); } #newdev-screen .bu-card.is-watch .bu-read { border-left-color:var(--gsb-ochre); } #newdev-screen .bu-card.is-flat .bu-read { border-left-color:var(--gsb-stone); } #newdev-screen .bu-read .rk { display:block; font-family:var(--font-mono); font-style:normal; font-size:8px; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); margin-bottom:3px; }/* period-outlook block (atop pace tier) + region-gap mini-bars (in accountability) */ #newdev-screen .outlook { background:var(--color-surface); border:var(--rule-hairline); border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); margin-bottom:var(--space-3); } #newdev-screen .outlook .ol-head { font-family:var(--font-display); font-size:15px; font-weight:500; margin-bottom:2px; } #newdev-screen .outlook .ol-sub { font-family:var(--font-mono); font-size:9.5px; color:var(--gsb-stone); margin-bottom:var(--space-2); } #newdev-screen .outlook .ol-cohorts { font-family:var(--font-mono); font-size:10px; color:var(--gsb-stone); line-height:1.5; } #newdev-screen .conc-line { font-family:var(--font-mono); font-size:10.5px; color:var(--gsb-soil-ink); margin-bottom:var(--space-3); line-height:1.4; } #newdev-screen .conc-line b { font-weight:700; } #newdev-screen .rgap { display:flex; flex-direction:column; gap:3px; margin-top:var(--space-2); } #newdev-screen .rgap-row { display:grid; grid-template-columns:104px 1fr 52px; align-items:center; gap:var(--space-2); } #newdev-screen .rgap-row .rn { font-family:var(--font-body); font-size:10.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #newdev-screen .rgap-track { position:relative; height:10px; display:flex; align-items:center; } #newdev-screen .rgap-track::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--color-border); } #newdev-screen .rgap-bar { position:absolute; height:8px; border-radius:1px; } #newdev-screen .rgap-bar.pos { background:var(--gsb-shoot-green); left:50%; } #newdev-screen .rgap-bar.neg { background:var(--gsb-clay); right:50%; } #newdev-screen .rgap-row .rv { font-family:var(--font-mono); font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; } #newdev-screen .nd-headline { font-family:var(--font-mono); font-size:11px; color:var(--gsb-soil-ink); margin:0 0 var(--space-2); } #newdev-screen .nd-headline b { font-weight:700; font-size:14px; } #newdev-screen .lp-cap { font-family:var(--font-body); font-size:var(--fs-caption,11px); font-style:italic; color:var(--gsb-stone); margin:0 0 var(--space-2); line-height:1.35; } #newdev-screen .board-cap { font-family:var(--font-body); font-size:var(--fs-caption,11px); color:var(--gsb-stone); margin:0 0 var(--space-2); line-height:1.4; } #newdev-screen .board-cap b { color:var(--gsb-soil-ink); font-weight:700; }/* ---- brand board (aligned table) ---- */ #newdev-screen .board-wrap { overflow-x:auto; } #newdev-screen table.board { width:100%; min-width:0; border-collapse:collapse; } #newdev-screen table.board th { font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:0.05em; color:var(--gsb-stone); font-weight:600; text-align:right; padding:3px 6px; border-bottom:1.5px solid var(--gsb-soil-ink); white-space:nowrap; } #newdev-screen table.board th.l { text-align:left; } #newdev-screen table.board td { font-family:var(--font-mono) !important; font-size:11.5px; padding:5px 6px; border-bottom:var(--rule-hairline); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } #newdev-screen table.board td.l { text-align:left; font-weight:600; } #newdev-screen table.board td.brand { font-family:var(--font-display) !important; font-size:13px; font-weight:500; text-align:left; letter-spacing:-0.01em; } #newdev-screen table.board td .u { font-family:var(--font-mono); font-size:9px; color:var(--gsb-stone); margin-left:5px; } #newdev-screen table.board tr:last-child td { border-bottom:none; } #newdev-screen .spark { display:inline-flex; align-items:center; gap:5px; justify-content:flex-end; } #newdev-screen .spark .bar { height:7px; border-radius:1px; display:inline-block; } #newdev-screen .spark .bar.pos { background:var(--gsb-shoot-green); } #newdev-screen .spark .bar.neg { background:var(--gsb-clay); } #newdev-screen .spark .bar.zero { width:2px; background:var(--gsb-stone); opacity:.5; }/* ---- new developments ---- */ #newdev-screen .note-banner { font-family:var(--font-body); font-size:var(--fs-caption); color:var(--gsb-stone); font-style:italic; line-height:1.4; margin:0 0 var(--space-3); padding-left:var(--space-2); border-left:2px solid var(--gsb-ochre); } #newdev-screen .acq-snap { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--space-3); background:var(--color-surface); border:var(--rule-hairline); border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); margin-bottom:var(--space-3); } #newdev-screen .acq-col { text-align:center; } #newdev-screen .acq-col .ak { font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:0.05em; color:var(--gsb-stone); } #newdev-screen .acq-col .av { font-family:var(--font-mono); font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; } #newdev-screen .acq-col .an { font-family:var(--font-mono); font-size:9px; color:var(--gsb-stone); } #newdev-screen .acq-delta { text-align:center; } #newdev-screen .acq-delta .d { font-family:var(--font-mono); font-size:16px; font-weight:700; } #newdev-screen .acq-delta .dl { font-family:var(--font-mono); font-size:8.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--gsb-stone); } #newdev-screen .vint-list { display:flex; flex-direction:column; gap:var(--space-1); } #newdev-screen .vint-row { display:grid; grid-template-columns:1.4fr 1fr 1fr; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); background:var(--color-surface); border:var(--rule-hairline); border-radius:var(--radius-sm); } #newdev-screen .vint-row .vname { font-family:var(--font-body); font-weight:600; font-size:11.5px; } #newdev-screen .vint-row .vname .vn-sub { display:block; font-family:var(--font-mono); font-size:8.5px; font-weight:400; color:var(--gsb-stone); text-transform:uppercase; letter-spacing:0.04em; } #newdev-screen .vint-metric { display:flex; flex-direction:column; align-items:flex-end; } #newdev-screen .vint-metric .mk { font-family:var(--font-mono); font-size:8px; text-transform:uppercase; letter-spacing:0.04em; color:var(--gsb-stone); } #newdev-screen .vint-metric .mv { font-family:var(--font-mono); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; } #newdev-screen .vint-metric .mn { font-family:var(--font-mono); font-size:8.5px; color:var(--gsb-stone); font-variant-numeric:tabular-nums; }/* ---- every store accounted for ---- */ #newdev-screen .acct-card { background:var(--color-surface); border:var(--rule-hairline); border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); } #newdev-screen .acct-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--space-2); } #newdev-screen .acct-head .ah-l { font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); } #newdev-screen .acct-head .ah-r { font-family:var(--font-mono); font-size:10px; color:var(--gsb-stone); } #newdev-screen .acct-bar { display:flex; height:26px; border-radius:var(--radius-sm); overflow:hidden; border:var(--rule-hairline); } #newdev-screen .acct-seg { display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10px; font-weight:700; color:#fff; min-width:24px; } #newdev-screen .acct-seg.beat { background:var(--gsb-shoot-green); } #newdev-screen .acct-seg.band { background:var(--gsb-oat-dk,#D8CFBA); color:var(--gsb-soil-ink); } #newdev-screen .acct-seg.miss { background:var(--gsb-clay); } #newdev-screen .acct-legend { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-2); font-family:var(--font-mono); font-size:9.5px; } #newdev-screen .acct-legend .lg { display:inline-flex; align-items:center; gap:5px; color:var(--gsb-stone); } #newdev-screen .acct-legend .sw { width:9px; height:9px; border-radius:1px; display:inline-block; } #newdev-screen .acct-legend .sw.beat { background:var(--gsb-shoot-green); } #newdev-screen .acct-legend .sw.band { background:var(--gsb-oat-dk,#D8CFBA); } #newdev-screen .acct-legend .sw.miss { background:var(--gsb-clay); } #newdev-screen .acct-legend b { color:var(--gsb-soil-ink); font-weight:700; } #newdev-screen .exc-grid { display:grid; grid-template-columns:1fr; gap:var(--space-3); margin-top:var(--space-3); } @media(min-width:680px){ #newdev-screen .exc-grid { grid-template-columns:1fr 1fr; }} #newdev-screen .exc-col h4 { margin:0 0 var(--space-1); font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:0.05em; color:var(--gsb-stone); font-weight:600; } #newdev-screen .exc-row { display:flex; align-items:baseline; gap:var(--space-2); padding:3px 0; border-bottom:var(--rule-hairline); } #newdev-screen .exc-row:last-child { border-bottom:none; } #newdev-screen .exc-row .ev { font-family:var(--font-body); font-size:11px; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #newdev-screen .exc-row .ev small { color:var(--gsb-stone); } #newdev-screen .exc-row .ep { font-family:var(--font-mono); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; flex:0 0 auto; } #newdev-screen .exc-row .ed { font-family:var(--font-mono); font-size:9px; color:var(--gsb-stone); flex:0 0 auto; font-variant-numeric:tabular-nums; }/* ---- labor & pace ---- */ #newdev-screen .lp-grid { display:grid; grid-template-columns:1fr; gap:var(--space-4); } @media(min-width:680px){ #newdev-screen .lp-grid { grid-template-columns:0.85fr 1.15fr; }} #newdev-screen .lp-block h4 { margin:0 0 var(--space-2); font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:0.05em; color:var(--gsb-stone); font-weight:600; } #newdev-screen .labor-row { display:grid; grid-template-columns:54px 1fr 40px; align-items:center; gap:var(--space-2); padding:3px 0; } #newdev-screen .labor-row .ln { font-family:var(--font-body); font-size:11px; font-weight:600; } #newdev-screen .labor-track { height:8px; background:var(--gsb-oat); border-radius:1px; position:relative; overflow:hidden; } #newdev-screen .labor-fill { height:100%; background:var(--gsb-sage,#3A4A3A); border-radius:1px; } #newdev-screen .labor-row .lpct { font-family:var(--font-mono); font-size:11px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; } #newdev-screen .pace-row { display:grid; grid-template-columns:90px 1fr 52px; align-items:center; gap:var(--space-2); padding:3px 0; } #newdev-screen .pace-row .pn { font-family:var(--font-body); font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #newdev-screen .pace-track { position:relative; height:14px; } #newdev-screen .pace-track::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--color-border); } #newdev-screen .pace-bar { position:absolute; top:3px; height:8px; border-radius:1px; } #newdev-screen .pace-bar.pos { background:var(--gsb-shoot-green); left:50%; } #newdev-screen .pace-bar.neg { background:var(--gsb-clay); right:50%; } #newdev-screen .pace-row .ppct { font-family:var(--font-mono); font-size:11px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; } #newdev-screen .pace-scale { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:8px; color:var(--gsb-stone); margin:0 0 2px 90px; padding-left:var(--space-2); } #newdev-screen .dff-md table, #period-insights-screen .dff-md table { min-width:0; width:100%; border-collapse:collapse; margin:var(--space-2) 0; } #newdev-screen .dff-md th, #period-insights-screen .dff-md th { font-family:var(--font-mono) !important; font-size:11px; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); text-align:left; padding:4px 8px; border-bottom:1px solid var(--gsb-oat); } #newdev-screen .dff-md td, #period-insights-screen .dff-md td { font-family:var(--font-mono) !important; font-size:12px; color:var(--gsb-soil-ink); padding:4px 8px; border-bottom:var(--rule-hairline); vertical-align:top; } #newdev-screen .dff-md.empty, #period-insights-screen .dff-md.empty { font-family:var(--font-body); color:var(--gsb-stone); font-style:italic; }/* ============================================================================ PERIOD FINANCIAL FLASH — expanded panel (.pff-* rich components) ADD to GSB/gsb-sales-flash.css. Scoped under #newdev-screen to out-specify the global bare table/td/th leak (style.css table{min-width:600px}; td{font-size:14px}). Does NOT touch the .dff-* prose classes (renderBriefMarkdown keeps emitting those). Reconcile with the existing .pff-bar/.pff-header/.pff-glance/.pff-seg block already in this file (~705-728): the masthead rules there stay; the rules below are the NEW expanded-panel components only. If a .pff-seg rule already exists, keep one definition — the segmented control below matches the mockup's oat-track/ink-pill. ============================================================================ *//* ---- period-flash design tokens (also add to gsb-tokens.css :root) ---- */ #newdev-screen .pff-panel, #period-insights-screen .pff-panel { --fs-figure:0.8125rem; --tint-pos:rgba(47,107,69,0.10); --tint-neg:rgba(181,83,46,0.10); --tint-watch:rgba(185,139,50,0.12); --data-onplan:var(--gsb-stone); --data-watch-text:#8A6420; --band:var(--gsb-oat); --stone-dk:#56514A; } #newdev-screen .pff-panel .gsb-tnum, #period-insights-screen .pff-panel .gsb-tnum, #newdev-screen .gsb-tnum, #period-insights-screen .gsb-tnum { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }/* ---- section kicker ---- */ #newdev-screen .pff-kicker, #period-insights-screen .pff-kicker { font-family:var(--font-mono); font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); margin:var(--space-5) 0 var(--space-3); padding-top:var(--space-3); border-top:var(--rule-hairline); } #newdev-screen .pff-panel > .pff-verdict:first-child + .pff-chips + .pff-kicker, #period-insights-screen .pff-panel > .pff-verdict:first-child + .pff-chips + .pff-kicker {} #newdev-screen .gsb-kw, #period-insights-screen .gsb-kw { color:var(--gsb-soil-ink); background:linear-gradient(transparent 58%,rgba(130,187,144,0.50) 58%); padding:0 2px; border-radius:1px; }/* ---- segmented control (oat track, ink pill) ---- */ #newdev-screen .pff-panel .pff-seg, #period-insights-screen .pff-panel .pff-seg { display:inline-flex; background:var(--gsb-oat); border:none; border-radius:6px; padding:3px; gap:2px; vertical-align:middle; } #newdev-screen .pff-panel .pff-seg button, #period-insights-screen .pff-panel .pff-seg button { border:none; background:transparent; color:var(--gsb-stone); font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:0.04em; padding:6px 14px; border-radius:4px; cursor:pointer; } #newdev-screen .pff-panel .pff-seg button.active, #period-insights-screen .pff-panel .pff-seg button.active { background:var(--gsb-soil-ink); color:var(--gsb-paper); font-weight:600; } #newdev-screen .pff-panel .pff-seg button:focus-visible, #period-insights-screen .pff-panel .pff-seg button:focus-visible { outline:2px solid var(--gsb-shoot-green); outline-offset:1px; } #newdev-screen .pff-panel .pff-seg-label, #period-insights-screen .pff-panel .pff-seg-label { font-family:var(--font-mono); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); margin:0 var(--space-2) 0 0; }/* ============================================================================ I. VERDICT (headline + deck) ============================================================================ */ #newdev-screen .pff-verdict, #period-insights-screen .pff-verdict { margin:0 0 var(--space-2); } #newdev-screen .pff-verdict-headline, #period-insights-screen .pff-verdict-headline { font-family:var(--font-display); font-weight:400; font-size:var(--fs-h2); line-height:var(--lh-heading); letter-spacing:var(--tracking-tight); color:var(--gsb-soil-ink); margin:0 0 var(--space-2); max-width:var(--content-max); } #newdev-screen .pff-verdict-headline em, #period-insights-screen .pff-verdict-headline em { font-style:italic; } #newdev-screen .pff-deck, #period-insights-screen .pff-deck { font-family:var(--font-body); font-size:var(--fs-body); color:var(--gsb-stone); line-height:var(--lh-body); margin:0 0 var(--space-4); max-width:60rem; }/* ============================================================================ II. KPI CHIPS ============================================================================ */ #newdev-screen .pff-chips, #period-insights-screen .pff-chips { display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-2); padding-bottom:var(--space-3); border-bottom:var(--rule-hairline); } #newdev-screen .pff-chip, #period-insights-screen .pff-chip { display:inline-flex; align-items:baseline; gap:5px; font-family:var(--font-mono); font-size:var(--fs-caption); padding:4px 10px; border-radius:var(--radius-sm); border:1px solid color-mix(in srgb, currentColor 28%, transparent); background:color-mix(in srgb, currentColor 7%, transparent); } #newdev-screen .pff-chip .k, #period-insights-screen .pff-chip .k { text-transform:uppercase; letter-spacing:var(--tracking-label); font-size:10px; color:var(--gsb-stone); } #newdev-screen .pff-chip .v, #period-insights-screen .pff-chip .v { font-weight:700; } #newdev-screen .pff-chip.pos, #period-insights-screen .pff-chip.pos { color:var(--gsb-shoot-green); } #newdev-screen .pff-chip.neg, #period-insights-screen .pff-chip.neg { color:var(--gsb-clay); } #newdev-screen .pff-chip.watch, #period-insights-screen .pff-chip.watch { color:var(--data-watch-text); } #newdev-screen .pff-chip.ink, #period-insights-screen .pff-chip.ink { color:var(--gsb-soil-ink); }/* ============================================================================ III. EBITDA BRIDGE WATERFALL (inline SVG) ============================================================================ */ #newdev-screen .pff-bridge-wrap, #period-insights-screen .pff-bridge-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } #newdev-screen .pff-bridge-svg, #period-insights-screen .pff-bridge-svg { display:block; width:100%; min-width:560px; height:auto; } #newdev-screen .pff-wf-bar-anchor, #period-insights-screen .pff-wf-bar-anchor { fill:var(--data-cat-1); } #newdev-screen .pff-wf-bar-up, #period-insights-screen .pff-wf-bar-up { fill:var(--gsb-shoot-green); } #newdev-screen .pff-wf-bar-down, #period-insights-screen .pff-wf-bar-down { fill:var(--gsb-clay); }/* down = unfavorable to EBITDA → clay (GSB negative) */ #newdev-screen .pff-wf-connector, #period-insights-screen .pff-wf-connector { stroke:var(--gsb-stone); stroke-width:1; stroke-dasharray:2 3; opacity:.55; } #newdev-screen .pff-wf-base, #period-insights-screen .pff-wf-base { stroke:var(--gsb-stone); stroke-width:1; stroke-dasharray:4 3; opacity:.6; } #newdev-screen .pff-wf-vlabel, #period-insights-screen .pff-wf-vlabel { font-family:var(--font-mono); font-size:11px; font-weight:600; fill:var(--gsb-soil-ink); } #newdev-screen .pff-wf-vlabel.up, #period-insights-screen .pff-wf-vlabel.up { fill:var(--gsb-shoot-green); } #newdev-screen .pff-wf-vlabel.down, #period-insights-screen .pff-wf-vlabel.down { fill:var(--gsb-clay); } #newdev-screen .pff-wf-vlabel.miss, #period-insights-screen .pff-wf-vlabel.miss { fill:var(--gsb-clay); } #newdev-screen .pff-wf-cat, #period-insights-screen .pff-wf-cat { font-family:var(--font-mono); font-size:9px; fill:var(--gsb-stone); text-transform:uppercase; letter-spacing:0.06em; } #newdev-screen .pff-bridge-readout, #period-insights-screen .pff-bridge-readout { font-family:var(--font-display); font-style:italic; font-weight:400; font-size:var(--fs-body); color:var(--gsb-stone); margin:var(--space-2) 0 0; line-height:var(--lh-prose); } #newdev-screen .pff-bridge-readout .pff-num, #period-insights-screen .pff-bridge-readout .pff-num { font-family:var(--font-mono); font-style:normal; font-weight:600; } #newdev-screen .pff-bridge-readout .pff-num.pos, #period-insights-screen .pff-bridge-readout .pff-num.pos { color:var(--gsb-shoot-green); } #newdev-screen .pff-bridge-readout .pff-num.neg, #period-insights-screen .pff-bridge-readout .pff-num.neg { color:var(--gsb-clay); }/* ============================================================================ IV. P&L SCORECARD ============================================================================ */ #newdev-screen .pff-scroll, #period-insights-screen .pff-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; } #newdev-screen .pff-scorecard, #period-insights-screen .pff-scorecard { width:100%; min-width:0; border-collapse:collapse; margin:var(--space-2) 0 0; } #newdev-screen .pff-scorecard th, #period-insights-screen .pff-scorecard th { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); text-align:right; padding:6px 10px; border-bottom:var(--rule-ink); white-space:nowrap; } #newdev-screen .pff-scorecard th:first-child, #period-insights-screen .pff-scorecard th:first-child { text-align:left; position:sticky; left:0; background:var(--color-surface); z-index:2; } #newdev-screen .pff-scorecard td, #period-insights-screen .pff-scorecard td { font-family:var(--font-mono); font-size:var(--fs-figure); padding:7px 10px; border-bottom:var(--rule-hairline); text-align:right; vertical-align:baseline; white-space:nowrap; } #newdev-screen .pff-scorecard td.item, #period-insights-screen .pff-scorecard td.item { text-align:left; font-weight:500; color:var(--gsb-soil-ink); position:sticky; left:0; background:var(--color-surface); z-index:1; } #newdev-screen .pff-scorecard td.actual, #period-insights-screen .pff-scorecard td.actual { font-weight:500; color:var(--gsb-soil-ink); } #newdev-screen .pff-scorecard td.lvl, #period-insights-screen .pff-scorecard td.lvl { color:var(--gsb-stone); } #newdev-screen .pff-scorecard td.var, #period-insights-screen .pff-scorecard td.var, #newdev-screen .pff-scorecard td.yoy, #period-insights-screen .pff-scorecard td.yoy, #newdev-screen .pff-scorecard td.bps, #period-insights-screen .pff-scorecard td.bps { font-weight:600; } #newdev-screen .pff-scorecard .pos, #period-insights-screen .pff-scorecard .pos { color:var(--gsb-shoot-green); } #newdev-screen .pff-scorecard .neg, #period-insights-screen .pff-scorecard .neg { color:var(--gsb-clay); } #newdev-screen .pff-scorecard .flat, #period-insights-screen .pff-scorecard .flat { color:var(--data-onplan); } #newdev-screen .pff-scorecard .mk, #period-insights-screen .pff-scorecard .mk { display:inline-block; width:1em; text-align:center; margin-right:1px; } #newdev-screen .pff-scorecard tr.subtotal td, #period-insights-screen .pff-scorecard tr.subtotal td { border-bottom:1px solid var(--gsb-oat); } #newdev-screen .pff-scorecard tr.ebitda td, #period-insights-screen .pff-scorecard tr.ebitda td { border-top:var(--rule-ink); padding-top:11px; background:color-mix(in srgb, var(--gsb-oat) 35%, transparent); } #newdev-screen .pff-scorecard tr.ebitda td.item, #period-insights-screen .pff-scorecard tr.ebitda td.item, #newdev-screen .pff-scorecard tr.ebitda td.actual, #period-insights-screen .pff-scorecard tr.ebitda td.actual { font-weight:600; } #newdev-screen .pff-scorecard tr:hover td, #period-insights-screen .pff-scorecard tr:hover td { background:color-mix(in srgb, var(--gsb-oat) 50%, transparent); }/* Safari sticky-cell paint fix: keep the frozen first cell opaque so row tints don't bleed under it. */ #newdev-screen .pff-scorecard td.item, #period-insights-screen .pff-scorecard td.item, #newdev-screen .pff-scorecard tr:hover td.item, #period-insights-screen .pff-scorecard tr:hover td.item { background:var(--color-surface); }/* ============================================================================ V. BRAND / REGION GRIDS ============================================================================ */ #newdev-screen .pff-grids, #period-insights-screen .pff-grids { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-2); } #newdev-screen .pff-card, #period-insights-screen .pff-card { background:var(--color-surface); border:var(--rule-hairline); border-radius:var(--radius-md); box-shadow:none; position:relative; overflow:hidden; } #newdev-screen .pff-card::before, #period-insights-screen .pff-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; } #newdev-screen .pff-card.brand::before, #period-insights-screen .pff-card.brand::before { background:var(--gsb-shoot-green); } #newdev-screen .pff-card.region::before, #period-insights-screen .pff-card.region::before { background:var(--gsb-stone); } #newdev-screen .pff-card-hd, #period-insights-screen .pff-card-hd { padding:var(--space-2) var(--space-3); border-bottom:var(--rule-hairline); display:flex; align-items:baseline; gap:var(--space-2); } #newdev-screen .pff-card-hd h3, #period-insights-screen .pff-card-hd h3 { margin:0; font-family:var(--font-display); font-weight:400; font-size:var(--fs-body-lg); color:var(--gsb-soil-ink); letter-spacing:var(--tracking-tight); } #newdev-screen .pff-card-sub, #period-insights-screen .pff-card-sub { font-family:var(--font-mono); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); } #newdev-screen .pff-card table, #period-insights-screen .pff-card table { width:100%; min-width:0; border-collapse:collapse; } #newdev-screen .pff-card th, #period-insights-screen .pff-card th { font-family:var(--font-mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); text-align:right; padding:8px 10px; border-bottom:var(--rule-hairline); white-space:nowrap; } #newdev-screen .pff-card th:first-child, #period-insights-screen .pff-card th:first-child { text-align:left; } #newdev-screen .pff-card td, #period-insights-screen .pff-card td { font-family:var(--font-mono); font-size:var(--fs-figure); padding:9px 10px; border-bottom:1px solid color-mix(in srgb, var(--gsb-oat) 70%, transparent); text-align:right; color:var(--gsb-soil-ink); white-space:nowrap; } #newdev-screen .pff-card td.name, #period-insights-screen .pff-card td.name { text-align:left; font-weight:500; } #newdev-screen .pff-card tr:last-child td, #period-insights-screen .pff-card tr:last-child td { border-bottom:none; } #newdev-screen .pff-card tr:hover td, #period-insights-screen .pff-card tr:hover td { background:color-mix(in srgb, var(--gsb-oat) 50%, transparent); } #newdev-screen .pff-card .pos, #period-insights-screen .pff-card .pos { color:var(--gsb-shoot-green); font-weight:600; } #newdev-screen .pff-card .neg, #period-insights-screen .pff-card .neg { color:var(--gsb-clay); font-weight:600; } #newdev-screen .pff-card .flat, #period-insights-screen .pff-card .flat { color:var(--data-onplan); font-weight:600; } #newdev-screen .pff-card .mk, #period-insights-screen .pff-card .mk { display:inline-block; width:1em; text-align:center; }/* ============================================================================ VI. VENUE MOVERS ============================================================================ */ #newdev-screen .pff-movers, #period-insights-screen .pff-movers { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-2); } #newdev-screen .pff-movers-absent, #period-insights-screen .pff-movers-absent { margin-top:var(--space-4); } #newdev-screen .pff-mcol-hd, #period-insights-screen .pff-mcol-hd { display:inline-block; font-family:var(--font-mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-label); padding:2px 7px; border-radius:var(--radius-sm); margin:0 0 var(--space-2); } #newdev-screen .pff-mcol-hd.up, #period-insights-screen .pff-mcol-hd.up { color:var(--gsb-shoot-green); background:var(--tint-pos); } #newdev-screen .pff-mcol-hd.down, #period-insights-screen .pff-mcol-hd.down { color:var(--gsb-clay); background:var(--tint-neg); } #newdev-screen .pff-mcol-hd.watch, #period-insights-screen .pff-mcol-hd.watch { color:var(--data-watch-text); background:var(--tint-watch); } #newdev-screen .pff-hold, #period-insights-screen .pff-hold { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; padding:var(--space-2) 0; border-bottom:var(--rule-hairline); width:100%; background:transparent; border-left:0; border-right:0; border-top:0; text-align:left; cursor:pointer; } #newdev-screen .pff-hold:focus-visible, #period-insights-screen .pff-hold:focus-visible { outline:2px solid var(--gsb-shoot-green); outline-offset:2px; } #newdev-screen .pff-hold-name, #period-insights-screen .pff-hold-name { font-family:var(--font-mono); font-size:var(--fs-figure); color:var(--gsb-soil-ink); flex:1 1 40%; min-width:120px; } #newdev-screen .pff-hold-amt, #period-insights-screen .pff-hold-amt { font-family:var(--font-mono); font-size:var(--fs-figure); font-weight:700; } #newdev-screen .pff-hold-amt.pos, #period-insights-screen .pff-hold-amt.pos { color:var(--gsb-shoot-green); } #newdev-screen .pff-hold-amt.neg, #period-insights-screen .pff-hold-amt.neg { color:var(--gsb-clay); } #newdev-screen .pff-pill, #period-insights-screen .pff-pill { font-family:var(--font-mono); font-size:var(--fs-micro); padding:2px 7px; border-radius:var(--radius-sm); } #newdev-screen .pff-pill.pos, #period-insights-screen .pff-pill.pos { color:var(--gsb-shoot-green); background:var(--tint-pos); } #newdev-screen .pff-pill.neg, #period-insights-screen .pff-pill.neg { color:var(--gsb-clay); background:var(--tint-neg); } #newdev-screen .pff-pill.muted, #period-insights-screen .pff-pill.muted { color:var(--stone-dk); background:var(--gsb-oat); } #newdev-screen .pff-pill.watch, #period-insights-screen .pff-pill.watch { color:var(--data-watch-text); background:var(--tint-watch); }/* ============================================================================ RESPONSIVE — wide bits live in their own overflow-x boxes; page never scrolls sideways ============================================================================ */ @media (max-width:880px){ #newdev-screen .pff-grids, #period-insights-screen .pff-grids { grid-template-columns:1fr; } #newdev-screen .pff-movers, #period-insights-screen .pff-movers { grid-template-columns:1fr; }} @media (max-width:520px){ #newdev-screen .pff-verdict-headline, #period-insights-screen .pff-verdict-headline { font-size:1.25rem; }} @media (prefers-reduced-motion:reduce){ #newdev-screen .pff-bridge-svg *, #period-insights-screen .pff-bridge-svg * { transition:none !important; animation:none !important; }}/* TTP / basis caveat caption under a scorecard */ #newdev-screen .pff-panel .pff-caption, #period-insights-screen .pff-panel .pff-caption { font-family:var(--font-body); font-style:italic; font-size:var(--fs-micro); color:var(--gsb-stone); margin:var(--space-2) 0 0; line-height:1.4; }/* EBITDA-bridge zoomed-axis floor label */ #newdev-screen .pff-wf-floor, #period-insights-screen .pff-wf-floor { font-family:var(--font-mono); font-size:8.5px; fill:var(--gsb-stone); letter-spacing:0.04em; opacity:0.8; }/* ============================================================================ PERIOD FLASH — expanded-panel layout fix (kill the inherited 2-col .dff-md grid; stack components full-width; control sits inline-right with its section title). ============================================================================ */ @media (min-width:880px){ #newdev-screen .pff-panel, #period-insights-screen .pff-panel { display:block; }/* override the .dff-md 2-col grid leak (daily #dff-md keeps its grid) */} #newdev-screen .pff-panel .pff-block, #period-insights-screen .pff-panel .pff-block { margin:0 0 var(--space-5); } #newdev-screen .pff-panel .pff-block-head, #period-insights-screen .pff-panel .pff-block-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin:var(--space-5) 0 var(--space-3); padding-top:var(--space-3); border-top:var(--rule-hairline); } #newdev-screen .pff-panel .pff-block-head .pff-kicker, #period-insights-screen .pff-panel .pff-block-head .pff-kicker { margin:0; padding:0; border-top:none; } #newdev-screen .pff-panel .pff-block-ctl, #period-insights-screen .pff-panel .pff-block-ctl { display:inline-flex; align-items:center; gap:var(--space-2); flex:0 0 auto; }/* interpretive prose now LEADS (under the verdict + chips) */ #newdev-screen .pff-panel .pff-lede-kicker, #period-insights-screen .pff-panel .pff-lede-kicker { margin-top:var(--space-3); } #newdev-screen .pff-panel .pff-lede, #period-insights-screen .pff-panel .pff-lede { margin:0 0 var(--space-2); }/* ============================================================================ PERIOD FLASH — insight-upgrade components: scoreboard strip + action queue ============================================================================ *//* Scoreboard: organic-vs-acquired + run-rate, directly under the chips */ #newdev-screen .pff-panel .pff-scoreboard, #period-insights-screen .pff-panel .pff-scoreboard { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); margin:0 0 var(--space-2); padding:var(--space-3) 0; border-bottom:var(--rule-hairline); } #newdev-screen .pff-panel .pff-score, #period-insights-screen .pff-panel .pff-score { display:flex; flex-direction:column; gap:1px; } #newdev-screen .pff-panel .pff-score .k, #period-insights-screen .pff-panel .pff-score .k { font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); } #newdev-screen .pff-panel .pff-score .v, #period-insights-screen .pff-panel .pff-score .v { font-family:var(--font-mono); font-size:1.05rem; font-weight:700; line-height:1.1; } #newdev-screen .pff-panel .pff-score.pos .v, #period-insights-screen .pff-panel .pff-score.pos .v { color:var(--gsb-shoot-green); } #newdev-screen .pff-panel .pff-score.neg .v, #period-insights-screen .pff-panel .pff-score.neg .v { color:var(--gsb-clay); } #newdev-screen .pff-panel .pff-score.ink .v, #period-insights-screen .pff-panel .pff-score.ink .v { color:var(--gsb-soil-ink); }/* Action queue table */ #newdev-screen .pff-panel .pff-aq, #period-insights-screen .pff-panel .pff-aq { width:100%; min-width:0; border-collapse:collapse; } #newdev-screen .pff-panel .pff-aq th, #period-insights-screen .pff-panel .pff-aq th { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); text-align:left; padding:6px 10px; border-bottom:var(--rule-ink); white-space:nowrap; } #newdev-screen .pff-panel .pff-aq td, #period-insights-screen .pff-panel .pff-aq td { font-family:var(--font-mono); font-size:var(--fs-figure); padding:8px 10px; border-bottom:var(--rule-hairline); vertical-align:baseline; } #newdev-screen .pff-panel .pff-aq td.pff-aq-venue, #period-insights-screen .pff-panel .pff-aq td.pff-aq-venue { font-weight:600; color:var(--gsb-soil-ink); } #newdev-screen .pff-panel .pff-aq .pff-aq-brand, #period-insights-screen .pff-panel .pff-aq .pff-aq-brand { color:var(--gsb-stone); font-weight:400; font-size:0.9em; } #newdev-screen .pff-panel .pff-aq td.pff-aq-issue, #period-insights-screen .pff-panel .pff-aq td.pff-aq-issue { color:var(--data-watch-text); text-transform:uppercase; font-size:9.5px; letter-spacing:0.04em; } #newdev-screen .pff-panel .pff-aq td.pff-aq-amt.neg, #period-insights-screen .pff-panel .pff-aq td.pff-aq-amt.neg { color:var(--gsb-clay); font-weight:700; text-align:right; } #newdev-screen .pff-panel .pff-aq .pff-aq-culprit, #period-insights-screen .pff-panel .pff-aq .pff-aq-culprit { color:var(--gsb-soil-ink); } #newdev-screen .pff-panel .pff-aq .pff-aq-dm, #period-insights-screen .pff-panel .pff-aq .pff-aq-dm { color:var(--gsb-stone); }/* ============================================================================ PERIOD FLASH — EDITORIAL ELEVATION (broadsheet treatment) + COLLAPSIBLE SECTIONS Goal: read like a fine financial broadsheet, not a dashboard. >=880px: leader column (verdict + lede) + a companion rail (pull-quote, then ledger — their real DOM order) that runs CONCURRENTLY beside the leader instead of stacking beneath it. Exhibits below always span full width. (2026-07-01: replaces a version whose narrow ch-based clamps were stranded alone on a wide viewport with nothing filling the rest of the width — see the swarm-judged design in memory for the full rationale.) ============================================================================ *//* — Masthead / nameplate (double rule) — spans full width, unchanged — */ #newdev-screen .pff-masthead, #period-insights-screen .pff-masthead { display:flex; align-items:baseline; justify-content:space-between; border-top:var(--rule-ink); border-bottom:var(--rule-hairline); padding:var(--space-2) 0; margin:0 0 var(--space-5); } #newdev-screen .pff-masthead .pff-mast-title, #period-insights-screen .pff-masthead .pff-mast-title { font-family:var(--font-mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.18em; color:var(--gsb-soil-ink); } #newdev-screen .pff-masthead .pff-mast-period, #period-insights-screen .pff-masthead .pff-mast-period { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); }/* — Cover verdict: big Newsreader, narrow measure, raised initial — the narrow measure is correct broadsheet typography; only the old "narrower on desktop than mobile" inversion (24ch < 30ch) is gone — desktop keeps the same disciplined 30ch at a bigger point size, never choked tighter than mobile. */ #newdev-screen .pff-panel .pff-verdict, #period-insights-screen .pff-panel .pff-verdict { margin:0 0 var(--space-4); } #newdev-screen .pff-panel .pff-verdict-headline, #period-insights-screen .pff-panel .pff-verdict-headline { font-size:2rem; line-height:1.12; max-width:30ch; letter-spacing:var(--tracking-tight); } #newdev-screen .pff-panel .pff-verdict-headline::first-letter, #period-insights-screen .pff-panel .pff-verdict-headline::first-letter { initial-letter:2 2; -webkit-initial-letter:2 2; font-weight:500; margin-right:6px; color:var(--gsb-shoot-green); } @media (min-width:880px){ #newdev-screen .pff-panel .pff-verdict-headline, #period-insights-screen .pff-panel .pff-verdict-headline { font-size:var(--fs-h1); max-width:30ch; }} #newdev-screen .pff-panel .pff-deck, #period-insights-screen .pff-panel .pff-deck { max-width:48ch; }/* — Pull-quote: the editor's voice, clay hairline. Base (mobile/fallback) treatment unchanged; the >=880px rail below relaxes max-width since the rail's track width becomes the real constraint, not a character count. — */ #newdev-screen .pff-pullquote, #period-insights-screen .pff-pullquote { font-family:var(--font-display); font-weight:400; font-style:italic; font-size:var(--fs-body-lg); line-height:var(--lh-prose); color:var(--gsb-soil-ink); border-left:2px solid var(--gsb-clay); padding:var(--space-1) 0 var(--space-1) var(--space-4); margin:var(--space-4) 0 var(--space-5); max-width:54ch; } #newdev-screen .pff-pullquote em, #period-insights-screen .pff-pullquote em { font-style:italic; color:var(--gsb-clay); }/* — Ledger: chips + scoreboard as one ruled "by the numbers" band — */ #newdev-screen .pff-panel .pff-ledger, #period-insights-screen .pff-panel .pff-ledger { border-top:var(--rule-hairline); border-bottom:var(--rule-hairline); padding:var(--space-3) 0; margin:0 0 var(--space-6); } #newdev-screen .pff-panel .pff-ledger .pff-chips, #period-insights-screen .pff-panel .pff-ledger .pff-chips { border:0; padding:0; margin:0 0 var(--space-2); } #newdev-screen .pff-panel .pff-ledger .pff-scoreboard, #period-insights-screen .pff-panel .pff-ledger .pff-scoreboard { border:0; padding:0; margin:0; }/* ============================================================================ THE RAIL (>=880px only). .pff-rail is a wrapper newdev-app.js now emits around the existing blockquote.pff-pullquote + div.pff-ledger (in that real order) — no new content synthesized, just one addressable rail child for CSS Grid. Comes later in source order than the block-flow cancellation above (~line 1153) and targets the same #newdev-screen .pff-panel selector, so it wins the cascade cleanly without touching the Daily Flash panel. ============================================================================ */ @media (min-width:880px){ #newdev-screen .pff-panel, #period-insights-screen .pff-panel { display:grid; grid-template-columns: minmax(0,1fr) 22rem; column-gap: var(--space-6); row-gap: 0; align-items:start; } #newdev-screen .pff-panel > .pff-masthead, #period-insights-screen .pff-panel > .pff-masthead { grid-column: 1 / -1; } #newdev-screen .pff-panel > .pff-verdict, #period-insights-screen .pff-panel > .pff-verdict { grid-column: 1; } #newdev-screen .pff-panel > .pff-lede-kicker, #period-insights-screen .pff-panel > .pff-lede-kicker, #newdev-screen .pff-panel > .pff-lede, #period-insights-screen .pff-panel > .pff-lede { grid-column: 1; } #newdev-screen .pff-panel > .pff-rail, #period-insights-screen .pff-panel > .pff-rail { grid-column: 2; grid-row: 2 / span 3; /* spans the verdict row through the lede row */ align-self: start; display: flex; flex-direction: column; gap: var(--space-5); padding-left: var(--space-5); border-left: var(--rule-hairline); } #newdev-screen .pff-panel > .pff-rail .pff-pullquote, #period-insights-screen .pff-panel > .pff-rail .pff-pullquote { max-width: none; margin: 0; border-left-color: var(--gsb-clay); } #newdev-screen .pff-panel > .pff-rail .pff-ledger, #period-insights-screen .pff-panel > .pff-rail .pff-ledger { border-top: var(--rule-ink); border-bottom: 0; padding: var(--space-3) 0 0; margin: 0; } #newdev-screen .pff-panel > .pff-rail .pff-ledger .pff-chips, #period-insights-screen .pff-panel > .pff-rail .pff-ledger .pff-chips { flex-direction: column; align-items: flex-start; gap: var(--space-2); } #newdev-screen .pff-panel > .pff-rail .pff-ledger .pff-scoreboard, #period-insights-screen .pff-panel > .pff-rail .pff-ledger .pff-scoreboard { flex-direction: column; gap: var(--space-3); } #newdev-screen .pff-panel > .pff-rail .pff-score, #period-insights-screen .pff-panel > .pff-rail .pff-score { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--gsb-oat) 70%, transparent); padding-bottom: 3px; }/* Every exhibit
— present or conditionally omitted (action-queue and DM board both can be absent), in any order — always spans the full grid width. No per-section grid-area mapping, so nothing can silently mis-place an exhibit when a conditional section isn't rendered. */ #newdev-screen .pff-panel > details.pff-block, #period-insights-screen .pff-panel > details.pff-block { grid-column: 1 / -1; }} @media (min-width:1280px){ #newdev-screen .pff-panel, #period-insights-screen .pff-panel { grid-template-columns: minmax(0,1fr) 24rem; }} @media (max-width:880px){ #newdev-screen .pff-panel > .pff-rail, #period-insights-screen .pff-panel > .pff-rail { position:static; display:block; border-left:0; padding-left:0; margin:0; max-height:none; overflow-y:visible; }}/* — Collapsible numbered sections:
.pff-block / .pff-block-head — */ #newdev-screen .pff-panel details.pff-block, #period-insights-screen .pff-panel details.pff-block { margin:var(--space-6) 0 0; } #newdev-screen .pff-panel details.pff-block > summary.pff-block-head, #period-insights-screen .pff-panel details.pff-block > summary.pff-block-head { list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:var(--space-3); border-top:var(--rule-ink); padding:var(--space-2) 0 var(--space-3); margin:0; } #newdev-screen .pff-panel summary.pff-block-head::-webkit-details-marker, #period-insights-screen .pff-panel summary.pff-block-head::-webkit-details-marker { display:none; } #newdev-screen .pff-panel .pff-sec-num, #period-insights-screen .pff-panel .pff-sec-num { font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--gsb-shoot-green); letter-spacing:0.08em; flex:0 0 auto; } #newdev-screen .pff-panel .pff-block-title, #period-insights-screen .pff-panel .pff-block-title { flex:1 1 auto; font-family:var(--font-mono); font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); } #newdev-screen .pff-panel .pff-block-title .gsb-kw, #period-insights-screen .pff-panel .pff-block-title .gsb-kw { color:var(--gsb-soil-ink); } #newdev-screen .pff-panel summary .pff-chev, #period-insights-screen .pff-panel summary .pff-chev { flex:0 0 auto; font-size:10px; color:var(--gsb-stone); transition:transform var(--motion-base) var(--ease-out); } #newdev-screen .pff-panel details.pff-block[open] summary .pff-chev, #period-insights-screen .pff-panel details.pff-block[open] summary .pff-chev { transform:rotate(90deg); } #newdev-screen .pff-panel summary.pff-block-head:focus-visible, #period-insights-screen .pff-panel summary.pff-block-head:focus-visible { outline:2px solid var(--gsb-shoot-green); outline-offset:-2px; } #newdev-screen .pff-panel .pff-block-body, #period-insights-screen .pff-panel .pff-block-body { padding-top:var(--space-3); } #newdev-screen .pff-panel .pff-block-body .pff-block-ctl, #period-insights-screen .pff-panel .pff-block-body .pff-block-ctl { display:flex; justify-content:flex-end; margin:0 0 var(--space-3); }/* — Tables as EXHIBITS, not spreadsheet exports: no vertical rules, no zebra, hairline header — */ #newdev-screen .pff-panel .pff-brandtbl, #period-insights-screen .pff-panel .pff-brandtbl, #newdev-screen .pff-panel .pff-dmtbl, #period-insights-screen .pff-panel .pff-dmtbl { width:100%; border-collapse:collapse; } #newdev-screen .pff-panel .pff-brandtbl th, #period-insights-screen .pff-panel .pff-brandtbl th, #newdev-screen .pff-panel .pff-dmtbl th, #period-insights-screen .pff-panel .pff-dmtbl th { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--gsb-stone); text-align:right; padding:6px 10px; border-bottom:var(--rule-ink); white-space:nowrap; } #newdev-screen .pff-panel .pff-brandtbl th:first-child, #period-insights-screen .pff-panel .pff-brandtbl th:first-child, #newdev-screen .pff-panel .pff-dmtbl th:first-child, #period-insights-screen .pff-panel .pff-dmtbl th:first-child { text-align:left; } #newdev-screen .pff-panel .pff-brandtbl td, #period-insights-screen .pff-panel .pff-brandtbl td, #newdev-screen .pff-panel .pff-dmtbl td, #period-insights-screen .pff-panel .pff-dmtbl td { font-family:var(--font-mono); font-size:var(--fs-figure); padding:7px 10px; border-bottom:1px solid color-mix(in srgb,var(--gsb-oat) 70%,transparent); text-align:right; color:var(--gsb-soil-ink); white-space:nowrap; vertical-align:baseline; } #newdev-screen .pff-panel .pff-brandtbl td.name, #period-insights-screen .pff-panel .pff-brandtbl td.name, #newdev-screen .pff-panel .pff-dmtbl td.name, #period-insights-screen .pff-panel .pff-dmtbl td.name { text-align:left; } #newdev-screen .pff-panel .pff-brandtbl .pos, #period-insights-screen .pff-panel .pff-brandtbl .pos, #newdev-screen .pff-panel .pff-dmtbl .pos, #period-insights-screen .pff-panel .pff-dmtbl .pos { color:var(--gsb-shoot-green); font-weight:600; } #newdev-screen .pff-panel .pff-brandtbl .neg, #period-insights-screen .pff-panel .pff-brandtbl .neg, #newdev-screen .pff-panel .pff-dmtbl .neg, #period-insights-screen .pff-panel .pff-dmtbl .neg { color:var(--gsb-clay); font-weight:600; } #newdev-screen .pff-panel .pff-brandtbl .flat, #period-insights-screen .pff-panel .pff-brandtbl .flat, #newdev-screen .pff-panel .pff-dmtbl .flat, #period-insights-screen .pff-panel .pff-dmtbl .flat { color:var(--data-onplan); } #newdev-screen .pff-panel .pff-brandtbl .mk, #period-insights-screen .pff-panel .pff-brandtbl .mk, #newdev-screen .pff-panel .pff-dmtbl .mk, #period-insights-screen .pff-panel .pff-dmtbl .mk { display:inline-block; width:1em; text-align:center; }/* parent group rows bold; child sub-brands indented + muted */ #newdev-screen .pff-panel .pff-br-parent td, #period-insights-screen .pff-panel .pff-br-parent td { border-top:var(--rule-hairline); } #newdev-screen .pff-panel .pff-br-parent td.name, #period-insights-screen .pff-panel .pff-br-parent td.name { font-family:var(--font-display); font-size:var(--fs-body); font-weight:500; color:var(--gsb-soil-ink); } #newdev-screen .pff-panel .pff-br-child td, #period-insights-screen .pff-panel .pff-br-child td { border-bottom:0; } #newdev-screen .pff-panel .pff-br-child td.name, #period-insights-screen .pff-panel .pff-br-child td.name { padding-left:var(--space-5); color:var(--gsb-stone); font-size:0.95em; } #newdev-screen .pff-panel .pff-brand-wrap, #period-insights-screen .pff-panel .pff-brand-wrap { display:grid; grid-template-columns:1.6fr 1fr; gap:var(--space-5); align-items:start; }/* — DM rows: context sub-line + peer pill — */ #newdev-screen .pff-panel .pff-dm-ctx, #period-insights-screen .pff-panel .pff-dm-ctx { font-family:var(--font-body); font-size:var(--fs-micro); color:var(--gsb-stone); margin-top:2px; text-transform:none; letter-spacing:0; } #newdev-screen .pff-panel .pff-dm-peer-cell, #period-insights-screen .pff-panel .pff-dm-peer-cell { text-align:right; } #newdev-screen .pff-panel .pff-dm-peer, #period-insights-screen .pff-panel .pff-dm-peer { font-family:var(--font-mono); font-size:10px; padding:2px 7px; border-radius:var(--radius-sm); white-space:nowrap; } #newdev-screen .pff-panel .pff-dm-peer.pos, #period-insights-screen .pff-panel .pff-dm-peer.pos { color:var(--gsb-shoot-green); background:var(--tint-pos); } #newdev-screen .pff-panel .pff-dm-peer.neg, #period-insights-screen .pff-panel .pff-dm-peer.neg { color:var(--gsb-clay); background:var(--tint-neg); } #newdev-screen .pff-panel .pff-dm-peer.watch, #period-insights-screen .pff-panel .pff-dm-peer.watch { color:var(--data-watch-text); background:var(--tint-watch); } #newdev-screen .pff-panel .pff-dm-peer.flat, #period-insights-screen .pff-panel .pff-dm-peer.flat { color:var(--gsb-stone); } @media (max-width:880px){ #newdev-screen .pff-panel .pff-brand-wrap, #period-insights-screen .pff-panel .pff-brand-wrap { grid-template-columns:1fr; }}/* ============================================================================ PERIOD INSIGHTS — COST-LINE DRILL (the variance deep-dive's exhibits, per line) Nested
per cost line inside the collapsed "Cost-line drill" block. ============================================================================ */ #newdev-screen .pff-drill-legend, #period-insights-screen .pff-drill-legend { margin:2px 0 8px; } #newdev-screen .pff-drill-line, #period-insights-screen .pff-drill-line { border-top:1px solid rgba(34,30,24,0.12); } #newdev-screen .pff-drill-line:last-child, #period-insights-screen .pff-drill-line:last-child { border-bottom:1px solid rgba(34,30,24,0.12); } #newdev-screen .pff-drill-line > summary, #period-insights-screen .pff-drill-line > summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 2px; cursor:pointer; list-style:none; font-family:var(--font-mono); font-size:11px; min-height:34px; } #newdev-screen .pff-drill-line > summary::-webkit-details-marker, #period-insights-screen .pff-drill-line > summary::-webkit-details-marker { display:none; } #newdev-screen .pff-drill-name, #period-insights-screen .pff-drill-name { font-weight:700; letter-spacing:0.06em; text-transform:uppercase; min-width:88px; color:var(--gsb-soil-ink); } #newdev-screen .pff-drill-var, #period-insights-screen .pff-drill-var { font-weight:600; font-variant-numeric:tabular-nums; } #newdev-screen .pff-drill-line .pff-chev, #period-insights-screen .pff-drill-line .pff-chev { margin-left:auto; transition:transform 0.15s; color:var(--gsb-stone); } #newdev-screen .pff-drill-line[open] > summary .pff-chev, #period-insights-screen .pff-drill-line[open] > summary .pff-chev { transform:rotate(90deg); } #newdev-screen .pff-drill-chip, #period-insights-screen .pff-drill-chip { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:0.06em; padding:2px 6px; border-radius:2px; white-space:nowrap; } #newdev-screen .pff-drill-chip.clay, #period-insights-screen .pff-drill-chip.clay { color:var(--gsb-clay); background:rgba(181,83,46,0.10); border:1px solid rgba(181,83,46,0.28); } #newdev-screen .pff-drill-chip.ochre, #period-insights-screen .pff-drill-chip.ochre { color:#8A6420; background:rgba(185,139,50,0.12); border:1px solid rgba(185,139,50,0.32); } #newdev-screen .pff-drill-chip.stone, #period-insights-screen .pff-drill-chip.stone { color:var(--gsb-stone); background:rgba(111,105,91,0.10); border:1px solid rgba(111,105,91,0.26); } #newdev-screen .pff-drill-body, #period-insights-screen .pff-drill-body { padding:2px 0 14px; } #newdev-screen .pff-drill-h, #period-insights-screen .pff-drill-h { font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gsb-stone); margin:12px 0 4px; } #newdev-screen .pff-drilltbl, #period-insights-screen .pff-drilltbl { min-width:0; } #newdev-screen .pff-drilltbl td, #period-insights-screen .pff-drilltbl td, #newdev-screen .pff-drilltbl th, #period-insights-screen .pff-drilltbl th { font-size:11px; white-space:nowrap; } #newdev-screen .pff-drill-dm, #period-insights-screen .pff-drill-dm { color:var(--gsb-stone); } #newdev-screen .pff-drill-sub td, #period-insights-screen .pff-drill-sub td { font-size:10px; color:var(--gsb-stone); padding-top:0; border-top:none; } #newdev-screen .pff-drill-sub .mut, #period-insights-screen .pff-drill-sub .mut { opacity:0.75; } #newdev-screen .pff-drill-sys, #period-insights-screen .pff-drill-sys { margin:0; padding-left:16px; font-size:11.5px; line-height:1.45; } #newdev-screen .pff-drill-sys li, #period-insights-screen .pff-drill-sys li { margin-bottom:3px; } #newdev-screen .pff-drill-arts, #period-insights-screen .pff-drill-arts { opacity:0.72; } #newdev-screen .pff-drill-arts .mut, #period-insights-screen .pff-drill-arts .mut { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.04em; } /* ---- Sales drill (.pff-sd) — guest-count header, brand-group board, ±10% callouts ------------- */ #newdev-screen .pff-drill-chip.green, #period-insights-screen .pff-drill-chip.green { color:var(--gsb-green,#2F6B45); background:rgba(47,107,69,0.10); border:1px solid rgba(47,107,69,0.28); } /* company header: the traffic-vs-check split of the period */ #newdev-screen .pff-sd-hdr, #period-insights-screen .pff-sd-hdr { border-top:1px solid rgba(34,30,24,0.12); border-bottom:1px solid rgba(34,30,24,0.12); padding:10px 0 8px; margin:2px 0 12px; } #newdev-screen .pff-sd-hdrline, #period-insights-screen .pff-sd-hdrline { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; } #newdev-screen .pff-sd-hdrval, #period-insights-screen .pff-sd-hdrval { font-family:var(--font-mono); font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; } #newdev-screen .pff-sd-hdrpct, #period-insights-screen .pff-sd-hdrpct { font-family:var(--font-mono); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; } #newdev-screen .pff-sd-hdrlbl, #period-insights-screen .pff-sd-hdrlbl { font-size:11.5px; color:var(--gsb-stone); } #newdev-screen .pff-sd-legs, #period-insights-screen .pff-sd-legs { margin:8px 0 2px; display:flex; flex-direction:column; gap:5px; } #newdev-screen .pff-sd-leg, #period-insights-screen .pff-sd-leg { display:grid; grid-template-columns:52px 1fr 74px 54px; align-items:center; gap:8px; } #newdev-screen .pff-sd-leglbl, #period-insights-screen .pff-sd-leglbl { font-family:var(--font-mono); font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--gsb-stone); } #newdev-screen .pff-sd-legval, #period-insights-screen .pff-sd-legval, #newdev-screen .pff-sd-legpct, #period-insights-screen .pff-sd-legpct { font-family:var(--font-mono); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; } #newdev-screen .pff-sd-legpct, #period-insights-screen .pff-sd-legpct { color:var(--gsb-stone); font-weight:500; } #newdev-screen .pff-sd-legcap, #period-insights-screen .pff-sd-legcap { margin:6px 0 0; } /* center-anchored variance bar, shared scale within a board */ #newdev-screen .pff-sd-track, #period-insights-screen .pff-sd-track { position:relative; display:block; height:9px; background:rgba(34,30,24,0.05); border-radius:2px; overflow:hidden; } #newdev-screen .pff-sd-fill, #period-insights-screen .pff-sd-fill { position:absolute; top:0; bottom:0; border-radius:2px; } #newdev-screen .pff-sd-fill.neg, #period-insights-screen .pff-sd-fill.neg { background:var(--gsb-clay,#B5532E); opacity:0.78; } #newdev-screen .pff-sd-fill.pos, #period-insights-screen .pff-sd-fill.pos { background:var(--gsb-green,#2F6B45); opacity:0.78; } #newdev-screen .pff-sd-axis, #period-insights-screen .pff-sd-axis { position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:rgba(34,30,24,0.45); } /* brand-group board */ #newdev-screen .pff-sd-board, #period-insights-screen .pff-sd-board { margin-bottom:14px; } #newdev-screen .pff-sd-grp, #period-insights-screen .pff-sd-grp { border-top:1px solid rgba(34,30,24,0.10); } #newdev-screen .pff-sd-grp:last-child, #period-insights-screen .pff-sd-grp:last-child { border-bottom:1px solid rgba(34,30,24,0.10); } #newdev-screen .pff-sd-grp > summary, #period-insights-screen .pff-sd-grp > summary, #newdev-screen .pff-sd-sumrow, #period-insights-screen .pff-sd-sumrow { display:grid; grid-template-columns:142px 34px minmax(70px,1fr) 74px 54px 132px 46px 12px; align-items:center; gap:4px 8px; padding:7px 2px; cursor:default; list-style:none; } #newdev-screen .pff-sd-chips, #period-insights-screen .pff-sd-chips { display:flex; gap:4px; justify-content:flex-end; } #newdev-screen .pff-sd-sparkcell, #period-insights-screen .pff-sd-sparkcell { display:flex; justify-content:flex-end; } #newdev-screen .pff-sd-grp > summary, #period-insights-screen .pff-sd-grp > summary { cursor:pointer; } #newdev-screen .pff-sd-grp > summary::-webkit-details-marker, #period-insights-screen .pff-sd-grp > summary::-webkit-details-marker { display:none; } #newdev-screen .pff-sd-grp[open] > summary .pff-chev, #period-insights-screen .pff-sd-grp[open] > summary .pff-chev { transform:rotate(90deg); } #newdev-screen .pff-sd-gname, #period-insights-screen .pff-sd-gname { font-weight:700; font-size:12px; letter-spacing:0.02em; } #newdev-screen .pff-sd-gunits, #period-insights-screen .pff-sd-gunits { font-family:var(--font-mono); font-size:10px; color:var(--gsb-stone); } #newdev-screen .pff-sd-gvar, #period-insights-screen .pff-sd-gvar { font-family:var(--font-mono); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; } #newdev-screen .pff-sd-gpct, #period-insights-screen .pff-sd-gpct { font-family:var(--font-mono); font-size:11px; font-variant-numeric:tabular-nums; text-align:right; } #newdev-screen .pff-sd-mchip, #period-insights-screen .pff-sd-mchip { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:0.04em; padding:1px 5px; border-radius:2px; white-space:nowrap; } #newdev-screen .pff-sd-mchip.neg, #period-insights-screen .pff-sd-mchip.neg { color:var(--gsb-clay,#B5532E); background:rgba(181,83,46,0.09); } #newdev-screen .pff-sd-mchip.pos, #period-insights-screen .pff-sd-mchip.pos { color:var(--gsb-green,#2F6B45); background:rgba(47,107,69,0.09); } #newdev-screen .pff-sd-spark, #period-insights-screen .pff-sd-spark { display:block; overflow:visible; } #newdev-screen .pff-sd-sparkbar.neg, #period-insights-screen .pff-sd-sparkbar.neg { fill:var(--gsb-clay,#B5532E); opacity:0.7; } #newdev-screen .pff-sd-sparkbar.pos, #period-insights-screen .pff-sd-sparkbar.pos { fill:var(--gsb-green,#2F6B45); opacity:0.7; } #newdev-screen .pff-sd-sparkaxis, #period-insights-screen .pff-sd-sparkaxis { stroke:rgba(34,30,24,0.22); stroke-width:0.75; } #newdev-screen .pff-sd-kids td:first-child, #period-insights-screen .pff-sd-kids td:first-child { padding-left:10px; } /* callouts */ #newdev-screen .pff-sd-gatecap, #period-insights-screen .pff-sd-gatecap { margin:2px 0 10px; } #newdev-screen .pff-sd-co, #period-insights-screen .pff-sd-co { margin-bottom:14px; } #newdev-screen .pff-sd-coh, #period-insights-screen .pff-sd-coh { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0 0 4px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; } #newdev-screen .pff-sd-cocount, #period-insights-screen .pff-sd-cocount { font-weight:500; letter-spacing:0.03em; text-transform:none; color:var(--gsb-stone); } #newdev-screen .pff-sd-side, #period-insights-screen .pff-sd-side { margin:6px 0 2px; font-family:var(--font-mono); font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; } #newdev-screen .pff-sd-side.neg, #period-insights-screen .pff-sd-side.neg { color:var(--gsb-clay,#B5532E); } #newdev-screen .pff-sd-side.pos, #period-insights-screen .pff-sd-side.pos { color:var(--gsb-green,#2F6B45); } #newdev-screen .pff-sd-tail, #period-insights-screen .pff-sd-tail { margin:4px 0 0; font-size:11px; color:var(--gsb-stone); font-style:italic; } #newdev-screen .pff-sd-basis, #period-insights-screen .pff-sd-basis { font-size:9px; vertical-align:super; opacity:0.6; } #newdev-screen .pff-sd-allbtn, #period-insights-screen .pff-sd-allbtn { font-family:var(--font-mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--gsb-stone); background:rgba(232,224,209,0.55); border:1px solid rgba(34,30,24,0.14); border-radius:3px; padding:5px 10px; cursor:pointer; } #newdev-screen .pff-sd-allbtn:hover, #period-insights-screen .pff-sd-allbtn:hover { background:rgba(232,224,209,0.9); } #newdev-screen .pff-sd-allbody, #period-insights-screen .pff-sd-allbody { margin-top:8px; } #newdev-screen .pff-sd-conc, #period-insights-screen .pff-sd-conc { margin:10px 0; } @media (max-width:720px){ #newdev-screen .pff-sd-grp > summary, #period-insights-screen .pff-sd-grp > summary, #newdev-screen .pff-sd-sumrow, #period-insights-screen .pff-sd-sumrow { grid-template-columns:1fr 30px 66px 48px 12px; } #newdev-screen .pff-sd-grp .pff-sd-track, #period-insights-screen .pff-sd-grp .pff-sd-track, #newdev-screen .pff-sd-sparkcell, #period-insights-screen .pff-sd-sparkcell, #newdev-screen .pff-sd-chips, #period-insights-screen .pff-sd-chips { display:none; } #newdev-screen .pff-sd-leg, #period-insights-screen .pff-sd-leg { grid-template-columns:44px 1fr 62px 46px; } } /* ============================================================================ 12. FLASH TOP REDESIGN (2026-07-05) — editorial masthead + KPI band + "Platforms / Regions" ledger tables (single-line rows, tinted vs-LY pills, whole-row expand, share bars, 7-day sparks). The tables keep the legacy 7-
structure (mobile Stage-2 parses it); everything visual lives in these classes. Desktop-only: the masthead/KPI band hide at the mobile flash breakpoint (mobile keeps its own hero). ============================================================================ */ /* ---- Masthead (date row + KPI band share one line) ---- */ #newdev-screen .flash-masthead { margin: 2px 0 8px; padding-bottom: 8px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid rgba(34, 30, 24, 0.12); } #newdev-screen .fm-headrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 34px; flex: 0 0 auto; } #newdev-screen .fm-step { font-family: var(--font-mono); font-size: 13px; line-height: 1; color: var(--gsb-stone); background: #fff; border: 1px solid var(--gsb-oat); border-radius: 3px; padding: 3px 9px; cursor: pointer; } #newdev-screen .fm-step:hover:not(:disabled) { border-color: var(--gsb-oat-dk); color: var(--gsb-soil-ink); } #newdev-screen .fm-step:disabled { color: var(--gsb-oat-dk); cursor: default; } #newdev-screen .fm-date { font-family: var(--font-display); font-size: 23px; letter-spacing: var(--tracking-tight); color: var(--gsb-soil-ink); line-height: 1.15; } #newdev-screen .fm-date .fm-delta { font-style: italic; margin-left: 4px; } #newdev-screen .fm-date .fm-delta.up { color: var(--gsb-shoot-green); } #newdev-screen .fm-date .fm-delta.dn { color: var(--gsb-clay); } #newdev-screen .fm-date .fm-delta.mut { color: var(--gsb-stone); } #newdev-screen .fm-compflag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; color: #8A6516; background: rgba(185, 139, 50, 0.16); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } /* ---- KPI band (rides beside the date on the masthead line) ---- */ #newdev-screen .flash-kpis { display: flex; flex: 1 1 auto; min-width: 0; border-left: 1px solid rgba(34, 30, 24, 0.12); } #newdev-screen .fm-kpi { flex: 1; padding: 0 14px; min-width: 0; } #newdev-screen .fm-kpi + .fm-kpi { border-left: 1px solid rgba(34, 30, 24, 0.12); } #newdev-screen .fm-kpi:first-child { padding-left: 16px; } #newdev-screen .fm-kpi-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gsb-stone); } #newdev-screen .fm-kpi-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } #newdev-screen .fm-kpi-val { font-family: var(--font-mono); font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--gsb-soil-ink); } /* ---- Delta pills ---- */ #newdev-screen .sf-pill { display: inline-block; font-family: var(--font-mono) !important; font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.5; } #newdev-screen .sf-pill.up { background: rgba(47, 107, 69, 0.13); color: var(--gsb-shoot-green); } #newdev-screen .sf-pill.dn { background: rgba(181, 83, 46, 0.13); color: var(--gsb-clay); } #newdev-screen .sf-pill.mut { background: #F1EDE2; color: var(--gsb-stone); } #newdev-screen .fm-kpi .sf-pill { font-size: 11.5px; padding: 2px 8px; } /* ---- Ledger tables (keep 7-td structure; restyle) ---- */ #newdev-screen .sf-perftbl { width: 100%; table-layout: fixed; border-collapse: collapse; min-width: 0 !important; } #newdev-screen .sf-perftbl thead th { font-family: var(--font-mono) !important; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gsb-stone); padding: 3px 6px; border-bottom: 1px solid var(--gsb-oat); text-align: right; background: transparent; white-space: nowrap; } #newdev-screen .sf-perftbl thead th:first-child { text-align: left; } #newdev-screen .sf-perftbl td { padding: 5px 6px; border-bottom: 1px solid #EDE7DA; white-space: nowrap; vertical-align: middle; transition: none; } #newdev-screen .sf-perftbl .sf-num { text-align: right; font-size: 12px; font-weight: 600; color: var(--gsb-soil-ink); } #newdev-screen .sf-perftbl .sf-pct { text-align: right; } #newdev-screen .sf-perftbl td.sf-name, #newdev-screen .sf-perftbl td.sf-name * { font-family: var(--font-body) !important; } #newdev-screen .sf-perftbl td.sf-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; } #newdev-screen .sf-perftbl .sf-allrow { display: none; } /* company totals live in the KPI band; row kept for mobile parser */ #newdev-screen .sf-perftbl tr.sf-prow td, #newdev-screen .sf-perftbl tr.brand-summary-row td, #newdev-screen .sf-perftbl tr.region-summary-row td { cursor: pointer; } #newdev-screen .sf-perftbl tr.sf-prow:hover td, #newdev-screen .sf-perftbl tr.brand-summary-row:hover td, #newdev-screen .sf-perftbl tr.region-summary-row:hover td { background: #F3EEE3 !important; } #newdev-screen .sf-chev { display: inline-block; width: 13px; color: var(--gsb-stone); font-size: 9px; font-family: var(--font-mono) !important; transition: transform 0.12s ease; } #newdev-screen .sf-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gsb-ochre); margin-left: 5px; vertical-align: 1px; } #newdev-screen .sf-perftbl td.sf-name .sf-unitcount { font-family: var(--font-mono) !important; font-size: 10px; font-weight: 500; color: var(--gsb-stone); margin-left: 5px; } #newdev-screen .sf-notin-pill { display: inline-block; font-family: var(--font-mono) !important; font-size: 9.5px; font-weight: 500; letter-spacing: 0.06em; padding: 1px 7px; border-radius: 999px; background: #F1EDE2; color: var(--gsb-stone); } #newdev-screen .sf-perftbl tr.sf-notinrow td { color: var(--gsb-stone); } #newdev-screen .sf-perftbl tr.sf-notinrow .sf-num { color: var(--gsb-oat-dk); font-weight: 500; } /* Expanded drawers (2026-07-14 differentiation pass) — an open section reads as ONE recessed block: every row inside a drawer (.sf-drawrow = drawhead + child brands / sub-regions + venues) sits on a warm oat wash behind a continuous 3px leaf spine (inset box-shadow, not border-left — no layout shift, no border-collapse quirks). The row that OWNS the open drawer (.sf-open) caps the spine in shoot green, drops its bottom hairline so it attaches to the block, and turns its chevron green. .sf-d2 = second-level drawer content (venues under a child brand / sub-region), indented one more step. Backgrounds stay !important per the style.css global-table-leak override. */ /* (!important on borders: .performance-card td forces its hairline with !important at line ~383; ours is more specific so !important wins here) */ #newdev-screen .sf-perftbl tr.sf-drawrow td { background: #F6F1E4 !important; border-bottom-color: #EAE2CF !important; } #newdev-screen .sf-perftbl tr.sf-drawrow td:first-child { box-shadow: inset 3px 0 0 var(--gsb-leaf); } #newdev-screen .sf-perftbl tr.sf-open td { border-bottom-color: transparent !important; } #newdev-screen .sf-perftbl tr.sf-open td:first-child { box-shadow: inset 3px 0 0 var(--gsb-shoot-green); } #newdev-screen .sf-perftbl tr.sf-open .sf-chev { color: var(--gsb-shoot-green); } /* crisp 2px shelf where a drawer ends and the next top-level row resumes */ #newdev-screen .sf-perftbl tr.sf-drawrow + tr:not(.sf-drawrow) td { border-top: 2px solid #E5DCC6; } #newdev-screen .sf-perftbl tr.sf-drawrow:last-child td { border-bottom: 2px solid #E5DCC6 !important; } /* mid-tier rows (child brands AA/CB/Multi, sub-regions): between parent + venue */ #newdev-screen .sf-perftbl tr.sf-childrow td.sf-name { padding-left: 26px; font-size: 12px; font-weight: 500; } #newdev-screen .sf-perftbl tr.sf-childrow .sf-num { font-size: 11.5px; } /* venue leaves */ #newdev-screen .sf-perftbl tr.venue-filter-row td { padding: 3px 6px; font-size: 11px; color: var(--gsb-stone); } #newdev-screen .sf-perftbl tr.venue-filter-row td.sf-name { font-size: 11.5px; font-weight: 400; color: var(--gsb-stone); padding-left: 27px; } #newdev-screen .sf-perftbl tr.venue-filter-row .sf-num { font-size: 11px; font-weight: 500; color: var(--gsb-stone); } /* second-level drawer content steps in once more (beats the two rules above by source order; !important because style.css's td:last-child gutter rule hits the colspan drawhead cell — first AND last child — with padding-left: 6px !important) */ #newdev-screen .sf-perftbl tr.sf-d2 td:first-child { padding-left: 42px !important; } /* hover: darker than the drawer wash; kept BEFORE .sf-noncomp so stripes win on hover (as before) */ #newdev-screen .sf-perftbl tr.venue-filter-row:hover td, #newdev-screen .sf-perftbl tr.sf-childrow:hover td { background: #EFE8D6 !important; } #newdev-screen .sf-perftbl tr.venue-filter-row.sf-noncomp td { background: repeating-linear-gradient(135deg, #EDE5D3, #EDE5D3 4px, #F6F1E4 4px, #F6F1E4 8px) !important; } #newdev-screen .sf-nc { font-family: var(--font-mono) !important; font-size: 8.5px; color: var(--gsb-clay); letter-spacing: 0.05em; margin-left: 4px; } #newdev-screen .sf-perftbl tr.sf-drawhead td { /* !important: the style.css td:last-child gutter rule (padding-left 6px !important) matches this colspan cell; ours is more specific so it wins */ padding: 7px 16px 5px 26px !important; border-bottom: 1px solid #EAE2CF; font-family: var(--font-mono) !important; font-size: 10px; letter-spacing: 0.05em; color: var(--gsb-stone); text-transform: uppercase; } #newdev-screen .sf-drawhead .sf-drawmeta { margin-left: 10px; color: var(--gsb-stone); vertical-align: middle; } #newdev-screen .sf-filter-link { display: inline-flex; align-items: center; vertical-align: middle; padding: 2px 10px; border-radius: 999px; font-weight: 500; letter-spacing: 0.07em; color: var(--gsb-shoot-green); cursor: pointer; background: color-mix(in srgb, var(--gsb-shoot-green) 11%, transparent); border: 1px solid color-mix(in srgb, var(--gsb-shoot-green) 28%, transparent); transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } #newdev-screen .sf-filter-link:hover { background: var(--gsb-shoot-green); color: #FFFFFF; border-color: var(--gsb-shoot-green); text-decoration: none; } /* ---- Budget Calendar: pill deltas + week-total tiles (2026-07-14) ---- Day-cell / period-header %s render as compact .sf-pill.xs chips — the same delta language as the ledger tables. The WTD tile is restyled as the WEEK-SUM object: a performance wash DEEPER than any day tint, a solid color frame, tinted total and a WEEK tag, so the sum of a week reads as a different object than a single day. style.css's .newdev-cal-wtd base sets its background/border with !important, so the overrides here must too (this sheet loads after style.css; these selectors are also more specific). */ #newdev-screen .sf-pill.xs { font-size: 9px; padding: 0 5px; line-height: 1.5; } #newdev-screen .sf-pill.sm { font-size: 10px; padding: 0 6px; line-height: 1.6; } /* movers Impact/vs pills */ #newdev-screen .cal-chg-row { display: flex; justify-content: space-between; align-items: center; line-height: 1.35; margin-top: 1px; } #newdev-screen .cal-chg-lbl { font-family: var(--font-mono) !important; font-size: 8.5px; font-weight: 600; color: var(--gsb-stone); } #newdev-screen .cal-hdr-tc { display: inline-flex; align-items: center; gap: 4px; } #newdev-screen .wtd-tag { font-family: var(--font-mono) !important; font-size: 7.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--gsb-stone); line-height: 1; margin-bottom: 2px; text-transform: uppercase; } #newdev-screen .wtd-sum { font-family: var(--font-mono) !important; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gsb-soil-ink); line-height: 1.15; margin-bottom: 2px; } #newdev-screen td.newdev-cal-wtd.wtd-beat { background: rgba(47, 107, 69, 0.14) !important; border-left: 5px solid var(--gsb-shoot-green) !important; border-top: 1px solid rgba(47, 107, 69, 0.35) !important; border-right: 1px solid rgba(47, 107, 69, 0.35) !important; border-bottom: 1px solid rgba(47, 107, 69, 0.35) !important; } #newdev-screen td.newdev-cal-wtd.wtd-miss { background: rgba(181, 83, 46, 0.13) !important; border-left: 5px solid var(--gsb-clay) !important; border-top: 1px solid rgba(181, 83, 46, 0.32) !important; border-right: 1px solid rgba(181, 83, 46, 0.32) !important; border-bottom: 1px solid rgba(181, 83, 46, 0.32) !important; } #newdev-screen td.newdev-cal-wtd.wtd-strong.wtd-beat { background: rgba(47, 107, 69, 0.21) !important; } #newdev-screen td.newdev-cal-wtd.wtd-strong.wtd-miss { background: rgba(181, 83, 46, 0.19) !important; } #newdev-screen td.newdev-cal-wtd.wtd-beat .wtd-sum { color: var(--gsb-shoot-green); } #newdev-screen td.newdev-cal-wtd.wtd-miss .wtd-sum { color: var(--gsb-clay); } /* uniform squares: every day/WTD cell shares one fixed height (td height = min-height, a data-rich row can still grow) with top-aligned content, so full rows and future BUD-only rows read as one even grid across both period cards. 84px = the natural height of a full day cell (date + $ + 3 pill rows). */ #newdev-screen .newdev-cal-table td.newdev-cal-cell, #newdev-screen .newdev-cal-table td.newdev-cal-wtd { height: 85px; vertical-align: top; } /* today badge: slimmed from style.css's 16px !important circle (and the cell's top padding pulled in by the same amount) so the today cell's natural height lands on the same 84px as a standard day cell and its row stays in the uniform grid */ #newdev-screen .newdev-cal-table td.newdev-cal-cell.today { padding-top: 0 !important; } #newdev-screen .newdev-cal-table .newdev-cal-cell.today > div:first-child { width: 12px !important; height: 12px !important; margin: 0 auto !important; } /* pills sit on the tinted wash — solid white base keeps the chip crisp */ #newdev-screen td.newdev-cal-wtd.wtd-beat .sf-pill, #newdev-screen td.newdev-cal-wtd.wtd-miss .sf-pill { background: rgba(255, 255, 255, 0.72); } /* ============================================================ SCOPE COMPARISON TABLE — "Ledger Heat Scan" Density-matched to .sf-perftbl above; full-cell 3-tier conditional formatting (favorable/immaterial/unfavorable) on the Chg/bps column, tokens only (color-mix() against the design-system vars, not hardcoded rgba literals, so the tint always tracks the token if it's retuned). ============================================================ */ /* Reserve the fully-populated table's height (measured ~548px) on the persistent container so picking/clearing scopes never collapses the card — that collapse was shrinking the space below the Compare/vs. pills, cramping the type-to-search popup they open. */ #newdev-screen #sf-compare-content { min-height: 560px; display: flex; flex-direction: column; } #newdev-screen .sf-cmp-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--rule-hairline); border-radius: var(--radius-sm); background: var(--gsb-paper); } #newdev-screen .sf-cmp-table { width: 100%; min-width: 460px; table-layout: fixed; border-collapse: collapse; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } #newdev-screen .sf-cmp-table col.sf-cmp-col-label { width: 38%; } #newdev-screen .sf-cmp-table col.sf-cmp-col-scope { width: 27%; } #newdev-screen .sf-cmp-table col.sf-cmp-col-chg { width: 84px; } /* header row: dark soil-ink motif, retained from the original version */ #newdev-screen .sf-cmp-headrow th { background: var(--gsb-soil-ink); box-sizing: border-box; padding: 4px 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; line-height: 1.35; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gsb-paper); text-align: right; white-space: nowrap; border-bottom: none; } #newdev-screen .sf-cmp-th--label { text-align: left; color: var(--gsb-oat-dk); font-weight: 500; } /* Scope labels ("NBC (28/29)", a long saved-list name, etc.) can run long — wrap onto a 2nd line instead of ellipsis-truncating, so the venue-count caveat is never hidden. (Selector needs the extra .sf-cmp-headrow/th to out-specificity the base white-space:nowrap rule above, which also targets `th` directly.) */ #newdev-screen .sf-cmp-headrow th.sf-cmp-th--scope { white-space: normal; overflow-wrap: break-word; } #newdev-screen .sf-cmp-th--chg { color: var(--gsb-leaf); } /* body rows: density matched exactly to the .sf-perftbl precedent above */ #newdev-screen .sf-cmp-row > td { box-sizing: border-box; padding: 5px 6px; border-bottom: 1px solid var(--gsb-oat); white-space: nowrap; font-size: 12px; line-height: 1.3; } #newdev-screen .sf-cmp-row:not(.sf-cmp-total):hover > td { background: color-mix(in srgb, var(--gsb-oat) 40%, var(--gsb-paper)); } #newdev-screen .sf-cmp-table tbody tr:last-child > td { border-bottom: none; } #newdev-screen .sf-cmp-label { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--gsb-soil-ink); text-align: left; } #newdev-screen .sf-cmp-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; color: var(--gsb-soil-ink); text-align: right; } /* Chg / bps delta cell: full-cell conditional fill, 3-tier heat scale */ #newdev-screen .sf-cmp-delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; text-align: right; padding: 5px 8px; letter-spacing: 0.01em; } #newdev-screen .sf-cmp-arrow { display: inline-block; margin-right: 3px; font-size: 9px; opacity: 0.85; transform: translateY(-1px); } #newdev-screen .sf-cmp-delta-pos { background: color-mix(in srgb, var(--gsb-shoot-green) 13%, var(--gsb-paper)); color: var(--gsb-shoot-green); } #newdev-screen .sf-cmp-delta-neu { background: color-mix(in srgb, var(--gsb-ochre) 13%, var(--gsb-paper)); color: var(--gsb-ochre); } #newdev-screen .sf-cmp-delta-neg { background: color-mix(in srgb, var(--gsb-clay) 13%, var(--gsb-paper)); color: var(--gsb-clay); } /* Store Level EBITDA $ / % total rows — tan/oat band, retained from the original version */ #newdev-screen .sf-cmp-total > td { background: var(--gsb-oat); border-top: 1px solid var(--gsb-stone); border-bottom: 1px solid var(--gsb-stone); font-weight: 700; } #newdev-screen .sf-cmp-total .sf-cmp-label, #newdev-screen .sf-cmp-total .sf-cmp-val { font-weight: 700; color: var(--gsb-soil-ink); } #newdev-screen .sf-cmp-total .sf-cmp-delta-pos { background: color-mix(in srgb, var(--gsb-shoot-green) 22%, var(--gsb-oat)); } #newdev-screen .sf-cmp-total .sf-cmp-delta-neu { background: color-mix(in srgb, var(--gsb-ochre) 22%, var(--gsb-oat)); } #newdev-screen .sf-cmp-total .sf-cmp-delta-neg { background: color-mix(in srgb, var(--gsb-clay) 22%, var(--gsb-oat)); } /* "MARGINS (% OF SALES)" full-width divider row — stone motif, retained */ #newdev-screen .sf-cmp-divider td { background: var(--gsb-stone); color: var(--gsb-paper); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 3px 6px; text-align: left; border-bottom: none; } /* Scope pill (Compare / vs.) — same stepper+search-popup pattern as the top-of-page #newdev-venue-pill, sized for this wider card instead of the cramped command bar (display flexes instead of a fixed 150px). */ #newdev-screen .sf-scope-pill { display: flex; align-items: stretch; width: 100%; border: var(--rule-hairline); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; transition: border-color 120ms var(--ease-out); } #newdev-screen .sf-scope-pill:hover { border-color: var(--gsb-shoot-green); } #newdev-screen .sf-scope-pill-btn { flex: 0 0 auto; padding: 7px 10px; font-size: 12px; font-family: var(--font-mono); color: var(--gsb-shoot-green); background: transparent; border: none; cursor: pointer; } #newdev-screen .sf-scope-pill-btn:hover { background: var(--gsb-oat); } #newdev-screen .sf-scope-pill-display { flex: 1 1 auto; min-width: 0; padding: 7px 8px; font-size: 12px; font-family: var(--font-body); color: var(--gsb-soil-ink); text-align: center; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 1px solid var(--gsb-oat); border-right: 1px solid var(--gsb-oat); } #newdev-screen .sf-scope-pill-display:hover { background: var(--gsb-oat); } /* Search popup opened by clicking a scope-pill display (matches #newdev-store-picker-popup). NOT scoped under #newdev-screen: the popup is appended to document.body (so it can float above everything via position:absolute without being clipped by any ancestor's overflow), which puts it outside #newdev-screen's DOM subtree — a scoped selector would never match it. */ .sf-scope-picker-popup { position: absolute; background: var(--color-surface); border: var(--rule-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); z-index: 1000; max-height: 360px; width: 260px; display: flex; flex-direction: column; overflow: hidden; } .sf-scope-picker-search { padding: 8px; border-bottom: var(--rule-hairline); flex: 0 0 auto; } .sf-scope-picker-search input { width: 100%; box-sizing: border-box; padding: 7px 10px; border: var(--rule-hairline); border-radius: var(--radius-md); font-size: 12px; font-family: var(--font-body); outline: none; } .sf-scope-picker-list { overflow-y: auto; flex: 1 1 auto; } .sf-scope-picker-option { padding: 8px 12px; cursor: pointer; font-size: 12px; font-family: var(--font-body); color: var(--gsb-soil-ink); border-bottom: 1px solid var(--gsb-oat); } .sf-scope-picker-option:hover { background: var(--gsb-oat); } .sf-scope-picker-option.selected { background: color-mix(in srgb, var(--gsb-shoot-green) 13%, var(--gsb-paper)); font-weight: 600; } .sf-scope-picker-empty { padding: 20px; text-align: center; color: var(--gsb-stone); font-size: 12px; } /* 7-day sparkline (parent platform rows) */ #newdev-screen .sf-spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 11px; margin-left: 7px; } #newdev-screen .sf-spark i { width: 3px; background: var(--gsb-oat-dk); display: inline-block; border-radius: 0.5px; } #newdev-screen .sf-spark i.prev { background: var(--gsb-leaf); } #newdev-screen .sf-spark i.up { background: var(--gsb-shoot-green); } #newdev-screen .sf-spark i.dn { background: var(--gsb-clay); } /* Share-of-sales bar (card footer) */ #newdev-screen .sf-share { display: flex; height: 9px; border-radius: 2px; overflow: hidden; gap: 1px; margin: 10px 8px 2px; } #newdev-screen .sf-share div { min-width: 2px; } #newdev-screen .sf-sharelegend { font-family: var(--font-mono) !important; font-size: 10px; letter-spacing: 0.05em; color: var(--gsb-stone); margin: 4px 8px 8px; text-transform: uppercase; } /* Daily-flash strip blends into the masthead as the editorial subtitle */ #newdev-screen .daily-flash-bar.dff-empty { display: none; } #newdev-screen #daily-flash-bar .dff-headline { font-family: var(--font-display); font-style: italic; font-size: 13.5px; } /* Mobile flash keeps its own hero — hide the desktop masthead/KPI band there */ @media (max-width: 600px) { #newdev-screen .flash-masthead, #newdev-screen .flash-kpis { display: none !important; } } /* ============================================================================ DAILY FLASH 2026-07 exec-layer redesign — masthead + footer chrome. (Tiers retired; see js/newdev-app.js buildMasthead/buildFlashFooter.) ============================================================================ */ /* --- horizon tape: five windows, attainment over SSS --- */ #newdev-screen .dff-tape, #period-insights-screen .dff-tape { display:flex; border-top:2px solid var(--gsb-soil-ink); border-bottom:var(--rule-hairline); margin:0 0 var(--space-2); font-family:var(--font-mono); font-variant-numeric:tabular-nums; } #newdev-screen .dff-tape .tp-cell, #period-insights-screen .dff-tape .tp-cell { flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:1px; padding:var(--space-2) 0 5px; border-right:var(--rule-hairline); min-width:0; } #newdev-screen .dff-tape .tp-cell:last-child, #period-insights-screen .dff-tape .tp-cell:last-child { border-right:0; } #newdev-screen .dff-tape .tp-k, #period-insights-screen .dff-tape .tp-k { font-size:9px; letter-spacing:var(--tracking-label); color:var(--gsb-stone); } #newdev-screen .dff-tape .tp-a, #period-insights-screen .dff-tape .tp-a { font-size:13px; font-weight:600; } #newdev-screen .dff-tape .tp-s, #period-insights-screen .dff-tape .tp-s { font-size:10px; } #newdev-screen .dff-tape .pos, #period-insights-screen .dff-tape .pos { color:var(--gsb-shoot-green); } #newdev-screen .dff-tape .neg, #period-insights-screen .dff-tape .neg { color:var(--gsb-clay); } #newdev-screen .dff-tape .flat, #period-insights-screen .dff-tape .flat { color:var(--gsb-soil-ink); } /* ±1% dead-band reads calm ink, not clay */ #newdev-screen .dff-tape .mut, #period-insights-screen .dff-tape .mut { color:var(--gsb-stone); } /* --- BU heat strip --- */ #newdev-screen .dff-bustrip, #period-insights-screen .dff-bustrip { display:flex; gap:4px; flex-wrap:wrap; margin:0 0 var(--space-2); } #newdev-screen .dff-bustrip .bu-tile, #period-insights-screen .dff-bustrip .bu-tile { flex:1 1 0; min-width:54px; text-align:center; font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--gsb-stone); padding:3px 2px 4px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:rgba(255,255,255,0.5); } #newdev-screen .dff-bustrip .bu-tile b, #period-insights-screen .dff-bustrip .bu-tile b { display:block; font-size:10px; font-weight:600; letter-spacing:0; } #newdev-screen .dff-bustrip .bu-tile.up, #period-insights-screen .dff-bustrip .bu-tile.up { background:rgba(47,107,69,0.10); border-color:rgba(47,107,69,0.28); } #newdev-screen .dff-bustrip .bu-tile.dn, #period-insights-screen .dff-bustrip .bu-tile.dn { background:rgba(181,83,46,0.09); border-color:rgba(181,83,46,0.26); } #newdev-screen .dff-bustrip .pos, #period-insights-screen .dff-bustrip .pos { color:var(--gsb-shoot-green); } #newdev-screen .dff-bustrip .neg, #period-insights-screen .dff-bustrip .neg { color:var(--gsb-clay); } #newdev-screen .dff-bustrip .mut, #period-insights-screen .dff-bustrip .mut { color:var(--gsb-stone); } /* --- masthead meta row: pace dial · day-type chip · confirmed-quiet --- */ #newdev-screen .dff-mhmeta, #period-insights-screen .dff-mhmeta { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; font-family:var(--font-mono); font-size:10px; color:var(--gsb-stone); padding:0 1px var(--space-2); margin-bottom:var(--space-3); border-bottom:var(--rule-hairline); } #newdev-screen .dff-mhmeta b, #period-insights-screen .dff-mhmeta b { font-weight:600; } #newdev-screen .dff-mhmeta .pos, #period-insights-screen .dff-mhmeta .pos { color:var(--gsb-shoot-green); } #newdev-screen .dff-mhmeta .neg, #period-insights-screen .dff-mhmeta .neg { color:var(--gsb-clay); } #newdev-screen .dff-daytype, #period-insights-screen .dff-daytype { border:1px solid var(--gsb-stone); border-radius:999px; padding:1px 8px; font-size:8.5px; letter-spacing:0.07em; color:var(--gsb-soil-ink); } #newdev-screen .dff-daytype.quiet, #period-insights-screen .dff-daytype.quiet { border-color:rgba(47,107,69,0.5); color:var(--gsb-shoot-green); } /* --- green tag pill (CLEARED / IMPROVING / STEADY / NEW / MILESTONE) --- */ #newdev-screen .dff-md .dff-tag--green, #period-insights-screen .dff-md .dff-tag--green { color:var(--gsb-shoot-green); background:rgba(47,107,69,0.10); border:1px solid rgba(47,107,69,0.30); } /* --- The Steady section accent --- */ #newdev-screen .dff-section[data-section="steady"], #period-insights-screen .dff-section[data-section="steady"] { border-left-color:var(--gsb-shoot-green); } /* --- heatboard quadrant kicker --- */ #newdev-screen .hb-quad, #period-insights-screen .hb-quad { display:block; font-family:var(--font-mono); font-size:8px; letter-spacing:0.05em; text-transform:uppercase; margin-top:1px; } #newdev-screen .hb-quad.hb-green, #period-insights-screen .hb-quad.hb-green { color:var(--gsb-shoot-green); } #newdev-screen .hb-quad.hb-amber_soft, #period-insights-screen .hb-quad.hb-amber_soft, #newdev-screen .hb-quad.hb-amber_plan, #period-insights-screen .hb-quad.hb-amber_plan { color:#8A6420; } #newdev-screen .hb-quad.hb-red, #period-insights-screen .hb-quad.hb-red { color:var(--gsb-clay); } /* --- footer: landing strip + breadth meter + ledger line --- */ #newdev-screen .dff-landing, #period-insights-screen .dff-landing { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; font-family:var(--font-mono); font-size:9.5px; color:var(--gsb-stone); border-top:2px solid var(--gsb-soil-ink); margin-top:var(--space-3); padding-top:var(--space-2); } #newdev-screen .dff-landing .land-k, #period-insights-screen .dff-landing .land-k { font-size:8.5px; letter-spacing:var(--tracking-label); text-transform:uppercase; } #newdev-screen .dff-landing .land-track, #period-insights-screen .dff-landing .land-track { position:relative; width:96px; height:5px; background:var(--gsb-oat); border-radius:3px; } #newdev-screen .dff-landing .land-fill, #period-insights-screen .dff-landing .land-fill { position:absolute; left:0; top:0; bottom:0; background:var(--gsb-soil-ink); opacity:0.7; border-radius:3px; } #newdev-screen .dff-landing .land-tick, #period-insights-screen .dff-landing .land-tick { position:absolute; right:0; top:-2px; bottom:-2px; width:1.5px; background:var(--gsb-soil-ink); } #newdev-screen .dff-landing .sep, #period-insights-screen .dff-landing .sep { width:1px; height:10px; background:var(--color-border); } #newdev-screen .dff-landing .pos, #newdev-screen .dff-landing b.pos, #period-insights-screen .dff-landing .pos { color:var(--gsb-shoot-green); } #newdev-screen .dff-landing .neg, #period-insights-screen .dff-landing .neg { color:var(--gsb-clay); } #newdev-screen .dff-landing .mut, #period-insights-screen .dff-landing .mut { color:var(--gsb-stone); opacity:0.85; } #newdev-screen .dff-footbar, #period-insights-screen .dff-footbar { margin-top:var(--space-2); } #newdev-screen .dff-footledger, #period-insights-screen .dff-footledger { font-family:var(--font-mono); font-size:9px; color:var(--gsb-stone); line-height:1.7; margin:var(--space-1) 0 var(--space-2); } /* --- Phase-2: 2yr-stack base tags on the heatboard + chronic register tier --- */ #newdev-screen .hb-base{ font-family:var(--font-mono); font-size:8px; letter-spacing:.06em; margin-left:4px; padding:0 4px; border-radius:2px; vertical-align:1px; } #newdev-screen .hb-base--easy{ background:color-mix(in srgb, var(--gsb-ochre) 18%, transparent); color:var(--gsb-ochre); } #newdev-screen .hb-base--hard{ background:color-mix(in srgb, var(--gsb-shoot-green) 15%, transparent); color:var(--gsb-shoot-green); } #newdev-screen .hb-base--clean{ color:var(--gsb-stone); } /* 2026-07-11 fix: below ~600px the tape's legend + five windows collide (labels overpainted each other) — keep one calm row and let it swipe sideways instead of crushing. */ @media (max-width:600px){ #newdev-screen .dff-tape, #period-insights-screen .dff-tape { overflow-x:auto; -webkit-overflow-scrolling:touch; } #newdev-screen .dff-tape .tp-cell, #period-insights-screen .dff-tape .tp-cell { flex:1 0 66px; } } /* --- masthead legend labels (2026-07-10: the tape/strip were unlabeled — owner couldn't read them) --- */ #newdev-screen .dff-tape .tp-legend{ flex:0 0 auto; align-items:flex-start; padding-right:10px; border-right:1px solid var(--color-border); } #newdev-screen .tp-a-lab, #newdev-screen .tp-s-lab{ font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--gsb-stone); line-height:1.9; } #newdev-screen .tp-a-lab{ font-size:10px; font-weight:600; } #newdev-screen .dff-bustrip-cap{ font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--gsb-stone); margin:var(--space-2) 0 3px; }