/* @drycraf/scene 0.1.0: drycraf.com's look for other pages. Built from packages/scene in github.com/ozx4/web; don't edit. */

/* quantico-latin-400-normal */
@font-face {
  font-family: 'Quantico';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/quantico-latin-400-normal.woff2) format('woff2');
}

/* quantico-latin-700-normal */
@font-face {
  font-family: 'Quantico';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/quantico-latin-700-normal.woff2) format('woff2');
}

/* drycraf brand tokens. Colours are taken from the hub's brand SVGs; Quantico is the
   web kit's wordmark face. */

:root {
  --night: #241238;   /* ink: the mono mark's ground */
  --dusk: #381c57;    /* monogram disc */
  --slate: #2c3350;   /* the hat */
  --vellum: #ede6fa;  /* light ink */
  --heather: #a090c9; /* beard shadow */
  --ember: #ee8a5e;   /* the prompt at the staff's tip */
  --rune: #63d69b;    /* the hat's trim */
  --rune-ch: 99 214 155;  /* the same two, as channels for the ground's canvas */
  --ember-ch: 238 138 94;

  --face: "Quantico", system-ui, sans-serif;

  /* A modular scale on a 4:3 ratio (perfect fourth). */
  --step--1: 0.875rem;
  --step-0: 1.125rem;
  --step-1: 1.5rem;
  --step-2: 2rem;
  --step-3: 2.667rem;
  --step-4: clamp(2.667rem, 6vw, 4.75rem);

  --measure: 34em;
  --gutter: clamp(1rem, 4vw, 3rem);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--night);
  color: var(--vellum);
  font-family: var(--face);
  font-size: 100%;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body { margin: 0; font-size: var(--step-0); }

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--ember); }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: var(--gutter); top: -3rem;
  background: var(--vellum); color: var(--night); padding: 0.5rem 0.75rem;
}
.skip:focus { top: 1rem; }

.wrap { width: min(72rem, 100% - 2 * var(--gutter)); margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* @drycraf/scene: drycraf.com's look for other pages, lifted from the brand-site mock (sites/drycraf/src/mock/page.astro)
   with every class prefixed dc- so it can sit beside a product's own styles. The build puts the Quantico faces and the
   brand tokens (packages/brand/tokens.css) ahead of this file. No data: URLs and no inline code: it runs under
   default-src 'none' with every other source 'self'. */

:root {
  --dc-bar: 4.5rem;
  --dc-size: 1.0625rem;
  --dc-gutter: clamp(1rem, 6vw, 6rem);
  --dc-line: rgb(160 144 201 / 0.14);
  --dc-surface: rgb(24 12 38 / 0.97);
  --dc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 60rem) { :root { --dc-bar: 3.75rem; } }

/* The ground. scene() puts three fixed canvases under the page: the nebula shader, the grid and its floaters, and the
   tracers. The page's own background must stay transparent so they show. */
html.dc-scene { --ground-strength: 1.4; background: #120a1c; }
html.dc-scene body { background: transparent; font-size: var(--dc-size); }
.dc-nebula, .dc-ground, .dc-tracers { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dc-nebula { z-index: -3; }
.dc-ground { z-index: -2; }
.dc-tracers { z-index: -1; }

/* Panes: a translucent tone over the ground, with a hairline at the top that glows in that tone. Mint is the one
   call to action, never a working pane. */
.dc-pane { position: relative; }
.dc-pane::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--dc-edge, rgb(99 214 155 / 0.35)), transparent); }
.dc-tone-night { background: rgb(36 18 56 / 0.12); }
.dc-tone-deep { background: rgb(14 7 24 / 0.32); --dc-edge: rgb(160 144 201 / 0.35); }
.dc-tone-dusk { background: rgb(46 23 72 / 0.18); --dc-edge: rgb(160 144 201 / 0.45); }
.dc-tone-moss { background: rgb(10 40 32 / 0.22); --dc-edge: rgb(99 214 155 / 0.55); }
.dc-tone-hearth { background: rgb(50 18 36 / 0.2); --dc-edge: rgb(238 138 94 / 0.5); }

/* Panels. Glass for cards over the ground; the solid surface, with its ember hairline, for anything read closely:
   tables, long text, dialogs. */
.dc-glass { background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0) 40%), rgb(24 12 38 / 0.72); backdrop-filter: blur(12px) saturate(1.2); border: 1px solid rgb(160 144 201 / 0.28); border-radius: 12px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 24px 60px -28px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(0 0 0 / 0.2); }
.dc-surface { position: relative; background: var(--dc-surface); border: 1px solid rgb(160 144 201 / 0.22); box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.9); }
.dc-surface::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgb(238 138 94 / 0.6), transparent); pointer-events: none; }

/* The bar: fixed at the top, the lockup at its left (it opens the switcher), links, then the actions at its right. */
.dc-bar { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--dc-bar); display: flex; align-items: center; gap: 2rem; padding-inline: var(--dc-gutter); background: rgb(24 12 38 / 0.92); border-bottom: 1px solid var(--dc-line); }
.dc-bar nav { display: flex; gap: 1.75rem; margin-left: 1rem; }
.dc-bar nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--heather); text-decoration: none; transition: color 0.15s; }
.dc-bar.dc-bar-compact nav a { min-height: 38px; }
.dc-bar nav a:hover, .dc-bar nav a[aria-current] { color: var(--vellum); }
/* Where you are in the bar: an ember line of light along its foot. */
.dc-bar nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--ember); box-shadow: 0 0 10px rgb(238 138 94 / 0.8); transform: scaleX(0); transition: transform 0.2s var(--dc-ease); }
.dc-bar nav a:hover::after { transform: scaleX(0.4); opacity: 0.6; }
.dc-bar nav a[aria-current]::after { transform: none; opacity: 1; }
.dc-bar-end { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.dc-home { appearance: none; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.4rem; margin-left: -0.4rem; border: 0; border-radius: 8px; background: transparent; color: var(--heather); font: inherit; text-decoration: none; cursor: pointer; }
.dc-home img { height: 28px; width: auto; }
.dc-home:hover { background: rgb(255 255 255 / 0.04); color: var(--vellum); }
/* A chevron, drawn with borders, says the lockup opens something. */
.dc-home[aria-haspopup]::after { content: ""; width: 0.42rem; height: 0.42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15rem) rotate(45deg); transition: transform 0.2s, color 0.2s; }
.dc-home[aria-expanded="true"] { color: var(--ember); }
.dc-home[aria-expanded="true"]::after { transform: translateY(0.1rem) rotate(225deg); }
.dc-quiet { appearance: none; font: inherit; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 0.4rem 0; color: var(--heather); cursor: pointer; }
.dc-quiet:hover, .dc-quiet[aria-expanded="true"] { color: var(--vellum); }
.dc-quiet[aria-expanded="true"] { border-bottom-color: var(--ember); }
/* The compact bar: the 38px bar every app surface shares (drycraf's admin, ozxhq.com's admin, each product), so a
   pivot never moves the lockup. drycraf.com's own pages keep the tall one. Its presence sets --dc-bar for the page,
   so dc-under-bar and the switcher follow. */
:root:has(.dc-bar-compact) { --dc-bar: 38px; }
.dc-bar.dc-bar-compact { gap: 1.25rem; padding-inline: 0.75rem; }
.dc-bar-compact nav { gap: 1.25rem; margin-left: 0.5rem; }
.dc-bar-compact .dc-bar-end { gap: 0.9rem; }
.dc-bar-compact .dc-home { gap: 0.45rem; padding: 0.2rem 0.35rem; margin-left: -0.35rem; border-radius: 6px; }
.dc-bar-compact .dc-home img { height: 18px; }
.dc-bar-compact .dc-home[aria-haspopup]::after { width: 0.34rem; height: 0.34rem; border-width: 0 1.5px 1.5px 0; }
.dc-bar.dc-bar-compact .dc-btn { height: 1.75rem; padding: 0 0.75rem; border-radius: 6px; }
:root:has(.dc-bar-compact) .dc-switcher { left: 0.5rem; }
.dc-bar-compact .dc-quiet { padding: 0.15rem 0; }
/* Below the bar, a page starts at --dc-bar. */
.dc-under-bar { padding-top: var(--dc-bar); }

/* Buttons. */
.dc-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; height: 2.6rem; padding: 0 1.25rem; border-radius: 8px; border: 1px solid rgb(160 144 201 / 0.45); background: transparent; color: var(--vellum); font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.dc-btn:hover { border-color: var(--vellum); }
.dc-btn-primary { background: var(--rune); border-color: var(--rune); color: var(--night); }
.dc-btn-primary:hover { background: #7fe3af; border-color: #7fe3af; }
.dc-btn-big { height: 3.1rem; padding: 0 1.6rem; }
.dc-btn:disabled { opacity: 0.6; cursor: progress; }
.dc-close { appearance: none; margin-left: auto; padding: 0 0.25rem; border: 0; background: transparent; color: var(--heather); font: inherit; line-height: 1; cursor: pointer; }
.dc-close:hover { color: var(--vellum); }

/* Tables, for the console: plain rows on the solid surface, numbers right-aligned in even figures. */
.dc-table { width: 100%; border-collapse: collapse; }
.dc-table th { text-align: left; font-weight: 400; color: var(--heather); padding: 0.55rem 0.8rem; border-bottom: 1px solid rgb(160 144 201 / 0.28); }
.dc-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--dc-line); color: var(--vellum); }
.dc-table tbody tr:hover { background: rgb(255 255 255 / 0.03); }
.dc-table .dc-num { text-align: right; font-variant-numeric: tabular-nums; }
.dc-table .dc-dim { color: var(--heather); }
.dc-ok { color: var(--rune); }
.dc-warn { color: var(--ember); }

/* Fields: a label over its input, the input in night ink. Focus is a mint ring; a field marked aria-invalid is ember. */
.dc-form { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 1rem; }
.dc-field { display: grid; gap: 0.4rem; min-width: 0; color: var(--vellum); }
.dc-field .dc-opt { color: var(--heather); font-weight: 400; }
.dc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dc-input { appearance: none; width: 100%; min-width: 0; font: inherit; color: var(--vellum); background: rgb(14 6 24 / 0.8); border: 1px solid rgb(160 144 201 / 0.3); border-radius: 8px; padding: 0.65rem 0.8rem; outline: none; caret-color: var(--ember); transition: border-color 0.15s, box-shadow 0.15s; }
textarea.dc-input { resize: vertical; min-height: 7.5rem; line-height: 1.5; }
.dc-input::placeholder { color: rgb(160 144 201 / 0.6); }
.dc-input:focus-visible { border-color: var(--rune); box-shadow: 0 0 0 3px rgb(99 214 155 / 0.2); }
.dc-input[aria-invalid="true"] { border-color: var(--ember); box-shadow: 0 0 0 3px rgb(238 138 94 / 0.2); }
.dc-status { margin: 0; color: var(--heather); }
.dc-status[data-kind="bad"] { color: var(--ember); }
.dc-status[data-kind="good"] { color: var(--rune); font-weight: 700; }

/* Chips: radios or checkboxes as pills. A fieldset never shrinks below its content unless told to. */
.dc-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.dc-chips legend { padding: 0; margin-bottom: 0.4rem; color: var(--vellum); }
.dc-chip { display: inline-flex; position: relative; cursor: pointer; }
.dc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dc-chip span { padding: 0.3rem 0.85rem; border-radius: 999px; border: 1px solid rgb(160 144 201 / 0.35); color: var(--heather); transition: color 0.15s, background 0.15s, border-color 0.15s; }
.dc-chip:hover span { color: var(--vellum); border-color: var(--vellum); }
.dc-chip input:checked + span { color: var(--night); background: var(--rune); border-color: var(--rune); font-weight: 700; }
.dc-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgb(99 214 155 / 0.35); }

