/* Public pages load this file too, and customer sites rely on its faces: Manrope 700 for their bold
   text (on marsjon.se the 404 and error pages' headings, buttons and eyebrows; rich-text <strong>
   wherever a site leaves it bold), Cinzel 600 and Instrument Serif. Keep 0.3.0's full list. A
   browser downloads only the faces its text uses, so the admin pays nothing for the rest. */
@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, from the admin handoff (docs/design/2026-10-01-cms-admin-handoff). A customer
   site retunes the admin by overriding these. */
:root {
    --cms-paper: #ffffff;               /* Surface: cards, panels, the login form's side */
    --cms-ground: #faf8f3;              /* Paper: the content background */
    --cms-ground-2: #f1eee8;            /* A hover on paper */
    --cms-ink: #161616;                 /* Ink: text, filled buttons, the menu, selected states, focus */
    --cms-ink-2: #2a2825;               /* Ink2: secondary text, tooltips */
    --cms-dim: #6b665d;                 /* Muted: labels and meta text */
    --cms-cream: #f5f2eb;               /* Cream: text on ink */
    --cms-rule: rgba(22, 22, 22, .09);  /* Line: dividers, card borders */
    --cms-rule-2: rgba(22, 22, 22, .28);/* A field's border */
    --cms-accent: #161616;              /* What is selected or active */
    --cms-accent-deep: #6b665d;         /* A link's hover */
    --cms-accent-soft: #e9e5dc;         /* A soft fill */
    --cms-scheduled: #e9e5dc;           /* The Schemalagd chip */
    --cms-bar: #d9d4ca;                 /* A day in the visits chart; today is ink */
    --cms-warning: #c46a1f;
    --cms-danger: #a23b2b;
    --cms-display: "Cinzel", Georgia, serif;
    --cms-body: "Manrope", system-ui, -apple-system, sans-serif;
    --cms-radius: 4px;                  /* Buttons, fields, menu items */
    --cms-radius-card: 6px;
    --cms-radius-panel: 8px;            /* Floating editor panels, dialogs */
    --cms-radius-chip: 12px;
    --cms-pill: 999px;
    --cms-shadow-panel: 0 24px 48px -16px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .08);
    --cms-fast: 160ms cubic-bezier(.2, .7, .2, 1);
}

/* ─── Shared primitives ─────────────────────────────────────────── */
.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);
}

/* The buttons of the static pages (login, first-time setup, the password form), shaped like
   MudBlazor's under the admin theme: 44px, 4px corners, spaced capitals. */
.cms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    font: 500 13px/1 var(--cms-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--cms-ink);
    border-radius: var(--cms-radius);
    background: transparent;
    color: var(--cms-ink);
    cursor: pointer;
    transition: background var(--cms-fast), color var(--cms-fast), border-color var(--cms-fast);
}

.cms-btn .mud-icon-root { width: 18px; height: 18px; }

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

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

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

.cms-btn:disabled { opacity: .45; cursor: default; }

.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-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(22, 22, 22, .35);
    border-radius: var(--cms-radius-chip);
    font: 500 11px/1 var(--cms-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cms-ink-2);
    /* A badge is one label; in a narrow row it moves down whole instead of breaking in two. */
    white-space: nowrap;
}

.cms-badge--live {
    border-color: var(--cms-ink);
    background: var(--cms-ink);
    color: var(--cms-cream);
}

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

/* A link in dim text, such as Inga sidor än's Ny sida, underlined in ink as the login's help link. */
.cms-empty a {
    color: var(--cms-ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* ─── Auth (login, first-time setup, access denied) ─────────────── */
/* Two columns from 1200px (the mark, wordmark and tagline need that much ink side): Marsjön's mark on ink, the page's own content on white. Below, the ink
   side is a band above the form. */
.cms-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 560px;
    background: var(--cms-paper);
    font-family: var(--cms-body);
    color: var(--cms-ink);
}

.cms-auth__brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 56px 64px;
    background: var(--cms-ink);
    color: var(--cms-cream);
}

.cms-auth__brand .cms-overline { margin: 0; color: rgba(245, 242, 235, .55); }

.cms-auth__mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 52px;
}

.cms-auth__logo { width: 280px; height: 280px; color: var(--cms-cream); }

.cms-auth__name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.cms-auth__wordmark {
    display: flex;
    align-items: center;
    gap: .32em;
    margin: 0;
    font: 500 46px/1 var(--cms-display);
    letter-spacing: .06em;
}

.cms-auth__wordmark i {
    flex: none;
    width: .16em;
    height: .16em;
    border-radius: 50%;
    background: currentColor;
    opacity: .85;
}

.cms-auth__tagline {
    margin: 0;
    font: 300 22.7px/1 var(--cms-body);
    letter-spacing: .46em;
    text-indent: .46em;
    text-transform: uppercase;
    opacity: .78;
}

.cms-auth__contact {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    font-size: 12px;
    letter-spacing: .14em;
}

.cms-auth__contact a { color: rgba(245, 242, 235, .55); text-decoration: none; }
.cms-auth__contact a:hover { color: var(--cms-cream); }
.cms-auth .cms-auth__contact a:focus-visible { outline-color: var(--cms-cream); }

.cms-auth__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 80px;
    background: var(--cms-paper);
}

/* Centred under the band below 1200px; from 1200px it fills the 560px panel's 400px exactly. */
.cms-auth__inner { width: 100%; max-width: 400px; margin-inline: auto; }

.cms-auth__title {
    margin: 14px 0 12px;
    font: 400 40px/1.15 var(--cms-display);
}

/* The site's FocusOnNavigate focuses the H1 after each navigation (tabindex=-1), and a site's
   own [tabindex]:focus-visible ring would box it; the heading is not a control. */
.cms-auth .cms-auth__title:focus-visible { outline: none; }

.cms-auth__lead {
    margin: 0 0 40px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cms-dim);
}

.cms-auth__help,
.cms-auth__foot {
    font-size: 13px;
    line-height: 1.6;
    color: var(--cms-dim);
}

.cms-auth__help { margin: 48px 0 0; }
.cms-auth__foot { margin: 16px 0 0; }

.cms-auth__help a,
.cms-auth__foot a {
    color: var(--cms-ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.cms-auth__help a:hover,
.cms-auth__foot a:hover { color: var(--cms-dim); }

.cms-auth-form {
    display: grid;
    gap: 24px;
}

.cms-auth-form .cms-btn { width: 100%; margin-top: 8px; }

/* The password form on Mitt konto keeps the login form's width inside a wide admin card. */
.cms-card .cms-auth-form { max-width: 420px; }

.cms-btn--block { width: 100%; height: 52px; }

/* A field in the handoff's outlined style: the label on the top border, 56px tall, a 2px ink
   border while it has the focus. The static pages and Mitt konto's password form use it. */
.cms-field {
    position: relative;
    display: grid;
    gap: 6px;
}

.cms-field label {
    position: absolute;
    top: -8px;
    left: 12px;
    z-index: 1;
    padding: 0 4px;
    background: var(--cms-paper);
    font: 400 12px/16px var(--cms-body);
    color: var(--cms-dim);
}

.cms-field:focus-within label { color: var(--cms-ink); }

.cms-field__box { position: relative; }

.cms-field input {
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    padding: 0 16px;
    border: 1px solid var(--cms-rule-2);
    border-radius: var(--cms-radius);
    background: var(--cms-paper);
    font: 400 15px/1.4 var(--cms-body);
    color: var(--cms-ink);
    outline: none;
    transition: border-color var(--cms-fast);
}

/* The 2px border is the focus indicator; a site's own input:focus-visible outline would double it. */
.cms-field input:focus-visible { outline: none; }
.cms-field input:hover { border-color: var(--cms-ink-2); }
.cms-field input:focus { border: 2px solid var(--cms-ink); padding: 0 15px; }
.cms-field--adorned input { padding-left: 48px; }
.cms-field--adorned input:focus { padding-left: 47px; }
.cms-field--toggle input { padding-right: 56px; }
.cms-field--toggle input:focus { padding-right: 55px; }

.cms-field__icon.mud-icon-root {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--cms-dim);
    pointer-events: none;
}

.cms-field:focus-within .cms-field__icon.mud-icon-root { color: var(--cms-ink); }

.cms-field__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--cms-dim);
    transform: translateY(-50%);
    cursor: pointer;
}

.cms-field__toggle:hover { background: rgba(22, 22, 22, .06); color: var(--cms-ink); }
.cms-field__toggle:focus-visible { outline: 2px solid var(--cms-ink); outline-offset: -2px; }
.cms-field__toggle .mud-icon-root { width: 20px; height: 20px; }

.cms-field__hide,
.cms-field__toggle--shown .cms-field__show { display: none; }
.cms-field__toggle--shown .cms-field__hide { display: block; }

.cms-field small,
.cms-field__help {
    margin: 0;
    padding: 0 16px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--cms-dim);
}

/* Kept in the accessibility tree for its aria-live; empty, it takes no height and no grid gap. */
.cms-field__help:empty { margin-top: -6px; }

/* A problem found in the browser: the error colour on the border, the label and the message. */
.cms-field--invalid input,
.cms-field--invalid input:hover,
.cms-field--invalid input:focus { border-color: var(--cms-danger); }

.cms-field--invalid label,
.cms-field--invalid .cms-field__help { color: var(--cms-danger); }

.cms-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
    font-size: 14px;
    color: var(--cms-ink);
    cursor: pointer;
}

/* 15px with 2.5px either side: a 20px box, so the label starts 30px in, as in the handoff. */
.cms-check input {
    width: 15px;
    height: 15px;
    margin: 0 2.5px;
    accent-color: var(--cms-ink);
    cursor: pointer;
}

.cms-check input:focus-visible { outline: 2px solid var(--cms-ink); outline-offset: 2px; }

/* Kom ihåg mig on the left and Glömt lösenord? on the right, as in the handoff. */
.cms-auth-form__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.cms-auth__link {
    font-size: 14px;
    color: var(--cms-ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.cms-auth__link:hover { color: var(--cms-dim); }

/* A page with no lead, such as Glömt lösenord, keeps the lead's room under its title. */
.cms-auth__title + .cms-note,
.cms-auth__title + .cms-auth-form { margin-top: 28px; }

@media (max-width: 1199.98px) {
    /* The band keeps its own height on a short page; the panel takes what is left. */
    .cms-auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .cms-auth__brand { align-items: center; padding: 28px 24px; }
    .cms-auth__brand > .cms-overline,
    .cms-auth__contact { display: none; }
    .cms-auth__mark { gap: 16px; }
    .cms-auth__logo { width: 88px; height: 88px; }
    .cms-auth__name { gap: 10px; }
    .cms-auth__wordmark { font-size: 24px; }
    .cms-auth__tagline { font-size: 12px; }
    .cms-auth__panel { justify-content: flex-start; padding: 40px 24px 48px; }
    .cms-auth__title { font-size: 32px; }
}

/* ─── Admin shell ───────────────────────────────────────────────── */
/* The admin's own text size, so a customer site's later body { font-size } (16.56px on
   marsjon.se) does not reach it. It encloses the layout and the Mud providers (dialogs, menus,
   tooltips) and exists only in the admin. */
.cms-root {
    min-height: 100vh;
    background: var(--cms-ground);
    font: 400 14px/1.55 var(--cms-body);
    color: var(--cms-ink);
}

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

/* The menu, on ink: Marsjön's mark, the site, the admin's pages, and who is signed in. */
.mud-drawer.cms-rail {
    background: var(--cms-ink);
    color: var(--cms-cream);
    border-right: 0;
}

/* A fixed height, so folding (which shrinks the mark) leaves the rows below where they are. */
.cms-rail__logo {
    display: flex;
    align-items: center;
    flex: none;
    height: 112px;
    padding: 0 24px;
    color: var(--cms-cream);
}

.cms-rail__logo svg { flex: none; width: 56px; height: 56px; }

/* The mark leads to Översikt; only the mark, not the band it sits in. */
.cms-rail__home { display: flex; color: inherit; border-radius: var(--cms-radius); }

/* The site box opens the site menu. MudMenu's wrapper is the button; the box inside it is what shows.
   MudBlazor gives the wrapper display: contents, which no browser lets take the focus. */
.cms-site-box.mud-menu { display: block; flex: none; align-self: stretch; margin: 0 24px 14px; }
.cms-site-box.mud-menu > div.mud-menu-activator { display: block; width: 100%; border-radius: var(--cms-radius); cursor: pointer; }

.cms-site {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(245, 242, 235, .14);
    border-radius: var(--cms-radius);
    overflow: hidden;
}

.cms-site:hover { background: rgba(245, 242, 235, .06); }

/* On one of the site menu's pages, marked as the menu marks its current page. */
.cms-site.cms-site--current { background: rgba(245, 242, 235, .1); }

.cms-site__icon.mud-icon-root { flex: none; width: 20px; height: 20px; opacity: .7; }
.cms-site__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.cms-site__more.mud-icon-root { flex: none; width: 18px; height: 18px; opacity: .55; }

/* As wide as the box at least, and as wide as its names when the menu is folded to 72px. */
.cms-site-menu.mud-popover { min-width: 212px; }

/* The page you are on, shaded as well as given its filled icon. */
.cms-site-menu .mud-menu-item[aria-current="page"] { background: var(--mud-palette-action-default-hover); font-weight: 500; }

.cms-site__name,
.cms-site__host {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-site__name { font-size: 13px; font-weight: 500; }
.cms-site__host { font-size: 11px; color: rgba(245, 242, 235, .55); }

/* Under utveckling: only signed-in users see the site. Amber, with a dot, on the ink menu. */
.cms-site__status { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; color: #e9b872; white-space: nowrap; }
.cms-site__status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.cms-nav.mud-navmenu {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    overflow-y: auto;
}

.cms-nav .mud-nav-link {
    /* MudBlazor aligns the icon to the top of the row; centre it on the label instead. */
    align-items: center;
    height: 44px;
    padding: 0 14px;
    border-radius: var(--cms-radius);
    color: rgba(245, 242, 235, .72);
    font-size: 14px;
    line-height: 1;
}

.cms-nav .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    flex: none;
    width: 20px;
    height: 20px;
    color: inherit;
}

.cms-nav .mud-nav-link .mud-nav-link-text {
    margin-left: 16px;
    margin-inline-start: 16px;
    letter-spacing: .02em;
}

.cms-nav .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background: rgba(245, 242, 235, .06);
    color: var(--cms-cream);
}

/* Specific enough to replace MudBlazor's colours for the current page, which are the primary
   colour: ink, on an ink menu. */
.cms-nav.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled),
.cms-nav.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled),
.cms-nav.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible:not(.mud-nav-link-disabled) {
    background: rgba(245, 242, 235, .1);
    color: var(--cms-cream);
}

.cms-rail__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    padding: 18px 24px;
    border-top: 1px solid rgba(245, 242, 235, .1);
    overflow: hidden;
}

/* Which CMS the site runs, quiet and centred under the account. Hidden with the menu's other texts when it is folded. */
.cms-rail__version {
    flex: none;
    margin: -10px 0 0;
    padding: 0 24px 14px;
    overflow: hidden;
    text-align: center;
    color: rgba(245, 242, 235, .38);
    font-size: 11px;
    letter-spacing: .04em;
    white-space: nowrap;
}

.cms-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    border-radius: var(--cms-radius);
}

.cms-user__avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cms-cream);
    color: var(--cms-ink);
    font: 500 13px/1 var(--cms-display);
    letter-spacing: .06em;
}

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

.cms-user__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.cms-user__role { font-size: 11px; color: rgba(245, 242, 235, .55); }
.cms-user:hover .cms-user__name { text-decoration: underline; text-underline-offset: 3px; }
.cms-user__logout { flex: none; margin: 0; }

.cms-user__logout-button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgba(245, 242, 235, .6);
    cursor: pointer;
}

.cms-user__logout-button:hover { background: rgba(245, 242, 235, .08); color: var(--cms-cream); }

/* On ink a 2px ink ring would not show, so the menu's focus ring is cream. */
.cms .cms-rail a:focus-visible,
.cms .cms-rail .cms-site-box > .mud-menu-activator:focus-visible,
.cms-user__logout-button:focus-visible {
    outline: 2px solid var(--cms-cream);
    outline-offset: -2px;
}

/* ─── Collapsed rail ────────────────────────────────────────────── */
/* Only where the menu takes width from the page. Below 960px it opens over the page, so it
   always shows its labels and has nothing to fold.
   The menu slides between 260 and 72px with MudBlazor's own timing for the page beside it. The
   rows keep their places, and the names fade and are clipped by the narrowing menu, so only the
   widths move; folded, each item's name is its tooltip. */
/* Until the browser has told MudBlazor its width, a phone's rail stays off screen: the first paint of a visit never
   flashes the menu open over the page. */
@media (max-width: 959.98px) {
    .mud-layout.cms .mud-drawer.cms-rail.mud-drawer--initial { visibility: hidden; }
}

@media (min-width: 960px) {
    /* Specific enough to replace MudBlazor's own transition, which is for its slide in and out. */
    .mud-layout.cms .mud-drawer.cms-rail.mud-drawer-responsive {
        overflow-x: hidden;
        transition: width 225ms cubic-bezier(0, 0, .2, 1), left 225ms cubic-bezier(0, 0, .2, 1);
    }

    .cms-rail__logo,
    .cms-site-box.mud-menu,
    .cms-site,
    .cms-rail__footer { transition: padding 225ms cubic-bezier(0, 0, .2, 1), margin 225ms cubic-bezier(0, 0, .2, 1); }

    .cms-rail__logo svg { transition: width 225ms cubic-bezier(0, 0, .2, 1), height 225ms cubic-bezier(0, 0, .2, 1); }

    .cms-nav .mud-nav-link { overflow: hidden; }

    .cms-nav .mud-nav-link-text,
    .cms-site__text,
    .cms-site__more,
    .cms-user__text,
    .cms-user__logout { white-space: nowrap; transition: opacity 150ms ease, visibility 0s; }

    /* 72px wide: the mark, the site's globe, the menu's icons and the avatar on its centre line. */
    .cms-rail--collapsed .cms-rail__logo { padding: 0 16px; }
    .cms-rail--collapsed .cms-rail__logo svg { width: 40px; height: 40px; }
    .cms-rail--collapsed .cms-site-box.mud-menu { margin: 0 12px 14px; }
    .cms-rail--collapsed .cms-site { padding: 12px 13px; }
    .cms-rail--collapsed .cms-rail__footer { padding: 18px; }

    /* Faded, not removed: a screen reader still reads each item's name, and the account's. */
    .cms-rail--collapsed .cms-nav .mud-nav-link-text,
    .cms-rail--collapsed .cms-site__text,
    .cms-rail--collapsed .cms-site__more,
    .cms-rail--collapsed .cms-user__text { opacity: 0; }

    /* Folded, the menu's foot is the avatar alone; logout is out of the tab order until it unfolds. */
    .cms-rail--collapsed .cms-rail__version { opacity: 0; visibility: hidden; }

    .cms-rail--collapsed .cms-user__logout {
        opacity: 0;
        visibility: hidden;
        transition: opacity 150ms ease, visibility 0s 150ms;
    }

    .cms-appbar .cms-appbar__open { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mud-layout.cms .mud-drawer.cms-rail.mud-drawer-responsive,
    .cms-rail__logo, .cms-rail__logo svg, .cms-site-box.mud-menu, .cms-site, .cms-rail__footer,
    .cms-nav .mud-nav-link-text, .cms-site__text, .cms-site__more, .cms-user__text, .cms-user__logout,
    .cms-main.mud-main-content, .cms-appbar.mud-appbar { transition: none; }
}

/* The top bar is in the page's flow, so MudBlazor's padding for a fixed one goes. */
.cms-main.mud-main-content {
    min-height: 100vh;
    padding-top: 0;
    background: var(--cms-ground);
}

/* The menu's toggle, where you are, and the public site. Sticky in the page's flow, so it moves
   with the menu's width exactly as the page does. */
.cms-appbar.mud-appbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--cms-ground);
    color: var(--cms-ink);
    border-bottom: 1px solid var(--cms-rule);
}

/* MudBlazor gives an app bar beside an open responsive drawer its own margin and a narrower
   width from 960px. This one is inside the main content, which already sits beside the menu,
   so it would be pushed in twice: it spans the main content, open and folded. */
.mud-layout.cms .cms-main.mud-main-content .mud-appbar.cms-appbar {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.cms-appbar .mud-toolbar {
    height: 64px;
    gap: 10px;
    padding: 0 32px 0 20px;
}

.cms-appbar .mud-icon-button { color: var(--cms-ink-2); }

.cms-crumbs { min-width: 0; }

/* A grid that gives the site's name and the page's equal shares of the room: the shorter stays
   whole, and a long site name gives way before the page's. */
.cms-crumbs ol {
    display: grid;
    grid-template-columns: minmax(0, max-content) max-content minmax(0, max-content);
    justify-content: start;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--cms-dim);
}

