:root {
  color-scheme: light;
  --paper: #f6f5f1;
  --ink: #26313a;
  --muted: #66707a;
  --brass: #8a621f;
  --blue: #3b5b85;
  --line: #ddd9cf;
  --panel: #efede6;
  --ground: #f6f5f1;
  --font-serif: "EB Garamond", "Palatino Linotype", Palatino, serif;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;
  --max: 44rem;
  --dawn: linear-gradient(90deg, #2c3e66, #b98a34);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* Night is engine-forced only (screensOff → wakeTarget). OS dark mode must
   never paint night in the day, so there is no prefers-color-scheme block. */
html.night,
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141a22;
  --ink: #e4e1d8;
  --muted: #8b939c;
  --brass: #d3a44e;
  --blue: #8fadd6;
  --line: #2a3340;
  --panel: #1b222c;
  --ground: #141a22;
}

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono.woff2") format("woff2");
}

* { box-sizing: border-box; }

/* iOS-only Dynamic Type opt-in: rem tracks the user's text size.
   Invalid elsewhere, so other browsers drop it and keep their default root. */
@supports (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  padding-top: 4px;
  font-size: 1rem;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--dawn);
  z-index: 50;
}

#app {
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(1.25rem + var(--safe-t)) 1.25rem calc(6.5rem + var(--safe-b));
  min-height: 100dvh;
}

#app.overlay {
  padding-bottom: calc(2rem + var(--safe-b));
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.35rem;
}

.phase {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

/* Every page leads with the display face: the date, the office name, and
   the page names are each page's title, not meta chrome. Child selector on
   the last three so nested eyebrows (Phone alarms, Latest backup) stay meta. */
.today .eyebrow,
.night .eyebrow,
.log > .eyebrow,
.review > .eyebrow,
.rule > .eyebrow {
  font-family: var(--font-serif);
  font-size: 2rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

h1, h2, .serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.01em;
}

h1 { font-size: 2rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.35rem; margin: 0 0 0.5rem; }

p { margin: 0 0 1rem; }

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

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

a, button, summary, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

.time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.banner {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  color: var(--blue);
}

.chain { list-style: none; margin: 0; padding: 0; }
.chain li {
  position: relative;
  padding: 0 0 1.15rem 1.5rem;
  border-left: 1px solid var(--line);
  margin-left: 0.45rem;
}
.chain li:last-child { border-left-color: transparent; padding-bottom: 0; }
.chain li .dot {
  position: absolute;
  left: -0.45rem;
  top: 0.2rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--ground);
}
.chain li.done .dot {
  background: var(--brass);
  border-color: var(--brass);
}
.chain li.done .row-name,
.chain li.done .row-text {
  color: var(--muted);
}
.chain li.note .dot {
  background: var(--panel);
}

.row-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-touch-callout: none;
  user-select: none;
}
.row-btn:active { opacity: 0.55; }

.row-name {
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.row-name .when { color: var(--muted); font-size: 0.95rem; }
.row-text { color: var(--muted); font-size: 0.95rem; margin-top: 0.15rem; }

.btn, .yn button, select, input[type="time"], textarea, input[type="number"] {
  font-family: var(--font-sans);
  font-size: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.15rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  width: 100%;
}

.btn.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #f6f5f1;
}

html.night .btn.primary,
html[data-theme="dark"] .btn.primary {
  color: #141a22;
}

.btn.secondary {
  background: transparent;
  margin-top: 1.5rem;
}

.btn + .btn { margin-top: 0.6rem; }

