/* ============================================================================
   cms-hub — hub.css · the admin design language
   ----------------------------------------------------------------------------
   Source of truth: docs/10-admin-design-language.md (adopted from demo-match's
   `pages.js` STYLE system) + docs/11-implementation-handoff.md §8.

   NAMING DISCIPLINE (doc 10 §5, the collision lesson): every selector in this
   file is scoped under the `.hub` root class or uses a `hub-` prefixed class.
   There are intentionally NO bare generic classnames (`.row`, `.card`, `.pill`,
   `.btn`, …) — demo-match needed an entire "collision" commentary layer because
   its app and console shared class names; we adopt the lesson, not the problem.

   The token block in :root is adopted VERBATIM from doc 10 §2 (values trace
   one-to-one to otv-product-design's canonical triad). Dark mode is out of
   scope v1 (demo-match is light-only; match it).
   ========================================================================== */

/* Inter, loaded from the canonical staff/admin family (otv-product-design) — without
   this import the token's 'Inter' silently falls back to the system font and
   the hub stops matching the reference console. Production should vendor the
   woff2 files under /assets like the htmx note in layout.ts. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── 1. Design tokens (doc 10 §2, verbatim) ─────────────────────────────── */
:root{
  /* type */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  /* base 14px/20px body; 13px secondary; 11px uppercase captions — see §2 */

  /* brand */
  --brand:#1a6aff; --brand-hover:#1558d6; --brand-active:#0f45ad;
  --brand-deep:#00008b; --brand-soft:rgba(26,106,255,.12);
  --brand-subtle:rgba(26,106,255,.08); --brand-medium:rgba(26,106,255,.30);
  --cyan:#00b7c3; --accent:#e1bc36;

  /* status (soft bg + dark text pairs — never bare saturated fills) */
  --success:#2f9e44; --warning:#e1a400; --danger:#d93025;
  --go-bg:#dcfce7; --go-tx:#065f46;
  --maybe-bg:#fef3c7; --maybe-tx:#92400e;
  --nogo-bg:#fee2e2; --nogo-tx:#991b1b;
  --none-bg:#eef0f3; --none-tx:#6b7280;
  /* ADDED pair (not named in doc 10 §2): doc 10 §4 specifies "Staged → blue/info"
     but names no token pair. Added here, commented, so the mapping is complete:
     --info-bg/--info-tx, AA-checked (7.1:1) like the other pairs. */
  --info-bg:#dbeafe; --info-tx:#1e40af;

  /* surfaces & lines */
  --canvas:#f3f5f7; --card:#fff; --sunken:#e9ebef; --rail:#fbfcfe;
  --border:#e1e4e8; --border-strong:#c7cbd1;

  /* text */
  --tx:#1f2937; --tx2:#4b5563; --tx3:#6b7280; --tx-inv:#fff;
  --tx-muted:#6b7280; /* = --tx3; doc 10 lists both names */

  /* shape, depth, motion */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --pill:9999px;
  /* depth upgraded in the design-skill pass (docs/qa/DESIGN-SKILL-AUDIT.md):
     layered ambient stacks replace single-stop shadows — same slate-navy tint
     family, no harsh edges. Surfaces also carry an inset top highlight
     (see --hl-top) for the machined "plate in a tray" feel. */
  --sh-sm:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.04);
  --sh-md:0 2px 4px rgba(15,23,42,.05), 0 8px 20px -8px rgba(15,23,42,.12);
  --sh-lg:0 0 0 1px rgba(15,23,42,.04), 0 8px 24px -12px rgba(9,23,66,.16),
    0 24px 64px -16px rgba(9,23,66,.24);
  --hl-top:inset 0 1px 0 rgba(255,255,255,.75);
  --focus:0 0 0 3px rgba(26,106,255,.32);
  --ease:cubic-bezier(.2,0,0,1); --dur-fast:120ms; --dur:200ms;
  /* entrance choreography: heavy expo out, transform+opacity only */
  --ease-enter:cubic-bezier(.32,.72,0,1); --dur-enter:480ms;
  --grad:linear-gradient(135deg,#00008b 0%,#1a6aff 100%);

  /* touch & rhythm — gutter widens at 768/1024 (see §21) */
  --touch:44px; --gutter:16px;
}

/* ─── 2. Base type ────────────────────────────────────────────────────────── */
.hub {
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  color: var(--tx);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  min-height: 100vh;
}

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

/* The HTML hidden state must win over component display declarations such as
   .hub-field { display:flex } and .hub-btn { display:inline-flex }. Without
   this rule, progressive forms render every step at once (including closed
   menus and inline retry controls). */
.hub [hidden] { display: none !important; }

.hub h1, .hub h2, .hub h3, .hub h4 {
  margin: 0;
  /* Admin chrome follows the governed demo-match dialect (700 here); the
     editor's site-facing canvas headings use the OTV semibold standard. */
  font-weight: 700;
  color: var(--tx);
  line-height: 1.25;
}
.hub h1 { font-size: 22px; }
.hub h2 { font-size: 17px; }
.hub h3 { font-size: 15px; }
.hub p { margin: 0 0 8px; }
.hub p:last-child { margin-bottom: 0; }

/* 13px secondary prose */
.hub-sub { font-size: 13px; color: var(--tx2); }

/* 11px uppercase captions (labels, table headers, pill text set per-component) */
.hub-cap {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tx3);
}

/* Keep the generic link baseline deliberately low-specificity. Component links
   (.hub-btn, .hub-hbtn, .hub-ritem, .hub-who, …) own their visual color; a
   higher-specificity `.hub a` baseline silently turned header and rail links
   brand-blue even when they declared white or muted text. */
.hub :where(a) { color: var(--brand); text-decoration: none; }
.hub :where(a):hover { color: var(--brand-hover); text-decoration: underline; }
.hub-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  white-space: nowrap;
}
.hub-link .hub-ic { width: 13px; height: 13px; }

.hub-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--tx);
}

/* visually hidden but screen-reader available (mobile icon-only chrome) */
.hub-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─── 3. Focus (WCAG 2.2 — visible focus via --focus ring, doc 10 §5) ─────── */
.hub :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* ─── 4. Application shell ────────────────────────────────────────────────── */
.hub-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* — top bar: 56px, sticky, gradient — */
.hub-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--gutter);
  background: var(--grad);
  /* inner light catch on the brand gradient — glass depth without blur */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(9, 23, 66, .18);
  color: var(--tx-inv);
}

/* Header glyphs follow the owning control's contrast color (white on the
   gradient, deep brand on the solid action), rather than the body icon default. */
.hub-topbar .hub-ic { color: currentColor; }

.hub-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tx-inv);
  text-decoration: none;
  white-space: nowrap;
}
.hub-brand:hover { color: var(--tx-inv); text-decoration: none; }
.hub-brand-mark {
  width: 28px; height: 28px;
  border-radius: var(--radius-md);
  background: var(--tx-inv);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.hub-brand-name { font-size: 15px; font-weight: 700; }
.hub-btag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx-inv);
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--pill);
  padding: 2px 9px;
  white-space: nowrap;
}

/* site switcher — pill select sitting on the gradient */
.hub-hsel {
  appearance: none;
  -webkit-appearance: none;
  height: 36px;
  max-width: 280px;
  padding: 0 30px 0 12px;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .14)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
  color: var(--tx-inv);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-overflow: ellipsis;
}
.hub-hsel:hover { background-color: rgba(255, 255, 255, .22); }
.hub-hsel option { color: var(--tx); background: var(--card); }

.hub-topbar-sp { flex: 1 1 auto; }

/* user pill (email, opens account menu) */
.hub-who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .14);
  color: var(--tx-inv);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.hub-who:hover { color: var(--tx-inv); background: rgba(255, 255, 255, .22); text-decoration: none; }
/* U10: the account pill used to collapse to a bare unlabeled dot on mobile
   (hub-who-mail hides <768px) — it's a real Lucide icon now (hub-i-user-circle,
   18px, currentColor) so the collapsed state still reads as "account", plus
   the anchor's own aria-label/title carry the email for screen readers. */
.hub-who .hub-ic { width: 18px; height: 18px; }

/* top-bar buttons (white-on-gradient primary; outline secondary) */
.hub-hbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12);
  color: var(--tx-inv);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.hub-hbtn:hover { background: rgba(255, 255, 255, .16); color: var(--tx-inv); text-decoration: none; }
.hub-hbtn:active { transform: none; }
.hub-hbtn.solid,
.hub-hbtn--solid {
  background: var(--tx-inv);
  border-color: var(--tx-inv);
  color: var(--brand-deep);
}
.hub-hbtn.solid:hover, .hub-hbtn--solid:hover { background: #f3f6ff; color: var(--brand-deep); }

/* mobile burger (label toggles the hidden checkbox driving the rail) */
.hub-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .14);
  color: var(--tx-inv);
  cursor: pointer;
}
.hub-navtoggle { position: absolute; opacity: 0; pointer-events: none; }

/* — body: rail + content — */
.hub-body {
  display: flex;
  align-items: flex-start;
  flex: 1 1 auto;
}

/* rail: 248px, sticky under the bar, --rail background */
.hub-rail {
  position: sticky;
  top: 56px;
  flex: none;
  width: 248px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  background: var(--rail);
  border-right: 1px solid var(--border);
  padding: 14px 10px 24px;
}

/* U7: fleet screen (no site picked) — the site-scoped groups collapse to
   this one quiet line instead of 11 disabled rows (avoid empty-nav-state).
   Sits where "Content" used to start; Org renders right below it. */
.hub-rhint {
  padding: 2px 10px 18px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--tx3);
}

/* group caption + spacing per demo-match .railcap/.railgrp (pages.js) */
.hub-rgroup { margin: 0; }
.hub-rgroup + .hub-rgroup { margin-top: 20px; }
.hub-rlabel {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tx3);
  padding: 0 10px 7px;
  display: block;
}

.hub-ritem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--tx2);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* demo-match conformance (.railitem, pages.js): hover is the NEUTRAL sunken
   grey — never a blue tint; blue is reserved for the active item */
.hub-ritem:hover {
  background: var(--sunken);
  color: var(--tx);
  text-decoration: none;
}
/* active = --brand-soft bg + --brand text + full-height inset brand bar
   (demo-match .railitem.on verbatim) */
.hub-ritem.is-active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 650;
  box-shadow: inset 2px 0 0 var(--brand);
}
/* muted/disabled item (generic "not available yet" stub — M2+ milestones;
   U7: the site-scoped groups with no site selected no longer use this state,
   they collapse to .hub-rhint below instead) */
.hub-ritem.is-off {
  color: var(--tx3);
  opacity: .7;
  cursor: default;
}
.hub-ritem.is-off:hover { background: transparent; color: var(--tx3); }

.hub-ritem .hub-ic { width: 15px; height: 15px; color: var(--tx3); }
.hub-ritem.is-active .hub-ic { color: var(--brand); }

/* count: right-aligned tabular, plain text like demo-match .railitem .cnt —
   blue only on the active item */
.hub-rcount {
  margin-left: auto;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tx3);
}
.hub-ritem.is-active .hub-rcount { color: var(--brand); }
/* red variant — attention counts (stale translations, failures); the one hub
   extension past demo-match, kept as a pill so it reads as an alert */
.hub-rcount.is-red {
  color: var(--nogo-tx);
  background: var(--nogo-bg);
  border-radius: var(--pill);
  padding: 1px 7px;
  font-weight: 600;
}

/* A saved-change count is routine work, not an error: it stays compact in the
   persistent rail yet has a pill shape and accessible text supplied in markup. */
.hub-ritem .hub-rcount:not(.is-red) {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: var(--pill);
  background: var(--sunken);
  text-align: center;
  font-weight: 650;
}

/* content column: max-width 1600 admin (640 focused forms — .hub-narrow) */
.hub-content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 20px var(--gutter) 48px;
}
.hub-narrow { max-width: 640px; }

/* page header block */
.hub-ph {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
}
.hub-ph-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hub-ph-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-ph-sp { flex: 1 1 auto; }
.hub-ph-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* U5: Open site / Publications / History collapse into this overflow <900px
   (the ⋯ pattern, this time <details> — free keyboard support, no JS). Both
   the plain pills above AND this menu always render; only visibility flips
   with the viewport (see the 899.98px query in §21), so the three hrefs stay
   in the markup — and reachable by the check-links crawler — either way. */
.hub-ph-overflow { position: relative; display: none; }
.hub-ph-overflow > summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; }
.hub-ph-overflow > summary::-webkit-details-marker,
.hub-ph-overflow > summary::marker { display: none; content: ""; }
.hub-ph-overflow-menu {
  /* left-anchored: this control only ever shows <900px (see the query below),
     where it sits near the left edge of the header row — right-anchoring it
     like .hub-rowmore-menu would push the panel off-screen */
  position: absolute; left: 0; top: 100%; margin-top: 4px; z-index: 20;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--sh-md); padding: 8px; min-width: 190px;
}
.hub-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx2);
  text-decoration: none;
}
.hub-back:hover { color: var(--brand); text-decoration: none; }

/* ─── 5. Cards & grids ────────────────────────────────────────────────────── */
.hub-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-sm), var(--hl-top);
  padding: 18px;
}

/* fleet dashboard card grid — min 440px cards */
.hub-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
  gap: var(--gutter);
  align-items: start;
}

