:root {
  --bg: #fbfaf7;
  --surface: #ffffff;
  --text: #1d1d1f;
  --muted: #5f6368;
  --accent: #1d4f91;
  --accent-soft: #e8eef8;
  --rule: #e4e0d8;
  --today: #fff3c4;
  --today-text: #5a4300;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141414;
    --surface: #1d1d1d;
    --text: #ececec;
    --muted: #a3a3a3;
    --accent: #8fb4ff;
    --accent-soft: #1b2638;
    --rule: #2e2e2e;
    --today: #3a3214;
    --today-text: #ffe28a;
  }
}
:root[data-theme="dark"] {
  --bg: #141414;
  --surface: #1d1d1d;
  --text: #ececec;
  --muted: #a3a3a3;
  --accent: #8fb4ff;
  --accent-soft: #1b2638;
  --rule: #2e2e2e;
  --today: #3a3214;
  --today-text: #ffe28a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 18px/1.65 Georgia, "Times New Roman", serif;
}
a { color: var(--accent); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.ui { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 6px 10px; z-index: 10; }

/* Header */
.site-header { border-bottom: 1px solid var(--rule); background: var(--surface); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.15rem; margin-right: auto; }
.brand img { width: 44px; height: 44px; }
.nav { display: flex; flex-wrap: wrap; gap: 2px 14px; font: 500 0.95rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.nav a { text-decoration: none; padding: 4px 0; color: var(--text); border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--accent); }

main { padding: 28px 0 40px; }
h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 8px; }
h2 { font-size: 1.35rem; line-height: 1.3; margin: 36px 0 10px; }
h3 { font-size: 1.1rem; margin: 24px 0 8px; }
p { margin: 0 0 14px; }
.lede { font-size: 1.1rem; }
.kicker { font: 600 0.8rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 6px; }

