/* ===========================================================================
   Reel Lab Audio — legacy compatibility layer (task 022)

   TRANSITIONAL. This file exists so the 51 pages still on the old bases
   (base.html, public_base.html, admin_base.html) inherit the redesign's
   colours, type and grounds without any child template being touched. It
   restyles the old class names with site.css tokens and nothing else. As
   pages move onto site_base.html (016, 019–021), the rules they used here
   become dead; when the last one moves, this file and main.css go.

   Loaded by base.html, in this order:
       main.css → site.css → lockup.css → legacy.css → the page's own <style>

   Three rules make that work:
   1. Scope is :where(), which adds no specificity. A child page's own
      <style> comes later and still wins on equal specificity, exactly as it
      did over the old inline block. Nothing here may out-rank a child.
   2. site.css loads first and is not scoped, so where it styles the same
      element or class as an old page (body, h1–h3, p, img/svg, .panel,
      .field, .flash, .card .spec), this file resets every property site.css
      sets, not only the ones the old system set.
   3. The old token names (--panel, --muted, --accent…) are re-pointed at the
      ground-aware --c-* tokens on every [data-ground] element. main.css's
      components and every child's inline styles read those names, so they
      move with the ground: tan for the public and logged-in pages, ink for
      admin (set by base.html's `ground` block).

   Sections:
     1. Token remap            5. Forms, buttons, flashes
     2. Base elements          6. Old system chrome (nav, menu, tabs, footer)
     3. Type                   7. Public pages   [data-base="public"]
     4. Panels and badges      8. Admin pages    [data-base="admin"]
   =========================================================================== */


/* ===========================================================================
   1. TOKEN REMAP — old names, new values
   ---------------------------------------------------------------------------
   The redesign has no blue, teal or green, deliberately. Old meanings land
   like this:
     blue accent, links      → --c-accent (oxblood on tan, copper on ink)
     teal / success          → --c-fg     (done is quiet: ink on tan)
     error                   → --c-accent
     warning                 → --c-live   (ink on tan, amber on ink)
   A status is still told apart by its words (every badge and flash says
   what it is); colour is no longer the only signal.
   =========================================================================== */

[data-system="legacy"],
[data-system="legacy"] [data-ground] {
  --bg: var(--c-bg);
  --panel: var(--c-sunk);
  --panel-2: color-mix(in srgb, var(--c-sunk) 82%, var(--c-fg));
  --border: var(--c-line-soft);
  --border-light: var(--c-line);

  --text: var(--c-fg);
  --muted: var(--c-soft);

  /* --accent is NOT set here: see the note below this block. */
  --accent-2: var(--c-accent);
  --accent-dim: var(--c-accent);
  --teal: var(--c-fg);
  --teal-2: var(--c-fg);
  --success: var(--c-fg);
  --error: var(--c-accent);
  --error-2: var(--c-accent);
  --warning: var(--c-live);

  --accent-wash: color-mix(in srgb, var(--c-accent) 12%, transparent);
  --accent-wash-strong: color-mix(in srgb, var(--c-accent) 18%, transparent);
  --accent-edge: color-mix(in srgb, var(--c-accent) 45%, transparent);
  --teal-wash: color-mix(in srgb, var(--c-fg) 8%, transparent);
  --teal-edge: var(--c-line-soft);
  --warning-wash: color-mix(in srgb, var(--c-live) 12%, transparent);
  --warning-edge: color-mix(in srgb, var(--c-live) 45%, transparent);
  --error-wash: color-mix(in srgb, var(--c-accent) 12%, transparent);
  --error-edge: color-mix(in srgb, var(--c-accent) 45%, transparent);

  --label: var(--font-sans);
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  /* Equipment, not app: near-square corners, no drop shadows. */
  --radius-sm: var(--radius);
  --shadow-card: none;
  --shadow-card-hover: none;
  --shadow-pop: 0 0 0 var(--hairline) var(--c-line);

  --text-micro: var(--label-sm);
  --display-lg: var(--display-3);
  --display-md: var(--display-4);
  --display-sm: var(--display-5);
}

/* --accent is the one old name site.css also uses: there it is raw oxblood,
   and the tan ground's --c-accent is var(--accent). Setting
   --accent: var(--c-accent) on a tan element is a cycle, which CSS resolves
   by making both invalid (every accent on the page vanishes). On tan,
   site.css's --accent already IS the tan accent, so it is left alone; on ink
   and rack, --c-accent is copper and doesn't read --accent, so it is safe to
   point the old name at it. */
[data-system="legacy"][data-ground="ink"],
[data-system="legacy"][data-ground="rack"],
[data-system="legacy"] [data-ground="ink"],
[data-system="legacy"] [data-ground="rack"] {
  --accent: var(--c-accent);
}


/* ===========================================================================
   2. BASE ELEMENTS — undo what site.css's base does to old markup
   =========================================================================== */

