/* ============================================================================
   admin-editors.css — the M3 admin editor surfaces: AD-LIST, AD-PROD, the
   AD-PAGE three-pane editor (SC §2.6 metrics: 280px section list · fluid
   inspector · 360px preview min), and AD-SET. Shell chrome (rail, top bar,
   tables, filters) lives in chrome.css — this file adds editor composition.
   Admin metrics are fixed and theme-invariant (SC §2.6).

   As in chrome.css's admin block, the bare pixel values here are the SC §2.6
   contract itself (pane widths, row height, cell padding) plus ADG-R06's device
   widths — not stray literals. Everything else binds a token role (SC-R01).
   ========================================================================== */

/* --- Action rows -----------------------------------------------------------
   F-R27: primary first in reading order, quiet last. Editor panes right-align
   theirs; the list's page-level bar reads left-aligned with the content. */
.adm-actionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.adm-actionbar--pane {
    justify-content: flex-end;
    margin-top: var(--space-lg);
    margin-bottom: 0;
}

/* --- Breadcrumb (ADN-R11) --- */
.adm-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.adm-crumbs__sep {
    color: var(--divider);
}

.adm-crumbs__here {
    color: var(--text-primary);
}

/* A guarded step back is a real action (it may stop and ask), so it is a button;
   it reads as the link it stands in for. */
