/* Quantum Reticulum Support - the kit (design 288 §1: the same kit and both skins as the console, every asset
   vendored). The token, type-scale, focus-ring and page rules below are copied from the console's
   server/web/static/style.css (our own code; the support app may not import the server), so the two read alike;
   the components after them are the subset the support screens use. */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root, :root[data-theme="light"], .skin-probe-light {
  --void:        #f6f6f5;
  --panel:       #ffffff;
  --panel2:      #fafaf9;
  --panel-solid: var(--panel);   /* D412 (111): the opaque ground a badge's wash is mixed into - the table's own ground. Slate's
                                    --panel is opaque in both schemes; each cosmetic preset stamps its glass --panel composited
                                    over its --void, as a literal (app.js SKINS) */
  --console:     #101828;   /* terminals stay dark in every skin */
  --console-text: #e8f1ff;
  --console-dim: #cfe0f5;
  --console-faint: #8b929c;   /* both Slate schemes — the console never flips */
  --line:        #e6e6e1;
  --line-strong: #d2d2cb;
  --text:        #1b1c1e;
  --muted:       #5a5d62;
  --faint:       #6c7076;
  --tint1:       transparent;
  --tint2:       transparent;
  --grid:        transparent;
  --ion:         #1e4ba8;
  --plasma:      #5b54b8;
  --ok:          #1a7447;   /* was #1b7a4b — 4.52 on --void, 4.87 on --panel */
  --warn:        #845d00;   /* was #8a6100 — 4.53 on --void, 4.85 on --panel */
  --bad:         #b42318;
  --side:        #171b21;
  --side2:       #232932;
  --side-line:   #2a303a;
  --side-text:   #c5cad2;
  --side-text2:  #8a9099;
  --side-accent: #9abbf4;   /* D410 (111): the shell's accent is constant across a skin's schemes - Slate's dark-scheme --ion (was
                               #7aa5f0); the shell is dark in both, and Slate light's navy --ion read 2.16:1 there */
  --side-crit:   #f0776b;
  --glow:        0px;
  --blur:        0px;
  --tick:        0px;
  --shadow:      rgba(15, 23, 42, 0.10);
  --scrim: rgba(10, 14, 22, 0.62);   /* both Slate schemes — a scrim is always dark */
  color-scheme: light;
}
/* SLATE DARK — same design, same contrast bar, dark content ground. */
:root[data-theme="dark"], .skin-probe-dark {
  --void:        #14171c;
  --panel:       #1b1f26;
  --panel2:      #21262e;
  --console:     #101828;
  --console-text: #e8f1ff;
  --console-dim: #cfe0f5;
  --console-faint: #8b929c;   /* both Slate schemes — the console never flips */
  --line:        #2b3038;
  --line-strong: #3a414c;
  --text:        #e8eaed;
  --muted:       #a4aab3;
  --faint:       #8b929c;
  --tint1:       transparent;
  --tint2:       transparent;
  --grid:        transparent;
  --ion:         #9abbf4;   /* D408 (107): was #7aa5f0 - the primary's weak end read 4.18:1 on --panel; now 4.89 on --panel, 4.51 on --panel2 */
  --plasma:      #9c96e8;
  --ok:          #5cbd85;
  --warn:        #d9b649;
  --bad:         #f0776b;
  --side:        #171b21;   /* identical to light — the shell is constant */
  --side2:       #232932;
  --side-line:   #2a303a;
  --side-text:   #c5cad2;
  --side-text2:  #8a9099;
  --side-accent: #9abbf4;   /* D409, D410, D411 (109, 111): Slate's dark-scheme --ion, as a LITERAL - a custom accent does not
                               reach the shell (D32); driver-d408-accent's DA checks it equals --ion, so it cannot drift silently */
  --side-crit:   #f0776b;
  --glow:        0px;
  --blur:        0px;
  --tick:        0px;
  --shadow:      rgba(0, 0, 0, 0.40);
  --scrim: rgba(10, 14, 22, 0.62);   /* both Slate schemes — a scrim is always dark */
  color-scheme: dark;
}
/* Derived tints + legacy aliases — NEVER set by a skin, always computed. */
:root {
  --ion-weak:    color-mix(in srgb, var(--ion) 11%, transparent);
  --ion-glow:    color-mix(in srgb, var(--ion) 45%, transparent);
  --plasma-weak: color-mix(in srgb, var(--plasma) 12%, transparent);
  --plasma-glow: color-mix(in srgb, var(--plasma) 45%, transparent);
  --ok-weak:     color-mix(in srgb, var(--ok) 12%, transparent);
  --warn-weak:   color-mix(in srgb, var(--warn) 14%, transparent);
  --bad-weak:    color-mix(in srgb, var(--bad) 12%, transparent);
  /* The sidebar's own tints. They are WASHES (mixed into transparent) composited
     over --side, not mixes INTO it: --side is translucent under the cosmetic
     presets, and mixing into it turned ION's 11% wash into a dark chip (delta 1,
     Δ2). Over Slate's opaque shell the two are the same pixel.
     ⚠ A WASH NEVER STACKS (delta 2, D23). This holds for every translucent tint
     here — these two and --ion-weak / --plasma-weak / --ok-weak / --warn-weak /
     --bad-weak above: two nested elements carrying one composite it twice and the
     INNER one's ink fails. Exactly one element in a nesting chain carries the
     tint — the OUTER one, which is the one that names the condition. An inner
     element distinguishes itself with its border, its weight or its ink.
     (The --sev-*-bg grounds are opaque hexes, so they cannot stack.) */
  --side-accent-weak: color-mix(in srgb, var(--side-accent) 14%, transparent);
  --side-accent-glow: color-mix(in srgb, var(--side-accent) 45%, transparent);
  --side-crit-bg:     color-mix(in srgb, var(--side-crit) 16%, transparent);
  /* severity hairlines: one rule for all five tiers */
  --sev-crit-line: color-mix(in srgb, var(--sev-crit) 15%, var(--sev-crit-bg));
  --sev-high-line: color-mix(in srgb, var(--sev-high) 15%, var(--sev-high-bg));
  --sev-med-line:  color-mix(in srgb, var(--sev-med)  15%, var(--sev-med-bg));
  --sev-low-line:  color-mix(in srgb, var(--sev-low)  15%, var(--sev-low-bg));
  --sev-info-line: color-mix(in srgb, var(--sev-info) 15%, var(--sev-info-bg));
  /* legacy names used throughout the components below */
  --bg:            var(--void);
  --border:        var(--line);
  --border-strong: var(--line-strong);
  --accent:        var(--ion);
  --accent-weak:   var(--ion-weak);
  --radius: 8px;
  --radius-lg: 12px;
  --table-head-top: 48px;  /* sticky header offset = the top bar's height, set ONCE (5b D73; 6a D55) */
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --sans: -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
}
/* Type scale — derived, never skinned. A skin picks colour, never size.
   ONE caps role: --fs-micro · sans · 600 · 0.5px tracking · --muted, for a label
   sitting directly above the value it names (.card .lbl, th, .info-grid .k,
   .pform label, .ai-grade .lbl). Nothing else is uppercase. */
