/* System administration and Admin Help.
   Application Procedures (list + editor), Business Catalogues, Letter Assets,
   General Settings, Demo Applicant Reset, My Account Security, Admin Help and
   the email design preview. Reads the design tokens in hma-ui.css; no colour
   here that is not a token or derived from one. */

/* =========================================================================
   Shared helpers
   ====================================================================== */

/* A row of switches that wraps on a narrow screen. */
.switch-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-3) var(--ui-space-6);
}
.switch-list > div > .form-text { margin-top: 2px; padding-left: 2.75rem; }

/* =========================================================================
   Application Procedures — list
   ====================================================================== */
.procedure-order { display: inline-flex; gap: var(--ui-space-1); }
.procedure-contents { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); }
/* Edit and Deactivate stack when the table is short of room (768–1199px)
   rather than pushing it into a sideways scroll. */
@media (min-width: 768px) { .procedure-table .cell-actions .table-actions { flex-wrap: wrap; } }
@media (min-width: 768px) and (max-width: 1199.98px) { .procedure-order { flex-direction: column; } }
.procedure-rules { display: block; margin-top: var(--ui-space-1); color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }
.procedure-contents__submissions { border-color: var(--ui-info-border); background: var(--ui-info-bg); color: var(--ui-info); }

/* =========================================================================
   Application Procedures — editor
   ====================================================================== */
.procedure-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3) var(--ui-space-5);
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-xs);
}
.procedure-bar__jump { display: flex; flex-wrap: wrap; gap: var(--ui-space-1) var(--ui-space-4); }
.procedure-bar__jump a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 34px;
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-semibold);
    color: var(--ui-primary-text);
    text-decoration: none;
}
.procedure-bar__jump a:hover { text-decoration: underline; }
.procedure-bar__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
.procedure-bar__note { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }

/* Fields and attachments: one accordion row each, with tags beside the name. */
.procedure-items .accordion-button { gap: var(--ui-space-3); flex-wrap: wrap; padding: var(--ui-space-3) var(--ui-space-4); font-size: var(--ui-fs-md); }
.procedure-items .accordion-button::after { margin-left: auto; }
.procedure-item__title { font-weight: var(--ui-fw-semibold); color: var(--ui-text); overflow-wrap: anywhere; }
.procedure-items .accordion-button:not(.collapsed) .procedure-item__title { color: var(--ui-primary-active); }
.procedure-item__tags { display: inline-flex; flex-wrap: wrap; gap: var(--ui-space-1); }
.procedure-items .accordion-body { padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-5); }

/* Reorder and delete, below an item's own form. */
.item-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    margin-top: var(--ui-space-4);
    padding-top: var(--ui-space-4);
    border-top: 1px solid var(--ui-border);
}
.item-tools form { margin: 0; }
.item-tools__end { margin-left: auto !important; }

/* The template already attached to an attachment slot. */
.attachment-current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-4);
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-2);
}
.attachment-current__file { display: grid; gap: 2px; min-width: 0; }
.attachment-current__label { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-medium); }
.attachment-current__name { font-weight: var(--ui-fw-semibold); overflow-wrap: anywhere; }
.attachment-current__meta { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }
.attachment-current__actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.attachment-current__actions form { margin: 0; }

/* "Add a field" / "Add an attachment": a disclosure that reads as a button. */
.add-panel {
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-2);
}
.add-panel > summary {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-height: 48px;
    padding: var(--ui-space-2) var(--ui-space-4);
    color: var(--ui-primary-text);
    font-weight: var(--ui-fw-semibold);
    cursor: pointer;
    list-style: none;
}
.add-panel > summary::-webkit-details-marker { display: none; }
.add-panel > summary:hover { text-decoration: underline; }
.add-panel > summary:focus-visible { outline: 2px solid var(--ui-focus-color); outline-offset: 2px; border-radius: var(--ui-radius-lg); }
.add-panel[open] { border-style: solid; background: var(--ui-surface); }
.add-panel[open] > summary { border-bottom: 1px solid var(--ui-border); }
.add-panel__body { padding: var(--ui-space-4); }

/* =========================================================================
   Business Catalogues
   ====================================================================== */
/* Add forms: labelled fields and the button on one line where there is room. */
.catalogue-add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ui-space-3);
}
.catalogue-add__field { flex: 1 1 220px; min-width: 0; }
.catalogue-add__code { flex: 1 1 180px; min-width: 0; }
.catalogue-add__seats { flex: 0 0 7rem; }
.catalogue-add__help { flex-basis: 100%; margin-top: 0; }

/* The intake list is long; it scrolls inside its card with the header kept. */
.catalogue-scroll { max-height: 26rem; overflow-y: auto; }
.catalogue-scroll .table-sticky thead th { box-shadow: inset 0 -1px 0 var(--ui-border-strong); }

