/* =========================================================
   Matematikrevyen – Shared Stylesheet
   ========================================================= */

/* Preview: classic LaTeX (Computer Modern) font, site-wide.
   Loaded here (not per-page) since style.css is already shared
   on every page. */
@import url("https://cdn.jsdelivr.net/gh/vsalvino/computer-modern@main/fonts/serif.css");

/* --- Palette ---------------------------------------------
   Warm honey/walnut wood theme. Defined here (loaded on every
   page) so all content stylesheets can reference these tokens. */
:root {
  --bg: #e4d3b3;         /* page background (honey oak) */
  --surface: #f1e6cf;    /* cards / cells / panels (warm cream) */
  --surface-2: #eee2cc;  /* secondary fills (rows, hovers) */
  --border: #d3bf9c;     /* borders (tan) */
  --text: #2e2416;       /* primary text (warm near-black) */
  --header: #1f2328;     /* header — unchanged near-black */
  --accent: #3b82d4;     /* blue — solid primary buttons only */
  /* Warm accent: the site-wide standard for secondary-button hover and
     text-field focus (Arkiv opts out). Sourced from the Budget
     "Rediger" hover the design settled on. */
  --accent-warm:      #d8b878;                /* hover/focus border */
  --accent-warm-fill: #f6ecd8;                /* hover background   */
  --accent-warm-text: #9a6700;                /* hover text         */
  --accent-warm-ring: rgba(216, 184, 120, 0.35); /* focus glow      */
  --input-bg: #fdf8ec; /* warm cream — form-control background site-wide */

  --text-muted: #57606a;     /* muted meta/secondary text */
  --danger: #c0392b;         /* danger text/border */
  --success: #1a7f37;        /* success/confirm text */
  --neutral-border: #9ca3af; /* neutral hover border / disabled icon */
  --danger-bg: #fbf1f0;      /* pale danger background (matches .btn-small-danger:hover) */
  --modal-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* standard overlay-modal shadow */

  /* Priority palette shared by Stjerneark (manus.css) and the Rekvisitten
     sidebar (schedule.css) — one source of truth for what used to be two
     hand-synced copies of the same 8 hex values. Space-separated (not
     comma-separated) so rgb(var(--prio-N-rgb)) and the translucent
     rgb(var(--prio-N-rgb) / alpha) form both stay valid modern syntax —
     mixing a comma-separated var into a slash-alpha rgb() is invalid and
     gets the whole declaration silently dropped. */
  --prio-0-rgb: 134 239 172; --prio-0-text: #14532d;
  --prio-1-rgb: 147 197 253; --prio-1-text: #1e3a8a;
  --prio-2-rgb: 252 211 77;  --prio-2-text: #78350f;
  --prio-3-rgb: 252 165 165; --prio-3-text: #7f1d1d;
}

/* --- Reset & base ---------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
}

body {
  font-family: "Computer Modern Serif", serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Global focus-visible default -------------------------
   Site-wide fallback: any focusable element with no more specific
   :focus-visible rule of its own gets an amber ring instead of the
   browser's default blue. :where() gives this zero specificity, so
   every real selector — including the semantic red/green/blue
   exceptions elsewhere on the site — always wins automatically,
   with no !important or load-order care needed. This also means any
   new element added later gets an amber ring for free. */
:where(a, button, input, textarea, select, summary, [tabindex], [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
}

/* --- Site header / navigation ---------------------------- */
.site-header {
  background: var(--header);
  color: #ffffff;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-title {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #ffffff;
}

.site-nav {
  display: flex;
  gap: 0.25rem;
}

/* Direct-child combinator (not a bare descendant selector) so this
   doesn't also style the <a> tags inside a grouped tab's dropdown
   (.site-nav-group > .site-nav-dropdown > a), which are meant to look
   like .site-list-row popup rows instead of top-level nav links. */
.site-nav > a {
  color: #c9d1d9;
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background 0.15s, color 0.15s;
}

@media (hover: hover) {
  .site-nav > a:hover {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
  }
}

.site-nav > a:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
}

.site-nav > a.active {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  font-weight: 500;
}

.site-nav-locked {
  color: #6e7681;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  cursor: not-allowed;
  user-select: none;
}

/* --- Redskaber-style grouped nav tab (desktop dropdown) ---- */
.site-nav-group {
  position: relative;
}

.site-nav-group-btn {
  background: none;
  border: none;
  color: #c9d1d9;
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

@media (hover: hover) {
  .site-nav-group-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
  }
}

.site-nav-group-btn:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
}

.site-nav-group-btn.active {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  font-weight: 500;
}

.site-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.3rem;
  min-width: 11rem;
}

/* .site-list-row is normally a <button> (site-utils.js's popups); here
   it's an <a>, so it needs the underline reset explicitly. */
.site-nav-dropdown a {
  text-decoration: none;
}


