/* * Republic OS — "Obsidian" design system. * * Dark-first premium console. Navy-tinted surface ramp, one burnt-orange * signal, DM Sans at 400/500, and DM Mono as an accent voice for IDs, * timestamps, metrics, code, and tiny uppercase labels. 8px controls, 12px * containers. Light uses whisper shadows; dark uses tonal depth plus hairlines. * * Theme is switched with [data-theme] on : dark is the default (bare * :root), light overrides via [data-theme="light"]. "System" resolves to one * of the two before paint (see the inline boot script in the layout head). * * Served as-is by Propshaft. Class names are kept stable so existing views * inherit the new look without markup churn. */ /* ============================================================ Fonts — self-hosted from app/assets/fonts (no Google Fonts CDN). DM Sans is a variable font, one file covers weights 400–700. Propshaft rewrites the url()s to digested asset paths. ============================================================ */ @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/dm-sans-latin-c2796eef.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/dm-sans-latin-ext-49348ecb.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/dm-mono-400-latin-bf792450.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/dm-mono-400-latin-ext-c908ed67.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/dm-mono-500-latin-e06c27ef.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/dm-mono-500-latin-ext-ba1b3349.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ============================================================ Theme tokens ============================================================ */ :root, [data-theme="dark"] { color-scheme: dark; /* Brand & accent — burnt orange, the ONLY chromatic brand color. Brightened a touch for dark surfaces so it reads as signal, not mud. */ --accent: #ff7a1a; --accent-hover: #ff8f3d; --accent-deep: #e86200; --accent-deeper: #c25100; --accent-ink: #1a0c00; /* text on an orange fill */ --accent-soft: rgba(255, 122, 26, 0.12); --accent-line: rgba(255, 122, 26, 0.38); --on-primary: #1a0c00; /* Surfaces — lifted navy-black ramp, tinted toward the brand anchor. canvas is the deepest; each step climbs toward a visible panel. Saturation held at 18% (was ~40%) so the tint reads as a whisper, not blue — same hue (222°) and lightness steps as before. */ --canvas: #101217; /* page background — near-black blue */ --background: #101217; --surface: #161920; /* default panel / nav / card */ --surface-muted: #1d212a; /* table heads, code, alt bands */ --surface-1: #1d212a; --surface-2: #262b36; /* hover / raised */ --surface-3: #2f3544; /* active / pressed */ --nav-hover: rgba(255, 255, 255, 0.035); /* subtle lift on nav rows */ --inverse-canvas: #eef2f9; /* the rare light region on dark */ --inverse-surface-1: #dbe1ec; /* Hairlines — visible on dark without glowing */ --line: #292e3b; --hairline: #292e3b; --hairline-mid: #3b4355; --hairline-strong: #545f78; /* Text — near-neutral ramp, just a whisper of navy (chroma cut hard vs. the surface ramp — tint reads on big fields, not on thin glyphs). */ --ink: #f2f3f5; /* headings, primary text */ --muted: #b6bac3; /* secondary text, ≥4.5:1 on canvas */ --ink-muted: #b6bac3; --ink-subtle: #a0a5b1; /* tertiary, captions, slugs — AA on all surfaces */ --inverse-ink: #05080f; --inverse-ink-muted: #3f4d68; /* Semantic — tuned for dark */ --success: #3ddc84; --success-soft: rgba(61, 220, 132, 0.13); --warning: #f5b942; --warning-soft: rgba(245, 185, 66, 0.13); --error: #ff5c63; --error-soft: rgba(255, 92, 99, 0.13); --danger: #ff5c63; --wip-ink: #f5b942; /* Category palette — data, not decoration (brightened for dark) */ --commerce: #5cb0ff; --marketing: #ff8f6b; --finance: #3ddc84; --infra: #8b9ec0; /* Selection / focus */ --selection-bg: rgba(255, 122, 26, 0.28); --selection-ink: var(--ink); --scrim: rgba(4, 8, 16, 0.72); } [data-theme="light"] { color-scheme: light; /* Burnt orange — deepened so links clear AA on the lightest surface */ --accent: #b35000; --accent-hover: #d96100; --accent-deep: #984500; --accent-deeper: #733400; --accent-ink: #ffffff; --accent-soft: rgba(189, 85, 0, 0.10); --accent-line: rgba(189, 85, 0, 0.32); --on-primary: #ffffff; /* Surfaces — navy-tinted near-whites */ --canvas: #f6f8fb; --background: #f6f8fb; --surface: #ffffff; --surface-muted: #f0f3f9; --surface-1: #f0f3f9; --surface-2: #e7ecf5; --surface-3: #dbe2ee; --nav-hover: rgba(10, 20, 38, 0.04); /* subtle lift on nav rows */ --inverse-canvas: #05080f; --inverse-surface-1: #131b2d; --line: #e4e9f2; --hairline: #e4e9f2; --hairline-mid: #c5cfe0; --hairline-strong: #0c1d37; --ink: #0b1425; --muted: #41506b; --ink-muted: #41506b; --ink-subtle: #5c6a86; /* AA on all surfaces */ --inverse-ink: #f7f9fc; --inverse-ink-muted: #b9c2d2; --success: #1a8f47; --success-soft: rgba(26, 143, 71, 0.10); --warning: #b07c00; --warning-soft: rgba(176, 124, 0, 0.12); --error: #d61f27; --error-soft: rgba(214, 31, 39, 0.09); --danger: #d61f27; --wip-ink: #946d00; --commerce: #2b7fd4; --marketing: #d35a3a; --finance: #1a8f47; --infra: #607394; --selection-bg: rgba(189, 85, 0, 0.18); --selection-ink: var(--ink); --scrim: rgba(12, 29, 55, 0.5); } /* ============================================================ Non-theme tokens ============================================================ */ :root { /* Spacing — 4px grid. The ladder law: label→value 4, icon↔text 8, control clusters 12, siblings-in-a-box 16, box interior 16v/20h (content starts 20px from the left hairline), between boxes 24, page frame 32. Pick by hierarchy level, never by eye. */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-20: 20px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-64: 64px; --space-section: 96px; /* Geometry — square corners by mandate (Joel, 2026-07-14). The radius tokens stay wired through every component so re-rounding is a two-line change; status dots remain circles (border-radius: 50%). */ --radius-sm: 0px; --radius-lg: 0px; --radius: var(--radius-sm); /* legacy alias */ /* Layout contracts */ --pad-card: 20px; --control-h: 36px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */ --dur: 0.12s; /* Z-index scale */ --z-sticky: 10; --z-popover: 30; --z-drawer-backdrop: 40; --z-drawer: 50; --z-toast: 60; /* Typography — DM family, no serif */ --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif; --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } * { box-sizing: border-box; } html { background: var(--canvas); } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Theme transition only when explicitly toggling (class set by JS), so navigation and first paint never animate a bulk color swap. */ .theme-animating, .theme-animating * { transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease) !important; } @media (prefers-reduced-motion: reduce) { .theme-animating, .theme-animating * { transition: none !important; } } /* ---------- Links ---------- */ a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-line); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--selection-bg); color: var(--selection-ink); } /* ---------- Typography ---------- */ h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); font-family: var(--sans); font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; } h1 { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; } h2 { margin-bottom: var(--space-md); font-size: 16px; line-height: 1.4; letter-spacing: -0.01em; } h3 { font-size: 14px; line-height: 1.45; letter-spacing: 0; } p { margin: 0; } strong { font-weight: 500; } code, kbd, samp, pre { font-family: var(--mono); } code { font-size: 0.9em; background: var(--surface-1); border: 1px solid var(--hairline); padding: 1px 6px; } /* Mono data utility — numbers, IDs, timestamps, counts */ .mono, .data { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } /* Sans digits that column-align — tables, counts, pagination. Mono is reserved for IDs, timestamps, metrics, and code (the Mono-Accent Rule). */ .nums { font-variant-numeric: tabular-nums; } /* ---------- Tables ---------- */ table { display: block; width: 100%; overflow-x: auto; border-collapse: separate; border-spacing: 0; border: 1px solid var(--hairline); border-radius: var(--radius-lg); font-size: 13px; } tr:last-child th { border-bottom: 0; } th, td { padding: 10px var(--space-md); border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: middle; } th { background: var(--surface-1); color: var(--ink-subtle); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; } th:first-child, td:first-child { padding-left: var(--space-20); } th:last-child, td:last-child { padding-right: var(--space-20); } tbody tr { transition: background var(--dur) var(--ease); } /* Alternate row bands (REX style): even rows get the surface-1 wash, odd rows stay clear; hover still wins. */ tbody tr:nth-child(even) td { background: var(--surface-1); } tbody tr:hover td { background: var(--surface-2); } tr:last-child td { border-bottom: 0; } td { color: var(--ink-muted); } /* Links inside data tables read as ink (orange is reserved for action and selection); the accent returns on hover. */ td a { color: var(--ink); font-weight: 500; } td a:hover { color: var(--accent); border-bottom-color: transparent; } th.numeric, td.numeric { font-variant-numeric: tabular-nums; text-align: right; } td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* Status reads as plain colored text in data tables (REX style); badges are for counts and sources, not row state. */ .status-text { font-size: 13px; font-weight: 500; color: var(--ink-muted); } .status-text.is-ok { color: var(--success); } .status-text.is-warn { color: var(--warning); } .status-text.is-error { color: var(--error); } /* Full-bleed data table under a tab bar (REX orders style): the table is the content, not a boxed panel. */ .data-table-note { margin-top: var(--space-sm); font-size: 12px; color: var(--ink-subtle); } /* ---------- App shell (full-height sidebar + content column) ---------- */ .auth-body { display: grid; min-height: 100vh; place-items: center; padding: var(--space-lg); background: var(--canvas); } .app-body { display: flex; flex-direction: column; min-height: 100vh; } .app-shell { flex: 1; display: grid; grid-template-columns: 248px minmax(0, 1fr); } .app-column { display: flex; flex-direction: column; min-width: 0; } /* ---------- Sidebar (command rail) ---------- */ .app-sidebar { background: var(--surface); border-right: 1px solid var(--hairline); } .sidebar-sticky { position: sticky; top: 0; display: flex; flex-direction: column; height: 100%; max-height: 100vh; overflow-y: auto; } .sidebar-header { display: flex; align-items: center; flex-shrink: 0; height: 48px; padding: 0 var(--space-lg); border-bottom: 1px solid var(--hairline); } .brand-mark { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--ink); border-bottom: 0; } .brand-mark:hover { color: var(--ink); border-bottom: 0; } /* button_to variant of the brand mark (central members inside a company) */ .brand-form { display: inline-flex; } button[type="submit"].brand-mark, button[type="submit"].brand-mark:hover { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; } .brand-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 3px 6px; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; line-height: 1; } .brand-wordmark { font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; } .current-user, .muted, small { color: var(--ink-subtle); } .current-user, small { font-size: 12px; letter-spacing: 0.01em; } .sidebar-nav { display: grid; gap: 1px; padding: 0 var(--space-sm); } .sidebar-nav + .sidebar-nav { margin-top: var(--space-sm); } .sidebar-group-label { margin: 0; padding: var(--space-md) var(--space-sm) var(--space-xs); color: var(--ink-subtle); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .nav-row { display: flex; align-items: center; gap: var(--space-sm); min-height: 34px; padding: 7px var(--space-sm); border-bottom: 0; border-radius: var(--radius-sm); color: var(--ink-muted); font-size: 13.5px; letter-spacing: 0.005em; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .nav-row:hover { background: var(--nav-hover); color: var(--ink); border-bottom: 0; } /* Sidebar company switch: a button_to that reads as a nav row. */ .sidebar-nav .nav-form { display: block; } .sidebar-nav button.nav-row { width: 100%; padding: 7px var(--space-sm); background: none; border: 0; border-radius: var(--radius-sm); box-shadow: none; font-family: inherit; font-size: 13.5px; font-weight: 400; text-align: left; justify-content: flex-start; cursor: pointer; } .sidebar-nav button.nav-row:hover { background: var(--nav-hover); color: var(--ink); } .nav-row.active { background: var(--accent-soft); color: var(--ink); font-weight: 500; } .nav-row svg { flex-shrink: 0; color: var(--ink-subtle); transition: color var(--dur) var(--ease); } .nav-row:hover svg { color: var(--ink); } .nav-row.active svg { color: var(--accent); } .sidebar-footer { display: grid; margin-top: auto; padding: var(--space-xs); border-top: 1px solid var(--hairline); } /* System status strip pinned to the rail's base */ .sidebar-status { display: flex; align-items: center; gap: var(--space-xs); margin: 0; padding: var(--space-sm) var(--space-lg); border-top: 1px solid var(--hairline); color: var(--ink-subtle); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; } .sidebar-footer + .sidebar-status { border-top: 1px solid var(--hairline); } .status-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--ink-subtle); } .status-dot.is-ok { background: var(--success); } .status-dot.is-warn { background: var(--warning); } .status-dot.is-error { background: var(--error); } .status-dot.is-running { background: var(--accent); animation: pulse-dot 1.4s var(--ease) infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .status-dot.is-running { animation: none; } } .sidebar-copyright { margin: 0; padding: var(--space-xs) var(--space-lg) var(--space-sm); color: var(--ink-subtle); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } /* Settings-context back link: a plain nav row, no box chrome. */ .sidebar-back { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-md) var(--space-sm) 0; padding: 7px var(--space-sm); color: var(--ink-muted); font-size: 13.5px; letter-spacing: 0.005em; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .sidebar-back:hover { background: var(--nav-hover); color: var(--ink); } /* ---------- Company-switcher options (topbar panel) ---------- Plain rows separated by equal hairlines. No fill, no hover wash, no text recolor on hover. These selectors are written strong enough to override the default button/submit styling that button_to would otherwise apply. */ .workspace-switcher-panel .unit-option, .workspace-switcher-panel button.unit-option, .workspace-switcher-panel input.unit-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); width: 100%; margin: 0; padding: 10px var(--space-sm); border: 0; border-top: 1px solid var(--hairline); border-radius: 0; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0.005em; line-height: 1.3; text-align: left; white-space: nowrap; cursor: pointer; transition: none; } .workspace-switcher-panel .unit-option:hover, .workspace-switcher-panel button.unit-option:hover, .workspace-switcher-panel input.unit-option:hover { background: transparent; color: var(--ink); border-color: var(--hairline); } .workspace-switcher-panel .unit-option.is-current { color: var(--ink-subtle); cursor: default; } .workspace-switcher-panel .unit-option.is-current::after { content: "current"; color: var(--ink-subtle); font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.06em; } /* ---------- Top bar (48px instrument bar) ---------- */ .app-topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-md); height: 48px; padding: 0 var(--space-xl); background: color-mix(in srgb, var(--canvas) 82%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); } /* ---------- Topbar company router (workspace switcher) ---------- */ .workspace-switcher { position: relative; min-width: 0; } .workspace-switcher-button { display: inline-flex; align-items: center; gap: var(--space-xs); max-width: 320px; padding: 5px var(--space-sm); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.005em; text-align: left; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .workspace-switcher-button:hover { background: var(--surface-2); border-color: var(--hairline); } .workspace-switcher-button[aria-expanded="true"] { background: var(--surface-2); border-color: var(--hairline-mid); } .workspace-switcher-button .chevron { flex-shrink: 0; color: var(--ink-subtle); transition: transform var(--dur) var(--ease); } .workspace-switcher-button[aria-expanded="true"] .chevron { transform: rotate(180deg); } .workspace-switcher-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workspace-switcher-panel[hidden] { display: none; } .workspace-switcher-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: var(--z-popover); display: grid; min-width: 240px; max-height: 360px; overflow-y: auto; padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); } .workspace-switcher-label { margin: 0; padding: var(--space-sm) var(--space-sm) var(--space-xs); color: var(--ink-subtle); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .workspace-switcher-panel .button_to { display: contents; } .workspace-static { color: var(--ink-muted); font-size: 13px; font-weight: 500; } .session-tools, .actions, .form-actions, .row-actions { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; } .session-tools { flex-wrap: nowrap; margin-left: auto; gap: var(--space-md); } .session-tools .button_to { display: contents; } .current-user { letter-spacing: 0.02em; } .menu-button { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--ink); cursor: pointer; } .menu-button:hover { background: var(--surface-2); border-color: var(--hairline-mid); } .drawer-backdrop { display: none; } /* ---------- Main regions ---------- */ .app-main, .auth-main { width: 100%; } .app-main { flex: 1; max-width: none; margin: 0 auto; padding: var(--space-xl); } .auth-main { max-width: 400px; padding: var(--space-lg); } /* ---------- Page header ---------- */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); padding-bottom: var(--space-md); border-bottom: 1px solid var(--hairline); } /* Right side of a section header: the company context label. */ .page-header-right { display: flex; align-items: center; gap: var(--space-md); } /* Toolbar row below the header — currently just the window switcher, right aligned under the company mark it used to sit beside. */ .page-toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--space-lg); } .page-header-company { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-subtle); } /* ---------- Company marks ---------- */ /* Square company glyph beside a name (portfolio cards, company picker). */ .company-icon { width: 16px; height: 16px; flex-shrink: 0; object-fit: contain; } .analytics-label--company, .unit-option-name { display: inline-flex; align-items: center; gap: var(--space-xs); min-width: 0; } /* Full logo in the page-header context slot. */ .page-header-company--logo { display: inline-flex; align-items: center; } .company-logo { display: block; height: 28px; width: auto; max-width: 200px; object-fit: contain; } /* Several lockups carry near-black fills that vanish on the dark canvas, and full-color marks fight the navy ramp anyway — every mark renders as monochrome ink on dark, full color on light and in print. */ [data-theme="dark"] .company-logo, [data-theme="dark"] .company-icon, :root:not([data-theme="light"]) .company-logo, :root:not([data-theme="light"]) .company-icon { filter: brightness(0) invert(0.91); } .eyebrow { display: block; margin-bottom: var(--space-xxs); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-subtle); } /* ---------- Panels / cards ---------- */ .panel, .login-card { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); } .panel { padding: var(--space-md) var(--pad-card); } .panel + .panel { margin-top: var(--space-lg); } /* Belt-and-braces: any box that follows another box at page level gets the page gap. Pages should still use a single .dash wrapper. */ .panel + .dash, .dash + .panel, .metric-snapshots + .panel, .analytics-grid + .panel, .analytics-strip + .panel { margin-top: var(--space-lg); } .login-card { width: 100%; padding: var(--space-xl); } .login-brand { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); } .login-brand-mark { display: block; width: 24px; height: 30px; } .login-brand-name { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); } .login-card h1 { margin-bottom: var(--space-md); } /* ---------- Forms ---------- */ .form-stack { display: grid; gap: var(--space-md); } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); } .field { display: grid; gap: var(--space-xs); } .field label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); } .field input, .field select, .field textarea { padding: 7px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--ink); line-height: 20px; min-height: var(--control-h); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .field input::placeholder, .field textarea::placeholder { color: var(--ink-subtle); } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--hairline-strong); } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); background: var(--surface); } .field textarea { min-height: 90px; resize: vertical; } .compact-field { max-width: 220px; } /* Standalone input styling for controls outside a .field wrapper — inline filter bars and toolbars. Same visual language as .field input. */ .input { padding: 7px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--ink); font: inherit; line-height: 20px; min-height: var(--control-h); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .input::placeholder { color: var(--ink-subtle); } .input:hover { border-color: var(--hairline-strong); } .input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); background: var(--surface); } /* Inline control row inside a toolbar/form — wraps instead of forcing the page wider (search + selects + dates + checkboxes + buttons). */ .form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); } .checkbox-inline { display: inline-flex; align-items: center; gap: var(--space-xxs); color: var(--ink-muted); font-size: 13px; white-space: nowrap; cursor: pointer; } .checkbox-inline input[type="checkbox"] { accent-color: var(--accent); } /* Column-visibility row inside the resource filter bar: label + checkboxes + the CSV action pinned to the far right. */ .filter-columns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--hairline); } .filter-columns-label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); flex-shrink: 0; } .filter-columns-action { margin-left: auto; } /* ---------- Commerce segment builder ---------- */ .segment-hint { margin-bottom: var(--space-md); max-width: 78ch; } .segment-hint code { font-size: 0.85em; } /* Rows share one column template so Field / Operator / Value line up vertically across every row, like a lightweight query table. */ .segment-filters { display: grid; gap: var(--space-xs); } .segment-filter-head, .segment-filter-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 1.5fr); gap: var(--space-sm); align-items: center; } .segment-filter-head { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); padding-bottom: var(--space-xxs); } /* Field select + its inferred type chip, kept together in the first column. */ .segment-filter-field { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; } .segment-filter-field .input { flex: 1; min-width: 0; } .segment-type-badge { flex-shrink: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-subtle); } /* The chip is populated by JS from the chosen field; nothing to show until then, and an empty bordered box reads as broken. */ .segment-type-badge:empty { display: none; } .segment-group-match { max-width: 220px; margin-left: auto; } .segment-form-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); } @media (max-width: 720px) { .segment-filter-head { display: none; } .segment-filter-row { grid-template-columns: 1fr; gap: var(--space-xs); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--hairline); } } /* ---------- Buttons (square, 1px border) ---------- */ .button, .link-button, input[type="submit"], button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-h); padding: 8px 14px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.005em; line-height: 1.3; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .button:hover, .link-button:hover, input[type="submit"]:hover, button[type="submit"]:hover { background: var(--surface-2); color: var(--ink); border-color: var(--hairline-strong); } .button.primary, input[type="submit"].primary, button[type="submit"].primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 500; } .button.primary:hover, input[type="submit"].primary:hover, button[type="submit"].primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); } .button.ghost { background: transparent; border-color: transparent; color: var(--accent); } .button.ghost:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent-hover); } .button.danger { border-color: var(--accent-line); background: transparent; color: var(--error); } .button.danger:hover { background: var(--error); border-color: var(--error); color: #fff; } .link-button, button.link-button, input[type="submit"].link-button { border-color: transparent; background: transparent; color: var(--accent); } .link-button:hover, button.link-button:hover, input[type="submit"].link-button:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent-hover); } .icon-button, button.icon-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .icon-button:hover, button.icon-button:hover { background: var(--surface-2); border-color: transparent; color: var(--ink); } /* ---------- Tag / badge (square mono chip) ---------- */ .badge { display: inline-flex; align-items: center; gap: var(--space-xxs); padding: 3px 8px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--ink-muted); font-size: 12px; font-weight: 500; line-height: 1.4; } .badge.accent { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); } .badge.is-ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); background: var(--success-soft); } .badge.is-warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); background: var(--warning-soft); } .badge.is-error { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); background: var(--error-soft); } /* ---------- Metric strip (flush ruled, mono numbers) ---------- */ .metric-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: var(--space-lg); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); background: var(--surface); } .panel .metric-strip { margin-bottom: 0; } .metric-cell { display: grid; gap: var(--space-xxs); padding: var(--space-md) var(--space-20); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--surface); min-width: 0; } .metric-cell .metric-label { color: var(--ink-subtle); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .metric-cell .metric-value { color: var(--ink); font-family: var(--mono); font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1; overflow-wrap: anywhere; } .metric-cell .metric-meta { color: var(--ink-subtle); font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; } /* ---------- Grid-first page layout ---------- */ /* Two columns of separated boxes with one consistent gap; .span-2 rows span the full width. Sibling-margin spacing is neutralized inside — the grid gap owns all spacing. Collapses to one column on narrow screens. */ .dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; } .dash--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash > * { min-width: 0; } .dash > .panel, .card-grid > .panel { margin-top: 0; } .dash > .analytics-strip, .dash > .analytics-grid, .dash > .metric-strip { margin-bottom: 0; } .dash > .analytics-period, .dash > .analytics-updated { margin: 0; } .dash > .span-2 { grid-column: 1 / -1; } @media (max-width: 1000px) { .dash { grid-template-columns: 1fr; } } /* Separated content cards: distinct boxes with the same page gap. Joined strips with internal dividers are reserved for KPI rows. */ .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); align-items: stretch; } .card-grid .card-form { display: contents; } .card-grid .analytics-card { border: 1px solid var(--hairline); border-radius: var(--radius-lg); } @media (max-width: 900px) { .card-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } /* ---------- Resource list (flat hairline rows) ---------- */ .resource-list { display: grid; gap: 0; border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; } .resource-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-20); border-bottom: 1px solid var(--hairline); border-radius: 0; background: var(--surface); transition: background var(--dur) var(--ease); } .resource-row:last-child { border-bottom: 0; } .resource-row:hover { background: var(--surface-2); } .resource-row > div:first-child { display: grid; gap: var(--space-xxs); min-width: 0; } .resource-row strong { font-size: 13.5px; font-weight: 500; color: var(--ink); } .resource-row strong a { color: var(--ink); border-bottom-color: transparent; } .resource-row strong a:hover { color: var(--accent); } .resource-row .row-actions { display: flex; gap: var(--space-xs); flex-shrink: 0; } .resource-row span { color: var(--ink-subtle); font-size: 12px; } .resource-row .mono, .resource-row span.mono { font-family: var(--mono); } /* ---------- Implementation catalog ---------- */ .implementation-page-header > div, .implementation-detail-header > div { max-width: 840px; } .implementation-lede { max-width: 68ch; margin-top: var(--space-sm); color: var(--ink-muted); font-size: 15px; line-height: 1.6; text-wrap: pretty; } .implementation-filter-panel { background: var(--surface); } .implementation-atlas { min-width: 0; } .implementation-atlas-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); } .implementation-atlas-heading h2 { margin: 0; font-size: 22px; } .implementation-map-frame { width: calc(100% + (var(--space-xl) * 2)); margin: var(--space-lg) calc(var(--space-xl) * -1); padding: var(--space-lg) var(--space-xl); overflow: hidden; border-block: 1px solid var(--hairline); background-color: var(--canvas); background-image: radial-gradient(circle, var(--hairline) 1px, transparent 1px); background-position: 0 0; background-size: 18px 18px; } .implementation-map { width: 100%; } .implementation-map svg { display: block; width: 100%; height: auto; max-width: 720px; margin: 0 auto; overflow: visible; } .implementation-map-ray { stroke: var(--hairline-mid); stroke-width: 2; } .implementation-map-source-ray { stroke: var(--hairline); stroke-width: 1.25; } .implementation-map-hub { fill: var(--accent); } .implementation-map-hub-label { fill: var(--on-primary); font-family: var(--sans); font-size: 24px; font-weight: 600; letter-spacing: 0.02em; } .implementation-map-node { fill: var(--canvas); stroke: var(--hairline); stroke-width: 2; } .implementation-map-node[data-category="commerce"] { stroke: var(--commerce); } .implementation-map-node[data-category="marketing"] { stroke: var(--marketing); } .implementation-map-node[data-category="finance"] { stroke: var(--finance); } .implementation-map-node[data-category="infra"] { stroke: var(--infra); } .implementation-map-node-label { fill: var(--ink); font-family: var(--sans); font-size: 19.5px; font-weight: 600; } .implementation-map-node-count { fill: var(--ink-muted); font-family: var(--mono); font-size: 15px; letter-spacing: 0.02em; } .implementation-map-source-dot { fill: var(--canvas); stroke: var(--hairline); stroke-width: 1.5; transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease); } .implementation-map-source-dot[data-category="commerce"] { fill: var(--commerce); stroke: var(--commerce); } .implementation-map-source-dot[data-category="marketing"] { fill: var(--marketing); stroke: var(--marketing); } .implementation-map-source-dot[data-category="finance"] { fill: var(--finance); stroke: var(--finance); } .implementation-map-source-dot[data-category="infra"] { fill: var(--infra); stroke: var(--infra); } .implementation-map-source-dot[data-status="in-progress"] { fill: var(--canvas); stroke-dasharray: 3 2; } .implementation-map-source-label { fill: var(--ink); font-family: var(--sans); font-size: 19.5px; letter-spacing: 0.01em; pointer-events: none; } .implementation-map-source-label[data-status="in-progress"] { fill: var(--ink-muted); font-style: italic; } .implementation-map-source:hover .implementation-map-source-dot { stroke: var(--ink); stroke-width: 2.5; } .implementation-map-source:hover .implementation-map-source-label { fill: var(--accent); } .implementation-category-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md) var(--space-lg); margin-bottom: var(--space-xl); } .implementation-category-group { --category-color: var(--hairline-mid); min-width: 0; } .implementation-category-group[data-category="commerce"], .implementation-table-group[data-category="commerce"] { --category-color: var(--commerce); } .implementation-category-group[data-category="marketing"], .implementation-table-group[data-category="marketing"] { --category-color: var(--marketing); } .implementation-category-group[data-category="finance"], .implementation-table-group[data-category="finance"] { --category-color: var(--finance); } .implementation-category-group[data-category="infra"], .implementation-table-group[data-category="infra"] { --category-color: var(--infra); } .implementation-category-group h3, .implementation-table-group > h3 { margin: 0 0 var(--space-xs); padding-left: var(--space-xs); border-left: 3px solid var(--category-color); color: var(--ink-muted); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .implementation-category-group ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .implementation-category-group a { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 2px 0; color: var(--ink); font-size: 13px; text-decoration: none; } .implementation-category-group a:hover, .implementation-category-group a:focus-visible { color: var(--accent); } .implementation-source-dot { width: 7px; height: 7px; flex: 0 0 7px; background: var(--category-color); } .implementation-tables { display: grid; gap: var(--space-xl); } .implementation-table-group { --category-color: var(--hairline-mid); min-width: 0; } .implementation-table-scroll { max-width: 100%; overflow-x: auto; } .implementation-table-group table { table-layout: fixed; } .implementation-table-group th:nth-child(1) { width: 19%; } .implementation-table-group th:nth-child(2) { width: 23%; } .implementation-table-group th:nth-child(3) { width: 14%; } .implementation-table-group th:nth-child(4) { width: 27%; } .implementation-table-group th:nth-child(5) { width: 17%; } .implementation-table-group th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; } .implementation-row { scroll-margin-top: var(--space-xl); } .implementation-row:target td { background: var(--accent-soft); } .implementation-source { vertical-align: top; } .implementation-source-tag { display: inline-block; width: 4px; height: 18px; margin-right: var(--space-sm); margin-top: 2px; background: var(--category-color); vertical-align: top; } .implementation-summary { display: inline-grid; width: calc(100% - 24px); gap: var(--space-xxs); min-width: 0; vertical-align: top; } .implementation-summary strong { color: var(--ink); font-size: 13px; font-weight: 500; } .implementation-summary > .implementation-pill { justify-self: start; } .implementation-summary time, .implementation-assignment time { color: var(--ink-subtle); font-family: var(--mono); font-size: 10px; } .implementation-coverage { color: var(--ink-subtle); font-size: 11px; } .implementation-pills, .implementation-cadences { display: flex; flex-wrap: wrap; gap: var(--space-xxs); } .implementation-pill, .implementation-company-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--space-xs); border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink-muted); font-size: 11px; line-height: 1.4; white-space: nowrap; } .implementation-pill.is-accent { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); } .implementation-pill.is-ok { border-color: color-mix(in srgb, var(--success) 35%, var(--hairline)); background: var(--success-soft); color: var(--success); } .implementation-pill.is-warn { border-color: color-mix(in srgb, var(--warning) 35%, var(--hairline)); background: var(--warning-soft); color: var(--warning); } .implementation-cadences { display: grid; font-size: 11px; } .implementation-cadences .is-live { color: var(--success); } .implementation-cadences .is-on-demand { color: var(--warning); } .implementation-empty { display: grid; justify-items: start; gap: var(--space-xs); padding: var(--space-xl) 0; } .implementation-empty h3, .implementation-empty p { margin: 0; } .implementation-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); } .implementation-company-pill { background: var(--canvas); color: var(--ink); } .implementation-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); padding-block: var(--space-xl); border-block: 1px solid var(--hairline); } .implementation-detail-facts article { min-width: 0; } .implementation-detail-facts h2 { margin-bottom: var(--space-sm); color: var(--ink); font-size: 14px; font-weight: 500; } .implementation-detail-facts p, .implementation-items p, .implementation-empty-copy { max-width: 72ch; margin: 0; color: var(--ink-muted); line-height: 1.6; text-wrap: pretty; } .implementation-company { display: inline-flex; align-items: center; gap: var(--space-xs); } .implementation-assignment { align-items: flex-start; } .implementation-items { display: grid; } .implementation-items article { padding: var(--space-md) 0 var(--space-md) var(--space-sm); border-top: 1px solid var(--hairline); border-left: 2px solid var(--hairline-mid); } .implementation-items article:first-child { padding-top: 0; border-top: 0; } .implementation-items h3 { margin-bottom: var(--space-xxs); } .implementation-capabilities article { border-left-color: var(--accent); } .implementation-items code { padding: 0; border: 0; background: transparent; } .implementation-tools { max-height: 520px; overflow-y: auto; } @media (max-width: 860px) { .implementation-map-frame { width: calc(100% + (var(--space-md) * 2)); margin-inline: calc(var(--space-md) * -1); padding-inline: var(--space-md); } .implementation-table-group table { min-width: 760px; table-layout: auto; } } @media (max-width: 700px) { .implementation-map-source-label { display: none; } .implementation-detail-facts { grid-template-columns: 1fr; gap: var(--space-lg); } .implementation-atlas-heading { align-items: start; } } /* Standalone resource rows (outside a list wrapper) keep their own border */ .panel > .resource-list { border: 0; border-radius: initial; overflow: visible; box-shadow: none; } /* ---------- Compact data status (company Overview, admin-only) ---------- */ /* A native
disclosure: one quiet summary line collapsed by default, per-source sync rows when expanded. Keeps the default marker for the disclosure affordance and native keyboard behavior. */ .data-status { background: transparent; } .data-status > summary { padding: var(--space-sm) var(--pad-card); font-size: 12px; color: var(--ink-muted); cursor: pointer; transition: background var(--dur) var(--ease); } .data-status > summary:hover { background: var(--surface-2); } .data-status > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .data-status[open] > summary { border-bottom: 1px solid var(--hairline); } .data-status-label { font-weight: 500; color: var(--ink); } .data-status > .resource-list { border: 0; border-radius: 0; } .data-status .table-note { overflow-wrap: anywhere; } /* Sync timestamps stay in the mono accent voice. */ .data-status time { font-family: var(--mono); } .panel-heading { display: flex; gap: var(--space-sm); align-items: center; justify-content: space-between; margin-bottom: var(--space-md); } .panel-heading h2 { margin-bottom: 0; } /* Clusters multiple trailing elements (badge + action button) so .panel-heading's space-between doesn't spread them apart. */ .panel-heading-actions { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; } .source-meta { display: grid; gap: var(--space-xxs); justify-items: end; color: var(--ink-muted); } .source-meta span, .table-note { display: block; color: var(--ink-muted); font-size: 12px; line-height: 1.35; } .filter-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-sm); align-items: end; } .filter-bar div { display: grid; gap: var(--space-xxs); } .filter-bar label { color: var(--ink-subtle); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .filter-bar select, .filter-bar input[type="search"] { width: 100%; padding: 7px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--ink); line-height: 20px; min-height: var(--control-h); } .filter-actions { display: flex !important; grid-auto-flow: column; justify-content: start; gap: var(--space-xs) !important; } /* ---------- Detail / summary grids ---------- */ .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md) var(--space-lg); } .detail-grid > div { display: grid; gap: var(--space-xxs); } .detail-grid span { color: var(--ink-subtle); font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } .detail-grid strong { color: var(--ink); font-family: var(--mono); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .estimate-summary, .print-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); } .estimate-summary div, .print-grid div, .print-total, .notes-block { display: grid; gap: var(--space-xxs); } .estimate-summary span, .print-grid span, .print-total span, .notes-block span { color: var(--ink-subtle); font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } .notes-block { margin-top: var(--space-md); } .notes-block p { margin: 0; } .summary-list { display: grid; gap: var(--space-xs); margin: var(--space-md) 0 0; } .summary-list div { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid var(--hairline); } .summary-list dt { color: var(--ink-subtle); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .summary-list dd { margin: 0; } .comment-list { display: grid; gap: var(--space-sm); } .comment { display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-20); border: 1px solid var(--hairline); border-radius: var(--radius-lg); } .comment header { display: flex; justify-content: space-between; gap: var(--space-sm); color: var(--ink-muted); } .comment p { margin: 0; } /* ---------- Line items ---------- */ .line-item-list { display: grid; gap: var(--space-xs); } .line-item-grid { display: grid; grid-template-columns: minmax(220px, 1fr) 90px 110px 130px 80px; gap: var(--space-xs); align-items: center; } .line-item-heading { color: var(--ink-subtle); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .remove-field { justify-items: center; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Keyboard skip link: off-canvas until focused, then a flat pill pinned top-left above all chrome (drawer included). */ .skip-link { position: absolute; top: var(--space-xs); left: var(--space-xs); z-index: calc(var(--z-drawer) + 10); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--canvas); color: var(--ink); font-weight: 500; transform: translateY(calc(-100% - var(--space-lg))); } .skip-link:focus { transform: none; } /* The skip link lands focus on
; don't ring the whole page. */ .app-main:focus, .auth-main:focus { outline: none; } /* ---------- Print sheet ---------- */ .print-toolbar { display: flex; justify-content: flex-end; gap: var(--space-xs); margin-bottom: var(--space-md); } .print-sheet { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-xl); } .print-header { display: flex; gap: var(--space-md); align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-xl); } .print-total { justify-items: end; } .print-total strong { font-family: var(--mono); font-size: 26px; font-weight: 500; } .print-section { margin-top: var(--space-xl); } /* ---------- Web Analytics ---------- */ .window-switch { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--radius-sm); } .window-option { padding: 6px 12px; border: 0; border-left: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink-muted); font-size: 13px; font-weight: 500; letter-spacing: 0; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .window-option:first-child { border-left: 0; } .window-option:hover { background: var(--surface-2); color: var(--ink); border-bottom-color: transparent; } .window-option.active { background: var(--accent); color: var(--accent-ink); font-weight: 500; } .window-option.active:hover { background: var(--accent-hover); color: var(--accent-ink); } /* ---------- Tabs ---------- */ .tabs, .content-tabs { display: flex; border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-md); } .content-tabs { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .content-tabs::-webkit-scrollbar { display: none; } .tab { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); color: var(--ink-muted); font-family: var(--sans); font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0; text-decoration: none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .tab:hover { color: var(--ink); border-bottom-color: transparent; } .tab.is-active { color: var(--ink); border-bottom-color: var(--accent); } .analytics-period { margin-bottom: var(--space-md); color: var(--ink-muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; } /* Row under a section's page-header holding the period line and window switch. */ .section-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); row-gap: var(--space-sm); margin-bottom: var(--space-md); } .section-toolbar .analytics-period { margin-bottom: 0; } .analytics-compare { color: var(--ink-subtle); } .analytics-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); background: var(--surface); margin-bottom: var(--space-lg); } /* Portfolio company cards: fixed three-up rows on desktop. */ .analytics-grid--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .analytics-grid--thirds { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } .analytics-card { display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-20); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--surface); } /* Whole-card switch buttons (portfolio): the form disappears from layout so the button itself is the grid cell, styled exactly like a static card. Redeclares everything the global button[type=submit] rule would hijack. */ .analytics-grid .card-form { display: contents; } button.analytics-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: start; justify-items: stretch; gap: var(--space-xs); align-content: start; width: 100%; height: 100%; padding: var(--space-md) var(--space-20); border: 0; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--surface); color: var(--ink); font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: normal; line-height: inherit; white-space: normal; text-align: left; cursor: pointer; } button.analytics-card:hover { background: var(--surface-2); border-color: var(--hairline); } .analytics-card--link:hover .analytics-card-go { color: var(--accent); transform: translateX(2px); } .analytics-card-go { color: var(--ink-subtle); font-size: 16px; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); } .analytics-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } .analytics-label { color: var(--ink-muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .analytics-figure { color: var(--ink); font-family: var(--mono); font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; } .analytics-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-sm); } .analytics-delta { font-size: 12px; font-variant-numeric: tabular-nums; } .analytics-delta.is-up { color: var(--success); } .analytics-delta.is-down { color: var(--error); } .analytics-delta.is-flat { color: var(--ink-subtle); } .analytics-updated { margin-top: var(--space-md); color: var(--ink-subtle); font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; } /* Dashboard analytics summary strip */ .analytics-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); background: var(--surface); margin-bottom: var(--space-lg); } .panel .analytics-strip { margin-bottom: 0; } .analytics-strip-cell { display: grid; gap: var(--space-xs); min-width: 0; padding: var(--space-md) var(--space-20); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--surface); } @media (max-width: 1100px) { .metric-strip, .analytics-grid, .analytics-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .metric-strip, .analytics-grid, .analytics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .analytics-strip.analytics-strip--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .analytics-strip--duo .analytics-figure-sm { overflow-wrap: anywhere; } .analytics-figure-sm { color: var(--ink); font-family: var(--mono); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1; } .panel-link { font-size: 13px; font-weight: 500; border-bottom: 0; } .panel-link:hover { color: var(--accent-hover); border-bottom: 0; } .sparkline { display: block; overflow: visible; } .sparkline.is-empty { display: inline-block; width: 120px; height: 32px; } /* ---------- Pagination ---------- */ .pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--hairline); } .pagination-summary { color: var(--ink-subtle); font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .pagination-controls { display: flex; align-items: center; gap: var(--space-xs); } .pagination-link { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 32px; padding: 6px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: 0.005em; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .pagination-link:hover { background: var(--surface-2); border-color: var(--hairline-strong); color: var(--ink); border-bottom-color: var(--hairline-strong); } .pagination-link.is-disabled { color: var(--ink-subtle); background: transparent; border-color: var(--hairline); cursor: not-allowed; } .pagination-page { padding: 0 var(--space-xs); color: var(--ink); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; } .pagination-of { color: var(--ink-subtle); } /* ---------- Settings: theme options ---------- */ .theme-options { display: grid; gap: 0; margin: 0; padding: 0; border: 0; max-width: 560px; } .theme-option { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--hairline); cursor: pointer; } .theme-option:last-child { border-bottom: 0; } .theme-option:hover .theme-option-name, .theme-option:has(input:checked) .theme-option-name { color: var(--accent); } .theme-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-swatch { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--ink-muted); } .theme-swatch-glyph { font-family: var(--mono); font-size: 18px; line-height: 1; } .theme-swatch--dark { background: #101217; border-color: #292e3b; color: #ff7a1a; } .theme-swatch--light { background: #f6f8fb; border-color: #e4e9f2; color: #bd5500; } .theme-swatch--system { background: linear-gradient(105deg, #101217 0 50%, #f6f8fb 50% 100%); color: var(--accent); } .theme-option-body { display: grid; gap: var(--space-xxs); min-width: 0; } .theme-option-name { font-size: 14px; font-weight: 500; color: var(--ink); transition: color var(--dur) var(--ease); } .theme-option-desc { font-size: 12.5px; color: var(--ink-subtle); } .theme-check { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; margin-left: auto; border: 1px solid var(--hairline); color: transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .theme-option:has(input:checked) .theme-check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* ---------- Flash toasts / error banners ---------- */ /* In-flow form validation box. */ .error-box { margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-20); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface-1); color: var(--ink); } /* Fixed bottom-right toast stack, so messages never shift the layout. Clear of the rail and the bottom-left corner reserved for any future chat affordance. New toasts stack upward from the corner. */ .flash-stack { position: fixed; bottom: var(--space-xl); right: var(--space-xl); z-index: var(--z-toast); display: grid; gap: var(--space-xs); width: min(380px, calc(100vw - var(--space-xl) * 2)); pointer-events: none; } .flash { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-20); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface-1); color: var(--ink); pointer-events: auto; transition: opacity 0.24s var(--ease), transform 0.24s var(--ease); animation: flash-in 0.32s var(--ease); } @keyframes flash-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } } .flash-dismissing { opacity: 0; transform: translateX(40px); } .flash-dismiss { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; margin: -2px -6px -2px 0; padding: 0; border: 0; background: transparent; color: var(--ink-muted); font-size: 16px; line-height: 1; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .flash-dismiss:hover { background: var(--surface-3); color: var(--ink); } @media (prefers-reduced-motion: reduce) { .flash { transition: none; animation: none; } } .flash-notice { border-color: color-mix(in srgb, var(--success) 45%, var(--hairline)); background: color-mix(in srgb, var(--success) 13%, var(--surface)); } .flash-alert { border-color: color-mix(in srgb, var(--error) 45%, var(--hairline)); background: color-mix(in srgb, var(--error) 13%, var(--surface)); } .error-box { border-color: color-mix(in srgb, var(--error) 45%, var(--hairline)); background: var(--error-soft); } .error-box ul { margin: var(--space-xs) 0 0; padding-left: var(--space-lg); } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .app-main { padding: var(--space-lg) var(--space-md); } .page-header, .panel-heading, .print-header { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .line-item-grid { grid-template-columns: 1fr 80px; } .line-item-heading { display: none; } } /* ---------- Drawer (sidebar collapses below 672px) ---------- */ @media (max-width: 672px) { .app-shell { display: block; } .app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: var(--z-drawer); width: min(280px, 85vw); border-right: 1px solid var(--hairline); transform: translateX(-100%); visibility: hidden; transition: transform 0.2s var(--ease), visibility 0.2s; } .drawer-open .app-sidebar { transform: none; visibility: visible; } .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: var(--z-drawer-backdrop); background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease); } .drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; } .menu-button { display: inline-flex; } .app-topbar { padding: 0 var(--space-md); } .app-topbar .current-user { display: none; } } @media (prefers-reduced-motion: reduce) { .app-sidebar, .drawer-backdrop, .workspace-switcher-button .chevron { transition: none; } } /* ---------- Print (always ink-on-white) ---------- */ @media print { :root, [data-theme="dark"], [data-theme="light"] { --canvas: #ffffff; --surface: #ffffff; --surface-1: #ffffff; --ink: #000000; --ink-muted: #222222; --ink-subtle: #444444; --hairline: #cccccc; } html, body { background: #ffffff; color: #000000; } .app-sidebar, .app-topbar, .drawer-backdrop, .flash-stack, .flash, .no-print { display: none; } .app-shell { display: block; } .app-main { width: 100%; max-width: none; padding: 0; } .print-sheet { border: 0; box-shadow: none; padding: 0; } .company-logo, .company-icon { filter: none; } }