/* Browser-native crossfade between pages, as the old base had. */
@view-transition { navigation: auto; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
::view-transition-old(root) { animation: .2s ease-out both vt-fade-out; }
::view-transition-new(root) { animation: .2s ease-out both vt-fade-in; }

:where([data-system="legacy"]) body {
  display: block;              /* site.css makes body a flex column */
  min-height: 0;
  background: transparent;     /* the ground is on <html> */
  color: var(--c-fg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  overflow-x: hidden;
}
:where([data-system="legacy"]) p { margin-block: 1em; }
:where([data-system="legacy"]) img,
:where([data-system="legacy"]) video { display: inline; }
:where([data-system="legacy"]) svg { display: inline; }
:where([data-system="legacy"]) img { max-width: 100%; }
:where([data-system="legacy"]) code,
:where([data-system="legacy"]) pre { font-family: var(--font-mono); }

:where([data-system="legacy"]) a { color: var(--c-accent); text-decoration: none; }
:where([data-system="legacy"]) a:hover { color: var(--c-fg); text-decoration: underline; }

:where([data-system="legacy"]) .container {
  max-width: 960px;
  margin-inline: auto;
  padding: var(--space-xl) var(--space-lg);
}
@media (max-width: 480px) {
  :where([data-system="legacy"]) .container { padding: var(--space-md); }
}

/* Card entrance, as before: starts at .7 opacity, never invisible. */
@keyframes pk-card-in { from { opacity: .7; transform: translateY(4px); } to { opacity: 1; transform: none; } }
:where([data-system="legacy"]) .grid > .card { animation: pk-card-in .16s ease-out both; }
:where([data-system="legacy"]) .grid > .card:nth-child(n+2) { animation-delay: .02s; }
:where([data-system="legacy"]) .grid > .card:nth-child(n+3) { animation-delay: .04s; }
:where([data-system="legacy"]) .grid > .card:nth-child(n+5) { animation-delay: .07s; }
:where([data-system="legacy"]) .grid > .card:nth-child(n+7) { animation-delay: .10s; }
@media (prefers-reduced-motion: reduce) {
  :where([data-system="legacy"]) .grid > .card { animation: none; }
}


/* ===========================================================================
   3. TYPE — Bricolage for words, Martian Mono for labels
   =========================================================================== */

:where([data-system="legacy"]) h1 {
  font-family: var(--font-sans);
  font-size: var(--display-3);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 var(--space-3);
  color: var(--c-fg);
}
@media (max-width: 480px) {
  :where([data-system="legacy"]) h1 { font-size: var(--display-4); }
}
/* The old h2 was a small uppercase heading with a dashed rule after it. In
   the redesign that is a mono label with a hairline: .rule--labelled. */
:where([data-system="legacy"]) h2 {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--label-md);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--c-faint);
  margin: var(--space-lg) 0 var(--space-sm);
}
:where([data-system="legacy"]) h2::after {
  content: ""; flex: 1;
  border-top: var(--hairline) solid var(--c-line-soft);
}
:where([data-system="legacy"]) h3 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 var(--space-2);
}
:where([data-system="legacy"]) p.sub { color: var(--c-soft); font-size: var(--text-sm); margin-top: 0; }

/* VU dot on live stats. */
@keyframes vu-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-live) 55%, transparent); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}
:where([data-system="legacy"]) .vu-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-live);
  animation: vu-pulse 2.2s ease-in-out infinite;
  margin-right: .5rem; flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) { :where([data-system="legacy"]) .vu-dot { animation: none; } }


/* ===========================================================================
   4. PANELS AND BADGES
   =========================================================================== */

:where([data-system="legacy"]) .panel {
  display: block;              /* site.css's .panel is a flex column */
  gap: normal;
  background: var(--c-sunk);
  border: var(--hairline) solid var(--c-line-soft);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  position: relative;
  box-shadow: none;
}
@media (max-width: 700px) {
  :where([data-system="legacy"]) .panel { padding: var(--space-md); }
}

/* Studio module: a panel with a nameplate. */
:where([data-system="legacy"]) .module {
  background: var(--c-sunk);
  border: var(--hairline) solid var(--c-line-soft);
  border-radius: var(--radius);
  position: relative;
}
:where([data-system="legacy"]) .module-label {
  font-family: var(--font-mono);
  font-size: var(--label-sm);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  color: var(--c-faint);
  padding: .5rem .9rem;
  border-bottom: var(--hairline) solid var(--c-line-soft);
}

:where([data-system="legacy"]) .badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-mono);
  font-size: var(--label-sm);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-soft);
  border: var(--hairline) solid var(--c-line-soft);
  white-space: nowrap;
}
:where([data-system="legacy"]) .badge-accent,
:where([data-system="legacy"]) .badge.pending  { color: var(--c-accent); border-color: var(--c-accent); }
:where([data-system="legacy"]) .badge-success,
:where([data-system="legacy"]) .badge.approved { color: var(--c-fg); border-color: var(--c-fg); }
:where([data-system="legacy"]) .badge-danger,
:where([data-system="legacy"]) .badge.rejected { color: var(--c-on-accent); background: var(--c-accent); border-color: var(--c-accent); }
:where([data-system="legacy"]) .badge-warn     { color: var(--c-live); border-color: var(--c-live); background: var(--warning-wash); }
:where([data-system="legacy"]) .badge-neutral  { color: var(--c-soft); border-color: var(--c-line-soft); }

/* Verified / Featured / Spotlight must read as three different things at a
   glance: an outline, a solid block, and the accent. */
:where([data-system="legacy"]) .creator-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-mono);
  font-size: var(--label-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .15rem .45rem;
  border-radius: var(--radius);
  white-space: nowrap;
  margin-left: .3rem;
  vertical-align: middle;
}
:where([data-system="legacy"]) .creator-badge-verified  { color: var(--c-fg); border: var(--hairline) solid var(--c-fg); background: transparent; }
:where([data-system="legacy"]) .creator-badge-featured  { color: var(--c-bg); border: var(--hairline) solid var(--c-fg); background: var(--c-fg); }
:where([data-system="legacy"]) .creator-badge-spotlight { color: var(--c-accent); border: var(--hairline) solid var(--c-accent); background: var(--accent-wash); }


/* ===========================================================================
   5. FORMS, BUTTONS, FLASHES
   =========================================================================== */

/* .primary is the one live action (site.css .btn--primary); .secondary is an
   outline (.btn--secondary). Same names, so no child template changes. */
:where([data-system="legacy"]) button.primary,
:where([data-system="legacy"]) a.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-5);
  background: var(--c-live);
  color: var(--c-on-live);
  border: var(--hairline) solid var(--c-live);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--label-md);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
:where([data-system="legacy"]) button.primary:hover:not(:disabled),
:where([data-system="legacy"]) a.primary:hover {
  background: var(--c-live-hover); border-color: var(--c-live-hover); color: var(--c-on-live); text-decoration: none;
}
:where([data-system="legacy"][data-ground="tan"]) button.primary:hover:not(:disabled),
:where([data-system="legacy"][data-ground="tan"]) a.primary:hover { color: var(--paper); }
:where([data-system="legacy"]) button.primary:disabled { opacity: .45; cursor: not-allowed; }

