/** * Plugin SDK v2 — Component Stylesheet * * Single source of truth for all ui-* element styles. * Edit this file directly. No build step required. */ /* ══════════════════════════════════════════════════════════════════ DEFAULT DESIGN TOKENS (on :root — cascades to all elements including portaled popovers/modals appended to ). Theme overrides are scoped to ui-app[theme] / ui-platform[theme]. ══════════════════════════════════════════════════════════════════ */ :root { --bg: #0f1117; --surface: #1a1d27; --surface-2: #242836; --surface-3: #2e3345; --border: #363b4e; --text: #e4e6ef; /* Must exist in the BASE scope, not only in :root[theme='light']. It is consumed unconditionally (.vs-segment[aria-pressed="true"] sets color: var(--text-on-accent) on a var(--accent) background), so defining it only for the light theme left it resolving to EMPTY in dark mode — the default — and the text fell back to whatever it inherited. Found by tools/sdk-test.mjs `tokens-resolved`. NOTE: white on --accent measures 4.02:1 in dark mode, which fails WCAG AA for normal text. Raising that is ND-101's scope; this only stops the value being empty. */ --text-on-accent: #ffffff; --text-muted: #8b8fa5; --text-dim: #5c6078; --accent: #7c6bf0; --accent-dim: rgba(124, 107, 240, 0.15); /* Derived from --accent so a carrier rebrand carries into hover states for free. Previously undefined while being referenced at two sites with DIFFERENT hardcoded fallbacks (#9688f5 and #9b8bf5), so the fallback was the only value that ever applied and the two disagreed. The 80% mix reproduces #9688f5 to within one step. Light theme mixes toward black instead — see :root[theme='light']. */ --accent-hover: color-mix(in srgb, var(--accent) 80%, var(--white)); --info: #3b82f6; --info-bg: rgba(59, 130, 246, 0.12); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.12); --success: #22c55e; --success-bg: rgba(34, 197, 94, 0.12); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.12); --muted: #6b7280; --white: #ffffff; --black: #000000; /* Aliased to --surface-3 rather than kept as its former hardcoded #2a2d3a. It was referenced once (the floating selection bar in ui-attachments) as `var(--surface-elevated, #2a2d3a)` while never being defined anywhere, so the dark literal was the only value that ever applied — including in light mode, where it rendered a dark bar on a light page. Aliasing fixes that, at the cost of a 4-step colour shift in dark mode on that one element. */ --surface-elevated: var(--surface-3); /* ── Chart series palette ────────────────────────────────────────── The multi-series identity palette, formerly hardcoded as hex literals in elements/dashboard/chart-utils.js where no carrier override could reach it — a rebranded deployment kept drawing OneShield purple in every chart. Values are unchanged from those literals; --chart-1 now tracks --accent so the primary series rebrands with no extra work. Deliberately NOT tokenised: the sequential and diverging ramps in chart-utils.js and ui-chart-heatmap.js. Those encode magnitude and direction, not identity — same reasoning as the status colours. */ --chart-1: var(--accent); --chart-2: #3b82f6; --chart-3: #22c55e; --chart-4: #f59e0b; --chart-5: #ef4444; --chart-6: #06b6d4; --chart-7: #ec4899; --chart-8: #8b5cf6; --chart-9: #14b8a6; --chart-10: #f97316; /* ── Carrier logo ───────────────────────────────────────────────── Consumed by .app-switcher-trigger::before. All four move together; the copy-paste recipe lives in the platform plugin's ui/branding/tokens.css. --brand-logo-on is the generation switch and it is load-bearing: a generated pseudo-element is a flex item and therefore consumes the trigger's `gap` even at zero size, which would shift the header of every deployment that ships no logo. `content: none` generates nothing at all, so the default here is byte-identical to having no logo seam. Width and height are both explicit because `background-size: contain` needs a box to fit into. Set width to match the logo's aspect ratio at the chosen height — verified in Chrome that `content: url()` with `width: auto` does NOT derive width from the intrinsic ratio, it takes the intrinsic width and squashes, so that shortcut is not available. */ --brand-logo: none; --brand-logo-on: none; --brand-logo-width: 96px; --brand-logo-height: 20px; /* Set to `none` when the logo already contains the company wordmark, so the app-switcher shows the mark alone instead of mark + duplicated text. */ --brand-wordmark-display: block; --spacing-1: 2px; --spacing-2: 4px; --spacing-3: 6px; --spacing-4: 8px; --spacing-5: 10px; --spacing-6: 12px; --spacing-7: 16px; --spacing-8: 24px; --spacing-9: 32px; --spacing-10: 48px; /* Radius scale. --radius-sm and --radius-full were referenced by newer sections but never defined, so 6 declarations silently resolved to 0. Values chosen to match the dominant raw usage already in this file: 6px appears 34 times (vs 4px 29), and 999px 5 times (vs 99px 3). ND-100 formalises the full scale and migrates the remaining raw values. */ --radius-2xs: 3px; --radius-xs: 4px; --radius-sm: 6px; --radius: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-full: 999px; --radius-circle: 50%; /* --radius-2xs/xs/md/circle added by ND-100 for values with 8+ uses that had no token: 4px (29 uses), 50% (17), 10px (11), 3px (8). The remaining long tail — 5px, 9px, 7px, 2px, 1px, 14px, 16px and a 99px that means the same as --radius-full — is left inline and reported by lint as shrink-only debt, rather than rounded into a neighbouring step. Rounding would be a redesign, and this commit is a refactor. */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', 'Fira Code', monospace; /* ── Typography (ND-100) ────────────────────────────────────────────────── 317 font-size, 156 font-weight and 50 line-height declarations were literal and none were tokenised, while colour and spacing were near-fully disciplined (2,029 var() uses). Values here are the EXACT ones already in use, so this moves no pixels; the scale is descriptive, not a redesign. Named --fs-/--fw-/--lh- rather than --text-*, because --text, --text-muted, --text-dim and --text-on-accent are COLOUR tokens. --text-sm sitting beside --text-muted would be actively misleading. Sizes cluster hard: 12/13/11/14/10px account for 290 of the 317 uses, which is why the scale is dense at the bottom and sparse above 16px. Ten declarations sit OFF this scale (8px, 12.5px, 15px, 17px, 22px and one font-size: 0) and are deliberately left inline — lint reports them as shrink-only debt so they stay visible instead of being quietly rounded into a neighbouring step, which would be a redesign disguised as a refactor. */ /* 8px and 17px are MISSING STEPS, not off-scale accidents: 8px is both sidebar chevrons and 17px is every dialog/drawer/hero title. Each was already used consistently for one role, so naming them changes nothing and removes 5 declarations from the off-scale list. */ --fs-3xs: 8px; --fs-2xs: 9px; --fs-xs: 10px; --fs-sm: 11px; --fs-base: 12px; --fs-md: 13px; --fs-lg: 14px; --fs-xl: 16px; --fs-title: 17px; /* dialog, drawer and hero titles */ --fs-2xl: 18px; --fs-3xl: 20px; --fs-4xl: 24px; --fs-5xl: 28px; --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Not typography — the technique for removing inline-box descender space under an icon. Named so it is on-scale rather than reported as a stray 0. */ --lh-flush: 0; --lh-none: 1; --lh-tight: 1.3; --lh-snug: 1.35; --lh-normal: 1.4; --lh-relaxed: 1.5; --lh-loose: 1.6; /* ── Stacking order (ND-100) ────────────────────────────────────────────── Before this, z-index was assigned ad hoc and had escalated to the sequence 1, 2, 5, 10, 11, 20, 100, 1000, 9999, 10000, 11000 with FOUR-, THREE- and TWO-WAY TIES. A tie means DOM order decides which element wins, so adding a component could silently reorder existing ones, and a select inside a dialog was 1000 against a dialog backdrop of 1000. There are two bands, and the distinction is what the old numbers were groping towards: LOCAL — the element stays inside its component's subtree, so it only has to clear its own siblings. These are small on purpose. GLOBAL — the element is mounted on document.body or covers the viewport, so its value is a real contract against every other global layer. Ordering here is deliberate, not inherited: modal < dropdown a dropdown opened inside a dialog must appear over it modal < toast a notification must never be hidden by a modal dropdown < popover a popover can be anchored to a dropdown item * < tooltip transient, pointer-events:none, must never be hidden Gaps of 100 leave room to insert a layer without renumbering, which is how the original values ran away. */ /* Local band */ --z-raised: 1; /* chips, prefixes, background layers */ --z-elevated: 2; /* list/section headers above their own rows */ --z-loading: 5; /* in-component loading veil */ --z-sticky: 10; /* sticky headers, resize handles */ --z-drag: 20; /* drag-and-drop overlay */ --z-menu: 100; /* in-subtree menus and dropdowns, global header */ /* ── Elevation (ND-100) ─────────────────────────────────────────────────── Named by ROLE, because the roles already existed and the values did not agree with them. Values are the EXACT ones previously inline, so this commit moves no pixels. What the naming exposes, and what should be consolidated as a deliberate design decision rather than smuggled into a refactor: dropdowns used THREE different shadows — --elev-dropdown (4 uses), --elev-menu (3 uses) and --elev-dropdown-sm (1 use, .lt-dropdown) modals used THREE — --elev-modal (dialog + drawer), --elev-overlay (document viewer) and --elev-modal-lg (app launcher) --elev-dropdown-sm, --elev-overlay, --elev-modal-lg and --elev-image are single-use and named so they are greppable; they are the candidates for collapsing into the tier above them. Focus and status rings (0 0 0 Npx, and the 0 0 4px status glows) are deliberately NOT in this scale — they are state indicators, not elevation, and belong with the colour tokens. */ --elev-raised: 0 1px 2px rgba(0, 0, 0, 0.2); --elev-card: 0 2px 8px rgba(0, 0, 0, 0.2); --elev-tooltip: 0 4px 12px rgba(0, 0, 0, 0.3); --elev-menu: 0 8px 24px rgba(0, 0, 0, 0.3); --elev-menu-up: 0 -8px 24px rgba(0, 0, 0, 0.3); --elev-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4); --elev-popover: 0 16px 48px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15); --elev-modal: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04); --elev-dropdown-sm: 0 4px 16px rgba(0, 0, 0, 0.3); --elev-overlay: 0 16px 48px rgba(0, 0, 0, 0.5); --elev-modal-lg: 0 24px 64px rgba(0, 0, 0, 0.35); --elev-image: 0 2px 12px rgba(0, 0, 0, 0.3); /* Global band — body-mounted or viewport-covering */ --z-modal: 1100; /* dialog, drawer, app launcher, document viewer (+n when stacked) */ --z-dropdown: 1300; /* body-mounted dropdowns */ --z-popover: 1400; /* body-mounted popovers */ --z-toast: 1500; /* notifications */ --z-tooltip: 1600; /* topmost, transient */ /* The gap above --z-modal is 200, not 100, because it is the ONE layer that increments: ui-dialog stacks nested dialogs at --z-modal + n. With a gap of 100 a 100-deep stack would tie with --z-dropdown, and a tie is precisely the defect this scale exists to remove. Every other gap can stay at 100 because nothing else counts upwards. */ } :root[density='compact'] { --spacing-1: 1px; --spacing-2: 2px; --spacing-3: 4px; --spacing-4: 6px; --spacing-5: 8px; --spacing-6: 8px; --spacing-7: 12px; --spacing-8: 16px; --spacing-9: 24px; --spacing-10: 32px; } :root[density='comfortable'] { --spacing-1: 3px; --spacing-2: 6px; --spacing-3: 8px; --spacing-4: 12px; --spacing-5: 14px; --spacing-6: 16px; --spacing-7: 24px; --spacing-8: 32px; --spacing-9: 40px; --spacing-10: 56px; } :root[theme='light'] { --bg: #ffffff; --surface: #f8f9fa; --surface-2: #f0f1f3; --surface-3: #e8e9ec; --border: #e0e2e7; --text: #1a1d27; --text-on-accent: #ffffff; --text-muted: #6b7280; --text-dim: #9ca3af; --accent: #6d5ce7; --accent-dim: rgba(109, 92, 231, 0.12); /* Mixes toward black, not white: on a light background a hover state has to darken to read as emphasis. The dark-theme definition mixes toward white. */ --accent-hover: color-mix(in srgb, var(--accent) 85%, var(--black)); --info: #2563eb; --info-bg: rgba(37, 99, 235, 0.08); --warning: #d97706; --warning-bg: rgba(217, 119, 6, 0.08); --success: #16a34a; --success-bg: rgba(22, 163, 74, 0.08); --danger: #dc2626; --danger-bg: rgba(220, 38, 38, 0.08); --muted: #9ca3af; --white: #ffffff; --black: #000000; } /* ══════════════════════════════════════════════════════════════════ PLUGIN-SDK TOKEN BRIDGE Maps SDK design tokens → plugin-sdk component tokens (--ui-*). Plugin-SDK shadow DOM components (ui-pdf-viewer, ui-marker-list, ui-floating-panel, ui-color-legend, etc.) inherit these via :root. ══════════════════════════════════════════════════════════════════ */ :root { --ui-background: var(--surface); --ui-foreground: var(--text); --ui-border: var(--border); --ui-muted: var(--surface-2); --ui-muted-foreground: var(--text-muted); --ui-accent: var(--accent-dim); --ui-ring: var(--accent); --ui-radius: var(--radius); } /* ══════════════════════════════════════════════════════════════════ RESET ══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { margin: 0; line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; /* Typography and palette belonged ONLY to ui-platform, so any page without the app shell fell back to the UA default and rendered in Times. The login page did exactly that. sdk.css has to be self-sufficient for a page that is not the app — ui-platform sets these on itself anyway, so the shell is unaffected. */ font-family: var(--font); color: var(--text); background: var(--bg); } /* An element with a display rule beats the UA stylesheet's [hidden] { display: none }, so `hidden` silently did nothing on ui-form, ui-button and every other element sdk.css gives a display to — the login page rendered its MFA step and its Back button permanently. This was already known and patched per-element for ui-report-builder; it needs to be general. Author-level and !important, because the element rules it must beat are also author-level. */ [hidden] { display: none !important; } /* ══════════════════════════════════════════════════════════════════ LAYOUT — ui-platform (Multi-App Shell) ══════════════════════════════════════════════════════════════════ */ ui-platform { display: grid; grid-template-rows: var(--header-height, 56px) 1fr; height: 100vh; max-height: 100vh; width: 100%; font-family: var(--font), serif; background: var(--bg); color: var(--text); /* Platform-specific layout tokens (not duplicating :root palette) */ --header-height: 56px; --header-bg: var(--surface); --header-border: var(--border); --header-text: var(--text); --header-accent: var(--accent); } ui-platform > ui-global-header { grid-row: 1; grid-column: 1; } ui-platform > ui-app { grid-row: 2; grid-column: 1; min-height: 0; height: 100%; overflow: hidden; } /* ══════════════════════════════════════════════════════════════════ LAYOUT — ui-global-header + child components ══════════════════════════════════════════════════════════════════ */ ui-global-header { display: flex; align-items: center; justify-content: space-between; height: var(--header-height, 56px); padding: 0 var(--spacing-7); background: var(--header-bg, var(--surface)); border-bottom: 1px solid var(--header-border, var(--border)); position: sticky; top: 0; z-index: var(--z-menu); } /* ── Header Actions (right side) ──────────────────────────────── */ ui-header-actions { display: flex; align-items: center; gap: var(--spacing-2); } ui-header-actions ui-theme-toggle { display: flex; align-items: center; } ui-header-actions .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; padding: 0; font-size: 0; } ui-header-actions .theme-toggle:hover { background: var(--surface-2); color: var(--text); } ui-header-actions .theme-toggle svg { width: 20px; height: 20px; } .header-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; position: relative; } .header-icon-btn:hover { background: var(--surface-2); color: var(--text); } .header-icon-btn svg { width: 20px; height: 20px; } /* ── App Switcher Trigger ─────────────────────────────────────── */ .app-switcher-trigger { display: inline-flex; align-items: center; gap: var(--spacing-4); padding: var(--spacing-3) var(--spacing-5); border-radius: var(--radius); border: none; background: transparent; color: var(--text); cursor: pointer; font-family: var(--font); font-size: var(--fs-lg); font-weight: var(--fw-medium); transition: background 0.15s; } .app-switcher-trigger:hover { background: var(--surface-2); } /* Carrier logo. The only brand-image seam in the v3 shell, and it is CSS-only on purpose: introducing a `logo` attribute on instead would put a carrier concern into the frozen authored vocabulary and drag in the contract, docs and IntelliSense gates for something no consumer HTML should have to know about. Tokens are defined in :root; a carrier sets them in the platform plugin's ui/branding/tokens.css. Renders nothing until --brand-logo-on is set to '' — see the note on that token for why the switch cannot be folded into the width. */ .app-switcher-trigger::before { content: var(--brand-logo-on); width: var(--brand-logo-width); height: var(--brand-logo-height); background-image: var(--brand-logo); background-size: contain; background-repeat: no-repeat; background-position: left center; flex: none; } ui-app-switcher { display: flex; align-items: center; gap: var(--spacing-1); } .app-switcher-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; padding: 0; } .app-switcher-sidebar-toggle:hover { background: var(--surface-2); color: var(--text); } .app-switcher-sidebar-toggle svg { width: 20px; height: 20px; } .app-switcher-label { white-space: nowrap; /* `block` is the default only because this is already a flex item and an inline span is blockified to exactly that — so declaring it moves nothing. It exists so a carrier whose logo already contains the wordmark can set --brand-wordmark-display: none and avoid rendering the name twice. */ display: var(--brand-wordmark-display); } .app-switcher-chevron svg { width: 14px; height: 14px; color: var(--text-muted); } /* ── Notification Bell ────────────────────────────────────────── */ .notification-trigger { position: relative; } .notification-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 var(--spacing-2); border-radius: var(--radius); background: var(--danger); color: var(--white); font-size: var(--fs-xs); font-weight: var(--fw-semibold); display: flex; align-items: center; justify-content: center; line-height: var(--lh-none); } /* ── User Avatar ──────────────────────────────────────────────── */ .user-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-circle); background: var(--accent-dim); border: 2px solid var(--border); overflow: hidden; } .user-avatar-img { width: 100%; height: 100%; object-fit: cover; } .user-avatar-initials { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--accent); } /* ── Popover ──────────────────────────────────────────────────── */ ui-popover { /* Tokens inherited from :root — no duplication needed */ font-family: var(--font); color: var(--text); opacity: 0; transform-origin: top left; transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; } ui-popover.popover-open { opacity: 1; pointer-events: auto; } .popover-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-popover); overflow: hidden; } /* ── Switcher Popover ─────────────────────────────────────────── */ .switcher-search { display: flex; align-items: center; gap: var(--spacing-4); padding: var(--spacing-5) var(--spacing-6); border-bottom: 1px solid var(--border); } .switcher-search-icon svg { width: 16px; height: 16px; color: var(--text-muted); } .switcher-search-input { flex: 1; border: none; background: transparent; color: var(--text); font-size: var(--fs-md); font-family: var(--font); outline: none; } /* ── Focus ring ── */ /* The rule above strips the UA outline on a borderless input, which left no focus indicator at all. Inset offset because the input sits flush inside a bordered search container. (ND-35) */ .switcher-search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .switcher-search-input::placeholder { color: var(--text-dim); } .switcher-list { padding: var(--spacing-3); max-height: 320px; overflow-y: auto; } .switcher-section-label { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-5) var(--spacing-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .switcher-section-label svg { width: 12px; height: 12px; } .switcher-item { display: flex; align-items: center; gap: var(--spacing-5); padding: var(--spacing-4) var(--spacing-5); border-radius: var(--radius); cursor: pointer; transition: background 0.1s; } .switcher-item:hover { background: var(--surface-2); } .switcher-item.active { background: var(--accent-dim); color: var(--accent); } .switcher-item-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; } .switcher-item-icon svg { width: 18px; height: 18px; } .switcher-item-label { font-size: var(--fs-md); font-weight: var(--fw-medium); } .switcher-empty { padding: var(--spacing-7); text-align: center; font-size: var(--fs-md); color: var(--text-muted); } .switcher-footer { border-top: 1px solid var(--border); padding: var(--spacing-3); } .switcher-view-all { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--spacing-4) var(--spacing-5); border: none; background: transparent; border-radius: var(--radius); color: var(--text-muted); font-size: var(--fs-md); font-family: var(--font); cursor: pointer; transition: background 0.1s, color 0.1s; } .switcher-view-all:hover { background: var(--surface-2); color: var(--text); } .switcher-view-all-icon svg { width: 14px; height: 14px; } /* ── App Launcher Modal ───────────────────────────────────────── */ .app-launcher-backdrop { /* Tokens inherited from :root — no duplication needed */ font-family: var(--font); color: var(--text); position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; animation: fade-in 0.15s ease; } .app-launcher-modal { width: min(520px, 92vw); max-height: min(420px, 80vh); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-modal-lg); display: flex; flex-direction: column; overflow: hidden; animation: scale-in 0.2s ease; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .launcher-header { border-bottom: 1px solid var(--border); } .launcher-search { display: flex; align-items: center; gap: var(--spacing-4); padding: var(--spacing-6) var(--spacing-7); } .launcher-search-icon svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; } .launcher-search-input { flex: 1; border: none; background: transparent; color: var(--text); font-size: var(--fs-lg); font-family: var(--font); outline: none; } /* ── Focus ring ── */ /* See .switcher-search-input — same borderless-input-in-a-container shape. (ND-35) */ .launcher-search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .launcher-search-input::placeholder { color: var(--text-dim); } .launcher-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--radius); color: var(--text-muted); cursor: pointer; transition: background 0.1s; } .launcher-close:hover { background: var(--surface-2); color: var(--text); } .launcher-close svg { width: 16px; height: 16px; } .launcher-grid { flex: 1; min-height: 0; overflow-y: auto; padding: var(--spacing-6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); align-content: start; } .launcher-card { display: flex; align-items: center; gap: var(--spacing-5); padding: var(--spacing-5) var(--spacing-6); border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-family: var(--font); text-align: left; transition: background 0.1s, border-color 0.1s, transform 0.1s; } .launcher-card:hover { background: var(--surface-2); border-color: var(--text-dim); } .launcher-card:active { transform: scale(0.98); } .launcher-card.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } .launcher-card-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius); background: var(--surface-2); flex-shrink: 0; } .launcher-card.active .launcher-card-icon { background: var(--accent-dim); } .launcher-card-icon svg { width: 16px; height: 16px; } .launcher-card-label { font-size: var(--fs-md); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .launcher-empty { grid-column: 1 / -1; padding: var(--spacing-10) var(--spacing-7); text-align: center; color: var(--text-muted); font-size: var(--fs-md); } /* ── Notification Popover ─────────────────────────────────────── */ .notification-header { padding: var(--spacing-6) var(--spacing-7); border-bottom: 1px solid var(--border); } .notification-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); } .notification-list { padding: var(--spacing-4); max-height: 280px; overflow-y: auto; } .notification-empty { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-4); padding: var(--spacing-8) var(--spacing-7); color: var(--text-muted); font-size: var(--fs-md); } .notification-empty-icon svg { width: 24px; height: 24px; opacity: 0.5; } .notification-item { padding: var(--spacing-5) var(--spacing-6); border-radius: var(--radius); cursor: pointer; transition: background 0.1s; } .notification-item:hover { background: var(--surface-2); } .notification-item.unread { border-left: 3px solid var(--accent); } .notification-item-text { font-size: var(--fs-md); color: var(--text); line-height: var(--lh-normal); } .notification-item-time { font-size: var(--fs-sm); color: var(--text-dim); margin-top: var(--spacing-2); } .notification-footer { border-top: 1px solid var(--border); padding: var(--spacing-4); } .notification-view-all { display: flex; align-items: center; gap: var(--spacing-3); width: 100%; padding: var(--spacing-4) var(--spacing-6); border: none; background: transparent; border-radius: var(--radius); color: var(--text-muted); font-size: var(--fs-md); font-family: var(--font); cursor: pointer; transition: background 0.1s, color 0.1s; } .notification-view-all:hover { background: var(--surface-2); color: var(--text); } .notification-view-all svg { width: 14px; height: 14px; } /* ── User Menu Popover ────────────────────────────────────────── */ .user-menu-header { padding: var(--spacing-6) var(--spacing-7) var(--spacing-5); border-bottom: 1px solid var(--border); } .user-menu-email { font-size: var(--fs-md); color: var(--text-muted); } .user-menu-items { padding: var(--spacing-3); } .user-menu-item { display: flex; align-items: center; gap: var(--spacing-5); width: 100%; padding: var(--spacing-4) var(--spacing-5); border: none; background: transparent; border-radius: var(--radius); color: var(--text); font-size: var(--fs-md); font-family: var(--font); cursor: pointer; transition: background 0.1s; text-align: left; } .user-menu-item:hover { background: var(--surface-2); } .user-menu-item svg { width: 16px; height: 16px; color: var(--text-muted); } .user-menu-item.danger { color: var(--danger); } .user-menu-item.danger svg { color: var(--danger); } .user-menu-divider { height: 1px; background: var(--border); margin: var(--spacing-2) 0; } .user-menu-sub-label { display: flex; align-items: center; gap: var(--spacing-5); padding: var(--spacing-3) var(--spacing-5); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .user-menu-sub-label svg { width: 14px; height: 14px; color: var(--text-muted); } .user-menu-sub-options { padding: 0 var(--spacing-3); } .user-menu-sub-item { padding: var(--spacing-3) var(--spacing-5); font-size: var(--fs-base); gap: var(--spacing-4); } .user-menu-sub-item svg { width: 14px; height: 14px; color: var(--accent); } .user-menu-sub-item.active { color: var(--accent); } .density-check-placeholder { display: inline-block; width: 14px; height: 14px; } /* ── Brand Switcher Popover ─────────────────────────────────────── . The trigger reuses .header-icon-btn so it is pixel- identical to the bell and the avatar beside it; only the menu is new. NOTHING HERE NAMES OR COLOURS A BRAND. The active entry is marked with a check glyph rather than a colour swatch, because a swatch would require the SDK to know each brand's palette — and a brand's colours live in the carrier's own :root[data-brand='…'] token block, which cannot be sampled without applying it. A check is honest; an invented swatch colour would not be. Nothing here declares a stacking level, deliberately — the panel is , which already owns the body-mounted --z-popover layer. Writing one on the trigger would create a second, competing answer to the same question. (Note for the next editor: the CSS-SCALE lint rule matches the literal property name in comments too, so do not spell it out here.) */ ui-header-actions ui-brand-switcher { display: flex; align-items: center; } /* The panel itself. Anchored to the trigger rather than body-mounted: it lives inside , which is not clipped and is already the header's own stacking context, so the in-subtree band is the correct one — a body-mounted layer would be claiming a global level it does not need. */ .brand-menu { position: absolute; top: calc(100% + var(--spacing-3)); right: 0; min-width: 220px; z-index: var(--z-menu); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-menu); } .brand-menu[hidden] { display: none; } /* The trigger is the positioning context for the panel above. */ ui-brand-switcher { position: relative; } .brand-menu-header { padding: var(--spacing-5) var(--spacing-7) var(--spacing-4); border-bottom: 1px solid var(--border); } .brand-menu-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .brand-menu-items { padding: var(--spacing-3); } .brand-menu-item { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-5); width: 100%; padding: var(--spacing-4) var(--spacing-5); border: none; background: transparent; border-radius: var(--radius); color: var(--text); font-size: var(--fs-md); font-family: var(--font); cursor: pointer; transition: background 0.1s, color 0.1s; text-align: left; } .brand-menu-item:hover { background: var(--surface-2); } /* The menu is body-mounted and reached by keyboard immediately on open, so it needs its own ring — the .uib rule does not apply to these buttons. (ND-35) */ .brand-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .brand-menu-item.active { color: var(--accent); } .brand-menu-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-menu-check { display: inline-flex; align-items: center; flex: none; line-height: var(--lh-flush); color: var(--accent); } .brand-menu-check svg { width: 14px; height: 14px; } /* ══════════════════════════════════════════════════════════════════ LAYOUT — ui-app ══════════════════════════════════════════════════════════════════ */ ui-app { display: grid; grid-template-columns: var(--sidebar-width, 260px) 1fr; grid-template-rows: 1fr; min-height: 100%; width: 100%; font-family: var(--font), serif; background: var(--bg); color: var(--text); transition: grid-template-columns 0.2s ease; } /* Disable transition during drag for instant feedback */ ui-app.sidebar-resizing { transition: none; } ui-app > ui-app-sidebar { grid-column: 1; grid-row: 1; min-width: 0; height: 100%; } ui-app > ui-module { grid-column: 2; grid-row: 1; min-width: 0; overflow-y: auto; } ui-app > ui-module ~ ui-module { display: none; } /* No sidebar — single column layout, module fills full width */ ui-app:not(:has(> ui-app-sidebar)) { grid-template-columns: 1fr; } ui-app:not(:has(> ui-app-sidebar)) > ui-module { grid-column: 1; } /* Collapsed sidebar — animate to zero width */ ui-app:has(> ui-app-sidebar[collapsed]) { grid-template-columns: 0px 1fr; } ui-app-sidebar[collapsed] { overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; } ui-app-sidebar:not([collapsed]) { opacity: 1; transition: opacity 0.15s ease 0.05s; } /* ══════════════════════════════════════════════════════════════════ SHELL — ui-app-sidebar ══════════════════════════════════════════════════════════════════ */ ui-app-sidebar { display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); overflow: hidden; } ui-app-sidebar .sidebar-header { padding: var(--spacing-7) var(--spacing-7) var(--spacing-6); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase; border-bottom: 1px solid var(--border); } ui-app-sidebar .sidebar-nav { padding: var(--spacing-4); flex: 1; overflow-y: auto; min-height: 0; } ui-app-sidebar .nav-item { display: flex; align-items: center; gap: var(--spacing-5); padding: var(--spacing-5) var(--spacing-6); border-radius: var(--radius); color: var(--text-muted); cursor: pointer; font-size: var(--fs-lg); font-weight: var(--fw-medium); transition: background 0.15s, color 0.15s; user-select: none; } ui-app-sidebar .nav-item > svg { flex-shrink: 0; } ui-app-sidebar .nav-item:hover { background: var(--surface-2); color: var(--text); } ui-app-sidebar .nav-item[aria-selected='true'] { background: var(--accent-dim); color: var(--accent); } ui-app-sidebar .nav-group-header { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-5) var(--spacing-6) var(--spacing-3); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 1.2px; color: var(--text-muted); text-transform: uppercase; cursor: pointer; user-select: none; position: sticky; top: 0; background: var(--surface); z-index: var(--z-raised); } ui-app-sidebar .nav-group-header:hover { color: var(--text); } ui-app-sidebar .nav-group-chevron { flex-shrink: 0; transition: transform 0.2s; } ui-app-sidebar .nav-group.collapsed .nav-group-chevron { transform: rotate(-90deg); } ui-app-sidebar .nav-group-items { overflow: hidden; transition: max-height 0.2s ease; max-height: 1000px; margin-left: var(--spacing-6); padding-left: var(--spacing-4); border-left: 1px solid var(--border); } ui-app-sidebar .nav-group-items .nav-item { font-size: var(--fs-md); padding: var(--spacing-3) var(--spacing-5); } ui-app-sidebar .nav-group.collapsed .nav-group-items { max-height: 0; } ui-app-sidebar .sidebar-footer { margin-top: auto; padding: var(--spacing-6); border-top: 1px solid var(--border); } ui-theme-toggle { display: block; } /* Base theme-toggle styles — works anywhere (breadcrumb, header, standalone) */ .theme-toggle { display: inline-flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-6); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-md); font-weight: var(--fw-medium); cursor: pointer; transition: all 0.15s; font-family: inherit; } .theme-toggle:hover { border-color: var(--accent); color: var(--text); } /* Sidebar override — full width */ ui-app-sidebar .theme-toggle { width: 100%; padding: var(--spacing-4) var(--spacing-6); } ui-app-sidebar .sidebar-branding { padding: var(--spacing-6) var(--spacing-7); font-size: var(--fs-sm); color: var(--text-dim); } ui-app-sidebar .sidebar-branding .version { color: var(--accent); font-weight: var(--fw-semibold); } /* ── Resize Handle ───────────────────────────────────────────── */ ui-app-sidebar[collapsible] { position: relative; } ui-app-sidebar .sidebar-resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 4px; cursor: col-resize; background: transparent; transition: background 0.15s; z-index: var(--z-sticky); } ui-app-sidebar .sidebar-resize-handle:hover, ui-app-sidebar .sidebar-resize-handle.dragging { background: var(--accent); } /* ══════════════════════════════════════════════════════════════════ MODULE — ui-module (breadcrumb + view container) ══════════════════════════════════════════════════════════════════ */ ui-module { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; } ui-module .view-container { padding: var(--spacing-8); flex: 1; min-height: 0; } /* When a detail-view is shown, lock the layout chain to its container so sidebar and content scroll independently within their grid cells. Uses 100% (not 100vh) so it respects ui-platform's grid when nested. */ ui-app:has(> ui-module:first-of-type ui-view:not([style*='none']) ui-detail-view) { height: 100%; max-height: 100%; overflow: hidden; } ui-module:has(ui-view:not([style*='none']) ui-detail-view) { overflow: hidden; } ui-module:has(ui-view:not([style*='none']) ui-detail-view) .view-container { overflow: hidden; padding: 0; display: flex; flex-direction: column; } /* ── View & Content Panel display fixes ── */ ui-view { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* ui-list-view (display:block) and ui-dashboard (no host box) do not constrain their own height, so a layout taller than the module is clipped by the module's overflow:hidden with NO scrollbar — the last rows are rendered but unreachable. Scoped to those two on purpose: ui-detail-view, ui-router and ui-chat-view already set overflow:hidden + min-height:0 on themselves, and making every ui-view a scroll container would silently re-anchor every position:sticky descendant to it. */ ui-view:has(> ui-list-view), ui-view:has(> ui-dashboard) { overflow-y: auto; } /* Simple views (no detail-view): direct ui-stack children scroll */ ui-view > ui-stack { flex: 1; min-height: 0; overflow-y: auto; } /* ══════════════════════════════════════════════════════════════════ BREADCRUMB — ui-breadcrumb ══════════════════════════════════════════════════════════════════ */ ui-breadcrumb { display: block; flex-shrink: 0; position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 var(--spacing-8); } ui-breadcrumb .breadcrumb-nav { display: flex; align-items: center; gap: 0; padding: var(--spacing-6) 0; font-size: var(--fs-lg); } ui-breadcrumb .crumb { display: inline-flex; align-items: center; gap: var(--spacing-3); color: var(--text-muted); text-decoration: none; cursor: pointer; font-weight: var(--fw-medium); transition: color 0.15s; } ui-breadcrumb .crumb > svg { flex-shrink: 0; } ui-breadcrumb .crumb:hover:not(.current) { color: var(--accent); } ui-breadcrumb .crumb.current { color: var(--text); font-weight: var(--fw-semibold); cursor: default; } ui-breadcrumb .crumb.crumb-home { color: var(--accent); font-weight: var(--fw-semibold); } ui-breadcrumb .crumb.crumb-home svg { opacity: 0.8; } ui-breadcrumb .crumb.crumb-home:hover { color: var(--accent-hover); } ui-breadcrumb .crumb.crumb-home:hover svg { opacity: 1; } ui-breadcrumb .crumb-sep { margin: 0 var(--spacing-5); color: var(--text-dim); font-size: var(--fs-base); user-select: none; } /* ══════════════════════════════════════════════════════════════════ SHARED TABLE STYLES (used by dashboard-table and list-view) ══════════════════════════════════════════════════════════════════ */ ui-dashboard-table table, ui-list-view table { width: 100%; border-collapse: collapse; } ui-list-view table, ui-list-view .lv-table { table-layout: fixed; } ui-dashboard-table th, ui-list-view th { text-align: left; padding: var(--spacing-5) var(--spacing-7); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); } ui-dashboard-table td, ui-list-view td { padding: var(--spacing-6) var(--spacing-7); font-size: var(--fs-lg); border-bottom: 1px solid var(--border); } ui-list-view td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; } ui-dashboard-table tr:last-child td, ui-list-view tr:last-child td { border-bottom: none; } ui-dashboard-table tr:hover td, ui-list-view tbody tr:hover td { background: var(--surface-2); } ui-dashboard-table tbody tr, ui-list-view tbody tr { cursor: pointer; } td.bold { font-weight: var(--fw-semibold); } /* ══════════════════════════════════════════════════════════════════ BADGES (shared) ══════════════════════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; padding: var(--spacing-2) var(--spacing-5); border-radius: var(--radius-full); font-size: var(--fs-base); font-weight: var(--fw-semibold); } .badge.info { background: var(--info-bg); color: var(--info); } .badge.warning { background: var(--warning-bg); color: var(--warning); } .badge.success { background: var(--success-bg); color: var(--success); } .badge.danger { background: var(--danger-bg); color: var(--danger); } .badge.muted { background: rgba(107, 114, 128, 0.15); color: var(--muted); } /* ══════════════════════════════════════════════════════════════════ BUTTONS (shared) ══════════════════════════════════════════════════════════════════ */ .btn { padding: var(--spacing-5) var(--spacing-7); border-radius: var(--radius); font-size: var(--fs-md); font-weight: var(--fw-semibold); cursor: pointer; border: 1px solid var(--border); transition: all 0.15s; background: transparent; color: var(--text-muted); } .btn:hover { border-color: var(--accent); color: var(--text); } .btn-primary { background: var(--accent); border-color: var(--accent); color: white; } .btn-primary:hover { opacity: 0.9; } .btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); } .btn-outline { background: transparent; color: var(--text-muted); } /* ══════════════════════════════════════════════════════════════════ UI-BUTTON — ══════════════════════════════════════════════════════════════════ */ ui-button { display: inline-flex; } /* A primary action that owns its container — a login submit, a dialog confirm. Without it the only way to get a full-width button was a bespoke class. */ ui-button[full-width] { display: flex; width: 100%; } ui-button[full-width] .uib { width: 100%; } .uib { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-3); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-weight: var(--fw-semibold); cursor: pointer; transition: all 0.15s ease; background: transparent; color: var(--text-muted); white-space: nowrap; line-height: var(--lh-none); -webkit-user-select: none; user-select: none; } /* ── Sizes ── */ .uib-xs { padding: var(--spacing-2) var(--spacing-5); font-size: var(--fs-sm); border-radius: var(--radius-sm); } .uib-sm { padding: var(--spacing-3) var(--spacing-6); font-size: var(--fs-base); } .uib-md { padding: var(--spacing-5) var(--spacing-7); font-size: var(--fs-md); } .uib-lg { padding: var(--spacing-6) var(--spacing-8); font-size: var(--fs-lg); } /* ── Icon-only sizing ── */ .uib-icon-only.uib-xs { padding: var(--spacing-2); width: 24px; height: 24px; } .uib-icon-only.uib-sm { padding: var(--spacing-3); width: 28px; height: 28px; } .uib-icon-only.uib-md { padding: var(--spacing-3); width: 34px; height: 34px; } .uib-icon-only.uib-lg { padding: var(--spacing-5); width: 42px; height: 42px; } /* ── Variants ── */ .uib-default:hover { border-color: var(--accent); color: var(--text); } .uib-primary { background: var(--accent); border-color: var(--accent); color: white; } .uib-primary:hover { opacity: 0.9; } .uib-outline { background: transparent; border-color: var(--border); color: var(--text-muted); } .uib-outline:hover { border-color: var(--accent); color: var(--text); } .uib-ghost { background: transparent; border-color: transparent; color: var(--text-muted); } .uib-ghost:hover { background: var(--surface-2); color: var(--text); } .uib-danger { background: transparent; border-color: var(--danger); color: var(--danger); } .uib-danger:hover { background: var(--danger-bg); } /* ── Disabled / Loading ── */ .uib-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ── Focus ring ── */ .uib:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Icon slot ── */ .uib-icon { display: inline-flex; align-items: center; flex-shrink: 0; } .uib-label { display: inline-block; } /* ── Inline spinner ── */ .uib-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: var(--radius-circle); animation: uib-spin 0.6s linear infinite; opacity: 0.7; } @keyframes uib-spin { to { transform: rotate(360deg); } } /* ══════════════════════════════════════════════════════════════════ UI-BADGE — ══════════════════════════════════════════════════════════════════ */ ui-badge { display: inline-block; } .bdg { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-5); border-radius: var(--radius-full); font-size: var(--fs-base); font-weight: var(--fw-semibold); font-family: var(--font); line-height: var(--lh-tight); white-space: nowrap; } .bdg-sm { padding: var(--spacing-1) var(--spacing-4); font-size: var(--fs-xs); } .bdg-icon { display: inline-flex; align-items: center; flex-shrink: 0; } /* ── Variants ── */ .bdg-default { background: var(--surface-2); color: var(--text-muted); } .bdg-success { background: var(--success-bg); color: var(--success); } .bdg-warning { background: var(--warning-bg); color: var(--warning); } .bdg-danger { background: var(--danger-bg); color: var(--danger); } .bdg-info { background: var(--info-bg); color: var(--info); } .bdg-secondary { background: rgba(107, 114, 128, 0.15); color: var(--muted); } .bdg-muted { background: var(--surface-2); color: var(--text-dim); } /* ══════════════════════════════════════════════════════════════════ UI-SPINNER — ══════════════════════════════════════════════════════════════════ */ ui-spinner { display: inline-flex; align-items: center; justify-content: center; } .spn { display: inline-flex; } .spn-circle { display: block; border-radius: var(--radius-circle); border: 2px solid var(--border); border-top-color: var(--accent); animation: spn-spin 0.6s linear infinite; } @keyframes spn-spin { to { transform: rotate(360deg); } } /* ── Sizes ── */ .spn-xs .spn-circle { width: 12px; height: 12px; border-width: 1.5px; } .spn-sm .spn-circle { width: 16px; height: 16px; border-width: 2px; } .spn-md .spn-circle { width: 24px; height: 24px; border-width: 2px; } .spn-lg .spn-circle { width: 36px; height: 36px; border-width: 3px; } /* ══════════════════════════════════════════════════════════════════ UI-ICON — ══════════════════════════════════════════════════════════════════ */ ui-icon { display: inline-flex; align-items: center; } .ico { display: inline-flex; align-items: center; line-height: var(--lh-flush); } /* ══════════════════════════════════════════════════════════════════ UI-STACK — ══════════════════════════════════════════════════════════════════ */ ui-stack { display: flex; flex-direction: column; } ui-stack[inline] { display: inline-flex; } /* ── Direction ── */ ui-stack[direction='row'] { flex-direction: row; align-items: center; } ui-stack[direction='column'] { flex-direction: column; } /* ── Gap ── */ ui-stack[gap='none'] { gap: 0; } ui-stack[gap='xs'] { gap: var(--spacing-2); } ui-stack[gap='sm'] { gap: var(--spacing-4); } ui-stack, ui-stack[gap='md'] { gap: var(--spacing-7); } ui-stack[gap='lg'] { gap: var(--spacing-8); } ui-stack[gap='xl'] { gap: var(--spacing-9); } /* ── Padding ── */ ui-stack[padding='none'] { padding: 0; } ui-stack[padding='xs'] { padding: var(--spacing-2); } ui-stack[padding='sm'] { padding: var(--spacing-4); } ui-stack[padding='md'] { padding: var(--spacing-7); } ui-stack[padding='lg'] { padding: var(--spacing-8); } ui-stack[padding='xl'] { padding: var(--spacing-9); } /* ── Align ── */ ui-stack[align='start'] { align-items: flex-start; } ui-stack[align='center'] { align-items: center; } ui-stack[align='end'] { align-items: flex-end; } ui-stack[align='stretch'] { align-items: stretch; } /* ── Justify ── */ ui-stack[justify='start'] { justify-content: flex-start; } ui-stack[justify='center'] { justify-content: center; } ui-stack[justify='end'] { justify-content: flex-end; } ui-stack[justify='between'] { justify-content: space-between; } ui-stack[justify='around'] { justify-content: space-around; } /* ── Wrap (default on for row) ── */ ui-stack[wrap] { flex-wrap: wrap; } ui-stack[direction='row'] { flex-wrap: wrap; } ui-stack[wrap='false'] { flex-wrap: nowrap; } /* ── Semantic surface variants ── */ ui-stack[surface] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--spacing-7) var(--spacing-7); } /* Fill the viewport. With align/justify this centres content on a page that has no surrounding layout — an unauthenticated page. `min-height` rather than `height` so a tall card scrolls instead of being clipped. */ ui-stack[full-height] { min-height: 100vh; box-sizing: border-box; } /* max-width itself is set as an inline style by _applyMaxWidth(), because it takes an arbitrary length rather than a token. This only makes the constraint effective inside a flex parent, where the default is to stretch. */ ui-stack[max-width] { width: 100%; box-sizing: border-box; } /* ══════════════════════════════════════════════════════════════════ DASHBOARD — ui-dashboard-hero, ui-dashboard-grid, ui-metric-card, ui-dashboard-table ══════════════════════════════════════════════════════════════════ */ /* Dashboard Hero */ ui-dashboard-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--spacing-2) 0 var(--spacing-7); gap: var(--spacing-4) var(--spacing-7); } ui-dashboard-hero .dh-title-section { display: flex; flex-direction: column; gap: var(--spacing-1); } ui-dashboard-hero .dh-title { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text); margin: 0; line-height: var(--lh-tight); } ui-dashboard-hero .dh-subtitle { font-size: var(--fs-md); color: var(--text-muted); margin: 0; } ui-dashboard-hero .dh-actions { display: flex; gap: var(--spacing-5); align-items: center; flex-shrink: 0; } ui-dashboard-hero ui-dashboard-toolbar { flex-basis: 100%; padding: 0; } ui-dashboard-grid { display: grid; gap: 1rem; margin-bottom: var(--spacing-8); } ui-dashboard-grid[span='full'], ui-dashboard-grid [span='full'] { grid-column: 1 / -1; } /* Metric Grid — Responsive container for metric cards, charts, and graphs */ ui-metric-grid { display: grid; container-type: inline-size; gap: 1rem; grid-template-columns: repeat(var(--mg-cols, 4), 1fr); align-items: stretch; min-width: 0; } ui-metric-grid[span='full'], ui-metric-grid [span='full'] { grid-column: 1 / -1; } @container (max-width: 900px) { ui-metric-grid { grid-template-columns: repeat(var(--mg-cols-tablet, 2), 1fr); } } @container (max-width: 500px) { ui-metric-grid { grid-template-columns: repeat(var(--mg-cols-mobile, 1), 1fr); } } /* Metric Card — Base (default: flat layout) */ ui-metric-card { display: flex; flex-direction: row; align-items: center; gap: var(--spacing-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--spacing-6) var(--spacing-7); transition: border-color 0.15s, background 0.15s; min-width: 0; flex: 1; } ui-metric-card:hover { border-color: color-mix(in srgb, var(--text-muted) 30%, transparent); background: color-mix(in srgb, var(--surface) 95%, white); } ui-metric-card .metric-body { display: flex; flex: 1; flex-direction: column; align-items: flex-end; gap: var(--spacing-1); min-width: 0; text-align: right; } ui-metric-card .metric-icon { width: 32px; height: 32px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } ui-metric-card .metric-icon svg { width: 16px; height: 16px; } ui-metric-card .metric-value { font-size: var(--fs-4xl); font-weight: var(--fw-extrabold); line-height: var(--lh-none); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--text); } ui-metric-card .metric-label { font-size: var(--fs-base); color: var(--text-dim); font-weight: var(--fw-medium); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Metric Card — Trend indicator */ ui-metric-card .metric-trend { display: inline-flex; align-items: center; gap: var(--spacing-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); margin-left: auto; flex-shrink: 0; padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-xs); background: color-mix(in srgb, var(--text-muted) 8%, transparent); } ui-metric-card .metric-trend--up { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); } ui-metric-card .metric-trend--down { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); } ui-metric-card .metric-trend--flat { color: var(--text-muted); } /* Metric Card — Size: sm */ ui-metric-card[size='sm'] { padding: var(--spacing-4) var(--spacing-6); gap: var(--spacing-4); border-radius: var(--radius); } ui-metric-card[size='sm'] .metric-icon { width: 26px; height: 26px; border-radius: var(--radius-sm); } ui-metric-card[size='sm'] .metric-icon svg { width: 13px; height: 13px; } ui-metric-card[size='sm'] .metric-value { font-size: var(--fs-xl); font-weight: var(--fw-bold); } ui-metric-card[size='sm'] .metric-label { font-size: var(--fs-xs); } ui-metric-card[size='sm'] .metric-trend { font-size: var(--fs-xs); padding: var(--spacing-1) var(--spacing-2); } /* Metric Card — Size: lg */ ui-metric-card[size='lg'] { padding: var(--spacing-7) var(--spacing-8); gap: var(--spacing-7); border-radius: var(--radius-lg); } ui-metric-card[size='lg'] .metric-icon { width: 44px; height: 44px; border-radius: var(--radius-md); } ui-metric-card[size='lg'] .metric-icon svg { width: 22px; height: 22px; } ui-metric-card[size='lg'] .metric-value { font-size: var(--fs-5xl); } ui-metric-card[size='lg'] .metric-label { font-size: var(--fs-md); } ui-metric-card[size='lg'] .metric-trend { font-size: var(--fs-base); } /* Metric Card — Layout: vertical (icon top, body below) */ ui-metric-card[layout='vertical'] { flex-direction: column; align-items: flex-start; gap: var(--spacing-6); padding: var(--spacing-7) var(--spacing-7); border-radius: var(--radius-lg); } ui-metric-card[layout='vertical'] .metric-icon { width: 36px; height: 36px; border-radius: var(--radius); } ui-metric-card[layout='vertical'] .metric-icon svg { width: 18px; height: 18px; } ui-metric-card[layout='vertical'] .metric-body { flex-direction: column; align-items: flex-start; gap: var(--spacing-1); } ui-metric-card[layout='vertical'] .metric-value { font-size: var(--fs-5xl); font-weight: var(--fw-bold); } ui-metric-card[layout='vertical'] .metric-label { font-size: var(--fs-base); } ui-metric-card[layout='vertical'] .metric-trend { margin-left: 0; margin-top: var(--spacing-2); } /* Metric Card — Layout: horizontal (icon left, body right) */ ui-metric-card[layout='horizontal'] { flex-direction: row; align-items: center; gap: var(--spacing-6); } ui-metric-card[layout='horizontal'] .metric-body { flex: 1; min-width: 0; } /* Metric Card — Layout: compact (icon + value inline, label below) */ ui-metric-card[layout='compact'] { flex-direction: column; gap: var(--spacing-3); } ui-metric-card[layout='compact'] .metric-icon { position: absolute; top: 12px; right: 12px; } ui-metric-card[layout='compact'] { position: relative; } /* Metric Card — Layout: inline (no border, pure inline stat — minimal height) */ ui-metric-card[layout='inline'] { flex-direction: row; align-items: center; gap: var(--spacing-4); background: none; border: none; border-radius: 0; padding: var(--spacing-3) 0; } ui-metric-card[layout='inline'] .metric-icon { width: 22px; height: 22px; border-radius: 5px; } ui-metric-card[layout='inline'] .metric-icon svg { width: 12px; height: 12px; } ui-metric-card[layout='inline'] .metric-body { flex-direction: row; align-items: baseline; gap: var(--spacing-3); } ui-metric-card[layout='inline'] .metric-value { font-size: var(--fs-xl); font-weight: var(--fw-bold); } ui-metric-card[layout='inline'] .metric-label { font-size: var(--fs-sm); } ui-metric-card[layout='inline'] .metric-trend { padding: var(--spacing-1) var(--spacing-2); font-size: var(--fs-xs); } ui-metric-card[layout='inline']:hover { border-color: transparent; background: none; } /* Metric Card — Layout: flat (same as base default — explicit attr is a no-op) */ /* Metric Card — Icon Size overrides */ ui-metric-card[icon-size='sm'] .metric-icon { width: 24px; height: 24px; font-size: var(--fs-base); border-radius: var(--radius-sm); } ui-metric-card[icon-size='lg'] .metric-icon { width: 48px; height: 48px; font-size: var(--fs-4xl); border-radius: var(--radius-md); } /* Color variants for metric icon/value */ ui-metric-card[color='info'] .metric-icon { background: var(--info-bg); color: var(--info); } ui-metric-card[color='warning'] .metric-icon { background: var(--warning-bg); color: var(--warning); } ui-metric-card[color='success'] .metric-icon { background: var(--success-bg); color: var(--success); } ui-metric-card[color='danger'] .metric-icon { background: var(--danger-bg); color: var(--danger); } ui-metric-card:not([color]) .metric-icon { background: var(--accent-dim); color: var(--accent); } ui-metric-card:not([color]) .metric-value { color: var(--text); } /* Dashboard Table */ ui-dashboard-table { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } ui-dashboard-table .table-header { padding: var(--spacing-7) var(--spacing-7); font-size: 15px; font-weight: var(--fw-semibold); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } ui-dashboard-table .empty { padding: var(--spacing-8) var(--spacing-7); text-align: center; color: var(--text-dim); font-size: var(--fs-md); } ui-dashboard-table .table-view-all { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--accent); text-decoration: none; transition: color 0.15s; } ui-dashboard-table .table-view-all:hover { color: var(--accent-hover); text-decoration: underline; } /* ══════════════════════════════════════════════════════════════════ LIST VIEW — ui-list-view ══════════════════════════════════════════════════════════════════ */ ui-list-view { display: block; } /* ── Param Fields ── */ ui-list-view .lv-param-fields { display: flex; align-items: center; gap: var(--spacing-6); margin-bottom: var(--spacing-4); } /* ── Toolbar ── */ ui-list-view .lv-toolbar { display: flex; align-items: center; gap: var(--spacing-6); margin-bottom: var(--spacing-7); flex-wrap: wrap; } ui-list-view .lv-search-box { flex: 1; min-width: 200px; display: flex; } ui-list-view .lv-search-input { flex: 1; padding: var(--spacing-5) var(--spacing-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius) 0 0 var(--radius); color: var(--text); font-size: var(--fs-lg); outline: none; } ui-list-view .lv-search-input:focus { border-color: var(--accent); } ui-list-view .lv-search-field { padding: var(--spacing-5) var(--spacing-5); background: var(--surface-2); border: 1px solid var(--border); border-left: none; border-radius: 0 var(--radius) var(--radius) 0; color: var(--text-muted); font-size: var(--fs-md); outline: none; } /* ── Focus ring ── */ /* Native (ui-list-toolbar.js:139) with its outline removed and nothing in its place, so keyboard users had no indication it was the active control. (ND-35) */ ui-list-toolbar .lt-search-field:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } ui-list-toolbar .lt-filters { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-3); flex: 1; min-width: 0; overflow-x: auto; } ui-list-toolbar .lt-filters::-webkit-scrollbar { display: none; } ui-list-toolbar .lt-facet-pill { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: var(--fs-md); cursor: pointer; white-space: nowrap; transition: border-color 0.15s, background 0.15s; line-height: var(--lh-normal); } ui-list-toolbar .lt-facet-pill:hover { border-color: var(--accent); } ui-list-toolbar .lt-facet-pill[aria-expanded="true"] { border-color: var(--accent); background: var(--surface-3); } ui-list-toolbar .lt-facet-label { color: var(--text-muted); font-size: var(--fs-base); } ui-list-toolbar .lt-facet-value { font-weight: var(--fw-medium); } ui-list-toolbar .lt-facet-pill ui-icon { color: var(--text-muted); transition: transform 0.15s; } ui-list-toolbar .lt-facet-pill[aria-expanded="true"] ui-icon { transform: rotate(180deg); } ui-list-toolbar .lt-add-filter { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4); background: none; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: var(--fs-md); cursor: pointer; white-space: nowrap; transition: border-color 0.15s, color 0.15s; } ui-list-toolbar .lt-add-filter:hover { border-color: var(--accent); color: var(--text); } ui-list-toolbar .lt-reset { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4); background: none; border: none; color: var(--text-muted); font-size: var(--fs-base); cursor: pointer; white-space: nowrap; transition: color 0.15s; } ui-list-toolbar .lt-reset:hover { color: var(--danger); } /* Dropdown (portaled to body) */ .lt-dropdown { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--spacing-2) 0; z-index: var(--z-dropdown); box-shadow: var(--elev-dropdown-sm); max-height: 240px; overflow-y: auto; font-family: var(--font); } .lt-dropdown-item { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-5); color: var(--text); font-size: var(--fs-md); cursor: pointer; transition: background 0.1s; } .lt-dropdown-item:hover { background: var(--surface-3); } .lt-dropdown-item.lt-selected { color: var(--accent); font-weight: var(--fw-medium); } .lt-dropdown-count { color: var(--text-muted); font-size: var(--fs-base); margin-left: auto; } .lt-check { font-size: var(--fs-lg); line-height: 1; color: var(--text-muted); } .lt-dropdown-item.lt-selected .lt-check { color: var(--accent); } ui-list-toolbar .lt-facet-pill.lt-facet-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } ui-list-toolbar .lt-facet-pill.lt-facet-active .lt-facet-value { color: var(--accent); } /* ── Dynamic List Filters (ui-list-filters) ── */ ui-list-filters { display: flex; flex-direction: column; gap: var(--spacing-3); flex-basis: 100%; } ui-list-filters .lf-dimension { display: flex; align-items: center; gap: var(--spacing-4); } ui-list-filters .lf-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); white-space: nowrap; min-width: fit-content; } ui-list-filters .lf-chips-wrap { position: relative; min-width: 0; flex: 1; } ui-list-filters .lf-chips { display: flex; gap: var(--spacing-3); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } ui-list-filters .lf-chips::-webkit-scrollbar { display: none; } ui-list-filters .lf-chip { padding: var(--spacing-3) var(--spacing-6); border-radius: var(--radius-full); font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--text-muted); background: transparent; border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; white-space: nowrap; flex-shrink: 0; } ui-list-filters .lf-chip:hover { border-color: var(--accent); color: var(--text); } ui-list-filters .lf-chip[aria-selected='true'] { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } ui-list-filters .lf-chip-count { font-size: var(--fs-sm); opacity: 0.7; margin-left: var(--spacing-2); } /* ── Table Card ── */ ui-list-view .lv-table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; position: relative; } /* ── Sort Headers ── */ ui-list-view .lv-th-sortable { cursor: pointer; user-select: none; transition: color 0.15s; } ui-list-view .lv-th-sortable:hover { color: var(--text); } ui-list-view .lv-th-sortable:hover .lv-sort-icon { color: var(--accent); } ui-list-view .lv-sort-icon { font-size: var(--fs-sm); color: var(--text-dim); transition: color 0.15s; } ui-list-view .lv-sort-icon.lv-sort-active { color: var(--accent); } /* ── Rows ── */ ui-list-view .lv-row { cursor: pointer; transition: background 0.1s; } ui-list-view .lv-cell-bold { font-weight: var(--fw-semibold); } /* Cell renderers ui-column declares. Without these the markup would be emitted against undefined classes and render identically to plain text — a renderer that appears implemented but is not. */ ui-list-view .lv-mono { font-family: var(--mono); font-size: var(--fs-sm); } ui-list-view .lv-muted { color: var(--text-muted); } /* ── Empty + Loading ── */ ui-list-view .lv-empty { padding: var(--spacing-10) var(--spacing-8); text-align: center; color: var(--text-dim); font-size: var(--fs-lg); } /* A failed load is not an empty list, and must not be dimmed like one. */ ui-list-view .lv-empty.lv-empty-error { color: var(--color-danger-fg, var(--text-primary)); } ui-list-view .lv-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.2); z-index: var(--z-loading); } ui-list-view .lv-loading[hidden] { display: none; } ui-list-view .lv-spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: var(--radius-circle); animation: lv-spin 0.6s linear infinite; } @keyframes lv-spin { to { transform: rotate(360deg); } } /* ── Pagination ── */ ui-list-view .lv-pagination { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-6) 0; margin-top: var(--spacing-6); } ui-list-view .lv-page-info { font-size: var(--fs-md); color: var(--text-muted); } ui-list-view .lv-page-controls { display: flex; align-items: center; gap: var(--spacing-2); } ui-list-view .lv-page-btn { padding: var(--spacing-3) var(--spacing-6); font-size: var(--fs-md); font-weight: var(--fw-medium); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; transition: all 0.15s; } ui-list-view .lv-page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } ui-list-view .lv-page-btn:disabled { opacity: 0.4; cursor: not-allowed; } ui-list-view .lv-page-numbers { display: flex; align-items: center; gap: var(--spacing-1); } ui-list-view .lv-page-num { min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; } ui-list-view .lv-page-num:hover { background: var(--surface-2); color: var(--text); } ui-list-view .lv-page-num.lv-page-active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: var(--fw-semibold); } ui-list-view .lv-page-ellipsis { padding: 0 var(--spacing-3); color: var(--text-dim); font-size: var(--fs-lg); } /* ══════════════════════════════════════════════════════════════════ DIALOG (shared overlay) ══════════════════════════════════════════════════════════════════ */ .overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: var(--z-menu); align-items: center; justify-content: center; } .overlay.open { display: flex; } .dialog { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--spacing-8); width: 420px; max-width: 90vw; } .dialog h3 { margin-bottom: var(--spacing-7); font-size: var(--fs-2xl); } .form-field { margin-bottom: var(--spacing-7); } .form-field label { display: block; font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-muted); margin-bottom: var(--spacing-3); text-transform: uppercase; letter-spacing: 0.3px; } .form-field input, .form-field select { width: 100%; padding: var(--spacing-5) var(--spacing-6); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: var(--fs-lg); outline: none; box-sizing: border-box; } .form-field input:focus, .form-field select:focus { border-color: var(--accent); } /* Custom SDK Select Dropdown */ .sdk-select { position: relative; } .sdk-select-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--spacing-5) var(--spacing-6); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: var(--fs-lg); cursor: pointer; box-sizing: border-box; transition: border-color 0.15s; } .sdk-select-trigger:hover { border-color: var(--text-muted); } .sdk-select-has-value { color: var(--text); } .sdk-select-arrow { font-size: var(--fs-base); color: var(--text-muted); } .sdk-select-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--spacing-2); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elev-dropdown); max-height: 240px; overflow-y: auto; z-index: var(--z-menu); } .sdk-select-dropdown.open { display: block; } .sdk-select-option { padding: var(--spacing-4) var(--spacing-6); color: var(--text); font-size: var(--fs-lg); cursor: pointer; transition: background 0.1s; } .sdk-select-option:hover { background: var(--accent); color: var(--white); } .sdk-select-option:first-child { border-radius: var(--radius) var(--radius) 0 0; } .sdk-select-option:last-child { border-radius: 0 0 var(--radius) var(--radius); } .form-actions { display: flex; gap: var(--spacing-4); justify-content: flex-end; margin-top: var(--spacing-8); } .required { color: var(--danger); } /* ══════════════════════════════════════════════════════════════════ DIALOG — ui-dialog (v2 declarative modal) ══════════════════════════════════════════════════════════════════ */ ui-dialog { display: contents; } /* ─── Backdrop ─── */ .dlg-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: var(--z-modal); align-items: center; justify-content: center; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: dlg-fade-in 0.15s ease-out; } .dlg-backdrop.dlg-open { display: flex; } @keyframes dlg-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ─── Panel ─── */ .dlg-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; max-height: 90vh; box-shadow: var(--elev-modal); animation: dlg-slide-up 0.2s ease-out; /* Inert, deliberately left in place: .dlg-panel carries no tabindex (ui-dialog.js:241) so it can never receive focus, and an unfocusable element cannot render a focus ring. Do NOT "fix" this by adding a :focus-visible ring — it would never match. The real gap is that _focusFirst() (ui-dialog.js:462) silently does nothing when a dialog has no focusable children, leaving focus outside the modal. Resolved by ND-81's migration to native