.cms-crumbs li { min-width: 0; }
.cms-crumbs a { color: inherit; text-decoration: none; }
.cms-crumbs a:hover { color: var(--cms-ink); }
.cms-crumbs__sep { display: flex; flex: none; }
.cms-crumbs__sep .mud-icon-root { width: 16px; height: 16px; }

.cms-crumbs__site,
.cms-crumbs__page {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-crumbs__page { color: var(--cms-ink); }
.cms-appbar__site.mud-button-root { flex: none; }

.cms-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 36px 32px 48px;
}

.cms-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* A short line above a title: the dashboard's date, the login's "Logga in". */
.cms-overline {
    margin: 0 0 10px;
    font: 400 11px/1.6 var(--cms-body);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--cms-dim);
}

.cms-page-title.mud-typography {
    margin: 0;
    color: var(--cms-ink);
}

/* As the auth pages' H1: the site's FocusOnNavigate focuses the title on a page load and after a
   keyboard navigation, and the site's own [tabindex]:focus-visible ring would box it. */
.cms .cms-page-title:focus-visible { outline: none; }

.cms-page-lead {
    margin: 8px 0 0;
    max-width: 60ch;
    font-size: 15px;
    color: var(--cms-dim);
}

/* Wraps on a phone rather than pushing the page sideways (the editor's row is the widest). */
.cms-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

@media (max-width: 959.98px) {
    .cms-appbar .cms-appbar__fold { display: none; }
    /* Folded on a desktop, the menu still opens with its names on a phone. Important, because
       MudDrawer writes its width into the element's own style. */
    .mud-drawer.cms-rail--collapsed { --mud-drawer-width: 260px !important; }
    /* The breadcrumb shortens to the page's name. */
    .cms-crumbs__site,
    .cms-crumbs__sep { display: none; }
    .cms-crumbs ol { grid-template-columns: minmax(0, max-content); }
    .cms-appbar .mud-toolbar { padding: 0 16px 0 8px; }
    .cms-content { padding: 24px 16px 40px; }
    .cms-page-title.mud-typography { font-size: 28px; }
    /* The menu opens over the page with its labels shown, so a tooltip would only repeat them.
       Important, to beat MudBlazor's .d-flex { display: flex !important } on the popover. */
    .mud-tooltip.cms-nav__tip { display: none !important; }
}

/* ─── Cards and tables ──────────────────────────────────────────── */
/* Outlined, with no shadow: a 1px line and 6px corners, as the dashboard's cards. */
.cms-card {
    background: var(--cms-paper);
    border: 1px solid var(--cms-rule);
    border-radius: var(--cms-radius-card);
    padding: 20px 22px;
    margin-bottom: 16px;
}

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

.cms-card__title {
    margin: 0 0 12px;
    font: 600 15px/1.3 var(--cms-body);
    color: var(--cms-ink);
}

/* A flush card's title sits in padding of its own, as Senast redigerat's does. */
.cms-card--flush > .cms-card__title,
.cms-areas__title {
    margin: 0;
    padding: 18px 20px 6px;
}

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

.cms-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

/* Webbplats → E-post: the status line, the senders, and a saved secret's Sparat and Byt. */
.cms-mail__status { margin: 0 0 16px; color: var(--cms-ink-2); }
.cms-mail__status--error { color: var(--cms-danger); }
.cms-mail__modes { display: grid; justify-items: start; margin-bottom: 8px; }
.cms-site-status__modes { display: flex; flex-wrap: wrap; gap: 0 16px; }
/* Kunskapsbas. Its pages' own menu under the page head, the current page underlined in the accent as
   the editor's tabs are; a card's fields in two columns from 760px, the long texts across both. */
.cms-subnav { display: flex; flex-wrap: wrap; gap: 4px; margin: -8px 0 20px; border-bottom: 1px solid var(--cms-rule); }
.cms-subnav__link {
    padding: 10px 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font: 600 14px/1 var(--cms-body);
    color: var(--cms-dim);
    text-decoration: none;
}
.cms-subnav__link:hover { color: var(--cms-ink); }
.cms-subnav__link--active { color: var(--cms-ink); border-bottom-color: var(--cms-accent); }
.cms-posts__filter { margin-bottom: 16px; }
.cms-posts__type { vertical-align: -3px; margin-right: 6px; color: var(--cms-dim); }
.cms-posts__pin { vertical-align: -3px; margin-left: 6px; color: var(--cms-dim); }
.cms-post-categories__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.cms-post-categories__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 8px; align-items: center; }
.cms-post-categories__count { font-size: 12px; color: var(--cms-dim); white-space: nowrap; }
/* ── Nyheter & evenemang: the editor ── */
.cms-post-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
/* The handoff's cards (screens 10 and 12): 24px inside, the side cards titled by an overline. */
.cms-post-editor > .cms-card, .cms-post-editor__side .cms-card { padding: 24px; }
.cms-post-editor__side .cms-card__title { margin: 0 0 14px; font: 600 11px/1.4 var(--cms-body); letter-spacing: .2em; text-transform: uppercase; color: var(--cms-dim); }
@media (min-width: 1100px) {
    .cms-post-editor--news { grid-template-columns: minmax(0, 1fr) 300px; }
    .cms-post-editor--event { grid-template-columns: minmax(0, 1fr) 340px 290px; }
}
.cms-post-editor__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cms-post-editor__reading { font-size: 12px; color: var(--cms-dim); display: inline-flex; align-items: center; gap: 4px; }
.cms-post-editor__label { display: block; font: 600 11px/1.4 var(--cms-body); letter-spacing: .2em; text-transform: uppercase; color: var(--cms-dim); }
.cms-post-editor__title { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--cms-rule); background: transparent; padding: 6px 0 10px; font: 400 30px/1.2 var(--cms-display); color: var(--cms-ink); outline: none; }
.cms-post-editor__title:focus { border-bottom-color: var(--cms-ink); }
.cms-post-editor__title--error { border-bottom-color: var(--cms-danger); }
.cms-post-editor__problem { margin: 4px 0 0; font-size: 12px; color: var(--cms-danger); }
.cms-post-editor__permalink { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 16px; font-size: 13px; color: var(--cms-dim); }
.cms-post-editor__slug { color: var(--cms-ink); }
.cms-post-editor__slug-field { min-width: 220px; }
/* Huvudbild: a 240px thumbnail, with the image's buttons and its Bildtext and Alt-text beside it. */
.cms-post-editor__image { margin-bottom: 8px; }
@media (min-width: 700px) {
    .cms-post-editor__image .cms-image-field { grid-template-columns: 240px minmax(0, 1fr); }
    .cms-post-editor__image .cms-image-field__thumb { width: 240px; }
}
.cms-post-editor__body-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cms-post-editor__body .cms-richtext__input { min-height: 320px; }
.cms-post-editor__side { display: grid; gap: 12px; }
.cms-post-editor__side .cms-card { margin: 0; }
.cms-post-editor__when, .cms-post-editor__type { margin-bottom: 12px; }
.cms-post-editor__avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cms-ink); color: var(--cms-cream); font-size: 10px; margin-right: 6px; }
.cms-post-editor__event-title { display: flex; justify-content: space-between; align-items: center; }
.cms-post-editor__time { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 8px 12px; }
.cms-post-editor__end-date { grid-column: 1; }
.cms-post-editor__schedule-note { margin: 0 0 8px; font-size: .85rem; color: var(--cms-dim); }
.cms-pages__replaces { margin-left: 6px; }
/* Publiceringsstatus: a line about a variant still waiting on Buffer, and Buffer's help for a failure. */
.cms-social-publishing__note { flex-basis: 100%; font-size: .8rem; color: var(--cms-dim); }
.cms-social-publishing__help { font-size: .8rem; }
/* Sociala medier → Inställningar's Buffer card: the saved key, the organization and the request windows. */
.cms-social-buffer__organization { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 12px 0 0; }
.cms-social-buffer__choose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; margin-top: 12px; }
.cms-social-buffer__usage { margin: 16px 0 4px; font-variant-numeric: tabular-nums; }
.cms-social-buffer__low, .cms-social-buffer__rejected { margin: 8px 0; color: var(--mud-palette-warning-darken, #a15c00); }
.cms-social-buffer__locked, .cms-social-buffer__limits { margin: 8px 0 0; color: var(--cms-ink-2); }
/* Sidor's tree: a sub-page indented a step per level, with ↳ before it. */
.cms-pages__name { display: inline-flex; align-items: baseline; gap: 6px; padding-left: calc(var(--cms-depth, 0) * 20px); }
.cms-pages__branch { color: var(--cms-dim); }
.cms-pages__create-parent { margin: -4px 0 12px; color: var(--cms-ink-2); font-size: 13px; }
.cms-move-page__choices { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.cms-move-page__choice { width: 100%; text-align: left; padding: 8px 12px; padding-left: calc(12px + var(--cms-depth, 0) * 20px); border: 1px solid var(--cms-rule); border-radius: 4px; background: none; font: inherit; cursor: pointer; }
.cms-move-page__choice:hover:not(:disabled) { background: var(--cms-soft); }
.cms-move-page__choice:disabled { color: var(--cms-dim); cursor: default; }
.cms-move-page__choice[data-depth="1"] { --cms-depth: 1; }
.cms-move-page__choice[data-depth="2"] { --cms-depth: 2; }
.cms-post-editor__gallery { display: grid; gap: 8px; margin-bottom: 16px; }
.cms-post-editor__gallery-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; }
.cms-post-editor__gallery-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 4px; }
.cms-post-editor__gallery-problem { margin: 0; font-size: .75rem; color: var(--mud-palette-error); }
.cms-post-editor__gallery-add { justify-self: start; }
.cms-field-posts__label, .cms-field-picks__label { margin: 0 0 6px; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cms-dim); }
.cms-field-posts__rows { margin: 0 0 8px; padding: 0; list-style: none; }
.cms-field-posts__row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--cms-line, rgba(22, 22, 22, .09)); }
.cms-field-posts__row > .cms-field-posts__title { flex: 1 1 8rem; }
.cms-field-posts__status { font-size: .75rem; color: var(--mud-palette-warning-darken, #a15c00); }
.cms-field-posts__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-field-posts__type { font-size: .75rem; color: var(--cms-dim); }
.cms-field-posts__empty, .cms-post-picker__empty { margin: 0 0 8px; font-size: .85rem; color: var(--cms-dim); }
.cms-field-posts__problem { margin: 4px 0 0; font-size: .75rem; color: var(--mud-palette-error); }
.cms-post-picker__rows { margin: 12px 0 0; padding: 0; list-style: none; max-height: 50vh; overflow: auto; }
.cms-post-picker__row { border-bottom: 1px solid var(--cms-line, rgba(22, 22, 22, .09)); }
.cms-post-picker__title { display: block; }
.cms-post-picker__meta { display: block; font-size: .75rem; color: var(--cms-dim); }
.cms-fields__tabs .mud-tabs-tabbar { margin-bottom: 20px; }
/* Fields naming one Row (FieldAttribute.Row): side by side, each at least 120px, wrapping in a narrow panel. */
.cms-fields__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 0 12px; align-items: start; }
/* A site page's Spara, above its cards: it stays under the top bar (64px) while a long page scrolls. */
.cms-settings__bar {
    position: sticky;
    top: 64px;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: -12px 0 12px;
    padding: 8px 16px 8px 0;
    background: var(--cms-ground);
}
/* A settings page's or row's tabs (SettingFields): some air between the tab bar and the fields. */
.cms-settings__tabs .mud-tabs-tabbar { margin-bottom: 12px; }
/* Two tabs share the panel's width, so the narrow panel never shows scroll arrows. */
.cms-fields__tabs .mud-tabs-tabbar-inner { width: 100%; }
.cms-fields__tabs .mud-tabs-tabbar-wrapper { width: 100%; }
.cms-fields__tabs .mud-tab { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.cms-fields__tabs .mud-tabs-scroll-button { display: none; }
.cms-post-editor__time-options { margin: 8px 0 16px; }
.cms-post-editor__location, .cms-post-editor__registration { margin-bottom: 12px; }
.cms-post-editor__registration-row, .cms-post-editor__link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cms-post-editor__open-registration, .cms-post-editor__open-link { color: var(--cms-dim); display: inline-flex; }
.cms-post-editor__offer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.cms-post-editor__panels .mud-expand-panel { border-bottom: 1px solid var(--cms-rule); }
.cms-post-editor__serp { display: grid; gap: 2px; margin-top: 12px; padding: 12px; border: 1px solid var(--cms-rule); border-radius: 6px; background: #fff; }
.cms-post-editor__serp-title { color: #1a0dab; font-size: 16px; }
.cms-post-editor__serp-url { color: #006621; font-size: 12px; overflow-wrap: anywhere; }
.cms-post-editor__serp-text { color: var(--cms-dim); font-size: 13px; }
.cms-post-editor__social-help { margin: 8px 0 0; font-size: 12px; color: var(--cms-dim); }

.cms-knowledge__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; max-width: 760px; margin-bottom: 8px; }
@media (min-width: 760px) {
    .cms-knowledge__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cms-knowledge__fields > .cms-knowledge__wide { grid-column: 1 / -1; }
}
.cms-knowledge__switches { display: flex; flex-wrap: wrap; gap: 0 24px; }
/* A long value or answer in a row stays on one line; the whole text is in its title. */
.cms-knowledge__text { display: block; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kunskapsbas → Inställningar and AI-test: a definition list of facts, the model fields two by two, a
   switch with its line of text, and the fixed rules. */
.cms-ai-settings__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; margin: 0; }
.cms-ai-settings__facts dt { color: var(--cms-dim); }
.cms-ai-settings__facts dd { margin: 0; color: var(--cms-ink); }
.cms-ai-settings__facts a { color: var(--cms-ink); }
.cms-ai-settings__models { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; max-width: 760px; }
@media (min-width: 760px) {
    .cms-ai-settings__models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* AI-modeller's image qualities: a level a row (name, OpenAI's word), a group a row (name, model, level); stacked on a phone. */
.cms-ai-quality__title { margin: 22px 0 6px; font: 600 14px/1.3 var(--cms-body); color: var(--cms-ink); }
.cms-ai-quality__rows { display: grid; gap: 16px; max-width: 760px; }
.cms-ai-quality__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: start; }
.cms-ai-quality__row > * { grid-column: 1; }
.cms-ai-quality__row > .mud-icon-button { margin-top: 10px; grid-column: 2; grid-row: 1; }
@media (min-width: 760px) {
    .cms-ai-quality__rows { gap: 4px; }
    .cms-ai-quality__row--level { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .cms-ai-quality__row--group { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; }
    .cms-ai-quality__row > *, .cms-ai-quality__row > .mud-icon-button { grid-column: auto; grid-row: auto; }
}
.cms-ai-settings__switches { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; }
@media (min-width: 760px) {
    .cms-ai-settings__switches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cms-ai-settings__switch-text { margin: -6px 0 10px 42px; font-size: .85rem; color: var(--cms-dim); }
.cms-ai-settings__discovery-model { margin: 0 0 12px; color: var(--cms-ink-2); }
.cms-ai-settings__rules { margin: 0; padding-left: 0; list-style: none; color: var(--cms-ink-2); line-height: 1.7; }
.cms-ai-settings__actions { margin: -4px 0 16px; }
.cms-ai-settings__test-result--ok { color: var(--cms-accent-deep); }

/* Hitta saknad kunskap: the two kinds as sections, each row with its title, its reason, and either a
   known-mark, buttons or the form. */
.cms-discovery__page { margin: 0 0 4px; color: var(--cms-ink-2); }
.cms-discovery__summary { margin: 0 0 16px; font-size: .9rem; color: var(--cms-dim); }
.cms-discovery__section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--cms-rule); }
.cms-discovery__heading { margin: 0 0 4px; font: 600 12px/1.4 var(--cms-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cms-dim); }
.cms-discovery__lead { margin: 0 0 8px; font-size: .9rem; color: var(--cms-ink-2); }
.cms-discovery__item { padding: 12px 0; border-top: 1px dashed var(--cms-rule); }
.cms-discovery__item:first-of-type { border-top: 0; }
.cms-discovery__title { margin: 0; font-weight: 600; color: var(--cms-ink); }
.cms-discovery__reason { margin: 2px 0 8px; font-size: .9rem; color: var(--cms-dim); }
.cms-discovery__known { margin: 4px 0 0; font-size: .9rem; color: var(--cms-accent-deep); }
.cms-discovery__found-form, .cms-discovery__answer-form { margin: 8px 0 0 0; }
.cms-discovery__actions { margin-top: 8px; }
.cms-discovery .cms-actions { margin-top: 8px; }

/* SEO & AI-synlighet: the editor's quick strip, the dialog's scores and checks, the site page's filters,
   and Knowledge Health on Kunskapsbas's Översikt. */
.cms-quickcheck { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-size: .85rem; }
.cms-quickcheck__item--ok { color: var(--cms-accent-deep); }
.cms-quickcheck__item--warn { color: var(--cms-ink-2); }
.cms-visibility__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cms-visibility__scores, .cms-health__scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) {
    .cms-visibility__scores, .cms-health__scores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cms-visibility__score, .cms-health__score { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-card); }
.cms-visibility__value, .cms-health__value { font: 400 28px/1 var(--cms-display); color: var(--cms-ink); }
.cms-visibility__label, .cms-health__label { font: 500 11px/1.4 var(--cms-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cms-dim); }
.cms-visibility__progress, .cms-visibility-page__progress { display: flex; flex-direction: column; gap: 8px; }
.cms-visibility__progress { margin: 0 0 16px; }
.cms-visibility__step, .cms-visibility-page__step { margin: 0; color: var(--cms-ink-2); }
.cms-visibility__when { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 12px 0 0; }
.cms-visibility__analyzed, .cms-visibility-page__analyzed { margin: 0; color: var(--cms-dim); font-size: .9rem; }
.cms-visibility-page__analyzed { margin: 0 0 16px; }
.cms-visibility__changed { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--cms-accent); color: var(--cms-ink-2); }
.cms-visibility__meta { margin: 10px 0 0; font-size: .85rem; color: var(--cms-dim); }
.cms-visibility__ai-note { margin: 10px 0 0; color: var(--cms-ink-2); }
.cms-visibility__checks { margin: 0; padding: 0; list-style: none; }
.cms-visibility__check { display: flex; gap: 10px; padding: 4px 0; color: var(--cms-ink); }
.cms-visibility__check--passed { color: var(--cms-ink-2); }
.cms-visibility__mark { flex: none; width: 1.2em; }
.cms-visibility__compare { margin: 8px 0; padding: 10px 14px; border: 1px solid var(--cms-rule); border-radius: var(--cms-radius); }
.cms-visibility__current, .cms-visibility__suggested { margin: 0; }
.cms-visibility__suggested { margin-top: 6px; font-weight: 600; }
.cms-visibility__compare .cms-visibility__label { display: block; margin-bottom: 2px; }
.cms-visibility-page__counts, .cms-visibility-page__not-analyzed { margin: 0 0 8px; color: var(--cms-ink-2); }
.cms-visibility-page__counts .cms-badge { margin-right: 10px; }
.cms-visibility-page__issue { padding: 8px 0; border-top: 1px dashed var(--cms-rule); }
.cms-visibility-page__issue:first-of-type { border-top: 0; }
.cms-visibility-page__filters { display: flex; flex-wrap: wrap; gap: 0 16px; }
/* Att åtgärda på sidorna: each problem, then the pages it is on as links that open their analysis. */
.cms-visibility-page__problem { padding: 10px 0; border-top: 1px dashed var(--cms-rule); }
.cms-visibility-page__problem:first-of-type { border-top: 0; }
.cms-visibility-page__problem-count { color: var(--cms-dim); font-weight: 400; }
.cms-visibility-page__problem-pages { margin: 4px 0 0; color: var(--cms-dim); }
.cms-visibility-page__problem-pages a { color: var(--cms-ink); text-decoration: underline; text-underline-offset: 2px; }
.cms-visibility-page__suggestions { margin-top: 8px; }
/* A row's problems in the Sidor table, one per line. */
.cms-visibility-page__page-problems { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 13px; line-height: 18px; }
.cms-health__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cms-health__scores { margin: 0 0 12px; }
.cms-health__items { margin: 0; padding: 0; list-style: none; }
.cms-health__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 8px 0; border-top: 1px dashed var(--cms-rule); }
.cms-health__item:first-of-type { border-top: 0; }
.cms-health__mark { flex: none; width: 1.2em; color: var(--cms-dim); }

/* Öppettider: the groups as cards with their week, the exceptions as rows, and the dialogs' day-by-day editor. */
.cms-hours-admin__off { border-left: 3px solid var(--cms-accent); }
.cms-hours-admin__groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) {
    .cms-hours-admin__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cms-hours-admin__group { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-card); }