/* Tabs: a vertical list of sections. The chosen one (aria-selected, or aria-current for links) wears ember. */
.dc-tabs { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.dc-tabs > button, .dc-tabs > a { appearance: none; font: inherit; text-align: left; text-decoration: none; cursor: pointer; display: flex; align-items: baseline; gap: 0.75rem; padding: 0.6rem 0.8rem; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--heather); transition: background 0.15s, border-color 0.15s, color 0.15s; }
.dc-tabs > :hover { color: var(--vellum); background: rgb(255 255 255 / 0.04); }
.dc-tabs > [aria-selected="true"], .dc-tabs > [aria-current] { color: var(--vellum); border-color: rgb(238 138 94 / 0.55); background: rgb(238 138 94 / 0.08); box-shadow: 0 0 24px -10px rgb(238 138 94 / 0.6); }
.dc-tabs em { font-style: normal; color: var(--ember); margin-left: auto; }

/* The inspector: detail over the live view, in a mint-edged card. Add .dc-pop as it opens. */
.dc-inspector { position: relative; width: min(21rem, 100%); display: grid; gap: 0.5rem; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid rgb(99 214 155 / 0.45); background: linear-gradient(180deg, rgb(255 255 255 / 0.05), transparent 40%), rgb(24 12 38 / 0.8); backdrop-filter: blur(12px); box-shadow: 0 24px 60px -28px rgb(0 0 0 / 0.8), 0 0 40px -16px rgb(99 214 155 / 0.3); }
.dc-inspector[hidden] { display: none; }
.dc-inspector-top { display: flex; align-items: center; gap: 0.6rem; }
.dc-inspector-top b { color: var(--vellum); }
.dc-where { color: var(--rune); }
.dc-pop { animation: dc-pop 0.32s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes dc-pop { from { opacity: 0; transform: scale(0.35); } to { opacity: 1; transform: none; } }

/* The drawer rises from the bottom edge over a scrim, under the bar; .open shows both. */
.dc-scrim { position: fixed; inset: 0; z-index: 17; background: rgb(8 4 14 / 0.55); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s 0.25s; }
.dc-scrim.open { opacity: 1; visibility: visible; transition: opacity 0.25s; }
.dc-drawer { position: fixed; inset: auto 0 0; z-index: 18; max-height: min(78svh, calc(100svh - var(--dc-bar) - 1rem)); overflow-y: auto; overscroll-behavior: contain; border-width: 1px 0 0; padding: 2rem var(--dc-gutter) calc(2rem + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); visibility: hidden; transition: transform 0.3s var(--dc-ease), visibility 0s 0.3s; }
.dc-drawer.open { transform: none; visibility: visible; transition: transform 0.3s var(--dc-ease); }

/* On phones sheet() lifts a pop-up, such as the inspector, into a bottom sheet. */
.dc-sheet-scrim { position: fixed; inset: 0; z-index: 39; background: rgb(8 4 14 / 0.62); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
.dc-sheet-scrim.on { opacity: 1; visibility: visible; transition: opacity 0.3s; }
html.dc-sheet-open { overflow: hidden; }
.dc-sheet { position: fixed !important; inset: auto 0 0 0 !important; z-index: 40; width: auto; max-height: 82svh; overflow-y: auto; overscroll-behavior: contain; border-width: 1px 0 0; border-radius: 16px 16px 0 0; background: rgb(24 12 38 / 0.98); backdrop-filter: none; padding: 1.7rem max(1.25rem, env(safe-area-inset-right, 0px)) calc(1.25rem + env(safe-area-inset-bottom, 0px)) max(1.25rem, env(safe-area-inset-left, 0px)); animation: dc-sheet-up 0.32s cubic-bezier(.2, .9, .3, 1); }
.dc-sheet::before { content: ""; position: absolute; top: 0.6rem; left: 50%; width: 2.5rem; height: 4px; margin-left: -1.25rem; border-radius: 2px; background: rgb(160 144 201 / 0.45); }
@keyframes dc-sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* The switcher: drycraf's one pivot between its products and its own pages, dropped from the lockup at top left. */
.dc-switcher-scrim { position: fixed; inset: 0; z-index: 19; background: rgb(8 4 14 / 0.55); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
.dc-switcher { position: fixed; top: calc(var(--dc-bar) + 0.5rem); left: var(--dc-gutter); z-index: 21; width: min(26rem, calc(100vw - 2rem)); max-height: calc(100svh - var(--dc-bar) - 2rem); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 0.6rem; padding: 0.9rem; border-radius: 12px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s var(--dc-ease), visibility 0s 0.18s; }
.dc-switcher-scrim.open { opacity: 1; visibility: visible; transition: opacity 0.2s; }
.dc-switcher.open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.18s, transform 0.18s var(--dc-ease); }
.dc-switcher-list { display: grid; gap: 0.2rem; }
.dc-switcher-group { padding: 0.5rem 0.8rem 0.2rem; color: var(--ember); letter-spacing: 0.04em; }
.dc-switcher-row { appearance: none; font: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; align-items: center; column-gap: 0.75rem; padding: 0.55rem 0.8rem; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--heather); transition: background 0.12s, border-color 0.12s, color 0.12s; }
.dc-switcher-row img { width: 1.75rem; height: 1.75rem; grid-row: span 2; }
.dc-switcher-row b { color: var(--vellum); }
.dc-switcher-row .dc-line { grid-column: 2; color: var(--heather); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-switcher-row[aria-selected="true"] { color: var(--vellum); border-color: rgb(238 138 94 / 0.55); background: rgb(238 138 94 / 0.08); box-shadow: 0 0 24px -10px rgb(238 138 94 / 0.6); }
.dc-row-end { grid-column: 3; grid-row: 1 / span 2; display: grid; justify-items: end; gap: 0.1rem; }
.dc-here { color: var(--rune); font-weight: 700; }
/* A product's state: a dot and a word. Ready is mint, needs attention is ember, not added is a hollow ring. */
.dc-state { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--heather); white-space: nowrap; }
.dc-state::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1.5px solid currentColor; }
.dc-state[data-state="ready"]::before { background: var(--rune); border-color: var(--rune); box-shadow: 0 0 8px rgb(99 214 155 / 0.7); }
.dc-state[data-state="attention"] { color: var(--ember); }
.dc-state[data-state="attention"]::before { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 8px rgb(238 138 94 / 0.8); }
.dc-switcher-row[data-state="absent"] b { color: var(--heather); }
.dc-switcher-none { padding: 0.6rem 0.8rem; color: var(--heather); }

/* ---- The shell (shell.ts): OZx as one page, in Webb's look ----
   Webb's dashboard (webb, dashboard/css: tokens.css, theme.css, toolbar.css, menus.css, shell.css, home.css,
   tables.css) is the model every platform follows: Quantico throughout at its small scale (11 and 12px, 22px for the
   tile figures only), solid night panels on hairlines, tracked uppercase micro labels for controls and headings, and
   the accent tinting what's chosen. Navigation is CrowdStrike Falcon's: a menu of modules and their pages, opened from
   the bar or locked open as a side panel. --dc-accent is the place's own colour (the vibe), and eases between them. */

