/* ============================================================================
   redesign:web-WS8b-admin — Admin console hub (#/admin) and the re-skin of the 27 admin pages.
   Loaded after kit.css. TOKENS ONLY (--c-*, the kit's classes, the legacy aliases): no hex, no rgb(),
   radius 0, nothing animates, nothing flashes. A Day / Dusk / Night switch recolours everything here
   with no re-render. The only literal colour names are in .adm-qr (a QR code needs a fixed light ground
   in every theme or phones cannot scan it) — scripts/admin_hub_test.js whitelists exactly that rule.

   CONTENTS
     1  page scope (.adm-page is put on #view for #/admin routes by admin-hub.js): headline, breadcrumb, sideways scroller
     2  the hub: groups, link rows, meta, as-of line
     3  status chips for the admin tables (.adm-st + the kit's .sev-* classes), engine tags, dots
     4  components the pages used to style inline (banner preview, cards, wells, progress, QR plate, ...)
     5  utilities that replace the one-off inline style="" of the old admin screens
   ============================================================================ */

/* ---------------------------------------------------------------- 1. page scope */
.adm-page .topbar { align-items: flex-end; gap: 12px 16px; margin-bottom: 16px; }
.adm-page h1.page { margin: 4px 0 0; font: 600 40px/1.05 var(--font-heading); letter-spacing: 0; color: var(--c-ink); }
.adm-page .topbar .sub { max-width: 80ch; margin-top: 6px; font-size: 14px; color: var(--c-ink-2); }
.adm-page .topbar > div > a[id] { display: inline-block; font-size: 13px; color: var(--c-accent-ink); padding: 4px 0; }
@media (max-width: 767.98px) { .adm-page h1.page { font-size: 30px; } }
.adm-crumb { margin: 0 0 2px; font: 600 12px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.adm-crumb a { display: inline-block; padding: 4px 0; color: var(--c-accent-ink); text-decoration: none; }
.adm-crumb a:hover { text-decoration: underline; }
.adm-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.adm-scroll td.row { flex-wrap: nowrap; white-space: nowrap; }   /* a row of action buttons stays on one line */
.adm-scroll > table { min-width: 640px; }   /* a phone scrolls the table sideways instead of squeezing every column to one word per line */
.adm-scroll:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.adm-page .card { margin-bottom: 14px; }
.adm-page .card h3 { font: 600 18px/1.2 var(--font-heading); }
.adm-page .ad-fulltext a, .adm-page .ad-fmt a { color: var(--c-accent-ink); }
.adm-page .ad-mono { color: var(--c-ink-2); }
.adm-page pre { max-width: 100%; }
.adm-page textarea.adm-mono, .adm-page pre.adm-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ---------------------------------------------------------------- 2. the hub */
.adm-hub { max-width: 1240px; }
.adm-hub .hl { margin: 6px 0 0; }
.adm-hub .sub-line { margin-top: 6px; max-width: 80ch; }
.adm-asof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0; font-size: 12px; color: var(--c-ink-2); }
.adm-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.adm-group { padding: 12px 14px 8px; }
.adm-gh { margin: 0; font: 600 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-ink); }
.adm-gsub { margin: 3px 0 6px; font-size: 12px; color: var(--c-ink-3); }
.adm-list { list-style: none; margin: 0; padding: 0; }
.adm-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; min-height: 46px; padding: 6px 4px; border-bottom: 1px solid var(--c-line-2); }
.adm-list > .adm-row:last-child, .adm-sub > .adm-list > .adm-row:last-child { border-bottom: 0; }
.adm-row:not(.adm-status):hover { background: var(--c-hover-row); }
.adm-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.adm-link, .adm-name { font-size: 14px; font-weight: 500; color: var(--c-ink); text-decoration: none; }
/* The whole row is the link (a stretched ::after), so the 44px target is the row, not the text. */
.adm-link::after { content: ""; position: absolute; inset: 0; }
.adm-link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.adm-blurb { font-size: 12px; line-height: 1.3; color: var(--c-ink-3); overflow-wrap: anywhere; }
.adm-end { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; justify-self: end; max-width: 15rem; }
.adm-meta { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1.25 var(--font-heading); letter-spacing: .04em; color: var(--c-ink-2); text-align: right; overflow-wrap: anywhere; text-wrap: balance; }
.adm-meta svg { flex: 0 0 auto; }
.adm-pending:empty { display: none; }
.adm-sub { padding: 0 0 0 10px; border-bottom: 0; }
.adm-sub > .adm-list { border-left: 1px solid var(--c-line); }
.adm-sub .adm-row { padding-left: 10px; min-height: 44px; }
.adm-status .adm-name { color: var(--c-ink); }
@media (max-width: 479.98px) {
  .adm-row { grid-template-columns: minmax(0, 1fr); }
  .adm-end { justify-self: start; }
  .adm-meta { text-align: left; }
}

