/* Admin UI styles (GL-09 §1). Minimal, no framework; every value comes from
   tokens.css (UI revamp, owner 2026-09-03) — dark-only, compact density,
   violet accent matching the extension. Loaded as an external stylesheet
   because the CSP the API sits behind forbids inline styles (§8/AU-7). */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* Wide shell for the browse grids (GL-18); auth cards stay reading-width. */
.wrap { max-width: 1440px; margin: 0 auto; padding: var(--space-5) var(--space-5) var(--space-8); }
.card.narrow { max-width: 420px; margin-left: auto; margin-right: auto; margin-top: var(--space-8); }

.head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.head h1 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0;
}
.nav { display: flex; align-items: center; gap: var(--space-2); flex: 1; }
/* the hidden attribute must win over the flex rule above (login view) */
.nav[hidden] { display: none; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.divider { width: 1px; height: 1.1em; background: var(--border-strong); }

h2 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-3);
}

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-3);
  padding: var(--space-4);
  margin-top: var(--space-4);
  box-shadow: var(--shadow-1);
}

form label {
  display: block;
  margin-bottom: var(--space-3);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

input {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-2);
}
input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: transparent; }

button {
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-2);
  background: var(--accent-solid);
  color: var(--accent-fg);
  cursor: pointer;
}
button:hover { background: var(--accent-solid-hover); }
button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

button.link {
  background: none;
  color: var(--accent-text);
  padding: var(--space-1) var(--space-2);
}
button.link:hover { background: var(--accent-dim); border-radius: var(--radius-1); }
button.link.danger { color: var(--danger); }
button.link.danger:hover { background: var(--danger-dim); }

.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.gap { gap: var(--space-3); }
.row.gap input { width: auto; flex: 1 1 12rem; margin-top: 0; }

.muted { color: var(--text-muted); font-size: var(--text-sm); }
.error { color: var(--danger); margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.status { color: var(--text-secondary); margin: var(--space-3) 0 0; font-size: var(--text-sm); }

.note {
  background: var(--accent-dim);
  color: var(--accent-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2);
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

code {
  background: var(--surface-sunken);
  padding: 1px var(--space-1);
  border-radius: var(--radius-1);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); }
th, td {
  text-align: left;
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}
th {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* ---- browse views (GL-18) ------------------------------------------------ */

/* One typographic voice for the whole nav bar: Manrope, same size and
   whiteness for tabs and Log out; only the username steps back half a shade. */
#nav a, #nav button.link {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-2);
}
#nav a:hover { background: var(--gray-3); }
#nav a.active { background: var(--gray-4); color: var(--gray-12); }
#nav button.link:hover { background: var(--gray-3); color: var(--text-primary); }
#whoami { color: var(--text-secondary); font-size: var(--text-base); }

.small { font-size: var(--text-xs); }

/* Wayfinding must read, not whisper: back links and the page range sit at
   body brightness, only one step below the nav. */
a.backlink {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
a.backlink:hover { color: var(--accent-text); }
#ads-range { color: var(--text-secondary); font-size: var(--text-base); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.brand-card {
  text-decoration: none;
  color: var(--text-primary);
  display: block;
  margin-top: 0;
  padding: var(--space-5);
}
.brand-card:hover { border-color: var(--border-strong); background: var(--gray-3); box-shadow: var(--shadow-2); }
/* the pooled "Multiple brands" card (N-177): marked so it reads as a bucket,
   not a single advertiser */
.brand-card.multiple { border-color: var(--accent-solid); }
.brand-card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}
.brand-card p { margin: var(--space-1) 0; }
.brand-stat { color: var(--text-bright); font-size: var(--text-base); }
.brand-stat strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
}
.brand-scraped { color: var(--text-bright); font-size: var(--text-sm); margin-top: var(--space-2); }

/* Ad tiles, Ad-Library style (GL-18 UI pass): a vertical-video shaped media
   area on top, the creative's own text (headline, primary text, CTA) below.
   The media area starts with no src at all — the IntersectionObserver in
   app.js hands one over when the tile scrolls near the viewport. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-3);
  align-items: start;
}
.tile {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2);
  background: var(--surface-raised);
  text-decoration: none;
  color: var(--text-primary);
}
.tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.tile-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-sunken);
}
.tile-media video, .tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile-media.dead { display: flex; align-items: center; justify-content: center; }
.tile-media.dead video, .tile-media.dead img { display: none; }
.dead-label { color: var(--text-muted); font-size: var(--text-xs); }

.tile-meta { padding: var(--space-3) var(--space-3) var(--space-3); }
.tile-head { gap: var(--space-1); margin-bottom: var(--space-1); }
.tile-title {
  margin: 0 0 var(--space-1);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
}
.tile-body { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--text-secondary); }

/* -webkit-line-clamp renders in all four engines (Blink/Gecko/WebKit ship the
   -webkit- form as the interop syntax, ADR-0045-checked); overflow:hidden is
   the graceful floor if a browser ever ignores it. */