@property --dc-accent { syntax: "<color>"; inherits: true; initial-value: #ee8a5e; }
@property --dc-paper { syntax: "<color>"; inherits: true; initial-value: #f4f0fa; }
html.dc-shell-on {
  --w-deep: #1b1029; --w-panel: #2e1a47; --w-panel-2: #3a2a62; --w-hover: #3a2560; --w-border: #3e2860;
  --w-ink: #ede6fa; --w-muted: #b7a9d6; --w-faint: #a496c8; --w-input: #1b1029;
  --w-good: #63d69b; --w-warn: #ffc77a; --w-high: #ff9f66; --w-critical: #ff6b9a; --w-bad: #ff7a8a;
  --w-xs: 10px; --w-sm: 11px; --w-md: 12px; --w-lg: 13px; --w-hero: 22px; --w-micro: 9px;
  --w-bar: 52px; --w-ctl: 30px;
  --w-bar-bg: rgb(36 18 56 / 0.85); --w-surface: rgb(46 26 71 / 0.94); --w-surface-strong: rgb(46 26 71 / 0.97);
  --w-deep-strong: rgb(27 16 41 / 0.97); --w-th-bg: rgb(46 26 71 / 0.8); --w-row-hover: rgb(58 37 96 / 0.6);
  --w-shadow-c: rgb(10 5 18 / 0.6); --w-line-soft: rgb(255 255 255 / 0.06); --w-line-faint: rgb(255 255 255 / 0.03);
  --w-scrim: rgb(8 4 14 / 0.5); --w-lift: rgb(255 255 255 / 0.05); --w-card-base: rgb(36 20 58 / 0.9);
  --dc-bar: var(--w-bar); --dc-dock-w: 0px; --dc-prail-w: 0px;
  --dc-accent-dim: color-mix(in srgb, var(--dc-accent) 12%, transparent);
  --dc-accent-ink: var(--dc-accent);
  transition: --dc-accent 0.7s var(--dc-ease), --dc-paper 0.7s var(--dc-ease);
}
/* The light theme: Webb's (dashboard/css/light-mode.css), lavender paper and night ink. Accents darken to read. */
html.dc-shell-on[data-theme="light"] {
  color-scheme: light;
  --w-deep: #eae3f6; --w-panel: #ffffff; --w-panel-2: #f7f3fd; --w-hover: #ede6fa; --w-border: #ddd4eb;
  --w-ink: #241238; --w-muted: #6a5f8c; --w-faint: #6e6297; --w-input: #ffffff;
  --w-good: #2c7650; --w-warn: #875709; --w-high: #a3410b; --w-critical: #b8174f; --w-bad: #b42840;
  --w-bar-bg: color-mix(in srgb, color-mix(in srgb, var(--dc-paper) 70%, #ffffff) 86%, transparent);
  --w-surface: color-mix(in srgb, color-mix(in srgb, var(--dc-paper) 30%, #ffffff) 94%, transparent);
  --w-surface-strong: color-mix(in srgb, color-mix(in srgb, var(--dc-paper) 25%, #ffffff) 98%, transparent);
  --w-th-bg: #f7f3fd; --w-row-hover: rgb(237 230 250 / 0.7);
  --w-shadow-c: rgb(36 18 56 / 0.12); --w-line-soft: rgb(36 18 56 / 0.08); --w-line-faint: rgb(36 18 56 / 0.05);
  --w-scrim: rgb(36 18 56 / 0.25); --w-lift: rgb(255 255 255 / 0.6);
  --w-card-base: color-mix(in srgb, color-mix(in srgb, var(--dc-paper) 35%, #ffffff) 90%, transparent);
  --w-deep-strong: color-mix(in srgb, color-mix(in srgb, var(--dc-paper) 55%, #ffffff) 98%, transparent);
  --dc-accent-dim: color-mix(in srgb, var(--dc-accent) 10%, transparent);
  --dc-accent-ink: color-mix(in oklab, var(--dc-accent) 55%, #241238);
  background: var(--dc-paper);
}
/* In light the nebula paints the place's paper and clouds itself (nebula.ts). The grid, floaters and tracers are drawn
   in mint for the night; deepened here so they read on paper as depth, quiet enough not to pull the eye. */
html.dc-shell-on[data-theme="light"] .dc-ground { filter: brightness(0.62) saturate(1.35); opacity: 0.85; }
html.dc-shell-on[data-theme="light"] .dc-tracers { filter: brightness(0.6) saturate(1.3); opacity: 0.7; }
html.dc-shell-on[data-theme="light"] .dc-sweep { box-shadow: none; }
html.dc-shell-on.dc-docked { --dc-dock-w: 272px; }
html.dc-shell-on.dc-has-prail { --dc-prail-w: 52px; }
html.dc-shell-on body { min-height: 100svh; font-size: var(--w-md); line-height: 1.45; color: var(--w-ink); }
.dc-icon { width: 16px; height: 16px; flex: none; }
.dc-icon-slot { width: 14px; height: 14px; flex: none; }

/* The bar: the menu, the module and page you're on, a bookmark and home; Go to…, health and who's here. */
.dc-shell-bar { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--w-bar); display: flex; align-items: center; gap: 6px; padding: 0 16px 0 8px; background: var(--w-bar-bg); backdrop-filter: blur(16px); border-bottom: 1px solid var(--w-border); }
.dc-bar-btn { appearance: none; display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--w-muted); cursor: pointer; transition: color 0.15s, background 0.15s; }
.dc-bar-btn[hidden] { display: none; }
.dc-bar-btn .dc-icon { width: 20px; height: 20px; }
.dc-bar-btn:hover { color: var(--w-ink); background: var(--w-hover); }
.dc-menu-btn[aria-expanded="true"], .dc-menu-btn[aria-pressed="true"], .dc-mark-btn[aria-pressed="true"] { color: var(--dc-accent-ink); }
.dc-menu-btn[aria-pressed="true"], .dc-dock-btn[aria-pressed="true"] { background: var(--dc-accent-dim); }
.dc-dock-btn[aria-pressed="true"] { color: var(--dc-accent-ink); }
.dc-bar-here { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 6px 0 4px; }
.dc-bar-mod-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: none; color: var(--dc-accent-ink); }
.dc-bar-mod-icon .dc-glyph { width: 22px; height: 22px; }
.dc-bar-mod-icon img { filter: drop-shadow(0 0 8px var(--dc-accent-dim)); }
.dc-bar-mod-name { font-size: var(--w-lg); font-weight: 700; white-space: nowrap; }
.dc-bar-div { width: 1px; height: 22px; background: var(--w-border); flex: none; }
.dc-bar-page { font-size: var(--w-lg); color: var(--w-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dc-bar-end { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Only "Go to…" gives way when the bar is short: the health, help, theme and the person keep their size. */
.dc-bar-end > * { flex: none; }
.dc-bar-end > .dc-find { flex: 0 1 340px; }
.dc-shell-bar.dc-tabs-on .dc-bar-end { flex-shrink: 1000; min-width: min-content; } /* the find box gives way before a tab does */
.dc-shell-user { display: inline-flex; align-items: center; gap: 8px; color: var(--w-muted); font-size: var(--w-sm); white-space: nowrap; }
@media (max-width: 75rem) { .dc-shell-user-name { display: none; } }
.dc-avatar { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--w-panel-2); color: var(--w-ink); font-weight: 700; font-size: var(--w-sm); }

/* Go to…: Webb's search field, its results a Webb menu grouped by module. */
.dc-find { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 340px; min-width: 160px; height: var(--w-ctl); padding: 0 10px; border: 1px solid var(--w-border); border-radius: 8px; background: var(--w-input); color: var(--w-muted); transition: border-color 0.15s, box-shadow 0.15s; }
.dc-find > .dc-icon { width: 14px; height: 14px; }
.dc-find:focus-within { border-color: var(--dc-accent-ink); box-shadow: 0 0 0 3px var(--dc-accent-dim); }
.dc-find-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; color: var(--w-ink); font: inherit; font-size: var(--w-sm); }
.dc-find-input::placeholder { color: var(--w-muted); }
.dc-find-input::-webkit-search-cancel-button { display: none; }
.dc-kbd { padding: 0 4px; border: 1px solid var(--w-border); border-radius: 4px; color: var(--w-faint); font: inherit; font-size: var(--w-xs); line-height: 16px; }
.dc-find:focus-within .dc-kbd { visibility: hidden; }
.dc-find-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 70; width: max(100%, 420px); max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid var(--w-border); border-radius: 8px; background: var(--w-panel); box-shadow: 0 12px 32px var(--w-shadow-c), 0 0 0 1px var(--dc-accent-dim); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.12s, transform 0.12s, visibility 0s 0.12s; }
.dc-find.open .dc-find-list { opacity: 1; visibility: visible; transform: none; transition: opacity 0.12s, transform 0.12s; }
.dc-find-head { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; margin-top: 2px; color: var(--dc-accent-ink); font-size: var(--w-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.dc-find-head .dc-glyph { width: 14px; height: 14px; }
.dc-find-row { position: relative; display: flex; align-items: center; gap: 8px; height: var(--w-ctl); padding: 0 10px; border-radius: 6px; color: var(--w-ink); font-size: var(--w-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.dc-find-row > .dc-icon, .dc-find-row > .dc-glyph { width: 14px; height: 14px; color: var(--w-muted); }
.dc-find-label { flex: none; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
.dc-find-hint { flex: 0 1 auto; min-width: 0; margin-left: auto; padding-left: 8px; color: var(--w-muted); font-size: var(--w-xs); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.dc-find-row:hover, .dc-find-row[aria-selected="true"] { background: color-mix(in srgb, var(--dc-accent) 9%, transparent); }
.dc-find-row[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--dc-accent); }
.dc-find-row[aria-selected="true"] > .dc-icon { color: var(--dc-accent-ink); }
.dc-find-none { padding: 8px 10px; color: var(--w-muted); font-size: var(--w-sm); }
.dc-state-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--k); box-shadow: 0 0 8px var(--k); }
.dc-state-dot[data-kind="idle"] { background: none; border: 1.5px solid var(--w-faint); box-shadow: none; }

/* The menu: modules on the left, the pointed-at module's sections and pages on the right (CrowdStrike Falcon's). */
.dc-menu-scrim { position: fixed; inset: var(--w-bar) 0 0; z-index: 48; background: var(--w-scrim); opacity: 0; visibility: hidden; transition: opacity 0.16s, visibility 0s 0.16s; }
.dc-menu-scrim.open { opacity: 1; visibility: visible; transition: opacity 0.16s; }
.dc-menu { position: fixed; top: var(--w-bar); bottom: 0; left: 0; z-index: 50; display: grid; grid-template-columns: 264px 300px; opacity: 0; visibility: hidden; transform: translateX(-12px); transition: opacity 0.14s, transform 0.18s var(--dc-ease), visibility 0s 0.18s; box-shadow: 30px 0 60px -30px var(--w-shadow-c); }
.dc-menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.14s, transform 0.18s var(--dc-ease); }
.dc-menu-mods { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; background: var(--w-deep-strong); backdrop-filter: blur(16px); border-right: 1px solid var(--w-border); }
.dc-menu-panel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 10px 24px; background: var(--w-surface-strong); backdrop-filter: blur(16px); border-right: 1px solid var(--w-border); }
.dc-dock { appearance: none; display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; margin-bottom: 4px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--w-muted); font: inherit; font-size: var(--w-sm); cursor: pointer; text-align: left; }
.dc-dock .dc-icon { width: 18px; height: 18px; }
.dc-dock:hover { color: var(--w-ink); background: var(--w-hover); }
.dc-dock[aria-pressed="true"] { color: var(--dc-accent-ink); border-color: color-mix(in srgb, var(--dc-accent) 35%, transparent); background: var(--dc-accent-dim); }
.dc-menu-rule { height: 0; margin: 6px 4px; border: 0; border-top: 1px solid var(--w-border); }
.dc-mod-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 4px; color: var(--w-faint); font-size: var(--w-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.dc-soon-word { color: var(--ember); letter-spacing: 0.08em; }
.dc-mod { position: relative; appearance: none; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--w-muted); font: inherit; font-size: var(--w-md); font-weight: 600; text-align: left; cursor: pointer; transition: background 0.12s, color 0.12s; }
.dc-mod .dc-glyph { width: 20px; height: 20px; }
.dc-mod-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-mod:hover, .dc-mod.dc-shown { color: var(--w-ink); background: var(--w-hover); }
.dc-mod[aria-current] { color: var(--w-ink); background: color-mix(in srgb, var(--dc-accent) 12%, transparent); }
.dc-mod[aria-current]::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--dc-accent); box-shadow: 0 0 10px var(--dc-accent); }
.dc-mod.dc-off { opacity: 0.45; cursor: default; }
.dc-mod.dc-off:hover { background: none; color: var(--w-muted); }
.dc-mod:focus-visible, .dc-dock:focus-visible, .dc-page:focus-visible, .dc-pages-head:focus-visible, .dc-bar-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--dc-accent); }
.dc-panel-head { display: grid; gap: 4px; padding: 0 10px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--w-border); }
.dc-panel-head b { font-size: var(--w-lg); }
.dc-panel-line { color: var(--w-muted); font-size: var(--w-sm); }
.dc-pages { display: grid; gap: 1px; }
.dc-pages-section + .dc-pages-section, .dc-page + .dc-pages-section { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--w-border); }
.dc-pages-head { appearance: none; display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--w-ink); font: inherit; font-size: var(--w-sm); font-weight: 700; text-align: left; cursor: pointer; }
.dc-pages-head .dc-icon { width: 14px; height: 14px; color: var(--w-muted); transition: transform 0.18s var(--dc-ease); }
.dc-pages-head[aria-expanded="false"] .dc-icon { transform: rotate(180deg); }
.dc-pages-head:hover { background: var(--w-hover); }
.dc-pages-list { display: grid; gap: 1px; }
.dc-pages-list[hidden] { display: none; }
.dc-page { position: relative; display: flex; align-items: center; gap: 8px; height: var(--w-ctl); padding: 0 10px; border-radius: 6px; color: var(--w-muted); font-size: var(--w-md); text-decoration: none; white-space: nowrap; transition: background 0.12s, color 0.12s; }
.dc-page > .dc-icon, .dc-page > .dc-glyph { width: 14px; height: 14px; color: var(--w-faint); }
.dc-page-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dc-page-hint { flex: none; max-width: 40%; color: var(--w-faint); font-size: var(--w-xs); overflow: hidden; text-overflow: ellipsis; }
a.dc-page[href]:hover { color: var(--w-ink); background: color-mix(in srgb, var(--dc-accent) 8%, transparent); }
.dc-page[aria-current] { color: var(--w-ink); font-weight: 600; background: color-mix(in srgb, var(--dc-accent) 12%, transparent); }
.dc-page[aria-current]::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--dc-accent); box-shadow: 0 0 8px var(--dc-accent); }
.dc-page[aria-current] > .dc-icon { color: var(--dc-accent-ink); }
.dc-page.dc-off { opacity: 0.45; }
.dc-menu-note { margin: 6px 10px; color: var(--w-muted); font-size: var(--w-sm); }

/* Locked open (and on phones): one column, each module opening in place onto its sections and pages. */
.dc-menu.docked { opacity: 1; visibility: visible; transform: none; grid-template-columns: var(--dc-dock-w); z-index: 40; box-shadow: none; transition: none; }
.dc-menu.docked .dc-menu-panel { display: none; }
.dc-menu.docked .dc-menu-mods > .dc-pages, .dc-menu .dc-menu-mods > .dc-pages { margin: 2px 0 6px 22px; padding-left: 10px; border-left: 1px solid var(--w-border); }

/* A product's own sidebar inside OZx: Webb's rail, its pages as icons, each named beside it on hover and focus. */
.dc-prail { position: fixed; top: var(--w-bar); bottom: 0; left: var(--dc-dock-w); z-index: 38; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; background: var(--w-bar-bg); backdrop-filter: blur(16px); border-right: 1px solid var(--w-border); }
.dc-prail[hidden] { display: none; }
.dc-prail-btn { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; color: var(--w-faint); transition: color 0.12s, background 0.12s; }
.dc-prail-btn .dc-icon { width: 18px; height: 18px; }
.dc-prail-btn:hover { color: var(--w-ink); background: var(--w-hover); }
.dc-prail-btn[aria-current] { color: var(--dc-accent-ink); background: var(--dc-accent-dim); box-shadow: 0 0 12px color-mix(in srgb, var(--dc-accent) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--dc-accent) 35%, transparent); }
.dc-prail-btn[aria-current]::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--dc-accent); box-shadow: 0 0 8px var(--dc-accent); }
.dc-prail-btn::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%); padding: 5px 10px; border: 1px solid var(--w-border); border-radius: 6px; background: var(--w-panel); color: var(--w-ink); font-size: var(--w-sm); font-weight: 600; white-space: nowrap; box-shadow: 0 8px 24px var(--w-shadow-c); opacity: 0; pointer-events: none; transition: opacity 0.12s, transform 0.12s; }
.dc-prail-btn:hover::after, .dc-prail-btn:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.dc-prail-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--dc-accent); }

