/* Unified Array Control, the new UI ("Calm", direction A). ONE stylesheet for /next/: tokens, base, components, shell, pages.
   Rules (docs/UI-NEXT.md): every colour, size and radius is a token below; no inline styles anywhere (the CSP for /next/ is style-src 'self');
   light is the default, dark follows the system unless the person picks one (data-theme on <html>); .theme-light / .theme-dark force a theme on one subtree (the gallery). */

/* ---------- fonts (self-hosted, SIL OFL 1.1, see fonts/OFL.txt) ---------- */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- tokens: light (default) ---------- */
:root, .theme-light {
  --ground: #F6F6F4;        /* page background */
  --surface: #FFFFFF;       /* cards, rail, top bar */
  --surface-2: #FAFAFA;     /* fields, quiet fills */
  --sunk: #ECEDEF;          /* segmented track, skeleton */
  --hover: #F3F6FD;         /* row and card hover */
  --selected: #EAF0FD;      /* current nav item, selected option */
  --selected-ink: #173E9E;
  --line: #E4E5E8;          /* hairline around surfaces */
  --line-soft: #ECEDEF;     /* separators inside a surface */
  --line-btn: #DADCE0;      /* secondary button outline (the label identifies it) */
  --control: #858A94;       /* outline of fields, boxes, switches: 3:1 on every surface */
  --ink: #16181D;
  --ink-2: #3B3F47;
  --muted: #5B606B;
  --accent: #2457D6;
  --accent-hover: #173E9E;
  --accent-fill: #2457D6;
  --accent-fill-hover: #1C47B5;
  --on-accent: #FFFFFF;
  --red: #C6283A;
  --amber: #A35200;
  --green: #1A7346;         /* #1E7F4F darkened a little: 4.5:1 on every surface */
  --grey: #61666F;          /* #6B7280 darkened a little: 4.5:1 on the ground */
  --red-bg: #FDEEEF;  --red-line: #F3C7CC;  --red-ink: #9F1D2D;
  --amber-bg: #FFF4E5; --amber-line: #F2D3A8;
  --green-bg: #E7F6EF; --green-line: #BFE3CF;
  --info-bg: #EAF0FD; --info-line: #C9D7F7;
  --danger-fill: #C6283A; --danger-fill-hover: #A81F30;
  --focus: #2457D6;
  --scrim: rgba(22, 24, 29, .38);
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .08);
  --shadow-pop: 0 12px 32px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .08);
  --scroll-thumb: #B9BDC5; --scroll-thumb-hover: #8F949D; --scroll-track: transparent;
  --skeleton-hi: #F6F7F8;
  /* logo chip fills for initials (white text passes 4.5:1 on each) */
  --chip-0: #0F766E; --chip-1: #6D28D9; --chip-2: #1D4ED8; --chip-3: #9A4A08; --chip-4: #BE185D; --chip-5: #4D5562; --chip-6: #15803D; --chip-7: #B42318;
  --chip-logo: #F1F2F4;     /* a customer logo's tile: a very light neutral, so a mostly white logo still sits visibly in its square */
  color-scheme: light;
}

/* ---------- tokens: dark ---------- */
:root[data-theme="dark"], .theme-dark {
  --ground: #0E1014; --surface: #16191F; --surface-2: #1B1F26; --sunk: #23272F; --hover: #1C2230; --selected: #1C2A47; --selected-ink: #B9CCFF;
  --line: #2A2E36; --line-soft: #23272E; --line-btn: #343944; --control: #6E7480;
  --ink: #ECEEF2; --ink-2: #C9CDD5; --muted: #A1A7B2;
  --accent: #86A9FF; --accent-hover: #B9CCFF; --accent-fill: #3263E6; --accent-fill-hover: #2753C8; --on-accent: #FFFFFF;
  --red: #FF7D89; --amber: #F0A456; --green: #55C892; --grey: #9CA3AE;
  --red-bg: #2B1519; --red-line: #5A2630; --red-ink: #FFB3BA;
  --amber-bg: #2A1F10; --amber-line: #5A4120;
  --green-bg: #11261C; --green-line: #24513A;
  --info-bg: #16233F; --info-line: #2C4377;
  --danger-fill: #C42E40; --danger-fill-hover: #A82536;
  --focus: #86A9FF; --scrim: rgba(0, 0, 0, .6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  --scroll-thumb: #3D434E; --scroll-thumb-hover: #59606C; --scroll-track: transparent;
  --skeleton-hi: #2B3039;
  --chip-0: #0F766E; --chip-1: #6D28D9; --chip-2: #1D4ED8; --chip-3: #9A4A08; --chip-4: #BE185D; --chip-5: #4D5562; --chip-6: #15803D; --chip-7: #B42318;
  --chip-logo: #D9DDE3;     /* a customer logo's tile (dark): light enough for dark logos, grey enough that a white logo shows */
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0E1014; --surface: #16191F; --surface-2: #1B1F26; --sunk: #23272F; --hover: #1C2230; --selected: #1C2A47; --selected-ink: #B9CCFF;
    --line: #2A2E36; --line-soft: #23272E; --line-btn: #343944; --control: #6E7480;
    --ink: #ECEEF2; --ink-2: #C9CDD5; --muted: #A1A7B2;
    --accent: #86A9FF; --accent-hover: #B9CCFF; --accent-fill: #3263E6; --accent-fill-hover: #2753C8; --on-accent: #FFFFFF;
    --red: #FF7D89; --amber: #F0A456; --green: #55C892; --grey: #9CA3AE;
    --red-bg: #2B1519; --red-line: #5A2630; --red-ink: #FFB3BA;
    --amber-bg: #2A1F10; --amber-line: #5A4120;
    --green-bg: #11261C; --green-line: #24513A;
    --info-bg: #16233F; --info-line: #2C4377;
    --danger-fill: #C42E40; --danger-fill-hover: #A82536;
    --focus: #86A9FF; --scrim: rgba(0, 0, 0, .6);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-pop: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
    --scroll-thumb: #3D434E; --scroll-thumb-hover: #59606C; --scroll-track: transparent;
    --skeleton-hi: #2B3039;
    --chip-logo: #D9DDE3;
    color-scheme: dark;
  }
}

/* ---------- scale tokens (same in both themes) ---------- */
:root {
  --font: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", "Cascadia Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15px; --t-17: 17px; --t-20: 20px; --t-28: 28px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --r-sm: 6px; --r: 8px; --r-md: 10px; --r-lg: 12px;
  --h-sm: 36px; --h: 44px;
  --rail-w: 248px; --rail-w-compact: 76px; --top-h: 76px; --tab-h: 64px;
  --page-max: none;         /* pages use the whole window beside the menu; only prose and forms keep a reading width (.prose, .form-width) */
  --page-pad: 24px;         /* the side padding of a page (16 px on a phone) */
  --prose-max: 75ch; --form-max: 960px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--ground); color: var(--ink); font: 400 var(--t-15)/1.5 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01" 0; }
.theme-light, .theme-dark { background: var(--ground); color: var(--ink); }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: var(--t-28); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
h2 { font-size: var(--t-17); font-weight: 600; line-height: 1.3; }
h3 { font-size: var(--t-15); font-weight: 600; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img, svg { display: block; }
svg { flex: none; }
[hidden] { display: none !important; }
.mono, code, kbd { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -60px; z-index: 50; background: var(--surface); color: var(--ink); padding: 0 var(--s-4); height: var(--h); display: inline-flex; align-items: center; border: 2px solid var(--focus); border-radius: var(--r-md); }
.skip:focus { top: var(--s-3); }

/* focus: one ring for everything, keyboard only */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.btn:focus-visible, .field__control:focus-visible { outline-offset: 2px; }

/* thick, styled scrollbars everywhere (Chromium and Safari: ::-webkit-scrollbar; Firefox: scrollbar-color) */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-color: var(--scroll-thumb) var(--scroll-track); scrollbar-width: auto; } }

/* reduced motion: no slides, no shimmer, no smooth scrolling */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- icons ---------- */
.ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 16px; height: 16px; }
.ico--lg { width: 22px; height: 22px; }

