/* spt base styles. Colours are defined only as tokens below; the light
   and dark token blocks are checked for WCAG AA contrast by
   internal/web/static_test.go. The two dark blocks must stay identical. */

:root {
  --bg: #ffffff;
  --surface: #f3f4f6;
  --text: #16181d;
  --muted: #4b5160;
  --border: #767c8a;
  --accent: #0a56c2;
  --accent-contrast: #ffffff;
  --focus: #0a56c2;
  --flash-info-bg: #e8f0fe;
  --flash-success-bg: #e6f4ea;
  --flash-warning-bg: #fef7e0;
  --flash-error-bg: #fce8e6;
  /* Area palette (planning.Colors): stripe and tinted background. */
  --area-red: #c62828;
  --area-red-bg: #fde2e2;
  --area-orange: #b45309;
  --area-orange-bg: #fdebd3;
  --area-yellow: #8a6d00;
  --area-yellow-bg: #fbf3c4;
  --area-green: #2e7d32;
  --area-green-bg: #dcf2de;
  --area-teal: #00796b;
  --area-teal-bg: #d3f0ec;
  --area-blue: #1565c0;
  --area-blue-bg: #dce9fb;
  --area-indigo: #3949ab;
  --area-indigo-bg: #e2e5f8;
  --area-purple: #7b1fa2;
  --area-purple-bg: #efe0f7;
  --area-pink: #ad1457;
  --area-pink-bg: #fbe0ec;
  --area-gray: #616161;
  --area-gray-bg: #e8e9ec;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121418;
    --surface: #1d2026;
    --text: #e8eaef;
    --muted: #a9afbc;
    --border: #6b7280;
    --accent: #8ab4f8;
    --accent-contrast: #0b1220;
    --focus: #8ab4f8;
    --flash-info-bg: #1c2b45;
    --flash-success-bg: #17301f;
    --flash-warning-bg: #3a2f0f;
    --flash-error-bg: #3d1a1a;
    /* Area palette (planning.Colors): stripe and tinted background. */
    --area-red: #ef7a7a;
    --area-red-bg: #3f1d1d;
    --area-orange: #f0a45c;
    --area-orange-bg: #3d2a14;
    --area-yellow: #e3c84a;
    --area-yellow-bg: #3a3312;
    --area-green: #6cc070;
    --area-green-bg: #1a3320;
    --area-teal: #4fc3b5;
    --area-teal-bg: #133330;
    --area-blue: #7fb2f0;
    --area-blue-bg: #172a45;
    --area-indigo: #9aa5ec;
    --area-indigo-bg: #22264a;
    --area-purple: #c58be0;
    --area-purple-bg: #331f40;
    --area-pink: #ee88b4;
    --area-pink-bg: #3d1b2c;
    --area-gray: #a8adb8;
    --area-gray-bg: #2a2d34;
  }
}

:root[data-theme="dark"] {
  --bg: #121418;
  --surface: #1d2026;
  --text: #e8eaef;
  --muted: #a9afbc;
  --border: #6b7280;
  --accent: #8ab4f8;
  --accent-contrast: #0b1220;
  --focus: #8ab4f8;
  --flash-info-bg: #1c2b45;
  --flash-success-bg: #17301f;
  --flash-warning-bg: #3a2f0f;
  --flash-error-bg: #3d1a1a;
  /* Area palette (planning.Colors): stripe and tinted background. */
  --area-red: #ef7a7a;
  --area-red-bg: #3f1d1d;
  --area-orange: #f0a45c;
  --area-orange-bg: #3d2a14;
  --area-yellow: #e3c84a;
  --area-yellow-bg: #3a3312;
  --area-green: #6cc070;
  --area-green-bg: #1a3320;
  --area-teal: #4fc3b5;
  --area-teal-bg: #133330;
  --area-blue: #7fb2f0;
  --area-blue-bg: #172a45;
  --area-indigo: #9aa5ec;
  --area-indigo-bg: #22264a;
  --area-purple: #c58be0;
  --area-purple-bg: #331f40;
  --area-pink: #ee88b4;
  --area-pink-bg: #3d1b2c;
  --area-gray: #a8adb8;
  --area-gray-bg: #2a2d34;
}

:root {
  color-scheme: light dark;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --radius: 0.5rem;
  --header-height: 3.5rem;
  --bottom-nav-height: 3.5rem;
  --content-width: 64rem;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--space-3); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-3); }
code, pre { font-family: var(--font-mono); }

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

