@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700&display=swap");

/* Admin design tokens. A customer site retunes the admin by overriding these. */
:root {
    --cms-paper: #ffffff;
    --cms-ground: #f2f0ea;
    --cms-ground-2: #e9e6de;
    --cms-ink: #14140f;
    --cms-ink-2: #3a3a34;
    --cms-dim: #8a8880;
    --cms-rule: #e2ded4;
    --cms-rule-2: #cdc8bb;
    --cms-accent: #7a9d7e;
    --cms-accent-deep: #3d5a40;
    --cms-accent-soft: #e8efe8;
    --cms-warning: #c46a1f;
    --cms-danger: #a23b2b;
    --cms-display: "Cinzel", Georgia, serif;
    --cms-serif: "Instrument Serif", Georgia, serif;
    --cms-body: "Manrope", system-ui, -apple-system, sans-serif;
    --cms-radius: 2px;
    --cms-pill: 999px;
    --cms-fast: 160ms cubic-bezier(.2, .7, .2, 1);
}

/* ─── Shared primitives ─────────────────────────────────────────── */
.cms-wordmark {
    display: block;
    font-family: var(--cms-display);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--cms-ink);
    text-decoration: none;
}

.cms-label {
    font-family: var(--cms-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cms-dim);
}

.cms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    font: 600 .85rem/1 var(--cms-body);
    letter-spacing: .06em;
    border: 1px solid var(--cms-ink);
    border-radius: var(--cms-pill);
    background: transparent;
    color: var(--cms-ink);
    cursor: pointer;
    transition: background var(--cms-fast), color var(--cms-fast), border-color var(--cms-fast);
}

.cms-btn--primary {
    background: var(--cms-ink);
    color: var(--cms-paper);
}

.cms-btn--primary:hover,
.cms-btn--primary:focus-visible {
    background: var(--cms-accent-deep);
    border-color: var(--cms-accent-deep);
}

.cms-btn:focus-visible {
    outline: 3px solid var(--cms-accent-soft);
    outline-offset: 2px;
}

.cms-note {
    margin: 0 0 1.25rem;
    padding: .8rem 1rem;
    border-left: 2px solid var(--cms-accent);
    background: var(--cms-ground);
    font-size: .9rem;
    color: var(--cms-ink-2);
}

.cms-note--error { border-left-color: var(--cms-danger); }
.cms-note--ok { border-left-color: var(--cms-accent-deep); }

.cms-badge {
    display: inline-block;
    padding: .2rem .65rem;
    border: 1px solid var(--cms-rule-2);
    border-radius: var(--cms-pill);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--cms-ink-2);
}

.cms-badge--live {
    border-color: var(--cms-accent);
    background: var(--cms-accent-soft);
    color: var(--cms-accent-deep);
}

.cms-empty {
    margin: 0;
    padding: 2rem 1.5rem;
    color: var(--cms-dim);
}

/* ─── Auth (login / install) ────────────────────────────────────── */
.cms-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background: var(--cms-ground);
    font-family: var(--cms-body);
    color: var(--cms-ink);
}

.cms-auth__inner {
    width: min(420px, 100%);
}

.cms-wordmark--auth {
    text-align: center;
    margin-bottom: 1.5rem;
}

.cms-auth-card {
    background: var(--cms-paper);
    border: 1px solid var(--cms-rule);
    border-radius: var(--cms-radius);
    padding: 2.5rem 2.25rem 2.25rem;
}

.cms-auth-card__title {
    margin: 0 0 .35rem;
    font-family: var(--cms-serif);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.1;
}

.cms-auth-card__lead {
    margin: 0 0 1.75rem;
    color: var(--cms-ink-2);
    font-size: .95rem;
}

.cms-auth-card__foot {
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cms-rule);
    font-size: .88rem;
    color: var(--cms-ink-2);
}

.cms-auth-card__foot a { color: var(--cms-accent-deep); }

.cms-auth-form {
    display: grid;
    gap: 1.25rem;
}

.cms-auth-form small {
    font-size: .8rem;
    color: var(--cms-dim);
}

.cms-auth-form .cms-btn {
    margin-top: .5rem;
    width: 100%;
    padding-block: .95rem;
}

