/* ============================================================================
   ATF THEME LAYER — "the Arts Gallery, not the Construction Site"
   Loads AFTER tokens.css + components.css. Overrides tokens; adds two primitives.
   Never edit the vendored files — see VENDOR.md.

   Owner, 2026-08-21: "It was sleek, high-end looking, chique — like a sophisticated
   Arts Gallery. Whereas this current one looks and feels like a Brick Mortar heavy
   Construction Site. Everything is so big and strong — the buttons, the colours,
   the boxes."

   The diagnosis, from driving the old build: too many elements ask for attention at
   the same time. The fix is weight, density and restraint — NOT new colours.
   Rules in full: .ai/DESIGN-DIRECTION-GALLERY.md
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1 · RE-TOKEN TO ATF  (Golden Rule 10)
   Her system is HitCourt navy #0e2c5c + gold #f5b21e at 10px radius.
   ATF law is blue #0e4d92 + gold #d99a1c at 8px. Same structure, our values.
   --------------------------------------------------------------------------- */
:root {
  --brand-navy:      #0e4d92;
  --brand-navy-700:  #0c4483;
  --brand-navy-800:  #0a3a70;
  --brand-navy-900:  #07294f;

  /* THE GOLD STAYS. The hex was never the problem — the dosage was. It is a
     HIGHLIGHT, never a fill: one gold moment per screen, and that is the law
     (G5). If you are reaching for --brand-gold as a button background, stop. */
  --brand-gold:      #d99a1c;
  --brand-gold-600:  #c2870f;
  --brand-gold-050:  #fdf6e7;
  --brand-gold-glow: #e0b04a;

  --accent:            #0e4d92;
  --accent-600:        #0a3a70;
  --accent-soft:       #e9f0f9;
  --accent-ink:        #0a3a70;
  --accent-strong:     #0e4d92;
  --accent-strong-600: #0a3a70;

  /* 8px radius, never pills (Golden Rule 10). --radius-pill is kept only for
     avatars and dots, which are genuinely round. */
  /* T17 (Owner 2026-08-22): type comes down a notch — a card title barely larger than its body. */
  --fs-2: 1.15rem;   /* card & section headings (was 1.3) */
  --fs-3: 1.5rem;    /* page headings (was 1.75) */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 8px;

  /* Hairline rules and near-invisible shadows. The old build's cards are held
     by a 1px line, not by a drop shadow. */
  --rule:        #e3e9f1;
  --rule-strong: #d3dbe7;
  --shadow-sm:   0 1px 1px rgba(14, 77, 146, .04);
  --shadow:      0 1px 2px rgba(14, 77, 146, .05);
  --shadow-lg:   0 8px 24px -14px rgba(14, 77, 146, .22);

  --surface-2: #f4f7fb;

  /* Semantic colours keep their meaning, but NEVER green for "active/ok" in the
     UI chrome — Golden Rule 10 is explicit. --success stays defined because a
     real success toast still needs it; a status pill uses --accent instead. */
  --warning: #d99a1c; --warning-soft: #fdf6e7; --warning-ink: #8a5d0e;
}

:root[data-theme="dark"] {
  --accent:            #6aa5e2;
  --accent-600:        #85b8ea;
  --accent-soft:       #14263d;
  --accent-ink:        #a8cbf0;
  --accent-strong:     #2f74c8;
  --accent-strong-600: #4489dc;
  --brand-gold:        #e5b344;
  --rule:              #23303f;
  --rule-strong:       #34404f;
  --shadow-sm:         0 1px 1px rgba(0, 0, 0, .3);
  --shadow:            0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lg:         0 8px 24px -14px rgba(0, 0, 0, .6);
}

/* ---------------------------------------------------------------------------
   2 · GALLERY WEIGHT — quieten what already exists
   --------------------------------------------------------------------------- */

/* Cards are held by a hairline, not a shadow, and never nested three deep. */
.card { border: 1px solid var(--rule); box-shadow: var(--shadow-sm); }
.card .card { box-shadow: none; }

/* One badge per card (G-design rule 5). Small, quiet, not a traffic light. */
.badge {
  font-weight: var(--fw-medium);
  font-size: var(--fs--2);
  letter-spacing: .02em;
  padding: .28em .62em;
  border-radius: var(--radius-sm);
}

/* Buttons stop shouting. A filled accent button is a page's ONE loud element;
   everything else is soft or ghost. */
.btn { font-weight: var(--fw-medium); }
.btn-sm { font-size: var(--fs--1); }

/* Table: hairline rules, quiet uppercase head, and room to breathe. */
/* components.css keeps table cells on one line inside .table-responsive but never makes the wrapper
   scroll — on a 390px phone the table widened the whole page (T20 drive). The wrapper scrolls; paint is
   contained so popups/absolute children cannot widen the document while clipped. */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
/* Golden Rule 10 — ATF blue, never green: a confirmation is calm blue, not a green banner. */
.alert-success { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft); }
.table > :not(caption) > * > * { padding: .82rem .9rem; }
.table > thead th {
  font-size: var(--fs--2);
  font-weight: var(--fw-semi);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
.table > tbody > tr > td { border-bottom: 1px solid var(--rule); }
.table > tbody > tr:last-child > td { border-bottom: 0; }

/* Numbers that line up in a column must actually line up. */
.tnum, .table td.num, .list-row .lr-count { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   3 · NEW — .list-row
   The gallery's workhorse, and the single biggest difference between the old
   build and this one. Old: nine grouped cards whose rows each carry a label, a
   grey explanation, a right-aligned count and a chevron. Now: fourteen flat
   tiles with an icon and a word. Same content, completely different legibility.
   --------------------------------------------------------------------------- */
.list-rows { display: flex; flex-direction: column; }

.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  transition: background-color .12s ease;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--surface-2); }
.list-row:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.list-row .lr-main { min-width: 0; flex: 1; }

