/* Base styles for V2 creatives rendered by NAS.
 *
 * NAS emits HTML using class names `.creative-{id}`, `.creative-header`,
 * `.creative-body`, `.creative-button`, `.creative-button-positive`, etc.
 * and per-creative CSS custom property values (`--positive-button-bg`,
 * `--header-color`, …). This stylesheet provides the rules that consume
 * those custom properties — without it, NAS-rendered creatives fall back
 * to browser defaults.
 *
 * Everything lives inside `@layer base` so pod-theme custom CSS
 * (`@layer pod-theme-custom-css`, declared higher in the cascade by NAS)
 * can override these defaults. Without the layer, unlayered rules would
 * win over any layered rule per the CSS cascade — and operator-authored
 * pod-theme CSS could never override e.g. `.creative-header`.
 *
 * This single stylesheet is inlined into both the live NAS-served creative
 * and the editor preview (cashew assembles the preview document with the
 * on-disk file), so the preview always matches production.
 */

@layer base {
    .creative {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        max-width: min(450px, 100%);
        margin: 0 auto;
        box-sizing: border-box;
    }
    .creative:has(> .ad-label) {
        padding-top: 36px;
    }
    .creative-header {
        margin: 0;
        color: var(--header-color);
        font-size: var(--header-size);
        line-height: 1.2;
        font-weight: 700;
        text-align: center;
    }
    .creative-body {
        margin: 0;
        color: var(--body-color);
        font-size: var(--body-size);
        line-height: 1.4;
        text-align: center;
    }
    .creative-consent-text {
        margin: 0;
        color: #999;
        font-size: 11px;
        line-height: 1.4;
    }
    /* Links in consent copy keep the muted fine-print color; the underline is
   * the affordance. */
    .creative-consent-text a {
        color: inherit;
        text-decoration: underline;
    }
    /* TCPA consent checkboxes (nas survey_render.go), checked by default and
   * black rather than muted — the partner names are the disclosure, not fine
   * print. Per-pod override: `.nas-pod .creative-consent-checkbox { color: … }`
   * in pod-theme custom CSS.
   *
   * The container is inline so the names flow inside the consent sentence. Each
   * entry is inline-flex, so it is one atomic inline unit: a line break falls
   * between entries, never between a box and its name. */
    .creative-consent-checkboxes {
        display: inline;
    }
    .creative-consent-checkbox {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        max-width: 100%;
        margin: 0 4px;
        color: #000;
        font-size: 11px;
        line-height: 1.4;
    }
    .creative-image {
        display: block;
        max-width: 100%;
        height: auto;
        border-radius: 4px;
    }
    .creative-button {
        display: inline-block;
        padding: 12px 20px;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 600;
        border: none;
        font-family: inherit;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
    }
    .creative-button-positive {
        background: var(--positive-button-bg);
        color: var(--positive-button-text);
    }
    .creative-button-negative {
        background: var(--negative-button-bg);
        color: var(--negative-button-border);
        border: 1px solid var(--negative-button-border);
    }
    .creative-skip-link {
        display: inline-block;
        color: #0066cc;
        text-decoration: underline;
        font-size: 13px;
    }
    /* Survey creatives (nas survey_render.go) bypass the element tree and emit
   * their own classes. Each mirrors its element-tree counterpart so the same
   * style tokens apply: question ↔ header, secondary ↔ body, answer ↔
   * positive button, button-style skip ↔ negative button. */
    .creative-survey-question {
        margin: 0;
        color: var(--header-color);
        font-size: var(--header-size);
        line-height: 1.2;
        font-weight: 700;
        text-align: center;
    }
    .creative-survey-secondary {
        margin: 0;
        color: var(--body-color);
        font-size: var(--body-size);
        line-height: 1.4;
        text-align: center;
    }
    .creative-survey-answer {
        background: var(--positive-button-bg);
        color: var(--positive-button-text);
    }
    /* Multi-select survey (nas.creative.multiple_answers). The answer keeps the
   * positive-button styling and gains a leading checkbox glyph; init.js flips
   * aria-checked on click, which is what fills the box. The box is drawn from
   * the button's own text color so it stays legible against any theme's
   * positive-button background. */
    .creative-survey-answer-multi {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        text-align: left;
    }
    .creative-survey-checkbox {
        flex: 0 0 auto;
        width: 14px;
        height: 14px;
        border: 2px solid currentColor;
        border-radius: 2px;
        background: transparent;
    }
    .creative-survey-answer-multi[aria-checked='true'] .creative-survey-checkbox {
        /* inset shadow rather than a background fill so the tick reads as the
     * button's own text color without a second token. */
        box-shadow: inset 0 0 0 3px currentColor;
    }
    .creative-survey-continue {
        background: var(--positive-button-bg);
        color: var(--positive-button-text);
    }
    /* NAS renders the continue button disabled and init.js enables it on the
   * first checked answer, so an empty selection can never be submitted. */
    .creative-survey-continue:disabled {
        background: #d9d9d9;
        color: #8c8c8c;
        cursor: not-allowed;
    }
    .creative-skip-button {
        display: inline-block;
        padding: 12px 20px;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 600;
        font-family: inherit;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        background: var(--negative-button-bg);
        color: var(--negative-button-border);
        border: 1px solid var(--negative-button-border);
    }
    /* Emitted alongside the skip's look class (`.creative-skip-link` /
   * `.creative-skip-button`) on survey creatives only. `.creative` is a flex
   * column, so a skip element would otherwise stretch edge to edge and render
   * its label wherever the look class happens to put it; this hugs the label
   * and centers the control under the answers. Scoping it to the survey class
   * keeps the element-tree skip link's alignment (and its per-element
   * `text-align` inline style) untouched. Declared after both look classes so
   * it wins the same-specificity tie if one of them ever sets `text-align`. */
    .creative-survey-skip {
        align-self: center;
        text-align: center;
    }
    /* Ad-label overlays sit in the corners of .creative; the wrapper is
   * position: relative above so they overlay rather than push content. */
    .ad-label {
        position: absolute;
        top: 12px;
        font-size: 11px;
        color: rgb(128, 128, 128);
        z-index: 1;
    }
    .ad-label-top-left {
        left: 12px;
    }
    .ad-label-top-right {
        right: 12px;
    }
}