.cms-field {
    display: grid;
    gap: .4rem;
}

.cms-field label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cms-dim);
}

.cms-field input {
    width: 100%;
    padding: .55rem 0 .65rem;
    border: 0;
    border-bottom: 1px solid var(--cms-ink);
    border-radius: 0;
    background: transparent;
    font: 400 1.05rem/1.4 var(--cms-body);
    color: var(--cms-ink);
    outline: none;
    transition: border-color var(--cms-fast);
}

.cms-field input:focus {
    border-bottom-color: var(--cms-accent);
    box-shadow: 0 1px 0 0 var(--cms-accent);
}

/* ─── Admin shell ───────────────────────────────────────────────── */
.cms-root {
    min-height: 100vh;
    background: var(--cms-ground);
}

.cms.mud-layout {
    font-family: var(--cms-body);
    color: var(--cms-ink);
}

.mud-drawer.cms-rail {
    background: var(--cms-ground);
    border-right: 1px solid var(--cms-rule);
    padding: 1.75rem 1rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.cms-rail__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: 1.5rem;
}

.cms-rail .cms-wordmark {
    flex: 1;
    min-width: 0;
    padding: 0 0 0 calc(.75rem + 2px);
    overflow: hidden;
    white-space: nowrap;
}

.cms-rail__toggle {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border: 0;
    border-radius: var(--cms-radius);
    background: none;
    color: var(--cms-dim);
    cursor: pointer;
    transition: background var(--cms-fast), color var(--cms-fast);
}

.cms-rail__toggle:hover { background: var(--cms-ground-2); color: var(--cms-ink); }

.cms-nav.mud-navmenu {
    flex: 1;
}

.cms-nav .mud-nav-link {
    /* MudBlazor aligns the icon to the top of the row; centre it on the label instead. */
    align-items: center;
    border-radius: var(--cms-radius);
    padding: .55rem .75rem;
    color: var(--cms-ink-2);
    font-weight: 500;
    border-left: 2px solid transparent;
}

.cms-nav .mud-nav-link .mud-icon-root {
    color: var(--cms-dim);
    font-size: 1.2rem;
}

.cms-nav .mud-nav-link:hover {
    background: var(--cms-ground-2);
    color: var(--cms-ink);
}

.cms-nav .mud-nav-link.active {
    background: var(--cms-paper);
    color: var(--cms-ink);
    border-left-color: var(--cms-accent);
    font-weight: 600;
}

.cms-nav .mud-nav-link.active .mud-icon-root {
    color: var(--cms-accent-deep);
}

.cms-rail__footer {
    display: grid;
    gap: .25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cms-rule);
}

.cms-rail__footer form { margin: 0; }

.cms-rail__link {
    display: flex;
    align-items: center;
    /* MudBlazor centres bare buttons; the logout row is one and must line up with the links. */
    justify-content: flex-start;
    gap: .75rem;
    width: 100%;
    text-align: left;
    padding: .45rem .75rem;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: var(--cms-radius);
    background: none;
    font: 500 .88rem/1.4 var(--cms-body);
    color: var(--cms-ink-2);
    text-decoration: none;
    cursor: pointer;
}

.cms-rail__link .mud-icon-root {
    flex: none;
    font-size: 1.2rem;
    color: var(--cms-dim);
}

.cms-rail__link:hover .mud-icon-root { color: var(--cms-ink); }

.cms-rail__label { overflow: hidden; white-space: nowrap; }

/* ─── Collapsed rail ────────────────────────────────────────────── */
/* The label element is removed rather than shrunk: MudNavLink lets it absorb the row's free
   space, which pushes the icon off centre. Every row carries a title attribute, which becomes
   its accessible name once the visible text is gone, and doubles as the hover hint. */
.cms-rail--collapsed .cms-wordmark,
.cms-rail--collapsed .cms-nav .mud-nav-link-text,
.cms-rail--collapsed .cms-rail__label { display: none; }

.cms-rail--collapsed .cms-rail__head { justify-content: center; padding-bottom: 1.25rem; }

/* Symmetric padding and no marker border, so both kinds of row centre on the same axis; the
   active page is marked by its background alone at this width. */