.clamp-1, .clamp-2, .clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }

.chip {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-interactive);
  color: var(--text-secondary);
}
.chip.rank {
  color: var(--accent-text);
  border-color: transparent;
  background: var(--accent-dim);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
}
.chip.cta { margin-top: 2px; }
.chip.status.on { color: var(--success); border-color: rgba(70, 167, 88, 0.45); }
.chip.status.off { color: var(--text-secondary); }
.dot { font-size: var(--text-xs); line-height: 1; }
.dot.on { color: var(--success); text-shadow: 0 0 6px var(--success); }
.dot.off { color: var(--text-muted); }

.badges {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.badge {
  background: rgba(0, 0, 0, 0.72);
  color: var(--gray-12);
  font-size: var(--text-xs);
  padding: 1px var(--space-2);
  border-radius: var(--radius-1);
}
.badge.ok { background: var(--accent-solid); color: var(--accent-fg); }

.pager { margin-top: var(--space-4); }

/* Filter bar (GL-18 filters): compact controls, one accent for "active" */
.filters { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.filters .search {
  width: 100%;
  margin-top: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
}
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.filter-row select, .filter-row input {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-2);
}
.filter-row input[data-int] { width: 8.5rem; }
.filter-row select:focus, .filter-row input:focus, .filters .search:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.filter-row .on, .filters .search.on {
  border-color: var(--accent-solid);
  color: var(--text-primary);
}
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-full);
  cursor: pointer;
  user-select: none;
}
.check input { margin: 0; accent-color: var(--accent-solid); }
.check:has(input:checked) { border-color: var(--accent-solid); color: var(--text-primary); }
.filter-row button.link { margin-left: auto; font-size: var(--text-sm); }

/* ---- Ad detail (GL-18 UI pass): card left, script right, details below ---- */

.detail-grid {
  display: grid;
  grid-template-columns: minmax(340px, 440px) 1fr;
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-2);
}
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* Identity stack: page name on top, the labeled archive id beneath it */
.ad-card { margin-top: 0; }
.ad-ident { display: flex; flex-direction: column; gap: 2px; }
#ad-page-name { font-weight: var(--weight-semibold); font-size: var(--text-md); }
#ad-id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }
.ad-card h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}
.ad-body {
  margin: var(--space-1) 0 0;
  white-space: pre-wrap;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.clamp-6 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
#ad-body-more { padding-left: 0; font-size: var(--text-xs); }

/* Compact player: a reference creative, not a cinema. Images in a multi-image
   ad stack in the same slot. */
.player {
  display: block;
  max-width: 320px;
  max-height: 52vh;
  margin: var(--space-3) auto;
  border-radius: var(--radius-2);
  background: var(--surface-sunken);
}

/* Link block, Ad-Library style: destination + CTA in a sunken bar */
#ad-cta-row {
  margin-top: var(--space-2);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2);
  padding: var(--space-2) var(--space-3);
  justify-content: space-between;
}
#ad-cta-row:empty { display: none; }
#ad-cta-row a { font-family: var(--font-mono); }
#ad-linkdesc { margin: var(--space-2) 0 0; }

/* Actions: the FIRST download is the one primary action; the rest are ghosts */
#ad-downloads { margin-top: var(--space-3); }
#ad-downloads .btn:not(:first-child) {
  background: none;
  border: 1px solid var(--border-interactive);
  color: var(--text-secondary);
}
#ad-downloads .btn:not(:first-child):hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* The script keeps reading position while the card scrolls (all engines). */
#ad-right { position: sticky; top: var(--space-4); }
.script-pane { margin-top: 0; }
.script-pane pre.script { max-height: calc(100vh - 13rem); overflow: auto; }

/* Details: a proper key/value table, compact */
.details { margin-top: var(--space-2); }
.details th {
  width: 11rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--text-muted);
  vertical-align: top;
  white-space: nowrap;
}
.details td { color: var(--text-secondary); overflow-wrap: anywhere; }
.details tr:last-child th, .details tr:last-child td { border-bottom: 0; }
.details td.num { font-family: var(--font-mono); }
.details td.warn { color: var(--warning); }

a.ext { color: var(--accent-text); text-decoration: none; font-size: var(--text-sm); }
a.ext:hover { text-decoration: underline; }

.btn {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  background: var(--accent-solid);
  color: var(--accent-fg);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.btn:hover { background: var(--accent-solid-hover); }

/* Reading surface, not a terminal: bigger type, tamed off-white so the box
   doesn't glare against the dark ground (owner 2026-09-03). */
pre.script {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-2);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  min-height: 3rem;
}