/* Short lists keep their columns on a phone rather than stacking. */
.catalogue-table .cell-actions { width: 1%; }

/* On a phone the seat count moves under the intake name. */
.table .catalogue-phone-only { display: none; }
@media (max-width: 575.98px) {
    .catalogue-table .catalogue-seats { display: none; }
    .table .catalogue-phone-only { display: block; }
}

/* Rename a required document in place. */
.catalogue-rename { display: flex; gap: var(--ui-space-2); align-items: center; min-width: 10rem; }
.catalogue-rename .form-control { flex: 1 1 auto; min-width: 0; }
.catalogue-rename .btn { flex: 0 0 auto; }

@media (max-width: 767.98px) {
    .catalogue-table > :not(caption) > * > *,
    .portal-content .catalogue-table tbody td { padding-left: 0.6rem; padding-right: 0.6rem; }
    .catalogue-scroll { max-height: 24rem; }
    .catalogue-rename { min-width: 0; width: 100%; }
    .catalogue-add > .btn { flex: 1 1 auto; }
}

/* =========================================================================
   Letter Assets
   ====================================================================== */
.asset-panel {
    min-width: 0;
    margin: 0;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
}
fieldset.asset-panel > legend { float: left; width: 100%; }
fieldset.asset-panel > legend + * { clear: left; }
.asset-panel__title { margin: 0 0 var(--ui-space-3); font-size: var(--ui-fs-base); font-weight: var(--ui-fw-semibold); color: var(--ui-text); }
.asset-panel__hint { margin: calc(var(--ui-space-2) * -1) 0 var(--ui-space-3); color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }

.letter-asset-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    margin-bottom: var(--ui-space-3);
    overflow: hidden;
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-2);
}
.letter-asset-preview__empty { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); text-align: center; padding: 0 var(--ui-space-2); }
.letter-asset-img { max-height: 56px; max-width: 160px; width: auto; height: auto; object-fit: contain; }

/* =========================================================================
   General Settings
   ====================================================================== */
.settings-layout { display: block; }
.settings-toc {
    margin-bottom: var(--ui-space-4);
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
}
.settings-toc__title { margin: 0 0 var(--ui-space-2); color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-semibold); }
.settings-toc ul { display: flex; flex-wrap: wrap; gap: var(--ui-space-1) var(--ui-space-4); margin: 0; padding: 0; list-style: none; }
.settings-toc a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 36px;
    color: var(--ui-primary-text);
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-semibold);
    text-decoration: none;
}
.settings-toc a i { width: 16px; text-align: center; color: var(--ui-text-muted); }
.settings-toc a:hover { text-decoration: underline; }

@media (min-width: 1200px) {
    .settings-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--ui-space-5); align-items: start; }
    .settings-toc { position: sticky; top: calc(var(--ui-topbar-h) + var(--ui-space-4)); margin-bottom: 0; padding: var(--ui-space-3); }
    .settings-toc ul { display: grid; gap: 2px; }
    .settings-toc a { width: 100%; padding: 0.35rem var(--ui-space-2); border-radius: var(--ui-radius); }
    .settings-toc a:hover { background: var(--ui-surface-2); text-decoration: none; }
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--ui-space-4) var(--ui-space-5);
}
.settings-field { min-width: 0; }
.settings-field--wide { grid-column: 1 / -1; }
.settings-field--switch { align-self: start; }
.settings-field--switch .form-check { margin-bottom: 0; }
.settings-field--switch .form-check-label { font-weight: var(--ui-fw-medium); color: var(--ui-text); }
.settings-field--switch .form-text { padding-left: 2.75rem; margin-top: 2px; }
.settings-field .form-text { max-width: var(--ui-reading-max); }
.settings-number { max-width: 16rem; }

.logo-field { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ui-space-4); }
.logo-field__inputs { flex: 1 1 18rem; min-width: 0; }
.settings-logo-preview {
    width: auto;
    height: 72px;
    max-width: 10rem;
    padding: var(--ui-space-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-2);
    object-fit: contain;
}

.color-field { display: flex; align-items: center; gap: var(--ui-space-3); }
.color-field .form-control-color {
    width: 3.5rem;
    height: var(--ui-control-h);
    min-height: var(--ui-control-h);
    padding: 0.25rem;
    cursor: pointer;
}
.color-field__value { color: var(--ui-text); font-size: var(--ui-fs-sm); }

/* A small replica of the menu in the chosen colours. The gradient mirrors the
   menu's own in hma-ui.css (the @supports color-mix block); without color-mix
   it falls back to the primary colour alone. */
