/* ════════════════════════════════════════════════════════════════════ ORIZON1 · DESIGN TOKENS & THEME SYSTEM ════════════════════════════════════════════════════════════════════ All colors, surfaces, and semantic tokens live here. To change a color globally, edit the value in :root (dark mode) and the matching override in [data-theme="light"] below. STRUCTURE ───────────────────────────────────────────────────────────────────── 1. :root — Dark mode tokens (default) 2. [data-theme="light"] — Light mode token overrides 3. [data-theme="light"] component overrides — surface/border corrections for components that use hardcoded colors ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ CANONICAL TOKEN REFERENCE (55 tokens) ════════════════════════════════════════════════════════════════════ Use `var(--token)` when building new components. Avoid hardcoding colors, sizes, timings, or shadows — pick from this set so theme swaps and global tweaks work correctly. ┌─── COLOR — SURFACES ──────────────────────────────────────────────┐ │ --navy #0a0d10 Page background — warm charcoal │ │ --navy2 #10151b Modal / panel background │ │ --navy3 #161c24 Card / sidebar item / elevated │ │ --navy4 #131820 Input background / nested surface │ │ --slate #1c2530 Dividers / subtle borders │ │ --surface navy2 Semantic alias for primary surface │ │ --surface2 navy3 Semantic alias for raised surface │ │ --header-bg rgba frosted Sticky header background │ └────────────────────────────────────────────────────────────────────┘ ┌─── COLOR — BRAND ─────────────────────────────────────────────────┐ │ --amber #f0a126 Primary accent — logo "ORIZON", │ │ active states, section headers │ │ --amber2 #fbc465 Lighter amber for hover/emphasis │ │ --amber-dim #4a2e06 Deep amber for dark-on-amber fills │ │ --amber-rgb 240,161,38 Triplet for rgba() — glow/shadow fx │ └────────────────────────────────────────────────────────────────────┘ ┌─── COLOR — SEMANTIC ──────────────────────────────────────────────┐ │ --cyan #32ade6 Info, secondary accent, logo "1" │ │ --green #3dd68c Pass / success (CRT-phosphor) │ │ --red #e54f4f Fail / danger (Soyuz desat) │ │ --purple #bf5af2 Commissioning-stage indicator │ │ --indigo #5e5ce6 Integration / secondary purple │ │ --cyan-rgb 50,173,230 Triplet for rgba() │ │ --green-rgb 61,214,140 Triplet for rgba() │ │ --red-rgb 229,79,79 Triplet for rgba() — danger glows │ └────────────────────────────────────────────────────────────────────┘ ┌─── COLOR — TEXT ──────────────────────────────────────────────────┐ │ --text #f1ede4 Primary text — warm cream phosphor │ │ --text2 #b8b3a8 Secondary text — captions, meta │ │ --text3 #7a756a Tertiary text — placeholders, muted │ └────────────────────────────────────────────────────────────────────┘ ┌─── COLOR — BORDERS & INPUTS ──────────────────────────────────────┐ │ --border rgba white 7% Subtle dividers, card outlines │ │ --border2 rgba amber 16% Console-bezel — inputs, chips │ │ --input-bg rgba white 4% Input field background tint │ └────────────────────────────────────────────────────────────────────┘ ┌─── COLOR — CATEGORY (compliance engine, 8 categories) ────────────┐ │ --c-params #32ade6 Parameters / setpoints │ │ --c-occ #f5a623 Occupancy sensing │ │ --c-ts #bf5af2 Time schedule │ │ --c-day #30d158 Daylight harvesting │ │ --c-man #ff453a Manual control │ │ --c-add #ffd60a Addressable / advanced │ │ --c-int #5e5ce6 Integration (BMS, ADR, fire) │ │ --c-notes #8e8e93 Notes / supplemental │ └────────────────────────────────────────────────────────────────────┘ ┌─── COLOR — GLASS EFFECTS ─────────────────────────────────────────┐ │ --glass rgba white 4% Subtle frosted surface overlay │ │ --glass2 rgba white 7% Stronger frosted overlay │ │ --glass-border rgba white 10% Glass-edge outline color │ └────────────────────────────────────────────────────────────────────┘ ┌─── SHAPE — BORDER RADIUS ─────────────────────────────────────────┐ │ --r 4px Default — cards, buttons, panels │ │ --r-sm 2px Small — inputs, chips, badges │ │ --r-lg 8px Large — modals, hero cards │ └────────────────────────────────────────────────────────────────────┘ ┌─── TYPOGRAPHY ────────────────────────────────────────────────────┐ │ --sans Electrolize… Primary UI font stack │ │ --mono Electrolize… Monospace stack (labels, data, meta) │ │ --base-size 13px Root font-size │ │ --ls-ui 0.06em Letter-spacing for UI labels (console)│ │ --fs 1 User-adjustable font-scale multiplier │ │ (set via Settings → Text Size) │ └────────────────────────────────────────────────────────────────────┘ ┌─── ELEVATION — SHADOWS ───────────────────────────────────────────┐ │ --shadow-sm 2-layer soft Subtle lift — hovered cards, chips │ │ --shadow-md 2-layer med Card elevation — panels, dropdowns │ │ --shadow-lg 2-layer lg Modal / overlay elevation │ └────────────────────────────────────────────────────────────────────┘ ┌─── ANIMATION — TIMING ────────────────────────────────────────────┐ │ --dur-fast 120ms Hover tints, small UI shifts │ │ --dur-base 150ms Default button/input state changes │ │ --dur-slow 280ms Modal fades, large transitions │ └────────────────────────────────────────────────────────────────────┘ ┌─── ANIMATION — EASINGS ───────────────────────────────────────────┐ │ --ease-out cubic(.4,0,.2,1) Standard material ease │ │ --ease-bounce cubic(.34,1.56,.64,1) Playful overshoot │ └────────────────────────────────────────────────────────────────────┘ ┌─── BRAND ORNAMENT ────────────────────────────────────────────────┐ │ --wm-orizon #f0a126 Wordmark "ORIZON" stroke (amber) │ │ --wm-one #24a8e6 Wordmark "1" stroke (cyan) │ └────────────────────────────────────────────────────────────────────┘ LIGHT THEME NOTE ───────────────────────────────────────────────────────────────────── [data-theme="light"] overrides the color tokens above. Shape, typography, elevation, and animation tokens are theme-neutral — they do NOT get overridden. RGB TRIPLET CONVENTION ───────────────────────────────────────────────────────────────────── Use --amber-rgb (etc.) when you need alpha transparency: background: rgba(var(--amber-rgb), 0.15); ✓ correct background: rgba(var(--amber), 0.15); ✗ invalid CSS ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ CANONICAL BREAKPOINTS (Session 5 consolidation, April 2026) ════════════════════════════════════════════════════════════════════ When writing new responsive rules, PICK FROM THIS SET. ┌─────────────────────────────────────────────────────────────────┐ │ Size → Intent │ Media query │ ├─────────────────────────────────────────────────────────────────┤ │ ≤480px phone │ (max-width: 480px) │ │ ≤768px phone + tablet portrait │ (max-width: 768px) │ │ ≤1024px phone + tablet │ (max-width: 1024px) │ │ ≥769px tablet landscape + up │ (min-width: 769px) │ │ ≥1025px desktop │ (min-width: 1025px) │ │ ≥1440px wide desktop │ (min-width: 1440px) │ │ ≥1920px ultrawide │ (min-width: 1920px) │ ├─────────────────────────────────────────────────────────────────┤ │ Compound ranges (tablet-only rules) │ │ (min-width: 481px) and (max-width: 768px) → tablet portrait │ │ (min-width: 769px) and (max-width: 1024px) → tablet landscape │ │ (min-width: 481px) and (max-width: 1024px) → tablets overall │ ├─────────────────────────────────────────────────────────────────┤ │ Legitimate edge cases (use sparingly, only when truly needed) │ │ (max-width: 375px) — iPhone SE / tiny phone │ │ (max-width: 600px) — wizard-modal-specific mobile overrides │ ├─────────────────────────────────────────────────────────────────┤ │ Feature queries (not breakpoints — don't consolidate) │ │ (hover: none) and (pointer: coarse) — touch devices │ │ (prefers-reduced-motion: reduce) — motion accessibility │ │ (orientation: landscape) — tablet landscape physical │ │ print — print context │ └─────────────────────────────────────────────────────────────────┘ PANE WIDTH OPT-IN ───────────────────────────────────────────────────────────────────── .pane-content has a 1100px cap at ≥1025px for prose readability. Add class "pane-wide" to an .out-pane to opt into wider layout (min(1600px, 100%) at ≥1025px, 1800px at ≥1920px). Prose panes (CIN, SOO, Spec, O&M) MUST stay uncapped-opted-out. RATIONALE: Before consolidation there were 21 distinct @media expressions across 111 blocks. Many were near-duplicates (700/768, 900/1024, 1100/1024, 1200/1025) and compound ranges used 601 as a boundary inconsistently with the 481/769 canonical splits. This set maps cleanly to device classes and avoids the 1px gap problem (max: 1024 complements min: 1025). ════════════════════════════════════════════════════════════════════ */ /* ── 1. DARK MODE TOKENS (default) ────────────────────────────────── */ :root { /* ════════════════════════════════════════════════════════════════ CANONICAL COLOR TOKENS (post-rename, post-consolidation) ════════════════════════════════════════════════════════════════ These are the 10 colors that drive the entire app surface. The legacy tokens below (--navy, --amber, --text, surface-*, etc.) are being deprecated. Phase 1 (current): new tokens are aliases of old via var(), so per-theme overrides of the old tokens cascade through to the new ones — visual identical to before. Phase 2 will migrate every consumer to the new names and delete the old declarations. Naming rationale: --background-color page background (lowest layer) --midground-color panels, modals, soft surfaces (mid layer) --foreground-color cards, sidebar items, elevated surfaces --button-color primary action color (was --amber) --button-click-color brighter action (was --amber2 / hover) --button-dim-color muted action (was --amber-dim) --button-rgb-color "r,g,b" triplet for rgba() composition --text-light-color primary text on dark bg --text-mid-color secondary / supporting / meta text --text-dark-color muted / placeholder / disabled / labels Combined consolidations (multiple old → one new): foreground = navy3 + navy4 + slate + surface + surface2 midground = navy2 + surface-soft-light text-mid = text2 + page-bg-dark + surface-darker + surface-neutral-light + card-bg-light + text-secondary-dark + text-meta-light text-dark = text3 + text-disabled-dark + text-muted-dark Phase 2 (shipped): canonical tokens carry the hex values; the legacy --navy / --amber / --text / etc. names below are kept as REVERSE aliases pointing back at the canonical tokens. They exist for the PDF subsystem (_pdf.css and pdf/templates/*) which was scoped out of the rename. App-surface CSS uses canonical names everywhere. Per-theme overrides redeclare canonical tokens directly; legacy tokens cascade via the alias chain. */ --background-color: #1a252e; --midground-color: #242f38; --foreground-color: #364049; --button-color: #f0a126; --button-click-color: #fbc465; --button-dim-color: #4a2e06; --button-rgb-color: 240,161,38; --text-light-color: #faf8f5; --text-mid-color: #e8e5de; --text-dark-color: #ded9ce; /* ── Tint base tokens (post-rename Phase 3) ───────────────────── Separated from --text-light-color and --cyan so that edits to the text/accent color don't simultaneously change every translucent wash, scrim, and zebra-stripe in the app. Each defaults to the same value as its source so the visual is identical at install — but editing the tint base alone now adjusts only the rgba(from ...) overlay surfaces. Convention: a `*-tint-color` token is consumed only inside `rgb(from var(--*-tint-color) r g b / α)` expressions. Direct fills should still use the source token. */ --text-light-tint-color: #c2c2c2; /* decoupled from --text-light-color (Matt 2026-05-10) */ --cyan-tint-color: #32ade6; /* defaults to --cyan */ /* ── Page / App surfaces ───────────────────────────────────────── Reverse aliases for PDF subsystem (scoped out of rename). */ --navy: var(--background-color); --navy2: var(--midground-color); --navy3: var(--foreground-color); --navy4: var(--foreground-color); /* consolidated */ --slate: var(--foreground-color); /* consolidated */ /* ── Sidebar zone-header card ─────────────────────────────────── The sidebar's collapsible zone cards (Space 1 etc) use a bright surface that contrasts against the dark navy chrome. Default white preserves the historical look; per-firm or per- theme overrides can soften this (e.g., #faf8f5 to match the warm cream of --text-light-color). */ --zone-card: white; /* ── Sidebar collapsable section background ───────────────────── Used by the Rooms / Tools / Templates collapsable areas inside the sidebar. Aliased to --navy3 so every theme that overrides --navy3 (which is all of them) also gets the matching section background for free — no per-theme duplication. To customize a specific theme's sidebar section independently from --navy3, redeclare --sidebar-section inside that theme's block. */ --sidebar-section: var(--navy3); /* ── Content card background ──────────────────────────────────── For "white-style" content cards inside panes — the Circuit Calculator on the Voltage Drop tab is the canonical user. Defaults to --navy3 in dark mode (matching the existing card surface tone). Light themes override to actual white so cards visually contrast as a paper-on-page. Other consumers can reference this token to opt into the same treatment. */ --content-card-bg: var(--navy3); /* ── Header ───────────────────────────────────────────────────── Sticky top bar. Uses a separate var so light mode can swap it */ --header-bg: rgba(17,30,42,0.92); /* dark frosted glass */ /* Header height in mobile/tablet collapsed layout. Used by `.sidebar { top: var(--hdr-h, 48px) }` to position the off-canvas sidebar drawer just below the header. 48px is the rendered header height on small viewports (smaller than desktop because the project-meta row is condensed). Promoted from inline fallback to a defined token on 2026-05-19 so the value has a single source of truth. */ --hdr-h: 48px; /* ── Accent — Brand ───────────────────────────────────────────── Primary amber used for logo, active states, CTA buttons */ --amber: var(--button-color); /* reverse alias for PDF subsystem */ --amber-rgb: var(--button-rgb-color); /* reverse alias for PDF subsystem */ --red-rgb: 229,79,79; /* RGB components for rgba(var(--red-rgb),0.x) */ --cyan-rgb: 50,173,230; /* RGB components for rgba(var(--cyan-rgb),0.x) */ --green-rgb: 61,214,140; /* RGB components for rgba(var(--green-rgb),0.x) */ --amber2: var(--button-click-color); /* reverse alias for PDF subsystem */ --amber-dim: var(--button-dim-color); /* reverse alias for PDF subsystem */ /* ── Validation banner level colors ───────────────────────────── The status bar (validation banner) at the top of the project view uses dedicated tokens for each severity level so that changes to the global --red / --amber / --cyan / --green tokens don't drift its colors. Hardcoded literals here match the dark-theme values of those base tokens at the time of split. Override per theme in _theme-overrides.css if light/contrast themes need different banner accents. */ --vb-fail: #e54f4f; /* fail level — red (Soyuz desat) */ --vb-warn: #f0a126; /* warning level — amber */ --vb-info: #32ade6; /* info level — cyan */ --vb-pass: #3dd68c; /* pass level — CRT-phosphor green */ /* ── Semantic / Status colors ─────────────────────────────────── Used for compliance badges, charts, status indicators */ --cyan: #32ade6; /* info / photometrics / sync indicators */ --green: #3dd68c; /* pass / success / approved (CRT phosphor) */ --red: #e54f4f; /* fail / error / critical (Soyuz desat) */ --purple: #bf5af2; /* time-switch category color */ --indigo: #5e5ce6; /* integration category color */ /* ── Cyan-derived semantic accents ───────────────────────────── These all default to var(--cyan) so themes that don't override them get unchanged behavior. Override per-theme to recolor a specific surface family without disturbing the others. --info status / sync / saving / answered / in-review --accent-data tag column, budget line totals, Grand Total --accent-zone zone bands, zone-name editable, room-item drop affordance --accent-tmpl template chips in sidebar --accent-photometric photometrics tab UI: IES upload, calc buttons, fixture cards --accent-protocol fallback color for one-line diagrams when no DALI/DMX/BT --accent-compare code-comparison "compare" column tint, headers, bg ───────────────────────────────────────────────────────────── */ /* ── Master info accent ───────────────────────────────────────── Single knob driving all info/status/data/zone/photometric/ template/protocol/compare UI. Decoupled from --cyan so the literal cyan color (used directly via the .color-cyan class and a few specific surfaces) and the broader "info-themed UI" family can be tuned independently. The seven semantic aliases below are kept for source-readability and backwards compat — consumer CSS that references --info, --accent-data, etc. keeps working without changes. */ --accent-info: #32ade6; --info: var(--accent-info); --accent-data: var(--accent-info); --accent-zone: var(--accent-info); --accent-tmpl: var(--accent-info); --accent-photometric: #32ade6; /* uncoupled from --accent-info 2026-05-10 — independent knob */ --accent-protocol: var(--accent-info); --accent-compare: var(--accent-info); /* ── Typography ───────────────────────────────────────────────── Three levels of text hierarchy */ --text: var(--text-light-color); /* reverse alias for PDF subsystem */ --text2: var(--text-mid-color); /* reverse alias for PDF subsystem */ --text3: var(--text-dark-color); /* reverse alias for PDF subsystem */ /* ── Borders ──────────────────────────────────────────────────── Two strengths — use --border for large containers, --border2 for inputs, chips, and tighter UI elements */ --border: rgba(255,255,255,0.07); /* subtle container border */ --border2: rgba(250,255,255,0.3); /* neutral white-tinted edge — input/chip */ /* ── Input fields ─────────────────────────────────────────────── */ --input-bg: rgba(155,155,155,0.2); /* text input background */ /* ── Surface aliases ───────────────────────────────────────────── Convenience aliases — point at navy values for easy reskinning */ /* ── Room editor category accent colors ───────────────────────── Each section of the room editor has its own accent color. Used for section headers, active pills, and sidebar dots. */ --c-params: #32ade6; /* Parameters section */ --c-occ: #f5a623; /* Occupancy Sensor section */ --c-ts: #bf5af2; /* Time-Switch / Scheduling section */ --c-day: #30d158; /* Daylight Response section */ --c-man: #ff453a; /* Manual Control section */ --c-add: #ffd60a; /* Additional Settings section */ --c-int: #5e5ce6; /* Integration section */ --c-notes: #8e8e93; /* Notes / misc section */ /* ── Border radius ────────────────────────────────────────────── */ --r: 4px; /* default radius — cards, modals (hard-edged) */ --r-sm: 2px; /* small radius — chips, badges, inputs */ --r-lg: 8px; /* large radius — floating panels, drawers */ /* ── Typography stacks ────────────────────────────────────────── */ --mono: 'Electrolize', 'SF Mono', ui-monospace, monospace; /* ── Wordmark colors — control logo independently from accent colors ── */ --wm-orizon: #f0a126; /* "Orizon" wordmark text */ --wm-one: #24a8e6; /* "1" in Orizon1 logo */ --wm-stroke: rgba(0, 0, 0, 0.65); /* outline color for Orizon1 letters (header + onboard-logo) */ --sans: 'Electrolize', -apple-system, sans-serif; /* ── Scale & spacing ──────────────────────────────────────────── */ --base-size: 13px; --ls-ui: 0.06em; /* tracking on Electrolize UI text (console) */ --fs: 1; /* font scale multiplier — controlled by Settings */ /* ── Glass / frosted effects ──────────────────────────────────── Used for the header, modals, and floating panels */ --glass: rgba(255,255,255,0.04); --glass2: rgba(255,255,255,0.07); --glass-border: rgba(255,255,255,0.10); /* ── Elevation shadows ────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.3); --shadow-lg: 0 12px 40px rgba(0,0,0,0.65), 0 4px 16px rgba(0,0,0,0.4); /* ── Animation tokens (Session 6) ────────────────────────────── Canonical timing + easings. Pick from these when writing new transitions. Audit before adding new values. --dur-fast = 120ms hover tints, small UI shifts --dur-base = 150ms default button/input states, most UI --dur-slow = 280ms modal fade, larger transitions --ease-out = material-style standard ease --ease-bounce = playful overshoot for interactions */ --dur-fast: 120ms; --dur-base: 150ms; --dur-slow: 280ms; --ease-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Protocol colors (one-line diagrams) ──────────────────────── Used in 22-oneline.js to tint BT Mesh / DALI / DMX nodes and their wire colors in the one-line SVG output. These are protocol identities, not brand colors — they stay semantic across theme changes (a DALI node is still DALI regardless of the app theme). */ --proto-bt-mesh: #60ffcc; /* Bluetooth Mesh / Casambi — cyan-green */ --proto-dali: #60c8ff; /* DALI — sky blue */ --proto-dmx: #c060ff; /* DMX — magenta */ /* ── Button accent tokens ────────────────────────────────────── Sidebar action buttons that should be independently themeable from the main brand. Default to the brand amber so the visual is unchanged if you never touch these; override in theme editor to differentiate without ripple effects elsewhere. */ --btn-takeoff-bg: var(--amber); /* Design Takeoff button base */ --btn-takeoff-ink: #000; /* Text/icon on the takeoff btn */ --btn-room-add-bg: var(--amber); /* + Room button base */ --btn-room-add-ink: #000; /* Text on the + Room button */ /* Sidebar primary-add buttons (+ Add Room / + Add Space). One shared token because the two buttons read as a single visual pair. Default aliases --navy to preserve the historical hardcoded value; override in Theme Studio (e.g. to #000) to improve light-mode readability. */ --sb-primary-add-ink: var(--navy); /* Avatar (top-right user menu button). Dedicated tokens so the avatar pill can be reskinned independently from the rest of the amber surfaces. Default to the same values they replaced so visual behavior is unchanged until a theme overrides them. */ --avatar-bg: var(--amber); --avatar-ink: var(--btn-primary-ink); /* Header bottom edge — separates the sticky header from the rest of the app. Two dedicated tokens so each can be tuned without touching the other or the rest of the app's borders/shadows. --header-border-bottom: the 1px hairline at the very bottom of the header. Default is theme-aware via rgb(from var(--text)…) so it reads as "darker than bg" in both light and dark mode. --header-shadow: the soft drop shadow that gives depth below the header. Default is black at low alpha — shadows are dark in both light and dark themes (shadows fall AWAY from light regardless of background). Slightly more visible in light mode by design. */ --header-border-bottom: rgb(from var(--text) r g b / 0.18); --header-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); /* ── Status indicators (pass / warn / fail) ──────────────────── Semantic pairs used across compliance chips, punch list, Cx, device validation, RFI status. Editor's "Link to base" toggle swaps between literal hex and rgb(from var(--base) r g b / α). */ --status-pass-ink: #15803d; --status-pass-bg: #dcfce7; --status-warn-ink: #92400e; --status-warn-bg: #fef3c7; --status-fail-ink: #b91c1c; --status-fail-bg: #fee2e2; /* ── Surface tints (3 alpha tiers × 5 semantic roles) ────────── */ --surface-success-subtle: rgb(from var(--green) r g b / 0.07); --surface-success-soft: rgb(from var(--green) r g b / 0.14); --surface-success-strong: rgb(from var(--green) r g b / 0.22); --surface-warning-subtle: rgb(from var(--amber) r g b / 0.07); --surface-warning-soft: rgb(from var(--amber) r g b / 0.14); --surface-warning-strong: rgb(from var(--amber) r g b / 0.22); --surface-danger-subtle: rgb(from var(--red) r g b / 0.07); --surface-danger-soft: rgb(from var(--red) r g b / 0.14); --surface-danger-strong: rgb(from var(--red) r g b / 0.22); --surface-info-subtle: rgb(from var(--info) r g b / 0.07); --surface-info-soft: rgb(from var(--info) r g b / 0.14); --surface-info-strong: rgb(from var(--info) r g b / 0.22); --surface-accent-subtle: rgb(from var(--amber) r g b / 0.07); --surface-accent-soft: rgb(from var(--amber) r g b / 0.14); --surface-accent-strong: rgb(from var(--amber) r g b / 0.22); /* ── Field states (form inputs) — aliases for editor UX ──────── */ --field-bg: var(--navy4); --field-bg-hover: var(--navy3); --field-border: var(--border2); --field-border-hover: var(--border); --field-border-focus: var(--amber); --field-focus-ring: rgb(from var(--amber) r g b / 0.14); /* ── Button extension (primary / ghost) ─────────────────────── */ --btn-primary-bg: var(--amber); --btn-primary-ink: #000; --btn-ghost-bg: rgb(from var(--text) r g b / 0.04); --btn-ghost-ink: var(--text2); /* ── Canvas select ring (on-screen only, never in PDFs) ──────── */ --canvas-select-ring: rgb(from var(--amber) r g b / 0.55); /* ════════════════════════════════════════════════════════════════ PHASE 1 TOKENS — added 2026-04-26 by the color tokenization project. Defined-but-unused: code still hardcodes these values. Phases 2-4 migrate hardcoded uses to var() calls. See COLOR_INVENTORY.md in repo root for the full inventory + plan. ════════════════════════════════════════════════════════════════ */ /* ── Surfaces (additional) — reverse aliases for PDF subsystem ─ */ --page-bg-dark: var(--text-mid-color); /* consolidated → text-mid */ --surface-darker: var(--text-mid-color); /* consolidated → text-mid */ --surface-neutral-light: var(--text-mid-color); /* consolidated → text-mid */ --surface-soft-light: var(--midground-color); /* consolidated → midground */ --surface: var(--foreground-color); /* consolidated → foreground */ --surface2: var(--foreground-color); /* consolidated → foreground */ --card-bg-light: var(--text-mid-color); /* consolidated → text-mid */ /* ── Borders (additional weights) ──────────────────────────── */ --border-subtle-light: #e0e0e5; /* subtle dividers, room editor */ --border-medium-dark: #dddddd; /* medium border in dark theme */ --border-strong-dark: #cccccc; /* stronger border for emphasis */ /* ── Text (additional shades) — reverse aliases per consolidation ─ */ --text-disabled-dark: var(--text-dark-color); /* consolidated → text-dark */ --text-muted-dark: var(--text-dark-color); /* consolidated → text-dark */ --text-secondary-dark: var(--text-mid-color); /* consolidated → text-mid */ --text-meta-light: var(--text-mid-color); /* consolidated → text-mid */ /* ── Status (additional shades) ────────────────────────────── */ --status-error: #ef4444; /* error/fail (Tailwind red-500) */ --status-success-bright: #7fd086; /* light-theme success bright */ --accent-success-subtle: rgb(from var(--green) r g b / 0.15); --accent-cyan-subtle: rgb(from var(--cyan-tint-color) r g b / 0.08); /* ── Space-type palette (used in 03-dom-init.js SPACE_TYPE_COLORS) ── Themed as a coordinated palette — all eight tokens should be edited together for visual coherence. */ --space-type-office: #4eb8c8; --space-type-healthcare: #52c97a; --space-type-hospital: #e05252; --space-type-manufacturing: #9b7fe8; --space-type-dining: #e8a430; --space-type-retail: #e8c430; --space-type-residential: #60a8e0; --space-type-other: #92a8bb; /* ── Drawing/Takeoff markers (canvas) ──────────────────────── */ --takeoff-marker-fill-active: #f5c060; /* ── Shadow / scrim alpha tokens All alpha-linked to --text so they automatically darken/lighten with theme switches. RGB pickable + alpha slider in the editor. */ --shadow-subtle-low: rgb(from var(--text) r g b / 0.04); --shadow-subtle-med: rgb(from var(--text) r g b / 0.12); --shadow-subtle-high: rgb(from var(--text) r g b / 0.15); --shadow-soft: rgb(from var(--text) r g b / 0.20); --scrim-medium: rgb(from var(--text) r g b / 0.50); --scrim-strong: rgb(from var(--text) r g b / 0.60); --scrim-extra-strong: rgb(from var(--text) r g b / 0.70); --scrim-near-opaque: rgb(from var(--text) r g b / 0.75); /* ── Glass tints (light alpha on dark surfaces) ────────────── */ --surface-glass-faint: rgba(255,255,255,0.06); --surface-glass-medium: rgba(255,255,255,0.10); /* ── White paper-card surface ──────────────────────────────── Pure white card on theme background — used for sidebar zone blocks, zone headers, empty-state cards, and the engineering- drawing aesthetic where cards read as "paper pinned to the workspace." Deliberately not a navy variant: the contrast against the colored surface is the point. */ } /* ── 2. LIGHT MODE TOKEN OVERRIDES ────────────────────────────────── */ /* All tokens not listed here inherit the dark mode values above. Only values that differ in light mode need to appear here. */ [data-theme="light"] { /* ── v26.05.05: palette swap ────────────────────────────────── Light theme uses a slate (#7e8c9a) primary + cool off-white (#f0f8ff) page background. This palette became the canonical light look in v26.05.05 (replacing an earlier higher-contrast light theme). The previous one-off light variant that this palette derives from has been removed in v26.05.06. Three categories of token live in this block: 1. Palette tokens — direct overrides of color values. These are the "look" of the theme. 2. Semantic & validation tokens (--green, --red, --vb-fail, --vb-warn, etc) — kept light-readable so error banners / pass states / etc don't inherit dark-theme values that would read poorly on a light background. 3. Phase-1 dark→light bridge tokens (--text-muted-dark, --border-medium-dark, etc) — preserved so shared CSS that references the dark-suffixed names still resolves to sensible values in light mode. ─────────────────────────────────────────────────────────── */ /* ── 1. Palette tokens ────────────────────────────────────── */ /* Page / App surfaces — cool off-white with subtle blue tint */ --background-color: #f0f8ff; --midground-color: #e7f0f8; --foreground-color: #e7f0f8; --header-bg: rgba(110, 157, 201, 0.92); /* Accent — Brand. Note: --amber is the primary action color across the app (buttons, focus rings, etc). In this theme the "amber" tokens map to slate so the primary action color is slate, not orange. The actual amber color (#f0a126) persists in the wordmark via --wm-orizon below. */ --button-color: #7e8c9a; --button-click-color: #6e9dc9; --button-dim-color: #7e8c9a; --button-rgb-color: 110, 157, 201; /* Brand cyan — used for accent highlights, NOT for the validation- info banner (those use --vb-info, kept dark-readable below). */ --cyan: #62b0fe; --cyan-tint-color: #62b0fe; /* defaults to --cyan */ /* Typography */ --text-light-color: #232425; --text-light-tint-color: #232425; /* defaults to --text-light-color */ --text-mid-color: #404245; --text-dark-color: #404245; /* Borders */ --border: rgba(126, 140, 154, 0.5); --border2: rgba(126, 140, 154, 0.9); /* Inputs */ --input-bg: rgba(231, 240, 248, 0.9); /* Buttons */ --btn-takeoff-bg: #7e8c9a; --btn-room-add-bg: #7e8c9a; --sb-primary-add-ink: #f0f8ff; --btn-primary-bg: #7e8c9a; /* Override base #000 — primary button text on slate #7e8c9a lacks contrast in black. Cool off-white reads cleaner. */ --btn-primary-ink: #f0f8ff; --btn-ghost-bg: rgb(from #232425 r g b / 0.04); --btn-ghost-ink: #404245; /* Surface tinting (banners, callouts, tabs). Derived from the slate/cyan accents at low opacity. */ --surface-warning-subtle: rgb(from #7e8c9a r g b / 0.07); --surface-warning-soft: rgb(from #7e8c9a r g b / 0.14); --surface-warning-strong: rgb(from #7e8c9a r g b / 0.22); --surface-info-subtle: rgb(from #62b0fe r g b / 0.07); --surface-info-soft: rgb(from #62b0fe r g b / 0.14); --surface-info-strong: rgb(from #62b0fe r g b / 0.22); --surface-accent-subtle: rgb(from #7e8c9a r g b / 0.07); --surface-accent-soft: rgb(from #7e8c9a r g b / 0.14); --surface-accent-strong: rgb(from #7e8c9a r g b / 0.22); /* Field treatments */ --field-bg: #e7f0f8; --field-bg-hover: #e7f0f8; --field-border: rgba(126, 140, 154, 0.9); --field-border-hover: rgba(126, 140, 154, 0.5); --field-border-focus: #7e8c9a; --field-focus-ring: rgb(from #7e8c9a r g b / 0.14); --canvas-select-ring: rgb(from #7e8c9a r g b / 0.55); --accent-cyan-subtle: rgb(from #62b0fe r g b / 0.08); /* Shadow alphas — derived from --text. Note these are alpha-only values for use inside shadow shorthand strings, NOT replacements for --shadow-sm/md/lg below (those are full box-shadow declarations used by elevation primitives). */ --shadow-subtle-low: rgb(from #232425 r g b / 0.04); --shadow-subtle-med: rgb(from #232425 r g b / 0.12); --shadow-subtle-high: rgb(from #232425 r g b / 0.15); --shadow-soft: rgb(from #232425 r g b / 0.20); /* Scrims (modal overlays) */ --scrim-medium: rgb(from #232425 r g b / 0.50); --scrim-strong: rgb(from #232425 r g b / 0.60); --scrim-extra-strong: rgb(from #232425 r g b / 0.70); --scrim-near-opaque: rgb(from #232425 r g b / 0.75); /* ── 2. Semantic & validation tokens ──────────────────────────── v26.05.05: REMOVED previous overrides. Light previously kept its own darker, more muted versions of --green/red/purple/indigo and --vb-fail/warn/info/pass for "better contrast on light surfaces." That made the saved-status dot read forest green in light vs Apple green in the rest of the UI, and similar inconsistencies. Light now falls through to :root for these tokens. Wordmark colors below are the only semantic overrides retained — they're brand identity, not status indicators. */ /* Wordmark — kept the original brand colors (amber + cyan) so the Orizon1 logo doesn't lose its identity even though --amber the button color shifted to slate. Wordmark identity > UI palette. */ --wm-one: #24a8e6; --wm-orizon: #f0a126; /* v26.05.05: glass tokens (--glass, --glass2, --glass-border) and full elevation shadows (--shadow-sm, --shadow-md, --shadow-lg) used to be overridden here for "tuned for light backgrounds" reasons. Removed — they now fall through to :root values. The :root glass values are 4-10% white opacity (essentially invisible on light bg, so glass effects are null in light theme). The :root shadow values are heavier alpha (designed for dark backgrounds) but render acceptably on light. If we ever want subtler shadows on light backgrounds we'll re-add the override. */ /* ── 3. Phase 1 dark→light bridge tokens ──────────────────── Added 2026-04-26. Most Phase 1 tokens auto-adapt via rgb(from var(--text) r g b / α) so they don't need light overrides. Only tokens that are explicitly dark-theme-named but might be referenced in shared CSS get explicit light values here. */ --border-medium-dark: var(--border); --border-strong-dark: var(--border2); } /* ════════════════════════════════════════════════════════════════════ THEME COMPONENT OVERRIDES ════════════════════════════════════════════════════════════════════ Light-theme component-specific overrides. These are rules scoped to [data-theme="light"] that tweak specific components whose base colors are not fully tokenized. Build concatenates this file AFTER _tokens.css so the theme-attribute selectors resolve correctly. ════════════════════════════════════════════════════════════════════ */ /* ── 3. LIGHT MODE COMPONENT OVERRIDES ────────────────────────────── */ /* Components that use hardcoded colors (not CSS vars) need explicit overrides in light mode. Grouped by UI section for easy editing. */ /* ── Header ─────────────────────────────────────────────────────── v26.05.05: removed the [data-theme="light"] .header override. Previously set border-bottom-color: var(--button-color) and a custom box-shadow. With the palette swap (--amber is now slate), the border read as a strong slate line. Light now falls through to the base rule's --header-border-bottom (subtle text-colored) and --header-shadow. */ /* ── Sidebar ─────────────────────────────────────────────────────── v26.05.05: All sidebar overrides removed. They set values that diverged from the base-rule fall-through (e.g. sidebar bg --navy vs base --navy2). With the new palette, the base rules already produce the correct visual; the overrides were vestigial from the previous light palette where --navy was a real blue. */ /* ── Cards / Output area ───────────────────────────────────────────── v26.04.27: .output-card is now a transparent layout wrapper; its former card styling now lives on each of its three floating children (.output-card-header, .out-tabs, .pane-content). The light-theme override mirrors that split. v26.05.05: REMOVED all card / output-card-header / out-tabs / pane-content overrides for light theme. They produced different backgrounds and shadows than the base-rule fall-through, causing visible edge divergence. Light now uses base rules. */ [data-theme="light"] .narrative-doc { color: var(--text-mid-color); } /* ── Output tabs ─────────────────────────────────────────────────── v26.05.05: REMOVED the .out-tab / .out-tab.active / .out-tab:hover overrides. They set solid navy3/navy2/navy4 backgrounds on each individual tab, filling the whole strip with --navy3 (#e7f0f8). Tabs now use the base rule (background: none), letting the page color show through with only the strip's border defining the bar. */ /* ── Compliance bars ─────────────────────────────────────────────── */ [data-theme="light"] .comp-bar-pass { background: rgba(30,122,68,0.12); border-color: rgba(30,122,68,0.4); } [data-theme="light"] .comp-bar-warn { background: rgba(192,122,16,0.12); border-color: rgba(192,122,16,0.4); } [data-theme="light"] .comp-bar-fail { background: rgba(192,57,43,0.12); border-color: rgba(192,57,43,0.4); } /* ── Pills / toggles ─────────────────────────────────────────────── */ [data-theme="light"] .pill { background: var(--foreground-color); border-color: var(--border2); color: var(--text-mid-color); } /* v26.05.05: pill on-state was hardcoded amber-orange. Updated to slate to track the new primary action color. Uses --amber so a future palette tweak propagates without touching this rule again. */ [data-theme="light"] .pill.on { background: rgb(from var(--button-color) r g b / 0.15); border-color: var(--button-color); color: var(--button-color); } /* ── Modals ──────────────────────────────────────────────────────── */ [data-theme="light"] .modal { background: var(--text-mid-color); border-color: var(--border); box-shadow: 0 8px 40px var(--shadow-subtle-high); } [data-theme="light"] .modal-bg { background: rgb(from var(--text-light-tint-color) r g b / 0.3); } /* ── Tables (matrix, controls schedule, setpoints) ───────────────── */ [data-theme="light"] .ctable th { background: var(--midground-color); } [data-theme="light"] .zone-row td { background: var(--midground-color); color: var(--text-mid-color); } [data-theme="light"] .cat-section { border-color: var(--border); } [data-theme="light"] .cat-hdr { border-bottom-color: var(--border); } [data-theme="light"] .sp-table thead th { background: var(--foreground-color); } [data-theme="light"] .sp-table tbody tr.sp-zone td { background: var(--midground-color); color: var(--text-mid-color); } /* ── Revisions / CX checklist ────────────────────────────────────── */ [data-theme="light"] .rev-entry:nth-child(even), [data-theme="light"] .cx-item:nth-child(even) { background: var(--foreground-color); } [data-theme="light"] .cx-room-hdr { background: var(--foreground-color); border-color: var(--border); } [data-theme="light"] .cx-signoff { background: var(--foreground-color); border-color: var(--border); } /* ── Bulk edit panel ─────────────────────────────────────────────── */ [data-theme="light"] .bulk-scope { background: var(--foreground-color); } [data-theme="light"] .bulk-preview { background: var(--foreground-color); } /* ── Tooltips ────────────────────────────────────────────────────── */ [data-theme="light"] .tip-icon { background: var(--foreground-color); border-color: var(--border2); } [data-theme="light"] .tip-icon::after { background: var(--text-mid-color); color: var(--midground-color); box-shadow: 0 4px 16px var(--shadow-subtle-high); } /* ── Punch list ──────────────────────────────────────────────────── */ [data-theme="light"] .pl-item { background: var(--text-mid-color); } [data-theme="light"] .pl-item:hover { background: var(--background-color); } [data-theme="light"] .pl-add-card { background: var(--foreground-color); } [data-theme="light"] .pl-sort-bar { background: var(--foreground-color); } /* ── RFI log ─────────────────────────────────────────────────────── */ [data-theme="light"] .rfi-item { background: var(--text-mid-color); } [data-theme="light"] .rfi-item:hover { background: var(--background-color); } [data-theme="light"] .rfi-add-card { background: var(--foreground-color); } [data-theme="light"] .rfi-sort-bar { background: var(--foreground-color); } [data-theme="light"] .rfi-q-block { background: var(--shadow-subtle-low); } /* ── Misc UI ──────────────────────────────────────────────────────── */ [data-theme="light"] body::before { display: none; } /* hide dark-mode grain texture */ [data-theme="light"] #themeToggle { color: var(--button-color); border-color: var(--button-dim-color); } /* ════════════════════════════════════════════════════════════════════ DISTANT BLUE — RETRO NASA / APOLLO-ERA THEME Token overrides for [data-theme="distant-blue"]. All colors reference the same CSS variable names as dark/light mode. ════════════════════════════════════════════════════════════════════ */ [data-theme="distant-blue"] { /* ── Page / App surfaces ────────────────────────────────────────── */ --background-color: #c8c8cc; /* page background — warm mid-gray */ --midground-color: #d8d8dc; /* panel / modal background */ --foreground-color: #e4e4e8; /* card / sidebar item / elevated surface */ /* Content card background — white for paper-on-page contrast */ --content-card-bg: #ffffff; /* ── Header ─────────────────────────────────────────────────────── */ --header-bg: rgba(0,123,154,0.50); /* ── Accent — NASA red replaces amber ──────────────────────────── */ --button-color: #cc0000; --button-rgb-color: 204,0,0; --button-click-color: #aa0000; --button-dim-color: #f5c0c0; /* ── Semantic / Status ──────────────────────────────────────────── */ --cyan: #006b8a; --cyan-tint-color: #006b8a; /* defaults to --cyan */ --cyan-rgb: 0,107,138; --accent-info: #006b8a; /* master info accent — drives 7 derived semantic tokens */ --accent-photometric: #006b8a; /* uncoupled — mirrors theme's accent-info to preserve prior behavior */ --green: #1a6b2e; --green-rgb: 26,107,46; --red: #cc0000; --red-rgb: 204,0,0; --purple: #6a3d8f; --indigo: #2e2c8a; /* Validation banner — NASA red is also the brand --amber here, so pick a distinct warm color for --vb-warn so users can still distinguish warn-from-fail in the status bar. The other three map to the theme's semantic colors as you'd expect. */ --vb-fail: #cc0000; --vb-warn: #c97500; /* warm orange, distinct from NASA red */ --vb-info: #006b8a; --vb-pass: #1a6b2e; /* ── Typography ─────────────────────────────────────────────────── */ --text-light-color: #0a0a0e; --text-light-tint-color: #0a0a0e; /* defaults to --text-light-color */ --text-mid-color: #2a2a32; --text-dark-color: #5a5a68; /* ── Borders — red-tinted ───────────────────────────────────────── */ --border: rgba(160,0,0,0.22); --border2: rgba(160,0,0,0.42); /* ── Input fields ───────────────────────────────────────────────── */ --input-bg: rgba(0,0,0,0.04); /* ── Surface aliases ─────────────────────────────────────────────── */ --c-params: #006b8a; --c-occ: #cc0000; --c-ts: #6a3d8f; --c-day: #1a6b2e; --c-man: #aa0000; --c-add: #b87800; --c-int: #2e2c8a; --c-notes: #5a5a68; /* ── Glass / frosted ────────────────────────────────────────────── */ --glass: rgba(255,255,255,0.45); --glass2: rgba(255,255,255,0.70); --glass-border: rgba(160,0,0,0.18); /* ── Elevation shadows ──────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.10); --shadow-md: 0 4px 16px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10); --shadow-lg: 0 12px 40px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.12); } /* ── Distant Blue component overrides ───────────────────────────── */ /* Distant Blue wordmark — white "Orizon" + white "1" on teal header */ [data-theme="distant-blue"] .header .wordmark em { color: var(--wm-orizon); } [data-theme="distant-blue"] .header .wordmark .wm-ver { color: var(--wm-one); } /* In non-header contexts (wizard, onboard, auth) use red + white */ [data-theme="distant-blue"] { --wm-one: #24a8e6; --wm-orizon: #f0a126; } [data-theme="distant-blue"] .header { background: var(--header-bg); border-bottom: 2px solid var(--button-color); box-shadow: 0 1px 8px var(--shadow-subtle-med); } [data-theme="distant-blue"] .sidebar { background: var(--background-color); border-right: 1px solid var(--border2); } [data-theme="distant-blue"] .zone-header { background: var(--foreground-color); border-bottom: 1px solid var(--border); } [data-theme="distant-blue"] .zone-header:hover { background: var(--foreground-color); } [data-theme="distant-blue"] .room-item:hover { background: var(--foreground-color); } [data-theme="distant-blue"] .room-item.active { background: rgba(160,0,0,0.10); border-color: var(--button-color); } [data-theme="distant-blue"] .tmpl-bar { background: var(--foreground-color); border-top: 1px solid var(--border2); } [data-theme="distant-blue"] .sb-search { background: var(--input-bg); border-color: var(--border2); } [data-theme="distant-blue"] .card, [data-theme="distant-blue"] .output-card-header, [data-theme="distant-blue"] .out-tabs, [data-theme="distant-blue"] .pane-content { background: var(--midground-color); border: 1px solid var(--border2); box-shadow: 0 1px 4px rgb(from var(--text-light-tint-color) r g b / 0.10); } [data-theme="distant-blue"] .output-card-header { background: var(--foreground-color); } [data-theme="distant-blue"] .narrative-doc { color: var(--text-mid-color); } [data-theme="distant-blue"] .out-tab { background: var(--foreground-color); color: var(--text-mid-color); border-color: var(--border); } [data-theme="distant-blue"] .out-tab.active { background: var(--foreground-color); color: var(--button-color); } [data-theme="distant-blue"] .out-tab:hover { background: var(--foreground-color); } [data-theme="distant-blue"] .comp-bar-pass { background: rgba(26,107,46,0.12); border-color: rgba(26,107,46,0.40); } [data-theme="distant-blue"] .comp-bar-warn { background: rgba(184,120,0,0.12); border-color: rgba(184,120,0,0.40); } [data-theme="distant-blue"] .comp-bar-fail { background: rgba(160,0,0,0.10); border-color: rgba(160,0,0,0.35); } [data-theme="distant-blue"] .pill { background: var(--foreground-color); border-color: var(--border2); color: var(--text-mid-color); } [data-theme="distant-blue"] .pill.on { background: rgba(160,0,0,0.12); border-color: var(--button-color); color: var(--button-color); } [data-theme="distant-blue"] .modal { background: var(--midground-color); border-color: var(--border2); } [data-theme="distant-blue"] .modal-bg { background: rgb(from var(--text-light-tint-color) r g b / 0.35); } [data-theme="distant-blue"] .cat-section { border-color: var(--border2); } [data-theme="distant-blue"] .cat-hdr { border-bottom-color: var(--border); } [data-theme="distant-blue"] .cat-body { background: var(--foreground-color); } [data-theme="distant-blue"] .ctable th { background: var(--foreground-color); } [data-theme="distant-blue"] .zone-row td { background: var(--background-color); color: var(--text-light-color); } [data-theme="distant-blue"] .sp-table thead th { background: var(--foreground-color); } [data-theme="distant-blue"] .sp-table tbody tr.sp-zone td { background: var(--background-color); color: var(--text-light-color); } [data-theme="distant-blue"] .rev-entry:nth-child(even), [data-theme="distant-blue"] .cx-item:nth-child(even) { background: var(--foreground-color); } [data-theme="distant-blue"] .cx-room-hdr { background: var(--foreground-color); border-color: var(--border); } [data-theme="distant-blue"] .cx-signoff { background: var(--foreground-color); border-color: var(--border); } [data-theme="distant-blue"] .bulk-scope { background: var(--foreground-color); } [data-theme="distant-blue"] .bulk-preview { background: var(--foreground-color); } [data-theme="distant-blue"] .tip-icon { background: var(--foreground-color); border-color: var(--border2); } /* Auth gate in Distant Blue */ [data-theme="distant-blue"] #authGate { background: var(--background-color); } [data-theme="distant-blue"] .auth-input { background: var(--input-bg); border-color: var(--border2); color: var(--text-light-color); } [data-theme="distant-blue"] .auth-input:focus { border-color: var(--button-color); } /* Inner tabs */ [data-theme="distant-blue"] .inner-tab { color: var(--text-dark-color); } [data-theme="distant-blue"] .inner-tab.active { color: var(--button-color); border-bottom-color: var(--button-color); } [data-theme="distant-blue"] .inner-tabs { border-bottom-color: var(--border2); } /* Wordmark — keep Orizon red, 1 cyan */ [data-theme="distant-blue"] .auth-gate-o { color: var(--wm-orizon); } [data-theme="distant-blue"] .auth-gate-v { color: var(--wm-one); } /* hdr-btn variants */ [data-theme="distant-blue"] .hdr-btn-ghost { color: var(--text-mid-color); } [data-theme="distant-blue"] .hdr-btn-ghost:hover { background: rgb(from var(--text-light-tint-color) r g b / 0.08); color: var(--text-light-color); } [data-theme="distant-blue"] .hdr-btn-outline { border-color: var(--border2); color: var(--text-mid-color); } [data-theme="distant-blue"] .hdr-btn-outline:hover { background: rgb(from var(--text-light-tint-color) r g b / 0.06); border-color: var(--button-color); } /* Wizard */ [data-theme="distant-blue"] .wizard-shell { background: var(--midground-color); border-color: var(--border2); } [data-theme="distant-blue"] .wizard-option { background: var(--foreground-color); border-color: var(--border2); } [data-theme="distant-blue"] .wizard-option:hover { background: var(--foreground-color); border-color: var(--button-color); } [data-theme="distant-blue"] .wizard-option.selected { border-color: var(--button-color); background: rgba(160,0,0,0.08); } /* ══════════════════════════════════════════════════════════════════ LCA THEME — data-theme="lca" Light slate base with deep teal accent. Default theme for LCA Free tier users. ══════════════════════════════════════════════════════════════════ */ [data-theme="lca"] { /* ── Page / App surfaces ────────────────────────────────────────── */ --background-color: #b6b9c9; /* page background — light slate */ --midground-color: #c0c3dd; /* panel / modal background */ --foreground-color: #d0d0e2; /* card / sidebar item / elevated surface */ /* Content card background — white for paper-on-page contrast */ --content-card-bg: #ffffff; /* ── Header ─────────────────────────────────────────────────────── */ --header-bg: rgba(16,27,86,0.94); /* ── Accent — deep teal replaces amber ─────────────────────────── */ --button-color: #00878a; --button-rgb-color: 0,135,138; --button-click-color: #69e5e8; --button-dim-color: #cceaea; /* ── Semantic / Status ──────────────────────────────────────────── */ --cyan: #375758; --cyan-tint-color: #375758; /* defaults to --cyan */ --cyan-rgb: 55,87,88; --accent-info: #375758; /* master info accent — drives 7 derived semantic tokens */ --accent-photometric: #375758; /* uncoupled — mirrors theme's accent-info to preserve prior behavior */ --green: #0da566; --green-rgb: 13,165,102; --red: #b62525; --red-rgb: 182,37,37; --purple: #7d4ab0; --indigo: #5553d0; /* Validation banner — LCA's --amber is teal (close to --cyan), so pick a distinct warm orange for --vb-warn that won't merge into the info/pass tints. The other three map to LCA's semantic colors so theme parity is maintained. */ --vb-fail: #b62525; --vb-warn: #c97500; /* warm orange, distinct from teal accent */ --vb-info: #375758; --vb-pass: #0da566; /* ── Typography ─────────────────────────────────────────────────── */ --text-light-color: #020622; --text-light-tint-color: #020622; /* defaults to --text-light-color */ --text-mid-color: #02072c; --text-dark-color: #19235c; /* ── Borders ────────────────────────────────────────────────────── */ --border: #393c51; --border2: #6f738b; /* ── Input fields ───────────────────────────────────────────────── */ --input-bg: rgba(0,0,0,0.06); /* ── Surface aliases ────────────────────────────────────────────── */ --c-params: #00878a; --c-occ: #0da566; --c-ts: #7d4ab0; --c-day: #375758; --c-man: #5553d0; --c-add: #00878a; --c-int: #5553d0; --c-notes: #19235c; /* ── Glass / frosted ────────────────────────────────────────────── */ --glass: rgba(0,0,0,0.05); --glass2: rgba(0,0,0,0.09); --glass-border: rgba(0,135,138,0.25); /* ── Elevation shadows ──────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(2,6,34,0.18), 0 1px 2px rgba(2,6,34,0.10); --shadow-md: 0 4px 16px rgba(2,6,34,0.20), 0 2px 6px rgba(2,6,34,0.12); --shadow-lg: 0 12px 40px rgba(2,6,34,0.28), 0 4px 16px rgba(2,6,34,0.16); /* ── Wordmark ───────────────────────────────────────────────────── */ --wm-one: #24a8e6; --wm-orizon: #f0a126; } /* ── LCA component overrides ─────────────────────────────────────── */ [data-theme="lca"] .header { background: var(--header-bg); border-bottom: 1px solid rgba(50,203,205,0.30); box-shadow: 0 1px 12px rgb(from var(--text-light-tint-color) r g b / 0.40); } [data-theme="lca"] .header .wordmark em { color: var(--wm-orizon); } [data-theme="lca"] .header .wordmark .wm-ver { color: var(--wm-one); } [data-theme="lca"] .auth-gate-o { color: var(--wm-orizon); } [data-theme="lca"] .auth-gate-v { color: var(--wm-one); } [data-theme="lca"] .sidebar { background: var(--midground-color); border-right: 1px solid var(--border); } [data-theme="lca"] .zone-header { background: var(--foreground-color); border-bottom: 1px solid var(--border); } [data-theme="lca"] .zone-header:hover { background: rgba(50,203,205,0.08); } [data-theme="lca"] .room-item:hover { background: rgba(50,203,205,0.08); } [data-theme="lca"] .room-item.active { background: rgba(50,203,205,0.12); border-color: var(--button-color); } [data-theme="lca"] .tmpl-bar { background: var(--foreground-color); border-top: 1px solid var(--border); } [data-theme="lca"] .sb-search { background: var(--input-bg); border-color: var(--border2); } [data-theme="lca"] .card, [data-theme="lca"] .output-card-header, [data-theme="lca"] .out-tabs, [data-theme="lca"] .pane-content { background: var(--midground-color); border: 1px solid var(--border); box-shadow: var(--shadow-md); } [data-theme="lca"] .output-card-header { background: rgba(50,203,205,0.08); } [data-theme="lca"] .narrative-doc { color: var(--text-mid-color); background: var(--shadow-soft); } [data-theme="lca"] .out-tab { background: var(--foreground-color); color: var(--text-dark-color); border-color: var(--border); } [data-theme="lca"] .out-tab.active { background: rgba(50,203,205,0.10); color: var(--button-color); border-color: var(--button-color); } [data-theme="lca"] .out-tab:hover { background: rgba(50,203,205,0.08); color: var(--text-mid-color); } [data-theme="lca"] .pill { background: var(--surface-glass-faint); border-color: var(--border2); color: var(--text-mid-color); } [data-theme="lca"] .pill.on { background: rgba(50,203,205,0.15); border-color: var(--button-color); color: var(--button-color); } [data-theme="lca"] .btn-amber { background: var(--button-color); color: #050a0e; border-color: var(--button-color); } [data-theme="lca"] .btn-amber:hover { background: var(--button-click-color); border-color: var(--button-click-color); } [data-theme="lca"] .modal { background: var(--midground-color); border-color: var(--border); } [data-theme="lca"] .modal-bg { background: var(--scrim-strong); } [data-theme="lca"] .cat-section { border-color: var(--border); } [data-theme="lca"] .cat-hdr { border-bottom-color: var(--border); } [data-theme="lca"] .cat-body { background: var(--shadow-subtle-high); } [data-theme="lca"] .ctable th { background: rgba(50,203,205,0.08); color: var(--text-mid-color); } [data-theme="lca"] .ctable td { background: var(--midground-color); } [data-theme="lca"] .ctable tr:nth-child(even) td { background: var(--shadow-subtle-high); } [data-theme="lca"] .zone-row td { background: rgba(50,203,205,0.10) !important; color: var(--button-color) !important; } [data-theme="lca"] .comp-bar-pass { background: rgba(46,204,138,0.12); border-color: rgba(46,204,138,0.40); } [data-theme="lca"] .comp-bar-warn { background: rgba(50,203,205,0.10); border-color: rgba(50,203,205,0.35); } [data-theme="lca"] .comp-bar-fail { background: rgba(255,95,95,0.10); border-color: rgba(255,95,95,0.35); } [data-theme="lca"] .inner-tab { color: var(--text-dark-color); } [data-theme="lca"] .inner-tab.active { color: var(--button-color); border-bottom-color: var(--button-color); } [data-theme="lca"] .inner-tabs { border-bottom-color: var(--border); } [data-theme="lca"] #authGate { background: var(--background-color); } [data-theme="lca"] .auth-input { background: var(--input-bg); border-color: var(--border2); color: var(--text-light-color); } [data-theme="lca"] .auth-input:focus { border-color: var(--button-color); } [data-theme="lca"] .rev-entry:nth-child(even), [data-theme="lca"] .cx-item:nth-child(even) { background: var(--shadow-subtle-high); } [data-theme="lca"] .cx-room-hdr { background: var(--foreground-color); border-color: var(--border); } [data-theme="lca"] .out-pane-hdr { background: rgba(50,203,205,0.06); } [data-theme="lca"] .out-pane-title { color: var(--button-color); } [data-theme="lca"] .wizard-shell { background: var(--midground-color); border-color: var(--border); } [data-theme="lca"] .wizard-option { background: var(--foreground-color); border-color: var(--border); } [data-theme="lca"] .wizard-option:hover { border-color: var(--button-color); background: rgba(50,203,205,0.08); } [data-theme="lca"] .wizard-option-hero { border-color: var(--button-color); } /* ── Offline read-only mode ──────────────────────────────────── */ [data-offline="true"] .btn:not(#offlineBanner button), [data-offline="true"] input:not([type="hidden"]), [data-offline="true"] select, [data-offline="true"] textarea, [data-offline="true"] [contenteditable] { pointer-events: none; opacity: 0.6; } [data-offline="true"] .hdr-btn-primary { pointer-events: none; opacity: 0.5; } [data-offline="true"] #offlineBanner button { pointer-events: all; opacity: 1; } /* ── Viewer mode (share link) ────────────────────────────────── */ [data-viewer="true"] input:not([type="hidden"]), [data-viewer="true"] select, [data-viewer="true"] textarea, [data-viewer="true"] [contenteditable] { pointer-events: none; opacity: 0.7; } [data-viewer="true"] .btn { pointer-events: none; opacity: 0.5; } /* Keep PDF export and viewer banner buttons active */ [data-viewer="true"] .hdr-btn-primary, [data-viewer="true"] #viewerBanner a, [data-viewer="true"] #viewerBanner button { pointer-events: all; opacity: 1; } /* Hide edit-only UI elements entirely in viewer mode */ [data-viewer="true"] .room-add-btn, [data-viewer="true"] .zone-add-btn, [data-viewer="true"] .tmpl-bar, [data-viewer="true"] .rev-add-row, [data-viewer="true"] .dirty-indicator, [data-viewer="true"] [data-action="auth-save-now"], [data-viewer="true"] [data-action="auth-new-project"], [data-viewer="true"] #shareLinkBtn { display: none !important; } /* Sidebar rooms — no hover edit affordance in viewer mode */ [data-viewer="true"] .room-item { cursor: default; } /* ════════════════════════════════════════════════════════════════════ ORIZON1 · COMPONENTS & LAYOUT ════════════════════════════════════════════════════════════════════ Base reset + all component styles. Build concatenates CSS in this order: _tokens.css → _theme-overrides.css → main.css When editing: • Token values (colors, shadows, etc.) → _tokens.css • Light-theme component tweaks → _theme-overrides.css • Everything else → this file ════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--sans); background: var(--background-color); color: var(--text-light-color); min-height: 100vh; overflow-x: clip; /* clip instead of hidden — does not create stacking context, fixed modals work correctly */ font-size: var(--base-size); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--dur-slow), color var(--dur-slow); /* Reserve vertical scrollbar space at all times to prevent UI jumping when content reflow briefly toggles the scrollbar on/off (e.g. when toast notifications fire aria-live announcements, or when tab switches reveal content taller vs shorter than the viewport). */ scrollbar-gutter: stable; } /* Subtle noise grain */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; opacity: 0.6; } /* ── HEADER ── */ /* ── Header: CSS Grid two-row layout ── */ .header { background: var(--header-bg); backdrop-filter: blur(28px) saturate(200%); -webkit-backdrop-filter: blur(28px) saturate(200%); border-bottom: 1px solid var(--header-border-bottom); padding: 6px 20px 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; position: sticky; top: 0; z-index: 200; box-shadow: var(--header-shadow); } .header-brand { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 14px; } .header-actions { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 5px; } /* Progress bar — always row 2, full width */ .hdr-progress-row { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0 6px; } .header-brand .wordmark { font-family: var(--sans); font-size: calc(22px * var(--fs, 1)); font-weight: 700; color: var(--text-light-color); letter-spacing: -0.5px; } .header-brand .wordmark em { color: var(--wm-orizon); font-style: normal; -webkit-text-stroke: 1px var(--wm-stroke); paint-order: stroke fill; } .header-brand .wordmark .wm-ver { color: var(--wm-one); font-style: normal; -webkit-text-stroke: 1px var(--wm-stroke); paint-order: stroke fill; } .wm-release { /* Set font-size in absolute units so "distant blue" renders at a predictable size regardless of how the parent wordmark's em chain resolves at runtime. Earlier attempts using `0.5em` on the inner .brand-distant-blue (with `font-size: inherit` on this wrap) were correct in theory but produced an invisible render in some themes — likely interaction between inline-flex baseline alignment and inherited line-height collapse. Hard- coding a pixel size eliminates the cascade dependency. The calc() honors the user's --fs scale token. */ font-family: var(--mono); font-size: calc(11px * var(--fs, 1)); color: var(--text-dark-color); letter-spacing: 0.5px; align-self: center; margin-left: 6px; white-space: nowrap; } /* ── Canonical brand lockup ────────────────────────────────────── Used everywhere ORIZON1 and "distant blue" appear together as a product/company pair. Centralized so sizing, tracking, and font choice stay consistent across header and other lockup placements. */ .brand-lockup { display: inline-flex; align-items: baseline; gap: 4px; } .brand-orizon1 { letter-spacing: 0.2em; padding-right: 0.05em; } .brand-distant-blue { font-family: 'Orbitron', var(--sans); font-weight: 500; text-transform: lowercase; letter-spacing: 0.04em; } .brand-sep { color: var(--text-dark-color); font-weight: 400; opacity: 0.7; padding: 0 2px; } /* Distant Blue tagline rendered at a fixed pixel size, scaled by --fs. Previously used `0.5em` against an "inherit" parent, which the cascade resolved invisibly small in some themes. The inner brand-sep stays at the parent .wm-release size (11px scaled) for proportion; only the tagline lowercases and uses Orbitron. */ .header-brand .brand-distant-blue { opacity: 0.85; } .header-brand .sub { font-family: var(--mono); font-size: calc(10px * var(--fs, 1)); color: var(--text-dark-color); letter-spacing: 0.3px; padding: 2px 8px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; } .header-brand .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border2); } /* ── Project block in header — name + meta line, sized to meta width ── Sits to the right of the brand lockup. JS measures .project-meta width and applies it as max-width on .project-name so the name truncates to exactly the meta line's width. See _renderProjectMeta in 24-auth.js. */ .brand-divider { width: 1px; background: var(--border2); margin: 4px 4px; /* Stretch to brand area height — set via flex parent */ min-height: 32px; align-self: stretch; } .project-block { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .project-name { font-family: var(--sans); font-size: calc(14px * var(--fs, 1)); font-weight: 600; color: var(--text-light-color); letter-spacing: -0.1px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* max-width set by _renderProjectMeta() to match .project-meta width */ } .project-name--placeholder { font-style: italic; color: var(--text-dark-color); font-weight: 500; } .project-meta { font-family: var(--mono); font-size: calc(10px * var(--fs, 1)); color: var(--text-dark-color); display: inline-flex; align-items: center; gap: 7px; line-height: 1.4; white-space: nowrap; width: max-content; } .project-meta .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-dark-color); opacity: 0.5; flex-shrink: 0; } .project-meta .hdr-saved { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dark-color); } .project-meta .hdr-saved .live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 4px rgb(from var(--green) r g b / 0.4); flex-shrink: 0; } .project-meta .hdr-saved.unsaved { color: var(--button-color); } .project-meta .hdr-saved.unsaved .live-dot { background: var(--button-color); box-shadow: 0 0 4px rgb(from var(--button-color) r g b / 0.5); } .project-meta .hdr-saved.saving { color: var(--info); } .project-meta .hdr-saved.saving .live-dot { background: var(--info); box-shadow: 0 0 4px rgb(from var(--info) r g b / 0.5); } .project-meta .hdr-saved.error { color: var(--red); } .project-meta .hdr-saved.error .live-dot { background: var(--red); box-shadow: 0 0 4px rgb(from var(--red) r g b / 0.5); } /* Phase segment in meta line — picks up the same color the badge used */ .project-meta .phase { cursor: pointer; transition: color var(--dur-fast); } .project-meta .phase:hover { color: var(--text-mid-color); } /* ── Header icon button (? for help) ──────────────────────────── */ .hdr-btn-icon { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: calc(14px * var(--fs, 1)); font-weight: 600; line-height: 1; } /* Header dropdown menu */ .hdr-menu-wrap { position: relative; } .hdr-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: var(--midground-color); border: 1px solid var(--border2); border-radius: var(--r); box-shadow: var(--shadow-lg); min-width: 170px; z-index: 400; overflow: hidden; animation: menuFadeIn 0.12s ease; } .hdr-menu.open { display: block; } @keyframes menuFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .hdr-menu-item { display: block; width: 100%; padding: 9px 14px; background: none; border: none; font-family: var(--sans); font-size: calc(12px * var(--fs, 1)); font-weight: 500; color: var(--text-mid-color); text-align: left; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); white-space: nowrap; } .hdr-menu-item:hover { background: var(--glass2); color: var(--text-light-color); } .hdr-menu-item + .hdr-menu-item { border-top: 1px solid var(--border); } /* Global select option dark-mode fix */ select option { background: var(--foreground-color); color: var(--text-light-color); } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 14px; border-radius: 20px; border: 1px solid transparent; font-family: var(--sans); font-size: calc(12px * var(--fs, 1)); font-weight: 500; letter-spacing: var(--ls-ui); cursor: pointer; transition: all var(--dur-slow) var(--ease-bounce); white-space: nowrap; -webkit-font-smoothing: antialiased; } .btn:active { transform: scale(0.96) !important; transition: transform var(--dur-fast) var(--ease-out); } .btn-amber { background: var(--button-color); color: var(--btn-primary-ink); border-color: var(--button-color); font-weight: 600; box-shadow: 0 1px 4px rgb(from var(--button-color) r g b / 0.3); } .btn-amber:hover { background: var(--button-click-color); box-shadow: 0 2px 10px rgb(from var(--button-color) r g b / 0.45); } .btn-ghost { background: var(--glass); color: var(--text-mid-color); border-color: var(--glass-border); } .btn-ghost:hover { background: var(--glass2); color: var(--text-light-color); border-color: var(--border2); } /* .btn-secondary — self-contained alias used in 12 places across index.html (project info: Set Location on Map / Set Password / Clear Location / Rotate Password / Recent Access Log / Manage Notices), 40-project-location.js (map modal Cancel button), and 42-field-audit.js (toolbar buttons). These call sites use the class standalone (not as a modifier on .btn), so it has to bring its own base button styling. Visual matches .btn + .btn-ghost for consistency. Define here rather than sweep-rename so the 12 call sites don't all need touching. */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--text-mid-color); font-family: var(--sans); font-size: calc(12px * var(--fs, 1)); font-weight: 500; letter-spacing: var(--ls-ui); cursor: pointer; transition: all var(--dur-slow) var(--ease-bounce); white-space: nowrap; -webkit-font-smoothing: antialiased; } .btn-secondary:hover { background: var(--glass2); color: var(--text-light-color); border-color: var(--border2); } .btn-secondary:active { transform: scale(0.96); transition: transform var(--dur-fast) var(--ease-out); } .btn-secondary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; } /* .btn-primary — single-use alias at 40-project-location.js:210 (map modal Save button). Acts as the canonical primary action, visually identical to .btn + .btn-amber. Self-contained because the call site uses the class standalone, not as a modifier. */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--button-color); background: var(--button-color); color: var(--btn-primary-ink); font-family: var(--sans); font-size: calc(12px * var(--fs, 1)); font-weight: 600; letter-spacing: var(--ls-ui); cursor: pointer; transition: all var(--dur-slow) var(--ease-bounce); white-space: nowrap; -webkit-font-smoothing: antialiased; box-shadow: 0 1px 4px rgb(from var(--button-color) r g b / 0.3); } .btn-primary:hover { background: var(--button-click-color); border-color: var(--button-click-color); box-shadow: 0 2px 10px rgb(from var(--button-color) r g b / 0.45); } .btn-primary:active { transform: scale(0.96); transition: transform var(--dur-fast) var(--ease-out); } .btn-primary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; } /* .btn-green — single-use class at 28-field-activity.js:298 for the RFI triage "Accept" button. Positive-action variant of .btn, same visual treatment as .btn-cyan / .btn-danger. Self-contained because the call site combines it as `btn btn-green btn-sm` — .btn supplies base layout, .btn-sm shrinks it, .btn-green provides the green color. Defined here as a thin layer on top of .btn assumptions (call site brings .btn). */ .btn-green { background: rgb(from var(--green) r g b / 0.10); color: var(--green); border-color: rgb(from var(--green) r g b / 0.22); } .btn-green:hover { background: rgb(from var(--green) r g b / 0.2); } .btn-danger { background: rgb(from var(--red) r g b / 0.10); color: var(--red); border-color: rgb(from var(--red) r g b / 0.22); } .btn-danger:hover { background: rgb(from var(--red) r g b / 0.2); } .btn-cyan { background: rgb(from var(--cyan-tint-color) r g b / 0.10); color: var(--cyan); border-color: rgb(from var(--cyan-tint-color) r g b / 0.22); } .btn-cyan:hover { background: rgb(from var(--cyan-tint-color) r g b / 0.2); } .btn-sm { padding: 4px 11px; font-size: clamp(10px, calc(11px * var(--fs, 1)), 13px); border-radius: 16px; min-width: 0; white-space: nowrap; } .btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none !important; } /* ── LAYOUT ── */ .layout { display: grid; grid-template-columns: 252px 1fr; min-height: calc(100vh - 80px); } /* ── SIDEBAR ── */ /* Free-standing card treatment: full border + 16px corner radius mirror the .output-card on the right. The sticky-top of 90px (52 header + 38 visual gap) plus matching margin-top: 38px parks the sidebar's top edge at the same viewport y-coordinate as the .output-card's top edge (.main padding-top 22 + .output-card margin-top 16 = 38), so the two panels visually align below the header at all scroll positions. 12px left margin gives the rounded left corners somewhere to breathe; 16px bottom margin matches the corner radius for symmetric framing. Mobile media queries below override these for the fixed-drawer mode. */ .sidebar { background: var(--midground-color); border: 1px solid var(--border); border-radius: var(--r-lg); position: sticky; top: 90px; margin: 38px 0 16px 12px; height: calc(100vh - 106px); display: flex; flex-direction: column; /* overflow-y:auto so users can scroll the sidebar to reach Tools and Templates sections when content exceeds the sidebar's visible height (e.g. on shorter viewports or with many expanded sections). The inner .sidebar-scroll on the zone list still has its own scroll for the rooms list itself; scroll chaining handles both naturally. */ overflow-y: auto; overscroll-behavior: contain; } /* ── Undo/Redo pill group ─────────────────────────────────── */ .hdr-undo-group { display: inline-flex; align-items: center; border: 1px solid var(--border2); border-radius: var(--r); overflow: hidden; background: var(--foreground-color); flex-shrink: 0; } .hdr-undo-group button { background: none; border: none; color: var(--text-mid-color); font-size: 13px; padding: 5px 11px; cursor: pointer; line-height: 1; font-family: var(--mono); transition: background var(--dur-base), color var(--dur-base); } .hdr-undo-group button:hover:not(:disabled) { background: var(--surface-glass-faint); color: var(--text-light-color); } .hdr-undo-group button:disabled { opacity: 0.28; cursor: default; } .hdr-undo-group button:first-child { border-right: 1px solid var(--border2); } /* ── Takeoff outlined button ──────────────────────────────── */ .btn-outline { background: transparent; border-color: var(--button-color); color: var(--button-color); } .btn-outline:hover { background: var(--button-color); color: var(--background-color); } .hdr-takeoff-btn { font-weight: 600; letter-spacing: 0.02em; } .sidebar-top { padding: 14px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sidebar-label { font-family: var(--sans); font-size: calc(10px * var(--fs, 1)); font-weight: 600; letter-spacing: 0.5px; color: var(--text-dark-color); text-transform: uppercase; margin-bottom: 8px; } .sb-select { width: 100%; padding: 7px 10px; background: var(--foreground-color); border: 1px solid var(--border2); border-radius: var(--r-sm); color: var(--text-light-color); font-family: var(--sans); font-size: calc(12px * var(--fs, 1)); /* margin-bottom was 6px originally; later "Desktop polish" section set this to 0 unconditionally (no media query). Consolidating 2026-05-19 — current effective value is 0. */ margin-bottom: 0; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; transition: border-color var(--dur-base), box-shadow var(--dur-base); } .sb-select option { background: var(--foreground-color); color: var(--text-light-color); } .sb-select:focus { outline: none; border-color: var(--button-color); box-shadow: 0 0 0 3px rgb(from var(--button-color) r g b / 0.14); } .sb-btn-row { /* Grid replaces an earlier flex+wrap version (2026-05-19 consolidation). The grid layout was added later in the file and was already winning via cascade order; consolidating here to make it source-of-truth. */ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 6px; } .sidebar-scroll { flex: 1; overflow-y: auto; padding: 6px 6px; /* Drafting-paper treatment: faint cyan-dot grid on a paper-tone bg. Reinforces the engineering / CAD aesthetic from the brand voice and the referral landing page without being distracting (dots are 0.06 opacity at 14px spacing). The zone blocks become "items pinned onto a drawing sheet" via their cyan accent stripe (see .zone-group). */ background: radial-gradient(circle at 1px 1px, rgb(from var(--accent-photometric) r g b / 0.06) 1px, transparent 1px), var(--midground-color); background-size: 14px 14px, 100% 100%; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .sidebar-scroll::-webkit-scrollbar { width: 3px; } .sidebar-scroll::-webkit-scrollbar-thumb { background: var(--foreground-color); border-radius: 3px; } /* ── Sidebar v2 — sectioned layout (Rooms / Tools / Templates) ────── Each section is collapsible via the chevron in its header. The Rooms section grows to fill remaining space; Tools and Templates sit at fixed heights below it. */ .sb-section { display: flex; flex-direction: column; min-height: 0; background: var(--sidebar-section); border-radius: var(--r-sm); margin: 6px 8px; /* The previous version used border-bottom hairlines to separate adjacent sections. With the new --sidebar-section background creating its own visual separation against the sidebar shell (--navy2), the hairlines became redundant noise. The 6px gap between sections (margin top+bottom) plus the bg contrast reads as a cleaner card stack. First and last sections still get even spacing because each has its own margin. */ } .sb-section--grow { flex: 1; min-height: 0; } .sb-section-hdr { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; user-select: none; transition: background var(--dur-fast); } .sb-section-hdr:hover { background: var(--glass); } .sb-section-toggle { font-size: calc(9px * var(--fs, 1)); color: var(--text-dark-color); transition: transform var(--dur-base); width: 10px; flex-shrink: 0; } .sb-section-toggle.closed { transform: rotate(-90deg); } .sb-section-title { font-family: var(--mono); font-size: calc(9px * var(--fs, 1)); font-weight: 600; letter-spacing: 1.4px; color: var(--text-dark-color); text-transform: uppercase; flex: 1; } .sb-section-action { font-family: var(--mono); font-size: calc(9px * var(--fs, 1)); color: var(--text-dark-color); background: var(--foreground-color); border: 1px solid var(--border2); border-radius: var(--r-sm); cursor: pointer; padding: 4px 8px; letter-spacing: 0.8px; transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease; } .sb-section-action:hover { border-color: var(--button-color); color: var(--text-mid-color); } .sb-section-body { padding: 0 10px 12px; transition: max-height var(--dur-slow), opacity var(--dur-base); overflow: hidden; } .sb-section-body--collapsed { max-height: 0 !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; } /* Primary add buttons (amber, full-width). Used for both + Add Room and + Add Space at the top of the Rooms section. Text color is one shared token (--sb-primary-add-ink) so the two buttons stay visually in sync — set once, applies to both. */ .sb-primary-add { width: 100%; background: var(--button-color); color: var(--sb-primary-add-ink); font-family: var(--mono); font-size: calc(12px * var(--fs, 1)); font-weight: 600; padding: 9px 10px; border-radius: var(--r-sm); border: 1px solid var(--button-color); cursor: pointer; letter-spacing: 0.3px; transition: background var(--dur-base), border-color var(--dur-base); } .sb-primary-add + .sb-primary-add { margin-top: 6px; } .sb-primary-add:hover { background: var(--button-click-color); border-color: var(--button-click-color); } /* Search input with icon prefix — replaces .sb-search-wrap. The icon sits inside the input via absolute positioning. */ .sb-search-v2 { position: relative; margin-top: 10px; } .sb-search-v2 input { width: 100%; padding: 7px 28px 7px 30px; background: var(--foreground-color); border: 1px solid var(--border2); border-radius: var(--r-sm); color: var(--text-light-color); font-family: var(--sans); font-size: calc(11px * var(--fs, 1)); outline: none; transition: border-color var(--dur-base); } .sb-search-v2 input:focus { border-color: var(--button-color); } .sb-search-v2 input::placeholder { color: var(--text-dark-color); } .sb-search-v2-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dark-color); font-size: calc(11px * var(--fs, 1)); pointer-events: none; font-family: var(--mono); } .sb-search-v2-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-dark-color); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 6px; display: none; } .sb-search-v2-clear.visible { display: block; } /* Tools section — icon + label rows. Hover gives a subtle bg + border. */ .sb-tool-btn { display: block; width: 100%; background: var(--glass); border: 1px solid var(--border2); border-radius: var(--r-sm); padding: 7px 10px; color: var(--text-mid-color); font-family: var(--mono); font-size: calc(10px * var(--fs, 1)); letter-spacing: 0.4px; cursor: pointer; text-align: center; transition: border-color var(--dur-base) ease, color var(--dur-base) ease, background var(--dur-base) ease; white-space: nowrap; } .sb-tool-btn + .sb-tool-btn { margin-top: 6px; } .sb-tool-btn:hover { border-color: var(--button-color); color: var(--button-color); background: var(--glass2); } .sb-tool-label { display: inline; } /* Templates section — chip list + mini button row, scoped to v2 layout. */ .sb-tmpl-chip-list { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; min-height: 16px; } .sb-tmpl-empty { font-family: var(--mono); font-size: calc(9px * var(--fs, 1)); color: var(--text-dark-color); font-style: italic; } .sb-tmpl-actions { display: flex; gap: 4px; } .sb-tmpl-mini-btn { flex: 1; font-family: var(--mono); font-size: calc(9px * var(--fs, 1)); color: var(--text-mid-color); background: var(--glass); border: 1px solid var(--border2); border-radius: var(--r-sm); padding: 5px 6px; cursor: pointer; text-align: center; transition: all var(--dur-base); white-space: nowrap; } .sb-tmpl-mini-btn:hover { border-color: var(--button-color); color: var(--button-color); } /* Hide the Import file input — its label triggers the file picker */ .sb-tmpl-mini-btn input[type="file"] { display: none; } .zone-group { margin-bottom: 8px; background: var(--zone-card); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 1px 2px var(--shadow-subtle-low); position: relative; } /* Cyan accent stripe on the left edge — reads like drafting tape pinning the card onto the paper background. Drives the engineering/CAD voice without needing a heavy border. */ .zone-group::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-zone); opacity: 0.7; pointer-events: none; } .zone-header { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 13px; background: var(--zone-card); border-bottom: 1px dashed var(--border); cursor: pointer; user-select: none; transition: background var(--dur-fast) ease; } .zone-header:hover { background: rgb(from var(--accent-zone) r g b / 0.04); } .zone-name-edit { flex: 1; font-family: var(--sans); font-size: calc(11px * var(--fs, 1)); font-weight: 600; color: var(--accent-zone); background: none; border: none; outline: none; cursor: text; min-width: 0; } .zone-name-edit::placeholder { color: var(--text-dark-color); } .zone-toggle { font-size: calc(9px * var(--fs, 1)); color: var(--text-dark-color); transition: transform var(--dur-slow); } .zone-toggle.closed { transform: rotate(-90deg); } .zone-rooms { padding: 4px 4px 4px 9px; display: flex; flex-direction: column; gap: 2px; } .zone-rooms.hidden { display: none; } .zone-add { padding: 4px 6px; } .room-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--midground-color); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: background var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base); } .room-item:hover { background: var(--foreground-color); border-color: var(--accent-zone); } .room-item.active { background: rgb(from var(--button-color) r g b / 0.09); border-color: rgb(from var(--button-color) r g b / 0.28); box-shadow: inset 2px 0 0 var(--button-color); } .room-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; transition: background-color var(--dur-slow) ease, box-shadow var(--dur-slow) ease; } .room-label { flex: 1; font-size: calc(11px * var(--fs, 1)); font-family: var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .room-label .rname { color: var(--text-light-color); font-weight: 500; } .room-label .rtype { color: var(--text-dark-color); font-size: calc(9px * var(--fs, 1)); display: block; } .room-acts { display: flex; gap: 1px; opacity: 0; transition: opacity var(--dur-base); } .room-item:hover .room-acts { opacity: 1; } .room-acts button { background: none; border: none; cursor: pointer; color: var(--text-dark-color); font-size: calc(10px * var(--fs, 1)); padding: 2px 5px; border-radius: var(--r-sm); transition: all var(--dur-fast); } .room-acts button:hover { background: var(--glass2); color: var(--text-light-color); } .room-acts button.del:hover { color: var(--red); } /* ── MAIN ── */ .main { padding: 22px 26px; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; } /* ── CARD ── */ .card { background: var(--midground-color); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--dur-slow); } .card:hover { box-shadow: var(--shadow-md); } .card-header { padding: 12px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; background: var(--glass); } .card-header h2 { font-family: var(--sans); font-size: calc(11px * var(--fs, 1)); font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-dark-color); flex: 1; } .card-body { padding: 18px; } /* ── PROJECT INFO GRID ── */ .proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .proj-grid.full { grid-template-columns: 1fr; } .fg { display: flex; flex-direction: column; gap: 4px; } .fg label { font-family: var(--sans); font-size: calc(10px * var(--fs, 1)); font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-dark-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fg input, .fg select, .fg textarea { padding: 8px 11px; background: var(--foreground-color); border: 1px solid var(--border2); border-radius: var(--r-sm); color: var(--text-light-color); font-family: var(--sans); font-size: calc(13px * var(--fs, 1)); line-height: 1.5; width: 100%; transition: border-color var(--dur-base), box-shadow var(--dur-base), background var(--dur-base); } .fg input:hover:not(:focus), .fg select:hover:not(:focus), .fg textarea:hover:not(:focus) { border-color: var(--border2); background-color: var(--foreground-color); } .fg select option { background: var(--foreground-color); color: var(--text-light-color); } .fg input:focus, .fg select:focus, .fg textarea:focus { outline: none; border-color: var(--button-color); box-shadow: 0 0 0 3px rgb(from var(--button-color) r g b / 0.14); } .fg textarea { resize: vertical; min-height: 72px; line-height: 1.65; } .fg select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; } /* ── TOGGLE PILLS ── */ .pill-group { display: flex; gap: 5px; flex-wrap: wrap; } .pill { padding: 5px 13px; border-radius: 20px; border: 1px solid var(--border2); background: var(--glass); font-family: var(--sans); font-size: calc(11px * var(--fs, 1)); font-weight: 500; cursor: pointer; transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base), transform var(--dur-fast); color: var(--text-mid-color); } .pill:hover { border-color: rgb(from var(--button-color) r g b / 0.4); color: var(--button-color); background: var(--glass2); } .pill:active { transform: scale(0.95); } .pill.on { background: rgb(from var(--button-color) r g b / 0.13); border-color: var(--button-color); color: var(--button-color); } .pill.on:hover { background: rgb(from var(--button-color) r g b / 0.2); } /* ── DIVIDER ── */ .hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; } /* ── CAT SECTIONS ── */ .cat-section { border: 1px solid var(--border2); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow-sm); } .cat-hdr { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; user-select: none; border-radius: var(--r-sm); transition: background var(--dur-fast) ease; } .cat-hdr:hover { background: rgb(from var(--text-mid-color) r g b / 0.03); } .cat-pip { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cat-title { font-family: var(--sans); font-size: calc(11px * var(--fs, 1)); font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase; flex: 1; color: var(--text-light-color); } .cat-sup { font-size: calc(9px * var(--fs, 1)); font-family: var(--mono); opacity: 0.55; font-style: italic; } .cat-arr { font-size: calc(10px * var(--fs, 1)); color: var(--text-dark-color); transition: transform var(--dur-slow); } .cat-arr.open { transform: rotate(180deg); } .cat-body { padding: 14px; border-top: 1px solid var(--border); background: var(--midground-color); overflow: hidden; max-height: 0; opacity: 0; transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-slow) ease, padding var(--dur-slow) ease; padding-top: 0; padding-bottom: 0; } .cat-body.open { max-height: 2000px; opacity: 1; padding-top: 14px; padding-bottom: 14px; } .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; align-items: start; } .cat-grid.two { grid-template-columns: 1fr 1fr; align-items: start; } .cat-grid.one { grid-template-columns: 1fr; } .cat-alert { padding: 8px 12px; border-radius: var(--r-sm); font-family: var(--sans); font-size: calc(11px * var(--fs, 1)); margin-bottom: 10px; } .chk-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; } .chk-row input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--button-color); flex-shrink: 0; } .chk-row label { font-family: var(--sans); font-size: calc(12px * var(--fs, 1)); cursor: pointer; color: var(--text-mid-color); line-height: 1.5; } /* ── ROOM EDITOR HEADER ── */ .room-editor-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .re-name { font-family: var(--sans); font-size: calc(20px * var(--fs, 1)); font-weight: 700; color: var(--text-light-color); background: none; border: none; border-bottom: 2px solid var(--border2); outline: none; padding: 2px 4px; transition: border-color var(--dur-base); min-width: 200px; letter-spacing: -0.3px; } .re-name:focus { border-bottom-color: var(--button-color); } .re-tag { font-family: var(--sans); font-size: calc(10px * var(--fs, 1)); font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; border: 1px solid; } /* ── EMPTY STATE ── */ .empty { text-align: center; padding: 80px 20px; } .empty .e-title { font-family: var(--sans); font-size: calc(22px * var(--fs, 1)); font-weight: 700; color: var(--text-light-color); letter-spacing: -0.5px; margin-bottom: 8px; } .empty .e-sub { font-size: calc(14px * var(--fs, 1)); color: var(--text-dark-color); margin-bottom: 32px; } /* Onboarding */ /* Onboard hero — the welcome-card wordmark + tagline + slogan shown on the empty editor state. Wordmark must visually match the header's .brand-orizon1 lockup (uppercase, 0.2em tracking, stroked letters). v26.05.05: previously the bottom wordmark was rendered as "Orizon1" mixed-case at -0.5px tracking and without a stroke, so it didn't read as the same mark as the header. text-transform:uppercase here is the right place to force casing — the source string from appWordmark() is mixed- case ("Orizon"), and we don't want to change APP_NAME_PART1 because it's also used in plain-text contexts (toasts, alerts, etc) where uppercase would look shouty. */ .onboard-hero { margin-bottom: 36px; } .onboard-logo { font-family: var(--sans); font-size: calc(32px * var(--fs, 1)); font-weight: 700; color: var(--text-light-color); letter-spacing: 0.2em; text-transform: uppercase; /* The 0.2em tracking adds visual whitespace AFTER the last letter; pull it back a fraction so the lockup doesn't drift right of true center. Matches .brand-orizon1's 0.05em pad. */ padding-right: 0.05em; margin-bottom: 6px; } .onboard-logo em { color: var(--wm-orizon); font-style: normal; -webkit-text-stroke: 1px var(--wm-stroke); paint-order: stroke fill; } .onboard-logo .wm-ver { color: var(--wm-one); font-style: normal; -webkit-text-stroke: 1px var(--wm-stroke); paint-order: stroke fill; } .onboard-tagline { font-family: var(--mono); font-size: calc(11px * var(--fs, 1)); color: var(--button-color); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; } .onboard-desc { font-size: calc(14px * var(--fs, 1)); color: var(--text-dark-color); max-width: 540px; margin: 0 auto; line-height: 1.6; } .onboard-steps { display: flex; align-items: stretch; justify-content: center; gap: 0; flex-wrap: wrap; margin-bottom: 40px; max-width: 860px; margin-left: auto; margin-right: auto; } .onboard-step { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 18px; flex: 1; min-width: 160px; max-width: 200px; text-align: left; display: flex; flex-direction: column; cursor: pointer; transition: border-color var(--dur-base), background var(--dur-base), transform var(--dur-fast); user-select: none; } @media (hover: hover) { .onboard-step:hover { border-color: var(--button-color); background: rgb(from var(--button-color) r g b / 0.07); transform: translateY(-2px); } } .onboard-step:active { transform: translateY(0); background: rgb(from var(--button-color) r g b / 0.12); } .onboard-step-arrow { align-self: center; color: var(--text-dark-color); font-size: calc(18px * var(--fs, 1)); padding: 0 8px; flex-shrink: 0; } .onboard-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--button-color); color: var(--btn-primary-ink); font-family: var(--sans); font-size: calc(13px * var(--fs, 1)); font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .onboard-step-title { font-family: var(--sans); font-size: calc(13px * var(--fs, 1)); font-weight: 700; color: var(--text-light-color); margin-bottom: 6px; } .onboard-step-sub { font-family: var(--sans); font-size: calc(11px * var(--fs, 1)); color: var(--text-dark-color); line-height: 1.5; } .onboard-step-sub strong { color: var(--text-mid-color); font-weight: 600; } .onboard-divider { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; color: var(--text-dark-color); font-family: var(--mono); font-size: calc(10px * var(--fs, 1)); letter-spacing: 0.5px; text-transform: uppercase; } .onboard-divider::before, .onboard-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .onboard-hint { margin-top: 28px; font-family: var(--mono); font-size: calc(10px * var(--fs, 1)); color: var(--text-dark-color); background: var(--glass); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 16px; display: inline-block; } kbd { display: inline-block; background: var(--glass2); border: 1px solid var(--border2); border-radius: 4px; padding: 1px 6px; font-family: var(--mono); font-size: calc(9px * var(--fs, 1)); color: var(--text-mid-color); } .version-badge { font-family: var(--mono); font-size: calc(9px * var(--fs, 1)); font-weight: 500; color: var(--text-dark-color); letter-spacing: 0.3px; padding: 2px 6px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-border); align-self: center; margin-left: 2px; } /* Save indicator */ .save-indicator { width: 7px; height: 7px; border-radius: 50%; background: transparent; border: 1.5px solid transparent; transition: all 0.3s; flex-shrink: 0; cursor: default; } .save-indicator.unsaved { background: var(--button-color); border-color: var(--button-color); box-shadow: 0 0 6px rgb(from var(--button-color) r g b / 0.5); animation: savePulse 1.2s ease infinite; } .save-indicator.error { background: var(--red); border-color: var(--red); box-shadow: 0 0 6px rgb(from var(--red) r g b / 0.6); animation: none; cursor: pointer; width: auto; height: auto; border-radius: 3px; padding: 2px 7px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px; color: var(--text-mid-color); border-width: 1px; } @keyframes savePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } .preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-width: 680px; margin: 0 auto; } .preset-tile { background: var(--midground-color); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 10px; cursor: pointer; text-align: center; box-shadow: var(--shadow-sm); transition: all var(--dur-slow) var(--ease-bounce); } @media (hover: hover) { .preset-tile:hover { border-color: var(--button-color); transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-md); } } .preset-tile .pt-icon { font-size: calc(24px * var(--fs, 1)); margin-bottom: 6px; } .preset-tile .pt-name { font-family: var(--sans); font-size: calc(10px * var(--fs, 1)); font-weight: 600; letter-spacing: 0.3px; color: var(--text-mid-color); text-transform: uppercase; } /* ── OUTPUT SECTION ── .output-card was a single rounded container holding the documentation header, tab strip, and content panes. v26.04.27 split this into THREE independently floating rounded cards: .output-card-header, the tabs row (.out-tabs sitting in .out-tabs-wrap), and .pane-content. The .output-card itself is now a transparent vertical layout wrapper — children carry their own bg/border/radius/shadow. Print rules in _pdf.css are unaffected: they hide .output-card-header, .out-tabs, and the new .out-tabs-wrap entry, and reset .output-card to neutral. */ .output-card { background: transparent; border: none; border-radius: 0; margin-top: 16px; margin-bottom: 32px; overflow: visible; box-shadow: none; display: block; min-width: 0; /* v26.04.27 polish: cap the entire output area at 1600px and center on wider viewports. Without this, on 4K monitors the floating bars stretched to fill ~3000+px while .pane-content was capped at 1600px internally — leaving the bars visibly wider than their content. By capping the parent .output-card, every floating descendant (bars and panes alike) is constrained to the same width and they always line up. The viewport-edge scrollbar stays where it is — only the inner content is centered. The 1600px cap is a comfortable upper bound: wide enough that data-dense panes (Matrix, Schedule, Budget) still get plenty of horizontal room; narrow enough that on a 4K monitor the form fields fill their pane instead of tiling 8 wide. */ max-width: 1600px; margin-left: auto; margin-right: auto; } .output-card-header { padding: 13px 20px; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); margin: 0 12px 12px 12px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .output-card-header h2 { font-family: var(--sans); font-size: calc(12px * var(--fs, 1)); font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase; color: var(--button-color); flex: 1; } /* Consistent pane title — matches // Project Documentation header */ .out-pane-title { font-family: var(--sans); font-size: calc(12px * var(--fs, 1)); font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase; color: var(--button-color); margin: 0; white-space: nowrap; flex-shrink: 0; } .out-pane-hdr { display: flex; align-items: center; gap: 12px; padding: 14px 20px 12px; flex-wrap: nowrap; flex-shrink: 0; /* Rounded-square card with full border + soft shadow. Sits as an elevated card above the tab strip, with breathing room on both sides. Top margin pulls it away from the wordmark header's bottom edge so its rounded corners don't visually clash with the hairline above. Bottom margin creates the gap before the tab strip. */ border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--glass); margin: 12px 12px 12px; box-shadow: 0 1px 0 rgb(from var(--text-mid-color) r g b / 0.4) inset, 0 1px 2px rgb(from var(--text-light-tint-color) r g b / 0.05), 0 2px 4px var(--shadow-subtle-low); width: auto; box-sizing: border-box; } /* Stacked variant — title above subtitle on separate lines. Used by panes where the subtitle is a longer descriptive sentence that doesn't fit cleanly inline. Apply by adding the modifier class to the .out-pane-hdr element:

// Title

Longer subtitle goes here…
The modifier overrides the base flex layout so the children stack vertically, and lets the subtitle wrap naturally instead of truncating with an ellipsis. Title still keeps its own line. */ .out-pane-hdr--stacked { flex-direction: column; align-items: flex-start; gap: 4px; } .out-pane-hdr--stacked > .out-pane-sub { white-space: normal; overflow: visible; text-overflow: clip; } /* Compact variant — reduced padding + inline layout. Used for panes that have many sub-tabs (e.g., Project Admin sub-panes) where the standard stacked header eats too much vertical real estate. Title and subtitle on one line; subtitle truncates with ellipsis if the row gets tight. Apply with:

// Title

Subtitle…
The compact variant inherits the standard horizontal flex layout from .out-pane-hdr; we just override padding and the title's font size. */ .out-pane-hdr--compact { padding: 8px 16px 6px; margin: 8px 12px 8px; gap: 14px; } .out-pane-hdr--compact > .out-pane-title { font-size: calc(13px * var(--fs, 1)); letter-spacing: 0.4px; } /* ── Pass D — Type designator badge (Lighting + Controls Legends) ── Editable counterpart to the legacy static circular type-mark badge. Visual: 32px amber-bordered circle, amber centered text, monospace. Behavior: text input (not contenteditable) so onchange fires reliably on blur and Enter, validation toasts run via the set-type-mark CONTENT_CHANGES handler. Up to 6 chars; longer designators get truncated by maxlength on the input itself. */ .type-mark-input { width: 36px; height: 32px; border: 2px solid var(--button-color); border-radius: 50%; background: transparent; color: var(--button-color); font-family: var(--mono); font-size: calc(9px * var(--fs, 1)); font-weight: 700; text-align: center; text-transform: uppercase; padding: 0 2px; letter-spacing: 0.3px; outline: none; transition: background var(--dur-fast), box-shadow var(--dur-fast); box-sizing: border-box; } .type-mark-input:hover { background: rgb(from var(--button-color) r g b / 0.08); } .type-mark-input:focus { background: rgb(from var(--button-color) r g b / 0.12); box-shadow: 0 0 0 2px rgb(from var(--button-color) r g b / 0.30); } .type-mark-input::placeholder { color: var(--text-dark-color); font-weight: 400; text-transform: none; } .out-pane-sub { font-family: var(--mono); font-size: calc(10px * var(--fs,1)); color: var(--text-dark-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; } .out-tabs-wrap { position: relative; display: flex; align-items: stretch; gap: 10px; padding: 0; margin: 0 12px 12px 12px; background: transparent; flex-shrink: 0; } .out-tabs-wrap::after { display: none; } .out-tabs { display: flex; flex: 1; border-top: 1px solid var(--border); border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); background: var(--glass); overflow-x: auto; scrollbar-width: none; /* No inner padding — first/last tabs sit flush against the strip's rounded corners. Previously had `padding: 0 6px`, which left a 6px strip-bg gap visible on each side at most viewport widths (the "light blue leaking through" reported in v26.04.27 polish review). Active-tab corner-rounding rules below already curve the first/last tab tops to match the strip's outer curve, so the seam stays clean. */ padding: 0; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; min-width: 0; } /* .out-tabs scrollbar is hidden entirely later in this file (search ".out-tabs::-webkit-scrollbar { display: none; }"). Earlier styled-scrollbar rules removed 2026-05-19 as dead. */ .out-tab { letter-spacing: var(--ls-ui); padding: 11px 14px; background: none; border: none; font-family: var(--sans); font-size: calc(11px * var(--fs, 1)); font-weight: 500; text-transform: uppercase; cursor: pointer; color: var(--text-dark-color); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--dur-base); white-space: nowrap; flex-shrink: 0; } .out-tab:hover { color: var(--text-mid-color); background: var(--surface-glass-faint); } .out-tab.active { color: var(--button-color); border-bottom-color: var(--button-color); font-weight: 600; border-radius: var(--r-sm) var(--r-sm) 0 0; } /* End-tab corner rounding: when the first or last tab is active, its top corner needs to match the tab strip's outer curve so the visual doesn't kink at the strip's edge. */ .out-tab:first-child { border-top-left-radius: var(--r-sm); } .out-tab:last-child { border-top-right-radius: var(--r-sm); } .out-tab-divider { width: 1px; background: var(--border); margin: 8px 4px; flex-shrink: 0; align-self: stretch; } .help-nav-btn { display:block; width:100%; text-align:left; background:none; border:none; padding:6px 16px; font-family:var(--mono); font-size:11px; color:var(--text-dark-color); cursor:pointer; transition:all var(--dur-fast); white-space:nowrap; } .help-nav-btn:hover { color:var(--text-light-color); background:var(--glass); } .help-nav-btn.active { color:var(--button-color); background:rgb(from var(--button-color) r g b / 0.08); border-left:2px solid var(--button-color); padding-left:14px; } /* Help nav section headers — red left-bar separator between groups (Getting Started, Room Editor, etc.) */ .u-menu-section-hdr { display:block; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dark-color); padding:14px 14px 6px; margin-top:10px; border-left:3px solid var(--red); background:rgba(var(--red-rgb), 0.04); } .u-menu-section-hdr:first-child { margin-top:0; } .help-h1 { font-family:var(--sans); font-size:18px; font-weight:700; color:var(--red); margin:0 0 6px; letter-spacing:-0.3px; } .help-h2 { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--red); letter-spacing:1.5px; text-transform:uppercase; margin:22px 0 10px; padding-bottom:5px; border-bottom:1px solid var(--border); } .help-p { margin:0 0 12px; color:var(--text-mid-color); font-size:13px; line-height:1.65; } .help-tip { background:rgb(from var(--info) r g b / 0.08); border-left:3px solid var(--info); padding:10px 14px; border-radius:0 4px 4px 0; margin:12px 0; font-size:12px; color:var(--text-mid-color); } .help-warn { background:rgb(from var(--button-color) r g b / 0.08); border-left:3px solid var(--button-color); padding:10px 14px; border-radius:0 4px 4px 0; margin:12px 0; font-size:12px; color:var(--text-mid-color); } .help-kbd { display:inline-block; background:var(--foreground-color); border:1px solid var(--border2); border-radius:3px; padding:1px 6px; font-family:var(--mono); font-size:11px; color:var(--text-light-color); margin:0 2px; } .help-table { width:100%; border-collapse:collapse; margin:12px 0; font-size:12px; } .help-table th { text-align:left; padding:6px 10px; background:var(--foreground-color); color:var(--text-dark-color); font-family:var(--mono); font-size:10px; letter-spacing:0.5px; text-transform:uppercase; border:1px solid var(--border2); } .help-table td { padding:7px 10px; border:1px solid var(--border2); color:var(--text-mid-color); vertical-align:top; } .help-table tr:nth-child(even) td { background:var(--glass); } .help-li { padding:3px 0 3px 0; color:var(--text-mid-color); font-size:13px; } .out-pane { display: none; margin: 0; min-width: 0; } .out-pane.active { display: block; margin: 0; animation: paneIn 0.15s cubic-bezier(0.4,0,0.2,1) both; } /* ── One-line diagram tab — screen styles ── */ .old-wrap { padding: 0 20px 16px; } .old-tab-controls { display: flex; align-items: center; gap: 6px; padding: 0 0 14px; flex-wrap: wrap; } /* Filter pills and Export button now use canonical .rfi-filter and .btn.btn-amber.btn-sm classes respectively (see Track 2 restyle). Old .old-filter-btn / .old-export-btn rules removed as dead code. */ .old-room-block { margin-bottom: 20px; background: var(--midground-color); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } .old-room-hdr { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--foreground-color); border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: calc(11px * var(--fs,1)); color: var(--text-mid-color); } .old-room-hdr .old-room-name { font-weight: 700; font-size: calc(12px * var(--fs,1)); color: var(--button-color); } .old-room-hdr .old-room-zone { color: var(--text-dark-color); font-size: calc(10px * var(--fs,1)); margin-left: auto; } .old-svg-wrap { background: var(--background-color); border-radius: 0 0 var(--r) var(--r); padding: 16px 20px; overflow-x: auto; /* pan-x pan-y: horizontal swipe scrolls the diagram (it's wider than mobile screens — SVG natural width is 1160px), vertical swipe still bubbles to the page so users can scroll past the diagram normally. Earlier `touch-action: pan-y` blocked horizontal touch scrolling. */ touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .old-svg-wrap svg { pointer-events: none; display: block; } .narrative-wrap { display: block; padding: 0; } .narrative-doc { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; font-family: var(--mono); /* Phase 4 typography decisions (was calc(12px*var(--fs,1)) and 1.85): */ font-size: 13px; line-height: 1.65; color: var(--text-light-color); white-space: pre-wrap; min-height: 200px; max-height: 70vh; overflow-y: auto; margin: 12px; box-shadow: var(--shadow-sm); scroll-behavior: smooth; } .narrative-doc .nd-placeholder { color: var(--text-dark-color); font-style: italic; } .table-wrap { overflow-x: auto; } .ctable { width: 100%; border-collapse: collapse; font-size: calc(10px * var(--fs, 1)); font-family: var(--mono); min-width: 1000px; } .ctable th { padding: 8px 10px; font-size: calc(9px * var(--fs, 1)); font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; border: 1px solid var(--border); white-space: nowrap; text-align: left; } .ctable td { padding: 7px 10px; border: 1px solid var(--border); vertical-align: top; font-size: calc(10px * var(--fs, 1)); line-height: 1.4; background: var(--midground-color); overflow-wrap: break-word; max-width: 220px; } .ctable tr:nth-child(even) td { background: var(--foreground-color); } .ctable .zone-row td { background: var(--foreground-color) !important; font-weight: 600; color: var(--accent-zone); letter-spacing: 1px; font-size: calc(10px * var(--fs, 1)); } /* ── Rotated sub-category headers ────────────────────────────── 25 narrow sub-columns need rotated labels to stay legible without overflow. Colored category backgrounds remain visible on the th. */ .ctable thead .th-sub { height: 96px; padding: 0 !important; vertical-align: bottom; min-width: 28px; max-width: 48px; text-align: left; position: relative; } .ctable thead .th-sub .th-rotate { display: inline-block; transform-origin: left bottom; transform: translate(50%, -4px) rotate(-50deg); white-space: nowrap; font-size: calc(9px * var(--fs, 1)); font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; line-height: 1; padding: 2px 4px; pointer-events: none; } /* ── Per-room notes row ──────────────────────────────────────── */ .ctable .notes-row td { background: var(--background-color) !important; border-top: 1px dashed var(--border2); font-size: calc(9px * var(--fs, 1)); line-height: 1.5; padding: 6px 10px; white-space: normal; max-width: none; } .ctable .notes-row td.notes-label { color: var(--text-dark-color); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: calc(8px * var(--fs, 1)); width: 80px; white-space: nowrap; background: var(--foreground-color) !important; } .ctable .notes-row td.notes-content { color: var(--text-mid-color); } /* Category header colours */ .th-p { background: rgb(from var(--cyan-tint-color) r g b / 0.15); color: var(--c-params); } .th-o { background: rgb(from var(--button-color) r g b / 0.15); color: var(--c-occ); } .th-t { background: rgb(from var(--c-ts) r g b / 0.15); color: var(--c-ts); } .th-d { background: rgb(from var(--green) r g b / 0.15); color: var(--c-day); } .th-m { background: rgb(from var(--red) r g b / 0.15); color: var(--c-man); } .th-a { background: rgb(from var(--c-add) r g b / 0.15); color: var(--c-add); } .th-i { background: rgb(from var(--c-int) r g b / 0.15); color: var(--c-int); } .th-n { background: rgb(from var(--c-notes) r g b / 0.12); color: var(--c-notes); } /* ── STACKED MATRIX LAYOUT (Phase 1, polished in Phase 4) ──── Replaces the old wide table. Each room is a self-contained vertical block. Uses the same color tokens as the old table so visual continuity is preserved across the app. */ #matrixStack { padding: 4px 12px 12px; } .mx-zone-header { display: flex; align-items: baseline; gap: 12px; padding: 14px 12px 8px; margin-top: 18px; border-bottom: 2px solid var(--border); font-family: var(--mono); } #matrixStack > .mx-zone-header:first-child { margin-top: 4px; } .mx-zone-label { font-size: calc(9px * var(--fs, 1)); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dark-color); } .mx-zone-name { font-size: calc(13px * var(--fs, 1)); font-weight: 700; color: var(--accent-zone); letter-spacing: 0.5px; } .mx-room-block { background: var(--midground-color); border: 1px solid var(--border); border-radius: var(--r); margin: 12px 0; overflow: hidden; } /* First room block in a zone gets extra top breathing room */ .mx-zone-header + .mx-room-block { margin-top: 14px; } .mx-row { display: grid; /* Label column: 180px on desktop, shrinks to 110px on narrow screens. Using minmax so the value column never collapses below readable width. */ grid-template-columns: minmax(110px, 180px) minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: calc(10px * var(--fs, 1)); min-height: 28px; align-items: stretch; } .mx-row:last-child { border-bottom: none; } .mx-row-room { background: var(--foreground-color); } .mx-row-room .mx-row-value { font-size: calc(11px * var(--fs, 1)); } .mx-row-notes { background: rgb(from var(--c-notes) r g b / 0.06); } .mx-row-label { padding: 7px 12px; background: var(--foreground-color); color: var(--text-dark-color); font-size: calc(9px * var(--fs, 1)); letter-spacing: 0.3px; border-right: 1px solid var(--border); display: flex; align-items: center; } .mx-row-value { padding: 7px 12px; display: flex; align-items: center; color: var(--text-light-color); line-height: 1.4; min-width: 0; /* prevents long values from forcing column overflow */ overflow-wrap: break-word; } .mx-row-value.mx-editable { cursor: pointer; transition: background var(--dur-fast); } .mx-row-value.mx-editable:hover { background: rgb(from var(--button-color) r g b / 0.06); } /* Section headers — full-width band that introduces a parameter group. Single border-bottom only; the row above this header already provides visual closure via its own border-bottom. */ .mx-section-header { padding: 6px 12px; font-family: var(--mono); font-size: calc(9px * var(--fs, 1)); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--border); } .mx-section-p { background: rgb(from var(--cyan-tint-color) r g b / 0.12); color: var(--c-params); } .mx-section-o { background: rgb(from var(--button-color) r g b / 0.12); color: var(--c-occ); } .mx-section-t { background: rgb(from var(--c-ts) r g b / 0.12); color: var(--c-ts); } .mx-section-d { background: rgb(from var(--green) r g b / 0.12); color: var(--c-day); } .mx-section-m { background: rgb(from var(--red) r g b / 0.12); color: var(--c-man); } .mx-section-a { background: rgb(from var(--c-add) r g b / 0.12); color: var(--c-add); } .mx-section-i { background: rgb(from var(--c-int) r g b / 0.12); color: var(--c-int); } /* ── MATRIX SCORECARDS ─────────────────────────────────────── Replaces the old two-row chip filter. Two stacked scorecards: parent (always visible) and sub (conditional on a parent being selected). Cell visuals are inline-styled to mirror the .sub-scorecard pattern from the Submittals tab. */ /* Matrix scorecards: filter rail above the room blocks. Two scorecards stack vertically — parent (sections) and conditional sub (parameters within the active section). v26.04.27 polish: previously the outer .mx-scorecards wrapper had only a bottom border and no horizontal margin, leaving it full-bleed inside the pane. Now matches the rest of the floating-card visual language — 12px outer margin, full border, glass bg, var(--r-sm) radius. The inner .mx-scorecard rows keep their amber-left-edge accent. */ .mx-scorecards { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); margin: 0 12px 12px 12px; padding: 8px; flex-shrink: 0; } /* Hide the wrapper when empty (no rooms → renderMatrixScorecards still runs but every cell shows 0, which is meaningless; the empty-state inside #matrixStack already explains there's nothing to show). The :empty selector matches when the wrapper has no children — JS clears it via wrap.innerHTML = '' in the no-rooms branch. */ .mx-scorecards:empty { display: none; } .mx-scorecard { display: flex; flex-wrap: wrap; background: var(--foreground-color); border: 1px solid var(--border); border-left: 3px solid var(--button-color); border-radius: var(--r-lg); overflow: hidden; } .mx-scorecard-parent { margin-bottom: 8px; } .mx-scorecard-sub { margin-bottom: 0; } .mx-score-cell { transition: background var(--dur-base); } .mx-score-cell:hover { background: rgb(from var(--button-color) r g b / 0.04); } /* Badges */ .b { display: inline-block; padding: 2px 7px; border-radius: 20px; font-size: calc(9px * var(--fs, 1)); font-weight: 600; letter-spacing: 0.3px; } .b-y { background: rgb(from var(--green) r g b / 0.15); color: var(--green); } .b-n { background: rgb(from var(--red) r g b / 0.15); color: var(--red); } .b-a { background: rgb(from var(--info) r g b / 0.15); color: var(--info); } .b-m { background: rgb(from var(--button-color) r g b / 0.18); color: var(--button-color); } /* ── TOAST ── */ @keyframes toastIn { from { transform: translateY(16px); opacity:0; } to { transform: translateY(0); opacity:1; } } @keyframes toastOut { from { transform: translateY(0); opacity:1; } to { transform: translateY(16px); opacity:0; } } /* ══════════════════════════════════════════════════════════════ TOAST — severity-aware, queue-capable stack #toast is now a stack container; each notification is a .toast-item ══════════════════════════════════════════════════════════════ */ #toast { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column-reverse; /* newest on top */ gap: 8px; max-width: min(420px, calc(100vw - 48px)); z-index: 9999; pointer-events: none; /* let clicks through the empty container */ } .toast-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 6px; font-family: var(--mono); font-size: calc(12px * var(--fs, 1)); font-weight: 600; letter-spacing: 0.3px; line-height: 1.4; box-shadow: 0 6px 20px rgb(from var(--text-light-tint-color) r g b / 0.35), 0 2px 6px rgb(from var(--text-light-tint-color) r g b / 0.25); opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) ease-out, transform var(--dur-slow) var(--ease-out); pointer-events: auto; border: 1px solid transparent; max-width: 100%; overflow-wrap: break-word; } .toast-item.show { opacity: 1; transform: translateY(0); } .toast-item.hiding { opacity: 0; transform: translateX(20px); transition: opacity var(--dur-slow) ease-in, transform var(--dur-slow) cubic-bezier(0.4,0,1,1); } .toast-icon { flex-shrink: 0; font-size: 14px; line-height: 1.4; font-weight: 700; } .toast-msg { flex: 1; min-width: 0; } .toast-close { flex-shrink: 0; background: none; border: none; font-family: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; margin-left: 4px; opacity: 0.7; color: inherit; transition: opacity var(--dur-base); } .toast-close:hover { opacity: 1; } .toast-close:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; } /* Severity variants */ .toast-success { background: var(--green); color: var(--text-light-color); border-color: var(--shadow-subtle-med); } .toast-info { background: var(--button-color); color: var(--background-color); border-color: var(--shadow-subtle-med); } .toast-error { background: var(--red); color: var(--text-mid-color); border-color: rgb(from var(--text-mid-color) r g b / 0.15); } /* ── MODAL ── */ .modal-bg { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* explicit instead of inset — better Android support */ width: 100%; height: 100%; background: rgb(from var(--text-light-tint-color) r g b / 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 500; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; } .modal-bg.open { display: flex; } @keyframes modalIn { from { opacity:0; transform:scale(0.96) translateY(6px); } to { opacity:1; transform:scale(1) translateY(0); } } .modal-bg.open > .modal, .modal-bg.open > div { animation: modalIn 0.2s cubic-bezier(0.4,0,0.2,1) both; } .modal { background: var(--foreground-color); border: 1px solid var(--border2); border-left: 3px solid var(--button-color); border-radius: var(--r-lg); padding: 24px; width: 460px; max-width: 90vw; } .modal h3 { font-family: var(--mono); font-size: calc(13px * var(--fs, 1)); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--button-color); margin-bottom: 16px; } .modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; } /* ══════════════════════════════════════════════════════════════ CANONICAL MODAL SHELL — header + body + footer pattern Replaces the legacy .modal class on a per-modal basis. New modals should use this structure; legacy .modal still works. See modal-mockup-v2.html for the design. ══════════════════════════════════════════════════════════════ */ /* Shell — replaces the inner .modal div. Border-left amber accent matches the .mx-scorecard pattern. Flex column for header/body/footer slot stacking. */ .modal-shell { background: var(--midground-color); border: 1px solid var(--border); border-left: 3px solid var(--button-color); border-radius: var(--r-lg); width: 460px; max-width: 100%; box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.4)); display: flex; flex-direction: column; overflow: hidden; max-height: min(90dvh, 900px); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .modal-shell--sm { width: 380px; } .modal-shell--lg { width: 640px; } .modal-shell--xl { width: 820px; } /* Header slot — title + close X button */ .modal-hdr { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .modal-hdr-title { font-family: var(--mono); font-size: calc(11px * var(--fs, 1)); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--button-color); flex: 1; line-height: 1.2; } .modal-hdr-close { background: none; border: none; color: var(--text-dark-color); cursor: pointer; font-family: var(--mono); font-size: calc(16px * var(--fs, 1)); padding: 4px 6px; border-radius: var(--r-sm); line-height: 1; transition: all var(--dur-fast); } .modal-hdr-close:hover { background: var(--glass2); color: var(--text-light-color); } /* Optional subheader — instructional context strip */ .modal-subhdr { padding: 10px 18px; background: var(--foreground-color); border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: calc(11px * var(--fs, 1)); color: var(--text-dark-color); line-height: 1.5; flex-shrink: 0; } /* Body — scrollable content area */ .modal-body { padding: 18px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; } /* Field group — replaces ad-hoc .fg with style="margin-bottom" */ .modal-fg { margin-bottom: 14px; } .modal-fg:last-child { margin-bottom: 0; } .modal-label { display: block; font-family: var(--mono); font-size: calc(9px * var(--fs, 1)); color: var(--text-dark-color); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; font-weight: 600; } /* Canonical input — replaces inline-styled inputs/selects in modals */ .modal-input { width: 100%; padding: 8px 12px; background: var(--foreground-color); border: 1px solid var(--border2); border-radius: var(--r-sm); color: var(--text-light-color); font-family: var(--mono); font-size: calc(12px * var(--fs, 1)); outline: none; box-sizing: border-box; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .modal-input:focus { border-color: var(--button-color); box-shadow: 0 0 0 3px rgb(from var(--button-color) r g b / 0.14); } .modal-input::placeholder { color: var(--text-dark-color); } /* Variant: textarea-style (resize vertical, larger) */ textarea.modal-input { min-height: 80px; resize: vertical; line-height: 1.5; } /* Footer slot — action buttons with tinted background */ .modal-footer-canon { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--foreground-color); flex-shrink: 0; } .modal-footer-canon .modal-footer-spacer { flex: 1; } /* Global scrollbar styling is canonicalized later in this file (search for "Scrollbar styling — thin, consistent"). */ /* ══════════════════════════════════════════════════════════════ A11Y — FIELD VALIDATION + EMPTY STATES Added Session 1 of UI polish plan. Used by 04-a11y.js. ══════════════════════════════════════════════════════════════ */ /* ── Inline field error — appears below invalid fields ──────── */ .field-error { font-family: var(--mono); font-size: 10px; color: var(--red); margin-top: 4px; padding-left: 2px; line-height: 1.4; animation: fieldErrorIn 0.18s ease-out both; } @keyframes fieldErrorIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } /* Invalid field styling — amber-red border signals needs attention */ [aria-invalid="true"] { border-color: var(--red) !important; box-shadow: 0 0 0 1px rgba(var(--red-rgb), 0.15) !important; } [aria-invalid="true"]:focus { box-shadow: 0 0 0 2px rgba(var(--red-rgb), 0.25) !important; outline: none; } /* ── Empty state — consistent pattern across all tabs ───────── */ /* ══════════════════════════════════════════════════════════════ CONFIRM DIALOG — destructive action confirmation Used by confirmDanger() / confirmWarn() in 04-a11y.js ══════════════════════════════════════════════════════════════ */ .confirm-modal { width: min(440px, 92vw); padding: 24px 24px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; } .confirm-modal.confirm-modal--danger { border-top: 2px solid var(--red); } .confirm-modal.confirm-modal--warn { border-top: 2px solid var(--button-color); } .confirm-icon { font-size: 32px; line-height: 1; margin-bottom: 12px; filter: grayscale(0.2); } .confirm-modal--danger .confirm-icon { color: var(--red); } .confirm-modal--warn .confirm-icon { color: var(--button-color); } .confirm-title { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--text-light-color); margin: 0 0 10px; letter-spacing: -0.2px; line-height: 1.35; } .confirm-body { font-family: var(--mono); font-size: 11px; color: var(--text-mid-color); line-height: 1.65; margin-bottom: 18px; max-width: 360px; white-space: pre-wrap; } .confirm-type-wrap { width: 100%; margin: 4px 0 18px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .confirm-type-label { font-family: var(--mono); font-size: 10px; color: var(--text-dark-color); text-align: left; letter-spacing: 0.3px; } .confirm-type-label strong { color: var(--red); font-family: var(--mono); background: rgba(var(--red-rgb), 0.08); padding: 1px 5px; border-radius: 3px; border: 1px solid rgba(var(--red-rgb), 0.25); } .confirm-type-input { width: 100%; background: var(--foreground-color); border: 1px solid var(--border2); border-radius: var(--r-sm); color: var(--text-light-color); font-family: var(--mono); font-size: 12px; padding: 9px 12px; outline: none; box-sizing: border-box; transition: border-color var(--dur-base); } .confirm-type-input:focus { border-color: var(--red); box-shadow: 0 0 0 2px rgba(var(--red-rgb), 0.15); } .confirm-actions { display: flex; gap: 10px; justify-content: center; width: 100%; } .confirm-actions .btn { min-width: 100px; padding: 9px 18px; font-weight: 600; } .confirm-btn-cancel { flex: 0 1 auto; } .confirm-btn-ok { flex: 0 1 auto; } .confirm-btn-ok:disabled { opacity: 0.45; cursor: not-allowed; } /* Danger button variant — reuses existing .btn shape */ .btn-danger { background: var(--red); color: var(--text-mid-color); border: 1px solid var(--red); } .btn-danger:hover:not(:disabled) { filter: brightness(1.1); } .btn-danger:focus-visible { outline: 2px solid rgba(var(--red-rgb), 0.5); outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════ UTILITY CLASSES — Session 8 extraction High-frequency inline-style patterns consolidated here. When adding new components, prefer composing these over writing inline styles. Audit before duplicating. ══════════════════════════════════════════════════════════════ */ /* Muted mono metadata labels — graded by size. Used for timestamps, counts, status text, and other secondary information. Phase A extraction. */ .u-meta-xs { color: var(--text-dark-color); font-family: var(--mono); font-size: 9px; } .u-meta-sm { color: var(--text-dark-color); font-family: var(--mono); font-size: 10px; } .u-meta { color: var(--text-dark-color); font-family: var(--mono); font-size: 11px; } /* Section divider heading — amber caps label with underline. Used to separate content blocks within panels. */ .u-section-hdr { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--button-color); margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } /* Field label — small uppercase mono caption above form inputs. Block-level, 3px margin below. For 5px variant use .u-field-label--5. */ .u-field-label { display: block; font-family: var(--mono); font-size: 9px; color: var(--text-dark-color); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; } .u-field-label--5 { margin-bottom: 5px; } /* Uppercase mono body label — Phase C. Smaller muted caps used inline (not block-level like u-field-label). No margin by default — add inline margin-* if needed. */ .u-label { font-family: var(--mono); font-size: 9px; color: var(--text-dark-color); text-transform: uppercase; letter-spacing: 1px; } /* Stacked metadata block — Phase C. Flex column of muted mono-font metadata lines (project info, sidebars). */ .u-stack-meta { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); font-size: 9px; color: var(--text-dark-color); } /* Table-style header cell — Phase C. Used for grid/table headers with left-aligned semibold small labels. */ .u-tbl-hdr { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; color: var(--text-dark-color); padding: 6px 10px; border: 1px solid var(--border2); text-align: left; } /* Menu section header — Phase D. Muted uppercase label used inside dropdown menus / settings panels, preceded by section padding. */ .u-menu-section-hdr { color: var(--text-dark-color); font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; margin-top: 4px; padding: 10px 14px 6px; text-transform: uppercase; } /* Panel section header — Phase D. Amber uppercase section label inside settings/help panels. */ .u-panel-section-hdr { color: var(--button-color); font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; padding: 12px 10px 6px; text-transform: uppercase; } /* Amber mono emphasis label — Phase D. Used inline for small attention-drawing text (counts, statuses). */ .u-emph-mono { color: var(--button-color); font-family: var(--mono); font-size: 12px; font-weight: 700; } /* Panel card — Phase D. Elevated surface used for content blocks within pages. Background + border + radius + padding. */ .u-card { background: var(--foreground-color); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; } /* Mono heavy label — Phase D. Slightly larger mono label with weight, used as subheading above content. */ .u-label-heavy { color: var(--text-light-color); font-family: var(--mono); font-size: 12px; font-weight: 600; margin-bottom: 3px; } /* Mono body paragraph — Phase D. Small mono text with relaxed line-height for short explanatory copy. */ .u-body-mono { color: var(--text-dark-color); font-family: var(--mono); font-size: 10px; line-height: 1.6; } /* Mono input field component — Phase B extraction. Use as: class="field-mono" (base sm size, full width) With modifiers: class="field-mono field-mono--md" class="field-mono field-mono--narrow" class="field-mono field-mono--lg" class="field-mono field-mono--select" (for