/* ============================================================================ AXES ARE THE CONTRACT ============================================================================ The Report page is governed by TWO axes: TIME (the picker) and SCOPE (the starmap, when built). Every visualization on this page must honor both. This is non-negotiable. Honoring TIME means: • The picker's grain determines what data shape each section shows. • Form scales with grain: heatmap = calendar at year/quarter/month, pivots to day×work-type at week. Throughput = line chart with sub-grain points (monthly at year-grain, weekly at month-grain, daily at week-grain). KPI deltas compare YoY relative to grain. • "This visualization doesn't make sense at grain X" is NOT a valid answer. If the form breaks, the form is wrong, not the axis. Either redesign the form to scale, or it doesn't belong on this page. (It might belong on a different page with a different axis contract — that's fine. But here, the axis wins.) Honoring SCOPE means: • The selected scope (HQ → Region → Area → Site → Personnel) filters the data feeding every visualization. • Sections that compare across siblings (e.g., Site Fingerprints comparing Foster vs Hansen) follow special rules at certain scopes; see SCHEMA_V2_INTENT.md. • Personnel-level visibility is gated by viewer role (the chief-line). Visualizations that *can* break down by clinician only render those breakdowns for users below the line. Same axis logic, viewer-aware. How drift starts: • Designer/Claude builds a section and reaches for a form that "feels right" without checking it against the contract. The visualization ends up implicitly hardcoded to one grain or one scope. • Later, when the picker is set to a different grain, the section doesn't respond, and the natural reaction is "well, this section doesn't really fit at that grain" — which sounds reasonable but IS the failure. The fix is not to exempt the section. The fix is to redesign until it scales, or to acknowledge it belongs elsewhere. How to use this as a check: • Before adding a section: how does it look at each grain (week, month, quarter, year)? At each scope (one site, one area, region, HQ)? If you can't answer for every combination, you haven't designed it yet. • When something on the page looks broken: ask "is it honoring the axes?" before asking "how do I patch this?" Drift hides inside local fixes that work for the current state but defy the contract. This statement exists because the pattern of building grain-blind sections has already happened on this codebase, twice. The first time it was caught after the build was complete; the second time it required scrapping consideration. Future-Claude: if you're about to build something and you haven't thought through how it scales along both axes, stop and think it through first. The retrofit is always more expensive than the up-front design. ============================================================================ */ /* ============================================================================ StatsCalc — shared stylesheet for all mockup pages Chrome, layout, nav, and table styling live here once. Page-specific row colors are scoped by a body class (.page-sessions, .page-cases). ============================================================================ */ /* ============================================================================ DESIGN TOKENS — the whole palette lives here. Light is the default (and the no-JS fallback). Dark is one override block keyed off [data-theme="dark"] on ; an inline script resolves OS preference + saved choice into that attribute before first paint (no flash). The login screen never sets the attribute, so it always renders the LIGHT values — its intentional dark-body / light-card splash, unchanged in either theme. ============================================================================ */ html { font-size: 100%; /* 16px default, anchors the rem scale; respects user/browser preferences */ } :root { /* surfaces */ --bg-body:#676767; --bg-app:#c9c9c9; --bg-sidebar:#d7d7d7; --bg-card:#e5e5e5; --bg-card-2:#ededed; --bg-band:#c2c2c2; --bg-input:#ffffff; --bg-derived:#d4d4d4; --bg-nav-hover:#d8b899; --bg-nav-active:#ab6128; --bg-accent-soft:#e8f0f8; /* native-menu pair — matches the chrome of OS / browser dropdown menus so our custom dropdowns (.date-picker-menu) read as native. Distinct from --bg-input + --text because native popup surfaces use slightly different tones than form inputs (lighter bg + sharper text). */ --menu-bg:#ffffff; --menu-text:#15141a; /* borders */ /* --border mirrors dark mode's pattern: body-bg color (the "out of bounds" surface around .app) — visibly distinct from in-app surfaces in both themes. Used as the outer 1px on the avail-strip and other 1px dividers across the codebase. */ --border:var(--bg-body); --border-input:transparent; --border-input-hover:#b08e69; --border-soft:#b8b5ad; --border-faint:#c2c2c2; --derived-border:#a8a8a8; --muted-line:#b0aca2; /* accent */ --accent:#2563a3; --accent-text:#1d4f87; --accent-hover:#1d4f87; --on-accent:#ffffff; --text-tab-title:#ffffff; /* Invariant stem holding the *light-mode* value of --accent-text. The live --accent-text token flips to --d-accent-text under dark mode; --l-accent-text stays #1d4f87 regardless so it can be referenced from a dark-mode rule (parallel to how --d-* stems hold the dark values for use from light-mode code paths). Used by the SSN's recessive blue ring. */ --l-accent-text:#1d4f87; --focus-ring:rgba(37,99,163,0.14); /* text */ --text:#1c1b18; --text-strong:#2e2c26; --text-2:#44433f; --text-3:#54524b; --text-muted:#5e5b54; --text-muted-2:#74726c; --text-faint:#867f73; --text-brand:#3a3833; --icon-nav:#6c6a64; /* row tints (sessions + cases semantic rows) */ --row-sage:#b9c2bc; --row-oat:#d8d3c8; --row-rose:#c5b8b5; --row-blush:#d8d0ce; --row-slate:#bdc6cc; --row-mist2:#d4dadd; /* Typography scale — 6 sizes for the whole report. One source of truth. display BLUF stat number, KPI value section-title card h2 chart-title italic-less title above a chart (.wait-chart-label etc.) body section descriptions, prose emphasis BLUF labels, target labels, hover/tooltips chart-text axis ticks, captions, in/near-SVG default Plus one ultra-dense escape hatch for the 52-week tier (--type-chart-text-xs). */ --type-display: 1.5rem; --type-section-title: 1.125rem; --type-chart-title: 0.8125rem; --type-body: 0.75rem; --type-emphasis: 0.6875rem; --type-chart-text: 0.625rem; /* default in/around SVG */ --type-chart-text-sm: 0.5625rem; /* dense — heatmap calendar, bar totals */ --type-chart-text-tag: 0.5rem; /* annotation tags overlaid on dense cells (heatmap hours, holiday) */ --type-chart-text-xs: 0.4rem; /* ultra-dense — 52-week tier */ /* KPI tokens — every property that should stay consistent across the four KPI tiles lives here. Reference these from .kpi-* rules so drift fails visibly (one literal in the token block) instead of silently (a stray 0.875rem in some new tile rule). The spark dimensions are duplicated in the SVG viewBox in report.html (84x22 = 5.25rem*16 / 1.375rem*16); if you change the tokens, update the viewBox too. */ --kpi-value-size: 1.75rem; /* the big number */ --kpi-secondary-size: 0.875rem; /* unit + raw-delta */ --kpi-delta-size: 0.71875rem; /* arrow + yoy line */ --kpi-spark-w: 5.25rem; --kpi-spark-h: 1.375rem; --kpi-tile-pad-y-top: 0.875rem; --kpi-tile-pad-x: 1rem; --kpi-tile-pad-y-bottom: 0.75rem; --kpi-tile-gap: 14px; --kpi-data: var(--accent); /* unified spark + delta color */ /* Legend tokens — single source for every chart legend, whether it's the HTML chart-frame legend that sits above a chart or an in-SVG legend embedded in the chart itself (heatmap utilization buckets). The marker-size + gap apply to HTML chart-frame legends only; in-SVG legend swatch dimensions are SVG-attribute values, set as module-level constants in the relevant builder. */ --legend-text-size: var(--type-body); --legend-marker-size: 14px; --legend-gap: 0.375rem; /* Graph fill-opacity tiers — one knob per visual weight. Apply to data fills (bars, areas, ribbons, bubbles). Deliberate one-offs that fall outside these tiers stay inline with an `/* intentional */` comment so re-tokenization doesn't flatten them. */ --graph-fill-75: 0.75; /* solid data fills */ --graph-fill-50: 0.5; /* secondary / base ribbons */ --graph-fill-25: 0.25; /* background overlays */ /* Region-tint — barely-visible fills that color a zone of the chart without competing with data ink. Used for target-defined zones (e.g. wait-chart's beyond-target band) and for range-defined zones (e.g. wait-trend's min-to-max spread). Far below the --graph-fill-* tiers because these sit BEHIND the data, not as part of it. */ --graph-zone-tint: 0.06; /* Letter-spacing tiers — three magnitudes for uppercase / small-caps labels. Label is the default (uppercase chip + section labels); accent is one step tighter (rarer secondary labels); emphasis is one step looser (column headers, top-level time picker). */ --letter-spacing-label: 0.04em; --letter-spacing-accent: 0.05em; --letter-spacing-emphasis: 0.06em; /* Stats-strip background — barely-there tonal lift behind hm-stat / closure-stats / throughput-stats / bluf-section rows so they read as a banded group without a hard border. Dark theme remaps this to the white-at-low-alpha sibling via the --d-* indirection below. */ --bg-stats: rgba(0, 0, 0, 0.06); /* Login chrome — the login page is pre-authentication so it sees no user theme preference. It carries its own neutral palette (mid-gray background, soft-gray footer text) instead of pointing at the light/dark themed tokens. */ --login-bg: #5e5e5e; --login-foot-text: #c2c2c2; } /* ---- DARK PALETTE ------------------------------------------------------- Dark values are defined ONCE below as --d-*. Two pointer blocks then map the real tokens onto them: the prefers-color-scheme media query (which needs NO JavaScript — locked-down browsers still get OS-driven dark) and the manual [data-theme="dark"] override (set by the JS toggle / saved choice). To change a dark color, edit it once in the --d-* block. ------------------------- */ :root { /* surfaces — Dark Reader "muddy" cool-gray cast, sampled from the references */ --d-bg-body:#4e5457; --d-bg-app:#363b3d; --d-bg-sidebar:#343739; --d-bg-card:#272a2c; --d-bg-card-2:#2e3234; --d-bg-band:#313638; --d-bg-input:#181a1b; --d-bg-derived:#43484a; --d-bg-nav-hover:#4d3d2e; --d-bg-nav-active:#a05c28; --d-bg-accent-soft:#2f4453; /* native dropdown menu chrome — matches Firefox Proton dark menu */ --d-menu-bg:#2b2a33; --d-menu-text:#fbfbfe; --d-bg-stats: rgba(255,255,255,0.06); /* borders */ --d-border:var(--d-bg-body); --d-border-input:transparent; --d-border-input-hover:#7c6448; --d-border-soft:#383d3f; --d-border-faint:#383d3f; --d-derived-border:#606568; --d-muted-line:#5a5f5a; /* accent — DR muted steel blue */ --d-accent:#5189c0; --d-accent-text:#c1d8ef; --d-accent-hover:#4779a8; --d-on-accent:#ffffff; --d-text-tab-title:#ffffff; --d-focus-ring:rgba(81,137,192,0.26); /* text — neutral light, same faint cool cast */ --d-text:#dde0e0; --d-text-strong:#eef0f0; --d-text-2:#c6cacb; --d-text-3:#aeb2b3; --d-text-muted:#a1a5a5; --d-text-muted-2:#999da0; --d-text-faint:#a0a4a3; --d-text-brand:#dde0e0; --d-icon-nav:#82888a; /* row tints — your purpose-built HUES kept; lightness tuned to sit ~1.25:1 above the dark recessed card (#272a2c) as gentle raised bands */ --d-row-sage:#313c37; --d-row-oat:#3d382b; --d-row-rose:#45332f; --d-row-blush:#3a3433; --d-row-slate:#2e3a46; --d-row-mist2:#333b41; } /* OS dark — applies with ZERO JavaScript when no override is set, or when override is "dark". A "light" override blocks this block, forcing light despite OS preference. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-body:var(--d-bg-body); --bg-app:var(--d-bg-app); --bg-sidebar:var(--d-bg-sidebar); --bg-card:var(--d-bg-card); --bg-card-2:var(--d-bg-card-2); --bg-band:var(--d-bg-band); --bg-input:var(--d-bg-input); --bg-derived:var(--d-bg-derived); --bg-nav-hover:var(--d-bg-nav-hover); --bg-nav-active:var(--d-bg-nav-active); --bg-accent-soft:var(--d-bg-accent-soft); --bg-stats:var(--d-bg-stats); --menu-bg:var(--d-menu-bg); --menu-text:var(--d-menu-text); --border:var(--d-border); --border-input:var(--d-border-input); --border-input-hover:var(--d-border-input-hover); --border-soft:var(--d-border-soft); --border-faint:var(--d-border-faint); --derived-border:var(--d-derived-border); --muted-line:var(--d-muted-line); --accent:var(--d-accent); --accent-text:var(--d-accent-text); --accent-hover:var(--d-accent-hover); --on-accent:var(--d-on-accent); --text-tab-title:var(--d-text-tab-title); --focus-ring:var(--d-focus-ring); --text:var(--d-text); --text-strong:var(--d-text-strong); --text-2:var(--d-text-2); --text-3:var(--d-text-3); --text-muted:var(--d-text-muted); --text-muted-2:var(--d-text-muted-2); --text-faint:var(--d-text-faint); --text-brand:var(--d-text-brand); --icon-nav:var(--d-icon-nav); --row-sage:var(--d-row-sage); --row-oat:var(--d-row-oat); --row-rose:var(--d-row-rose); --row-blush:var(--d-row-blush); --row-slate:var(--d-row-slate); --row-mist2:var(--d-row-mist2); } } /* Forced dark — toggle / saved choice; the only override, beats a light OS */ :root[data-theme="dark"] { --bg-body:var(--d-bg-body); --bg-app:var(--d-bg-app); --bg-sidebar:var(--d-bg-sidebar); --bg-card:var(--d-bg-card); --bg-card-2:var(--d-bg-card-2); --bg-band:var(--d-bg-band); --bg-input:var(--d-bg-input); --bg-derived:var(--d-bg-derived); --bg-nav-hover:var(--d-bg-nav-hover); --bg-nav-active:var(--d-bg-nav-active); --bg-accent-soft:var(--d-bg-accent-soft); --bg-stats:var(--d-bg-stats); --menu-bg:var(--d-menu-bg); --menu-text:var(--d-menu-text); --border:var(--d-border); --border-input:var(--d-border-input); --border-input-hover:var(--d-border-input-hover); --border-soft:var(--d-border-soft); --border-faint:var(--d-border-faint); --derived-border:var(--d-derived-border); --muted-line:var(--d-muted-line); --accent:var(--d-accent); --accent-text:var(--d-accent-text); --accent-hover:var(--d-accent-hover); --on-accent:var(--d-on-accent); --text-tab-title:var(--d-text-tab-title); --focus-ring:var(--d-focus-ring); --text:var(--d-text); --text-strong:var(--d-text-strong); --text-2:var(--d-text-2); --text-3:var(--d-text-3); --text-muted:var(--d-text-muted); --text-muted-2:var(--d-text-muted-2); --text-faint:var(--d-text-faint); --text-brand:var(--d-text-brand); --icon-nav:var(--d-icon-nav); --row-sage:var(--d-row-sage); --row-oat:var(--d-row-oat); --row-rose:var(--d-row-rose); --row-blush:var(--d-row-blush); --row-slate:var(--d-row-slate); --row-mist2:var(--d-row-mist2); } @font-face { font-family: 'Astoria'; src: url('../fonts/astoriaroman.woff2') format('woff2'), url('../fonts/astoriaroman.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } } html, body { margin: 0; padding: 0; } body { font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 0.875rem; line-height: 1.5; color: var(--text); background: var(--bg-body); -webkit-font-smoothing: antialiased; min-height: 100vh; } /* ---- App shell ---------------------------------------------------------- */ .app { display: flex; min-height: 100vh; max-width: 1680px; margin: 0 auto; background: var(--bg-app); border-left: 1px solid var(--border); border-right: 1px solid var(--border); } aside.sidebar { width: 220px; flex-shrink: 0; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; } /* ---- Brand -------------------------------------------------------------- */ .brand { padding: 1rem 1.25rem 1.125rem; border-bottom: 1px solid var(--border); text-align: center; } .brand .logo { display: block; height: 130px; width: auto; margin: 0 auto; } .brand .context { font-size: var(--type-body); color: var(--text-muted-2); margin-top: 0.25rem; line-height: 1.4; } .brand .context-org { font-size: var(--type-emphasis); letter-spacing: 0.02em; } .brand .context-sep { margin: 0 0.375rem; opacity: 0.65; } .brand .context-site { color: var(--text-3); font-weight: 500; } /* ---- Navigation --------------------------------------------------------- */ nav.main-nav { padding: 0.875rem 0.625rem; display: flex; flex-direction: column; gap: 1px; flex: 1; } .nav-section-label { font-size: var(--type-emphasis); font-weight: 500; letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--text-muted-2); padding: 0.375rem 0.75rem 0.25rem; margin-top: 0.375rem; } .nav-section-label:first-child { margin-top: 0; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 0.5rem 0.75rem; font-size: 0.84375rem; color: var(--text-brand); border-radius: 6px; text-decoration: none; cursor: pointer; transition: background-color 100ms ease; } .nav-item:hover { background: var(--bg-nav-hover); } .nav-item i { font-size: 1.0625rem; color: var(--icon-nav); } .nav-item.active { background: var(--bg-nav-active); color: var(--on-accent); font-weight: 500; } .nav-item.active i { color: var(--on-accent); } /* Sub-nav (per-card jump list) — only rendered on /report/. Visually subordinate to the parent .nav-item: indented, no icon, smaller type, no fill on hover/active. Active state (lit by scroll-spy in js/report_subnav.js) is a left-edge accent bar + accent text color so the chip can't be mistaken for the page-level .nav-item.active fill. */ .nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 0.125rem 0 0.25rem 1.625rem; padding-left: 0.5rem; border-left: 1px solid var(--border); } .nav-sub-item { font-size: 0.78125rem; color: var(--text-muted); padding: 0.25rem 0.5rem; border-radius: 4px; text-decoration: none; border-left: 2px solid transparent; margin-left: -0.625rem; /* hangs the chip-active accent bar over the .nav-sub left rule */ padding-left: 0.625rem; transition: background-color 100ms ease, color 100ms ease; } .nav-sub-item:hover { background: var(--bg-nav-hover); color: var(--text); } .nav-sub-item.is-active { color: var(--accent-text); border-left-color: var(--accent); font-weight: 500; } /* Anchor-jump smooth scroll — scoped to the report page so the rest of the app keeps native instant jump semantics. */ body.page-report { scroll-behavior: smooth; } /* When the chip's anchor lands on a section title, leave breathing room above so the card's own chrome (padding, surrounding whitespace) sits visible above the title instead of cropping flush at the viewport top. */ body.page-report .report-section-title[id] { scroll-margin-top: 1.5rem; } /* ---- Landing page ------------------------------------------------------ Post-login dispatch lands on one of two templates: landing.html for every authenticated role, unknown.html for accounts with no role assigned. Both share the .report-section card idiom and the accounts/_current_account_card.html identity bar at top so the visual vocabulary matches the accounts admin pages. landing.html carries a welcome blurb (with previous-login timestamp), a single-row self-edit excerpt, and a reset-password button. The self-row reuses the .accounts-table column classes so visual rhythm matches the admin accounts list one-for-one. */ /* Previous-login timestamp pill in the welcome blurb — tabular-nums for vertical column alignment, slight color lift so the timestamp stands out as data inside the prose. */ .landing-last-login { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 500; } /* Reset-password sub-section under the self-edit row — bottom of the card. Spacing only; no divider. The card's own surface is the container and a hairline would just add chrome the section doesn't need. */ .landing-reset-password { margin-top: 1.25rem; } /* Self-edit row height — anchored to the .btn "Edit" affordance in display mode (~48px including td padding). Without an explicit tr height, edit mode loses that anchor (the col-row-action cell goes empty) and collapses to the input's natural height (~34px), producing a visible shrink on the toggle. Setting tr height behaves as min-height per CSS table rendering — the row stays at 3rem unless content forces it taller. Scoped to .page-landing so the accounts admin's own .accounts-table tables (manage.html, audit.html) aren't affected. */ .page-landing .accounts-table tr { height: 3rem; } /* ---- User block --------------------------------------------------------- */ /* Identity badge at the bottom of the sidebar — also the "return to landing" affordance (see _sidebar.html). Anchor styling strips the default underline + color so the badge reads as identity, not a typographic link; intentionally NO hover background — adjacent to sign-out the quieter treatment reads as a settled bottom-of-sidebar surface rather than another orange-flashing affordance. focus-visible keeps a keyboard outline for accessibility. */ .user-block { padding: 0.75rem 1.125rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; } .user-block:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: var(--type-body); font-weight: 600; } .user-name { font-size: var(--type-chart-title); font-weight: 500; color: var(--text); line-height: 1.2; } .user-role { font-size: 0.71875rem; color: var(--text-muted-2); line-height: 1.2; margin-top: 0.125rem; } /* Sidebar footer — Sign-out occupies the left, Theme toggle pins to the right. Moved out of .user-block because cramming the toggle next to the user's name/role caused clipping past the sidebar edge on long names. */ .sidebar-footer { display: flex; align-items: center; gap: 8px; padding-right: 0.75rem; } .sidebar-footer .sign-out-form { flex: 1 1 auto; min-width: 0; } .sign-out-row { padding: 0.625rem 1.125rem; display: flex; align-items: center; gap: 10px; font-size: var(--type-body); color: var(--text-muted-2); text-decoration: none; cursor: pointer; width: 100%; background: transparent; border: 0; font-family: inherit; text-align: left; } .sign-out-row i { font-size: 1rem; line-height: 1; width: 2rem; text-align: center; } @media (hover: hover) and (pointer: fine) { .sign-out-row:hover { color: var(--text); } } .sign-out-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; color: var(--text); } /* ---- Main content ------------------------------------------------------- */ main.content { flex: 1; padding: 1.5rem 2rem; display: flex; flex-direction: column; min-width: 0; } .content-header { display: flex; align-items: center; gap: 2rem; min-height: 5rem; /* 80px — back to original envelope; avail-strip (now ~74px without padding) fits comfortably so the container stays at this min-height on data-entry pages too, matching analysis pages */ margin-bottom: 1.375rem; } .tab-title { font-family: 'Astoria', Georgia, 'Times New Roman', serif; font-size: 2.25rem; font-weight: 400; letter-spacing: 0; line-height: 1; color: var(--text-tab-title); text-transform: lowercase; margin-left: auto; } /* ---- Week / date picker ------------------------------------------------- */ .time-picker { display: flex; align-items: center; gap: 6px; } .time-picker button, .time-picker .zoom, .time-picker .step { width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-nav-hover); border: 0; border-radius: 6px; color: var(--text-2); cursor: pointer; text-decoration: none; transition: background 100ms ease, color 100ms ease; } /* Time picker — Report-page time control. Outer buttons change grain (zoom); inner buttons step within the current grain. The .time-label adapts its format ("May 2026" → "Q2 2026" → "2026") so the grain is implicit in the value. */ .time-picker .zoom + .step, .time-picker .step + .zoom { margin-left: 0.375rem; /* extra breathing room between zoom-pair and step-pair */ } .time-picker .time-label { font-size: 0.9375rem; font-weight: 500; color: var(--text); padding: 0 0.625rem; /* Fixed width — wide enough for the longest possible label across every page that uses the time-picker. Report's worst case is 'Calendar Year · Q3 2026' (≈22 chars) PLUS the chevron-down icon and the 1.5rem button padding (see button.time-label below); the data-entry pages' worst case is 'Dec 28, 2025 – Jan 3, 2026' (≈24 chars) without a trailing icon. The button case is the binding constraint, so the shared width is 16rem — locking the prev/next chevrons at the same x-position across every page that uses .time-picker (Report, Output, Engagement/Sessions/Cases). */ width: 16rem; flex-shrink: 0; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; } /* Fiscal/Calendar Year prefix on the Report-page label — rendered as secondary information (the period itself is the headline). Muted color + slightly lighter weight de-emphasizes the cycle name relative to the period_main text it precedes. On button hover and while the dropdown menu is open, the cycle name flips to --on-accent to match the rest of the button text (muted dark on loud-orange bg would otherwise read as muddy contrast); the lighter weight stays so the secondary-information cue survives the color match. */ .time-picker .time-label-cycle { color: var(--text-muted); font-weight: 400; } @media (hover: hover) and (pointer: fine) { button.time-label:hover .time-label-cycle, button.time-label[aria-expanded="true"] .time-label-cycle { color: var(--on-accent); } } /* Non-interactive convention: when a time-nav control isn't actionable (e.g., the zoom-in glyph at month-grain, the zoom-out at year-grain), strip the orange affordance entirely so the glyph reads as an indicator, not a disabled button. Dim/opacity is reserved for "this *was* clickable, isn't right now" — different semantic. pointer-events:none neuters hover so the hover rule below can't repaint the orange. */ .time-picker button:disabled, .time-picker .is-disabled { background: transparent; pointer-events: none; } /* ---- Tables grid -------------------------------------------------------- */ .tables-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } /* ---- Metric table (shared by sessions + cases) -------------------------- */ .metric-table { background: var(--bg-card); border: 0; border-radius: 8px; padding: 0.875rem 0.875rem 0.75rem; min-width: 0; overflow: hidden; } .metric-table .table-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 0.75rem; gap: 8px; } .metric-table h3 { font-size: var(--type-chart-title); font-weight: 600; text-transform: uppercase; color: var(--text-strong); margin: 0; } .metric-table .current-open { font-size: var(--type-emphasis); color: var(--text-muted); white-space: nowrap; } .metric-table .current-open strong { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-strong); } .metric-table table { width: 100%; border-collapse: collapse; table-layout: fixed; } .metric-table th { font-size: var(--type-emphasis); font-weight: 500; color: var(--text-muted); text-align: center; padding: 0 0 0.25rem; } .metric-table th.label-col { text-align: left; width: 42%; padding-left: 0.125rem; } body.page-sessions .metric-table th.label-col { width: 22%; } body.page-sessions .metric-table td.label-cell { white-space: nowrap; } body.page-cases .metric-table th.label-col { width: 36%; } body.page-cases .metric-table td.label-cell { white-space: nowrap; } .metric-table th .dow { display: block; line-height: 1.2; } .metric-table th .date { display: block; line-height: 1.2; font-weight: 400; color: var(--text-faint); font-size: 0.65625rem; margin-top: 0.0625rem; font-variant-numeric: tabular-nums; } .metric-table td { padding: 0.1875rem 0.125rem; } .metric-table td.label-cell { font-size: var(--type-body); color: var(--text-2); padding-left: 0.125rem; } /* Inputs inside metric-table — shared chrome (box, border, hover, focus) for text, number, and select. Alignment splits by data shape: numeric inputs → center (looks balanced for tabular numbers) selects (labels) → left (categorical labels read left-aligned). */ .metric-table input[type="text"], .metric-table input[type="number"], .metric-table select, .metric-table .date-picker-btn { width: 100%; height: 30px; padding: 0 0.375rem; font-family: inherit; font-size: var(--type-chart-title); color: var(--text); background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 4px; outline: none; transition: border-color 100ms ease, box-shadow 100ms ease; } .metric-table input[type="text"], .metric-table input[type="number"] { text-align: center; font-variant-numeric: tabular-nums; } .metric-table select, .metric-table .date-picker-btn { text-align: left; } .metric-table input:hover, .metric-table select:hover, .metric-table .date-picker-btn:hover { border-color: var(--border-input-hover); } .metric-table input:focus, .metric-table select:focus, .metric-table .date-picker-btn:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .groups-table th { text-align: left; padding: 0 0.25rem 0.25rem; font-weight: 500; } /* ---- Page-scoped row colors: SESSIONS ----------------------------------- */ /* Sessions / Hours / Virtual / No-shows / Cancellations */ /* Semantic classes (not nth-child) so a row keeps its color when reordered */ body.page-sessions .row-sessions { background: var(--row-slate); } /* sessions — blue (was sage) */ body.page-sessions .row-hours { background: var(--row-mist2); } /* hours — blue (was mist) */ body.page-sessions .row-virtual { background: var(--row-oat); } /* virtual */ body.page-sessions .row-noshows { background: var(--row-rose); } /* no-shows */ body.page-sessions .row-cancellations { background: var(--row-blush); } /* cancellations */ /* ---- Page-scoped row colors: CASES -------------------------------------- */ /* Semantic classes (not nth-child) because the Children table has an extra row */ body.page-cases .row-opened { background: var(--row-sage); } /* opened — cool/positive */ body.page-cases .row-special { background: var(--row-oat); } /* non-caretaker SA — neutral */ body.page-cases .row-closed-completed { background: var(--row-blush); } /* closed complete — lighter (good outcome) */ body.page-cases .row-closed-other { background: var(--row-rose); } /* closed other — darker (warrants a look) */ body.page-cases .row-transfer-in { background: var(--row-slate); } /* transfer in — slate pair */ body.page-cases .row-transfer-out { background: var(--row-mist2); } /* transfer out — slate pair */ /* ---- Save bar ----------------------------------------------------------- */ .save-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .save-bar .status { flex: 1; font-size: 0.78125rem; color: var(--text-muted-2); } .save-bar .status.dirty { font-style: italic; color: var(--text); } .save-bar .status.saving { font-style: italic; } /* ---- Buttons ------------------------------------------------------------ */ .btn { font-family: inherit; font-size: 0.84375rem; font-weight: 500; padding: 0.5rem 1rem; border-radius: 6px; border: 0; background: var(--bg-nav-hover); color: var(--text); cursor: pointer; transition: background 100ms ease, color 100ms ease; } @media (hover: hover) and (pointer: fine) { .btn:not(:disabled):hover { background: var(--bg-nav-active); color: var(--on-accent); } .add-row:hover { background: var(--bg-nav-active); color: var(--on-accent); } .time-picker button:not(:disabled):hover, .time-picker a.zoom:hover, .time-picker a.step:hover { background: var(--bg-nav-active); color: var(--on-accent); } } /* Non-interactive convention — mirrors the established `.time-picker button:disabled` idiom: strip the orange affordance so a boundary- state button reads as a status indicator, not a disabled control. Used on Promote/Demote at the rank ceiling / floor where there's nowhere further to go. */ .btn:disabled { background: transparent; color: var(--text-muted); pointer-events: none; } /* Primary affordance — accent blue at rest, darker accent on hover. Both selectors need bumped specificity: the hover variant has to beat the generic `.btn:not(:disabled):hover` (which hands plain `.btn` the orange affordance background — correct for secondary actions, wrong for primaries), and the anchor variant has to beat `a.btn` (which forces color: var(--text)). Without these, primary