/* --- Login button / modal --------------------------------- */
.site-auth {
  margin-left: auto;
}

.site-login-btn {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

@media (hover: hover) {
  .site-login-btn:hover {
    background: rgba(255,255,255,0.2);
  }
}

.site-gate-login {
  background: var(--accent);
  border: none;
}

@media (hover: hover) {
  .site-gate-login:hover {
    background: #2f6cb3;
  }
}

.site-gate-card {
  width: 50%;
  min-width: 260px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (max-width: 719px) {
  .site-gate-card { width: 100%; }
}

.site-gate-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}

.login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.login-modal {
  background: var(--surface);
  border-radius: 8px;
  padding: 1.5rem;
  width: min(340px, 90vw);
  box-shadow: var(--modal-shadow);
}

.login-modal h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.login-modal p {
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.login-modal input[type="password"] {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--input-bg);
}

.login-error {
  color: var(--danger);
  font-size: 0.82rem;
  min-height: 0;
  margin-top: 0;
  line-height: 0;
}

/* Reserve the visible height/gap only once there's actually an error to
   show — otherwise every modal pays this space above its button row on
   every open, stacking with .login-actions' own margin-top below.
   line-height is reset to 0 above (belt-and-suspenders against an empty
   block still claiming a line-height-tall "strut" in some engines) and
   restored to normal here once there's real text to lay out. */
.login-error:not(:empty) {
  min-height: 1.2em;
  margin-top: 0.4rem;
  line-height: 1.4;
}

.login-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Site-wide floor for every newly-styled square button (Manus excepted —
   it has its own sizing system), matched to Budget's own "Rediger" button
   on the main sheet — the reference size the rest of the site now floors
   to. Longer labels still grow past it naturally; this only stops a short
   one (e.g. "Slet" next to "Annuller") from looking noticeably lighter/
   narrower than its neighbor. A handful of modals with their own explicit
   corner layout (.cal-event-actions, .faelles-connect-modal .login-actions)
   override both this and justify-content above. */
.login-actions > button {
  min-width: 5rem;
}

/* The plain login modal (openLoginModal in site.js, not one of
   site-utils.js's edit modals) puts its single submit button in the
   bottom-right corner instead of centering it. */
.login-actions.login-actions-end {
  justify-content: flex-end;
}

.site-btn-primary {
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  background: var(--accent);
  color: #ffffff;
  border: none;
}

@media (hover: hover) {
  .site-btn-primary:hover { background: #2f6cb3; }
}
.site-btn-primary:disabled { opacity: 0.6; cursor: default; }
.site-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 212, 0.35);
}

/* Solid-red sibling of .site-btn-primary — same tier/shape, for a
   destructive action that should read as visually equal-weight to a
   primary save button (e.g. Budget's "Slet budget" next to "Gem budget"). */
.site-btn-danger {
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  background: var(--danger);
  color: #ffffff;
  border: none;
}

@media (hover: hover) {
  .site-btn-danger:hover { background: #a5311f; }
}
.site-btn-danger:disabled { opacity: 0.6; cursor: default; }
.site-btn-danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.35);
}

/* Solid-warm sibling of .site-btn-primary/-danger — same tier/shape, for a
   secondary (non-save, non-destructive) action that should still read as
   visually equal-weight, e.g. Budget's "Rediger" next to "Slet"/"Gem". */
.site-btn-warm {
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  background: var(--accent-warm-text);
  color: #ffffff;
  border: none;
}

@media (hover: hover) {
  .site-btn-warm:hover { background: #7a5200; }
}
.site-btn-warm:disabled { opacity: 0.6; cursor: default; }
.site-btn-warm:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-warm-ring);
}

/* Solid-green sibling of .site-btn-primary/-danger/-warm — same tier/
   shape, for a positive-but-not-the-main-save action, e.g. Formularer's
   "Skabelon" beside "Annuller"/"Gem". */
.site-btn-success {
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  background: var(--success);
  color: #ffffff;
  border: none;
}

@media (hover: hover) {
  .site-btn-success:hover { background: #146a2c; }
}
.site-btn-success:disabled { opacity: 0.6; cursor: default; }
.site-btn-success:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(26, 127, 55, 0.35);
}

/* --- Overlay pill buttons (site-wide second-level standard) -----
   Every button inside a .login-overlay/.login-modal (login, editor,
   and confirm-dialog forms) except the blue .site-btn-primary. Idle
   shape/colour matches the oval look Budget/Kalender each grew on
   their own; the hover/focus-visible treatment is modelled on
   .arkiv-action-btn's link pills (archive.css): a neutral background
   + border + soft shadow, with each colour variant only overriding
   border-color to match its own text colour. */
.site-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem;
  min-width: 5.8rem;
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-pill-btn:disabled { opacity: 0.6; cursor: default; }
.site-pill-primary { color: var(--success); }
.site-pill-danger  { color: var(--danger); }
.site-pill-warm    { color: var(--accent-warm-text); }