/* The view: rises in as the old one lifts away; the accent sweeps the top and tints the ground behind it. */
.dc-shell-main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100svh; margin-left: calc(var(--dc-dock-w) + var(--dc-prail-w)); padding: calc(var(--w-bar) + 16px) 24px 48px; background: radial-gradient(70rem 30rem at 85% -5%, color-mix(in srgb, var(--dc-accent) 9%, transparent), transparent 70%); transition: margin-left 0.2s var(--dc-ease); }
.dc-view { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; width: 100%; max-width: 1600px; margin-inline: auto; min-width: 0; }
.dc-view.dc-enter { animation: dc-rise 0.42s var(--dc-ease) both; }
.dc-view.dc-leave { animation: dc-lift 0.2s ease-in both; pointer-events: none; }
@keyframes dc-rise { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes dc-lift { to { opacity: 0; transform: translateY(-10px); } }
/* An embedded product: its frame fills the view under the bar, edge to edge, see-through to the sky. Frames stay alive
   when hidden, so coming back is instant; the one shown rises in like a view. */
.dc-frames { grid-area: 1 / 1; display: contents; }
/* The frame inherits OZx's colour scheme (dark, or light under data-theme="light"), and the product's page follows the
   same data-theme: when the two differ, the browser paints the frame opaque and hides the sky behind it. */
.dc-frame { display: none; width: 100%; height: calc(100svh - var(--w-bar)); border: 0; background: transparent; }
.dc-frame.on { display: block; }
.dc-frame-fail { display: none; }
.dc-frame-fail.on:not([hidden]) { position: absolute; inset: calc(var(--w-bar) + 24px) 24px auto; z-index: 2; display: grid; justify-items: start; gap: 8px; max-width: 32rem; padding: 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--w-high) 45%, var(--w-border)); background: var(--w-surface-strong); box-shadow: 0 16px 40px -24px var(--w-shadow-c); font-size: var(--w-sm); }
.dc-frame-fail p { margin: 0; color: var(--w-muted); }
.dc-frame.dc-enter { animation: dc-rise 0.42s var(--dc-ease) both; }
html.dc-framed .dc-shell-main { padding: var(--w-bar) 0 0; background: none; }
@media (prefers-reduced-motion: reduce) { .dc-frame.dc-enter { animation: none; } }
.dc-sweep { position: fixed; top: var(--w-bar); left: calc(var(--dc-dock-w) + var(--dc-prail-w)); right: 0; z-index: 30; height: 2px; background: linear-gradient(90deg, transparent, var(--dc-accent) 30%, var(--dc-accent) 70%, transparent); box-shadow: 0 0 18px var(--dc-accent); opacity: 0; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.dc-sweep.on { animation: dc-sweep 0.9s var(--dc-ease) both; }
@keyframes dc-sweep { 0% { opacity: 0; transform: scaleX(0); } 25% { opacity: 1; } 70% { opacity: 0.85; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }

@media (max-width: 60rem) {
  html.dc-shell-on { --dc-prail-w: 0px; }
  .dc-prail { display: none; }
  .dc-bar-div, .dc-bar-page, .dc-shell-user, .dc-shell-status, .dc-kbd { display: none; }
  .dc-find { flex-basis: 150px; }
  .dc-find-list { position: fixed; top: calc(var(--w-bar) + 4px); left: 8px; right: 8px; width: auto; }
  .dc-menu { grid-template-columns: min(100vw, 22rem); }
  .dc-menu-panel { display: none; }
  .dc-dock, .dc-dock-btn { display: none; }
  .dc-shell-main { padding-inline: 12px; }
}

/* ---- Widgets (widgets.ts), in Webb's parts: heads, the tile strip, panels, words, bars, rows, tables, controls ---- */
html.dc-shell-on { --dc-ok: var(--w-good); --dc-warn: var(--w-high); --dc-bad: var(--w-critical); --dc-idle: var(--w-faint); }
[data-kind="ok"] { --k: var(--dc-ok, #63d69b); }
[data-kind="warn"] { --k: var(--dc-warn, #ff9f66); }
[data-kind="bad"] { --k: var(--dc-bad, #ff6b9a); }
[data-kind="idle"] { --k: var(--dc-idle, #a496c8); }

/* A page's head: its title, a line under it, actions on the right. */
.dc-w-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 4px; }
.dc-w-head-text { flex: 1 1 16rem; display: grid; gap: 4px; min-width: 0; }
.dc-w-head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dc-w-head-row img { width: 24px; height: 24px; }
.dc-w-title { margin: 0; font-size: var(--w-lg); font-weight: 700; line-height: 1.2; outline: none; }
.dc-w-line { margin: 0; color: var(--w-muted); font-size: var(--w-sm); max-width: 90ch; }
.dc-w-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Controls: Webb's .ctl. Tracked uppercase micro labels on a hairline; the primary is a tint of the accent, never a fill. */
html.dc-shell-on .dc-btn { box-sizing: border-box; height: var(--w-ctl); gap: 6px; padding: 0 12px; border: 1px solid var(--w-border); border-radius: 6px; background: transparent; color: var(--w-muted); font-size: var(--w-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s; }
html.dc-shell-on .dc-btn .dc-icon { width: 14px; height: 14px; margin: 0; }
html.dc-shell-on .dc-btn:hover { border-color: var(--dc-accent-ink); color: var(--dc-accent-ink); }
html.dc-shell-on .dc-btn-primary { border-color: var(--dc-accent-ink); color: var(--dc-accent-ink); background: var(--dc-accent-dim); }
html.dc-shell-on .dc-btn-primary:hover { background: color-mix(in srgb, var(--dc-accent) 20%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--dc-accent) 25%, transparent); }
html.dc-shell-on .dc-btn-quiet { border-color: transparent; }
html.dc-shell-on .dc-btn-quiet:hover { border-color: color-mix(in srgb, var(--dc-accent) 30%, transparent); }
html.dc-shell-on .dc-input { height: var(--w-ctl); padding: 0 10px; border: 1px solid var(--w-border); border-radius: 8px; background: var(--w-input); color: var(--w-ink); font-size: var(--w-sm); }
html.dc-shell-on .dc-input:focus-visible { border-color: var(--dc-accent-ink); box-shadow: 0 0 0 3px var(--dc-accent-dim); }

/* Tiles: each number its own card, lifted off the ground: a light along its top, a glow in its kind's colour from
   its corner, a soft shadow under it. */
.dc-w-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.dc-w-stat { position: relative; display: grid; gap: 4px; align-content: start; min-width: 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--w-border); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--k, var(--dc-accent)) 13%, transparent), transparent 55%), linear-gradient(180deg, var(--w-lift), transparent 45%), var(--w-card-base); box-shadow: inset 0 1px 0 var(--w-lift), 0 12px 30px -20px var(--w-shadow-c); overflow: hidden; }
.dc-w-stat::before { content: ""; position: absolute; inset: 0 12px auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--k, var(--dc-accent)) 70%, transparent), transparent); }
.dc-w-stat-label { display: flex; align-items: center; gap: 6px; color: var(--w-muted); font-size: var(--w-sm); }
.dc-w-stat-label .dc-icon { width: 14px; height: 14px; color: var(--k, var(--w-faint)); }
.dc-w-stat-value { font-size: var(--w-hero); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--w-ink); }
.dc-w-stat[data-kind="ok"] .dc-w-stat-value { color: var(--w-good); }
.dc-w-stat[data-kind="warn"] .dc-w-stat-value { color: var(--w-high); }
.dc-w-stat[data-kind="bad"] .dc-w-stat-value { color: var(--w-critical); }
.dc-w-stat-value small { margin-left: 6px; font-size: var(--w-sm); font-weight: 400; letter-spacing: 0; color: var(--w-muted); }
.dc-w-stat-note { color: var(--w-muted); font-size: var(--w-sm); }
.dc-w-stat .dc-w-spark { margin-top: 4px; }

/* Depth, for any surface of your own (a product's panes, a side panel): the same layers as the cards below.
   1. A see-through surface (--w-card-base) over the sky, lit from the top by a soft gradient (--w-lift).
   2. A 12px-round hairline edge; with data-kind, the edge and a glow take the health's colour.
   3. An inset highlight along the top edge, and a long soft shadow under it (--w-shadow-c).
   4. A 1px line of light across the top, in the place's accent (or the health's).
   5. A 12px backdrop blur, for the few large surfaces only.
   The light theme swaps the tokens (paper-tinted surface, white lift, faint night shadow); the rules stay. */
.dc-depth { position: relative; border: 1px solid var(--w-border); border-radius: 12px; background: linear-gradient(180deg, var(--w-lift), transparent 30%), var(--w-card-base); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 var(--w-lift), 0 16px 40px -28px var(--w-shadow-c); }
.dc-depth::before { content: ""; position: absolute; inset: 0 16px auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--k, var(--dc-accent)) 45%, transparent), transparent); pointer-events: none; }
.dc-depth[data-kind] { border-color: color-mix(in srgb, var(--k) 55%, var(--w-border)); box-shadow: inset 0 1px 0 var(--w-lift), 0 16px 40px -28px var(--w-shadow-c), 0 0 24px -12px var(--k); }
.dc-depth-flat { backdrop-filter: none; }

/* Panels: Webb's, solid night on a hairline, a head with a rule under it. */
/* Panels three across, as Webb's cyber home packs them; two, then one, as the window narrows. */
.dc-w-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.dc-w-grid > [data-span="2"] { grid-column: span 2; }
.dc-w-grid > [data-span="3"] { grid-column: 1 / -1; }
@media (max-width: 1200px) { .dc-w-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dc-w-grid > [data-span="3"], .dc-w-grid > [data-span="2"] { grid-column: 1 / -1; } }
@media (max-width: 760px) { .dc-w-grid { grid-template-columns: minmax(0, 1fr); } }
.dc-w-col { display: grid; gap: 12px; align-content: start; min-width: 0; }
.dc-w-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; min-width: 0; padding-bottom: 12px; border: 1px solid var(--w-border); border-radius: 12px; background: linear-gradient(180deg, var(--w-lift), transparent 30%), var(--w-card-base); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 var(--w-lift), 0 16px 40px -28px var(--w-shadow-c); }
.dc-w-card::before { content: ""; position: absolute; inset: 0 16px auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dc-accent) 45%, transparent), transparent); }
.dc-w-card > :not(.dc-w-card-head):not(.dc-w-table-wrap) { margin-inline: 12px; }
.dc-w-card[data-kind] { border-color: color-mix(in srgb, var(--k) 50%, var(--w-border)); box-shadow: inset 0 1px 0 var(--w-lift), 0 16px 40px -28px var(--w-shadow-c), 0 0 26px -14px var(--k); }
.dc-w-card[data-kind="ok"] { --k: var(--w-good); }
.dc-w-card[data-kind="warn"] { --k: var(--w-high); }
.dc-w-card[data-kind="bad"] { --k: var(--w-critical); }
.dc-w-card[data-kind="idle"] { --k: var(--w-faint); }
.dc-w-card[data-kind]::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--k) 70%, transparent), transparent); }
.dc-w-card-head { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border-bottom: 1px solid var(--w-border); }
.dc-w-card-head h2 { margin: 0; font-size: var(--w-sm); font-weight: 600; }
.dc-w-card-head > .dc-icon { box-sizing: content-box; width: 14px; height: 14px; padding: 5px; border-radius: 7px; color: var(--dc-accent-ink); background: var(--dc-accent-dim); }
.dc-w-card-head > :last-child:not(h2):not(.dc-icon) { margin-left: auto; }
.dc-w-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 24px; align-items: start; }
@media (max-width: 50rem) { .dc-w-split { grid-template-columns: minmax(0, 1fr); } }
.dc-w-link { color: var(--dc-accent-ink); font-size: var(--w-sm); text-decoration: none; }
.dc-w-link:hover { text-decoration: underline; }
.dc-w-text { margin: 0; color: var(--w-muted); font-size: var(--w-sm); }
.dc-dim { color: var(--w-muted); }
.dc-w-cell { display: inline-flex; align-items: center; gap: 8px; }
.dc-w-table td .dc-w-spark { width: 96px; height: 20px; }