/* Buttons, pills, translation switcher */
.btn { display: inline-block; font: 600 0.95rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: var(--bg); text-decoration: none; cursor: pointer; }
.btn.secondary { background: transparent; color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: default; }
.switcher { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; font: 0.9rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.switcher a, .switcher span { padding: 7px 10px; border-radius: 999px; border: 1px solid var(--rule); text-decoration: none; color: var(--text); }
.switcher a:hover { border-color: var(--accent); }
.switcher [aria-current] { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.switcher .ext::after { content: " \2197"; color: var(--muted); }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 22px; margin: 18px 0; }

/* Passage */
/* Reading header: previous three | date, reference, section | next three */
.rh { display: grid; grid-template-columns: 1fr minmax(0, 1.3fr) 1fr; gap: 16px; align-items: center; margin: 4px 0 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; }
.rh-main { text-align: center; }
.rh-main h1, .rh-main .rh-title { margin: 2px 0 4px; font-size: 1.9rem; line-height: 1.2; font-weight: 700; }
.rh-date { font: 600 0.85rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--muted); }
.rh-tag { color: var(--today-text); background: var(--today); padding: 1px 7px; border-radius: 4px; }
.rh-section { color: var(--muted); font-style: italic; }
.rh-note { font: 0.78rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--muted); margin-top: 4px; }
.rh-list { list-style: none; margin: 0; padding: 0; font: 0.85rem/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.rh-list li { margin: 3px 0; }
.rh-list a { text-decoration: none; display: block; padding: 3px 6px; border-radius: 6px; }
.rh-list a:hover { background: var(--accent-soft); }
.rh-list .rh-day { color: var(--muted); margin-right: 4px; }
.rh-list li.is-today .rh-day { color: inherit; }
.rh-prev { text-align: right; }
.rh-list li.is-today a { background: var(--today); color: var(--today-text); font-weight: 700; }
@media (max-width: 640px) {
  .rh { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .rh-main { grid-column: 1 / -1; grid-row: 1; }
  .rh-prev { text-align: left; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.passage h2 { font-size: 1.25rem; margin: 30px 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); }
.passage p.v { margin: 0 0 6px; padding-left: 2.1em; text-indent: -2.1em; }
.passage sup { display: inline-block; min-width: 1.9em; text-indent: 0; font: 600 0.72rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--muted); vertical-align: 0.35em; }
.passage .title { font-style: italic; color: var(--muted); }
.credit { font: 0.85rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--muted); margin-top: 28px; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin: 30px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font: 0.95rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.pager a { text-decoration: none; }
.pager .next { text-align: right; margin-left: auto; }

/* Plan table */
.table-scroll { overflow-x: auto; margin: 16px 0; }
table.plan { border-collapse: collapse; width: 100%; font: 0.85rem/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
table.plan th, table.plan td { border: 1px solid var(--rule); padding: 6px 7px; vertical-align: top; }
table.plan thead th { background: var(--surface); position: sticky; top: 0; }
table.plan th small { display: block; font-weight: 400; color: var(--muted); }
table.plan td.wk { color: var(--muted); text-align: right; }
table.plan a { text-decoration: none; }
table.plan .is-today { background: var(--today); color: var(--today-text); font-weight: 700; }
@media (max-width: 700px) {
  table.plan thead { display: none; }
  table.plan, table.plan tbody, table.plan tr, table.plan td { display: block; width: 100%; }
  table.plan tr { border: 1px solid var(--rule); border-radius: 8px; margin: 0 0 10px; padding: 6px 10px; background: var(--surface); }
  table.plan td { border: 0; padding: 3px 0; }
  table.plan td.wk { text-align: left; font-weight: 700; color: var(--text); }
  table.plan td.wk::before { content: "Week "; }
  table.plan td[data-day]::before { content: attr(data-day) ": "; color: var(--muted); display: inline-block; min-width: 3em; }
}

/* Calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; }
.cal-head h2 { margin: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; font: 0.8rem/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.cal-grid .dow { font-weight: 600; text-align: center; color: var(--muted); padding: 4px 0; }
.cal-grid .dow small { display: block; font-weight: 400; }
.cal-grid .cell { min-height: 74px; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 4px 5px; overflow-wrap: anywhere; }
.cal-grid .cell.empty { background: transparent; border-color: transparent; }
.cal-grid .cell .num { color: var(--muted); font-weight: 600; }
.cal-grid .cell a { text-decoration: none; display: block; }
.cal-grid .cell.is-today { background: var(--today); color: var(--today-text); border-color: var(--today-text); }
@media (max-width: 560px) {
  .cal-grid { grid-template-columns: 1fr; }
  .cal-grid .dow, .cal-grid .cell.empty { display: none; }
  .cal-grid .cell { min-height: 0; display: flex; gap: 10px; }
  .cal-grid .cell .num { min-width: 5.5em; }
}

/* Forms */
.settings label { display: block; font: 600 0.9rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 10px 0 4px; }
.settings input, .settings select { font: 1rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); color: var(--text); }
.settings .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }

/* Content pages */
.prose blockquote { margin: 16px 0; padding: 4px 16px; border-left: 3px solid var(--rule); color: var(--text); }
.prose table { border-collapse: collapse; margin: 16px 0; font-size: 0.95rem; }
.prose th, .prose td { border: 1px solid var(--rule); padding: 6px 10px; vertical-align: top; }
.faq dt { font-weight: 700; margin-top: 22px; }
.faq dd { margin: 6px 0 0; }
.link-list { padding-left: 1.2em; }
.link-list li { margin: 6px 0; }

footer.site-footer { border-top: 1px solid var(--rule); padding: 22px 0 36px; color: var(--muted); font: 0.85rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
footer.site-footer a { color: var(--muted); }
footer.site-footer p { margin: 0 0 6px; }

@media print {
  .site-header, .site-footer, .switcher, .pager, .no-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a { color: #000; text-decoration: none; }
}

/* Inline passages (passage.js) */
a[data-bibleref] { text-decoration-style: dotted; text-underline-offset: 3px; cursor: pointer; }
a[data-bibleref][aria-expanded="true"] { text-decoration-style: solid; font-weight: 600; }
.bp-inline { margin: 10px 0 16px; padding: 12px 16px 6px; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 8px; font-size: 1rem; text-align: left; }
.bp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
.bp-ref { font: 700 0.95rem/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.bp-switch { margin: 0; }
.bp-switch button { font: inherit; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--text); cursor: pointer; }
.bp-switch button:hover { border-color: var(--accent); }
.bp-switch button[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.bp-close { margin-left: auto; font: 1.3rem/1 system-ui, sans-serif; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px 6px; }
.bp-body h3.bp-sub { font: 600 0.85rem/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--muted); margin: 10px 0 4px; }
.bp-inline .credit { margin-top: 8px; }

/* Study outlines (I. / A. / 1. / a.) */
.prose ol.outline { padding-left: 2.2em; margin: 18px 0; }
.prose ol.outline ol { padding-left: 1.9em; margin: 4px 0 8px; }
.prose ol.outline li { margin: 4px 0; }
.prose ol.outline > li { margin-top: 16px; }
.prose ol.outline li::marker { color: var(--muted); font-weight: 600; }

/* Plan switcher (buttons on home/daily/calendar, links on the grids) */
.plan-switch { margin: 6px 0 14px; }
.plan-switch button { font: inherit; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--text); cursor: pointer; }
.plan-switch button:hover { border-color: var(--accent); }
.plan-switch button[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }

/* Devotion (new plan) */
.devotion { margin: 4px 0 22px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; }
.dv-where { font-style: italic; color: var(--muted); margin: 0 0 10px; }
.devotion h2.dv-title { font-size: 1.35rem; margin: 0 0 12px; }
.dv-verse { margin: 0 0 14px; padding: 4px 0 4px 16px; border-left: 3px solid var(--accent); }
.dv-verse p { margin: 0 0 4px; font-size: 1.05rem; }
.dv-verse cite { font: 0.85rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-style: normal; color: var(--muted); }
.dv-text { margin: 0 0 14px; }
.dv-question { margin: 0; padding: 10px 14px; background: var(--accent-soft); border-radius: 8px; }
.dv-label { font: 600 0.85rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-right: 4px; }
a.xref { text-decoration-style: dotted; text-underline-offset: 3px; }

/* Progress */
.rh-done { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; vertical-align: middle; }
.rh-done input, table.plan input[type=checkbox] { width: 1.05em; height: 1.05em; accent-color: var(--accent); }
table.plan td input[type=checkbox] { margin: 0 5px 0 0; vertical-align: -0.15em; }
.progress-line { color: var(--muted); min-height: 1.4em; }
.linklike { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* Compare */
table.compare { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
table.compare th, table.compare td { border: 1px solid var(--rule); padding: 8px 10px; vertical-align: top; text-align: left; }
table.compare thead th { background: var(--surface); }
table.compare tbody th { width: 22%; font-weight: 600; }
table.compare ul { margin: 0; padding-left: 1.1em; }
details.ui { margin: 18px 0; }
details.ui summary { cursor: pointer; font-weight: 600; }

.print-only { display: none; }


/* Plan grids: keep each reference on one line; give the tables more room */
body[data-page="plan"] .wrap { max-width: 1040px; }
table.plan td { white-space: nowrap; }
@media (max-width: 700px) { table.plan td { white-space: normal; } }

/* Reading header sizing: room for the longest readings ("II Corinthians 11-13",
   "Thu: 2 Corinthians 11-13"). The card may be wider than the text column. */
.rh {
  /* Each section is as wide as its content, with the leftover space split equally
     between the two gutters. The card matches the page width unless its content
     needs more, up to 920px. */
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  column-gap: 24px;
  width: fit-content;
  min-width: 100%;
  max-width: min(920px, calc(100vw - 32px));
  margin-left: 50%;
  transform: translateX(-50%);
}
.rh-main h1, .rh-main .rh-title { white-space: nowrap; }
.rh-list a { white-space: nowrap; }
@media (max-width: 900px) {
  .rh-main h1, .rh-main .rh-title { font-size: 1.6rem; }
}
@media (max-width: 800px) {
  .rh { grid-template-columns: 1fr 1fr; justify-content: normal; gap: 10px 12px; width: auto; min-width: 0; max-width: none; margin-left: 0; transform: none; }
  .rh-main { grid-column: 1 / -1; grid-row: 1; }
  .rh-prev { text-align: left; }
  .rh-main h1, .rh-main .rh-title { white-space: normal; font-size: 1.5rem; }
  .rh-list a { white-space: normal; }
  .rh-list .rh-ref { white-space: nowrap; }
}

/* Home page: the header's center opens today's reading */
.rh-link { display: block; color: inherit; text-decoration: none; border-radius: 8px; padding: 4px 8px; margin: -4px -8px; }
.rh-link:hover, .rh-link:focus-visible { background: var(--accent-soft); }
.rh-link:hover .rh-title { color: var(--accent); }
table.compare thead th, table.plan thead th, .prose table thead th { text-align: center; }

/* Calendar: day of the month at the top right, larger and bold */
.cal-grid .cell .num { display: block; text-align: right; font-size: 1.15rem; font-weight: 700; line-height: 1.1; color: var(--muted); margin-bottom: 2px; }
.cal-grid .cell.is-today .num { color: var(--today-text); }
.cal-grid .cell .num .wd { display: none; }
@media (max-width: 560px) {
  .cal-grid .cell .num { text-align: left; font-size: 1rem; }
  .cal-grid .cell .num .wd { display: inline; font-weight: 600; }
}

/* "Your week" editor */
.week-order { list-style: none; margin: 10px 0; padding: 0; max-width: 680px; }
.week-order li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.week-order .wo-day { width: 6.5em; font-weight: 600; flex: none; }
.week-order .wo-track { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); cursor: grab; touch-action: none; user-select: none; }
.week-order .wo-grip { color: var(--muted); font-size: 0.85rem; }
.week-order li.dragging .wo-track { border-color: var(--accent); background: var(--accent-soft); cursor: grabbing; }
.week-order .wo-move { font: inherit; width: 2.1em; height: 2.1em; border: 1px solid var(--rule); border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; flex: none; }
.week-order .wo-move:disabled { opacity: 0.3; cursor: default; }
.week-order .wo-min { color: var(--muted); font-size: 0.85rem; margin-left: auto; white-space: nowrap; }

/* Plan grid header cells: weekday, then track on screen; track, then (weekday) in print */
table.plan thead .thc { display: flex; flex-direction: column; align-items: center; }
table.plan thead .thc .wd { order: 0; }
table.plan thead .thc small { order: 1; }

/* Printable one-page plan: US Letter portrait, styled like the classic PDF */
@media print {
  @page { size: letter portrait; margin: 0.45in 0.5in; }
  body[data-page="plan"] .wrap { max-width: none; padding: 0; }
  body[data-page="plan"] main { padding: 0; }
  body[data-page="plan"] main > *:not(.table-scroll):not(.print-only) { display: none !important; }
  body[data-page="plan"] .print-only { display: block; }
  .print-title { font: bold 20pt/1 "Times New Roman", Times, serif; text-align: center; margin: 0 0 6pt; color: #000; }
  .print-foot { font: 8pt/1 "Times New Roman", Times, serif; text-align: center; margin: 6pt 0 0; color: #000; }
  .table-scroll { overflow: visible; margin: 0; }
  table.plan { width: 100%; border-collapse: collapse; font: 9.6pt/1.12 "Times New Roman", Times, serif; color: #000; }
  table.plan th, table.plan td { border: 0.6pt solid #000; padding: 0.4pt 3pt; white-space: nowrap; }
  table.plan thead th, table.plan td.wk { background: #d9d9d9 !important; color: #000;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.plan thead th { position: static; padding: 1pt 2pt; font-weight: bold; }
  table.plan thead .thc small { order: 0; display: block; font: inherit; color: #000; }
  table.plan thead .thc .wd { order: 1; font-style: italic; }
  table.plan thead .thc .wd::before { content: "("; }
  table.plan thead .thc .wd::after { content: ")"; }
  table.plan td.wk { text-align: center; font-weight: normal; }
  table.plan .is-today { background: none !important; font-weight: normal; color: #000; }
  table.plan td input[type=checkbox] { width: 7pt; height: 7pt; margin: 0 3pt 0 0; vertical-align: -0.5pt; accent-color: #000; }
  table.plan a { color: #000; text-decoration: none; }
  table.plan tr { break-inside: avoid; }
}

/* Calendar: a "read" checkbox at the top left, the day number at the top right */
.cal-grid .cal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 2px; }
.cal-grid .cal-top input[type=checkbox] { width: 1em; height: 1em; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.cal-grid .cal-top .num { margin-bottom: 0; }
@media (max-width: 560px) {
  .cal-grid .cell { align-items: center; }
  .cal-grid .cal-top { flex-direction: row-reverse; justify-content: flex-end; gap: 8px; min-width: 7em; }
}

/* Subscribe page */
.sub-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.sub-copy { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.sub-copy label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; font: 600 0.85rem/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--muted); }
.sub-copy input { font: 0.9rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); color: var(--text); }

/* Sticky column headers. The sideways-scroll wrapper would trap them, so it is
   only used on narrow screens (where the plan grid becomes cards anyway). */
@media (min-width: 701px) {
  .table-scroll { overflow: visible; }
}
table.plan thead th, table.compare thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: 0 1px 0 var(--rule); }
.cal-grid .dow { position: sticky; top: 0; z-index: 2; background: var(--bg); }
@media print {
  table.plan thead th, table.compare thead th, .cal-grid .dow { position: static; box-shadow: none; }
}

/* Calendar styled like a wall calendar: one bordered grid with shared lines */
.calendar { margin: 10px 0 18px; border: 1px solid var(--rule); border-radius: 12px; overflow: clip; background: var(--surface); }
.calendar .cal-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; padding: 12px 14px; position: relative; border-bottom: 1px solid var(--rule); }
.calendar .cal-head h2 { margin: 0; font-size: 1.5rem; min-width: 9.5em; text-align: center; }
.cal-nav { font: 600 1.6rem/1 system-ui, sans-serif; width: 2em; height: 1.6em; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--accent); cursor: pointer; }
.cal-nav:hover { background: var(--accent-soft); }
.cal-this { position: absolute; right: 14px; font: 600 0.85rem/1 system-ui, sans-serif; padding: 7px 10px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--accent); cursor: pointer; }
.calendar .cal-grid { gap: 1px; background: var(--rule); }
.calendar .cal-grid .dow { background: var(--accent-soft); color: var(--text); padding: 6px 2px; border: 0; }
.calendar .cal-grid .dow small { color: var(--muted); }
.calendar .cal-grid .cell { min-height: 96px; border: 0; border-radius: 0; background: var(--surface); padding: 5px 6px; }
.calendar .cal-grid .cell.empty { display: block; background: var(--bg); }
.calendar .cal-grid .cell.is-today { background: var(--today); box-shadow: inset 0 0 0 2px var(--today-text); }
@media (max-width: 640px) {
  .calendar .cal-head { flex-wrap: wrap; }
  .cal-this { position: static; }
}
@media (max-width: 560px) {
  .calendar .cal-grid .cell { min-height: 0; }
  .calendar .cal-grid .cell.empty, .calendar .cal-grid .dow { display: none; }
}