.brand-preview {
    --bp-primary: var(--hma-primary);
    --bp-secondary: var(--hma-secondary);
    --bp-accent: var(--hma-accent);
    display: grid;
    gap: 2px;
    max-width: 20rem;
    padding: var(--ui-space-2);
    border-radius: var(--ui-radius-lg);
    background: var(--bp-primary);
    box-shadow: var(--ui-shadow-sm);
}
@supports (background: color-mix(in srgb, red, blue)) {
    .brand-preview {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--bp-primary) 55%, #050B1F) 0%,
            color-mix(in srgb, var(--bp-primary) 70%, #0B1739) 55%,
            color-mix(in srgb, var(--bp-secondary) 35%, #1E1B4B) 100%);
    }
}
.brand-preview__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    min-height: 38px;
    padding: var(--ui-space-2) var(--ui-space-3);
    border-radius: var(--ui-radius);
    color: var(--ui-nav-text);
    font-size: var(--ui-fs-md);
    font-weight: var(--ui-fw-medium);
}
.brand-preview__item i { width: 20px; text-align: center; color: var(--ui-nav-icon); }
.brand-preview__item.is-active { color: #FFF; background: var(--ui-nav-active); font-weight: var(--ui-fw-semibold); }
.brand-preview__item.is-active i { color: #FFF; }
.brand-preview__item.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--bp-accent);
}

/* Save stays in reach on a long form. */
.settings-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-2) var(--ui-space-4);
    margin-top: var(--ui-space-2);
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
}
.settings-savebar__note { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); margin-right: auto; }
@media (max-width: 767.98px) {
    .settings-savebar { margin-left: calc(var(--ui-space-4) * -1); margin-right: calc(var(--ui-space-4) * -1); border-radius: 0; border-left: 0; border-right: 0; }
    .settings-savebar__note { display: none; }
    .settings-savebar .btn { flex: 1 1 auto; }
    .settings-number { max-width: none; }
}

/* =========================================================================
   Demo Applicant Reset
   ====================================================================== */
.detail-list--stacked { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }

.reset-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 var(--ui-space-5); margin: 0; padding: 0; list-style: none; }
.reset-counts li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: var(--ui-space-2) 0;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text-secondary);
    font-size: var(--ui-fs-md);
}
.reset-counts li.has-items { color: var(--ui-text); }
.reset-counts__value { font-weight: var(--ui-fw-semibold); }
.reset-counts li.has-items .reset-counts__value { color: var(--ui-danger); }

.reset-effects { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--ui-space-4) var(--ui-space-6); }
.reset-effects__title { display: flex; align-items: center; gap: var(--ui-space-2); }
.reset-effects__title--cleared i { color: var(--ui-danger); }
.reset-effects__title--kept i { color: var(--ui-success); }
.reset-list { margin: 0; padding-left: 1.2rem; font-size: var(--ui-fs-md); line-height: 1.55; }
.reset-list li + li { margin-top: var(--ui-space-1); }

.danger-zone { border-color: var(--ui-danger-border); }
.danger-zone .section-title { display: flex; align-items: center; gap: var(--ui-space-2); color: var(--ui-danger); }
.danger-zone__text { max-width: var(--ui-reading-max); }
.danger-zone__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ui-space-3); }
.danger-zone__field { flex: 1 1 20rem; min-width: 0; max-width: 32rem; }
.danger-zone__field .ui-mono { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .danger-zone__form > .btn { flex: 1 1 auto; }
}

/* =========================================================================
   My Account Security
   ====================================================================== */
.mfa-secret {
    margin: 0 0 var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-2);
    color: var(--ui-text);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-fs-md);
    letter-spacing: 0.04em;
    white-space: pre-wrap;   /* a setup key wraps between its groups of four */
    overflow-x: auto;
}
.mfa-secret--wrap { white-space: pre-wrap; word-break: break-all; font-size: var(--ui-fs-sm); letter-spacing: 0; }
.mfa-codes .mfa-secret { background: var(--ui-surface); }

.mfa-steps { margin: 0; padding: 0; list-style: none; counter-reset: mfa-step; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-4); }
.mfa-steps > li {
    position: relative;
    padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-4) 3.5rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    min-width: 0;
    counter-increment: mfa-step;
}
.mfa-steps > li::before {
    content: counter(mfa-step);
    position: absolute;
    left: var(--ui-space-4);
    top: var(--ui-space-4);
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--ui-primary-soft);
    color: var(--ui-primary-active);
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-bold);
}
.mfa-steps .section-subtitle { margin-bottom: var(--ui-space-2); }
.mfa-link > summary { color: var(--ui-primary-text); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-semibold); cursor: pointer; }

