/* ═══════════════════════════════════════════════════════════════════════════ DK Productions Timelapse Platform — Design System ═══════════════════════════════════════════════════════════════════════════ Single stylesheet for both APP_HTML (the authenticated SPA) and LOGIN_HTML. Light mode is the default; [data-theme="dark"] on flips into dark. Conventions: - All colour/shadow/radius values come from CSS variables. Never hardcode. - All interactive elements get a visible :focus-visible ring. - Typography is Geist (sans) + Geist Mono — Google Fonts, OFL. - No uppercase/widely-spaced labels. Sentence case, calm rhythm. Layering order (top → bottom of this file): 1. Font import 2. Design tokens (:root = light, [data-theme="dark"] = dark) 3. Legacy-token aliases (transitional — removed in PR 2 after all views migrate) 4. Reset + base 5. Typography utilities 6. Layout primitives (.app-shell, sidebar, topbar, content) 7. Responsive rules 8. Components (buttons, cards, inputs, badges, status-dot, tables, modal, empty-state, toast) 9. Projects list (the one converted view) 10. Theme toggle ═══════════════════════════════════════════════════════════════════════════ */ /* Self-hosted Geist fonts — eliminates the 600ms+ render-blocking round-trip to fonts.bunny.net. Latin subset only (covers the platform UI); woff2-only (all modern browsers). Files live at static/fonts/. Previously loaded via @import from Bunny CDN. */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/geist-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/geist-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/geist-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/geist-mono-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/geist-mono-latin-500-normal.woff2') format('woff2'); } /* ── 2. DESIGN TOKENS ───────────────────────────────────────────────────── */ :root { /* Annotation palette — intentionally vivid (pre-2026-05-13 brand hexes), NOT the WCAG-darkened UI tokens. Annotations sit on construction-site photographs (high visual noise) and need to read against arbitrary image backgrounds, not on the chrome surfaces the button tokens cover. These values are also persisted into the annotation strokes DB rows verbatim — changing them retroactively shifts the appearance of every existing saved markup. Treat the values as data-graph constants; the token names exist so consumers (templates/app.html, future markup tooling) read from one place. Identical in light + dark mode because annotations are drawn on the underlying photo, not on the theme. */ --annotation-clay: #c46a45; /* clay — brand primary, vivid */ --annotation-hivis: #d4943f; /* hi-vis — highlighter / safety yellow */ --annotation-lichen: #87a06b; /* lichen — measurements / approvals */ --annotation-data: #6b8a9c; /* blueprint — data / informational */ --annotation-bone: #fbf6ec; /* bone — text overlay on dark scenes */ /* Typography scale. Adjacent steps (xs↔sm, sm↔base, base↔lg) sit at 13–17% — below the ~25% threshold from Design for Hackers Ch 7 ("Type size changes are proportionally significant"). Reach for *non-adjacent* steps when using size to establish hierarchy: e.g. xs ↔ base (33%) or sm ↔ xl (71%), not sm ↔ base (14%). The token names exist so consumers can pick a register, not so consumers can stack adjacent sizes for visual rank. If you find yourself reaching for both --text-sm and --text-base in the same hierarchy, you want register variation (mono caps / weight / color) instead of size variation. */ /* Mono micro-scale — Site Notes uses mono for every label/data/timestamp/ section-tag surface, of which there are dozens. Without dedicated mono tokens the stylesheet accumulated 12 literal px values between 9px and 12.5px (theory-audit C1: "type scale is debris field"). These three tokens collapse those into a coherent ratio system: --text-mono-xs 9.5px — eyebrow labels (mono-uppercase, faint) --text-mono-sm 10.5px — data lines / metric values --text-mono-md 12px — chip values / card-header tags Step ratio 9.5 -> 10.5 -> 12 is ~11% / ~14% — adjacent steps are subtle by design (these are co-tenants in info-dense surfaces; you want register variation, not size). */ --text-mono-xs: 9.5px; --text-mono-sm: 10.5px; --text-mono-md: 12px; } /* Bump the mono micro-scale on phones — 9.5/10.5 are below the 11 px legibility floor for uppercase mono labels and risk wrap/crop in dense surfaces. (Audit 2026-05-27 P2-Y1.) */ @media (max-width: 600px) { :root { --text-mono-xs: 11px; --text-mono-sm: 11.5px; --text-mono-md: 12.5px; } } /* Re-open the original :root so subsequent declarations (font stacks etc.) land where they were before. */ :root { /* Font stacks — Geist + Geist Mono (Google Fonts, OFL) */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: 'Geist Mono', ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, monospace; } [data-theme="dark"] { --bg: #1a1714; /* warm near-black, not pure */ --surface: #211d18; /* card, slightly elevated */ --surface-2: #2a251f; /* hover/rail */ --border: #2c2820; --border-hover: #3a352d; --text: #fbf6ec; /* bone */ --text-dim: #b8ad97; /* bumped 2026-04-29 to clear WCAG AA at small mono sizes */ --text-faint: #988f7e; /* bumped 2026-05-13 from #8a8170 — clears AA on --surface */ /* Primary — UNIFIED with light mode 2026-05-13. The previous "clay brightened for dark surround" #d27a55 had 3.13:1 against white button-label text (fails AA). Using #a85730 in both themes gives 5.05:1 button label contrast in both directions; the loss of dark-mode-specific punch is acceptable for the AA gain. */ --primary: #a85730; --primary-hover: #8f4928; --primary-soft: #3a2419; /* dark clay tint, sits behind clay text */ --warn: #e0a04a; --warn-soft: #3a2c14; --success: #94ae77; --success-soft: #2a3a22; --danger: #c06a5d; --danger-soft: #3a1c18; /* Annotation palette — same vivid values as light mode. Annotations render on top of the underlying photograph, not on theme chrome, so they don't need a dark variant. See light-mode block for rationale. */ --annotation-clay: #c46a45; --annotation-hivis: #d4943f; --annotation-lichen: #87a06b; --annotation-data: #6b8a9c; --annotation-bone: #fbf6ec; /* Paired text-on-fill. Same as light because --primary is unified (see 2026-05-13 audit comment above). Dark-mode --warn is lighter (#e0a04a vs #d4943f) so the same dark-ink warn-fg still clears AA at 6.3:1. */ --primary-fg: #ffffff; --success-fg: #ffffff; --warn-fg: #2c1d08; --danger-fg: #ffffff; --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.4); --shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.3); } /* ── STRATUM B V2 FOUNDATION OVERRIDES ──────────────────────────────────── The Stratum redesign is landing in batches. This token bridge flips the live UI onto the new ink + pewter + citron palette while preserving legacy variable names until each surface is fully ported to static/css/stratum-b.css. */ :root { --bg: #f4f3ef; --surface: #ffffff; --surface-2: #f0efe9; --surface-3: #e8e7e0; --border: #e3e2db; --border-hover: #c5c4bc; --border-h: #c5c4bc; --border-s: #a0a098; --text: #111110; --text-dim: #4c4c47; --text-faint: #6a6a64; /* 2026-06-17: was #8c8c84 (3.39:1 on white) — the V2 block regressed the 2026-05-13 AA fix; LV-20/39/41 */ --text-2: #4c4c47; --text-3: #6a6a64; /* 2026-06-17: was #8c8c84 — AA on white/--bg/--surface-2; LV-19/29/40 */ --primary: #111110; --primary-hover: #2a2a28; --primary-h: #2a2a28; --primary-soft: #f0efe9; --primary-fg: #ffffff; --accent: #c4dd1a; --accent-h: #a8be15; --accent-soft: #f0f5c6; --accent-fg: #111110; --ok: #3c780a; --ok-soft: #dff0c4; --success: #3c780a; --success-soft: #dff0c4; --success-fg: #ffffff; --warn: #98590a; --warn-soft: #faeabc; --warn-fg: #ffffff; --bad: #8b1818; --bad-soft: #f5d4d4; --danger: #8b1818; --danger-soft: #f5d4d4; --danger-fg: #ffffff; --info: #1a5a96; --info-soft: #d4e8f8; --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, monospace; --font-sans: var(--sans); --font-mono: var(--mono); --t-2xs: 10px; --t-xs: 11.5px; --t-sm: 12.5px; --t-md: 13.5px; --t-lg: 15px; --t-xl: 18px; --t-2xl: 22px; --t-3xl: 28px; --t-4xl: 36px; --r-xs: 3px; --r-sm: 5px; --r: 8px; --r-lg: 12px; --r-pill: 999px; --nav-h: 52px; --projbar-h: 44px; --shadow-sm: 0 1px 2px rgba(17,17,16,0.06); --shadow: 0 4px 16px -4px rgba(17,17,16,0.11); --shadow-md: 0 16px 48px -12px rgba(17,17,16,0.16); } [data-theme="dark"] { --bg: #0d0d0b; --surface: #161614; --surface-2: #1d1d1a; --surface-3: #262622; --border: #2a2a26; --border-hover: #3c3c36; --border-h: #3c3c36; --border-s: #555550; --text: #f0f0ea; --text-dim: #aeaea5; --text-faint: #8a8a80; /* 2026-06-17: was #6a6a60 (3.09:1 on --surface-2 #1d1d1a) — now >=4.5:1 on #1d1d1a/#161614/#0d0d0b, stays below --text-2 #aeaea5; LV-22 dark follow-up */ --text-2: #aeaea5; --text-3: #6a6a60; --primary: #f0f0ea; --primary-hover: #ffffff; --primary-h: #ffffff; --primary-soft: #1d1d1a; --primary-fg: #0d0d0b; --accent: #d2eb3a; --accent-h: #e3f56e; --accent-soft: #2c3608; --accent-fg: #0d0d0b; --ok: #84cc16; --ok-soft: #1a2c08; --success: #84cc16; --success-soft: #1a2c08; --warn: #d4a017; --warn-soft: #2c2208; --bad: #ef4444; --bad-soft: #280808; --danger: #ef4444; --danger-soft: #280808; --info: #60a5fa; --info-soft: #0a1e38; } /* ── STRATUM B V2 SHELL ADAPTER ─────────────────────────────────────────── Batch 2 introduces the v2 top navigation + project bar while the existing route loaders keep serving production-backed views. */ body.stratum-shell { background: var(--bg); } body.stratum-shell .stratum-nav { position: sticky; top: 0; z-index: 210; } body.stratum-shell .stratum-nav .nav-link.active { color: var(--text); background: var(--surface-2); font-weight: 500; } body.stratum-shell .stratum-projbar[hidden], body.stratum-shell .stratum-mobile-shell { display: none; } body.stratum-shell .app-shell { display: block; min-height: 100vh; } body.stratum-shell .app-topbar { display: none; } body.stratum-shell .app-main { min-height: calc(100vh - var(--nav-h)); width: 100%; } body.stratum-shell .app-content { padding: 0; } body.stratum-shell #app { min-height: calc(100vh - var(--nav-h)); } body.stratum-shell .projbar-tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; } body.stratum-shell .projbar-tabs::-webkit-scrollbar { display: none; } body.stratum-shell .projbar-tab.active { border-bottom-color: var(--accent); } body.stratum-shell .projbar-actions { flex-shrink: 0; } body.stratum-shell .stratum-mobile-menu { display: none; } body.stratum-shell.stratum-canvas-active .stratum-nav, body.stratum-shell.stratum-canvas-active .stratum-projbar, body.stratum-shell.stratum-canvas-active .stratum-mobile-shell { display: none; } body.stratum-shell.stratum-canvas-active .app-main, body.stratum-shell.stratum-canvas-active #app { min-height: 100vh; } body.stratum-shell.stratum-canvas-active .app-content { padding: 0; } body.stratum-shell .dashboard-map-hero .dashboard-map-inner-hero { position: absolute; inset: 0; min-height: 100%; z-index: 0; } body.stratum-shell .dashboard-map-hero .leaflet-container { filter: saturate(0.72) contrast(0.92); } body.stratum-shell .dashboard-map-hero .map-kpi-float { z-index: 3; } body.stratum-shell .dashboard-map-label { position: absolute; top: 14px; left: 22px; z-index: 3; padding: 5px 8px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); } body.stratum-shell .map-kpi-float .kpi { min-width: 160px; padding: 12px 20px; border-right: 1px solid var(--border); background: var(--surface); } body.stratum-shell .map-kpi-float .kpi:last-child { border-right: 0; } body.stratum-shell .map-kpi-float .kpi .label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; } body.stratum-shell .map-kpi-float .kpi .val { font-family: var(--mono); font-size: 1.65rem; font-weight: 500; letter-spacing: 0; line-height: 1; color: var(--text); } body.stratum-shell .map-kpi-float .kpi.is-warn .val, body.stratum-shell .map-kpi-float .kpi.is-bad .val { color: var(--warn); } body.stratum-shell .map-kpi-float .kpi .sub { display: none; } body.stratum-shell .feat-card .fc-stats, body.stratum-shell .feat-card .fc-empty-msg, body.stratum-shell .feat-card .fc-desc { font-size: var(--t-xs); line-height: 1.5; color: var(--text-2); } body.stratum-shell .feat-card .fc-stats .accent { color: var(--text); font-weight: 600; } body.stratum-shell .feat-card .fc-stats .dim { color: var(--text-3); } body.stratum-shell .feat-card .fc-cta { margin-top: 12px; } body.stratum-shell .station-detail-tabs { margin: 0 0 18px; padding: 0; border-bottom: 1px solid var(--border); } body.stratum-shell .station-overview .inst-grid { margin-top: 18px; } body.stratum-shell .canvas-shell.project-canvas-view { padding: 0; } body.stratum-shell .canvas-shell.project-canvas-view .canvas-bar { margin: 0; } @media (max-width: 767px) { body.stratum-shell .stratum-nav { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } body.stratum-shell .stratum-nav .nav-links, body.stratum-shell .stratum-nav .nav-search, body.stratum-shell .stratum-nav .btn-icon:not(.stratum-mobile-menu) { display: none; } body.stratum-shell .stratum-mobile-menu { display: grid; } body.stratum-shell .stratum-mobile-shell { display: block; } body.stratum-shell .m-bottomnav button { color: var(--text-3); font-size: var(--t-xs); } body.stratum-shell .m-bottomnav button.active { color: var(--text); font-weight: 600; } body.stratum-shell .stratum-projbar { top: var(--nav-h); padding: 0 12px; } body.stratum-shell .projbar-back, body.stratum-shell .projbar-name, body.stratum-shell .projbar-actions { display: none; } body.stratum-shell .projbar-vsep { display: none; } body.stratum-shell .projbar-tabs { width: 100%; } body.stratum-shell .projbar-tab { padding: 0 11px; white-space: nowrap; } body.stratum-shell .app-main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } body.stratum-shell.stratum-canvas-active .app-main { padding-bottom: 0; } } /* ── 3. RESET + BASE ────────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { min-height: 100vh; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--t-md); /* 1.45 sits inside the appendix-recommended 1.2-1.4 band for body copy and stays appropriately tight for the instrument-panel mood. Prose blocks (.empty-state-body, .page-subtitle, etc.) override locally. */ line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Geist stylistic alternates: ss01 = single-storey 'a' (cleaner technical look), cv11 = slashed zero in mono fallback contexts. */ font-feature-settings: "ss01", "cv11"; transition: background-color 120ms ease, color 120ms ease; } /* Tabular numerics anywhere mono is used — locks numbers into columns, which is the whole point of mono in an instrument-panel context. */ .mono, code, kbd, pre, [class*="num"], [class*="numeric"], .badge { font-variant-numeric: tabular-nums; } a { /* Inline text links use --primary-hover (the darker variant) so they hit 5.2:1 on aged paper — --primary at #a85730 only reaches 4.02:1 and fails WCAG AA for normal text. Underline addresses 1.4.1 (don't rely on color alone to mark a link); .btn / .btn-* override the underline back off since buttons are already visually distinct. */ color: var(--primary-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: text-decoration-thickness 120ms ease; } a:hover { text-decoration-thickness: 2px; } a.btn, a.btn-primary, a.btn-secondary, a.btn-ghost, a.btn-warn, a.btn-danger { text-decoration: none; } /* Sidebar nav, breadcrumb, tab links, etc. use anchor-as-control patterns where the surface itself is the affordance — don't underline. */ .app-nav a, .app-nav-item, .tab-item, .sub-tab-item, .page-breadcrumb a, .page-breadcrumb-back, .shell-brand-link, .sidebar-footer a, .empty-state a.btn-primary, .empty-state a.btn-secondary, .live-pill, .badge, .nvr-chip { text-decoration: none; } button { font-family: inherit; } img { max-width: 100%; display: block; } /* Global focus ring — applied to every interactive element via :focus-visible so mouse users aren't bothered by it. */ *:focus { outline: none; } *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); } /* Fleet sortable-header buttons: strip UA chrome so they read as plain header labels, then RE-ASSERT a visible keyboard focus ring — the all:unset reset would otherwise drop the global *:focus-visible outline. LV-42. */ .fleet-sort-btn { all: unset; cursor: pointer; user-select: none; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 2px; min-height: 24px; } /* min-height: WCAG 2.5.8 — the sort target must clear 24px in the dense header row */ .fleet-sort-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); } /* WCAG 2.4.1 — skip link. Visually hidden until the keyboard user tabs to it (it's the first focusable element on the page). Lets a screen-reader user bypass the sidebar nav and topbar instead of serializing through every nav button on every page load. */ .skip-link { position: absolute; top: 0; left: 0; padding: 0.6rem 1rem; background: var(--primary); color: var(--primary-fg); font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.04em; text-decoration: none; transform: translateY(-200%); transition: transform 120ms ease; z-index: 9999; } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--text); outline-offset: 2px; } /* ── 5. TYPOGRAPHY UTILITIES ────────────────────────────────────────────── */ .mono { font-family: var(--font-mono); } .text-xs { font-size: var(--t-xs); } .text-sm { font-size: var(--t-sm); } .text-base { font-size: var(--t-md); } .text-lg { font-size: var(--t-lg); } .text-xl { font-size: var(--t-2xl); } .text-2xl { font-size: var(--t-3xl); } .text-dim { color: var(--text-dim); } .text-faint { color: var(--text-faint); } /* Semantic text utilities — use the deepened "badge text" hues so .text-success / .text-warn / .text-danger / .text-primary all clear WCAG 2.1 AA (4.5:1) for normal text against --bg and --surface in light mode. The raw --success / --warn / --danger brand colors are fill colors, not text colors — they fail AA on aged paper (2.06:1 to 4.10:1, audit Stage 7). The dark-mode overrides below restore canonical brand vars (or lighter clay for primary) since those clear AA against dark surfaces. */ .text-primary { color: #7a3f1f; } /* deep clay, 6.53:1 on --bg */ .text-success { color: #3f5a2a; } /* deep lichen, 6.17:1 on --bg */ .text-warn { color: #6e3e0f; } /* deep amber, 7.08:1 on --bg */ .text-danger { color: #6f2920; } /* deep brick, 8.29:1 on --bg */ [data-theme="dark"] .text-primary { color: #d27a55; } /* bright clay, 5.66:1 on dark --bg */ [data-theme="dark"] .text-success { color: var(--success); } /* 7.29:1 on dark --bg */ [data-theme="dark"] .text-warn { color: var(--warn); } /* 7.90:1 on dark --bg */ [data-theme="dark"] .text-danger { color: #d48275; } /* bright brick, 6.16:1 on dark --bg */ /* ── 6. LAYOUT PRIMITIVES ───────────────────────────────────────────────── */ .app-shell { display: grid; /* Phase 2 (2026-05-19): added 56px Tier 1 icon rail to the left of the existing 240px sidebar. New grid: rail + sidebar + content. The mobile breakpoint in section 7 collapses both to a single column. */ grid-template-columns: 56px 240px 1fr; min-height: 100vh; } /* Sidebar — sticky to the top of the viewport so it stays in view as the main column scrolls. align-self:start keeps the sticky-context valid in the grid (without it, grid stretches the cell and there's no room to stick). The sidebar gets its own internal scroll if its content overflows 100vh. Mobile (≤767px) overrides this with position:fixed — see the @media block in section 7. */ .app-sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 1.5rem 1rem; display: flex; flex-direction: column; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; } .app-sidebar-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 2rem; padding: 0 0.25rem; cursor: pointer; color: inherit; } .app-sidebar-brand img { height: 32px; width: auto; } .app-sidebar-brand .wordmark { font-size: var(--t-md); font-weight: 600; color: var(--text); letter-spacing: -0.01em; } /* Nav */ .app-nav { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .app-nav-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border-radius: var(--r); color: var(--text-dim); font-size: var(--t-sm); font-weight: 500; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; background: none; border: 0; text-align: left; width: 100%; } .app-nav-item:hover { background: var(--surface-2); color: var(--text); } .app-nav-item.active { background: var(--primary-soft); /* var(--primary-hover) text on --primary-soft hits 4.90:1 (AA), vs 3.79:1 for var(--primary) (fail-text/pass-ui). Dark mode uses an even brighter shade via the override at the bottom of the dark badge block. (Stage 7 WCAG fix, 2026-05-21). */ color: var(--primary-hover); } .app-nav-item .nav-icon { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.75; } .app-sidebar-footer { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; display: flex; flex-direction: column; gap: 0.25rem; } /* Main column */ .app-main { display: flex; flex-direction: column; min-width: 0; } /* Topbar */ .app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 10; gap: 1rem; } .app-topbar-left { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; } .app-topbar-right { display: flex; align-items: center; gap: 0.75rem; } /* Breadcrumbs (replaces legacy #breadcrumb id contents) */ .breadcrumbs { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-sm); flex-wrap: wrap; } .breadcrumbs a { color: var(--text-dim); text-decoration: none; transition: color 120ms ease; } .breadcrumbs a:hover { color: var(--text); } .breadcrumbs .sep, .breadcrumbs-sep { color: var(--text-faint); } .breadcrumbs-current, .breadcrumbs > span:last-child { color: var(--text); font-weight: 500; } .user-badge { font-size: var(--t-xs); color: var(--text-dim); font-family: var(--font-mono); } /* Content area */ .app-content { flex: 1; padding: 2rem; width: 100%; /* Re-introduced 2026-05-13 per the design-for-ai theory audit ("density gradient is inverted on the SPA shell — on a 27" monitor the grid stretches edge-to-edge with the same density as the center, so there is no visual 'focus pool'"). 1440px lets the content read as a centered focus instead of a wall of edge-to- edge tiles. Inner grids (gallery, instrument-grid, project-grid) keep their auto-fill minmax() and reflow inside this width. */ max-width: none; } /* Sidebar toggle: desktop collapses/expands the project shell; mobile opens the off-canvas sidebar. */ .sidebar-toggle { display: inline-flex; background: none; border: 1px solid var(--border); border-radius: var(--r); width: 36px; height: 36px; color: var(--text); cursor: pointer; font-size: 1.1rem; line-height: 1; align-items: center; justify-content: center; } .sidebar-toggle:hover { background: var(--surface-2); } /* Page header (used inside .app-content by converted views) */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; } /* .page-title and .page-subtitle live with the Section-11+ overrides at the bottom of this file (search "Page header pattern"). Pre-Section-11 versions were removed 2026-04-30 to kill the dual-truth confusion flagged in the design audit (M3). */ /* ── 7. RESPONSIVE ──────────────────────────────────────────────────────── */ @media (max-width: 767px) { .app-shell { grid-template-columns: 1fr; } /* On mobile, hide the rail by default — it can come back via the sidebar-toggle button alongside the sidebar (slid in from the left). */ .app-rail { position: fixed; left: -56px; top: 0; bottom: 0; width: 56px; transition: left 200ms ease; z-index: 21; } .app-sidebar.open ~ .app-rail, .app-rail.open { left: 0; } .app-sidebar { position: fixed; left: -240px; top: 0; bottom: 0; width: 240px; transition: left 200ms ease; z-index: 20; } .app-sidebar.open { left: 56px; } .app-content { padding: 1rem; } .app-topbar { padding: 0.75rem 1rem; } .sidebar-toggle { display: inline-flex; } .app-topbar-right .btn { padding: 0.4rem 0.7rem; font-size: var(--t-xs); } } /* Scrim behind open mobile sidebar */ .sidebar-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 15; } .sidebar-scrim.open { display: block; } /* ── 8. COMPONENTS ─────────────────────────────────────────────────────── */ /* Buttons */ /* Cards */ /* Cards — Site Notes single-edge convention. No box-shadow lift, no translateY on hover; hover is a border-color shift, period. The override layer further down (line ~6500 "Cards — single edge") used to *re-kill* a SaaS-style hover lift that lived here; that lift was inlined here directly 2026-05-21 (Site Notes refinement, brand character pass) so the file reads as Site Notes top-down instead of as "deploy Material, then patch to Site Notes." The override block remains as belt-and-suspenders for new card classes that might miss this rule. */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: border-color 120ms ease; } .card-interactive { cursor: pointer; } .card-interactive:hover { border-color: var(--primary); } .card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-header h2, .card-header h3 { font-size: var(--t-lg); font-weight: 600; color: var(--text); } .card-body { padding: 1.25rem; } .card-footer { padding: 0.875rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; justify-content: flex-end; gap: 0.5rem; } /* Form controls */ .form-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; } .form-field label { font-size: var(--t-xs); font-weight: 600; color: var(--text); } .form-hint { font-size: var(--t-xs); color: var(--text-dim); } .input, .select, .textarea { width: 100%; padding: 0.55rem 0.75rem; font-family: var(--font-sans); font-size: var(--t-sm); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); transition: border-color 120ms ease, box-shadow 120ms ease; } .input:hover, .select:hover, .textarea:hover { border-color: var(--border-hover); } .input:focus, .select:focus, .textarea:focus { outline: none; /* WCAG 2.4.7 — focus indicator stays the box-shadow ring, but stepped up from --primary-soft (a faint tint) to a 2-stop ring so the indicator clears 3:1 against the surface. */ border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 0 0 3px var(--primary-soft); } .input::placeholder, .textarea::placeholder { color: var(--text-faint); } .textarea { min-height: 80px; resize: vertical; } /* Badges — base + variants consolidated onto stratum-b.css (.badge / .badge-ok/ -warn/-bad/-accent/-ghost) on 2026-06-09. The platform base was fully shadowed by stratum-b except line-height, which was ported into the stratum-b base. */ /* Status dot — base + states consolidated onto stratum-b.css (.status-dot + .status-dot.ok/-warn/-bad) on 2026-06-09. Call sites migrated online→ok, offline→bad (resolved colors identical: --success≡--ok, --danger≡--bad in both themes). flex-shrink:0 ported into the stratum-b base; .status-dot.warning was already dead (no emitter used it; dashboard uses 'warn'). The dashboard 'cold' state intentionally has no rule → neutral base grey ("no recent activity"). (The 2026-05-21 removal of the online halo-pulse stands — no live-telemetry dot.) */ /* Tables */ .table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); } .table thead th { text-align: left; padding: 0.6rem 0.75rem; font-size: var(--t-xs); font-weight: 600; color: var(--text-dim); border-bottom: 1px solid var(--border); background: var(--surface-2); } .table tbody td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); color: var(--text); } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--surface-2); } /* Modal — overlay + content. Backward compatible with existing .modal-bg + .modal structure so openModal() keeps working. z-index 1300 sits above Leaflet's control panes (default ~800-1000) and the fullscreen lightbox (1200). Markup discard confirms can be opened from inside the lightbox, so the modal has to win that stack. */ .modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1300; align-items: center; justify-content: center; padding: 1rem; } .modal-bg.open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); width: 440px; max-width: 100%; max-height: calc(100vh - 2rem); overflow: auto; } .modal-header { padding: 1.25rem 1.5rem 0.75rem; } .modal-title { font-size: var(--t-lg); font-weight: 600; color: var(--text); } .modal-body { padding: 0.75rem 1.5rem 1rem; } .modal-footer { padding: 0.75rem 1.5rem 1.25rem; display: flex; justify-content: flex-end; gap: 0.5rem; } /* Empty state */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1.5rem; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-lg); color: var(--text-dim); gap: 0.5rem; } .empty-state-icon { width: 48px; height: 48px; color: var(--text-faint); margin-bottom: 0.5rem; } .empty-state-title { font-size: var(--t-lg); font-weight: 600; color: var(--text); } .empty-state-body { font-size: var(--t-sm); color: var(--text-dim); max-width: 400px; margin-bottom: 1rem; } /* Toast (inherits legacy #toast behaviour — restyled). Slide-in is spatial motion — guarded by prefers-reduced-motion below so it snaps in instead of sliding for users who opted out (Stage 5 audit M2). */ .toast { position: fixed; bottom: 2rem; right: 2rem; background: var(--text); color: var(--bg); font-size: var(--t-sm); font-weight: 500; padding: 0.7rem 1rem; border-radius: var(--r); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease; z-index: 1500; /* above modals (1100) and lightbox (1200) */ pointer-events: none; } .toast.show { opacity: 1; transform: translateY(0); } /* F-08: severity variants — a colored left edge distinguishes error/success/ warn from the neutral pill (reinforces the message text, not color-only; paired with role=alert/assertive for errors in helpers.ts toast()). */ .toast-error { border-left: 4px solid var(--danger); } .toast-success { border-left: 4px solid var(--success); } .toast-warn { border-left: 4px solid var(--warn); } .toast-info { border-left: 4px solid transparent; } @media (prefers-reduced-motion: reduce) { .toast { transition: opacity 180ms ease; transform: none; } .toast.show { transform: none; } } /* What's-new banner — sticky-but-dismissible bottom-right notification. Distinct from .toast so it doesn't auto-vanish. Site Notes refinement (2026-05-21): de-pilled both the outer banner and the inner CTA. Pill shape (border-radius: 999px) read as Material/iOS FAB convention; the --radius square-corner is on-brand for the drafting-register mood. Hover on .wn-cta switched from filter:brightness(1.08) to var(--primary-hover) so it darkens (matching .btn-primary) instead of brightening — one direction for the brand color across the system. */ .whatsnew-banner { position: fixed; bottom: 1.25rem; right: 1.25rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r); padding: 0.5rem 0.4rem 0.5rem 1rem; box-shadow: var(--shadow-md); display: none; align-items: center; gap: 0.6rem; font-size: var(--t-sm); z-index: 90; max-width: calc(100vw - 2rem); } .whatsnew-banner.open { display: inline-flex; } .whatsnew-banner .wn-spark { font-size: 1.05em; } .whatsnew-banner .wn-msg { color: var(--text-dim); } .whatsnew-banner .wn-cta { background: var(--primary); color: var(--primary-fg); border: 0; padding: 0.4rem 0.9rem; border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 600; cursor: pointer; font-family: inherit; transition: background-color 120ms ease; } .whatsnew-banner .wn-cta:hover { background: var(--primary-hover); } .whatsnew-banner .wn-x { background: transparent; border: 0; color: var(--text-faint); font-size: 1.3rem; line-height: 1; /* WCAG 2.5.8 Target Size (AA): >=24x24 hit area; visual glyph stays the same size, centered inside the expanded button via inline-grid. */ min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; padding: 0; cursor: pointer; } .whatsnew-banner .wn-x:hover { color: var(--text); } /* Onboarding "Dismiss setup checklist" ✕ (rendered inline-styled in dashboard/index.ts). The inline style sets only color/position/font; these layout props are NOT inline, so they apply without !important and give the glyph a >=24px hit area (28px here) centred via inline-grid — mirrors the .wn-x precedent above. WCAG 2.5.8 Target Size (AA) RISK; LV-22. */ #ob-dismiss-btn { min-width: 28px; min-height: 28px; display: inline-grid; place-items: center; padding: 0; } @media (max-width: 600px) { .whatsnew-banner { right: 0.5rem; left: 0.5rem; bottom: 0.5rem; padding-left: 0.7rem; } .whatsnew-banner .wn-cta { padding: 0.4rem 0.7rem; } } .whatsnew-list { padding-left: 1.2rem; margin: 0.4rem 0; } .whatsnew-list li { margin-bottom: 0.65rem; line-height: 1.45; } .whatsnew-list li:last-child { margin-bottom: 0; } /* ── 9. PROJECTS LIST (the one converted view) ─────────────────────────── */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; } .project-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; cursor: pointer; transition: border-color 120ms ease, box-shadow 180ms ease, transform 180ms ease; display: flex; flex-direction: column; } .project-card:hover { /* F-20: no-lift convention — hover is a border-color shift only. The lift (box-shadow + translateY) was already neutralized by the card-hover kill rule (~7104); the dead declarations are removed here. */ border-color: var(--border-hover); } /* 4-state health accent strip (UX-parity cheap-fold): mirrors the dashboard card's health-* convention so the /projects and dashboard project surfaces read identically. ok=green, warn=amber, bad=red, cold=faint (no stations). */ .project-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; z-index: 1; } .project-card.health-ok::before { background: var(--success); } .project-card.health-warn::before { background: var(--warn); } .project-card.health-bad::before { background: var(--danger); } .project-card.health-cold::before { background: var(--text-faint); } .project-card-cover { aspect-ratio: 16/9; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-faint); overflow: hidden; } .project-card-cover img { width: 100%; height: 100%; object-fit: cover; } .project-card-cover svg { width: 36px; height: 36px; } .project-card-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; } .project-card-title { font-size: var(--t-lg); font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .project-card-desc { font-size: var(--t-sm); color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; min-height: 2.45em; } .project-card-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.6rem; font-size: var(--t-xs); color: var(--text-dim); } .project-card-stat { display: inline-flex; align-items: center; gap: 0.35rem; } .project-card-stat svg { width: 14px; height: 14px; stroke-width: 2; color: var(--text-faint); } .project-card-stat-value { color: var(--text); font-weight: 600; } /* Create-project card (dashed ghost tile matching the grid) */ .project-create-card { background: var(--surface); border: 2px dashed var(--border); border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; cursor: pointer; color: var(--text-dim); transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease; gap: 0.4rem; } .project-create-card:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); } .project-create-card svg { width: 28px; height: 28px; stroke-width: 1.75; } /* ── 10. THEME TOGGLE (sidebar footer) ─────────────────────────────────── */ .theme-toggle { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border-radius: var(--r); color: var(--text-dim); font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 500; cursor: pointer; background: none; border: 0; text-align: left; width: 100%; transition: background-color 120ms ease, color 120ms ease; } .theme-toggle:hover { background: var(--surface-2); color: var(--text); } .theme-toggle .nav-icon { width: 18px; height: 18px; flex-shrink: 0; } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: block; } /* ── 11. LOGIN PAGE ────────────────────────────────────────────────────── */ .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--bg); } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 2.25rem 2rem; /* FND-B01: 320px reflow + 400% zoom — let the card shrink to viewport */ width: 100%; max-width: min(400px, 100vw - 2rem); } /* FND-B01: reduce padding under ~420px so card content fits at 320 CSS px / 400% zoom */ @media (max-width: 420px) { .login-card { padding: 1.5rem 1.25rem; } } .login-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; } .login-brand img { height: 36px; width: auto; } .login-brand .wordmark { font-size: var(--t-lg); font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .login-title { font-size: var(--t-2xl); font-weight: 700; color: var(--text); margin-bottom: 0.4rem; letter-spacing: -0.02em; } .login-sub { font-size: var(--t-sm); color: var(--text-dim); margin-bottom: 1.75rem; } .login-error { font-size: var(--t-sm); color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-soft); padding: 0.55rem 0.75rem; border-radius: var(--r-sm); margin-bottom: 1rem; display: none; } .login-error.show { display: block; } .login-submit { width: 100%; margin-top: 0.5rem; } /* ═══════════════════════════════════════════════════════════════════════════ PR 1 ITERATION — topbar actions, stats strip, activity panel ═══════════════════════════════════════════════════════════════════════════ */ /* ── 12. TOPBAR ACTIONS ───────────────────────────────────────────────────── Search + notifications bell + help button, on the right side of .app-topbar ─────────────────────────────────────────────────────────────────────────── */ .topbar-actions { display: flex; align-items: center; gap: 0.5rem; } .topbar-search { position: relative; display: flex; align-items: center; width: 280px; max-width: 40vw; } .topbar-search svg { position: absolute; left: 0.7rem; width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; stroke-width: 2; } .topbar-search input { width: 100%; height: 36px; padding: 0 0.75rem 0 2.1rem; font-family: var(--font-sans); font-size: var(--t-sm); color: var(--text); background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r); transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .topbar-search input::placeholder { color: var(--text-faint); } .topbar-search input:hover { background: var(--surface); border-color: var(--border); } .topbar-search input:focus { outline: none; background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .topbar-icon-btn { position: relative; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--r); color: var(--text-dim); cursor: pointer; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .topbar-icon-btn:hover { background: var(--surface-2); color: var(--text); } .topbar-icon-btn svg { width: 18px; height: 18px; stroke-width: 1.75; } .topbar-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: var(--text-mono-sm); font-weight: 700; line-height: 16px; text-align: center; color: var(--danger-fg); background: var(--danger); border-radius: 10px; border: 2px solid var(--surface); box-sizing: content-box; } .topbar-badge.hidden { display: none; } /* ── 13. STATS STRIP (projects page) ─────────────────────────────────────── Four-card at-a-glance KPI row above the project grid. Cards that have no data yet are simply omitted (no "—" placeholders). ─────────────────────────────────────────────────────────────────────────── */ .stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; } .stats-strip:empty { display: none; } /* .stat-card base + bare .stat-label/.stat-value/.stat-sub descendants removed 2026-06-09 (stat-card consolidation). The base was shadowed by the later `.status-metric, .stat-card` rule; the bare descendants were the last sans holdout (projects-view.ts), now migrated to .stat-card-label/-value/-sub (the mono/tabular winners below), matching every other stat strip. */ @media (max-width: 1100px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .stats-strip { grid-template-columns: 1fr; } } /* ── 14. PROJECTS LAYOUT + ACTIVITY PANEL ────────────────────────────────── Two-column layout on desktop: the projects grid on the left, a recent activity feed on the right. Stacks on tablet and mobile. ─────────────────────────────────────────────────────────────────────────── */ .projects-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; } .projects-main { min-width: 0; } .activity-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; /* Sticky so the feed stays visible when the projects column scrolls past on tall viewports. top offset matches the app-topbar height + a little. */ position: sticky; top: 5rem; max-height: calc(100vh - 7rem); overflow: hidden; } .activity-header { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1rem; border-bottom: 1px solid var(--border); } .activity-header h3 { font-size: var(--t-sm); font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .activity-header .btn-ghost.btn-sm { padding: 0.25rem 0.4rem; font-size: var(--t-sm); line-height: 1; /* Icon-only ↻ refresh button rendered 23.1px wide; floor the width so the tap target clears the AA 24px minimum. WCAG 2.5.8 Target Size RISK; LV-23. */ min-width: 24px; } .activity-list { flex: 1; overflow-y: auto; padding: 0.25rem 0; } .activity-item { display: flex; gap: 0.7rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); font-size: var(--t-sm); line-height: 1.4; } .activity-item:last-child { border-bottom: 0; } .activity-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 0.45rem; background: var(--text-faint); } .activity-dot.checkin { background: var(--success); } .activity-dot.command { background: var(--primary); } .activity-dot.enrollment { background: var(--warn); } .activity-body { flex: 1; min-width: 0; } .activity-message { color: var(--text); word-wrap: break-word; } .activity-message a { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--border-hover); } .activity-message a:hover { color: var(--primary); border-bottom-color: var(--primary); } .activity-time { font-size: var(--t-xs); color: var(--text-faint); margin-top: 0.15rem; } .activity-empty { padding: 2rem 1rem; text-align: center; font-size: var(--t-sm); color: var(--text-dim); } @media (max-width: 1100px) { .projects-layout { grid-template-columns: 1fr; } .activity-panel { position: static; max-height: none; } .activity-list { max-height: 400px; } } /* ── 15. TOPBAR — HIDE SEARCH + ACTIONS ON NARROW VIEWPORTS ────────────── */ @media (max-width: 767px) { .topbar-search { display: none; } .topbar-actions { gap: 0.25rem; } } /* ═══════════════════════════════════════════════════════════════════════════ PR 2a — project detail page + all modals ═══════════════════════════════════════════════════════════════════════════ */ /* ── 16. PROJECT DETAIL HEADER ──────────────────────────────────────────── */ .page-breadcrumb-back { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--t-sm); color: var(--text-dim); text-decoration: none; margin-bottom: 0.6rem; transition: color 120ms ease; } .page-breadcrumb-back:hover { color: var(--primary); } .page-breadcrumb-back svg { width: 14px; height: 14px; stroke-width: 2; } .page-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* Ghost button that reads "danger" on hover — used for "Delete project" in the page-actions row. Keeps visual weight low until the user commits. */ .btn-ghost.danger-text { color: var(--danger); } .btn-ghost.danger-text:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); } /* ── 17. STATS STRIP (project detail) ───────────────────────────────────── */ .stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; } @media (max-width: 900px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .stats-strip { grid-template-columns: 1fr; } } /* The global .stat-card (from PR 1) is already defined — we just make sure the project-detail variant uses the same rhythm. The card itself carries border/shadow/hover from .card; the inner structure is below. */ /* Duplicate .stat-card + the sans .stat-card-label/-value/-sub rules removed 2026-06-09 (stat-card consolidation) — all shadowed by the later mono winners (`.status-metric, .stat-card` + `.stat-card-label, .stat-label` / `-value` / `-sub` blocks). Single definition now lives in those later blocks. */ /* ── 18. STATIONS GRID ──────────────────────────────────────────────────── */ .stations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .station-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.75rem; cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; min-height: 160px; } .station-card:hover { /* F-20: border-color shift only (lift was already neutralized at ~7104). */ border-color: var(--border-hover); } .station-card-header { display: flex; align-items: center; gap: 0.55rem; min-width: 0; } .station-card-name { font-size: var(--t-lg); font-weight: 600; color: var(--text); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .station-card-meta { display: flex; flex-direction: column; gap: 0.35rem; margin-top: auto; } .station-card-meta-item { display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--t-xs); } .station-card-meta-item .meta-label { color: var(--text-dim); flex-shrink: 0; } .station-card-meta-item .meta-value { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: calc(var(--t-xs) + 0.5px); } /* Create-station tile (dashed ghost — matches .project-create-card rhythm) */ .create-station-card { background: var(--surface); border: 2px dashed var(--border); border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; cursor: pointer; color: var(--text-dim); transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease; gap: 0.4rem; } .create-station-card:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); } .create-station-card svg { width: 24px; height: 24px; stroke-width: 1.75; } .create-station-card-label { font-size: var(--t-sm); font-weight: 500; } /* ── 19. ENROLLMENT MODAL FLOW ──────────────────────────────────────────── */ .enroll-intro { font-size: var(--t-sm); color: var(--text-dim); margin-bottom: 0.9rem; line-height: 1.45; } .enroll-code { display: block; text-align: center; font-family: var(--font-mono); font-size: var(--t-3xl); font-weight: 600; letter-spacing: 0.12em; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 0.9rem 1rem; margin: 0.5rem 0 1rem; user-select: all; cursor: text; } .enroll-qr { display: flex; justify-content: center; margin: 0.5rem 0 1rem; } .enroll-qr img, .enroll-qr svg { width: 200px; height: 200px; border-radius: var(--r-sm); background: #ffffff; padding: 0.5rem; border: 1px solid var(--border); } .enroll-status { display: flex; align-items: center; justify-content: center; gap: 0.55rem; font-size: var(--t-sm); color: var(--text-dim); margin-top: 0.75rem; } .enroll-spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: enroll-spin 0.8s linear infinite; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { /* Spinner becomes a static dashed ring — still communicates "in progress" via shape, no motion. The enrollment poll JS continues to update the phase list text below, which is the load-bearing progress signal. */ .enroll-spinner { animation: none; border-style: dashed; } } .enroll-phase-list { display: grid; gap: 0.35rem; margin-top: 0.65rem; font-size: var(--t-xs); color: var(--text-dim); } .enroll-phase-row { display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 1rem; } .enroll-phase-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--text-faint); flex-shrink: 0; } .enroll-phase-dot.ok { background: var(--success); } .enroll-phase-dot.pending { background: var(--primary); } .enroll-phase-dot.error { background: var(--danger); } @keyframes enroll-spin { to { transform: rotate(360deg); } } .enroll-expiry { text-align: center; font-size: var(--t-xs); color: var(--text-faint); margin-top: 0.5rem; } .enroll-expiry.urgent { color: var(--warn); font-weight: 600; } .enroll-done-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%; background: var(--success-soft); color: var(--success); } .enroll-done-icon svg { width: 32px; height: 32px; stroke-width: 2.5; } .enroll-done-title { text-align: center; font-size: var(--t-lg); font-weight: 600; color: var(--text); margin-bottom: 0.3rem; } .enroll-done-sub { text-align: center; font-size: var(--t-sm); color: var(--text-dim); line-height: 1.45; } /* ── 19b. Boot-bundle additions to the enrollment modal (2026-05-13) ──── */ .enroll-radio-group { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.35rem; } .enroll-radio, .enroll-checkbox { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--t-sm); color: var(--text); cursor: pointer; line-height: 1.4; } .enroll-radio input, .enroll-checkbox input { margin-top: 0.18rem; flex-shrink: 0; accent-color: var(--primary); } .enroll-radio span, .enroll-checkbox span { flex: 1; } .enroll-radio strong, .enroll-checkbox strong { color: var(--text); font-weight: 600; } .enroll-profile-note { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-dim); font-size: var(--t-sm); line-height: 1.45; margin: -0.25rem 0 0.7rem; padding: 0.65rem 0.75rem; } .enroll-flasher { margin-bottom: 1rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); } .enroll-flasher-title { font-weight: 600; color: var(--text); } .enroll-flasher-note { margin: 0.55rem 0 0.8rem; font-size: var(--t-xs); line-height: 1.5; color: var(--text-faint); } .enroll-compact-steps { margin-bottom: 0.75rem; } .enroll-url-row { display: flex; align-items: stretch; gap: 0.4rem; margin-top: 0.5rem; } .enroll-url-input { flex: 1; min-width: 0; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-family: var(--mono); font-size: var(--t-xs); } .enroll-steps { list-style: none; counter-reset: enroll-step; padding: 0; margin: 0 0 1rem; } .enroll-steps > li { counter-increment: enroll-step; position: relative; padding: 0 0 0.9rem 2.2rem; border-left: 1px dashed var(--border); margin-left: 0.85rem; } .enroll-steps > li:last-child { padding-bottom: 0; border-left-color: transparent; } .enroll-steps > li::before { content: counter(enroll-step); position: absolute; left: -0.85rem; top: 0; width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600; color: var(--primary); background: var(--surface); border: 1px solid var(--border); border-radius: 50%; } .enroll-step-head { font-size: var(--t-sm); font-weight: 500; color: var(--text); margin-bottom: 0.35rem; } .enroll-step-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.25rem; } .enroll-fallback { margin: 0.4rem 0 0.75rem; border-top: 1px dashed var(--border); padding-top: 0.75rem; } .enroll-fallback > summary { font-size: var(--t-xs); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); cursor: pointer; user-select: none; } .enroll-fallback[open] > summary { margin-bottom: 0.4rem; } .btn-disabled { opacity: 0.6; pointer-events: none; cursor: default; } /* ── 20. MEMBERS MODAL ──────────────────────────────────────────────────── */ .member-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .member-row { display: grid; grid-template-columns: 1fr 140px auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); } .member-row-name { font-size: var(--t-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .member-row-name .role-hint { display: inline-block; margin-left: 0.4rem; font-size: var(--t-xs); color: var(--text-faint); font-weight: 500; } .member-role-select { padding: 0.35rem 0.5rem; font-size: var(--t-xs); } .btn-icon-danger { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: transparent; color: var(--text-faint); border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; font-size: 1.1rem; line-height: 1; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .btn-icon-danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); } .member-add { /* Now hosts two add-rows separated by an "or" divider — the first * is "Add existing user by username", the second is "Send email * invitation to a non-user". Each row preserves the original * 1fr/140px/auto column rhythm. (2026-05-04.) */ padding-top: 0.85rem; border-top: 1px solid var(--border); margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.6rem; } .member-add-row { display: grid; grid-template-columns: 1fr 140px auto; gap: 0.5rem; align-items: center; } .member-add-divider { display: flex; align-items: center; gap: 0.6rem; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.08em; text-transform: uppercase; } .member-add-divider::before, .member-add-divider::after { content: ""; flex: 1; border-top: 1px dashed var(--border); } /* Pending-invitations section: same row visual as member-row but * tinted to read as "pending" rather than active. (2026-05-04.) */ .member-pending-section { margin-top: 1rem; } .member-section-label { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.4rem; padding-left: 0.1rem; } .member-row.member-row-pending { background: var(--bg); border-style: dashed; } /* Phone width — invitation form rows stack so the email field * doesn't crush against the role select. */ @media (max-width: 480px) { .member-add-row { grid-template-columns: 1fr; } } /* ── 21. TYPE-TO-CONFIRM DESTRUCTIVE ACTIONS ────────────────────────────── */ .confirm-warning { font-size: var(--t-sm); color: var(--text); line-height: 1.5; margin-bottom: 0.9rem; } .confirm-warning strong { color: var(--danger); font-weight: 600; } .confirm-error { font-size: var(--t-xs); color: var(--danger); margin-top: 0.35rem; min-height: 1.1em; } /* ── 22. MEMBERS MODAL — RESPONSIVE ─────────────────────────────────────── */ @media (max-width: 500px) { .member-row, .member-add { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════ PR 2b — station detail + admin + profile + lightbox ═══════════════════════════════════════════════════════════════════════════ */ /* ── 23. TAB NAV ──────────────────────────────────────────────────────────── Used on the station detail page (Gallery / Status / Settings) and designed to be extendable when the Videos tab lands in Phase A. Replaces the legacy .st-tabs/.st-tab pair. ─────────────────────────────────────────────────────────────────────────── */ .tab-nav { display: flex; gap: 0.1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; overflow-x: auto; } .tab-item { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.65rem 1rem; font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 500; color: var(--text-dim); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color 120ms ease, border-color 120ms ease; margin-bottom: -1px; } .tab-item:hover { color: var(--text); } .tab-item.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } /* ── 24. DISK BAR (station stats-strip) ──────────────────────────────────── Thin progress bar used inside .stat-card for disk usage. Color ramps from success → warn → danger at 70% / 85%. The data value sets width inline. ─────────────────────────────────────────────────────────────────────────── */ .disk-bar { width: 100%; height: 4px; background: var(--surface-2); border-radius: var(--r-xs); /* FND-C05: was 2px off-scale → --r-xs (3px) */ overflow: hidden; margin-top: 0.4rem; } .disk-bar-fill { height: 100%; background: var(--success); border-radius: var(--r-xs); /* FND-C05: was 2px off-scale → --r-xs (3px) */ transition: width 200ms ease, background-color 120ms ease; } .disk-bar-fill.warn { background: var(--warn); } .disk-bar-fill.danger { background: var(--danger); } /* ── 25. GALLERY ─────────────────────────────────────────────────────────── */ .gallery-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: start; } .gallery-dates { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; position: sticky; top: 5rem; max-height: calc(100vh - 7rem); display: flex; flex-direction: column; } .gallery-dates-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: var(--t-xs); font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .sidebar-close { display: none; background: none; border: 0; color: var(--text-dim); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem; border-radius: var(--r-sm); } .sidebar-close:hover { background: var(--surface-2); color: var(--text); } .date-list { flex: 1; overflow-y: auto; padding: 0.25rem 0; } /* Month grouping in the date sidebar (added 2026-05-04). The newest * month renders expanded; older months collapse so the sidebar * doesn't become a wall on long-running stations. Click the header * to toggle. The active date inside a collapsed group auto-expands. */ .date-month-group { border-bottom: 1px dashed var(--border); } .date-month-group:last-child { border-bottom: 0; } .date-month-header { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); transition: background-color 120ms ease; } .date-month-header:hover { background: var(--surface-2); } .date-month-chevron { width: 12px; height: 12px; flex: 0 0 12px; transition: transform 160ms ease; transform: rotate(-90deg); /* collapsed default: chevron points right */ color: var(--text-faint); } .date-month-group.is-expanded .date-month-chevron { transform: rotate(0); /* expanded: chevron points down */ } .date-month-label { flex: 1; color: var(--text); letter-spacing: 0.06em; } .date-month-meta { color: var(--text-faint); font-variant-numeric: tabular-nums; } .date-month-items { /* Collapsed: hidden via display:none. Showing/hiding rather than * height-animating because the items are mono-uppercase rows of * unknown count — height animation flickers. */ display: none; } .date-month-group.is-expanded .date-month-items { display: block; } .date-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 1rem; font-size: var(--t-sm); color: var(--text); cursor: pointer; border-left: 2px solid transparent; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .date-item:hover { background: var(--surface-2); } .date-item.active { background: var(--primary-soft); color: var(--primary); border-left-color: var(--primary); font-weight: 600; } .date-item-label { font-family: var(--font-mono); font-size: calc(var(--t-sm) - 0.5px); } .date-item-count { font-size: var(--t-xs); padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); font-weight: 600; flex-shrink: 0; } .date-item.active .date-item-count { background: var(--primary); color: var(--primary-fg); } .gallery-main { min-width: 0; } .gallery-day-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; } .gallery-day-header h2 { font-size: var(--t-2xl); font-weight: 600; color: var(--text); letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.6rem; } .gallery-day-header h2 .count { font-size: var(--t-sm); font-weight: 500; color: var(--text-dim); } .gallery-day-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .gallery-filters { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin: 0.5rem 0 0.85rem; } .filter-chip { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); font-size: var(--t-xs); font-weight: 500; padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .filter-chip:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--border-hover); } .filter-chip.active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); } .filter-chip:disabled { opacity: 0.45; cursor: default; } .filter-status { font-size: var(--t-xs); color: var(--text-faint); font-family: var(--font-mono); margin-left: 0.25rem; } /* AI badge — sparkle next to AI-driven actions. Tiny, never dominant. */ .ai-badge { display: inline-block; margin-left: 0.35rem; font-size: 0.85em; opacity: 0.7; vertical-align: baseline; } .btn:hover .ai-badge { opacity: 1; } /* Smart-search presets + advanced disclosure */ .ss-preset-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin: 0.25rem 0 0.6rem; } .ss-preset { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); padding: 0.3rem 0.7rem; border-radius: 999px; font-size: var(--t-xs); font-weight: 500; cursor: pointer; } .ss-preset:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-hover); } .ss-preset.active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); } .ss-range-summary { font-size: var(--t-xs); color: var(--text-faint); font-family: var(--font-mono); margin-left: 0.4rem; } /* Class picker — chip grid in the Smart Search modal. Renders at modal-open time from /api/inference/status; only visible when the inference service is reachable AND has loaded models. Re-uses .filter-chip for the chip itself; this is just the wrapper grid + active-state colour matching the ss-preset pattern. */ .ss-classes-grid { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); max-height: 160px; overflow-y: auto; } .ss-class-chip { background: transparent; border: 1px solid transparent; color: var(--text-dim); padding: 0.25rem 0.55rem; border-radius: 3px; cursor: pointer; font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.04em; } .ss-class-chip:hover { color: var(--text); border-color: var(--border); } .ss-class-chip.active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); } .ss-advanced { display: none; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); } .ss-advanced.open { display: block; } /* Smart-search progress bar — shown while the inference stream walks frames. Mono caps for the count register, clay fill, single-edge track. */ .ss-progress { padding: 0.65rem 0; display: flex; flex-direction: column; gap: 0.45rem; } .ss-progress-label { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .ss-progress-classes { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; } .ss-progress-chip { font-family: var(--font-mono); font-size: var(--text-mono-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); background: var(--primary-soft); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 7px; } .ss-progress-count { font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 500; letter-spacing: 0.06em; color: var(--text-dim); font-variant-numeric: tabular-nums; } .ss-progress-track { height: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; } .ss-progress-fill { height: 100%; background: var(--primary); width: 0%; transition: width 180ms ease; } .ss-progress-hint { font-family: var(--font-sans); font-size: var(--text-mono-md); color: var(--text-faint); } .ss-progress-cancel { /* Sits on the right of the progress label row. Mono+caps to match the mono-numerics convention of the count it pairs with. */ font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); padding: 2px 8px; margin-left: auto; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-sm); cursor: pointer; transition: border-color 120ms ease, color 120ms ease, background 120ms ease; } .ss-progress-cancel:hover { border-color: var(--danger); color: var(--danger); } .ss-progress-cancel:disabled { opacity: 0.55; cursor: not-allowed; color: var(--text-faint); border-color: var(--border); } /* Results header — stats line on the left, Clear button on the right. Single dashed top rule so it reads like a section break above the grid. */ .ss-results-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.6rem; margin: 0.5rem 0 0.6rem; border-top: 1px dashed var(--border); flex-wrap: wrap; } /* Smart-search results grid (inside the modal) */ .ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.6rem; margin-top: 0.4rem; } .ss-card { background: var(--surface-2, var(--surface)); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; transition: border-color 120ms ease, transform 120ms ease; } .ss-card:hover { border-color: var(--primary); } /* Hover-lift kill (Site Notes: single-edge rule; cards shift border-color not Y-position on hover). Was missed in the section-11 override layer's transform-kill list. */ .ss-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .ss-card-meta { padding: 0.4rem 0.55rem; font-size: var(--t-xs); } .ss-card-when { font-family: var(--font-mono); color: var(--text-dim); margin-bottom: 0.15rem; word-break: break-all; } .ss-card-reason { color: var(--text); line-height: 1.35; } /* ── Moments tab — sub-nav + saved actions + class filter ───────────────── Search and Saved sub-tabs inside the Moments tab. The sub-tab nav uses a smaller, lighter visual weight than the top-level station tab nav so the hierarchy reads correctly: station tabs (Gallery / Moments / …) → sub-tabs (Search / Saved). */ .moments-shell { display: flex; flex-direction: column; gap: 1rem; } .sub-tab-nav { display: flex; gap: 0.05rem; border-bottom: 1px dashed var(--border); padding: 0; } .sub-tab-item { font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.04em; color: var(--text-dim); background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 0.55rem 0.85rem; cursor: pointer; margin-bottom: -1px; transition: color 120ms ease, border-color 120ms ease; } .sub-tab-item:hover { color: var(--text); } .sub-tab-item.active { color: var(--primary); border-bottom-color: var(--primary); } .sub-tab-count { font-family: var(--font-mono); font-size: var(--text-mono-xs); color: var(--text-faint); margin-left: 0.25rem; letter-spacing: 0.04em; } .ss-classes-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; /* FND-B06: wrap so the filter input doesn't overflow at 768–~900px (was clipped 188px past viewport inside #st-content overflow:visible). */ flex-wrap: wrap; } .ss-class-filter-input { font-size: var(--t-xs); padding: 0.3rem 0.55rem; /* FND-B06: shrink-fit instead of fixed 220px so the input survives any row width */ flex: 1 1 180px; min-width: 0; width: auto; } @media (max-width: 600px) { .ss-classes-header { flex-direction: column; align-items: stretch; } .ss-class-filter-input { width: 100%; } .vision-vlm-status, .vision-vlm-form { flex-direction: column; align-items: stretch; } } .moments-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border); } .moments-saved-actions { display: flex; gap: 0.35rem; margin-top: 0.45rem; } .moments-saved-actions .btn { flex: 0 0 auto; } .moments-saved-card .ss-card-meta { padding-bottom: 0.55rem; } .moments-empty { padding: 2rem 1.25rem; border: 1px dashed var(--border); border-radius: var(--r); background: var(--surface); text-align: left; } .vision-vlm-panel { display: grid; gap: 0.75rem; padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); } .vision-vlm-head, .vision-vlm-form, .vision-vlm-hints { display: flex; align-items: center; gap: 0.5rem; } .vision-vlm-head { justify-content: space-between; } .vision-vlm-head h2 { margin: 0; font-size: 1rem; } .vision-vlm-head p { margin: 0.15rem 0 0; color: var(--text-dim); font-size: var(--t-sm); } .vision-vlm-form input, .vision-vlm-form select { min-width: 0; flex: 1 1 auto; } .vision-search-filters { flex-wrap: wrap; } .vision-search-filters .input { flex: 1 1 160px; } .vision-vlm-hints { flex-wrap: wrap; } .vision-vlm-hints button { border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-dim); padding: 0.28rem 0.6rem; font-size: var(--t-xs); cursor: pointer; } .vision-vlm-hints button:hover { border-color: var(--primary); color: var(--primary); } .vision-vlm-badge, .vision-vlm-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .vision-vlm-results { min-height: 28px; } .vision-vlm-answer { display: grid; gap: 0.25rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--r-sm); /* FND-C05: was 6px off-scale → --r-sm (5px) */ background: var(--surface-2); } .vision-vlm-answer strong { font-size: var(--t-sm); } .vision-vlm-answer span, .vision-vlm-answer em { color: var(--text-dim); font-size: var(--t-xs); } .vision-vlm-answer em { font-style: normal; } .vision-vlm-status { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--r-sm); /* FND-C05: was 6px off-scale → --r-sm (5px) */ background: var(--surface-2); } .vision-vlm-status-main { display: grid; gap: 0.35rem; min-width: 0; flex: 1 1 auto; } .vision-vlm-status-main strong, .vision-vlm-status-main span, .vision-vlm-status-main em, .vision-vlm-status-copy { display: block; } .vision-vlm-status-main strong { font-size: var(--t-sm); } .vision-vlm-status-main span, .vision-vlm-status-main em, .vision-vlm-status-copy { color: var(--text-dim); font-size: var(--t-xs); } .vision-vlm-status-main em { font-style: normal; font-family: var(--font-mono); } .vision-vlm-meter { height: 6px; width: min(360px, 100%); border-radius: 999px; background: var(--border); overflow: hidden; } .vision-vlm-meter span { display: block; height: 100%; border-radius: inherit; background: var(--primary); } .vision-vlm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 0.55rem; } .vision-vlm-card { display: grid; gap: 0; padding: 0; overflow: hidden; text-align: left; border: 1px solid var(--border); border-radius: var(--r-sm); /* FND-C05: was 6px off-scale → --r-sm (5px) */ background: var(--surface-2); color: var(--text); cursor: pointer; } .vision-vlm-card:hover { border-color: var(--primary); } .vision-vlm-thumb { display: block; aspect-ratio: 1 / 1; background-size: cover; background-position: center; } .vision-vlm-card-body { display: grid; gap: 0.18rem; padding: 0.5rem; font-size: var(--t-xs); } .vision-vlm-error, .vision-vlm-empty { padding: 0.75rem; border: 1px dashed var(--border); border-radius: var(--r-sm); /* FND-C05: was 6px off-scale → --r-sm (5px) */ color: var(--text-dim); background: var(--surface-2); } /* ── Station-page: compact stats strip + detail-page chooser ────────────── The station-page stats strip is a flex row: 4 compact pills on the left, a dashed separator, then [Status] [Settings] action buttons. Detail pages (Status / Settings) replace the tab content entirely; the tab nav hides while a detail page is active. Sizes are calibrated against the Site Notes density rule — pills are ~1/3 shorter than the project-grid .stat-card, since on the station page the pills are secondary chrome. */ .stats-strip.stats-strip-compact { display: flex; align-items: stretch; gap: 0.75rem; margin-bottom: 1.25rem; grid-template-columns: none; /* override the projects-grid rules */ } .stats-strip-pills { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 0.5rem; flex: 1 1 auto; min-width: 0; } /* Stat pill v2 (2026-05-05 redesign): label + value sit on the same * row — label LEFT in mono-uppercase faint, value RIGHT in tabular- * nums weight 500. Pills are ~36px tall instead of the old ~64px; * the third "sub" line (timestamp / "uploaded" hint) is hidden by * default and surfaces in a native tooltip via `title=...` on the * pill so the data isn't lost. Disk bar stretches under the pair * since it's purely visual. */ .stats-strip.stats-strip-compact .stat-card { display: grid; grid-template-columns: auto 1fr; /* Lock row 1 to a single line-height so label+value baselines align across all pills regardless of whether .stat-card-sub is rendered below. Without this, grid auto-rows would resize row 1 when row 2 appears, and adjacent pills baseline-mismatch (theory audit C2). */ grid-template-rows: 1.5rem auto; align-items: baseline; gap: 0.55rem; padding: 0.55rem 0.75rem; min-height: 36px; box-shadow: none; } .stats-strip.stats-strip-compact .stat-card-label { font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; } .stats-strip.stats-strip-compact .stat-card-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sub line still rendered (the existing markup adds it as a sibling * of the value), but pulled into the same row visually as a small * faint suffix. Falls back to display:none on narrow widths so the * value doesn't fight for space. */ .stats-strip.stats-strip-compact .stat-card-sub { grid-column: 1 / -1; font-family: var(--font-mono); font-size: var(--text-mono-xs); color: var(--text-faint); letter-spacing: 0.04em; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -0.15rem; } @media (max-width: 880px) { .stats-strip.stats-strip-compact .stat-card-sub { display: none; } } .stats-strip.stats-strip-compact .disk-bar { grid-column: 1 / -1; height: 3px; margin-top: 0.2rem; } /* Vertical stack on the right of the stats strip. The two buttons share the strip's vertical rhythm — together they roughly equal one pill's height. Each button picks its own brand-palette tint: Status → lichen (success-soft) — informational read-only surface Settings → clay (primary-soft) — the place you change things They use the soft-tint background by default and fill solid when active, so the operator can see at a glance which detail they're in. */ /* Stats-strip actions v2: dropped the dashed left divider that made * Status/Settings read as a separate section. They're sibling * navigation to the pills now — same row, regular gap, smaller * button size so they don't compete with the pills for visual * weight. (2026-05-05.) */ .stats-strip-actions { display: flex; flex-direction: column; align-items: stretch; justify-content: stretch; gap: 0.3rem; padding-left: 0; border-left: 0; flex: 0 0 auto; min-width: 110px; } .stats-action-btn { font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.32rem 0.7rem; white-space: nowrap; flex: 1 1 0; min-height: 0; display: inline-flex; align-items: center; justify-content: center; } /* Status — lichen tint */ .stats-action-btn#st-detail-status { background: var(--success-soft); border-color: var(--success); color: var(--success); } .stats-action-btn#st-detail-status:hover { background: var(--success); color: #fff; border-color: var(--success); } .stats-action-btn#st-detail-status.active { background: var(--success); color: #fff; border-color: var(--success); } /* Settings — clay tint */ .stats-action-btn#st-detail-settings { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } .stats-action-btn#st-detail-settings:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .stats-action-btn#st-detail-settings.active { background: var(--primary); color: #fff; border-color: var(--primary); } @media (max-width: 900px) { .stats-strip.stats-strip-compact { flex-direction: column; gap: 0.6rem; } .stats-strip-pills { grid-template-columns: repeat(2, 1fr); } .stats-strip-actions { /* Below 900px the strip stacks vertically — Status/Settings revert to a horizontal pair so they don't become a tall narrow column. */ flex-direction: row; border-left: 0; border-top: 1px dashed var(--border); padding-left: 0; padding-top: 0.6rem; justify-content: stretch; min-width: 0; } .stats-action-btn { flex: 1 1 0; } } @media (max-width: 520px) { .stats-strip-pills { grid-template-columns: 1fr 1fr; } } /* Detail-page shell — used by the Status and Settings surfaces when reached via the stats-strip buttons. Header has a back-link, a title, and a single right-aligned CTA (Run diagnostic / Rename station). */ .st-detail-page { display: flex; flex-direction: column; gap: 1rem; } .st-detail-head { display: flex; align-items: center; gap: 0.85rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); } /* Back-to-gallery button on the Status/Settings detail pages. Matches the .page-breadcrumb-back family so the two back-buttons read as one consistent control across the app. */ .btn.st-detail-back { display: inline-flex; align-items: center; gap: 0.4rem; height: 30px; padding: 0 0.75rem; box-sizing: border-box; font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 500; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: color 120ms ease, border-color 120ms ease, background 120ms ease; } .btn.st-detail-back:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); } .btn.st-detail-back svg { stroke-width: 2; width: 12px; height: 12px; flex: 0 0 auto; } .st-detail-title { font-size: 1.1rem; font-weight: 500; color: var(--text); letter-spacing: -0.01em; margin: 0; } .st-detail-actions { margin-left: auto; display: flex; gap: 0.5rem; } @media (max-width: 600px) { .st-detail-head { flex-wrap: wrap; } .st-detail-actions { width: 100%; justify-content: flex-end; } } .mobile-dates-toggle { display: none; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: var(--t-xs); font-weight: 500; padding: 0.4rem 0.75rem; border-radius: var(--r); cursor: pointer; } .mobile-dates-toggle:hover { background: var(--surface-2); border-color: var(--border-hover); } .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.85rem; } .image-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } .image-card:hover { /* F-20: border-color shift only (lift was already neutralized at ~7104). */ border-color: var(--border-hover); } .image-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); } .image-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--surface-2); } .image-card-info { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.4rem 0.55rem; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-dim); } .image-card-size { color: var(--text-faint); } .image-card-delete { position: absolute; top: 0.4rem; right: 0.4rem; display: none; width: 26px; height: 26px; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: #ffffff; border: 0; border-radius: var(--r-sm); cursor: pointer; font-size: var(--t-xs); line-height: 1; padding: 0; transition: background-color 120ms ease; } .image-card-delete:hover { background: var(--danger); } .image-card.has-actions:hover .image-card-delete { display: inline-flex; } .image-card-check { position: absolute; top: 0.4rem; left: 0.4rem; display: none; width: 22px; height: 22px; border: 2px solid #ffffff; border-radius: var(--r-sm); background: rgba(0,0,0,0.35); box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .image-card.selected .image-card-check { background: var(--primary); border-color: var(--primary); } .image-card.selected .image-card-check::after { content: '\2713'; display: block; text-align: center; color: #ffffff; font-size: 0.75rem; font-weight: 700; line-height: 18px; } body.select-mode .image-card-check { display: block; } body.select-mode .image-card-delete { display: none !important; } /* ── Gallery compare-pick mode ── Activated by the toolbar Compare button. Hides delete (avoid mis-click), crosshair cursor, and a numbered "1" badge on the first picked card so the user sees which image is locked in. */ body.compare-pick-mode .image-card { cursor: crosshair; } body.compare-pick-mode .image-card-delete { display: none !important; } .image-card.compare-a { outline: 3px solid var(--primary); outline-offset: -3px; } .image-card.compare-a::before { content: '1'; position: absolute; top: 0.4rem; left: 0.4rem; z-index: 1; background: var(--primary); color: #ffffff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--t-xs); box-shadow: 0 1px 3px rgba(0,0,0,0.3); } /* When active, the toolbar Compare button reads "Cancel compare" — give it a distinct fill so the user feels they're in a mode. */ #cmp-pick-btn.active { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); } /* Gallery responsive: sidebar becomes off-canvas, toggle button appears */ @media (max-width: 900px) { .gallery-layout { grid-template-columns: 1fr; } .gallery-dates { position: fixed; top: 0; left: -280px; bottom: 0; width: 280px; max-height: 100vh; z-index: 30; transition: left 200ms ease; border-radius: 0; } .gallery-dates.open { left: 0; box-shadow: var(--shadow-md); } .sidebar-close { display: inline-flex; align-items: center; justify-content: center; } .mobile-dates-toggle { display: inline-flex; align-items: center; gap: 0.35rem; } } /* ── 26. LIGHTBOX ────────────────────────────────────────────────────────── */ .lightbox { display: none; position: fixed; inset: 0; background: rgba(10,10,10,0.96); /* z-index 1200 sits above modals (1100) and Leaflet controls (~1000), so opening an image takes over the screen even if a map or modal was on top. (Audit 2026-04-30 z-index ladder pass.) */ z-index: 1200; align-items: center; justify-content: center; cursor: zoom-out; } .lightbox.open { display: flex; } .lightbox-stage { position: relative; width: 92vw; height: 88vh; overflow: hidden; touch-action: none; cursor: zoom-in; } .lightbox-stage.zoomed { cursor: grab; } .lightbox-stage.panning { cursor: grabbing; } .lightbox-stage img { position: absolute; top: 0; left: 0; /* The global `img { max-width: 100%; }` reset would otherwise clamp the img's box to the stage width BEFORE our transform scales it down to fit. That double-shrink rendered captures at roughly 1/3 the stage size and made the annotation canvas (which does NOT inherit the img reset) misaligned. Force natural dims so transform-scale is the only thing that resizes the image. */ max-width: none; max-height: none; width: auto; height: auto; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; cursor: inherit; will-change: transform; } .lightbox-stage img.lb-anim { transition: transform 140ms ease; } .lb-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; } .lb-canvas.editing { pointer-events: auto; cursor: crosshair; } /* ── Detections overlay (debug "what is the model seeing") ────────────── Sits between the image and the markup canvas in the lightbox stage. Its width/height are set to image naturalWidth/Height in JS, and the container mirrors the same CSS transform as the img — so boxes positioned by percentage inside stay aligned through pan + zoom. */ .lb-detections { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; z-index: 2; /* above img, below markup canvas */ } /* Vision AI bottom dock — sibling of .lb-detections so it does NOT inherit the image's CSS transform. Pinned to the bottom of the lightbox stage in normal coordinates: always full-size, always readable + clickable regardless of how the image is zoomed. */ .lb-det-dock { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: rgba(255,255,255,0.96); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 4px 14px rgba(0,0,0,0.22); pointer-events: auto; max-width: calc(100% - 32px); flex-wrap: wrap; } .lb-det-dock-btn { font-family: var(--font-sans); font-size: var(--text-mono-md); font-weight: 500; padding: 6px 12px; border: 1px solid var(--primary); background: var(--primary); color: #fff; border-radius: var(--r-sm); cursor: pointer; transition: background 100ms ease, border-color 100ms ease; } .lb-det-dock-btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .lb-det-dock-btn.active { background: var(--warn); border-color: var(--warn); color: #fff; } .lb-det-dock-stats { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.04em; color: var(--text-dim); font-variant-numeric: tabular-nums; } .lb-det-dock-stats .lb-det-stat-bad { color: var(--danger); } .lb-det-dock-stats .lb-det-stat-rel { color: var(--warn); } .lb-det-dock-stats .lb-det-stat-add { color: var(--success); } .lb-det-dock-toast { /* Inline with the dock children. Hidden until populated. */ font-family: var(--font-sans); font-size: var(--text-mono-md); color: var(--text); background: var(--surface-2); border-radius: var(--r-sm); padding: 4px 8px; display: none; align-items: center; gap: 6px; } .lb-det-dock-toast.open { display: flex; } .lb-det-dock-toast a { color: var(--primary); text-decoration: none; font-weight: 500; } .lb-det-dock-toast a:hover { text-decoration: underline; } .lb-det-err { color: var(--danger); border-color: var(--danger); } .lb-det-box { position: absolute; border: 2px solid var(--detbox, #888); background: transparent; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.3); } .lb-det-label { position: absolute; top: 0; left: 0; transform: translateY(-100%); /* sit above the box */ font-family: var(--font-mono); font-size: 13px; /* bumped 2026-05-04 (client feedback) */ font-weight: 500; letter-spacing: 0.02em; color: #fff; background: var(--detbox, #888); padding: 2px 7px; white-space: nowrap; pointer-events: none; } /* Detection-box colours map to the Site Notes risk palette so the lightbox overlays stay coherent with the rest of the platform UI. Person + Other use a desaturated graphite so they don't compete with the warn/success/danger semantic tints — the old #2c7be5 "SaaS blue" was the only non-palette hue in the system. */ .lb-det-person { --detbox: var(--text-dim); } .lb-det-vehicle { --detbox: var(--warn); } .lb-det-equipment { --detbox: var(--warn); } .lb-det-ppe-compliance{ --detbox: var(--success); } .lb-det-ppe-violation { --detbox: var(--danger); } .lb-det-other { --detbox: var(--text-faint); } /* Box becomes interactive when feedback is enabled. Hover widens the stroke + shows a "click me" cursor; the inner area stays click-through so you can still drag the image underneath if you click outside the stroke (we set pointer-events on the BORDER region only via padding). */ .lb-det-box { cursor: pointer; pointer-events: auto; transition: box-shadow 100ms ease; } .lb-det-box:hover { box-shadow: 0 0 0 2px var(--detbox, #888), 0 0 0 4px rgba(0,0,0,0.4); z-index: 1; } /* Visual states for boxes that already have a verdict */ .lb-det-box.lb-det-fb-confirm { border-style: solid; opacity: 0.55; } .lb-det-box.lb-det-fb-reject { border-style: dashed; opacity: 0.4; } .lb-det-box.lb-det-fb-relabel { border-style: dotted; opacity: 0.55; } .lb-det-verdict-badge { position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; border-radius: 50%; background: var(--detbox, #888); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.4); pointer-events: none; } .lb-det-tally { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.04em; color: var(--text-dim); margin-left: 4px; } /* ── Verdict popup (shows on box click) ──────────────────────────────── */ .lb-det-popup { position: absolute; z-index: 10; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 6px 18px rgba(0,0,0,0.18); padding: 0.65rem 0.7rem 0.7rem; width: 280px; font-family: var(--font-sans); font-size: var(--text-mono-md); pointer-events: auto; } .lb-det-popup-head { font-weight: 500; font-size: 13px; margin-bottom: 0.4rem; padding-right: 1.2rem; /* room for the close × */ } .lb-det-popup-current { font-size: var(--text-mono-sm); color: var(--text-dim); background: var(--surface-2); border-radius: var(--r-sm); padding: 4px 6px; margin-bottom: 0.5rem; } .lb-det-popup-current a { color: var(--primary); text-decoration: none; } .lb-det-popup-current a:hover { text-decoration: underline; } .lb-det-popup-actions { display: grid; gap: 0.3rem; } .lb-det-act { font-family: var(--font-sans); font-size: var(--text-mono-md); padding: 5px 8px; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-sm); cursor: pointer; transition: border-color 100ms ease, background 100ms ease; } .lb-det-act:hover { background: var(--surface-2); } .lb-det-act-confirm:hover { border-color: var(--success); background: var(--success-soft); } .lb-det-act-reject:hover { border-color: var(--danger); background: var(--danger-soft); } .lb-det-act-relabel:hover { border-color: var(--warn); background: var(--warn-soft); } .lb-det-popup-close { position: absolute; top: 4px; right: 6px; background: transparent; border: none; font-size: 18px; line-height: 1; color: var(--text-faint); cursor: pointer; padding: 0 4px; } .lb-det-popup-close:hover { color: var(--text); } /* Relabel sub-panel — opens under the action buttons */ .lb-det-popup-relabel { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); } .lb-det-popup-relabel input[type="text"] { width: 100%; font-family: var(--font-sans); font-size: var(--text-mono-md); padding: 4px 6px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-sm); margin-bottom: 0.3rem; } .lb-det-relabel-list { max-height: 160px; overflow-y: auto; display: grid; gap: 1px; } .lb-det-relabel-opt { font-family: var(--font-mono); font-size: var(--text-mono-sm); text-align: left; padding: 4px 6px; border: none; background: var(--surface); cursor: pointer; border-radius: var(--r-sm); } .lb-det-relabel-opt:hover { background: var(--primary-soft); color: var(--primary); } .lb-det-relabel-loading, .lb-det-relabel-empty { font-size: var(--text-mono-sm); color: var(--text-faint); padding: 4px 6px; } /* Active-state for the Boxes sidebar toggle */ .lb-side-btn.active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); } /* "+ add missing" button in the status bar */ .lb-det-draw-btn { margin-left: 8px; font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); border-radius: var(--r-sm); cursor: pointer; pointer-events: auto; transition: border-color 100ms ease, color 100ms ease, background 100ms ease; } .lb-det-draw-btn:hover { border-color: var(--primary); color: var(--primary); } .lb-det-draw-btn.active { border-color: var(--warn); color: #fff; background: var(--warn); } /* Draw mode: layer captures pointer events + crosshair cursor */ .lb-detections.lb-det-drawing { pointer-events: auto; cursor: crosshair; } .lb-detections.lb-det-drawing .lb-det-box { /* boxes are visible but not clickable while drawing — we want the drag-to-create gesture to land on the layer, not on a box */ pointer-events: none; } /* In-progress draw preview rectangle */ .lb-det-draw-preview { position: absolute; border: 2px dashed var(--warn); background: rgba(212, 148, 63, 0.12); pointer-events: none; z-index: 5; } /* User-added "missing" boxes — distinct dashed style + USER tag so they're obviously different from model output boxes */ .lb-det-box.lb-det-missing { border-style: dashed; border-width: 2px; } .lb-det-user-tag { display: inline-block; margin-left: 4px; padding: 0 4px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; background: rgba(255,255,255,0.85); color: var(--text); border-radius: var(--r-xs); /* FND-C05: was 2px off-scale → --r-xs (3px) */ } /* ── 26c. ANNOTATION EDITOR ─────────────────────────────────────────────── */ /* Persistent left sidebar (Compare / Mark up / Analyze) — replaces the old ⋯ overflow menu. Pinned to top-left of the lightbox so every lightbox action is one click away. Industrial styling matches the markup toolbar. */ .lb-sidebar { position: fixed; top: 1.5rem; left: 1.5rem; z-index: 102; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: rgba(15, 17, 22, 0.94); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-sm); /* FND-C05: was 6px off-scale → --r-sm (5px) */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 28px rgba(0,0,0,0.45); font-family: var(--font-mono); } .lb-side-btn { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: transparent; /* Border bumped from rgba(255,255,255,0.08) (1.6:1 against the lightbox black bg, fails WCAG 1.4.11 ≥3:1 non-text contrast) to 0.22 (clears 3:1). Weight dropped from 700 to 500 to match the mono-uppercase 500 register used by .badge / .live-pill etc. */ border: 1px solid rgba(255,255,255,0.22); border-radius: var(--r-sm); /* FND-C05: collapse 4px legacy → 5px Stratum --r-sm */ color: rgba(255,255,255,0.78); cursor: pointer; font-family: inherit; font-size: var(--text-mono-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; transition: background-color 80ms, border-color 80ms, color 80ms; position: relative; } .lb-side-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); color: #fff; } .lb-side-btn:active { transform: translateY(1px); } .lb-side-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(255,255,255,0.05); border-radius: var(--r-sm); /* FND-C05: collapse 4px legacy → 5px Stratum --r-sm */ border: 1px solid rgba(255,255,255,0.06); } .lb-side-icon svg { width: 16px; height: 16px; } .lb-side-label { font-size: var(--text-mono-sm); line-height: 1; } .lb-side-ai .lb-side-icon { background: linear-gradient(135deg, var(--primary), var(--warn)); border-color: rgba(255,255,255,0.18); } .lb-side-ai .ai-badge { opacity: 1; margin-left: 2px; font-size: var(--text-mono-xs); } @media (max-width: 500px) { .lb-sidebar { top: 0.75rem; left: 0.75rem; gap: 2px; padding: 4px; } /* Lock min-height to 44px on the narrow-viewport variant to clear WCAG 2.5.5 touch-target minimum. The inner icon stays at 22px for visual breathing room. */ .lb-side-btn { width: 52px; min-height: 44px; padding: 6px 3px; font-size: var(--text-mono-xs); } .lb-side-icon { width: 22px; height: 22px; } .lb-side-icon svg { width: 14px; height: 14px; } } .lightbox.editing-annotation .lightbox-prev, .lightbox.editing-annotation .lightbox-next, .lightbox.editing-annotation .lb-sidebar, .lightbox.editing-annotation .lightbox-close, .lightbox.editing-annotation .lightbox-info { display: none; } /* AI Analyze panel (Track B) — floats inside the lightbox over the bottom-right corner of the stage; doesn't fight pan/zoom. */ .lightbox-analyze-panel { display: none; position: fixed; right: 1.25rem; bottom: 4.25rem; z-index: 104; width: min(360px, calc(100vw - 2rem)); color: #fff; } .ana-card { background: rgba(0,0,0,0.78); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 0.85rem; box-shadow: 0 8px 24px rgba(0,0,0,0.45); } .ana-loading, .ana-error { background: rgba(0,0,0,0.78); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 0.75rem 1rem; font-size: var(--t-sm); color: #fff; } .ana-error { border-color: var(--danger); color: #ffd6d6; } .ana-header { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-sm); margin-bottom: 0.6rem; } .ana-cached { font-size: var(--text-mono-sm); font-family: var(--font-mono); background: rgba(255,255,255,0.12); padding: 0.1rem 0.4rem; border-radius: 999px; color: rgba(255,255,255,0.7); } .ana-close { margin-left: auto; background: none; border: 0; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0; } .ana-stats { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; } .ana-stat { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.5rem 0.6rem; text-align: center; display: flex; flex-direction: column; gap: 0.15rem; } .ana-num { font-size: 1.4rem; font-weight: 700; line-height: 1; } .ana-num.ana-good { color: var(--success); } .ana-num.ana-warn { color: var(--warn); } .ana-num.ana-bad { color: var(--danger); } .ana-num.ana-dim { color: rgba(255,255,255,0.55); font-size: var(--t-sm); } .ana-label { font-size: var(--text-mono-sm); text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.55); } .ana-summary { font-size: var(--t-sm); line-height: 1.45; margin-bottom: 0.6rem; } .ana-concerns { background: rgba(178,90,77,0.18); /* translucent --danger; sits on dark .ana-card */ border-left: 3px solid var(--danger); border-radius: var(--r-sm); /* FND-C05: collapse 4px legacy → 5px Stratum --r-sm */ padding: 0.4rem 0.6rem; margin-bottom: 0.6rem; font-size: var(--t-xs); } .ana-concerns strong { display: block; margin-bottom: 0.25rem; } .ana-concerns ul { margin: 0; padding-left: 1.1rem; } .ana-actions { display: flex; justify-content: flex-end; } @media (max-width: 600px) { .lightbox-analyze-panel { right: 0.5rem; left: 0.5rem; bottom: 3.5rem; width: auto; } } /* Industrial / control-panel toolbar — sharp corners, mono labels, sectioned. */ .ann-toolbar { position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 105; display: none; flex-direction: column; background: rgba(15, 17, 22, 0.94); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-sm); /* FND-C05: was 6px off-scale → --r-sm (5px) */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-width: calc(100vw - 2rem); font-family: var(--font-mono); box-shadow: 0 8px 28px rgba(0,0,0,0.45); overflow: hidden; } .ann-toolbar.open { display: inline-flex; } .ann-status-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.75rem; font-size: var(--text-mono-sm); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); border-bottom: 1px solid rgba(255,255,255,0.08); white-space: nowrap; gap: 0.6rem; min-width: 0; } .ann-status-bar > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ann-status-bar .ann-status-title { color: rgba(255,255,255,0.92); font-weight: 700; letter-spacing: 0.12em; } .ann-status-bar .ann-status-sep { color: rgba(255,255,255,0.3); } .ann-status-bar .ann-status-dirty { display: none; color: var(--warn); font-weight: 700; } .ann-toolbar.dirty .ann-status-bar .ann-status-dirty { display: inline; } .ann-tools-row { display: flex; align-items: stretch; flex-wrap: wrap; } .ann-tool-group { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.7rem; border-right: 1px solid rgba(255,255,255,0.08); } .ann-tool-group:last-child { border-right: 0; } .ann-tool-group-label { font-size: var(--text-mono-sm); color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; margin-right: 0.15rem; font-weight: 600; } .ann-tool-btn { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.78); padding: 0.35rem 0.65rem; border-radius: var(--r-sm); /* FND-C05: collapse 4px legacy → 5px Stratum --r-sm */ cursor: pointer; font-size: var(--text-mono-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-family: inherit; white-space: nowrap; transition: background-color 80ms, border-color 80ms, color 80ms; } .ann-tool-btn:hover:not(:disabled) { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); color: #fff; } .ann-tool-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } /* Internal-mark toggle: clay when active so "Internal" reads as restricted, distinct from the citron/primary active state of the drawing tools. */ .ann-vis-toggle.active { background: #c46a45; border-color: #c46a45; color: #fff; } .ann-vis-toggle:disabled { opacity: 0.45; cursor: default; } .lightbox-ann-status .ann-internal-state { color: #f0b89c; } /* Write-first note composer: type a comment, then click the image to place it. */ .ann-note-input { min-width: 240px; padding: 5px 9px; font: inherit; font-size: 13px; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; } .ann-note-input::placeholder { color: rgba(255, 255, 255, 0.5); } .ann-note-input:focus { outline: none; border-color: var(--annotation-hivis, #d4943f); } .ann-swatches { display: inline-flex; gap: 4px; align-items: center; } .ann-swatch { width: 18px; height: 18px; border-radius: 3px; cursor: pointer; border: 1.5px solid rgba(0,0,0,0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.06); padding: 0; } .ann-swatch.active { outline: 2px solid #fff; outline-offset: 1px; } .ann-sizes { display: inline-flex; gap: 0.25rem; align-items: center; } .ann-size { min-width: 28px; height: 26px; border-radius: var(--r-sm); /* FND-C05: collapse 4px legacy → 5px Stratum --r-sm */ background: transparent; border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-mono-sm); font-weight: 700; font-family: inherit; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 0.35rem; } .ann-size:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.24); color: #fff; } .ann-size.active { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.32); color: #fff; } .ann-actions-group { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.7rem; margin-left: auto; border-left: 1px solid rgba(255,255,255,0.14); } .ann-save-btn { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; padding: 0.4rem 1rem !important; letter-spacing: 0.1em; } .ann-save-btn:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; } /* Dirty-state ring is clay (--primary, rgb(196,106,69)), not the original indigo (#6366f1) that survived the Section-11 palette swap. Audit M5 (2026-04-30). Subdued glow — the saturated indigo halo was the loudest element on the page; this matches the rest of the system's dirty-state convention. */ .ann-toolbar.dirty .ann-save-btn { box-shadow: 0 0 0 2px rgba(196,106,69,0.45), 0 0 14px rgba(196,106,69,0.22); } .ann-cancel-btn { color: rgba(255,255,255,0.5) !important; } .ann-cancel-btn:hover { color: #fff !important; } .ann-share-btn { opacity: 0.6; } .ann-share-btn:hover { opacity: 1; } @media (max-width: 700px) { .ann-toolbar { top: 0.75rem; max-width: calc(100vw - 1rem); } .ann-tool-group { padding: 0.35rem 0.5rem; } .ann-tool-group-label { display: none; } .ann-tool-btn { padding: 0.3rem 0.55rem; font-size: var(--text-mono-sm); } .ann-status-bar { padding: 0.35rem 0.6rem; font-size: var(--text-mono-sm); } } /* ── 26d2. MARKUPS TAB (saved annotated images per station) ─────────────── */ .markups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.85rem; } .markup-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: border-color 120ms ease, box-shadow 120ms ease; } .markup-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow); } .markup-thumb { position: relative; aspect-ratio: 4/3; background: var(--surface-2); cursor: pointer; overflow: hidden; } .markup-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .markup-marks { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(15,17,22,0.85); color: #fff; font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.5rem; border-radius: 3px; border: 1px solid rgba(255,255,255,0.15); } .markup-meta { padding: 0.6rem 0.75rem 0.4rem; flex: 1 1 auto; min-width: 0; } .markup-when { font-size: var(--t-xs); color: var(--text-dim); margin-bottom: 0.2rem; word-break: break-all; line-height: 1.35; } .markup-by { line-height: 1.35; } .markup-actions { display: flex; gap: 0.4rem; padding: 0.4rem 0.75rem 0.75rem; } .markup-actions .btn { flex: 1; justify-content: center; } /* ── 26d. PROGRESS-PHOTO SCHEDULE ROWS ──────────────────────────────────── */ .progress-photo-row { display: flex; gap: 1rem; align-items: center; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2, var(--surface)); margin-bottom: 0.6rem; } .progress-photo-row.disabled { opacity: 0.6; } .progress-photo-row .pp-row-main { flex: 1 1 auto; min-width: 0; } .progress-photo-row .pp-row-title { font-size: var(--t-sm); margin-bottom: 0.15rem; } .progress-photo-row .pp-row-meta { line-height: 1.45; word-break: break-word; } .progress-photo-row .pp-row-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; flex-shrink: 0; } @media (max-width: 600px) { .progress-photo-row { flex-direction: column; align-items: stretch; } .progress-photo-row .pp-row-actions { justify-content: flex-start; } } .lightbox-close, .lightbox-prev, .lightbox-next { position: fixed; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: #ffffff; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 0; z-index: 102; transition: background-color 120ms ease, transform 120ms ease, border-color 120ms ease; user-select: none; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--primary); border-color: var(--primary); transform: scale(1.05); } .lightbox-close { top: 1.5rem; right: 1.5rem; font-size: 1.2rem; } .lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); } .lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); } .lightbox-prev:hover { transform: translateY(-50%) scale(1.05); } .lightbox-next:hover { transform: translateY(-50%) scale(1.05); } .lightbox-ann-status { display: none; position: fixed; bottom: 4rem; left: 50%; transform: translateX(-50%); z-index: 101; font-size: var(--t-xs); color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 0.45rem 0.85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.1); max-width: calc(100vw - 2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lightbox-ann-status .ann-share-state { color: #ffd; } .lightbox-ann-status a { color: var(--primary); text-decoration: underline; margin-left: 0.25rem; } .lightbox-ann-status a:hover { filter: brightness(1.15); } .lightbox-info { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 101; font-family: var(--font-mono); font-size: var(--t-xs); color: #ffffff; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); max-width: calc(100vw - 2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 500px) { .lightbox-close { top: 0.75rem; right: 0.75rem; } .lightbox-prev { left: 0.5rem; } .lightbox-next { right: 0.5rem; } } /* ── 26b. COMPARE OVERLAY ────────────────────────────────────────────────── */ .compare-overlay { display: none; position: fixed; inset: 0; background: rgba(10,10,10,0.97); z-index: 110; align-items: center; justify-content: center; } .compare-overlay.open { display: flex; } .compare-stage { position: relative; width: 92vw; height: 84vh; overflow: hidden; user-select: none; touch-action: none; } .cmp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; } .cmp-img-b { z-index: 1; } .cmp-img-a { z-index: 2; /* clip from the right edge so left side shows image A */ clip-path: inset(0 calc(100% - var(--cmp-pos, 50%)) 0 0); } .cmp-divider { position: absolute; top: 0; bottom: 0; left: var(--cmp-pos, 50%); width: 2px; background: rgba(255,255,255,0.85); transform: translateX(-1px); z-index: 3; pointer-events: none; } .cmp-handle { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; cursor: ew-resize; pointer-events: auto; transition: transform 120ms ease, background-color 120ms ease; } .cmp-handle:hover { background: var(--primary); transform: scale(1.05); } .cmp-handle svg { width: 22px; height: 22px; } .cmp-close { position: fixed; top: 1.5rem; right: 1.5rem; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: #ffffff; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; cursor: pointer; z-index: 112; transition: background-color 120ms ease, transform 120ms ease, border-color 120ms ease; } .cmp-close:hover { background: var(--primary); border-color: var(--primary); transform: scale(1.05); } .cmp-close svg { width: 22px; height: 22px; } .cmp-info { position: fixed; top: 1.5rem; z-index: 111; font-family: var(--font-mono); font-size: var(--t-xs); color: #ffffff; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.1); max-width: 38vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmp-info-a { left: calc(1.5rem + 56px); } .cmp-info-b { right: calc(1.5rem + 56px); } /* No A/B prefix — timestamps speak for themselves; left/right is implicit. */ .cmp-info-a::before { content: ''; } .cmp-info-b::before { content: ''; } .cmp-actions { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 111; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; background: rgba(0,0,0,0.55); padding: 0.5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: calc(100vw - 2rem); } .cmp-actions .btn { white-space: nowrap; } .cmp-mode-toggle { display: inline-flex; background: rgba(255,255,255,0.08); border-radius: 999px; padding: 2px; margin-left: 0.25rem; } .cmp-mode-btn { background: transparent; border: 0; color: rgba(255,255,255,0.7); padding: 0.3rem 0.75rem; font-size: var(--t-xs); font-weight: 600; border-radius: 999px; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .cmp-mode-btn.active { background: var(--primary); color: #ffffff; } .cmp-mode-btn:not(.active):hover { color: #ffffff; } /* Diff mode: show only the change-detection canvas. */ .cmp-img-diff { display: none; z-index: 2; background: transparent; } .compare-overlay.mode-diff .cmp-img-a, .compare-overlay.mode-diff .cmp-img-b, .compare-overlay.mode-diff .cmp-divider { display: none; } .compare-overlay.mode-diff .cmp-img-diff { display: block; } .cmp-diff-status { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 4; display: none; padding: 0.4rem 0.85rem; background: rgba(0,0,0,0.65); color: #fff; border-radius: 999px; font-size: var(--t-xs); font-family: var(--font-mono); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(8px); } .cmp-diff-status.show { display: block; } @media (max-width: 700px) { .cmp-info { max-width: calc(50vw - 4rem); font-size: var(--text-mono-sm); padding: 0.35rem 0.6rem; } .cmp-info-a { left: calc(0.75rem + 52px); top: 0.75rem; } .cmp-info-b { right: calc(0.75rem + 52px); top: 0.75rem; } .cmp-close { top: 0.75rem; right: 0.75rem; } .compare-stage { width: 100vw; height: 78vh; } } /* Compare picker (date strip + thumbnail grid) */ .cmp-picker-bg { display: none; position: fixed; inset: 0; background: rgba(10,10,10,0.85); z-index: 120; align-items: center; justify-content: center; } .cmp-picker-bg.open { display: flex; } .cmp-picker { background: var(--surface); color: var(--text); border-radius: var(--r); border: 1px solid var(--border); width: min(720px, 92vw); max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; } .cmp-picker-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); font-weight: 600; } .cmp-picker-close { background: none; border: 0; cursor: pointer; color: var(--text-dim); padding: 0.25rem; line-height: 0; border-radius: var(--r-sm); /* FND-C05: was 6px off-scale → --r-sm (5px) */ } .cmp-picker-close:hover { background: var(--surface-hover); color: var(--text); } .cmp-picker-close svg { width: 18px; height: 18px; } .cmp-picker-dates { display: flex; gap: 0.4rem; padding: 0.6rem 1rem; overflow-x: auto; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .cmp-date-pill { flex: 0 0 auto; padding: 0.35rem 0.7rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--t-xs); font-family: var(--font-mono); cursor: pointer; white-space: nowrap; color: var(--text-dim); transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .cmp-date-pill:hover { background: var(--surface-hover); color: var(--text); } .cmp-date-pill.active { background: var(--primary); border-color: var(--primary); color: #ffffff; } .cmp-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.4rem; padding: 0.75rem 1rem 1rem; overflow-y: auto; } .cmp-picker-grid .empty { grid-column: 1 / -1; padding: 1.5rem; text-align: center; color: var(--text-dim); font-size: var(--t-sm); } .cmp-thumb { position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--surface-2); } .cmp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .cmp-thumb:hover { border-color: var(--primary); } .cmp-thumb-time { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: #ffffff; font-family: var(--font-mono); font-size: var(--text-mono-sm); padding: 0.6rem 0.4rem 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── 27. STATUS TAB (station detail) ────────────────────────────────────── */ .status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .status-metrics { display: flex; flex-direction: column; } .status-metric { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; font-size: var(--t-sm); border-bottom: 1px solid var(--border); } .status-metric:last-child { border-bottom: 0; } .status-metric-label { color: var(--text-dim); } .status-metric-value { color: var(--text); font-weight: 500; font-family: var(--font-mono); font-size: calc(var(--t-sm) - 0.5px); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .status-metric-value.success { color: var(--success); } .status-metric-value.danger { color: var(--danger); } .status-metric-value.warn { color: var(--warn); } /* Command button row inside status cards */ .cmd-btn-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } /* Command-history rows (inside a status card) */ .cmd-history-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; } .cmd-history-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.4rem 0; font-family: var(--font-mono); font-size: var(--t-xs); border-bottom: 1px solid var(--border); } .cmd-history-row:last-child { border-bottom: 0; } .cmd-history-row .cmd-type { color: var(--text); font-weight: 500; } .cmd-history-row .cmd-status { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-dim); } .cmd-history-row .cmd-status.completed { color: var(--success); } .cmd-history-row .cmd-status.failed { color: var(--danger); } .cmd-history-row .cmd-status.delivered { color: var(--warn); } .cmd-history-row .cmd-cancel { color: var(--danger); text-decoration: none; margin-left: 0.35rem; font-weight: 500; } .cmd-history-row .cmd-cancel:hover { text-decoration: underline; } /* Station token display inside status */ .station-token { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.55rem 0.7rem; word-break: break-all; user-select: all; } /* ── 28. DIAGNOSTIC REPORT MODAL ─────────────────────────────────────────── */ .diag-summary { display: flex; gap: 1.25rem; padding: 0.9rem 1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 1rem; } .diag-summary-item { display: flex; flex-direction: column; gap: 0.2rem; } .diag-summary-n { font-size: var(--t-2xl); font-weight: 700; color: var(--text); line-height: 1.1; font-family: var(--font-mono); } .diag-summary-n.success { color: var(--success); } .diag-summary-n.warn { color: var(--warn); } .diag-summary-n.danger { color: var(--danger); } .diag-summary-l { font-size: var(--t-xs); color: var(--text-dim); font-weight: 500; } .diag-meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-faint); margin-bottom: 1rem; } .diag-section { margin-bottom: 1rem; } .diag-section h4 { font-size: var(--t-xs); font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .diag-check { background: var(--surface-2); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r-sm); padding: 0.6rem 0.8rem; margin-bottom: 0.45rem; } .diag-check.ok { border-left-color: var(--success); } .diag-check.warning { border-left-color: var(--warn); } .diag-check.error { border-left-color: var(--danger); } .diag-check.skipped { border-left-color: var(--text-faint); } .diag-check-hdr { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; } .diag-check-label { font-size: var(--t-sm); font-weight: 500; color: var(--text); } .diag-check-meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-faint); } .diag-check-detail { font-size: var(--t-sm); color: var(--text-dim); line-height: 1.45; } .diag-check details { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-dim); margin-top: 0.4rem; } .diag-check details summary { cursor: pointer; padding: 0.2rem 0; color: var(--text-dim); } .diag-check details pre { background: var(--bg); padding: 0.5rem; border-radius: var(--r-sm); border: 1px solid var(--border); overflow: auto; max-height: 240px; margin-top: 0.3rem; white-space: pre-wrap; word-break: break-all; } .diag-empty { color: var(--text-dim); font-size: var(--t-sm); padding: 1rem; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); } /* ── 29. SETTINGS TAB (station detail) ──────────────────────────────────── */ .settings-sections { display: flex; flex-direction: column; gap: 1.25rem; } /* Form grid — multiple short fields in a row, auto-wrapping. */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem; } /* Toggle switch — relabeled primitive. The legacy .toggle.on selector migrates to :checked via an paired with a .toggle-slider element. */ .toggle { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; user-select: none; } .toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .toggle-slider { position: relative; display: inline-block; width: 36px; height: 20px; background: var(--border); border-radius: 999px; transition: background-color 180ms ease; flex-shrink: 0; } .toggle-slider::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--surface); border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform 180ms ease; } .toggle input:checked + .toggle-slider { background: var(--primary); } .toggle input:checked + .toggle-slider::before { transform: translateX(16px); } .toggle input:focus-visible + .toggle-slider { outline: 2px solid var(--primary); outline-offset: 2px; } .toggle-label { font-size: var(--t-sm); color: var(--text); } /* Danger-variant card — red border + red header color, used for "Danger zone" at the bottom of station settings. */ .card.card-danger { border-color: var(--danger); } .card.card-danger .card-header { border-bottom-color: var(--danger-soft); } .card.card-danger .card-header h2, .card.card-danger .card-header h3 { color: var(--danger); } /* Schedules list (inside Schedules card) */ .schedule-list { display: flex; flex-direction: column; gap: 0.6rem; } .schedule-row { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 0.75rem 0.9rem; } .schedule-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; } .schedule-header .sched-name-input { flex: 1; background: transparent; border: 0; color: var(--text); font-size: var(--t-sm); font-weight: 600; padding: 0.2rem 0; outline: 0; min-width: 0; } .schedule-header .sched-name-input:focus, .schedule-header .sched-name-input:focus-visible { /* WCAG 2.4.7 — was just a 1px border-bottom (too subtle); replace with a 2-tone box-shadow ring matching the .input focus pattern. */ outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--primary); border-radius: var(--r-sm); } .schedule-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.7rem; } /* Per-schedule camera override (added 2026-05-04). Collapsed by * default; opens to a small grid of optional fields. Blank fields * inherit the global camera block — savePiConfig only sends filled * keys, so the Pi only sees an override when the operator typed * something. */ .schedule-camera-override { margin-top: 0.7rem; border-top: 1px dashed var(--border); padding-top: 0.55rem; } .schedule-camera-override > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); padding: 0.25rem 0; user-select: none; } .schedule-camera-override > summary::-webkit-details-marker { display: none; } .schedule-camera-override > summary::before { content: "▸"; display: inline-block; width: 10px; color: var(--text-faint); transition: transform 160ms ease; } .schedule-camera-override[open] > summary::before { transform: rotate(90deg); } .schedule-camera-summary-label { flex: 1; } .schedule-camera-summary-hint { color: var(--text-faint); font-weight: 400; letter-spacing: 0.1em; } .schedule-camera-fields { margin-top: 0.55rem; padding: 0.6rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); } /* Auto-managed schedule (added 2026-05-05). Renders read-only with a * notice. The server expands this into multiple time-of-day windows * at update_config push time using lat/lng + sun position. */ .schedule-row-auto { border-left: 3px solid var(--success); } .schedule-row-auto .sched-name-input { font-weight: 600; color: var(--text); } .schedule-auto-notice { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.65rem 0.8rem; margin-top: 0.55rem; background: var(--success-soft); color: #3f5630; border-radius: var(--r-sm); font-size: var(--text-mono-md); line-height: 1.45; } .schedule-auto-notice strong { color: #3f5630; } [data-theme="dark"] .schedule-auto-notice { background: rgba(135, 160, 107, 0.16); color: #cce0b4; } [data-theme="dark"] .schedule-auto-notice strong { color: #e5f0d4; } /* Settings shell (2026-05-05 redesign) — left rail nav + main column. * Operator complaint: 6 cards stacked all-visible was overwhelming. * Rail gives jump-anywhere navigation; IntersectionObserver flips * the active item as the operator scrolls. Below 880px the rail * collapses above the content (defined later in the section, search * "settings-shell mobile"). */ .settings-shell { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; align-items: start; } .settings-rail { position: sticky; top: 5rem; align-self: start; border-right: 1px dashed var(--border); padding: 0.5rem 0.5rem 0.5rem 0; display: flex; flex-direction: column; gap: 0.1rem; } .settings-rail-label-group { font-family: var(--font-mono); font-size: var(--text-mono-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); padding: 0.55rem 0.85rem 0.45rem; } .settings-rail-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.85rem; font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); border: 0; border-left: 3px solid transparent; background: transparent; text-decoration: none; cursor: pointer; text-align: left; width: 100%; font-weight: 500; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .settings-rail-item:hover { background: var(--surface-2); color: var(--text); } .settings-rail-item.active { color: var(--primary); border-left-color: var(--primary); background: var(--primary-soft); } .settings-rail-item.settings-rail-danger { color: var(--danger); } .settings-rail-item.settings-rail-danger.active { color: var(--danger); border-left-color: var(--danger); background: var(--danger-soft); } .settings-rail-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; opacity: 0.55; } .settings-main { min-width: 0; /* Bottom padding so the sticky save bar doesn't cover the last * card's bottom edge when the operator scrolls to it. */ padding-bottom: 5rem; } /* Settings section toggle (2026-05-05): only the section that * matches the active rail item is rendered. Default state via JS * showSettingsSection('sec-location') on first paint. Using * display:none rather than a class-gated visibility/opacity dance * because the contents are heavy (map / camera fields) and we want * them to truly drop out of the layout. */ .settings-section { display: none; } .settings-section.is-active { display: block; } /* Live video feed section layout (2026-05-05 redesign). * Operator feedback: the previous form-grid mixed checkbox-inline * fields with label-on-top fields, producing uneven heights and * misaligned baselines. New layout: * - Hero toggle row at the top (the "is this on?" answer) * - 3-up form grid with consistent label-on-top + helper text * - Two sub-rows (proxy token + tailnet pin) with same shape: * mono-uppercase label ┃ value pill ┃ action button */ .ls-hero-toggle { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.85rem; padding: 0.85rem 1rem; background: var(--surface-2); border-left: 3px solid var(--border-hover); border-radius: var(--r); margin-bottom: 1.25rem; transition: border-left-color 160ms ease, background-color 160ms ease; } /* Border + tint follow the toggle state. CSS-only because the * checkbox is a sibling of the .ls-hero-toggle parent — we use * :has() (broad browser support post-2024) so the row turns lichen * on enabled, neutral on disabled. */ .ls-hero-toggle:has(input:checked) { border-left-color: var(--success); background: linear-gradient(90deg, var(--success-soft), var(--surface-2) 60%); } .ls-hero-toggle .toggle { padding-top: 0.15rem; } .ls-hero-toggle-text strong { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--text); margin-bottom: 0.25rem; } .ls-hero-toggle-text p { margin: 0; line-height: 1.5; } /* Three-column config grid. Forces uniform field heights via * align-items:start on the parent and a min-height on each field * so the helper text doesn't pull rows out of alignment. */ .ls-config-grid { align-items: start; margin-bottom: 1.25rem; } .ls-config-grid .form-field { display: flex; flex-direction: column; gap: 0.4rem; } .ls-config-grid .form-field label:first-child { /* Force a consistent label height so the controls beneath line * up across all three columns even when the label is one line vs * two. */ min-height: 1.25rem; display: flex; align-items: center; margin-bottom: 0; } /* Suffix-input pattern (e.g. "200 MB"). Lets the unit ride along * inside the input's visual frame so it doesn't fight for label * real estate. */ .ls-suffix-input { position: relative; display: flex; align-items: stretch; } .ls-suffix-input input { flex: 1; padding-right: 2.5rem; } .ls-suffix { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); pointer-events: none; } /* Inline toggle inside a form field — keeps the label-on-top * rhythm consistent with the select / number-input siblings. */ .ls-inline-toggle { align-self: flex-start; padding: 0.35rem 0; } /* Per-field helper text. Smaller + faint so it doesn't compete * with the actual control. */ .ls-field-hint { margin: 0; font-size: var(--text-mono-md); line-height: 1.45; color: var(--text-faint); } /* Sub-section blocks for proxy token + tailnet pin. Same shape * for both: dashed top rule, label ┃ value ┃ button row, helper * text below. */ .ls-sub-section { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px dashed var(--border); } .ls-sub-section + .ls-sub-section { margin-top: 0.85rem; } .ls-sub-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; } .ls-sub-label { font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; } .ls-sub-value { font-family: var(--font-mono); font-size: var(--text-mono-md); color: var(--text-dim); background: var(--surface-2); padding: 0.3rem 0.6rem; border-radius: var(--r-sm); border: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ls-sub-btn { flex: none; white-space: nowrap; } /* Phone — sub-row stacks: label on row 1, value full width on row * 2, button on row 3. Hero toggle keeps its 2-column shape since * the toggle is small. Form-grid already collapses via Section 20. */ @media (max-width: 600px) { .ls-sub-row { grid-template-columns: 1fr; gap: 0.4rem; } .ls-sub-row .ls-sub-btn { justify-self: start; } } /* Phone: collapse the rail above the content as a horizontal * scroller of pills so it doesn't eat vertical real estate. */ @media (max-width: 880px) { .settings-shell { grid-template-columns: 1fr; gap: 0.85rem; } .settings-rail { position: static; border-right: 0; border-bottom: 1px dashed var(--border); padding: 0; flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .settings-rail-label-group { display: none; } .settings-rail-item { border-left: 0; border-bottom: 3px solid transparent; padding: 0.55rem 0.75rem; flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; } .settings-rail-item.active { border-left-color: transparent; border-bottom-color: var(--primary); } } /* Save bar — sticky bottom of the settings-main column. The single * place a save bar belongs is at the bottom of the form; mid-page * was a usability bug. (2026-05-05 redesign — was a static row * earlier despite the comment claiming sticky.) */ .settings-save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.85rem 0; background: linear-gradient(0deg, var(--bg) 80%, transparent); margin-top: 0.5rem; } /* ── 30. PROFILE PAGE ─────────────────────────────────────────────────────── */ .profile-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; max-width: 900px; } .profile-info { display: flex; flex-direction: column; } .profile-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); } .profile-row:last-child { border-bottom: 0; } .profile-label { font-size: var(--t-sm); color: var(--text-dim); } .profile-value { font-size: var(--t-sm); color: var(--text); font-weight: 500; font-family: var(--font-mono); text-align: right; } .profile-value.plain { font-family: var(--font-sans); } /* ═══════════════════════════════════════════════════════════════════════════ §31 — Admin page helpers ─────────────────────────────────────────────────────────────────────────── */ /* Flush body (removes inner padding so a .table reaches the card's edges) */ .card-body-flush { padding: 0; } .card-body-flush .table { border-radius: 0; } /* Role badges (reuse the generic .badge shape with role-specific palettes) */ .badge-role-admin { background: var(--primary-soft); color: var(--primary); } .badge-role-manager { background: var(--warn-soft); color: var(--warn); } .badge-role-viewer { background: var(--surface-2); color: var(--text-dim); } /* Right-aligned action cell for a row's trailing button(s) */ .table-actions { text-align: right; white-space: nowrap; } /* Narrow form grid — single column, max ~420px — for modals / settings panes where side-by-side fields would feel cramped. */ .form-grid-narrow { grid-template-columns: 1fr; max-width: 420px; } /* Danger-ghost button: red text and border, transparent fill; fills in on hover. Used for low-weight destructive actions in dense tables. */ .btn-danger-ghost { background: transparent; color: var(--danger); border: 1px solid var(--danger); } .btn-danger-ghost:hover { background: var(--danger); color: #fff; } /* ═══════════════════════════════════════════════════════════════════════════ §32 — Videos tab (station detail): compile jobs, videos grid, player modal, compile wizard ─────────────────────────────────────────────────────────────────────────── */ /* Outer wrapper for the entire Videos tab. */ .videos-tab { display: flex; flex-direction: column; gap: 1.25rem; } /* Header row (title + "New video" button). */ .videos-tab-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .videos-tab-title { font-size: var(--t-2xl); font-weight: 600; margin: 0; } /* ── Jobs section (in-progress / queued / recently finished) ─────────────── */ .jobs-section { display: flex; flex-direction: column; gap: 0.75rem; } .jobs-section .section-header { font-size: var(--t-sm); font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .jobs-list { display: flex; flex-direction: column; gap: 0.5rem; } /* A single job row. Left border colour-coded by status. */ .job-row { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1rem; background: var(--surface); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r-sm); } .job-row-running { border-left-color: var(--primary); } .job-row-queued { border-left-color: var(--text-faint); } .job-row-done { border-left-color: var(--success); } .job-row-failed { border-left-color: var(--danger); } .job-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .job-row-title { font-size: var(--t-sm); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .job-row-meta { font-size: var(--t-xs); color: var(--text-dim); } .job-row-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .job-row-progress { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } /* Thin progress bar for running jobs. */ .progress-bar { width: 200px; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--primary); border-radius: inherit; transition: width 300ms ease; } /* ── Videos grid ─────────────────────────────────────────────────────────── */ .videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } /* Show-all / show-fewer expander under the videos grid (UX-parity cheap-fold). */ .videos-expander { display: flex; justify-content: center; margin-top: 1rem; } .video-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; cursor: pointer; transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; } .video-card:hover { border-color: var(--border-hover); transform: translateY(-1px); box-shadow: var(--shadow); } .video-card-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; } .video-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .video-card-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: var(--t-sm); } .video-card-duration { position: absolute; right: 0.5rem; bottom: 0.5rem; padding: 0.15rem 0.45rem; background: rgba(0,0,0,0.72); color: #fff; font-size: var(--t-xs); font-weight: 600; border-radius: var(--r-sm); font-family: var(--font-mono); } .video-card-body { padding: 0.75rem 0.85rem; display: flex; flex-direction: column; gap: 0.25rem; } .video-card-title { font-size: var(--t-sm); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .video-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: var(--t-xs); color: var(--text-dim); } .video-card-preset { padding: 0.08rem 0.4rem; background: var(--primary-soft); color: var(--primary); border-radius: var(--r-sm); font-weight: 600; text-transform: capitalize; } .video-card-date { font-family: var(--font-mono); } /* Public-visibility toggle in the top-right of the thumbnail. Hidden by default and fades in on card hover; stays pinned visible once the video is actually public so the state is always discoverable. */ .video-public-toggle { position: absolute; top: 0.5rem; right: 0.5rem; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 150ms ease, background 150ms ease; padding: 0; } .video-card:hover .video-public-toggle { opacity: 1; } .video-public-toggle:hover { background: rgba(0, 0, 0, 0.8); } .video-public-toggle.is-public { opacity: 1; background: var(--primary); } .video-public-toggle.is-public:hover { background: var(--primary-hover); } /* Inline "Public" badge in the card meta row — mirrors .video-card-preset but uses the success tint so it reads as a status, not a classification. */ .video-public-badge { display: inline-block; padding: 0.08rem 0.4rem; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--primary); font-size: var(--t-xs); font-weight: 600; } /* Brief highlight when scrollToVideo() targets a card. The flash is a ring expansion — spatial motion. Guarded by prefers-reduced-motion so it falls back to a static ring that fades on its own timeline. */ .video-card-flash { animation: videoCardFlash 1.6s ease-out; } @keyframes videoCardFlash { 0% { box-shadow: 0 0 0 0 var(--primary); } 30% { box-shadow: 0 0 0 4px var(--primary-soft); } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .video-card-flash { animation: none; box-shadow: 0 0 0 2px var(--primary); } } /* ── Wide modal variant (video player + wizard use 800px instead of 440px) */ .modal-wide { width: min(800px, calc(100vw - 2rem)); max-width: none; } /* Meta rows under the