/* Ad boxes made by assets/ads.js on the guide pages and the landing page's side rails (only when web/config.js sets an
   AdSense slot).
   Uses the page's colour tokens (--line, --line-2, --panel, --fg-3, --mono), so it follows the light/dark theme. */
.ad-spot { display: none; }
.ad { position: relative; display: block; clear: both; min-height: 150px; margin: 40px 0; padding: 28px 12px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.ad[hidden], .no-ads .ad, .ad:has(ins[data-ad-status="unfilled"]) { display: none !important; }
.ad-l { position: absolute; left: 12px; top: 7px; font: 650 11px/14px var(--sans); letter-spacing: .04em; color: var(--fg-3); }
.ad-ph { display: grid; place-items: center; min-height: 108px; padding: 12px; border: 1px dashed var(--line-2); border-radius: 6px;
  color: var(--fg-3); font: 500 12px/1.4 var(--mono); text-align: center; overflow-wrap: anywhere; }
.ad-bottom { min-height: 290px; margin-top: 56px; }
.ad-bottom .ad-ph { min-height: 248px; }
/* landing side rails (160x600): an absolute column from below the header to the end of the page, pinned to the
   viewport edges (--rail-edge) and always at least --rail-gap from the content column (landing.css narrows it under
   html.rails and defines the --rail-* sizes), with a sticky box inside; gone below 1360px */
.rail { position: absolute; top: 84px; bottom: 0; z-index: 3; width: 160px; pointer-events: none; }
.rail-l { left: var(--rail-edge); }
.rail-r { right: var(--rail-edge); }
:root:not(.rails) .rail { display: none; }
.ad-rail { position: sticky; top: 16px; width: 160px; min-height: 0; margin: 0; padding: 20px 0 0; border: 0; border-radius: 0;
  background: none; pointer-events: auto; }
.ad-rail .ad-l { left: 0; top: 0; }
.ad-rail ins, .ad-rail .ad-ph { width: 160px; height: 600px; }
.ad-rail .ad-ph { min-height: 0; border-radius: 4px; background: var(--panel); }