/* ============================================================================= AEROSOPHIA DESIGN SYSTEM · aerosophia-ds.css Single source of truth for platform styling. Token-driven, palette-swappable. ----------------------------------------------------------------------------- STRUCTURE 1. Palette scales :root[data-palette="orange|sky|teal|indigo"] 2. Core tokens neutrals, status, semantic, spacing, radius, elev… 3. Dark theme :root[data-theme="dark"] 4. Density :root[data-density="compact"] 5. Base elements 6. App shell sidebar / topbar / stage / dock 7. Components buttons, forms, tabs, tables, chips, cards, modals, floating windows, map chrome, drawer, stepper… Set palette/theme/density by attributes on . Defaults: orange / light / comfortable. Status + data-severity colors are constant across palettes. ============================================================================= */ /* ============================== 1 · PALETTES ============================== */ /* Each palette defines its brand scale AND accent aliases with LITERAL values (no chained var() indirection) so attribute swaps repaint reliably. */ :root, :root[data-palette="orange"]{ --brand-50:#fdf3ec; --brand-100:#fbe1d0; --brand-200:#f6c29c; --brand-300:#f0a067; --brand-400:#ed8848; --brand-500:#e97132; --brand-600:#d9631f; --brand-700:#b44f17; --brand-800:#8a3d13; --brand-900:#5f2a0d; --brand-rgb:233,113,50; --accent:#e97132; --accent-hover:#d9631f; --accent-active:#b44f17; --accent-soft:rgba(233,113,50,.12); --accent-soft-strong:rgba(233,113,50,.18); } :root[data-palette="sky"]{ --brand-50:#f0f9ff; --brand-100:#e0f2fe; --brand-200:#bae6fd; --brand-300:#7dd3fc; --brand-400:#38bdf8; --brand-500:#0369a1; --brand-600:#075985; --brand-700:#0c4a6e; --brand-800:#083b5a; --brand-900:#052e47; --brand-rgb:3,105,161; --accent:#0369a1; --accent-hover:#075985; --accent-active:#0c4a6e; --accent-soft:rgba(3,105,161,.12); --accent-soft-strong:rgba(3,105,161,.18); } :root[data-palette="teal"]{ --brand-50:#edf4f8; --brand-100:#d2e5ee; --brand-200:#a6cbdd; --brand-300:#6ea7c5; --brand-400:#3a83a6; --brand-500:#156082; --brand-600:#11516c; --brand-700:#0e4259; --brand-800:#0c3547; --brand-900:#0a2c3b; --brand-rgb:21,96,130; --accent:#156082; --accent-hover:#11516c; --accent-active:#0e4259; --accent-soft:rgba(21,96,130,.12); --accent-soft-strong:rgba(21,96,130,.18); } :root[data-palette="indigo"]{ --brand-50:#eef0fb; --brand-100:#dee2f7; --brand-200:#bcc5ef; --brand-300:#94a0e4; --brand-400:#6b78d6; --brand-500:#4f5bc4; --brand-600:#3f49a8; --brand-700:#343c8a; --brand-800:#2b3170; --brand-900:#232858; --brand-rgb:79,91,196; --accent:#4f5bc4; --accent-hover:#3f49a8; --accent-active:#343c8a; --accent-soft:rgba(79,91,196,.12); --accent-soft-strong:rgba(79,91,196,.18); } /* ============================== 2 · CORE TOKENS =========================== */ :root{ /* Neutral slate (constant across palettes) */ --neutral-0:#ffffff; --neutral-50:#f8fafc; --neutral-100:#f1f5f9; --neutral-200:#e2e8f0; --neutral-300:#cbd5e1; --neutral-400:#94a3b8; --neutral-500:#64748b; --neutral-600:#475569; --neutral-700:#334155; --neutral-800:#1e293b; --neutral-900:#0f172a; /* Sidebar — the constant navy structure, independent of brand palette */ --sidebar-bg-top:#0d2235; --sidebar-bg-mid:#091828; --sidebar-bg-bot:#050b13; --sidebar-fg:#c4cedb; --sidebar-fg-muted:#62758a; --topbar-bg:#0d2235; /* Status (constant) */ --success-50:#dcfce7; --success-500:#16a34a; --success-600:#15803d; --warning-50:#fef3c7; --warning-500:#f59e0b; --warning-600:#d97706; --danger-50:#fee2e2; --danger-500:#dc2626; --danger-600:#b91c1c; --info-50:#e0f2fe; --info-500:#0ea5e9; --info-600:#0284c7; /* Severity / data-viz (constant — detection severities) */ --sev-critical:#dc2626; --sev-high:#ea580c; --sev-medium:#f59e0b; --sev-low:#16a34a; --sev-info:#0ea5e9; /* Semantic surfaces / text / border (light) */ --surface-0:var(--neutral-0); --surface-1:var(--neutral-50); --surface-2:var(--neutral-100); --surface-sunken:var(--neutral-100); --surface-overlay:rgba(15,23,42,.55); --surface-inverse:var(--neutral-900); --text-primary:#1f2a37; --text-secondary:#334155; --text-muted:#64748b; --text-disabled:#94a3b8; --text-inverse:#ffffff; --text-link:var(--brand-600); --text-link-hover:var(--brand-700); --border-subtle:#e4e8ee; --border-default:#cbd5e1; --border-strong:#94a3b8; --border-focus:var(--brand-500); --focus-ring:0 0 0 3px rgba(var(--brand-rgb),.28); /* Divider line aliases (= border tokens; names carried over from the Brand & Chrome explorations so mockup CSS ports 1:1). */ --line:var(--border-subtle); --line-2:var(--border-default); /* Brand chrome accents (constant across palettes — from Brand & Chrome explorations). ink = deep teal heading/avatar; teal = dark chrome tail of the topbar gradient; sky = mid sky-blue that reads on the navy shell. */ --ink:#0F2C3A; --teal:#1A3946; --sky:#63B3ED; /* Spacing — 4px base */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; /* Radius */ --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-pill:999px; --radius-round:50%; /* Elevation */ --elev-0:none; --elev-1:0 1px 2px rgba(13,34,53,.06); --elev-2:0 2px 6px rgba(13,34,53,.10); --elev-3:0 6px 18px rgba(13,34,53,.13); --elev-4:0 18px 50px rgba(13,34,53,.26),0 2px 6px rgba(13,34,53,.12); /* Z-index ladder */ --z-map:1; --z-map-overlay:14; --z-control:16; --z-topbar:20; --z-sidebar:30; --z-window:40; --z-sidepanel:1050; --z-modal:1080; --z-toast:1090; --z-tweaks:1100; /* Motion */ --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --ease:cubic-bezier(.2,0,0,1); --ease-emphasized:cubic-bezier(.3,0,0,1.2); /* Type */ --font:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-mono:"JetBrains Mono","SF Mono",Consolas,Menlo,monospace; /* State palette — risk chips */ --risk-low-bg:#d1e7dd;--risk-low-bd:#a3cfb5;--risk-low-fg:#0a3622; --risk-medium-bg:#fff3cd;--risk-medium-bd:#f6da7a;--risk-medium-fg:#664d03; --risk-high-bg:#ffd9c2;--risk-high-bd:#ffb38a;--risk-high-fg:#8a3500; --risk-critical-bg:#f8d7da;--risk-critical-bd:#f1aeb5;--risk-critical-fg:#58151c; /* status chips */ --status-ok-bg:#d1e7dd;--status-ok-bd:#b5e0c2;--status-ok-fg:#1d683a; --status-warn-bg:#fff5e6;--status-warn-bd:#f6d28a;--status-warn-fg:#8a5a00; --status-error-bg:#fde7e9;--status-error-bd:#f4b9bf;--status-error-fg:#842029; } /* ============================== 3 · DARK THEME ============================ */ :root[data-theme="dark"]{ --surface-0:#0f172a; --surface-1:#1e293b; --surface-2:#334155; --surface-sunken:#0b1320; --surface-overlay:rgba(0,0,0,.65); --surface-inverse:#0f172a; --text-primary:#f1f5f9; --text-secondary:#cbd5e1; --text-muted:#94a3b8; --text-disabled:#64748b; --text-inverse:#0f172a; --text-link:var(--brand-300); --text-link-hover:var(--brand-200); --border-subtle:#27313f; --border-default:#3b4757; --border-strong:#64748b; --elev-1:0 1px 2px rgba(0,0,0,.4); --elev-2:0 2px 6px rgba(0,0,0,.5); --elev-3:0 6px 18px rgba(0,0,0,.55); --elev-4:0 18px 50px rgba(0,0,0,.65); --risk-low-bg:#1d3a2c;--risk-low-bd:#2d5a44;--risk-low-fg:#a3e0b8; --risk-medium-bg:#3a3018;--risk-medium-bd:#6e5a2d;--risk-medium-fg:#f6da7a; --risk-high-bg:#3a2418;--risk-high-bd:#6e4530;--risk-high-fg:#ffb38a; --risk-critical-bg:#3d1d20;--risk-critical-bd:#6e3540;--risk-critical-fg:#f1aeb5; --status-ok-bg:#1d3a2c;--status-ok-bd:#2d5a44;--status-ok-fg:#86efac; --status-warn-bg:#3a2e18;--status-warn-bd:#6e5a2d;--status-warn-fg:#fcd34d; --status-error-bg:#3a1d20;--status-error-bd:#6e3540;--status-error-fg:#fca5a5; } /* ============================== 4 · DENSITY =============================== */ :root[data-density="compact"]{ --row-pad-y:5px; --control-h:32px; --card-pad:14px; } :root{ --row-pad-y:9px; --control-h:36px; --card-pad:18px; } /* ============================== 5 · BASE ================================== */ *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:var(--font); color:var(--text-primary); background:var(--surface-1); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4,h5,h6{margin:0 0 .5rem; color:var(--text-primary); font-weight:700; letter-spacing:-.01em;} a{color:var(--text-link); text-decoration:none;} a:hover{color:var(--text-link-hover);} button{font-family:inherit; cursor:pointer;} img{display:block; max-width:100%;} code,.ds-mono{font-family:var(--font-mono); font-size:.85em; color:var(--text-secondary); background:var(--surface-2); padding:1px 5px; border-radius:var(--radius-sm);} .ds-tabular{font-variant-numeric:tabular-nums;} /* scrollbars */ .thin-scroll::-webkit-scrollbar{width:9px;height:9px;} .thin-scroll::-webkit-scrollbar-thumb{background:#c7d0da;border-radius:6px;border:2px solid transparent;background-clip:content-box;} .thin-scroll::-webkit-scrollbar-thumb:hover{background:#a9b6c4;background-clip:content-box;} .thin-scroll::-webkit-scrollbar-track{background:transparent;} /* ============================== 6 · APP SHELL ============================= */ .app{display:flex; height:100vh; width:100vw; overflow:hidden;} .sidebar{ width:212px; flex:0 0 212px; background:linear-gradient(177deg,var(--sidebar-bg-top) 0%,var(--sidebar-bg-mid) 55%,var(--sidebar-bg-bot) 100%); color:var(--sidebar-fg); display:flex; flex-direction:column; position:relative; z-index:var(--z-sidebar); } .sidebar--light{ background:var(--surface-0); color:var(--text-secondary); border-right:1px solid var(--border-subtle); } .sidebar__brand{display:flex; align-items:center; gap:10px; padding:20px 16px 18px; min-width:0;} .sidebar__brand img{max-height:58px; height:auto; width:auto; max-width:140px;} .sidebar:not(.sidebar--light) .sidebar__brand img{filter:brightness(0) invert(1);} .sidebar__burger{margin-left:auto; flex:0 0 auto; color:#9fb0c0; font-size:18px; line-height:1; background:none; border:none; padding:4px; border-radius:6px;} .sidebar__burger:hover{background:rgba(255,255,255,.08); color:#fff;} .nav{display:flex; flex-direction:column; padding:6px 0; overflow-y:auto; flex:1;} .nav__group{padding:14px 18px 5px; font-size:10.5px; font-weight:800; letter-spacing:.12em; color:var(--sidebar-fg-muted); text-transform:uppercase;} .sidebar--light .nav__group{color:var(--text-muted);} .nav__item{display:flex; align-items:center; gap:12px; padding:9px 18px; font-size:13.5px; color:var(--sidebar-fg); border:none; background:none; width:100%; text-align:left; text-decoration:none; position:relative; transition:background var(--dur-fast),color var(--dur-fast);} .sidebar--light .nav__item{color:var(--text-secondary);} .nav__item svg{width:17px; height:17px; flex:0 0 17px; stroke-width:1.7; opacity:.85;} .nav__item:hover{background:rgba(255,255,255,.05); color:#fff;} .sidebar--light .nav__item:hover{background:var(--surface-1); color:var(--text-primary);} .nav__item.is-active{color:#fff; background:var(--accent-soft);} .sidebar--light .nav__item.is-active{color:var(--accent-active); background:var(--accent-soft);} .nav__item.is-active::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent);} .nav__item.is-active svg{color:var(--accent); opacity:1;} .nav__chev{margin-left:auto; opacity:.5;} /* collapsible submenu (matches today's pcoded-hasmenu) */ .nav__has{display:flex; flex-direction:column;} .nav__parent{cursor:pointer;} .nav__parent .nav__chev{width:15px; height:15px; transition:transform var(--dur-fast);} .nav__has.open .nav__parent .nav__chev{transform:rotate(180deg);} .subnav{display:none; flex-direction:column; background:rgba(0,0,0,.18);} .subnav.open{display:flex;} .subnav__item{display:block; padding:8px 18px 8px 48px; font-size:13px; color:#aebccb; text-decoration:none; position:relative; transition:background var(--dur-fast),color var(--dur-fast);} .subnav__item:hover{color:#fff; background:rgba(255,255,255,.05);} .subnav__item.is-active{color:#fff; font-weight:700;} .subnav__item.is-active::before{content:""; position:absolute; left:30px; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:var(--accent);} .sidebar--light .subnav{background:var(--surface-1);} .sidebar--light .subnav__item{color:var(--text-secondary);} .sidebar--light .subnav__item:hover{color:var(--text-primary); background:var(--surface-2);} .sidebar--light .subnav__item.is-active{color:var(--accent-active);} .nav__spacer{flex:1; min-height:12px;} .nav__item--logout{color:#9fb0c0;} .nav__item--logout svg{color:#9fb0c0;} .sidebar__version{padding:12px 18px; font-size:11px; color:var(--sidebar-fg-muted); border-top:1px solid rgba(255,255,255,.06); text-align:center;} .sidebar--light .sidebar__version{border-top-color:var(--border-subtle);} .stage{position:relative; flex:1; min-width:0; background:var(--surface-1); overflow:auto;} .topbar{height:48px; background:var(--topbar-bg); border-bottom:1px solid #02060c; display:flex; align-items:center; justify-content:flex-start; gap:14px; padding:0 22px; box-shadow:0 1px 6px rgba(0,0,0,.18); position:relative; z-index:var(--z-topbar);} .topbar__title{color:#e7eef6; font-size:14px; font-weight:600; display:flex; align-items:center; gap:9px; flex:0 0 auto;} .topbar__util{display:flex; align-items:center; gap:18px; margin-left:auto;} .topbar__btn{position:relative; background:none; border:none; color:#9fb0c0; display:flex; align-items:center; gap:5px; padding:4px;} .topbar__btn:hover{color:#fff;} .topbar__btn svg{width:18px; height:18px;} .topbar__badge{position:absolute; top:-5px; right:-7px; background:var(--danger-500); color:#fff; font-size:9px; font-weight:700; border-radius:9px; padding:1px 4px; line-height:1.25;} .topbar__avatar{width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;} /* page content scaffold for non-map pages */ .page{padding:var(--space-6); max-width:1240px; margin:0 auto;} .page__head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); flex-wrap:wrap;} .page__title{display:inline-flex; align-items:center; gap:var(--space-2); font-size:1.55rem; font-weight:800; color:var(--text-primary); margin:0;} .page__sub{color:var(--text-muted); font-size:.9rem; margin-top:3px;} .breadcrumbs{display:flex; align-items:center; gap:7px; font-size:.8rem; color:var(--text-muted); margin-bottom:6px;} .breadcrumbs a{color:var(--text-link); font-weight:600;} .breadcrumbs .sep{opacity:.5;} /* ============================== 7 · COMPONENTS =========================== */ /* ---- Buttons ---- */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.5rem .9rem; font-size:.875rem; font-weight:600; line-height:1.25; border-radius:var(--radius-md); border:1px solid transparent; cursor:pointer; white-space:nowrap; text-decoration:none; user-select:none; transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast),transform 80ms ease;} .btn svg{width:16px; height:16px; stroke-width:1.9;} .btn:focus-visible{outline:none; box-shadow:var(--focus-ring);} .btn:active:not(:disabled){transform:translateY(.5px);} .btn:disabled,.btn.disabled{opacity:.5; cursor:not-allowed; box-shadow:none;} .btn-sm{padding:.3rem .65rem; font-size:.8rem; border-radius:var(--radius-sm);} .btn-sm svg{width:14px;height:14px;} .btn-lg{padding:.7rem 1.2rem; font-size:1rem; border-radius:var(--radius-lg);} .btn-primary{background:var(--accent); border-color:var(--accent); color:#fff;} .btn-primary:hover:not(:disabled){background:var(--accent-hover); border-color:var(--accent-hover);} .btn-primary:active:not(:disabled){background:var(--accent-active);} .btn-secondary{background:var(--neutral-700); border-color:var(--neutral-700); color:#fff;} .btn-secondary:hover:not(:disabled){background:var(--neutral-800);} .btn-neutral{background:var(--surface-2); border-color:var(--border-default); color:var(--text-primary);} .btn-neutral:hover:not(:disabled){background:var(--surface-1); border-color:var(--border-strong);} .btn-success{background:var(--success-500); border-color:var(--success-500); color:#fff;} .btn-success:hover:not(:disabled){background:var(--success-600);} .btn-danger{background:var(--danger-500); border-color:var(--danger-500); color:#fff;} .btn-danger:hover:not(:disabled){background:var(--danger-600);} .btn-outline{background:transparent; border-color:var(--accent); color:var(--accent-active);} .btn-outline:hover:not(:disabled){background:var(--brand-50);} .btn-outline-neutral{background:transparent; border-color:var(--border-strong); color:var(--text-secondary);} .btn-outline-neutral:hover:not(:disabled){background:var(--surface-1);} .btn-outline-danger{background:transparent; border-color:var(--danger-500); color:var(--danger-600);} .btn-outline-danger:hover:not(:disabled){background:var(--danger-50);} .btn-ghost{background:transparent; border-color:transparent; color:var(--text-secondary);} .btn-ghost:hover:not(:disabled){background:var(--surface-2); color:var(--text-primary);} .btn-icon{width:var(--control-h); height:var(--control-h); padding:0; border-radius:var(--radius-md);} .btn-block{width:100%;} /* ---- Forms ---- */ .field{display:flex; flex-direction:column; gap:5px; margin-bottom:var(--space-3);} .form-label{font-size:.8rem; font-weight:600; color:var(--text-secondary);} .form-control,.form-select{display:block; width:100%; height:var(--control-h); padding:0 .7rem; font-size:.875rem; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--surface-0); color:var(--text-primary); transition:border-color var(--dur-fast),box-shadow var(--dur-fast);} textarea.form-control{height:auto; padding:.5rem .7rem; resize:vertical;} .form-control:focus,.form-select:focus{outline:none; border-color:var(--border-focus); box-shadow:var(--focus-ring);} .form-control::placeholder{color:var(--text-disabled);} .form-help{font-size:.75rem; color:var(--text-muted);} .form-check{display:inline-flex; align-items:center; gap:7px; font-size:.85rem; color:var(--text-secondary);} .form-check input{accent-color:var(--accent); width:16px; height:16px;} .searchbox{display:flex; align-items:center; gap:8px; height:var(--control-h); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:0 12px; background:var(--surface-0); color:var(--text-muted);} .searchbox:focus-within{border-color:var(--accent); box-shadow:var(--focus-ring);} .searchbox svg{width:16px; height:16px;} .searchbox input{border:none; outline:none; flex:1; font-size:.875rem; color:var(--text-primary); background:none;} /* toggle switch */ .switch{position:relative; width:38px; height:22px; flex:0 0 38px;} .switch input{opacity:0; width:0; height:0;} .switch .track{position:absolute; inset:0; background:var(--neutral-300); border-radius:var(--radius-pill); transition:background var(--dur-fast);} .switch .track::before{content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform var(--dur-fast); box-shadow:var(--elev-1);} .switch input:checked + .track{background:var(--accent);} .switch input:checked + .track::before{transform:translateX(16px);} /* ---- Tabs ---- */ .tabs{display:flex; gap:0; border-bottom:1px solid var(--border-subtle); margin:0 0 var(--space-4); list-style:none; padding:0;} .tab{position:relative; padding:.65rem 1rem; font-size:.875rem; font-weight:600; color:var(--text-muted); border:none; background:transparent; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; display:inline-flex; align-items:center; gap:.4rem;} .tab + .tab::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); height:18px; width:1px; background:var(--border-subtle);} .tab:hover{color:var(--text-primary);} .tab.active{color:var(--accent); border-bottom-color:var(--accent);} /* ---- Cards / KPI ---- */ .card{background:var(--surface-0); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--elev-1); overflow:hidden;} .card__hd{padding:var(--space-3) var(--card-pad); border-bottom:1px solid var(--border-subtle); background:var(--surface-1); display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);} .card__hd h3{font-size:1rem; margin:0;} .card__bd{padding:var(--card-pad);} .card__ft{padding:var(--space-2) var(--card-pad); border-top:1px solid var(--border-subtle); background:var(--surface-1); display:flex; gap:var(--space-2); justify-content:flex-end;} .kpi-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--space-3);} .kpi{background:var(--surface-0); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--card-pad); box-shadow:var(--elev-1);} .kpi__label{font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700;} .kpi__value{font-size:1.7rem; font-weight:800; color:var(--text-primary); margin-top:3px; line-height:1;} .kpi__delta{font-size:.78rem; font-weight:700; margin-top:6px; display:inline-flex; align-items:center; gap:3px;} .kpi__delta.up{color:var(--success-600);} .kpi__delta.down{color:var(--danger-600);} /* ---- Tables ---- */ .table-wrap{overflow:auto; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--surface-0);} table.data{width:100%; border-collapse:separate; border-spacing:0; font-size:13px;} .data thead th{position:sticky; top:0; z-index:2; background:var(--surface-2); color:var(--text-muted); font-weight:800; font-size:11px; letter-spacing:.04em; text-transform:uppercase; text-align:left; padding:10px 14px; border-bottom:1px solid var(--border-subtle); white-space:nowrap;} .data tbody td{padding:var(--row-pad-y) 14px; border-bottom:1px solid var(--surface-2); vertical-align:middle; color:var(--text-primary);} .data tbody tr{transition:background .1s;} .data tbody tr:hover{background:var(--surface-1);} .data tbody tr.sel{background:var(--accent-soft);} .data tbody tr:last-child td{border-bottom:none;} .cell-id{font-variant-numeric:tabular-nums; color:var(--text-muted); font-weight:700;} .cell-muted{color:var(--text-muted);} .thumb{width:46px; height:34px; border-radius:6px; object-fit:cover; border:1px solid var(--border-subtle); background:var(--surface-2);} /* ---- Pager ---- */ .pager{display:flex; align-items:center; gap:2px;} .pager button{min-width:30px; height:30px; border:1px solid var(--border-subtle); background:var(--surface-0); color:var(--text-muted); font-size:12.5px; padding:0 8px; display:flex; align-items:center; justify-content:center;} .pager button:first-child{border-radius:8px 0 0 8px;} .pager button:last-child{border-radius:0 8px 8px 0;} .pager button+button{border-left:none;} .pager button:hover:not(:disabled){background:var(--surface-1); color:var(--text-primary);} .pager button.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700;} .pager button:disabled{color:var(--text-disabled); cursor:default;} /* ---- Badges / pills / chips ---- */ .badge{display:inline-block; padding:.25em .55em; font-size:.72rem; font-weight:700; border-radius:var(--radius-pill); color:#fff; background:var(--neutral-500);} .badge-primary{background:var(--accent);} .badge-success{background:var(--success-500);} .badge-warning{background:var(--warning-500); color:#4a2a00;} .badge-danger{background:var(--danger-500);} .badge-info{background:var(--info-500);} .badge-soft{background:var(--accent-soft); color:var(--accent-active);} .pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; border-radius:var(--radius-sm); padding:3px 9px; line-height:1; background:var(--surface-2); color:var(--text-secondary);} .pill-accent{background:var(--accent-soft); color:var(--accent-active);} .status-pill{display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:700; padding:2px 10px; border-radius:var(--radius-pill); border:1px solid transparent; background:var(--neutral-200); color:var(--text-secondary);} .status-pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.9;} .status-pill[data-status="ok"]{background:var(--status-ok-bg); border-color:var(--status-ok-bd); color:var(--status-ok-fg);} .status-pill[data-status="warn"]{background:var(--status-warn-bg); border-color:var(--status-warn-bd); color:var(--status-warn-fg);} .status-pill[data-status="error"]{background:var(--status-error-bg); border-color:var(--status-error-bd); color:var(--status-error-fg);} .risk-chip{display:inline-block; font-size:.75rem; font-weight:700; padding:2px 10px; border:1px solid var(--border-default); border-radius:var(--radius-pill); background:var(--neutral-200); color:var(--text-secondary); min-width:58px; text-align:center;} .risk-chip[data-risk="low"]{background:var(--risk-low-bg); border-color:var(--risk-low-bd); color:var(--risk-low-fg);} .risk-chip[data-risk="medium"]{background:var(--risk-medium-bg); border-color:var(--risk-medium-bd); color:var(--risk-medium-fg);} .risk-chip[data-risk="high"]{background:var(--risk-high-bg); border-color:var(--risk-high-bd); color:var(--risk-high-fg);} .risk-chip[data-risk="critical"]{background:var(--risk-critical-bg); border-color:var(--risk-critical-bd); color:var(--risk-critical-fg);} .role-chip{display:inline-flex; align-items:center; gap:3px; font-size:.72rem; font-weight:700; padding:1px 8px; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent-active); border:1px solid var(--border-subtle); white-space:nowrap;} /* ---- Alerts ---- */ .alert{padding:.75rem 1rem; border-radius:var(--radius-md); border:1px solid transparent; margin-bottom:.75rem; font-size:.875rem; display:flex; gap:10px; align-items:flex-start;} .alert svg{width:18px; height:18px; flex:0 0 18px; margin-top:1px;} .alert-primary{background:var(--brand-50); border-color:var(--brand-200); color:var(--brand-800);} .alert-success{background:var(--success-50); border-color:#86efac; color:#14532d;} .alert-warning{background:var(--warning-50); border-color:#fcd34d; color:#78350f;} .alert-danger{background:var(--danger-50); border-color:#fca5a5; color:#7f1d1d;} .alert-info{background:var(--info-50); border-color:#7dd3fc; color:#0c4a6e;} /* ---- Floating window (workspace panel) ---- */ .win{position:relative; background:var(--surface-0); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--elev-4); display:flex; flex-direction:column; overflow:hidden;} .win__hd{display:flex; align-items:center; gap:10px; height:46px; padding:0 10px 0 0; background:linear-gradient(180deg,var(--surface-0),var(--surface-1)); border-bottom:1px solid var(--border-subtle); cursor:grab; position:relative; flex:0 0 auto;} .win__hd::before{content:""; width:4px; align-self:stretch; background:var(--accent); margin-right:12px;} .win__icon{width:26px; height:26px; border-radius:7px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center;} .win__icon svg{width:15px; height:15px;} .win__title{font-size:14px; font-weight:800; color:var(--text-primary); letter-spacing:.01em;} .win__count{font-size:11px; font-weight:700; color:var(--accent-active); background:var(--accent-soft); border-radius:20px; padding:2px 9px;} .win__sp{flex:1;} .win__ctl{width:30px; height:30px; border-radius:7px; border:none; background:none; color:var(--text-muted); display:flex; align-items:center; justify-content:center;} .win__ctl:hover{background:var(--surface-2); color:var(--text-primary);} .win__ctl.close:hover{background:var(--danger-500); color:#fff;} .win__ctl svg{width:15px; height:15px; stroke-width:2;} .win__bd{flex:1; overflow:auto;} .win__ft{display:flex; align-items:center; gap:14px; padding:9px 14px; border-top:1px solid var(--border-subtle); background:var(--surface-1); flex:0 0 auto; font-size:12.5px; color:var(--text-muted);} /* ---- Modal (centered, dimmed) ---- */ .modal-scrim{position:fixed; inset:0; background:var(--surface-overlay); backdrop-filter:blur(2px); z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; padding:24px;} .modal{background:var(--surface-0); border-radius:var(--radius-xl); box-shadow:var(--elev-4); width:100%; max-width:480px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden;} .modal--lg{max-width:720px;} .modal--sm{max-width:380px;} .modal__hd{display:flex; align-items:center; gap:12px; padding:18px 20px 14px; border-bottom:1px solid var(--border-subtle); position:relative;} .modal__hd::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent);} .modal__icon{width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:0 0 34px;} .modal__icon svg{width:19px; height:19px;} .modal__icon.is-danger{background:var(--danger-50); color:var(--danger-600);} .modal__title{font-size:1.05rem; font-weight:800; color:var(--text-primary);} .modal__sub{font-size:.82rem; color:var(--text-muted); margin-top:1px;} .modal__x{margin-left:auto; width:30px; height:30px; border:none; background:none; border-radius:7px; color:var(--text-muted); display:flex; align-items:center; justify-content:center;} .modal__x:hover{background:var(--surface-2); color:var(--text-primary);} .modal__bd{padding:20px; overflow:auto;} .modal__ft{padding:14px 20px; border-top:1px solid var(--border-subtle); background:var(--surface-1); display:flex; gap:10px; justify-content:flex-end;} /* ---- Map chrome (for working_map) ---- */ .map-panel{background:var(--surface-0); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--elev-3);} .tool-rail{display:flex; flex-direction:column; gap:10px;} .tool-rail .grp{background:var(--surface-0); border:1px solid var(--border-subtle); border-radius:9px; overflow:hidden; box-shadow:var(--elev-2); display:flex; flex-direction:column;} .tool-rail button{width:38px; height:38px; border:none; background:var(--surface-0); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--surface-2);} .tool-rail .grp button:last-child{border-bottom:none;} .tool-rail button:hover{background:var(--surface-1); color:var(--accent);} .tool-rail button.is-active{background:var(--accent-soft); color:var(--accent);} .tool-rail button svg{width:18px; height:18px; stroke-width:1.8;} /* ============================================================================ MAP & POINT CLOUD · markers, 3D overlays, masks Severity drives marker COLOR (constant ramp). Accent drives MEASUREMENT & annotation tools. Set severity with data-sev="critical|high|medium|low|info". ============================================================================ */ [data-sev]{--c:var(--neutral-500);} [data-sev="critical"]{--c:var(--sev-critical);} [data-sev="high"]{--c:var(--sev-high);} [data-sev="medium"]{--c:var(--sev-medium);} [data-sev="low"]{--c:var(--sev-low);} [data-sev="info"]{--c:var(--sev-info);} .basemap-swatch{display:inline-block; width:16px; height:16px; border-radius:4px; border:1px solid rgba(255,255,255,.5); vertical-align:middle;} /* --- 2D map: circular severity marker --- */ .evt-marker{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--c,var(--sev-medium)); border:2.5px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.35);} .evt-marker svg{width:14px; height:14px; stroke:#fff; fill:none; stroke-width:2;} .evt-marker.is-active{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 32%,transparent),0 3px 10px rgba(0,0,0,.35);} /* --- 2D map: teardrop event pin with hover chip (matches 3D viewer) --- */ .map-pin{position:relative; width:30px; height:66px; cursor:pointer;} .map-pin__head{position:absolute; bottom:31px; left:50%; width:30px; height:30px; transform:translateX(-50%) rotate(45deg); border-radius:50% 50% 50% 2px; display:flex; align-items:center; justify-content:center; background:var(--c,var(--sev-medium)); border:2.5px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.35); transition:transform var(--dur-fast);} .map-pin:hover .map-pin__head{transform:translateX(-50%) rotate(45deg) scale(1.08);} .map-pin__head svg{width:15px; height:15px; transform:rotate(-45deg); stroke:#fff; fill:none; stroke-width:2;} .map-pin__leader{position:absolute; bottom:9px; left:50%; transform:translateX(-50%); width:2px; height:24px; background:linear-gradient(var(--c),color-mix(in srgb,var(--c) 22%,transparent));} .map-pin__anchor{position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; border:2px solid #fff; background:var(--c); box-shadow:0 0 0 4px rgba(255,255,255,.5);} .map-pin__chip{position:absolute; bottom:64px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:7px; background:#0d2235; border:1px solid rgba(140,175,210,.3); border-radius:9px; padding:5px 9px 5px 7px; box-shadow:0 8px 20px rgba(0,0,0,.3); white-space:nowrap; opacity:0; transition:opacity var(--dur-fast),transform var(--dur-fast); pointer-events:none;} .map-pin:hover .map-pin__chip,.map-pin.show-chip .map-pin__chip{opacity:1; transform:translateX(-50%) translateY(-2px);} .map-pin__chip .sev{width:8px; height:8px; border-radius:50%; background:var(--c); flex:0 0 8px;} .map-pin__chip .name{font-size:11.5px; font-weight:700; color:#eef4fa; letter-spacing:.02em;} .map-pin__chip .id{font-size:10.5px; font-weight:600; color:#86a0b8; font-variant-numeric:tabular-nums;} .map-pin--video .map-pin__head{border-radius:9px;} /* --- 3D point-cloud viewport (dark surface) --- */ .pc-canvas{position:relative; overflow:hidden; border:1px solid #25405c; border-radius:var(--radius-lg); background:radial-gradient(120% 92% at 50% 16%,#163450 0%,#0c1f33 46%,#070f1b 78%,#04090f 100%);} .pc-canvas .pc-floor{position:absolute; left:-40%; right:-40%; bottom:-6%; height:74%; background-image:linear-gradient(rgba(120,170,210,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,210,.10) 1px,transparent 1px); background-size:48px 48px; transform:perspective(560px) rotateX(70deg); transform-origin:bottom center; -webkit-mask-image:linear-gradient(to top,#000,transparent 76%); mask-image:linear-gradient(to top,#000,transparent 76%);} /* 3D event pin */ .pc-pin{position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; cursor:pointer;} .pc-pin .chip{display:flex; align-items:center; gap:7px; background:rgba(9,22,36,.92); border:1px solid rgba(140,175,210,.24); border-radius:9px; padding:5px 9px 5px 6px; box-shadow:0 8px 20px rgba(0,0,0,.45); white-space:nowrap; margin-bottom:6px; backdrop-filter:blur(6px);} .pc-pin .chip .sev{width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px rgba(255,255,255,.08);} .pc-pin .chip .name{font-size:11.5px; font-weight:700; color:#eef4fa;} .pc-pin .chip .id{font-size:10.5px; font-weight:600; color:#86a0b8; font-variant-numeric:tabular-nums;} .pc-pin .head{width:30px; height:30px; border-radius:50% 50% 50% 2px; transform:rotate(45deg); display:flex; align-items:center; justify-content:center; background:var(--c,var(--sev-medium)); border:2.5px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.5);} .pc-pin .head svg{width:14px; height:14px; transform:rotate(-45deg); stroke:#fff; fill:none; stroke-width:2;} .pc-pin .leader{width:2px; height:28px; background:linear-gradient(#ffffffcc,#ffffff22);} .pc-pin .anchor{width:11px; height:11px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 4px rgba(255,255,255,.12);} /* 3D measurement node + chip (accent) */ .pc-mnode{position:absolute; width:13px; height:13px; border-radius:50%; background:#0b1d30; border:2.5px solid var(--accent); transform:translate(-50%,-50%); box-shadow:0 0 0 4px var(--accent-soft-strong),0 4px 10px rgba(0,0,0,.4);} .pc-mchip{position:absolute; transform:translate(-50%,-50%); background:var(--accent); color:#fff; font-size:11.5px; font-weight:800; padding:4px 9px; border-radius:7px; font-variant-numeric:tabular-nums; box-shadow:0 6px 16px rgba(0,0,0,.45); display:flex; align-items:center; gap:5px;} .pc-mchip svg{width:12px; height:12px; stroke:#fff; fill:none; stroke-width:2;} /* 3D MASKS — section box (clip volume) + clip plane. Accent-tinted, dashed. */ .pc-mask-box{position:absolute; border:1.5px dashed var(--accent); border-radius:4px; background:linear-gradient(135deg,var(--accent-soft),transparent 70%); box-shadow:0 0 0 1px rgba(0,0,0,.3) inset;} .pc-mask-box .handle{position:absolute; width:9px; height:9px; background:#0b1d30; border:2px solid var(--accent); border-radius:2px;} .pc-mask-box .handle.tl{top:-5px;left:-5px;} .pc-mask-box .handle.tr{top:-5px;right:-5px;} .pc-mask-box .handle.bl{bottom:-5px;left:-5px;} .pc-mask-box .handle.br{bottom:-5px;right:-5px;} .pc-clip-plane{position:absolute; border-top:2px dashed var(--accent); background:linear-gradient(to bottom,var(--accent-soft),transparent);} .pc-clip-plane .lbl{position:absolute; top:-22px; left:8px; font-size:10px; font-weight:700; color:#fff; background:var(--accent); padding:2px 7px; border-radius:6px;} .pc-overlay-card{position:absolute; background:rgba(10,24,38,.9); backdrop-filter:blur(12px); border:1px solid rgba(120,160,200,.2); border-radius:13px; box-shadow:0 12px 30px rgba(0,0,0,.46); color:#dce7f2;} /* ---- Drawer (Area Detail) ---- */ .drawer{background:var(--surface-0); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--elev-3); display:flex; flex-direction:column;} .drawer__hd{padding:14px 18px 12px; border-bottom:1px solid var(--border-subtle); position:relative;} .drawer__crumb{font-size:.78rem; color:var(--text-muted); display:flex; align-items:center; gap:6px; margin-bottom:4px;} .drawer__name{margin:0; font-size:1.15rem; font-weight:800;} .drawer__body{display:flex; min-height:0; flex:1;} .drawer__rail{flex:0 0 196px; background:var(--surface-1); border-right:1px solid var(--border-subtle); padding:12px 0; overflow:auto;} .drawer__rail-item{width:100%; text-align:left; background:transparent; border:0; border-left:3px solid transparent; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; color:var(--text-secondary); font-size:.85rem; cursor:pointer;} .drawer__rail-item:hover{background:var(--surface-2); color:var(--text-primary);} .drawer__rail-item.active{background:var(--surface-0); color:var(--text-primary); font-weight:700; border-left-color:var(--accent);} .drawer__pane{flex:1; padding:16px 22px; overflow:auto;} /* ---- Stepper ---- */ .stepper{display:flex; align-items:center;} .stepper .step{flex:1; display:flex; flex-direction:column; align-items:center; position:relative;} .stepper .dot{width:28px; height:28px; border-radius:50%; background:var(--surface-2); border:2px solid var(--border-default); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--text-muted); font-size:.85rem; z-index:1;} .stepper .label{margin-top:6px; font-size:.78rem; color:var(--text-muted);} .stepper .step.done .dot{background:var(--accent); border-color:var(--accent); color:#fff;} .stepper .step.active .dot{background:var(--surface-0); border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);} .stepper .step.active .label,.stepper .step.done .label{color:var(--text-secondary); font-weight:700;} .stepper .step:not(:last-child)::after{content:""; position:absolute; top:14px; left:50%; right:-50%; height:2px; background:var(--border-default); z-index:0;} .stepper .step.done:not(:last-child)::after{background:var(--accent);} /* ---- Progress / skeleton / empty / spinner ---- */ .progress{width:100%; height:8px; background:var(--surface-2); border-radius:var(--radius-pill); overflow:hidden;} .progress>.bar{height:100%; background:var(--accent); transition:width var(--dur-base) var(--ease);} .skeleton{background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-1) 50%,var(--surface-2) 100%); background-size:200% 100%; animation:ds-shimmer 1.4s ease-in-out infinite; border-radius:var(--radius-sm); height:14px; margin-bottom:6px;} @keyframes ds-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}} .spinner{display:inline-block; width:18px; height:18px; border:2px solid var(--border-default); border-top-color:var(--accent); border-radius:50%; animation:ds-spin .65s linear infinite;} @keyframes ds-spin{to{transform:rotate(360deg);}} .empty-state{padding:var(--space-6); text-align:center; color:var(--text-muted); border:1px dashed var(--border-default); border-radius:var(--radius-lg);} .empty-state .icon{width:56px; height:56px; border-radius:16px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--text-disabled); margin:0 auto var(--space-3);} .empty-state .icon svg{width:26px; height:26px;} .empty-state h4{margin:0 0 4px; color:var(--text-primary);} /* ---- Iconography ---- */ /* Primary set is Lucide (vendored js/lucide.min.js); .feather-* aliases kept for legacy data-feather markup still mid-migration. FA = auth/legacy. */ .feather,.lucide{width:18px; height:18px; stroke-width:1.7; vertical-align:middle;} .feather-sm,.lucide-sm{width:15px; height:15px;} .feather-lg,.lucide-lg{width:22px; height:22px;} i.fa-solid,i.fa-regular,i.fa-brands{font-size:16px; line-height:1; vertical-align:middle;} .icon-tile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:18px 10px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-0); color:var(--text-secondary); text-align:center;} .icon-tile .feather,.icon-tile .lucide{width:27px; height:27px; stroke-width:1.7;} .icon-tile i.ph,.icon-tile [class*="ph-"]{font-size:30px; line-height:1;} .icon-tile i.fa-solid,.icon-tile i.fa-regular{font-size:24px;} .icon-tile svg,.icon-tile i{color:var(--accent);} .icon-tile .nm{font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); word-break:break-all;} .icon-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px;} .pcv-ico svg{width:26px; height:26px; fill:none; stroke:var(--accent); stroke-width:1.8;} /* Inline label help affordance: a muted Lucide `help-circle` placed next to a form label or section title. Replaces hand-placed FontAwesome `far fa-question-circle` glyphs (DESIGN-SYSTEM.md §4.13). Renders via the global Lucide hydration in includes/scripts.html. */ .ds-help-icon{width:15px; height:15px; stroke-width:1.7; vertical-align:middle; margin-left:var(--space-1); color:var(--text-muted); cursor:help; flex:0 0 auto;} .ds-help-icon:hover{color:var(--text-secondary);} /* ---- utility ---- */ .stack{display:flex; flex-direction:column;} .row{display:flex; align-items:center;} .gap-1{gap:var(--space-1);} .gap-2{gap:var(--space-2);} .gap-3{gap:var(--space-3);} .gap-4{gap:var(--space-4);} .wrap{flex-wrap:wrap;} .grow{flex:1;} .muted{color:var(--text-muted);} .strong{font-weight:700;} /* ==================== 14 · TOKEN BACKFILL & DARK SURFACES ==================== */ /* Roadmap R1 (Design System Review): tokens previously referenced with inline fallbacks are now first-class, and the dark viewer shells get named surfaces. */ :root{ --brand-50:#f0f9ff; --brand-100:#e0f2fe; --brand-200:#bae6fd; --brand-300:#7dd3fc; --accent-hover:#075985; --warning-500:#f59e0b; --success-600:#16a34a; --success-700:#15803d; --danger-500:#ef4444; --danger-600:#dc2626; --neutral-900:#0f172a; --border-strong:#94a3b8; /* dark shells (image viewer · clip player · point-cloud chrome) */ --dark-0:#060b13; --dark-1:#0d1726; --dark-2:#13243a; --dark-border:rgba(255,255,255,.12); --dark-text:#dbe6f0; --dark-muted:#8ba2bb; } /* ========================= 12 · BRAND EXPRESSION ========================== */ /* Locked from the Brand & Chrome exploration: - the rotor mark is TELEMETRY: it animates only while the platform works - lime (--live-*) is reserved for "happening right now" — never decorative - coordinate texture: mono coords as eyebrows / map status strips One brand only: Aerosophia. */ :root{ --live-400:#A8E63A; /* rotor-blade lime — live things only */ --live-600:#7CB518; --live-soft:rgba(168,230,58,.12); /* Brand spine — the vertical identity gradient line (teal→accent→sky→lime) that anchors the light-shell sidebar edge. Palette-aware via --accent. */ --brand-spine:linear-gradient(180deg,var(--teal),var(--accent) 38%,var(--sky) 70%,var(--live-400)); } /* The brand spine as a reusable thin vertical bar (e.g. light sidebar edge, section markers). Stretches to its flex/grid parent's height. */ .brand-spine{align-self:stretch; width:4px; min-height:48px; border-radius:0 3px 3px 0; background:var(--brand-spine);} .rotor{display:inline-block; width:24px; height:24px; flex:0 0 auto; background:url('../images/aerosophia/rotor-mark.png') center/contain no-repeat;} .rotor--spin{animation:ds-rotor-spin 7s linear infinite;} /* pipeline running */ .rotor--fast{animation:ds-rotor-spin 2.2s linear infinite;} /* uploading */ .rotor--idle{filter:grayscale(1) opacity(.45);} /* nothing running */ @keyframes ds-rotor-spin{to{transform:rotate(360deg);}} @media (prefers-reduced-motion: reduce){ .rotor--spin,.rotor--fast{animation:none;} } .livedot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--live-600); box-shadow:0 0 0 0 rgba(124,181,24,.5); animation:ds-live-pulse 1.6s ease-out infinite; flex:0 0 auto;} @keyframes ds-live-pulse{70%{box-shadow:0 0 0 7px rgba(124,181,24,0);}100%{box-shadow:0 0 0 0 rgba(124,181,24,0);}} @media (prefers-reduced-motion: reduce){ .livedot{animation:none;} } /* topbar live ticker — render ONLY while a pipeline runs */ .live-chip{display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 12px; border-radius:var(--radius-pill); background:rgba(255,255,255,.07); border:1px solid rgba(168,230,58,.3); color:#cfe3b6; font-size:12px; font-weight:700; white-space:nowrap;} .live-chip .rotor{width:15px; height:15px;} .live-chip__bar{width:64px; height:4px; border-radius:2px; background:rgba(255,255,255,.16); overflow:hidden;} .live-chip__bar i{display:block; height:100%; background:linear-gradient(90deg,var(--live-600),var(--live-400)); border-radius:2px;} .live-chip b{color:var(--live-400); font-family:var(--font-mono); font-weight:600; font-size:11px;} .live-chip__sep{width:1px; height:14px; background:rgba(255,255,255,.18); flex:0 0 auto;} .live-chip__counts{color:#aebccd; font-weight:600; font-size:11.5px;} .live-chip__counts b{color:#fff; font-family:var(--font-sans, inherit); font-size:11.5px; font-weight:800;} .live-chip__counts b.crit{color:#fca5a5;} .topbar__tenant{font-size:11px; font-weight:800; letter-spacing:.08em; color:#8ba2bb; flex:0 0 auto;} /* [REMOVAL-1128] customer logo rail-foot rules dropped — removed from sidebar foot */ /* coordinate texture */ .coord-eyebrow{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--text-muted);} .flight-divider{display:flex; align-items:center; gap:10px; margin:14px 0;} .flight-divider::before{content:""; flex:1; border-top:2px dashed var(--brand-300,#7dd3fc); opacity:.55;} .flight-divider::after{content:""; flex:1; border-top:2px dashed var(--border-default);} .flight-divider .rotor{width:16px; height:16px;} .tagline-dots{font-size:10px; font-weight:800; letter-spacing:.16em; color:var(--text-secondary); white-space:nowrap;} .tagline-dots .d{display:inline-block; width:5px; height:5px; border-radius:50%; margin:0 7px 1px;} .tagline-dots .d1{background:var(--brand-700);} .tagline-dots .d2{background:var(--sky);} .tagline-dots .d3{background:var(--live-400);} /* map status strip — scale + cursor coords + zoom (GIS table stakes) */ .map-statusbar{position:absolute; right:16px; bottom:64px; z-index:16; display:flex; align-items:center; gap:14px; white-space:nowrap; max-width:none; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border:1px solid var(--border-subtle); border-radius:9px; padding:6px 12px; font-family:var(--font-mono); font-size:11px; color:var(--text-secondary); box-shadow:var(--elev-2);} .map-statusbar > span{white-space:nowrap; flex:0 0 auto;} .map-statusbar .scale i{display:inline-block; width:46px; height:4px; border-left:1.5px solid currentColor; border-right:1.5px solid currentColor; background:linear-gradient(to bottom, transparent 40%, currentColor 40%, currentColor 60%, transparent 60%); margin-right:6px; vertical-align:middle; opacity:.7;} .map-statusbar .z{color:var(--text-disabled);} /* ===================== 13 · ICON RAIL SHELL (default) ===================== */ /* 64px sidebar; labels appear as hover flyouts. Submenu groups open a panel. The classic wide .sidebar above remains available as the alternate shell. */ .rail{width:64px; flex:0 0 64px; display:flex; flex-direction:column; align-items:center; padding:12px 0 10px; background:linear-gradient(177deg,var(--sidebar-bg-top) 0%,var(--sidebar-bg-mid) 55%,var(--sidebar-bg-bot) 100%); position:relative; z-index:var(--z-sidebar);} .rail__nav{display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; width:100%; padding-top:8px;} .rail__has{position:relative; display:flex; justify-content:center; width:100%;} .rail__item{width:42px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#8ba2bb; border:none; background:none; cursor:pointer; position:relative; text-decoration:none; transition:background var(--dur-fast),color var(--dur-fast);} .rail__item svg{width:18px; height:18px; stroke-width:1.7;} .rail__item:hover{background:rgba(255,255,255,.08); color:#fff;} .rail__item.is-active{background:color-mix(in srgb,var(--live-400) 14%,transparent); color:#fff;} .rail__item.is-active::after{content:""; position:absolute; right:4px; top:4px; width:6px; height:6px; border-radius:50%; background:var(--live-400);} /* Section separators: collapsed shows a short centered hairline; expanded shows an uppercase caption above a full-width rule (see the .rail--x override below). */ .rail__sep{height:26px; margin:2px 0; width:100%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:none;} .rail__sep::before{content:""; width:40px; height:1px; background:rgba(255,255,255,.14);} .rail__sp{flex:1;} .rail__brand{width:50px; height:50px; cursor:pointer; flex:0 0 50px; /* [REMOVAL-1157] Sky radial backplate removed: its tint showed through the rotor's hollow centre as a lighter disc against the navy rail. The drop-shadow glow alone keeps the thin, margin-cropped blades legible while the centre blends with the bg. */ background:url('../images/aerosophia/rotor-mark.png') center/contain no-repeat; filter:drop-shadow(0 0 7px rgba(99,179,237,.4)) drop-shadow(0 1px 2px rgba(0,0,0,.55));} /* Brand mark "L5" treatment: one clean spin on load, then idle; spins while hovered. Load and hover use the SAME keyframe and timing (ds-rotor-spin, 3s linear) so the load spin is identical to the hover spin — no glow/brightness highlight, just rotation. Guarded with :not() so the pipeline-telemetry classes (.rotor--spin / .rotor--fast set by aerosophia-shell.js) always take over the animation when a pipeline is running — telemetry beats decoration. */ .rail__brand:not(.rotor--spin):not(.rotor--fast){animation:ds-rotor-spin 3s linear 1;} .rail__brand:not(.rotor--spin):not(.rotor--fast):hover{animation:ds-rotor-spin 3s linear infinite;} @media (prefers-reduced-motion: reduce){ .rail__brand:not(.rotor--spin):not(.rotor--fast), .rail__brand:not(.rotor--spin):not(.rotor--fast):hover{animation:none;} } /* Brand row: the rotor is anchored at a constant 8px left in BOTH states so its spin-centre stays at 32px (the collapsed lane centre) and never jumps on toggle. A fixed min-height keeps the nav's first row at the same Y collapsed/expanded. */ .rail__has.rail__brandrow{justify-content:flex-start; align-items:center; gap:10px; min-height:54px; padding:3px 8px;} /* reserve the expanded version-footer height in BOTH states so the bottom-pinned Logout item keeps its Y when the rail toggles (the version just fades in below). */ .rail__foot{display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:10px; min-height:54px; justify-content:flex-start;} .rail__avatar{width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;} /* hover flyouts */ .rail__flyout{display:none; position:absolute; left:calc(100% - 3px); top:-4px; z-index:1061; min-width:198px; background:var(--surface-0); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--elev-4); padding:6px; text-align:left;} .rail__flyout::before{content:""; position:absolute; left:-12px; top:0; bottom:0; width:12px;} /* hover bridge */ .rail__has:hover .rail__flyout{display:block;} .rail__flyout-hd{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; color:var(--text-primary); padding:7px 10px 5px;} .rail__flyout-hd svg{width:14px; height:14px; color:var(--accent);} .rail__flyout-item{display:block; padding:7px 10px; border-radius:7px; font-size:12.5px; font-weight:400; color:var(--text-secondary); text-decoration:none;} .rail__flyout-item:hover{background:var(--surface-1); color:var(--text-primary);} .rail__flyout-item.is-active{background:var(--accent-soft); color:var(--accent-active);} .rail__flyout--tip{min-width:0; top:50%; transform:translateY(-50%); padding:6px 12px; font-size:12.5px; font-weight:700; color:var(--text-primary); white-space:nowrap;} .rail__flyout--brand{min-width:230px; padding:14px 16px;} .rail__flyout--brand img{width:170px; display:block; margin-bottom:8px;} .rail__ver{font-family:var(--font-mono); font-size:10px; color:var(--text-muted); margin-top:8px;} /* ---- expanded state (.rail--x) — same markup, wide layout ---- */ .rail{transition:width var(--dur-base) var(--ease), flex-basis var(--dur-base) var(--ease);} /* labels reveal by animating max-width + opacity (no display snap) so text glides in/out instead of popping when the rail toggles. */ .rail__lbl{display:inline-block; max-width:0; opacity:0; overflow:hidden; white-space:nowrap; vertical-align:middle; transition:max-width var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);} .rail__chev{display:none;} .rail__inline{display:none;} .rail--x{width:212px; flex:0 0 212px; align-items:stretch;} .rail--x .rail__has.rail__brandrow{flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; padding:3px 8px;} .rail--x .rail__brandlbl{max-width:150px; opacity:1; color:#fff; font-size:16px; font-weight:800; letter-spacing:.04em;} .rail__brandlbl small{display:block; font-size:8px; font-weight:700; letter-spacing:.05em; color:var(--sky); margin-top:2px; white-space:nowrap;} .rail--x .rail__nav{align-items:stretch; padding:8px 10px 0;} .rail--x .rail__has{justify-content:stretch; flex-direction:column;} .rail--x .rail__item{width:100%; height:40px; justify-content:flex-start; gap:11px; padding:0 11px; border-radius:9px;} .rail--x .rail__item .rail__lbl{max-width:160px; opacity:1; flex:1; text-align:left; font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .rail--x .rail__item.is-active::after{display:none;} /* Full-bleed selection band — square corners, edge-to-edge across the rail, lime accent flush at the far-left edge. The fill is a horizontal gradient that starts lime-tinted at the left edge and dissolves to transparent on the right, so the band fades back into the sidebar's navy bar instead of ending in a hard edge. */ .rail--x .rail__item.is-active{color:#fff; border-radius:0; width:calc(100% + 20px); margin:0 -10px; padding-left:21px; background:linear-gradient(90deg, color-mix(in srgb,var(--live-400) 20%, transparent) 0%, color-mix(in srgb,var(--live-400) 9%, transparent) 45%, transparent 100%); box-shadow:inset 3px 0 0 var(--live-400);} .rail--x .rail__chev{display:inline; width:13px; height:13px; opacity:.55; transition:transform var(--dur-fast);} .rail--x .rail__has.is-open .rail__chev{transform:rotate(180deg);} .rail--x .rail__flyout{display:none !important;} .rail--x .rail__has.is-open .rail__inline{display:flex; flex-direction:column; padding:2px 0 4px;} .rail__inline-item{display:block; padding:6.5px 10px 6.5px 40px; border-radius:8px; font-size:12.5px; font-weight:400; color:#8ba2bb; text-decoration:none; position:relative;} .rail__inline-item:hover{background:rgba(255,255,255,.06); color:#fff;} .rail__inline-item.is-active{color:#fff;} .rail__inline-item.is-active::before{content:""; position:absolute; left:24px; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:var(--live-400);} /* Expanded separators: uppercase section caption sitting ABOVE a full-width hairline rule (Variant A). The rule is re-enabled here (collapsed hides the caption and shows only the short centered line). */ .rail--x .rail__sep{flex-direction:column; align-items:stretch; justify-content:center; gap:6px; height:auto; padding:9px 12px 4px; align-self:stretch;} .rail--x .rail__sep::before{display:block; order:2; width:100%; height:1px; background:rgba(255,255,255,.10);} .rail--x .rail__sep::after{order:1; content:attr(data-cap); font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#64748b;} .rail--x .rail__foot{flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 14px 10px; width:100%;} .rail--x .rail__foot .rail__toggle{margin-left:auto;} .rail--x .rail__foot > .livedot{display:inline-block;} /* version footer line — expanded rail only */ .rail__verline{display:none;} .rail--x .rail__verline{display:block; width:100%; font-size:10px; color:#7e93ab; font-family:var(--font-mono); padding-top:7px; border-top:1px solid rgba(255,255,255,.08); text-align:center;} .rail--x .rail__verline b{color:#aebccd; font-weight:700;} .rail--x .rail__verline-brand, .rail--x .rail__verline-ver{display:block; text-align:center; line-height:1.4;} .rail--x .rail__verline-brand{color:#aebccd; font-weight:700;} /* collapse/expand — subtle ghost control at the TOP of the rail (above My profile); tooltip via the rail flyout tip when collapsed, native title when expanded */ /* collapse/expand control. Expanded → small ghost button pinned to the rail's top-right corner. Collapsed → a transparent overlay centred ON the rotor, faded in on hover (no background box, so it never obstructs the spinning mark). Being absolute in BOTH states keeps it out of the flow, so the nav never shifts vertically. */ .rail__has.rail__togglerow{position:absolute; top:14px; left:8px; width:48px; height:50px; align-items:center; margin:0; padding:0; z-index:6;} .rail--x .rail__has.rail__togglerow{top:15px; right:8px; left:auto; width:auto; height:auto; flex-direction:row;} .rail__toggle{width:28px; height:28px; border:none; background:none; border-radius:8px; color:#5b7186; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background var(--dur-fast), color var(--dur-fast), opacity var(--dur-base) var(--ease);} .rail__toggle:hover{background:rgba(255,255,255,.09); color:#e2e8f0;} .rail__toggle svg{width:15px; height:15px; stroke-width:2;} /* collapsed flavour: transparent circular hit-area over the rotor — visible at rest (sits in the rotor's hollow centre), brightening to full on hover. */ .rail:not(.rail--x) .rail__toggle{width:46px; height:46px; border-radius:50%; background:transparent; color:#fff; opacity:.85;} .rail:not(.rail--x) .rail__toggle:hover{background:transparent;} .rail:not(.rail--x) .rail__toggle i.feather{font-size:18px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 0 3px rgba(0,0,0,.6));} .rail:not(.rail--x) .rail__togglerow:hover .rail__toggle, .rail:not(.rail--x) .rail__brandrow:hover ~ .rail__togglerow .rail__toggle{opacity:1;} /* topbar context pill (dark topbar variant) */ /* topbar context pill (dark topbar variant) — elevated fill + bright values for contrast */ .ctx-pill{display:flex; align-items:center; gap:1px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-pill); padding:2px 3px; font-size:12px; min-width:0; overflow:hidden; flex:0 1 auto; box-shadow:inset 0 1px 0 rgba(255,255,255,.05);} .ctx-pill .seg{display:flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--radius-pill); color:#c9d7e4; font-weight:600; cursor:pointer; white-space:nowrap; border:none; background:none; font-size:12px; min-width:0;} .ctx-pill .seg:hover{background:rgba(255,255,255,.12); color:#fff;} .ctx-pill .seg b{color:#fff; font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis;} .ctx-pill .seg svg{width:12px; height:12px; color:#8ba2bb;} .ctx-pill .seg > svg:first-child{width:13px; height:13px; color:var(--sky);} /* leading icon = sky, reads on navy */ .ctx-pill .sep{color:rgba(255,255,255,.24); font-size:11px;} .ctx-pill .pill{background:rgba(99,179,237,.2); color:#bfe0fa; font-weight:800;} .ctx-pill .step{width:20px; height:20px; border-radius:6px; border:1px solid rgba(255,255,255,.16); background:none; color:#8ba2bb; display:flex; align-items:center; justify-content:center; cursor:pointer;} .ctx-pill .step:hover{color:#fff; background:rgba(255,255,255,.09);} .ctx-pill .step svg{width:12px; height:12px;}