/* ---------- buttons: primary, secondary, quiet, danger; 44 (default) and 36 (dense) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: var(--h); min-width: var(--h); padding: 0 var(--s-4); border: 1px solid var(--line-btn); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: var(--t-15); font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; transition: background-color .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease); }
.btn:hover { background: var(--hover); border-color: var(--control); color: var(--ink); }
.btn--primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.btn--primary:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); color: var(--on-accent); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--quiet:hover { background: var(--sunk); border-color: transparent; color: var(--ink); }
.btn--danger { background: var(--danger-fill); border-color: var(--danger-fill); color: #FFFFFF; font-weight: 600; }
.btn--danger:hover { background: var(--danger-fill-hover); border-color: var(--danger-fill-hover); color: #FFFFFF; }
.btn--sm { height: var(--h-sm); min-width: var(--h-sm); padding: 0 var(--s-3); border-radius: var(--r); font-size: var(--t-14); }
.btn--icon { padding: 0; width: var(--h); }
.btn--icon.btn--sm { width: var(--h-sm); }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn .kbd { margin-left: var(--s-1); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* ---------- kbd hint, badge ---------- */
.kbd { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: 1px solid var(--line-btn); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--muted); font: 500 var(--t-12)/1 var(--mono); white-space: nowrap; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--sunk); color: var(--ink-2); font-size: var(--t-12); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.badge--alert { background: var(--danger-fill); color: #FFFFFF; }
.badge--accent { background: var(--accent-fill); color: var(--on-accent); }
.badge--quiet { background: transparent; color: var(--muted); font-weight: 500; padding: 0; min-width: 0; }

/* ---------- status: light + word, sentence case ---------- */
.status { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-14); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.status__light { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.status--ok { color: var(--green); }
.status--attention { color: var(--amber); }
.status--offline { color: var(--red); }
.status--unknown { color: var(--grey); }
.status--quiet { color: var(--grey); }
.status--quiet .status__light { background: transparent; border: 2px dashed currentColor; }
.status--info { color: var(--accent); }
.status--maintenance { color: var(--accent); }
.status--maintenance .status__light { background: transparent; border: 2px solid currentColor; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 6px currentColor; }
.status--sm { font-size: var(--t-13); gap: 6px; }
.status--sm .status__light { width: 8px; height: 8px; }
.status--strong { font-weight: 600; }

/* ---------- logo chip: one fixed square, the picture contained, initials when there is none ---------- */
.chip { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: var(--r); overflow: hidden; background: var(--chip-5); color: #FFFFFF; font-weight: 700; font-size: 12px; letter-spacing: .02em; line-height: 1; user-select: none; }
.chip--20 { width: 20px; height: 20px; border-radius: 5px; font-size: 9px; }
.chip--32 { width: 32px; height: 32px; border-radius: var(--r); font-size: 12px; }
.chip--40 { width: 40px; height: 40px; border-radius: 9px; font-size: 13px; }
.chip--56 { width: 56px; height: 56px; border-radius: var(--r-lg); font-size: 18px; }
.chip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--chip-logo); padding: 12%; }
/* a chip holding a logo: a hairline drawn OVER the picture (inset, so the square keeps its fixed size and nothing overflows), so a white logo on a white page still sits in a visible square */
.chip--logo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.chip--logo.is-broken::after { content: none; }
.chip.is-broken .chip__img { display: none; }
.chip--c0 { background: var(--chip-0); } .chip--c1 { background: var(--chip-1); } .chip--c2 { background: var(--chip-2); } .chip--c3 { background: var(--chip-3); }
.chip--c4 { background: var(--chip-4); } .chip--c5 { background: var(--chip-5); } .chip--c6 { background: var(--chip-6); } .chip--c7 { background: var(--chip-7); }
.chip--brand { background: var(--ink); color: var(--surface); }

/* ---------- page header ---------- */
.page { width: 100%; max-width: var(--page-max); padding: var(--s-7) var(--page-pad); display: flex; flex-direction: column; gap: var(--s-6); }
/* a reading width for text and forms only: tables, lists, grids and hubs use the full width */
.prose, .dk-md { max-width: var(--prose-max); }
.form-width, .fields:not(.ed-fields) { max-width: var(--form-max); }
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); }
.ph__text { flex: 1 1 320px; min-width: 0; }
.ph__title { outline: none; font-size: var(--t-28); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.ph__intro { margin-top: 6px; font-size: var(--t-15); color: var(--muted); max-width: 70ch; }
.ph__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.ph--lead { align-items: flex-start; }
.ph__lead { flex: none; padding-top: 30px; }
.ph__below { margin-top: var(--s-3); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--s-3); font-size: var(--t-13); color: var(--muted); }
.crumbs a { color: var(--accent); }
.crumbs__sep { color: var(--muted); }

/* hub header (customer, device) */
.hub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.hub__text { flex: 1 1 280px; min-width: 0; }
.hub__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; font-size: var(--t-14); color: var(--ink-2); }
.hub__meta a { color: var(--accent); }

/* ---------- segmented control ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--sunk); border-radius: var(--r-md); }
.seg__item { display: inline-flex; align-items: center; gap: 6px; height: var(--h-sm); padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font-size: var(--t-14); font-weight: 500; text-decoration: none; white-space: nowrap; }
.seg__item:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.seg__item[aria-selected="true"], .seg__item[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); }
.seg__count { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- tabs (underline) ---------- */
.tabs { display: flex; gap: var(--s-6); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
/* a tab row wider than its box (the Devices views at 1366 px, most tab rows on a phone) fades out at the edge it scrolls toward, so a cut word reads as "more this way";
   driven by the row's own scroll position (no script), and a row that fits gets no fade at all (an inactive timeline leaves both fades at 0) */
@property --tabs-fl { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --tabs-fr { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes tabs-fade { 0% { --tabs-fl: 0px; --tabs-fr: 40px; } 8%, 92% { --tabs-fl: 40px; --tabs-fr: 40px; } 100% { --tabs-fl: 40px; --tabs-fr: 0px; } }
@supports (animation-timeline: scroll()) {
  .tabs { mask-image: linear-gradient(to right, transparent 0, #000 var(--tabs-fl), #000 calc(100% - var(--tabs-fr)), transparent 100%); animation: tabs-fade linear both; animation-timeline: scroll(self inline); }
}
.tabs--flush { border-bottom: 0; }
.tabs__item { display: inline-flex; align-items: center; gap: 6px; height: var(--h); padding: 0 4px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ink-2); font-size: var(--t-15); white-space: nowrap; text-decoration: none; }
.tabs__item:hover { color: var(--ink); }
.tabs__item[aria-selected="true"], .tabs__item[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent-fill); }
.tabs__count { color: var(--muted); font-weight: 500; }
.tabpanel:focus-visible { outline-offset: 4px; }

/* ---------- stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat { display: block; padding: 18px var(--s-5); border-right: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; min-width: 0; }
.stat:last-child { border-right: 0; }
a.stat:hover { background: var(--hover); color: var(--ink); }
.stat__label { font-size: var(--t-13); color: var(--muted); }
.stat__value { margin-top: 4px; font-size: var(--t-28); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat--offline .stat__value { color: var(--red); }
.stat--attention .stat__value { color: var(--amber); }
.stat--ok .stat__value { color: var(--green); }
.stat--zero .stat__value { color: var(--muted); }

/* ---------- section (a card with a title) ---------- */
.section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.section__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-height: 56px; padding: var(--s-3) var(--s-5); }
.section__title { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; } /* the actions go under the title when both do not fit (a phone), never over it */
.section__body { padding: 0 var(--s-5) var(--s-5); }
.section__body--flush { padding: 0; }
.section__foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line-soft); font-size: var(--t-13); color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: var(--s-6); }
.stack--sm { gap: var(--s-3); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-5); }
.note { font-size: var(--t-13); color: var(--muted); }

/* ---------- small shared parts: ONE rule each. New markup uses the plain name; the page-prefixed names after it are the copies the
   page builds grew (same look), kept as aliases until those pages are next edited. Never add a page copy of one of these. ---------- */
/* an error line under a form (empty until a save fails) */
.form-err, .nw-err, .bill-err, .cu-err, .ad-err { margin: 0; min-height: 0; color: var(--red); font-size: var(--t-14); font-weight: 500; }
.form-err:empty, .nw-err:empty, .bill-err:empty, .cu-err:empty, .ad-err:empty { display: none; }
/* a sub-heading inside a section or a panel */
.subhead, .cu-h3, .nw-h3, .ad-h3 { font-size: var(--t-15); font-weight: 600; margin-top: var(--s-2); }
/* a plain bulleted list of short facts */
.list-plain, .cu-plain, .nw-plain { margin: 0; padding: 0 0 0 var(--s-5); display: flex; flex-direction: column; gap: 6px; font-size: var(--t-14); }
.list-plain--flat, .cu-plain--flat { list-style: none; }
/* numbered steps (how to set something up) */
.steps-list, .nw-steps, .ad-steps { margin: 0; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-14); color: var(--ink-2); }
.steps-list li, .nw-steps li, .ad-steps li { overflow-wrap: anywhere; }
.steps-list .btn, .nw-steps .btn { margin-top: var(--s-1); }
.steps-list--bullets, .ad-steps--bullets { list-style: disc; }
/* one quiet line where a list has nothing to show */
.none-note, .nw-none, .dhub__none { margin: 0; padding: var(--s-4) var(--s-5); color: var(--muted); font-size: var(--t-14); }
/* a quiet second line under a name (a table cell, a list row) */
.subline, .cu-cell-sub, .nw-sub, .bill-sub { display: block; font-size: var(--t-13); font-weight: 400; color: var(--muted); }
/* a warning said in words (never colour alone) */
.warn-word, .nw-warn, .bill-warn, .dk-warnword { color: var(--amber); font-weight: 500; }
/* a small tag (a kind, a label) and its two tones */
.tag, .bill-tag, .dk-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--sunk); color: var(--ink-2); font-size: var(--t-12); font-weight: 500; white-space: nowrap; }
.tag--crit, .dk-tag--crit { background: var(--red-bg); color: var(--red-ink); }
.tag--warn, .dk-tag--warn { background: var(--amber-bg); color: var(--amber); }
/* a block that should not stretch across a wide page (one field, one choice) */
.narrow, .cu-narrow, .ad-narrow { max-width: 420px; }
/* a row of things above a list: views, a search, buttons; --split pushes the last part to the right */
.bar, .dk-bar, .bill-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); min-width: 0; }
.bar--split, .nw-bar, .cu-bar, .ad-headrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); min-width: 0; }
.bar > .subhead, .bar--split > .subhead { margin-top: 0; }