.cms-hours-admin__group--inactive { opacity: .72; }
.cms-hours-admin__group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cms-hours-admin__group-name { margin: 0; font-weight: 600; color: var(--cms-ink); }
.cms-hours-admin__primary-mark { color: var(--cms-accent-deep); }
.cms-hours-admin__week { margin: 0; padding: 0; list-style: none; color: var(--cms-ink-2); }
.cms-hours-admin__group .cms-actions { margin-top: 4px; }
.cms-hours-admin__exceptions { display: flex; flex-direction: column; }
.cms-hours-admin__exception { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 8px 0; border-top: 1px dashed var(--cms-rule); }
.cms-hours-admin__exception:first-child { border-top: 0; }
.cms-hours-admin__exception--past { color: var(--cms-dim); }
.cms-hours-admin__exception-date { flex: none; min-width: 7.5em; font-weight: 600; }
.cms-hours-admin__exception-text { flex: 1 1 16em; }
.cms-hours-admin__exception-shown { display: block; font-size: 0.85em; color: var(--cms-dim); }
.cms-hours-dialog__week-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.cms-hours-dialog__day { padding: 10px 0; border-top: 1px dashed var(--cms-rule); }
.cms-hours-dialog__day-name { margin: 0 0 4px; font-weight: 600; color: var(--cms-ink); }
.cms-hours-dialog__closed { color: var(--cms-dim); margin-right: 8px; }
.cms-hours-dialog__interval { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cms-hours-dialog__interval .mud-input-control { width: 9em; }
.cms-hours-dialog__dash, .cms-hours-dialog__next-day { color: var(--cms-dim); }
.cms-hours-dialog__problem, .cms-hours-dialog__field-problem { margin: 4px 0 0; color: var(--cms-danger, #b3261e); font-size: .85rem; }
.cms-hours-dialog__target, .cms-hours-dialog__mode { margin-top: 12px; }

/* Platser & kontakt: the places as cards with their address, contact and links; the dialog's link lists. */
.cms-locations__off { border-left: 3px solid var(--cms-accent); }
.cms-locations__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) {
    .cms-locations__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cms-locations__location { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-card); }
.cms-locations__location--inactive { opacity: .72; }
.cms-locations__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cms-locations__name { margin: 0; font-weight: 600; color: var(--cms-ink); }
.cms-locations__primary-mark { color: var(--cms-accent-deep); }
.cms-locations__address, .cms-locations__hours, .cms-locations__services { margin: 0; color: var(--cms-ink-2); }
.cms-locations__contact { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; color: var(--cms-ink-2); }
.cms-locations__location .cms-actions { margin-top: 4px; }
.cms-location-dialog .cms-discovery__heading, .cms-knowledge__heading { margin-top: 16px; }
.cms-location-dialog__links { display: flex; flex-wrap: wrap; gap: 0 16px; }

/* AI-kontext: the text or JSON an AI would get, as it is, in a flush card. */
.cms-ai-preview__modes { display: flex; flex-wrap: wrap; gap: 0 16px; margin-bottom: 8px; }
.cms-ai-preview {
    margin: 0;
    padding: 18px 20px;
    font: 13px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: var(--cms-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.cms-site-status__note { margin: 4px 0 0; max-width: 640px; font-size: .9rem; color: var(--cms-dim); }
.cms-mail__note { margin: -4px 0 8px 42px; font-size: .85rem; color: var(--cms-dim); }
.cms-actions + .cms-mail__note { margin: 10px 0 0; }
.cms-mail__fields { max-width: 560px; margin-top: 16px; }
.cms-mail__secret {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 6px 0 14px;
    border: 1px solid var(--cms-rule);
    border-radius: var(--cms-radius);
}
.cms-mail__secret-label { color: var(--cms-dim); }
.cms-mail__saved { flex: 1; color: var(--cms-ink); }
.cms-mail__outcome { margin: 16px 0 0; }
.cms-mail__help { margin: 20px 0 0; max-width: 560px; font-size: .85rem; color: var(--cms-dim); }

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

/* Small uppercase column headers over Line dividers. */
.cms-table .mud-table-head .mud-table-cell {
    padding: 12px 20px;
    font: 500 11px/1.4 var(--cms-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--cms-dim);
    background: transparent;
    border-bottom: 1px solid var(--cms-rule);
}

.cms-table .mud-table-cell {
    padding: 14px 20px;
    border-bottom: 1px solid var(--cms-rule);
    font-size: 14px;
}

.cms-table__order { white-space: nowrap; width: 1%; }
.cms-table__end { text-align: right; width: 1%; white-space: nowrap; }
/* The row's buttons, icon buttons and ⋮ menu centred on one line: MudMenu's wrapper would otherwise sit on the text baseline, higher than the icons beside it. */
.cms-table__end > * { vertical-align: middle; }

/* An area's name looks like a page's, under a class of its own, so a script that opens the first
   page never lands on an area. */
.cms-table__primary,
.cms-areas__link {
    display: block;
    font-weight: 500;
    color: var(--cms-ink);
    text-decoration: none;
}

.cms-table__primary:hover,
.cms-areas__link:hover { color: var(--cms-dim); }

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

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

.cms-table__link { text-decoration: none; white-space: nowrap; }
.cms-table__link:hover { color: var(--cms-ink); }
.cms-table__link .mud-icon-root { font-size: .9rem; margin-left: .3rem; vertical-align: -.1em; }
.cms-table .cms-badge + .cms-badge { margin-left: 6px; }

/* On a phone (the tables' Sm breakpoint) MudBlazor stacks a row into label–value lines. Each row is a card of its
   own: the name and badges first, the address and when it changed under them, the buttons on a row at the foot,
   with a gap and a rule between cards so they never run together. The label keeps the left and the values hug the
   right, wrapping when they must; a line under a name (.cms-table__secondary) goes under the name. */
@media (max-width: 599.98px) {
    .cms-table .mud-table-body .mud-table-row { display: block; padding: 10px 0 6px; border-bottom: 1px solid var(--cms-rule); }
    .cms-table .mud-table-body .mud-table-row + .mud-table-row { margin-top: 6px; }
    .cms-table .mud-table-cell { flex-wrap: wrap; justify-content: flex-end; gap: 2px 6px; border-bottom: 0; }
    .cms-table .mud-table-cell::before { margin-right: auto; }
    .cms-table .cms-table__order,
    .cms-table .cms-table__end { width: auto; white-space: normal; }
    .cms-table .cms-table__order .mud-icon-button { width: 32px; height: 32px; }
    .cms-table .cms-table__end { justify-content: flex-start; gap: 4px 8px; padding-top: 8px; }
    .cms-table .cms-table__end .mud-button-root { flex: none; white-space: nowrap; }
    .cms-table .cms-badge + .cms-badge { margin-left: 0; }
    .cms-table .cms-table__secondary { flex-basis: 100%; text-align: right; }
}


/* ─── MudBlazor in the admin's look ─────────────────────────────── */
/* AdminTheme gives the colours, type and 4px corners; these are the sizes it has no setting for:
   the handoff's 44px buttons, 36px when small. */
.cms .mud-button-root.mud-button-filled-size-medium,
.cms .mud-button-root.mud-button-outlined-size-medium {
    height: 44px;
    padding: 0 20px;
}

.cms .mud-button-root.mud-button-filled-size-small,
.cms .mud-button-root.mud-button-outlined-size-small {
    height: 36px;
    padding: 0 14px;
    font-size: 11px;
}

/* An outlined button is a whole ink line, not MudBlazor's half-strength one. */
.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-cream);
}

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

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

/* Tooltips, such as the folded menu's names: Ink2 with cream text. */
.mud-tooltip.mud-tooltip-default {
    padding: 6px 10px;
    background-color: var(--cms-ink-2);
    color: var(--cms-cream);
    font: 400 12px/1.4 var(--cms-body);
    letter-spacing: .04em;
}

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

.mud-dialog .mud-dialog-title {
    font: 600 1.05rem/1.3 var(--cms-body);
}

/* ─── Editor bar and canvas ─────────────────────────────────────── */
/* The editor's own bar in the shell's top bar (AdminShell's EditorBar): the way back, where you
   are and whether there is anything to publish on the left, the preview's width in the centre,
   and what to do with the page on the right.

   From 800px up nothing in it lies over anything else but the scheduled badge, which lies over its own
   clock where it fits. Each side is at least as wide as what has to stay whole in it (its min-content)
   and, with room to spare, as wide as the other, so the device switch is in the middle while it can be
   and is pushed aside, never over a side, when it cannot. A side that runs short gives way in this
   order: the parent crumb goes, the scheduled badge shrinks to its clock, the chip becomes a ring
   (below 1240px) and last the page's title is cut short with an ellipsis, though never to less than
   about 120px, or its whole width if that is less: the title's floor is part of what must stay whole.
   That is the order they give way in, not a width for each step: the badge's text shows only where it
   fits beside the title at its floor, so below about 1500px a scheduled publish is its clock. The ring,
   the room of the save state, the clock and every button stay whole. Ångra and Gör om are two more
   buttons on the right from 820px; below that they are items in ⋮ (see the fold, further down). */
.cms-appbar--editor .mud-toolbar { padding: 0 20px 0 12px; }

.cms-editorbar {
    display: grid;
    grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
    align-items: center;
    column-gap: 16px;
    width: 100%;
}

/* Left: the main part, which ends in the clock of a scheduled publish, and the badge of it beside
   the main part when there is room for that (see .cms-editorbar__scheduled). What does not fit wraps
   to a second line, which the clip hides, so it goes whole or not at all. The clip leaves room
   around the box for the focus ring of the back arrow. The clock is as high as the badge
   (.cms-badge) and as wide; the title's floor is what the title keeps of its room. */
.cms-editorbar__start {
    --cms-scheduled-gap: 6px;
    --cms-scheduled-size: 24px;
    --cms-title-floor: 120px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    column-gap: var(--cms-scheduled-gap);
    row-gap: 16px;
    height: 48px;
    clip-path: inset(-8px);
}

/* Its base size is nothing but it is never narrower than what must stay whole in it (the crumbs
   count for their floor, see below), so the badge is put beside it only if it fits beside that
   much. It grows to its natural width and no further, so the clock is its last thing and the badge,
   when it fits, follows right after it. */
.cms-editorbar__main {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: min-content;
    max-width: max-content;
}

.cms-editorbar__back,
.cms-editorbar__main > .mud-chip-container { flex: none; }

.cms-editorbar__end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.cms-editorbar__end > * { flex: none; }
.cms-editorbar .mud-icon-button { color: var(--cms-ink-2); }

/* The crumbs are what is left of the main part's room: their natural width when there is room and, when
   there is not, the title's floor, or the parent crumb's own width if that is more (a title of a few
   letters). */
.cms-editorbar__crumbs { margin-left: 4px; }

/* The title is laid out first and the parent after it (row-reverse, and order on the items), so a
   line that cannot hold both puts the parent, with its separator, on a second line, which the clip
   hides. The title then has its line to itself and is cut short if it must be. Both sit at the left,
   the parent first (justify-content: flex-end is the left of a row-reverse line). */
.cms-editorbar__crumbs ol {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: flex-start;
    column-gap: 10px;
    row-gap: 16px;
    height: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 20px;
    color: var(--cms-dim);
    white-space: nowrap;
    clip-path: inset(-8px);
}

.cms-editorbar__crumbs li { min-width: 0; }
.cms-editorbar__parent { order: 2; display: flex; align-items: center; gap: 10px; flex: none; }
.cms-editorbar__parent a { color: inherit; text-decoration: none; }
.cms-editorbar__parent a:hover { color: var(--cms-ink); }
.cms-editorbar__sep { display: flex; flex: none; }
.cms-editorbar__sep .mud-icon-root { width: 16px; height: 16px; }

/* The title's item is one line high and has no text of its own: the h1 lies over it, and what gives
   the item its widths is two copies of the title (data-title), laid out and never seen. The first may
   wrap anywhere, so it asks for the whole title when there is room and for one letter when there is
   not. The second asks for the title or the floor, whichever is less, at all times. So the item is as
   wide as the title when it can be and no narrower than min(floor, title) when it cannot, which
   neither the h1 (it would ask for all of the title) nor a min-width (a short title would keep a
   blank) can do. */
.cms-editorbar__current {
    order: 1;
    position: relative;
    height: 20px;
    font-weight: 500;
    color: var(--cms-ink);
}

.cms-editorbar__current::before,
.cms-editorbar__current::after {
    content: attr(data-title);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.cms-editorbar__current::before { white-space: normal; overflow-wrap: anywhere; }
.cms-editorbar__current::after { width: max-content; max-width: var(--cms-title-floor); }

/* The page's one h1, which looks like the breadcrumb's last item: the browser's margin and type
   for a heading are reset, the spacing and case too (a site may style a bare h1), or it would not lay out
   as the unseen copies above, which size its item. It fills its item and is cut short with an ellipsis. */
.cms-editorbar__title {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    text-transform: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--cms-ink);
}

/* As the page head's title (.cms-page-title), which this h1 stands in for: the site's FocusOnNavigate
   focuses the first h1, and the site's own [tabindex]:focus-visible ring would box it. */
.cms .cms-editorbar__title:focus-visible { outline: none; }

.cms-chip.cms-editorbar__chip.mud-chip { flex: none; margin-left: 8px; white-space: nowrap; }

/* A scheduled publish is shown in two forms. The clock is the last thing in the main part, a circle
   (--cms-scheduled-size) that stays whole like the chip; it holds the text for screen readers, out of
   sight. The badge, the clock with its text, comes after the main part and is pulled back over the clock
   by a negative margin of the clock's width and the gap, so it is placed exactly where the clock is and
   needs the room of the badge alone. When it does not fit it wraps to the line the clip hides, and the
   clock shows; when it fits it covers the clock (the same colour, the same rounded end). Below 1240px it
   is not shown at all, see there. */
.cms-editorbar__scheduled-icon {
    flex: none;
    justify-content: center;
    width: var(--cms-scheduled-size);
    padding: 0;
}

.cms-editorbar__scheduled {
    flex: none;
    gap: 5px;
    margin-left: calc(-1 * var(--cms-scheduled-size) - var(--cms-scheduled-gap));
    padding: 0 10px 0 4px;
    white-space: nowrap;
}

.cms-editorbar__scheduled-icon .mud-icon-root,
.cms-editorbar__scheduled .mud-icon-root { width: 14px; height: 14px; }

/* Out of sight, read by screen readers. */
.cms-editorbar__scheduled-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Quiet, in Muted text: nothing while changes wait, "Sparar…" while autosave writes, then
   "Sparat", which fades after 2 seconds. A failed save stays, in the danger colour. It always has
   the room of the widest of these ("Sparar…" is 43.8px) so that nothing beside it moves, and the
   badge and the title's cut with it, each time a save starts and ends; the failure's text is longer
   and pushes. */
.cms-savestate {
    flex: none;
    min-width: 46px;
    margin-left: 6px;
    font-size: 12px;
    color: var(--cms-dim);
    white-space: nowrap;
}

.cms-savestate--saved { animation: cms-savestate-fade 400ms ease 2s forwards; }
.cms-savestate--failed { color: var(--cms-danger); font-weight: 500; }

@keyframes cms-savestate-fade { to { opacity: 0; } }

/* The device switch, as the handoff's segmented control: 150 × 36px, its items 34px tall inside the 1px line,
   the chosen width in ink. */
.cms-editorbar__devices.mud-toggle-group {
    width: 150px;
    height: 36px;
    border: 1px solid var(--cms-rule-2);
    border-radius: var(--cms-radius);
    overflow: hidden;
}

.cms .cms-editorbar__devices .mud-toggle-item.mud-button-root {
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cms-ink-2);
}

.cms .cms-editorbar__devices .mud-toggle-item + .mud-toggle-item { border-left: 1px solid rgba(22, 22, 22, .18); }
.cms .cms-editorbar__devices .mud-toggle-item.mud-toggle-item-selected { background: var(--cms-ink); color: var(--cms-cream); }
.cms-editorbar__devices .mud-icon-root { width: 18px; height: 18px; }

/* The switch clips what is outside it (its rounded ends), which would cut the site's ring (2px, 3px
   out), so the ring is drawn inside each item. The chosen item is ink, so its ring is cream and 2px
   further in: at the edge it would run into the cream around the switch and look like a smaller block.
   The focused item lies over the next one, whose divider would otherwise be drawn over a pixel of its
   ring. The outer items take the switch's own corners (its radius less the border) so the ring follows
   them. */
.cms .cms-editorbar__devices .mud-toggle-item:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--cms-ink); outline-offset: -2px; }
.cms .cms-editorbar__devices .mud-toggle-item.mud-toggle-item-selected:focus-visible { outline-color: var(--cms-cream); outline-offset: -4px; }
.cms .cms-editorbar__devices .mud-toggle-item:first-child { border-top-left-radius: calc(var(--cms-radius) - 1px); border-bottom-left-radius: calc(var(--cms-radius) - 1px); }
.cms .cms-editorbar__devices .mud-toggle-item:last-child { border-top-right-radius: calc(var(--cms-radius) - 1px); border-bottom-right-radius: calc(var(--cms-radius) - 1px); }

.cms .cms-editorbar__publish.mud-button-root { height: 36px; margin-left: 8px; padding: 0 16px; font-size: 11px; }

/* Green while there is something to publish: the theme's Success with the admin's cream, and still green
   for the moment a running save or publish holds it, so it does not flicker at every pause in typing. */
.cms .cms-editorbar__publish--ready.mud-button-root { color: var(--cms-cream); }
.cms .cms-editorbar__publish--ready.mud-button-root:disabled {
    background-color: var(--mud-palette-success) !important;
    color: var(--cms-cream);
    opacity: .75;
}

/* ⋮ holds what the bar has no room for. Sidinställningar and the eye (whether visitors see the page) have
   their own buttons in the bar from 800px, and Ångra and Gör om from 1000px. Measured in Chromium and WebKit
   in the bar's widest state, a long title with the chip, "Kunde inte spara" and a scheduled publish's clock: with the eye,
   Ångra's and Gör om's two 48px buttons pushed ⋮ out of the bar from 900 to 930px (where the bar's tighter
   spacing ends) and from 960px (where the folded menu takes 72px of the window), and fit at every width
   from 1000px. So from 800 to 1000px Ångra and Gör om are in ⋮, and below 800px, where a phone's bar has
   room for none of its icons (see below), all four are. The keyboard shortcuts work at every width. */
@media (max-width: 999.98px) {
    .cms-editorbar__end > .cms-editorbar__undo,
    .cms-editorbar__end > .cms-editorbar__redo { display: none; }
}

@media (min-width: 800px) {
    .mud-menu-item.cms-editorbar__phone-item--settings,
    .mud-menu-item.cms-editorbar__phone-item--visibility { display: none; }
}

@media (min-width: 1000px) {
    .mud-menu-item.cms-editorbar__phone-item--history { display: none; }
}

/* Below 1240px the chip is a ring: its text, the title's floor, the clock and the buttons of Ångra and
   Gör om (in the bar from 1000px) and the eye do not fit together before that, and the ring is what a phone shows
   too. An ink ring, which still says what it means to a screen reader (the text is there, at no size)
   and on hover (its title). The badge has given way before the chip does, so the room the ring frees is
   not given to it again: from here the clock is all there is of it. */
@media (max-width: 1239.98px) {
    .cms-editorbar__scheduled { display: none; }

    .cms-chip.cms-editorbar__chip.mud-chip {
        width: 10px;
        min-width: 0;
        height: 10px;
        margin-left: 2px;
        padding: 0;
        border-color: var(--cms-ink);
        font-size: 0;
    }
}

/* From 800px to 900px the bar is as narrow as it gets, so its own spacing is tighter there (the phones'
   padding), which gives the title some 34px more. */
@media (min-width: 800px) and (max-width: 899.98px) {
    .cms-appbar--editor .mud-toolbar { padding: 0 8px 0 4px; }
    .cms-editorbar { column-gap: 8px; }
    .cms-editorbar__main,
    .cms-editorbar__end { gap: 4px; }
    .cms-editorbar__crumbs { margin-left: 0; }
    .cms-chip.cms-editorbar__chip.mud-chip { margin-left: 4px; }
    .cms-savestate { margin-left: 0; }
    .cms .cms-editorbar__publish.mud-button-root { margin-left: 0; }
}

/* Under the bar the content is the editor's canvas, in the handoff's beige: problems as a banner
   at its top, then the preview, with the panels floating over it. */
.cms-content.cms-content--canvas {
    max-width: none;
    padding: 0;
    background: #e4e0d8;
}

.cms-content--canvas > .cms-problems { margin: 16px 20px 0; }

/* Phones: the way back, the page's title, the chip as a ring, the clock of a scheduled publish, Publicera
   and ⋮; the canvas keeps a margin around the tabs and the block list. */
