/* ============================================================
   TIDAL TRIGGER — ADMIN CHROME (B1 redesign, 2026-07-19)

   LIGHT chrome: black / grey / single accent on white. Everything here is namespaced
   `.adm-*` so it can never collide with the site's `.tt-*` classes (the shared header +
   the preview islands both ship real site CSS). The ONLY site rules that touch bare
   elements come from base.css (`html,body{background:#0a0320}`, `:focus-visible`) — they
   arrive via the injected /tt-tokens.css AFTER this file, so the few resets below use
   higher-specificity compound selectors (`html body`) to win regardless of order.

   Inputs / textareas / previews are DARK ISLANDS: they show the real site colours so the
   copy reads the way it will on the page.
   ============================================================ */

:root {
  --adm-accent: #6a2bd6;         /* single accent (violet) */
  --adm-accent-ink: #ffffff;
  --adm-ink: #111318;
  --adm-grey-9: #1c1f26;
  --adm-grey-7: #4a4f5c;
  --adm-grey-5: #6d7280;         /* 4.81:1 on white — passes WCAG 1.4.3 (styles 9px chips + muted copy) */
  --adm-grey-3: #c7ccd6;
  --adm-grey-1: #eef0f4;
  --adm-line: #e2e5ec;
  --adm-bg: #f6f7fa;
  --adm-card: #ffffff;
  --adm-island: #0a0320;         /* the real site background, for dark islands */
  --adm-island-line: #2a2350;
  --adm-danger: #c02640;
  --adm-good: #1f8a4c;
  --adm-radius: 12px;
  --adm-radius-sm: 8px;
  --adm-shadow: 0 1px 2px rgba(17, 19, 24, .06), 0 8px 24px rgba(17, 19, 24, .06);
  --adm-mono: ui-monospace, "SF Mono", "Share Tech Mono", Menlo, Consolas, monospace;
  --adm-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Beat base.css `html,body{background:#0a0320}` (arrives via tt-tokens.css after us). */
html body {
  margin: 0;
  background: var(--adm-bg);
  color: var(--adm-ink);
  font-family: var(--adm-sans);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

/* Keep the shared header always legible on a light page: force the solid dark fill the
   site only shows past 40px of scroll (specificity beats `.tt-nav`). */
[data-tt-header].tt-nav {
  background: rgba(10, 3, 32, .92);
  border-bottom-color: rgba(255, 255, 255, .12);
}

/* ---------- shell ---------- */
.adm-shell { display: flex; align-items: flex-start; gap: 0; max-width: 1400px; margin: 0 auto; }
.adm-side {
  flex: 0 0 220px;
  position: sticky;
  top: 64px;
  align-self: flex-start;
  padding: 26px 14px 40px;
  min-height: 60vh;
}
.adm-side__group { font: 600 10px/1 var(--adm-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--adm-grey-5); margin: 20px 10px 8px; }
.adm-side__group:first-child { margin-top: 0; }
.adm-navlink {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; margin: 1px 0; border-radius: var(--adm-radius-sm);
  font: 500 14px/1.2 var(--adm-sans); color: var(--adm-grey-7); text-decoration: none; cursor: pointer;
}
.adm-navlink:hover { background: var(--adm-grey-1); color: var(--adm-ink); }
.adm-navlink.is-active { background: var(--adm-accent); color: var(--adm-accent-ink); }
.adm-navlink.is-locked { color: var(--adm-grey-5); }
.adm-navlink__badge {
  min-width: 18px; padding: 1px 6px; border-radius: 999px; text-align: center;
  font: 600 10px var(--adm-mono); background: var(--adm-grey-3); color: var(--adm-ink);
}
.adm-navlink.is-active .adm-navlink__badge { background: rgba(255, 255, 255, .28); color: #fff; }
.adm-navlink__badge.some { background: #e6b800; color: #201a00; }
.adm-navlink__lock { font-size: 12px; color: var(--adm-grey-5); }

.adm-main { flex: 1 1 auto; min-width: 0; padding: 26px 26px 120px; }

/* ---------- gate ---------- */
.adm-gate { text-align: center; padding: 80px 20px; }
.adm-gate__title { font: 700 22px var(--adm-sans); letter-spacing: .01em; margin: 0 0 6px; }
.adm-gate__hint { color: var(--adm-grey-5); margin: 0 0 22px; }
.adm-gate__err { color: var(--adm-danger); font-size: 13px; margin-top: 16px; }

/* ---------- userbar + toolbar ---------- */
.adm-userbar { display: flex; align-items: center; gap: 10px; font: 13px var(--adm-mono); color: var(--adm-grey-5); margin: 0 0 18px; }
.adm-userbar b { color: var(--adm-ink); font-weight: 600; }
/* Works as an <a> OR a real <button> (the signout control is a button for keyboard operation). */
.adm-link { color: var(--adm-accent); cursor: pointer; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; }
.adm-link:hover { text-decoration: underline; }

/* Explicit focus ring on the admin's own controls: base.css :focus-visible (via tt-tokens.css)
   is cyan and tuned for the site — guarantee a visible, on-brand ring here regardless of load
   order (WCAG 2.4.7). */
.adm-btn:focus-visible, .adm-link:focus-visible, .adm-rec__ctrl:focus-visible,
.adm-rec__input:focus-visible, .adm-navlink:focus-visible, .adm-search:focus-visible {
  outline: 2px solid var(--adm-accent); outline-offset: 2px;
}

.adm-toolbar { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; flex-wrap: wrap; }
.adm-search {
  flex: 1 1 320px; min-width: 200px; height: 40px; padding: 0 14px;
  font: 14px var(--adm-sans); color: var(--adm-ink);
  background: var(--adm-card); border: 1px solid var(--adm-grey-3); border-radius: var(--adm-radius-sm);
}
.adm-viewlive { font: 13px var(--adm-mono); white-space: nowrap; }

/* ---------- pages ---------- */
.adm-page[hidden] { display: none; }
.adm-page__head { margin: 0 0 6px; }
.adm-page__title { font: 700 20px var(--adm-sans); margin: 0; }
.adm-page__sub { font: 13px var(--adm-mono); color: var(--adm-grey-5); margin: 4px 0 20px; }

/* ---------- cards ---------- */
.adm-card {
  background: var(--adm-card); border: 1px solid var(--adm-line); border-radius: var(--adm-radius);
  padding: 22px 22px 24px; margin: 0 0 22px; box-shadow: var(--adm-shadow);
}
.adm-card > h2 { font: 600 14px var(--adm-sans); letter-spacing: .02em; margin: 0 0 4px; }
.adm-card > .adm-hint { font-size: 13px; color: var(--adm-grey-5); margin: 0 0 16px; line-height: 1.5; }
.adm-card code { font: 12px var(--adm-mono); background: var(--adm-grey-1); padding: 1px 5px; border-radius: 4px; }

/* ---------- fields ---------- */
.adm-field { margin: 0 0 16px; }
.adm-field[hidden] { display: none; }
.adm-field__lrow { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.adm-field__label { flex: 1; font: 600 11px var(--adm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--adm-grey-7); }
.adm-chip { font: 600 9px var(--adm-mono); letter-spacing: .12em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--adm-grey-3); color: var(--adm-grey-5); background: #fff; }
.adm-chip.edited { color: #8a6d00; border-color: #e6b800; background: #fff8df; }
.adm-chip.override { color: #0a6a86; border-color: #7bc7dc; background: #eaf8fc; }
.adm-revert { font: 11px var(--adm-mono); color: var(--adm-accent); cursor: pointer; background: none; border: none; padding: 2px 4px; display: none; }
.adm-field.is-dirty .adm-revert, .adm-field.has-override .adm-revert { display: inline; }

/* Inputs + textareas are DARK ISLANDS — real site colours. */
.adm-field input[type=text],
.adm-field textarea,
.adm-cfg input[type=text] {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  font: 15px var(--adm-sans); color: #fff;
  background: var(--adm-island); border: 1px solid var(--adm-island-line); border-radius: var(--adm-radius-sm);
}
.adm-field input[type=text], .adm-cfg input[type=text] { min-height: 42px; padding: 0 12px; }
.adm-field textarea { min-height: 70px; line-height: 1.5; resize: vertical; overflow: hidden; }
.adm-field input:focus, .adm-field textarea:focus, .adm-cfg input:focus { outline: 2px solid var(--adm-accent); outline-offset: 1px; }

/* 'lines' LIST EDITOR — one row per item, drag to reorder, add/remove. Writes back through a
   hidden <textarea> (the canonical field), so the save/dirty contract is untouched. */
/* RECORD EDITOR — generalized 'lines' (compact, one input/row) + 'cards' (block, many fields).
   The canonical value lives in a hidden <textarea class="adm-record-src">. Rows reorder by drag
   AND by keyboard (up/down); all controls are >=24x24 CSS px (WCAG 2.5.8). */
.adm-field textarea.adm-record-src { display: none; }
.adm-rec { background: var(--adm-island); border: 1px solid var(--adm-island-line); border-radius: var(--adm-radius-sm); padding: 8px; }
.adm-rec__row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.adm-rec__row--card { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px; margin: 8px 0; background: #120832; border: 1px solid var(--adm-island-line); border-radius: 8px; }
.adm-rec__row.dragging { opacity: .4; }

/* controls: handle + up/down/delete, all >=24x24 */
.adm-rec__ctrl {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px; width: 24px; height: 24px; padding: 0;
  border-radius: 6px; border: 1px solid var(--adm-island-line); background: transparent;
  color: #b9a9ff; cursor: pointer; font-size: 15px; line-height: 1;
}
.adm-rec__ctrl:hover { border-color: var(--adm-accent); color: #fff; }
.adm-rec__handle { cursor: grab; -webkit-user-select: none; user-select: none; }
.adm-rec__rm:hover { border-color: var(--adm-danger); color: #ff8ea0; }
.adm-rec__ctrls { display: flex; align-items: center; gap: 6px; }
.adm-rec__num { flex: 1; font: 600 11px var(--adm-mono); letter-spacing: .1em; text-transform: uppercase; color: #b9a9ff; }

.adm-rec__fields { display: flex; flex-direction: column; gap: 4px; }
.adm-rec__flabel { font: 600 10px var(--adm-mono); letter-spacing: .06em; text-transform: uppercase; color: #8f86c4; margin-top: 6px; }
.adm-rec__input, .adm-rec__row--compact .adm-rec__input {
  flex: 1; min-height: 38px; padding: 8px 10px; font: 15px var(--adm-sans); color: #fff;
  background: #140a33; border: 1px solid var(--adm-island-line); border-radius: 6px; box-sizing: border-box; width: 100%;
}
textarea.adm-rec__input { min-height: 42px; line-height: 1.45; resize: vertical; overflow: hidden; }
select.adm-rec__input { min-height: 38px; }
.adm-rec__preview { margin-top: 4px; }
.adm-rec__add { margin-top: 6px; min-height: 32px; font: 12px var(--adm-mono); color: #b9a9ff; background: transparent; border: 1px dashed var(--adm-island-line); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.adm-rec__add:hover { border-color: var(--adm-accent); color: #fff; }

/* Preview island: the shadow-DOM host that renders the copy in REAL site CSS. */
.adm-preview { margin-top: 8px; border-radius: var(--adm-radius-sm); overflow: hidden; }
.adm-preview:empty { display: none; }

/* ---------- config / settings ---------- */
.adm-cfg label { display: block; font: 600 11px var(--adm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--adm-grey-7); margin: 14px 0 5px; }
.adm-cfg .adm-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.adm-cfg .adm-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--adm-accent); }
.adm-cfg .adm-row label { margin: 0; text-transform: none; letter-spacing: 0; font: 14px var(--adm-sans); color: var(--adm-grey-9); }

.adm-testers { font: 13px/1.7 var(--adm-mono); color: var(--adm-grey-9); background: var(--adm-grey-1); border: 1px solid var(--adm-line); border-radius: var(--adm-radius-sm); padding: 12px 14px; margin: 12px 0 0; white-space: pre-wrap; word-break: break-all; max-height: 260px; overflow: auto; }
.adm-count b { color: var(--adm-accent); font: 700 20px var(--adm-sans); }

/* ---------- locked legal ---------- */
.adm-locked { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--adm-line); border-radius: var(--adm-radius-sm); margin: 0 0 10px; background: var(--adm-grey-1); }
.adm-locked__lock { font-size: 16px; color: var(--adm-grey-5); }
.adm-locked__body { flex: 1; }
.adm-locked__title { font: 600 14px var(--adm-sans); }
.adm-locked__note { font: 12px var(--adm-mono); color: var(--adm-grey-5); }

/* ---------- orphans ---------- */
.adm-orphan { border: 1px solid #f0d3a6; background: #fffaf0; border-radius: var(--adm-radius-sm); padding: 12px 14px; margin: 0 0 10px; }
.adm-orphan__key { font: 600 13px var(--adm-mono); color: #8a5a00; }
.adm-orphan__val { font: 13px var(--adm-mono); color: var(--adm-grey-7); white-space: pre-wrap; word-break: break-word; margin: 6px 0; }

/* ---------- buttons ---------- */
.adm-btn { font: 600 14px var(--adm-sans); padding: 10px 16px; border-radius: var(--adm-radius-sm); border: 1px solid var(--adm-grey-3); cursor: pointer; background: #fff; color: var(--adm-ink); }
.adm-btn:hover { border-color: var(--adm-grey-5); }
.adm-btn--primary { background: var(--adm-accent); color: var(--adm-accent-ink); border-color: var(--adm-accent); }
.adm-btn--primary:hover { background: #5a22ba; border-color: #5a22ba; }
.adm-btn--danger { color: var(--adm-danger); border-color: #e6adb8; background: #fff; }
.adm-btn--danger:hover { background: var(--adm-danger); color: #fff; border-color: var(--adm-danger); }
.adm-btn:disabled { opacity: .5; cursor: default; }
.adm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- global save bar ---------- */
.adm-savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  padding: 12px 26px; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--adm-line);
  box-shadow: 0 -6px 20px rgba(17, 19, 24, .06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.adm-savebar__n { font: 12px var(--adm-mono); color: var(--adm-grey-5); margin-right: auto; }
.adm-savebar__n.some { color: #8a6d00; }

/* ---------- toast ---------- */
.adm-toast { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 200; background: var(--adm-grey-9); color: #fff; border-radius: var(--adm-radius-sm); padding: 10px 18px; font: 14px var(--adm-sans); box-shadow: var(--adm-shadow); opacity: 0; transition: opacity .2s; pointer-events: none; }
.adm-toast.show { opacity: 1; }
.adm-toast.err { background: var(--adm-danger); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .adm-shell { flex-direction: column; }
  .adm-side { position: static; flex-basis: auto; width: 100%; padding: 14px 18px 0; display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
  .adm-side__group { width: 100%; margin: 10px 6px 2px; }
  .adm-main { padding: 18px 18px 120px; width: 100%; }
}
@media (min-width: 2200px) { html body { zoom: 1.3; } }
@media (min-width: 3400px) { html body { zoom: 1.65; } }

/* ---- Header FOUC guard (2026-07-19) ------------------------------------------------
   The injected .tt-nav band repaints when the display webfonts land (metric swap =
   the flash). Reserve its full height so nothing below jumps, keep it invisible until
   fonts settle (admin.js adds .adm-fonts-ready on document.fonts.ready), and let a
   pure-CSS timer reveal it regardless by 1.2s — the band can never stay hidden. */
.tt-nav { min-height: 69px; visibility: hidden; animation: adm-nav-reveal 0s 1.2s forwards; }
@keyframes adm-nav-reveal { to { visibility: visible; } }
html.adm-fonts-ready .tt-nav { visibility: visible; animation: none; }

/* ---- X1 edit history (2026-07-19) ---------------------------------------------------- */
.adm-hist { background: none; border: 0; padding: 4px 8px; min-height: 24px; font: 11px var(--adm-mono); color: var(--adm-accent); cursor: pointer; }
.adm-hist[aria-expanded="true"] { text-decoration: underline; }
.adm-hist__box { margin: 6px 0 2px; padding: 8px 10px; background: var(--adm-grey-1); border: 1px solid var(--adm-line); border-radius: var(--adm-radius-sm); font: 12px var(--adm-mono); color: var(--adm-grey-7); }
.adm-hist__entry { display: flex; align-items: center; gap: 10px; padding: 3px 0; flex-wrap: wrap; }
.adm-hist__when { color: var(--adm-grey-5); white-space: nowrap; }
.adm-hist__what { flex: 1; min-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-hist__restore { background: #fff; border: 1px solid var(--adm-grey-3); border-radius: 6px; padding: 3px 9px; min-height: 24px; font: 600 11px var(--adm-sans); color: var(--adm-ink); cursor: pointer; }
.adm-hist__restore:hover { border-color: var(--adm-accent); color: var(--adm-accent); }