/* Bars: Webb's 6px meter on the deep ground; the fill in the place's accent, or its warning. */
.dc-w-meters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dc-w-meter { display: grid; gap: 6px; }
.dc-w-meter-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--w-sm); }
.dc-w-meter-label { color: var(--w-ink); }
.dc-w-meter-num { font-variant-numeric: tabular-nums; color: var(--w-muted); white-space: nowrap; }
.dc-w-meter-track { position: relative; height: 8px; border-radius: 4px; background: var(--w-deep); box-shadow: inset 0 1px 2px var(--w-shadow-c); }
/* The fill: a gradient that brightens toward its end, a gloss along its top and a lit cap where it stops. */
/* Health-coded: mint inside the limit, amber past the warning, red over; the place's accent only for a bar with no
   limit, which carries no health. */
.dc-w-meter-fill { --c: var(--w-good); position: absolute; inset: 0 auto 0 0; width: var(--share); border-radius: 4px; background: linear-gradient(180deg, rgb(255 255 255 / 0.28), transparent 55%), linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent), var(--c)); box-shadow: 0 0 12px -2px color-mix(in srgb, var(--c) 70%, transparent); animation: dc-fill 0.9s var(--dc-ease) both; }
.dc-w-meter-fill::after { content: ""; position: absolute; right: -1px; top: -2px; bottom: -2px; width: 3px; border-radius: 2px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.dc-w-meter[data-kind="warn"] .dc-w-meter-fill { --c: var(--w-high); }
.dc-w-meter[data-kind="idle"] .dc-w-meter-fill { --c: var(--dc-accent); }
.dc-w-meter[data-kind="ok"] .dc-w-meter-num { color: var(--w-ink); }
.dc-w-meter[data-kind="warn"] .dc-w-meter-num { color: var(--w-high); }
.dc-w-meter[data-kind="bad"] .dc-w-meter-num { color: var(--w-critical); }
.dc-w-commit[data-kind="warn"] .dc-w-meter-num { color: var(--w-high); }
.dc-w-commit[data-kind="bad"] .dc-w-meter-num { color: var(--w-critical); }
/* A panel's health in words: a dot in its colour, the reason, and what to do. */
.dc-w-why { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--k) 40%, var(--w-border)); background: color-mix(in srgb, var(--k) 8%, transparent); font-size: var(--w-sm); }
.dc-w-why::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--k); box-shadow: 0 0 8px var(--k); }
.dc-w-why span { flex: 1; min-width: 0; }
html.dc-shell-on .dc-w-why .dc-btn { height: 24px; padding: 0 8px; }
.dc-w-meter[data-kind="bad"] .dc-w-meter-fill { --c: var(--w-critical); }
.dc-w-meter-tick { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--w-faint); opacity: 0.55; }
.dc-w-meter-tick-warn { left: 85%; background: var(--w-high); }
.dc-w-meter-tick-max { right: 0; }
@keyframes dc-fill { from { width: 0; } }
.dc-w-meter-note { color: var(--w-muted); font-size: var(--w-sm); }

/* Rows: one per product or service, Webb's triage rows. */
.dc-w-health { display: grid; margin: 0; padding: 0; list-style: none; }
.dc-w-card > .dc-w-health { margin-inline: 0; }
.dc-w-health li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 7.5rem 4.5rem; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--w-border); transition: background 0.12s; }
.dc-w-health li:last-child { border-bottom: 0; }
.dc-w-health li:hover { background: var(--w-row-hover); }
.dc-w-health li > .dc-icon, .dc-w-health li > img { width: 16px; height: 16px; color: var(--w-faint); }
.dc-w-health-text { display: grid; min-width: 0; }
.dc-w-health-name { color: var(--w-ink); font-size: var(--w-sm); font-weight: 600; text-decoration: none; }
a.dc-w-health-name:hover { color: var(--dc-accent-ink); }
.dc-w-health-detail { color: var(--w-muted); font-size: var(--w-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-w-health-meta { color: var(--w-faint); font-size: var(--w-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-w-health li > .dc-w-badge { justify-self: start; }
.dc-w-health li > :last-child { justify-self: end; }
@media (max-width: 760px) { .dc-w-health li { grid-template-columns: 18px minmax(0, 1fr) auto; } .dc-w-health-meta, .dc-w-health li > :last-child:not(.dc-w-badge) { display: none; } }

/* What needs a person: a word, what it is and why, one action. */
.dc-w-attention { display: grid; margin: 0; padding: 0; list-style: none; }
.dc-w-card > .dc-w-attention { margin-inline: 0; }
.dc-w-attention li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-left: 2px solid transparent; border-bottom: 1px solid var(--w-border); }
.dc-w-attention li:last-child { border-bottom: 0; }
.dc-w-attention li[data-kind="warn"] { border-left-color: var(--w-high); }
.dc-w-attention li[data-kind="bad"] { border-left-color: var(--w-critical); }
.dc-w-attention li > .dc-w-badge { justify-self: start; }
.dc-w-attention-text { display: grid; gap: 1px; min-width: 0; font-size: var(--w-sm); }
.dc-w-attention-text b { font-weight: 600; }
.dc-w-attention-text span { color: var(--w-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dc-shell-on .dc-w-attention .dc-btn { height: 24px; padding: 0 8px; }

/* A panel's foot: a quiet line and its action, under a rule. */
.dc-w-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--w-border); color: var(--w-muted); font-size: var(--w-sm); }
.dc-w-card > .dc-w-foot { margin-inline: 12px; }
/* A filter bar over a table. */
.dc-w-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-w-filters .dc-w-field { grid-auto-flow: column; align-items: center; }
.dc-w-filters .dc-input { width: min(18rem, 100%); }
html.dc-shell-on .dc-w-health .dc-btn { height: 24px; padding: 0 8px; }

/* Words: Webb's state pills. */
.dc-w-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--k, var(--w-faint)); background: color-mix(in srgb, var(--k, var(--w-faint)) 12%, transparent); color: var(--k, var(--w-faint)); font-size: var(--w-sm); line-height: 1.3; white-space: nowrap; }
.dc-w-badge[data-kind="idle"] { border-color: var(--w-line-soft); background: none; color: var(--w-muted); }

.dc-w-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: var(--w-sm); }
.dc-w-facts dt { color: var(--w-muted); }
.dc-w-facts dd { margin: 0; color: var(--w-ink); min-width: 0; overflow-wrap: anywhere; }
/* Sized here, not inherited: a host page's own element rules (dd { font-size }, say) mustn't reach into the widgets */
.dc-w-facts :is(dt, dd), .dc-w-fix-status { font-size: var(--w-sm); }

/* Switches, choices and fields, never the browser's own. */
.dc-w-toggles { display: grid; }
.dc-w-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--w-border); }
.dc-w-toggle:last-child { border-bottom: 0; }
.dc-w-toggle-text { display: grid; gap: 2px; font-size: var(--w-sm); }
.dc-w-toggle-label { color: var(--w-ink); font-weight: 600; }
.dc-w-toggle-note { color: var(--w-muted); }
.dc-w-switch { position: relative; appearance: none; flex: none; width: 34px; height: 20px; padding: 0; border-radius: 999px; border: 1px solid var(--w-border); background: var(--w-input); cursor: pointer; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.dc-w-switch-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--w-faint); transition: transform 0.2s var(--dc-ease), background 0.2s; }
.dc-w-switch[aria-checked="true"] { border-color: var(--dc-accent-ink); background: var(--dc-accent-dim); box-shadow: 0 0 10px color-mix(in srgb, var(--dc-accent) 30%, transparent); }
.dc-w-switch[aria-checked="true"] .dc-w-switch-knob { transform: translateX(14px); background: var(--dc-accent); }
.dc-w-switch:focus-visible, .dc-w-seg button:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 2px; }
.dc-w-field { display: grid; gap: 6px; min-width: 0; font-size: var(--w-sm); }
.dc-w-field-label { color: var(--w-muted); }
.dc-w-field-note { color: var(--w-faint); }
.dc-w-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.dc-w-seg { display: inline-flex; height: var(--w-ctl); border: 1px solid var(--w-border); border-radius: 8px; overflow: hidden; background: var(--w-surface); justify-self: start; }
.dc-w-seg button { appearance: none; height: 100%; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--w-muted); font: inherit; font-size: var(--w-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: color 0.15s, background 0.15s; }
.dc-w-seg button + button { border-left: 1px solid var(--w-border); }
.dc-w-seg button:hover { color: var(--dc-accent-ink); }
.dc-w-seg button[aria-checked="true"] { color: var(--dc-accent-ink); background: var(--dc-accent-dim); }
.dc-w-seg button:disabled { opacity: 0.45; cursor: not-allowed; }
.dc-w-seg button:disabled:hover { color: var(--w-muted); }
/* select(): a themed button that opens a list over the page (above a slide-over), never a native <select> */
.dc-w-field-compact { gap: 0; }
.dc-w-select { appearance: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 9rem; max-width: 100%; height: var(--w-ctl); padding: 0 8px 0 10px; border: 1px solid var(--w-border); border-radius: 8px; background: var(--w-input); color: var(--w-ink); font: inherit; font-size: var(--w-sm); text-align: left; cursor: pointer; justify-self: start; transition: border-color 0.15s, box-shadow 0.15s; }
.dc-w-select:hover { border-color: color-mix(in srgb, var(--dc-accent) 45%, var(--w-border)); }
.dc-w-select:focus-visible, .dc-w-select[aria-expanded="true"] { outline: none; border-color: var(--dc-accent-ink); box-shadow: 0 0 0 3px var(--dc-accent-dim); }
.dc-w-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-w-select > .dc-icon { flex: none; width: 14px; height: 14px; color: var(--w-muted); }
.dc-w-list { position: fixed; z-index: 80; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid var(--w-border); border-radius: 8px; background: var(--w-panel); box-shadow: 0 12px 32px var(--w-shadow-c), 0 0 0 1px var(--dc-accent-dim); outline: none; animation: dc-list-in 0.12s var(--dc-ease); }
.dc-w-list.up { animation-name: dc-list-up; }
@keyframes dc-list-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes dc-list-up { from { opacity: 0; transform: translateY(4px); } }
.dc-w-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--w-ctl); padding: 0 10px; border-radius: 6px; color: var(--w-ink); font-size: var(--w-sm); white-space: nowrap; cursor: pointer; }
.dc-w-option > .dc-icon { flex: none; width: 14px; height: 14px; color: var(--dc-accent-ink); visibility: hidden; }
.dc-w-option[aria-selected="true"] { color: var(--dc-accent-ink); }
.dc-w-option[aria-selected="true"] > .dc-icon { visibility: visible; }
.dc-w-option.on { background: var(--w-hover); }
.dc-w-option[aria-disabled="true"] { color: var(--w-faint); opacity: 0.55; cursor: not-allowed; }
.dc-w-option[aria-disabled="true"].on { background: none; }
.dc-w-tip { position: fixed; z-index: 81; max-width: 240px; padding: 5px 10px; border: 1px solid var(--w-border); border-radius: 6px; background: var(--w-panel); color: var(--w-ink); font-size: var(--w-sm); box-shadow: 0 8px 24px var(--w-shadow-c); transform: translateY(-50%); pointer-events: none; }
.dc-w-tip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .dc-w-list { animation: none; } }
/* copyField(): a value to read and copy */
.dc-w-copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dc-w-copy-value { flex: 1; min-width: 0; height: var(--w-ctl); display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--w-border); border-radius: 8px; background: var(--w-input); color: var(--w-ink); font-size: var(--w-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.dc-w-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0; }
/* qr(): dark on light in both themes, so every camera reads it */
.dc-w-qr { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.dc-w-qr-light { fill: #ffffff; }
.dc-w-qr-dark { fill: #120a1c; }

/* Tables: Webb's .tbl, edge to edge in their panel. */
.dc-w-table-wrap { max-width: 100%; overflow-x: auto; }
/* One column that never grows past its box: a wide table (its cells don't wrap) scrolls inside its card instead of
   pushing the view past the window */
:is(.dc-shell-main, .dc-view, .dc-w-card, .dc-w-meters, .dc-w-saves) > * { min-width: 0; }
.dc-w-table th { background: var(--w-th-bg); color: var(--w-muted); text-align: left; padding: 9px 14px; font-size: 9.6px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; border-bottom: 1px solid var(--w-line-soft); white-space: nowrap; }
.dc-w-table td { padding: 10px 14px; border-bottom: 1px solid var(--w-line-faint); color: var(--w-ink); font-size: var(--w-md); white-space: nowrap; }
.dc-w-table tr:last-child td { border-bottom: 0; }
.dc-w-table tbody tr:hover td { background: var(--w-row-hover); }
.dc-w-spark { width: 100%; height: 26px; display: block; }
.dc-w-spark-line { fill: none; stroke: var(--k, var(--dc-accent)); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dc-w-spark[data-kind="ok"] .dc-w-spark-line, .dc-w-spark[data-kind="idle"] .dc-w-spark-line { stroke: var(--dc-accent); }
.dc-w-spark-area { fill: color-mix(in srgb, var(--dc-accent) 12%, transparent); stroke: none; }

.dc-w-empty { display: grid; justify-items: start; gap: 8px; padding: 12px 0 4px; font-size: var(--w-sm); }
.dc-w-empty p { margin: 0; color: var(--w-muted); max-width: 60ch; }

/* ---- Metric cards (widgets.ts metrics()): each number a card that opens onto what's behind it ----
   The card: lifted off the ground, a glow from its corner in its kind's colour, the figure large, a picture of it on
   the right, "Fix" when a button can fix it. Pointer or keys open it; it lifts and lights. The panel under the row
   points back at the card, and holds the detail, then "Fix it" or "How to fix", then "Go to". It scales with its
   container: narrow, the pictures step aside and the panel's columns stack. */
.dc-w-metrics { container-type: inline-size; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; position: relative; }
.dc-w-metric { --k: var(--dc-accent); position: relative; appearance: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "value visual" "note visual" "more more"; align-items: center; gap: 2px 12px; min-width: 0; padding: 14px 16px 10px; border-radius: 12px; border: 1px solid var(--w-border); background: radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--k) 15%, transparent), transparent 55%), linear-gradient(180deg, var(--w-lift), transparent 45%), var(--w-card-base); box-shadow: inset 0 1px 0 var(--w-lift), 0 12px 30px -20px var(--w-shadow-c); color: var(--w-ink); font: inherit; text-align: left; cursor: pointer; transition: transform 0.18s var(--dc-ease), box-shadow 0.18s, border-color 0.18s; }
.dc-w-metric::before { content: ""; position: absolute; inset: 0 14px auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--k) 75%, transparent), transparent); }
/* The border and its glow are the card's health: mint when it's fine, amber when it wants a look, red when it's wrong,
   a plain hairline when the number carries no health of its own. */