:where([data-system="legacy"]) button.secondary,
:where([data-system="legacy"]) a.secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  background: transparent;
  color: var(--c-fg);
  border: var(--hairline) solid var(--c-fg);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--label-md);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
:where([data-system="legacy"]) button.secondary:hover:not(:disabled),
:where([data-system="legacy"]) a.secondary:hover { background: var(--c-fg); color: var(--c-bg); text-decoration: none; }
:where([data-system="legacy"]) button.secondary:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 700px) {
  :where([data-system="legacy"]) button,
  :where([data-system="legacy"]) .primary,
  :where([data-system="legacy"]) .secondary { min-height: var(--tap); }
  :where([data-system="legacy"]) input,
  :where([data-system="legacy"]) textarea,
  :where([data-system="legacy"]) select { font-size: 16px; min-height: var(--tap); }
  :where([data-system="legacy"]) .field input,
  :where([data-system="legacy"]) .field textarea,
  :where([data-system="legacy"]) .field select { width: 100%; }
  :where([data-system="legacy"]) table { font-size: var(--text-sm); }
  :where([data-system="legacy"]) table th,
  :where([data-system="legacy"]) table td { padding: .45rem .35rem; }
}

:where([data-system="legacy"]) label.field,
:where([data-system="legacy"]) div.field {
  display: block;              /* site.css's .field is a flex column */
  gap: normal;
  margin: var(--space-md) 0;
}
:where([data-system="legacy"]) label.field span.label-text,
:where([data-system="legacy"]) div.field span.label-text {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--label-md);
  font-weight: 500;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--c-faint);
  margin-bottom: .4rem;
}

:where([data-system="legacy"]) input[type=text],
:where([data-system="legacy"]) input[type=email],
:where([data-system="legacy"]) input[type=password],
:where([data-system="legacy"]) input[type=url],
:where([data-system="legacy"]) input[type=number],
:where([data-system="legacy"]) input[type=search],
:where([data-system="legacy"]) textarea,
:where([data-system="legacy"]) select {
  width: 100%;
  background: var(--c-bg);
  color: var(--c-fg);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius);
  padding: .6rem .75rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
:where([data-system="legacy"]) input::placeholder,
:where([data-system="legacy"]) textarea::placeholder { color: var(--c-faint); opacity: 1; }
:where([data-system="legacy"]) input:focus,
:where([data-system="legacy"]) textarea:focus,
:where([data-system="legacy"]) select:focus {
  outline: 2px solid var(--c-fg);
  outline-offset: 1px;
  border-color: var(--c-fg);
  box-shadow: none;
}
:where([data-system="legacy"]) textarea { min-height: 80px; resize: vertical; }

:where([data-system="legacy"]) .flash {
  padding: .75rem 1rem;
  border-radius: 0;
  margin-bottom: 1rem;
  font-size: var(--text-sm);
  background: transparent;
  color: var(--c-fg);
  border: var(--hairline) solid var(--c-line-soft);
  border-left: 4px solid var(--c-line);
}
:where([data-system="legacy"]) .flash.error   { border-left-color: var(--c-accent); color: var(--c-fg); background: var(--error-wash); }
:where([data-system="legacy"]) .flash.success { border-left-color: var(--c-fg); }
:where([data-system="legacy"]) .flash.warning { border-left-color: var(--c-live); background: var(--warning-wash); }


/* ===========================================================================
   6. OLD SYSTEM CHROME — top nav, bell, menu panel, bottom tabs, footer
   ---------------------------------------------------------------------------
   Same markup and ids as before, so base.html's scripts (menu, bell, edit
   mode) work unchanged. The edit toolbar and .pk-editable are NOT here:
   site.css already restyles that exact markup for the redesign.
   =========================================================================== */

:where([data-system="legacy"]) nav.topnav {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 72px;
  padding: 0 var(--gutter);
  border-bottom: var(--hairline) solid var(--c-line);
  background: var(--c-bg);
}
:where([data-system="legacy"]) nav.topnav .brand { display: inline-flex; align-items: center; gap: .75rem; margin-right: auto; color: var(--c-fg); }
:where([data-system="legacy"]) nav.topnav .brand .brand-suffix {
  color: var(--c-accent);
  font-family: var(--font-mono); font-size: var(--label-sm); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase;
  border: var(--hairline) solid currentColor; border-radius: var(--radius); padding: .15rem .4rem;
}
:where([data-system="legacy"]) .topnav-links { display: none; align-items: center; gap: 26px; margin-right: var(--space-4); }
@media (min-width: 700px) { :where([data-system="legacy"]) .topnav-links { display: flex; } }
:where([data-system="legacy"]) .topnav-links a {
  color: var(--c-soft); font-size: var(--text-xs); text-decoration: none; padding-block: var(--space-2);
}
:where([data-system="legacy"]) .topnav-links a:hover { color: var(--c-fg); text-decoration: underline; }
:where([data-system="legacy"]) .topnav-links .topnav-account { color: var(--c-fg); }

/* Notifications bell */
:where([data-system="legacy"]) .notif-wrap { position: relative; display: flex; align-items: center; }
:where([data-system="legacy"]) .notif-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none; border: var(--hairline) solid transparent; border-radius: var(--radius);
  color: var(--c-soft); cursor: pointer;
}
:where([data-system="legacy"]) .notif-btn:hover { color: var(--c-fg); border-color: var(--c-line-soft); }
:where([data-system="legacy"]) .notif-btn svg { display: block; width: 19px; height: 19px; }
:where([data-system="legacy"]) .notif-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px;
  background: var(--c-accent); color: var(--c-on-accent);
  font-family: var(--font-mono); font-size: var(--label-sm); font-weight: 500;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