/* ─── fleet hierarchy ────────────────────────────────────────────────────── */
.hub-hierarchy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hub-hierarchy-help {
  color: var(--tx2);
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 4px;
}
.hub-hierarchy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 12px 9px 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--sh-sm), var(--hl-top);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.hub-hierarchy-row:hover, .hub-hierarchy-row.is-drop-target { border-color: var(--brand-medium); background: var(--brand-subtle); }
.hub-hierarchy-row.is-dragging { opacity: .45; }
.hub-hierarchy-indent {
  flex: 0 0 auto;
  width: max(22px, calc(var(--level, 0) * 24px + 22px));
  min-width: 22px;
  align-self: stretch;
  display: flex;
  align-items: center;
  position: relative;
  color: var(--brand);
}
.hub-hierarchy-indent::before {
  content: "";
  position: absolute;
  left: calc(var(--level, 0) * 24px - 12px);
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--brand-medium);
}
.hub-hierarchy-indent::after {
  content: "";
  position: absolute;
  left: calc(var(--level, 0) * 24px - 12px);
  top: 50%;
  width: 12px;
  border-top: 1px solid var(--brand-medium);
}
.hub-hierarchy-row[aria-level="1"] .hub-hierarchy-indent::before,
.hub-hierarchy-row[aria-level="1"] .hub-hierarchy-indent::after { display: none; }
.hub-hierarchy-branch {
  position: absolute;
  left: calc(var(--level, 0) * 24px - 12px);
  top: 50%;
  z-index: 1;
  padding: 0 2px;
  transform: translate(-50%, -50%);
  background: var(--card);
  font-size: 16px;
  line-height: 1;
}
.hub-hierarchy-grip {
  flex: 0 0 26px;
  border: 0;
  background: transparent;
  color: var(--tx3);
  cursor: grab;
  font-size: 18px;
  padding: 4px 0;
}
.hub-hierarchy-grip:active { cursor: grabbing; }
.hub-hierarchy-main { flex: 1 1 300px; min-width: 0; }
.hub-hierarchy-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hub-hierarchy-title .hub-cardthumb { width: 36px; height: 36px; }
.hub-hierarchy-title .hub-rowname { font-weight: 650; }
.hub-hierarchy-context { display: block; color: var(--tx2); font-size: 12px; margin-top: 2px; }
.hub-hierarchy-context b { color: var(--brand-active); font-weight: 700; }
.hub-hierarchy-context a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hub-hierarchy-depth { margin-left: 8px; color: var(--tx3); }
.hub-hierarchy-host { display: block; color: var(--tx3); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-hierarchy-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.hub-hierarchy-meta .hub-progress { flex: 0 1 150px; min-width: 110px; margin: 0 4px; }
.hub-hierarchy-meta .hub-card-meta { display: contents; }
.hub-hierarchy-pending {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  padding: 6px 7px 6px 10px;
  color: var(--tx2);
  background: var(--brand-subtle);
  border: 1px solid var(--brand-medium);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.hub-hierarchy-pending > a { color: var(--brand-active); text-decoration: none; }
.hub-hierarchy-pending > a:hover { text-decoration: underline; text-underline-offset: 2px; }
.hub-hierarchy-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.hub-hierarchy-actions .hub-btn { padding-left: 10px; padding-right: 10px; }
.hub-dashboard-status-link { display: inline-flex; color: inherit; text-decoration: none; border-radius: var(--pill); }
.hub-dashboard-status-link:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--brand-medium); }
.hub-dashboard-status-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hub-coverage-empty {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  color: var(--tx2);
  text-decoration: none;
}
.hub-coverage-empty b { font-size: 12px; font-weight: 600; color: var(--tx2); }
.hub-coverage-empty:hover { background: var(--brand-subtle); text-decoration: none; }
.hub-coverage-empty.is-loading { cursor: progress; }
.hub-coverage-loading { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx2); }
.hub-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; opacity: .65; animation: hub-spin .7s linear infinite; }
.hub-coverage-skeleton { display: grid; gap: 9px; padding: 14px; }
.hub-coverage-skeleton div { height: 13px; width: 72%; border-radius: var(--pill); background: linear-gradient(90deg, var(--sunken), var(--canvas), var(--sunken)); background-size: 200% 100%; animation: hub-skeleton 1.2s ease-in-out infinite; }
.hub-coverage-skeleton div:nth-child(2) { width: 88%; animation-delay: .12s; }
.hub-coverage-skeleton div:nth-child(3) { width: 56%; animation-delay: .24s; }
@keyframes hub-skeleton { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
.hub-hierarchy-organize { position: relative; }
.hub-hierarchy-organize > summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; }
.hub-hierarchy-organize > summary::-webkit-details-marker,
.hub-hierarchy-organize > summary::marker { display: none; content: ""; }
.hub-hierarchy-organize-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 170px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--sh-md);
}
.hub-hierarchy-organize-menu .hub-btn { justify-content: flex-start; width: 100%; }
.hub-hierarchy-dialog { max-width: 560px; }

/* Fleet IA pass: rows use explicit fact groups and a reserved action rail.
   These rules are intentionally Fleet-prefixed so the site editor's rows do
   not inherit dashboard density or alignment decisions. */
.hub-fleet-preview {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 38px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: linear-gradient(135deg, var(--sunken), var(--canvas));
}
.hub-fleet-preview .hub-cardthumb { width: 100%; height: 100%; border-radius: 0; }
.hub-fleet-preview-label {
  position: absolute;
  inset: auto 3px 3px;
  overflow: hidden;
  color: var(--tx3);
  font-size: 8px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  opacity: .9;
}
.hub-fleet-facts {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(130px, .9fr) minmax(190px, 1.2fr) minmax(108px, .65fr);
  align-items: start;
  gap: 10px 14px;
  margin-top: 9px;
}
.hub-fleet-fact { min-width: 0; display: grid; gap: 4px; }
.hub-fleet-fact-label {
  color: var(--tx3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.1;
  text-transform: uppercase;
}
.hub-fleet-fact-value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  gap: 5px;
  color: var(--tx2);
  font-size: 12px;
  line-height: 1.25;
}
.hub-fleet-fact-status .hub-fleet-fact-value { align-items: flex-start; }
.hub-fleet-coverage-summary {
  display: grid;
  min-width: 0;
  gap: 3px;
  color: var(--tx2);
  text-decoration: none;
}
.hub-fleet-coverage-summary:hover b { color: var(--brand-active); }
.hub-fleet-coverage-summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }
.hub-fleet-coverage-summary b { color: var(--tx); font-size: 12px; line-height: 1.2; }
.hub-fleet-coverage-summary .hub-sub { font-size: 10.5px; line-height: 1.2; }
.hub-fleet-coverage-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hub-fleet-coverage-track { display: block; flex: 1 1 auto; min-width: 44px; max-width: 92px; height: 5px; overflow: hidden; border-radius: var(--pill); background: var(--sunken); }
.hub-fleet-coverage-track > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.hub-fleet-fact-updated .hub-fleet-fact-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hub-fleet-fact-attention { grid-column: 1 / -1; padding-top: 1px; }
.hub-fleet-fact-attention .hub-fleet-fact-value { gap: 6px; }
.hub-fleet-fact-attention .hub-card-meta { display: contents; }
.hub-fleet-fact-attention .hub-dashboard-status-link { display: inline-flex; }
.hub-hierarchy-row > .hub-hierarchy-main { min-width: 0; }
.hub-hierarchy-row > .hub-hierarchy-actions {
  width: 258px;
  min-width: 258px;
  align-self: center;
  flex-wrap: nowrap;
}
.hub-hierarchy-row > .hub-hierarchy-actions > .hub-btn { white-space: nowrap; }
@media (max-width: 1180px) {
  .hub-fleet-facts { grid-template-columns: minmax(140px, 1fr) minmax(120px, .9fr) minmax(170px, 1.1fr); }
  .hub-fleet-fact-updated { grid-column: 1; }
}
@media (max-width: 900px) {
  .hub-hierarchy-row { align-items: flex-start; flex-wrap: wrap; padding: 9px 10px 10px 0; }
  .hub-hierarchy-main { flex-basis: calc(100% - 70px); }
  .hub-hierarchy-row > .hub-hierarchy-actions { width: calc(100% - 60px); min-width: 0; margin-left: 52px; margin-right: 8px; justify-content: flex-start; flex-wrap: wrap; }
  .hub-fleet-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; }
  .hub-fleet-fact-updated, .hub-fleet-fact-attention { grid-column: auto; }
}
@media (max-width: 600px) {
  .hub-hierarchy-row > .hub-hierarchy-actions > .hub-btn,
  .hub-hierarchy-row > .hub-hierarchy-actions > .hub-hierarchy-organize { flex: 1 1 105px; }
  .hub-hierarchy-row > .hub-hierarchy-actions > .hub-btn,
  .hub-hierarchy-row > .hub-hierarchy-actions > .hub-hierarchy-organize > summary { width: 100%; justify-content: center; }
}

.hub-card-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.hub-card-hd h2, .hub-card-hd h3 { min-width: 0; }
.hub-card-hd .hub-pill { margin-left: auto; }
.hub-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
}

/* ─── 6. Row card list (Pages/Posts/Demos/Publications/Users) ─────────────── */
.hub-rowlist { display: flex; flex-direction: column; gap: 10px; }
.hub-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-sm), var(--hl-top);
  padding: 12px 16px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hub-row:hover { box-shadow: var(--sh-md), var(--hl-top); transform: translateY(-1px); }
.hub-rowtitle {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 240px;
}
.hub-rowtitle-main { min-width: 0; }
.hub-rowtitle-main .hub-rowname {
  font-weight: 600;
  color: var(--tx);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-rowtitle-main a { color: var(--tx); }
.hub-rowtitle-main a:hover { color: var(--brand); text-decoration: none; }
.hub-rowact {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;   /* second line stays vertically centered, gap keeps rhythm */
  flex: none;
}
/* row actions stay a quiet secondary (border, no fill) until pointed at —
   the row title link is the loud element; a state action only turns solid
   when it needs attention (stateButton's own `primary`, inside the ⋯ menu).
   pills/tags sit on the same visual centerline as the 36px mini buttons (U1) */
.hub-rowact .hub-btn.mini { flex: none; }
.hub-rowact .hub-btn.mini:not(.primary):hover,
.hub-rowact .hub-btn.mini:not(.primary):focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}
/* a long slug/demo ref tag never pushes the actions off-card at 1280/1440 */
.hub-row > .hub-tag {
  max-width: 220px;
  overflow: hidden;
}
.hub-row > .hub-tag,
.hub-row > .hub-label {
  text-overflow: ellipsis;
}
/* U8: the row's "Updated <date>" always reads as one phrase — tabular-nums
   keeps the digits from jittering row to row, nowrap keeps "Aug 19" (or a
   full "Aug 19, 2026" on an older row) from breaking mid-date the way the
   whole .hub-sub line could when the title column was too narrow. */
.hub-rowdate {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ─── 7. Status pills (doc 10 §4 mapping, doc 07 §4 vocabulary) ─────────────
   11px uppercase, soft bg / dark tx. Variants:
     none   — Draft · Paused · Archived · Cancelled (grey)
     maybe  — In review · Stale translation · Changes pending (amber)
     info   — Staged · Approved (blue)
     go     — Live (green)
     nogo   — Couldn't publish (red)
     brand  — Publishing… · Provisioning (blue fill, white text, AA 4.6:1)      */
.hub-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--none-bg);
  /* NOTE (AA): --none-tx (#6b7280) on --none-bg (#eef0f3) measures 4.2:1 —
     just under the 4.5:1 AA bar for 11px text. The token stays verbatim per
     doc 10 §2; the pill renders with --tx2 (#4b5563) = 6.6:1. */
  color: var(--tx2);
}
.hub-pill--none { background: var(--none-bg); color: var(--tx2); }
.hub-pill--maybe { background: var(--maybe-bg); color: var(--maybe-tx); }
.hub-pill--info { background: var(--info-bg); color: var(--info-tx); }
.hub-pill--go { background: var(--go-bg); color: var(--go-tx); }
.hub-pill--nogo { background: var(--nogo-bg); color: var(--nogo-tx); }
.hub-pill--brand { background: var(--brand); color: var(--tx-inv); }

/* U3 "chip diet": the merged locale+state pill ("EN · In review") — sentence
   case, not the pill's usual all-caps shout, so a row of these reads as
   words, not a wall of badges. The code stays bold/tight; the state text
   keeps whatever casing the caller passed (Draft/In review/Live/…) — the
   colorblind-safe word next to the pill's usual color. */
.hub-pill--locale {
  text-transform: none;
  letter-spacing: 0;
  gap: 4px;
}
.hub-pill--locale b {
  font-weight: 700;
  letter-spacing: .04em;
}

/* pulse dot for in-flight states (Publishing…, building) */
.hub-pill--brand .hub-pill-dot,
.hub-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ─── 8. Tags & labels (11px uppercase, brand on brand-soft) ──────────────── */
/* AA note: #1a6aff on brand-soft-over-white (~#e3edff) is 3.9:1; text uses
   --brand-active (#0f45ad) = 7.2:1 while --brand stays the interactive color. */
