/* Light is the base palette. */
:root {
  --ground: #F5F9FA;
  --surface: #FFFFFF;
  --ink: #17262E;
  --muted: #5C7079;
  --accent: #1D7387;
  --accent-soft: #E1EFF2;
  --line: #D9E3E7;
  /* Text sitting on an --accent fill. White clears 4.5:1 on the light accent
     but only reaches 2.4:1 on the lighter dark-theme accent, so it flips. */
  --on-accent: #FFFFFF;
}

/* Dark follows the system, unless the reader has pinned light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0D1519;
    --surface: #142027;
    --ink: #DAE5EA;
    --muted: #8CA3AD;
    --accent: #56B4C8;
    --accent-soft: #17323A;
    --line: #223440;
    --on-accent: #0D1519;
  }
}

/* Dark also applies when pinned, whatever the system says. */
:root[data-theme="dark"] {
  --ground: #0D1519;
  --surface: #142027;
  --ink: #DAE5EA;
  --muted: #8CA3AD;
  --accent: #56B4C8;
  --accent-soft: #17323A;
  --line: #223440;
  --on-accent: #0D1519;
}

* { box-sizing: border-box; }

/* A stylesheet display value outranks the browser's rule for [hidden], so any
   element toggled through the attribute needs this or it never goes away. */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem 0.5rem;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
.brand {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.3em;
  font-size: 0.95rem;
  color: var(--accent);
  margin-right: auto;
}
.day {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--muted);
}
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--muted);
  background: none;
  border: none;
  flex: none;
}
.iconbtn:hover { color: var(--accent); }
.iconbtn svg { width: 1.05rem; height: 1.05rem; }

/* The theme button holds both icons and shows whichever the tap will switch
   to, so its own svg rule has to be narrower than the shared one above. */
.theme svg { display: none; }
.theme.is-dark .sun { display: block; }
.theme.is-light .moon { display: block; }

/* Every flex item in the chain down to the reader needs min-height: 0. The
   default of auto refuses to shrink below the content, so a long article
   would push the reader taller than the viewport, leaving nothing to scroll
   through: scrollHeight and clientHeight come out equal and the read ends on
   its first frame. */
main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem 1.25rem;
}

.screen { display: none; }
.screen.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ---- centred screens ---- */
/* Centred flex content that grows taller than its container overflows in both
   directions, and the part above the top edge cannot be scrolled to. The
   results screen does exactly that once the share card is shown. "safe"
   centring falls back to packing from the start instead of clipping; the
   plain value on the line above covers browsers that do not know the keyword. */
#screen-today, #screen-quiz, #screen-results, #screen-empty {
  justify-content: center;
  justify-content: safe center;
  overflow-y: auto;
  gap: 0.75rem;
  text-align: center;
}
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.8rem;
  margin: 0;
  text-wrap: balance;
}
.meta { color: var(--muted); margin: 0; font-variant-numeric: tabular-nums; }
.meta.big { font-size: 1.15rem; }
.hint { color: var(--muted); font-size: 0.85rem; margin: 0; }
/* The only link in the app leads to the page explaining what Zephyr is. */
.hint a { color: var(--accent); }
.attribution { color: var(--muted); font-size: 0.78rem; margin: 0; }
.sample-note {
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.78rem;
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  margin: 0 auto;
}
/* ---- backup dialog ---- */
dialog {
  max-width: 32rem;
  width: calc(100% - 2rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  padding: 1.5rem;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 0.75rem;
}
dialog .hint { text-align: left; }
dialog .meta { text-align: left; margin: 0.75rem 0 0.5rem; }
dialog textarea {
  width: 100%;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem;
  resize: vertical;
  word-break: break-all;
}
dialog textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
dialog .actions { margin-top: 1rem; }

.preview {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.75rem 0;
  text-align: left;
}
.preview-word {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.9rem;
  font-size: 0.92rem;
}
.preview-word b { font-family: Georgia, serif; font-weight: 600; white-space: nowrap; }
.preview-word span { color: var(--muted); }

button {
  font: inherit;
  cursor: pointer;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.primary {
  align-self: center;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  padding: 0.8rem 2rem;
  font-size: 1.05rem;
}
.primary:hover { opacity: 0.92; }

/* ---- action stack on the results screen ---- */
.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.share-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wide { padding: 0.8rem 1.5rem; }
.wide:hover { border-color: var(--accent); color: var(--accent); }
.text-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
}
.text-btn:hover { color: var(--accent); }

.card-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.card-holder img {
  width: min(280px, 70vw);
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: block;
}
#cardDialog { max-width: 22rem; }
.card-holder a {
  display: inline-block;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-align: center;
}
.card-holder a:hover { border-color: var(--accent); color: var(--accent); }

/* ---- quiz ---- */
.counter {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin: 0;
}
.question {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.45;
  margin: 0 auto;
  max-width: 24rem;
  text-wrap: balance;
}
.options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.option {
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  text-align: left;
  line-height: 1.45;
}
.option:hover:enabled { border-color: var(--accent); }
.option:disabled { cursor: default; }
.option.right {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}
.option.wrong { color: var(--muted); }

/* ---- results ---- */
.hero {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
}
.hero b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.6rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.hero span {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.streak-line {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.keys {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  text-align: center;
}
@media (hover: none) {
  /* A touch device has no space bar to tell anyone about. */
  .keys { display: none; }
}

/* ---- reader ---- */
#screen-reader { padding-top: 0.25rem; }
.reader {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
}
.track {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.8;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  will-change: transform;
}
.track h2 {
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 1rem;
}
.track p { margin: 0 0 1.1em; }
.band {
  position: absolute;
  left: 0; right: 0;
  top: 37%;
  height: 26%;
  background: linear-gradient(180deg, transparent, var(--accent-soft) 30%, var(--accent-soft) 70%, transparent);
  opacity: 0.5;
  pointer-events: none;
}
.fade { position: absolute; left: 0; right: 0; height: 28%; pointer-events: none; }
.fade.top { top: 0; background: linear-gradient(180deg, var(--surface) 10%, transparent); }
.fade.bottom { bottom: 0; background: linear-gradient(0deg, var(--surface) 10%, transparent); }
.countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 4rem;
  color: var(--accent);
  background: var(--surface);
}
.progress { height: 3px; background: var(--line); border-radius: 2px; margin: 0.6rem 0 0; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; }

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding-top: 0.7rem;
}
.controls button { width: 2.5rem; height: 2.5rem; font-size: 1.05rem; }
.controls button:hover { border-color: var(--accent); }
.controls .play {
  width: 3.2rem;
  height: 3.2rem;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-size: 1.15rem;
}
.wpm {
  font-family: ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--muted);
  min-width: 4.5rem;
  text-align: center;
}
.wpm b { display: block; font-size: 1.1rem; color: var(--ink); }

.step {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: none;
  border: none;
  flex: none;
}
.step svg { width: 1rem; height: 1rem; }
.step:hover { color: var(--accent); }
.step.on { color: var(--accent); }