.site-pill-btn:focus-visible {
  background: var(--surface-2);
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 2px var(--accent-warm-ring);
  outline: none;
}
.site-pill-primary:focus-visible { border-color: var(--success); }
.site-pill-danger:focus-visible  { border-color: var(--danger); }
.site-pill-warm:focus-visible    { border-color: var(--accent-warm-text); }

@media (hover: hover) {
  .site-pill-btn:hover {
    background: var(--surface-2);
    border-color: var(--text);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  }
  .site-pill-primary:hover { border-color: var(--success); }
  .site-pill-danger:hover  { border-color: var(--danger); }
  .site-pill-warm:hover    { border-color: var(--accent-warm-text); }
}

/* --- Mobile menu (hamburger + overlay) --------------------
   z-index ladder: header 100 → menu overlay 150 → login/edit
   modals 200. Which layout shows isn't a fixed viewport breakpoint —
   SITE_PAGES can grow past what a wide-but-not-huge window can fit,
   so site.js measures the header's real content width and toggles
   `.site-header-collapsed` whenever the inline nav+login would
   overflow, regardless of viewport size (see siteUpdateHeaderFit()). */
.site-header.site-header-collapsed .site-nav,
.site-header.site-header-collapsed .site-auth {
  display: none;
}

.site-menu-btn {
  display: none; /* shown once site.js marks the header collapsed */
  flex-direction: column;
  justify-content: space-between;
  width: 44px;
  height: 44px;
  padding: 14px 10px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
}

.site-menu-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: #ffffff;
  border-radius: 1px;
}

.site-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--header);
  display: flex;
  flex-direction: column;
  padding: 0 1.25rem 1.25rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.site-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  flex-shrink: 0;
}

.site-menu-close {
  background: none;
  border: none;
  color: #c9d1d9;
  font-size: 1.4rem;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  outline: none;
}

.site-menu-close:focus-visible {
  outline: 2px solid var(--accent-warm);
}

.site-header-collapsed .site-menu-btn {
  display: flex;
}

.site-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1rem;
}

.site-menu-nav a {
  color: #c9d1d9;
  text-decoration: none;
  font-size: 1.25rem;
  padding: 0.75rem 0.5rem;
  border-radius: 6px;
}

.site-menu-nav a:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
}

.site-menu-nav a.active {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  font-weight: 500;
}

.site-menu-nav .site-nav-locked {
  color: #6e7681;
  font-size: 1.25rem;
  padding: 0.75rem 0.5rem;
  cursor: not-allowed;
  user-select: none;
}

/* --- Redskaber-style grouped nav tab (mobile accordion) ---- */
.site-menu-nav-group-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #c9d1d9;
  font-size: 1.25rem;
  font-family: inherit;
  padding: 0.75rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}

.site-menu-nav-group-btn:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
}

.site-menu-nav-group-btn.active {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  font-weight: 500;
}

.site-menu-nav-sub:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1rem;
}

.site-menu-nav-sub a {
  font-size: 1.1rem;
}

.site-menu-auth {
  margin-top: auto;
  padding-top: 1.5rem;
}

.site-menu-auth .site-login-btn {
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 1rem;
}

body.site-menu-open {
  overflow: hidden;
}

/* --- Main content ---------------------------------------- */
.page-content {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.page-content h1 {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--text);
  text-align: center;
}

.page-content h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text);
}

/* --- Card ------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.card ul {
  padding-left: 1.2rem;
}

/* --- Dashboard feed + bosses sidebar layout (Forside) ------ */
.dashboard-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: start;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.dashboard-columns .card {
  margin-bottom: 0;
  min-width: 0;
}

.dashboard-board {
  display: flex;
  flex-direction: column;
}

#posts-load-more {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.card .boss-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.boss-list li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.boss-name {
  font-weight: 600;
  color: var(--text);
}

