/* =====================================================================
   app.css — The Daily Office, 1928commonprayer.org
   House palette (matches /daily/): cream & garnet by day, warm night.
   Contrast pairs verified: #7A5C12 on #F7F2E8 = 6.3:1; #7A2020 on
   #F7F2E8 = 8.5:1; #D4AF5A on #1C1610 = 8.1:1; #d57d7d on #1C1610 = 6.2:1.
   ===================================================================== */
:root {
  --bg: #F7F2E8;
  --ink: #3D2A0E;
  --ink-2: rgba(61,42,14,0.85);
  --accent: #7A5C12;
  --accent-2: #b89848;
  --rubric: #7A2020;
  --rule: rgba(139,105,20,0.25);
  --accent-faint: rgba(139,105,20,0.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  transition: background 0.3s, color 0.3s;
  min-height: 100vh;
}
[data-theme="night"] {
  --bg: #1C1610;
  --ink: #E8DCC4;
  --ink-2: rgba(232,220,196,0.85);
  --accent: #c9a14a;
  --accent-2: #B89548;
  --rubric: #e8736e;
  --rule: rgba(212,175,90,0.3);
  --accent-faint: rgba(212,174,90,0.10);
  background: var(--bg);
  color: var(--ink);
}
body[data-size="s"] { font-size: 16px; }
body[data-size="m"] { font-size: 18px; }
body[data-size="l"] { font-size: 22px; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--rubric); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 10;
  background: var(--bg); color: var(--rubric); padding: 8px 16px;
}
.skip:focus { left: 8px; }
[data-theme="night"] .skip { background: var(--bg); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- Header ---------- */
.top {
  text-align: center; padding: 18px 16px 10px;
  border-bottom: 1px solid var(--rule);
}
.brand {
  font-family: 'Cinzel', serif; font-weight: 500; font-size: 1.45em;
  letter-spacing: 0.04em; color: var(--accent); line-height: 1.15; margin: 0;
}
.brand .cross { margin: 0 10px; }
.sub {
  font-family: 'IM Fell English', serif; font-style: italic;
  font-size: 0.9em; color: var(--ink-2); margin: 4px 0 10px;
}
.tabs {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px 14px; margin: 0 0 10px; padding: 0;
  font-family: 'Cinzel', serif; font-size: 0.78em; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tabs a { text-decoration: none; padding: 4px 6px; color: var(--accent); }
.tabs a[aria-current="page"] {
  color: var(--rubric); border-bottom: 2px solid var(--rubric);
}
.controls {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 14px;
}
.ctl-group { display: inline-flex; gap: 4px; }
.ctl {
  font-family: 'EB Garamond', serif; font-size: 15px;
  background: none; border: 1px solid var(--rule); border-radius: 5px;
  color: var(--ink); padding: 4px 10px; cursor: pointer; min-height: 34px;
}
.ctl:hover { border-color: var(--accent); color: var(--accent); }
.ctl[aria-pressed="true"] { background: var(--accent-faint); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.ctl-group[aria-label="Type size"] .ctl:nth-child(1) { font-size: 12px; }
.ctl-group[aria-label="Type size"] .ctl:nth-child(3) { font-size: 18px; }
.date-input {
  color-scheme: light;
  font-family: 'EB Garamond', serif;
}
[data-theme="night"] .date-input { color-scheme: dark; }

/* ---------- Main ---------- */
main {
  max-width: 720px; margin: 0 auto; padding: 20px 20px 56px;
}
.center { text-align: center; }

.day-header { text-align: center; padding: 6px 0 14px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; }
.day-title {
  font-family: 'Cinzel', serif; font-weight: 500; font-size: 1.3em;
  letter-spacing: 0.03em; color: var(--rubric); margin: 0; line-height: 1.25;
}
.day-date { font-family: 'IM Fell English', serif; font-style: italic; font-size: 0.95em; margin: 4px 0 0; }
.day-meta { font-family: 'Cinzel', serif; font-size: 0.72em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 8px 0 0; }

.feast-note {
  background: var(--accent-faint); border: 1px solid var(--rule); border-radius: 6px;
  padding: 10px 14px; margin: 14px 0; font-size: 0.95em;
}

/* ---------- An unavailable lesson ----------
   A named gap inside an office that is otherwise complete. Dashed, like
   .slot, because the house already uses a dashed rule for "something
   belongs here"; rubric-tinted because this one is a fault rather than a
   placeholder. Deliberately NO background tint: --accent-faint here would
   composite the button's --accent down to 4.40:1 by day, the same trap the
   startup panel's Try again button fell into. On the plain page background
   the verified 6.3:1 pair holds. Asserted in tools/test-scripture-loading.mjs. */
.lesson--unavailable {
  border: 1px dashed var(--rubric); border-radius: 6px;
  padding: 12px 16px; margin: 12px 0; text-align: center;
}
.lesson--unavailable .rubric { margin: 0 0 10px; }
.lesson-retry-actions { margin: 0; }
.lesson--unavailable .ctl { min-height: 44px; padding: 8px 18px; }

/* ---------- Startup recovery panel ----------
   Shown when the appointed texts could not be fetched. Built only from the
   existing palette tokens, so it inverts with the rest of the page and adds
   nothing to the colour vocabulary. Contrast is inherited from .day-title
   (--rubric) and body ink (--ink), both already verified in both themes. */
.startup-failure {
  background: var(--accent-faint); border: 1px solid var(--rule); border-radius: 8px;
  padding: 20px 22px 22px; margin: 18px 0; text-align: center;
}
.startup-failure .day-title { margin-bottom: 10px; }
.startup-failure .text { margin: 8px auto; max-width: 46ch; text-align: left; }
/* The one clause a reader most needs to carry away. Rubric-coloured italic
   is the house's existing mark for a significant aside (cf. .collect-title,
   .rule-status) rather than a new highlight treatment, and <em> carries the
   emphasis to a screen reader too. At body size this is normal text, so it
   is asserted at 4.5:1 — not the 3:1 the panel heading gets — in
   tools/test-boot-failure.mjs. */
.startup-failure .reassurance {
  font-style: italic; color: var(--rubric); font-weight: 500;
}
.startup-failure-actions { margin: 16px 0 4px; }
.startup-failure .ctl { font-size: 1em; padding: 8px 20px; min-height: 44px; }
/* Solid --bg, NOT the usual --accent-faint. The panel is itself tinted with
   --accent-faint, so a faint-on-faint button composites to rgb(226,216,192)
   by day, where --accent lands at 4.40:1 — under 4.5. Measured, not guessed;
   the assertion is in tools/test-boot-failure.mjs. Sitting the button on the
   plain page background restores the verified 6.3:1 pair. */
.startup-failure .ctl.primary {
  background: var(--bg); border-color: var(--accent);
  color: var(--accent); font-weight: 600;
}
.startup-failure .ctl[disabled] { opacity: 1; cursor: default; color: var(--ink-2); border-color: var(--rule); }
.startup-failure .rule-links {
  display: inline-block; text-align: left; margin: 6px 0 0; padding-left: 1.2em;
}

/* ---------- Office text ---------- */
h2.office-part {
  font-family: 'Cinzel', serif; font-weight: 500; font-size: 1.02em;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rubric);
  text-align: center; margin: 34px 0 10px;
}
h3.canticle-title {
  font-family: 'Cinzel', serif; font-weight: 500; font-size: 0.92em;
  letter-spacing: 0.06em; color: var(--accent); text-align: center; margin: 22px 0 8px;
}
.rubric {
  font-family: 'IM Fell English', serif; font-style: italic;
  color: var(--rubric); font-size: 0.93em; margin: 12px 0 6px;
}
.office p.text { margin: 8px 0; }
.said { font-weight: 500; }
.versicle { margin: 6px 0; }
.versicle .v { display: block; }
.versicle .r { display: block; padding-left: 1.4em; font-weight: 600; }

.ps-verse { margin: 6px 0; }
.ps-verse .half-a { display: block; padding-left: 1.5em; text-indent: -1.5em; }
.ps-verse .half-b { display: block; padding-left: 2.8em; text-indent: -1.5em; }
.ps-verse .vnum {
  font-size: 0.72em; color: var(--accent); padding-right: 6px;
  font-variant-numeric: tabular-nums;
}
.psalm-head { margin: 18px 0 4px; }
.psalm-head .latin { font-family: 'IM Fell English', serif; font-style: italic; color: var(--accent); }

.lesson-verse { margin: 0 0 6px; }
.lesson-verse .vnum { font-size: 0.72em; color: var(--accent); padding-right: 5px; vertical-align: 0.18em; font-variant-numeric: tabular-nums; }
.lesson-cite {
  font-family: 'IM Fell English', serif; font-style: italic; text-align: center;
  color: var(--accent); margin: 4px 0 12px;
}
.gloria { font-style: italic; margin: 10px 0 4px; }

details.alt {
  border: 1px solid var(--rule); border-radius: 6px; margin: 10px 0; padding: 0 12px;
}
details.alt summary {
  cursor: pointer; padding: 8px 0;
  font-family: 'IM Fell English', serif; font-style: italic; color: var(--accent);
}
details.alt[open] { padding-bottom: 10px; }

.collect-title { font-family: 'IM Fell English', serif; font-style: italic; color: var(--rubric); margin: 16px 0 2px; }

/* ---------- Today landing ---------- */
.today-cards { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 18px 0; }
@media (min-width: 560px) { .today-cards { grid-template-columns: 1fr 1fr; } }
.office-card {
  display: block; border: 1px solid var(--rule); border-radius: 8px;
  padding: 16px 18px; text-decoration: none; color: inherit; background: var(--accent-faint);
}
.office-card:hover { border-color: var(--accent); }
.office-card h2 {
  font-family: 'Cinzel', serif; font-weight: 500; font-size: 1.05em;
  color: var(--accent); margin: 0 0 6px; letter-spacing: 0.05em;
}
.office-card p { margin: 3px 0; font-size: 0.95em; }
.office-card .lbl { font-family: 'IM Fell English', serif; font-style: italic; color: var(--rubric); }

/* ---------- Kalendar table ---------- */
table.kal { width: 100%; border-collapse: collapse; font-size: 0.93em; }
.kal th {
  font-family: 'Cinzel', serif; font-weight: 500; font-size: 0.8em;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rule);
}
.kal td { padding: 6px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.kal tr.sun td { background: var(--accent-faint); }
.kal tr.today-row td { outline: 2px solid var(--accent); }
.kal a { text-decoration: none; }
.kal .dn { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Footer ---------- */
.foot {
  border-top: 1px solid var(--rule); text-align: center;
  padding: 18px 20px 30px; font-size: 0.9em;
}
.foot .fine { font-size: 0.85em; color: var(--ink-2); max-width: 620px; margin: 8px auto 0; }

/* ---------- The Daily Rule ---------- */
.pray-now {
  border: 1px solid var(--rule); border-radius: 8px; background: var(--accent-faint);
  padding: 14px 18px; margin: 18px 0 6px; text-align: center;
}
.pray-now-eyebrow {
  font-family: 'Cinzel', serif; font-size: 0.72em; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 6px;
}
.pray-now-primary { font-family: 'Cinzel', serif; font-size: 1.2em; margin: 0; }
.pray-now-primary a { text-decoration: none; }
.pray-now-secondary { font-size: 0.95em; margin: 4px 0 0; }
.pray-now-next { font-size: 0.9em; margin: 8px 0 0; font-style: italic; }

.rule-section { margin: 26px 0; }
.rule-section-title {
  font-family: 'Cinzel', serif; font-weight: 500; font-size: 0.95em;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rubric);
  border-bottom: 1px solid var(--rule); padding-bottom: 5px; margin: 0 0 12px;
}
.rule-cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .rule-cards { grid-template-columns: 1fr 1fr; } }
.rule-card {
  display: block; border: 1px solid var(--rule); border-radius: 8px;
  padding: 14px 16px; text-decoration: none; color: inherit; background: var(--accent-faint);
}
.rule-card:hover { border-color: var(--accent); }
.rule-card h3 {
  font-family: 'Cinzel', serif; font-weight: 500; font-size: 1em; color: var(--accent);
  margin: 0 0 4px; letter-spacing: 0.04em;
}
.rule-status, .rule-summary, .rule-note { margin: 3px 0; font-size: 0.92em; }
.rule-status { font-family: 'IM Fell English', serif; font-style: italic; color: var(--rubric); }
.rule-summary .lbl { font-family: 'IM Fell English', serif; font-style: italic; color: var(--rubric); }
.rule-note { font-style: italic; color: var(--ink-2); }

.rule-hour { border-top: 1px solid var(--rule); padding: 12px 0; }
.rule-hour:first-of-type { border-top: none; }
.rule-hour-head h3 {
  font-family: 'Cinzel', serif; font-weight: 500; font-size: 1.02em; color: var(--accent);
  margin: 0; display: inline; letter-spacing: 0.04em;
}
.rule-hour-head a { text-decoration: none; }
.rule-hour-sub { font-family: 'IM Fell English', serif; font-style: italic; font-size: 0.9em; margin: 2px 0 8px; }

.mode-choose { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mode-label { font-family: 'IM Fell English', serif; font-style: italic; font-size: 0.85em; color: var(--accent); margin-right: 2px; }
.mode-opt {
  font-family: 'Cinzel', serif; font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 5px; min-height: 32px;
  display: inline-flex; align-items: center;
}
.mode-opt.is-on, .mode-opt[aria-current="true"] {
  background: var(--accent-faint); border-color: var(--accent); color: var(--accent); font-weight: 600;
}
.rule-links { padding-left: 1.2em; margin: 6px 0; }
.rule-links li { margin: 4px 0; }
.rule-quiet {
  text-align: center; font-family: 'IM Fell English', serif; font-style: italic;
  font-size: 0.88em; color: var(--ink-2); margin: 26px 0 0; border-top: 1px solid var(--rule); padding-top: 12px;
}

/* Office mode view */
.office-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px; margin: 4px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.rubric-toggle { font-size: 13px; }
.office[data-rubrics="off"] .rubric { display: none; }
.slot {
  font-family: 'IM Fell English', serif; color: var(--accent); text-align: center;
  font-size: 0.93em; margin: 12px 0; border: 1px dashed var(--rule); border-radius: 6px; padding: 8px 12px;
}
blockquote.antiphon {
  border-left: 3px solid var(--accent-2); margin: 12px 0; padding: 2px 0 2px 14px;
  color: var(--rubric); line-height: 1.6;
}
.hymn-stanza { margin: 10px 0; line-height: 1.7; }

.office-actions {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 30px 0 0; padding-top: 16px; border-top: 1px solid var(--rule);
}
.office-actions .ctl { text-decoration: none; display: inline-flex; align-items: center; }
.office-actions .ctl.primary { background: var(--accent-faint); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Settings */
.settings fieldset { border: 1px solid var(--rule); border-radius: 8px; margin: 0 0 16px; padding: 12px 16px; }
.settings legend {
  font-family: 'Cinzel', serif; font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); padding: 0 6px;
}
.set-radio { display: block; margin: 6px 0; cursor: pointer; }
.set-times { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.set-time { display: flex; flex-direction: column; font-size: 0.85em; font-family: 'IM Fell English', serif; font-style: italic; color: var(--accent); gap: 4px; }
.set-time input { color-scheme: light; font-family: 'EB Garamond', serif; padding: 4px 6px; border: 1px solid var(--rule); border-radius: 5px; background: none; color: var(--ink); }
[data-theme="night"] .set-time input { color-scheme: dark; }

@media print {
  .top nav, .controls, .foot, .skip { display: none; }
  body { background: #fff; color: #000; }
}
/* Print: keep the prayer text, drop the Rule's controls. */
@media print {
  .office-bar, .office-actions, .mode-choose, .pray-now, .rule-quiet { display: none; }
}