/* ===== Base ===== */
/* Admin screens for the parents: large type, high contrast, big buttons, one task per screen.
   No inline styles anywhere (CSP), so every look lives here. */
:root {
  /* ---- the palette of the classic admin that the modern one keeps ---- */
  --primary-ink: #ffffff;
  --danger-ink: #ffffff;
  --focus-ring: #ffbf47;
  --top-ink: #ffffff;
  --base-size: 112.5%;

  /* ---- the modern admin: palette, scale ---- */
  --bg: var(--dh-paper);
  --card: var(--dh-surface);
  --ink: var(--dh-ink);
  --muted: var(--dh-muted);
  --line: var(--dh-line);
  --primary: var(--dh-navy);
  --primary-hover: var(--dh-navy-deep);
  --danger: #a3182f;
  --danger-hover: #7f1124;
  --ok-bg: #eef5f0;
  --ok-ink: #14532f;
  --ok-line: #8fb9a0;
  --info-bg: var(--dh-sky);
  --info-ink: #00264d;
  --info-line: #9db4cc;
  --error-bg: var(--dh-tint);
  --error-ink: #7d1228;
  --error-line: #d99aa6;
  --warn-bg: #fbf3d6;
  --warn-ink: #5a3d00;
  --top-bg: var(--dh-surface);
  --focus: var(--dh-navy);
  /* THE SCALE: one place to tune the whole admin (the root is 18 px, so 1rem = 18 px; Hem keeps its own sizes in dev-hem-modern.css) */
  --touch: 2.5rem;                   /* button and field height with a mouse: 40 px (44 px with a finger, see the media query below) */
  --t-body: 0.889rem;                /* 16 px, line height 1.5 */
  --t-title: clamp(1.56rem, 1.4rem + 0.35vw, 1.67rem);   /* 28-30 px, 700 */
  --t-section: 1.08rem;              /* 19.5 px, 600 */
  --t-label: 0.875rem;               /* 15.75 px, 600 */
  --t-meta: 0.778rem;                /* 14 px, muted */
  --t-hint: 0.833rem;                /* 15 px, help text under a field */
  --t-button: 0.875rem;              /* 15.75 px, 600 */
  --t-menu: 0.833rem;                /* 15 px, 500 */
  --t-field: max(16px, 0.889rem);    /* never below 16 px: a phone zooms into a smaller field */
  --save-row-h: 3.5rem;              /* the save row, about 56 px */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2.5rem;
  --s-6: 4rem;
  --w-form: 42rem;
  --w-list: 60rem;
  --am-field: #8b9099;               /* a field's edge: 3.2:1 on white */
  --am-hover: #eeebe2;               /* a text button under the pointer */
  --am-rhythm: var(--s-4);

  /* ---- Hem tokens ---- */
  --dh-paper: #f7f6f1;
  --dh-surface: #ffffff;
  --dh-ink: #1d2330;
  --dh-muted: #4d5562;
  --dh-navy: #003366;
  --dh-navy-deep: #00264d;
  --dh-red: #c41f40;          /* the clinic red #d62647, a touch deeper so red text passes AA on paper */
  --dh-red-bright: #d62647;
  --dh-tint: #fbe9ec;
  --dh-sky: #e8eef5;
  --dh-line: #d9d4c7;
  --dh-open: #1b6e45;
  --dh-radius: 6px;  /* blocks and cards */
  --dh-tab: 4px;     /* buttons, links, header selection: a slight corner, not a pill (Regian) */
  --dh-wave: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 136 18'%3E%3Cpath d='M3 11 C 24 2, 44 2, 68 9 S 112 17, 133 6' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");

  /* ---- one corner scale: 4 px for what is pressed or typed into, 6 px for boxes that hold things ---- */
  --r-control: 4px; --r-box: 6px;
}


*, *::before, *::after { box-sizing: border-box; }

/* The scrollbar keeps its room on short pages too, so the centred header and page do not jump sideways between pages */
html { font-size: var(--base-size); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}

a { color: #0a4f7a; text-underline-offset: 0.15em; }
a:hover { color: var(--primary-hover); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-ring); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: 0.5rem; top: -4rem; z-index: 20; background: var(--card); padding: 0.75rem 1rem; border: 2px solid var(--ink); }
.skip-link:focus { top: 0.5rem; }