:where([data-system="legacy"]) .notif-dropdown {
  position: absolute; top: calc(100% + .6rem); right: 0;
  width: 340px; max-width: 90vw; max-height: 420px; overflow-y: auto;
  background: var(--c-bg); border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius);
  z-index: 300;
}
:where([data-system="legacy"]) .notif-dropdown-header {
  padding: .7rem .9rem;
  font-family: var(--font-mono); font-size: var(--label-md); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase; color: var(--c-faint);
  border-bottom: var(--hairline) solid var(--c-line-soft);
}
:where([data-system="legacy"]) .notif-list { display: flex; flex-direction: column; }
:where([data-system="legacy"]) .notif-item {
  display: block; padding: .65rem .9rem;
  font-size: var(--text-xs); color: var(--c-fg); text-decoration: none; line-height: 1.4;
  border-bottom: var(--hairline) solid var(--c-line-soft);
}
:where([data-system="legacy"]) .notif-item:last-child { border-bottom: none; }
:where([data-system="legacy"]) .notif-item:hover { background: var(--c-sunk); text-decoration: none; }
:where([data-system="legacy"]) .notif-item.notif-was-unread { background: var(--accent-wash); }
:where([data-system="legacy"]) .notif-item .notif-time { display: block; font-family: var(--font-mono); font-size: var(--label-sm); color: var(--c-faint); margin-top: .15rem; }
:where([data-system="legacy"]) .notif-empty { padding: 1.5rem .9rem; text-align: center; color: var(--c-soft); font-size: var(--text-xs); }

/* Hamburger */
:where([data-system="legacy"]) .menu-btn {
  width: var(--tap); height: var(--tap);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: transparent; border: var(--hairline) solid var(--c-line); border-radius: var(--radius);
  cursor: pointer;
}
:where([data-system="legacy"]) .menu-btn:hover { background: var(--c-sunk); }
:where([data-system="legacy"]) .menu-btn span {
  display: block; width: 18px; height: 1.5px; background: var(--c-fg);
  transition: transform .2s, opacity .2s;
}
:where([data-system="legacy"]) .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
:where([data-system="legacy"]) .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
:where([data-system="legacy"]) .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Slide-in menu panel */
:where([data-system="legacy"]) .menu-overlay {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  z-index: 50; opacity: 0; transition: opacity .18s;
}
:where([data-system="legacy"]) .menu-overlay.open { opacity: 1; }
:where([data-system="legacy"]) .menu-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 300px; max-width: 85vw;
  background: var(--c-bg); color: var(--c-fg);
  border-left: var(--hairline) solid var(--c-line);
  z-index: 60;
  padding: 1.25rem 1.25rem 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .2s ease-out;
}
:where([data-system="legacy"]) .menu-panel.open { transform: translateX(0); }
:where([data-system="legacy"]) .menu-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1rem; margin-bottom: 1rem;
  border-bottom: var(--hairline) solid var(--c-line);
}
:where([data-system="legacy"]) .menu-close {
  min-width: var(--tap); min-height: var(--tap);
  background: transparent; border: none; color: var(--c-soft);
  font-size: var(--display-5); cursor: pointer; font-family: inherit;
}
:where([data-system="legacy"]) .menu-close:hover { color: var(--c-fg); }
:where([data-system="legacy"]) .menu-section { padding: .9rem 0; border-bottom: var(--hairline) solid var(--c-line-soft); }
:where([data-system="legacy"]) .menu-section:last-of-type { border-bottom: none; }
:where([data-system="legacy"]) .menu-section-label {
  font-family: var(--font-mono); font-size: var(--label-sm); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase; color: var(--c-faint);
  margin-bottom: .5rem; padding: 0 .25rem;
}
:where([data-system="legacy"]) .menu-section a,
:where([data-system="legacy"]) .menu-section form button {
  display: block; width: 100%;
  padding: .55rem .6rem; margin: .1rem 0;
  color: var(--c-fg); font-size: var(--text-sm); font-family: inherit;
  background: transparent; border: none; border-left: 2px solid transparent; border-radius: 0;
  text-align: left; cursor: pointer;
}
:where([data-system="legacy"]) .menu-section a:hover,
:where([data-system="legacy"]) .menu-section form button:hover {
  background: var(--c-sunk); color: var(--c-fg); text-decoration: none; border-left-color: var(--c-accent);
}
:where([data-system="legacy"]) .menu-logout { color: var(--c-soft) !important; font-size: var(--text-xs) !important; }
@media (min-width: 700px) { :where([data-system="legacy"]) .menu-mobile-only { display: none; } }

/* Bottom tab bar (mobile, public and logged-in pages) */
:where([data-system="legacy"]) .btm-tabs {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--c-bg);
  border-top: var(--hairline) solid var(--c-line);
  padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom, 0px));
  justify-content: space-around; align-items: center;
}
:where([data-system="legacy"]) .btm-tabs a {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  min-width: 56px; padding: .25rem .35rem;
  color: var(--c-soft); text-decoration: none;
  font-family: var(--font-mono); font-size: var(--label-sm); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
}
:where([data-system="legacy"]) .btm-tabs a:hover,
:where([data-system="legacy"]) .btm-tabs a.active { color: var(--c-fg); text-decoration: none; }
:where([data-system="legacy"]) .btm-tabs a.active { box-shadow: inset 0 2px 0 var(--c-accent); }
:where([data-system="legacy"]) .btm-tabs svg { display: block; width: 22px; height: 22px; }
@media (max-width: 700px) {
  :where([data-system="legacy"]) .btm-tabs:not(.admin-hidden) { display: flex; }
  :where([data-system="legacy"]) .menu-btn { display: none; }
  :where([data-system="legacy"]) .site-footer { padding-bottom: calc(var(--space-lg) + 70px); }
  :where([data-system="legacy"]) body { padding-bottom: 64px; }
}