/* ---------- grouped list: one surface per group, whole-row links ---------- */
.glist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; container-type: inline-size; }
.glist__head { display: flex; align-items: center; gap: var(--s-3); min-height: 60px; padding: 14px var(--s-5); color: var(--ink); text-decoration: none; }
a.glist__head:hover { background: var(--hover); color: var(--ink); }
.glist__name { font-size: var(--t-15); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.glist__meta { margin-left: auto; font-size: var(--t-13); color: var(--muted); text-align: right; }
.glist__row { display: grid; grid-template-columns: 132px minmax(170px, 1.1fr) minmax(200px, 2fr) 96px 88px; align-items: center; gap: var(--s-4); min-height: 56px; padding: 10px var(--s-5); border-top: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; }
.glist__row:hover { background: var(--hover); color: var(--ink); }
.glist__row:hover .glist__open { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.glist__row:focus-visible { outline-offset: -2px; border-radius: 0; }
.glist__title { display: flex; flex-direction: column; min-width: 0; }
.glist__main { font-size: var(--t-14); font-weight: 500; overflow-wrap: anywhere; }
.glist__main.mono { font-size: var(--t-14); }
.glist__sub { font-size: var(--t-12); color: var(--muted); }
.glist__text { font-size: var(--t-14); color: var(--ink-2); overflow-wrap: anywhere; min-width: 0; }
.glist__when { font-size: var(--t-13); color: var(--muted); }
.glist__open { justify-self: end; display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 14px; border: 1px solid var(--line-btn); border-radius: var(--r); font-size: var(--t-14); font-weight: 500; color: var(--ink); }
.glist--simple .glist__row { grid-template-columns: minmax(0, 1fr) auto; }
.glist__empty { padding: var(--s-5); border-top: 1px solid var(--line-soft); color: var(--muted); font-size: var(--t-14); }
/* the list follows the width it is given (a page, a half-width pane, a phone): two columns, then one */
@container (max-width: 820px) {
  .glist__row { grid-template-columns: 120px minmax(0, 1fr); row-gap: 4px; padding: var(--s-3) var(--s-5); }
  .glist__row > .glist__text { grid-column: 2; }
  .glist__hide { display: none; }
  .glist--simple .glist__row { grid-template-columns: minmax(0, 1fr) auto; }
}
@container (max-width: 520px) {
  .glist__head { padding: var(--s-3) var(--s-4); min-height: 56px; flex-wrap: wrap; row-gap: 2px; }
  .glist__meta { margin-left: 0; flex-basis: 100%; text-align: left; }
  .glist__head:has(.chip) .glist__meta { padding-left: 44px; }
  .glist__row { grid-template-columns: minmax(0, 1fr); padding: var(--s-3) var(--s-4); }
  .glist__row > .glist__text { grid-column: auto; }
  .glist--simple .glist__row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- form fields: 44 px, label above ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: var(--t-14); font-weight: 500; color: var(--ink); }
.field__hint { font-size: var(--t-13); color: var(--muted); }
.field__error { font-size: var(--t-13); color: var(--red); font-weight: 500; }
.field__control { width: 100%; height: var(--h); padding: 0 var(--s-3); border: 1px solid var(--control); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: var(--t-15); appearance: none; -webkit-appearance: none; }
.field__control::placeholder { color: var(--muted); opacity: 1; }
.field__control:hover { border-color: var(--ink-2); }
.field__control:focus-visible { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 0; }
.field--invalid .field__control { border-color: var(--red); }
textarea.field__control { height: auto; min-height: 96px; padding: 10px var(--s-3); line-height: 1.45; resize: vertical; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
/* a date field: the browser's own calendar button is drawn as our line icon (the picker it opens is the system's) */
.field__control[type="date"] { min-width: 0; }
.field__control[type="date"]::-webkit-calendar-picker-indicator { width: 18px; height: 18px; margin: 0 -2px 0 var(--s-2); padding: 4px; border-radius: var(--r-sm); cursor: pointer; opacity: 1; color: var(--muted); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") center / 18px 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
.field__control[type="date"]:hover::-webkit-calendar-picker-indicator { color: var(--ink); }

/* ---------- BIG checkbox, radio and switch (native inputs, drawn here) ---------- */
.check { display: inline-flex; align-items: flex-start; gap: var(--s-3); min-height: var(--h); padding: 10px 0; cursor: pointer; font-size: var(--t-15); line-height: 1.4; }
.check__box { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--control); border-radius: 6px; background: var(--surface); display: grid; place-content: center; cursor: pointer; transition: background-color .12s var(--ease), border-color .12s var(--ease); }
.check__box::before { content: ""; width: 13px; height: 13px; transform: scale(0); transition: transform .12s var(--ease); background: var(--on-accent); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
.check__box:checked { background: var(--accent-fill); border-color: var(--accent-fill); }
.check__box:checked::before { transform: scale(1); }
.check__box:indeterminate { background: var(--accent-fill); border-color: var(--accent-fill); }
.check__box:indeterminate::before { transform: scale(1); clip-path: inset(40% 8% 40% 8%); }
.check__box:hover { border-color: var(--ink-2); }
.check__box:checked:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.check__box:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.check__box:disabled { opacity: .5; cursor: not-allowed; }
.check__box[type="radio"] { border-radius: 50%; }
.check__box[type="radio"]::before { width: 10px; height: 10px; border-radius: 50%; clip-path: none; }
.check__text { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.check__hint { font-size: var(--t-13); color: var(--muted); }
.switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 48px; height: 28px; margin: 0; border: 2px solid var(--control); border-radius: 14px; background: var(--surface); cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--control); transition: transform .15s var(--ease), background-color .15s var(--ease); }
.switch:checked { background: var(--accent-fill); border-color: var(--accent-fill); }
.switch:checked::before { transform: translateX(20px); background: var(--on-accent); }
.switch:hover { border-color: var(--ink-2); }
.switch:checked:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch:disabled { opacity: .5; cursor: not-allowed; }
.check--switch { align-items: center; }
.choices { display: flex; flex-direction: column; }
.choices--row { flex-direction: row; flex-wrap: wrap; gap: 0 var(--s-6); }
fieldset.choices { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.choices > legend { padding: 0; margin-bottom: 2px; font-size: var(--t-14); font-weight: 500; }

/* ---------- custom select and combobox (no native look) ---------- */
.select { position: relative; min-width: 0; }
.select__btn { display: flex; align-items: center; gap: var(--s-2); width: 100%; height: var(--h); padding: 0 var(--s-3); border: 1px solid var(--control); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: var(--t-15); text-align: left; }
.select__btn:hover { border-color: var(--ink-2); }
.select__btn[aria-expanded="true"] { border-color: var(--focus); }
.select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select__value.is-placeholder { color: var(--muted); }
.select__caret { color: var(--muted); transition: transform .12s var(--ease); }
.select__btn[aria-expanded="true"] .select__caret, .select__input[aria-expanded="true"] ~ .select__caret { transform: rotate(180deg); }
.select__inputwrap { position: relative; display: flex; align-items: center; }
.select__input { padding-right: 40px; }
.select__inputwrap .select__caret { position: absolute; right: var(--s-3); pointer-events: none; }
.select__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 300px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.select__list.is-up { top: auto; bottom: calc(100% + 6px); }
.select__option { display: flex; align-items: center; gap: var(--s-2); min-height: var(--h); padding: 0 var(--s-3); border-radius: var(--r); font-size: var(--t-15); cursor: pointer; }
.select__option.is-active { background: var(--hover); }
.select__option[aria-selected="true"] { color: var(--selected-ink); font-weight: 600; }
.select__option[aria-selected="true"]::after { content: ""; margin-left: auto; width: 14px; height: 14px; background: currentColor; clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
.select__option-hint { color: var(--muted); font-size: var(--t-13); font-weight: 400; }
.select__none { padding: var(--s-3); color: var(--muted); font-size: var(--t-14); }

/* ---------- data table: sortable, pinned first column, movable columns, scroll box, whole-row click ---------- */
.tbl { display: flex; flex-direction: column; min-width: 0; }
.tbl__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); min-height: 0; }
.tbl__tools { flex: 1 1 320px; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.tbl__btns { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); margin-left: auto; }
.tbl__btns:empty { display: none; }
.tbl__scroll { overflow: auto; max-width: 100%; border-top: 1px solid var(--line-soft); }
.tbl__scroll:focus-visible { outline-offset: -2px; }
.tbl__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-14); }
.tbl__table th, .tbl__table td { padding: 0 var(--s-4); height: 52px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line-soft); white-space: nowrap; background: var(--surface); }
.tbl__table thead th { height: 44px; padding: 0 var(--s-2); font-size: var(--t-13); font-weight: 500; color: var(--muted); position: sticky; top: 0; z-index: 2; }
.tbl__table tbody tr:last-child > * { border-bottom: 0; }
.tbl__table .is-pinned { position: sticky; left: 0; z-index: 1; }
.tbl__table thead .is-pinned { z-index: 3; }
.tbl.is-scrolled .is-pinned { box-shadow: 1px 0 0 var(--line), 6px 0 8px -6px rgba(0, 0, 0, .18); }
.tbl__table td.is-wrap { white-space: normal; min-width: 220px; max-width: 420px; overflow-wrap: anywhere; }
.tbl__table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl__table thead .is-num .tbl__th { justify-content: flex-end; }
.tbl__table .is-mono { font-family: var(--mono); font-size: var(--t-13); }
.tbl__th { display: flex; align-items: center; gap: 2px; }
.tbl__sort { display: inline-flex; align-items: center; gap: 4px; height: var(--h-sm); padding: 0 var(--s-2); border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; white-space: nowrap; }
.tbl__sort:hover { color: var(--ink); background: var(--sunk); }
.tbl__sort .ico { opacity: 0; width: 14px; height: 14px; }
.tbl__sort:hover .ico, [aria-sort] .tbl__sort .ico { opacity: 1; }
[aria-sort="descending"] .tbl__sort .ico { transform: rotate(180deg); }
[aria-sort] .tbl__sort { color: var(--ink); font-weight: 600; }
/* the move grip sits in the header's left padding (it takes no width of its own) and shows while the pointer is on the header */
.tbl__grip { position: absolute; left: 0; top: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; width: 14px; color: var(--muted); cursor: grab; opacity: 0; transition: opacity .12s var(--ease); }
.tbl__grip .ico { width: 14px; height: 14px; }
.tbl__table thead th:hover .tbl__grip, .tbl__table thead th:focus-within .tbl__grip { opacity: .7; }
.tbl__grip:hover { opacity: 1 !important; }
/* column widths (table.js): measured at content width (.is-measure), then fixed (.is-fixed) with each <col>'s width set through the CSSOM;
   text that does not fit ends in "..." (the whole text is the cell's tooltip). The width handle is the line at a header's right edge. */