.yn { display: flex; gap: 0.5rem; }
.yn button {
  flex: 1;
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.yn button.on {
  background: var(--brass);
  border-color: var(--brass);
  color: #f6f5f1;
}

.field { margin: 1rem 0; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

input[type="time"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-variant-numeric: tabular-nums;
}

textarea { min-height: 8rem; resize: vertical; line-height: 1.4; }

.morning {
  background: var(--panel);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
}
.morning .field:first-child { margin-top: 0; }
.morning .field:last-child { margin-bottom: 0; }
.morning input[type="time"],
.morning .yn button {
  background: var(--ground);
}

.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 0;
  background: var(--ground);
  border-top: 1px solid var(--line);
  padding: 0.35rem 0.4rem var(--safe-b);
  z-index: 40;
}
.tabs button {
  flex: 1;
  max-width: 6.2rem;
  min-height: 48px;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.tabs button.on { color: var(--brass); }

.ref {
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 1.1;
  margin: 0.4rem 0 1.25rem;
}

.prayer {
  background: var(--panel);
  border-radius: 12px;
  padding: 1.15rem 1.2rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.45;
}
.prayer p { margin: 0 0 0.85rem; }
.prayer p:last-child { margin: 0; }

/* Compline is a page, not a dashboard card: the office sits on the night
   ground itself. */
.night .prayer {
  background: none;
  border-radius: 0;
  padding: 0;
}

details.block {
  border-top: 1px solid var(--line);
  padding: 0 0 0.8rem;
  margin-top: 1.25rem;
}
details.block summary {
  cursor: pointer;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.8rem 0;
}

.card {
  background: var(--panel);
  border-radius: 12px;
  padding: 1.1rem 1.15rem;
  margin-bottom: 0.85rem;
}

.chart { width: 100%; height: 140px; display: block; }
.chart line, .chart polyline { fill: none; stroke-width: 1.5; }
.rule-block { margin: 1.4rem 0 1.8rem; }
.rule-block p { color: var(--muted); }
.footer {
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.welcome, .night, .onboard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100dvh - 6rem);
}
.welcome h1, .night h1 { font-size: 2.1rem; }

.stack { display: flex; flex-direction: column; gap: 0.6rem; }
.hidden { display: none !important; }

/* Log is a page of writing, like Compline: the evening written as one
   piece of prose. Values are words in the writing, in the same Garamond;
   what is not yet written sits faint. Tap a word to change it; tap a
   question to write its answer. Token-only, so night stays correct. */
.log .prose {
  margin: 0.5rem 0;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--muted);
}
.log .entry {
  display: inline-block;
  white-space: nowrap;
  color: inherit;
}
.log .entry.written {
  color: var(--ink);
}
.log .entry input {
  display: inline-block;
  width: 5.2ch;
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  vertical-align: baseline;
}
.log button.entry {
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  cursor: pointer;
}
.log button.add {
  display: inline-block;
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
#log-note {
  margin: 0.5rem 0 0;
}
#log-note:empty {
  display: none;
}

/* Review: the one question is the page; the week is marginalia. */
.review-question {
  margin: 0.5rem 0 2rem;
}
.review-question label {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.review-question input[type="text"] {
  width: 100%;
  min-height: 44px;
  padding: 0.35rem 0;
  background: none;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.15rem;
}
.week-line {
  margin: 0 0 0.35rem;
}
.week-line .kept {
  font-family: var(--font-serif);
  font-size: 1.15rem;
}
.week-line.serif {
  font-size: 1.15rem;
}
.review-week {
  margin-top: 1.25rem;
}
.review-week .chart {
  height: 120px;
}

/* Rule: the locked sentences are the page — the Compline bar. */
.rule .rule-block {
  margin: 0.6rem 0 0.8rem;
}
.rule .footer {
  margin-top: 1.4rem;
}
.derived {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.rule-block.rule-lines > p {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.rule .btn {
  width: auto;
  min-height: 44px;
  padding: 0 0.2rem;
  background: none;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--blue);
  color: var(--blue);
}
.alarms {
  margin-top: 1.2rem;
}
.copy-line {
  margin: 0.9rem 0 0;
}
.copy-line + .copy-line {
  margin-top: 0.2rem;
}
#import-note {
  margin: 0.4rem 0 0;
}
#import-note:empty {
  display: none;
}

@media (min-width: 640px) {
  body { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}