/* Visible focus for keyboard users on every interactive element. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.muted { color: var(--muted); }

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -10rem;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-2); }

/* Header and main navigation */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height);
  padding: 0 var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  color: var(--text);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
}

.main-nav { flex: 1; }
.main-nav ul, .bottom-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav ul { gap: var(--space-2); }
.main-nav a, .bottom-nav a {
  display: block;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius);
}
.main-nav a { padding: var(--space-2) var(--space-3); }
.main-nav a:hover, .bottom-nav a:hover { background: var(--bg); }
.main-nav a[aria-current="page"], .bottom-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.theme-toggle, .button {
  display: inline-block;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  border-radius: var(--radius);
  cursor: pointer;
}
.theme-toggle {
  margin-left: auto;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.button {
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid var(--accent);
  text-decoration: none;
}

/* Main content */
.app-main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
}
.app-main:focus { outline: none; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.button-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

/* Account area in the header: name (link to "Meine Sitzungen") and logout */
.account-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.account-nav form { margin: 0; }
.account-nav > a:not(.button) {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 47.99rem) {
  .account-nav > a:not(.button) { display: none; }
}

/* Forms */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.form-stack label { font-weight: 600; }
.form-stack input, .form-stack select {
  min-height: 2.75rem;
  padding: var(--space-2);
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.form-stack .button { margin-top: var(--space-2); }
.login-card { max-width: 28rem; margin: 0 auto; }

/* Session list ("Meine Sitzungen") */
.session-list {
  list-style: none;
  margin: var(--space-3) 0;
  padding: 0;
}
.session-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

/* Flash messages: the message text states what happened; colour is only a supplement. */
.flash {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  color: var(--text);
  border: 1px solid var(--border);
  border-left-width: 0.375rem;
  border-radius: var(--radius);
}
.flash-info { background: var(--flash-info-bg); }
.flash-success { background: var(--flash-success-bg); }
.flash-warning { background: var(--flash-warning-bg); }
.flash-error { background: var(--flash-error-bg); }

/* Bottom navigation on small screens */
.bottom-nav {
  display: none;
}

@media (max-width: 47.99rem) {
  .main-nav { display: none; }
  .app-main { padding-bottom: calc(var(--bottom-nav-height) + var(--space-4)); }
  .bottom-nav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav ul { justify-content: space-around; }
  .bottom-nav li { flex: 1; }
  .bottom-nav a {
    min-height: var(--bottom-nav-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
  }
}

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

/* htmx request indicator (htmx's own inline styles are disabled for the CSP). */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Tables and key/value lists (admin pages) */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-3);
}
.data-table th, .data-table td {
  padding: var(--space-2);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-4);
}
.facts dt { font-weight: 600; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.form-stack fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin: 0;
}
.form-stack .check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-weight: normal;
}
.form-stack .check input { min-height: auto; width: 1.25rem; height: 1.25rem; }
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.button-row form { margin: 0; }

/* Account sub-navigation and mail bodies */
.sub-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sub-nav a[aria-current="page"] { font-weight: 600; text-decoration: none; color: var(--text); }
/* Setup wizard: numbered step list, current step bold */
.setup-steps ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.setup-steps [aria-current="step"] { font-weight: 600; }
.mail-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Person records: heading with action, filter bar, list as table on
   desktop and as cards on phones, chips for qualifications, tabs. */
.heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.heading-row h1 { margin: 0; }
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.filter-bar > div { display: flex; flex-direction: column; gap: var(--space-1); }
.filter-bar label { font-weight: 600; }
.filter-bar input, .filter-bar select, .form-stack textarea {
  min-height: 2.75rem;
  padding: var(--space-2);
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.chip {
  display: inline-block;
  margin: 0 var(--space-1) var(--space-1) 0;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: 1rem;
  font-size: 0.875rem;
}
.chip-expiring, .badge-warning { background: var(--flash-warning-bg); }
.badge-ok { background: var(--flash-success-bg); }
.chip-expired, .badge-danger { background: var(--flash-error-bg); border-width: 2px; }
.tabs { border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); }
.tabs a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.field-hint { margin: 0; font-size: 0.875rem; }
.field-error { margin: 0; color: var(--text); font-weight: 600; }
.field-error::before { content: "⚠ "; }
.form-stack [aria-invalid="true"] { border-width: 2px; border-color: var(--text); }
.form-card { max-width: 40rem; }
.notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.entry { border-top: 1px solid var(--border); padding-top: var(--space-3); margin-bottom: var(--space-3); }
.entry form, .data-table form { margin-bottom: var(--space-2); }
details summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; color: var(--accent); }
.history { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.history > li { border-top: 1px solid var(--border); padding-top: var(--space-2); }
.findings { list-style: none; padding: 0; margin: 0 0 var(--space-2); }
.findings li { margin-bottom: var(--space-1); }

@media (max-width: 47.99rem) {
  .person-table thead { display: none; }
  .person-table, .person-table tbody, .person-table tr, .person-table td { display: block; }
  .person-table tr {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .person-table td { border: 0; padding: var(--space-1) 0; }
  .person-table td:empty { display: none; }
  .person-table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 0.875rem;
    color: var(--muted);
  }
  .person-table td:first-child { font-size: 1.125rem; font-weight: 600; }
}

/* Start page "Mein Tag": one card per section, overview figures as tiles */
.home { display: flex; flex-direction: column; gap: var(--space-3); }
.home-header h1 { margin-bottom: var(--space-1); }
.home-section h2 { margin-top: 0; font-size: 1.125rem; }
.home-section > :last-child { margin-bottom: 0; }
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.stat-tiles a {
  display: block;
  min-height: 2.75rem;
  height: 100%;
  padding: var(--space-3);
  color: var(--text);
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stat-tiles a:hover { border-color: var(--accent); }
.stat-tiles strong { display: block; font-size: 1.75rem; line-height: 1.2; }
.stat-tiles .stat-warning { border-left: 0.375rem solid var(--border); background: var(--flash-warning-bg); }

/* Plain link lists ("Mehr") with touch-sized rows */
.link-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.link-list a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  border-bottom: 1px solid var(--border);
}

/* Second factor: the QR code keeps dark modules on white in both themes
   (scanners need the contrast); recovery codes in a two-column grid. */
.qr-frame { max-width: 16rem; margin: 0 0 var(--space-3); }
.qr-code { display: block; width: 100%; height: auto; border: 1px solid var(--border); }
.recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.recovery-codes code { font-size: 1.0625rem; letter-spacing: 0.05em; }
.steps { padding-left: 1.5rem; }

/* The installation hint is pointless inside the installed app. */
@media (display-mode: standalone) {
  .install-hint { display: none; }
}

/* Areas (planning): colour as a stripe plus tinted background; the name is
   always shown as well, so colour is never the only hint. */
.area-chip {
  display: inline-block;
  padding: 0.125rem var(--space-2);
  border-left: 0.375rem solid var(--area-stripe, var(--border));
  border-radius: 0.25rem;
  background: var(--area-bg, var(--surface));
  color: var(--text);
}
.area-swatch {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
  border: 2px solid var(--area-stripe, var(--border));
  border-radius: 0.25rem;
  background: var(--area-bg, var(--surface));
}
.color-choices { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.area-order { display: flex; gap: var(--space-1); }
.area-order form { margin: 0; }
.area-red { --area-stripe: var(--area-red); --area-bg: var(--area-red-bg); }
.area-orange { --area-stripe: var(--area-orange); --area-bg: var(--area-orange-bg); }
.area-yellow { --area-stripe: var(--area-yellow); --area-bg: var(--area-yellow-bg); }
.area-green { --area-stripe: var(--area-green); --area-bg: var(--area-green-bg); }
.area-teal { --area-stripe: var(--area-teal); --area-bg: var(--area-teal-bg); }
.area-blue { --area-stripe: var(--area-blue); --area-bg: var(--area-blue-bg); }
.area-indigo { --area-stripe: var(--area-indigo); --area-bg: var(--area-indigo-bg); }
.area-purple { --area-stripe: var(--area-purple); --area-bg: var(--area-purple-bg); }
.area-pink { --area-stripe: var(--area-pink); --area-bg: var(--area-pink-bg); }
.area-gray { --area-stripe: var(--area-gray); --area-bg: var(--area-gray-bg); }

/* Hidden visually, still read by screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Planner view of an event (M2-07). The status of a shift is always
   written out with a symbol; the border style only supplements it.
   plan.js adds .plan-ready and places blocks and marks on the axis;
   without it the lanes are plain lists of blocks. */
.plan-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); list-style: none; padding: 0; margin: 0; }
.plan-layout { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 64rem) {
  .plan-with-panel { display: grid; grid-template-columns: minmax(0, 1fr) 26rem; align-items: start; }
  .plan-with-panel .plan-panel { position: sticky; top: var(--space-3); max-height: calc(100vh - 2 * var(--space-3)); overflow-y: auto; }
}
.plan-panel h2 { margin: 0; font-size: 1.125rem; }
.plan-panel h2:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.plan-scroll { overflow-x: auto; }
.plan-grid { --plan-head: 8rem; min-width: 40rem; }
.plan-grid.plan-ready { min-width: calc(var(--plan-head) + var(--plan-hours) * 3.5rem); }
.plan-axis, .plan-row { display: flex; border-bottom: 1px solid var(--border); }
.plan-head { flex: 0 0 var(--plan-head); padding: var(--space-2) var(--space-2) var(--space-2) 0; }
.plan-lanes { flex: 1; min-width: 0; }
.plan-track { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1) 0; }
.plan-axis .plan-track { font-size: 0.875rem; color: var(--muted); }
.plan-ready .plan-track { display: block; min-height: 1.5rem; }
.plan-ready .plan-lane {
  height: 5.5rem;
  padding: 0;
  background-image: linear-gradient(to right, var(--border) 1px, transparent 1px);
  background-size: calc(100% / var(--plan-hours)) 100%;
}
.plan-ready .plan-mark { position: absolute; top: var(--space-1); transform: translateX(-50%); }
.plan-ready .plan-mark:first-child { transform: none; }
.plan-ready .plan-mark:last-child { transform: translateX(-100%); }
.plan-block {
  display: flex;
  flex-direction: column;
  min-width: 9rem;
  padding: var(--space-1) var(--space-2);
  overflow: hidden;
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.3;
  text-decoration: none;
  background: var(--area-bg, var(--surface));
  border: 1px solid var(--border);
  border-left: 0.375rem solid var(--area-stripe, var(--border));
  border-radius: var(--radius);
}
.plan-block > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-block:hover { border-color: var(--accent); }
.plan-block:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; z-index: 2; }
.plan-block[aria-current="true"] { outline: 3px solid var(--text); outline-offset: -3px; }
.plan-ready .plan-block { position: absolute; top: 0.25rem; bottom: 0.25rem; min-width: 0; }
.plan-block-place { font-weight: 600; }
.plan-block-state { font-weight: 600; }
.plan-under { border-style: dashed; border-left-style: solid; }
.plan-conflict { border-width: 2px; border-left-width: 0.375rem; border-color: var(--text); }
.plan-conflict .plan-block-state { background: var(--flash-warning-bg); }
/* Changes not yet published (M2-09b): written out, dotted outline. */
.plan-block-mark { align-self: flex-start; font-size: 0.75rem; }
.plan-block:has(.plan-block-mark) { border-style: dotted; border-left-style: solid; }
.plan-list { display: none; }
.plan-list-items { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.plan-list .plan-block { min-height: 2.75rem; font-size: 1rem; }
@media (max-width: 47.99rem) {
  .plan-scroll, .plan-keys { display: none; }
  .plan-list { display: block; }
}

/* Week and month views (M2-08): tables with a column per day; the blocks
   are those of the event planner view without positions on an axis. */
.week-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.week-scroll { overflow-x: auto; }
.week-grid, .month-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.week-grid { min-width: 64rem; }
.month-grid { min-width: 40rem; }
.week-grid th, .week-grid td, .month-grid th, .month-grid td {
  padding: var(--space-1);
  border: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}
.week-grid thead th:first-child, .week-grid tbody th { width: 9rem; }
.week-grid .week-sum-col { width: 6rem; }
.month-grid thead th:first-child, .month-grid tbody th { width: 3rem; }
.week-grid thead th > span:first-child { display: block; }
.week-event { display: block; font-weight: 400; font-size: 0.875rem; }
.week-today { background: var(--surface); box-shadow: inset 0 3px 0 var(--accent); }
.week-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.week-block { min-width: 0; }
.week-block > span { white-space: normal; }
.week-sum { font-weight: 600; white-space: nowrap; }
.month-grid td { height: 6rem; }
.month-other { color: var(--muted); }
.month-day { display: block; font-weight: 600; }
.month-count { display: block; font-size: 0.875rem; }
.month-conflict { font-weight: 600; background: var(--flash-warning-bg); }
.month-unpublished { font-style: italic; }
.week-list { display: none; }
@media (max-width: 47.99rem) {
  .week-grid-card .week-scroll { display: none; }
  .week-list { display: block; }
}