.cms-rail--collapsed .cms-nav.mud-navmenu { padding-left: 0; padding-right: 0; }

.cms-rail--collapsed .cms-nav .mud-nav-link,
.cms-rail--collapsed .cms-rail__link {
    justify-content: center;
    gap: 0;
    font-size: 0;
    padding-left: 0;
    padding-right: 0;
    border-left-width: 0;
}

.cms-rail--collapsed .cms-nav .mud-nav-link .mud-icon-root,
.cms-rail--collapsed .cms-rail__link .mud-icon-root { font-size: 1.2rem; }

.cms-rail__link:hover {
    background: var(--cms-ground-2);
    color: var(--cms-ink);
}

.cms-main.mud-main-content {
    background: var(--cms-ground);
    min-height: 100vh;
}

.cms-topbar {
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: var(--cms-paper);
    border-bottom: 1px solid var(--cms-rule);
}

.cms-topbar__title {
    font-family: var(--cms-display);
    font-size: .95rem;
    letter-spacing: .08em;
}

@media (max-width: 959.98px) {
    .cms-topbar { display: flex; }
}

.cms-content {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 3vw, 2.5rem) 4rem;
}

.cms-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--cms-rule-2);
}

.cms-page-title {
    margin: 0;
    font-family: var(--cms-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 2.6vw, 2.35rem);
    letter-spacing: .03em;
    line-height: 1.1;
}

.cms-page-lead {
    margin: .5rem 0 0;
    color: var(--cms-ink-2);
    max-width: 60ch;
}

.cms-page-actions {
    display: flex;
    gap: .6rem;
    align-items: center;
}

/* ─── Cards, stats, tables ──────────────────────────────────────── */
.cms-card {
    background: var(--cms-paper);
    border: 1px solid var(--cms-rule);
    border-radius: var(--cms-radius);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.cms-card--flush { padding: 0; overflow: hidden; }

.cms-card__title {
    margin: 0 0 .5rem;
    font-family: var(--cms-serif);
    font-weight: 400;
    font-size: 1.45rem;
    line-height: 1.15;
}

.cms-card__text {
    margin: 0 0 1.25rem;
    color: var(--cms-ink-2);
    max-width: 60ch;
}

.cms-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.25rem;
}

.cms-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    margin: 0;
}

.cms-stat {
    padding: .25rem 1.5rem .25rem 0;
    border-right: 1px solid var(--cms-rule);
}

.cms-stat + .cms-stat { padding-left: 1.5rem; }
.cms-stat:last-child { border-right: 0; }

.cms-stat dt {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cms-dim);
}

.cms-stat dd {
    margin: .4rem 0 0;
    font-family: var(--cms-serif);
    font-size: 2.4rem;
    line-height: 1;
}

.cms-table.mud-table {
    background: transparent;
}

.cms-table .mud-table-head .mud-table-cell {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cms-dim);
    background: var(--cms-ground);
    border-bottom: 1px solid var(--cms-rule);
}

.cms-table .mud-table-cell {
    border-bottom: 1px solid var(--cms-rule);
    padding: .9rem 1.25rem;
}

.cms-table__order { white-space: nowrap; width: 1%; }
.cms-table__end { text-align: right; width: 1%; white-space: nowrap; }

.cms-table__primary {
    display: block;
    font-weight: 600;
    color: var(--cms-ink);
    text-decoration: none;
}

.cms-table__primary:hover { color: var(--cms-accent-deep); }

.cms-table__secondary {
    display: block;
    font-size: .82rem;
    color: var(--cms-dim);
}

.cms-table__muted { color: var(--cms-ink-2); }

/* ─── Mud overrides for the paper look ──────────────────────────── */
.cms .mud-button-filled,
.cms .mud-button-outlined {
    border-radius: var(--cms-pill);
    padding: .5rem 1.25rem;
}

.cms .mud-button-filled.mud-button-filled-primary {
    background: var(--cms-ink);
    color: var(--cms-paper);
}

.cms .mud-button-filled.mud-button-filled-primary:hover {
    background: var(--cms-accent-deep);
}

