/* Ad detail dialog — shared by /app and the landing page, alongside assets/ad-modal.js.
 *
 * Native <dialog> on purpose: showModal() supplies the focus trap, Escape, the backdrop and
 * inert background content for free, and a hand-rolled overlay gets those wrong. The scroll
 * container is .adm-body rather than the dialog, so the header and its Close button stay put
 * while a long ad list scrolls underneath. */

#ad-modal {
  border: var(--stroke-bold) solid var(--line-strong);
  border-radius: var(--radius-xl);
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  padding: 0;
  /* Never wider than the viewport, so there is no mobile breakpoint to get wrong. */
  max-width: 46rem;
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(85vh, 60rem);
  overflow: hidden;
}
#ad-modal::backdrop { background: rgba(0, 0, 0, 0.45); }

.adm-head {
  border-bottom: 1px solid var(--line-strong);
  padding: var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.adm-title { margin: 0; font-size: var(--text-lg); line-height: var(--leading-normal); }
.adm-sub {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--neutral-600);
  font-variant-numeric: var(--numeric);
}
.adm-close { margin-left: auto; flex: none; }

.adm-body {
  padding: var(--space-4);
  overflow-y: auto;
  max-height: calc(min(85vh, 60rem) - 6rem);
}

.adm-caveat {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs);
  color: var(--neutral-600);
  border-left: 2px solid var(--line-strong);
  padding-left: var(--space-3);
  line-height: var(--leading-normal);
}

.adm-ad { border-top: 1px solid var(--neutral-200); padding: var(--space-3) 0; }
.adm-ad:first-of-type { border-top: 0; padding-top: 0; }

.adm-ad-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  margin: 0 0 var(--space-2);
}
.adm-days {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: var(--numeric);
}
.adm-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--neutral-600);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0 0.5em;
}

/* Ad copy keeps its own line breaks -- a Meta ad body is written with them and collapsing
   them turns a three-line hook into a wall. `anywhere` because scraped copy contains
   unbroken hashtag runs and URLs that would otherwise push the dialog sideways. */
.adm-copy {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.adm-copy.is-template { font-family: var(--font-mono); color: var(--neutral-600); }
.adm-note { display: block; font-size: var(--text-xs); color: var(--neutral-500); }

.adm-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--neutral-500);
}
.adm-meta a { word-break: break-all; }

.adm-empty { margin: 0; font-size: var(--text-sm); color: var(--neutral-600); }

/* The trigger on a card. */
.adm-trigger {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  flex-wrap: wrap;
}
.adm-trigger-note { font-size: var(--text-xs); color: var(--neutral-500); }