.hub-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand-active);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hub-label {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--none-bg);
  color: var(--tx2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── 9. Filter chips, search, segmented control ──────────────────────────── */
.hub-chiprow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hub-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--pill);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--tx2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hub-chip:hover { border-color: var(--brand-medium); color: var(--tx); text-decoration: none; }
.hub-chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--tx-inv);
  font-weight: 600;
}

.hub-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  min-width: 240px;
  padding: 0 14px;
  border-radius: var(--pill);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--tx3);
  transition: border-color var(--dur-fast) var(--ease);
}
.hub-search:focus-within { border-color: var(--brand); }
.hub-search input {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--tx);
  width: 100%;
  padding: 0;
}
.hub-search input::placeholder { color: var(--tx3); }
.hub-search .hub-ic { width: 15px; height: 15px; }

/* U11 ("one search, not two"): the same .hub-search markup now lives in the
   top bar itself (layout.ts's globalSearchBox) instead of only on the fleet
   page — restyled translucent-on-gradient to match the switcher/account
   pills it sits beside there. flex-shrink (not grow) keeps it a fixed-ish
   width that yields first when a site switcher + preview button also share
   the bar, rather than forcing the whole top bar to overflow. */
.hub-topbar-search { display: contents; }
.hub-topbar .hub-search {
  flex: 0 1 220px;
  min-width: 120px;
  border-color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .14);
  color: var(--tx-inv);
}
.hub-topbar .hub-search:focus-within { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .22); }
.hub-topbar .hub-search input { color: var(--tx-inv); }
.hub-topbar .hub-search input::placeholder { color: rgba(255, 255, 255, .72); }

/* date-range chips (History/Audit filtering) */
.hub-rgchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hub-rgchip-btn {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--pill);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--tx2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.hub-rgchip-btn:hover { border-color: var(--brand-medium); text-decoration: none; }
.hub-rgchip-btn.is-active {
  background: var(--brand-soft);
  border-color: var(--brand-medium);
  color: var(--brand-active);
}

/* ─── segmented control (demo-match `.seg`, editor locale/device chrome) ── */
.hub-seg {
  display: inline-flex;
  align-items: center;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  padding: 3px;
  gap: 2px;
}
.hub-seg-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: var(--tx-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.hub-seg-btn.is-active {
  background: var(--card);
  color: var(--brand);
  box-shadow: var(--sh-sm);
  text-decoration: none;
}

/* ─── 10. Buttons (44px touch; 36px mini) ─────────────────────────────────── */
.hub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--touch);
  padding: 0 20px;
  border-radius: var(--pill);
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--tx);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.hub-btn:hover { border-color: var(--brand-medium); background: var(--brand-subtle); color: var(--tx); text-decoration: none; }
.hub-btn:active { transform: translateY(1px) scale(.985); }
.hub-btn .hub-ic { width: 16px; height: 16px; }

.hub-btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--tx-inv);
}
.hub-btn.primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--tx-inv);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(26, 106, 255, .5);
}
.hub-btn.primary:active { transform: translateY(1px) scale(.985); box-shadow: none; }

/* the trailing-arrow chip ("button-in-button"): external/forward CTAs nest
   their arrow inside its own circular well instead of floating it naked —
   it shifts diagonally and swells on hover for internal kinetic tension. */
.hub-btn .hub-arr {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: -6px;
  border-radius: 50%;
  background: rgba(15, 23, 42, .07);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.hub-btn:hover .hub-arr { transform: translate(1.5px, -1.5px) scale(1.06); }
.hub-btn.primary .hub-arr { background: rgba(255, 255, 255, .18); }
.hub-btn .hub-arr .hub-ic { width: 12px; height: 12px; }
.hub-btn.mini .hub-arr { width: 20px; height: 20px; margin-right: -4px; }
.hub-btn.mini .hub-arr .hub-ic { width: 11px; height: 11px; }

/* danger = red outline (Delete/Retire) */
.hub-btn.danger,
.hub-btn.mini.danger {
  border-color: var(--nogo-tx);
  color: var(--danger);
  background: var(--card);
}
.hub-btn.danger:hover, .hub-btn.mini.danger:hover {
  background: var(--nogo-bg);
  border-color: var(--danger);
  color: var(--nogo-tx);
}

.hub-btn.mini {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  gap: 5px;
}
.hub-btn.mini .hub-ic { width: 14px; height: 14px; }

.hub-btn[disabled],
.hub-btn.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* pending state (stakeholder report: "I click something loading and see no
   indication, so I click again") — layout.ts's ADMIN_SCRIPT inserts this as
   the busy control's first child, alongside disabled + aria-busy; currentColor
   means it reads correctly on default, primary AND danger buttons alike.
   prefers-reduced-motion (§22 below, ".hub *") already collapses the spin to
   a single static frame — no extra guard needed here. */
.hub-spin {
  display: inline-block;
  flex: none;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .7;
  animation: hub-spin .6s linear infinite;
}
.hub-btn.mini .hub-spin { width: 11px; height: 11px; border-width: 2px; }
@keyframes hub-spin { to { transform: rotate(360deg); } }

/* ─── 11. Tables (.hub-tblwrap + .hub-antbl/.hub-ansec analytics) ─────────── */
.hub-ansec {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-sm), var(--hl-top);
  padding: 16px 18px;
  margin: 0 0 var(--gutter);
}
.hub-ansec-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.hub-ansec-hd .hub-cap { font-size: 11px; }
.hub-ansec-hd-sp { flex: 1 1 auto; }

/* One human-readable, snapshot-bound queue for every saved site change. */
.hub-pending-intro { margin: -2px 0 14px; max-width: 72ch; }
.hub-pending-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card);
}
.hub-pending-item {
  display: flex;
  gap: 14px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.hub-pending-item:last-child { border-bottom: 0; }
.hub-pending-item.is-included { border-left-color: var(--brand); }
.hub-pending-main { min-width: 0; flex: 1 1 auto; }
.hub-pending-item-action { display: flex; align-items: center; flex: none; }
.hub-pending-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hub-pending-title > a { color: var(--tx); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.hub-pending-title > a:hover { color: var(--brand); text-decoration: underline; }
.hub-pending-summary { margin-top: 4px; color: var(--tx2); font-size: 13px; text-transform: capitalize; }
.hub-pending-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; color: var(--tx3); font-size: 11px; }
.hub-pending-meta span + span::before { content: "·"; margin-right: 12px; color: var(--border-strong); }
.hub-pending-empty { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 84px; color: var(--tx2); }
.hub-pending-empty .hub-ic { color: var(--success); }
.hub-pending-review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hub-pending-group-note { margin: 0 0 10px; }
.hub-pending-updating {
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand) 5%, var(--card));
  padding: 14px;
  margin: 0 0 12px;
}
.hub-pending-updating-hd,
.hub-pending-flight-hd,
.hub-pending-flight-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-pending-updating-hd > div { min-width: 0; }
.hub-pending-updating-hd p { margin: 3px 0 0; }
.hub-pending-flight { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.hub-pending-flight-items { display: grid; gap: 7px; margin-top: 9px; }
.hub-pending-flight-item { border-radius: var(--radius-sm); background: var(--card); padding: 8px 10px; font-size: 12px; }
.hub-pending-flight-item .is-newer { color: var(--brand); font-weight: 700; }
.hub-pending-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; }
.hub-pending-footer p { margin: 0; max-width: 72ch; }
.hub-pending-footer .hub-btn { flex: none; }
@media (max-width: 720px) {
  .hub-pending-item,
  .hub-pending-updating-hd,
  .hub-pending-flight-hd,
  .hub-pending-flight-item { align-items: stretch; flex-direction: column; }
  .hub-pending-item-action .hub-btn { justify-content: center; width: 100%; }
  .hub-pending-footer { align-items: stretch; flex-direction: column; }
  .hub-pending-footer .hub-btn { justify-content: center; width: 100%; }
}

.hub-tblwrap {
  overflow: auto;
  max-height: 560px;          /* tables get sticky headers at height (doc 10 §5) */
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}
.hub-antbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.hub-antbl th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card);
  border-bottom: 1px solid var(--border-strong);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tx3);
  white-space: nowrap;
}
.hub-antbl td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--tx2);
}
.hub-antbl tr:last-child td { border-bottom: none; }
.hub-antbl tbody tr:hover td { background: var(--brand-subtle); }
/* tabular-nums right column (counts, metrics) */
.hub-antbl .num,
.hub-antbl td.num, .hub-antbl th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── 12. Modals ──────────────────────────────────────────────────────────── */
.hub-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(15, 23, 42, .48);
  animation: hub-overlay-in 200ms var(--ease);
}
.hub-overlay[hidden] { display: none; }
@keyframes hub-overlay-in { from { opacity: 0; } }
.hub-modal {
  position: relative;
  width: min(560px, 100%);
  max-height: min(80vh, 720px);
  overflow: auto;
  background: var(--card);
  border-radius: var(--radius-lg);
  /* double bezel: outer hairline ring + ambient depth + inner top highlight
     (the 4px cyan strip below completes the "plate in a tray" nesting) */
  box-shadow: var(--sh-lg), var(--hl-top);
  padding: 20px 22px 22px;
  animation: hub-modal-in 320ms var(--ease-enter);
}
@keyframes hub-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
}
/* the 4px cyan top strip */
.hub-modal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--cyan);
}
.hub-modal-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}
.hub-modal-hd h2 { flex: 1 1 auto; }
.hub-modal-ft {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* ─── 13. Flash toast ─────────────────────────────────────────────────────── */
.hub-flash {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 70;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(520px, calc(100vw - 32px));
  background: #111827;
  color: var(--tx-inv);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-md);
  box-shadow: var(--sh-lg);
  padding: 12px 18px;
  animation: hub-flash-in var(--dur) var(--ease);
}
.hub-flash .hub-ic { width: 15px; height: 15px; color: var(--cyan); }
@keyframes hub-flash-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Durable background-work doorway. It never blocks the page or covers a
   control, and survives ordinary navigation because its source is server state
   (with a short session fallback while a fresh update is being registered). */
.hub-operation {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(520px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--canvas);
  box-shadow: var(--sh-lg);
  color: var(--tx);
  font-size: 12px;
}
.hub-operation[hidden] { display: none; }
.hub-operation-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.hub-operation strong { font-size: 12.5px; }
.hub-operation small { color: var(--tx3); font-size: 11.5px; }
.hub-operation a { margin-left: 5px; font-weight: 650; white-space: nowrap; }
.hub-operation-dismiss {
  min-height: 28px;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--tx3);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.hub-operation-dismiss:hover { background: var(--sunken); color: var(--tx); }
.hub-operation-dismiss:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hub-operation-dismiss[hidden] { display: none; }
.hub-operation-track { display: flex; gap: 3px; margin-top: 3px; }
.hub-operation-track[hidden] { display: none; }
.hub-operation-track i { height: 5px; flex: 1; border-radius: var(--pill); background: var(--line); }
.hub-operation-track i.is-done { background: var(--success); }
.hub-operation-track i.is-active { background: var(--brand); }
.hub-operation-track i.is-failed { background: var(--danger); }
.hub-operation-meta { color: var(--tx3); font-size: 10.5px; line-height: 1.35; }
.hub-operation-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent);
  animation: hub-operation-pulse 1.7s ease-out infinite;
}
.hub-operation.is-terminal .hub-operation-dot { animation: none; box-shadow: none; background: var(--success); }
.hub-operation.is-failure .hub-operation-dot { background: var(--danger); }
@keyframes hub-operation-pulse {
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ─── 13b. Entrance choreography (design-skill pass) ────────────────────────
   Rows/cards never appear statically: as they enter the viewport they rise
   14px + fade over --dur-enter with a heavy expo curve, staggered ~35ms per
   sibling. Progressively enhanced — ADMIN_SCRIPT adds .hub-enter before the
   first paint and STRIPS it after the settle, so no-JS clients, screen
   readers, and post-entrance hover transforms (rows lift on hover) are all
   unaffected. transform + opacity only; prefers-reduced-motion kills it. */
.js .hub-enter {
  opacity: 0;
  transform: translateY(14px);
}
.js .hub-enter.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-enter) var(--ease-enter),
    transform var(--dur-enter) var(--ease-enter);
}

/* ─── 14. Wizard family (New-site wizard, publish windows, provenance) ────── */
.hub-wizhd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 2px 0 14px;
}
.hub-wizhd-step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-active);
  background: var(--brand-soft);
  border-radius: var(--pill);
  padding: 3px 10px;
  white-space: nowrap;
}