.cms .mud-button-outlined.mud-button-outlined-primary {
    border-color: var(--cms-ink);
    color: var(--cms-ink);
}

.cms .mud-button-outlined.mud-button-outlined-primary:hover {
    background: var(--cms-ink);
    color: var(--cms-paper);
}

.cms .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--cms-rule-2);
}

.cms .mud-input-label {
    font-size: .9rem;
}

.mud-snackbar {
    border-radius: var(--cms-radius);
    font-family: var(--cms-body);
}

.mud-popover {
    border: 1px solid var(--cms-rule);
    border-radius: var(--cms-radius);
    box-shadow: 0 12px 30px -16px rgba(20, 20, 15, .35);
}

.mud-dialog {
    border-radius: var(--cms-radius);
}

.mud-dialog .mud-dialog-title {
    font-family: var(--cms-serif);
    font-weight: 400;
}

/* ─── Editor: list · preview · fields ───────────────────────────── */
.cms-savestate {
    align-self: center;
    font-size: .85rem;
    color: var(--cms-dim);
    white-space: nowrap;
}

.cms-savestate--pending, .cms-savestate--saving { color: var(--cms-warning); font-weight: 600; }
.cms-savestate--failed { color: var(--cms-danger); font-weight: 600; }

.cms-tabs {
    display: none;
    gap: .25rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--cms-rule);
}

.cms-tabs__tab {
    padding: .6rem .9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: 600 .9rem/1 var(--cms-body);
    color: var(--cms-dim);
    cursor: pointer;
}

.cms-tabs__tab--active { color: var(--cms-ink); border-bottom-color: var(--cms-accent); }

.cms-editor {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 380px;
    gap: 1rem;
    align-items: start;
}

.cms-blocks {
    background: var(--cms-paper);
    border: 1px solid var(--cms-rule);
    border-radius: var(--cms-radius);
    padding: 1rem .75rem;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 9rem);
    overflow: auto;
}

.cms-blocks > .cms-label { display: block; padding: .75rem .5rem .5rem; }

.cms-settings { border-bottom: 1px solid var(--cms-rule); }

.cms-settings__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem .75rem;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.cms-settings__summary { display: flex; gap: .35rem; flex: 1; flex-wrap: wrap; }

.cms-settings__body { padding: .25rem .25rem 1rem; }

.cms-blocks__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--cms-rule);
}

.cms-block {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--cms-rule);
}

.cms-block--dragging { opacity: .4; }

.cms-block__select {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: .15rem;
    padding: .7rem .5rem .7rem .75rem;
    border: 0;
    border-left: 2px solid transparent;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: grab;
    position: relative;
}

.cms-block__select:hover { background: var(--cms-ground); }
.cms-block--active .cms-block__select {
    background: var(--cms-ground);
    border-left-color: var(--cms-accent);
}
.cms-block--invalid .cms-block__select { border-left-color: var(--cms-danger); }

.cms-block__type {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cms-dim);
}

.cms-block__summary {
    font-family: var(--cms-serif);
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--cms-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-block__warn { position: absolute; top: .7rem; right: .5rem; }

.cms-block__tools {
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--cms-fast);
}

.cms-block:hover .cms-block__tools,
.cms-block--active .cms-block__tools,
.cms-block__tools:focus-within { opacity: 1; }

.cms-block__tools .mud-icon-button { padding: 2px; }

.cms-blocks__empty { margin: .75rem .5rem; color: var(--cms-dim); font-size: .9rem; }

.cms-blocks__add { margin-top: 1rem; }

.cms-fields-panel {
    background: var(--cms-paper);
    border: 1px solid var(--cms-rule);
    border-radius: var(--cms-radius);
    padding: 1.25rem 1.25rem 1.5rem;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 9rem);
    overflow: auto;
}

.cms-fields-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.cms-fields-panel__title {
    margin: .2rem 0 0;
    font-family: var(--cms-serif);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.15;
}

.cms-fields-panel__desc { margin: 0 0 1.25rem; font-size: .85rem; color: var(--cms-ink-2); }

.cms-fields-panel__close { display: none; }

