/* Reserved display unit under the timeline. The height is in this sheet, which
   the homepage loads from the head, so the box is in the first layout.
   Narrow: 6.25rem (100px). From 500px: 5.625rem (90px). From 800px: 17.5rem (280px).
   No label. [hidden] drops the box when AdSense reports the unit unfilled and
   the box is entirely below the viewport. In view or above, the box keeps its height.
   Text, if a slot ever contains any, inherits --text on --card (7:1 in both themes). */

.ad-slot {
    box-sizing: border-box;
    inline-size: calc(100% - 1.5rem);
    max-inline-size: calc(87.5rem - 3.5rem);
    margin-inline: auto;
    margin-block: 1.25rem 0;
    min-block-size: var(--ad-reserve);
    --ad-reserve: 6.25rem;
    display: grid;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: clip;
    contain: layout style paint;
}

@media (min-width: 31.25rem) {
    .ad-slot { --ad-reserve: 5.625rem; }
}

@media (min-width: 50rem) {
    .ad-slot { --ad-reserve: 17.5rem; }
}

@media (min-width: 37.5625rem) {
    .ad-slot { inline-size: calc(100% - 3.5rem); }
}

/* AdSense writes min-height:0 !important and height:auto onto the slot (an
   ancestor of a responsive ins), wiping min-block-size before it fills. It cannot
   style a pseudo-element, so this spacer keeps the reserve on every page. */
.ad-slot::before {
    content: "";
    grid-area: 1 / 1;
    block-size: var(--ad-reserve);
}

.ad-slot > * { grid-area: 1 / 1; }

.ad-slot > .adsbygoogle {
    display: block;
    inline-size: 100%;
}

.ad-slot[hidden] {
    display: none;
}

/* Unfilled but in view or above: keep the reserved box, show nothing in it. */
.ad-slot[data-ad-state="unfilled"]:not([hidden]) > .adsbygoogle {
    visibility: hidden;
}

/* Preview hosts only. The module sets data-ad-preview. The dashed label
   stays when the unit is unfilled, so the box does not collapse. Filled
   units cover the label. Text is --text on --card, 7:1 in both themes. */
.ad-slot[data-ad-preview] {
    display: grid;
    place-items: center;
    border: 2px dashed var(--text);
}

.ad-slot[data-ad-preview] > .ad-slot-label,
.ad-slot[data-ad-preview] > .adsbygoogle {
    grid-area: 1 / 1;
}

.ad-slot-label {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.ad-slot[data-ad-preview]:not([data-ad-state="filled"]) > .adsbygoogle {
    visibility: hidden;
}

.ad-slot[data-ad-preview][data-ad-state="filled"] > .ad-slot-label {
    display: none;
}

.ad-debug {
    position: fixed;
    z-index: 40;
    inset-block-end: 8px;
    inset-inline-start: 8px;
    margin: 0;
    padding: 6px 8px;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--text);
    border-radius: 8px;
    font: 600 0.75rem/1.35 system-ui, sans-serif;
    white-space: pre-line;
}

@media (forced-colors: active) {
    .ad-slot,
    .ad-slot[data-ad-preview],
    .ad-debug {
        background: Canvas;
        color: CanvasText;
        border-color: CanvasText;
    }
}

/* The side column is a fixed 300px plus a 24px gap. The min-width query
   below is the only copy of that breakpoint. The script reads this rule
   and passes the same media text to matchMedia. From the query up, the
   timeline takes the leftover width and stops at 1400px, so a viewport
   the size of the query leaves main at 1356px. Below the query the
   rail is not displayed and the script does not push the unit. The column
   stays 300px when the unit is unfilled, so the timeline does not move.
   Sticky top clears the desktop header, which measures 186px. */
.page-frame { display: block; }
.ad-rail { display: none; }

@media (min-width: 1680px) {
    .page-frame:has(.ad-rail) {
        display: grid;
        grid-template-columns: minmax(0, 1400px) 300px;
        column-gap: 24px;
        justify-content: center;
        align-items: start;
        inline-size: 100%;
    }
    .page-frame:has(.ad-rail) > main {
        grid-column: 1;
        grid-row: 1;
        inline-size: 100%;
        max-inline-size: 1400px;
        min-inline-size: 0;
        margin-inline: 0;
    }
    .page-frame:has(.ad-rail) > .explainer {
        grid-column: 1;
        grid-row: 2;
        min-inline-size: 0;
    }
    .page-frame:has(.ad-rail) > .ad-rail {
        display: block;
        grid-column: 2;
        grid-row: 1 / span 2;
        inline-size: 300px;
        min-block-size: 600px;
        align-self: stretch;
    }
    .ad-rail > .ad-slot {
        position: sticky;
        top: 206px;
        inline-size: 300px;
        max-inline-size: 300px;
        block-size: 600px;
        min-block-size: 600px;
        --ad-reserve: 600px;
        margin-block: 22px 0;
        margin-inline: 0;
    }
    .ad-rail > .ad-slot > .adsbygoogle {
        display: inline-block;
        inline-size: 300px;
        block-size: 600px;
    }
}