/*
 * Page chrome only. Nothing here styles a Surfside creative: the SDK renders into (nested) shadow
 * roots, so this stylesheet cannot reach inside one, and it must not try. If a creative looks wrong,
 * that is the SDK's template, not this file.
 */
:root {
    color-scheme: light dark;
    --ink: #16181d;
    --paper: #fbfbfc;
    --line: #d8dae0;
    --muted: #5c6270;
    --slot: #eceef2;
}
@media (prefers-color-scheme: dark) {
    :root { --ink: #e6e7ea; --paper: #14161a; --line: #2c3038; --muted: #969ba7; --slot: #1c1f25; }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 2.5rem 1.25rem 6rem;
    /* Keep clear of the diagnostic panel, which is fixed to the right. */
    padding-right: min(31rem, 48vw);
    background: var(--paper);
    color: var(--ink);
    font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

main { max-width: 60rem; margin: 0 auto; }

h1 { font-size: 1.4rem; margin: 0 0 .25rem; }
h2 { font-size: 1rem; margin: 2.5rem 0 .5rem; }
p { margin: .5rem 0; max-width: 52rem; }
code, kbd { font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--slot); padding: .1em .35em; border-radius: 3px; }

.lede { color: var(--muted); margin-bottom: 1.5rem; }

nav ul { list-style: none; padding: 0; margin: 0; }
nav li { border-top: 1px solid var(--line); padding: .6rem 0; }
nav li:last-child { border-bottom: 1px solid var(--line); }
nav a { font-weight: 600; text-decoration: none; color: inherit; border-bottom: 2px solid var(--line); }
nav a:hover { border-bottom-color: currentColor; }
nav .why { display: block; color: var(--muted); font-size: 13.5px; margin-top: .15rem; }

/* A zone slot is outlined so an EMPTY zone is visibly different from a MISSING zone. */
.slot {
    border: 1px dashed var(--line);
    background: var(--slot);
    padding: .75rem;
    margin: .75rem 0 1.5rem;
}
.slot > .slot-label {
    font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .5rem;
}
.slot surf-banner,
.slot surf-video,
.slot surf-carousel,
.slot surf-product-card,
.slot surf-dynamic-zone { display: block; min-height: 2.5rem; }

button {
    font: inherit;
    padding: .35rem .7rem;
    border: 1px solid var(--line);
    background: transparent;
    color: inherit;
    border-radius: 4px;
    cursor: pointer;
}

/* Contract B. Declared in every page's markup; beta-runtime finds it by id and repaints it. */
#beta-state {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2147483646;
    font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #111;
    color: #eee;
    padding: 2px 6px;
    max-width: 100vw;
    overflow: hidden;
    white-space: nowrap;
}