.tbl__table.is-measure { table-layout: auto; width: max-content; }
.tbl__table.is-measure .tbl__th { width: max-content; }
.tbl__table.is-measure-min .tbl__th { width: min-content; }
.tbl__table.is-fixed { table-layout: fixed; }
/* a narrow column's header wraps between words, never cut */
.tbl__table.is-fixed .tbl__sort, .tbl__table.is-measure-min .tbl__sort { white-space: normal; height: auto; min-height: var(--h-sm); padding-top: 4px; padding-bottom: 4px; line-height: 1.25; text-align: left; }
.tbl__table.is-fixed thead .is-num .tbl__sort { text-align: right; }
.tbl__table.is-fixed td, .tbl__table.is-fixed tbody th { overflow: hidden; text-overflow: ellipsis; }
.tbl__table.is-fixed td.is-wrap { min-width: 0; max-width: none; }
.tbl__table.is-fixed .tbl__link { max-width: 100%; }
.tbl__rsz { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: center; width: 12px; cursor: col-resize; touch-action: none; border-radius: 0; }
.tbl__rsz::after { content: ""; width: 2px; margin: 12px 0; border-radius: 1px; background: var(--line-btn); transition: background-color .12s var(--ease); }
.tbl__rsz:hover::after, .tbl__rsz.is-active::after, .tbl__rsz:focus-visible::after { background: var(--accent-fill); margin: 4px 0; }
.tbl__rsz:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-sm); }
.tbl.is-resizing, .tbl.is-resizing * { cursor: col-resize !important; user-select: none; }
th.is-dragging { opacity: .45; }
th.is-drop-before { box-shadow: inset 3px 0 0 var(--accent-fill); }
th.is-drop-after { box-shadow: inset -3px 0 0 var(--accent-fill); }
.tbl__row { cursor: pointer; }
.tbl__row:hover > * { background: var(--hover); }
.tbl__link { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--h-sm); }
.tbl__link:hover { color: var(--ink); }
/* a row that opens a panel: the first cell holds a real button (keyboard, screen readers), drawn as plain text */
button.tbl__link { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--ink); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
button.tbl__link:hover { color: var(--accent-hover); }
button.tbl__link.mono { font-family: var(--mono); }
.tbl__more { display: flex; justify-content: center; padding: var(--s-3); border-top: 1px solid var(--line-soft); }
.tbl__empty { padding: var(--s-6) var(--s-5); color: var(--muted); text-align: center; }
/* the selection column (BIG boxes, the whole cell ticks), rows being dragged and the rows or targets they are dropped on */
.tbl__table .tbl__check { width: 56px; min-width: 56px; max-width: 56px; padding: 0; position: sticky; left: 0; z-index: 1; }
.tbl__table thead .tbl__check { z-index: 3; }
.tbl--select .tbl__table .is-pinned { left: 56px; }
.tbl__checkcell { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--h); cursor: pointer; }
.tbl__row.is-selected > * { background: var(--selected); }
.tbl__row.is-selected:hover > * { background: var(--selected); }
.tbl__row.is-dragging > * { opacity: .5; }
.tbl__row.is-drop-over > * { background: var(--selected); box-shadow: inset 0 2px 0 var(--accent-fill), inset 0 -2px 0 var(--accent-fill); }
.is-drop-over { outline: 2px dashed var(--accent-fill); outline-offset: -2px; }
/* cards: a table with cards: true becomes one card per row under 640 px of its own width; the "Sort by" picker stands in for the headers */
.tbl--cards { container: tbl / inline-size; }
.tbl__sortpick { display: none; }
@container tbl (max-width: 640px) {
  .tbl--cards .tbl__sortpick { display: block; flex: 1 1 100%; }
  .tbl--cards .tbl__btns { margin-left: 0; flex: 1 1 100%; }
  .tbl--cards .tbl__scroll { overflow: visible; }
  .tbl--cards .tbl__table, .tbl--cards .tbl__table tbody { display: block; width: 100%; }
  .tbl--cards .tbl__table { width: 100% !important; } /* a width fitted for the table layout never applies to the cards */
  .tbl--cards .tbl__table colgroup { display: none; }
  .tbl--cards .tbl__table thead { display: none; }
  .tbl--cards .tbl__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); background: var(--surface); }
  .tbl--cards .tbl__row:last-child { border-bottom: 0; }
  .tbl--cards .tbl__row > * { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; height: auto; min-width: 0; max-width: 100%; padding: 0; border: 0; background: transparent; position: static; white-space: normal; overflow-wrap: anywhere; font-size: var(--t-14); box-shadow: none; }
  .tbl--cards .tbl__row > .is-pinned { flex: 1 1 100%; font-size: var(--t-15); }
  .tbl--cards .tbl__row > td[data-label]:not([data-label=""])::before { content: attr(data-label); color: var(--muted); font-size: var(--t-13); white-space: nowrap; }
  .tbl--cards .tbl__row > .is-nocard, .tbl--cards .tbl__row > td:empty { display: none; }
  .tbl--cards.tbl--select .tbl__row { padding-left: 60px; }
  .tbl--cards .tbl__row > .tbl__check { position: absolute; left: 4px; top: 4px; width: 52px; max-width: none; }
  .tbl--cards .tbl__row:hover { background: var(--hover); }
  .tbl--cards .tbl__row.is-selected { background: var(--selected); }
  .tbl--cards .tbl__row:hover > *, .tbl--cards .tbl__row.is-selected > * { background: transparent; }
  .tbl--cards td.is-wrap { min-width: 0; max-width: none; }
  .tbl--cards .is-num { text-align: left; }
}

/* ---------- empty state, skeleton, banner ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); padding: var(--s-8) var(--s-5); }
.empty__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sunk); color: var(--muted); margin-bottom: var(--s-2); }
.empty__icon--ok { background: var(--green-bg); color: var(--green); }
.empty__title { font-size: var(--t-17); font-weight: 600; }
.empty__text { color: var(--muted); max-width: 52ch; }
.empty .btn-row { justify-content: center; margin-top: var(--s-3); }
.sk { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--sunk) 0%, var(--skeleton-hi) 40%, var(--sunk) 80%); background-size: 300% 100%; animation: sk 1.4s ease-in-out infinite; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.sk--line { height: 14px; width: 100%; }
.sk--title { height: 28px; width: 40%; }
.sk--chip { width: 32px; height: 32px; border-radius: var(--r); flex: none; }
.sk--w60 { width: 60%; } .sk--w30 { width: 30%; } .sk--w80 { width: 80%; } .sk--w20 { width: 20%; }
.sk-row { display: flex; align-items: center; gap: var(--s-4); padding: 14px var(--s-5); border-top: 1px solid var(--line-soft); }
.sk-row:first-child { border-top: 0; }
.sk-stack { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.banner { display: flex; align-items: flex-start; gap: 14px; padding: var(--s-4) 18px; border-radius: var(--r-lg); border: 1px solid var(--info-line); background: var(--info-bg); color: var(--ink); font-size: var(--t-15); }
.banner__icon { margin-top: 2px; color: var(--accent); }
.banner__text { flex: 1; min-width: 0; }
.banner__text strong { font-weight: 600; }
.banner__action { flex: none; align-self: center; max-width: 100%; }
.banner--crit { background: var(--red-bg); border-color: var(--red-line); }
.banner--crit .banner__icon { color: var(--red); }
.banner--warn { background: var(--amber-bg); border-color: var(--amber-line); }
.banner--warn .banner__icon { color: var(--amber); }
.banner--ok { background: var(--green-bg); border-color: var(--green-line); }
.banner--ok .banner__icon { color: var(--green); }

/* ---------- definition list (facts) ---------- */
.facts { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 0; margin: 0; }
.facts dt, .facts dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-14); min-width: 0; overflow-wrap: anywhere; }
.facts dt { color: var(--muted); padding-right: var(--s-4); }
.facts dt:first-of-type, .facts dt:first-of-type + dd { border-top: 0; }