.hub-wizsteps { display: flex; flex-direction: column; gap: 2px; margin: 12px 0; }
.hub-discrete-progress { display:flex; align-items:center; gap:10px; margin:12px 0 8px; }
.hub-discrete-track { display:flex; flex:1; gap:3px; min-width:120px; }
.hub-discrete-track i { height:6px; flex:1; border-radius:99px; background:var(--line); }
.hub-discrete-track i.is-done { background:var(--success); }
.hub-discrete-track i.is-active { background:var(--brand); }
.hub-discrete-track i.is-failed { background:var(--danger); }
.hub-progress-summary { display:flex; flex-wrap:wrap; gap:8px 18px; margin:8px 0 12px; color:var(--tx2); font-size:12px; }
.hub-progress-summary b { color:var(--tx1); }
.hub-wizstep {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--tx3);
  font-size: 13px;
}
.hub-wizstep-no {
  flex: none;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--card);
  font-size: 11px;
  font-weight: 700;
  color: var(--tx3);
  margin-top: -1px;
}
.hub-wizstep.is-done { color: var(--tx2); }
.hub-wizstep.is-skipped { color: var(--tx3); }
.hub-wizstep.is-done .hub-wizstep-no {
  border-color: var(--go-tx);
  background: var(--go-bg);
  color: var(--go-tx);
}
.hub-wizstep.is-active {
  background: var(--brand-soft);
  color: var(--tx);
  font-weight: 600;
}
.hub-wizstep.is-active .hub-wizstep-no {
  border-color: var(--brand);
  color: var(--brand-active);
  background: var(--card);
}
.hub-wizstep.is-failed .hub-wizstep-no {
  border-color: var(--nogo-tx);
  background: var(--nogo-bg);
  color: var(--nogo-tx);
}
.hub-wizstep.is-failed { color: var(--nogo-tx); font-weight: 600; }
.hub-wizstep-main { min-width: 0; }
.hub-wizstep-note { display: block; font-size: 12px; color: var(--tx3); font-weight: 400; margin-top: 2px; }