:root {
  --fs-title:   24px;   /* h1, one per page                            */
  --fs-section: 18px;   /* a real subsection within a page             */
  --fs-head:    15px;   /* card, widget, panel and modal headings      */
  --fs-body:    14px;   /* prose, help text, modal bodies              */
  --fs-ui:      13px;   /* controls, table cells, nav — the workhorse  */
  --fs-meta:    12.5px; /* secondary line under a primary one          */
  --fs-micro:   11px;   /* badges, pills, and the ONE caps label role  */
  --fs-data:    12.5px; /* mono: hostnames, IPs, CVEs, versions, times */
  --fs-data-sm: 11px;   /* mono: inside a badge or a dense cell        */
}
/* One ring, everywhere it can be reached by keyboard. :where() zeroes the
   selector list, so the rule weighs only its :focus-visible (0,1,0) and sets
   nothing but the outline — component rules still own border and shadow, and
   any component that declares its own outline (th.sortable, .switch) wins. */
:root { --ring: var(--accent); }
:where(a[href], button, input, select, textarea, summary,
       [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
body {
  background:
    radial-gradient(1100px 500px at 75% -10%, var(--tint1), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, var(--tint2), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Faint holo-grid over the whole canvas (fades out toward the bottom). */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 40% 0%, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at 40% 0%, black 30%, transparent 80%);
}

/* ---- components (the console kit's rules, as the support screens use them) ---- */
main { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 24px 28px 48px; }
h1 { font-family: var(--sans); font-size: var(--fs-title); font-weight: 600; margin-bottom: 18px; letter-spacing: -0.2px; }
h2 { font-family: var(--sans); font-size: var(--fs-head); font-weight: 600; margin: 22px 0 12px; color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-meta); }
.mono { font-family: var(--mono); font-size: var(--fs-data); font-variant-numeric: tabular-nums; }
.k { color: var(--muted); font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.qerr { color: var(--bad); font-family: var(--mono); font-size: var(--fs-data); white-space: pre-wrap; min-height: 1em; }

/* The header bar (design 288 §1): the product on the left, the staff member on the right. */
.hdr { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 8px 28px; min-height: 48px; flex-wrap: wrap;
  background: var(--side); border-bottom: 1px solid var(--side-line); color: var(--side-text); }
.hdr[hidden] { display: none; }
.hdr .brand { color: var(--side-text); font-weight: 600; font-size: var(--fs-ui); letter-spacing: .2px; }
.hdr .brand:hover { color: var(--side-accent); text-decoration: none; }
.hdr .spacer { flex: 1; }
.hdr .who { font-size: var(--fs-ui); }
.hdr .role { color: var(--side-text2); font-size: var(--fs-meta); }
.hdr button.run.cancel { color: var(--side-text2); border-color: var(--side-line); padding: 5px 12px; }
.hdr button.run.cancel:hover { color: var(--side-text); }

/* Inputs and buttons. */
input[type=text], input[type=password], textarea, select {
  background: var(--panel2); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text);
  padding: 9px 13px; font-size: 14px; font-family: var(--sans); transition: border-color .12s, box-shadow .12s; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 calc(var(--glow) * 0.75) var(--ion-glow); }
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { width: 100%; resize: vertical; line-height: 1.5; }
button.run {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 25%, transparent), var(--accent-weak));
  border: 1px solid var(--accent); border-radius: var(--radius); color: var(--accent); font-family: var(--mono);
  font-weight: 600; font-size: var(--fs-ui); letter-spacing: 0.5px; padding: 9px 20px; cursor: pointer;
  text-shadow: 0 0 calc(var(--glow) * 0.5) var(--ion-glow); transition: box-shadow .15s; }