.boss-role {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Narrower sidebar context (Forside's right column) — same markup,
   smaller font so it reads as a supporting column, not a competing one. */
.dashboard-board-bosses .boss-list {
  gap: 0.45rem;
  margin-top: 1.1rem;
}

.dashboard-board-bosses .boss-name {
  font-size: 0.85rem;
}

.dashboard-board-bosses .boss-role {
  font-size: 0.75rem;
}

/* --- Bosses inline edit mode (bosses.js renderBossesEdit) --------------
   Deliberately kept as close to the normal-mode card's own look as
   possible, mirroring budget.js's own Rediger toggle
   (buildCategoryEditSection): text edited in place — transparent fields
   that read as plain text until focused (.boss-manage-text-input, same
   recipe as budget.css's .budget-manage-text-input) rather than a
   separate overlay form. Rows are draggable via the row itself (no
   dedicated handle column), deletion is a plain unboxed "✕", and the
   list grows via a small "+" below the last row. */
.boss-manage-text-input {
  width: 100%;
  padding: 0.15rem 0.3rem;
  margin: -0.15rem -0.3rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  color: inherit;
  outline: none;
}

/* Border-on-hover, white background while actively editing — same recipe
   as Fællesspisning's own field styling (faellesspisning.css). */
@media (hover: hover) {
  .boss-manage-text-input:hover {
    border-color: var(--border);
  }
}

.boss-manage-text-input:focus {
  outline: none;
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 2px var(--accent-warm-ring);
  background: var(--input-bg);
}

.boss-manage-title-input {
  flex: 1;
  min-width: 0;
  font-size: inherit;
  font-weight: inherit;
}

.boss-list-editing.boss-list-editing {
  gap: 0.3rem;
  /* Dead space below the last row to drop into — without it the list's
     own box ends exactly at the last row, so there's nowhere to drop
     that means "after the last row" (see bosses.js's list-level fallback
     drop zone). */
  padding-bottom: 0.9rem;
  border-bottom: 2px solid transparent;
  transition: border-bottom-color 0.15s;
}

.boss-list-editing.boss-list-editing.boss-drop-target {
  border-bottom-color: var(--accent-warm);
}

/* Overrides .boss-list li's own display:flex/flex-direction:column —
   needs the extra .boss-list specificity to win, since a plain .boss-list
   li li selector otherwise outranks a single-class .boss-manage-row rule.
   Kept to layout only (not the border-top below) — folding border-top
   into this same higher-specificity selector would outrank
   .boss-manage-row.boss-drop-target's own override and the drag
   highlight would never show. */
.boss-list.boss-list-editing li.boss-manage-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  cursor: grab;
}

.boss-manage-row:active { cursor: grabbing; }

/* Drop-target highlight shows only the row's top edge (the insertion
   point) — a transparent 2px top border at rest (reserving the space so
   nothing shifts) that animates to accent-warm on drag-over, same recipe
   as budget.css's .budget-manage-tr/.budget-drop-target. */
.boss-manage-row {
  border-top: 2px solid transparent;
  padding-top: 2px;
  transition: border-top-color 0.15s;
}

.boss-manage-row.boss-drop-target {
  border-top-color: var(--accent-warm);
}

/* Role above names (own text column), matching the view-mode order —
   keeps each field on its own full-width line (names can be long
   comma-separated lists) with the remove button aligned to the right. */
.boss-manage-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.boss-manage-name-input {
  font-weight: 600;
  font-size: 0.85rem;
}

.dashboard-board-bosses .boss-manage-name-input {
  font-size: 0.8rem;
}

.boss-manage-role-input {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dashboard-board-bosses .boss-manage-role-input {
  font-size: 0.72rem;
}

.boss-manage-remove-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.2rem;
  border-radius: 6px;
  color: var(--text-muted);
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s;
}

@media (hover: hover) {
  .boss-manage-remove-btn:hover { color: var(--danger); }
}

.boss-manage-remove-btn:focus-visible {
  outline: none;
  color: var(--danger);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.25);
}

/* Purely-visual grab affordance, leading (leftmost) in the row (see
   bosses.js) — same glyph/sizing recipe and now same leading position as
   manus.css's .manus-akt-drag-handle and wiki.css's .wiki-manage-drag-handle. */
.boss-manage-drag-handle {
  flex: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: grab;
}

.boss-manage-row:active .boss-manage-drag-handle { cursor: grabbing; }

/* bossesGetDragImageEl()'s shared, reused drag-image element (js/bosses.js)
   — see forms.js's formsGetDragImageEl for the full rationale. Positioned
   off-screen (not display:none, which some browsers refuse to snapshot)
   so it never actually appears in the page's own layout. */
.bosses-drag-image {
  position: fixed;
  top: -999px;
  left: -999px;
  padding: 0.4rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  box-shadow: var(--modal-shadow);
}

/* One row along the bottom: "+" (left) — error (center, grows/shrinks to
   fill whatever's left) — "Gem" (right, kept small rather than the
   site-wide full-width .site-btn-primary). */
.boss-editbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.boss-manage-add-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s;
}

@media (hover: hover) {
  .boss-manage-add-plus:hover { color: var(--accent-warm-text); }
}

.boss-manage-add-plus:focus-visible {
  outline: none;
  color: var(--accent-warm-text);
  box-shadow: 0 0 0 2px var(--accent-warm-ring);
}

.boss-manage-error {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--danger);
}

.boss-manage-save-btn {
  flex: none;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
}

/* Shared icon-only "remove" button (✕) — used by Formularer's field/section
   delete buttons (js/forms.js). Not Bosser-specific despite the name. */
.boss-edit-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0.5rem 0.35rem;
  line-height: 1;
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
}

@media (hover: hover) {
  .boss-edit-remove:hover { background: var(--surface-2); color: var(--danger); }
}

.boss-edit-remove:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
}