/* radio-cards: bordered, active = brand border + #f5f8ff */
.hub-wizradio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 10px;
  margin: 12px 0;
}
.hub-wizradio label {
  display: block;
  cursor: pointer;
}
.hub-wizradio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hub-wizradio-card {
  display: block;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 14px;
  height: 100%;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.hub-wizradio-card:hover { border-color: var(--brand-medium); }
.hub-wizradio input:checked + .hub-wizradio-card {
  border-color: var(--brand);
  background: #f5f8ff;
  box-shadow: var(--sh-sm);
}
.hub-wizradio input:focus-visible + .hub-wizradio-card { box-shadow: var(--focus); }
.hub-wizradio-title { font-weight: 600; display: block; margin-bottom: 2px; }
.hub-wizradio-desc { font-size: 12px; color: var(--tx2); display: block; }

/* soft callouts: blue note / red error / amber warn */
.hub-wiznote,
.hub-wizerr,
.hub-wizwarn {
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 13px;
  margin: 12px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.hub-wiznote {
  background: var(--info-bg);
  color: var(--info-tx);
  border-left: 3px solid var(--brand);
}
.hub-wizerr {
  background: var(--nogo-bg);
  color: var(--nogo-tx);
  border-left: 3px solid var(--danger);
}
.hub-wizwarn {
  background: var(--maybe-bg);
  color: var(--maybe-tx);
  border-left: 3px solid var(--warning);
}
.hub-wiznote .hub-ic, .hub-wizerr .hub-ic, .hub-wizwarn .hub-ic {
  width: 15px; height: 15px;
  flex: none;
  margin-top: 1px;
}

/* dark code strip (DNS instructions, curl snippets, verification URLs) */
.hub-wizcurl {
  background: #111827;
  color: #e5e7eb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre;
  margin: 10px 0;
}
.hub-wizcurl b { color: var(--cyan); font-weight: 600; }

/* ─── 15. Bulk selection: floating pill + sticky dark bar ─────────────────── */
.hub-selpill {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  box-shadow: var(--sh-lg);
  padding: 8px 10px 8px 18px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.hub-selpill-count {
  font-variant-numeric: tabular-nums;
  color: var(--brand-active);
}

.hub-bulk {
  position: sticky;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #111827;
  color: var(--tx-inv);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 12px 18px;
  box-shadow: var(--sh-lg);
}
.hub-bulk .hub-cap { color: #9ca3af; }
.hub-bulk-sp { flex: 1 1 auto; }
.hub-bulk .hub-btn {
  border-color: rgba(255, 255, 255, .4);
  background: transparent;
  color: var(--tx-inv);
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}
.hub-bulk .hub-btn:hover { background: rgba(255, 255, 255, .14); color: var(--tx-inv); }
.hub-bulk .hub-btn.primary { background: var(--tx-inv); border-color: var(--tx-inv); color: var(--brand-deep); }
.hub-bulk .hub-btn.primary:hover { background: #f3f6ff; color: var(--brand-deep); }

/* ─── 16. Presets (brand palette presets, template packs) ─────────────────── */
.hub-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 10px;
}
.hub-preset {
  display: block;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.hub-preset:hover { border-color: var(--brand-medium); }
.hub-preset.is-on {
  border-color: var(--brand);
  background: #f5f8ff;
  box-shadow: var(--sh-sm);
}
.hub-preset-title { font-size: 13px; font-weight: 600; display: block; }
.hub-preset-desc { font-size: 12px; color: var(--tx2); display: block; margin-top: 2px; }

/* ─── 17. Empty, note, progress ───────────────────────────────────────────── */
.hub-empty {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 36px 24px;
  text-align: center;
  color: var(--tx2);
}
.hub-empty .hub-ic { width: 22px; height: 22px; color: var(--tx3); margin-bottom: 8px; }
.hub-empty-title { font-size: 15px; font-weight: 600; color: var(--tx); margin: 0 0 4px; }
.hub-empty p { font-size: 13px; margin: 0; }

.hub-note {
  background: var(--canvas);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--tx2);
  margin: 0 0 var(--gutter);
}

.hub-progress {
  background: var(--sunken);
  border-radius: var(--pill);
  height: 6px;
  overflow: hidden;
  min-width: 80px;
}
.hub-progress-bar {
  height: 100%;
  border-radius: var(--pill);
  background: var(--brand);
  transition: width var(--dur) var(--ease);
}
.hub-progress--go .hub-progress-bar { background: var(--success); }
.hub-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hub-progress-row .hub-progress { flex: 1 1 auto; }
.hub-progress-num {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tx3);
  white-space: nowrap;
}

/* ─── 18. Keys & scopes (MCP tokens, application keys — demo-match mirror) ── */
.hub-keyreveal {
  background: var(--go-bg);
  border: 1px solid #b6e6c5;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--go-tx);
  word-break: break-all;
}
.hub-kbadge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--tx2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ─── 19. Icons (Lucide inline SVG, 24 viewBox, stroke 2.2, currentColor) ─── */
.hub-ic {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  /* design-skill pass: ultra-light precise lines (2.2 read as stock-thick
     Lucide); 1.5 keeps the glyphs crisp at 12–18px render sizes */
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--tx2);
}
/* dense chrome renders at 15px (rail, mini buttons, pills) */
.hub-rail .hub-ic,
.hub-btn.mini .hub-ic,
.hub-chip .hub-ic { width: 15px; height: 15px; }

/* ─── 20. Login shell ─────────────────────────────────────────────────────── */
.hub-loginpage {
  background:
    radial-gradient(circle at 18% 12%, rgba(26, 106, 255, .11), transparent 34rem),
    radial-gradient(circle at 82% 88%, rgba(0, 0, 139, .08), transparent 30rem),
    var(--canvas);
}
.hub-loginwrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 72px) var(--gutter);
}
.hub-loginbox { width: min(440px, 100%); }
.hub-loginbrand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 4px 14px;
}
.hub-loginbrand .hub-brand-mark {
  color: var(--tx-inv);
  background: var(--grad);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 139, .72);
}
.hub-loginbrand .hub-brand-name { color: var(--tx); }
.hub-loginbrand-rule { width: 1px; height: 18px; margin: 0 2px; background: var(--border-strong); }
.hub-loginbrand-meta { font-size: 12px; color: var(--tx3); font-weight: 500; }
.hub-logincard {
  padding: clamp(24px, 6vw, 32px);
  border-color: rgba(199, 203, 209, .82);
  border-radius: 16px;
  box-shadow: var(--sh-lg), var(--hl-top);
}
.hub-loginform { margin: 0; }
.hub-loginstep { animation: hub-login-enter 260ms var(--ease-enter) both; }
@keyframes hub-login-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
.hub-logineyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--brand-active);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.hub-logineyebrow > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.hub-logincard h1 {
  font-size: 25px;
  line-height: 1.16;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.hub-loginlead {
  max-width: 38ch;
  margin: 10px 0 24px;
  color: var(--tx2);
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}
.hub-loginlead strong { color: var(--tx); font-weight: 650; overflow-wrap: anywhere; }
.hub-loginlabel { color: var(--tx); font-size: 13px; font-weight: 600; }
.hub-logininput {
  height: 46px;
  padding-inline: 14px;
  border-radius: 9px;
  font-size: 15px;
}
.hub-codeinput {
  height: 58px;
  padding: 0 10px 0 16px;
  border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .24em;
  text-align: center;
}
.hub-codeinput::placeholder { color: #b7bdc6; opacity: .7; }
.hub-codehelp { margin: -4px 0 18px; color: var(--tx3); font-size: 12px; line-height: 1.45; }
.hub-loginprimary {
  width: 100%;
  height: 46px;
  margin-top: 4px;
  border-radius: 9px;
}
.hub-loginprimary[aria-busy="true"] { cursor: progress; }
.hub-loginstatus {
  margin: 14px 0 0;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.45;
}
.hub-loginstatus.is-progress { color: var(--info-tx); background: var(--info-bg); border-color: #bfdbfe; }
.hub-loginstatus.is-success { color: var(--go-tx); background: var(--go-bg); border-color: #bbf7d0; }
.hub-loginstatus.is-error { color: var(--nogo-tx); background: var(--nogo-bg); border-color: #fecaca; }
.hub-mailsent {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 13px;
  color: var(--go-tx);
  background: var(--go-bg);
  border: 1px solid #bbf7d0;
  font-size: 19px;
  font-weight: 700;
  box-shadow: var(--hl-top);
}
.hub-loginactions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 32px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.hub-loginlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 2px;
  border: 0;
  background: transparent;
  color: var(--brand-active);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.hub-loginlink:hover { color: var(--brand-hover); text-decoration: underline; }
.hub-loginlink:disabled { color: var(--tx3); cursor: progress; text-decoration: none; }
.hub-loginlink .hub-spin { width: 11px; height: 11px; }
.hub-loginaction-separator { color: var(--border-strong); }
.hub-logintrust {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 22px;
  padding-top: 17px;
  border-top: 1px solid var(--border);
  color: var(--tx3);
  font-size: 11px;
  line-height: 1.45;
}
.hub-logintrust-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: -1px;
  border-radius: 50%;
  color: var(--brand-active);
  background: var(--brand-soft);
  font-size: 10px;
  font-weight: 800;
}
.hub-loginfooter {
  margin: 15px 4px 0;
  color: var(--tx3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .045em;
  text-align: center;
  text-transform: uppercase;
}
@media (max-width: 479.98px) {
  .hub-loginbrand-meta,
  .hub-loginbrand-rule { display: none; }
  .hub-logincard { padding-inline: 22px; }
}

/* Audit evidence contains long identifiers/selectors and must reflow on phones. */
.hub-accessibility { min-width: 0; overflow-wrap: anywhere; }
.hub-accessibility .hub-panel-head { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.hub-accessibility .hub-panel-head > div { flex: 1 1 220px; min-width: 0; }
.hub-accessibility .hub-row { display: block; min-width: 0; }
.hub-accessibility .hub-rowact { display: block; min-width: 0; max-width: 100%; text-align: left; white-space: normal; }
.hub-accessibility .hub-rowact ul { padding-inline-start: 20px; }
.hub-accessibility .hub-rowact li + li { margin-top: 14px; }
.hub-accessibility .hub-rowact .hub-sub,
.hub-accessibility .hub-code { white-space: normal; overflow-wrap: anywhere; }

/* ─── 21. Scrim + responsive (<900px: rail off-canvas + scrim) ───────────── */
.hub-scrim {
  position: fixed;
  inset: 0;
  z-index: 34;
  background: rgba(15, 23, 42, .48);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

@media (max-width: 899.98px) {
  .hub-burger { display: inline-flex; }

  .hub-rail {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    z-index: 35;
    width: 268px;
    max-height: none;
    transform: translateX(-102%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--sh-lg);
  }
  .hub-navtoggle:checked ~ .hub-body .hub-rail { transform: translateX(0); }
  .hub-navtoggle:checked ~ .hub-scrim,
  .hub-navtoggle:checked ~ .hub-body .hub-scrim { opacity: 1; pointer-events: auto; }

  /* U7 fix: on a site page the topbar below wraps to two rows (site switcher
     + preview button) — this rail's fixed 56px top offset only clears a
     single-row topbar (true on org-only screens like Fleet), so without this
     the rail's own first item (now Overview, this item's rail entry) would
     render mostly hidden underneath the wrapped header. body carries
     .hub--site only when a site is selected, so Fleet's single-row topbar
     keeps the tight default. */
  .hub--site .hub-rail { padding-top: 52px; }

  /* top bar wraps (doc 10 §3); icon-only admin links carry sr-only labels */
  .hub-topbar { flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px var(--gutter); row-gap: 8px; }
  .hub-brand-name { display: none; }
  /* U5: "CMS HUB" is purely decorative once the brand name text is already
     hidden right above — dropping it is a free row of headroom on narrow
     screens (U10's own top-bar items — Preview site, the who pill, New
     site — are untouched here). */
  .hub-btag { display: none; }
  .hub-who .hub-who-mail { display: none; }
  .hub-who { width: 40px; justify-content: center; padding: 0; border-radius: var(--radius-md); }
  .hub-content { padding: 16px var(--gutter) 48px; }

  /* U5: Open site / Publications / History move into the header's own ⋯
     overflow below 900px — the plain pills hide, the <details> shows. */
  .hub-ph:has(.hub-ph-overflow) > .hub-ph-act { display: none; }
  .hub-ph-overflow { display: inline-block; }
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
}

/* ─── 22. Motion preferences (doc 10 §5: only 120–200ms, reducible) ──────── */
@media (prefers-reduced-motion: reduce) {
  .hub *, .hub *::before, .hub *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hub-row:hover, .hub-btn:active { transform: none; }
  /* entrances resolve instantly — nothing is ever hidden from reduced-motion
     users (the JS observer also refuses to arm under this preference) */
  .js .hub-enter { opacity: 1; transform: none; }
}

/* ─── 23. Editor surfaces (Posts/Media/Demos/Translations tabs) ─────────────
    Media grid + alt indicators (doc 10 §4 ".rows auto-fill grid"), demo
    catalogue cards, the coverage board's count cells, chip filter counts,
    locale pill pairs, and the minimal form controls the demo modal needs. */

/* filter chip count (tabular, inherits active state) */
.hub-chip-count {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--sunken);
  color: var(--tx2);
  border-radius: var(--pill);
  padding: 1px 7px;
}
.hub-chip.is-active .hub-chip-count { background: rgba(255,255,255,.25); color: var(--tx-inv); }

/* U3: Posts/Pages rows carry one merged locale+state pill each (.hub-pill--locale
   above) directly inside .hub-localeact — no more per-locale wrapper div. */
.hub-localeact { flex-wrap: wrap; row-gap: 8px; align-items: center; }

/* — media grid — */
.hub-media-drop {
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 100%;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--sunken);
  color: var(--tx2);
  padding: 22px 16px;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hub-media-drop > .hub-ic { width: 24px; height: 24px; color: var(--brand); }
.hub-media-drop strong { color: var(--tx); font-size: 15px; }
.hub-media-drop:hover,
.hub-media-drop:focus-visible,
.hub-media-drop.is-over { border-color: var(--brand); background: var(--brand-subtle); color: var(--brand-deep); outline: none; }
.hub-media-rights { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; gap: 12px 18px; align-items: end; margin-top: 14px; }
.hub-media-rights .hub-field { margin: 0; }
.hub-checkline { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; color: var(--tx2); font-size: 12px; cursor: pointer; }
.hub-checkline input { flex: none; }
.hub-media-upload-list { display: grid; gap: 10px; margin-top: 14px; }
.hub-media-upload-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 10px;
}
.hub-media-upload-preview { width: 84px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; background: var(--sunken); }
.hub-media-upload-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hub-media-upload-main { display: grid; gap: 7px; min-width: 0; }
.hub-media-upload-name { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.hub-media-upload-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-media-upload-alts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 7px; }
.hub-media-upload-alt { display: grid; gap: 3px; color: var(--tx3); font-size: 11px; }
.hub-media-upload-alt .hub-input { height: 32px; padding: 5px 8px; font-size: 12px; }
.hub-media-upload-progress { height: 5px; overflow: hidden; border-radius: var(--pill); background: var(--sunken); }
.hub-media-upload-progress > span { display: block; width: 0; height: 100%; background: var(--brand); transition: width 120ms linear; }
.hub-media-upload-actions { display: flex; flex-direction: column; gap: 6px; }
.hub-media-upload-ft { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
@media (max-width: 860px) {
  .hub-media-rights { grid-template-columns: 1fr; align-items: start; }
  .hub-media-upload-row { grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
  .hub-media-upload-preview { width: 64px; height: 64px; }
  .hub-media-upload-actions { grid-column: 1 / -1; flex-direction: row; }
  .hub-media-upload-actions .hub-btn { flex: 1 1 auto; justify-content: center; }
  .hub-media-upload-ft { align-items: stretch; flex-direction: column; }
  .hub-media-upload-ft .hub-btn { justify-content: center; width: 100%; }
}
.hub-mediagrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--gutter);
  align-items: start;
}
.hub-mediacard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.hub-mediathumb {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  background:
    var(--sunken)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='1' y='1' rx='1'/%3E%3Crect width='7' height='7' x='14' y='1' rx='1'/%3E%3Crect width='7' height='7' x='1' y='14' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3C/svg%3E")
    center / 24px no-repeat;
  border-bottom: 1px solid var(--border);
}
.hub-mediacard-bd { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.hub-mediacard-hd { display: flex; align-items: center; gap: 8px; }
.hub-mediacard-hd .hub-pill { margin-left: auto; }
/* U4: the card's title is its description (alt text) — the hash moves to the
   quiet second line. min-width:0 lets it ellipsis instead of pushing the
   approval pill (or the card) wider. */
.hub-mediacard-title {
  min-width: 0;
  flex: 1 1 auto;
  font-weight: 600;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-mediacard-title.is-missing { font-weight: 400; font-style: italic; color: var(--tx2); }
.hub-mediacard-act { display: flex; gap: 6px; margin-top: 2px; }

/* per-locale alt indicator: filled dot = described, ring = missing */
.hub-altrow { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-alt { font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.hub-alt.is-ok { color: var(--go-tx); }
.hub-alt.is-miss { color: var(--tx3); }
.hub-media-altedit { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.hub-media-altform { display: flex; align-items: end; gap: 6px; min-width: 0; }
.hub-media-altlabel { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; color: var(--tx3); font-size: 11px; }
.hub-media-altlabel .hub-input { min-width: 0; width: 100%; height: 30px; padding: 4px 8px; font-size: 12px; }
.hub-media-altform .hub-btn.mini { flex: 0 0 auto; height: 30px; padding-inline: 9px; }

/* — demo catalogue cards — */
.hub-demo-sync-panel { padding: 14px 16px; }
.hub-demo-sync-panel .hub-panel-head { align-items: center; margin-bottom: 8px; }
.hub-demo-sync-panel .hub-panel-head > div:first-child { min-width: 0; }
.hub-demo-sync { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.hub-demo-sync .hub-sub { max-width: 300px; }
@media (max-width: 720px) {
  .hub-demo-sync-panel .hub-panel-head { align-items: stretch; flex-direction: column; }
  .hub-demo-sync { align-items: flex-start; flex-direction: column; }
}
.hub-demo-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(560px, 100%);
  margin: 0 0 16px;
}
.hub-demo-search .hub-input { min-width: 0; flex: 1 1 auto; }
.hub-demo-search .hub-btn { flex: 0 0 auto; }
.hub-demogrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--gutter);
  align-items: stretch;
}
.hub-democard { display: flex; flex-direction: column; gap: 2px; }
.hub-democard h3 { font-size: 14px; }
.hub-demometa { margin-top: auto; padding-top: 8px; }
.hub-demometa .hub-link { font-size: 13px; }
.hub-demometa .hub-ic { color: var(--tx3); }
.hub-demometa .hub-sub { display: inline-flex; align-items: center; gap: 4px; }
.hub-demometa .hub-sub .hub-ic { width: 14px; height: 14px; }
.hub-demoact { margin-top: 10px; }

/* — coverage board — */
.hub-covoverall { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.hub-covlegend { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hub-covcell { display: flex; flex-direction: column; gap: 6px; min-width: 150px; padding-top: 2px; }
.hub-covnums { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hub-covnum {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hub-covnum.is-go { color: var(--go-tx); }
.hub-covnum.is-maybe { color: var(--maybe-tx); }
.hub-covnum.is-info { color: var(--info-tx); }
.hub-covnum.is-nogo { color: var(--nogo-tx); }
.hub-covcell .hub-progress { max-width: 180px; }

/* Translation tab: keep the editor compact while making the editorial states
   explicit. These rules are intentionally prefixed so the shared admin
   surfaces remain unchanged. */
.hub-translation-editor { border-color: var(--brand-medium); }
.hub-translation-form { display: grid; gap: 14px; max-width: 780px; }
.hub-translation-selects,
.hub-translation-states { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hub-translation-selects label,
.hub-translation-edit { display: grid; gap: 6px; min-width: 0; }
.hub-translation-selects .hub-input { width: 100%; }
.hub-translation-states { margin-top: 2px; }
.hub-translation-state { display: grid; gap: 6px; min-width: 0; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--sunken); }
.hub-translation-state strong { min-height: 20px; color: var(--tx); font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.hub-translation-edit textarea { min-height: 84px; resize: vertical; }
.hub-translation-status { margin: 0; }
.hub-translation-actions { display: flex; justify-content: flex-end; }
.hub-translation-diagnostics { color: var(--tx2); font-size: 12px; }
.hub-translation-diagnostics summary { width: fit-content; color: var(--tx3); cursor: pointer; font-weight: 600; }
.hub-translation-diagnostics p { max-width: 68ch; margin: 8px 0 0; line-height: 1.5; }
.hub-translation-readiness { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 13px 15px; border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius-md); background: var(--card); }
.hub-translation-readiness b { color: var(--tx); font-size: 14px; }
.hub-translation-readiness p { margin: 3px 0 0; color: var(--tx2); font-size: 13px; }
.hub-translation-readiness .hub-translation-diagnostics { flex: 0 1 320px; }
.hub-translation-note { margin-top: 0; }
@media (max-width: 600px) {
  .hub-translation-selects,
  .hub-translation-states { grid-template-columns: 1fr; }
  .hub-translation-readiness { align-items: flex-start; flex-direction: column; }
  .hub-translation-readiness .hub-translation-diagnostics { flex-basis: auto; }
  .hub-translation-actions { justify-content: stretch; }
  .hub-translation-actions .hub-btn { width: 100%; justify-content: center; }
}

/* — minimal form controls (demo placement modal; doc 10 `.modal` family) ── */
.hub-field { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; }
.hub-input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--tx);
  font: inherit;
  font-size: 14px;
}
textarea.hub-input { height: auto; padding: 10px 12px; }
.hub-input:hover { border-color: var(--brand-medium); }
.hub-input:focus-visible { outline: none; box-shadow: var(--focus); }
.hub-modal-sub { font-size: 13px; color: var(--tx2); font-weight: 500; }

/* error flash variant (same dark toast, red icon — doc 10 §4 `.flash`) */
.hub-flash.is-err .hub-ic { color: #f87171; }

/* ─── 24. Inline visuals + editor tabs (Pages/Menus/Brand/Settings/Kit) ─────
    Row thumbs, site-card lockups, media hover overlays, demo play tiles,
    menu rows, brand swatches/lockups, setup checklist, sticky table heads. */

/* — row thumbnails (Posts rows; 48px, media or designed doc tile) — */
.hub-row--thumb { align-items: center; }
.hub-rowthumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--sunken);
  border: 1px solid var(--border);
  display: block;
}
.hub-rowthumb.is-doc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tx3);
  background:
    var(--sunken)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E")
    center / 22px no-repeat;
}

/* — site-card lockup thumb (44px; letter mark fallback) — */
.hub-cardthumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 4px;
  display: block;
}
.hub-cardthumb.is-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-deep);
  background: var(--brand-subtle);
  border-color: var(--brand-medium);
  padding: 0;
}

/* — media card hover overlay (decision buttons; always revealed on touch) —
   the two mini buttons share the overlay width so neither clips at the
   220px card minimum at 1280/1440 viewports */
.hub-mediathumbwrap { position: relative; }
.hub-mediathumbov {
  position: absolute;
  inset: auto 8px 8px 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.hub-mediathumbov .hub-btn {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--card);
  box-shadow: var(--sh-md);
}
.hub-mediathumbwrap:hover .hub-mediathumbov,
.hub-mediathumbov:focus-within .hub-mediathumbov {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (hover: none) {
  .hub-mediathumbov { opacity: 1; transform: none; pointer-events: auto; }
}

/* — demo poster tile (designed play badge — the catalogue carries no art) ── */
.hub-demotile {
  position: relative;
  height: 108px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(135deg, #00008b 0%, #1a6aff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hub-demotile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 60px at 50% 62%, rgba(255,255,255,.22), transparent 70%);
}
.hub-demotile-play {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: var(--pill);
  background: var(--card);
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-md);
}
.hub-demotile-play .hub-ic { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-left: 2px; }
.hub-demotile-cap {
  position: absolute;
  z-index: 1;
  left: 10px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tx-inv);
  background: rgba(15, 23, 42, .45);
  border-radius: var(--pill);
  padding: 2px 8px;
}
.hub-democard { padding: 0; overflow: hidden; }
.hub-democard-bd { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 420px) {
  .hub-demo-search { flex-wrap: wrap; }
  .hub-demo-search .hub-input { flex-basis: 100%; }
}

/* — menu rows (order chip keeps the configured order visible) — */
.hub-menuord {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--pill);
  background: var(--sunken);
  color: var(--tx2);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hub-label--link { cursor: pointer; }
.hub-label--link .hub-ic { width: 12px; height: 12px; vertical-align: -1px; }
.hub-label--miss { color: var(--tx3); border-style: dashed; }

/* — users roster site links — */
.hub-userlinks { display: flex; flex-wrap: wrap; gap: 6px; max-width: 340px; }
.hub-users [data-user-row][hidden] { display: none; }
.hub-users [data-user-row] > .hub-rowact:has(> .hub-user-details[open]) { flex: 1 1 100%; min-width: 0; align-items: flex-start; }
.hub-user-details[open] { flex: 1 1 100%; min-width: 0; }
.hub-user-details[open] > summary { margin-bottom: 12px; }
.hub-user-details .hub-note, .hub-user-details .hub-sub { overflow-wrap: anywhere; }
.hub-user-details form.hub-rowact { flex: 1 1 280px; min-width: 0; }
.hub-user-details form .hub-input { flex: 1 1 180px; min-width: 0; max-width: 100%; }
@media (max-width: 640px) {
  .hub-users .hub-rowact .hub-btn.mini span:not(.hub-sr) { display: inline; }
  .hub-users .hub-rowact .hub-btn.mini { padding: 0 10px; gap: 6px; }
  .hub-user-details .hub-rowtitle { flex-basis: 100%; }
}

/* — brand swatches + lockup grid — */
.hub-swatch {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  display: inline-block;
  background: var(--sunken);
}
.hub-swatch--token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tx3);
}
.hub-swatch--token .hub-ic { width: 14px; height: 14px; }
.hub-brandgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--gutter);
  align-items: start;
}
.hub-brandfig { min-width: 0; overflow: hidden; padding: 10px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.hub-lockup-swatch { min-width: 0; width: 100%; overflow: hidden; padding: 6px; box-sizing: border-box; }
.hub-brand-value-wrap { min-width: 0; max-width: 100%; flex: 1 1 320px; justify-content: flex-end; }
.hub-brand-value { display: block; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }
@media (max-width: 560px) {
  /* Brand status labels can contain the full pending-change state. Keep the
     header inside the card rather than allowing that label to widen the page. */
  .hub-brand-form .hub-ansec-hd .hub-ansec-hd-sp { display: none; }
  .hub-brand-form .hub-ansec-hd > .hub-label {
    flex: 1 1 100%;
    max-width: 100%;
    height: auto;
    min-height: 20px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
.hub-brandimg {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  width: auto;
  height: 120px;
  object-fit: contain;
  object-position: center;
  background: var(--sunken);
  border-radius: var(--radius-md);
}
@media (max-width: 560px) {
  .hub-brandgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hub-brandfig { padding: 8px 6px; }
  .hub-brandimg { height: 88px; }
}

/* — settings setup checklist — */
.hub-checklist { display: flex; flex-direction: column; gap: 8px; }
.hub-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}
.hub-check.is-ok { border-left: 3px solid var(--success); }
.hub-check.is-todo { border-left: 3px solid var(--warning); }
.hub-check .hub-ic { width: 15px; height: 15px; margin-top: 2px; color: var(--tx3); }
.hub-check.is-ok .hub-ic { color: var(--success); }
.hub-check.is-todo .hub-ic { color: var(--warning); }
.hub-check-label { display: block; font-size: 13px; font-weight: 600; color: var(--tx); }
.hub-check > div { min-width: 0; flex: 1 1 auto; }
.hub-check-label, .hub-check .hub-sub { overflow-wrap: anywhere; white-space: normal; }

/* — sticky table headers on tall tables (doc 10 §5) — */
.hub-tblwrap { max-height: min(60vh, 560px); overflow: auto; }
.hub-tblwrap table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card);
  box-shadow: inset 0 -1px 0 var(--border);
}