.adm-crumbs button.lnk,
button.lnk--inline {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

/* --- AD-LIST table ---------------------------------------------------------
   Columns are fixed-width so widths never re-compute row to row (SC §2.6). */

/* Four columns, not the audit reader's five — this table starts scrolling in its
   container later than the shared 720px floor would have it. */
.adm-table--products {
    min-width: 560px;
}


.adm-table__num {
    text-align: right;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

/* Draft rows read as unfinished without relying on color alone — the status chip
   beside them carries the same fact in words (ADL-R02). */
.adm-table__row--draft .adm-product__name,
.adm-table__row--draft .adm-product__slug {
    color: var(--text-secondary);
    font-style: italic;
}

.adm-table__caret--idle {
    opacity: 0.35;
}

/* --- AD-SET Limits & retention (ADS-R01) -----------------------------------
   One table for every adjustable number. The value cell holds the input and its
   unit side by side, so a number is never read without what it counts. */
.adm-table--limits {
    min-width: 720px;
}

/* Wide enough that a row's range error sits on one line under its input. */

/* A group heading sits inside the body, so it must not inherit the column
   headers' sticky position — two sticky rows at the same offset overlap. */
.adm-limits__grouprow th {
    position: static;
}

.adm-limits__value {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.adm-limits__input {
    width: 104px;
}

.adm-limits__unit {
    color: var(--text-secondary);
    white-space: nowrap;
}

.adm-product {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.adm-product__mark,
.adm-product__mono {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-deep);
    object-fit: cover;
}

.adm-product__mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
    line-height: 1;
}

.adm-product__names {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* F-R15: a capped string clamps to one line and keeps the whole value reachable
   through the row's own layout rather than being cut without trace. */
.adm-product__name,
.adm-product__slug {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-product__slug {
    color: var(--text-secondary);
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
}

.adm-rowactions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* --- Reorder / toggle controls (Accessible Reordering) ---------------------
   F-R05's 24px floor; inert controls stay in place rather than collapsing the row. */
.adm-move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 0 var(--space-xs);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-raised);
    color: var(--text-secondary);
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.adm-move:hover:not(:disabled) {
    background-color: var(--surface-hover);
    color: var(--text-primary-on-raised);
}

.adm-move:disabled {
    border-color: var(--disabled-border);
    color: var(--disabled-text);
    cursor: not-allowed;
}

.adm-move--remove:hover:not(:disabled) {
    color: var(--status-danger-text);
}

/* --- Editor panels --------------------------------------------------------- */
.adm-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 900px;
}

.adm-panel {
    display: flex;
    flex-direction: column;
    gap: var(--field-gap);
    padding: var(--container-pad-dense);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    background-color: var(--surface-raised);
}

.adm-panel__title {
    margin: 0;
    color: var(--text-primary-on-raised);
    font-size: var(--font-size-1);
}

.adm-label {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* --- Form geometry (F-R27: inputs size to their content class) ------------- */
.adm-field--text .input { width: 36ch; max-width: 100%; }
.adm-field--prose .input { width: 48ch; max-width: 100%; }
.adm-field--select .input { width: 28ch; max-width: 100%; }
.adm-field--order .input { width: 8ch; }

.adm-num {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Textareas are the one full-width control class (F-R27); resizable down, never
   past the stated height. */
.adm-textarea {
    width: 100%;
    resize: vertical;
    font: inherit;
}

.adm-warn {
    margin: var(--hint-gap) 0 0;
    padding: var(--space-sm) var(--space-md);
    border-left: 2px solid var(--status-warning-border);
    background-color: var(--status-warning-surface);
    color: var(--text-primary-on-raised);
    font-size: var(--font-size--1);
}

.adm-check {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 24px;
}

.adm-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

/* --- Read-only identifier + copy (ADP-R04) --------------------------------- */
.adm-idrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.adm-id {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-deep);
    color: var(--text-primary-on-raised);
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
    /* F-R15: an identifier never re-flows into a shape that hides part of itself. */
    overflow-wrap: anywhere;
}

/* --- Field sets and repeated rows ------------------------------------------ */
.adm-fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--field-gap);
    margin: 0;
    padding: var(--container-pad-dense);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

.adm-fieldset legend {
    padding: 0 var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.adm-listrow {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-hairline);
}

.adm-listrow--stacked {
    flex-direction: column;
    align-items: stretch;
}

.adm-empty--inline {
    min-height: 0;
    justify-content: flex-start;
    text-align: left;
    font-size: var(--font-size--1);
}

/* --- AD-PAGE panes ---------------------------------------------------------
   The page editor takes the whole width of the screen (Jeff, 2026-10-11), and the
   preview gets the most of it: the page is what is being made. Wide: list, inspector
   and preview side by side. Middle: the list over the inspector, beside the preview.
   Narrow: list and inspector, the preview under both. The preview stays in view while
   the inspector scrolls. */
.adm__pane:has(> .adm-three) {
    max-width: none;
}

.adm-three {
    display: grid;
    grid-template-columns: 380px minmax(420px, 1fr) minmax(0, 1.4fr);
    grid-template-areas: "list inspector preview";
    gap: var(--space-lg);
    align-items: start;
}

.adm-pane--list { grid-area: list; }
.adm-pane--inspector { grid-area: inspector; }
.adm-pane--preview { grid-area: preview; }

@media (min-width: 1200px) {
    .adm-pane--preview {
        position: sticky;
        top: var(--space-md);
    }
}

@media (max-width: 1799px) {
    .adm-three {
        grid-template-columns: minmax(380px, 1fr) minmax(0, 1.4fr);
        grid-template-areas:
            "list preview"
            "inspector preview";
    }
}

/* Admin is a desktop tool (F-R12): below this the panes stack. */
@media (max-width: 1199px) {
    .adm-three {
        grid-template-columns: 300px minmax(0, 1fr);
        grid-template-areas:
            "list inspector"
            "preview preview";
    }
}

@media (max-width: 767px) {
    .adm-three {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "list" "inspector" "preview";
    }
}

.adm-pane {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
    padding: var(--container-pad-dense);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    background-color: var(--surface-raised);
}

.adm-pane__title {
    margin: 0;
    color: var(--text-primary-on-raised);
    font-size: var(--font-size-1);
}

/* --- Section list (Collection Editing) ------------------------------------- */
.adm-sections {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.adm-section {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    border-radius: var(--radius-control);
}

.adm-section:hover {
    background-color: var(--surface-hover);
}

/* F-R28: the selected row carries the selection treatment, not just a hover. */
.adm-section--current {
    background-color: var(--accent-surface);
    box-shadow: inset 2px 0 0 0 var(--accent);
}

.adm-section--hidden .adm-section__name,
.adm-section--hidden .adm-section__title {
    color: var(--text-secondary);
    text-decoration: line-through;
}

.adm-section__pick {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
    min-height: 36px;
    padding: var(--space-xs) var(--space-sm);
    border: none;
    border-radius: var(--radius-control);
    background: none;
    color: var(--text-primary-on-raised);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.adm-section__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-section__state {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* The row (rev 2026-10-11): the section's first image, its own heading on up to two
   lines, then its kind and state small beneath — eight "Feature section" rows read as
   eight things. A section with no heading of its own leads with its kind. */
.adm-section__thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-deep);
}

.adm-section__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.adm-section__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.adm-section__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--text-primary-on-raised);
}

.adm-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-xs);
    min-width: 0;
}

.adm-section__head .adm-section__name {
    overflow: visible;
}