.boss-edit-remove:disabled {
  opacity: 0.4;
  cursor: default;
}

/* --- Edit modal (site-utils.js siteOpenEditModal) --------- */
.edit-modal {
  width: min(480px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
}

/* --- X-close top-right (site-utils.js siteOpenModalWithClose) --- */
.site-modal {
  position: relative;
}

.site-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

@media (hover: hover) {
  .site-modal-close:hover { background: var(--surface-2); }
}

.site-modal-close:focus-visible {
  outline: 2px solid var(--accent-warm);
  background: var(--surface-2);
}

/* --- Custom date/time/dropdown picker fields (site-utils.js) -----
   Native <input type="date">/type="time"> and <select> hand their
   picker/dropdown UI off to the OS/browser (a closed shadow root,
   unstylable), so these replace them with popups built from the
   site's own chrome. .site-field-btn mirrors .edit-field input's
   look so it sits flush in the same form; the trailing ▾ reuses the
   import tool's chevron affordance rather than inventing a new icon.
   Originally Kalender-only, now the site-wide standard for any page's
   dropdowns/date/time fields (Forside, Budget, ...). */
.site-field-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--header);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
  .site-field-btn:hover { border-color: var(--accent-warm); }
}

.site-field-btn:focus-visible {
  outline: none;
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 2px var(--accent-warm-ring);
}

.site-field-placeholder {
  color: var(--text-muted);
}

.site-field-chevron {
  color: var(--text-muted);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.site-field-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

/* Typeable combo field (time): unlike the date/dropdown fields
   (button-only, picker required), time also accepts free typing —
   restores the native input's old behaviour — so this wraps a real
   text <input> plus a clock-icon toggle for the picker. overflow:
   hidden + border-radius:0 on both children clips them flush into
   the wrapper's own rounded border, so it reads as one field with
   an icon accessory, not two controls side by side. */
.site-field-combo {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--input-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
  .site-field-combo:hover { border-color: var(--accent-warm); }
}

.site-field-combo:focus-within {
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 2px var(--accent-warm-ring);
}

.site-field-input {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  padding: 0.5rem 0.6rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--header);
  box-shadow: none;
}

/* .edit-field input has higher specificity than .site-field-input alone
   and would otherwise re-draw its own border/focus-ring on just the
   typed portion, splitting the combo back into two visible fields. */
.site-field-combo .site-field-input,
.site-field-combo .site-field-input:focus {
  border: none;
  box-shadow: none;
}

.site-field-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 0.6rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .site-field-toggle:hover {
    background: var(--accent-warm-fill);
    color: var(--accent-warm-text);
  }
}

/* The toggle sits inside .site-field-combo, which already draws a warm
   border+ring via :focus-within when the toggle is focused — its own
   outline just needs suppressing so the browser default doesn't show. */
.site-field-toggle:focus-visible {
  outline: none;
  background: var(--accent-warm-fill);
  color: var(--accent-warm-text);
}

/* Shared popup chrome — position:fixed + left/top set in JS.
   z-index 210: above login/edit modals (200, see CLAUDE.md's ladder). */
.site-field-pop {
  z-index: 210;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 0.6rem;
}

/* --- Date picker popup --------------------------------------- */
.site-dp-pop {
  width: min(17.5rem, calc(100vw - 1rem));
}

.site-dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.site-dp-label {
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: capitalize;
}

.site-dp-nav {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 1.7rem;
  height: 1.7rem;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
  color: var(--text);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .site-dp-nav:hover {
    background: var(--accent-warm-fill);
    border-color: var(--accent-warm);
    color: var(--accent-warm-text);
  }
}

.site-dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
}

.site-dp-weekday {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  padding-bottom: 0.15rem;
}

.site-dp-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.3rem 0;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
  .site-dp-day:hover {
    background: var(--accent-warm-fill);
    border-color: var(--accent-warm);
  }
}

.site-dp-today {
  border-color: var(--border);
  font-weight: 600;
}

.site-dp-selected {
  background: var(--accent-warm-text);
  border-color: var(--accent-warm-text);
  color: #ffffff;
}

@media (hover: hover) {
  .site-dp-selected:hover {
    background: var(--accent-warm-text);
    border-color: var(--accent-warm-text);
  }
}

/* --- Time picker popup / generic list-row style ---------------
   .site-list-row/.site-list-selected are shared by the time picker's
   rows and the generic dropdown picker below (and, with an added
   coloured dot, Kalender's own category picker in calendar.css). */
.site-tp-pop {
  width: 9rem;
  max-height: 16rem;
  display: flex;
  flex-direction: column;
}

.site-list-row {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease;
  /* Renders an explicit \n (e.g. Formularer's connect-modal "Title\n(N svar)"
     labels) as a real line break; a no-\n label is unaffected since a run of
     ordinary whitespace still collapses to one space either way. */
  white-space: pre-line;
}

