/* ─────────────────────────── DESIGN TOKENS ─────────────────────────── */ /* The app's historical token names are kept as an alias layer over the Dynamik Orbits design system (dynamik-ds.css, default Dynamik theme). Colliding names (--accent, --border-strong, --font-mono) are NOT declared here — the DS provides them, and a theme class on would outrank :root if one were ever applied. */ :root { /* Tell the browser we're a dark-themed UI. This flips the default rendering of native form controls (date/time pickers, scrollbars, autofill…) to their dark variants so inputs like stop showing a white background and black text. */ color-scheme: dark; /* Surfaces — derived from the DS theme surface so the whole shell follows it */ --bg-0: var(--surface-base); --bg-1: color-mix(in srgb, var(--surface-elevated) 80%, transparent); --bg-2: color-mix(in srgb, var(--surface-elevated) 92%, transparent); --bg-3: var(--surface-elevated); --bg-elev: color-mix(in srgb, var(--surface-panel) 92%, transparent); --backdrop-blur: blur(14px) saturate(140%); /* Borders */ --border-1: rgba(var(--mode-fg), 0.08); --border-2: rgba(var(--mode-fg), 0.14); /* Text */ --text-0: var(--text-primary); --text-1: var(--text-secondary); --text-2: var(--text-muted); --text-3: var(--text-dim); /* Brand / accents (accent itself comes from the DS theme) */ --accent-hot: color-mix(in srgb, var(--accent) 78%, white); --accent-dim: var(--accent-strong); --good: var(--status-ok); --warn: var(--status-warn); --bad: var(--status-error); /* Spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; /* Radius — the design system is square-cornered */ --r-1: 0; --r-2: 0; --r-3: 0; /* Type */ --font: var(--font-sans); --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 15px; --fs-xl: 18px; --fs-xxl: 22px; /* Shadows */ --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-2: 0 8px 32px rgba(0, 0, 0, 0.55); --shadow-pop: 0 24px 80px rgba(0, 0, 0, 0.7); /* Layout sizes */ --top-bar-h: 48px; --bottom-bar-h: 36px; --rail-w: 0px; --right-panel-w: 320px; --drawer-w: 360px; } /* ─────────────────────────── BASE ─────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--text-0); font-family: var(--font); font-size: var(--fs-md); overflow: hidden; -webkit-font-smoothing: antialiased; } canvas { display: block; } /* The HTML `hidden` attribute must beat layout rules like `display: flex`. */ [hidden] { display: none !important; } button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, select, textarea { font-family: inherit; color: inherit; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hot); } a:visited { color: var(--accent); } h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--text-0); } h2 { font-size: var(--fs-lg); } h3 { font-size: var(--fs-md); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-1); } h4 { font-size: var(--fs-sm); color: var(--text-1); } /* ─────────────────────────── TOP BAR ─────────────────────────── */ #top-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--top-bar-h); display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-4); background: var(--bg-1); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border-bottom: 1px solid var(--border-1); /* Above the report popup-panel (z-index 50) so help/login dropdowns aren't occluded when expanded over an open Deployment report. */ z-index: 80; } .brand { display: flex; align-items: center; gap: var(--s-2); padding-right: var(--s-3); border-right: 1px solid var(--border-1); color: var(--text-0); } .brand:hover, .brand:visited { color: var(--text-0); } .brand-logo { height: 30px; width: 30px; margin: 0 -4px; flex: 0 0 auto; color: var(--text-0); } .brand-divider { width: 1px; height: 22px; flex: 0 0 auto; background: var(--border-strong); } .brand-copy { display: flex; flex-direction: column; line-height: 1.2; } .brand-copy strong { color: var(--text-0); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .brand-copy span { color: var(--text-2); font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; white-space: nowrap; } .company-link { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); padding: 6px 8px; } .company-link:hover { color: var(--text-0); } .company-link:visited { color: var(--text-2); } .mode-tabs { display: flex; gap: var(--s-1); flex: 1; } .mode-tab { display: inline-flex; align-items: center; gap: var(--s-2); padding: 8px 14px; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-2); transition: background 120ms ease, color 120ms ease; } .mode-tab:hover { background: var(--surface-hover); color: var(--text-0); } .mode-tab.active { background: var(--surface-hover); color: var(--text-0); } .tab-icon { display: none; } .top-bar-actions { display: flex; align-items: center; gap: var(--s-2); } /* ─────────────────────────── HELP POPUP ─────────────────────────── */ .help-wrapper { position: relative; display: inline-block; } .help-popup { position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-height: calc(100vh - var(--top-bar-h) - var(--s-5)); overflow-y: auto; padding: var(--s-4); background: var(--bg-2); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border: 1px solid var(--border-2); border-radius: var(--r-2); box-shadow: var(--shadow-pop); z-index: 60; font-size: var(--fs-sm); color: var(--text-1); animation: popup-in 160ms ease; } .help-popup h3 { font-size: var(--fs-lg); text-transform: none; letter-spacing: 0; color: var(--text-0); margin: 0 0 var(--s-2) 0; } .help-popup h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin: var(--s-3) 0 var(--s-2) 0; } .help-popup p { margin: 0 0 var(--s-2) 0; color: var(--text-1); line-height: 1.5; } .help-popup ul { margin: 0; padding-left: var(--s-4); color: var(--text-1); line-height: 1.55; } .help-popup li { margin-bottom: var(--s-1); } .help-popup strong { color: var(--text-0); font-weight: 600; } /* ─────────────────────────── MODE DRAWER ─────────────────────────── */ #mode-drawer { position: fixed; top: var(--top-bar-h); bottom: var(--bottom-bar-h); left: var(--rail-w); width: var(--drawer-w); background: var(--bg-2); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border-right: 1px solid var(--border-1); box-shadow: var(--shadow-2); z-index: 22; display: flex; flex-direction: column; animation: drawer-slide-in 180ms ease; transition: width 160ms ease; } @keyframes drawer-slide-in { from { transform: translateX(-12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .drawer-pane { display: flex; flex-direction: column; height: 100%; } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-1); flex-shrink: 0; } .drawer-header h2 { font-size: var(--fs-lg); font-weight: 600; } .drawer-body { flex: 1; overflow-y: auto; padding: var(--s-3) var(--s-4) var(--s-5) var(--s-4); scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } .drawer-body::-webkit-scrollbar { width: 8px; } .drawer-body::-webkit-scrollbar-track { background: transparent; } .drawer-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; } /* ─────────────────────────── ICON BUTTON ─────────────────────────── */ .icon-btn { width: 28px; height: 28px; border-radius: var(--r-1); display: inline-flex; align-items: center; justify-content: center; color: var(--text-1); font-size: 16px; line-height: 1; background: transparent; border: 1px solid transparent; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-0); border-color: var(--border-2); } /* ─────────────────────────── SLIDER GROUPS ─────────────────────────── */ .slider-section-header { cursor: pointer; display: flex; align-items: center; gap: var(--s-2); padding: 8px 10px; margin: var(--s-3) 0 var(--s-2) 0; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-1); border-radius: var(--r-1); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-1); font-weight: 600; transition: background 120ms ease, border-color 120ms ease; } .slider-section-header:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--border-2); } .slider-section-header::before { content: "▸"; display: inline-block; width: 10px; font-size: 10px; color: var(--text-2); transition: transform 120ms ease; } .slider-section-header.expanded::before { transform: rotate(90deg); } .slider-section-content { max-height: 0; overflow: hidden; transition: max-height 220ms ease; padding-left: 4px; border-left: 2px solid var(--border-1); margin-left: 6px; } .slider-section-content.active { max-height: 4000px; padding-top: var(--s-2); padding-bottom: var(--s-2); } /* ─────────────────────────── SLIDER ROW ─────────────────────────── */ .slider-container { display: flex; flex-direction: column; gap: 4px; padding: var(--s-2) 6px var(--s-3) 6px; border-radius: var(--r-1); } .slider-container:hover { background: rgba(255, 255, 255, 0.025); } .slider-row-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .slider-label { font-size: var(--fs-sm); color: var(--text-1); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .slider-value-input { width: 80px; padding: 3px 6px; background: var(--bg-elev); border: 1px solid var(--border-1); border-radius: var(--r-1); color: var(--text-0); font-size: var(--fs-sm); text-align: right; outline: none; font-variant-numeric: tabular-nums; transition: border-color 120ms ease; } .slider-value-input:focus { border-color: var(--accent); } .slider-value-input:disabled { opacity: 0.6; } .slider-unit { font-size: var(--fs-xs); color: var(--text-3); min-width: 24px; } /* range input */ input[type="range"].slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--border-2); border-radius: 2px; outline: none; margin: 4px 0 0 0; } input[type="range"].slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: var(--accent); cursor: pointer; border-radius: 50%; border: 2px solid var(--bg-0); box-shadow: 0 0 0 1px var(--accent); transition: transform 120ms ease, background 120ms ease; } input[type="range"].slider::-webkit-slider-thumb:hover { background: var(--accent-hot); transform: scale(1.15); } input[type="range"].slider::-moz-range-thumb { width: 14px; height: 14px; background: var(--accent); cursor: pointer; border: 2px solid var(--bg-0); border-radius: 50%; box-shadow: 0 0 0 1px var(--accent); } input[type="range"].slider::-moz-range-track { background: var(--border-2); height: 4px; border-radius: 2px; } /* select / dropdown sliders */ select.slider { width: 100%; padding: 5px 8px; background: var(--bg-elev); border: 1px solid var(--border-1); border-radius: var(--r-1); color: var(--text-0); font-size: var(--fs-sm); outline: none; } /* radio groups */ .radio-container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: 4px 0; } .radio-container input[type="radio"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); background-color: var(--bg-elev); cursor: pointer; outline: none; margin: 0 4px 0 0; transition: border-color 120ms ease, background 120ms ease; } .radio-container input[type="radio"]:hover { border-color: var(--accent); } .radio-container input[type="radio"]:checked { background-color: var(--accent); border-color: var(--accent-hot); box-shadow: inset 0 0 0 2px var(--bg-0); } .radio-container label { color: var(--text-1); font-size: var(--fs-sm); cursor: pointer; display: inline-flex; align-items: center; } /* hidden via search filter */ .slider-container.filtered-out, .slider-section.filtered-out { display: none; } /* ─────────────────────────── RIGHT METRICS PANEL ─────────────────────────── */ #right-panel { position: fixed; top: var(--top-bar-h); right: 0; bottom: var(--bottom-bar-h); width: var(--right-panel-w); background: var(--bg-1); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border-left: 1px solid var(--border-1); z-index: 20; display: flex; flex-direction: column; transition: transform 220ms ease; } #right-panel.collapsed { transform: translateX(100%); } #right-panel-toggle { position: absolute; left: -24px; top: 50%; transform: translateY(-50%); width: 24px; height: 56px; padding: 0; border-radius: var(--r-1) 0 0 var(--r-1); border: 1px solid var(--border-1); border-right: none; background: var(--bg-1); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); color: var(--text-2); font-size: 16px; display: flex; align-items: center; justify-content: center; box-shadow: -2px 0 8px rgba(0, 0, 0, 0.25); z-index: 1; } #right-panel-toggle:hover { color: var(--text-0); background: var(--bg-2); } #right-panel-toggle .chev { display: inline-block; transition: transform 220ms ease; line-height: 1; } /* When expanded, chevron points right (collapse toward right). */ #right-panel-toggle .chev { transform: rotate(0deg); } /* When panel is collapsed, chevron points left (to expand back). */ #right-panel.collapsed #right-panel-toggle .chev { transform: rotate(180deg); } /* ─────────────────────────── BOTTOM BAR ─────────────────────────── */ #bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-bar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 0 var(--s-4); background: var(--bg-1); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border-top: 1px solid var(--border-1); font-size: var(--fs-xs); color: var(--text-2); z-index: 30; } .bottom-bar-left { display: flex; align-items: center; gap: var(--s-3); } .sim-time-display { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-1); font-size: var(--fs-xs); letter-spacing: 0.02em; } .fps-counter { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; padding: 2px 6px; border: 1px solid var(--border-1); border-radius: var(--r-1); background: rgba(255, 255, 255, 0.02); } /* ─────────────────────────── REPORT POPUP PANEL ─────────────────────────── */ .popup-panel { position: fixed; top: calc(var(--top-bar-h) + var(--s-4)); bottom: calc(var(--bottom-bar-h) + var(--s-4)); left: calc(var(--rail-w) + var(--s-4)); right: calc(var(--right-panel-w) + var(--s-4)); background: var(--bg-2); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border: 1px solid var(--border-2); border-radius: var(--r-3); box-shadow: var(--shadow-pop); z-index: 50; display: flex; flex-direction: column; animation: popup-in 200ms ease; max-width: 1280px; margin: 0 auto; /* Match the right-panel collapse transition so the report reflows in sync. */ transition: right 220ms ease; } /* When the right metrics panel is collapsed, reclaim its width for the report popup. #right-panel and #report-panel are sibling children of , with #right-panel appearing first, so the general-sibling combinator works here. */ #right-panel.collapsed ~ #report-panel.popup-panel { right: var(--s-4); } @keyframes popup-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-1); flex-shrink: 0; } .panel-header h2 { font-size: var(--fs-lg); } .panel-actions { display: flex; gap: var(--s-1); } .panel-body { flex: 1; overflow-y: auto; padding: var(--s-5); scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } .panel-body::-webkit-scrollbar { width: 10px; } .panel-body::-webkit-scrollbar-track { background: transparent; } .panel-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 5px; } .empty-state { color: var(--text-2); text-align: center; padding: var(--s-6); } /* ─────────────────────── DIRECT CLUSTERS ─────────────────────── */ #direct-config-container:not([hidden]) { display: flex; flex: 1; flex-direction: column; box-sizing: border-box; min-height: 0; } .direct-intro { margin: 0 0 13px; color: var(--text-1); font-size: 12px; line-height: 1.55; } .direct-select-control { display: grid; gap: 7px; margin-bottom: 7px; padding: 10px 11px; border: 1px solid var(--border-1); border-radius: 0; background: rgba(255, 255, 255, 0.025); } .direct-select-control label { color: var(--text-1); font-size: 11px; } .direct-select-control select { width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid var(--border-2); border-radius: 0; color: #e7efff; background: var(--bg-1); font-size: 10px; } .direct-select-control select:disabled { color: var(--text-3); opacity: 0.72; } .direct-research-summary { margin: 0 2px 10px; color: #8ea5a0; font-size: 9px; line-height: 1.45; } .direct-control { margin-bottom: 7px; padding: 10px 11px 9px; border: 1px solid var(--border-1); border-radius: 0; background: rgba(255, 255, 255, 0.025); } .direct-control > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .direct-control label { color: var(--text-1); font-size: 11px; } .direct-control output { color: #e7efff; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; } .direct-control input[type="range"] { width: 100%; accent-color: var(--accent); } .direct-time-control { margin-top: auto; margin-bottom: 0; border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); } .direct-time-hints { display: flex; justify-content: space-between; margin-top: 3px; color: var(--text-3); font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; } .direct-check { display: flex; align-items: center; gap: 8px; margin: 12px 2px; color: var(--text-1); font-size: 11px; line-height: 1.35; } .direct-check input { accent-color: var(--accent); } .direct-caveat { margin: 0; padding: 10px 11px; border-left: 2px solid rgba(245, 177, 74, 0.65); border-radius: 0; background: rgba(245, 177, 74, 0.06); color: #9ba8bc; font-size: 10px; line-height: 1.5; } .direct-caveat strong { color: #d7c49a; } .direct-model-note { margin: 0 0 9px; padding: 9px 10px; border: 1px solid rgba(113, 214, 163, 0.16); border-radius: 0; background: rgba(113, 214, 163, 0.045); color: #8ea5a0; font-size: 10px; line-height: 1.45; } .direct-model-note strong { color: #a9d8c6; } /* Direct diagnostics occupy Julien's existing collapsible right panel. */ #direct-info-area { flex: 1; overflow-y: auto; padding: var(--s-3) var(--s-4); color: var(--text-1); scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } #direct-info-area[hidden] { display: none !important; } .direct-hud-kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: #8fa4c8; font-size: 10px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; } .direct-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #71d6a3; box-shadow: 0 0 9px rgba(113, 214, 163, 0.75); } .direct-metrics-pane h2 { margin-bottom: 14px; font-size: 15px; line-height: 1.25; } .direct-hud-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .direct-hud-metrics > div { min-width: 0; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, 0.065); border-radius: 0; background: rgba(255, 255, 255, 0.025); } .direct-hud-metrics span, .direct-hud-metrics strong { display: block; } .direct-hud-metrics span { margin-bottom: 3px; color: var(--text-2); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; } .direct-axis-swatch { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; } .direct-axis-swatch.axis-r { background: #ff6157; } .direct-axis-swatch.axis-t { background: #59e594; } .direct-axis-swatch.axis-n { background: #73a6ff; } .direct-hud-metrics strong { overflow: hidden; color: #eaf2ff; font-size: 11px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .direct-hud-metrics .status-clear { color: #78e2ad; } .direct-hud-metrics .status-blocked { color: #ff8b78; } .direct-hud-detail { margin: 12px 1px 0; color: #8493ad; font-size: 10px; line-height: 1.5; } /* The scale indicator is part of the bottom bar and never covers the scene. */ .direct-scale-readout { display: inline-grid; grid-template-columns: auto auto; align-items: end; column-gap: 7px; min-width: 118px; padding: 2px 6px; border: 1px solid var(--border-1); border-radius: var(--r-1); background: rgba(255, 255, 255, 0.02); pointer-events: none; } .direct-scale-readout[hidden] { display: none !important; } .direct-scale-line { display: block; height: 6px; min-width: 42px; border-right: 1px solid #c8dbfb; border-bottom: 1px solid #c8dbfb; border-left: 1px solid #c8dbfb; } .direct-scale-readout strong { color: #e7efff; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; } .direct-scale-readout small { display: none; } .direct-deployment-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-4); padding: var(--s-4); border: 1px solid var(--border-1); border-radius: var(--r-2); background: var(--bg-2); } .direct-deployment-total span { color: var(--text-2); font-size: var(--fs-sm); } .direct-deployment-total strong { color: var(--text-0); font-size: var(--fs-xl); } .direct-deployment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-4); } .direct-deployment-grid section { padding: var(--s-4); border: 1px solid var(--border-1); border-radius: var(--r-2); background: var(--bg-2); } .direct-deployment-grid h3 { margin-bottom: var(--s-3); } .direct-deployment-grid dl { margin: 0; } .direct-deployment-grid dl > div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 6px 0; border-top: 1px solid var(--border-1); } .direct-deployment-grid dt { color: var(--text-2); } .direct-deployment-grid dd { margin: 0; color: var(--text-0); font-variant-numeric: tabular-nums; } body.direct-mode #recalc-status, body.direct-mode #worker-status, body.direct-mode #sim-warnings, body.direct-mode .kbd-toggle { display: none !important; } body.direct-mode .disclaimer { color: var(--text-3); } @media (max-width: 1180px) { #top-bar { gap: 8px; padding-left: 10px; padding-right: 10px; } .brand { padding-right: 8px; } .mode-tab { padding-left: 8px; padding-right: 8px; } #followX span { display: none; } } @media (max-width: 860px) { .architecture-btn { max-width: 38px; overflow: hidden; padding-left: 8px; padding-right: 8px; } .architecture-btn::first-letter { font-weight: 700; } .mode-tab .tab-icon { display: none; } .direct-deployment-grid { grid-template-columns: 1fr; } } .direct-section-title { margin: 15px 2px 8px; color: #aebcd3; font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .direct-inline-summary { margin: -2px 2px 10px; color: var(--text-2); font-size: 10px; font-variant-numeric: tabular-nums; } .direct-check-grid { display: grid; grid-template-columns: 1fr; gap: 7px; margin: 10px 2px 13px; padding: 10px 11px; border: 1px solid var(--border-1); border-radius: 0; color: var(--text-1); font-size: 11px; } .direct-check-grid > span { color: var(--text-2); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .direct-check-grid label { display: flex; align-items: center; gap: 8px; } .direct-check-grid input { accent-color: var(--accent); } /* ── Breadcrumb view navigation — floats over the scene, below the top bar ── */ .direct-nav { position: fixed; top: calc(var(--top-bar-h) + 10px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 3px 6px; background: var(--bg-1); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border: 1px solid var(--border-1); border-radius: var(--r-2); z-index: 15; } .direct-nav button { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); padding: 4px 8px; border-radius: var(--r-1); transition: background 120ms ease, color 120ms ease; } .direct-nav button:hover { color: var(--text-0); background: rgba(var(--mode-fg), 0.06); } .direct-nav button.active { color: var(--accent); background: var(--accent-soft); } .direct-nav-sep { color: var(--text-3); font-size: 0.625rem; user-select: none; } .direct-nav-reset { white-space: nowrap; } /* ── Deployment programme view ── */ .direct-deploy-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-2); margin: var(--s-3) 0 var(--s-4); } .direct-deploy-tile { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--bg-3); border: 1px solid var(--border-1); border-radius: var(--r-1); } .direct-deploy-tile strong { font-family: var(--font-mono); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; color: var(--text-0); } .direct-deploy-tile-label { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); } .direct-deploy-tile-detail { font-size: var(--fs-xs); color: var(--text-2); } .direct-deploy-heading { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--text-2); } .direct-deploy-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .direct-deploy-table th, .direct-deploy-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border-1); } .direct-deploy-table thead th { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); } .direct-deploy-table td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-0); } .direct-deploy-table tbody th { font-weight: 500; color: var(--text-1); } .direct-deploy-bars { display: flex; flex-direction: column; gap: 5px; } .direct-deploy-bar-row { display: grid; grid-template-columns: 110px 1fr 76px; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); } .direct-deploy-bar-label { color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .direct-deploy-bar-track { height: 6px; background: rgba(var(--mode-fg), 0.06); border-radius: 3px; overflow: hidden; } .direct-deploy-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .direct-deploy-bar-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--text-0); }