/*
   Admin, auth and blog styling.

   The public marketing site lives in site.css, ported from the Mockup company profile. This file
   keeps only what that port does not cover: the auth screens, the pre-MudBlazor admin markup that
   is still in use, and the blog.

   Bare element selectors are avoided on purpose. This file loads after MudBlazor.min.css, so
   anything declared on an element selector beats MudBlazor's — setting colour, background or font
   on body here overrode the admin theme outright, and dark mode could not change the page
   background because this rule always won.
*/

:root {
    /* Kept for the admin and blog. The public site's palette is in site.css. */
    --c-primary: #0A89AA;
    --c-primary-dark: #0B4C5F;
    --c-ink: #2A2E30;
    --c-ink-soft: #5B6567;
    --c-surface: #FFFFFF;
    --c-surface-alt: #EDF6F7;
    --c-on-primary: #FFFFFF;
    --c-line: #E6EBF0;

    --w-page: 1260px;
    --radius: 6px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

/* Reserve the scrollbar's width whether or not it is showing. Without this, a language switch
   that momentarily changes the page height makes the scrollbar appear or vanish, and every
   centred element — the nav links most visibly — jumps sideways by its width. */
html {
    scrollbar-gutter: stable;
}

/* ---- utility / auth ------------------------------------------------------ */

.auth { padding: 160px 24px 80px; display: grid; place-items: center; }
.auth__panel { width: min(420px, 100%); }
.auth__panel label { display: block; margin-bottom: 14px; font-size: .9rem; }
.auth__panel input { width: 100%; padding: 10px 12px; border: 1px solid #CBD5E0; border-radius: var(--radius); font: inherit; }
.auth__remember { display: flex; gap: 8px; align-items: center; }
.auth__remember input { width: auto; }

.alert { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; }
.alert-danger { background: #FDE8E8; color: #9B1C1C; }
.alert-success { background: #E6F6EC; color: #1C7C3C; }

.btn-link { background: none; border: 0; color: inherit; text-decoration: underline; padding: 0; cursor: pointer; }

/* ---- legacy admin -------------------------------------------------------- */

.admin { max-width: 100%; margin: 0 auto; padding: 20px 0; }
.admin__section { border: 1px solid #E2E8F0; border-radius: var(--radius); margin-bottom: 20px; }
.admin__section > header { padding: 14px 18px; background: var(--c-surface-alt); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.admin__badge { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-soft); }
.admin__row { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid #EDF2F7; }
.admin__row-main { flex: 1; min-width: 0; }
.admin__row-title { font-weight: 600; }
.admin__row-preview { color: var(--c-ink-soft); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin__actions { display: flex; gap: 6px; flex-shrink: 0; }
.admin__actions button, .admin__actions a { font-size: .82rem; padding: 6px 10px; border: 1px solid #CBD5E0; background: #fff; border-radius: 4px; cursor: pointer; text-decoration: none; color: inherit; }
.admin__field { margin-bottom: 16px; }
.admin__field label { display: block; font-size: .85rem; margin-bottom: 6px; font-weight: 600; }
.admin__field input, .admin__field textarea, .admin__field select { width: 100%; padding: 9px 12px; border: 1px solid #CBD5E0; border-radius: var(--radius); font: inherit; }
.admin__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.admin__hint { font-size: .8rem; color: var(--c-ink-soft); font-weight: 400; }
.is-hidden-row { opacity: .5; }

.colour-field { display: flex; gap: 6px; align-items: center; }
.colour-field input[type=color] { width: 38px; height: 34px; padding: 2px; flex: 0 0 auto; }
.colour-field__bad { font-size: .72rem; color: #9B1C1C; }

.image-preview { display: flex; align-items: center; min-height: 60px; border: 1px dashed #CBD5E0; border-radius: var(--radius); padding: 6px; }
.image-preview img { max-height: 90px; max-width: 100%; object-fit: contain; }

.rte-target { width: 100%; min-height: 200px; font-family: ui-monospace, Consolas, monospace; }

.admin h2 { font-size: 1.1rem; margin-top: 28px; }
.admin__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.admin__table { width: 100%; border-collapse: collapse; }
.admin__table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-soft); border-bottom: 1px solid #E2E8F0; padding: 8px 10px; }
.admin__table td { padding: 10px; border-bottom: 1px solid #EDF2F7; vertical-align: top; }
.admin__table .text-end { text-align: right; }

.badge { font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: #E2E8F0; color: var(--c-ink); }
.badge--published { background: #D7F0DF; color: #1C7C3C; }
.badge--draft { background: #E2E8F0; color: #4A5568; }
.badge--scheduled { background: #DCE9FA; color: #1B4F9B; }
.badge--expired { background: #FDE8E8; color: #9B1C1C; }
.badge--new { background: #FFF3C4; color: #7A5B00; }

/* ---- blog ---------------------------------------------------------------- */

/* The blog sits inside .site, so it inherits the marketing type scale from site.css and only
   needs its own layout here. */
.site .blog-head { padding: 150px 0 40px; background: var(--ice); }
.site .blog-head h1 { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); color: var(--teal-abyss); margin-bottom: .2em; }
.site .blog-head p { color: var(--ink-soft); margin: 0; line-height: 1.75; }

.site .blog-body { padding: 40px 0 80px; }

.site .blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.site .blog-tags a { font-size: .78rem; font-weight: 700; padding: 9px 18px; border-radius: 20px; color: var(--teal-deep); background: var(--ice); transition: all .2s ease; }
.site .blog-tags a:hover, .site .blog-tags a.is-active { background: var(--teal); color: #fff; }

.site .blog-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.site .blog-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: all .25s ease; }
.site .blog-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.site .blog-card__body { padding: 22px 24px 26px; }
.site .blog-card h2 { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--teal-abyss); margin: 0 0 .3em; }
.site .blog-card__media { aspect-ratio: 16 / 9; background: var(--ice); overflow: hidden; }
.site .blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.site .blog-card__meta { font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); margin: 0 0 .6em; }
.site .blog-card__excerpt { font-size: .88rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: .8em; }
.site .blog-card__more { font-size: .78rem; font-weight: 700; color: var(--teal); }

.site .blog-pager { display: flex; gap: 8px; justify-content: center; margin-top: 48px; }
.site .blog-pager a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 4px; color: var(--teal-deep); font-size: .85rem; font-weight: 600; }
.site .blog-pager a.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }

.site .blog-post { padding-bottom: 80px; }
.site .blog-post__cover { margin-top: 88px; max-height: 460px; overflow: hidden; }
.site .blog-post__cover img { width: 100%; height: 100%; object-fit: cover; }
.site .blog-post__back { margin-bottom: 24px; font-size: .8rem; font-weight: 700; color: var(--teal); }
.site .blog-post h1 { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(1.9rem, 4.5vw, 2.8rem); color: var(--teal-abyss); }
.site .blog-post__meta { color: var(--grey); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; margin: 10px 0 28px; }
.site .blog-post__body { max-width: 44rem; font-size: 1rem; line-height: 1.85; color: var(--ink-soft); }
.site .blog-post__body h2, .site .blog-post__body h3 { font-family: var(--font-display); font-style: italic; color: var(--teal-abyss); margin: 1.6em 0 .5em; }
.site .blog-post__body img { border-radius: var(--radius); margin: 1.4em 0; }
.site .blog-post__body a { color: var(--teal); font-weight: 600; }

.site .tag { display: inline-block; font-size: .75rem; padding: 4px 12px; margin: 0 6px 6px 0; border-radius: 999px; background: var(--ice); color: var(--teal-deep); }

/* ---- Diff rendering ------------------------------------------------------
   Diff output is text, never markup: DiffText writes the ins/del elements and
   Razor escapes everything inside them. These rules only colour what it wrote. */

.cms-diff { white-space: pre-wrap; word-break: break-word; }
.cms-diff__ins { background: #d9f2e3; color: #0a4a26; text-decoration: none; border-radius: 3px; padding: 0 2px; }
.cms-diff__del { background: #fadcdc; color: #7a1414; text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.cms-diff__empty { color: #8a8f98; font-style: italic; }

.cms-diff__panes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cms-diff__panes > div { min-width: 0; }

.cms-diff__source {
    max-height: 340px;
    overflow: auto;
    background: #f6f7f9;
    border-radius: var(--radius, 6px);
    padding: 12px;
    font-size: 12px;
    line-height: 1.5;
}

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

/* ---- Restore points -------------------------------------------------------
   One panel, two hosts: the visual editor drops it into its own fixed overlay and the
   structure screen into a MudDialog. Neither supplies a width, so these rules must not
   assume one. */

.cms-hist__error { margin: 0 0 12px; color: #C0392B; font-size: .82rem; }
.cms-hist__empty { margin: 12px 0; color: #6B7A83; font-size: .85rem; }

.cms-hist__save { display: flex; gap: 8px; margin-bottom: 16px; }

.cms-hist__label {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid #D3DCE1;
    border-radius: 4px;
    font: inherit;
    font-size: .85rem;
}

.cms-hist__btn {
    padding: 8px 14px;
    border: 1px solid #D3DCE1;
    border-radius: 4px;
    background: #fff;
    color: #4A5568;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.cms-hist__btn:disabled { opacity: .55; cursor: default; }
.cms-hist__btn.is-primary { border-color: transparent; background: #0FA3C4; color: #fff; }
.cms-hist__btn.is-restore { border-color: #F0C0B8; background: #FDECEA; color: #C0392B; }

.cms-hist__list { margin: 0; padding: 0; list-style: none; max-height: 46vh; overflow-y: auto; }

.cms-hist__item { border-top: 1px solid #E7EDF0; padding: 10px 0; }
.cms-hist__item.is-open { background: #F8FAFB; }

.cms-hist__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cms-hist__what { flex: 1; min-width: 160px; }
.cms-hist__what strong { display: block; font-size: .88rem; color: #14213D; }
.cms-hist__meta { font-size: .74rem; color: #6B7A83; }

.cms-hist__kind {
    padding: 2px 8px;
    border-radius: 999px;
    background: #EEF3F5;
    color: #4A5568;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Taken automatically just before a restore — the entry someone comes looking for. */
.cms-hist__kind--R { background: #FDECEA; color: #C0392B; }
.cms-hist__kind--P { background: #E4F5EC; color: #0a4a26; }

.cms-hist__confirm { margin: 10px 0 2px; padding: 12px; border-radius: 4px; background: #FDECEA; }
.cms-hist__confirm p { margin: 0 0 10px; font-size: .82rem; color: #7A1F14; }
.cms-hist__confirmActions { display: flex; justify-content: flex-end; gap: 8px; }

.cms-hist__diff { margin-top: 10px; }
.cms-hist__block { margin-bottom: 14px; }

.cms-hist__block h4 {
    margin: 0 0 6px;
    font-size: .8rem;
    color: #14213D;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cms-hist__block h4 span { margin-inline-start: 6px; color: #8A98A0; font-weight: 500; }
.cms-hist__field { margin-bottom: 8px; font-size: .84rem; }
.cms-hist__fieldName { display: block; font-size: .72rem; font-weight: 600; color: #6B7A83; }
.cms-hist__only { margin: 6px 0; font-size: .8rem; color: #4A5568; }

@media (max-width: 600px) {
    /* Full-width targets rather than four controls crushed onto one line. */
    .cms-hist__save { flex-direction: column; }
    .cms-hist__row .cms-hist__btn { flex: 1; }

    .cms-diff__source { font-size: 11px; padding: 8px; }
}

/* ---------------------------------------------------------------------------
   The page block in the admin app bar: what is being edited, its state, and
   its versions. Sits on the bar's primary colour, so everything here is drawn
   in the bar's own ink rather than the page palette.
   --------------------------------------------------------------------------- */

.admin-page {
    gap: 8px;
    margin-left: 20px;
    min-width: 0;
}

/* The first thing to go when the bar runs out of room: the name is also in the
   page heading below, while the controls exist nowhere else. */
.admin-page__name {
    font-weight: 600;
    font-size: 0.9rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-page__status {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-page__status.is-live { background: rgba(255, 255, 255, 0.22); }

.admin-page__status.is-draft { background: #B26A00; }

.admin-page__status.is-pending { background: #0B4C5F; }

.admin-page__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.admin-page__select {
    max-width: 220px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.14);
    color: inherit;
    font: inherit;
    font-size: 0.8rem;
}

/* The list itself is drawn by the operating system, which paints it on its own
   surface — without this the options are white text on white. */
.admin-page__select option { color: #2A2E30; background: #FFFFFF; }

.admin-page__select:focus-visible { outline: 2px solid #FFD41D; outline-offset: 1px; }

@media (max-width: 1100px) {
    .admin-page__name,
    .admin-page__label { display: none; }
}

@media (max-width: 820px) {
    .admin-page__status.is-live,
    .admin-page__status.is-draft { display: none; }
}

/* ---------------------------------------------------------------------------
   Admin sidebar and footer, in the Eien One house style: a white column with
   the product mark at the top, plain rows, and the Evolve mark pinned at the
   bottom. Everything here is scoped under .admin-nav / .admin-footer so it
   cannot reach the public site, which has a palette of its own.
   --------------------------------------------------------------------------- */

.admin-nav {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #E6EBF0;
    background: #FFFFFF;
}

.admin-nav__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    padding: 16px 20px;
}

.admin-nav__logo { max-height: 46px; max-width: 100%; }

/* Shown by the img's onerror when the real asset is not present. */
.admin-nav__wordmark {
    display: none;
    font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    color: #0B4C5F;
}

.admin-nav__wordmark span { color: #F5A623; }

.admin-nav__menu {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 12px 16px;
}

.admin-nav__group {
    margin: 18px 0 6px;
    padding: 0 12px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9FA2A6;
}

.admin-nav__group:first-child { margin-top: 6px; }

/* Rows read as text with an icon, not as filled buttons: the reference sidebar
   carries no chrome until something is selected. */
.admin-nav .mud-nav-link {
    gap: 14px;
    margin-bottom: 2px;
    padding: 11px 12px;
    border-radius: 8px;
    color: #2A2E30;
    font-size: 0.92rem;
    font-weight: 500;
}

.admin-nav .mud-nav-link .mud-icon-root { color: #5B6567; }

.admin-nav .mud-nav-link:hover { background: #EDF6F7; }

.admin-nav .mud-nav-link.active {
    background: #EDF6F7;
    color: #0B4C5F;
    font-weight: 700;
}

.admin-nav .mud-nav-link.active .mud-icon-root { color: #0A89AA; }

/* The Evolve mark, held at the bottom of the column whatever the menu's height. */
.admin-nav__by {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 20px 22px;
    border-top: 1px solid #F0F3F6;
}

.admin-nav__by-logo { max-height: 40px; max-width: 100%; opacity: 0.9; }

.admin-nav__by-text {
    display: none;
    font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.16em;
    color: #0B4C5F;
    text-align: center;
}

.admin-nav__by-text small {
    display: block;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: #9FA2A6;
}

/* --- collapse pill ------------------------------------------------------- */

.admin-collapse {
    position: fixed;
    top: 78px;
    left: 240px;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #E6EBF0;
    border-radius: 8px;
    background: #FFFFFF;
    color: #5B6567;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px -4px rgba(6, 46, 58, 0.35);
    transition: left 0.2s ease, background 0.2s ease;
}

.admin-collapse:hover { background: #EDF6F7; }

.admin-collapse:focus-visible { outline: 2px solid #0A89AA; outline-offset: 2px; }

/* The title attribute is a tooltip, not a name a screen reader reliably reads
   for a button whose only content is a decorative glyph. */
.admin-collapse__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Below the drawer's breakpoint the sidebar is off-canvas, so the pill has no
   edge to sit on and the app bar's menu button is the way in. */
@media (max-width: 959px) {
    .admin-collapse { display: none; }
}

/* --- footer -------------------------------------------------------------- */

.admin-main { display: flex; flex-direction: column; min-height: 100vh; }

.admin-footer {
    margin-top: auto;
    padding: 22px 8px 18px;
    border-top: 1px solid #E6EBF0;
    color: #5B6567;
    font-size: 0.82rem;
}

/* Follows the drawer, so the control stays on the sidebar's edge rather than
   hanging in the middle of the content once the sidebar has gone. */
.admin-collapse.is-closed { left: 12px; }

/* The page block shares the bar with the language switch, the theme toggle, the signed-in name
   and sign-out. At 1280px — an ordinary laptop — that was more than fitted, and the controls at
   the end of the block were pushed out of the bar rather than wrapped. Everything below trims the
   block before that happens: the label and the page name go first, because both are repeated in
   the page heading underneath, and the controls are not repeated anywhere. */
.admin-page { margin-left: 12px; }

.admin-page__name { max-width: 180px; }

.admin-page__select { max-width: 190px; }

@media (max-width: 1360px) {
    .admin-page__name,
    .admin-page__label { display: none; }
}

@media (max-width: 1100px) {
    .admin-page__select { max-width: 130px; }
}

@media (max-width: 900px) {
    .admin-page__status.is-live,
    .admin-page__status.is-draft { display: none; }
}

/* ---------------------------------------------------------------------------
   The admin bar, white.

   Everything in it was drawn for a coloured background — white text, translucent
   white fills, a shadow to lift it off the page. On white those read as invisible
   or as smudges, so each is restated here in ink against a hairline rule.
   --------------------------------------------------------------------------- */

.admin-bar {
    color: var(--c-ink);
    border-bottom: 1px solid var(--c-line);
}

.admin-bar .mud-icon-button { color: var(--c-ink-soft); }

.admin-bar .mud-icon-button:hover { background: var(--c-surface-alt); }

/* Outlined buttons — the inactive language, sign out — were white-on-colour. */
.admin-bar .mud-button-outlined-inherit {
    border-color: var(--c-line);
    color: var(--c-ink-soft);
}

.admin-bar .mud-button-outlined-inherit:hover {
    border-color: var(--c-primary);
    background: var(--c-surface-alt);
    color: var(--c-primary-dark);
}

/* --- the page block on a white bar --------------------------------------- */

.admin-page__name { color: var(--c-ink); }

.admin-page__label { color: var(--c-ink-soft); opacity: 1; }

/* Tints rather than solid blocks: three saturated pills in a row on white is
   louder than the information in them. */
.admin-page__status.is-live {
    background: #E3F4E8;
    color: #1B6B37;
}

.admin-page__status.is-draft {
    background: #FDF0DC;
    color: #8A5300;
}

.admin-page__status.is-pending {
    background: var(--c-surface-alt);
    color: var(--c-primary-dark);
}

.admin-page__select {
    border-color: var(--c-line);
    background: #FFFFFF;
    color: var(--c-ink);
}

.admin-page__select:hover { border-color: var(--c-primary); }

.admin-page__select:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 1px;
}

/* The sidebar's own edge already separates it; a second rule under the bar would
   cross it and box the corner in. */
.admin-nav { border-top: 0; }

/* Belt and braces: whichever class MudBlazor settles on for the bar, this is the
   colour it is meant to be. */
.mud-appbar.admin-bar { background-color: #FFFFFF; color: var(--c-ink); }

/* The header when the editor is working on a version that is not the live one. Deliberately loud:
   every edit made in this state goes somewhere the public cannot see, and an editor who has
   forgotten that will wonder why the site never changes. */
.admin-page__status.is-editing {
    background: #FDF0DC;
    color: #8A5300;
}

.admin-page__go {
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #FFD41D;
    color: #2A2E30;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.admin-page__go:hover:not(:disabled) { background: #FFE05C; }

.admin-page__go:disabled { opacity: 0.6; cursor: default; }

.admin-page__go:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* The page name is the only thing in the block allowed to shrink, and it gives up entirely before
   it becomes unreadable. Everything else is a control or a state the editor needs whole: with all
   of them shrinking together the name collapsed to "Res…" while the badges stayed full size. */
.admin-page__status,
.admin-page__label,
.admin-page__select,
.admin-page__go { flex: none; }

.admin-page__name { flex: 0 1 auto; min-width: 0; }

/* Two badges and a Make-live button appear only while editing a version that is not live, and
   together they need the room the name was using. */
@media (max-width: 1500px) {
    .admin-page:has(.is-editing) .admin-page__name,
    .admin-page:has(.is-editing) .admin-page__label { display: none; }
}

/* ---- The runtime's crash bar ------------------------------------------------
   #blazor-error-ui is in index.html and had no rule anywhere, so it rendered as
   an ordinary block: every public page ended with the line "An unhandled error
   has occurred" whether or not anything had. Blazor writes display:block onto
   the element itself when something actually throws, which beats this. */

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 3000;
    padding: 14px 48px 14px 20px;
    background: #FFD41D;
    color: #062E3A;
    font-size: .88rem;
    box-shadow: 0 -2px 14px rgba(6, 46, 58, .25);
}

#blazor-error-ui .reload { color: inherit; text-decoration: underline; }
#blazor-error-ui .dismiss { position: absolute; top: 10px; right: 16px; cursor: pointer; }