/* ---------- finding list (a device's findings: state, what, the threshold behind it, the suggested step) ---------- */
.flist { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.flist__item { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(120px, auto); gap: var(--s-4); align-items: center; padding: 12px var(--s-5); border-top: 1px solid var(--line-soft); }
.flist__text { display: flex; flex-direction: column; min-width: 0; }
.flist__title { font-size: var(--t-14); font-weight: 500; overflow-wrap: anywhere; }
.flist__sub { font-size: var(--t-13); color: var(--muted); overflow-wrap: anywhere; }
.flist__act { font-size: var(--t-13); color: var(--ink-2); text-align: right; }
@container (max-width: 560px) { .flist__item { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: var(--s-3) var(--s-4); } .flist__act { text-align: left; } }

/* ---------- drawer and dialog (native <dialog>, ONE of each) ---------- */
.sheet { padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); max-width: none; max-height: none; overflow: hidden; }
.sheet::backdrop { background: var(--scrim); }
.sheet[open] { display: flex; flex-direction: column; }
.sheet--drawer { margin: 0 0 0 auto; width: min(480px, 100vw); height: 100dvh; border-radius: var(--r-lg) 0 0 var(--r-lg); animation: drawer-in .2s var(--ease); }
.sheet--dialog { width: min(560px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 48px)); border-radius: var(--r-lg); animation: dialog-in .16s var(--ease); }
.sheet--palette { width: min(680px, calc(100vw - 24px)); margin-top: 10vh; max-height: min(640px, 80dvh); }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dialog-in { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-3) var(--s-5); border-bottom: 1px solid var(--line-soft); }
.sheet__title { flex: 1; min-width: 0; font-size: var(--t-17); font-weight: 600; outline: none; }
.sheet__body { flex: 1; overflow-y: auto; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.sheet__foot { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; padding: var(--s-3) var(--s-5) var(--s-4); border-top: 1px solid var(--line-soft); }
.sheet__body > p { color: var(--ink-2); }

/* ---------- toast ---------- */
.toasts { position: fixed; z-index: 60; left: 50%; bottom: var(--s-6); transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--s-2); align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 6px 6px 6px var(--s-4); border-radius: var(--r-md); background: var(--ink); color: var(--ground); box-shadow: var(--shadow-pop); font-size: var(--t-14); animation: dialog-in .16s var(--ease); }
.toast__text { flex: 1; padding: 6px 0; }
.toast .btn { height: 36px; background: transparent; border-color: transparent; color: var(--ground); font-weight: 600; }
.toast .btn:hover { background: color-mix(in srgb, var(--ground) 16%, transparent); }
.toast--crit { background: var(--danger-fill); color: #FFFFFF; }
.toast--crit .btn { color: #FFFFFF; }
.toast.is-leaving { opacity: 0; transition: opacity .2s var(--ease); }

/* ---------- the app shell ---------- */
.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.rail { background: var(--surface); border-right: 1px solid var(--line); min-width: 0; }
.rail__inner { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: var(--s-5) 14px var(--s-3); }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px var(--s-3) var(--s-5); color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { font-weight: 600; font-size: var(--t-15); }
.brand__sub { font-size: var(--t-12); color: var(--muted); }
.nav__item { display: flex; align-items: center; gap: var(--s-3); min-height: var(--h); padding: 0 var(--s-3); border-radius: var(--r); color: var(--ink-2); text-decoration: none; font-size: var(--t-15); }
.nav__item:hover { background: var(--sunk); color: var(--ink); }
.nav__item[aria-current="page"] { background: var(--selected); color: var(--selected-ink); font-weight: 600; }
.nav__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__count { font-size: var(--t-13); color: var(--muted); font-variant-numeric: tabular-nums; }
.nav__item[aria-current="page"] .nav__count { color: var(--selected-ink); }
.rail__spacer { flex: 1; min-height: var(--s-6); }
.me { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: none; color: var(--ink); text-align: left; }
.me:hover { background: var(--sunk); border-radius: var(--r); }
.me__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--selected); color: var(--selected-ink); font-size: var(--t-13); font-weight: 600; flex: none; }
.me__text { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-13); line-height: 1.3; }
.me__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me__role { color: var(--muted); }
.frame { display: flex; flex-direction: column; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); min-height: var(--top-h); padding: var(--s-4) var(--page-pad); background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar__brand { display: none; }
.search { flex: 1 1 320px; min-width: 0; max-width: 560px; display: flex; align-items: center; gap: 10px; height: var(--h); padding: 0 6px 0 14px; border: 1px solid var(--line-btn); border-radius: var(--r-md); background: var(--surface-2); color: var(--muted); font-size: var(--t-15); text-align: left; }
.search:hover { border-color: var(--control); color: var(--ink-2); }
.search__text { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__spacer { flex: 1; }
.live { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-13); color: var(--muted); white-space: nowrap; }
.live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.live[data-s="busy"] .live__dot { background: var(--accent); }
.live[data-s="offline"] .live__dot, .live[data-s="saved"] .live__dot { background: var(--amber); }
.live[data-s="out"] .live__dot { background: var(--red); }
.main { flex: 1; min-width: 0; outline: none; }
.tabbar { display: none; }

/* compact rail between 720 and 1099 px: icons only */
@media (max-width: 1099px) and (min-width: 720px) {
  .app { grid-template-columns: var(--rail-w-compact) minmax(0, 1fr); }
  .rail__inner { padding: var(--s-4) 10px var(--s-3); }
  .brand { justify-content: center; padding: 4px 0 var(--s-5); }
  .brand__text, .nav__label, .nav__count, .me__text { display: none; }
  .nav__item { justify-content: center; padding: 0; position: relative; }
  .nav__item .badge { position: absolute; top: 2px; right: 2px; min-width: 20px; height: 18px; font-size: 11px; padding: 0 5px; }
  .me { justify-content: center; padding: var(--s-2) 0; }
  .topbar { padding: var(--s-3) var(--s-6); }
  .page { padding: var(--s-6); }
}