button.run:hover { box-shadow: 0 0 calc(var(--glow) * 0.875) var(--ion-glow); }
button.run:disabled { opacity: .5; cursor: default; box-shadow: none; }
button.run.cancel { background: none; color: var(--faint); border: 1px solid var(--border-strong); text-shadow: none; }
button.run.cancel:hover { box-shadow: none; color: var(--text); }
.toolbar { display: flex; align-items: center; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
.vb-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.vb-seg-btn { padding: 5px 11px; background: none; border: 0; color: var(--muted); font-family: var(--sans);
  font-size: var(--fs-ui); line-height: 1.4; cursor: pointer; }
.vb-seg-btn + .vb-seg-btn { border-left: 1px solid var(--border); }
.vb-seg-btn:hover { color: var(--text); }
.vb-seg-btn[aria-checked="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 0 0 8px; }
.tab { padding: 9px 14px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted);
  font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: .04em; cursor: pointer; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

/* Tables and badges. */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); backdrop-filter: blur(calc(var(--blur) * 0.75)); }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background-color: var(--bg); background-image: linear-gradient(var(--panel2), var(--panel2)); color: var(--muted);
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-strong); }
th:first-child { border-top-left-radius: var(--radius-lg); }
th:last-child { border-top-right-radius: var(--radius-lg); }
tr:last-child td { border-bottom: none; }
tr.muted td { color: var(--muted); }
td.empty { color: var(--muted); text-align: center; padding: 28px 16px; }
.table-wrap { overflow-x: auto; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-family: var(--sans); font-size: var(--fs-micro);
  font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; border: 1px solid var(--border); color: var(--text); }
