/* ============================================================= Airlock Studio — single-file stylesheet. E12.5 polish: design tokens, base reset, sectioned utilities. No build step, no @import chain, no framework. ============================================================= */ /* === Design tokens ============================================ Token names are semantic so a future dark-mode flip swaps the values without renaming. Spacing follows a 4px base scale. ============================================================ */ :root { /* Colors — neutral surfaces + 1 brand + state accents. The brand blue matches the existing primary button so the polish reads as polish, not redesign. */ --bg-page: #f6f7f9; --bg-elevated: #fafbfc; --surface: #ffffff; --surface-muted: #f3f4f6; --border-subtle: #e5e7eb; --border-strong: #d1d5db; --fg-text: #0f172a; --fg-muted: #6b7280; --fg-subtle: #9ca3af; --fg-on-brand: #ffffff; --brand: #2563eb; --brand-hover: #1d4ed8; --brand-soft: #dbeafe; --accent: #7c3aed; --success: #059669; --success-hover: #047857; --success-soft: #d1fae5; --warning: #b45309; --warning-soft: #fef3c7; --danger: #b91c1c; --danger-strong: #ef4444; --danger-soft: #fee2e2; --bg-code: #0f172a; --fg-code: #e2e8f0; /* Spacing — 4px base. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; /* Radii. */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; /* Soft shadows — diffuse, not harsh. */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08); /* Typography scale — line-heights bundled. */ --fs-xs: 11px; --lh-xs: 1.45; --fs-sm: 12px; --lh-sm: 1.5; --fs-base: 14px; --lh-base: 1.55; --fs-lg: 16px; --lh-lg: 1.5; --fs-xl: 20px; --lh-xl: 1.4; --fs-2xl: 26px; --lh-2xl: 1.3; /* Type stacks. */ --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; --motion-fast: 160ms ease; --motion-page: 220ms ease; } /* === Dark theme token overrides ============================== Default theme is dark (set via in base.html). The Light/Dark toggle in the side nav flips the data-theme attribute and persists in localStorage. Token names are unchanged; only their values flip. ============================================================ */ [data-theme="dark"] { --bg-page: #05080d; --bg-elevated: #080d14; --surface: rgba(13, 18, 28, 0.88); --surface-muted: rgba(17, 24, 37, 0.9); --border-subtle: rgba(137, 165, 205, 0.18); --border-strong: rgba(113, 232, 246, 0.38); --fg-text: #f6fbff; --fg-muted: #91a3b8; --fg-subtle: #c8d7e8; --fg-on-brand: #061018; --brand: #32d7f3; --brand-hover: #75f6ff; --brand-soft: rgba(50, 215, 243, 0.14); --accent: #9b63ff; --success: #57e6ac; --success-hover: #75f6c6; --success-soft: rgba(87, 230, 172, 0.14); --warning: #f3c14b; --warning-soft: rgba(243, 193, 75, 0.14); --danger: #ff5d7a; --danger-strong: #ff7b92; --danger-soft: rgba(255, 93, 122, 0.14); --bg-code: #020617; --fg-code: #cbd5e1; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.40); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.50); } /* === Base reset ============================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--fg-text); background: var(--bg-page); -webkit-font-smoothing: antialiased; } [data-theme="dark"] body { background: radial-gradient(circle at 12% 4%, rgba(50, 215, 243, 0.16), transparent 30%), radial-gradient(circle at 82% 2%, rgba(155, 99, 255, 0.14), transparent 26%), linear-gradient(135deg, #04070c 0%, #07111a 52%, #090819 100%); } h1, h2, h3, h4 { margin: 0 0 var(--sp-3) 0; color: var(--fg-text); font-weight: 800; letter-spacing: 0; } h1 { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; } h2 { font-size: var(--fs-xl); line-height: var(--lh-xl); margin-top: var(--sp-7); } h3 { font-size: var(--fs-lg); line-height: var(--lh-lg); margin-top: var(--sp-5); } h4 { font-size: var(--fs-base); line-height: var(--lh-base); } p { margin: 0 0 var(--sp-3) 0; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } code, pre { font-family: var(--font-mono); font-size: 0.92em; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button[disabled] { cursor: not-allowed; } input, select, textarea { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); color: var(--fg-text); transition: border-color 120ms ease, box-shadow 120ms ease; } input[type="checkbox"], input[type="radio"] { padding: 0; accent-color: var(--brand); } input:hover, select:hover, textarea:hover { border-color: var(--fg-subtle); } input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); outline: none; } input[disabled], select[disabled], textarea[disabled] { background: var(--surface-muted); color: var(--fg-subtle); cursor: not-allowed; } table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: var(--fs-base); } th, td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border-subtle); vertical-align: top; } th { background: var(--surface-muted); font-weight: 600; color: var(--fg-text); border-bottom: 1px solid var(--border-strong); font-size: var(--fs-sm); letter-spacing: 0.02em; } /* === Focus rings — belt-and-braces for Safari <=15.4 fallback. */ :focus { outline: 2px solid var(--brand); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); } /* === Skip link — hidden until focused. */ .skip-link { position: absolute; top: -40px; left: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--brand); color: var(--fg-on-brand); border-radius: var(--r-sm); z-index: 100; font-size: var(--fs-sm); font-weight: 600; } .skip-link:focus { top: var(--sp-3); text-decoration: none; } /* === Layout: nav rail + main column. ============================ */ .shell { display: flex; min-height: 100vh; } .nav-rail { width: 220px; background: rgba(4, 8, 13, 0.9); color: #cbd5e1; padding: var(--sp-5) 0 var(--sp-3) 0; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid rgba(155, 183, 222, 0.13); } .nav-rail .brand { padding: 0 var(--sp-5) var(--sp-4) var(--sp-5); font-weight: 900; font-size: var(--fs-lg); color: var(--fg-text); letter-spacing: 0.01em; border-bottom: 1px solid #1e293b; margin-bottom: var(--sp-3); } .nav-rail ul { list-style: none; padding: 0; margin: 0; } .nav-rail li a { display: block; padding: var(--sp-2) var(--sp-5); color: #cbd5e1; font-size: var(--fs-base); border-left: 3px solid transparent; transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast); } .nav-rail li a:hover { background: rgba(117, 246, 255, 0.08); color: #f8fafc; text-decoration: none; } .nav-rail li a.active { background: rgba(50, 215, 243, 0.11); color: var(--fg-text); border-left-color: var(--brand); font-weight: 800; } .nav-rail li a.muted { color: #64748b; cursor: default; } .nav-rail li a.muted:hover { background: transparent; color: #64748b; } .nav-rail .footer { margin-top: auto; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); color: #94a3b8; border-top: 1px solid #1e293b; } .nav-rail .footer strong { color: #e2e8f0; font-weight: 600; } /* Theme toggle in the side nav. Sun/moon glyphs are Unicode (U+2600 / U+1F319), not emoji — small, monochrome, no font fallback surprises. */ .theme-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: calc(100% - 2 * var(--sp-5)); margin: var(--sp-3) var(--sp-5) 0 var(--sp-5); padding: var(--sp-2) var(--sp-3); background: #1e293b; border: 1px solid #334155; border-radius: var(--r-sm); color: #cbd5e1; font-size: var(--fs-sm); font-family: inherit; cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .theme-toggle:hover { background: #334155; color: #f8fafc; border-color: #475569; } .theme-toggle .toggle-glyph { font-size: 13px; line-height: 1; display: inline-block; width: 16px; text-align: center; } .theme-toggle .toggle-label { flex: 1; text-align: left; letter-spacing: 0.01em; } main { flex: 1; padding: var(--sp-7) var(--sp-7); max-width: 1440px; width: 100%; /* Centre the content column horizontally inside the available space (after the nav rail) so wide viewports don't leave all the trailing whitespace on one side. */ margin-left: auto; margin-right: auto; } /* === Topbar — every page's title + actions row. */ .topbar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0 var(--sp-4) 0; border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--sp-5); } .topbar > .topbar-title { flex: 1; min-width: 0; } .topbar .topbar-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; } .topbar .topbar-meta { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: var(--sp-1); } /* === Cards. Single rule rewritten to consume tokens. ============ */ .card { background: var(--surface); padding: var(--sp-5); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); box-shadow: var(--shadow-md); margin-bottom: var(--sp-5); backdrop-filter: blur(18px); } .card > h3:first-child { margin-top: 0; } /* === Stat row — overview tiles. ================================ */ .stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .stat { min-width: 160px; padding: var(--sp-4); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent); } .stat-label { font-size: var(--fs-xs); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 900; } .stat-value { font-size: var(--fs-2xl); font-weight: 900; color: var(--fg-text); margin-top: var(--sp-1); line-height: 1.2; } /* === Badges. =================================================== */ .badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: 999px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.02em; } .badge-pending { background: var(--warning-soft); color: var(--warning); border: 1px solid rgba(243, 193, 75, 0.28); } /* E17: repainted to a neutral pair so a branded --brand-hover (red, purple…) doesn't sit on the still-default-blue --brand-soft. Per-studio --brand-soft derivation is deferred to E17.3. */ .badge-running { background: var(--brand-soft); color: var(--brand-hover); border: 1px solid rgba(117, 246, 255, 0.22); } .badge-passed { background: var(--success-soft); color: var(--success); border: 1px solid rgba(87, 230, 172, 0.28); } .badge-submitted { background: var(--success-soft); color: var(--success); border: 1px solid rgba(87, 230, 172, 0.28); } .badge-failed { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(255, 93, 122, 0.28); } .badge-error { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(255, 93, 122, 0.28); } .badge-ingest_failed{ background: var(--warning-soft); color: var(--warning); border: 1px solid rgba(243, 193, 75, 0.28); } /* === Buttons. .btn + .btn-primary land here; secondary/success/ disabled added in Phase 2 when templates consume them. ======= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 42px; padding: var(--sp-2) var(--sp-4); border: 1px solid transparent; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 900; line-height: 1.4; cursor: pointer; transition: transform var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast); text-decoration: none; } .btn:hover { text-decoration: none; } .btn-primary { background: linear-gradient(135deg, var(--brand), var(--success)); color: var(--fg-on-brand); border-color: var(--brand); box-shadow: 0 14px 34px rgba(50, 215, 243, 0.2); } .btn-primary:hover { background: linear-gradient(135deg, var(--brand-hover), var(--success-hover)); border-color: var(--brand-hover); transform: translateY(-1px); } .btn-secondary { background: rgba(14, 21, 33, 0.75); color: var(--fg-subtle); border-color: rgba(155, 183, 222, 0.17); } .btn-secondary:hover { background: var(--surface-muted); border-color: var(--fg-subtle); } .btn-success { background: var(--success); color: var(--fg-on-brand); border-color: var(--success); } .btn-success:hover { background: var(--success-hover); border-color: var(--success-hover); } .btn-disabled, .btn[disabled] { background: rgba(42, 47, 58, 0.48); color: rgba(200, 215, 232, 0.44); border-color: rgba(155, 183, 222, 0.1); cursor: not-allowed; opacity: 1; box-shadow: none; } .btn-disabled:hover, .btn[disabled]:hover { background: var(--surface-muted); border-color: var(--border-subtle); } .btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); } /* === Banners (flash-style messages above forms). ================ */ .banner { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin: var(--sp-3) 0 var(--sp-4) 0; font-size: var(--fs-base); } .banner > strong { font-weight: 600; } .banner-success { background: var(--success-soft); border-color: var(--success); color: var(--success-hover); } .banner-error { background: var(--danger-soft); border-color: var(--danger-strong); color: var(--danger); } .banner-warning { background: var(--warning-soft); border-color: #f59e0b; color: var(--warning); } .banner-warning p { color: var(--warning); margin: var(--sp-2) 0 var(--sp-1) 0; } .banner pre { background: var(--surface); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); word-break: break-all; margin: var(--sp-2) 0 0 0; font-size: var(--fs-sm); border: 1px solid var(--border-subtle); } /* === Save-state indicator on the rule-editor topbar. =========== */ .indicator-pending { color: var(--warning); font-size: var(--fs-sm); margin-top: var(--sp-1); } .indicator-saved { color: var(--success); font-size: var(--fs-sm); margin-top: var(--sp-1); } .indicator-pending, .indicator-saved { display: inline-flex; width: fit-content; padding: 3px var(--sp-2); border: 1px solid currentColor; border-radius: 999px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } /* === Rule editor grid + topbar + table + rows ================== */ .rule-editor-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-6); margin-top: var(--sp-2); } .rule-editor-left { min-width: 0; } .right-rail { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: var(--sp-5); align-self: start; } /* The setup-page topbar carries both .topbar (generic) and the compound .rule-editor-topbar class (preserved for the test contract — see test_rules_ui.py:353). */ .rule-editor-topbar .topbar-meta { font-size: var(--fs-sm); color: var(--fg-muted); } .rule-editor-topbar .topbar-meta em { color: var(--fg-subtle); font-style: italic; } .rule-editor-topbar .topbar-project-name { font-weight: 900; font-size: var(--fs-xl); color: var(--fg-text); } .inline-form { display: inline; } .rule-section { margin-top: var(--sp-7); } .rule-section > h3 { margin: 0 0 var(--sp-3) 0; } .rule-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; } .rule-table th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--sp-2) var(--sp-3); } .rule-table .col-rule { width: 22%; } .rule-table .col-description { width: 32%; } .rule-table .col-value { width: 22%; } .rule-table .col-scope { width: 14%; } .rule-table .col-enabled { width: 10%; } .rule-table td { padding: var(--sp-3); border-bottom: 1px solid var(--border-subtle); } .rule-table tbody tr { transition: background var(--motion-fast); } .rule-table tbody tr:hover { background: rgba(117, 246, 255, 0.04); } .rule-table tr:last-child td { border-bottom: none; } .rule-table .rule-name code { background: var(--surface-muted); padding: 2px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm); } .rule-table .rule-description { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.45; } .rule-table .rule-input { width: 100%; } .rule-table .rule-scope { font-size: var(--fs-sm); color: var(--fg-muted); } .rule-row-error { color: var(--danger); font-size: var(--fs-xs); margin-left: var(--sp-1); font-weight: 500; } /* === Audit log card ========================================== */ .audit-card { padding: var(--sp-4); } .audit-card > h3 { margin: 0 0 var(--sp-3) 0; font-size: var(--fs-base); } .audit-list { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); } .audit-entry { padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); border-left: 2px solid var(--border-subtle); margin-bottom: var(--sp-2); } .audit-entry:last-child { margin-bottom: 0; } .audit-entry .audit-text { color: var(--fg-text); line-height: 1.4; } .audit-entry .audit-meta { color: var(--fg-subtle); font-size: var(--fs-xs); margin-top: 2px; letter-spacing: 0.02em; } /* === Project picker (E12.1) =================================== Single