/* Footer */
:where([data-system="legacy"]) .site-footer {
  margin-top: var(--space-3xl);
  border-top: var(--hairline) solid var(--c-line);
  background: transparent;
  padding: var(--space-2xl) var(--gutter) var(--space-lg);
}
@media (max-width: 480px) {
  :where([data-system="legacy"]) .site-footer { padding: var(--space-xl) var(--space-md) var(--space-lg); }
}
:where([data-system="legacy"]) .footer-inner {
  display: grid; grid-template-columns: 1.2fr 1fr 1.4fr; gap: var(--space-2xl);
  max-width: 920px; margin-inline: auto;
}
@media (max-width: 720px) {
  :where([data-system="legacy"]) .footer-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
}
:where([data-system="legacy"]) .footer-col-label {
  font-family: var(--font-mono); font-size: var(--label-md); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase; color: var(--c-faint);
  margin-bottom: .6rem;
}
:where([data-system="legacy"]) .footer-col a { display: block; padding: .25rem 0; color: var(--c-fg); font-size: var(--text-xs); }
:where([data-system="legacy"]) .footer-col a:hover { text-decoration: underline; }
:where([data-system="legacy"]) .footer-brand { margin-bottom: .6rem; }
:where([data-system="legacy"]) .footer-tagline { color: var(--c-soft); font-size: var(--text-xs); margin: 0; line-height: 1.5; }
:where([data-system="legacy"]) .footer-newsletter-blurb { color: var(--c-soft); font-size: var(--text-xs); margin: 0 0 .5rem; }
:where([data-system="legacy"]) .footer-newsletter { display: flex; gap: .4rem; }
:where([data-system="legacy"]) .footer-newsletter input { flex: 1; }
:where([data-system="legacy"]) .footer-meta {
  max-width: 920px; margin: 2rem auto 0; padding-top: 1rem;
  border-top: var(--hairline) solid var(--c-line-soft);
  color: var(--c-faint); font-family: var(--font-mono); font-size: var(--label-sm);
  letter-spacing: .08em; text-align: center;
}
:where([data-system="legacy"]) .footer-meta a { color: var(--c-faint); }


/* ===========================================================================
   7. PUBLIC PAGES — what public_base.html carried inline
   =========================================================================== */

/* Card grid */
:where([data-base="public"]) .grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem; margin-top: 1.25rem;
}
@media (max-width: 480px) { :where([data-base="public"]) .grid { grid-template-columns: 1fr; gap: 1rem; } }
:where([data-base="public"]) .card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--c-bg);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius);
  transition: transform 220ms var(--ease-out);
}
:where([data-base="public"]) .card:hover { transform: translateY(-3px); }
:where([data-base="public"]) .card-link { position: absolute; inset: 0; z-index: 1; }
:where([data-base="public"]) .card .cover .play-btn,
:where([data-base="public"]) .card .heart-btn,
:where([data-base="public"]) .card .card-overlay-link { position: relative; z-index: 2; }
:where([data-base="public"]) .card .cover {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: linear-gradient(135deg, var(--c-sunk) 0%, color-mix(in srgb, var(--c-sunk) 80%, var(--c-fg)) 100%);
  border-bottom: var(--hairline) solid var(--c-line);
}
:where([data-base="public"]) .card .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
:where([data-base="public"]) .card .cover .placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--c-faint); font-size: 2.5rem; opacity: .5;
}
/* Tape-reel hub: a disc with a ring and a hole in the middle. */
:where([data-base="public"]) .card .cover .play-btn {
  position: absolute; bottom: .75rem; right: .75rem;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--c-bg); color: var(--c-fg);
  border: 2px solid var(--c-fg);
  box-shadow: inset 0 0 0 6px var(--c-sunk);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem;
  transition: transform .12s;
}
:where([data-base="public"]) .card .cover .play-btn:hover { transform: scale(1.07); }
:where([data-base="public"]) .card .cover .play-btn[data-playing="1"] { background: var(--c-live); color: var(--c-on-live); border-color: var(--c-live); }
:where([data-base="public"]) .card .body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
:where([data-base="public"]) .card .name { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-md); line-height: 1.25; color: var(--c-fg); }
:where([data-base="public"]) .card .name a { color: inherit; }
:where([data-base="public"]) .card .name a:hover { color: var(--c-accent); text-decoration: none; }
:where([data-base="public"]) .card .contributor { font-size: var(--text-xs); color: var(--c-soft); }
:where([data-base="public"]) .card .contributor a { color: var(--c-soft); }
:where([data-base="public"]) .card .contributor a:hover { color: var(--c-fg); text-decoration: none; }
:where([data-base="public"]) .card .from-kit { font-size: var(--label-md); font-family: var(--font-mono); color: var(--c-soft); }
:where([data-base="public"]) .card .from-kit a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
:where([data-base="public"]) .card .piece-strip { display: flex; gap: .4rem; overflow-x: auto; padding-top: .2rem; pointer-events: none; }
:where([data-base="public"]) .card .piece-chip { flex: 0 0 auto; width: 52px; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
:where([data-base="public"]) .card .piece-chip-photo {
  width: 40px; height: 40px; border-radius: var(--radius); overflow: hidden;
  background: var(--c-sunk); border: var(--hairline) solid var(--c-line-soft);
  display: flex; align-items: center; justify-content: center;
}
:where([data-base="public"]) .card .piece-chip-photo img { width: 100%; height: 100%; object-fit: cover; }
:where([data-base="public"]) .card .piece-chip-icon { color: var(--c-faint); font-size: 1.1rem; }
:where([data-base="public"]) .card .piece-chip-label {
  font-family: var(--font-mono); font-size: var(--label-sm); color: var(--c-faint);
  text-align: center; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52px;
}
/* .card .spec also matches site.css's .spec (a dl grid): reset it. */
:where([data-base="public"]) .card .spec {
  display: block; grid-template-columns: none; border-top: 0; margin: auto 0 0;
  padding-top: .5rem;
  font-family: var(--font-mono); font-size: var(--label-md); letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-faint);
}
:where([data-base="public"]) .card .description {
  font-size: var(--text-xs); color: var(--c-soft); line-height: 1.45; margin-top: .25rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
:where([data-base="public"]) .card .footer-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 1rem .85rem;
  border-top: var(--hairline) solid var(--c-line-soft);
}
:where([data-base="public"]) .card .footer-row .tags { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
:where([data-base="public"]) .card-rating { padding: 0 1rem .6rem; }

:where([data-base="public"]) .tag-chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--label-sm); letter-spacing: .06em;
  padding: .12rem .45rem; border-radius: var(--radius);
  background: transparent; border: var(--hairline) solid var(--c-line-soft); color: var(--c-soft);
  text-transform: lowercase;
}
:where([data-base="public"]) .tag-chip.active { border-color: var(--c-accent); color: var(--c-accent); background: var(--accent-wash); }
:where([data-base="public"]) .tag-chip.tech { border-color: var(--c-fg); color: var(--c-fg); }