@media (max-width: 799.98px) {
    .cms-content.cms-content--canvas { min-height: calc(100vh - 65px); padding: 12px 12px 24px; }
    .cms-content--canvas > .cms-problems { margin: 0 0 12px; }
    .cms-appbar--editor .mud-toolbar { padding: 0 8px 0 4px; }
    .cms-editorbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

    .cms-editorbar__parent,
    .cms-editorbar__sep,
    .cms-savestate,
    .cms-editorbar__devices,
    .cms-editorbar__end > .mud-icon-button,
    .cms-editorbar__end > .cms-editorbar__visibility-tip { display: none; }

    /* A news item or event: Förhandsgranska (in its tooltip) and Spara utkast wait in ⋮, as a page's do. */
    .cms-post-editor__actions > .mud-tooltip-root,
    .cms-post-editor__actions > .cms-post-editor__save { display: none; }

    /* The title has the room that is left, whatever it is: no floor. */
    .cms-editorbar__current::after { display: none; }

    .cms .cms-editorbar__publish.mud-button-root { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cms-savestate--saved { animation-duration: 0s; }
}

/* A function block in the editor's preview and the picker's sample: a placeholder the CMS draws in place
   of the block's own view, in the site's page. Its own type and colours, so any site's styles leave it alone. */
.cms-function-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    max-width: 960px;
    margin: 32px auto;
    padding: 32px 24px;
    border: 2px dashed rgba(22, 22, 22, .3);
    border-radius: 8px;
    background: rgba(255, 255, 255, .7);
    color: #161616;
    font: 400 15px/1.5 system-ui, sans-serif;
    text-align: center;
}

.cms-function-block__icon { width: 32px; height: 32px; fill: currentColor; opacity: .7; }
.cms-function-block__name { font-size: 18px; font-weight: 600; }
.cms-function-block__note { color: #6b665d; }

/* Lägg till block's Design and Funktion tabs, above the list and the preview. */
.cms-picker__kinds { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--mud-palette-lines-default); }

.cms-picker__kind {
    margin-bottom: -1px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--cms-dim);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.cms-picker__kind[aria-selected="true"] { border-bottom-color: var(--cms-ink); color: var(--cms-ink); }
.cms-picker__kind:focus-visible { outline: 2px solid var(--cms-ink); outline-offset: -2px; }

/* ─── Editor: preview with floating panels ──────────────────────── */

.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); }

/* The preview is the only thing in the flow and fills the editor; the panels float over it.
   The block list sits on the left, a block's fields or the page settings on the right, and only one
   side is open at a time. */
.cms-editor { position: relative; }

.cms-panel {
    position: absolute;
    top: 20px;
    z-index: 2;
    max-height: calc(100% - 40px);
    overflow: auto;
    background: var(--cms-paper);
    border: 1px solid var(--cms-rule);
    border-radius: var(--cms-radius-panel);
    box-shadow: var(--cms-shadow-panel);
}

/* From 800px the panels float over the preview as the handoff's do: their shadow, and no line round them.
   Below that they are flat cards on the canvas, and keep theirs. */
@media (min-width: 800px) {
    .cms-panel { border: 0; }
}

/* Forced colours (Windows' high contrast) drop the shadow, which is the panels' only edge from 800px: they keep a line. */
@media (min-width: 800px) and (forced-colors: active) {
    .cms-panel { border: 1px solid CanvasText; }
}

/* A panel takes the focus when it opens; only a keyboard user needs to see that. */
.cms-panel:focus { outline: none; }
.cms-panel:focus-visible { outline: 2px solid var(--cms-accent); outline-offset: 2px; }

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

/* Right-aligned even when it is alone in the header (the fields panel with no block chosen). */
.cms-panel__close { margin-left: auto; }

/* The move handle (OpenWith, standing in for the handoff's drag_pan): drag it to move the panel
   anywhere over the canvas, double-click it to put the panel back. For a mouse or a finger only. */
.cms-panel__move { flex: none; display: flex; color: var(--cms-dim); cursor: move; touch-action: none; }
.cms-panel__move .mud-icon-root { width: 18px; height: 18px; }

/* Where the owner moved a panel: an offset from its usual place, which cms-editor.js keeps inside
   the canvas. */
@media (min-width: 800px) {
    .cms-panel { translate: var(--cms-panel-x, 0px) var(--cms-panel-y, 0px); }
}

/* Sidans block (Block in an area's editor), as the handoff's panel: a 52px head with the title,
   the number of blocks and a minimise button, the rows, and a dashed Lägg till block under a
   line. The rows scroll between the head and the foot when the panel runs out of height. */
.cms-blocks {
    left: 20px;
    width: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cms-blocks > .cms-panel__head {
    flex: none;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    height: 52px;
    margin: 0;
    padding: 0 10px 0 16px;
    border-bottom: 1px solid var(--cms-rule);
}

.cms-blocks__title { margin: 0; font: 600 14px/1.2 var(--cms-body); color: var(--cms-ink); }
.cms-blocks__count { font-size: 12px; color: var(--cms-dim); }

.cms .cms-blocks__fold { width: 32px; height: 32px; margin-left: auto; padding: 0; color: var(--cms-ink-2); }

.cms-blocks--folded { display: none; }

/* Folded, the block list is a slim tab on the preview's left edge that brings it back. */
.cms-blocks-tab {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .8rem .4rem;
    writing-mode: vertical-rl;
    border: 1px solid var(--cms-rule);
    border-left: 0;
    border-radius: 0 var(--cms-radius-panel) var(--cms-radius-panel) 0;
    background: var(--cms-paper);
    box-shadow: var(--cms-shadow-panel);
    font: 600 .72rem/1 var(--cms-body);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cms-ink-2);
    cursor: pointer;
    transition: background var(--cms-fast);
}

.cms-blocks-tab:hover { background: var(--cms-ground); }
.cms-blocks-tab:focus-visible { outline: 2px solid var(--cms-accent); outline-offset: 2px; }

.cms-blocks__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 8px;
}

/* A row: the handle (or a locked row's lock), the block's icon, its name over its summary, and an
   eye. The selected row is ink with cream text and holds the arrows and ⋮ instead of the eye. As the
   handoff's rows: 6px corners, 18px icons, the name 13px over the summary at 11px. */
.cms-block,
.cms-blocks__global {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-radius: var(--cms-radius-card);
    color: var(--cms-ink-2);
}

.cms-block { position: relative; padding-right: 4px; transition: background var(--cms-fast); }
.cms-block:not(.cms-block--active):hover { background: var(--cms-ground-2); }
.cms-block--active { background: var(--cms-ink); color: var(--cms-cream); }
.cms-block--dragging { opacity: .4; }

/* Only the handle drags; the rest of the row is the button that selects the block. */
.cms-block__handle,
.cms-block__lock {
    flex: none;
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 4px 0 6px;
    color: rgba(22, 22, 22, .35);
}

.cms-block__handle .mud-icon-root,
.cms-block__lock .mud-icon-root { font-size: 18px; }

.cms-block__handle { cursor: grab; }
.cms-block__handle:active { cursor: grabbing; }
.cms-block--active .cms-block__handle { color: rgba(245, 242, 235, .45); }

.cms-block__select {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    align-self: stretch;
    padding: 0 6px;
    border: 0;
    border-radius: var(--cms-radius-card);
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.cms-block__select:focus-visible { outline: 2px solid var(--cms-accent); outline-offset: -2px; }
.cms-block--active .cms-block__select:focus-visible { outline-color: var(--cms-cream); }

.cms-block__icon.mud-icon-root { flex: none; font-size: 18px; }

.cms-block__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.cms-block__name {
    font: 400 13px/1.25 var(--cms-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-block__summary {
    font: 400 11px/1.3 var(--cms-body);
    color: var(--cms-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-block--active .cms-block__summary { color: rgba(245, 242, 235, .6); }

/* A block with problems: a red edge and the warning icon, lighter red on the ink of a selected row. */
.cms-block--invalid { box-shadow: inset 2px 0 0 var(--cms-danger); }
.cms-block__warn.mud-icon-root { flex: none; margin-left: auto; color: var(--cms-danger); }
.cms-block--active .cms-block__warn.mud-icon-root { color: #f09a8f; }

/* MudBlazor colours a disabled button with this variable (and !important): faint cream on the ink. */
.cms-block__tools { flex: none; display: flex; --mud-palette-action-disabled: rgba(245, 242, 235, .35); }
.cms .cms-block__tools .mud-icon-button { padding: 4px; color: var(--cms-cream); }
.cms-block__tools .mud-icon-button .mud-icon-root { font-size: 18px; }
.cms .cms-block__tools .mud-icon-button:hover { background: rgba(245, 242, 235, .1); }
.cms .cms-block__tools .mud-icon-button:focus-visible { outline: 2px solid var(--cms-cream); outline-offset: -2px; }

/* The site's areas in a page's list: locked and faded. They are edited under Globala
   inställningar, so here they do nothing (their title says where). */
.cms-blocks__global { gap: 10px; padding-right: 6px; opacity: .55; cursor: default; }
.cms-blocks__global .cms-block__lock { padding-right: 0; }

/* A hidden block's row is faded, says Dold and has its eye crossed out; the selected ink row is
   not faded, so its buttons stay readable, and a row being dragged keeps the fade of a drag. The
   eye is in a span that carries the reason it is disabled, which a disabled button cannot show. */
.cms-block--hidden:not(.cms-block--active, .cms-block--dragging) { opacity: .6; }
.cms-block__eye-wrap { flex: none; display: flex; margin-left: auto; }
.cms .cms-block__eye.mud-icon-button { padding: 4px; color: var(--cms-dim); }
.cms-block__eye .mud-icon-root { font-size: 18px; }

/* The selected row's ⋮: Ta bort in the danger colour, a click away from the arrows. A disabled item
   says why on a second line in small Muted text; the line sets its own colour, or it would take the
   disabled grey MudBlazor forces on the item. */
.mud-menu-item.cms-block__remove,
.mud-menu-item.cms-block__remove .mud-menu-item-icon { color: var(--cms-danger); }
.cms-block__reason { display: block; font-size: 12px; line-height: 1.3; color: var(--cms-dim); }

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

.cms-blocks__foot { flex: none; padding: 8px 12px 12px; border-top: 1px solid var(--cms-rule); }

.cms .cms-blocks__add.mud-button-root { height: 40px; font-size: 11px; border-style: dashed; }

/* A block's fields and the page settings share the right side; opening one closes the other. As
   the handoff's: 340px wide, from 20px under the canvas's top to 20px over its bottom, with a head,
   a body that scrolls and a foot. */
.cms-panel--right {
    top: 20px;
    right: 20px;
    bottom: 20px;
    width: 340px;
    max-height: none;
    padding: 0;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.cms-panel--open { display: flex; }

/* The head: the move handle, the block's name and Block N av M (or Sidinställningar and its
   badges), and ✕. 52px at least: Sidinställningar's grows when its badges wrap under its name. */
.cms-panel--right > .cms-panel__head {
    flex: none;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 52px;
    margin: 0;
    padding: 8px 10px 8px 16px;
    border-bottom: 1px solid var(--cms-rule);
}

.cms-panel__title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 600 14px/1.2 var(--cms-body);
    color: var(--cms-ink);
}

.cms-panel__count { flex: none; font-size: 12px; color: var(--cms-dim); }
.cms .cms-panel--right .cms-panel__close { width: 32px; height: 32px; padding: 0; color: var(--cms-ink-2); }

.cms-panel__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 22px 18px; }

/* The foot: "⚡ Ändringar visas direkt", and Klar, which does what ✕ does. */
.cms-panel__foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 12px 18px;
    border-top: 1px solid var(--cms-rule);
}

.cms-panel__live { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cms-dim); }
.cms-panel__live .mud-icon-root { width: 16px; height: 16px; }
.cms .cms-panel__done.mud-button-root { height: 36px; padding: 0 18px; font-size: 11px; }

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

/* The right panels' fields, as the handoff's: outlined, 48px tall, 22px apart. */
.cms-panel--right .cms-fields { gap: 22px; }
.cms-panel--right .mud-input-control.mud-input-outlined-with-label { margin-top: 0; margin-bottom: 0; }
/* Except the image field's alt text: 12px of margin on the field's 10px gap puts it 22px under what is above it, as
   the next field would be. One class more than the reset above, so it wins wherever it stands in the file. */
.cms-panel--right .cms-image-value > .mud-input-control.mud-input-outlined-with-label { margin-top: 12px; }
.cms-image-field__alt { margin-top: 12px; }
.cms-panel--right .mud-input > input.mud-input-root-outlined,
.cms-panel--right div.mud-input-slot.mud-input-root-outlined { padding-top: 14.5px; padding-bottom: 14.5px; }
/* The padding alone makes a box 46.8px with the theme's 15px text; this gives it the 48px. */
.cms-panel--right .mud-input.mud-input-outlined { min-height: 48px; }
.cms-panel--right .mud-input-label-outlined { transform: translate(14px, 15px) scale(1); }
/* The text is 14px, and the label over the line is Muted until the field has the focus, then ink, as the
   handoff's fields. MudBlazor sets a lifted label in the text colour; a field with an error keeps its red. */
.cms-panel--right .mud-input { font-size: 14px; }
.cms-panel--right .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol:not(.mud-input-error, .mud-disabled) { color: var(--cms-dim); }
.cms-panel--right .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol:not(.mud-input-error, .mud-disabled) { color: var(--cms-ink); }

/* A group's name as a small overline: BILD over an image field, KNAPP over a link field. */
.cms-field-group__label {
    margin: 0;
    font: 400 11px/1.4 var(--cms-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--cms-dim);
}

/* A field's name row: the name over its box, the count or a short help on the right. In the right panels the name is
   the handoff's 15px ink; elsewhere (the news editor's text) it keeps the small grey look of the label it replaced. */
.cms-fieldhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 .35rem; }
.cms-fieldhead__label { margin: 0; font-size: .8rem; color: var(--cms-ink-2); }
.cms-fieldhead__aside { min-width: 0; font-size: 13px; color: var(--cms-dim); text-align: right; font-variant-numeric: tabular-nums; }
.cms-fieldbox { display: grid; min-width: 0; }
.cms-panel--right .cms-fieldhead { margin-bottom: 8px; }
.cms-panel--right .cms-fieldhead__label { font: 500 15px/1.35 var(--cms-body); color: var(--cms-ink); }
.cms-panel--right .cms-fieldhead--small { margin-bottom: 6px; }
.cms-panel--right .cms-fieldhead--small .cms-fieldhead__label { font-size: 13px; font-weight: 400; color: var(--cms-dim); }
.cms-fieldhead.cms-fieldhead--bare { margin: 0; }
/* With the name above it, a box has no floating name and no room kept for one. */
.cms-panel--right .mud-input-control { margin-top: 0; margin-bottom: 0; }
.cms-panel--right .mud-input-outlined-border { border-radius: 6px; }

/* A block's fields in numbered cards that fold, one open at a time: the open one dark-edged with a filled number, an
   empty optional one dashed with a +, one with a problem red. */
.cms-panel--right .cms-fields.cms-fields--grouped { gap: 14px; }
.cms-group { border: 1px solid var(--cms-rule-2); border-radius: 10px; background: var(--cms-paper); }
.cms-group--open { border-color: var(--cms-ink); }
.cms-group--optional { border-style: dashed; background: transparent; }
.cms-group--invalid { border-color: var(--cms-danger); }
.cms-group__head {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px;
    border: 0; border-radius: 10px; background: none; color: var(--cms-ink); font: inherit; text-align: left; cursor: pointer;
}
.cms-group__head:focus-visible { outline: 2px solid var(--cms-ink); outline-offset: 2px; }
.cms-group--open .cms-group__head { border-bottom: 1px solid var(--cms-rule); border-radius: 10px 10px 0 0; }
.cms-group__number {
    flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--cms-ink);
    border-radius: 50%; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cms-group--open .cms-group__number { background: var(--cms-ink); color: var(--cms-paper); }
.cms-group--invalid .cms-group__number { border-color: var(--cms-danger); color: var(--cms-danger); }
.cms-group--open.cms-group--invalid .cms-group__number { background: var(--cms-danger); color: var(--cms-paper); }
.cms-group__text { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
.cms-group__name { font-size: 16px; font-weight: 600; }
.cms-group__line { overflow: hidden; font-size: 13px; color: var(--cms-dim); text-overflow: ellipsis; white-space: nowrap; }
.cms-group--invalid .cms-group__line { color: var(--cms-danger); }
.cms-group__arrow { flex: none; color: var(--cms-dim); }
.cms-group__body { padding: 20px 18px 22px; }
/* A list's top gap and line part it from the fields above it; first in a card there are none. */
.cms-group__body > .cms-items:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (prefers-reduced-motion: no-preference) {
    .cms-group { transition: border-color var(--cms-fast); }
}

/* Text over Länk, each the whole width: side by side in the panel a page's address had no room. */
.cms-link-field__inputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }

/* The block's image field, as the handoff's: a 112 × 80 thumbnail beside the file name, its size
   and file size, and Byt bild / Ta bort; empty, a dashed Välj bild box of the same height. The
   page settings' and Webbplats's image inputs keep their own look (.cms-image-input). */
.cms-image-value .cms-image-field { display: flex; gap: 12px; align-items: stretch; }

.cms-image-value .cms-image-field__thumb {
    flex: none;
    width: 112px;
    height: 80px;
    aspect-ratio: auto;
    object-fit: cover;
    border: 0;
    border-radius: var(--cms-radius);
    background: repeating-linear-gradient(135deg, #d8d2c6 0 10px, #cfc8bb 10px 20px);
}

.cms-image-field__info { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 2px 0; }

.cms-image-field__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--cms-ink);
}

.cms-image-field__details { font-size: 11px; color: var(--cms-dim); }
/* Scoped: the page settings' image input has an .cms-image-field__actions of its own, further down. */
.cms-image-value .cms-image-field__actions { display: flex; gap: 14px; }

.cms .cms-image-field__action.mud-button-root {
    min-width: 0;
    height: auto;
    padding: 0;
    font-size: 11px;
    color: var(--cms-ink);
}

.cms .cms-image-field__action.mud-button-root:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.cms .cms-image-field__action--quiet.mud-button-root { color: var(--cms-dim); }
.cms .cms-image-field__choose.mud-button-root { width: 100%; height: 80px; border-style: dashed; font-size: 11px; }
.cms-image-field__problem,
.cms-image-field__help { margin: 0; font-size: .75rem; color: var(--cms-dim); }
.cms-image-field__problem { color: var(--cms-danger); }

/* Sidinställningar's name stays whole, and its badges sit beside it, or wrap onto a second line under it when
   they do not fit there: every badge stays in sight. */
.cms-settings-panel__heading { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cms-settings-panel .cms-panel__title { flex: none; }
.cms-settings-panel__badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.cms-settings-panel__place { margin: 0; font-size: 13px; color: var(--cms-ink-2); }
.cms-settings-panel__place a { color: var(--cms-ink); }

.cms-problems {
    margin-bottom: 1rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--cms-danger);
    border-left-width: 3px;
    border-radius: var(--cms-radius-card);
    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); }

/* Phones: a Redigera / Förhandsgranska switch. The block list is a plain column that never folds, and
   a block's fields or the page settings slide in over the whole screen. */
@media (max-width: 799.98px) {
    .cms-tabs { display: flex; }
    .cms-editor--edit .cms-preview { display: none; }
    .cms-editor--preview .cms-blocks { display: none; }
    .cms-preview { height: calc(100vh - 12rem); }

    .cms-blocks { position: static; width: auto; max-height: none; box-shadow: none; }
    .cms-blocks--folded { display: flex; }
    .cms-blocks__fold, .cms-blocks-tab, .cms-panel__move { display: none; }

    /* Hidden panels keep their place off screen, but out of the keyboard's reach. Visibility
       changes at once on opening, so the panel can take the focus, and after the slide on closing. */
    .cms-panel--right {
        display: flex;
        position: fixed;
        inset: 0;
        width: auto;
        max-height: none;
        z-index: 1250;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--cms-fast), visibility var(--cms-fast);
    }

    .cms-panel--open { transform: none; visibility: visible; transition: transform var(--cms-fast); }
}

@media (prefers-reduced-motion: reduce) {
    .cms-panel--right, .cms-panel--open, .cms-blocks-tab { transition: none; }
}

.cms-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }

/* A character counter stays on one line beside a long help text instead of wrapping. */
.mud-input-helper-text > .ms-auto { flex: none; padding-left: .75rem; white-space: nowrap; }

.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; }
}

/* Scheduled publishing: a calm badge for a planned publish, a clear one when it failed. */
.cms-badge--scheduled { border-color: var(--cms-scheduled); background: var(--cms-scheduled); color: var(--cms-ink-2); }
.cms-badge--problem { border-color: var(--cms-danger); color: var(--cms-danger); }
.cms-problems__text { margin: .25rem 0 0; }
.cms-dialog__lead { margin: 0 0 1rem; color: var(--cms-ink-2); }