/* — page rows keep the visibility pill on its own line at narrow widths ──
   U8: no flex-grow (was 1 1 320px) — a fixed 320px minimum plus grow let this
   column out-compete .hub-rowtitle for width it didn't need, squeezing post/
   page titles to ~8 visible characters. It still wraps its own pills (the
   base .hub-localeact rule) and drops to its own line under 900px, but it no
   longer takes width away from the title — the row's widest, most-read column. */
.hub-row .hub-rowact.hub-localeact { flex: 0 1 220px; }

/* ─── 25. Comprehension layer (doc 07 §1 — a first-time editor is untrained) ─
    Screen intros ("what am I looking at" under the H1), the locale legend
    (EN English · FR Français), locale chips with hover names, and .hub-tip —
    a dependency-free CSS tooltip (native title + aria-label carry the same
    text for keyboard and screen-reader users; ::after only polishes hover). */

.hub-intro {
  font-size: 13px;
  color: var(--tx2);
  margin: -8px 0 16px;
}

/* U5: intro line + its on-demand "?" popover — the near-duplicate second
   explainer paragraph Pages/Posts used to always print now lives here,
   collapsed until asked for (progressive-disclosure, mobile-first). */
.hub-introrow { position: relative; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: -8px 0 16px; }
.hub-introrow .hub-intro { margin: 0; }
.hub-explainbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--sunken); color: var(--tx2);
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 0; cursor: pointer;
}
.hub-explainbtn:hover { color: var(--tx); border-color: var(--tx3); }
.hub-explaindot {
  position: absolute; top: -2px; right: -2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); border: 1.5px solid var(--card);
}
.hub-explainpop {
  position: absolute; left: 0; top: 100%; margin-top: 6px; z-index: 20;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--sh-md); padding: 12px 14px; width: min(320px, calc(100vw - 2 * var(--gutter)));
}
.hub-explainpop[hidden] { display: none; }
.hub-explainpop p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--tx2); }

/* U5: Pages' locale legend + "+ New page" share one row instead of stacking —
   folds what used to be its own stratum into the existing comprehension line
   (desktop then keeps to ≤2 strata between the tab strip and the content). */
.hub-pageshead { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.hub-pageshead .hub-loclegend { margin: 0; }
/* Report 2 (UX audit — publishing was invisible off the Overview screen):
   groups the quiet "N approved · Publish all approved" affordance with
   whatever primary action the header already carries (Pages' "+ New page";
   Posts has none) so .hub-pageshead's space-between still sees two children. */
.hub-pageshead-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* locale legend — one quiet line at the top of Posts/Pages/Translations */
.hub-loclegend {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--tx3);
  margin: 0 0 14px;
}
.hub-loclegend-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--tx2);
  cursor: help;
  white-space: nowrap;
}
.hub-loclegend-item b {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--brand-active);
  background: var(--brand-soft);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  align-self: center;
}
.hub-loclegend-sep { color: var(--border-strong); }
.hub-loclegend-note { color: var(--tx3); }

/* locale chip on content rows (EN) — dotted underline hints the hover name */
.hub-locale {
  cursor: help;
  text-decoration: underline dotted var(--border-strong);
  text-underline-offset: 3px;
}

/* CSS-only tooltip enhancement: pair with title="" + aria-label="" of the
   same text. Shown on hover AND keyboard focus (focus-visible), 120ms fade,
   never on touch (the native title/aria-label still carries the fact). */
.hub-tip { position: relative; }
.hub-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: #111827;
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  box-shadow: var(--sh-md);
  white-space: normal;
  width: max-content;
  max-width: 240px;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  transition: opacity var(--dur-fast) var(--ease);
}
.hub-tip:hover::after,
.hub-tip:focus-visible::after,
.hub-tip:focus-within::after { opacity: 1; }
@media (hover: none) {
  .hub-tip::after { display: none; }   /* touch: title + aria-label only */
}

/* — one primary per screen, not per row (U1): screen-level CTAs ("+ New page",
   "Add a language") and a panel's own visible state hint (Approve/Publish,
   OUTSIDE the ⋯ menu — post-detail.ts's stateVisible) share this same solid
   look; the mini primary stays 36px and pill-shaped. Inside the ⋯ dropdown
   itself the same emphasis renders as .hub-rowmore-emph instead (U12,
   further down) — a filled pill among plain menu rows read as a
   button-in-menu hybrid. — */
.hub-btn.mini.primary {
  height: 36px;
  padding: 0 16px;
  background: var(--brand);
  border-color: var(--brand);
  color: var(--tx-inv);
}
.hub-btn.mini.primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--tx-inv);
}

/* — modal form rhythm (Demos placement, invite): the explainer sits closer
   to its fields than the footer, so the eye groups form → note → actions — */
.hub-modal form > .hub-sub { margin: 2px 0 0; }
.hub-modal-ft { padding-top: 4px; }

/* ── responsive row actions: text collapses on narrow screens ─────────────── */
@media (max-width: 1199.98px) {
  .hub-rowact .hub-btn.mini span:not(.hub-sr) { display: none; }
  .hub-rowact .hub-btn.mini { padding: 0 8px; gap: 0; }
  .hub-rowact .hub-btn.mini .hub-ic { width: 16px; height: 16px; }
}
@media (max-width: 899.98px) {
  .hub-row { padding: 10px 12px; }
  .hub-rowact.hub-localeact { flex: 1 1 100%; }
}
/* the ⋯ overflow pattern for dense action rows */
.hub-rowmore { position: relative; }
.hub-rowmore-menu { position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 20; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--sh-md); padding: 6px; min-width: 230px; max-height: 60vh; overflow: auto; display: none; }
.hub-rowmore-menu[hidden] { display: none; }
.hub-rowmore.is-open .hub-rowmore-menu { display: block; }
.hub-rowmore-menu button, .hub-rowmore-menu a { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 10px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--tx); cursor: pointer; border-radius: var(--radius-sm); text-decoration: none; }
.hub-rowmore-menu button:hover, .hub-rowmore-menu a:hover { background: var(--brand-subtle); }
/* menu buttons keep their labels at every width (unlike row buttons) */
.hub-rowmore-menu .hub-btn.mini span:not(.hub-sr) { display: inline; }
/* locale section headers + dividers inside the menu */
.hub-rowmore-sec { display: flex; align-items: center; gap: 6px; padding: 6px 10px 2px; }
.hub-rowmore-hr { height: 1px; background: var(--border); margin: 4px 6px; }

/* — U12: uniform quiet menu items — Approve/Submit changes/Submit update used
   to inherit the standalone screen button's solid `.primary` pill (right
   outside the menu — U1's one-primary-per-screen rule); inside the ⋯
   dropdown that read as a button-in-menu hybrid among otherwise-plain rows.
   Emphasis here is weight + a brand-tinted (leading) icon only — `.hub-ic`
   uses currentColor, so tinting the row also tints its icon. Destructive
   items (Request changes, Retire) already sort last in every state-machine
   array; they lose their outlined-button box here too, so ALL rows share one
   quiet shape and only color marks the dangerous one. — */
.hub-rowmore-menu .hub-btn.mini.hub-rowmore-emph {
  font-weight: 700;
  color: var(--brand);
}
.hub-rowmore-menu .hub-btn.mini.hub-rowmore-emph:hover {
  background: var(--brand-subtle);
  color: var(--brand);
}
.hub-rowmore-menu .hub-btn.mini.danger,
.hub-rowmore-menu .hub-btn.danger {
  background: none;
  border-color: transparent;
  color: var(--danger);
}
.hub-rowmore-menu .hub-btn.mini.danger:hover,
.hub-rowmore-menu .hub-btn.danger:hover {
  background: var(--nogo-bg);
  border-color: transparent;
  color: var(--nogo-tx);
}
/* a disabled ghost's inline reason (mirrors post-detail.ts's restoreOffReason
   pattern, U10) — indented to sit under the item's text, not its icon */
.hub-rowmore-menu .hub-rowmore-hint {
  display: block;
  padding: 0 10px 6px 32px;
  margin-top: -4px;
  font-size: 12px;
}
/* mobile: the dropdown opens near-full-width from the row */
@media (max-width: 899.98px) {
  .hub-rowmore-menu { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; }
}