:where([data-base="public"]) .heart-btn {
  background: none; border: none; color: var(--c-soft); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--label-md);
  display: flex; align-items: center; gap: .25rem; padding: .2rem .3rem;
  transition: color .18s var(--ease-out), transform .18s var(--ease-out);
}
:where([data-base="public"]) .heart-btn:hover { color: var(--c-fg); transform: scale(1.08); }
:where([data-base="public"]) .heart-btn[data-hearted="1"] { color: var(--c-accent); }
:where([data-base="public"]) .collect-btn {
  background: none; border: var(--hairline) solid var(--c-line-soft); color: var(--c-soft);
  cursor: pointer; font-size: .9rem; line-height: 1; width: 22px; height: 22px;
  border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); position: relative;
}
:where([data-base="public"]) .collect-btn:hover { color: var(--c-fg); border-color: var(--c-fg); }

:where([data-base="public"]) .collection-picker {
  position: absolute; z-index: 40; min-width: 180px; padding: .4rem;
  background: var(--c-bg); border: var(--hairline) solid var(--c-line); border-radius: var(--radius);
}
:where([data-base="public"]) .collection-picker label {
  display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem;
  font-size: var(--text-xs); color: var(--c-fg); cursor: pointer;
}
:where([data-base="public"]) .collection-picker label:hover { background: var(--c-sunk); }
:where([data-base="public"]) .collection-picker .picker-empty { padding: .3rem .4rem; font-size: var(--text-xs); color: var(--c-soft); }
:where([data-base="public"]) .collection-picker .picker-new { display: flex; gap: .3rem; padding: .4rem; border-top: var(--hairline) solid var(--c-line-soft); margin-top: .3rem; }
:where([data-base="public"]) .collection-picker .picker-new input { flex: 1; font-size: var(--text-xs); padding: .3rem .4rem; }
:where([data-base="public"]) .collection-picker .picker-new button { font-size: var(--label-sm); padding: .3rem .5rem; min-height: 0; }

/* Section header: a heading on a hairline, its count in mono. */
:where([data-base="public"]) .section-header {
  display: flex; align-items: baseline; gap: 1rem;
  margin-top: 2rem; padding-bottom: .5rem;
  border-bottom: var(--hairline) solid var(--c-line);
}
:where([data-base="public"]) .section-header h2 {
  margin: 0; flex: 1;
  font-family: var(--font-sans); font-size: var(--display-5); font-weight: 700;
  letter-spacing: 0; text-transform: none; color: var(--c-fg);
}
:where([data-base="public"]) .section-header h2::after { display: none; }
:where([data-base="public"]) .section-header .count { font-family: var(--font-mono); font-size: var(--label-md); color: var(--c-faint); }

/* Featured carousel. Text sits on a photo behind an ink shade, so it is
   paper-coloured whatever the page's ground. */
:where([data-base="public"]) .carousel {
  position: relative; overflow: hidden;
  margin-bottom: 2rem;
  background: var(--c-sunk);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius);
  aspect-ratio: 21 / 9; max-height: 480px;
}
:where([data-base="public"]) .carousel-track { display: flex; width: 100%; height: 100%; transition: transform .55s var(--ease-out); }
:where([data-base="public"]) .slide { position: relative; flex: 0 0 100%; min-width: 100%; height: 100%; color: var(--paper); text-decoration: none; display: block; }
:where([data-base="public"]) .slide-media { position: absolute; inset: 0; overflow: hidden; }
:where([data-base="public"]) .slide-media img,
:where([data-base="public"]) .slide-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
:where([data-base="public"]) .slide-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--paper-faint); font-size: 5rem;
  background: linear-gradient(135deg, var(--ground-dark), var(--ground-black));
}
:where([data-base="public"]) .slide-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ground-black) 78%, transparent) 0%,
    color-mix(in srgb, var(--ground-black) 45%, transparent) 40%,
    color-mix(in srgb, var(--ground-black) 5%, transparent) 100%);
}
:where([data-base="public"]) .slide-text { position: absolute; left: 2rem; bottom: 2rem; right: 2rem; max-width: 540px; z-index: 2; }
:where([data-base="public"]) .slide-title {
  margin: 0 0 .4rem;
  font-family: var(--font-sans); font-size: var(--display-4); font-weight: 700; line-height: 1.1;
  color: var(--paper);
}
:where([data-base="public"]) .slide-body { margin: 0 0 .8rem; font-size: var(--text-sm); color: var(--paper-soft); line-height: 1.5; }
:where([data-base="public"]) .slide-cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-5);
  background: var(--signal); color: var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--label-md); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}
:where([data-base="public"]) .slide:hover .slide-cta { background: var(--paper); }
:where([data-base="public"]) .carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--tap); height: var(--tap); border-radius: 50%;
  background: color-mix(in srgb, var(--ground-black) 55%, transparent);
  color: var(--paper); border: var(--hairline) solid color-mix(in srgb, var(--paper) 30%, transparent);
  font-size: 1.4rem; line-height: 1; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
}
:where([data-base="public"]) .carousel-arrow:hover { background: color-mix(in srgb, var(--ground-black) 80%, transparent); }
:where([data-base="public"]) .carousel-arrow.prev { left: 1rem; }
:where([data-base="public"]) .carousel-arrow.next { right: 1rem; }
:where([data-base="public"]) .carousel-dots { position: absolute; bottom: 1rem; right: 1.5rem; display: flex; gap: .35rem; z-index: 3; }
:where([data-base="public"]) .carousel-dots .dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none; cursor: pointer;
  background: color-mix(in srgb, var(--paper) 40%, transparent);
}
:where([data-base="public"]) .carousel-dots .dot.active { background: var(--paper); transform: scale(1.2); }
@media (max-width: 640px) {
  :where([data-base="public"]) .carousel { aspect-ratio: 4 / 3; }
  :where([data-base="public"]) .slide-title { font-size: var(--display-5); }
  :where([data-base="public"]) .slide-text { left: 1rem; right: 1rem; bottom: 1rem; }
}