.dc-w-metric, .dc-w-stat { border-color: color-mix(in srgb, var(--k) 55%, var(--w-border)); box-shadow: inset 0 1px 0 var(--w-lift), 0 12px 30px -20px var(--w-shadow-c), 0 0 24px -12px var(--k); }
.dc-w-metric[data-kind="idle"], .dc-w-stat[data-kind="idle"], .dc-w-stat:not([data-kind]) { --k: var(--w-faint); border-color: var(--w-border); box-shadow: inset 0 1px 0 var(--w-lift), 0 12px 30px -20px var(--w-shadow-c); }
.dc-w-metric[data-kind="ok"], .dc-w-stat[data-kind="ok"] { --k: var(--w-good); }
.dc-w-metric[data-kind="warn"], .dc-w-stat[data-kind="warn"] { --k: var(--w-high); }
.dc-w-metric[data-kind="bad"], .dc-w-stat[data-kind="bad"] { --k: var(--w-critical); }
.dc-w-metric:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--k) 80%, var(--w-border)); box-shadow: inset 0 1px 0 var(--w-lift), 0 18px 36px -20px var(--w-shadow-c), 0 0 32px -10px var(--k); }
.dc-w-metric:focus-visible { outline: none; border-color: var(--k); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 25%, transparent); }
.dc-w-metric[aria-expanded="true"] { transform: translateY(-2px); border-color: var(--k); box-shadow: inset 0 1px 0 var(--w-lift), 0 0 0 1px var(--k), 0 0 32px -10px var(--k); }
.dc-w-metric-label { grid-area: label; display: flex; align-items: center; gap: 6px; color: var(--w-muted); font-size: var(--w-sm); }
.dc-w-metric-label .dc-icon { width: 14px; height: 14px; color: var(--k); }
.dc-w-metric-fix { margin-left: auto; padding: 1px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--k) 60%, transparent); background: color-mix(in srgb, var(--k) 14%, transparent); color: var(--k); font-size: var(--w-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dc-w-metric-value { grid-area: value; font-size: var(--w-hero); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-w-metric[data-kind="ok"] .dc-w-metric-value { color: var(--w-good); }
.dc-w-metric[data-kind="warn"] .dc-w-metric-value { color: var(--w-high); }
.dc-w-metric[data-kind="bad"] .dc-w-metric-value { color: var(--w-critical); }
.dc-w-metric-value small { margin-left: 5px; font-size: var(--w-sm); font-weight: 400; letter-spacing: 0; color: var(--w-muted); }
.dc-w-metric-note { grid-area: note; color: var(--w-muted); font-size: var(--w-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-w-metric-visual { grid-area: visual; display: grid; place-items: center; min-width: 0; }
.dc-w-metric-visual .dc-w-spark { width: 84px; height: 30px; }
.dc-w-metric-more { grid-area: more; display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 6px; color: var(--w-faint); font-size: var(--w-xs); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; transition: opacity 0.15s; }
.dc-w-metric-more .dc-icon { width: 12px; height: 12px; transition: transform 0.2s var(--dc-ease); }
.dc-w-metric:hover .dc-w-metric-more, .dc-w-metric:focus-visible .dc-w-metric-more, .dc-w-metric[aria-expanded="true"] .dc-w-metric-more { opacity: 1; }
.dc-w-metric[aria-expanded="true"] .dc-w-metric-more .dc-icon { transform: rotate(180deg); }
/* A wide picture (a row of chips) takes its own line, so it never crowds the figure. */
.dc-w-metric:has(.dc-w-chips) { grid-template-areas: "label label" "value value" "note note" "visual visual" "more more"; }
.dc-w-metric:has(.dc-w-chips) .dc-w-metric-visual { justify-self: start; margin-top: 8px; }

/* Pictures: a ring gauge, and status chips. */
.dc-w-ring { --k: var(--dc-accent); position: relative; display: grid; place-items: center; width: 52px; height: 52px; }
.dc-w-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dc-w-ring-track { fill: none; stroke: var(--w-deep); stroke-width: 4.5; }
.dc-w-ring-arc { fill: none; stroke: var(--k); stroke-width: 4.5; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--k)); animation: dc-ring 1s var(--dc-ease) both; }
.dc-w-ring[data-kind="ok"] { --k: var(--w-good); }
.dc-w-ring[data-kind="warn"] { --k: var(--w-high); }
.dc-w-ring[data-kind="bad"] { --k: var(--w-critical); }
.dc-w-ring[data-kind="idle"] { --k: var(--dc-accent); }
@keyframes dc-ring { from { stroke-dasharray: 0 200; } }
.dc-w-ring-label { position: relative; font-size: var(--w-xs); font-weight: 700; color: var(--w-ink); font-variant-numeric: tabular-nums; }
.dc-w-chips { display: inline-flex; gap: 4px; }
.dc-w-chip { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--k) 55%, transparent); background: color-mix(in srgb, var(--k) 12%, var(--w-deep)); }
.dc-w-chip img { width: 16px; height: 16px; }
.dc-w-chip::after { content: ""; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--k); box-shadow: 0 0 6px var(--k); border: 1.5px solid var(--w-card-base); }
.dc-w-chip[data-kind="idle"] { border-style: dashed; opacity: 0.7; }
.dc-w-chip[data-kind="idle"]::after { background: var(--w-card-base); border-color: var(--w-faint); box-shadow: none; }
.dc-w-versions { display: inline-flex; align-items: center; gap: 4px; font-size: var(--w-xs); font-variant-numeric: tabular-nums; }
.dc-w-versions span { padding: 2px 6px; border-radius: 5px; border: 1px solid var(--w-border); color: var(--w-muted); }
.dc-w-versions span:last-child { border-color: var(--w-high); color: var(--w-high); background: color-mix(in srgb, var(--w-high) 12%, transparent); }