/* ---------------------------------------------------------------- 3. status chips + tags for the admin tables */
/* A status WORD on the six-state classes: border + text take the severity text colour (a theme switch recolours it live).
   Always paired with the word itself, so colour is never the only signal. */
.adm-st { border-color: var(--sev, var(--c-line-control)); color: var(--sev-text, var(--c-ink-2)); }
.adm-tint { background: color-mix(in srgb, var(--sev, var(--c-line-control)) 18%, transparent); color: var(--sev-text, var(--c-ink-2)); }
.adm-eng { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; color: var(--c-ink-2); }
.adm-eng-logic { color: var(--c-ink); }
.adm-eng-model { color: var(--c-accent-ink); }
.adm-eng-retrieval { color: var(--c-ink-2); }
.adm-eng svg { vertical-align: -2px; }
.adm-dot { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; background: var(--sev, var(--c-nottracked)); }
.adm-dot.sev-notTracked, .adm-dot.sev-notAnswered { background: transparent; border: 1px solid var(--sev, var(--c-nottracked)); box-sizing: border-box; }
.adm-idx { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sev-text, var(--c-ink-2)); }
.adm-glyph { margin-right: 5px; font-weight: 700; color: var(--sev-text, var(--c-ink-2)); }
.adm-accent { color: var(--c-accent-ink); }
.adm-ink2 { color: var(--c-ink-2); }
.adm-ink3 { color: var(--c-ink-3); }

/* ---------------------------------------------------------------- 4. components the pages used to style inline */
.adm-well { background: var(--c-surface); }
.adm-banner-preview { padding: 6px 10px; max-width: 320px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--c-line); }
.adm-users-pick { display: none; max-height: 160px; overflow-y: auto; border: 1px solid var(--c-line); padding: 8px; margin-top: 6px; }
.adm-users-pick label { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--c-ink); font-size: 13px; }
.adm-users-pick.open { display: block; }
.adm-group-box { border: 1px solid var(--c-line); padding: 10px; margin-bottom: 8px; }
.adm-thread-item { border-left: 3px solid var(--sev, var(--c-line-control)); padding: 8px 12px; margin-bottom: 10px; background: var(--c-surface); }
.adm-pre-box { margin: 0; padding: 8px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow: auto; max-height: 300px; background: var(--c-surface); border: 1px solid var(--c-line); }
.adm-warn { margin: 0 0 8px; padding: 8px 10px; font-size: 12px; color: var(--c-caution); background: color-mix(in srgb, var(--c-caution-fill) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c-caution-fill) 45%, transparent); }
.adm-warn ul { margin: 6px 0 0; padding-left: 18px; }
.adm-manual { margin-top: 14px; padding: 12px 14px; border: 1.5px dashed var(--c-caution); background: color-mix(in srgb, var(--c-caution-fill) 8%, transparent); }
.adm-manual b { color: var(--c-caution); }
.adm-manual ul { margin: 0; padding-left: 20px; }
.adm-manual li { margin-bottom: 3px; }
.adm-ai-note { border-color: var(--c-accent); background: var(--c-accent-tint); }
.adm-stat { flex: 1; min-width: 150px; background: var(--c-surface); border: 1px solid var(--c-line); padding: 14px 16px; }
.adm-key { margin-top: 8px; border-color: var(--c-accent); word-break: break-all; }
.adm-qr { display: inline-block; padding: 12px; background: white; }   /* literal: a QR needs a light ground in every theme */
.adm-qr-card { max-width: 390px; text-align: center; margin: 0 auto; }
.adm-adp { margin: 5px 0; padding-left: 20px; text-indent: -20px; }
.adm-adp-1 { margin-left: 22px; }
.adm-adp-2 { margin-left: 44px; }
.adm-adp-p { margin: 5px 0; }
.adm-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-eng-strip { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--c-line); }
.adm-progress { margin-top: 10px; }
.adm-asof-text { color: var(--c-ink-2); }
.adm-revoked td { color: var(--c-ink-2); }
/* The admin pages toggle panels with the hidden attribute; a class that sets display (.btn, .row, .card) must not defeat it. */
.adm-page [hidden] { display: none !important; }
.adm-page .acd-modal.open { display: flex; }
.adm-page .acd-modal { z-index: var(--z-modal); }   /* the legacy modal used to sit under the shell's sticky strip: its title and close button were unreachable */