/* Empty state: an open patch bay, waiting to be wired up. */
:where([data-base="public"]) .empty-state {
  text-align: center; padding: 3rem 1.5rem; margin-top: 1rem;
  color: var(--c-soft); background: transparent;
  border: var(--hairline) dashed var(--c-line); border-radius: var(--radius);
}
:where([data-base="public"]) .empty-state .empty-title {
  font-family: var(--font-sans); font-size: var(--display-5); font-weight: 700;
  text-transform: none; letter-spacing: 0; color: var(--c-fg); margin-bottom: .4rem;
}
:where([data-base="public"]) .empty-state .empty-cta { margin-top: 1rem; }


/* ===========================================================================
   8. ADMIN PAGES — what admin_base.html carried inline. Admin is on ink:
      copper for the accent, amber for the one live action.
   =========================================================================== */

:where([data-base="admin"]) .container:has(> .admin-shell) { max-width: 1400px; }

:where([data-base="admin"]) .admin-shell {
  display: grid; grid-template-columns: 220px 1fr; align-items: start;
  min-height: calc(100vh - 72px);
}
:where([data-base="admin"]) .admin-shell.collapsed { grid-template-columns: 56px 1fr; }
@media (max-width: 780px) {
  :where([data-base="admin"]) .admin-shell,
  :where([data-base="admin"]) .admin-shell.collapsed { grid-template-columns: 1fr; }
  :where([data-base="admin"]) .admin-sidebar { position: static !important; height: auto !important; }
}
:where([data-base="admin"]) .admin-sidebar {
  position: sticky; top: 0; align-self: start;
  height: calc(100vh - 72px); overflow-y: auto;
  background: var(--c-sunk);
  border-right: var(--hairline) solid var(--c-line-soft);
  padding: .75rem .5rem;
}
:where([data-base="admin"]) .admin-sidebar-toggle {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: .5rem .6rem; margin-bottom: .5rem;
  background: transparent; border: var(--hairline) solid var(--c-line-soft); border-radius: var(--radius);
  color: var(--c-faint);
  font-family: var(--font-mono); font-size: var(--label-sm); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase; cursor: pointer;
}
:where([data-base="admin"]) .admin-sidebar-toggle:hover { color: var(--c-fg); border-color: var(--c-line); }
:where([data-base="admin"]) .admin-sidebar-toggle svg { display: block; flex-shrink: 0; }
:where([data-base="admin"]) .admin-group { border-bottom: var(--hairline) solid var(--c-line-soft); }
:where([data-base="admin"]) .admin-group:last-child { border-bottom: none; }
:where([data-base="admin"]) .admin-group summary {
  display: flex; align-items: center; gap: .5rem; padding: .6rem;
  font-family: var(--font-mono); font-size: var(--label-sm); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase;
  color: var(--c-faint); cursor: pointer; list-style: none; user-select: none;
}
:where([data-base="admin"]) .admin-group summary svg { display: block; }
:where([data-base="admin"]) .admin-group summary::-webkit-details-marker { display: none; }
:where([data-base="admin"]) .admin-group summary::after { content: '▸'; margin-left: auto; transition: transform .15s; font-size: .7rem; }
:where([data-base="admin"]) .admin-group[open] summary::after { transform: rotate(90deg); }
:where([data-base="admin"]) .admin-group summary:hover { color: var(--c-fg); }
:where([data-base="admin"]) .admin-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .6rem .5rem 1.6rem; margin: .05rem 0;
  color: var(--c-fg); font-size: var(--text-xs); text-decoration: none;
  border-left: 2px solid transparent;
}
:where([data-base="admin"]) .admin-nav a:hover { background: var(--c-bg); text-decoration: none; }
:where([data-base="admin"]) .admin-nav a.active { background: var(--c-bg); border-left-color: var(--c-accent); color: var(--c-accent); }
:where([data-base="admin"]) .admin-nav .nav-badge {
  font-family: var(--font-mono); font-size: var(--label-sm); padding: .05rem .4rem; border-radius: 999px;
  background: var(--c-live); color: var(--c-on-live);
}
:where([data-base="admin"]) .admin-shell.collapsed .admin-sidebar-toggle span.label,
:where([data-base="admin"]) .admin-shell.collapsed .admin-group summary span.label,
:where([data-base="admin"]) .admin-shell.collapsed .admin-group summary::after,
:where([data-base="admin"]) .admin-shell.collapsed .admin-nav a span.label,
:where([data-base="admin"]) .admin-shell.collapsed .admin-nav .nav-badge { display: none; }
:where([data-base="admin"]) .admin-shell.collapsed .admin-group[open] .admin-nav { display: none; }
:where([data-base="admin"]) .admin-shell.collapsed .admin-group summary { justify-content: center; }
:where([data-base="admin"]) .admin-shell.collapsed .admin-nav a { justify-content: center; padding-left: .6rem; }
:where([data-base="admin"]) .admin-shell.collapsed .admin-group:hover .admin-nav {
  display: block; position: absolute; left: 56px; z-index: 40;
  background: var(--c-sunk); border: var(--hairline) solid var(--c-line);
  min-width: 190px; padding: .4rem 0;
}
:where([data-base="admin"]) .admin-shell.collapsed .admin-nav a span.label { display: inline; }
:where([data-base="admin"]) .admin-shell.collapsed .admin-nav a { padding-left: .8rem; justify-content: flex-start; }
:where([data-base="admin"]) .admin-content { min-width: 0; padding: 1.5rem; }

/* Admin panels sit on the ink ground, one step up. */
:where([data-base="admin"]) .panel-header { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--space-md); }
:where([data-base="admin"]) .panel-header .panel-title {
  font-family: var(--font-sans); font-size: var(--text-md); font-weight: 600; color: var(--c-fg); margin: 0;
}
:where([data-base="admin"]) .panel-header .panel-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); }
:where([data-base="admin"]) .panel-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  background: transparent; border: var(--hairline) solid var(--c-line-soft); border-radius: var(--radius);
  color: var(--c-accent);
}
:where([data-base="admin"]) .panel-icon svg { display: block; width: 17px; height: 17px; }
:where([data-base="admin"]) .panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }

:where([data-base="admin"]) .ps-stat {
  font-family: var(--font-sans); font-size: var(--display-4); font-weight: 700;
  line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--c-fg); margin: 0;
}
:where([data-base="admin"]) .ps-stat-label {
  font-family: var(--font-mono); font-size: var(--label-sm); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase; color: var(--c-faint); margin: 0 0 .35rem;
}
:where([data-base="admin"]) .ps-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
:where([data-base="admin"]) .ps-table th {
  text-align: left;
  font-family: var(--font-mono); font-size: var(--label-sm); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase; color: var(--c-faint);
  padding: .75rem 1rem; border-bottom: var(--hairline) solid var(--c-line); background: transparent;
}
:where([data-base="admin"]) .ps-table td {
  padding: .75rem 1rem; border-bottom: var(--hairline) solid var(--c-line-soft);
  color: var(--c-fg); vertical-align: middle;
}
:where([data-base="admin"]) .ps-table tbody tr:last-child td { border-bottom: none; }
:where([data-base="admin"]) .ps-table tbody tr:hover { background: var(--c-bg); }
:where([data-base="admin"]) .ps-table.ps-table-compact th,
:where([data-base="admin"]) .ps-table.ps-table-compact td { padding: .5rem .75rem; }
:where([data-base="admin"]) .ps-section { margin-top: 2rem; }
:where([data-base="admin"]) .ps-section:first-child { margin-top: 0; }
:where([data-base="admin"]) .ps-section-title {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: var(--label-sm); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase; color: var(--c-faint);
  margin: 0 0 .85rem;
}
:where([data-base="admin"]) .ps-section-title .ps-count { font-family: var(--font-mono); color: var(--c-faint); }
:where([data-base="admin"]) .ps-toolbar,
:where([data-base="admin"]) .ps-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
:where([data-base="admin"]) .ps-toolbar input,
:where([data-base="admin"]) .ps-filterbar input,
:where([data-base="admin"]) .ps-toolbar select,
:where([data-base="admin"]) .ps-filterbar select { width: auto; }
:where([data-base="admin"]) .ps-empty { text-align: center; color: var(--c-soft); padding: 2.5rem 1rem; font-size: var(--text-sm); }
:where([data-base="admin"]) .ps-row {
  display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem;
  border-bottom: var(--hairline) solid var(--c-line-soft);
}
:where([data-base="admin"]) .ps-row:last-child { border-bottom: none; }
:where([data-base="admin"]) .ps-row:hover { background: var(--c-bg); }

/* Destructive controls: the accent, outlined (main.css aliases
   .admin-danger-btn to .btn-danger; the colours come from the remap). */


/* ===========================================================================
   9. SVG DRAWINGS — old-palette presentation attributes
   ---------------------------------------------------------------------------
   The old pages draw placeholder art and icons with colours written as SVG
   attributes (stroke="#3D8BFD"). Any CSS rule outranks a presentation
   attribute, so these re-point them without touching the drawings. The
   attribute match is case-insensitive.
   =========================================================================== */

:where([data-system="legacy"]) [fill="#3D8BFD" i] { fill: var(--c-accent); }
:where([data-system="legacy"]) [fill="#7CB5FF" i] { fill: var(--c-accent); }
:where([data-system="legacy"]) [fill="#23B8A2" i] { fill: var(--c-fg); }
:where([data-system="legacy"]) [fill="#5BE0CB" i] { fill: var(--c-fg); }
:where([data-system="legacy"]) [fill="#2A313C" i] { fill: var(--c-line-soft); }
:where([data-system="legacy"]) [fill="#3B4450" i] { fill: var(--c-line); }
:where([data-system="legacy"]) [fill="#9AA5B4" i] { fill: var(--c-soft); }
:where([data-system="legacy"]) [fill="#9FC2EE" i] { fill: var(--c-accent); }
:where([data-system="legacy"]) [fill="#EAF4FF" i] { fill: var(--c-bg); }
:where([data-system="legacy"]) [stroke="#3D8BFD" i] { stroke: var(--c-accent); }
:where([data-system="legacy"]) [stroke="#7CB5FF" i] { stroke: var(--c-accent); }
:where([data-system="legacy"]) [stroke="#23B8A2" i] { stroke: var(--c-fg); }
:where([data-system="legacy"]) [stroke="#5BE0CB" i] { stroke: var(--c-fg); }
:where([data-system="legacy"]) [stroke="#2A313C" i] { stroke: var(--c-line-soft); }
:where([data-system="legacy"]) [stroke="#3B4450" i] { stroke: var(--c-line); }
:where([data-system="legacy"]) [stroke="#9AA5B4" i] { stroke: var(--c-soft); }
:where([data-system="legacy"]) [stroke="#9FC2EE" i] { stroke: var(--c-accent); }
:where([data-system="legacy"]) [stroke="#EAF4FF" i] { stroke: var(--c-bg); }
:where([data-system="legacy"]) [stop-color="#3D8BFD" i] { stop-color: var(--c-accent); }
:where([data-system="legacy"]) [stop-color="#7CB5FF" i] { stop-color: var(--c-accent); }
:where([data-system="legacy"]) [stop-color="#23B8A2" i] { stop-color: var(--c-fg); }
:where([data-system="legacy"]) [stop-color="#5BE0CB" i] { stop-color: var(--c-fg); }
:where([data-system="legacy"]) [stop-color="#2A313C" i] { stop-color: var(--c-line-soft); }
:where([data-system="legacy"]) [stop-color="#3B4450" i] { stop-color: var(--c-line); }
:where([data-system="legacy"]) [stop-color="#9AA5B4" i] { stop-color: var(--c-soft); }
:where([data-system="legacy"]) [stop-color="#9FC2EE" i] { stop-color: var(--c-accent); }
:where([data-system="legacy"]) [stop-color="#EAF4FF" i] { stop-color: var(--c-bg); }