.mfa-confirm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ui-space-3); }
.mfa-confirm__field { flex: 1 1 16rem; min-width: 0; max-width: 24rem; }
.mfa-code { width: 10rem; font-family: var(--ui-font-mono); font-size: var(--ui-fs-lg); letter-spacing: 0.2em; }
@media (max-width: 575.98px) {
    .mfa-steps > li { padding-left: var(--ui-space-4); padding-top: 3.25rem; }
    .mfa-confirm > .btn { flex: 1 1 auto; }
}

/* =========================================================================
   Admin Help
   ====================================================================== */
/* Area filter: chips where there is room, the select on a phone. Both are
   always in the page and always agree (admin-help.js). */
.help-filter__chips { display: none; }
@media (min-width: 768px) {
    .help-filter__select { display: none; }
    .help-filter__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-3); margin-top: var(--ui-space-3); }
}
.help-filter__chips-label { color: var(--ui-text); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-semibold); }
.help-chips .segmented__item { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.help-chips .segmented__item:hover { background: var(--ui-surface-3); }
.help-chips .segmented__item[aria-pressed="true"] {
    color: var(--ui-text);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm), 0 0 0 1px var(--ui-border);
}
.help-chips .segmented__item[aria-pressed="true"] .ui-count { background: var(--ui-primary); color: #FFF; }
.help-chips .segmented__item:focus-visible { outline: 2px solid var(--ui-focus-color); outline-offset: 1px; }

.help-group + .help-group { margin-top: var(--ui-space-6); }
.help-group__title { margin: 0 0 var(--ui-space-3); font-size: var(--ui-fs-xl); font-weight: var(--ui-fw-bold); color: var(--ui-text); }
.help-card { margin-bottom: var(--ui-space-3); }

.help-card__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-3);
}
.help-card__heading { min-width: 0; flex: 1 1 18rem; }
.help-card__title { margin: 0 0 2px; font-size: var(--ui-fs-lg); font-weight: var(--ui-fw-semibold); }
.help-card__location { margin: 0; color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
.help-card__location i { color: var(--ui-text-muted); margin-right: 0.25rem; }
.help-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); min-width: 0; max-width: 100%; }

/* The roles tag can carry a full sentence ("Admissions Officer and
   Administrator (only an Administrator may invite staff)"): let it wrap
   rather than truncate or push the page sideways on a phone. */
.ui-tag.help-card__roles { white-space: normal; overflow: visible; text-overflow: clip; max-width: 36rem; align-items: flex-start; }
.ui-tag.help-card__roles i { margin-top: 0.2em; }
.help-card__roles--admin { border-color: var(--ui-review-border); background: var(--ui-review-bg); color: var(--ui-review); }

.help-card__summary { max-width: var(--ui-reading-max); margin-bottom: var(--ui-space-4); overflow-wrap: anywhere; }

/* Two columns where there is room, stacked on a narrow screen. */
.help-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--ui-space-4) var(--ui-space-5);
}
.help-block__title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 var(--ui-space-2);
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
    font-weight: var(--ui-fw-semibold);
}
.help-block__title i { color: var(--ui-primary); width: 16px; text-align: center; }
.help-list { margin: 0; padding-left: 1.2rem; font-size: var(--ui-fs-md); line-height: 1.55; }
.help-list li { overflow-wrap: anywhere; margin-bottom: var(--ui-space-1); }

.help-warnings {
    margin-top: var(--ui-space-4);
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-warning-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-warning-bg);
}
.help-warnings .help-block__title,
.help-warnings .help-block__title i { color: var(--ui-warning); }

/* The screenshot is opened on request: a full-page capture is tall. */
.help-shot { margin-top: var(--ui-space-4); }
.help-shot > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    color: var(--ui-primary-text);
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-semibold);
    cursor: pointer;
}
.help-shot figure { margin: var(--ui-space-2) 0 0; }
.help-shot img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 32rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    object-fit: cover;
    object-position: top center;
    background: var(--ui-surface);
}
.help-shot figcaption { margin-top: var(--ui-space-1); color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }
@media (max-width: 575.98px) {
    .help-card__badges { width: 100%; }
    .help-shot img { max-height: 20rem; }
}
@media print {
    .help-shot { display: none; }
    .help-filter__chips, .help-filter__select { display: none !important; }
}

/* =========================================================================
   Email design preview (development only)
   ====================================================================== */
.email-preview__panes {
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-top: 0;
    border-radius: 0 0 var(--ui-radius-md) var(--ui-radius-md);
    background: var(--ui-surface-2);
}
.email-frame {
    display: block;
    width: 640px;
    max-width: 100%;
    height: 1300px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: #FFF;
}
.email-text { white-space: pre-wrap; font-size: var(--ui-fs-sm); color: var(--ui-text); }