/* phone: bottom tab bar, no rail */
@media (max-width: 719px) {
  :root { --top-h: 64px; }
  .app { display: block; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }
  .rail { display: none; }
  .topbar { padding: var(--s-3) var(--s-4); gap: var(--s-3); flex-wrap: nowrap; }
  .topbar__brand { display: inline-flex; }
  .search { flex: 1 1 auto; max-width: none; font-size: var(--t-15); }
  .search .kbd, .live__text, .topbar__refresh { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; padding: 4px 4px env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--line); }
  .tabbar__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 11px; font-weight: 500; text-decoration: none; }
  .tabbar__item[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .tabbar--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tabbar--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tabbar--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tabbar__item .badge { position: absolute; top: 2px; left: calc(50% + 4px); min-width: 20px; height: 18px; font-size: 11px; padding: 0 5px; }
  .page { padding: var(--s-5) var(--s-4) var(--s-6); gap: var(--s-5); }
  h1, .ph__title { font-size: 22px; }
  .ph__intro { font-size: var(--t-14); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-bottom: 1px solid var(--line-soft); padding: 14px var(--s-4); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat__value { font-size: 24px; }
  .seg { display: flex; width: 100%; }
  .seg__item { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
  .sheet--drawer { margin: auto 0 0; width: 100vw; height: auto; max-height: 88dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; animation: sheet-up .2s var(--ease); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .sheet--palette { margin-top: var(--s-3); width: calc(100vw - 16px); max-height: calc(100dvh - 24px); }
  .toasts { bottom: calc(var(--tab-h) + var(--s-3) + env(safe-area-inset-bottom, 0px)); }
  /* the notch and rounded corners (viewport-fit=cover: an installed app, a phone held sideways); inside the Android app the window already sits clear of them, so these are 0 there */
  .topbar { min-height: calc(var(--top-h) + env(safe-area-inset-top, 0px)); padding-top: calc(var(--s-3) + env(safe-area-inset-top, 0px)); padding-left: calc(var(--s-4) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--s-4) + env(safe-area-inset-right, 0px)); }
  .tabbar { padding-left: calc(4px + env(safe-area-inset-left, 0px)); padding-right: calc(4px + env(safe-area-inset-right, 0px)); }
  /* the keyboard is open (html.ua-kb, set by /native-shell.js in the Android app, whose window shrinks): the tab bar steps aside so the field being typed in keeps its room */
  .ua-kb .tabbar { display: none; }
  .ua-kb .app { padding-bottom: 0; }
  .ua-kb .toasts { bottom: var(--s-3); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { padding-bottom: 0; }
  .facts dd { border-top: 0; padding-top: 2px; }
  /* a banner's action goes under its words (lined up with them) instead of squeezing them into one word a line */
  .banner { flex-wrap: wrap; row-gap: var(--s-3); }
  .banner__text { flex: 1 1 calc(100% - 32px); }
  .banner__action { margin-left: 32px; }
  /* a hub header: the chip stays beside the title, the actions take the next line */
  .ph__lead .chip--56, .hub .chip--56 { width: 40px; height: 40px; border-radius: 9px; font-size: 13px; }
  .ph__lead { padding-top: 26px; }
  .ph--lead .ph__text { flex-basis: 0; }
  .ph--lead .ph__actions { flex: 1 1 100%; }
  /* a long button label wraps inside the button instead of running past the screen */
  .btn { max-width: 100%; height: auto; min-height: var(--h); white-space: normal; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; text-align: center; }
  .btn--sm { min-height: var(--h-sm); padding-top: 4px; padding-bottom: 4px; }
  .btn--icon { padding-top: 0; padding-bottom: 0; height: var(--h); }
  .btn--icon.btn--sm { height: var(--h-sm); }
}

/* the pull-to-refresh pill that store.js draws (it sets only the transform) */
.ua-ptr { position: fixed; left: 50%; top: 0; z-index: 70; transform: translate(-50%, -40px); padding: 6px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font: 600 var(--t-12) var(--font); pointer-events: none; box-shadow: var(--shadow-1); }

/* ---------- menus inside the drawer (More, the person's menu) ---------- */
.menu { display: flex; flex-direction: column; margin: 0 calc(var(--s-5) * -1); }
.menu__item { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: 0 var(--s-5); color: var(--ink); text-decoration: none; border: 0; background: none; font-size: var(--t-15); text-align: left; width: 100%; }
.menu__item:hover { background: var(--hover); color: var(--ink); }
.menu__item .ico { color: var(--muted); }
.menu__label { flex: 1; }
.menu__sep { height: 1px; background: var(--line-soft); margin: var(--s-2) 0; }
.menu__group { padding: var(--s-3) var(--s-5) var(--s-1); font-size: var(--t-13); color: var(--muted); }
.menu__row { padding: var(--s-2) var(--s-5); } /* a control inside the menu (the "Open the new design by default" switch) */

/* ---------- Ctrl K search ---------- */
.pal__field { display: flex; align-items: center; gap: 10px; padding: 0 var(--s-4); border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.pal__input { flex: 1; min-width: 0; height: 60px; border: 0; background: none; color: var(--ink); font-size: var(--t-17); }
.pal__input::placeholder { color: var(--muted); opacity: 1; }
.pal__input:focus-visible { outline: none; }
.pal__list { flex: 1; overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
.pal__group { padding: var(--s-3) var(--s-3) 4px; font-size: var(--t-13); font-weight: 500; color: var(--muted); }
.pal__item { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: 6px var(--s-3); border-radius: var(--r); cursor: pointer; }
.pal__item.is-active { background: var(--selected); }
.pal__item.is-active .pal__title { color: var(--selected-ink); }
.pal__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pal__title { font-size: var(--t-15); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal__sub { font-size: var(--t-13); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal__kind { font-size: var(--t-12); color: var(--muted); white-space: nowrap; }
.pal__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r); background: var(--sunk); color: var(--ink-2); flex: none; }
.pal__more { color: var(--accent); font-size: var(--t-14); }
.pal__foot { display: flex; flex-wrap: wrap; gap: var(--s-4); padding: 10px var(--s-4); border-top: 1px solid var(--line-soft); font-size: var(--t-12); color: var(--muted); }
.pal__foot span { display: inline-flex; align-items: center; gap: 6px; }
.pal__empty { padding: var(--s-6) var(--s-4); text-align: center; color: var(--muted); }
/* Ctrl K Ask mode (ask.js): the Ask toggle in the field and the answer panel that replaces the results list */
.pal__askbtn { display: inline-flex; align-items: center; gap: 6px; height: var(--h-sm); padding: 0 12px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: var(--t-13); cursor: pointer; white-space: nowrap; }
.pal__askbtn:hover { background: var(--hover); }
.pal__askbtn svg { width: 16px; height: 16px; }
.pal__askbtn[aria-pressed="true"] { background: var(--selected); color: var(--selected-ink); border-color: transparent; }
.ask { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.ask__q { display: flex; gap: 8px; align-items: flex-start; color: var(--ink); font-size: var(--t-15); font-weight: 600; }
.ask__qico { flex: none; color: var(--accent); display: inline-flex; }
.ask__qico svg { width: 18px; height: 18px; }
.ask__status { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--t-14); }
.ask__spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: ask-spin 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ask__spin { animation: none; } }
@keyframes ask-spin { to { transform: rotate(360deg); } }
.ask__answer { color: var(--ink); font-size: var(--t-15); line-height: 1.55; white-space: pre-wrap; }
.ask__err { color: var(--red); font-size: var(--t-14); }
.ask__hint { color: var(--muted); font-size: var(--t-14); line-height: 1.5; }
.ask__srch { margin-top: var(--s-2); font-size: var(--t-12); color: var(--muted); text-transform: none; }
.ask__src { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ask__srcrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); color: var(--ink); text-decoration: none; }
.ask__srcrow:hover { background: var(--hover); }
.ask__srcico { flex: none; color: var(--muted); display: inline-flex; }
.ask__srcico svg { width: 18px; height: 18px; }
.ask__note { margin-top: var(--s-2); font-size: var(--t-12); color: var(--muted); }
.shortcuts { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); align-items: center; font-size: var(--t-14); margin: 0; }
.shortcuts dt { display: flex; gap: 4px; flex-wrap: wrap; margin: 0; }
.shortcuts dd { margin: 0; color: var(--ink-2); }

/* ---------- Home ---------- */
.home-list { display: flex; flex-direction: column; gap: var(--s-4); }

/* ---------- search box, filter chips, bulk bar, bar list (ui.js) ---------- */
.searchbox { position: relative; flex: 1 1 260px; min-width: 0; max-width: 440px; }
.searchbox__icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.searchbox__input { padding-left: 42px; }
.searchbox__input::-webkit-search-cancel-button, .searchbox__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.fchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: var(--h-sm); padding: 4px 10px 4px 14px; border: 1px solid var(--info-line); border-radius: 18px; background: var(--info-bg); color: var(--ink); font-size: var(--t-14); font-weight: 500; text-decoration: none; text-align: left; overflow-wrap: anywhere; }
.fchip:hover { border-color: var(--accent); color: var(--ink); }
.fchip .ico { color: var(--muted); }
.bulkbar { position: sticky; bottom: var(--s-4); z-index: 15; container: bulkbar / inline-size; padding: 10px var(--s-3) 10px var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-pop); }
.bulkbar__in { display: flex; align-items: center; gap: var(--s-2) var(--s-3); }
.bulkbar__count { font-size: var(--t-15); font-weight: 600; white-space: nowrap; margin-right: var(--s-2); }
.bulkbar__actions { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* narrower than one row of buttons: the count and Clear on top, the buttons below */
@container bulkbar (max-width: 900px) { .bulkbar__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .bulkbar__actions { grid-column: 1 / -1; grid-row: 2; } }
.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bars__row { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(80px, 3fr) 56px; align-items: center; gap: var(--s-3); min-height: var(--h); padding: 4px var(--s-2); margin: 0 calc(var(--s-2) * -1); border-radius: var(--r); color: var(--ink); text-decoration: none; }
a.bars__row:hover { background: var(--hover); color: var(--ink); }
a.bars__row:focus-visible { outline-offset: 0; }
.bars__label { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-14); line-height: 1.3; }
.bars__name { overflow-wrap: anywhere; }
.bars__word { font-size: var(--t-12); color: var(--muted); }
.bars__svg { display: block; width: 100%; height: 10px; overflow: visible; }
.bars__track { fill: var(--sunk); }
.bars__fill--accent { fill: var(--accent-fill); }
.bars__fill--ok { fill: var(--green); }
.bars__fill--attention { fill: var(--amber); }
.bars__fill--offline { fill: var(--red); }
.bars__fill--quiet { fill: var(--grey); }
.bars__value { text-align: right; font-size: var(--t-14); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 719px) {
  .bulkbar { bottom: calc(var(--tab-h) + var(--s-2) + env(safe-area-inset-bottom, 0px)); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); }
  .ua-kb .bulkbar { bottom: var(--s-2); }
  .bars__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 8px var(--s-2); }
  .bars__svg { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Customers and Devices lists (pages/customers.js, devices.js, customer-map.js, fleet-charts.js, device-bulk.js, customer-fill.js) ---------- */
.lst { gap: var(--s-5); }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); width: 100%; }
.toolbar__select { flex: 0 1 280px; min-width: 200px; }
.toolbar__select .field { gap: 0; }
.toolbar__select .field__label:not([hidden]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cellname { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); min-width: 0; }
.cellname:hover { color: var(--accent); }
.cellname__text { overflow-wrap: anywhere; }
.cellname__sub { font-size: var(--t-12); font-weight: 400; color: var(--muted); }
.btn-row--tight { flex-wrap: nowrap; gap: var(--s-1); }
@container tbl (max-width: 640px) {
  .tbl--cards .btn-row--tight { flex-wrap: wrap; }
  .tbl--cards .toolbar > .searchbox, .tbl--cards .toolbar__select { flex: 1 1 100%; max-width: none; }
}
.fchips__clear { font-size: var(--t-14); padding: 0 var(--s-2); }
.lst-classic { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--t-14); color: var(--muted); }
.lst-classic .ico { color: var(--muted); }
/* the uptime overview (pages/uptime.js) and every customer's services (pages/services-list.js) */
.up-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--s-6); align-items: start; }
.up-pct { font-variant-numeric: tabular-nums; } .up-pct--warn { color: var(--amber); } .up-pct--crit { color: var(--red); } .up-pct--none { color: var(--muted); }
.svc-link { overflow-wrap: anywhere; }
.lst-bulk:empty { display: none; }
/* the Unassigned inbox: the new devices beside the customers they can be dropped on */
.inbox { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-5); align-items: start; }
.inbox--read { grid-template-columns: minmax(0, 1fr); }
.inbox__main { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.inbox__drop { position: sticky; top: calc(var(--top-h) + var(--s-4)); min-width: 0; }
.inbox__drop .section__body { max-height: calc(100dvh - var(--top-h) - 160px); overflow-y: auto; }
.inbox__find { padding: 0 var(--s-4) var(--s-2); }
.inbox__find .searchbox { max-width: none; }
.inbox__hint { padding: 0 var(--s-4) var(--s-3); font-size: var(--t-13); }
.inbox__hint.is-flash { animation: hint-flash 1.2s var(--ease); }
@keyframes hint-flash { 0%, 60% { color: var(--accent); } }
.droplist { list-style: none; margin: 0; padding: 0; }
.droplist__item { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 48px; padding: 6px var(--s-4); border: 0; border-top: 1px solid var(--line-soft); background: none; color: var(--ink); font-size: var(--t-14); text-align: left; cursor: pointer; }
.droplist__item:hover { background: var(--hover); }
.droplist__item.is-drop-over { background: var(--selected); color: var(--selected-ink); }
.droplist__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.droplist__count { color: var(--muted); font-size: var(--t-13); font-variant-numeric: tabular-nums; }
.droplist__icon { display: grid; place-items: center; width: 20px; height: 20px; color: var(--muted); }
.droprail { position: fixed; z-index: 40; top: calc(var(--top-h) + var(--s-4)); right: var(--s-4); bottom: var(--s-4); width: 300px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; animation: drawer-in .16s var(--ease); }
.droprail__head { display: flex; flex-direction: column; gap: 2px; padding: var(--s-4); font-size: var(--t-14); }
.droprail .droplist { flex: 1; overflow-y: auto; }
.dragghost { position: fixed; top: -200px; left: 0; display: inline-flex; align-items: center; gap: var(--s-2); padding: 8px 14px; border-radius: var(--r); background: var(--ink); color: var(--ground); font-size: var(--t-14); font-weight: 600; }
@media (max-width: 959px) { .inbox { grid-template-columns: minmax(0, 1fr); } .inbox__drop { position: static; } .inbox__drop .section__body { max-height: 360px; } }
/* the customer map */
.mapview { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-5); align-items: start; }
.mapview__main, .mapview__side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.mapview__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); font-size: var(--t-14); }
.mapbox { position: relative; height: min(68vh, 640px); min-height: 360px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--sunk); touch-action: none; cursor: grab; user-select: none; }
.mapbox:focus-visible { outline-offset: 2px; }
.mapbox.is-dragging { cursor: grabbing; }
.mapbox__tiles, .mapbox__pins { position: absolute; inset: 0; }
.mapbox__tiles img { position: absolute; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.mapbox__tiles img.is-broken { visibility: hidden; }
.mappin { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 3px; border: 2px solid var(--surface); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-pop); cursor: pointer; }
.mappin--ok { border-color: var(--green); }
.mappin--attention { border-color: var(--amber); }
.mappin--offline { border-color: var(--red); }
.mappin.is-chosen { outline: 3px solid var(--accent-fill); outline-offset: 2px; }
.mappin__badge { position: absolute; top: -10px; right: -10px; }
.mappin--group { width: 40px; height: 40px; border-radius: 50%; border-color: var(--surface); background: var(--accent-fill); color: var(--on-accent); font-size: var(--t-14); font-weight: 600; }
.mapbox__ctl { position: absolute; top: var(--s-3); right: var(--s-3); display: flex; flex-direction: column; gap: 6px; }
.mapbox__ctl .btn { box-shadow: var(--shadow-1); }
.mapbox__attr { position: absolute; right: 6px; bottom: 6px; padding: 2px 8px; border-radius: var(--r-sm); background: var(--surface); color: var(--muted); font-size: var(--t-12); }
.mapbox__msg { position: absolute; left: var(--s-3); right: var(--s-3); bottom: 40px; padding: var(--s-3) var(--s-4); border: 1px solid var(--amber-line); border-radius: var(--r-md); background: var(--amber-bg); color: var(--ink); font-size: var(--t-14); }
.mapcard { display: flex; flex-direction: column; gap: var(--s-3); }
.mapcard__head { display: flex; align-items: flex-start; gap: var(--s-3); }
.mapcard__addr { margin-top: 4px; font-size: var(--t-14); color: var(--ink-2); }
.maplist { list-style: none; margin: 0; padding: 0; }
.maplist__row { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: 6px var(--s-3) 6px var(--s-5); border-top: 1px solid var(--line-soft); }
.maplist__name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--t-14); overflow-wrap: anywhere; }
.maplist__name .muted { font-size: var(--t-13); }
@media (max-width: 959px) { .mapview { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 719px) { .mapbox { height: 56vh; min-height: 300px; } }
/* the address fill-in's suggestions */
.addr { position: relative; }
.addr__list { list-style: none; margin: 4px 0 0; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-pop); max-height: 260px; overflow-y: auto; }
.addr__opt { display: flex; flex-direction: column; justify-content: center; min-height: var(--h); padding: 4px var(--s-3); border-radius: var(--r); font-size: var(--t-15); cursor: pointer; }
.addr__opt:hover, .addr__opt.is-active { background: var(--hover); }
.addr__sub { font-size: var(--t-13); color: var(--muted); }
/* the fleet charts */
.fleet { display: flex; flex-direction: column; gap: var(--s-5); }
.fleet__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--t-14); }
.fleet__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--s-5); align-items: start; }
/* the quick fix panel of the bulk bar */
.qfgroup { display: flex; flex-direction: column; }
.qfgroup__title { font-size: var(--t-14); font-weight: 600; color: var(--ink-2); padding: var(--s-2) 0 2px; }
.qfres { list-style: none; margin: 0; padding: 0; }
.qfres__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); padding: 10px 0; border-top: 1px solid var(--line-soft); }
.qfres__host { font-size: var(--t-14); overflow-wrap: anywhere; }
.qfres__msg { grid-column: 1 / -1; font-size: var(--t-13); color: var(--muted); }