.badge.ok   { background: var(--ok-weak);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.badge.bad  { background: var(--bad-weak);  color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.badge.warn { background: var(--warn-weak); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.badge.plasma { background: var(--plasma-weak); color: var(--plasma); border-color: color-mix(in srgb, var(--plasma) 40%, transparent); }
.badge.muted { background: transparent; color: var(--muted); border-color: var(--border); }
table .badge.ok   { background: color-mix(in srgb, var(--ok) 12%, var(--panel-solid)); }
table .badge.bad  { background: color-mix(in srgb, var(--bad) 12%, var(--panel-solid)); }
table .badge.warn { background: color-mix(in srgb, var(--warn) 14%, var(--panel-solid)); }

/* The one-card screens (design 288 §2-§5). */
.card-screen { min-height: calc(100vh - 96px); display: flex; align-items: center; justify-content: center; }
.login-box { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 34px; display: flex; flex-direction: column; gap: 14px;
  backdrop-filter: blur(calc(var(--blur) * 1.25));
  box-shadow: 0 0 calc(var(--glow) * 2.5) var(--ion-weak), inset 0 0 calc(var(--glow) * 3.75) color-mix(in srgb, var(--accent) 3%, transparent); }
.login-box .product { font-family: var(--mono); font-size: var(--fs-data-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.login-box h1 { margin: 0; font-size: 20px; }
.login-box label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-ui); color: var(--muted); }
.login-box input { width: 100%; }
.login-box input.code { font-family: var(--mono); font-size: 20px; letter-spacing: .3em; text-align: center; }
.login-box .qr { align-self: center; width: 200px; height: 200px; image-rendering: pixelated; border-radius: 4px; }
.login-box .keyrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.login-box .key { font-family: var(--mono); font-size: var(--fs-data); word-break: break-all; }

/* The thread (design 280 §2). */
.sup-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.sup-fields { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sup-fields select { padding: 5px 9px; font-size: var(--fs-ui); }
.sup-eps { margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pchip { display: inline-block; padding: 2px 9px; border: 1px solid var(--border); border-radius: 12px; font-family: var(--mono); font-size: var(--fs-data-sm); }
.sup-thread { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; max-width: 900px; }
.sup-msg { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 10px 14px; }
.sup-msg.internal { border-style: dashed; background: var(--panel2); }
.sup-meta { font-size: var(--fs-ui); margin: 0 0 6px; }
.sup-label { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .04em; color: var(--muted); }
.sup-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.sup-compose { max-width: 900px; }

/* The confirm (the kit's modal). */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 22px 24px;
  max-width: 440px; width: 100%; box-shadow: 0 12px 40px var(--shadow); }
.modal h3 { font-size: var(--fs-head); margin: 0 0 10px; }
.modal .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

@media (max-width: 700px) {
  main { padding: 16px 16px 32px; } /* the cards: only what clears the fixed version line (302 Q2) */
  .hdr { padding: 8px 16px; gap: 8px 10px; }
  .hdr .brand { white-space: nowrap; }
  .hdr .who { font-size: var(--fs-meta); }
  .hdr .role { display: none; }
  th, td { padding: 9px 10px; }
  .login-box { padding: 24px; }
}

/* The console kit's sortable table (design 290 §4), copied verbatim from server/web/static/style.css with the rules
   datatable.js needs; the pager's rules are left out with the paging. */
table.compact th, table.compact td { padding: 6px 10px; }
table.compact td { font-size: var(--fs-meta); }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--text); }
th.sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Searchable + sortable dataset tables (endpoint detail) */
/* A hairline fade on the scrolling edge (6a D58). `local` attaches the gradient to the
   scrolled content, so it sits at the right edge only while there is more to the right
   and slides away at the end. No JS, no new colour: --panel fading into nothing.
   (D56: this box is the scroll container, so a th inside it sticks to IT, not the page.) */
.dtscroll { overflow-x: auto; background:
  linear-gradient(to left, var(--panel) 0 12px, transparent 12px 28px) right center / 28px 100% no-repeat local; }
.dtwrap > .toolbar { margin: 12px 0 10px; }
/* 5b D96: --table-head-top is the page's offset. A th inside its own scroll
   container measures from that box, where the bar is not. */
.dtscroll th { top: 0; }
.dtsearch { min-width: 220px; max-width: 360px; }
th.sortable .arr { font-size: 11px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
/* Active sort column reads ion — it's the one interactive state on the header row. */
th.sortable[data-dir] { color: var(--accent); text-shadow: 0 0 calc(var(--glow) * 0.5) var(--ion-glow); }
th.sortable[data-dir] .arr { color: var(--accent); }

/* The console kit's field hint balloon (D313), copied verbatim from server/web/static/style.css. */
/* Field hint balloons */
.hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent-weak); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent); font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; cursor: help;
  position: relative; vertical-align: middle; margin-left: 4px;
}
.hint:hover { border-color: var(--accent); box-shadow: 0 0 calc(var(--glow) * 0.625) var(--ion-glow); }
.hint::after {
  content: attr(data-tip);
  position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 260px;
  background: var(--console); color: var(--console-text);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius);
  padding: 9px 11px; font-family: var(--sans); font-size: var(--fs-meta); font-weight: 400; line-height: 1.5;
  text-transform: none; letter-spacing: normal; white-space: normal;
  box-shadow: 0 6px 24px var(--shadow), 0 0 calc(var(--glow) * 0.875) var(--ion-weak);
  opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 45;   /* 5b D99: above the bar (40), below .bulkbar (50) */
}
/* D313 (Slate design's 054): a reason may not depend on hover alone - the same rule opens the balloon for a keyboard
   focus. Escape on a focused hint closes it until focus leaves (app.js sets data-tip-closed); a hover still opens it. */