@media (hover: hover) {
  .site-list-row:hover { background: var(--accent-warm-fill); }
}

.site-tp-clear {
  color: var(--text-muted);
  font-style: italic;
  border-bottom: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  margin-bottom: 0.3rem;
  padding-bottom: 0.45rem;
  flex-shrink: 0;
}

.site-tp-list {
  overflow-y: auto;
}

.site-tp-end {
  border-top: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  margin-top: 0.3rem;
  padding-top: 0.45rem;
  flex-shrink: 0;
}

.site-list-selected {
  background: var(--accent-warm-text);
  color: #ffffff;
}

@media (hover: hover) {
  .site-list-selected:hover { background: var(--accent-warm-text); }
}

/* --- Generic dropdown popup (category-less <select> replacement) --- */
.site-dd-pop {
  width: min(15rem, calc(100vw - 1rem));
  max-height: 20rem;
  overflow-y: auto;
}

.edit-field {
  margin-bottom: 0.75rem;
}

/* The form wrapper (siteOpenEditModal's unclassed `form` div) has no
   border/padding, so this trailing margin should collapse straight through
   it and merge with .login-actions' own margin-top below — confirmed via
   DevTools that at least one real browser instead traps it inside the form
   div, adding an extra ~11px above the button row that isn't there below
   it. Zeroing it here makes the gap depend on exactly one declared value
   (.login-actions' margin-top) instead of a multi-element collapse chain. */
.login-modal > div > .edit-field:last-child {
  margin-bottom: 0;
}

.edit-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.edit-field input,
.edit-field textarea,
.edit-field select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--header);
}

.edit-field textarea {
  min-height: 90px;
  resize: vertical;
}

/* Warm focus is the site-wide standard for text fields (Øveplan styles its
   own fields in schedule.css). */
.edit-field input:focus,
.edit-field select:focus,
.edit-field textarea:focus,
.login-modal input[type="password"]:focus {
  outline: none;
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 2px var(--accent-warm-ring);
}

.edit-field-row {
  display: flex;
  gap: 0.75rem;
}

.edit-field-row > .edit-field {
  flex: 1;
}

.edit-actions-left {
  margin-right: auto;
}

/* --- Card header + small admin buttons -------------------- */
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.card-head h2 {
  margin-bottom: 0;
}

/* Bosses' own title heading swaps in a width:100% edit input while
   editing (js/bosses.js) — as a plain flex item with no explicit size, its
   width would otherwise resolve from the input's own browser-default size
   rather than the row's actual available space, clipping the real title.
   flex:1/min-width:0 lets it claim (and the input then fill) the full row. */
#bosses-title {
  flex: 1;
  min-width: 0;
}

.btn-small {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .btn-small:not(.btn-small-danger):hover {
    background: var(--accent-warm-fill);
    border-color: var(--accent-warm);
    color: var(--accent-warm-text);
  }
}

.btn-small:focus-visible {
  outline: none;
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 2px var(--accent-warm-ring);
}

/* Native file input's "Choose file" button, styled to match .btn-small
   (idle warm-cream fill, warm-amber hover) — the browser-default button
   otherwise looks out of place next to the rest of the form. Used by
   posts.js's image picker. */
.site-file-input::file-selector-button {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  margin-right: 0.6rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .site-file-input::file-selector-button:hover {
    background: var(--accent-warm-fill);
    border-color: var(--accent-warm);
    color: var(--accent-warm-text);
  }
}

.btn-small-danger {
  color: var(--danger);
  border-color: var(--border);
}

