/* Ads Arsenal — app-level bridge utilities on top of the design system tokens.
 * Small, page-agnostic classes the design system doesn't name as components
 * (flash messages, muted text) but every screen needs. */

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

.error, .notice {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: 1px solid;
  margin: 0 0 var(--space-2);
}
.error { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-border); }
.notice { color: var(--success-text); background: var(--success-bg); border-color: var(--success-border); }

form.stack { display: flex; flex-direction: column; gap: var(--space-4); }
form.stack label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }

/* Real tab controls: .aa-tab already strips button chrome (background/borders)
 * in the design CSS; buttons additionally need the font reset UA styles break. */
button.aa-tab { font: inherit; }

/* S2 (P4a): the insights board renders its tabs as LINKS (?view=…, zero JS,
 * bookmarkable) — same aa-tab visuals, only the anchor UA styling to strip. */
a.aa-tab, a.aa-tab:hover { text-decoration: none; }

/* Link-as-button (href mode of components.ts button()): the aa-btn classes
 * carry all visual state; only the anchor's UA/base link styling needs
 * neutralizing so <a class="aa-btn"> renders identically to <button>. */
a.aa-btn, a.aa-btn:hover { text-decoration: none; }

/* S2 (P3b): wherever an anchor lands — the resolved decision stub, an error's
 * anchor-back, a deep link from Actions/feedback — the landed-on card is
 * visibly marked. Pure CSS (:target), no JS scroll management; scroll-margin
 * keeps the anchored card off the exact viewport edge. */
.aa-insight { scroll-margin-top: var(--space-6); }
.aa-insight:target { outline: 2px solid var(--accent); outline-offset: 2px; }

/* S2 (P3a): resolved-card stub — after approve/dismiss the acted-on card
 * stays visible for one page load wearing its verdict; subdued and
 * non-interactive (no forms render inside it). */
.aa-insight--resolved { border-left-color: var(--success-border); background: var(--success-bg); }
.aa-insight--resolved .aa-insight__title { color: var(--text-secondary); }
.aa-insight--resolved-dismissed { border-left-color: var(--border-default); background: var(--surface-2); opacity: 0.8; }
.aa-insight__resolved { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }

/* S2 (P2): compact account-status strip — operational chips (blind/dormant)
 * plus ONE aggregate config-gap line with a no-JS disclosure; replaces the
 * per-account card stack that dominated the board. */
.aa-status-strip {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4); font-size: var(--text-xs); color: var(--text-muted);
}
.aa-status-strip a { text-decoration: none; }
.aa-status-strip__gaps summary { cursor: pointer; }
.aa-status-strip__list { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.aa-status-strip__list a { text-decoration: underline; }

/* S3: pagination controls — server-rendered prev/next links under the card
 * list (?page=N, zero JS, bookmarkable). Board-level rails (tabs + counts,
 * status strip, accounting lines) render outside the sliced region, so they
 * appear on every page; the aa-btn classes carry the link visuals. */
.aa-pager {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); margin-top: var(--space-5);
}

/* Dismiss disclosure (UX-19, DP-4): the summary renders as the ghost button
 * it acts as — strip the UA disclosure marker; aa-btn carries the rest. */
details.aa-dismiss > summary { list-style: none; }
details.aa-dismiss > summary::-webkit-details-marker { display: none; }
details.aa-dismiss[open] { flex: 1; }
details.aa-dismiss > form { margin-top: var(--space-3); }