.adm-section__title + .adm-section__head .adm-section__name {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* Drag and drop: the grip says a row moves; the dragged row dims; the row it will land
   before carries a line along its top. The keyboard moves a row with Alt+↑/↓. */
.adm-section__grip {
    flex: 0 0 auto;
    width: 14px;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    letter-spacing: -3px;
    text-align: center;
    user-select: none;
}

.adm-section__grip--off {
    visibility: hidden;
}

.adm-section[draggable="true"] {
    cursor: grab;
}

.adm-section--dragging {
    opacity: 0.45;
}

.adm-section--drop-before {
    box-shadow: 0 -2px 0 0 var(--accent);
}

.adm-section--current.adm-section--drop-before {
    box-shadow: inset 2px 0 0 0 var(--accent), 0 -2px 0 0 var(--accent);
}

.adm-section__controls {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-right: var(--space-xs);
}

.adm-section__lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    color: var(--text-secondary);
}

/* --- Add-section menu (a disclosure; site.js gives it Esc + outside-click) --- */
.adm-menu {
    position: relative;
}

.adm-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    cursor: pointer;
}

.adm-menu > summary::-webkit-details-marker {
    display: none;
}

.adm-menu__panel {
    position: absolute;
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    min-width: 220px;
    margin-top: var(--space-xs);
    padding: var(--space-xs);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-overlay);
    background-color: var(--surface-header);
}

.adm-menu__item {
    min-height: 36px;
    padding: var(--space-xs) var(--space-sm);
    border: none;
    border-radius: var(--radius-control);
    background: none;
    color: var(--text-primary-on-raised);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.adm-menu__item:hover {
    background-color: var(--surface-hover);
}

.adm-unapplied {
    color: var(--status-warning-text);
    font-size: var(--font-size--1);
}

/* --- Preview (ADG-R06) -----------------------------------------------------
   The device widths are the requirement's own numbers. The page lays out at the
   chosen width and is drawn scaled to the pane (site.js, enhancePreviewFit), with
   the scale stated under it. Without script it keeps its true size and scrolls in
   its own container (F-R17 keeps the scrollbar visible). */
.adm-preview__tabs {
    display: flex;
    gap: var(--space-xs);
}

.adm-preview__tab {
    min-height: 24px;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-chip);
    background: none;
    color: var(--text-secondary);
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
    cursor: pointer;
}

.adm-preview__tab--current {
    border-color: var(--accent);
    background-color: var(--accent-surface);
    color: var(--accent);
}

.adm-preview {
    --preview-height: max(480px, calc(100vh - 220px));
    --preview-scale: 1;
    overflow-x: auto;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    background-color: var(--surface-deep);
}

/* Scaled to fit once site.js has measured the pane: the frame keeps its device width
   and a height that, drawn smaller, fills the pane's height. */
.adm-preview[data-fitted] {
    height: var(--preview-height);
    overflow: hidden;
}

/* A device narrower than the pane sits in its middle. */
.adm-preview[data-fitted] .adm-preview__frame {
    margin-inline: auto;
}

.adm-preview__frame {
    display: block;
    height: calc(var(--preview-height) / var(--preview-scale));
    transform: scale(var(--preview-scale));
    transform-origin: 0 0;
    border: none;
    background-color: var(--surface-page);
}

.adm-preview__foot {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
}

.adm-preview__scale {
    color: var(--text-secondary);
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
}

.adm-preview--375 .adm-preview__frame { width: 375px; }
.adm-preview--768 .adm-preview__frame { width: 768px; }
.adm-preview--1280 .adm-preview__frame { width: 1280px; }

/* --- Version history (ADG-R04) --------------------------------------------- */
.adm-history__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.adm-history__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    min-height: 36px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-hairline);
}

.adm-history__reason {
    flex: 0 0 160px;
}

.adm-history__when {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--1);
    white-space: nowrap;
}

.adm-history__actor {
    flex: 1 1 auto;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    overflow-wrap: anywhere;
}

/* --- Media picker ----------------------------------------------------------- */
.adm-media {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

.adm-media__current {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.adm-media__thumb {
    width: 48px;
    height: 48px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-deep);
    object-fit: cover;
}

.adm-media__name {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 24ch;
}

.adm-media__none {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.adm-media__actions {
    display: flex;
    gap: var(--space-sm);
}

.adm-media__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-md);
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.adm-media__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-xs);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    background-color: var(--surface-deep);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-size--1);
    text-align: left;
    cursor: pointer;
}

.adm-media__item:hover {
    background-color: var(--surface-hover);
}

.adm-media__item--current {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.adm-media__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-control);
}

.adm-media__caption {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Upload zone (the one file-picker anatomy — F-R27) ---------------------- */
.adm-upload {
    display: flex;
    flex-direction: column;
    gap: var(--field-gap);
}

.adm-upload__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    border: 1px dashed var(--divider);
    border-radius: var(--radius-container);
    background-color: var(--surface-deep);
    cursor: pointer;
}