/* ---------- status: the Atera snapshot marker (a ring around the light, a quiet word after it) ---------- */
.status--snap .status__light { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px currentColor; }
.status__snap { font-size: var(--t-12); font-weight: 500; color: var(--muted); }
.status--snap.status--quiet .status__light { box-shadow: none; }

/* ---------- icon chip (the logo chip's square, with a line icon) ---------- */
.chip--icon { background: var(--sunk); color: var(--ink-2); }
.chip--icon.chip--20 .ico { width: 12px; height: 12px; } .chip--icon.chip--32 .ico { width: 18px; height: 18px; }
.chip--icon.chip--40 .ico { width: 22px; height: 22px; } .chip--icon.chip--56 .ico { width: 28px; height: 28px; }
.chip--t-accent { background: var(--selected); color: var(--selected-ink); }
.chip--t-ok { background: var(--green-bg); color: var(--green); }
.chip--t-attention { background: var(--amber-bg); color: var(--amber); }
.chip--t-offline { background: var(--red-bg); color: var(--red); }
.chip--t-quiet { background: var(--sunk); color: var(--muted); }

/* ---------- action bar: a row of buttons; on a phone a grid of icon tiles (same actions, same order) ---------- */
.actionbar { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 719px) {
  .actionbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .actionbar__btn { flex-direction: column; height: 64px; min-width: 0; padding: 6px 4px; gap: 4px; font-size: var(--t-13); line-height: 1.15; white-space: normal; text-align: center; }
  .actionbar__btn span { overflow-wrap: anywhere; }
}

/* ---------- link cards: everything related, one whole-card click each; a dashed card fills a gap ---------- */
.lcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--s-3); }
.lcards__item { display: flex; min-width: 0; }
/* the chip on the left, the words beside it, the light and its word under the words; every word wraps (the owner's no-cut-off-text rule) */
.lcard { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center; gap: 2px var(--s-3); width: 100%; min-height: 76px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-align: left; font: inherit; text-decoration: none; cursor: pointer; }
.lcard > .chip { grid-row: span 2; }
.lcard > .status { grid-column: 2; }
.lcard:hover { border-color: var(--accent); background: var(--hover); color: var(--ink); }
.lcard--dashed { border-style: dashed; border-color: var(--control); background: transparent; }
.lcard__text { display: flex; flex-direction: column; min-width: 0; }
.lcard__title { font-size: var(--t-15); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.lcard__sub { font-size: var(--t-13); color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 719px) {
  .lcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .lcard { gap: 4px 10px; min-height: 60px; padding: 10px; }
  .lcard__title { font-size: var(--t-14); line-height: 1.25; }
}
@media (max-width: 359px) { .lcards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- meter (a disk): the fill carries the severity, the track is a light step of the same colour ---------- */
.meter { display: flex; flex-direction: column; gap: 6px; }
.meter__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s-3); font-size: var(--t-14); }
.meter__label { font-weight: 500; }
.meter__text { color: var(--muted); font-size: var(--t-13); font-variant-numeric: tabular-nums; }
.meter__bar { display: block; width: 100%; height: 8px; }
.meter--ok .meter__track { fill: var(--info-bg); } .meter--ok .meter__fill { fill: var(--accent-fill); }
.meter--warn .meter__track { fill: var(--amber-bg); } .meter--warn .meter__fill { fill: var(--amber); }
.meter--crit .meter__track { fill: var(--red-bg); } .meter--crit .meter__fill { fill: var(--red); }

