/* The ad column: a real TRACK in the shell's content row, not an overlay, so the page narrows
   instead of being covered. The unit itself is body-mounted and placed onto .app-ads-slot by
   views/ui/ads.js — it cannot be a child of the slot, because the shell rewrites its own markup
   on every render and an ad iframe reloads if it is reparented.
   DESKTOP ONLY: a phone or tablet has nowhere to put it and never mounts one.
   LINKED CRITICAL (index.html): ads.js reads --ads-layout below to decide anything at all. */

:root {
  /* The track: 300px of inventory plus the column's own 12px padding either side. Narrower asks
     Google for a 300-wide creative it then has to refuse. */
  --ads-col-w: 324px;
  --ads-layout: off;
}

.app-ads-slot { display: none; }

/* Absolute, not fixed: it scrolls with the page like any other column. */
.ads-col {
  position: absolute;
  padding: 12px;
  min-width: 0;
  /* A responsive unit does not shrink its inner box back down, so a narrowed window would
     otherwise scroll the whole page sideways. */
  overflow: hidden;
}

/* Parked, but at full width: a hidden or zero-width unit is answered with no ad at all. Wins
   over the placed position by specificity — ads.js also clears the inline offsets. */
.ads-col.is-idle {
  left: -10000px;
  top: 0;
  width: var(--ads-col-w);
}

@media (min-width: 1180px) {
  :root { --ads-layout: on; }

  /* Topbar and footer keep spanning the full width — they auto-place into rows 1 and 3 across
     both tracks — so only the content narrows. */
  body.has-ads .app-main,
  body.has-ads .app-public {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ads-col-w);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  body.has-ads .app-main > *,
  body.has-ads .app-public > *  { grid-column: 1 / -1; }
  body.has-ads .app-content,
  body.has-ads .public-content  { grid-column: 1; grid-row: 2; min-width: 0; }
  body.has-ads .app-ads-slot    { display: block; grid-column: 2; grid-row: 2; }
}

/* Backstop for a window resized down after a unit was already loaded; ads.js mounts none here. */
@media (max-width: 1179px) {
  .ads-col { display: none; }
}

.ads-col .adsbygoogle {
  display: block;
  width: 100%;
  min-height: 100px;
}

/* The developer footprint (Ads.preview(true)), drawn only where Google said "unfilled". */
.ads-ph { display: none; }
.ads-col[data-unfilled="1"] .ads-ph {
  display: grid;
  place-content: center;
  gap: 8px;
  height: 600px;
  max-height: calc(100vh - 180px);
  text-align: center;
  font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border: 2px dashed var(--gold);
  border-radius: var(--radius-s);
}
.ads-col[data-unfilled="1"] .ads-ph span {
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.06em;
  text-transform: none; color: var(--ink-2);
  font-family: var(--font-mono, monospace);
}

/* The upgrade CTA. Deliberately the app's own chrome and BELOW the unit: it must never read as
   part of the creative, nor cover it. */
.ads-remove {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.ads-remove:hover {
  color: var(--gold);
  background: var(--bg-3, var(--bg-2));
  border-color: var(--bronze);
}
.ads-remove:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: 2px; }