.list-row .lr-label {
  display: block;
  font-size: var(--fs-0);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: 1.35;
}

/* The grey sub-line carries the detail so it never competes with the label. */
.list-row .lr-sub {
  display: block;
  font-size: var(--fs--1);
  color: var(--ink-3);
  line-height: 1.4;
  margin-top: 1px;
}

.list-row .lr-count {
  font-size: var(--fs--1);
  color: var(--ink-3);
  flex: 0 0 auto;
}

.list-row .lr-chev {
  flex: 0 0 auto;
  color: var(--ink-3);
  opacity: .75;
  display: inline-flex;
}
.list-row:hover .lr-chev { opacity: 1; }

/* A row for something not built yet: visibly present, deliberately quiet. */
.list-row.is-soon { pointer-events: none; }
.list-row.is-soon .lr-label { color: var(--ink-3); font-weight: var(--fw-normal); }
.list-row.is-soon .lr-chev { display: none; }

/* ---------------------------------------------------------------------------
   4 · NEW — .chip-soon
   Honesty as a component. The old hub showed the WHOLE shape of the product and
   marked what was not ready with a small grey chip, so the page felt complete
   without lying. Owner, 2026-08-21: "unbuilt features sitting there as quiet
   grey 'Coming Soon' chips, so the page shows the whole shape of the product
   while staying honest."
   NEVER a dead link. Either it works, or it wears this.
   --------------------------------------------------------------------------- */
.chip-soon {
  display: inline-block;
  flex: 0 0 auto;
  font-size: var(--fs--2);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: .1em .55em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   5 · The hub grid — nine calm cards, not fourteen shouting tiles
   --------------------------------------------------------------------------- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
  align-items: start;
}

.hub-card .hub-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.hub-card .hub-title { margin: 0; font-size: var(--fs-1); font-weight: var(--fw-semi); line-height: 1.3; }
.hub-card .hub-desc { margin: 2px 0 0; font-size: var(--fs--1); color: var(--ink-3); line-height: 1.45; }

/* Pastel icon badge — hers, at the old build's smaller, quieter size. */
.hub-card .icon-circle { width: 38px; height: 38px; font-size: .95rem; }

/* ---------------------------------------------------------------------------
   6 · THE ONE GOLD MOMENT (G5)
   Gold marks the single most important thing on a page. Apply .gold-focus to
   that one element. If two things on a screen wear gold, one of them is wrong.
   --------------------------------------------------------------------------- */
.gold-focus:focus-within,
.gold-focus:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.rule-gold { border: 0; border-top: 2px solid var(--brand-gold); width: 34px; margin: 0 0 14px; }

/* ---------------------------------------------------------------------------
   7 · Mobile-first (Golden Rule 12) — the phone view IS the product
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hub-grid { grid-template-columns: 1fr; gap: 12px; }
  .list-row { padding: 13px 0; }          /* a comfortable 44px tap target */
  .list-row .lr-sub { font-size: var(--fs--2); }
}

@media (prefers-reduced-motion: reduce) {
  .list-row { transition: none; }
}

/* ---------------------------------------------------------------------------
   8 · Gaps found by DRIVING the rebuilt admin screen, not by reading the CSS
   Her components.css assumes Bootstrap is present for `.visually-hidden` and for
   `.pagination` itself (it themes `.page-link`/`.page-item` but never lays the
   list out). We do not load Bootstrap, so both were missing — the "Search" label
   rendered visibly and the pager collapsed into "Previous|1 2 3 4 Next".
   --------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pagination { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 6px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .12s ease, border-color .12s ease;
}
.pagination .page-link:hover { background: var(--surface-2); border-color: var(--rule-strong); }
.pagination .page-link:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.pagination .page-item.active .page-link { font-weight: var(--fw-semi); }
.pagination .page-item.disabled .page-link { pointer-events: none; opacity: .55; }

/* A .list-row used as a CHECKBOX row: the control must align to the LABEL's first line, not to the
   vertical centre of a two-line block, or it reads as floating below the thing it belongs to.
   Found by looking at the rendered Admins grant screen, not at the CSS. */
.list-row:has(> input[type="checkbox"]) { align-items: flex-start; }
.list-row > input[type="checkbox"] { margin-top: .28em; }
.list-row > input[type="checkbox"] + .lr-main { padding-top: 0; }

/* ── ATF overrides on vendored components (review 2026-08-28) ─────────────────────
   components.css is READ-ONLY (VENDOR.md); both fixes below therefore live here, and
   this file always loads after it. */

/* 1 · .ds-search killed the focus ring with `outline: none` and put nothing in its place, so a
   keyboard user tabbing into the Control Room search had NO visible focus at all. The ring goes on
   the wrapper — the pill is one control to the eye — and only for :focus-visible, so a mouse click
   stays quiet. */
.ds-search:focus-within { border-color: var(--accent); }
.ds-search:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-search input:focus-visible { outline: none; }

/* 2 · Toasts stack at bottom:20px right:20px — exactly where the ATF Assistant bubble lives (a 54px
   circle at right:18px bottom:18px), so each hid the other. Lifting the stack clears the bubble and
   still reads as bottom-right. */
.ds-toasts { bottom: 88px; }