/* ---------- charts (chart.js): one measure per chart, thin line, a 10% wash, hairline grid, a crosshair and one readout ---------- */
.chart { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.chart__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3); }
.chart__title { font-size: var(--t-15); font-weight: 600; }
.chart__nums { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); font-size: var(--t-13); color: var(--muted); }
.chart__nums b { color: var(--ink); font-weight: 600; }
.chart__body { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-2); }
.chart__y { display: flex; flex-direction: column; justify-content: space-between; height: 120px; font-size: var(--t-12); line-height: 1; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.chart__plot { position: relative; height: 120px; border-radius: var(--r-sm); cursor: crosshair; touch-action: pan-y; }
.chart__plot:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.chart__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart__grid { stroke: var(--line); stroke-width: 1; }
.chart__thr { stroke: var(--control); stroke-width: 1; stroke-dasharray: 4 3; }
.chart__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__area { fill: var(--accent); opacity: .1; }
.chart__cross { stroke: var(--ink-2); stroke-width: 1; }
.chart__tip { position: absolute; z-index: 5; top: -6px; left: var(--x, 50%); transform: translate(-50%, -100%); padding: 6px 10px; border-radius: var(--r); background: var(--ink); color: var(--ground); font-size: var(--t-13); font-weight: 500; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-pop); }
.chart__tip.is-left { transform: translate(0, -100%); } .chart__tip.is-right { transform: translate(-100%, -100%); }
.chart__x { display: flex; justify-content: space-between; gap: var(--s-3); margin-left: calc(40px + var(--s-2)); font-size: var(--t-12); color: var(--muted); }
.chart__empty { margin: 0; padding: var(--s-4) 0; color: var(--muted); font-size: var(--t-14); }
.chart--empty .chart__empty { padding: var(--s-6) 0; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-md); }
.ustrip { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-4); }
.ustrip__plot { height: 28px; cursor: default; }
.ustrip__svg { display: block; width: 100%; height: 100%; }
.ustrip .chart__x { margin-left: 0; }
.ustrip__cell--ok { fill: var(--green); } .ustrip__cell--warn { fill: var(--amber); } .ustrip__cell--crit { fill: var(--red); } .ustrip__cell--none { fill: var(--sunk); }
.ustrip__hl { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* a strip of state codes (chart.js codeStrip): the Last 24 h column of the Devices list, a site's last 7 days. Shape and colour, the uptime in words beside it */
.cstrip { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; vertical-align: middle; }
.cstrip__svg { display: block; flex: none; overflow: visible; }
.cstrip__c--ok { fill: var(--green); } .cstrip__c--warn { fill: var(--amber); } .cstrip__c--crit { fill: var(--red); }
.cstrip__c--none { fill: none; stroke: var(--control); stroke-width: .75; stroke-dasharray: 1.5 1; }
.cstrip__pct { font-size: var(--t-13); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cstrip__pct--warn { color: var(--amber); } .cstrip__pct--crit { color: var(--red); }
.cstrip--none, .cstrip--wait { font-size: var(--t-13); }
.cstrip--wait { display: inline-block; width: 96px; height: 14px; border-radius: 3px; background: var(--sunk); vertical-align: middle; }
/* state bars (chart.js stateBars): one stacked column per period, the legend is status words with their lights */
.sbars__legend { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); }
.sbars__plot { height: 64px; cursor: default; }
.sbars__svg { display: block; width: 100%; height: 100%; }
.sbars .chart__x { margin-left: 0; }
.sbars__c--ok { fill: var(--green); } .sbars__c--warn { fill: var(--amber); } .sbars__c--crit { fill: var(--red); } .sbars__c--quiet { fill: var(--grey); opacity: .55; } .sbars__c--none { fill: var(--sunk); }

/* ---------- a list of things that happened (commands, quick fixes, remote sessions): the state, what, who and when, its output ---------- */
.alist { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.alist__row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: center; padding: 12px var(--s-5); border-top: 1px solid var(--line-soft); }
.alist__text { display: flex; flex-direction: column; min-width: 0; }
.alist__title { font-size: var(--t-14); font-weight: 500; overflow-wrap: anywhere; }
.alist__sub { font-size: var(--t-13); color: var(--muted); overflow-wrap: anywhere; }
@container (max-width: 560px) { .alist__row { grid-template-columns: minmax(0, 1fr) auto; } .alist__row > .status { grid-column: 1 / -1; } }
pre.code { margin: 0; padding: var(--s-3) var(--s-4); max-height: 60vh; overflow: auto; border-radius: var(--r); background: var(--sunk); color: var(--ink); font: var(--t-13)/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.menu__item--danger, .menu__item--danger .ico { color: var(--red); }

/* ---------- the device hub (#/devices/<id>/<tab>) ---------- */
.dhub__band { background: var(--surface); border-bottom: 1px solid var(--line); }
.dhub__bandin { max-width: var(--page-max); padding: var(--s-6) var(--page-pad) 0; display: flex; flex-direction: column; gap: var(--s-5); }
.dhub__page { padding-top: var(--s-6); }
.dhub__user { display: inline-flex; align-items: center; gap: 6px; }
.dhub__user .ico { color: var(--muted); }
.dhub__field { display: flex; flex-direction: column; gap: 6px; max-width: 440px; margin-bottom: var(--s-3); }
.dhub__row { margin-top: var(--s-2); }
.dhub__sub { margin: var(--s-4) 0 var(--s-1); font-size: var(--t-14); font-weight: 600; }
.glist--flat { border: 0; border-radius: 0; background: transparent; }
.dfind .dfind__item { grid-template-columns: 120px minmax(0, 1fr); align-items: start; }
.dfind__item > .status { margin-top: 2px; }
.dfind__acts { margin-top: var(--s-2); }
.facts__copy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.facts__copy .btn { margin: -8px 0; }
.dcharts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-6) var(--s-5); }
.dcharts.is-loading { opacity: .55; }
.dsw__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); padding: 0 var(--s-5) var(--s-4); }
.dsw__bar .field { flex: 1 1 260px; max-width: 440px; }
.dsw__bar > [role="status"] { padding-bottom: 12px; }
.dlist { list-style: none; margin: 0; padding: 0; }
.dlist li { padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-14); overflow-wrap: anywhere; }
.dlist li:first-child { border-top: 0; }
@media (max-width: 1099px) and (min-width: 720px) { .dhub__bandin { padding: var(--s-5) var(--s-6) 0; } }
@media (max-width: 719px) {
  .dhub__bandin { padding: var(--s-4) var(--s-4) 0; gap: var(--s-4); }
  .dhub__page { padding-top: var(--s-5); }
  .dfind .dfind__item { grid-template-columns: minmax(0, 1fr); }
  .dsw__bar { padding: 0 var(--s-4) var(--s-3); }
  .dhub .section__head .seg { width: 100%; }
}

/* ---------- quick fixes (the panel in the drawer) ---------- */
.qf { display: flex; flex-direction: column; gap: var(--s-5); }
.qf__who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); font-size: var(--t-14); color: var(--ink-2); }
.qf__group { display: flex; flex-direction: column; gap: var(--s-2); }
.qf__gh { font-size: var(--t-14); font-weight: 600; color: var(--ink-2); }
.qf__grid { display: flex; flex-direction: column; gap: var(--s-2); }
.qf__item { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.qf__item.is-off { background: var(--surface-2); }
.qf__row { display: flex; align-items: center; gap: var(--s-2); }
.qf__row > .qf__name { padding-left: var(--s-2); }
.qf__go { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); min-height: var(--h); padding: 0 var(--s-2); border: 0; border-radius: var(--r); background: none; color: var(--ink); font: inherit; text-align: left; }
.qf__go:hover:not(:disabled) { background: var(--hover); }
.qf__go:disabled { color: var(--muted); cursor: not-allowed; }
.qf__name { flex: 1; min-width: 0; font-size: var(--t-15); font-weight: 500; overflow-wrap: anywhere; }
.qf__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 var(--s-2) var(--s-1); }
.qf__picks { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-2); padding: 0 var(--s-2) var(--s-1); }
.qf__why { padding: 0 var(--s-2) var(--s-1); font-size: var(--t-13); color: var(--muted); }
.qf__info { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2); border-top: 1px solid var(--line-soft); font-size: var(--t-14); }
.qf__confirm { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--info-line); border-radius: var(--r-lg); background: var(--info-bg); }
.qf__confirm--danger { border-color: var(--red-line); background: var(--red-bg); }
.qf__suggs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.qf__sugg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--t-13); }
.qf .alist__row { padding: 10px 0; }

/* ---------- gallery ---------- */
.gal { display: flex; flex-direction: column; gap: var(--s-7); }
.gal__toc { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gal__sec { display: flex; flex-direction: column; gap: var(--s-3); scroll-margin-top: calc(var(--top-h) + 16px); }
.gal__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.gal__pane { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.gal__tag { font-size: var(--t-12); color: var(--muted); }
.gal__row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.gal__col { display: flex; flex-direction: column; gap: var(--s-2); }
.gal__pair--stack { grid-template-columns: minmax(0, 1fr); } /* the data table: light above dark, each the full width, so its columns can be resized */
@media (max-width: 1279px) { .gal__pair { grid-template-columns: minmax(0, 1fr); } }

/* print: content only */
@media print { .rail, .topbar, .tabbar, .toasts { display: none !important; } .app { display: block; } body { background: #FFFFFF; } }