/* ads.css — display ads on tool pages (strategy/ADSENSE.md). Loaded on tool pages only, and only
   when ads.json / CT_ADS turn ads on (scripts/lib/ads.mjs). assets/ads.js fills the units; EVERY
   size and threshold lives here, so the two can never disagree.

   Two layouts, split at 880px (docs/DESKTOP_LAYOUT_PLAN.md, which replaced the 2026-10 side rails):
   - from 880px: the desktop right column (#ct-side, assets/layout.css). A reserved 300x250 at its
     top (not for games), then up to two 300x600 units beside the help article, placed by ads.js
     while the column has room. Max 3 per page.
   - below 880px: the in-tool slot under the tool's result (below).
   All units are responsive-unit code with exact CSS sizes, and hiding them with display:none
   (narrow window, print) is an approved modification of that code (answer/9183363, verified
   2026-10-12). Nothing here is sticky or fixed. */

/* ── Right column (desktop) ─────────────────────────────────────────────────────────────────────── */
.ct-side-ad,
.ct-side-unit { width: 300px; text-align: center; }
.ct-side-ad__label,
.ct-side-unit__label {
  height: 20px;
  line-height: 20px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-xs, 0.6875rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #556079);
}
/* The top box is reserved in the page itself (scripts/lib/layout.mjs), so filling it moves nothing. */
.ct-side-ad__box { width: 300px; height: 250px; }
.ct_side_top { display: block; width: 300px; height: 250px; }
/* Beside the article: absolutely placed in the column by ads.js, so they add no height. Each unit
   on the page carries a unique sizing class name (answer/9183363). */
.ct-side-unit { position: absolute; inset-inline-start: 5px; }
.ct_side_tall_1,
.ct_side_tall_2 { display: block; width: 300px; height: 600px; }
/* Amazon Operating Agreement 6(d): keep a third-party ad clearly apart from the Amazon block. The
   "Advertisement" label, a 32px gap and a rule line before "Recommended" (as the rails had). */
.ct-side > .ct-side-ad + .affiliate {
  margin-top: 32px;
  padding-top: var(--space-4, 16px);
  border-top: 1px solid var(--rule, #cfd6e6);
}
/* A page loaded at phone width uses the in-tool slot (one per page view, never both), so a window
   widened afterwards shows no empty reserved box. Set by ads.js (no desktop ad was requested). */
#ct-side[data-ct-ads="slot"] .ct-side-ad { display: none; }

/* Official unfilled handling (answer/10762946): hide an unfilled <ins>; collapse lower out-of-flow
   article units completely, and hide the "Advertisement" label on in-flow reserved boxes so a
   blank box never sits under a misleading label while keeping 0 layout shift. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ct-side-unit:has(ins[data-ad-status="unfilled"]) { display: none; }
.ct-side-ad:has(ins[data-ad-status="unfilled"]) .ct-side-ad__label,
.ct-slot:has(ins[data-ad-status="unfilled"]) .ct-slot__label { visibility: hidden; }


/* ── In-tool slot (D12): phones and any window narrower than the desktop column ───────────────────
   Rendered by packages/ui/AdSlot.tsx (inside OutputExtras, so it sits right after the tool's
   result, above the Amazon picks); assets/ads.js puts the unit in its box. One 320x100 unit: one of
   Google's top-performing sizes, and it also takes 320x50 ads, so it gets every advertiser the
   smaller banner would plus the taller ones (Ken, 2026-10-13; was 320x50). In normal flow, never fixed. Shown only below
   880px, where the desktop column starts, so a page never carries both. 24px above it keeps it clear of the
   tool's own buttons (a Download right above the result). */
.ct-slot {
  display: none;
  width: 320px;
  margin: 24px auto 0;
  text-align: center;
}
@media (max-width: 879.98px) { .ct-slot { display: block; } }
/* An outlier tool that keeps the phone layout at every width (catalog.json layout "single", stamped as <html data-layout>) uses
   the in-tool slot at every width too: it has no right column. */
html[data-layout="single"] .ct-slot { display: block; }
/* A 320px phone has no room beside a 320px unit: let the slot reach the screen edges there. */
@media (max-width: 351.98px) {
  .ct-slot { width: 100vw; margin-inline-start: calc(50% - 50vw); margin-inline-end: 0; }
}
.ct-slot__label {
  height: 20px;
  line-height: 20px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-xs, 0.6875rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #556079);
}
.ct-slot__box { width: 320px; height: 100px; margin-inline: auto; }
.ct_slot_unit { display: block; width: 320px; height: 100px; }

/* preview mode only: an honest empty box of the exact size, no Google request */
.ct-ad-ph {
  box-sizing: border-box;
  border: 1px dashed var(--rule, #cfd6e6);
  color: var(--ink-soft, #556079);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-xs, 0.6875rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media print { .ct-side-ad, .ct-side-unit, .ct-slot { display: none !important; } }