:root {
  color-scheme: light;
  --bg: #f4f6f8; --panel: #fff; --text: #1f2937; --muted: #667085; --line: #d9e0ea; --primary: #0f5f8f;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--primary); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 700; text-decoration: none; color: var(--text); }
.top nav { display: flex; align-items: center; gap: 10px; }
.top form { margin: 0; }
.who { color: var(--muted); font-size: 14px; }
main { max-width: 960px; margin: 0 auto; padding: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.narrow { max-width: 380px; margin: 40px auto; }
label { display: block; margin: 12px 0; font-size: 14px; }
input, select, button { font: inherit; }
input[type=email], input[type=password] { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); cursor: pointer; }
button.primary { width: 100%; padding: 12px; background: var(--primary); color: #fff; border: none; font-weight: 600; }
/* All the tiles of a page have the same size: as wide as the column, as tall as the tallest one. */
.tiles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.tiles a { display: block; height: 100%; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); }
.tiles span { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }
.tiles span.tag { display: inline-block; margin: 0 0 0 6px; }
.muted { color: var(--muted); }
table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 12px; overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.messages { list-style: none; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.errorlist { color: #c62828; padding-left: 18px; }
h2 { font-size: 18px; margin-top: 0; }
h3 { font-size: 15px; margin: 16px 0 6px; }
.card + .card, .card + form, form + .card, .card + p { margin-top: 16px; }
.form label { max-width: 480px; }
.form input:not([type=checkbox]):not([type=radio]), .form select { display: block; width: 100%; margin-top: 4px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
label.check { display: flex; gap: 8px; align-items: center; }
.report-send label.check { padding: 8px 0; font-size: 17px; }
.report-send input[type=radio] { width: 22px; height: 22px; margin: 0; }
a.button { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; border: 1px solid var(--line); }
a.button.primary, button.primary { background: var(--primary); color: #fff; border: none; }
button.primary.auto, .form button.primary { width: auto; padding: 10px 20px; }
button.danger { color: #c62828; border-color: #c62828; }
button.small { padding: 2px 8px; font-size: 13px; }
form.inline { display: inline; margin-left: 8px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.notice { padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 16px; }
.notice.warn { border-color: #a15c00; }
.tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.posts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.posts dt { color: var(--muted); }
.posts dd { margin: 0; }
.holders { list-style: none; padding-left: 0; margin: 0; }
.holders li { margin: 4px 0; }
.scroll { overflow-x: auto; }
.matrix select { padding: 4px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.matrix th[scope=row] { white-space: normal; }
input.copy { width: 100%; padding: 8px; font-family: monospace; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
.share textarea { width: 100%; min-height: 90px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
.small { font-size: 13px; }
.pager { display: flex; gap: 16px; justify-content: center; }
.steps { padding-left: 20px; }
.steps li { margin: 14px 0; }
.qr { background: #fff; padding: 8px; border-radius: 8px; width: max-content; margin: 10px 0; }
.qr svg { display: block; width: 200px; height: 200px; }
.codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; font-size: 17px; }
details { margin-top: 12px; }
@media print { .top, button, a.button { display: none; } }
.bell { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; text-decoration: none; font-size: 14px; color: var(--muted); }
.bell.has-unread { color: var(--text); font-weight: 600; }
.bell-icon { position: relative; display: inline-flex; order: 2; }  /* after the word "Notifications" */
.bell .count { position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #d92d20; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--panel); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.notifications { list-style: none; padding: 0; }
.notifications li { padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.notifications li.unread a { font-weight: 600; }
.notifications li .small { display: block; margin-top: 2px; }

/* Confirmations drawn in the page (static/confirm.js) */
.confirm-dialog { max-width: 420px; width: calc(100% - 32px); border: 0; border-radius: 14px; padding: 18px; background: var(--panel); color: var(--text); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.confirm-dialog::backdrop { background: rgba(0,0,0,.45); }
.confirm-dialog p { margin: 0 0 16px; font-size: 16px; }
.confirm-dialog .actions { justify-content: flex-end; }
.confirm-dialog .actions button { padding: 10px 18px; }

/* Sign-up: the field for robots stays out of sight */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* First steps of a congregation */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: grid; grid-template-columns: 28px 1fr; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist .mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.checklist li.done .mark { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.checklist p { margin: 2px 0 0; }
.danger-zone { border-color: #c62828; }

/* Import preview */
table.import td { vertical-align: top; }
table.import select { padding: 4px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
table.import tr.left-out td { color: var(--muted); }
table.import td.notes { min-width: 180px; }
table.import select { max-width: 220px; }
@media (max-width: 700px) {
  table.import thead { display: none; }
  table.import, table.import tbody, table.import tr, table.import td { display: block; width: 100%; }
  table.import { background: none; }
  table.import tr { position: relative; margin-bottom: 12px; padding: 10px 12px 10px 44px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
  table.import td { padding: 4px 0; border: 0; }
  table.import td.add { position: absolute; left: 12px; top: 12px; width: auto; padding: 0; }
  table.import td[data-label] { display: flex; align-items: center; gap: 8px; }
  table.import td[data-label]::before { content: attr(data-label); min-width: 110px; color: var(--muted); font-size: 13px; }
  table.import select { max-width: none; flex: 1; }
  table.import td.notes { min-width: 0; }
  table.import td.notes:empty { display: none; }
}
.actions.below { margin-top: 16px; }
/* "Edit" mode of the page "People" */
table.bulk select { padding: 4px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--text); max-width: 220px; }
table.bulk tr.error td { background: rgba(198, 40, 40, .08); }
table.bulk small.error { color: #c62828; }
@media (max-width: 700px) {
  table.bulk thead { display: none; }
  table.bulk, table.bulk tbody, table.bulk tr, table.bulk td { display: block; width: 100%; }
  table.bulk { background: none; }
  table.bulk tr { margin-bottom: 12px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
  table.bulk td { padding: 4px 0; border: 0; }
  table.bulk td[data-label] { display: flex; align-items: center; gap: 8px; }
  table.bulk td[data-label]::before { content: attr(data-label); min-width: 110px; color: var(--muted); font-size: 13px; }
  table.bulk select { max-width: none; flex: 1; }
}
.form input[type=text], .form input[type=date] { display: block; width: 100%; margin-top: 4px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
/* Chat (personal app) */
.chat-list { list-style: none; padding: 0; margin: 0 0 16px; }
.chat-list li { border-bottom: 1px solid var(--line); }
.chat-list a { display: block; padding: 12px 4px; text-decoration: none; color: var(--text); }
.chat-messages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 96px; }
.msg { max-width: 85%; align-self: flex-start; padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); overflow-wrap: anywhere; }
.msg.mine { align-self: flex-end; background: color-mix(in srgb, var(--primary) 15%, var(--panel)); }
.msg .when { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); text-align: right; }
.chat-write { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px 16px; background: var(--panel); border-top: 1px solid var(--line); }
.chat-write button.primary { width: auto; flex: 0 0 auto; padding: 10px 18px; }
.chat-write textarea { flex: 1 1 auto; min-width: 0;padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; resize: none; }
fieldset.checks { border: 1px solid var(--line); border-radius: 8px; max-height: 240px; overflow-y: auto; }
fieldset.checks label { display: block; font-weight: normal; }
/* Service report (personal app) */
[hidden] { display: none !important; }
.report-send fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.report-send legend { font-weight: 600; margin-bottom: 4px; }
.stepper { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.stepper button { width: 48px; height: 44px; font-size: 22px; }
.stepper input { width: 80px; height: 44px; text-align: center; font-size: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
.time-inputs { display: flex; gap: 12px; }
.time-inputs label { flex: 1; }
.times { list-style: none; padding: 0; }
.times li { padding: 6px 0; border-bottom: 1px solid var(--line); }

/* The look of JW Backoffice: style A "Calm", chosen by Antonio on 26/10/2026 (clear and sober, blue, lots of air).
   It comes after the base rules above and changes only what differs. */
:root {
  --bg: #f6f8fb; --panel: #ffffff; --text: #16202e; --muted: #5f6b7a; --line: #e3e8ef; --primary: #1d5fa8;
  --accent-soft: #e8f0fa; --radius: 14px; --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
  --btn-bg: #ffffff; --btn-hover: #e8f0fa;
}
/* The theme: "system" follows the phone or the computer, "light" and "dark" are chosen by the person (theme.js puts
   data-theme on the page). In the dark the shadows do not show: they become a thin edge. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e141b; --panel: #161e28; --text: #e7edf4; --muted: #9aa8b8; --line: #243041; --primary: #6aa8ec;
    --accent-soft: #1b2a3c; --shadow: inset 0 0 0 1px #243041; --btn-bg: #1b2a3c; --btn-hover: #243041;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e141b; --panel: #161e28; --text: #e7edf4; --muted: #9aa8b8; --line: #243041; --primary: #6aa8ec;
  --accent-soft: #1b2a3c; --shadow: inset 0 0 0 1px #243041; --btn-bg: #1b2a3c; --btn-hover: #243041;
}
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; }
.top { padding: 14px 24px; box-shadow: var(--shadow); border-bottom: 0; }
.brand { font-size: 18px; letter-spacing: -.01em; color: var(--primary); }
main { padding: 28px 20px; }
h1 { font-size: 30px; letter-spacing: -.02em; margin: 8px 0 18px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.card, table, .notice { border: 0; box-shadow: var(--shadow); border-radius: var(--radius); }
.tiles { gap: 16px; }
.tiles a { border: 0; box-shadow: var(--shadow); border-radius: var(--radius); padding: 20px; transition: transform .12s, box-shadow .12s; }
.tiles a:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 24, 40, .10); }
.tiles strong { color: var(--primary); font-size: 17px; }
a.button, button { border-radius: 10px; }
a.button.primary, button.primary { box-shadow: 0 2px 8px rgba(29, 95, 168, .25); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--accent-soft); }
.tag { background: var(--accent-soft); border: 0; color: var(--primary); font-weight: 600; }
.tiles span.tag { color: var(--primary); }
/* A question stays a question; a warning keeps its colour mark. */
.report-send h2 { text-transform: none; letter-spacing: 0; font-size: 19px; color: var(--text); }
.notice.warn { box-shadow: inset 4px 0 0 #b26a00, var(--shadow); }
/* Navigation: "← back" at the top of the pages, and the other links that move between pages, as buttons. */
.back { margin: 0 0 4px; }
.back a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 12px; border-radius: 999px;
  background: var(--btn-bg); color: var(--primary); font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow); transition: background .12s, box-shadow .12s; }
.back a:hover { background: var(--btn-hover); box-shadow: 0 6px 18px rgba(16, 24, 40, .10); }
.back a:focus-visible, a.button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
a.button { background: var(--btn-bg); color: var(--primary); border: 0; box-shadow: var(--shadow); }
a.button:hover { background: var(--btn-hover); }
a.button.primary:hover { background: var(--primary); filter: brightness(1.08); }
.pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .back a, .tiles a { transition: none; } }
/* Chevrons drawn by the style instead of the arrows: back, previous and next, "open". */
.back a:not(.button)::before, a.prev::before, a.next::after, a.go::after {
  content: ""; display: inline-block; width: .45em; height: .45em; border: solid currentColor; border-width: 0 0 2px 2px;
  transform: rotate(45deg); flex: none; }
a.next::after, a.go::after { transform: rotate(-135deg); }
a.prev, a.next, a.go { display: inline-flex; align-items: center; gap: 8px; }
a.button.icon { padding: 10px 16px; }
a.go { font-weight: 600; text-decoration: none; }
/* The choice of the theme, in the top bar and in the personal app. */
.theme-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--muted); }
.theme-switch select { padding: 3px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
/* "Back", "previous" and "next": a blue circle with a white chevron, as in the apps of the phone. */
.back a:not(.button)::before, a.prev::before, a.next::after {
  width: 22px; height: 22px; border: 0; border-radius: 50%; transform: none;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3 5 8l5 5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
a.next::after { transform: scaleX(-1); }
.back a:not(.button) { padding-left: 6px; }
a.button.prev, a.button.next { padding-top: 8px; padding-bottom: 8px; }
a.button.icon { padding: 8px 10px; }
.top select { padding: 3px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
a.button.small { padding: 5px 12px; font-size: 14px; }
/* The tables of the permissions: a wider page, short columns (a role per column), compact menus. */
main.wide { max-width: 1240px; }
.matrix { table-layout: auto; }
.matrix thead th { font-size: 11px; line-height: 1.3; vertical-align: bottom; padding: 10px 6px; min-width: 80px; }
.matrix th[scope=row] { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600;
  background: var(--panel); min-width: 200px; }
.matrix td { padding: 6px; text-align: center; }
.matrix select { font-size: 13px; padding: 3px 2px; width: 100%; max-width: 112px; }
.matrix thead th { min-width: 0; }
.matrix th[scope=row] { min-width: 170px; }
/* The names of the columns all start on the same line, centred over their menus (no "waves"). */
.matrix thead th { vertical-align: top; text-align: center; }
.matrix thead th:first-child { text-align: left; }
/* Administrators: the role as a small blue label, the name under it, bigger. */
.role-list { padding-top: 6px; padding-bottom: 6px; }
.role-block { padding: 14px 0; }
.role-block + .role-block { border-top: 1px solid var(--line); }
.role-block h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); }
.role-block .holders li { display: flex; align-items: center; gap: 12px; font-size: 17px; margin: 2px 0; }
.role-block .holders form.inline { margin-left: 0; }
.role-block p.muted { margin: 0; }
/* The page of the congregation: two tiles per row (one on the phone). */
.tiles.two { grid-template-columns: repeat(2, minmax(0, 300px)); }
@media (max-width: 560px) { .tiles.two { grid-template-columns: minmax(0, 1fr); } }
/* Profile, "Security": rows spaced and centred, the state as a pill, the two actions with the same look. */
.posts.security { row-gap: 14px; align-items: center; }
.posts.security dd { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.posts.security .inline-form { margin: 0; }
.state-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 14px;
  font-weight: 600; background: var(--accent-soft); color: var(--muted); }
.state-pill.on { color: #1f7a3d; background: color-mix(in srgb, #1f7a3d 14%, var(--panel)); }
button.button-like { padding: 5px 12px; font-size: 14px; font-weight: 600; border: 0; border-radius: 10px; background: var(--btn-bg);
  color: var(--primary); box-shadow: var(--shadow); }
button.button-like:hover { background: var(--btn-hover); }
/* The information board: a frame like a real notice board, with the sheets pinned up (3 + 2). */
:root { --board-frame: #8a6a4b; --board-cork: #e2c9a1; --board-dot: rgba(120, 85, 50, .18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --board-frame: #5a4330; --board-cork: #6b5640; --board-dot: rgba(0, 0, 0, .25); } }
:root[data-theme="dark"] { --board-frame: #5a4330; --board-cork: #6b5640; --board-dot: rgba(0, 0, 0, .25); }
.board { display: grid; grid-template-columns: repeat(3, 190px); justify-content: center; gap: 22px 28px; padding: 26px 22px;
  border: 12px solid var(--board-frame); border-radius: 10px; background-color: var(--board-cork);
  background-image: radial-gradient(var(--board-dot) 1px, transparent 1.4px); background-size: 7px 7px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .25), var(--shadow); max-width: 710px; }
.board .sheet { position: relative; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: #2b2116; }
.board .paper { position: relative; display: block; width: 190px; aspect-ratio: 1 / 1.414; overflow: hidden; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25); transform: rotate(-.6deg); }
.board .sheet:nth-child(even) .paper { transform: rotate(.7deg); }
.board .paper::before { content: ""; position: absolute; top: 6px; left: 50%; z-index: 2; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: #c62828; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.board iframe { width: 794px; height: 1123px; border: 0; transform: scale(.239); transform-origin: 0 0; pointer-events: none; }
.board .sheet:hover .paper { box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.board .caption { font-size: 13px; font-weight: 700; text-align: center; color: #2b2116; }
:root[data-theme="dark"] .board .caption { color: #f3e7d6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .board .caption { color: #f3e7d6; } }
.board .empty .paper { background: #fbf7ef; }
@media (max-width: 720px) { .board { grid-template-columns: repeat(2, 140px); border-width: 8px; } .board .paper { width: 140px; }
  .board iframe { transform: scale(.176); } }
.board { margin-bottom: 28px; }
.board .paper::before { content: none; }
.board .sheet::before { content: ""; position: absolute; top: -6px; left: 50%; z-index: 2; width: 13px; height: 13px; margin-left: -6px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ef6a6a, #b71c1c); box-shadow: 0 2px 3px rgba(0, 0, 0, .45); }
/* Two rows of five sheets (Antonio, 27/10/2026); on smaller screens they go on more rows. */
.board { grid-template-columns: repeat(5, 176px); gap: 22px 24px; max-width: none; width: fit-content; margin-left: auto; margin-right: auto; }
.board .paper { width: 176px; }
.board iframe { transform: scale(.2217); }
@media (max-width: 1180px) { .board { grid-template-columns: repeat(3, 176px); } }
@media (max-width: 720px) { .board { grid-template-columns: repeat(2, 140px); } .board .paper { width: 140px; } .board iframe { transform: scale(.176); } }
/* The page of the congregation: each section clearly apart (a line, more space, a blue mark by the title). */
.section-title { display: flex; align-items: center; gap: 10px; margin: 34px 0 14px; padding-top: 22px;
  border-top: 1px solid var(--line); color: var(--text); font-size: 13px; }
.section-title::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--primary); }
h1 + .section-title, .notice + .section-title { margin-top: 18px; }
/* Section names a little more styled: a blue label on a light blue pill, and the line going on after it. */
.section-title { border-top: 0; padding-top: 0; margin-top: 38px; gap: 14px; }
.section-title::before { content: none; }
.section-title > span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--primary); font-size: 13px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.section-title > span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
h1 + .section-title, .notice + .section-title { margin-top: 22px; }
/* Section names apart from the buttons: white text on a dark navy label (the buttons stay blue on white). */
:root { --section-bg: #1f2f46; --section-fg: #ffffff; --section-dot: #7fb3ec; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --section-bg: #d9e4f2; --section-fg: #0e141b; --section-dot: #1d5fa8; } }
:root[data-theme="dark"] { --section-bg: #d9e4f2; --section-fg: #0e141b; --section-dot: #1d5fa8; }
.section-title > span { background: var(--section-bg); color: var(--section-fg); }
.section-title > span::before { background: var(--section-dot); }

/* Deadlines and server checks (platform). */
.tag.state-ok { background: #e5f4e4; color: #1e6b2a; }
.tag.state-soon { background: #f9eeda; color: #8a5300; }
.tag.state-alarm { background: #fbebeb; color: #b3261e; }
table.upkeep td { padding: 6px 8px 6px 0; vertical-align: top; }
.upkeep-deadline h3 { margin-top: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tag.state-ok { background: #1f3a24; color: #9fd8a8; }
  :root:not([data-theme="light"]) .tag.state-soon { background: #43320f; color: #f0c674; }
  :root:not([data-theme="light"]) .tag.state-alarm { background: #4a1f1d; color: #f2a29b; }
}
:root[data-theme="dark"] .tag.state-ok { background: #1f3a24; color: #9fd8a8; }
:root[data-theme="dark"] .tag.state-soon { background: #43320f; color: #f0c674; }
:root[data-theme="dark"] .tag.state-alarm { background: #4a1f1d; color: #f2a29b; }

/* Public pages: home for visitors, disclaimer at the bottom of every page. */
.site-footer { max-width: 1100px; margin: 32px auto 0; padding: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; text-align: center; }
.site-footer p { margin: 0; }
.landing-hero { padding: 24px 0 8px; }
.landing-hero .lead { font-size: 19px; max-width: 46rem; }
.landing-modules { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.landing-modules h3 { margin-top: 0; }
.landing-steps li { margin: 6px 0; }