@media (hover: hover) {
  .btn-small-danger:hover { background: var(--danger-bg); border-color: #e0b4ae; }
}

.btn-small-danger:focus-visible {
  outline: none;
  border-color: var(--danger);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* --- Messages -------------------------------------------- */
.message-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

/* Facebook-style comment row: round initial avatar + a rounded "bubble"
   holding author/text. */
.message {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-right: 1.5rem;
}

.message-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

/* 5 warm/amber tones, picked per comment by posts.js's commentAvatarVariant()
   so the thread reads with some variety instead of one flat colour. */
.message-avatar-1 { background: var(--accent-warm-text); }
.message-avatar-2 { background: #b5651d; }
.message-avatar-3 { background: #c48a2e; }
.message-avatar-4 { background: #8a5a3b; }
.message-avatar-5 { background: #a8763e; }

.message-body {
  min-width: 0;
}

.message-bubble {
  display: inline-block;
  background: var(--surface-2);
  border-radius: 14px;
  padding: 0.45rem 0.75rem;
}

.message-author {
  font-weight: 700;
  font-size: 0.85rem;
  color: #000;
}

.message-text {
  font-size: 0.9rem;
  margin-top: 0.1rem;
  white-space: pre-wrap;
}

.message-delete {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  padding: 0.15rem 0.35rem;
  line-height: 1;
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
}

@media (hover: hover) {
  .message-delete:hover { background: var(--surface-2); color: var(--danger); }
}

/* --- Post feed section breaks (Forside) -------------------- */
/* Plain rule opening the pinned section; a second, labeled one ("Opslag")
   marks where the regular posts start — see posts.js's renderPostFeed. */
.post-feed-divider {
  border-top: 1px solid var(--border);
}

.post-feed-section-label {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text);
}

.post-feed-empty-pinned {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- Post feed card (Forside) ----------------------------- */
.post-card {
  border-left: 3px solid var(--accent-warm-text);
  border-radius: 0 8px 8px 0;
  padding: 0.85rem 1rem;
  background: var(--surface-2);
}

.post-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.post-card-headtext {
  flex: 1;
  min-width: 0;
}

.post-card-author {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}

.post-card-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.post-card-category {
  display: inline-block;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  background: var(--accent-warm-fill);
  color: var(--accent-warm-text);
  font-weight: 600;
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
  margin-right: 0.3rem;
}

.post-card .post-detail-text {
  margin: 0.75rem 0 0;
}

.post-card .post-detail-cover {
  margin-top: 0.75rem;
}

.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
}

.post-card-comment-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Boss/admin-only pin toggle, right-aligned on each entry. */
.post-pin-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.3rem;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, box-shadow 0.15s;
}

@media (hover: hover) {
  .post-pin-btn:hover {
    background: var(--surface-2);
    color: var(--accent-warm-text);
    box-shadow: 0 0 8px 2px rgba(154, 103, 0, 0.45);
  }
}

.post-pin-btn:focus-visible {
  outline: none;
  color: var(--accent-warm-text);
  box-shadow: 0 0 8px 2px rgba(154, 103, 0, 0.45);
}

.post-pin-btn.pinned {
  color: var(--accent-warm-text);
}

/* --- Post detail modal (Forside boards) ------------------- */
.post-detail-cover {
  margin: 1rem auto 0;
  max-width: 220px;
}

.post-detail-cover img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}

@media (hover: hover) {
  .post-detail-cover img:hover { filter: brightness(0.93); }
}

.post-detail-text {
  background: var(--accent-warm-fill);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

.post-detail-text p {
  margin: 0;
  color: #000;
}

.post-detail-text p + p {
  margin-top: 0.6rem;
}

.post-detail-text a {
  color: var(--accent);
  word-break: break-word;
}

/* Rich-text elements a post body can now contain (see js/posts.js's
   POST_ALLOWED_TAGS) — kept on this bubble's dark-on-warm palette rather
   than a plain background, unlike wiki.css's equivalent .wiki-chapter-body
   rules this is otherwise mirrored from. */
.post-detail-text h2,
.post-detail-text h3 {
  color: #000;
  margin: 0.8rem 0 0.4rem;
}

.post-detail-text h2:first-child,
.post-detail-text h3:first-child {
  margin-top: 0;
}

.post-detail-text h2 {
  font-size: 1.1rem;
  font-weight: 600;
}

.post-detail-text h3 {
  font-size: 1rem;
  font-weight: 600;
}

.post-detail-text ul,
.post-detail-text ol {
  margin: 0 0 0.6rem 1.25rem;
  padding: 0;
  color: #000;
}

/* Word/Docs-style nested numbering, matching wiki.css's convention. */
.post-detail-text ol ol {
  list-style-type: lower-alpha;
}

.post-detail-text ol ol ol {
  list-style-type: lower-roman;
}

.post-detail-text ol ol ol ol {
  list-style-type: decimal;
}

.post-detail-text li {
  margin-bottom: 0.25rem;
}

/* --- Rich-text toolbar + editable body (create/edit-post modals) ---
   Duplicated from wiki.css's .wiki-toolbar-* and .wiki-edit-body rules
   (js/posts.js's buildPostToolbar), minus the sticky positioning — Wiki's
   toolbar sticks while scrolling a long page; this one sits inside a
   modal instead. */
.post-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.post-toolbar-btn {
  min-width: 2rem;
  text-align: center;
}

.post-toolbar-btn-bold {
  font-weight: 700;
}

.post-toolbar-btn-italic {
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
}

.post-toolbar-btn-underline {
  text-decoration: underline;
}

.post-toolbar-btn.post-toolbar-btn-active {
  background: var(--accent-warm-fill);
  border-color: var(--accent-warm);
  color: var(--accent-warm-text);
}

.post-toolbar-style {
  width: 150px;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
}

.post-edit-body {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  min-height: 120px;
  background: var(--input-bg);
  line-height: 1.5;
}

.post-edit-body:focus {
  outline: none;
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 2px var(--accent-warm-ring);
}

.post-edit-body p {
  /* Overrides .login-modal p's 0.85rem — that rule targets short plain
     modal helper text, but leaks into this richer body and shrinks
     paragraphs below list items/headings, which have no such override
     (most visibly: a bullet-listed URL line reading bigger than the
     paragraph text around it). */
  font-size: 1rem;
  margin: 0 0 0.6rem;
}

.post-edit-body p:last-child {
  margin-bottom: 0;
}

.post-edit-body ul,
.post-edit-body ol {
  margin: 0 0 0.6rem 1.25rem;
  padding: 0;
}

.post-edit-body ol ol {
  list-style-type: lower-alpha;
}

.post-edit-body ol ol ol {
  list-style-type: lower-roman;
}

.post-edit-body ol ol ol ol {
  list-style-type: decimal;
}

.post-edit-body h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0.8rem 0 0.4rem;
}

.post-edit-body h3 {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0.7rem 0 0.35rem;
}

.post-detail-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.post-detail-actions > button {
  min-width: 5rem;
}

.post-comments {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.post-comment-form {
  margin-top: 1rem;
}

.post-comment-trigger {
  display: block;
  margin-left: auto;
}

.post-comment-submit {
  display: block;
  margin-left: auto;
  /* Consistent gap above the button whether or not the preceding
     .login-error is currently showing a validation message (its own
     margin-top/min-height only apply :not(:empty) — see the base rule). */
  margin-top: 0.4rem;
}

/* Canonical definition of the site-wide "one-liner delete confirm" width
   formula — every other feature's own *-confirm-modal class (Kalender's
   .cal-confirm-modal, Wiki's .wiki-confirm-modal, Manus's
   .manus-confirm-modal, Fællesspisning's .faelles-confirm-modal, Budget's
   .budget-confirm-narrow/.streg-confirm-modal, Formularer's
   .forms-leave-modal/.forms-narrow-modal/.forms-section-delete-modal/
   .forms-response-delete-modal, Koordinator's .koord-arkiv-confirm-modal/
   .koord-mp-confirm-modal) duplicates this exact declaration rather than
   sharing a class, per this codebase's per-feature-duplication convention.
   fit-content shrink-wraps the modal to its widest actual line of content —
   this title if it's short, same title once it's long, or an explanatory
   note line below it if that happens to run longer than the title — so a
   short "Slet opslag?" still renders at this floor while a modal whose
   title/note is long (e.g. a quoted event/form name) grows just enough to
   keep that line on one row, up to the .edit-modal's own 480px ceiling
   (beyond which it wraps rather than overflows). No white-space: nowrap
   needed: block shrink-to-fit sizing already avoids an unnecessary wrap
   under max-width on its own. Deliberately excludes the handful of
   two-step "warning" delete confirms whose dynamic content lives in a
   longer wrappable body paragraph, not the title (Manus/Budget/Formularer's
   own step-1 warnings) — those keep the plain 480px .edit-modal default. */
.post-confirm-modal {
  width: fit-content;
  min-width: min(300px, 85vw);
  max-width: min(480px, 92vw);
}

/* Reads as the modal's title, since deletePost/deleteComment drop the usual
   h2 heading in favor of this one line — mirrors Kalender's
   .cal-confirm-text (calendar.css). Scoped under .login-modal (not just
   .post-confirm-text) so its specificity beats the plain ".login-modal p"
   rule above, which would otherwise win the font-size/margin-bottom
   tie-break. */
.login-modal .post-confirm-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  margin-bottom: 0.5rem;
}

/* The explanatory line below the title, in these same two dialogs. */
.login-modal .post-confirm-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 0.75rem;
}

/* --- Footer ---------------------------------------------- */
.site-footer {
  text-align: center;
  padding: 1.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: auto;
}

/* --- Toast (brief bottom-of-page confirmation, e.g. pin toggle) --- */
.site-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 8px);
  background: var(--header);
  color: #fff;
  padding: 0.65rem 1.2rem;
  border-radius: 8px;
  font-size: 0.9rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 300;
  pointer-events: none;
  max-width: min(90vw, 360px);
  text-align: center;
}

.site-toast.site-toast-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- Utility --------------------------------------------- */
p {
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

p:last-child {
  margin-bottom: 0;
}

/* --- Mobile (≤719px) --------------------------------------
   Breakpoint: 719px — keep in sync with calendar.css/schedule.css. */
@media (max-width: 719px) {
  .site-header {
    padding: 0 0.75rem 0 1rem;
    gap: 1rem;
  }

  .page-content {
    padding: 1.25rem 1rem;
  }

  .dashboard-columns {
    grid-template-columns: 1fr;
  }

  /* iOS Safari zooms into focused inputs with font-size < 16px. */
  .login-modal input[type="password"],
  .edit-field input,
  .edit-field textarea,
  .edit-field select,
  .site-field-input {
    font-size: 16px;
  }

  /* Force the style dropdown onto its own centered row when the toolbar
     wraps, instead of sharing a row with some of the format buttons. */
  .post-toolbar-style {
    flex-basis: 100%;
  }
}