/* How the page could look as a search result, under the description it previews. */
.cms-snippet {
    display: grid;
    gap: .15rem;
    padding: .85rem 1rem;
    border: 1px solid var(--cms-rule);
    border-radius: var(--cms-radius);
    background: var(--cms-paper);
    font-family: Arial, var(--cms-body);
}
.cms-snippet__label { font-family: var(--cms-body); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cms-dim); margin-bottom: .35rem; }
.cms-snippet__url { font-size: .8rem; color: #202124; overflow-wrap: anywhere; }
.cms-snippet__title { font-size: 1.1rem; line-height: 1.3; color: #1a0dab; }
.cms-snippet__description { font-size: .85rem; line-height: 1.45; color: #4d5156; }

/* Rich text: a plain textarea under a small formatting toolbar, styled like the outlined fields. */
.cms-richtext { display: grid; }
/* The label and the note keep their distance; the toolbar, a link bar and the text meet in one frame. */
.cms-richtext__label { margin: 0 0 .35rem; font-size: .8rem; color: var(--cms-ink-2); }
.cms-richtext__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    min-height: 44px;
    padding: 4px 8px 4px 10px;
    border: 1px solid var(--cms-rule-2);
    border-bottom: 0;
    border-radius: var(--cms-radius) var(--cms-radius) 0 0;
    background: var(--cms-paper);
}
/* The tools in groups with a thin rule between them, and a caller's own tool at the right end. */
.cms-richtext__toolbar { align-items: center; }
.cms-richtext__group { display: flex; align-items: center; gap: .15rem; }
.cms-richtext__group + .cms-richtext__group { margin-left: .2rem; padding-left: .35rem; border-left: 1px solid var(--cms-rule); }
.cms-richtext__end { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.cms-richtext__input {
    width: 100%;
    min-height: 10rem;
    padding: .75rem .85rem;
    border: 1px solid var(--cms-rule-2);
    border-radius: 0 0 var(--cms-radius) var(--cms-radius);
    background: var(--cms-paper);
    color: var(--cms-ink);
    font: 400 .95rem/1.55 var(--cms-body);
    resize: vertical;
}
.cms-richtext__input:focus { outline: 2px solid var(--cms-accent); outline-offset: -1px; border-color: var(--cms-accent); }
/* The formatted editor: the content as the page shows it, within the field's frame. */
.cms-richtext__editor { max-height: 60vh; overflow: auto; resize: none; overflow-wrap: break-word; }
.cms-richtext__editor p { margin: 0 0 .6em; }
.cms-richtext__editor h3 { margin: .7em 0 .3em; font: 600 1.05rem/1.3 var(--cms-body); color: var(--cms-ink); }
.cms-richtext__editor ul, .cms-richtext__editor ol { margin: 0 0 .6em; padding-left: 1.4em; }
.cms-richtext__editor > :first-child { margin-top: 0; }
.cms-richtext__editor > :last-child { margin-bottom: 0; }
.cms-richtext__editor a { color: var(--cms-accent-deep); text-decoration: underline; }
.cms-richtext__linkbar { display: grid; gap: 4px; padding: 8px 10px 10px; border: 1px solid var(--cms-rule-2); border-bottom: 0; background: var(--cms-ground); }
.cms-richtext__linkbar .cms-actions { margin: 0; }
.cms-richtext--invalid .cms-richtext__input,
.cms-richtext--invalid .cms-richtext__linkbar,
.cms-richtext--invalid .cms-richtext__toolbar { border-color: var(--cms-danger); }
.cms-richtext__help, .cms-richtext__error { margin: .35rem 0 0; font-size: .75rem; color: var(--cms-dim); }
.cms-richtext__error { color: var(--cms-danger); }

/* The image field stacks when its container is narrow, such as the page settings in the
   block column, so the address and upload button keep a usable width. */
.cms-image-input { container-type: inline-size; }
.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; }
}

/* The thumbnail opens the library too: a button around it, no larger than the image. */
.cms-image-field__open { display: block; flex: none; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; }
.cms-image-field__open:focus-visible { outline: 2px solid var(--cms-ink); outline-offset: 2px; border-radius: var(--cms-radius); }

.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;
}

/* After the base rules, so it wins where it applies. The page settings' panel is 340px wide, which leaves
   its image input about 300px, so it stacks there too. */
@container (max-width: 320px) {
    .cms-image-field { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .cms-image-field__thumb { width: 100%; max-height: 150px; }
}

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

.cms-upload {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--cms-ink);
    border-radius: var(--cms-radius);
    font: 500 11px/1 var(--cms-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
}

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

.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-body);
    font-weight: 600;
    font-size: .95rem;
    color: var(--cms-dim);
    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-card);
    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: var(--cms-ground); }
.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;
}

@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; }

/* From tablet width up the editor's page is exactly as tall as the window: a problem banner and
   the tabs take what they need and the editor gets the rest. A taller page scrolls whenever the
   preview scrolls to a chosen block, and the bar and panels jump. */
@media (min-width: 800px) {
    .cms-main--wide.mud-main-content {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    /* No auto margins: in the column they would shrink the page to its content's width. */
    .cms-main--wide .cms-content--wide {
        flex: 1 1 auto;
        min-height: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    /* The preview centred at the chosen width and as tall as the canvas. */
    .cms-content--wide > .cms-editor {
        flex: 1 1 0;
        min-height: 420px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* At Surfplatta and Mobil the page is shown at that width, the canvas on both sides, with the
       cards' line around it; the site's own responsive rules apply as on a real tablet or phone.
       The line is outside the page's 768 or 390 pixels, so the frame is 2px wider. */
    .cms-preview--tablet,
    .cms-preview--phone { border: 1px solid var(--cms-rule); }
    .cms-preview--tablet { max-width: 770px; }
    .cms-preview--phone { max-width: 392px; }
}

/* ─── Preview frame ─────────────────────────────────────────────── */
/* At Dator it fills the canvas edge to edge, which is sized to the window (phones set a height of
   their own). Surfplatta and Mobil narrow it from 800px, beside the editor's height rules above. */
.cms-preview {
    flex: 1 1 auto;
    width: 100%;
    background: var(--cms-paper);
    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-color: rgba(22, 22, 22, .35); color: var(--cms-ink-2); }
/* Below MudBlazor's Sm breakpoint a list's row is a card; what is marked so stays off it to keep the card short. */
@media (max-width: 599.98px) {
    .cms-hide-small { display: none !important; }
    /* MudBlazor only collapses a HideSmall cell, which keeps its room in the card: it goes altogether. */
    .cms-table .mud-table-cell-hide { display: none !important; }
}

/* ─── Skip link ─────────────────────────────────────────────────── */
/* Hidden until a keyboard user tabs to it, then the first thing on the page. */
.cms-skip {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 2000;
    padding: .7rem 1rem;
    background: var(--cms-ink);
    color: var(--cms-paper);
    font: 600 .9rem/1 var(--cms-body);
    text-decoration: none;
    transform: translateY(-200%);
}

.cms-skip:focus { transform: none; }
.cms-content:focus { outline: none; }

/* MudBlazor's stylesheet removes the focus ring from links (a:focus-visible); the admin puts
   it back so a keyboard user can see where they are. */
.cms a:focus-visible, .cms-skip:focus-visible, .cms-auth a:focus-visible {
    outline: 2px solid var(--cms-ink);
    outline-offset: 2px;
}

/* ─── Dashboard (Översikt) and the figures ──────────────────────── */
/* StatCard: the dashboard's four figures, Statistik's three. */
.cms-figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.cms-figures--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cms-figure.mud-card,
.cms-dash__card.mud-card {
    border-color: var(--cms-rule);
    border-radius: var(--cms-radius-card);
}

.cms-figure .mud-card-content { padding: 20px 22px; }
.cms-figure__label.mud-typography { margin: 0; }

.cms-figure__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 12px 0 0;
}

.cms-figure__value { font: 400 32px/1 var(--cms-display); color: var(--cms-ink); }
.cms-figure__change { font-size: 13px; color: var(--cms-dim); white-space: nowrap; }

/* Senast redigerat beside the visits, 1.55 to 1. */
.cms-dash {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.cms-dash__card.mud-card { display: flex; flex-direction: column; overflow: hidden; }

.cms-dash__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 6px;
}

.cms-dash__title { margin: 0; font: 600 15px/1.3 var(--cms-body); color: var(--cms-ink); }

.cms-dash__link.mud-link {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cms-ink);
}

.cms-dash__link.mud-link:hover { color: var(--cms-dim); }

.cms-dash__note {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cms-dim);
}

.cms-dash__visits { padding-bottom: 18px; }

/* The chart takes the height the row gives the card, Senast redigerat's. */
.cms-dash__visits .cms-bars { flex: 1 1 auto; height: auto; min-height: 200px; margin: 24px 20px 0; }
.cms-dash__visits .cms-bars__axis { margin: 8px 20px 0; }

.cms-latest .mud-table-row { cursor: pointer; }
.cms-latest__title { color: var(--cms-ink); text-decoration: none; }
.cms-latest__title:hover { color: var(--cms-dim); }

/* The status chips: Publicerad in ink, Utkast outlined, Schemalagd on warm grey. */
.cms-chip.mud-chip {
    height: 24px;
    margin: 0;
    padding: 0 10px;
    border-radius: var(--cms-radius-chip);
    font: 500 11px/1 var(--cms-body);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cms-chip.mud-chip.mud-chip-filled.mud-chip-color-primary { background: var(--cms-ink); color: var(--cms-cream); }
.cms-chip.mud-chip.mud-chip-outlined { border: 1px solid rgba(22, 22, 22, .35); background: transparent; color: var(--cms-ink-2); }
.cms-chip.cms-chip--scheduled.mud-chip { background: var(--cms-scheduled); color: var(--cms-ink-2); }

/* VisitBars: the visits per day. Thin gaps when a long period has many bars. */
.cms-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 198px;
    margin: 16px 0 0;
    padding: 0 0 1px;
    list-style: none;
    border-bottom: 1px solid var(--cms-rule);
}

.cms-bars--dense { gap: 1px; }
/* The count above its bar: the day is a column whose top padding is the count's room, so the tallest bar (100 % of
   the room below the padding) and its count still fit inside the chart. */
.cms-bars__day { flex: 1 1 0; min-width: 0; height: 100%; box-sizing: border-box; padding-top: 14px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.cms-bars__bar { display: block; width: 100%; background: var(--cms-bar); border-radius: 2px 2px 0 0; }
.cms-bars__count { display: block; flex: none; margin-bottom: 3px; font: 500 11px/1 var(--cms-body); color: var(--cms-ink-2); text-align: center; font-variant-numeric: tabular-nums; }
.cms-bars__day--today .cms-bars__count { color: var(--cms-ink); font-weight: 600; }
/* No room for a count on every bar of a quarter, nor of a month on a phone: the hover hint and the screen reader's
   line keep the figure. */
.cms-bars--dense .cms-bars__count { display: none; }
@media (max-width: 699.98px) {
    .cms-bars--month .cms-bars__count { display: none; }
}
.cms-bars__day--today .cms-bars__bar { background: var(--cms-ink); }
.cms-bars__day:hover .cms-bars__bar { background: var(--cms-dim); }

.cms-bars__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--cms-dim);
}

/* Below about 1100px the table and the chart stack, and the chart keeps a height of its own. */
@media (max-width: 1099.98px) {
    .cms-dash { grid-template-columns: minmax(0, 1fr); }
    .cms-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cms-dash__visits .cms-bars { flex: none; height: 200px; }
}