.adm-upload__zone:hover {
    background-color: var(--surface-hover);
}

.adm-upload__lede {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* The native control is the drop target and the keyboard control; the label's
   button-shaped span is what a pointer user sees. Hiding it with opacity rather
   than display keeps it focusable. */
.adm-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.adm-upload__busy {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* --- Media transfer plan (MediaPackage-v1 M2) ------------------------------
   The preview IS the feature: every placement with its verdict, before anything
   is written. The verdict is words in the Outcome column; the row modifiers only
   de-emphasize, never carry the meaning alone (the draft-row idiom above). */
.adm-media-plan {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.adm-media-plan__summary {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.adm-media-plan__table {
    min-width: 560px;
}

/* Already in place — nothing happens to this row, so it recedes. */
.adm-media-plan__row--same {
    color: var(--text-secondary);
}

/* Skipped — the Reason column says why; italics mark it as not-happening. */
.adm-media-plan__row--skip {
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Confirm / picker overlay ---------------------------------------------- */
.adm-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.adm-modal__scrim {
    position: absolute;
    inset: 0;
    background-color: var(--scrim);
}

.adm-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-xl);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-overlay);
    background-color: var(--surface-raised);
    color: var(--text-primary-on-raised);
}

.adm-modal__panel--wide {
    max-width: 48rem;
}

.adm-modal__title {
    margin: 0;
    font-size: var(--font-size-2);
}

/* F-R13: confirm copy is running text and takes the measure role like any other. */
.adm-modal__lede,
.adm-modal__reversal {
    margin: 0;
    max-width: var(--measure-prose);
}

.adm-modal__reversal {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.adm-modal__consequences {
    margin: 0;
    padding-left: var(--space-xl);
    max-width: var(--measure-prose);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* The primary sits first in the DOM (tab order) and last visually on the right,
   which is the admin-pane arrangement F-R27 states. */
.adm-modal__actions {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

/* --- Toast (Feedback Surfaces; --motion-toast-dwell) -----------------------
   The dwell is the animation, so nothing has to be timed on the circuit. Under
   reduced motion the toast still appears and still leaves — only the fade goes. */
.adm-toast {
    position: fixed;
    right: var(--space-xl);
    bottom: var(--space-xl);
    z-index: var(--z-toast);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--status-success-border);
    border-radius: var(--radius-container);
    background-color: var(--surface-header);
    color: var(--text-primary-on-raised);
    animation: adm-toast-dwell var(--motion-toast-dwell) var(--motion-ease) forwards;
}

@keyframes adm-toast-dwell {
    0% { opacity: 0; }
    6% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .adm-toast {
        animation: adm-toast-hold var(--motion-toast-dwell) step-end forwards;
    }

    @keyframes adm-toast-hold {
        0% { opacity: 1; }
        100% { opacity: 0; visibility: hidden; }
    }
}

/* --- AD-SET theme list ------------------------------------------------------ */
.adm-themes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.adm-themes__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    min-height: 36px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-hairline);
}

.adm-themes__row--current {
    background-color: var(--accent-surface);
    box-shadow: inset 2px 0 0 0 var(--accent);
}

.adm-themes__name {
    flex: 1 1 auto;
}

/* --- AD-SET beta tester agreement (EUL-R03) --------------------------------- */
.adm-eula__subhead {
    margin: var(--space-md) 0 0;
    color: var(--text-primary-on-raised);
    font-size: var(--font-size-0);
}

.adm-eula__meta,
.adm-eula__saved {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* The version in force reads as testers read it, in a capped box: the whole text is
   one scroll away and the history and draft stay in view below it. */
.adm-eula__current {
    max-height: 24rem;
    overflow-y: auto;
    padding: var(--container-pad-dense);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    background-color: var(--surface-deep);
}


/* --- Markdown toolbar (AdminSettingsMarkdownField) --------------------------
   site.js reveals it and does the editing; the rule for [hidden] restates the
   browser's own, because the display above would otherwise win over it. */
.adm-mdtools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.adm-mdtools[hidden] {
    display: none;
}

.adm-mdtools__btn {
    min-height: 32px;
    padding: 0 var(--space-md);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-deep);
    color: var(--text-primary-on-raised);
    font: inherit;
    font-size: var(--font-size--1);
    cursor: pointer;
}

.adm-mdtools__btn:hover {
    background-color: var(--surface-hover);
}

/* Download delivery: the signing key's public half, shown to paste into CloudFront. */
.adm-delivery__key {
    margin: 0;
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}