/* ── post reader: pickable hero + approved-media picker (6.3) ──────────────── */
.hub-post-hero.is-pickable { cursor: pointer; position: relative; }
.hub-post-hero.is-pickable:hover, .hub-post-hero.is-pickable:focus-visible { outline: 2px dashed var(--brand, #1a6aff); outline-offset: 3px; }
.hub-post-hero.is-pickable.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.hub-hero-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-height: 46vh; overflow: auto; }
.hub-hero-picker-cell { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; font: inherit; text-align: center; }
.hub-hero-picker-cell:hover { border-color: var(--brand); }
.hub-hero-picker-cell:disabled { cursor: not-allowed; opacity: .72; background: var(--sunken); }
.hub-hero-picker-cell img { width: 100%; height: 84px; object-fit: cover; border-radius: 4px; background: var(--sunken); }
.hub-hero-picker-cell .hub-sub { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── new-site setup: full-page progressive form (kept out of build history) ── */
.hub-setup-shell { max-width: 980px; margin: 0 auto; }
.hub-setup-intro { max-width: 690px; padding: 14px 0 22px; }
.hub-setup-intro h2 { margin: 8px 0 8px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.025em; text-wrap: balance; }
.hub-setup-intro p, .hub-setup-lede { max-width: 65ch; color: var(--tx2); line-height: 1.55; margin: 0; }
.hub-kicker { color: var(--brand-active); font-size: 11px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.hub-setup-progress { display: grid; grid-template-columns: repeat(7, minmax(76px, 1fr)); gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; }
.hub-setup-stepmark { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 8px; color: var(--tx3); border-top: 2px solid var(--border); font-size: 11px; }
.hub-setup-stepmark span { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--border-strong); border-radius: 50%; font-size: 11px; font-weight: 700; }
.hub-setup-stepmark b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hub-setup-stepmark.is-current { color: var(--brand-active); border-color: var(--brand); }
.hub-setup-stepmark.is-current span { color: #fff; border-color: var(--brand); background: var(--brand); }
.hub-setup-stepmark.is-done { color: var(--tx2); border-color: var(--go-tx); }
.hub-setup-form { max-width: 720px; padding: 26px 28px 24px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh-md), var(--hl-top); }
.hub-setup-step h2 { margin: 8px 0 8px; font-size: clamp(21px, 2.4vw, 28px); letter-spacing: -.02em; }
.hub-setup-step .hub-setup-lede { margin-bottom: 24px; }
.hub-setup-form .hub-field { margin: 0 0 18px; }
.hub-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; }
.hub-label em { color: var(--tx3); font-size: 11px; font-style: normal; font-weight: 550; }
.hub-setup-form .hub-input { margin-top: 6px; min-height: 42px; }
.hub-input-prefix { display: flex; align-items: stretch; margin-top: 6px; }
.hub-input-prefix .hub-input { flex: 1 1 auto; margin-top: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.hub-input-suffix { display: flex; align-items: center; padding: 0 12px; color: var(--tx2); background: var(--surface-2); border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; white-space: nowrap; }
#hub-domain-label-status[data-state="available"] { color: var(--go-tx); }
#hub-domain-label-status[data-state="conflict"], #hub-domain-label-status[data-state="unavailable"] { color: var(--danger-tx, #b42318); }
.hub-locale-select { min-height: 178px !important; padding: 5px !important; }
.hub-locale-select option { padding: 7px 9px; border-radius: 4px; }
.hub-locale-select option:checked { color: var(--brand-active); background: var(--brand-soft); font-weight: 700; }
.hub-multiselect { position: relative; margin-top: 6px; }
.hub-multiselect > summary { display: flex; align-items: center; justify-content: space-between; min-height: 42px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--tx); cursor: pointer; list-style: none; }
.hub-multiselect > summary::-webkit-details-marker, .hub-multiselect > summary::marker { display: none; content: ""; }
.hub-multiselect > summary:hover { border-color: var(--brand-medium); }
.hub-multiselect[open] > summary { border-color: var(--brand); box-shadow: var(--focus); }
.hub-multiselect-menu { position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 4px); display: grid; gap: 2px; max-height: 250px; overflow-y: auto; padding: 7px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); box-shadow: var(--sh-md); }
.hub-multiselect-menu label { display: flex; align-items: center; gap: 9px; padding: 9px 8px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.hub-multiselect-menu label:hover { background: var(--brand-subtle); }
.hub-multiselect-menu input { width: 16px; height: 16px; accent-color: var(--brand); }
.hub-multiselect-menu small { color: var(--tx3); }
.hub-address-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hub-address-preview, .hub-zone-status { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--sunken); }
.hub-address-preview strong { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; }
.hub-wizradio.hub-starter-cards { grid-template-columns: 1fr; margin: 12px 0 22px; }
.hub-starter-cards label { min-height: 0; }
.hub-starter-cards small { display: block; margin-top: 5px; color: var(--tx2); font-size: 12px; font-weight: 450; line-height: 1.45; }
.hub-palette-preview { display: grid; grid-template-columns: repeat(3, minmax(70px, 1fr)); gap: 8px; margin-top: 10px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--sunken); }
.hub-palette-chip { display: flex; align-items: end; min-height: 42px; padding: 6px; border-radius: 5px; box-sizing: border-box; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.hub-palette-chip span { color: #fff; background: rgba(0,0,0,.72); padding: 3px 4px; border-radius: 3px; font-size: 10px; font-weight: 650; line-height: 1; }
.hub-review { display: grid; gap: 0; border-top: 1px solid var(--border); }
.hub-review > div { display: grid; grid-template-columns: minmax(120px, .4fr) minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.hub-review span { color: var(--tx2); font-size: 12px; }
.hub-review strong { overflow-wrap: anywhere; font-size: 13px; }
.hub-setup-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 24px; }
.hub-setup-actions a { margin-right: auto; }
.hub-job-focus { max-width: 860px; margin: 0 auto; }
.hub-job-focus > .hub-ansec { margin: 18px 0; }
@media (max-width: 720px) {
  .hub-setup-progress { grid-template-columns: repeat(7, 1fr); overflow-x: auto; }
  .hub-setup-stepmark b { display: none; }
  .hub-setup-form { padding: 20px 16px; }
  .hub-address-choice { grid-template-columns: 1fr; gap: 0; }
}

/* legacy wizard field rhythm used by the other wizard-family surfaces */
#hub-wizard-form fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px 14px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
#hub-wizard-form legend { padding: 0 6px; font-weight: 700; }
.hub-wizard-locales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hub-wizard-locales .hub-field { min-width: 0; align-items: stretch; gap: 6px; }
@media (max-width: 720px) {
  .hub-wizard-locales { grid-template-columns: 1fr; }
}

/* ── notifications inbox + delivery preferences ─────────────────────────── */
.hub-panel { margin-top: 18px; padding: 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sh-sm), var(--hl-top); }
.hub-notif-table { overflow-x: auto; }
.hub-notif-head, .hub-notif-row { display: grid; grid-template-columns: minmax(145px, 1fr) minmax(145px, 1fr) minmax(130px, 1fr) minmax(280px, 2.3fr) minmax(145px, 1fr) minmax(155px, 1fr); gap: 14px; align-items: center; min-width: 980px; }
.hub-notif-head { padding: 0 14px 9px; color: var(--tx2); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hub-notif-row { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.hub-notif-row.is-unread { border-left: 3px solid var(--brand); background: color-mix(in srgb, var(--brand-subtle) 42%, var(--card)); }
.hub-notif-cell { min-width: 0; color: var(--tx2); font-size: 13px; }
.hub-notif-cell p { margin: 0; color: var(--tx); line-height: 1.45; }
.hub-notif-cell a { color: var(--brand); font-size: 12px; font-weight: 700; text-decoration: none; }
.hub-notif-cell a:hover { text-decoration: underline; }
.hub-notif-cell .hub-ic { width: 13px; height: 13px; vertical-align: -2px; }
.hub-mobile-label { display: none; }
.hub-notif-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hub-notif-panel { margin-top: 18px; padding: 20px; }
.hub-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.hub-panel-head h2 { margin: 0; font-size: 18px; }
.hub-pref-master, .hub-pref-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.hub-pref-master { padding-top: 4px; }
.hub-pref-master > div, .hub-pref-row > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.hub-pref-controls { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.hub-check { display: inline-flex; align-items: center; gap: 7px; color: var(--tx2); font-size: 13px; white-space: nowrap; cursor: pointer; }
.hub-check input { width: 16px; height: 16px; accent-color: var(--brand); }
.hub-form-actions { padding-top: 18px; display: flex; justify-content: flex-end; }
.hub-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px 0 2px; }
.hub-detail-grid > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hub-detail-grid strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.hub-incident-occurrence { align-items: flex-start; }
.hub-incident-occurrence .hub-rowact { margin-left: auto; }

/* ── immutable site-configuration history ───────────────────────────────── */
.hub-history-list { display: grid; gap: 8px; margin-top: 12px; }
.hub-history-version { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); overflow: hidden; }
.hub-history-version > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style-position: inside; }
.hub-history-version[open] > summary { border-bottom: 1px solid var(--border); background: var(--sunken); }
.hub-history-meta { padding: 12px 14px 0; color: var(--tx2); font-size: 12px; }
.hub-history-diff { list-style: none; display: grid; gap: 7px; margin: 10px 14px; padding: 0; }
.hub-history-diff li { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1fr); gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--sunken); font-size: 12px; }
.hub-history-diff span { color: var(--tx2); overflow-wrap: anywhere; }
.hub-history-restore { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }

/* ── delayed site deletion (DEL-01..03) ─────────────────────────────────── */
.hub-deletion-panel { border-left: 3px solid var(--danger); }
.hub-deletion-panel h2 { font-size: 17px; }
.hub-deletion-form, .hub-deletion-confirm { display: grid; gap: 14px; margin-top: 14px; }
.hub-deletion-choice { display: grid; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--rail); }
.hub-deletion-choice legend { padding: 0 5px; font-weight: 700; }
.hub-deletion-choice small { display: block; color: var(--tx3); margin-top: 2px; }
.hub-deletion-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hub-deletion-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.hub-deletion-grid > div { display: grid; gap: 5px; min-width: 0; }
.hub-deletion-grid .hub-code { overflow-wrap: anywhere; }
.hub-deletion-resource-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.hub-deletion-resource-columns > div { min-width: 0; padding: 12px; background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius-md); }
.hub-deletion-resource-columns h3 { margin-bottom: 9px; font-size: 14px; }
.hub-deletion-resources { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.hub-deletion-resources li { display: grid; gap: 3px; min-width: 0; }
.hub-deletion-resources .hub-code { overflow-wrap: anywhere; white-space: normal; }
.hub-deletion-status { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--sunken); color: var(--tx2); }
.hub-deletion-status.is-error { background: var(--nogo-bg); color: var(--nogo-tx); }
.hub-deletion-status.is-success { background: var(--go-bg); color: var(--go-tx); }
.hub-deletion-plan { margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.hub-deletion-plan.is-initial { margin-top: 0; }
.hub-deletion-plan > .hub-sub { margin-top: 8px; }
.hub-deletion-otp-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.hub-deletion-otp-row .hub-field { min-width: 180px; }
.hub-deletion-runtime-list { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--sunken); white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--tx2); }
@media (max-width: 900px) {
  .hub-deletion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hub-notif-head { display: none; }
  .hub-notif-row { display: grid; grid-template-columns: 1fr 1fr; min-width: 0; gap: 12px; }
  .hub-notif-cell { display: flex; flex-direction: column; gap: 4px; }
  .hub-mobile-label { display: block; color: var(--tx2); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .hub-notif-summary, .hub-notif-action, .hub-notif-status { grid-column: 1 / -1; }
  .hub-pref-row { align-items: flex-start; flex-direction: column; }
  .hub-pref-controls { width: 100%; justify-content: flex-start; }
  .hub-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-history-version > summary { align-items: flex-start; flex-direction: column; }
  .hub-history-diff li { grid-template-columns: 1fr; }
  .hub-deletion-grid, .hub-deletion-resource-columns { grid-template-columns: 1fr; }
}
/* ── Brand Hub alignment (visual contract, 2026-09) ─────────────────────────
   The local Brand Hub is the visual authority for the fleet console: navy
   navigation, OTV/gold lockup, blue active rail, white utility chrome, and
   generous editorial content gutters.  This layer deliberately reuses the
   existing hub-* markup and checkbox navigation so routing, auth, forms,
   keyboard access, and the mobile off-canvas behavior remain unchanged. */
:root {
  --brand-navy-950: #070d25;
  --brand-navy-900: #0b1437;
  --brand-navy-800: #13214d;
  --brand-gold: #e1bc36;
  --brand-line: #dfe3ea;
  --brand-line-strong: #cbd1dc;
  --brand-surface-subtle: #f7f8fb;
}

.hub-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  grid-template-rows: 72px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--canvas);
}

.hub-body { display: contents; }

.hub-topbar {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  z-index: 40;
  height: 72px;
  padding: 0 clamp(24px, 4vw, 64px);
  gap: 12px;
  color: var(--tx);
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--brand-line);
  box-shadow: 0 1px 0 rgba(10, 19, 50, .02);
  backdrop-filter: blur(12px);
}

/* The full lockup lives in the sidebar. Keep the legacy topbar nodes in the
   DOM for existing link/crawler contracts while removing duplicate chrome. */