.cms-problems {
    margin-bottom: 1rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--cms-danger);
    border-left-width: 3px;
    border-radius: var(--cms-radius);
    background: var(--cms-paper);
}

.cms-problems__title { margin: 0 0 .5rem; font: 600 .95rem/1.3 var(--cms-body); color: var(--cms-danger); }
.cms-problems__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }

.cms-problems__link {
    display: flex;
    gap: .75rem;
    align-items: baseline;
    padding: .2rem 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--cms-ink);
    text-align: left;
    cursor: pointer;
}

.cms-problems__link:hover span:last-child { text-decoration: underline; }
.cms-problems__where { font-size: .78rem; color: var(--cms-dim); white-space: nowrap; }

.cms-item--invalid .cms-item__toggle { color: var(--cms-danger); }

/* Fields slide over the preview when there is no room for three columns. */
@media (max-width: 1099.98px) {
    .cms-editor { grid-template-columns: 260px minmax(0, 1fr); }

    .cms-fields-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(420px, 100%);
        max-height: none;
        z-index: 1250;
        border-radius: 0;
        box-shadow: -12px 0 32px rgba(20, 20, 15, .15);
        transform: translateX(100%);
        transition: transform var(--cms-fast);
    }

    .cms-fields-panel--open { transform: none; }
    .cms-fields-panel__close { display: inline-flex; }
}

/* Phones: one column with an Redigera / Förhandsgranska switch. */
@media (max-width: 799.98px) {
    .cms-tabs { display: flex; }
    .cms-editor { grid-template-columns: 1fr; }
    .cms-editor--edit .cms-preview { display: none; }
    .cms-editor--preview .cms-blocks { display: none; }
    /* Scoped past the later, equally specific base rules in the preview-frame section. */
    .cms-editor .cms-blocks, .cms-editor .cms-preview { position: static; max-height: none; }
    .cms-editor .cms-preview { height: calc(100vh - 12rem); }
}

@media (prefers-reduced-motion: reduce) {
    .cms-fields-panel { transition: none; }
}

.cms-fields { display: grid; gap: 1.1rem; }

.cms-fields__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.cms-fields__row--narrow-first { grid-template-columns: minmax(90px, 140px) 1fr; }

@media (max-width: 599.98px) {
    .cms-fields__row, .cms-fields__row--narrow-first { grid-template-columns: 1fr; }
}

.cms-image-field {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 599.98px) {
    .cms-image-field { grid-template-columns: 1fr; }
}

.cms-image-field__thumb {
    width: 160px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--cms-rule);
    border-radius: var(--cms-radius);
    background: var(--cms-ground);
}

.cms-image-field__thumb--empty {
    display: grid;
    place-items: center;
    color: var(--cms-dim);
    font-size: .85rem;
}

.cms-image-field__fields { display: grid; gap: 1rem; }

.cms-upload {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    padding: .5rem 1rem;
    border: 1px solid var(--cms-ink);
    border-radius: var(--cms-pill);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
}

.cms-upload:hover { background: var(--cms-ink); color: var(--cms-paper); }

.cms-upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.cms-items { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--cms-rule); }

.cms-items__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.cms-items__limit { margin: 0 0 .5rem; font-size: .82rem; color: var(--cms-dim); }

.cms-items__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--cms-rule);
}

.cms-item { border-bottom: 1px solid var(--cms-rule); }

.cms-item__row { display: flex; align-items: center; }

.cms-item__toggle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .7rem .25rem;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.cms-item__index {
    font-family: var(--cms-serif);
    font-size: 1.1rem;
    color: var(--cms-accent-deep);
    min-width: 1.6rem;
}

.cms-item__title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.cms-item--open .cms-item__title { font-weight: 600; }

.cms-item__tools { display: flex; }

.cms-item__fields { padding: .5rem 0 1.25rem 2.75rem; }

@media (max-width: 599.98px) {
    .cms-item__fields { padding-left: 0; }
}

/* ─── Media library ─────────────────────────────────────────────── */
.cms-dropzone {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .35rem;
    padding: 2.25rem 1rem;
    margin-bottom: 1.5rem;
    border: 1px dashed var(--cms-rule-2);
    border-radius: var(--cms-radius);
    background: var(--cms-paper);
    color: var(--cms-ink-2);
    cursor: pointer;
    transition: border-color var(--cms-fast), background var(--cms-fast);
}