/* The panel under the row: it unfolds, points back at its card, and splits into the detail and what to do. */
.dc-w-drill { --k: var(--dc-accent); grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; margin-top: -4px; transition: grid-template-rows 0.28s var(--dc-ease), margin 0.28s var(--dc-ease); }
.dc-w-drill.open { grid-template-rows: 1fr; margin-top: 2px; }
.dc-w-drill[data-kind="ok"] { --k: var(--w-good); }
.dc-w-drill[data-kind="warn"] { --k: var(--w-high); }
.dc-w-drill[data-kind="bad"] { --k: var(--w-critical); }
.dc-w-drill-in { position: relative; min-height: 0; overflow: hidden; border-radius: 12px; border: 1px solid transparent; opacity: 0; transition: opacity 0.2s, border-color 0.2s; }
.dc-w-drill.open .dc-w-drill-in { overflow: visible; opacity: 1; border-color: color-mix(in srgb, var(--k) 45%, var(--w-border)); background: radial-gradient(60% 120% at var(--notch, 50%) 0%, color-mix(in srgb, var(--k) 10%, transparent), transparent 70%), var(--w-surface-strong); box-shadow: 0 24px 50px -30px var(--w-shadow-c), 0 0 40px -24px var(--k); }
.dc-w-drill.open .dc-w-drill-in::before { content: ""; position: absolute; top: -7px; left: calc(var(--notch, 50%) - 7px); width: 12px; height: 12px; transform: rotate(45deg); border-left: 1px solid color-mix(in srgb, var(--k) 45%, var(--w-border)); border-top: 1px solid color-mix(in srgb, var(--k) 45%, var(--w-border)); background: var(--w-surface-strong); }
.dc-w-drill-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--w-border); }
.dc-w-drill-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent); }
.dc-w-drill-icon .dc-icon { width: 16px; height: 16px; }
.dc-w-drill-head b { font-size: var(--w-lg); }
.dc-w-drill-value { font-size: var(--w-lg); font-weight: 700; color: var(--k); font-variant-numeric: tabular-nums; }
.dc-w-drill-value small { margin-left: 4px; font-weight: 400; color: var(--w-muted); }
.dc-w-drill-head .dc-close { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; }
.dc-w-drill-head .dc-close:hover { background: var(--w-hover); }
.dc-w-drill-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); }
.dc-w-drill-detail { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 14px; }
.dc-w-drill-side { display: grid; gap: 12px; align-content: start; padding: 14px; border-left: 1px solid var(--w-border); background: linear-gradient(180deg, color-mix(in srgb, var(--k) 5%, transparent), transparent 60%); }
.dc-w-fix { display: grid; gap: 8px; padding: 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--k) 40%, var(--w-border)); background: color-mix(in srgb, var(--k) 7%, transparent); font-size: var(--w-sm); }
.dc-w-fix b { font-size: var(--w-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--k); }
.dc-w-fix p { margin: 0; color: var(--w-muted); }
.dc-w-fix .dc-btn { justify-self: start; }
.dc-w-fix-status { margin: 0; color: var(--w-muted); }
.dc-w-fix-status:empty { display: none; }
.dc-w-fix-status[data-kind="ok"] { color: var(--w-good); }
.dc-w-fix-status[data-kind="bad"] { color: var(--w-critical); }
.dc-w-how ol { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--w-ink); }
.dc-w-fine { display: flex; align-items: center; gap: 8px; --k: var(--w-good); color: var(--w-good); }
.dc-w-pivots { display: grid; gap: 2px; font-size: var(--w-sm); }
.dc-w-pivots b { margin-bottom: 4px; font-size: var(--w-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--w-faint); }
.dc-w-pivots a { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 6px; color: var(--w-ink); text-decoration: none; }
.dc-w-pivots a .dc-icon { width: 14px; height: 14px; color: var(--dc-accent-ink); }
.dc-w-pivots a:hover { background: color-mix(in srgb, var(--dc-accent) 9%, transparent); }
html.dc-shell-on .dc-btn.dc-busy { opacity: 0.7; cursor: progress; }
/* Rows inside the detail: a label, a bar, a count. */
.dc-w-bars { display: grid; gap: 8px; font-size: var(--w-sm); }
.dc-w-bars-row { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) minmax(5.5rem, auto) minmax(0, 9.5rem); align-items: center; gap: 10px; }
.dc-w-bars-tag { justify-self: end; min-width: 0; }
.dc-w-bars-fill[data-kind="ok"] { --c: var(--w-good); }
/* The quiet upsell: a link in the faint ink, the accent only when pointed at. */
.dc-w-upsell { display: inline-flex; align-items: center; gap: 4px; color: var(--w-faint); font-size: var(--w-xs); letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; transition: color 0.15s; }
.dc-w-upsell .dc-icon { width: 12px; height: 12px; }
.dc-w-upsell:hover, .dc-w-upsell:focus-visible { color: var(--dc-accent-ink); }
.dc-w-upsell-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; color: var(--w-muted); font-size: var(--w-sm); }
.dc-w-bars-row > span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; color: var(--w-ink); white-space: nowrap; }
.dc-w-bars-row > span:first-child { color: var(--w-muted); }
.dc-w-bars-track { position: relative; height: 6px; border-radius: 3px; background: var(--w-deep); }
.dc-w-bars-fill { position: absolute; inset: 0 auto 0 0; width: var(--share); border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--dc-accent)) 50%, transparent), var(--c, var(--dc-accent))); animation: dc-fill 0.8s var(--dc-ease) both; }
.dc-w-bars-row.dc-out { opacity: 0.6; }
.dc-w-bars-row.dc-out .dc-w-bars-fill { --c: var(--w-faint); }
/* A commitment meter: used, the pace ahead (dashed), the commitment's marker, the overage shaded past it. */
.dc-w-commit { --k: var(--w-good); display: grid; gap: 8px; font-size: var(--w-sm); }
.dc-w-commit[data-kind="warn"] { --k: var(--w-high); }
.dc-w-commit[data-kind="bad"] { --k: var(--w-critical); }
.dc-w-commit-track { position: relative; height: 14px; margin-top: 18px; border-radius: 7px; background: var(--w-deep); box-shadow: inset 0 1px 2px var(--w-shadow-c); }
.dc-w-commit-used { position: absolute; inset: 0 auto 0 0; width: var(--to); border-radius: 7px; background: linear-gradient(180deg, rgb(255 255 255 / 0.28), transparent 55%), linear-gradient(90deg, color-mix(in srgb, var(--k) 45%, transparent), var(--k)); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--k) 70%, transparent); animation: dc-fill 0.9s var(--dc-ease) both; }
.dc-w-commit-ahead { position: absolute; top: 2px; bottom: 2px; left: var(--from); width: calc(var(--to) - var(--from)); border-radius: 0 6px 6px 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--k) 45%, transparent) 0 4px, transparent 4px 8px); border: 1px dashed color-mix(in srgb, var(--k) 70%, transparent); border-left: 0; }
.dc-w-commit-over { position: absolute; top: 0; bottom: 0; left: var(--from); right: 0; border-radius: 0 7px 7px 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--w-high) 16%, transparent) 0 3px, transparent 3px 7px); }
.dc-w-commit-mark { position: absolute; top: -18px; bottom: -4px; left: var(--at); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--w-ink); box-shadow: 0 0 8px var(--w-lift); }
.dc-w-commit-mark span { position: absolute; bottom: calc(100% - 14px); right: 6px; color: var(--w-ink); font-size: var(--w-xs); font-weight: 700; white-space: nowrap; }
.dc-w-commit-key { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--w-muted); font-size: var(--w-xs); }
.dc-w-commit-key span::before { content: ""; display: inline-block; width: 10px; height: 6px; margin-right: 6px; border-radius: 2px; vertical-align: 1px; }
.dc-k-used::before { background: var(--k); }
.dc-k-ahead::before { background: repeating-linear-gradient(135deg, var(--k) 0 2px, transparent 2px 4px); border: 1px dashed var(--k); }
.dc-k-over::before { background: repeating-linear-gradient(135deg, var(--w-high) 0 2px, transparent 2px 4px); opacity: 0.6; }
.dc-w-table tr.dc-yours td { background: color-mix(in srgb, var(--dc-accent) 10%, transparent); }
.dc-w-table tr.dc-yours td:first-child { box-shadow: inset 3px 0 0 var(--dc-accent); }
.dc-w-rate { color: var(--dc-accent-ink); font-weight: 700; }
.dc-w-save { color: var(--w-good); font-weight: 700; }
/* A slide-over: detail over the live view, from the right, on the strong surface with a lit edge. */
.dc-slide-scrim { position: fixed; inset: var(--w-bar) 0 0; z-index: 54; background: var(--w-scrim); opacity: 0; transition: opacity 0.22s; }
.dc-slide-scrim.open { opacity: 1; }
.dc-slide { position: fixed; top: var(--w-bar); right: 0; bottom: 0; z-index: 55; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(860px, 100vw); border-left: 1px solid var(--w-border); background: radial-gradient(80% 40% at 100% 0%, var(--dc-accent-dim), transparent 70%), var(--w-surface-strong); backdrop-filter: blur(16px); box-shadow: -30px 0 60px -30px var(--w-shadow-c); transform: translateX(24px); opacity: 0; transition: transform 0.26s var(--dc-ease), opacity 0.2s; outline: none; }
.dc-slide::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 1px; background: linear-gradient(180deg, transparent, var(--dc-accent), transparent); }
.dc-slide.open { transform: none; opacity: 1; }
.dc-slide-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--w-border); }
.dc-slide-head img { width: 28px; height: 28px; }
.dc-slide-titles { display: grid; gap: 2px; min-width: 0; }
.dc-slide-titles b { font-size: var(--w-lg); }
.dc-slide-titles span { color: var(--w-muted); font-size: var(--w-sm); }
.dc-slide-head .dc-close { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; }
.dc-slide-head .dc-close:hover { background: var(--w-hover); }
.dc-slide-body { display: grid; gap: 12px; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 28px; }
.dc-slide-body .dc-w-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (prefers-reduced-motion: reduce) { .dc-slide, .dc-slide-scrim { transition: none; } }
/* Savings and siphons: what it is, why, what it saves. */
.dc-w-saves { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.dc-w-card > .dc-w-saves { margin-inline: 0; }
.dc-w-saves li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 14px; padding: 10px 12px; border-bottom: 1px solid var(--w-border); font-size: var(--w-sm); }
.dc-w-saves li:last-child { border-bottom: 0; }
.dc-w-saves-text { display: grid; gap: 2px; min-width: 0; }
.dc-w-saves-text b { font-weight: 600; }
.dc-w-saves-text span { color: var(--w-muted); }
.dc-w-saves-amount { display: grid; justify-items: end; gap: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-w-saves-amount b { color: var(--w-good); }
.dc-w-saves-amount span { color: var(--w-muted); font-size: var(--w-xs); }
html.dc-shell-on .dc-w-saves .dc-btn { height: 26px; padding: 0 10px; }
.dc-w-source { display: grid; gap: 1px; }
.dc-w-share { display: inline-block; width: 72px; vertical-align: middle; }
.dc-w-source span { color: var(--w-muted); font-size: var(--w-xs); white-space: normal; }
.dc-w-list { display: grid; gap: 4px; margin: 0; padding-left: 18px; font-size: var(--w-sm); color: var(--w-ink); }
.dc-w-sub { margin: 0; font-size: var(--w-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--w-faint); }
@container (max-width: 760px) {
  .dc-w-metric-visual { display: none; }
  .dc-w-metric { grid-template-areas: "label" "value" "note" "more"; grid-template-columns: minmax(0, 1fr); }
  .dc-w-metric:has(.dc-w-chips) { grid-template-areas: "label" "value" "note" "more"; }
  .dc-w-drill-body { grid-template-columns: minmax(0, 1fr); }
  .dc-w-drill-side { border-left: 0; border-top: 1px solid var(--w-border); }
  .dc-w-bars-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .dc-w-bars-tag { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-w-metric, .dc-w-drill, .dc-w-drill-in { transition: none; }
  .dc-w-ring-arc, .dc-w-bars-fill { animation: none; }
}

/* Read by screen readers and crawlers, not shown. */
.dc-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 60rem) {
  .dc-bar { gap: 0.75rem; }
  .dc-home img { height: 24px; }
  .dc-bar-end { gap: 0.9rem; }
  .dc-bar-end .dc-btn { padding: 0 0.9rem; }
  .dc-switcher { left: 1rem; right: 1rem; width: auto; }
  .dc-input { padding: 0.6rem 0.75rem; }
}
@media (max-width: 25rem) {
  .dc-bar { gap: 0.5rem; }
  .dc-bar-end { gap: 0.6rem; }
  .dc-bar-end .dc-btn { padding: 0 0.7rem; }
  .dc-two { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .dc-scrim, .dc-scrim.open, .dc-drawer, .dc-drawer.open, .dc-switcher, .dc-switcher.open, .dc-switcher-scrim, .dc-sheet-scrim, .dc-home::after { transition: none; }
  .dc-pop, .dc-sheet, .dc-view.dc-enter, .dc-view.dc-leave, .dc-sweep.on, .dc-w-meter-fill { animation: none; }
  html.dc-shell-on, .dc-menu, .dc-menu.open, .dc-find-list, .dc-pages-head .dc-icon, .dc-w-switch, .dc-w-switch-knob, .dc-shell-main { transition: none; }
}

/* ---- the bar's tabs (shell.ts, tabs.ts): the places opened recently, as a browser's tab strip. The current tab is
   lifted out of the bar, its top corners round and its feet curving into the bar's bottom edge, a line of the place's
   accent along its top; the others sit flat, a rule between them, lit when pointed at. They shrink to fit, then to
   their marks. The + after the last opens a new one. ---- */
.dc-shell-bar.dc-tabs-on .dc-bar-here { display: none; }
.dc-tabs { --tab-h: 36px; --tab-r: 10px; --tab-lift: var(--w-panel-2); align-self: stretch; flex: 0 1 auto; display: flex; align-items: flex-end; min-width: 0; margin: 0 0 0 10px; padding: 0 var(--tab-r); overflow: hidden; }
.dc-tabs[hidden] { display: none; }
.dc-tab { position: relative; flex: 0 1 auto; max-width: 236px; min-width: 34px; height: var(--tab-h); margin-bottom: -1px; display: flex; align-items: center; gap: 8px; padding: 0 6px 1px 12px;
  border-radius: var(--tab-r) var(--tab-r) 0 0; color: var(--w-muted); font-size: var(--w-lg); cursor: default; user-select: none; transition: color 0.12s; }
/* a pointed-at tab is lit inside its own outline, clear of the bar's edge */
.dc-tab:not([aria-selected="true"]):hover { color: var(--w-ink); }
.dc-tab:not([aria-selected="true"]):hover > .dc-tab-face { opacity: 1; }
.dc-tab-face { position: absolute; inset: 4px 2px 5px; z-index: -1; border-radius: 8px; background: var(--w-hover); opacity: 0; transition: opacity 0.12s; pointer-events: none; }
/* the rule between two flat tabs: none beside the current or a pointed-at one */
.dc-tab::after { content: ""; position: absolute; right: 0; top: 11px; bottom: 11px; width: 1px; background: var(--w-border); }
.dc-tab:is([aria-selected="true"], :hover)::after, .dc-tab:has(+ .dc-tab:is([aria-selected="true"], :hover))::after, .dc-tab:last-child::after { opacity: 0; }
/* the current tab: lifted, its feet curving out into the bar's bottom edge, the accent along its top */
.dc-tab[aria-selected="true"] { z-index: 1; flex-shrink: 0.3; min-width: 112px; color: var(--w-ink); background: var(--tab-lift);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--dc-accent) 85%, transparent), 0 -1px 12px var(--w-shadow-c); }
.dc-tab[aria-selected="true"]::before, .dc-tab[aria-selected="true"]::after { content: ""; position: absolute; top: auto; bottom: 0; width: var(--tab-r); height: var(--tab-r); background: none; opacity: 1; }
.dc-tab[aria-selected="true"]::before { left: calc(-1 * var(--tab-r)); background: radial-gradient(circle at 0 0, transparent calc(var(--tab-r) - 0.5px), var(--tab-lift) var(--tab-r)); }
.dc-tab[aria-selected="true"]::after { right: calc(-1 * var(--tab-r)); background: radial-gradient(circle at 100% 0, transparent calc(var(--tab-r) - 0.5px), var(--tab-lift) var(--tab-r)); }
.dc-tab:focus-visible { outline: none; }
.dc-tab:focus-visible .dc-tab-title { text-decoration: underline; text-decoration-color: var(--dc-accent); text-underline-offset: 3px; }
.dc-tab .dc-glyph { flex: none; width: 16px; height: 16px; color: var(--dc-accent-ink); }
.dc-tab-title { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.dc-tab-title.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
.dc-tab-x { appearance: none; flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--w-muted); cursor: pointer; }
.dc-tab-x .dc-icon { width: 14px; height: 14px; }
.dc-tab-x:hover { color: var(--w-ink); background: color-mix(in srgb, var(--w-ink) 14%, transparent); }
.dc-tabs-tight .dc-tab:not([aria-selected="true"]):not(:hover) .dc-tab-x { display: none; }
.dc-tabs-tight .dc-tab { gap: 6px; padding: 0 4px 1px 9px; }
.dc-tabs-marks .dc-tab:not([aria-selected="true"]) { justify-content: center; padding: 0 0 1px; }
.dc-tabs-marks .dc-tab:not([aria-selected="true"]) .dc-tab-title, .dc-tabs-marks .dc-tab:not([aria-selected="true"]) .dc-tab-x { display: none; }
/* the + after the last tab: a new one */
.dc-tab-new { appearance: none; flex: none; align-self: flex-end; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 8px 4px -6px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--w-muted); cursor: pointer; transition: color 0.12s, background 0.12s; }
.dc-tab-new .dc-icon { width: 18px; height: 18px; }
.dc-tab-new:hover { color: var(--w-ink); background: var(--w-hover); }
.dc-tab-new:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--dc-accent); }
/* a tab being dragged rides above the row, lifted as the current one */
.dc-tab.dc-tab-drag { z-index: 2; cursor: grabbing; color: var(--w-ink); background: var(--tab-lift); box-shadow: 0 6px 18px var(--w-shadow-c); transition: none; }
.dc-tab.dc-tab-drag::before, .dc-tab.dc-tab-drag::after, .dc-tab:has(+ .dc-tab-drag)::after { opacity: 0; }
.dc-tab-tip { position: fixed; z-index: 80; max-width: 360px; padding: 5px 9px; border: 1px solid var(--w-border); border-radius: 6px; background: var(--w-panel);
  color: var(--w-ink); font-size: var(--w-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 8px 24px var(--w-shadow-c); pointer-events: none; }
.dc-tab-tip[hidden], .dc-tabmenu[hidden], .dc-newtab[hidden], .dc-tab-new[hidden] { display: none; }
.dc-tabmenu { position: fixed; z-index: 80; min-width: 220px; padding: 4px; border: 1px solid var(--w-border); border-radius: 8px; background: var(--w-panel);
  box-shadow: 0 12px 32px var(--w-shadow-c), 0 0 0 1px var(--dc-accent-dim); }
.dc-tabmenu-item { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--w-ink); font: inherit; font-size: var(--w-lg); text-align: left; cursor: pointer; }
.dc-tabmenu-item:is(:hover, :focus-visible) { outline: none; background: var(--w-hover); }
.dc-tabmenu-item[aria-disabled="true"] { color: var(--w-faint); cursor: default; background: none; }
.dc-tabmenu-rule { margin: 4px 6px; border: 0; border-top: 1px solid var(--w-border); }
.dc-newtab { position: fixed; z-index: 80; display: grid; grid-template-columns: 232px 296px; max-height: min(72vh, 560px); border: 1px solid var(--w-border); border-radius: 10px;
  background: var(--w-panel); box-shadow: 0 16px 40px var(--w-shadow-c), 0 0 0 1px var(--dc-accent-dim); overflow: hidden; }