/* header and menu */
.top { background: var(--top-bg); color: var(--top-ink); }
.top-inner { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; min-height: var(--touch); font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.brand { gap: 0.4em; }
.menu-small { display: none; }
.menu-more { display: none; }
.when-open { display: none; }
.menu-more[open] .when-open { display: inline; }
.menu-more[open] .when-closed { display: none; }
.who { display: flex; align-items: center; }
.top :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px #000; }

.menu { border-top: 1px solid rgb(255 255 255 / 0.25); }
.menu ul { list-style: none; margin: 0 auto; max-width: 72rem; display: flex; }
.menu a { display: block; min-height: var(--touch); text-decoration: none; }
.menu a:hover { background: rgb(255 255 255 / 0.15); color: var(--top-ink); }

/* A laptop: the ten menu items stand in one row (1280 px wide) */
@media (min-width: 56rem) {
  .menu ul { max-width: 80rem; padding: 0 0.25rem; }
}
/* A low window (a small laptop, a zoomed page): the header gives the text its room */
@media (max-height: 800px) and (min-width: 56rem) {
  body main { padding-top: 1rem; }
  .brand { min-height: 2.75rem; }
  .menu a { min-height: 2.75rem; padding: 0.5rem 0.6rem; }
}

main { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
main:focus { outline: none; }
main, .ql-editor, .preview-pane { overflow-wrap: anywhere; }
.ql-editor img { max-width: 100%; height: auto; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 2rem 0 0.5rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
.hint { color: var(--muted); font-size: 1rem; margin: 0.25rem 0 0; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); padding: 0.55rem 1.25rem;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  color: var(--ink); background: var(--card); border: 2px solid var(--ink); border-radius: 0.5rem;
}
.btn:hover { background: #e9edf1; color: var(--ink); }
.btn-primary { color: var(--primary-ink); background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { color: var(--primary-ink); background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger:hover { color: var(--danger-ink); background: var(--danger-hover); border-color: var(--danger-hover); }
.btn-quiet { color: var(--top-ink); background: transparent; border-color: var(--top-ink); }
.btn-quiet:hover { color: var(--top-ink); background: rgb(255 255 255 / 0.18); }
/* on a question page "Nej" has the same size of text as "Ja" (18 px against 25 px looked like a mistake) */
/* A button that cannot be pressed looks it: flat grey with a dashed edge, whatever its kind (the click-through found them identical to live ones). Text stays readable (about 4.6:1). */
.btn:disabled, .btn[disabled], .btn-primary:disabled, .btn-danger:disabled, .btn-quiet:disabled,
.btn:disabled:hover, .btn-primary:disabled:hover, .btn-danger:disabled:hover { color: #55606c; background: #eceff1; border: 2px dashed #9aa5b1; cursor: not-allowed; box-shadow: none; opacity: 1; }
.actions { display: flex; flex-wrap: wrap; }
/* The button of a short form (Logga in, Bekräfta, Aktivera) stays in view at the bottom of the window while the fields above are scrolled (a low window, a message above the
   form, a phone with large text): the button is never below the window. On Logga in the Cloudflare box (65 px) stands in the bar above the button. When the page fits, the
   bar is where it always was (the negative margin gives back the padding). */
.signin-bar { position: sticky; bottom: 0; z-index: 5; margin-bottom: -0.75rem; padding-bottom: 0.75rem; background: var(--dh-paper); }
/* A field that takes focus (a click, Tab) is scrolled into view above the bar, never under it: the room is the bar's height, counted on the field itself. Not as scroll-padding on html: that made a touch screen drop what was typed into a field (R, 390x664). */
form:has(.signin-bar) .field input { scroll-margin-bottom: 6rem; }
form:has(.signin-bar .cf-turnstile) .field input { scroll-margin-bottom: calc(65px + 6rem); }
/* A window under 26rem high (a phone on its side) has no room for a bar of 160 px: it would cover a field the browser sees as in view and so does not scroll. There the bar is in the page. */
@media (max-height: 26rem) {
  .signin-bar { position: static; margin-bottom: 0; }
}
/* Save/preview/publish sit below the form. Only on a tall window (900px and up) do they also stay in view at the bottom while a long form scrolls past:
   on a phone, or with the keyboard open, a bar over the screen would cover the line being typed on. */
.action-bar { position: relative; margin: 1.25rem -1rem 0; padding: 0.75rem 1rem; background: #fff; border-top: 1px solid #d5dae1; }
@media (min-width: 1024px), (min-height: 900px), (hover: hover) and (pointer: fine) and (min-width: 700px) { /* a wide screen has no on-screen keyboard to fight; a tall one has room */
  .action-bar { position: sticky; bottom: 0; z-index: 25; }   /* above the text toolbar (20): the toolbar never covers the save buttons, wherever the page is scrolled */
  html { scroll-padding-bottom: calc(var(--savebar-h, 6rem) + 1rem); } /* what is scrolled into view (the caret, the picture chooser) stops above the bar; editor.js sets --savebar-h */
}
html { scroll-padding-top: 5rem; } /* ... and clear of the sticky toolbar */
/* The notice has a line of its own that is always there, so the buttons never move when it appears or goes away */
/* A desktop (mouse, no on-screen keyboard): the bar is ONE low row, the notice at its left in the room the buttons leave */
@media (hover: hover) and (pointer: fine) and (min-width: 40rem) {
  .action-bar .btn { min-height: 2.75rem; padding: 0.2rem 1rem; }   
  /* the notice is the first row of the bar and always has its room (hidden = invisible, not gone), so it never covers the last lines of the text and the buttons never move */
}
.action-bar .unsaved-notice { max-width: none; background: none; }
.action-bar .unsaved-notice[hidden] { display: block; visibility: hidden; }
/* While a picture is uploading the save buttons are held and this line stands where the notice stands */
.action-bar .save-hold { flex: 0 0 100%; max-width: none; min-height: 1.4rem; margin: 0; padding: 0; line-height: 1.3; font-weight: 700; color: var(--warn-ink); }
.action-bar .save-hold[hidden] { display: none; }
.action-bar.is-holding .unsaved-notice, .action-bar.is-holding .unsaved-notice[hidden] { display: none; }
.action-bar .btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* The short wait after a page is shown (arm.js): the button looks inactive, then wakes up by itself */
.btn.is-arming, .is-arming .btn { opacity: 0.55; cursor: progress; }
.action-bar .btn:hover { background: rgb(0 0 0 / 0.06); color: var(--ink); }
.action-bar .btn-primary:hover { color: var(--primary-ink); background: var(--primary-hover); border-color: var(--primary-hover); }
.action-bar .short-label { display: none; }
.discard-row { margin: 0.5rem 0 0; }
/* Phone: the three editor buttons share one row */
@media (max-width: 40rem) {
  .actions.editor-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; padding: 0.5rem 0.5rem; }
  .editor-bar .save-hold { grid-column: 1 / -1; min-height: 2.6rem; line-height: 1.25; }
  /* two lines kept free: "Utkastet sparades 14:32. Det syns inte ..." wraps, and the buttons below must not move when it comes */
  .editor-bar .btn { min-width: 0; padding: 0.3rem 0.2rem; font-size: 1rem; line-height: 1.2; text-align: center; }
  .editor-bar .long-label { display: none; }
  .editor-bar .short-label { display: inline; }
}

/* messages (the login pages use .alert too) */
.alert, .message { padding: 0.9rem 1.1rem; margin: 0 0 1.25rem; border: 2px solid; border-radius: 0.5rem; }
.alert p:last-child, .alert ul:last-child { margin-bottom: 0; }
.alert-ok { color: var(--ok-ink); background: var(--ok-bg); border-color: var(--ok-line); }
.alert-info { color: var(--info-ink); background: var(--info-bg); border-color: var(--info-line); }
.alert-error { color: var(--error-ink); background: var(--error-bg); border-color: var(--error-line); }
.alert ul { margin: 0.25rem 0 0; padding-left: 1.3rem; }

/* forms */
.field { margin: 0 0 1.25rem; border: 0; padding: 0; min-width: 0; }
.field label, .field .label, .field legend { display: block; font-weight: 700; margin-bottom: 0.35rem; padding: 0; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field input[type="date"],
.field input[type="datetime-local"], .field input[type="password"], .field input[type="number"], .field textarea, .field select {
  display: block; width: 100%; min-height: var(--touch); padding: 0.5rem 0.75rem;
  font: inherit; color: var(--ink); background: #fff; 
}
.field textarea { resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 0 1.5rem; }
.check { display: flex; align-items: center; gap: 0.6rem; min-height: var(--touch); font-weight: 400; }
.field .check { display: flex; }
.check input { width: 1.5rem; height: 1.5rem; flex: none; }

/* lists */
.rows { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.rows > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.9rem 1rem; margin-bottom: 0.6rem; background: var(--card); border: 1px solid var(--line); }
.rows form { margin: 0; }
.row-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; min-width: 0; flex: 1 1 16rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.log .row-main { display: grid; gap: 0.1rem; }
.log .log-account { color: var(--muted); overflow-wrap: anywhere; }
.changes-head { font-size: 1rem; margin: 0.8rem 0 0.3rem; }

.badge-removed { color: var(--error-ink); background: var(--error-bg); border: 2px dotted var(--error-line); padding-block: 0.05rem; }
/* A small drawn mark in front of each status word, so a dashed outline is not mistaken for an empty drop zone: filled = shown, ring = waits, diamond = over */
.badge-ok::before, .badge-draft::before, .badge-removed::before { content: ""; display: inline-block; flex: none; width: 0.6em; height: 0.6em; margin-right: 0.4em; vertical-align: 0.05em; background: currentColor; border-radius: 50%; }
.badge-draft::before { background: transparent; border: 2px solid currentColor; box-sizing: border-box; }
.badge-removed::before { border-radius: 0; transform: rotate(45deg) scale(0.85); }

/* opening hours */
.week { list-style: none; margin: 0 0 1rem; padding: 0; }

/* editor and preview side by side, stacked on narrow screens */
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
/* Running text stays readable on a wide screen: at most about 70 characters a line */
main p, main .hint, main .alert ul, main .alert ol { max-width: 70ch; }
.back-to-text a { display: inline-flex; align-items: center; padding: 0 0.9rem; font-weight: 600; text-decoration: none; border: 1px solid var(--primary); }
.back-to-text a:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
/* the text is beside the preview there (75rem = 1200 px) */
#forhand:focus { outline: none; } /* focus is moved here only to read it out; there is nothing to operate */
@media (min-width: 75rem) {
  .editor-layout { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); align-items: start; }   /* wide enough for the simple toolbar on one row at 1280 px: it needs about 765 px and the column is 802 (at 1.9fr it was 775, with nothing to spare) */
  .preview-pane { position: sticky; top: 0.5rem; }
  /* the whole column (Dator/Mobil and the page) fits in the window while it is pinned: the window less the save bar and the column's own heading */
  .editor-layout:not(:has([data-editor-mode="word"])) .preview-frame { height: max(18rem, calc(100vh - 14rem)); }
  /* FLER VERKTYG: the whole toolbar has to fit one row, so the text gets the full width and the preview goes below (as on a tablet) */
  .editor-layout:has([data-editor-mode="word"]) { grid-template-columns: minmax(0, 1fr); }
  .editor-layout:has([data-editor-mode="word"]) .preview-pane { position: static; }
  .editor-layout:has([data-editor-mode="word"]) .back-to-text { display: block; }
}
/* the toolbar has the whole width, the text sits in a column in the middle (a line of text stays readable, like a page in a word processor) */
.editor-layout:has([data-editor-mode="word"]) .ql-editor { padding-left: max(1rem, calc((100% - 50rem) / 2)); padding-right: max(1rem, calc((100% - 50rem) / 2)); }
.preview-pane h2, .editor-pane h2 { margin-top: 0; }
.preview-frame { display: block; width: 100%; height: max(36rem, 75vh); background: #fff; }

/* The editor toolbar: one compact row (Textstil, Fet, Kursiv, Lista, Länk, Bild, Mer) that stays at the top of the editor column while the
   text scrolls; "Mer" opens a second row. Words only, every control at least 44 px tall. */
/* Flat controls, as in a word processor: transparent, 4 px corners at most, a soft tint for "on", thin 1 px dividers between groups, one 1 px line under
   the row. Every control is at least 40 px (2.5rem at the 18 px root = 45 px). Two modes share the look: ENKEL (words) and FLER VERKTYG (icons and words). */
#toolbar { position: static; font-family: inherit; }
@media (min-height: 500px), (hover: hover) and (pointer: fine) { #toolbar { position: sticky; top: calc(var(--warn-h, 0px) + var(--version-h, 0px)); z-index: 20; } } /* --warn-h: room for the "Du loggas snart ut" banner while it is shown */ /* not with the keyboard open: it would take a fifth of what is left */
/* A low window (a laptop at 150 % or 200 % zoom, 560 px or less): the toolbar scrolls with the text instead of staying pinned, so the text has room above the save bar */
@media (max-height: 560px) { #toolbar { position: static; } }
#toolbar .tb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.05rem; }
#toolbar .tb-row[hidden] { display: none; }
#toolbar .tb-extra { margin-top: 0.15rem; padding-top: 0.15rem; border-top: 1px solid var(--line); }
#toolbar .tb-slot { display: contents; }
#toolbar button, #toolbar select { box-sizing: border-box; font: inherit; font-family: inherit; border: 0; border-radius: 4px; cursor: pointer; }
#toolbar button { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 0.35rem; float: none; width: auto; height: auto; min-width: 2.25rem; padding: 0 0.5rem; white-space: nowrap; }
/* a finger: 44 px */
#toolbar select { max-width: 100%; padding: 0 0.4rem; border: 1px solid #aeb6bf; }
#toolbar #tb-main > button:not(.tb-mode), #toolbar #tb-main .tb-slot > button { padding: 0 0.15rem; min-width: 2rem; }
#toolbar #tb-style { flex: 0 0 auto; width: auto; }   /* "Vanlig text" in full, never shrunk to "Vanlig tex‹"; Enkel is still one row on a laptop (1280 px). width: auto because the toolbar is inside .field, whose select is 100 % wide: with flex-basis auto that made the style list a whole row of its own */
#toolbar #tb-list { flex: 0 1 4.2rem; min-width: 0; }
#toolbar #tb-main select { padding: 0 0.1rem 0 0.35rem; }
#toolbar button:hover, #toolbar select:hover { background: rgb(0 0 0 / 0.07); }
#toolbar select:hover { background: var(--card); border-color: var(--ink); }
#toolbar button.ql-active, #toolbar button[aria-pressed="true"], #toolbar button.is-open { color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); }
#toolbar button.ql-active:hover, #toolbar button[aria-pressed="true"]:hover, #toolbar button.is-open:hover { background: color-mix(in srgb, var(--primary) 24%, transparent); }
#toolbar .tb-sep { flex: none; align-self: center; width: 1px; height: 1.5rem; margin: 0 0.1rem; }
#toolbar .tb-sep-end { margin-left: auto; }
/* "Fler verktyg" is a SWITCH between two toolbars (a small track with a knob, pressed = on); "Mer" opens one more row (a small caret) */
#toolbar .tb-mode { gap: 0.4rem; border: 1px solid #aeb6bf; }
#toolbar .tb-switch { position: relative; flex: none; width: 24px; height: 14px; border-radius: 7px; background: #aeb6bf; }
#toolbar .tb-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); transition: left 0.12s; }
#toolbar .tb-mode[aria-pressed="true"] .tb-switch { background: var(--primary); }
#toolbar .tb-mode[aria-pressed="true"] .tb-switch::after { left: 12px; }
#toolbar .tb-more { gap: 0.3rem; }
#toolbar .tb-more::after { content: ""; flex: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
#toolbar .tb-more.is-open::after { border-top: 0; border-bottom: 5px solid currentColor; }
#toolbar #tb-main .tb-mode { padding: 0 0.25rem; gap: 0.25rem; }
#toolbar #tb-main .tb-more { margin-left: auto; }
#toolbar button:focus-visible, #toolbar select:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
/* FLER VERKTYG: one row; a group never breaks in two, the row wraps between groups */
#toolbar .wd-group { display: inline-flex; flex: none; align-items: center; gap: 0.1rem; margin-left: 0.2rem; padding-left: 0.2rem; border-left: 1px solid var(--line); }
/* the name of the mode, first in its row: with the switch at the end, no one can miss which toolbar this is */
#toolbar .wd-label { flex: none; margin-right: 0.35rem; padding: 0.2rem 0.5rem; font-weight: 700; color: var(--ink); border-bottom: 3px solid var(--primary); }
#toolbar .wd-group:first-child, #toolbar .wd-label + .wd-group, #toolbar .wd-group.is-lead { margin-left: 0; padding-left: 0; border-left: 0; } /* no divider at the start of a line */
#toolbar .wd-btn svg { display: block; flex: none; width: 20px; height: 20px; }
#toolbar .wd-btn .ql-stroke { stroke: currentColor; }
#toolbar .wd-btn .ql-fill, #toolbar .wd-btn .ql-stroke.ql-fill { fill: currentColor; }
#toolbar .wd-btn .ql-even, #toolbar .wd-btn .ql-thin, #toolbar .wd-btn .ql-transparent { stroke: currentColor; }
#toolbar .wd-btn:disabled { color: color-mix(in srgb, var(--ink) 55%, white); cursor: default; } /* a grey that still reads (3:1 or more) */
#toolbar .wd-btn:disabled svg .ql-stroke { stroke: currentColor; }
#toolbar { container-type: inline-size; }
#toolbar #wd-style { width: 7.8rem; }
#toolbar #wd-size { width: 7.6rem; }   /* "Vanlig text" in full, the same words as the style list of Enkel */
#toolbar #wd-undo, #toolbar #wd-redo { padding: 0 0.35rem; }
#toolbar .wd-mode { margin-left: auto; padding: 0 0.45rem; }
#editor { min-height: 22rem; font: inherit; font-size: 1.05rem; }
.ql-container.ql-snow { border-radius: 0 0 0.4rem 0.4rem; }
.ql-editor { min-height: 22rem; font-size: 1.05rem; line-height: 1.6; }
.ql-editor h2 { font-size: 1.4rem; margin: 1rem 0 0.5rem; }
.ql-editor.ql-blank::before { color: var(--muted); font-style: normal; }
.ql-editor img { max-width: 100%; height: auto; cursor: pointer; }

/* What the editor offers beyond plain text, shown as the public site shows it */
.ql-editor img.img-liten { width: 33%; }
.ql-editor img.img-mellan { width: 60%; }
.ql-editor img.img-stor { width: 100%; }
.ql-editor .txt-liten { font-size: 0.85em; }
.ql-editor .txt-stor { font-size: 1.35em; }
.ql-editor .txt-center { text-align: center; }
.ql-editor u { text-decoration: underline; }
.ql-editor hr { margin: 1.25rem 0; border: 0; border-top: 2px solid var(--line); }
.ql-editor blockquote { margin: 0 0 0.8em; padding: 0.6rem 1rem; border: 1px solid #5b6672; background: var(--bg); }

/* The picture toolbar: an outline round the chosen picture and plain buttons below it */
.ql-editor img::selection { background: transparent; } /* the picture is shown selected by its outline, not by a blue block over it */
.ql-editor img::-moz-selection { background: transparent; }
.image-outline { position: absolute; z-index: 5; border: 2px solid var(--primary); pointer-events: none; }
.image-outline[hidden], .image-tools[hidden], .image-tools-alt[hidden] { display: none; }
/* The picture bar: a small flat bar just under (or over) the picture, like the one in a word processor. A segmented Liten / Mellan / Stor,
   thin dividers between the groups, and "Ta bort bilden" in the warning colour. */
.image-tools { position: absolute; z-index: 6; max-width: 100%; padding: 0.2rem 0.3rem; border: 1px solid #aeb6bf; border-radius: 4px; }
.image-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.2rem; }
.image-note { display: block; padding: 0.25rem 0.5rem 0.1rem; font-weight: 600; color: var(--warn-ink); }
.image-note:empty { display: none; }
.image-tools .image-tool { min-height: 2.45rem; padding: 0 0.45rem; font: inherit; font-weight: 600; color: var(--ink); background: transparent; border: 0; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.image-tools .image-tool:hover { background: rgb(0 0 0 / 0.07); }
.image-tools .image-tool.is-active { color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); }
.image-tools .image-tool.is-danger { color: var(--danger); }
.image-tools .image-tool.is-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.image-tools .image-tool:disabled { color: color-mix(in srgb, var(--ink) 55%, white); cursor: not-allowed; background: transparent; }
.image-tools .image-tool:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
@media (pointer: coarse) { .image-tools .image-tool { min-height: 2.75rem; } } /* a finger: 44 px, after the base rule so it wins */
.image-tools .tb-sep { flex: none; align-self: center; width: 1px; height: 1.5rem; margin: 0 0.2rem; background: var(--line); }
.image-tools .image-seg { display: inline-flex; border: 1px solid #aeb6bf; border-radius: 4px; overflow: clip; } /* clip, not hidden: hidden makes it a scroll container that fights the sideways scroll of the phone bar */
.image-tools .image-seg .image-tool { border-radius: 0; }
.image-tools .image-seg .image-tool + .image-tool { border-left: 1px solid #aeb6bf; }
.image-tools-alt { margin-top: 0.6rem; display: grid; gap: 0.5rem; }
.image-tools-alt label { display: grid; gap: 0.25rem; }
.image-tools-alt .btn { justify-self: start; }
/* Phone: the caption box is open under the picture, in the text's column (not fixed: the on-screen keyboard is up) */
.image-tools-alt.is-floating { position: absolute; left: 0; right: 0; z-index: 6; box-sizing: border-box; margin: 0; padding: 0.5rem; background: var(--card); border: 2px solid var(--ink); border-radius: 0.4rem; }
.image-tools-alt.is-floating[hidden] { display: none; }
.image-tools-alt.is-floating { grid-template-columns: 1fr 1fr; }
.image-tools-alt.is-floating label, .image-tools-alt.is-floating .image-status { grid-column: 1 / -1; }
.image-tools-alt.is-floating .btn { justify-self: stretch; }
.image-tools-alt.is-floating .image-status { margin: 0; }
.image-tools-alt.is-floating .image-status:empty { display: none; }
/* Phone: the picture tools are a bar fixed to the bottom of the screen. The buttons wrap onto a second row instead of running off the screen
   (a row that scrolls sideways gave no sign that "Stor", "Ändra bildtext" and "Ta bort bilden" were there). */
@media (max-width: 40rem) {
  .image-tools { position: fixed; left: 0; right: 0; z-index: 30; max-width: none; border-radius: 0; }
  .image-tools .image-tool { flex: none; min-height: 2.75rem; }
  .image-tools { border-width: 1px 0 0; }
  html.has-picture-tools body { padding-bottom: 9.5rem; } /* the last lines can still be scrolled clear of the bar (two rows of buttons) */
}

/* The same bar when the window is wide but short (a high zoom, a small laptop): JS adds .is-compact and puts the bar just above the save bar. */
.image-tools.is-compact { position: fixed; left: 0; right: 0; top: auto; z-index: 30; max-width: none; border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
.image-tools.is-compact .image-tools-row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 0.15rem; }
.image-tools.is-compact .image-tool { flex: none; white-space: nowrap; }
html.picture-tools-compact.has-picture-tools body { padding-bottom: 9rem; }
/* Phone, in both views: every picture tool in sight, in TWO rows, no sideways swipe. First row: Flytta upp, Flytta ned, Ta bort bilden. Second row: Liten/Mellan/Stor and
   Ändra bildtext. (The wide system fonts of a test machine make "Flytta upp" 105 px: the three of the first row come to 350 px, the size choices and the caption to 330.)
   The thin dividers go (the one after the size choices becomes the line break), the buttons are a little tighter. The compact bar of a short window scrolled sideways before:
   on a phone it wraps like the plain phone bar. */
@media (max-width: 40rem) {
  .image-tools .tb-sep { display: none; }
  .image-tools .image-seg + .tb-sep { display: block; order: 4; flex: 0 0 100%; width: 100%; height: 0; margin: 0; background: none; }   /* the break between the rows */
  .image-tools-row > :nth-child(1) { order: 1; }
  .image-tools-row > :nth-child(2) { order: 2; }
  .image-tools-row > .is-danger { order: 3; }
  .image-tools-row > .image-seg { order: 5; }
  .image-tools-row > :nth-child(6) { order: 6; }
  .image-tools .image-tool { padding: 0 0.25rem; }
  .image-tools-row, .image-tools.is-compact .image-tools-row { gap: 0.05rem 0.15rem; padding-bottom: 0.1rem; }
}

/* Hem only: the sign "Viktigt" (a one-line box with bold and link) and the top picture, flat like the editor's toolbar */
.hem-fields { margin: 0 0 1.25rem; }

/* Studio pages: the list of sections above the text, the kind picker, the header button, and a section's rows (facts, cards, steps). Hairlines, no colour stripes. */
.sections-editor { margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.sections-editor h2 { margin-top: 0; }
.section-rows .row-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.section-rows .section-title { color: var(--muted, inherit); overflow-wrap: anywhere; }
.section-add-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.section-cta input, .section-items input, .section-items textarea { display: block; width: 100%; max-width: var(--w-form, 40rem); margin-bottom: 0.5rem; }
.section-item-rows { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.section-item { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.section-item[hidden] { display: none; }
.notice-box { background: var(--card); border: 1px solid #7d8791; }
#notice-toolbar.ql-toolbar.ql-snow { display: flex; gap: 0.15rem; padding: 0.2rem 0.3rem; border: 0; background: transparent; }
#notice-toolbar button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; float: none; width: auto; min-width: 2.3rem; min-height: 2.3rem; }
#notice-toolbar button:hover { background: rgb(0 0 0 / 0.07); }
#notice-toolbar button.ql-active { color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); }
#notice-toolbar button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
#notice-toolbar svg { width: 1.1rem; height: 1.1rem; }
#notice-toolbar button { gap: 0.4rem; } /* icon and word: the hint says "tryck Länk", so the button says Länk */
#notice-toolbar button { min-width: 4.5rem; padding: 0 0.7rem; border: 1px solid #aeb6bf; }
#notice-toolbar .ql-stroke { stroke: currentColor; }
#notice-toolbar .ql-fill, #notice-toolbar .ql-stroke.ql-fill { fill: currentColor; }
#notice-editor.ql-container.ql-snow { border: 0; font: inherit; }
#notice-editor .ql-editor { min-height: 2.8rem; padding: 0.55rem 0.75rem; font-size: 1.05rem; line-height: 1.5; }
.image-library { margin: 0 0 1rem; }
.lib-grid, .bild-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.6rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.lib-item { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; width: 100%; min-height: 2.75rem; padding: 0.4rem; font: inherit; color: var(--ink); text-align: left; background: var(--card); border: 1px solid #7d8791; border-radius: 4px; cursor: pointer; }
.lib-item:hover { background: rgb(0 0 0 / 0.05); }
.lib-item:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.lib-item img, .bild-thumb { display: block; width: 100%; object-fit: cover; background: var(--bg); border-radius: 3px; }
.lib-alt, .bild-alt, .lib-used { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-alt { font-size: 1rem; }
/* Kunder: the logo is chosen with a radio button inside each picture */
.kund-logo-choice .lib-item img { height: 4rem; object-fit: contain; }
.kund-logo-choice .lib-item:has(input:checked) { border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); }
.lib-paging, .bild-paging { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 0.5rem; }
.bild-card { display: flex; flex-direction: column; }
.bild-alt { margin: 0; }
.bild-actions { display: flex; margin: auto 0 0; }
.bild-confirm { display: grid; gap: 0.4rem; justify-items: start; }
.bild-file-input { display: block; max-width: 100%; font: inherit; }
.bild-file-input.visually-hidden { width: 1px; min-height: 0; padding: 0; } /* the visible "Välj en bild eller ta ett foto" button stands in for it */
.bild-upload .field .bild-file-button { display: inline-flex; max-width: 100%; margin: 0; padding: 0.55rem 1.25rem; font-weight: 700; }
.bild-file-button[hidden], #bild-file-name[hidden], .bild-preview[hidden], .bild-busy[hidden] { display: none; }
.bild-file-input.visually-hidden:focus-visible + .bild-file-button { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-ring); }
.bild-preview { display: block; width: 12rem; max-width: 100%; height: 8rem; margin-top: 0.5rem; object-fit: cover; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; }
.bild-busy { margin: 0 0 0.5rem; }
.bild-busy progress { display: block; width: 100%; height: 0.75rem; accent-color: var(--primary); }
.bild-status { margin: 0 0 0.5rem; font-weight: 600; }
.bild-status:empty { display: none; }
.bild-status.is-error { color: var(--error-ink); }
.bild-card.is-new { border: 2px solid var(--primary); }
.bild-new-label { margin: 0; font-weight: 700; color: var(--primary); }
.bild-hem-compare { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin: 0 0 1rem; }
.bild-hem-pic { margin: 0; }
.bild-hem-pic figcaption { font-weight: 700; margin-bottom: 0.35rem; }
.bild-hem-pic .bild-thumb { width: 12rem; max-width: 100%; height: 8rem; border: 1px solid var(--line); }

.hem-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.hem-hero-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#hem-hero-alt-row { margin-top: 0.75rem; }

/* Quill's link box, in Swedish */
.ql-snow .ql-tooltip { font-size: 1rem; }
/* quill.snow.css is linked after this file and has the same weight, so each rule here is made heavier with the extra class: the whole box is Swedish */
.ql-snow .ql-tooltip.ql-tooltip::before { content: "Gå till:"; }
.ql-snow .ql-tooltip.ql-tooltip[data-mode="link"]::before { content: "Skriv adressen:"; }
.ql-snow .ql-tooltip.ql-tooltip.ql-editing a.ql-action::after { content: "Spara"; }
.ql-snow .ql-tooltip.ql-tooltip a.ql-action::after { content: "Ändra"; }
.ql-snow .ql-tooltip.ql-tooltip a.ql-remove::before { content: "Ta bort"; }
.ql-snow .ql-tooltip a { color: var(--primary); }

/* Ångra senaste ändringen: quiet, last on the page, with a gap that grows with the screen, so it is never under the finger that just pressed Spara */
.undo-quiet { margin: clamp(6rem, 18vh, 12rem) 0 2rem; color: var(--muted); }
.undo-quiet p { margin: 0 0 0.25rem; }
.undo-button { min-height: 44px; padding: 0.5rem 0; font: inherit; text-decoration: underline; background: none; border: 0; cursor: pointer; }
.undo-button:hover { color: var(--primary-hover); }

/* the login pages use .qr and .recovery-codes */
.qr { display: block; width: 14rem; max-width: 100%; margin: 1rem 0; background: #fff; padding: 0.5rem; border: 1px solid var(--line); }
.recovery-codes { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.15rem; list-style: none; padding: 1rem; margin: 1rem 0; background: var(--card); border: 2px solid var(--ink); border-radius: 0.5rem; columns: 2; }

@media (max-width: 52rem) {
  .preview-frame { height: 28rem; }
  h1 { font-size: 1.7rem; }
}

/* Small screens: the header is one row (Hem and a Meny button); the wide menu and account links give way to the disclosure. */
@media (max-width: 62.5rem) {
  .who-wide, .menu { display: none; }
  .brand-sub { display: none; }
  .menu-small { display: flex; align-items: center; gap: 0.5rem; }
  .menu-help { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 1.1rem; text-decoration: none; white-space: nowrap; }
  .menu-more { display: block; position: relative; }
  .menu-more summary { white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 1.1rem; cursor: pointer; list-style: none; }
  .menu-more summary::-webkit-details-marker { display: none; }
  .menu-more-body { position: absolute; right: 0; z-index: 60; /* above every sticky or fixed bar: text toolbar 20, picture tools 30, logout banner 50 */ min-width: 16rem; margin-top: 0.5rem; }
  .menu-more-body ul { list-style: none; margin: 0; padding: 0; }
  .menu-more-body a { display: block; min-height: var(--touch); margin-bottom: 0.15rem; text-decoration: none; }
  .menu-more-body a[aria-current="page"] { background: rgb(0 0 0 / 0.3); font-weight: 700; }
  .menu-more-who { margin: 0.75rem 0.9rem 0.25rem; padding-top: 0.75rem; border-top: 1px solid rgb(255 255 255 / 0.35); opacity: 0.9; }
  .menu-more-body form { margin: 0.5rem 0.9rem; }
}
/* Phones: the name, Hjälp and Meny have to fit one row of 390 px (and of 360); the name gives way (it may be cut with "…") before anything else */
@media (max-width: 30rem) {
  .top-inner { gap: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; }
  .brand { min-width: 0; flex: 1 1 auto; font-size: 1.1rem; }
  .brand { white-space: nowrap; display: block; }
  .menu-small { flex: none; gap: 0.4rem; }
  .menu-help, .menu-more summary { padding: 0 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

.swatch { flex: none; width: 4rem; height: 3rem; border: 2px solid var(--ink); border-radius: 0.4rem; }

#toolbar button:not(.wd-btn) svg { display: none; } /* ENKEL shows words only */
#toolbar .tb-label { margin-left: 0; }

/* Lägg till bild */
.image-panel { margin: 0 0 1rem; padding: 0.75rem 1rem; background: var(--card); border: 2px solid var(--ink); }
.image-panel input[type="file"]:not(.visually-hidden) { display: block; width: 100%; min-height: var(--touch); padding: 0.5rem; font: inherit; }
.image-status { min-height: 1.5rem; margin: 0 0 0.5rem; }
.image-error { color: var(--error-ink); font-weight: 700; }

.log-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-items: start; }
.log-filter .field { margin: 0; min-width: 0; }
.log-filter .field select, .log-filter .field input[type="date"] { width: 100%; min-height: var(--touch); } /* Område, Från and Till: one height, one width, labels on one line */
.log-filter .actions { align-self: start; }
.pager { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; }

/* A refused field: red border and the reason right under it */
input.invalid, textarea.invalid, select.invalid { border-color: #b00020; box-shadow: 0 0 0 1px #b00020; }
.field-error { margin: 0.25rem 0 0; color: #8a0017; font-weight: 700; }
.hours-day .field-error { grid-column: 1 / -1; }
.hours-day .day-errors p { margin: 0; }
input[aria-invalid="true"] { border-color: #8a0017; border-width: 2px; }

.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.4rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--muted); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.breadcrumb [aria-current] { color: var(--muted); }
/* Content widths: forms are narrow, pages never stretch wider than the tiles */
main { max-width: 72rem; }

/* Editor text reads like the preview: space between paragraphs */
#editor .ql-editor p { margin: 0 0 0.8em; }
/* Preview frame: a label on top says it is not what visitors see */
.preview-ribbon { margin: 0; padding: 0.35rem 0.75rem; font-weight: 600; border: 2px solid var(--ink); border-bottom: 0; }
.preview-ribbon + .preview-frame, .preview-ribbon ~ .preview-frame { border-radius: 0; }
/* Dator / Mobil: one small row with the ribbon (no extra height). Mobil is a 390 px wide frame, centred; on a screen narrower than that it fills the box. */
.preview-head { display: flex; align-items: stretch; }
.preview-head .preview-ribbon { flex: 1 1 auto; border-radius: 6px 0 0 0; }
.preview-device { display: inline-flex; flex: 0 0 auto; border: 2px solid var(--ink); border-bottom: 0; }
.preview-device[hidden] { display: none; }
.preview-device-btn { min-height: 2.75rem; padding: 0 0.9rem; font: inherit; cursor: pointer; }
.preview-device-btn + .preview-device-btn { border-left: 1px solid var(--ink); }
.preview-device-btn:hover { background: #e9edf1; }
.preview-device-btn[aria-pressed="true"] { color: #fff; background: var(--ink); }
.preview-device-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -5px; }
.preview-head:has(.preview-device[hidden]) .preview-ribbon { border-radius: 6px 6px 0 0; }
@media (max-width: 30rem) {
  /* a phone: the ribbon keeps its own row (it would wrap to three lines beside the switch) and the switch is one full-width row below it */
  .preview-head { flex-wrap: wrap; }
  .preview-head .preview-ribbon { flex-basis: 100%; border-radius: 6px 6px 0 0; }
}
.rows .btn-danger:hover, .row-actions .btn-danger:hover { color: var(--danger-ink); background: var(--danger); border-color: var(--danger); }
.version-snippet { display: block; width: 100%; }
.older-versions { margin: 0 0 1.5rem; }
.older-versions summary { display: inline-flex; min-height: var(--touch); margin-bottom: 0.5rem; }
/* Skriv en nyhet: the dates are folded away under one plain line between hairlines; the blanks of a template sit above the heading */
.date-options { margin: 0 0 1.25rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.date-options[open] > summary { margin-bottom: 0.75rem; }
.template-blanks { margin: 0 0 1.25rem; padding: 0; border: 0; border-bottom: 1px solid var(--line); min-width: 0; }
.template-blanks legend { padding: 0; font-weight: 700; font-size: 1.15rem; }
.template-blanks .hint { margin: 0 0 0.75rem; }
/* The image picker is a big button; the real file field stays for keyboards and screen readers */
.file-button { margin: 0.25rem 0.75rem 0 0; }
.field label.file-button { display: inline-flex; padding: 0.55rem 1.25rem; text-align: center; } /* a label is a block in .field: the words would sit in a corner of the box */
#image-file:focus-visible + .file-button { outline: 3px solid var(--ink); outline-offset: 2px; }

.info-card { display: grid; grid-template-columns: max-content 1fr; }
.info-card dd { margin: 0; }
@media (max-width: 30rem) { .info-card { grid-template-columns: 1fr; } .info-card dd { margin-bottom: 0.6rem; } }

.alert-warn { color: var(--warn-ink); background: var(--warn-bg); border-color: #c9a227; }
.session-warning { position: fixed; top: var(--version-h, 0px); left: 0; right: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0; border-width: 0 0 2px; border-radius: 0; }
.session-warning[hidden] { display: none; }
.session-warning p { margin: 0; font-weight: 600; }
.session-warning .warn-short { display: none; }
@media (max-width: 40rem) {
  .session-warning .warn-long { display: none; }
  .session-warning .warn-short { display: inline; }
}
/* Phone: one compact line, at most 56px (the words and the button side by side) */
@media (max-width: 40rem) {
  .session-warning { flex-wrap: nowrap; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0.75rem; }
  .session-warning .btn { flex: none; min-height: 44px; padding: 0 0.8rem; }
}
/* A newer version of the admin is there: a calm bar above everything, in the flow of the page (sticky, so it is seen while a long text is written; the
   sticky toolbar and the "loggas snart ut" notice sit below it). It is one line on a phone. Set by forms.js, which also sets --version-h. */
.version-bar { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 1rem; padding: 0.4rem 1rem; color: var(--info-ink); background: var(--info-bg); border-bottom: 2px solid var(--info-line); }
.version-bar p { margin: 0; font-weight: 600; }
.version-bar .vb-short { display: none; }
.version-bar .btn { flex: none; min-height: var(--touch); }
@media (max-width: 40rem) {
  .version-bar { flex-wrap: nowrap; padding: 0.15rem 0.75rem; gap: 0.5rem; }
  .version-bar .vb-long { display: none; }
  .version-bar .vb-short { display: inline; }
  .version-bar .btn { min-height: 44px; padding: 0 0.8rem; }
}
/* A focused field keeps some room above and below it when the page scrolls to it (the on-screen keyboard takes half the screen) */
input, select, textarea { scroll-margin: 5rem 0; }
.field-error { margin: 0.35rem 0 0; font-weight: 600; color: var(--error-ink); }

/* Öppettider: one header row, "Stängt" next to the day name, a closed day says so instead of showing empty boxes */
.hours-head, .hours-day { display: grid; grid-template-columns: 15rem 8rem 8rem 1fr; align-items: center; }
.hours-head { font-weight: 700; }
.hours-head span:first-child { grid-column: 1; }
.hours-week { list-style: none; margin: 0 0 1rem; padding: 0; }
.hours-day .day-cell { display: flex; flex-wrap: wrap; align-items: center; }
.hours-day .day-name { min-width: 6rem; }
.hours-day label { display: block; margin: 0; font-weight: 400; }
.hours-day label > span { position: absolute; left: -9999px; }
.hours-day .check { display: flex; }
.hours-day input[type="text"] { display: block; width: 100%; min-height: var(--touch); }
.hours-day .closed-all { display: none; grid-column: 2 / 4; margin: 0; }
/* The checkbox alone decides (the server writes it checked for a closed day), so unticking it brings the time fields back at once */
.hours-day:has(input[name$=".Closed"]:checked) .time { display: none; }
.hours-day:has(input[name$=".Closed"]:checked) .closed-all { display: block; }
.exception-form:has(input[name="Closed"][value="true"]:checked) .other-hours { display: none; }
@media (max-width: 52rem) {
  .hours-head { display: none; }
  .hours-day { grid-template-columns: 1fr 1fr; }
  .hours-day .day-cell, .hours-day .note, .hours-day .closed-all { grid-column: 1 / -1; }
  .hours-day label > span { position: static; display: block; font-size: 1rem; color: var(--muted); }
}

/* Phone: the main row holds Textstil, Fet, Kursiv, Bild and Mer on ONE line (Lista and Länk are in the extra row there), so tighten it. */
@media (max-width: 40rem) {
  #toolbar { margin-left: -1rem; margin-right: -1rem; } 
  /* wraps rather than runs off the screen: at 320 px the six things do not fit one line (the page was 119 px too wide) */
  #toolbar button { min-width: 2.5rem; padding: 0 0.4rem; } /* a finger: 44 px */
  #toolbar select { padding: 0 0.2rem; }
  #toolbar #tb-style { max-width: 10rem; }
  /* Ångra first, and still the five other things on one line at 320 px */
  #toolbar #tb-main button:not(.tb-undo) { min-width: 2.25rem; }
  #toolbar .tb-sep { margin: 0 0.1rem; }
  #toolbar #tb-main .tb-sep-end, #toolbar .tb-mode, #toolbar .tb-slot .tb-sep { display: none; } 
}
/* Phone: the hours save bar is one row (primary + secondary side by side), about 70px tall */

.alert .actions form, .inline-form { display: inline; margin: 0; }
/* under every date field: the date in words, quick buttons, a box to type the date */
.date-help { margin: 0.35rem 0 0; }
.date-words { display: block; min-height: 1.4em; font-weight: 600; }
.date-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0; }
.date-quick[hidden] { display: none; }
.date-typed { display: block; margin: 0.25rem 0 0; font-weight: 400; }
.date-typed-bad { border-color: var(--danger); }
/* "Börja från en mall": the choices wrap, each one a plain button */
.templates { margin: 0 0 1.5rem; }
details.templates { margin: 0 0 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
details.templates > summary { display: flex; align-items: center; min-height: var(--touch); font-weight: 700; color: #0a4f7a; cursor: pointer; }
details.templates[open] > summary { margin-bottom: 0.5rem; }
@media (min-width: 62rem) and (max-height: 50rem) and (pointer: fine) {
  .breadcrumb a { min-height: 2rem; }
  h1 { margin-bottom: 0.25rem; }
  details.templates { margin-bottom: 0.5rem; }
}
.template-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 0.75rem; padding: 0; }
.template-list .btn { max-width: 100%; white-space: normal; }
.copy-link { margin: 0 0 1.25rem; }
.badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.badges .note { color: var(--muted); }
.unsaved-notice { font-weight: 600; }
.unsaved-notice.is-saved, .actions.action-bar .unsaved-notice.is-saved { font-weight: 400; color: var(--muted); background: none; } /* "Utkastet sparades 14:32": a fact, not a warning */
#closure-banner-text { margin-top: 0.75rem; }
/* "Kom ihåg" on Hem (Utvecklare only): a plain list between hairlines, no side stripes */
.remind { max-width: 68rem; margin: 0 0 1.5rem; padding: 0.75rem 1.25rem 0.25rem; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.remind h2 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.remind-list { list-style: none; margin: 0; padding: 0; }
.remind-list > li { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.remind-text { flex: 1 1 18rem; min-width: 0; }
.remind-text p { margin: 0 0 0.25rem; }
.remind-title { font-weight: 700; }
.remind-hide { flex: 0 0 auto; margin: 0; }
.remind-hide .btn { min-width: 44px; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; }
.bulk-bar .hint { margin: 0 auto 0 0; }
/* Phone: two ticking choices and the count on two lines; the three buttons appear once something is ticked, side by side (the bar was 188 px, 28 % of the screen) */
@media (max-width: 40rem) {
  .bulk-bar .hint { flex: 1 0 100%; }
  .bulk-bar .btn { flex: 1 1 0; min-width: 0; }
}
.news-filter { display: flex; flex-wrap: wrap; }
.news-filter .field { display: flex; align-items: center; gap: 0.6rem; }
.news-filter .field label { flex: none; }
.news-filter .hint:empty { display: none; }
.news-filter input[type=search] { flex: 1 1 auto; } /* inherit: a search box starts at 13 px, which makes an iPhone zoom in */
.news-filter .btn { min-height: var(--touch); }
.news-filter .hint { flex-basis: 100%; }
.rows li[hidden] { display: none; }
.row-check { width: 1.6rem; flex: none; }
.bulk-list { margin: 0 0 0.75rem; padding-left: 1.3rem; }

/* The bar that follows the reader once something is ticked in the news list. */
main { counter-reset: ticked; }
.row-check:checked { counter-increment: ticked; }
.sticky-bulk { display: none; position: sticky; z-index: 5; flex-wrap: wrap; align-items: center; }
.ticked-count::before { content: "Markerade: " counter(ticked); font-weight: 700; margin-right: auto; }
main:has(.row-check:checked) .sticky-bulk { display: flex; }

/* Hjälp: the admin guide as a page. */
.help-guide { max-width: 48rem; }
.help-guide img { max-width: 100%; height: auto; border: 1px solid var(--line); }
.help-guide .shot { margin: 0.5rem 0 1.25rem; }
.help-search { max-width: 48rem; margin: 1rem 0; }
.help-search label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.help-search input { display: block; min-height: var(--touch); font: inherit; }
.help-guide .help-chapter { border: 2px solid var(--line); border-radius: 0.5rem; margin: 0.75rem 0; background: #fff; }
.help-guide .help-chapter > summary { display: block; min-height: 3rem; cursor: pointer; list-style: none; }
.help-guide .help-chapter > summary::-webkit-details-marker { display: none; }
.help-guide .help-chapter > summary::after { content: "+"; float: right; font-size: 1.5rem; font-weight: 700; line-height: 1.6; }
.help-guide .help-chapter[open] > summary::after { content: "\2212"; }
.help-guide .help-chapter[open] > summary { border-bottom: 2px solid var(--line); }
.help-guide .help-body { padding: 0.25rem 1rem 1rem; }
.help-guide .help-body h3 { margin-top: 1.5rem; }
.help-guide .help-chapter[hidden] { display: none; }
.help-guide mark { background: #ffe58a; color: inherit; padding: 0 0.1em; }
.help-guide blockquote { margin: 1rem 0; padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: 4px; background: #f4f6f8; }
.help-guide blockquote p { margin: 0.4rem 0; }

/* Holidays on a day that is closed anyway: shown, greyed (#5b6570 on white is 5.9:1), the note says why. */
.holidays .day-off, .holidays .day-off strong { color: #5b6570; }
.holidays .day-off strong { font-weight: 400; }

/* the result page of Stäng idag (StangIdag/Klart) */
.live-now-note { display: block; }
.live-now-note, .live-now-none { color: var(--muted); }

.close-today-form .btn, .close-today-actions .btn { border-radius: 4px; max-width: 100%; white-space: normal; text-align: center; }

.close-today-lead { max-width: 40rem; }
.close-today-form { max-width: 40rem; }
.close-today-form textarea { width: 100%; }
.close-today-problem { max-width: 40rem; padding: 0.6rem 0; border-top: 1px solid var(--error-line); border-bottom: 1px solid var(--error-line); color: var(--error-ink); }
.close-today-also { margin: 0 0 1rem; padding: 0.25rem 0 0.75rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.close-today-also h2 { font-size: 1.15rem; margin: 0.75rem 0 0.4rem; }
.close-today-also ul { margin: 0; padding-left: 1.3rem; }
.close-today-done { max-width: 40rem; margin: 0 0 1.5rem; border-top: 1px solid var(--line); }
.close-today-done > div { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.close-today-done dt { font-weight: 700; }
.close-today-done dd { margin: 0.15rem 0 0; overflow-wrap: anywhere; }
.close-today-done ul { margin: 0; padding-left: 1.3rem; }
.holidays-more > summary { display: inline-flex; align-items: center; min-height: var(--touch); margin-bottom: 0.5rem; font-weight: 700; cursor: pointer; }
.holidays-more[open] > summary { margin-bottom: 0.6rem; }

/* Publicera: the changes list with "Visa ändringen" and the before/after view */
.change-list { list-style: none; padding-left: 0; }
.change-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.change-links .btn { min-height: var(--touch); }
.change-table { width: 100%; border-collapse: collapse; }
.change-table th, .change-table td { text-align: left; vertical-align: top; }
.diff { padding: 0.75rem 1rem; border: 1px solid var(--line); }
.diff p { margin: 0 0 0.75rem; }
.diff p:last-child { margin-bottom: 0; }
.diff ins { color: #0b4a1d; background: #e1f3e5; text-decoration: underline; text-decoration-thickness: 2px; }
.diff del { color: #7a1020; background: #fbe4e4; text-decoration: line-through; text-decoration-thickness: 2px; }
@media (max-width: 40rem) {
  .change-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .change-table, .change-table tbody, .change-table tr, .change-table th, .change-table td { display: block; width: 100%; }
  .change-table td::before { content: attr(data-label) ": "; font-weight: 700; }
}

/* The picture chooser keeps its buttons above the sticky save bar, wherever it is opened */
#image-panel .actions { position: sticky; bottom: calc(var(--savebar-h, 0px) + 0.5rem); z-index: 6; margin-top: 0.75rem; padding: 0.5rem 0; background: var(--card); }
#image-panel { scroll-margin-bottom: calc(var(--savebar-h, 0px) + 1rem); }
#toolbar .tb-undo:disabled { color: color-mix(in srgb, var(--ink) 55%, white); cursor: default; background: transparent; }

/* ONE CORNER SCALE for the admin: 4 px for what is pressed or typed into (buttons, choices, fields, small labels), 6 px for boxes that hold things.
   Nothing is square, nothing is a pill. Last in the file so it wins over the older single rules above. */
.btn, .undo-button, .back-to-text a, .menu-help, .menu-more summary, .badge, .unsaved-notice,
.preview-device-btn, .swatch,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea { border-radius: var(--r-control); }

.alert, .message, .rows > li, .image-panel, .image-tools-alt.is-floating, .help-guide .help-chapter, .bulk-bar, .exception-form .other-hours,
.info-card, .remind, .diff, .notice-box, .preview-frame, .bild-card, .bild-upload, .lib-item, .recovery-codes, .menu-more-body { border-radius: var(--r-box); }
.preview-ribbon + .preview-frame, .preview-ribbon ~ .preview-frame { border-radius: 0; }

/* Developer portal, Users: "Edit name" is a quiet text button on the white row (.btn-quiet is the header's light-on-dark style), its field a normal one */
.portal-table .btn-quiet { text-decoration: underline; }
.portal-table .btn-quiet:hover { color: #0a4f7a; background: rgb(0 0 0 / 0.06); }
.portal-table .more-menu > summary { list-style: none; cursor: pointer; }
.portal-table .more-menu > summary::-webkit-details-marker { display: none; }
.portal-table .more-menu-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem 0; }
.portal-table .more-menu-body input { width: 100%; max-width: 22rem; min-height: var(--touch, 44px); font-size: 1rem; }

/* ===== Hem, the start page ===== */
/* Developer-only experiment: the admin Hem in the vibe of the public "Modern" design (css/modern.css in Site.Rendering).
   Linked ONLY by Index.cshtml while the modern view is on (Utvecklare + cookie cd-dev-hem-modern). Warm paper, clinic red,
   navy, Open Sans (self-hosted in /admin/fonts/), generous space, notices as printed signs between hairlines.
   Shapes as on the public Modern Hem, without the generic-look template tells: buttons, links and the selection get 4 px corners
   (--dh-tab), blocks and cards 6 px (--dh-radius). No pills, no soft drop shadows (a 1 px line where an edge is needed), no round
   "go" marks or arrows, no chips (facts are plain text), no lift on hover, nothing that rises or fades in, nothing that pulses.
   The only motion is a short colour change on hover. No coloured side bars. Nothing is loaded from anywhere else.
   Contrast (WCAG AA): ink #1d2330 on paper 14.9:1, muted #4d5562 on paper 7.0:1, navy on paper 12.0:1, red #c41f40 on paper 5.4:1,
   white on navy 12.6:1, white on red 5.9:1, green #1b6e45 on white 6.2:1. */

@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/admin/fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/admin/fonts/open-sans-latin-700-normal.woff2") format("woff2"); }

body { background: var(--dh-paper); color: var(--dh-ink); font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
main { max-width: 80rem; padding: 1.25rem clamp(1rem, 4vw, 3rem) 5rem; }
.dh :focus-visible { outline: 3px solid var(--dh-navy); outline-offset: 3px; box-shadow: 0 0 0 7px #ffbf47; border-radius: var(--dh-tab); }
.dh a { color: var(--dh-navy); text-underline-offset: 0.2em; }
.dh a:hover { color: var(--dh-red); }
.dh h1, .dh h2 { color: var(--dh-navy); }

/* ---------- the header, only on this view (the layout sets body.dh-page) ----------
   White bar with the logo, navy text links, the active item as a navy tab, account actions as quiet text buttons.
   Flipping --top-bg / --top-ink makes admin.css's header rules follow; the rest is set below. */
body.dh-page { --top-bg: #ffffff; --top-ink: var(--dh-navy); }
.dh-page .top { background: var(--dh-surface); color: var(--dh-navy); box-shadow: 0 1px 0 var(--dh-line); }
.dh-page .top-inner { max-width: 80rem; padding: 0.6rem clamp(1rem, 4vw, 3rem); }
.dh-page .brand-logo { gap: 0.75rem; border-radius: var(--dh-tab); }
.dh-page .brand-logo img { display: block; width: auto; }
.dh-page .brand-logo .brand-sub { padding-left: 0.75rem; border-left: 1px solid var(--dh-line); color: var(--dh-muted); font-size: 1rem; font-weight: 400; opacity: 1; }
.dh-page .who { gap: 0.25rem; }
.dh-page .who > span { margin-right: 0.75rem; color: var(--dh-muted); }   /* name to Hjälp: the same gap as between the buttons (their padding makes up the rest) */
.dh-page .top .btn-quiet { border: 0; background: transparent; color: var(--dh-navy); }
.dh-page .top .btn-quiet:hover { background: var(--dh-paper); color: var(--dh-red); text-decoration: underline; text-underline-offset: 0.25em; }
.dh-page .top :focus-visible { outline: 3px solid var(--dh-navy); outline-offset: 2px; box-shadow: 0 0 0 6px #ffbf47; }

.dh-page .menu { border-top: 1px solid var(--dh-line); }
.dh-page .menu ul { max-width: 80rem; gap: 0.1rem; padding: 0.45rem clamp(0.5rem, 3vw, 2.4rem); }
.dh-page .menu a { display: flex; align-items: center; min-height: 2.75rem; color: var(--dh-ink); }
.dh-page .menu a:hover { background: var(--dh-paper); color: var(--dh-navy); }
.dh-page .menu a[aria-current="page"] { background: var(--dh-navy); color: #fff; font-weight: 700; }

/* phone: Hjälp and Meny as quiet buttons; the open menu is a white panel with a hairline */
.dh-page .menu-help { border: 0; border-radius: var(--dh-tab); color: var(--dh-navy); }
.dh-page .menu-help:hover { background: var(--dh-paper); }
.dh-page .menu-more summary { border: 1.5px solid var(--dh-navy); border-radius: var(--dh-tab); color: var(--dh-navy); }
.dh-page .menu-more[open] summary { background: var(--dh-navy); color: #fff; }
.dh-page .menu-more-body { padding: 0.6rem; background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: var(--dh-radius); }
.dh-page .menu-more-body a { display: flex; align-items: center; padding: 0 1rem; border-radius: var(--dh-tab); color: var(--dh-ink); }
.dh-page .menu-more-body a:hover { background: var(--dh-paper); color: var(--dh-navy); }
.dh-page .menu-more-body a[aria-current="page"] { background: var(--dh-navy); color: #fff; }
.dh-page .menu-more-who { border-top-color: var(--dh-line); color: var(--dh-muted); opacity: 1; }
@media (max-width: 62.5rem) {
  .dh-page .brand-logo .brand-sub { display: none; }
}

/* the switch, on paper: a plain button; the track inside stays round because it is a switch */

/* ---------- hero: greeting and today ---------- */
.dh-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem 4rem; align-items: center; padding: 0 0 3rem; }
.dh-kicker { margin: 0 0 0.6rem; color: var(--dh-red); font-weight: 700; letter-spacing: 0.01em; }
.dh-hello h1::after { content: ""; display: block; width: 8rem; height: 1rem; margin-top: 1rem; background: var(--dh-red); -webkit-mask: var(--dh-wave) no-repeat left center / contain; mask: var(--dh-wave) no-repeat left center / contain; }   /* the wave: the stethoscope tube of the logo */

.dh-today { padding: 1.75rem 1.75rem 1.5rem; background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: var(--dh-radius); }
.dh-label { margin: 0 0 0.9rem; color: var(--dh-navy); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; }
.dh-status { display: flex; align-items: center; gap: 0.75rem; margin: 0; color: var(--dh-ink); font-size: clamp(1.45rem, 1.1rem + 0.8vw, 1.85rem); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.dh-status-note { margin: 0.4rem 0 0 1.55rem; color: var(--dh-muted); }
.dh-dot { flex: none; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--dh-muted); }   /* static: open or closed, nothing pulses */
.is-open .dh-dot { background: var(--dh-open); }

.dh-week { display: grid; grid-template-columns: repeat(7, minmax(min-content, 1fr));   /* equal tiles, none narrower than "Stängt" with its padding (3.1rem) */
   gap: 0.35rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.dh-week li { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.6rem 0.15rem 0.65rem; border-radius: var(--dh-tab); background: var(--dh-paper); text-align: center; overflow-wrap: normal; word-break: keep-all; font-variant-numeric: tabular-nums; }
.dh-week-day { color: var(--dh-ink); font-weight: 700; }
.dh-week-day abbr { text-decoration: none; }
.dh-week-time { display: flex; flex-direction: column; color: var(--dh-muted); font-size: 0.9rem; line-height: 1.3; }
.dh-week-dash { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* stacked times: the dash is for screen readers */
.dh-week li.is-closed { background: transparent; box-shadow: inset 0 0 0 1px var(--dh-line); }
.dh-week li.is-today { background: var(--dh-navy); box-shadow: none; }
.dh-week li.is-today .dh-week-day, .dh-week li.is-today .dh-week-time { color: #fff; }
.dh-today-more { margin: 0.75rem 0 -0.5rem; color: var(--dh-muted); }
.dh-today-more a { display: inline-flex; align-items: center; min-height: 2.75rem; }

.dh-close { margin: 0.25rem 0 -0.5rem; }
.dh-close-state { margin: 0.5rem 0 0; color: var(--dh-muted); }
.dh .dh-close-link { margin-left: 0; padding-left: 0; color: var(--dh-navy); text-decoration: underline; text-underline-offset: 0.2em; }

/* what the site shows now, as published: the top picture and the notice, under the greeting */
.dh-live { max-width: 34rem; margin-top: 1.75rem; }
.dh .dh-live .dh-label { margin-bottom: 0.6rem; }
.dh-live-body { display: flex; align-items: flex-start; gap: 1rem; }
.dh-live-thumb { flex: none; width: 6rem; height: 4rem; object-fit: cover; border: 1px solid var(--dh-line); border-radius: var(--dh-tab); background: var(--dh-surface); }
.dh-live-text { min-width: 0; }
.dh-live-text p { margin: 0 0 0.4rem; }
.dh-live-notice { color: var(--dh-navy); font-weight: 700; line-height: 1.4; }
.dh-live-note, .dh-live-none { color: var(--dh-muted); font-size: 0.95rem; font-weight: 400; }
.dh-live-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.dh-live-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---------- unpublished changes: prominent, but calm (navy, no alarm red) ---------- */
.dh-pending { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 2.25rem; margin: 0 0 3.5rem; padding: 2rem 2.5rem; background: var(--dh-navy); color: #fff; border-radius: var(--dh-radius); }
.dh-pending-count { margin: 0; min-width: 1.5ch; font-size: clamp(3.5rem, 2rem + 4vw, 5.5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; text-align: center; }
.dh .dh-pending h2 { margin: 0 0 0.35rem; color: #fff; font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem); line-height: 1.25; letter-spacing: -0.01em; }
.dh-pending p { margin: 0; }
.dh-pending-text p { color: #e3eaf3; }
.dh .dh-pending .dh-btn:focus-visible { outline-color: #fff; box-shadow: 0 0 0 7px #ffbf47; }

.dh .dh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: 0 2rem; border-radius: var(--dh-tab); font-size: 1.1rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color 0.15s, color 0.15s; }
.dh .dh-btn-light { background: #fff; color: var(--dh-navy); }
.dh .dh-btn-light:hover { background: var(--dh-red); color: #fff; }

.dh-allclear { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 3rem; color: var(--dh-muted); }
/* "Kom ihåg": hairlines instead of a box, text buttons, no shadow, 4 px corners (like the other modern pages) */
.dh .remind { max-width: none; margin: 0 0 3rem; padding: 1rem 0 0; background: transparent; border: 0; border-top: 1px solid var(--dh-line); border-radius: 0; }
.dh .remind h2 { margin: 0 0 0.5rem; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.dh .remind-list > li { border-top-color: var(--dh-line); }
.dh .remind-list > li:last-child { border-bottom: 1px solid var(--dh-line); }
.dh .remind-hide .btn { color: var(--dh-navy); background: transparent; border-color: transparent; border-radius: 4px; box-shadow: none; }
.dh .remind-hide .btn:hover { background: var(--am-hover, rgb(0 0 0 / 0.06)); }
.dh-allclear::before { content: ""; flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--dh-open); }

/* ---------- the work: most used first ---------- */
.dh .dh-section { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); line-height: 1.2; letter-spacing: -0.025em; }
.dh-primary, .dh-more { margin: 0; padding: 0; list-style: none; }
.dh-primary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.dh-primary li, .dh-more li { display: flex; }

/* a card is a link with a hairline; hover darkens the line and whitens the paper, nothing moves */
.dh .dh-card { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; min-height: 6.25rem; padding: 1.15rem 1.35rem; color: var(--dh-ink); background: transparent; border: 1px solid var(--dh-line); border-radius: var(--dh-radius); text-decoration: none; transition: background-color 0.15s, border-color 0.15s; }
.dh .dh-card:hover { background: var(--dh-surface); border-color: var(--dh-navy); color: var(--dh-ink); }
.dh .dh-card:hover .dh-card-title { text-decoration: underline; text-underline-offset: 0.2em; }
.dh-card-title { color: var(--dh-navy); font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.dh-card-text { color: var(--dh-muted); }

.dh .dh-card:focus-visible, .dh .dh-btn:focus-visible { outline: 3px solid var(--dh-navy); outline-offset: 3px; box-shadow: 0 0 0 7px #ffbf47; }
.dh .dh-card-big { min-height: 12.5rem; gap: 0.5rem; padding: 1.85rem 1.85rem 1.6rem; background: var(--dh-surface); }
.dh-card-big .dh-card-title { font-size: clamp(1.6rem, 1.2rem + 0.9vw, 2.1rem); line-height: 1.1; letter-spacing: -0.025em; }
.dh-card-big .dh-card-text { font-size: 1.05rem; }
/* the fact under a card: plain text above a hairline, not a chip; wraps, never cut with an ellipsis */
.dh-card-fact { max-width: 100%; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--dh-line); color: var(--dh-navy); font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; line-height: 1.4; }

.dh .dh-card-publish { background: var(--dh-navy); border-color: var(--dh-navy); }
.dh .dh-card-publish .dh-card-title, .dh .dh-card-publish .dh-card-text { color: #fff; }
.dh .dh-card-publish:hover { background: var(--dh-navy-deep); border-color: var(--dh-navy-deep); }

.dh-lower { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem 4rem; margin-top: 4rem; align-items: start; }
.dh-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }

/* recent changes: a quiet list with hairlines */
.dh-recent-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dh-line); }
.dh-recent-list li { padding: 0.95rem 0; border-bottom: 1px solid var(--dh-line); }
.dh-recent-list p { margin: 0; }
.dh-recent-what { color: var(--dh-ink); line-height: 1.45; }
.dh-recent-who { margin-top: 0.2rem !important; color: var(--dh-muted); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.dh-recent-empty { color: var(--dh-muted); }
.dh-recent-all { margin: 1rem 0 0; }
.dh-recent-all a { display: inline-flex; font-weight: 700; }

/* ---------- laptop ---------- */
@media (max-width: 75rem) {
  .dh-hero { gap: 2.5rem 2.5rem; }
  .dh-lower { gap: 2.5rem; }
}

/* ---------- tablet ---------- */
@media (max-width: 62.5rem) {
  .dh-hero { grid-template-columns: 1fr; padding-bottom: 2.5rem; }
  .dh-today-wrap { max-width: 36rem; }
  .dh-primary { grid-template-columns: 1fr; }
  .dh .dh-card-big { min-height: 0; }
  .dh-card-fact { margin-top: 0.75rem; }
  .dh-lower { grid-template-columns: 1fr; }
}

/* ---------- phone ---------- */
@media (max-width: 40rem) {
  main { padding-top: 0.75rem; }
  .dh-hero { gap: 2rem; padding-top: 0.25rem; }
  .dh-hello h1::after { width: 6.5rem; height: 0.9rem; margin-top: 0.8rem; }
  .dh-today { padding: 1.35rem 1.25rem 1.25rem; }
  /* on a phone the card says today only; the whole week is one tap away under Öppettider */
  .dh-week { display: none; }
  .dh-pending { grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem 1.25rem; margin-bottom: 2.5rem; padding: 1.5rem 1.35rem; }
  .dh-pending .dh-btn { grid-column: 1 / -1; }
  .dh-lower { margin-top: 2.75rem; }
  .dh-more { grid-template-columns: 1fr; }
  .dh .dh-card-big { padding: 1.4rem 1.35rem 1.35rem; }
}

/* ---------- motion: only the short colour changes above, and none at all when reduced motion is asked for ---------- */
@media (prefers-reduced-motion: reduce) {
  .dh *, .dh *::before, .dh *::after { transition: none !important; animation: none !important; }
}

/* ===== The modern look, all pages ===== */
/* The modern look of the whole admin. Linked by _Layout.cshtml after admin.css and dev-hem-modern.css while html.admin-modern is set
   (a developer with the "Modern vy" switch on; DevHemModern.OnForEveryone turns it on for all). It sits on top of today's markup:
   admin.css's colour tokens are re-pointed to the warm paper, navy and clinic red of dev-hem-modern.css, then the components are redrawn.
   Nothing here applies without html.admin-modern, so with the switch off every page looks exactly as before.

   DESIGN SPEC (read this before adding a rule)
   Feel: a quiet, modern tool. Paper background, navy for what can be pressed, ink for what is read, clinic red only on a confirm page.
   Open Sans (self-hosted, 400 and 700). Hairlines (1 px, --dh-line) instead of boxes. No shadows, no gradients, no pills, no side bars.

   Type scale (the root is 18 px, so 1rem = 18 px):
     page title    --t-title    32-38 px, 700, navy          h1
     section title --t-section  23 px, 700, navy             h2
     label         --t-label    18 px, 700, ink              field labels, row titles, legends
     body          1rem         18 px, 400, ink
     meta          --t-meta     16 px, 400, muted            help text, dates, row meta, status words
   Spacing scale (nothing else): --s-1 4.5 px, --s-2 9 px, --s-3 18 px, --s-4 27 px, --s-5 45 px, --s-6 72 px.
     Inside a field: s-2. Between fields: s-4. Before a section: s-5 and one hairline. Page head to content: s-5.
   Width: a form page is one column of --w-form (42rem, about 760 px); a list may use --w-list (60rem); Bilder, Utseende and the
     editors use the whole width.

   Components
   - Buttons: ONE filled navy .btn-primary per page (the main action). Every other button is a quiet text button: navy, bold,
     no border, a light paper tint on hover. .btn-danger (filled red) only on a confirm page. Corners 4 px. At least 44 px tall.
   - Fields: label above (700), field with a 1 px grey edge (3:1 against white), navy edge and a 2 px navy ring on focus.
     Help text under the field in meta size. An error stands at its field in dark red.
   - Lists (.rows): a hairline between rows, no box round a row. The title is prominent, the meta muted on the line under it.
     Status is shown ONLY when it is not the normal state: a small mark and one word (.state, see _ModernState.cshtml).
     Row actions: a text "Ändra" and "Fler val" (details.more-menu). No red in a list.
   - Notices (.alert): text between two hairlines with a small mark in front; only an error gets a tint.
   - The save row (.action-bar): sits right under the form, the width of the form, a hairline above. It never floats.
   - Corners: 4 px on what is pressed or typed into, 6 px on a block. */

@media (pointer: coarse) { :root { --touch: 2.75rem; } }   /* a finger: 44 px tap areas, the same small text */

/* ---------- page: type, width, the head of every page ---------- */
.admin-modern body { line-height: 1.6; }
.admin-modern a { color: var(--dh-navy); }
.admin-modern a:hover { color: var(--dh-red); }
.admin-modern :focus-visible { outline: 3px solid var(--dh-navy); outline-offset: 2px; box-shadow: none; border-radius: var(--dh-tab); }
.admin-modern .top :focus-visible { outline: 3px solid var(--dh-navy); outline-offset: 2px; box-shadow: 0 0 0 6px #ffbf47; }
.admin-modern main { max-width: 80rem; padding-top: var(--s-3); padding-bottom: var(--s-6); }
.admin-modern main p, .admin-modern main .hint { max-width: 66ch; }

/* the product's name: one quiet line under the page and under the sign-in form, plain muted text at the normal small size, never a logo */
.admin-modern .product-line { margin: var(--s-4) 0 0; color: var(--dh-muted); font-size: var(--t-meta); line-height: 1.5; }
.admin-modern footer.product-line { max-width: 80rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) var(--s-4); }
.admin-modern footer.product-line p { margin: 0; max-width: none; }
.admin-modern body:has(.action-bar, .sticky-bulk) footer.product-line { padding-bottom: 8.5rem; }   /* the save row is fixed to the bottom of the screen: the line stays above it when scrolled to the end */
/* a page with the plain save row: the room for the row moves from main to the footer (the same amounts as for main below), so the line sits about 1.5rem under the content and still clear of the row */
.admin-modern body:has(footer.product-line) main:has(.action-bar:not(.editor-bar)) { padding-bottom: 0; }
.admin-modern body:has(.action-bar:not(.editor-bar)) footer.product-line { padding-top: 1.5rem; padding-bottom: 6rem; }
@media (max-width: 40rem) {
  .admin-modern body:has(.action-bar:not(.editor-bar)) footer.product-line { padding-bottom: 12rem; }   /* the row can be three lines of buttons on a phone */
}

/* one column: a form is about 760 px, a list may be wider; Hem, Bilder, Utseende and the editors keep the whole width */
.admin-modern main { --page-w: var(--w-list); }
.admin-modern main:has(form.narrow, .close-today-form, .info-card, .hours-week, .actions .btn-big) { --page-w: var(--w-form); }
.admin-modern main:has(.dh, .editor-layout, .bild-grid, .tm-layout) { --page-w: none; }
.admin-modern main > * { max-width: var(--page-w); }
.admin-modern main form.narrow { max-width: var(--w-form); }

/* breadcrumb, then the title, then one short line that says what the page is for */
.admin-modern .breadcrumb { margin: 0; color: var(--dh-muted); font-size: var(--t-meta); }
.admin-modern .breadcrumb a { color: var(--dh-muted); text-underline-offset: 0.2em; }
.admin-modern .breadcrumb a:hover { color: var(--dh-navy); }
.admin-modern .breadcrumb li + li::before { color: var(--dh-line); }
.admin-modern h1 { margin: 0 0 var(--s-4); color: var(--dh-navy); font-size: var(--t-title); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.admin-modern h1:has(+ .lead, + .close-today-lead) { margin-bottom: var(--s-2); }
.admin-modern .lead, .admin-modern .close-today-lead { margin: 0 0 var(--s-5); color: var(--dh-muted); font-size: 1.05rem; line-height: 1.5; }
.admin-modern h2:not(.dh *, .editor-layout *) { margin: var(--s-5) 0 var(--s-2); color: var(--dh-navy); font-size: var(--t-section); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.admin-modern h3 { margin: var(--s-4) 0 var(--s-2); color: var(--dh-ink); font-size: var(--t-label); font-weight: 600; }
.admin-modern .hint { margin-top: var(--s-1); color: var(--dh-muted); font-size: var(--t-hint); line-height: 1.45; }
/* the approved Hem keeps its own headings (dev-hem-modern.css); its greeting keeps the toned-down size */
.admin-modern .dh-hello h1 { margin: 0 0 0.5rem; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem); letter-spacing: -0.03em; }

.admin-modern main > section > h2:first-child { margin-top: var(--s-3); }
.admin-modern main > section:first-of-type > h2:first-child { margin-top: 0; }
.admin-modern main > h2.bild-list-title { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--dh-line); }
.admin-modern .fold:has(+ .rows) { margin-bottom: 0; border-bottom: 0; }
/* a text button that starts a line lines its words up with the text above it */
.admin-modern main p > .btn:first-child:not(.btn-primary, .btn-danger, .btn-big), .admin-modern .actions > .btn:first-child:not(.btn-primary, .btn-danger) { margin-left: 0; padding-left: 0; min-width: 2.75rem; }   /* the word starts at the text's edge: no negative margin, the tap area is the padding on the other side */

/* ---------- header: the logo and the account on a slim first row, the ten sections in one row below ---------- */
.admin-modern .top-inner { padding-top: 0.35rem; padding-bottom: 0.35rem; gap: 0.25rem 1.5rem; flex-wrap: nowrap; }
.admin-modern .brand-logo img { height: 2.4rem; }
.admin-modern .who { flex-wrap: nowrap; justify-content: flex-end; }
.admin-modern .who > span { white-space: nowrap; }
.admin-modern .top .btn-quiet { padding: 0 0.75rem; white-space: nowrap; }
.admin-modern .menu ul { flex-wrap: nowrap; overflow-x: auto; padding-top: 0.25rem; padding-bottom: 0.25rem; scrollbar-width: thin; }
.admin-modern .menu li { flex: none; }
.admin-modern .menu a { white-space: nowrap; }
@media (max-width: 55.99rem) {
  .admin-modern .top-inner { flex-wrap: wrap; }
}
/* a phone: the logo, Hjälp and Meny in one calm row; the open menu is one white panel with hairlines between the groups */
.admin-modern .menu-more summary { min-height: var(--touch); font-weight: 600; }
.admin-modern .menu-more-body { min-width: 15rem; }
.admin-modern .menu-more-body ul + ul, .admin-modern .menu-more-body form { border-top: 1px solid var(--dh-line); }
.admin-modern .menu-more-body ul + ul { margin-top: 0.35rem; padding-top: 0.35rem; }

/* ---------- buttons: one primary (navy, filled); everything else a quiet text button; danger (red) on a confirm page only ---------- */
.admin-modern .btn { min-height: var(--touch); padding: 0.5rem 1rem; font-size: var(--t-button); color: var(--dh-navy); background: transparent; border: 1px solid transparent; border-radius: var(--dh-tab); font-weight: 600; line-height: 1.25; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.admin-modern .btn:hover { color: var(--dh-navy-deep); background: var(--am-hover); border-color: transparent; }
.admin-modern .btn-primary { padding-inline: 1.35rem; color: #fff; background: var(--dh-navy); border-color: var(--dh-navy); }
.admin-modern .btn-primary:hover { color: #fff; background: var(--dh-navy-deep); border-color: var(--dh-navy-deep); }
.admin-modern .btn-danger { padding-inline: 1.35rem; color: #fff; background: var(--danger); border-color: var(--danger); }
.admin-modern .btn-danger:hover { color: #fff; background: var(--danger-hover); border-color: var(--danger-hover); }
.admin-modern .btn-quiet { color: var(--dh-navy); background: transparent; border-color: transparent; }
.admin-modern .btn-quiet:hover { color: var(--dh-navy-deep); background: var(--am-hover); border-color: transparent; }
.admin-modern .btn-big, .admin-modern .actions:has(.btn-big) .btn { font-size: 1.1rem; }
.admin-modern .actions:has(.btn-big) .btn:not(.btn-primary, .btn-danger) { padding-inline: 1rem; }
.admin-modern .btn:disabled, .admin-modern .btn[disabled], .admin-modern .btn-primary:disabled, .admin-modern .btn-danger:disabled, .admin-modern .btn-quiet:disabled { color: #55606c; background: #eceae2; border: 1px dashed #8b9199; }
.admin-modern .actions { align-items: center; gap: var(--s-2) var(--s-2); margin-top: var(--s-4); }
.admin-modern .change-discard .btn, .admin-modern .btn-quiet.is-discard { color: var(--dh-muted); }
/* a red action in a list or a menu is a plain word: the red is for the question page that follows */
.admin-modern .rows .btn-danger, .admin-modern .bulk-bar .btn-danger, .admin-modern .row-actions .btn-danger { color: var(--dh-navy); background: transparent; border-color: transparent; }

/* ---------- fields, labels, help texts, errors ---------- */
.admin-modern .field { margin-bottom: var(--s-4); }
.admin-modern .field label, .admin-modern .field .label, .admin-modern .field legend { margin-bottom: 0.35rem; color: var(--dh-ink); font-size: var(--t-label); font-weight: 600; }
.admin-modern .field .check, .admin-modern .check { font-weight: 400; }
.admin-modern .field input[type="text"], .admin-modern .field input[type="email"], .admin-modern .field input[type="tel"], .admin-modern .field input[type="url"], .admin-modern .field input[type="date"],
.admin-modern .field input[type="datetime-local"], .admin-modern .field input[type="password"], .admin-modern .field input[type="number"], .admin-modern .field input[type="search"], .admin-modern .field textarea, .admin-modern .field select,
.admin-modern .week-day input[type="text"], .admin-modern .hours-day input[type="text"] { min-height: var(--touch); padding: 0.5rem 0.75rem; color: var(--dh-ink); background: var(--dh-surface); border: 1px solid var(--am-field); border-radius: var(--dh-tab); font: inherit; font-weight: 400; }
.admin-modern .field input:hover, .admin-modern .field textarea:hover, .admin-modern .field select:hover, .admin-modern .hours-day input[type="text"]:hover { border-color: #5b6470; }
.admin-modern .field input:focus-visible, .admin-modern .field textarea:focus-visible, .admin-modern .field select:focus-visible, .admin-modern .hours-day input:focus-visible { border-color: var(--dh-navy); outline: 2px solid var(--dh-navy); outline-offset: 1px; }
.admin-modern ::placeholder { color: #6b7280; font-weight: 400; opacity: 1; }
.admin-modern .field .hint { margin-top: var(--s-1); }

/* ---------- Meny: headings with dishes under them, the 14 allergens, the weekend of the lunch ---------- */
.admin-modern .menu-lunch { margin-bottom: var(--s-5); }
.admin-modern .menu-lunch .field { margin-bottom: var(--s-3); }
.admin-modern .menu-lunch > .hint { margin-bottom: var(--s-3); }
.admin-modern .menu-lunch .field input[type="text"] { max-width: 36rem; }   /* the weekend, behind "Visa helgen", is as wide as the weekdays */
.admin-modern .menu-add-section .btn { margin-left: 0; padding-left: 0; }
.admin-modern .menu-section .empty { max-width: none; }
.admin-modern .menu-weekend { margin: 0 0 var(--s-3); }
.admin-modern .menu-weekend > summary { display: inline-flex; margin-left: 0; padding-left: 0; }
.admin-modern .menu-weekend[open] > summary { margin-bottom: var(--s-2); }
.admin-modern .menu-section { margin: 0 0 var(--s-5); }
.admin-modern .menu-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; border-bottom: 1px solid var(--dh-line); margin-bottom: var(--s-2); }
.admin-modern .menu-section-head h3 { margin: var(--s-3) 0 var(--s-1); overflow-wrap: anywhere; }
.admin-modern .menu-section .rows > li { border-width: 0 0 1px; background: none; padding-left: 0; padding-right: 0; margin-bottom: 0; }
.admin-modern .menu-section .row-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; overflow-wrap: anywhere; }
.admin-modern .menu-section .row-actions, .admin-modern .menu-section-head .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; }
.admin-modern .menu-section .row-actions form { margin: 0; }
.admin-modern .menu-rename { display: grid; gap: var(--s-1); margin-bottom: var(--s-2); }
.admin-modern .menu-add-section { max-width: var(--w-form); }
.admin-modern .menu-allergens { margin: 0 0 var(--s-4); padding: 0; border: 0; min-width: 0; }
.admin-modern .menu-allergens legend { padding: 0; margin-bottom: 0.35rem; color: var(--dh-ink); font-size: var(--t-label); font-weight: 600; }
.admin-modern .menu-allergen-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 var(--s-3); }
.admin-modern .menu-tick { margin-bottom: var(--s-4); }
.admin-modern .field-error { margin: var(--s-1) 0 0; color: #8a1226; font-size: var(--t-meta); font-weight: 700; }
.admin-modern .field-invalid input, .admin-modern .field input[aria-invalid="true"], .admin-modern .field textarea[aria-invalid="true"], .admin-modern .hours-day input[aria-invalid="true"] { border-color: #a3182f; }
.admin-modern .check { gap: 0.65rem; }
.admin-modern .check input { width: 1.11rem; height: 1.11rem; accent-color: var(--dh-navy); }
.admin-modern fieldset.field legend { margin-bottom: var(--s-1); }
/* "Bara om ni har andra öppettider": a group under a plain label, not a box in a box */
.admin-modern .other-hours, .admin-modern .exception-form .other-hours { padding: 0; border: 0; border-radius: 0; }
.admin-modern .exception-form .other-hours legend, .admin-modern .other-hours legend { padding: 0; }
.admin-modern .other-hours .field { margin-bottom: var(--s-2); }
.admin-modern .other-hours .hint { margin-top: 0; }

/* dates: the words under the field, the quick choices as text buttons in a row, "Eller skriv datum" in meta size */
.admin-modern .date-help { margin-top: var(--s-1); }
.admin-modern .date-words { color: var(--dh-muted); font-size: var(--t-meta); font-weight: 400; min-height: 0; }
.admin-modern .date-quick { gap: 0.5rem; margin: var(--s-1) 0 0; }   /* starts at the input's left edge, wraps inside the column */
.admin-modern .date-quick .btn, .admin-modern main:has(.editor-bar) .date-quick .btn:not(.btn-primary, .btn-danger, .btn-quiet) { min-height: var(--touch); padding: 0 0.9rem 0 0; font-size: var(--t-meta); background: transparent; border-color: transparent; color: var(--dh-navy); }   /* quiet text buttons, the first one's word starts at the input's edge */
.admin-modern .date-quick .btn:hover { background: transparent; text-decoration: underline; }
.admin-modern .field .date-typed { margin-top: var(--s-1); color: var(--dh-muted); font-size: var(--t-meta); font-weight: 400; }
.admin-modern .date-typed input { max-width: 23rem; margin-top: 0.2rem; font-size: 1rem; }

/* ---------- notices: text between two hairlines with a small mark in front; only an error gets a tint ---------- */
.admin-modern .alert, .admin-modern .message { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; align-items: baseline; padding: var(--s-3) 0; margin: 0 0 var(--s-4); color: var(--dh-ink); background: transparent; border: 0; border-top: 1px solid var(--dh-line); border-bottom: 1px solid var(--dh-line); border-radius: 0; }
.admin-modern .alert::before, .admin-modern .message::before { content: ""; grid-column: 1; grid-row: 1; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--dh-navy); }
.admin-modern .alert > *, .admin-modern .message > * { grid-column: 2; }
.admin-modern .alert-ok::before { background: var(--dh-open); }
.admin-modern .alert-info { display: block; }                   /* plain information: the hairlines are enough, no mark */
.admin-modern .alert-info::before { content: none; }
.admin-modern .alert + .alert { margin-top: calc(-1 * var(--s-4)); border-top: 0; }   /* two messages in a row share one hairline (no empty band between two rules) */
.admin-modern .alert-warn::before { background: #b7791f; }
.admin-modern .alert-warn { color: var(--warn-ink); }
.admin-modern .alert-error { padding-inline: var(--s-3); color: var(--error-ink); background: var(--dh-tint); border: 1px solid var(--error-line); border-radius: var(--dh-radius); }
.admin-modern .alert-error::before { background: var(--error-ink); }
.admin-modern .alert p:last-child { margin-bottom: 0; }
.admin-modern .alert .btn { margin: 0; padding-inline: 0 0.6rem; min-width: 2.75rem; }
.admin-modern .alert p .btn { margin-left: 0.15rem; }

/* ---------- status: a small mark and one word, only when it is not the normal state ---------- */
.admin-modern .state { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--dh-ink); font-size: var(--t-meta); font-weight: 400; white-space: nowrap; }
.admin-modern .state::before { content: ""; flex: none; box-sizing: border-box; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--dh-muted); }
.admin-modern .state-ok::before { background: var(--dh-open); }                                     /* on: green, filled */
.admin-modern .state-draft::before { background: transparent; border: 2px solid var(--dh-navy); }   /* waits: a ring */
.admin-modern .state-removed::before { border-radius: 1px; background: var(--dh-muted); }           /* gone: a grey square */
.admin-modern .state-warn::before { background: #b7791f; }                                          /* old: amber */
/* the older badge (pages not yet moved to .state): a word with a drawn mark in front, a hairline edge */
.admin-modern .badge { border-radius: var(--dh-tab); }
.admin-modern .badge-removed { border-style: solid; }

/* ---------- lists: calm rows between hairlines; the title prominent, the meta muted under it ---------- */
.admin-modern .rows { margin: 0 0 var(--s-4); border-top: 1px solid var(--dh-line); }
.admin-modern .rows > li { gap: var(--s-1) var(--s-4); margin: 0; padding: 0.8rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--dh-line); border-radius: 0; }
.admin-modern .rows > li:hover { background: transparent; }
.admin-modern .row-main { position: relative; align-items: baseline; gap: 0.1rem 1rem; flex: 1 1 18rem; }
.admin-modern .row-main > strong { flex: 1 0 100%; color: var(--dh-ink); font-size: var(--t-label); font-weight: 600; line-height: 1.4; }
.admin-modern .row-main > a { color: var(--dh-navy); }
.admin-modern .row-main > :not(strong, .row-check, a), .admin-modern .row-main em { color: var(--dh-muted); font-size: var(--t-meta); font-style: normal; }
.admin-modern .row-main .badges { gap: 0.1rem 1rem; }
.admin-modern .row-main .badges .note { color: var(--dh-muted); font-size: var(--t-meta); }
/* a row with a tick box: the box in a gutter of its own, title and meta in one column beside it */
.admin-modern .row-main:has(> .row-check, > .row-tick) { padding-left: 2.4rem; }
.admin-modern .row-main > .row-check { position: absolute; top: 0.15rem; left: 0; width: 1.11rem; height: 1.11rem; accent-color: var(--dh-navy); }
.admin-modern .row-actions { align-items: center; gap: 0; }
.admin-modern .rows .row-actions .btn:not(.btn-primary), .admin-modern .rows > li > .btn:not(.btn-primary) { padding-inline: 0.7rem; }
.admin-modern .changes li, .admin-modern .week-day { border-color: var(--dh-line); }
@media (max-width: 40rem) {
  .admin-modern .rows > li { align-items: flex-start; }
  .admin-modern .row-actions { margin-left: 0; }
  .admin-modern .row-actions > .btn:first-child { padding-left: 0; min-width: 2.75rem; }
  .admin-modern .row-main:has(> .row-check, > .row-tick) + .row-actions { margin-left: 1.7rem; }
}

/* the small menu of a row ("Fler val"): a text button that opens a hairline panel under it */
.admin-modern .more-menu { position: relative; }
.admin-modern .more-menu > summary { list-style: none; cursor: pointer; }
.admin-modern .more-menu > summary::-webkit-details-marker { display: none; }
.admin-modern .more-menu > summary::after { content: ""; flex: none; width: 0; height: 0; margin-left: 0.5rem; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.admin-modern .more-menu[open] > summary::after { border-top: 0; border-bottom: 5px solid currentColor; }
.admin-modern .more-menu[open] > summary { background: var(--am-hover); }
.admin-modern .more-menu-body { position: absolute; right: 0; z-index: 40; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 14rem; margin-top: 0.25rem; padding: 0.35rem; background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: var(--dh-radius); }
.admin-modern .more-menu-body form, .admin-modern .more-menu-body .change-discard { margin: 0; }
.admin-modern .more-menu-body .btn { width: 100%; justify-content: flex-start; padding-inline: 0.75rem; text-align: left; font-weight: 400; color: var(--dh-ink); }
.admin-modern .more-menu-body .btn:hover { color: var(--dh-navy); }
@media (max-width: 40rem) {
  /* on a phone an open menu opens in the row, on a line of its own: it never reaches past the screen, wherever its button sits */
  .admin-modern .more-menu[open] { flex: 1 0 100%; }
  .admin-modern .more-menu-body { position: static; min-width: 0; box-sizing: border-box; }
}

/* an explanation that folds shut: a hairline above and below, the title is the button */
.admin-modern .fold { margin: 0 0 var(--s-4); border-top: 1px solid var(--dh-line); border-bottom: 1px solid var(--dh-line); }
.admin-modern .fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--touch); cursor: pointer; list-style: none; }
.admin-modern .fold > summary::-webkit-details-marker { display: none; }
.admin-modern .fold > summary::after { content: ""; flex: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.admin-modern .fold[open] > summary::after { border-top: 0; border-bottom: 5px solid currentColor; }
.admin-modern .fold-body { padding: 0 0 0.75rem; color: var(--dh-ink); }
.admin-modern .fold-body > :last-child { margin-bottom: 0; }

/* ---------- empty states ---------- */
.admin-modern .empty { margin: var(--s-3) 0; padding: var(--s-3) 0; color: var(--dh-muted); border-top: 1px solid var(--dh-line); border-bottom: 1px solid var(--dh-line); }

/* ---------- question pages (Ja / Nej), confirmations, danger zones ---------- */
.admin-modern .danger-zone, .admin-modern .page-settings, .admin-modern .history { border-top: 1px solid var(--dh-line); }
.admin-modern .page-settings form { max-width: var(--w-form); }
.admin-modern .changes { margin: var(--s-2) 0 0; padding-left: 1.2rem; }
.admin-modern .changes li { margin-bottom: var(--s-1); }
.admin-modern .changes-head { margin: var(--s-3) 0 var(--s-1); color: var(--dh-ink); font-size: var(--t-label); }

/* ---------- the save row of the short forms: fixed along the bottom, the look of the editors' save row ----------
   Spara och publicera is the filled main button and Spara an outline (the editors do the same); where a form has only one button it is the filled one. */
.admin-modern .action-bar:not(.editor-bar) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; box-sizing: border-box; max-width: none; display: flex; justify-content: flex-end; gap: 0.35rem 0.5rem; margin: 0; padding: 0.55rem max(1rem, calc((100vw - 80rem) / 2 + 3rem)); background: var(--dh-surface); border-top: 1px solid var(--dh-line); }
.admin-modern .action-bar:not(.editor-bar) .unsaved-notice, .admin-modern .action-bar:not(.editor-bar) .save-hold { order: -1; flex: 1 1 12rem; min-height: 0; margin: 0; color: var(--warn-ink); font-size: var(--t-meta); font-weight: 700; line-height: 1.3; }
.admin-modern .action-bar:not(.editor-bar) .unsaved-notice[hidden] { display: none; }
.admin-modern .action-bar:not(.editor-bar) .btn { flex: none; order: 1; min-height: var(--touch); border: 1px solid var(--dh-line); }
.admin-modern .action-bar:not(.editor-bar) .btn:hover { color: var(--dh-navy); background: var(--dh-paper); border-color: var(--dh-navy); }
.admin-modern .action-bar:not(.editor-bar) a.btn { order: 0; border-color: transparent; }
.admin-modern .action-bar:not(.editor-bar) .btn-primary, .admin-modern .action-bar:not(.editor-bar) .btn[name="Publicera"] { order: 2; color: #fff; background: var(--dh-navy); border-color: var(--dh-navy); }
.admin-modern .action-bar:not(.editor-bar) .btn-primary:hover, .admin-modern .action-bar:not(.editor-bar) .btn[name="Publicera"]:hover { color: #fff; background: var(--dh-navy-deep); border-color: var(--dh-navy-deep); }
.admin-modern .action-bar:not(.editor-bar):has(.btn[name="Publicera"]) .btn-primary:not([name="Publicera"]) { order: 1; color: var(--dh-navy); background: transparent; border-color: var(--dh-line); }
.admin-modern .action-bar:not(.editor-bar):has(.btn[name="Publicera"]) .btn-primary:not([name="Publicera"]):hover { color: var(--dh-navy); background: var(--dh-paper); border-color: var(--dh-navy); }
.admin-modern .action-bar:not(.editor-bar) .btn:disabled { color: #55606c; background: #eceae2; border: 1px dashed #8b9199; opacity: 1; }
/* nothing may end up under it: room at the foot of the page, and what is scrolled into view stops above it */
.admin-modern main:has(.action-bar:not(.editor-bar)) { padding-bottom: 8.5rem; }
html.admin-modern:has(.action-bar:not(.editor-bar)) { scroll-padding-bottom: 8.5rem; }
@media (max-width: 40rem) {
  .admin-modern main:has(.action-bar:not(.editor-bar)) { padding-bottom: 12rem; }   /* the row can be three lines of buttons on a phone */
  html.admin-modern:has(.action-bar:not(.editor-bar)) { scroll-padding-bottom: 12rem; }
  .admin-modern .action-bar:not(.editor-bar) { padding-inline: 0.75rem; }
}
/* the editors keep their own save bar (owned with the editors) */
.admin-modern .action-bar.editor-bar { background: var(--dh-surface); border-top: 1px solid var(--dh-line); }
.admin-modern .action-bar.editor-bar .btn { border-width: 1px; border-color: var(--dh-navy); border-radius: var(--dh-tab); background: transparent; color: var(--dh-navy); }
.admin-modern .action-bar.editor-bar .btn:hover { background: var(--dh-paper); color: var(--dh-navy); }
.admin-modern .action-bar.editor-bar .btn-primary { color: #fff; background: var(--dh-navy); }
.admin-modern .action-bar.editor-bar .btn-primary:hover { color: #fff; background: var(--dh-navy-deep); }

/* "Ångra" at the foot: a quiet line well below the save row */
.admin-modern .undo-quiet { margin: var(--s-5) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--dh-line); }
.admin-modern .undo-quiet h2 { margin: 0 0 var(--s-1); color: var(--dh-ink); font-size: var(--t-label); letter-spacing: 0; }
.admin-modern .undo-quiet p { color: var(--dh-muted); font-size: var(--t-meta); }
.admin-modern .undo-button { color: var(--dh-navy); font-weight: 500; text-decoration: none; }
.admin-modern .undo-button:hover { color: var(--dh-navy-deep); text-decoration: underline; }

/* ---------- Nyheter: search, the old-news line, the selection row ---------- */
.admin-modern .news-filter { gap: var(--s-2) var(--s-3); }
.admin-modern .news-filter .field { display: block; flex: 1 1 18rem; max-width: 26rem; margin: 0; }
.admin-modern .news-filter input[type=search] { width: 100%; }
.admin-modern .news-filter .hint { margin: 0; }
.admin-modern .bulk-bar { gap: 0 var(--s-4); }
.admin-modern .bulk-bar .check { min-height: var(--touch); }
.admin-modern .bulk-bar .hint { margin: 0 auto 0 0; }
.admin-modern .bulk-bar.is-idle .btn, .admin-modern .bulk-bar.is-idle .more-menu { display: none; }
/* the selection bar is fixed along the bottom like the save row, and the page makes room for it while something is ticked: it never lies on the list */
.admin-modern .sticky-bulk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; gap: var(--s-1) var(--s-3); margin: 0; padding: var(--s-2) clamp(1rem, 4vw, 3rem); background: var(--dh-surface); border: 0; border-top: 1px solid var(--dh-line); }
.admin-modern main:has(.row-check:checked) { padding-bottom: 9rem; }

/* ---------- Öppettider: the week as one quiet table, the holiday switch on one line ---------- */
.admin-modern .hours-head, .admin-modern .hours-day { gap: var(--s-2) var(--s-3); }
@media (min-width: 52.01rem) {
  .admin-modern .hours-head, .admin-modern .hours-day { grid-template-columns: 12.5rem 6.25rem 6.25rem minmax(0, 1fr); }
}
.admin-modern .hours-head { padding: 0 0 var(--s-2); color: var(--dh-muted); font-size: var(--t-meta); border-bottom: 1px solid var(--dh-line); }
.admin-modern .hours-week { margin: 0; }
.admin-modern .hours-day { padding: var(--s-2) 0; border-bottom: 1px solid var(--dh-line); }
.admin-modern .hours-day .day-cell { gap: 0 var(--s-3); }
.admin-modern .hours-day .day-name { min-width: 5.5rem; }
.admin-modern .hours-day .closed-all { color: var(--dh-muted); font-weight: 400; }
.admin-modern .hours-weekly .hint { margin: 0 0 var(--s-3); }
@media (max-width: 52rem) {
  .admin-modern .hours-day { margin: 0; padding: var(--s-3) 0; border-radius: 0; }
  .admin-modern .hours-week { border-top: 1px solid var(--dh-line); }
}
.admin-modern .holiday-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.2rem; margin: 0 0 var(--s-2); }
.admin-modern .holiday-switch .btn { margin-left: 0; padding-left: 0; min-width: 2.75rem; }
.admin-modern .holiday-switch p { margin: 0; }
.admin-modern .holiday-switch p strong { font-weight: 400; }
.admin-modern .holidays .day-off, .admin-modern .holidays .day-off strong { color: var(--dh-muted); }
.admin-modern .holidays-more > summary { color: var(--dh-navy); }

.admin-modern .change-list { margin: 0; padding: 0; border-top: 1px solid var(--dh-line); }
.admin-modern .change-list .change { margin: 0; padding: 0.8rem 0; border-bottom: 1px solid var(--dh-line); }
.admin-modern .change-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-4); }
.admin-modern .change-main { display: flex; flex-direction: column; flex: 1 1 18rem; min-width: 0; }
.admin-modern .change-main p { margin: 0; }
.admin-modern .change-main .change-text { color: var(--dh-ink); font-weight: 600; line-height: 1.4; }
.admin-modern .change-main .change-area { order: -1; color: var(--dh-muted); font-size: var(--t-meta); }
.admin-modern .change-links { gap: 0; margin: 0 0 var(--s-2); }
.admin-modern .change-links > :first-child { padding-left: 0; }
.admin-modern .change-links .btn { padding-inline: 0.7rem; }
.admin-modern .more-menu-body.change-links { margin: 0.25rem 0 0; }
.admin-modern .change-table { margin: var(--s-2) 0 var(--s-4); background: transparent; }
.admin-modern .change-table th, .admin-modern .change-table td { padding: 0.65rem 1rem 0.65rem 0; border: 0; border-bottom: 1px solid var(--dh-line); }
.admin-modern .change-table thead th { color: var(--dh-muted); font-size: var(--t-meta); background: transparent; }
.admin-modern .diff { background: var(--dh-surface); border-color: var(--dh-line); }
@media (max-width: 40rem) {
  .admin-modern .change-table tr { margin: 0; padding: var(--s-2) 0; border: 0; border-bottom: 1px solid var(--dh-line); }
  .admin-modern .change-table th, .admin-modern .change-table td { padding: 0.15rem 0; border: 0; }
  .admin-modern .change-table td::before { color: var(--dh-muted); font-weight: 400; }
}

/* ---------- Stäng idag, Bekräfta: the list of what is also published, between hairlines ---------- */
.admin-modern .close-today-also { margin: 0 0 var(--s-3); padding: 0 0 var(--s-3); }
.admin-modern .close-today-also h2 { margin: var(--s-3) 0 var(--s-1); color: var(--dh-ink); font-size: var(--t-label); }
.admin-modern .close-today-form .field:has(textarea) { margin-bottom: var(--s-4); }

.admin-modern .info-card { gap: var(--s-2) var(--s-4); border: 0; border-top: 1px solid var(--dh-line); border-radius: 0; }
.admin-modern .info-card dt { color: var(--dh-muted); font-weight: 400; }

/* ---------- Händelselogg: the filter on one row, each event as what happened over who and when ---------- */
.admin-modern .log-filter { gap: var(--s-2) var(--s-3); }
.admin-modern .log-filter + h2.log-day { margin-top: var(--s-3); }
/* a phone: Område on its own line, Från and Till side by side, Visa right under them (it was 500 px down, below the first screen) */
@media (max-width: 40rem) {
  .admin-modern .log-filter .actions { margin-top: 0; }
}
.admin-modern .log .row-main { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "time what" "time who"; gap: 0 var(--s-3); }
.admin-modern .log .row-main > strong { grid-area: time; flex: none; color: var(--dh-muted); font-size: var(--t-meta); font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.6; }
.admin-modern .log .row-main > span:nth-of-type(1) { grid-area: who; }
.admin-modern .log .row-main > span:nth-of-type(2) { grid-area: what; color: var(--dh-ink); font-size: 1rem; }
.admin-modern .pager { margin-top: var(--s-3); color: var(--dh-muted); font-size: var(--t-meta); }

.admin-modern .bild-upload .field .bild-file-button { color: var(--dh-navy); background: var(--dh-surface); border: 1px solid var(--am-field); }
.admin-modern .bild-upload .field .bild-file-button:hover { border-color: var(--dh-navy); }
.admin-modern .bild-card { gap: var(--s-1); padding: 0; border-radius: 0; }
.admin-modern .bild-card.is-new { padding: var(--s-2); border: 1px solid var(--dh-navy); border-radius: var(--dh-radius); }
.admin-modern .bild-card .bild-thumb { margin-bottom: var(--s-1); border-radius: var(--dh-tab); }
.admin-modern .bild-alt { font-weight: 600; line-height: 1.35; }
.admin-modern .bild-used, .admin-modern .bild-uses, .admin-modern .bild-card .hint { color: var(--dh-muted); font-size: var(--t-hint); }
.admin-modern .bild-uses .state { margin-left: 0.35rem; }
.admin-modern .bild-actions .btn, .admin-modern .bild-paging .btn, .admin-modern .lib-paging .btn { padding-inline: 0.6rem; }
.admin-modern .bild-actions .btn:hover, .admin-modern .bild-paging .btn:hover { background: var(--am-hover); }

/* ---------- Utseende: the settings column in hairline folds, the preview without a frame round its frame ---------- */
.admin-modern .tm-group { margin: 0; background: transparent; border: 0; border-top: 1px solid var(--dh-line); border-radius: 0; }
.admin-modern .tm-group:last-of-type { border-bottom: 1px solid var(--dh-line); }
.admin-modern .tm-group > summary { padding: 0.4rem 0; color: var(--dh-navy); }
.admin-modern .tm-group > summary:hover { background: transparent; color: var(--dh-navy-deep); }
.admin-modern .tm-group[open] > summary { border-bottom: 0; }
.admin-modern .tm-group-body { padding: 0 0 var(--s-3); }
.admin-modern .tm-preview { padding: 0; background: transparent; border: 0; border-radius: 0; }
.admin-modern .tm-segment { border-color: var(--am-field); }
.admin-modern .tm-segment label + label span { border-left-color: var(--am-field); }
.admin-modern .tm-segment span { min-height: var(--touch); }
.admin-modern .tm-segment input:checked + span { background: var(--dh-navy); }
.admin-modern .tm-frame { border-color: var(--dh-line); border-radius: var(--dh-radius); overflow: hidden; }
.admin-modern .tm-unpublished { padding-inline: 0; }
.admin-modern .tm-settings h2:not(.dh *), .admin-modern .tm-preview h2:not(.dh *) { margin: 0; }
.admin-modern .tm-preview-head { min-height: var(--touch); }

/* ---------- the preview column (Meddelande överst and the editors) ---------- */
.admin-modern .preview-frame { border: 1px solid var(--dh-line); border-radius: var(--dh-radius); }
.admin-modern .preview-pane h2, .admin-modern .editor-pane h2 { color: var(--dh-navy); }
.admin-modern .preview-ribbon { color: var(--dh-navy); background: var(--dh-sky); border-width: 1px; }

/* ---------- editor surfaces (the full editor pages are restyled one by one) ---------- */
.admin-modern #toolbar { border-width: 1px; border-color: #6b7280; background: var(--dh-surface); }
.admin-modern .ql-container.ql-snow, .admin-modern #editor { border-width: 1px; border-color: #6b7280; background: var(--dh-surface); }

/* ---------- the page editors (Ändra en sida, Nyheter) keep the outline buttons and darker fields until they are redone ---------- */
.admin-modern main:has(.editor-bar) .btn:not(.btn-primary, .btn-danger, .btn-quiet) { padding-inline: 1.15rem; border-color: var(--dh-navy); }
.admin-modern main:has(.editor-bar) .btn:not(.btn-primary, .btn-danger, .btn-quiet):hover { background: var(--dh-surface); border-color: var(--dh-navy-deep); }
.admin-modern main:has(.editor-bar) .field input, .admin-modern main:has(.editor-bar) .field textarea, .admin-modern main:has(.editor-bar) .field select { border-color: #6b7280; }
.admin-modern main:has(.editor-bar) :focus-visible { outline: 3px solid var(--dh-navy); outline-offset: 3px; box-shadow: 0 0 0 7px #ffbf47; }

/* a row's tick box: the box is 24 px, the label round it is the 44 px to tap */
.admin-modern .row-main > .row-tick { position: absolute; top: calc((1.4 * var(--t-label) - 2.75rem) / 2); left: -0.55rem; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; cursor: pointer; }
.admin-modern .row-main > .row-tick > .row-check { position: static; width: 1.5rem; height: 1.5rem; margin: 0; }

/* Phones: the logo is centred on the row's middle line, level with Hjälp and Meny (the plain phone rule sets the name as a block with a tall line, which left the picture on its baseline) */
@media (max-width: 30rem) {
  .admin-modern .brand.brand-logo { display: inline-flex; align-items: center; line-height: normal; overflow: visible; }
}
/* 360 px and below: the logo a little smaller and Sök, Hjälp and Meny close, so the header stays one row */
@media (max-width: 24rem) {
  .admin-modern .top-inner { flex-wrap: wrap; gap: 0.25rem; padding-inline: 0.75rem; }
  .admin-modern .brand-logo img { height: 1.9rem; }
  .admin-modern .menu-help { padding-inline: 0.5rem; }
  .admin-modern .menu-small { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
  .admin-modern .menu-more summary { padding-inline: 0.7rem; }
}

/* ================= the pages that still looked like the old admin, redrawn in the calm language of Hem =================
   Each block below is one page (or one kind of page). Same scale and tokens as above; nothing new is invented here. */

/* a notice that is one paragraph with words and a <strong> mixed (the portal's disk notice, Mina inställningar): the grid above would make every word
   a cell of its own, so a one-paragraph notice flows as text with the small mark in front of the first line */
.admin-modern p.alert, .admin-modern p.message { display: block; }
.admin-modern p.alert::before, .admin-modern p.message::before { display: inline-block; margin-right: 0.75rem; vertical-align: 0.08em; }

/* a short form field never runs wider than a form column, also on the pages that are not a .narrow form (Bekräfta, the portal's Create user) */
.admin-modern main > form > .field, .admin-modern main > section > form > .field { max-width: var(--w-form); }

/* ---------- Ändra en sida: the pages as calm rows, the title prominent, "Ändra" a text button ---------- */
.admin-modern .page-rows > li { padding: var(--s-2) 0; }
.admin-modern .page-rows .row-main > strong { font-size: var(--t-section); }
.admin-modern .page-rows .row-main > .state { flex: none; }
.admin-modern .page-rows > li { flex-wrap: nowrap; align-items: center; }      /* a phone too: "Ändra" stays on the line of its page */
.admin-modern .page-rows .row-main { flex: 1 1 auto; min-width: 0; }

/* ---------- question pages (Vill du ta bort nyheten?, Ta bort bilden?, Logga ut från alla enheter?): one column; what happens stands between two
   hairlines; the red answer is the one filled button and "Nej" an outline of the same size beside it ---------- */
.admin-modern main:has(> form > .actions > .btn-danger) { --page-w: var(--w-form); }
.admin-modern main > h1 + .alert-info, .admin-modern main > h1 + .bild-confirm { margin-top: var(--s-4); }
.admin-modern main > .alert-info:has(+ form > .actions > .btn-danger) p:first-child strong { font-size: 1.1rem; }
.admin-modern main > form > .actions:has(> .btn-danger) > .btn-primary { color: var(--dh-navy); background: transparent; }
.admin-modern main > form > .actions:has(> .btn-danger) > .btn-primary:hover { color: var(--dh-navy-deep); background: var(--dh-surface); border-color: var(--dh-navy-deep); }
.admin-modern .bild-confirm .bild-thumb { display: block; width: min(18rem, 100%); height: auto; aspect-ratio: 3 / 2; margin: 0 0 var(--s-3); border-radius: var(--dh-tab); }
.admin-modern .bild-confirm .bild-uses { margin: 0 0 var(--s-1); padding: 0; list-style: none; }

/* ---------- Visa ändringen: the area as a red line over the change (as the date over the greeting on Hem), the links on the text edge ---------- */
.admin-modern h1:has(+ h2.change-title) { margin-bottom: var(--s-2); }
.admin-modern h2.change-title { margin: 0 0 var(--s-3); color: var(--dh-red); font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; }
.admin-modern .change-lead { margin-bottom: var(--s-3); font-size: 1.1rem; }
.admin-modern main p.change-links > .btn:first-child:not(.btn-primary) { margin-left: 0; }         /* the row already starts a little left: no second step */
.admin-modern main > .change-links + section { margin-top: var(--s-5); padding-top: 0; border-top: 0; }
.admin-modern main > .danger-zone > p:not(.change-links) { color: var(--dh-muted); font-size: var(--t-meta); }

.admin-modern .bild-card .bild-thumb { height: auto; aspect-ratio: 4 / 3; }
.admin-modern .bild-card .bild-used { margin: var(--s-1) 0 0; }
.admin-modern .bild-card .bild-uses { padding: 0; list-style: none; color: var(--dh-ink); }
.admin-modern .bild-card .bild-actions { gap: 0; padding-top: var(--s-2); }

.admin-modern .settings-group form.narrow .btn-primary { margin-top: var(--s-1); }
.admin-modern .settings-logout .logout-form .btn { padding-inline: 1.35rem; border-color: var(--dh-navy); }
.admin-modern .settings-logout .logout-form .btn:hover { background: var(--dh-surface); }
.admin-modern .settings-logout h3 { margin: var(--s-4) 0 var(--s-1); }

/* ---------- Hjälp: the chapters as folds between hairlines (no boxes), the search a normal field, one reading column ---------- */
.admin-modern .help-search, .admin-modern .help-guide { max-width: var(--w-form); }
.admin-modern .help-search input { padding: 0.5rem 0.75rem; color: var(--dh-ink); border: 1px solid var(--am-field); border-radius: var(--dh-tab); }
.admin-modern .help-search input:hover { border-color: #5b6470; }
.admin-modern .help-search input:focus-visible { border-color: var(--dh-navy); outline: 2px solid var(--dh-navy); outline-offset: 1px; }
.admin-modern .help-intro > p { color: var(--dh-muted); }
.admin-modern .help-intro h2 { margin: var(--s-5) 0 var(--s-3); }
.admin-modern .help-intro ul { margin: 0; padding-left: 1.2rem; }
.admin-modern .help-intro li { margin: 0 0 var(--s-2); line-height: 1.55; }
.admin-modern .help-intro li::marker { color: var(--dh-red); }
.admin-modern .help-guide .help-chapter { margin: 0; background: transparent; border: 0; border-top: 1px solid var(--dh-line); border-radius: 0; }
.admin-modern .help-guide .help-chapter:last-of-type { border-bottom: 1px solid var(--dh-line); }
.admin-modern .help-guide .help-chapter > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 3.5rem; padding: var(--s-2) 0; color: var(--dh-navy); }
.admin-modern .help-guide .help-chapter > summary h2 { display: block; margin: 0; font-size: 1.15rem; line-height: 1.35; letter-spacing: -0.01em; }
.admin-modern .help-guide .help-chapter > summary:hover h2 { text-decoration: underline; text-underline-offset: 0.2em; }
.admin-modern .help-guide .help-chapter > summary::after { content: ""; float: none; flex: none; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; }
.admin-modern .help-guide .help-chapter[open] > summary::after { content: ""; border-top: 0; border-bottom: 6px solid currentColor; }
.admin-modern .help-guide .help-chapter[open] > summary { border-bottom: 0; }
.admin-modern .help-guide .help-body { padding: 0 0 var(--s-4); }
.admin-modern .help-guide .help-body h3 { margin: var(--s-4) 0 var(--s-1); }
.admin-modern .help-guide .help-body li { margin-bottom: var(--s-1); }
.admin-modern .help-guide img { border-color: var(--dh-line); border-radius: var(--dh-radius); }
.admin-modern .help-guide blockquote { background: var(--dh-surface); border-color: var(--dh-line); border-radius: var(--dh-radius); }

@media (prefers-reduced-motion: reduce) {
  .admin-modern *, .admin-modern *::before, .admin-modern *::after { transition: none !important; animation: none !important; }
}

/* ---------- tap areas of 44 px for the small links, and quiet text buttons that start at their text's edge ---------- */
.admin-modern .breadcrumb a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.55rem; margin-inline: -0.55rem; }   /* the tap area is padding, cancelled by the margin: the gaps round the slash stay equal */
.admin-modern main p:has(> a:only-child:not(.btn)) > a, .admin-modern .remind-text p > a, .admin-modern .dh-close-state a, .admin-modern .close-today-state a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.admin-modern .bild-uses li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.35rem; }
.admin-modern .bild-uses li > a { display: inline-flex; align-items: center; min-width: 2.75rem; min-height: 2.75rem; }

/* ===== The modern look: refinements ===== */
/* The admin pages in Hem's quality: the same paper, one white card where a page groups a task, small spaced-capital section labels, quiet links, one navy
   primary button, and the calm type scale from the top of admin-modern.css. Linked after admin-modern.css. Hem itself (main:has(.dh)) keeps its own look in
   dev-hem-modern.css; it only shares the header, the menu and the button sizes. The numbers (sizes, heights) are the variables at the top of admin-modern.css. */

/* ---------- type ---------- */
.admin-modern main:not(:has(.dh)) { font-size: var(--t-body); line-height: 1.5; }
.admin-modern main:not(:has(.dh)) .lead, .admin-modern main:not(:has(.dh)) .close-today-lead { font-size: var(--t-body); }
.admin-modern main:not(:has(.dh)) .breadcrumb { font-size: var(--t-meta); }
.admin-modern main:not(:has(.dh)) .field input, .admin-modern main:not(:has(.dh)) .field textarea, .admin-modern main:not(:has(.dh)) .field select,
.admin-modern main:not(:has(.dh)) input[type="search"], .admin-modern main:not(:has(.dh)) input[type="text"], .admin-modern main:not(:has(.dh)) input[type="date"] { font-size: var(--t-field); }
.admin-modern .btn, .admin-modern .btn-big { font-size: var(--t-button); }
.admin-modern .btn-big, .admin-modern .actions:has(.btn-big) .btn { min-height: var(--touch); padding: 0.5rem 1.25rem; }
.admin-modern .btn-quiet, .admin-modern .row-actions .btn, .admin-modern .more-menu > summary { font-weight: 500; }
.admin-modern .btn-quiet:hover, .admin-modern .row-actions .btn:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- the header: smaller, calmer; the active section is underlined, not a filled pill ---------- */
.admin-modern .who { font-size: var(--t-menu); }
.admin-modern .top .btn-quiet { font-size: var(--t-menu); font-weight: 500; min-height: 2.5rem; padding: 0 0.7rem; }
.admin-modern .menu a { font-size: var(--t-menu); font-weight: 500; padding: 0 0.65rem; }
.admin-modern .menu a[aria-current="page"], .dh-page .menu a[aria-current="page"] { color: var(--dh-navy); background: transparent; font-weight: 600; box-shadow: inset 0 -2px 0 var(--dh-navy); }
/* the row of sections is centred in the page width; the gap between the words grows from about 25 px (at 1100 px wide) to about 32 px (at 1180 and up),
   and below 1100 px the items close up so the whole row still stays on one line (it scrolls sideways only when even that is too wide) */
html.admin-modern .menu ul { justify-content: safe center; column-gap: clamp(0px, calc((100vw - 1100px) * 0.1125), 9px); }
@media (max-width: 1100px) {
  html.admin-modern .menu ul { padding-inline: 0.5rem; }
  html.admin-modern .menu a { padding-inline: 0.5rem; }
}
.admin-modern .menu a:hover { background: transparent; color: var(--dh-navy); box-shadow: inset 0 -2px 0 var(--dh-line); }
.admin-modern .menu a[aria-current="page"]:hover { box-shadow: inset 0 -2px 0 var(--dh-navy); }

/* ---------- cards: what groups one task is one white card (never a box inside a box) ---------- */
.admin-modern main:not(:has(.dh)) > section:not(.undo-quiet, .undo-offer), .admin-modern main:not(:has(.dh)) > form.narrow, .admin-modern main:not(:has(.dh)) > form.news-filter,
.admin-modern main:not(:has(.dh)) > form.log-filter, .admin-modern main:not(:has(.dh)) > ul.rows, .admin-modern main:not(:has(.dh)) > details.fold,
.admin-modern main:not(:has(.dh)) > .info-card, .admin-modern main:not(:has(.dh)) > .close-today-form {
  margin: 0 0 var(--s-3); padding: var(--s-4) var(--s-4); background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: var(--dh-radius);
}
.admin-modern main:not(:has(.dh)) > section:not(:first-of-type, .undo-quiet, .undo-offer) { margin-top: 0; padding-top: var(--s-4); border-top: 1px solid var(--dh-line); }
.admin-modern main:not(:has(.dh)) > section:has(> :is(.rows, .change-list, details):last-child) + section { padding-top: var(--s-4); border-top: 1px solid var(--dh-line); }
.admin-modern main:not(:has(.dh)) > ul.rows { padding-block: 0; border-top: 1px solid var(--dh-line); }
.admin-modern main:not(:has(.dh)) > ul.rows > li:last-child { border-bottom: 0; }
.admin-modern main:not(:has(.dh)) > section > .rows { margin-bottom: 0; border-top: 1px solid var(--dh-line); }
.admin-modern main:not(:has(.dh)) > section > .rows > li:last-child { border-bottom: 0; }

/* the section label, as the heading of today's card on Hem: small, spaced capitals, navy; used for the heading of a card */
.admin-modern main:not(:has(.dh)) > section > h2:first-child, .admin-modern main:not(:has(.dh)) > details.fold > summary {
  margin: 0 0 var(--s-3); color: var(--dh-navy); font-size: var(--t-meta); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3;
}
.admin-modern main:not(:has(.dh)) > section.undo-quiet > h2 { text-transform: none; letter-spacing: 0; font-size: var(--t-label); font-weight: 600; }
.admin-modern main:not(:has(.dh)) > details.fold > summary { margin: 0; }
.admin-modern main:not(:has(.dh)) > section > h2:first-child + .hint, .admin-modern main:not(:has(.dh)) > section > h2:first-child + p { margin-top: 0; }

/* the save row: about 56 px, the smaller buttons */
.admin-modern .action-bar:not(.editor-bar) { padding-block: 0.5rem; min-height: var(--save-row-h); }
.admin-modern .action-bar:not(.editor-bar) .btn { padding: 0.35rem 1rem; }
@media (min-width: 40.01rem) {   /* on a phone the row is two or three lines: admin-modern.css gives it 12rem, which this must not shrink */
  .admin-modern main:has(.action-bar:not(.editor-bar)) { padding-bottom: 6rem; }
  html.admin-modern:has(.action-bar:not(.editor-bar)) { scroll-padding-bottom: 6rem; }
}

@media (max-width: 40rem) {
  .admin-modern main:not(:has(.dh)) > section:not(.undo-quiet, .undo-offer), .admin-modern main:not(:has(.dh)) > form.narrow, .admin-modern main:not(:has(.dh)) > form.news-filter,
  .admin-modern main:not(:has(.dh)) > form.log-filter, .admin-modern main:not(:has(.dh)) > ul.rows, .admin-modern main:not(:has(.dh)) > details.fold, .admin-modern main:not(:has(.dh)) > .info-card { padding: var(--s-3); }
}
.admin-modern .menu-help, .admin-modern .menu-more summary { font-size: var(--t-menu); font-weight: 500; }
.admin-modern .hours-day label:not(.check), .admin-modern .hours-head > * { font-size: var(--t-label); }

/* Nyheter: the selection row is the head of the list card; the old-news line is plain text */
.admin-modern form.bulk-bar { margin: 0; padding: var(--s-1) var(--s-4); background: var(--dh-surface); border: 1px solid var(--dh-line); border-bottom: 0; border-radius: var(--dh-radius) var(--dh-radius) 0 0; }
.admin-modern form.bulk-bar + ul.rows { margin-top: 0; border-radius: 0 0 var(--dh-radius) var(--dh-radius); }
.admin-modern main:not(:has(.dh)) > p:has(> .btn-primary:only-child) { margin: 0 0 var(--s-3); }

/* Meddelande, Bilder, Utseende, Händelselogg */
.admin-modern main:not(:has(.dh)) > details.fold { padding-block: var(--s-1); }
.admin-modern main > h2.bild-list-title, .admin-modern main > h2.log-day, .admin-modern .tm-layout h2 { margin: var(--s-5) 0 var(--s-3); font-size: var(--t-meta); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.admin-modern main > h2.log-day { margin-top: var(--s-4); }
.admin-modern .rows.log, .admin-modern .rows.log .row-main > * { font-size: var(--t-body); }
.admin-modern .date-quick .btn { font-weight: 500; }
.admin-modern .bild-card .bild-actions .btn { font-weight: 500; }

/* ---------- composition: a main column and a side column, as Hem (one column on a phone) ---------- */
.admin-modern main:has(.page-cols) { --page-w: none; }
.admin-modern .page-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-items: start; max-width: none; }
.admin-modern .page-cols > .col-side, .admin-modern .page-cols > .col-main { min-width: 0; }
.admin-modern .col-side { display: flex; flex-direction: column; gap: var(--s-3); }
.admin-modern .col-side > .card, .admin-modern .page-cols > .card { margin: 0; }
@media (min-width: 64rem) {
  .admin-modern .page-cols { grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); gap: var(--s-4); }
  .admin-modern .page-cols > .col-main { grid-column: 1; grid-row: 1 / span 3; }
  .admin-modern .page-cols > .col-side { grid-column: 2; }
}
@media (min-width: 64rem) and (max-width: 84.99rem) {   /* the week of opening hours needs a wide main column: under 85rem the side cards go below it */
  .admin-modern .hours-cols { grid-template-columns: minmax(0, 1fr); }
  .admin-modern .hours-cols > .col-main, .admin-modern .hours-cols > .col-side { grid-column: 1; grid-row: auto; }
}
/* The button for changed hours is the most used one on the page: while the card lies below the week it also stands under the heading, and the card's own is hidden */
.admin-modern .hours-add { margin: 0 0 var(--s-3); }
.admin-modern .hours-add > .btn { padding-inline: 1rem; border-color: var(--am-field); }   /* the quiet button with a line, as the other one-button rows in a card (above) */
.admin-modern .hours-add > .btn:hover { border-color: var(--dh-navy); }
@media (min-width: 85rem) {
  .admin-modern .hours-add { display: none; }
}
@media (max-width: 84.99rem) {
  .admin-modern .hours-add-side { display: none; }
}
@media (max-width: 63.99rem) {
  .admin-modern .publish-cols > .publish-card { order: -1; }   /* the thing to do comes first on a smaller screen, then the list */
}

/* a card: Hem's white block, whether it is a direct child of main or a part of a composition */
.admin-modern .card { padding: var(--s-4); background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: var(--dh-radius); }
.admin-modern .card > h2:first-child, .admin-modern .card.fold > summary { margin: 0 0 var(--s-3); color: var(--dh-navy); font-size: var(--t-meta); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }
.admin-modern .card.fold { padding-block: var(--s-1); }
.admin-modern .card.fold > summary { margin: 0; }
.admin-modern .card > .rows { margin: 0; }
.admin-modern .card > .rows > li:last-child { border-bottom: 0; }
.admin-modern .card .hint + p, .admin-modern .card > h2 + .hint { margin-top: 0; }
@media (max-width: 40rem) { .admin-modern .card { padding: var(--s-3); } }

/* Hem's red, only as an accent on the main pages: the kicker above the title and the wave under it */
.admin-modern .kicker { margin: var(--s-2) 0 0; color: var(--dh-red); font-size: var(--t-body); font-weight: 700; letter-spacing: 0.01em; }
.admin-modern .kicker + h1 { margin-top: 0.25rem; }
.admin-modern .kicker + h1::after { content: ""; display: block; width: 5rem; height: 0.6rem; margin-top: 0.6rem; background: var(--dh-red); -webkit-mask: var(--dh-wave) no-repeat left center / contain; mask: var(--dh-wave) no-repeat left center / contain; }
.admin-modern .kicker + h1:has(+ .lead)::after { margin-bottom: 0.2rem; }
/* a red dot where something waits: the changes that are not published */
.admin-modern .publish-count { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.admin-modern .publish-count::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--dh-red); }
.admin-modern .publish-card .btn { min-width: 8rem; }
.admin-modern .published-contact { display: flex; flex-direction: column; gap: 0.2rem; font-style: normal; }
.admin-modern .published-tagline { margin: 0 0 var(--s-2); font-weight: 600; }
.admin-modern .card > :last-child, .admin-modern .card > .publish-bar > :last-child { margin-bottom: 0; }
.admin-modern .card ul.rows:not(:has(li)) { display: none; }
.admin-modern .col-side > .undo-quiet { padding: var(--s-4); background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: var(--dh-radius); margin: 0; }
.admin-modern .kicker + h1::after { width: 5.5rem; height: 0.75rem; }
.admin-modern .card > p > .btn:only-child:not(.btn-primary) { padding-inline: 1rem; border-color: var(--am-field); }
.admin-modern .card > p > .btn:only-child:not(.btn-primary):hover { border-color: var(--dh-navy); }

/* the head of a main page: kicker, title, one line on the left; the main action on the right of the same row */
.admin-modern .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.admin-modern .page-head-text { flex: 1 1 24rem; min-width: 0; }
.admin-modern .page-head-text .lead { margin-bottom: var(--s-3); }
.admin-modern .page-head-action { flex: none; }
.admin-modern main:has(> .page-head) > .page-head .page-head-text { max-width: 44rem; }
@media (max-width: 40rem) { .admin-modern .page-head-action { width: 100%; } .admin-modern .page-head-action .btn { width: 100%; } }
.admin-modern .news-filter { align-items: flex-end; }
.admin-modern .news-filter > .btn { border-color: var(--am-field); padding-inline: 1rem; }
.admin-modern .news-filter > .btn:hover { border-color: var(--dh-navy); }

/* a list page: the list and its tools are the main column, a short card or two stand beside it */
.admin-modern .col-main > form.news-filter { margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: var(--dh-radius); }
.admin-modern .col-main > ul.rows { margin: 0; background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: var(--dh-radius); }
.admin-modern .col-main > ul.rows > li { padding-inline: var(--s-4); }
.admin-modern .col-main > ul.rows > li:last-child { border-bottom: 0; }
.admin-modern .col-main > form.bulk-bar + ul.rows { border-top-color: var(--dh-line); }
.admin-modern .col-main > :is(p.empty, #no-match) { margin: 0; }
.admin-modern .card.old-summary { padding: var(--s-4); background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: var(--dh-radius); }
.admin-modern .card.old-summary .btn { display: flex; width: fit-content; margin-top: var(--s-2); }
/* a list inside a card is the card's content: hairlines between the rows, no box of its own */
.admin-modern .card > ul.rows { padding: 0; background: transparent; border: 0; border-top: 1px solid var(--dh-line); border-radius: 0; box-shadow: none; }
.admin-modern .card > ul.rows > li { padding-inline: 0; }
.admin-modern .card.col-side > :last-child { margin-bottom: 0; }

/* ===== The modern look: page by page ===== */
/* Händelselogg, Mina inställningar, Hjälp and Mina mallar in the composition of admin-modern-refine.css: a main column and a side column from 64rem, white
   cards with a 1 px line and 6 px corners, small spaced-capital labels. Linked after admin-modern-refine.css; it uses that file's .page-cols, .col-main,
   .col-side and .card and changes none of them. */

/* ---------- Händelselogg: the days as cards on the left, the filter as one card on the right ---------- */
.admin-modern .log-cols > .col-main { gap: var(--s-3); }
.admin-modern .log-cols .card > h2.log-day { margin: 0 0 var(--s-3); }
.admin-modern .log-cols .card > .rows.log { border-top: 1px solid var(--dh-line); }
.admin-modern .log-cols .card > .empty { margin: 0; }
.admin-modern .log-cols .pager { margin: 0; }
.admin-modern form.log-filter.card { display: block; }
.admin-modern form.log-filter.card > h2 { margin: 0 0 var(--s-3); }
.admin-modern form.log-filter.card .actions { margin-top: var(--s-3); }
@media (min-width: 64rem) {
  .admin-modern .log-cols > .col-side { position: sticky; top: var(--s-3); }
}
@media (max-width: 63.99rem) {
  .admin-modern .log-cols > .col-side { order: -1; }   /* the filter is above the list when the columns are stacked: the list is fifty rows long */
}
@media (max-width: 40rem) {
  .admin-modern form.log-filter.card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-modern form.log-filter.card > h2, .admin-modern form.log-filter.card .field:nth-of-type(1), .admin-modern form.log-filter.card .actions { grid-column: 1 / -1; }
}

/* ---------- Mina inställningar: the account on the left, Microsoft and logging out on the right ---------- */
.admin-modern .settings-cols .settings-group.card > h2:first-child { margin-top: 0; }
.admin-modern .settings-cols .info-card { max-width: none; margin: 0 0 var(--s-4); padding: var(--s-3) 0 0; }
.admin-modern .settings-cols form.narrow { max-width: none; }
.admin-modern .settings-cols .settings-logout .logout-form { margin: 0 0 var(--s-4); }
.admin-modern .settings-cols .settings-group > p { margin: 0 0 var(--s-3); }
.admin-modern .settings-cols .settings-group > form:last-child, .admin-modern .settings-cols .settings-group > p:last-child { margin-bottom: 0; }

/* ---------- Hjälp: the guide on the left, the search as a card on the right (first on a phone) ---------- */
.admin-modern .help-cols > .col-main .help-guide { max-width: var(--w-form); }
.admin-modern .help-cols .help-search.card { margin: 0; }
.admin-modern .help-cols .help-search.card[hidden] { display: none; }
.admin-modern .help-cols .help-search.card label { display: block; margin: 0 0 var(--s-3); color: var(--dh-navy); font-size: var(--t-meta); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }
.admin-modern .help-cols .help-search.card input { width: 100%; }
.admin-modern .help-cols .help-search.card #help-nohits { margin: var(--s-2) 0 0; }
@media (min-width: 64rem) {
  .admin-modern .help-cols > .col-side { position: sticky; top: var(--s-3); }
}
@media (max-width: 63.99rem) {
  .admin-modern .help-cols > .col-side { order: -1; }
  .admin-modern .help-cols > .col-side:has(> [hidden]) { display: none; }
}

/* ---------- Mina mallar: each list is a card, the rows run to the card's edges ---------- */
.admin-modern main > section.card > p:only-of-type { margin: 0; }

/* ---------- Bilder: the pictures as the main column, the upload as a card on the right (first on a phone) ---------- */
.admin-modern .bild-cols > .col-main { grid-row: 1; }
.admin-modern .bild-cols > .card > h2.bild-list-title { margin: 0 0 var(--s-3); }
.admin-modern .bild-cols .bild-grid { grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: var(--s-4) var(--s-3); margin: 0; }
.admin-modern .bild-cols .bild-card { min-width: 0; }
.admin-modern .bild-cols .bild-card .bild-actions { flex-wrap: wrap; }
.admin-modern .bild-cols .bild-paging { margin: var(--s-4) 0 0; }
.admin-modern .bild-cols > .bild-upload.card { max-width: none; padding: var(--s-4); background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: var(--dh-radius); }
.admin-modern .bild-cols .bild-upload > h2:first-child { margin: 0 0 var(--s-3); }
.admin-modern .bild-cols .bild-upload .actions { margin-top: var(--s-3); }
@media (min-width: 64rem) {
  .admin-modern .bild-cols > .bild-upload.card { grid-row: 1; position: sticky; top: var(--s-3); }
}
@media (max-width: 63.99rem) {
  .admin-modern .bild-cols > .bild-upload.card { order: -1; }
}
@media (max-width: 40rem) { .admin-modern .bild-cols > .bild-upload.card { padding: var(--s-3); } }

/* ---------- Utseende: theme cards, colours and fonts as the main column, the preview as a sticky card on the right ---------- */
.admin-modern .tm-layout.page-cols { gap: var(--s-3) var(--s-4); }
@media (min-width: 64rem) {
  .admin-modern .tm-layout.page-cols { grid-template-columns: minmax(0, 1fr) minmax(24rem, 32rem); }
  .admin-modern .tm-preview.card { position: sticky; top: var(--s-3); z-index: 1; }
}
/* the settings are not sticky any more; the fixed save row stays above the sticky preview (z-index 25 over 1), and the form keeps its own layer over everything after it */
.admin-modern .tm-settings { position: relative; z-index: 26; display: flex; flex-direction: column; gap: var(--s-3); }
.admin-modern .tm-settings > .tm-group { margin: 0; padding: var(--s-1) var(--s-4); background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: var(--dh-radius); }
.admin-modern .tm-settings > .tm-group:last-of-type { border-bottom: 1px solid var(--dh-line); }
.admin-modern .tm-group > summary { color: var(--dh-navy); font-size: var(--t-meta); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.admin-modern .tm-group[open] > summary { margin-bottom: var(--s-2); }
.admin-modern .tm-preview.card > .tm-preview-head { margin-bottom: var(--s-3); }
.admin-modern .tm-preview.card > .tm-preview-head h2 { color: var(--dh-navy); font-size: var(--t-meta); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 40rem) {
  .admin-modern .tm-settings > .tm-group { padding-inline: var(--s-3); }
  .admin-modern .tm-preview.card { padding: var(--s-3); }
}

/* ---------- Bilder, Rotera och beskär: the picture large on the paper, quiet text buttons above it, a white frame with four 44 px corner handles ---------- */
.admin-modern .crop-name { margin: 0 0 var(--s-3); font-size: var(--t-label); font-weight: 600; overflow-wrap: anywhere; }
.admin-modern .crop-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-3); padding: 0 0 var(--s-3); border-bottom: 1px solid var(--dh-line); }
.admin-modern .crop-toolbar[hidden] { display: none; }
.admin-modern .crop-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.admin-modern .crop-group-label { color: var(--dh-muted); font-size: var(--t-meta); margin-right: var(--s-1); }
.admin-modern .crop-group .btn { padding-inline: 0.75rem; }
.admin-modern .crop-group .btn[aria-pressed="true"] { border-color: var(--dh-navy); }
.admin-modern .crop-stage { padding: 22px; background: var(--dh-paper); border: 1px solid var(--dh-line); border-radius: var(--dh-radius); overflow: hidden; }
.admin-modern .crop-source { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.admin-modern .crop-source[hidden] { display: none; }
.admin-modern .crop-box { position: relative; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.admin-modern .crop-canvas { display: block; }
.admin-modern .crop-shade { position: absolute; background: rgba(20, 24, 30, 0.55); pointer-events: none; }
.admin-modern .crop-frame { position: absolute; box-sizing: border-box; border: 2px solid #fff; outline: 1px solid var(--dh-navy); cursor: move; touch-action: none; }
.admin-modern .crop-frame:focus-visible { outline: 3px solid var(--dh-navy); outline-offset: 2px; }
.admin-modern .crop-handle { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; background: transparent; border: 0; border-radius: 4px; touch-action: none; }
.admin-modern .crop-handle::after { content: ""; position: absolute; left: 13px; top: 13px; width: 18px; height: 18px; box-sizing: border-box; background: #fff; border: 2px solid var(--dh-navy); border-radius: 2px; }
.admin-modern .crop-handle:focus-visible { outline: 3px solid var(--dh-navy); outline-offset: -3px; }
.admin-modern .crop-handle-nw { left: 0; top: 0; cursor: nwse-resize; }
.admin-modern .crop-handle-ne { left: 100%; top: 0; cursor: nesw-resize; }
.admin-modern .crop-handle-sw { left: 0; top: 100%; cursor: nesw-resize; }
.admin-modern .crop-handle-se { left: 100%; top: 100%; cursor: nwse-resize; }
.admin-modern .crop-card .hint[hidden] { display: none; }
.admin-modern .crop-original form { margin: 0; }
@media (max-width: 40rem) {
  .admin-modern .crop-card { padding-inline: var(--s-3); }
  .admin-modern .crop-toolbar { gap: var(--s-1) var(--s-3); }
}

/* ---------- Sök: the field in a card, the hits in one card per group ---------- */
.admin-modern .search-form { margin: 0 0 var(--s-3); }
.admin-modern .search-form label { display: block; margin: 0 0 var(--s-2); font-size: var(--t-label); font-weight: 700; }
.admin-modern .search-row { display: flex; gap: var(--s-2); }
.admin-modern .search-row input[type="search"] { flex: 1 1 auto; min-width: 0; }
.admin-modern .search-count { margin: var(--s-4) 0 var(--s-3); color: var(--dh-muted); }
.admin-modern .search-hits .row-main { display: flex; gap: var(--s-1) var(--s-3); }
.admin-modern .search-hits .row-main > strong { min-width: 0; }
.admin-modern .search-excerpt { flex: 1 1 100%; }
.admin-modern .search-hits mark { padding: 0; color: var(--dh-ink); background: color-mix(in srgb, var(--dh-red) 14%, transparent); border-radius: 2px; font-weight: 700; }
.admin-modern .search-none > p { margin: 0 0 var(--s-2); }
@media (max-width: 40rem) { .admin-modern .search-row .btn { padding-inline: 1rem; } }
.admin-modern .search-hits .row-main > strong > a { display: block; min-height: 2.75rem; padding-block: 0.55rem; }
.admin-modern .menu-small .menu-help { min-width: 2.75rem; justify-content: center; text-align: center; }

/* ---------- large text on a phone ----------
   With the browser's default font size raised ("very large text") a 320-414 px screen is only 10-17 rem wide, and rem media queries follow that setting. From 320 px at the normal
   size the screen is 20 rem or more, so nothing below applies to normal text (kept at the very end: it must win over the rules above with the same weight). */
@media (max-width: 19.99rem) {
  .skip-link { top: -12rem; }   /* "Hoppa till innehållet" on two lines is taller than 4rem and showed its lower edge over the logo */
  /* the header: the logo on a row of its own, Sök, Hjälp and Meny on the row under it at the right (they wrap rather than run off the screen or over the logo);
     the logo keeps about its normal size, the three are 44 px high, as the words need, not the 88 px a doubled rem would make them */
  .dh-page .top-inner { padding-inline: 0.5rem; }
  .admin-modern .top-inner { flex-wrap: wrap; gap: 0 0.5rem; }
  .admin-modern .brand { flex: 0 1 auto; max-width: 100%; min-height: 44px; }
  .admin-modern .brand-logo img { width: min(7.1rem, 50vw); max-width: 100%; height: auto; }
  .admin-modern .menu-small { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
  .admin-modern .menu-help { min-height: 44px; padding: 0 0.25rem; }
  .admin-modern .menu-more summary { min-height: 44px; padding: 0 0.5rem; }
  .admin-modern .menu-more-body { min-width: 0; width: max-content; max-width: calc(100vw - 1rem); }
  .admin-modern .menu-more-body :is(a, p, .btn) { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }   /* "Kontaktuppgifter" and "Utvecklarportal" are hyphenated inside the open menu instead of running past the screen */
  /* a long word in a title breaks instead of widening the page */
  .admin-modern h1, .dh-kicker, .dh-label { overflow-wrap: anywhere; }
  .dh-hero { grid-template-columns: minmax(0, 1fr); }
  .dh-live-body { flex-direction: column; }   /* Hem: the picture above the text of the notice, not beside it (the text had 24 px) */
  .admin-modern .publish-card .btn { min-width: 0; }
  /* the save row along the bottom: the buttons share the row and wrap their words instead of being cut (a word too long for the screen is hyphenated), 44 px high at least */
  .admin-modern .action-bar:not(.editor-bar) .btn { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0.1rem 0.5rem; white-space: normal; line-height: 1.2; hyphens: auto; }
}