.cms-dropzone:hover,
.cms-dropzone:focus-within { border-color: var(--cms-accent); background: #fbfbf8; }
.cms-dropzone--busy { opacity: .6; pointer-events: none; }
.cms-dropzone .mud-icon-root { color: var(--cms-accent-deep); }
.cms-dropzone__title { font-weight: 600; }
.cms-dropzone__hint { font-size: .82rem; color: var(--cms-dim); }

.cms-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.cms-media {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.cms-media__item {
    background: var(--cms-paper);
    border: 1px solid var(--cms-rule);
    border-radius: var(--cms-radius);
    overflow: hidden;
    display: grid;
}

.cms-media__preview {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--cms-ground);
}

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

.cms-media__meta { padding: .7rem .9rem 0; display: grid; gap: .1rem; }

.cms-media__name {
    font-size: .85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-media__detail { font-size: .78rem; color: var(--cms-dim); }

.cms-media__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .35rem .5rem .5rem;
}

@media (prefers-reduced-motion: reduce) {
    .cms-btn, .cms-field input, .cms-nav .mud-nav-link, .cms-block__tools, .cms-dropzone { transition: none; }
}

.cms-content--wide {
    max-width: none;
    padding: 1.25rem 1.5rem 2rem;
}

.cms-content--wide .cms-page-head {
    padding-bottom: .9rem;
    margin-bottom: 1rem;
}

/* ─── Preview frame ─────────────────────────────────────────────── */
.cms-preview {
    position: sticky;
    top: 1rem;
    height: calc(100vh - 9rem);
    min-height: 420px;
    background: var(--cms-paper);
    border: 1px solid var(--cms-rule);
    border-radius: var(--cms-radius);
    overflow: hidden;
}

.cms-preview__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

/* ─── Block picker ──────────────────────────────────────────────── */
.cms-picker {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.cms-picker__list {
    display: grid;
    align-content: start;
    gap: 1px;
    max-height: 62vh;
    overflow: auto;
    border-right: 1px solid var(--cms-rule);
    padding-right: 1rem;
}

.cms-picker__group {
    margin: 1.1rem 0 .4rem;
    font: 600 .72rem/1 var(--cms-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cms-dim);
}

.cms-picker__group:first-child { margin-top: 0; }

.cms-picker__item {
    /* MudBlazor centres bare buttons with flex; the list reads as a list, left-aligned. */
    display: block;
    padding: .6rem .7rem;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: var(--cms-radius);
    background: none;
    text-align: left;
    font: inherit;
    color: var(--cms-ink);
    cursor: pointer;
    transition: background var(--cms-fast);
}

.cms-picker__item:hover { background: var(--cms-ground); }

.cms-picker__item--active {
    background: var(--cms-ground);
    border-left-color: var(--cms-accent);
    font-weight: 600;
}

.cms-picker__item:focus-visible {
    outline: 2px solid var(--cms-accent);
    outline-offset: 1px;
}

.cms-picker__preview {
    max-height: 62vh;
    overflow: auto;
}

/* Holds the scaled frame: the frame keeps its desktop width and is transformed, so the stage
   needs an explicit height to occupy — cms-editor.js sets both. */
.cms-picker__stage {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--cms-rule);
    border-radius: var(--cms-radius);
    background: #fff;
}

.cms-picker__frame {
    display: block;
    border: 0;
    transform-origin: top left;
    /* A preview, not a demo: nothing inside it is clickable. */
    pointer-events: none;
}

.cms-picker__desc {
    margin: 0 .1rem .9rem;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--cms-ink-2);
}

@media (max-width: 899.98px) {
    .cms-picker { grid-template-columns: 1fr; }

    .cms-picker__list {
        max-height: 12rem;
        border-right: 0;
        border-bottom: 1px solid var(--cms-rule);
        padding: 0 0 .75rem;
    }

    .cms-picker__preview { max-height: none; }
}

.cms-badge--draft { border-style: dashed; color: var(--cms-warning); border-color: var(--cms-warning); }