.hint:hover::after, .hint:focus-visible::after { opacity: 1; visibility: visible; }
.hint[data-tip-closed]:not(:hover)::after { opacity: 0; visibility: hidden; }
/* Design 290 §1: the skin control's hint sits in the header at the top right of the page, so its balloon opens downwards
   and leftwards from the "?" (a balloon above it would leave the page). */
.hdr .hint::after { bottom: auto; top: 140%; left: auto; right: 0; transform: none; }

/* The ticket number (design 296 Q1/Q2): mono with tabular figures, never split or wrapped; the queue's first column is
   sized to its content at a minimum of 7ch, left-aligned so the "#" signs line up. */
.tnum { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.tnum-cell { width: 1%; min-width: 7ch; white-space: nowrap; }   /* width 1%: the auto table gives it no spare width */
h1 .tnum { font-weight: 400; }
/* The find field (296 Q5): left of the Category select, its refusal in muted text under it. */
.toolbar .find { display: inline-flex; flex-direction: column; gap: 2px; }
.toolbar .find input { width: 12ch; }
.toolbar .find #findMsg:empty { display: none; }

/* The version, bottom left on every screen (Mike, 2026-10-28; design 302 §1). The word in the body face, the number in
   .tnum. On the sign-in cards and the setup page, which do not scroll, it is fixed to the corner and main's bottom
   padding clears it; on the queue and the ticket (body.paged) it sits at the end of the page, below main's last
   content, in the same left position, so nothing is drawn over a scrolling thread or the composer. It can be selected
   for a bug report and is never a link. */
.ver { position: fixed; left: 12px; bottom: 8px; z-index: 3; color: var(--muted); font-size: var(--fs-meta); }
body.paged .ver { position: relative; left: auto; bottom: auto; display: block; padding: 0 12px 8px; }
body.paged main { padding-bottom: 24px; }
@media (max-width: 700px) { body.paged main { padding-bottom: 16px; } } /* after the rule above, so it wins */

/* Support app 0.8.0 (design 306): the kit's .card, .combo and .info-grid, copied from the console's
   server/web/static/style.css (the combo's rules as they are, the card without its tiles' .num and states), and the
   triage line, the Resolve dialog and the customer's Resolution block. */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 22px;
  min-width: 140px; position: relative; overflow: hidden; backdrop-filter: blur(calc(var(--blur) * 0.75)); }