/* <WS8b:utilities:begin> */
.adm-accent { color: var(--c-accent-ink); }
.adm-ai-c { align-items: center; }
.adm-ai-e { align-items: flex-end; }
.adm-ai-s { align-items: flex-start; }
.adm-as-s { align-self: flex-start; }
.adm-c { text-align: center; }
.adm-click { cursor: pointer; }
.adm-ell { text-overflow: ellipsis; }
.adm-f1 { flex: 1; }
.adm-f2 { flex: 2; }
.adm-fixed { table-layout: fixed; }
.adm-flex { display: flex; }
.adm-fs-12 { font-size: 12px; }
.adm-fs-24 { font-size: 24px; }
.adm-fw-400 { font-weight: 400; }
.adm-fw-600 { font-weight: 600; }
.adm-fw-700 { font-weight: 700; }
.adm-g-10 { gap: 10px; }
.adm-g-12 { gap: 12px; }
.adm-g-4 { gap: 4px; }
.adm-g-5 { gap: 5px; }
.adm-g-6 { gap: 6px; }
.adm-g-8 { gap: 8px; }
.adm-h-60vh { height: 60vh; }
.adm-help { cursor: help; }
.adm-iflex { display: inline-flex; }
.adm-inherit { color: inherit; }
.adm-ink2 { color: var(--c-ink-2); }
.adm-jc-b { justify-content: space-between; }
.adm-jc-e { justify-content: flex-end; }
.adm-m-0 { margin: 0; }
.adm-m-0-0-8 { margin: 0 0 8px; }
.adm-m-0-4 { margin: 0 4px; }
.adm-m-10-0-4 { margin: 10px 0 4px; }
.adm-m-12-0-4 { margin: 12px 0 4px; }
.adm-m-14-0-8 { margin: 14px 0 8px; }
.adm-m-16-0-4 { margin: 16px 0 4px; }
.adm-m-2 { margin: 2px; }
.adm-m-4-0 { margin: 4px 0; }
.adm-m-4-0-0 { margin: 4px 0 0; }
.adm-m-4-0-8 { margin: 4px 0 8px; }
.adm-m-5-0 { margin: 5px 0; }
.adm-m-6-0 { margin: 6px 0; }
.adm-m-6-0-0 { margin: 6px 0 0; }
.adm-m-8-0 { margin: 8px 0; }
.adm-mb-10 { margin-bottom: 10px; }
.adm-mb-12 { margin-bottom: 12px; }
.adm-mb-16 { margin-bottom: 16px; }
.adm-mb-3 { margin-bottom: 3px; }
.adm-mb-4 { margin-bottom: 4px; }
.adm-mb-6 { margin-bottom: 6px; }
.adm-mb-8 { margin-bottom: 8px; }
.adm-ml-4 { margin-left: 4px; }
.adm-mnh-360 { min-height: 360px; }
.adm-mnh-90 { min-height: 90px; }
.adm-mnw-140 { min-width: 140px; }
.adm-mnw-160 { min-width: 160px; }
.adm-mnw-180 { min-width: 180px; }
.adm-mnw-200 { min-width: 200px; }
.adm-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.adm-mr-4 { margin-right: 4px; }
.adm-mr-5 { margin-right: 5px; }
.adm-mt-0 { margin-top: 0; }
.adm-mt-10 { margin-top: 10px; }
.adm-mt-12 { margin-top: 12px; }
.adm-mt-14 { margin-top: 14px; }
.adm-mt-16 { margin-top: 16px; }
.adm-mt-2 { margin-top: 2px; }
.adm-mt-20 { margin-top: 20px; }
.adm-mt-24 { margin-top: 24px; }
.adm-mt-4 { margin-top: 4px; }
.adm-mt-6 { margin-top: 6px; }
.adm-mt-8 { margin-top: 8px; }
.adm-mt-n4 { margin-top: -4px; }
.adm-mxh-180 { max-height: 180px; }
.adm-mxh-260 { max-height: 260px; }
.adm-mxh-280 { max-height: 280px; }
.adm-mxh-360 { max-height: 360px; }
.adm-mxh-460 { max-height: 460px; }
.adm-mxh-70vh { max-height: 70vh; }
.adm-mxw-160 { max-width: 160px; }
.adm-mxw-180 { max-width: 180px; }
.adm-mxw-220 { max-width: 220px; }
.adm-mxw-260 { max-width: 260px; }
.adm-mxw-280 { max-width: 280px; }
.adm-mxw-320 { max-width: 320px; }
.adm-mxw-340 { max-width: 340px; }
.adm-mxw-420 { max-width: 420px; }
.adm-mxw-480 { max-width: 480px; }
.adm-mxw-520 { max-width: 520px; }
.adm-mxw-600 { max-width: 600px; }
.adm-mxw-640 { max-width: 640px; }
.adm-mxw-680 { max-width: 680px; }
.adm-mxw-70pc { max-width: 70%; }
.adm-mxw-720 { max-width: 720px; }
.adm-mxw-920 { max-width: 920px; }
.adm-mxw-980 { max-width: 980px; }
.adm-nowrap { flex-wrap: nowrap; }
.adm-nw { white-space: nowrap; }
.adm-ofa { overflow: auto; }
.adm-ofh { overflow: hidden; }
.adm-ofx { overflow-x: auto; }
.adm-ofy { overflow-y: auto; }
.adm-op-65 { opacity: .65; }
.adm-p-1-0 { padding: 1px 0; }
.adm-p-8 { padding: 8px; }
.adm-pl-18 { padding-left: 18px; }
.adm-pl-20 { padding-left: 20px; }
.adm-pre { white-space: pre; }
.adm-prew { white-space: pre-wrap; }
.adm-r { text-align: right; }
.adm-sysui { font-family: var(--font-body); }
.adm-va { vertical-align: -2px; }
.adm-w-100pc { width: 100%; }
.adm-w-10pc { width: 10%; }
.adm-w-110 { width: 110px; }
.adm-w-11pc { width: 11%; }
.adm-w-120 { width: 120px; }
.adm-w-12pc { width: 12%; }
.adm-w-13pc { width: 13%; }
.adm-w-140 { width: 140px; }
.adm-w-14pc { width: 14%; }
.adm-w-150 { width: 150px; }
.adm-w-15pc { width: 15%; }
.adm-w-16pc { width: 16%; }
.adm-w-18pc { width: 18%; }
.adm-w-19pc { width: 19%; }
.adm-w-20pc { width: 20%; }
.adm-w-21pc { width: 21%; }
.adm-w-22pc { width: 22%; }
.adm-w-24pc { width: 24%; }
.adm-w-28pc { width: 28%; }
.adm-w-30pc { width: 30%; }
.adm-w-34 { width: 34px; }
.adm-w-36pc { width: 36%; }
.adm-w-40pc { width: 40%; }
.adm-w-46pc { width: 46%; }
.adm-w-60 { width: 60px; }
.adm-w-64 { width: 64px; }
.adm-w-70 { width: 70px; }
.adm-w-80 { width: 80px; }
.adm-w-8pc { width: 8%; }
.adm-w-9pc { width: 9%; }
.adm-wb-all { word-break: break-all; }
.adm-wb-word { word-break: break-word; }
.adm-wrap { flex-wrap: wrap; }
/* <WS8b:utilities:end> */