/** * 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); /* The dimming wash a viewport-covering layer paints over the page. Introduced for , but named generically because it is the same wash the dialog and drawer backdrops paint by hand as a literal rgba(0, 0, 0, 0.55) — migrating those two onto this token is a separate change with a visible diff, so it is left alone here rather than folded into an unrelated one. Defined in the base scope, not per theme: a scrim is dark in a light theme too, which is what both backdrops already assume. */ --scrim: color-mix(in srgb, var(--black) 55%, transparent); /* ── 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-demo-panel: 1425; /* ui-demo-panel's dock — see below */ --z-spotlight: 1450; /* ui-spotlight's scrim — see below */ --z-toast: 1500; /* notifications */ --z-tooltip: 1600; /* topmost, transient */ /* THE DEMO-ASSISTANT PAIR, and the ordering between them is the contract. --z-spotlight sits above every layer it is meant to DIM and below the one layer that must still be readable through it. Above --z-popover (and so above --z-modal) because a guided tour has to be able to point at a field inside an open dialog, and a scrim underneath the dialog would dim the page while leaving the dialog bright — the exact opposite of what was asked for. Below --z-toast because a notification is the application telling the user something, and a demo overlay must not be able to bury it. --z-demo-panel is a stop of its own rather than a reuse of --z-modal, and the reason is a real defect and not tidiness: `.drawer-backdrop` is already `z-index: var(--z-modal)`, so a docked panel sharing that value TIES with it and DOM order silently decides whether an opened drawer buries the narration. A two-way tie decided by document order is the exact failure the whole scale was introduced to remove. It sits above every modal surface so a dialog cannot bury the narration mid-demo, and deliberately BELOW --z-spotlight so that "the spotlight dims everything except the one thing under discussion" stays literally true — the panel included. Neither increments, so the tighter 25-point gaps here are safe where --z-modal's 200 is not. */ /* 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); } /* Shown instead of initials when the session names nobody. The icon strokes currentColor, so it must be given the same colour the initials carry. */ .user-avatar-icon { display: flex; 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; } /* ── ui-language-switcher (ND-620) ───────────────────────────────── Deliberately a parallel rule set rather than a shared .picker-menu refactor. Merging them would touch every brand-menu selector and put an unrelated visual regression risk on the branding surface inside an i18n change; the two can be unified later as its own change. Same tokens, same z-band, same focus-ring reasoning as .brand-menu above. */ .lang-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); } .lang-menu[hidden] { display: none; } /* The trigger is the positioning context for the panel above. */ ui-language-switcher { position: relative; } .lang-menu-header { padding: var(--spacing-5) var(--spacing-7) var(--spacing-4); border-bottom: 1px solid var(--border); } .lang-menu-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .lang-menu-items { padding: var(--spacing-3); } .lang-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; } .lang-menu-item:hover { background: var(--surface-2); } .lang-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .lang-menu-item.active { color: var(--accent); } .lang-menu-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lang-menu-check { display: inline-flex; align-items: center; flex: none; line-height: var(--lh-flush); color: var(--accent); } .lang-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; } /* ── A route could not honour ────────────────────────────── Occupies the MAIN COLUMN, in place of a module, because that is what it stands in for: no module was activated and none is going to be. Painting it anywhere else — a toast, a strip above the module — would leave the region the user is looking at blank, and a blank main region is indistinguishable from a shell that failed to boot, which is the failure this whole state exists to replace. Both the waiting state and the refusal use one box. They differ only in the icon's colour: the words carry the meaning, and a tinted panel for "opening…" would read as an error for the ~1s the normal case takes. See PluginApp._paintRouteNotice. */ ui-app > .app-route-notice { grid-column: 2; grid-row: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: var(--spacing-8); overflow-y: auto; } ui-app:not(:has(> ui-app-sidebar)) > .app-route-notice { grid-column: 1; } ui-app > .app-route-notice .arn-box { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-4); /* A measure, not a pixel width: this is a paragraph of prose and the readable line length is a function of the type, not of the viewport. */ max-width: 52ch; text-align: center; } ui-app > .app-route-notice .arn-icon { display: inline-flex; color: var(--text-muted); } ui-app > .app-route-notice .arn-icon > svg { width: 32px; height: 32px; } /* The refusal is the only one that is tinted, and only on the icon. */ ui-app > .app-route-notice[data-kind='refused'] .arn-icon { color: var(--warning); } ui-app > .app-route-notice .arn-heading { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--text); } ui-app > .app-route-notice .arn-detail { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-normal); line-height: var(--lh-relaxed); color: var(--text-muted); } /* THE ADDRESS THAT WAS ASKED FOR, shown verbatim — pathname AND query. It is the only remaining record of the request (this state deliberately does not rewrite the URL) and it is what a person pastes into a support request. --text, NOT --text-dim, AND NOT --text-muted EITHER — both were measured, in both themes, on the branded app. --text-dim (the original) came out at 2.37:1 dark / 2.25:1 light on --surface-2; --text-muted reached 4.59:1 dark but only 4.28:1 light, still under AA's 4.5:1 for text this size. At --fs-sm this is normal text, so 4.5:1 is the bar and 3:1 does not apply. The quiet-and-secondary instinct is wrong here anyway: this is the one piece of information the panel exists to preserve, and the monospace chip on a tinted ground already reads as secondary without being dimmed. */ ui-app > .app-route-notice .arn-address { margin: 0; } ui-app > .app-route-notice .arn-address > code { display: inline-block; padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-xs); background: var(--surface-2); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text); overflow-wrap: anywhere; } /* 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; } /* A wizard view () supplies its own , which is position:sticky and carries its own inner padding, exactly like the node header inside a detail view. The module's default view padding boxed that header in on all four sides, so the new-submission wizard was the only view whose header did not sit flush against the top of the module. Same treatment as the detail-view rule above; each ui-route's own still insets the body. Scoped to a router that is a DIRECT child of the view, so a router nested inside a detail panel is unaffected. */ ui-module:has(ui-view:not([style*='none']) > ui-router) .view-container { padding: 0; } /* ── 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); } /* THE RULE FOR EVERY ACCENT FILL IN THIS FILE: if the background is --accent, the foreground is var(--text-on-accent). Never white, never var(--white). --accent is a carrier token and six of the eight registered brands INVERT --text-on-accent away from white in at least one theme — it is #151516 on trident's lime, #061206 on greenscreen's phosphor, #14100a on meridian, #140d00 on amber, #0f1117 on nukor, #071019 on oms. Hardcoding the foreground silently discards that: white on trident's #c6fb50 measures 1.21:1 and on greenscreen's #52e03c 1.74:1, i.e. unreadable, which is exactly what was reported against `+ New Submission` (.uib-primary). Sixteen sites in this file did it; they are all now on the token. No fallback on the var(), deliberately: --text-on-accent is defined in the base :root scope at the top of this file AND in the light block, so an empty resolution is a real bug that must surface rather than be papered over by a hardcoded second argument. CSS-FALLBACK in tools/lint-sdk.mjs enforces that, and note it is line-based and does not skip comments — writing the banned two-argument form out in prose here is itself an error, which is how this comment was first drafted. */ .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .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: var(--text-on-accent); } .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; } /* `input` unqualified rather than input[type="text"], so ui-list-new-item's date and number controls are styled by the same rule as its text box — a native control left unstyled beside three styled siblings does not read as a different input type, it reads as a broken one. ND-1086. */ .form-field input, .form-field textarea, .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); /* NOT inherited by a form control — the UA supplies its own, and it differs by control: MEASURED in Chrome on this dialog, the text and number inputs came out "Arial" and the date input "monospace" while the labels around them were Inter. So a date box read as a different KIND of control rather than as a date one. .ff-input has always carried this line; this rule was written without it and the omission was invisible until ND-1086 rendered a control the UA styles differently. */ font-family: inherit; font-size: var(--fs-lg); outline: none; box-sizing: border-box; } .form-field textarea { min-height: 80px; resize: vertical; line-height: var(--lh-relaxed); } .form-field input:focus, .form-field textarea: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(--text-on-accent); } .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