.card::after { content: ""; position: absolute; top: 0; right: 0; width: 20px; height: 20px;
  border-top: var(--tick) solid var(--border-strong); border-right: var(--tick) solid var(--border-strong);
  border-radius: 0 var(--radius-lg) 0 0; }
.combo { position: relative; display: inline-block; }
.combo input[type=text] { width: 220px; padding: 7px 28px 7px 11px; font-size: 13px; }
.combo-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--faint); pointer-events: none; font-size: var(--fs-micro); }
.combo-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 150; min-width: 100%;
  max-height: 280px; overflow-y: auto; background: var(--panel); backdrop-filter: blur(var(--blur));
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: 0 10px 30px var(--shadow); }
.combo-item { padding: 7px 12px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.combo-item:hover, .combo-item.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ion); }
.combo-item.selected { color: var(--accent); }
.combo-item.disabled { color: var(--faint); cursor: default; }
.combo-item.disabled:hover { background: none; color: var(--faint); }
.combo.multi input[type=text] { cursor: pointer; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 24px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 18px; }
.info-grid .k { color: var(--muted); font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.info-grid .v { margin-top: 3px; }
.triage { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-ui); }
.triage-edit { margin: 0 0 14px; max-width: 900px; }
.triage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.triage-grid .full { grid-column: 1 / -1; }
.triage-grid select, .triage-grid textarea { max-width: 100%; }
.triage-edit .toolbar { margin-top: 10px; }
select.unset { color: var(--muted); }
.prev-res { margin: -6px 0 12px; }
.grp-label { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px; }
.res-block { max-width: 900px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.res-block .res-code { font-weight: 600; }
.modal.wide { max-width: 720px; max-height: calc(100vh - 32px); overflow-y: auto; }
.res-card { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.res-card .res-block { margin: 0; }
.staff-grp { display: flex; flex-direction: column; gap: 10px; }
/* The hidden attribute always wins: a display rule on .field, .row or a grid cell would otherwise show a hidden field. */
[hidden] { display: none !important; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field textarea, .field select, .field input { max-width: 100%; }
.field .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#rVer { width: 9em; }
@media (max-width: 700px) {
  .triage-grid { grid-template-columns: 1fr; }
  .combo input[type=text] { width: 100%; }
}
/* 308 Q5: the warn line above Save when someone else changed the triage. */
.warn-line { color: var(--warn); margin: 8px 0 0; font-size: var(--fs-ui); }

/* Support app 0.10.0 (design 314): the organization list's divider before the suspended ones, and the endpoint
   picker's results and chosen rows. */
.combo-div { border-top: 1px solid var(--line); margin: 4px 0; }
.ep-item .muted { white-space: normal; }
.ep-rows { margin-top: 8px; }
@media (max-width: 700px) {
  .ep-rows thead { display: none; }
  table.compact.ep-rows tr { display: block; padding: 6px 10px; border-bottom: 1px solid var(--line); }
  table.compact.ep-rows td { display: inline; padding: 0; border: 0; }
  table.compact.ep-rows td.ep-host, table.compact.ep-rows td.ep-rm { display: block; }
  .ep-rows td.ep-os, .ep-rows td.ep-group, .ep-rows td.ep-agent, .ep-rows td.ep-seen { color: var(--muted); }
  .ep-rows td.ep-group::before, .ep-rows td.ep-seen::before { content: " · "; }
  .ep-rows td.ep-agent::before { content: " · agent "; }
}