.hub-topbar .hub-brand,
.hub-topbar .hub-btag,
.hub-topbar .hub-who { display: none; }
.hub-topbar .hub-topbar-sp { flex: 1 1 auto; }
.hub-topbar .hub-search {
  color: var(--tx3);
  background: var(--brand-surface-subtle);
  border-color: var(--brand-line-strong);
}
.hub-topbar .hub-search:focus-within { background: #fff; border-color: var(--brand); }
.hub-topbar .hub-search input { color: var(--tx); }
.hub-topbar .hub-search input::placeholder { color: var(--tx3); }
.hub-topbar .hub-hsel {
  color: var(--tx);
  background-color: #fff;
  border-color: var(--brand-line-strong);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%235c6473' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.hub-topbar .hub-hbtn {
  color: var(--tx2);
  background: #fff;
  border-color: var(--brand-line-strong);
  border-radius: var(--radius-md);
}
.hub-topbar .hub-hbtn:hover { color: var(--brand-active); background: var(--brand-surface-subtle); }
.hub-topbar .hub-hbtn.solid,
.hub-topbar .hub-hbtn--solid {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}
.hub-topbar .hub-hbtn.solid:hover,
.hub-topbar .hub-hbtn--solid:hover { color: #fff; background: var(--brand-hover); }

.hub-rail {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  width: 264px;
  height: 100vh;
  max-height: none;
  overflow-y: auto;
  padding: 24px 16px 16px;
  color: #eef3ff;
  background: var(--brand-navy-950);
  border-right: 1px solid rgba(255, 255, 255, .08);
}
/* Keep the navigation surface and its text unambiguous if an older shell rule
   is bundled ahead of this alignment layer. */
.hub-shell .hub-rail { background: var(--brand-navy-950) !important; color: #eef3ff !important; }
.hub-shell .hub-rail .hub-rhint { color: #aeb8d4; }
.hub-sidebar-brand {
  flex: none;
  min-height: 42px;
  padding: 0 9px 21px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.hub-sidebar-brand:hover { color: #fff; }
.hub-sidebar-mark {
  display: inline-flex;
  min-width: 45px;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  padding: 5px 7px 4px;
  color: var(--brand-navy-950);
  background: var(--brand-gold);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}
.hub-sidebar-name { font-size: 15px; font-weight: 700; }
.hub-rail > .hub-rgroup:first-of-type { margin-top: 0; }
.hub-rlabel { color: #8994b4; padding-left: 12px; }
.hub-rgroup + .hub-rgroup { margin-top: 20px; }
.hub-ritem {
  min-height: 43px;
  height: 43px;
  padding: 0 12px;
  color: #aeb8d4;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 560;
}
.hub-shell .hub-ritem { color: #aeb8d4 !important; }
.hub-ritem:hover { color: #fff; background: rgba(255, 255, 255, .055); }
.hub-ritem.is-active {
  color: #fff;
  background: rgba(26, 106, 255, .19);
  box-shadow: none;
}
.hub-shell .hub-ritem.is-active { color: #fff !important; background: rgba(26, 106, 255, .19) !important; }
.hub-ritem.is-active::before {
  position: absolute;
  left: 0;
  width: 3px;
  height: 20px;
  content: "";
  background: var(--brand);
  border-radius: 0 3px 3px 0;
}
.hub-ritem.is-off { color: #74809e; opacity: .72; }
.hub-ritem.is-off:hover { color: #74809e; background: transparent; }
.hub-ritem .hub-ic { color: #8994b4; }
.hub-shell .hub-ritem .hub-ic { color: #8994b4 !important; }
.hub-ritem.is-active .hub-ic { color: #fff; }
.hub-shell .hub-ritem.is-active .hub-ic { color: #fff !important; }
.hub-rcount { color: #8994b4; }
.hub-ritem.is-active .hub-rcount { color: #fff; }

.hub-sidebar-user-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.hub-sidebar-user-copy strong { overflow: hidden; color: #fff; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.hub-sidebar-user-copy small { overflow: hidden; color: #8994b4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hub-sidebar-user {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  height: auto;
  margin-top: auto;
  padding: 17px 7px 0;
  color: #fff;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0;
}
.hub-sidebar-user:hover { color: #fff; background: transparent; }
.hub-sidebar-avatar {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--brand-hover);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 750;
}
.hub-sidebar-user > .hub-ic { width: 15px; height: 15px; color: #8994b4; }

.hub-content {
  grid-column: 2;
  grid-row: 2;
  width: min(100%, 1680px);
  max-width: none;
  min-width: 0;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 58px) clamp(24px, 4vw, 64px) 70px;
}
.hub-ph {
  align-items: flex-end;
  gap: 32px;
  padding-bottom: 27px;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--brand-line);
}
.hub-ph-title h1 {
  font-size: clamp(2rem, 3.2vw, 3.1rem);
  font-weight: 720;
  letter-spacing: -.035em;
  line-height: 1.06;
}
.hub-ph-title { align-items: flex-start; flex-direction: column; gap: 7px; }
.hub-ph-act { flex: none; }
.hub-card,
.hub-row,
.hub-panel { box-shadow: 0 1px 2px rgba(10, 19, 50, .06), 0 4px 14px rgba(10, 19, 50, .04), var(--hl-top); }
.hub-card, .hub-row, .hub-panel { border-color: var(--brand-line); }
.hub-shell .hub-card, .hub-shell .hub-row, .hub-shell .hub-panel { border-color: var(--brand-line) !important; }
.hub-btn { border-radius: var(--radius-md); }

@media (max-width: 899.98px) {
  .hub-shell { display: flex; min-height: 100vh; }
  .hub-body { display: block; flex: 1 1 auto; }
  .hub-topbar {
    display: flex;
    height: auto;
    min-height: 57px;
    padding: 8px 17px;
    background: rgba(255, 255, 255, .96);
  }
  .hub-topbar .hub-brand { display: flex; color: var(--tx); }
  .hub-topbar .hub-brand:hover { color: var(--tx); }
  .hub-topbar .hub-brand-mark { min-width: 45px; color: var(--brand-navy-950); background: var(--brand-gold); font-size: 12px; }
  .hub-topbar .hub-brand-name { display: inline; }
  .hub-topbar .hub-btag { display: none; }
  .hub-burger {
    display: inline-flex;
    color: var(--brand-navy-900);
    background: var(--brand-surface-subtle);
    border-color: var(--brand-line-strong);
  }
  .hub-rail {
    position: fixed;
    top: 0;
    width: min(294px, 86vw);
    height: 100vh;
    padding: 24px 16px 16px;
    transform: translateX(-105%);
  }
  .hub-navtoggle:checked ~ .hub-body .hub-rail { transform: translateX(0); }
  .hub-content { padding: 28px 18px 60px; }
  .hub-ph { align-items: flex-start; flex-direction: column; gap: 19px; }
  .hub-ph-title h1 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .hub-ph-act { width: 100%; }
  .hub-ph-act .hub-btn { flex: 1; }
  .hub-topbar .hub-who { display: none; }
}

@media (max-width: 479.98px) {
  .hub-topbar .hub-brand-name { display: none; }
  .hub-content { padding-inline: 16px; }
}

/* Users screen additions; loaded after hub.css by src/admin/hub-css.ts. */
.hub-user-table {
  min-width: 0;
}

.hub-user-table-head,
.hub-user-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(210px, 1fr) minmax(150px, .75fr) minmax(170px, .8fr);
  gap: 18px;
  align-items: start;
}

.hub-user-table-head {
  padding: 0 18px 9px;
  color: var(--tx2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hub-user-row {
  margin: 0 0 10px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--sh-sm), var(--hl-top);
}

.hub-user-cell {
  min-width: 0;
}

.hub-user-person .hub-rowname {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.hub-user-access .hub-userlinks,
.hub-user-access .hub-user-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hub-user-access .hub-user-roles {
  margin-top: 8px;
}

.hub-user-activity {
  color: var(--tx2);
  font-size: 13px;
}

.hub-user-details {
  min-width: 0;
}

.hub-user-row:has(.hub-user-details[open]) .hub-user-actions {
  grid-column: 1 / -1;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.hub-user-details > summary {
  width: max-content;
  max-width: 100%;
  cursor: pointer;
  list-style: none;
}

.hub-user-details > summary::-webkit-details-marker {
  display: none;
}

.hub-user-details[open] > summary {
  margin-bottom: 14px;
}

.hub-user-profile-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--sunken);
}

.hub-user-profile-form .hub-field {
  flex: 1 1 260px;
  margin: 0;
}
.hub-user-profile-form .hub-cap { color: var(--tx2); }

/* The base role editor uses a horizontal flex basis for bare selects. Fields
 * stack labels vertically, so that basis must not turn into a 180px height. */
.hub-user-details form .hub-field > .hub-input {
  flex: 0 0 auto;
  height: 40px;
  width: 100%;
}

.hub-user-access-form {
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}

.hub-user-access-form-title {
  margin-bottom: 10px;
  color: var(--tx);
  font-weight: 700;
}

.hub-user-access-form-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.hub-user-access-form-fields .hub-field {
  flex: 1 1 180px;
  margin: 0;
}

.hub-user-action-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.hub-user-inline-status {
  min-height: 20px;
  color: var(--tx3);
  font-size: 12px;
}

.hub-user-inline-status.is-success {
  color: var(--go-tx);
}

.hub-user-inline-status.is-error {
  color: var(--nogo-tx);
}

@media (max-width: 1150px) {
  .hub-user-table-head,
  .hub-user-row {
    grid-template-columns: minmax(190px, 1.2fr) minmax(180px, 1fr) minmax(140px, .8fr);
  }

  .hub-user-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .hub-user-table-head {
    display: none;
  }

  .hub-user-row {
    display: block;
    padding: 14px;
  }

  .hub-user-cell + .hub-user-cell {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--border);
  }

  .hub-user-cell::before {
    display: block;
    margin-bottom: 5px;
    color: var(--tx3);
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}

/* Incidents use a real table so issue, urgency, state and actions stay aligned
 * while the issue column absorbs long diagnostic messages. */
.incidents-table-wrap { overflow-x: auto; border: 1px solid var(--hub-line, #d7dce2); border-radius: 12px; background: var(--hub-panel, #fff); }
.incidents-table { width: 100%; min-width: 920px; border-collapse: collapse; table-layout: fixed; }
.incidents-table col.incidents-col-select { width: 8%; }
.incidents-table col.incidents-col-issue { width: 35%; }
.incidents-table col.incidents-col-severity { width: 11%; }
.incidents-table col.incidents-col-state { width: 11%; }
.incidents-table col.incidents-col-seen { width: 19%; }
.incidents-table col.incidents-col-action { width: 16%; }
.incidents-table th, .incidents-table td { padding: 14px 12px; border-bottom: 1px solid var(--hub-line, #e5e7eb); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.incidents-table thead th { color: var(--hub-muted, #667085); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.incidents-table tbody tr:last-child th, .incidents-table tbody tr:last-child td { border-bottom: 0; }
.incidents-table-row:hover { background: color-mix(in srgb, var(--hub-accent, #3857d6) 4%, transparent); }
.incidents-col-select { text-align: center !important; }
.incidents-col-select input { width: 17px; height: 17px; accent-color: var(--hub-accent, #3857d6); }
.incidents-issue-link { display: block; color: inherit; font-weight: 700; text-decoration: none; }
.incidents-issue-link:hover, .incidents-issue-link:focus-visible { text-decoration: underline; }
.incidents-table .hub-sub { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; }
.incidents-next { margin: 9px 0 0; color: var(--hub-muted, #667085); font-size: 12px; line-height: 1.45; font-weight: 400; }
.incidents-next strong { color: var(--hub-text, #1d2939); }
.incidents-col-seen time { display: block; margin-top: 4px; font-size: 13px; }
.incidents-action-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
.incidents-bulk { display: grid; gap: 12px; }
.incidents-bulk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--hub-line, #d7dce2); border-radius: 10px; background: var(--hub-panel, #fff); }
.incidents-bulk-toolbar label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; }
.incidents-bulk-toolbar input { width: 17px; height: 17px; accent-color: var(--hub-accent, #3857d6); }
.incidents-filter-label { align-self: center; color: var(--hub-muted, #667085); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.incidents-filter-clear { margin-left: auto; }
.incidents-confirm { display: grid; gap: 9px; padding: 14px; border: 1px solid color-mix(in srgb, var(--hub-accent, #3857d6) 28%, var(--hub-line, #d7dce2)); border-radius: 10px; background: color-mix(in srgb, var(--hub-accent, #3857d6) 5%, var(--hub-panel, #fff)); }
.incidents-confirm p { margin: 0; font-size: 14px; line-height: 1.45; }
.incidents-confirm label { font-size: 12px; font-weight: 700; }
.incidents-confirm textarea { width: min(100%, 640px); min-height: 58px; resize: vertical; }
.incidents-confirm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
[data-incident-status] { min-height: 1.5em; margin: 0 0 12px; overflow-wrap: anywhere; }
[data-incident-status].is-error { color: var(--nogo-tx, #991b1b); }
.incidents-next-panel { margin-top: 18px; padding: 14px; border-left: 3px solid var(--hub-accent, #3857d6); background: color-mix(in srgb, var(--hub-accent, #3857d6) 5%, transparent); }
.incidents-next-panel h2 { margin: 0 0 7px; font-size: 16px; }
.incidents-next-panel p { margin: 6px 0 0; line-height: 1.5; }
@media (max-width: 760px) {
  .incidents-table { min-width: 680px; }
  .incidents-table col.incidents-col-select { width: 8%; }
  .incidents-table col.incidents-col-issue { width: 39%; }
  .incidents-table col.incidents-col-severity { width: 12%; }
  .incidents-table col.incidents-col-state { width: 12%; }
  .incidents-table col.incidents-col-seen { width: 14%; }
  .incidents-table col.incidents-col-action { width: 15%; }
  .incidents-table th, .incidents-table td { padding: 11px 9px; }
  .incidents-next { display: none; }
}

/* Fleet homepage capture: an honest 16:9-ish thumbnail, not a brand mark. */
.hub-fleet-preview {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 168px;
  width: 168px;
  height: auto;
  overflow: visible;
}
.hub-fleet-preview .hub-cardthumb {
  flex: 0 0 94px;
  width: 100%;
  height: 94px;
  object-fit: cover;
  padding: 0;
}
.hub-fleet-preview .hub-cardthumb.is-mark { padding: 0; }
.hub-homepage-preview-image { background: var(--card); }
.hub-fleet-preview-label {
  position: static;
  display: block;
  min-width: 0;
  padding: 3px 2px 0;
  color: var(--tx2);
  font-size: 10px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-fleet-preview.is-stale { border-color: var(--maybe-tx); }
@media (max-width: 700px) {
  .hub-fleet-preview { flex-basis: 120px; width: 120px; }
  .hub-fleet-preview .hub-cardthumb { flex-basis: 68px; height: 68px; }
}