/* Banner Library — presentation-only reskin onto the
   admin design system. Token-driven (light-content tokens from design-tokens.css
   + admin.css), no hardcoded hex, gold reserved for primary actions + focus. */

/* ── Platform AdSense settings card ─────────────────────────────────── */
.main .banner-library__settings {
    margin-top: var(--space-lg);
}

.main .banner-library__settings-body {
    display: grid;
    gap: var(--space-md);
}

.main .banner-library__settings-hint {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.main .banner-library__policy {
    margin: 0;
}

/* ── List ───────────────────────────────────────────────────────────── */
.main .banner-cell {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.main .banner-cell__thumb {
    flex: 0 0 auto;
    display: block;
    width: 88px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    border: 1px solid var(--color-border);
}

.main .banner-cell__thumb--adsense {
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
}

.main .banner-cell__thumb--adsense svg {
    width: 20px;
    height: 20px;
}

.main .banner-cell__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.main .banner-cell__name {
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main .banner-cell__id {
    color: var(--color-text-muted);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: var(--text-xs);
}

.main .banner-library__table td:nth-child(4) {
    white-space: nowrap;
}

.main .banner-library__row-actions {
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
}

/* ── Editor card ────────────────────────────────────────────────────── */
.main .banner-form {
    margin-bottom: var(--space-lg);
}

.main .banner-form__body {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
}

/* Live preview rail (left) */
.main .banner-form__rail {
    position: sticky;
    top: 0;
    display: grid;
    gap: var(--space-sm);
}

.main .banner-form__rail-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.main .banner-form__preview {
    min-height: 168px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.main .banner-form__preview img {
    display: block;
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.main .banner-form__preview-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.main .banner-form__preview-icon svg {
    width: 26px;
    height: 26px;
    opacity: 0.7;
}

/* AdSense placeholder block — clearly a placeholder, not a fake ad */
.main .banner-form__preview--ad {
    padding: var(--space-md);
}

.main .banner-form__ad-placeholder {
    display: grid;
    gap: 6px;
    place-items: center;
    width: 100%;
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border-strong, var(--color-text-muted));
    border-radius: var(--radius-sm);
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0 8px,
            var(--hairline) 8px 9px
        );
}

.main .banner-form__ad-tag {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.main .banner-form__ad-title {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
}

.main .banner-form__ad-note {
    font-size: var(--text-xs);
    line-height: 1.4;
    max-width: 220px;
}

/* Sections + fields (right) */
.main .banner-form__sections {
    display: grid;
    gap: var(--space-lg);
    min-width: 0;
}

.main .banner-form__section {
    display: grid;
    gap: var(--space-sm);
}

/* Pair the explicit display with [hidden] so syncType() can hide a whole
   section — an explicit grid beats the UA [hidden] rule. */
.main .banner-form__section[hidden] {
    display: none;
}

.main .banner-form__section-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--hairline);
}

.main .banner-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.main .banner-form__field--wide {
    grid-column: 1 / -1;
}

/* Toggle laid out as a quiet field */
.main .banner-form__toggle-field {
    gap: var(--space-sm);
}

.main .banner-form__callout {
    line-height: 1.5;
}

.main .banner-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--hairline);
}

/* Type selector (reuses the kit .preset-card grid) */
.main .banner-form__type.preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4px;
}

.main .banner-form__type--locked .preset-card {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Upload dropzone — click or drag-drop, scroll-safe hidden input. */
.main .banner-dropzone {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    cursor: pointer;
    color: var(--color-text-secondary);
    background: var(--surface-sunken);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.main .banner-dropzone:hover {
    border-color: var(--color-text-muted);
    background: var(--surface-hover);
}

.main .banner-dropzone.is-dragover {
    border-color: var(--color-accent);
    border-style: solid;
    background: var(--surface-hover);
    color: var(--color-text);
}

.main .banner-dropzone--filled {
    border-style: solid;
}

.main .banner-dropzone__icon svg {
    display: block;
    color: var(--color-text-muted);
}

.main .banner-dropzone.is-dragover .banner-dropzone__icon svg {
    color: var(--color-accent);
}

.main .banner-dropzone__text {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}

.main .banner-dropzone__hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.main .banner-dropzone__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.main .banner-dropzone__input:focus-visible + .banner-dropzone__text,
.main .banner-dropzone:focus-within {
    outline: 0;
    box-shadow: var(--shadow-glow);
}

@media (prefers-reduced-motion: reduce) {
    .main .banner-dropzone {
        transition: none;
    }
}

@media (max-width: 860px) {
    .main .banner-form__body {
        grid-template-columns: 1fr;
    }

    .main .banner-form__rail {
        position: static;
    }

    .main .banner-form__grid {
        grid-template-columns: 1fr;
    }

    .main .banner-form__type.preset-grid {
        grid-template-columns: 1fr;
    }
}