@media (max-width: 599.98px) {
    .cms-figures,
    .cms-figures--three { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Statistik ─────────────────────────────────────────────────── */
.cms-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The period: one segmented control, the chosen period in ink. */
.cms-range {
    display: inline-flex;
    border: 1px solid var(--cms-rule-2);
    border-radius: var(--cms-radius);
    background: var(--cms-paper);
    overflow: hidden;
}

.cms-range__option {
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-left: 1px solid rgba(22, 22, 22, .18);
    background: none;
    font: 500 11px/1 var(--cms-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cms-ink-2);
    cursor: pointer;
    white-space: nowrap;
}

.cms-range__option:first-child { border-left: 0; }
.cms-range__option[aria-pressed="true"] { background: var(--cms-ink); color: var(--cms-cream); }
.cms-range__option:focus-visible { outline: 2px solid var(--cms-ink); outline-offset: -2px; }

.cms-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }

@media (max-width: 959.98px) {
    .cms-columns { grid-template-columns: minmax(0, 1fr); }
}

.cms-ranking__name { overflow-wrap: anywhere; }
.cms-ranking__count { font-variant-numeric: tabular-nums; }

.cms-ranking__more {
    margin: 12px 20px 0;
    border: 0;
    background: none;
    padding: 0;
    font: 500 12px/1.4 var(--cms-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cms-ink);
    cursor: pointer;
}

.cms-ranking__more:hover { color: var(--cms-dim); }
.cms-card__hint { margin: 16px 20px 18px; font-size: 12px; color: var(--cms-dim); }


/* ─── Cookie question on public pages (CmsConsent, CmsConsentLink) ─ */
/* On the customer's public pages, so it keeps its own colours and corners rather than following
   the admin's tokens: a new admin look must not change a public site. */
.cms-consent {
    position: fixed;
    z-index: 1000;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    max-width: 34rem;
    margin-left: auto;
    padding: 1.25rem 1.4rem;
    border: 1px solid #cdc8bb;
    border-radius: 2px;
    background: #ffffff;
    color: #14140f;
    box-shadow: 0 12px 40px rgba(20, 20, 15, .18);
    font: 400 .92rem/1.55 var(--cms-body);
}

.cms-consent__title { margin: 0 0 .4rem; font: 600 1rem/1.3 var(--cms-body); letter-spacing: 0; text-transform: none; }
.cms-consent__text { margin: 0 0 1rem; color: #3a3a34; }
.cms-consent__more { color: inherit; }
.cms-consent__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }

/* Saying no is exactly as easy and as visible as saying yes. */
.cms-consent__button {
    flex: 1 1 8rem;
    padding: .75rem 1rem;
    border: 1px solid #14140f;
    border-radius: 999px;
    background: #ffffff;
    color: #14140f;
    font: 600 .9rem/1 var(--cms-body);
    cursor: pointer;
}

.cms-consent__button:hover { background: #14140f; color: #ffffff; }
.cms-consent__button:focus-visible { outline: 3px solid #7a9d7e; outline-offset: 2px; }

.cms-consent-link { display: inline; margin: 0; }

.cms-consent-link__button {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* ─── Upload busy state, error bar, reconnection notice ─────────── */
.cms-upload--busy { opacity: .6; pointer-events: none; }

#blazor-error-ui,
.cms-reconnect {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    padding: .85rem 1.25rem;
    background: var(--cms-ink);
    color: var(--cms-paper);
    font: 500 .92rem/1.4 var(--cms-body);
}

#blazor-error-ui button,
.cms-reconnect button {
    margin-left: .5rem;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* MudBlazor paints #components-reconnect-modal in the page background with !important and
   restyles its buttons; this one element needs the dark bar and plain buttons back. */
#components-reconnect-modal.cms-reconnect { background-color: var(--cms-ink) !important; }
#components-reconnect-modal.cms-reconnect button { min-width: 0; padding: 0; color: inherit; font-size: inherit; }
#components-reconnect-modal.cms-reconnect button:hover { background: none; }

.cms-reconnect p { display: none; margin: 0; }
.cms-reconnect.components-reconnect-show,
.cms-reconnect.components-reconnect-retrying,
.cms-reconnect.components-reconnect-failed,
.cms-reconnect.components-reconnect-rejected { display: block; }
.cms-reconnect.components-reconnect-show .cms-reconnect__retrying,
.cms-reconnect.components-reconnect-retrying .cms-reconnect__retrying,
.cms-reconnect.components-reconnect-failed .cms-reconnect__failed,
.cms-reconnect.components-reconnect-rejected .cms-reconnect__rejected { display: block; }
/* A host that gave the admin no render mode: said plainly instead of a dead page. */
.cms-static-warning { max-width: 640px; margin: 48px auto; padding: 20px 24px; border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-card); background: var(--cms-paper); font: 400 15px/1.5 var(--cms-body); color: var(--cms-ink); }

/* Image and link fields: their name, then their inputs, kept together as one field. */
.cms-image-value,
.cms-link-field {
  display: grid;
  gap: 10px;
}

.cms-items__help {
  margin: 0 0 8px;
  color: var(--cms-muted, #5f6368);
  font-size: 0.85rem;
}

.cms-items__limit--error {
  color: var(--mud-palette-error, #c62828);
}

/* The image field's buttons */
.cms-image-field__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ── The top bar's AI usage, left of Visa webbplats: a ring, AI and the percent ── */
.cms-ai-usage__tip { display: inline-flex; }
.cms-ai-usage { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 6px; border: 1px solid var(--cms-rule); border-radius: 999px; font: 500 12px/1 var(--cms-body); color: var(--cms-ink-2); white-space: nowrap; cursor: default; }
.cms-ai-usage:focus-visible { outline: 2px solid var(--cms-ink); outline-offset: 2px; }
.cms-ai-usage__ring { width: 20px; height: 20px; transform: rotate(-90deg); }
.cms-ai-usage__track, .cms-ai-usage__fill { fill: none; stroke-width: 4; }
.cms-ai-usage__track { stroke: var(--cms-storage-track, #e9e5dc); }
.cms-ai-usage__fill { stroke: var(--cms-ink); stroke-linecap: round; }
.cms-ai-usage__label { letter-spacing: .14em; color: var(--cms-dim); }
.cms-ai-usage__value { font-weight: 600; color: var(--cms-ink); font-variant-numeric: tabular-nums; }
.cms-ai-usage--warning { border-color: #c98a1a; }
.cms-ai-usage--warning .cms-ai-usage__fill { stroke: #c98a1a; }
.cms-ai-usage--warning .cms-ai-usage__value { color: #8a5a00; }
.cms-ai-usage--full { border-color: var(--mud-palette-error, #b3261e); background: #fbeceb; }
.cms-ai-usage--full .cms-ai-usage__fill { stroke: var(--mud-palette-error, #b3261e); }
.cms-ai-usage--full .cms-ai-usage__value { color: var(--mud-palette-error, #b3261e); }
@media (max-width: 599.98px) {
    .cms-ai-usage { padding: 0 8px 0 4px; gap: 4px; }
    .cms-ai-usage__label { display: none; }
}

/* ── MarsjönAdmin: Marsjön's own pages, the tools as cards ── */
.cms-marsjon__tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cms-marsjon__tool { display: grid; gap: 8px; padding: 18px 20px; border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-card); background: var(--cms-paper); }
.cms-marsjon__tool-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--cms-ink); }
.cms-marsjon__tool-text { margin: 0; font-size: 14px; color: var(--cms-ink-2); }
.cms-marsjon__tool .cms-actions { margin-top: 4px; }

/* ── The pickers (Välj bild, Välj video): the Media page's library in a dialog as tall as the window, its buttons
   on a row above it, the tree held at the top of the dialog's scroll ── */
.cms-media-picker-dialog { height: calc(100vh - 64px); }
.cms-media-picker__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 18px; }
.cms-media-picker .cms-media-tree { top: 0; max-height: calc(100vh - 230px); }
/* A picker's crumbs are buttons: a link would leave the editor. */
.cms-media-crumbs__open { padding: 0; border: 0; background: none; font: inherit; color: var(--cms-dim); cursor: pointer; }
.cms-media-crumbs__open:hover { color: var(--cms-ink); }
.cms-media-crumbs__open:focus-visible { outline: 2px solid var(--cms-ink); outline-offset: 2px; border-radius: 2px; }

/* ── Media: the handoff's library — the folders as a tree beside the open folder's tiles ── */
.cms-media-actions__upload { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: var(--cms-radius); background: var(--cms-ink); color: var(--cms-cream); font: 500 12px/1 var(--cms-body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.cms-media-actions__upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cms-media-actions__upload--busy { opacity: .6; cursor: progress; }
.cms-media-actions__upload .mud-icon-root { width: 18px; height: 18px; }
/* AI-bilder-Inlägg: what lands there and what Rensa removes, with the button, above the folder's files. */
.cms-media-ai-folder { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 16px; padding: 14px 18px; border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-card); background: var(--cms-paper); }
.cms-media-ai-folder__text { flex: 1 1 320px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--cms-dim); }
.cms-media-ai-folder__text strong { color: var(--cms-ink); font-weight: 600; }
/* Skapa AI-bild's dialog: the image made, whole, above the description and its settings. */
.cms-ai-create__result { margin: 0 0 16px; }
.cms-ai-create__result img { display: block; width: 100%; max-height: 50vh; object-fit: contain; border-radius: 6px; background: #f4f1ea; }
.cms-ai-create__placeholder.cms-ai-edit__placeholder { aspect-ratio: 16 / 9; }
.cms-ai-create__style.mud-input-control, .cms-ai-create__format.mud-input-control, .cms-ai-create__quality.mud-input-control { margin: 0; }
/* Använd sidans innehåll, under the description, with what came of it. */
.cms-ai-create__source { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: -6px 0 12px; }
.cms-ai-create__source-note { font-size: 12px; color: var(--cms-dim); }
.cms-media-library { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.cms-media-tree { position: sticky; top: 80px; display: flex; flex-direction: column; min-height: 360px; max-height: calc(100vh - 100px); padding: 14px 10px 12px; border: 1px solid var(--cms-rule); border-radius: 6px; background: var(--cms-paper); }
.cms-media-tree__head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 6px; }
.cms-media-tree__fold { display: none; }
.cms-media-tree__label { margin: 0; }
.cms-media-tree__list { list-style: none; margin: 0; padding: 0; }
.cms-media-tree > .cms-media-tree__list { flex: 1 1 auto; overflow: auto; }
.cms-media-tree__row { display: flex; align-items: center; height: 34px; padding-left: calc(var(--cms-depth, 0) * 22px); border-radius: 4px; color: var(--cms-ink-2); }
.cms-media-tree__row:hover { background: var(--cms-ground); color: var(--cms-ink); }
.cms-media-tree__row--on, .cms-media-tree__row--on:hover { background: var(--cms-ink); color: var(--cms-cream); }
.cms-media-tree__chevron { display: grid; place-items: center; width: 22px; height: 34px; flex: none; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.cms-media-tree__chevron--none { cursor: default; }
.cms-media-tree__chevron .mud-icon-root { width: 16px; height: 16px; }
.cms-media-tree__open { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 2px; border: 0; background: none; font: inherit; font-size: 13px; color: inherit; text-align: left; cursor: pointer; }
.cms-media-tree__open .mud-icon-root { flex: none; width: 18px; height: 18px; }
.cms-media-tree__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-media-tree__count { flex: none; font-size: 11px; opacity: .7; }
.cms-media-tree__storage { margin-top: 12px; padding: 12px 6px 0; border-top: 1px solid var(--cms-rule); }
.cms-media-tree__storage-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--cms-dim); margin-bottom: 6px; }
.cms-media-tree__storage-text { color: var(--cms-ink-2); }
.cms-media-tree__storage-bar.mud-progress-linear { height: 4px; border-radius: 2px; background: var(--cms-storage-track, #e9e5dc); }
.cms-media-main { position: relative; min-width: 0; }
/* Files dragged in from the desktop: the overlay over the main area, whose file input takes the drop. */
.cms-media-drop { position: absolute; inset: 0; z-index: 5; display: none; place-items: center; border: 2px dashed var(--cms-ink); border-radius: 6px; background: rgba(250, 248, 243, .9); pointer-events: none; }
.cms-media-drop--over { display: grid; pointer-events: auto; }
.cms-media-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: copy; }
.cms-media-drop__text { font-size: 15px; font-weight: 600; color: var(--cms-ink); pointer-events: none; }
/* Each upload's progress, bottom right. */
.cms-media-progress { position: fixed; right: 24px; bottom: 24px; z-index: 19; width: 320px; max-width: calc(100vw - 32px); padding: 10px 12px 12px; border: 1px solid var(--cms-rule); border-radius: 8px; background: var(--cms-paper); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.cms-media-progress__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--cms-ink); }
.cms-media-progress__item { padding: 6px 0; border-top: 1px solid var(--cms-rule); }
.cms-media-progress__row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--cms-ink-2); }
.cms-media-progress__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-media-progress__state { flex: none; max-width: 60%; text-align: right; color: var(--cms-dim); }
.cms-media-progress__item--failed .cms-media-progress__state { color: var(--mud-palette-error, #b3261e); white-space: normal; }
.cms-media-progress__bar.mud-progress-linear { height: 4px; margin-top: 6px; border-radius: 2px; }
.cms-media-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: -8px 0 14px; }
.cms-media-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 13px; color: var(--cms-dim); }
.cms-media-crumbs a { color: var(--cms-dim); text-decoration: none; }
.cms-media-crumbs a:hover { color: var(--cms-ink); }
.cms-media-crumbs span[aria-current] { color: var(--cms-ink); }
.cms-media-crumbs__sep { width: 16px; height: 16px; }
.cms-media-head__counts { font-size: 13px; color: var(--cms-dim); }
.cms-media-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; margin-bottom: 16px; }
.cms-media-toolbar .mud-input-control { margin: 0; }
.cms-media-toolbar__search .mud-input { background: rgba(22, 22, 22, .05); }
.cms-media-toolbar__kind, .cms-media-toolbar__sort { min-width: 150px; }
.cms-media-toolbar__view { display: inline-flex; border: 1px solid var(--cms-rule); border-radius: 4px; overflow: hidden; }
.cms-media-toolbar__view .mud-icon-button { border-radius: 0; }
.cms-media-toolbar__view--on.mud-icon-button { background: var(--cms-ink); color: var(--cms-cream); }
.cms-media-folder-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cms-media-folder-tile { position: relative; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 6px 0 14px; border: 1px solid var(--cms-rule); border-radius: 6px; background: var(--cms-paper); }
.cms-media-folder-tile--new { border: 2px solid var(--cms-ink); padding-left: 12px; }
.cms-media-folder-tile__open { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 10px; height: 60px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cms-media-folder-tile__icon { flex: none; width: 22px; height: 22px; color: var(--cms-ink-2); }
.cms-media-folder-tile__text { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
.cms-media-folder-tile__name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cms-ink); }
.cms-media-folder-tile__count { font-size: 11px; color: var(--cms-dim); }
.cms-media-folder-tile__field .mud-input { font-size: 13px; }
.cms-media-folder-tile__error { font-size: 11px; color: var(--mud-palette-error, #b3261e); }
.cms-media-files { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.cms-media-file-tile { position: relative; display: grid; gap: 6px; }
.cms-media-file-tile__thumb { display: block; width: 100%; height: 128px; padding: 0; border: 0; border-radius: 6px; background: var(--cms-ground); overflow: hidden; cursor: pointer; }
.cms-media-file-tile__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cms-media-file-tile__icon { display: grid; place-items: center; width: 100%; height: 100%; background: var(--cms-soft, #efebe3); color: var(--cms-ink-2); }
.cms-media-file-tile__icon .mud-icon-root { width: 32px; height: 32px; }
.cms-media-file-tile__text { display: grid; gap: 2px; padding: 0 2px; }
.cms-media-file-tile__name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cms-ink); }
.cms-media-file-tile__meta, .cms-media-file-tile__usage { font-size: 11px; color: var(--cms-dim); }
.cms-media-file-tile__usage { display: inline-flex; align-items: center; gap: 4px; }
.cms-media-file-tile__usage .mud-icon-root { width: 12px; height: 12px; }
.cms-media-file-tile__check { position: absolute; top: 8px; left: 8px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); opacity: 0; transition: opacity .15s; cursor: pointer; }
.cms-media-file-tile:hover .cms-media-file-tile__check, .cms-media-file-tile--ticked .cms-media-file-tile__check, .cms-media-file-tile__check:focus-within { opacity: 1; }
.cms-media-file-tile__check input { width: 16px; height: 16px; margin: 0; accent-color: var(--cms-ink); cursor: pointer; }
.cms-media-file-tile--ticked .cms-media-file-tile__thumb { outline: 2px solid var(--cms-ink); outline-offset: 2px; }
/* In a picker, the field's own file. */
.cms-media-file-tile--selected .cms-media-file-tile__thumb { outline: 3px solid var(--mud-palette-primary, #1f5e4b); outline-offset: 2px; }
.cms-media-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.cms-media-list th { padding: 8px 10px; font: 500 11px/1.4 var(--cms-body); letter-spacing: .2em; text-transform: uppercase; color: var(--cms-dim); text-align: left; border-bottom: 1px solid var(--cms-rule); }
.cms-media-list td { padding: 10px; border-bottom: 1px solid var(--cms-rule); color: var(--cms-ink-2); }
.cms-media-list__row--ticked td { background: var(--cms-soft, #efebe3); }
.cms-media-list__row--selected td:first-child { box-shadow: inset 3px 0 0 var(--mud-palette-primary, #1f5e4b); }
.cms-media-list__name { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--cms-ink); cursor: pointer; }
.cms-media-list input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--cms-ink); }
.cms-media-empty { margin: 24px 0; }
.cms-media-folder-tile--renaming { border: 2px solid var(--cms-ink); padding-left: 12px; }
/* The floating bar while files are ticked, and the move popover above its Flytta. */
.cms-media-bar { position: fixed; left: 50%; bottom: 24px; z-index: 20; display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 8px 0 16px; border-radius: 8px; background: var(--cms-ink); color: var(--cms-cream); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transform: translateX(-50%); }
.cms-media-bar__count { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; padding-right: 14px; border-right: 1px solid rgba(245, 242, 235, .25); font-size: 13px; font-weight: 600; white-space: nowrap; }
.cms-media-bar .mud-button-root { color: var(--cms-cream); }
.cms-media-bar .mud-button-root:hover { background: rgba(245, 242, 235, .12); }
.cms-media-bar .mud-icon-button { color: var(--cms-cream); }
.cms-media-move__backdrop { position: fixed; inset: 0; z-index: 21; }
.cms-media-move { position: fixed; left: 50%; bottom: 88px; z-index: 22; width: 300px; max-width: calc(100vw - 32px); padding: 14px 12px 10px; border: 1px solid var(--cms-rule); border-radius: 8px; background: var(--cms-paper); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); transform: translateX(-50%); }
.cms-media-move__title { margin: 0 4px 8px; font-size: 14px; font-weight: 600; color: var(--cms-ink); }
.cms-media-move__list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.cms-media-move__row { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 8px 0 calc(8px + var(--cms-depth, 0) * 22px); border: 0; border-radius: 4px; background: none; font: inherit; font-size: 13px; color: var(--cms-ink-2); text-align: left; cursor: pointer; }
.cms-media-move__row:focus-visible { outline: 2px solid var(--cms-ink); outline-offset: -2px; }
.cms-media-move__row:hover { background: var(--cms-ground); }
.cms-media-move__row--current, .cms-media-move__row--off { color: var(--cms-dim); cursor: default; }
.cms-media-move__row--current:hover, .cms-media-move__row--off:hover { background: transparent; }
.cms-media-move__row--target { background: var(--cms-soft, #efebe3); color: var(--cms-ink); }
.cms-media-move__row .mud-icon-root { width: 18px; height: 18px; flex: none; }
.cms-media-move__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-media-move__current { font-size: 11px; color: var(--cms-dim); }
.cms-media-move__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cms-rule); }
.cms-media-move__new-field { flex: 1 1 100%; }
.cms-media-move__error { flex: 1 1 100%; font-size: 11px; color: var(--mud-palette-error, #b3261e); }
.cms-media-delete__title { margin: 0 0 8px; font: 400 22px/1.2 var(--cms-display, serif); color: var(--cms-ink); }
.cms-media-delete__text, .cms-media-delete__warning { margin: 0 0 8px; font-size: 14px; color: var(--cms-ink-2); }
.cms-media-delete__uses { margin: 0; padding-left: 18px; font-size: 13px; color: var(--cms-ink-2); }
/* A file's details. */
.cms-media-details__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.cms-media-details__preview { display: grid; place-items: center; gap: 12px; align-content: center; min-height: 240px; border-radius: 6px; background: var(--cms-soft, #efebe3); overflow: hidden; }
.cms-media-details__preview img, .cms-media-details__preview video { max-width: 100%; max-height: 420px; display: block; }
.cms-media-details__icon .mud-icon-root { width: 56px; height: 56px; color: var(--cms-ink-2); }
.cms-media-details__name { margin: 0 0 10px; font: 400 24px/1.2 var(--cms-display, serif); color: var(--cms-ink); overflow-wrap: anywhere; }
.cms-media-details__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0 0 16px; font-size: 13px; }
.cms-media-details__facts dt { color: var(--cms-dim); }
.cms-media-details__facts dd { margin: 0; color: var(--cms-ink-2); overflow-wrap: anywhere; }
.cms-media-details__address { display: flex; align-items: center; gap: 4px; }
.cms-media-details__uses-label { margin: 16px 0 4px; }
.cms-media-details__uses { margin: 0; padding-left: 18px; font-size: 13px; }
.cms-media-details__uses a { color: var(--cms-ink); }
.cms-media-details__unused { margin: 0; font-size: 13px; color: var(--cms-dim); }
.cms-media-details__error { margin: 12px 0 0; font-size: 13px; color: var(--mud-palette-error, #b3261e); }
.cms-media-details__replace { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid rgba(22, 22, 22, .35); border-radius: 4px; font: 500 12px/1 var(--cms-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cms-ink); cursor: pointer; }
.cms-media-details__replace input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cms-media-details__replace--busy { opacity: .6; cursor: progress; }
/* A phone: one column, and the buttons (Ersätt, Redigera med AI, Ta bort, Stäng) one under the other, full width. */
@media (max-width: 699.98px) {
    .cms-media-details__body { grid-template-columns: minmax(0, 1fr); }
    .cms-media-details .mud-dialog-actions { flex-direction: column; align-items: stretch; gap: 8px; }
    .cms-media-details .mud-dialog-actions > * { width: 100%; margin: 0; justify-content: center; }
    .cms-media-details .mud-dialog-actions .mud-spacer { display: none; }
}
@media (hover: none) { .cms-media-file-tile__check { opacity: 1; } }
@media (max-width: 1199.98px) {
    .cms-media-files { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cms-media-folder-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
    .cms-media-library { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .cms-media-tree { position: static; min-height: 0; max-height: none; padding-bottom: 8px; }
    .cms-media-tree__fold { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px; font-size: 13px; color: var(--cms-ink-2); }
    .cms-media-tree__path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cms-media-tree > .cms-media-tree__list, .cms-media-tree__storage { display: none; }
    .cms-media-tree--open > .cms-media-tree__list, .cms-media-tree--open .cms-media-tree__storage { display: block; }
    .cms-media-tree--open > .cms-media-tree__list { margin-top: 6px; }
    .cms-media-bar { left: 16px; right: 16px; bottom: 16px; width: auto; justify-content: space-between; padding: 0 6px 0 12px; transform: none; }
    .cms-media-bar__count { margin-right: 0; padding-right: 8px; }
    /* Icons alone on a phone; the buttons keep their names for screen readers. */
    .cms-media-bar__text { display: none; }
    .cms-media-bar .mud-button-root { min-width: 0; padding: 0 10px; }
    .cms-media-bar .mud-button-icon-start { margin: 0; }
    .cms-media-move { left: 16px; right: 16px; bottom: 80px; width: auto; max-width: none; transform: none; }
    .cms-media-progress { right: 16px; bottom: 80px; }
    .cms-media-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cms-media-toolbar__search { grid-column: 1 / -1; }
    .cms-media-toolbar__view { justify-self: end; }
    .cms-media-files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cms-media-folder-tiles { grid-template-columns: minmax(0, 1fr); }
}
}

/* ── Sociala medier: the admin's posts, accounts, calendar and the knowledge base's profiles ── */
.cms-social-list { display: flex; flex-direction: column; gap: 8px; }
.cms-social-list__item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-card); color: inherit; text-decoration: none; }
a.cms-social-list__item:hover { border-color: var(--cms-ink); }
.cms-social-list__title { font-weight: 600; color: var(--cms-ink); }
.cms-social-list__time { font-variant-numeric: tabular-nums; color: var(--cms-ink-2); min-width: 3.2em; }
.cms-social-list__meta { flex-basis: 100%; color: var(--cms-dim); font-size: .9rem; }
.cms-social-list__links { display: flex; flex-wrap: wrap; gap: 6px 14px; flex-basis: 100%; }
/* ── Sociala medier → Översikt: the channels, the calendar of every post, the latest published ── */
.cms-social-back { display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 12px; font-size: 13px; color: var(--cms-dim); text-decoration: none; }
.cms-social-back:hover { color: var(--cms-ink); }
.cms-social-back .mud-icon-root { width: 16px; height: 16px; }
.cms-social-home { display: grid; gap: 18px; container: social-home / inline-size; }
.cms-social-home__filter { justify-self: end; display: inline-flex; max-width: 100%; overflow-x: auto; border: 1px solid var(--cms-rule-2); border-radius: var(--cms-radius); }
.cms-social-home__channel { min-width: 104px; height: 36px; padding: 0 14px; border: 0; border-left: 1px solid var(--cms-rule-2); background: transparent; font: 500 11px/1 var(--cms-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cms-ink); white-space: nowrap; cursor: pointer; }
.cms-social-home__channel:first-child { border-left: 0; }
.cms-social-home__channel--on { background: var(--cms-ink); color: var(--cms-cream); }
/* Kanaler, at the foot of the column beside the calendar: a row per channel, as the campaigns and drafts are. */
.cms-social-home__cards { border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-card); background: var(--cms-paper); }
.cms-social-home__card { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--cms-rule); }
.cms-social-home__card--off .cms-social-home__name { color: var(--cms-dim); }
.cms-social-home__text { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
.cms-social-home__name { font-size: 14px; font-weight: 600; color: var(--cms-ink); }
.cms-social-home__account { font-size: 12px; color: var(--cms-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-social-home__state { display: inline-flex; align-items: center; gap: 7px; flex: none; font: 500 11px/1 var(--cms-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cms-ink); }
.cms-social-home__state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cms-ink); }
.cms-social-home__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.cms-social-badges { display: inline-flex; gap: 3px; }
.cms-social-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: var(--cms-ink); color: var(--cms-cream); font: 700 8px/1 var(--cms-body); letter-spacing: .02em; }
.cms-social-badge--large { width: 28px; height: 28px; border-radius: 4px; font-size: 10px; flex: none; }
.cms-social-badge--off { background: var(--cms-bar); color: var(--cms-ink-2); }
/* A story goes there too: the ring stories wear on the platforms. */
.cms-social-badge--story { box-shadow: 0 0 0 1.5px var(--cms-cream), 0 0 0 3px var(--cms-ink); }
.cms-social-cal { container: social-cal / inline-size; min-width: 0; border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-card); background: var(--cms-paper); overflow: hidden; }
.cms-social-cal__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--cms-rule); }
.cms-social-cal__range { margin: 0 6px; font-size: 15px; font-weight: 600; color: var(--cms-ink); }
.cms-social-cal__today { height: 28px; padding: 0 12px; border: 1px solid var(--cms-rule-2); border-radius: var(--cms-pill); background: transparent; font: 500 12px/1 var(--cms-body); color: var(--cms-ink); cursor: pointer; }
.cms-social-cal__spacer { flex: 1 1 auto; }
.cms-social-cal__status { width: 160px; flex: none; }
.cms-social-cal__status.mud-input-control { margin: 0; }
.cms-social-cal__views { display: inline-flex; border: 1px solid var(--cms-rule-2); border-radius: var(--cms-radius); overflow: hidden; }
.cms-social-cal__view { height: 32px; padding: 0 14px; border: 0; border-left: 1px solid var(--cms-rule-2); background: transparent; font: 500 11px/1 var(--cms-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cms-ink); cursor: pointer; }
.cms-social-cal__view:first-child { border-left: 0; }
.cms-social-cal__view--on { background: var(--cms-ink); color: var(--cms-cream); }
.cms-social-cal__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 520px; }
.cms-social-cal__day { min-width: 0; border-left: 1px solid var(--cms-rule); }
.cms-social-cal__day:first-child { border-left: 0; }
.cms-social-cal__day--today { background: #f6f3ec; }
.cms-social-cal__head { display: flex; align-items: center; justify-content: space-between; padding: 10px; }
.cms-social-cal__weekday { font: 500 11px/1 var(--cms-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cms-dim); }
.cms-social-cal__date { display: inline-grid; place-items: center; min-width: 30px; height: 30px; font: 400 18px/1 var(--cms-display); color: var(--cms-ink); }
.cms-social-cal__day--today .cms-social-cal__date { border-radius: 50%; background: var(--cms-ink); color: var(--cms-cream); }
.cms-social-cal__posts { display: grid; gap: 8px; min-width: 0; padding: 0 8px 12px; }
.cms-social-cal__post { display: grid; gap: 6px; min-width: 0; padding: 8px; border: 1px solid var(--cms-rule-2); border-radius: var(--cms-radius); background: var(--cms-paper); }
.cms-social-cal__post[draggable="true"] { cursor: grab; }
.cms-social-cal__post--scheduled { border-color: var(--cms-ink); }
.cms-social-cal__post--published { border-color: transparent; background: var(--cms-accent-soft); }
.cms-social-cal__post--failed { border-color: var(--cms-danger); background: #fbeceb; }
.cms-social-cal__post--publishing { border-color: var(--cms-ink); border-style: dashed; }
.cms-social-cal__open { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.cms-social-cal__pill { justify-self: start; display: inline-flex; align-items: center; max-width: 100%; height: 18px; padding: 0 7px; border: 1px solid var(--cms-rule-2); border-radius: var(--cms-pill); font: 500 9px/1 var(--cms-body); letter-spacing: .08em; text-transform: uppercase; color: var(--cms-ink); white-space: nowrap; overflow: hidden; }
/* Väntar på publicering is longer than a narrow day: it goes onto a second line rather than being cut. */
.cms-social-cal__pill--waiting { height: auto; min-height: 18px; padding: 3px 7px; line-height: 1.25; white-space: normal; }
.cms-social-cal__pill--scheduled { border-color: transparent; background: var(--cms-accent-soft); }
.cms-social-cal__pill--published { border-color: transparent; background: var(--cms-ink); color: var(--cms-cream); }
.cms-social-cal__pill--failed { border-color: transparent; background: var(--cms-danger); color: #fff; }
.cms-social-cal__pill--publishing { border-color: transparent; background: var(--cms-accent-soft); }
/* In a narrow day the badges go under the time rather than past the column. */
.cms-social-cal__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; }
.cms-social-cal__time { font-size: 12px; font-weight: 700; color: var(--cms-ink); font-variant-numeric: tabular-nums; }
.cms-social-cal__title { font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--cms-ink); overflow-wrap: anywhere; }
.cms-social-cal__campaign { font-size: 11px; color: var(--cms-dim); text-decoration: none; }
.cms-social-cal__campaign:hover { color: var(--cms-ink); text-decoration: underline; }
.cms-social-cal__plan { display: flex; align-items: center; justify-content: center; gap: 4px; height: 34px; overflow: hidden; border: 1px dashed var(--cms-rule-2); border-radius: var(--cms-radius); font: 500 11px/1 var(--cms-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cms-dim); white-space: nowrap; text-decoration: none; }
.cms-social-cal__plan:hover { border-color: var(--cms-ink); color: var(--cms-ink); }
.cms-social-cal__plan .mud-icon-root { width: 14px; height: 14px; }
.cms-social-cal__month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cms-social-cal__month-head { padding: 8px 10px; font: 500 11px/1 var(--cms-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cms-dim); border-bottom: 1px solid var(--cms-rule); }
.cms-social-cal__cell { display: grid; align-content: start; gap: 4px; min-width: 0; min-height: 96px; padding: 6px; border-left: 1px solid var(--cms-rule); border-bottom: 1px solid var(--cms-rule); }
.cms-social-cal__cell:nth-child(7n + 1) { border-left: 0; }
.cms-social-cal__cell--today { background: #f6f3ec; }
.cms-social-cal__cell--outside .cms-social-cal__cell-date { color: var(--cms-bar); }
.cms-social-cal__cell-date { font: 400 14px/1 var(--cms-display); color: var(--cms-ink); }
.cms-social-cal__cell--today .cms-social-cal__cell-date { display: inline-grid; place-items: center; justify-self: start; width: 22px; height: 22px; border-radius: 50%; background: var(--cms-ink); color: var(--cms-cream); }
.cms-social-cal__post--compact { gap: 0; padding: 3px 6px; }
.cms-social-cal__post--compact .cms-social-cal__open { display: flex; gap: 4px; overflow: hidden; white-space: nowrap; }
.cms-social-cal__post--compact .cms-social-cal__time, .cms-social-cal__post--compact .cms-social-cal__title { font-size: 11px; }
.cms-social-cal__post--compact .cms-social-cal__title { overflow: hidden; text-overflow: ellipsis; }
.cms-social-cal__list { width: 100%; border-collapse: collapse; font-size: 13px; }
.cms-social-cal__list th { padding: 10px 14px; font: 500 11px/1.4 var(--cms-body); letter-spacing: .2em; text-transform: uppercase; color: var(--cms-dim); text-align: left; border-bottom: 1px solid var(--cms-rule); }
.cms-social-cal__list td { padding: 10px 14px; border-bottom: 1px solid var(--cms-rule); color: var(--cms-ink-2); vertical-align: middle; }
.cms-social-cal__list .cms-social-cal__title { font-size: 13px; text-decoration: none; }
.cms-social-cal__list .cms-social-cal__title:hover { text-decoration: underline; }
.cms-social-cal__when { white-space: nowrap; color: var(--cms-dim); }
.cms-social-cal .cms-empty { margin: 24px 14px; }
/* The column beside the calendar: the campaigns, the drafts, the latest published and the channels. */
.cms-social-home__side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.cms-social-campaigns, .cms-social-drafts { border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-card); background: var(--cms-paper); }
.cms-social-campaigns__row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--cms-rule); color: inherit; text-decoration: none; }
.cms-social-campaigns__row:hover { background: var(--cms-ground); }
.cms-social-campaigns__icon { color: var(--cms-dim); }
.cms-social-campaigns__more { width: 100%; padding: 10px 18px; border: 0; border-top: 1px solid var(--cms-rule); background: transparent; font: 500 12px/1 var(--cms-body); color: var(--cms-ink); text-align: left; cursor: pointer; }
.cms-social-campaigns__more:hover { background: var(--cms-ground); }
.cms-social-latest { border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-card); background: var(--cms-paper); }
.cms-social-latest__heading { margin: 0; padding: 16px 18px; font: 600 15px/1.2 var(--cms-body); color: var(--cms-ink); }
.cms-social-latest__empty { margin: 0; padding: 12px 18px 18px; font-size: 13px; color: var(--cms-dim); border-top: 1px solid var(--cms-rule); }
.cms-social-latest__row, .cms-social-drafts__row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--cms-rule); color: inherit; text-decoration: none; }
.cms-social-latest__row:hover, .cms-social-drafts__row:hover { background: var(--cms-ground); }
.cms-social-latest__thumb { width: 48px; height: 48px; border-radius: var(--cms-radius); object-fit: cover; display: block; }
.cms-social-latest__thumb--empty { background: repeating-linear-gradient(135deg, #e9e5dc 0 6px, #ddd7cb 6px 12px); }
.cms-social-latest__text { display: grid; gap: 4px; min-width: 0; }
.cms-social-latest__title, .cms-social-drafts__title { font-size: 13px; font-weight: 500; color: var(--cms-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-social-latest__meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--cms-dim); }
/* A day of the week needs about 116px for its widest pill, so the calendar needs 820px: Senast publicerade
   moves under the calendar when the two no longer fit side by side, and a narrower calendar puts its days
   one under the other. */
@container social-home (max-width: 1175.98px) {
    .cms-social-home__grid { grid-template-columns: minmax(0, 1fr); }
}
@container social-cal (max-width: 819.98px) {
    .cms-social-cal__week { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .cms-social-cal__day { border-left: 0; border-top: 1px solid var(--cms-rule); }
    .cms-social-cal__day:first-child { border-top: 0; }
    .cms-social-cal__posts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 899.98px) {
    .cms-social-home__filter { justify-self: stretch; }
    .cms-social-home__channel { flex: 1 1 auto; min-width: 0; }
    .cms-social-cal__status { width: auto; flex: 1 1 140px; }
    .cms-social-cal__cell { min-height: 64px; padding: 4px; }
    .cms-social-cal__post--compact .cms-social-cal__time { display: none; }
    .cms-social-cal__list th:nth-child(3), .cms-social-cal__list td:nth-child(3) { display: none; }
}
.cms-social-accounts__notice { margin-bottom: 16px; }
.cms-social-accounts__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.cms-social-accounts__account { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-card); }
.cms-social-accounts__account--warn { border-color: var(--cms-accent-deep); }
.cms-social-accounts__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cms-social-accounts__name { margin: 0; font-weight: 600; color: var(--cms-ink); }
.cms-social-accounts__meta { margin: 0; color: var(--cms-dim); font-size: .9rem; }
.cms-social-accounts__warning { margin: 0; color: var(--cms-accent-deep); }
.cms-social-accounts__unavailable { color: var(--cms-dim); }
/* Testkonton (development only): an account per row with its Svara med fel. */
.cms-social-test__account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; }
.cms-social-test__name { font-weight: 600; min-width: 120px; }
.cms-social-new__destinations { display: flex; flex-direction: column; gap: 2px; }
.cms-social-profiles__list { display: flex; flex-direction: column; gap: 10px; }
.cms-social-profiles__profile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-card); }
.cms-social-profiles__profile--inactive { opacity: .72; }
.cms-social-profiles__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cms-social-profiles__platform { margin: 0; font-weight: 600; color: var(--cms-ink); }
.cms-social-profiles__url { color: var(--cms-ink-2); word-break: break-all; }

/* ── Användare: a row's actions flow and wrap, in the table and in its stacked layout alike ── */
.cms-users__actions-cell.mud-table-cell { white-space: normal; width: auto; }
.cms-users__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 6px; min-width: 0; flex: 1 1 auto; }
.cms-users__actions .mud-button { white-space: nowrap; }

/* ── Användare → Roller: the roles as cards, and the form that makes one ── */
.cms-roles__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) {
    .cms-roles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cms-roles__role { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-card); }
.cms-roles__role--built-in { color: var(--cms-ink-2); }
.cms-roles__role--editing { border-color: var(--cms-ink); }
.cms-roles__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cms-roles__name { margin: 0; font-weight: 600; color: var(--cms-ink); }
.cms-roles__count { margin-left: auto; color: var(--cms-dim); font-size: .9rem; white-space: nowrap; }
.cms-roles__areas { margin: 0; color: var(--cms-ink-2); }
.cms-roles__actions { margin-top: 4px; align-items: center; }
.cms-roles__keep { color: var(--cms-dim); font-size: .9rem; }
.cms-roles__pick-label { margin-top: 8px; }
.cms-roles__areas-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; margin-bottom: 8px; }

/* ── Sociala medier → Nytt inlägg and Kampanj: the design's app bar, three columns, option cards, chips,
   the AI's suggestions, the picture, the channels, the preview, the campaign plan ── */
.cms-social-bar .cms-editorbar__end .mud-button-root { white-space: nowrap; }
.cms-social-mode { display: inline-flex; border: 1px solid var(--cms-ink); border-radius: 4px; overflow: hidden; }
.cms-social-mode__item { padding: 8px 22px; font: 600 12px/1 var(--cms-body); letter-spacing: .12em; text-transform: uppercase; color: var(--cms-ink); text-decoration: none; white-space: nowrap; }
.cms-social-mode__item--on { background: var(--cms-ink); color: var(--cms-cream); }

/* On a phone the bar is two lines: the arrow, the title and the buttons, and under them the mode switch
   as wide as the bar. The toolbar grows for the second line. The save button is its icon alone and
   the campaign's button its first word (.cms-social-bar__long is the rest), so the title keeps room. */
@media (max-width: 799.98px) {
    .cms-appbar--editor .mud-toolbar:has(.cms-social-bar) { height: auto; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
    .cms-social-bar { row-gap: 8px; }
    .cms-social-bar .cms-editorbar__end { grid-row: 1; grid-column: 2; }
    .cms-social-bar .cms-social-mode { grid-row: 2; grid-column: 1 / -1; display: flex; }
    .cms-social-bar .cms-social-mode__item { flex: 1 1 0; text-align: center; padding-inline: 12px; }
    .cms-social-bar__long { display: none; }
    .cms .cms-social-bar__save.mud-button-root { min-width: 0; padding-inline: 10px; }
    .cms-social-bar__save .mud-button-icon-start { margin: 0; }
    /* The page editor puts its bar's icon buttons under ⋮ on a phone; this bar has no ⋮, so Ta bort stays. */
    .cms-social-bar .cms-editorbar__end > .cms-social-bar__delete { display: inline-flex; }
}
.cms-main--wide .cms-content--canvas:has(.cms-social-composer), .cms-main--wide .cms-content--canvas:has(.cms-social-campaign) { background: var(--cms-paper, #faf8f3); overflow: auto; padding: 24px 28px; }
/* The post editor is a tall form on the admin's own ground (screens 10 and 12), not a preview on the beige canvas: it
   scrolls inside the window-tall box, so the ground is behind all of it. */
.cms-main--wide .cms-content--canvas:has(.cms-post-editor) { background: var(--cms-ground, #faf8f3); overflow: auto; padding: 20px 28px 28px; }
@media (max-width: 799.98px) { .cms-main--wide .cms-content--canvas:has(.cms-post-editor) { padding: 12px; } }
.cms-social-composer { display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
/* The composer's columns sit in a fieldset that locks a published post; it adds nothing to the layout. */
.cms-social-composer__lock { min-width: 0; margin: 0; padding: 0; border: 0; }
.cms-social-composer__lock:disabled .cms-social-preview { opacity: 1; }
/* The source column's own lock, for a post partly out: the grid sees the section as before. */
.cms-social-source__lock { display: contents; }
.cms-social-suggest__out-hint { margin: 6px 0 0; font-size: 12px; color: var(--cms-ink-2); }
/* Egen text per plattform: the switch, and under it a tab per channel when it is on. */
.cms-social-suggest__per { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.cms-social-suggest__per .mud-switch { margin: 0; }
.cms-social-channels__live { display: grid; gap: 6px; justify-items: start; }
.cms-social-channels__live .cms-card__text { margin: 0; }
.cms-social-channels__live .cms-table__link { display: inline-flex; align-items: center; gap: 4px; }
.cms-social-campaign { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1199.98px) {
    .cms-social-composer, .cms-social-campaign { grid-template-columns: minmax(0, 1fr); }
    /* The columns stacked, the preview comes last: Publiceringsstatus leaves it for a box of its own at the top, where it
       is seen at once after Publicera, and the rest of the preview keeps its box at the foot. */
    .cms-social-preview:has(> .cms-social-publishing) { display: contents; }
    .cms-social-preview:has(> .cms-social-publishing) > .cms-social-publishing,
    .cms-social-preview:has(> .cms-social-publishing) > .cms-social-preview__body {
        margin: 0;
        padding: 20px 22px;
        border: 1px solid var(--cms-rule);
        border-radius: var(--cms-radius-card);
        background: var(--cms-paper);
    }
    .cms-social-preview:has(> .cms-social-publishing) > .cms-social-publishing { order: -1; }
}
.cms-social-composer__column { min-width: 0; }
.cms-social-source { display: flex; flex-direction: column; gap: 10px; }
.cms-social-source__options { display: flex; flex-direction: column; gap: 8px; }
.cms-social-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--cms-rule); border-radius: 6px; background: transparent; text-align: left; font: inherit; color: var(--cms-ink); cursor: pointer; }
.cms-social-opt--on { border: 2px solid var(--cms-ink); padding: 9px 11px; }
.cms-social-opt__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cms-social-opt__title { font-weight: 600; font-size: 13px; }
.cms-social-opt__sub { font-size: 11px; color: var(--cms-dim); }
.cms-social-source__list { display: flex; flex-direction: column; max-height: 260px; overflow: auto; border: 1px solid var(--cms-rule); border-radius: 6px; }
.cms-social-source__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--cms-rule); background: transparent; text-align: left; font: inherit; color: var(--cms-ink); cursor: pointer; }
.cms-social-source__row:last-child { border-bottom: 0; }
.cms-social-source__row--on { background: #efebe3; }
.cms-social-source__row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cms-social-source__row-title { font-size: 13px; font-weight: 500; }
.cms-social-source__row-meta { font-size: 11px; color: var(--cms-dim); }
.cms-social-source__tone-label { margin-top: 6px; }
.cms-social-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cms-social-chip { height: 30px; padding: 0 14px; border: 1px solid var(--cms-ink); border-radius: 999px; background: transparent; font: 500 12px/1 var(--cms-body); color: var(--cms-ink); cursor: pointer; }
.cms-social-chip--on { background: var(--cms-ink); color: var(--cms-cream); }
.cms-social-source__generate { margin-top: auto; padding-top: 12px; }
.cms-social-middle { display: flex; flex-direction: column; gap: 20px; }
.cms-social-suggest__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cms-social-suggest__from { margin: 2px 0 0; color: var(--cms-ink-2); }
.cms-social-suggest__pick { display: flex; align-items: center; gap: 2px; }
.cms-social-seg-group { display: inline-flex; border: 1px solid var(--cms-rule); border-radius: 4px; overflow: hidden; }
.cms-social-seg { display: inline-flex; align-items: center; gap: 6px; min-width: 40px; padding: 7px 12px; border: 0; background: transparent; font: 600 12px/1 var(--cms-body); letter-spacing: .06em; text-transform: uppercase; color: var(--cms-ink); cursor: pointer; }
.cms-social-seg-group .cms-social-seg + .cms-social-seg { border-left: 1px solid var(--cms-rule); }
.cms-social-seg--on { background: var(--cms-ink); color: var(--cms-cream); }
.cms-social-seg:disabled { color: var(--cms-dim); cursor: default; }
.cms-social-suggest__pick .cms-social-seg { border: 1px solid var(--cms-rule); border-radius: 4px; }
.cms-social-suggest__tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 14px; }
.cms-social-suggest__improve { display: flex; align-items: center; gap: 6px; }
.cms-social-suggest__count { font-size: 12px; color: var(--cms-dim); }
.cms-social-suggest__count--over { color: var(--cms-accent-deep); font-weight: 600; }
.cms-social-image { border-top: 1px solid var(--cms-rule); padding-top: 12px; }
.cms-social-image__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.cms-social-image__head .cms-label { margin: 0; flex: 1 1 auto; }
.cms-social-image__engine { font-size: 12px; color: var(--cms-dim); border: 1px solid var(--cms-rule); border-radius: 4px; padding: 6px 10px; }
.cms-social-image__thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.cms-social-image__thumb { width: 72px; height: 72px; padding: 0; border: 1px solid var(--cms-rule); border-radius: 4px; background: #f4f1ea; overflow: hidden; cursor: pointer; }
.cms-social-image__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Doubled so it outweighs MudBlazor's button:focus { outline: none }: the picked image keeps its ring after the click. */
.cms-social-image__thumb.cms-social-image__thumb--on { outline: 2px solid var(--cms-ink); outline-offset: 2px; }
.cms-social-image__recent-label { margin: 16px 0 8px; }
/* A picture that opens larger (ZoomableImage): the icon in its corner says it can. */
.cms-zoomable { position: relative; display: block; min-width: 0; cursor: zoom-in; }
.cms-zoomable:focus-visible { outline: 2px solid var(--cms-ink); outline-offset: 2px; }
.cms-zoomable__icon { position: absolute; right: 8px; bottom: 8px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(22, 22, 22, .72); color: #fff; pointer-events: none; }
.cms-zoomable__icon .mud-icon-root { width: 18px; height: 18px; }
/* The picture larger (ImageViewerDialog): as large as the window allows, never cut; one of several gets ‹ › at its sides. */
.cms-image-viewer .mud-dialog-content { padding: 12px; }
.cms-image-viewer__stage { position: relative; outline: none; }
.cms-image-viewer__image { display: block; max-width: 100%; max-height: calc(100vh - 160px); margin: 0 auto; object-fit: contain; cursor: zoom-out; }
.cms-image-viewer__previous, .cms-image-viewer__next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; background: rgba(22, 22, 22, .6); color: #fff; }
.cms-image-viewer__previous:hover, .cms-image-viewer__next:hover { background: rgba(22, 22, 22, .8); }
.cms-image-viewer__previous.mud-button-root:disabled, .cms-image-viewer__next.mud-button-root:disabled { visibility: hidden; }
.cms-image-viewer__previous { left: 8px; }
.cms-image-viewer__next { right: 8px; }
.cms-image-viewer__count { margin-right: auto; padding-left: 8px; font-size: 13px; color: var(--cms-dim); }
/* Redigera med AI under the chosen picture. */
/* Redigera med AI's dialog: the original and the result side by side, on a phone as well. */
.cms-ai-edit__images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.cms-ai-edit__images figure { display: grid; gap: 6px; margin: 0; min-width: 0; }
.cms-ai-edit__images img, .cms-ai-edit__placeholder { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; background: #f4f1ea; }
.cms-ai-edit__placeholder { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-size: 12px; color: var(--cms-dim); text-align: center; }
.cms-ai-edit__images figcaption { font: 500 11px/1 var(--cms-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cms-dim); }
.cms-ai-edit__error { margin-bottom: 12px; }
.cms-ai-edit__settings { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
/* MudSelect wraps the field in a div of its own, which would take the row: the wrapper is what is given its width. */
.cms-ai-edit__settings > .mud-select { flex: 0 0 160px; width: 160px; }
.cms-ai-edit__quality.mud-input-control, .cms-ai-edit__style.mud-input-control, .cms-ai-edit__format.mud-input-control { margin: 0; }
/* Förval: the whole row, its description under it, above the words it may need. */
.cms-ai-edit__presets { margin-bottom: 12px; }
@media (max-width: 599.98px) {
    /* Side by side still, smaller: the two compare at a glance and the field to write in stays in view. */
    .cms-ai-edit__images { gap: 10px; margin-bottom: 12px; }
}
.cms-social-image__media { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Ta bild is a phone's camera: shown on a phone's screen, next to Välj i mediebiblioteket. */
.cms-social-image__camera { display: none; gap: 6px; height: 32px; }
.cms-social-image__camera .mud-icon-root { width: 16px; height: 16px; }
@media (max-width: 799.98px) {
    .cms-social-image__camera { display: inline-flex; }
}
/* Valda bilder: the post's pictures in order, numbered, each with its tools under it. */
.cms-social-image__chosen-label { margin: 14px 0 6px; }
.cms-social-image__chosen-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cms-social-image__chosen-item { position: relative; min-width: 0; }
.cms-social-image__chosen { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; border: 1px solid var(--cms-rule); }
.cms-social-image__chosen-number { position: absolute; top: 6px; left: 6px; z-index: 1; pointer-events: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--cms-ink); color: var(--cms-cream); font-size: 12px; line-height: 22px; text-align: center; }
.cms-social-image__chosen-tools { display: flex; justify-content: space-between; margin-top: 2px; }
.cms-social-image__full { margin: 8px 0 0; font-size: 12px; color: var(--cms-dim); }
.cms-social-image__settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.cms-social-image__result { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.cms-social-image__ai-thumb { position: relative; width: 64px; height: 64px; flex: none; border-radius: 4px; overflow: hidden; border: 1px solid var(--cms-rule); }
.cms-social-image__ai-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cms-social-image__ai-badge { position: absolute; top: 4px; left: 4px; padding: 2px 5px; border-radius: 3px; background: var(--cms-ink); color: var(--cms-cream); font: 700 9px/1 var(--cms-body); letter-spacing: .08em; }
.cms-social-image__ai-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; font-size: 13px; }
.cms-social-image__quota { font-size: 11px; color: var(--cms-dim); }
.cms-social-channels__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
@media (max-width: 799.98px) {
    .cms-social-channels__grid, .cms-social-image__settings { grid-template-columns: minmax(0, 1fr); }
}
.cms-social-channels__list { display: flex; flex-wrap: wrap; gap: 8px; }
.cms-social-channel { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--cms-rule); border-radius: 4px; background: transparent; font: 500 13px/1 var(--cms-body); color: var(--cms-dim); cursor: pointer; }
.cms-social-channel--on { border-color: var(--cms-ink); color: var(--cms-ink); }
.cms-social-channel:disabled { opacity: .5; cursor: default; }
.cms-social-channel__badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 3px; background: #e9e5dc; color: var(--cms-ink-2); font: 700 10px/1 var(--cms-body); letter-spacing: .04em; }
.cms-social-channel--on .cms-social-channel__badge { background: var(--cms-ink); color: var(--cms-cream); }
.cms-social-channels__when { margin-bottom: 10px; }
.cms-social-preview__canvas { background: #f4f1ea; border-radius: 4px; padding: 14px; }
.cms-social-post { background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 0 rgba(22, 22, 22, .08); }
.cms-social-post__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.cms-social-post__avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cms-ink); color: var(--cms-cream); font: 600 12px/1 var(--cms-body); }
.cms-social-post__who { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.cms-social-post__name { font-size: 13px; font-weight: 600; }
.cms-social-post__meta { font-size: 11px; color: var(--cms-dim); }
.cms-social-post__text { margin: 0; padding: 0 12px 10px; font-size: 13px; line-height: 1.5; white-space: pre-line; }
.cms-social-post__image { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #e4e0d8; }
.cms-social-post--facebook .cms-social-post__image, .cms-social-post--linkedin .cms-social-post__image { aspect-ratio: 1.91 / 1; }
.cms-social-post__image--missing { display: flex; align-items: center; justify-content: center; color: var(--cms-dim); font-size: 12px; }
/* The preview's pictures: a carousel of several, as Instagram shows one — 2/3 in the corner, ‹ › at the sides, a dot per picture. */
.cms-social-post__media { position: relative; }
.cms-social-post__count { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(22, 22, 22, .72); color: #fff; font-size: 12px; pointer-events: none; }
.cms-social-post__dots { display: flex; justify-content: center; gap: 4px; padding: 8px 0 0; }
.cms-social-post__dot { width: 6px; height: 6px; border-radius: 50%; background: #cfc9bd; }
.cms-social-post__dot--on { background: var(--cms-ink); }
.cms-social-step { position: absolute; top: 50%; z-index: 2; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--cms-ink); box-shadow: 0 1px 3px rgba(22, 22, 22, .25); cursor: pointer; }
.cms-social-step:hover { background: #fff; }
.cms-social-step:focus-visible { outline: 2px solid var(--cms-ink); outline-offset: 2px; }
.cms-social-step--prev { left: 8px; }
.cms-social-step--next { right: 8px; }
.cms-social-step .mud-icon-root { width: 20px; height: 20px; }
/* Kanaler: Inlägg and Story under a chosen Facebook or Instagram tile. */
.cms-social-channel-item { display: grid; gap: 2px; align-content: start; }
.cms-social-channel__places { display: flex; flex-wrap: wrap; gap: 0 6px; padding-left: 2px; }
.cms-social-suggest__story-hint { margin: 6px 0 0; font-size: 12px; color: var(--cms-dim); }
.cms-social-post__notice { margin: 8px 12px 0; font-size: 12px; color: var(--cms-ink-2); }
/* The story preview: a standing 9:16 frame, the picture shown whole on dark, a segment per picture (‹ › step, as .cms-social-step). */
.cms-social-story { position: relative; width: 100%; max-width: 270px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #161616; display: grid; place-items: center; }
.cms-social-story__segments { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 3px; z-index: 1; }
.cms-social-story__segment { flex: 1; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .35); }
.cms-social-story__segment--on { background: #fff; }
.cms-social-story__head { position: absolute; top: 18px; left: 10px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 12px; z-index: 1; }
.cms-social-story__image { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.cms-social-story__missing { margin: 0; color: rgba(255, 255, 255, .7); font-size: 12px; }
/* Publiceringsstatus: a row per recipient, out with its link or failed with why and what to do. */
.cms-social-publishing { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--cms-rule); }
.cms-social-publishing__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cms-social-publishing__title { margin: 0; font: 600 17px/1.3 var(--cms-body); }
.cms-social-publishing__title:focus { outline: none; }
.cms-social-publishing__when { font-size: 12px; color: var(--cms-dim); }
.cms-social-publishing__rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cms-social-publishing__row { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: start; gap: 8px; font-size: 13px; }
/* How a published post is doing: likes, comments and shares as icons with their numbers. */
.cms-social-publishing__engagement, .cms-social-latest__engagement { display: inline-flex; align-items: center; gap: 3px; color: var(--cms-ink-2); font-size: 12px; white-space: nowrap; }
.cms-social-publishing__engagement .mud-icon-root, .cms-social-latest__engagement .mud-icon-root { font-size: 14px; }
.cms-social-publishing__engagement > span + .mud-icon-root, .cms-social-latest__engagement > span + .mud-icon-root { margin-left: 6px; }
.cms-social-publishing__row--failed { padding: 10px; border-radius: 6px; background: rgba(162, 59, 43, .08); color: var(--cms-danger); }
.cms-social-publishing__problem { grid-column: 3 / -1; display: grid; gap: 4px; }
.cms-social-publishing__headline { margin: 0; font-weight: 600; }
.cms-social-publishing__error, .cms-social-publishing__frames { margin: 0; font-size: 12px; }
.cms-social-publishing__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cms-social-publishing__view { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cms-ink); }
.cms-social-publishing__text--muted { color: var(--cms-dim); }
.cms-social-publishing__foot { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 12px; color: var(--cms-dim); }
.cms-social-post__actions { display: flex; gap: 14px; padding: 10px 12px 6px; color: var(--cms-ink-2); }
.cms-social-post__caption { margin: 0; padding: 0 12px 12px; font-size: 13px; line-height: 1.5; }
.cms-social-preview__foot { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 12px; color: var(--cms-dim); }
.cms-social-plan { display: flex; flex-direction: column; gap: 16px; }
.cms-social-plan__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cms-social-plan__title { margin: 2px 0 0; font: 500 26px/1.15 var(--cms-display, serif); color: var(--cms-ink); }
.cms-social-campaign__dates { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.cms-social-campaign__count { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--cms-rule); border-radius: 4px; padding: 2px 6px; margin-bottom: 6px; }
.cms-social-campaign__count-value { min-width: 48px; text-align: center; font: 500 22px/1 var(--cms-display, serif); }
.cms-social-timeline { padding: 26px 24px 34px; }
.cms-social-timeline__line { position: relative; height: 2px; background: var(--cms-ink); margin: 0 8px; }
.cms-social-timeline__dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--cms-ink); transform: translate(-50%, -50%); }
.cms-social-timeline__dot--end { width: 16px; height: 16px; background: #fff; border: 2px solid var(--cms-ink); }
.cms-social-timeline__label { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; color: var(--cms-ink-2); }
.cms-social-timeline__dot--end .cms-social-timeline__label { font-weight: 600; color: var(--cms-ink); }
.cms-social-timeline__today { position: absolute; top: -12px; height: 26px; border-left: 2px solid var(--cms-ink); transform: translateX(-50%); }
.cms-social-timeline__today span { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; white-space: nowrap; }
.cms-social-plan__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.cms-social-plan__card { display: flex; flex-direction: column; gap: 10px; }
.cms-social-plan__card--suggested { border: 1px dashed var(--cms-ink); }
.cms-social-plan__when { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cms-ink-2); }
.cms-social-plan__when .cms-social-status { margin-left: auto; }
.cms-social-status { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--cms-ink); font: 600 10px/1 var(--cms-body); letter-spacing: .08em; text-transform: uppercase; color: var(--cms-ink); }
.cms-social-status--published, .cms-social-status--scheduled { background: var(--cms-ink); color: var(--cms-cream); }
.cms-social-status--approved { background: #e9e5dc; border-color: #e9e5dc; }
.cms-social-plan__image { display: block; width: 100%; height: 118px; object-fit: cover; border-radius: 4px; background: #e4e0d8; }
.cms-social-plan__image--missing { display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; font-size: 11px; color: var(--cms-dim); }
/* An idea without its picture yet, with Skapa bild under it; the picture while it is made, or waiting its turn. */
.cms-social-plan__image--missing { flex-direction: column; gap: 8px; }
.cms-social-plan__picturing, .cms-social-plan__waiting { flex-direction: row; font-size: 12px; }
.cms-social-plan__picturing { color: var(--cms-ink); }
.cms-social-plan__text { margin: 0; font-size: 13px; line-height: 1.55; flex: 1 1 auto; }
.cms-social-plan__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--cms-rule); padding-top: 8px; }
.cms-social-plan__badges { display: flex; gap: 4px; }
.cms-social-plan__actions { display: flex; gap: 2px; }
.cms-social-plan__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cms-social-plan__summary-text { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* ─── Nyheter & evenemang (CmsPostPage, CmsPostListPage): structure only; the site's CSS wins ─── */
:where(.cms-post) { padding-block: var(--cms-std-space, 4rem); overflow-wrap: break-word; }
:where(.cms-post__inner) { max-width: var(--cms-std-text-width, 46rem); margin-inline: auto; padding-inline: var(--cms-std-pad-x, 1.5rem); }
:where(.cms-post__back) { display: inline-block; margin-bottom: 1.5rem; }
:where(.cms-post__passed) { margin: 0 0 1rem; font-weight: 600; }
:where(.cms-post__meta) { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 .75rem; opacity: .75; }
:where(.cms-post__title) { margin: 0 0 .75rem; }
:where(.cms-post__lead) { font-size: 1.15em; margin: 0 0 1.5rem; }
:where(.cms-post__image) { margin: 0 0 1.5rem; }
:where(.cms-post__image img) { display: block; max-width: 100%; height: auto; }
:where(.cms-post__caption) { margin-top: .5rem; font-size: .9em; opacity: .75; }
:where(.cms-post__action) { margin: 2rem 0 0; }
:where(.cms-post__facts) { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid currentColor; }
:where(.cms-post__facts-list) { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
:where(.cms-post__facts-list dd) { margin: 0; }
:where(.cms-posts) { padding-block: var(--cms-std-space, 4rem); }
:where(.cms-posts__inner) { max-width: var(--cms-std-max-width, 72rem); margin-inline: auto; padding-inline: var(--cms-std-pad-x, 1.5rem); }
:where(.cms-posts__grid) { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cms-std-gap, 2rem); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
:where(.cms-posts__card) { display: block; color: inherit; text-decoration: none; }
:where(.cms-posts__media) { position: relative; margin: 0 0 .75rem; }
:where(.cms-posts__media img) { display: block; width: 100%; height: auto; }
:where(.cms-posts__badge) { position: absolute; top: .75rem; left: .75rem; display: grid; text-align: center; padding: .35rem .6rem; background: #fff; color: #161616; line-height: 1.1; }
:where(.cms-posts__badge small) { font-size: .65em; text-transform: uppercase; letter-spacing: .1em; }
:where(.cms-posts__title) { margin: 0 0 .25rem; }
:where(.cms-posts__meta) { margin: 0 0 .25rem; opacity: .75; font-size: .9em; }
:where(.cms-posts__empty) { opacity: .75; }

/* ─── Standard blocks (Text och bild, Text, Bild, Bildgalleri, Öppettider) ──── */
/* On public pages, layout only: the site's own CSS gives them their fonts, colours and buttons. Every
   selector sits in :where(), so any rule a site writes wins; the --cms-std-* variables let a site match its
   own width and spacing in one line each. Breakpoints are fixed: variables cannot be used in media queries. */
/* A long word or address wraps inside its block instead of widening the page. */
:where(.cms-std) { padding-block: var(--cms-std-space, 4rem); overflow-wrap: break-word; }
:where(.cms-std__inner) {
    box-sizing: border-box;
    max-width: var(--cms-std-max-width, 72rem);
    margin-inline: auto;
    margin-block: 0;
    padding-inline: var(--cms-std-pad-x, 1.5rem);
}
:where(.cms-text .cms-std__inner) { max-width: var(--cms-std-text-width, 46rem); }
:where(.cms-std img) { display: block; max-width: 100%; height: auto; }
:where(.cms-image__figure) { margin: 0; }

/* Text och bild: one column, the image first; side by side from 768px, Höger moving the image right. Columns
   and items may shrink below their longest word (minmax(0, …), min-width: 0), so the columns stay equal. */
:where(.cms-textimage__grid) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cms-std-gap, 2rem); align-items: center; }
:where(.cms-textimage__grid > *) { min-width: 0; }
@media (min-width: 768px) {
    :where(.cms-textimage__grid) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    :where(.cms-textimage--image-right .cms-textimage__media) { order: 2; }
}

/* Bildgalleri: one column on a small phone, two from 480px, the chosen number from 900px. */
:where(.cms-gallery__grid) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cms-std-gap, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
:where(.cms-gallery__item) { min-width: 0; }
:where(.cms-gallery__figure) { margin: 0; }
:where(.cms-gallery__link) { display: block; cursor: zoom-in; }
@media (min-width: 480px) {
    :where(.cms-gallery__grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    :where(.cms-gallery--cols-3 .cms-gallery__grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    :where(.cms-gallery--cols-4 .cms-gallery__grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Öppettider: the groups side by side when there is room (14rem each), each a plain list; the site's CSS gives them their look. */
:where(.cms-hours__groups) { display: flex; flex-wrap: wrap; gap: var(--cms-std-gap, 2rem); }
:where(.cms-hours__group) { flex: 1 1 14rem; min-width: 0; }
:where(.cms-hours__name) { margin-block: 0 0.5rem; }
:where(.cms-hours__status) { margin-block: 0 0.75rem; }
:where(.cms-hours__week, .cms-hours__exceptions) { margin: 0; padding: 0; list-style: none; }
:where(.cms-hours__exceptions-heading) { margin-block: 1rem 0.25rem; }

/* Nyheter & evenemang: the heading and the Visa alla links on one line, cards in a grid (one column on a small phone,
   two from 480px, the chosen number from 900px) or a list with the media beside the text; a badge over the media. */
:where(.cms-posts-block__head) { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--cms-std-gap, 2rem); }
:where(.cms-posts-block__items) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cms-std-gap, 2rem); margin: 0; padding: 0; list-style: none; }
:where(.cms-posts-block__item) { min-width: 0; }
:where(.cms-post-card) { display: block; }
:where(.cms-post-card__media) { position: relative; margin: 0; }
:where(.cms-post-card__badge) { position: absolute; top: 0; left: 0; display: grid; justify-items: center; }
:where(.cms-posts-block__items--list .cms-post-card) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cms-std-gap, 2rem); align-items: start; }
:where(.cms-posts-block__more) { display: inline-block; margin-top: var(--cms-std-gap, 2rem); }
/* Båda in two parts: air between the parts and under each part's heading. */
:where(.cms-posts-block__part) + :where(.cms-posts-block__part) { margin-top: var(--cms-std-gap, 2rem); }
:where(.cms-posts-block__part-heading) { margin: 0 0 1rem; }

/* Vanliga frågor (cms.faq): the menu of categories beside the questions from 900px (as wide as
   --cms-faq-menu-width) once cms-faq.js has marked the page, the search above them, each question a <details>; the
   site gives them their look, its summary's marker included. A site on MudBlazor's stylesheet re-declares the menu
   button's and the search label's flex: its element rules for button and label beat these. Without cms-faq.js the menu and the search cannot work, so they are not shown, and a
   question or note the script has hidden stays hidden: these two rules are !important, the one way a zero-specificity
   rule still beats a site's display. */
:where(.cms-faq__layout) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cms-std-gap, 2rem); align-items: start; }
:where(.cms-faq__filters) { display: flex; flex-direction: column; gap: .25rem; }
:where(.cms-faq__filter) { display: flex; justify-content: space-between; align-items: center; gap: .75rem; width: 100%; text-align: left; cursor: pointer; }
:where(.cms-faq__main) { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
:where(.cms-faq__search) { display: flex; align-items: center; gap: .75rem; }
:where(.cms-faq__search-input) { flex: 1; min-width: 0; }
:where(.cms-faq__items) { display: flex; flex-direction: column; gap: .75rem; }
:where(.cms-faq__question) { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
:where(.cms-faq__text) { display: flex; flex-direction: column; min-width: 0; }
:where(.cms-faq__empty, .cms-faq__note) { margin: 0; }
@media (min-width: 900px) {
    :where(html.cms-faq-on .cms-faq__layout--menu) { grid-template-columns: minmax(0, var(--cms-faq-menu-width, 16rem)) minmax(0, 1fr); }
    :where(html.cms-faq-on .cms-faq__layout--menu .cms-faq__filters) { position: sticky; top: 1rem; }
}
:where(html:not(.cms-faq-on) .cms-faq__filters, html:not(.cms-faq-on) .cms-faq__search) { display: none !important; }
:where(.cms-faq [hidden]) { display: none !important; }
/* Undersidor (cms.subpages): a page's sub-pages as cards, a grid (one column, two from 480px, the chosen number from
   900px) or a list with the picture beside the text when there is one. */
:where(.cms-subpages__items) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cms-std-gap, 2rem); margin: 0; padding: 0; list-style: none; }
:where(.cms-subpages__item) { min-width: 0; }
:where(.cms-subpage-card) { display: block; }
:where(.cms-subpage-card__media) { margin: 0; }
:where(.cms-subpages__items--list .cms-subpage-card:has(.cms-subpage-card__media)) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cms-std-gap, 2rem); align-items: start; }
@media (min-width: 480px) {
    :where(.cms-subpages__items--grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    :where(.cms-subpages__items--grid.cms-subpages__items--cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    :where(.cms-subpages__items--grid.cms-subpages__items--cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Brödsmulor (cms.breadcrumbs): one line at the page's width, the steps parted by the markup's ›. */
:where(.cms-breadcrumbs) { max-width: var(--cms-std-max-width, 72rem); margin-inline: auto; padding: 0.75rem var(--cms-std-pad-x, 1.5rem) 0; }
:where(.cms-breadcrumbs__list) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
:where(.cms-breadcrumbs__item) { display: inline-flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
@media (min-width: 480px) {
    :where(.cms-posts-block__items--grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    :where(.cms-posts-block__items--grid.cms-posts-block__items--cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    :where(.cms-posts-block__items--grid.cms-posts-block__items--cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─── Gallery lightbox (cms-lightbox.js) ───────────────────────────── */
/* The standard Bildgalleri's large view on public pages. It keeps a neutral look of its own, not the site's:
   a dark backdrop and light controls. Unlike the blocks' layout it is the CMS's own control, so its rules are
   plain classes, not : a framework's element reset (MudBlazor's button { … }) cannot beat them, and a
   site's own class rule, loaded after cms.css, still can. */
html:has(.cms-lightbox[open]) { overflow: hidden; }
.cms-lightbox {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    padding: 64px 72px 24px;
    border: 0;
    background: transparent;
    color: #f5f2eb;
}
.cms-lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.cms-lightbox::backdrop { background: rgba(12, 12, 12, .92); }
.cms-lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; margin: 0; }
.cms-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 170px);
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
}
.cms-lightbox__caption { max-width: 60ch; text-align: center; font-size: 15px; line-height: 1.45; }
.cms-lightbox__counter { margin: 0; font-size: 13px; letter-spacing: .04em; opacity: .75; }
.cms-lightbox__button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: inherit;
    cursor: pointer;
}
.cms-lightbox__button:hover { background: rgba(255, 255, 255, .24); }
.cms-lightbox__button:focus-visible { outline: 2px solid #f5f2eb; outline-offset: 2px; }
.cms-lightbox__button[hidden] { display: none; }
.cms-lightbox__previous { left: 14px; top: 50%; transform: translateY(-50%); }
.cms-lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); }
.cms-lightbox__close { right: 14px; top: 14px; }
/* On a phone the arrows move under the picture, where a thumb reaches them, and the picture gets the width. */
@media (max-width: 600px) {
    .cms-lightbox { padding: 64px 12px 76px; }
    .cms-lightbox__previous, .cms-lightbox__next { top: auto; bottom: 16px; transform: none; }
    .cms-lightbox__previous { left: calc(50% - 56px); }
    .cms-lightbox__next { right: calc(50% - 56px); }
}