.dc-newtab[hidden] { display: none; }
.dc-newtab-mods { padding: 6px 8px; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--w-border); }
.dc-newtab-pages { padding: 6px 8px 10px; overflow-y: auto; overscroll-behavior: contain; }
.dc-newtab .dc-panel-head { padding: 8px 10px 6px; }
.dc-newtab-mods { padding: 6px 8px; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--w-border); }
.dc-newtab-pages { padding: 6px 8px 10px; overflow-y: auto; overscroll-behavior: contain; }
.dc-newtab .dc-panel-head { padding: 8px 10px 6px; }
@media (max-width: 60rem) { .dc-tabs, .dc-tab-new { display: none; } .dc-shell-bar.dc-tabs-on .dc-bar-here { display: flex; } }
.dc-pages-label { padding: 6px 10px 4px; color: var(--w-faint); font-size: var(--w-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---- a module's tag ("Early Access"): platinum, its chroma moving across it while the row is pointed at ---- */
.dc-mod-end { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.dc-panel-head:has(.dc-tag) { display: flex; align-items: center; gap: 10px; }
.dc-tag { flex: none; padding: 2px 8px; border-radius: 999px; font-size: var(--w-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: #1d1a26; background: linear-gradient(115deg, #e9ecf2 0%, #b9c0cc 22%, #f7f8fb 38%, #c9d0dc 52%, #eef1f6 66%, #aeb6c3 82%, #e4e8ef 100%);
  background-size: 220% 100%; background-position: 0% 50%;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.75), inset 0 -1px 0 rgb(0 0 0 / 0.18), 0 0 0 1px rgb(255 255 255 / 0.12), 0 2px 8px rgb(0 0 0 / 0.35);
  transition: background-position 0.9s var(--dc-ease), filter 0.4s; }
/* pointed at: the sheen sweeps across and a thin spectral chroma plays over the platinum */
:is(.dc-mod, .dc-panel-head, .dc-newtab-mods .dc-mod):hover .dc-tag, .dc-tag:hover {
  background-image: linear-gradient(115deg, #e9ecf2 0%, #b9c0cc 18%, #f2e6ff 30%, #f7f8fb 40%, #d8f1ff 50%, #c9d0dc 58%, #fff2dc 70%, #eef1f6 80%, #aeb6c3 100%);
  background-position: 100% 50%; filter: saturate(1.25) brightness(1.04); animation: dc-chroma 2.4s linear infinite; }
@keyframes dc-chroma { 0% { background-position: 100% 50%; } 50% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
html[data-theme="light"] .dc-tag { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -1px 0 rgb(0 0 0 / 0.14), 0 0 0 1px rgb(36 18 56 / 0.18), 0 1px 4px rgb(36 18 56 / 0.15); }
@media (prefers-reduced-motion: reduce) { .dc-tag { transition: none; } :is(.dc-mod, .dc-panel-head):hover .dc-tag, .dc-tag:hover { animation: none; } }

/* The bar's account: initials in a small square and the name, opening a plain menu of the person's own things. The
   platform's health beside it is a word and a dot, not a pill. */
.dc-bar-end .dc-shell-status { padding: 0; border: 0; background: none; color: var(--w-muted); font-size: var(--w-sm); }
.dc-bar-end .dc-shell-status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--k, var(--w-faint)); vertical-align: 1px; }
.dc-account-wrap { position: relative; }
.dc-account { appearance: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 4px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--w-ink); font: inherit; font-size: var(--w-md); cursor: pointer; }
.dc-account:hover, .dc-account[aria-expanded="true"] { border-color: var(--w-border); background: var(--w-hover); }
.dc-account .dc-icon { width: 14px; height: 14px; color: var(--w-faint); }
.dc-account-mono { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 6px; background: color-mix(in srgb, var(--dc-accent) 16%, var(--w-panel-2)); color: var(--w-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.dc-account-mono.is-big { width: 36px; height: 36px; font-size: 13px; }
.dc-account-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: grid; width: 264px; padding: 6px; border: 1px solid var(--w-border); border-radius: 10px; background: var(--w-surface-strong); box-shadow: 0 12px 32px rgb(0 0 0 / 0.28); }
.dc-account-menu[hidden] { display: none; }
.dc-account-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid var(--w-line-soft); margin-bottom: 4px; }
.dc-account-head b { display: block; color: var(--w-ink); font-size: var(--w-lg); }
.dc-account-head span:not(.dc-account-mono) { color: var(--w-muted); font-size: var(--w-sm); }
.dc-account-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; color: var(--w-ink); font-size: var(--w-md); }
.dc-account-seg { display: inline-flex; border: 1px solid var(--w-border); border-radius: 6px; overflow: hidden; }
.dc-account-seg button { appearance: none; height: 26px; padding: 0 10px; border: 0; background: none; color: var(--w-muted); font: inherit; font-size: var(--w-sm); cursor: pointer; }
.dc-account-seg button + button { border-left: 1px solid var(--w-border); }
.dc-account-seg button[aria-checked="true"] { background: var(--dc-accent-dim); color: var(--w-ink); }
.dc-account-item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: 6px; color: var(--w-ink); font-size: var(--w-md); text-decoration: none; }
.dc-account-item:hover { background: var(--w-hover); }
.dc-account-item .dc-icon { width: 15px; height: 15px; color: var(--w-muted); }
.dc-account-hr { height: 1px; margin: 4px 0; border: 0; background: var(--w-line-soft); }