:root,
:root[data-theme="light"] {
  --bg: #f7f3ec;
  --paper: #fdfaf5;
  --ink: #2b2925;
  --muted: #6f695f;
  --line: #e6dfd3;
  --hover: #ede6da;
  --accent: #6f8f72;
  --accent-ink: #4c6b50;
  --accent-soft: #dbe6d7;
  --on-accent: #fdfaf5;
  --warn: #a5582f;
  --shadow: 0 1px 2px rgba(60, 45, 20, 0.04), 0 8px 24px rgba(60, 45, 20, 0.06);
  --heat-0: #ece6db;
  --heat-1: #d6e2d2;
  --heat-2: #aec7aa;
  --heat-3: #86a983;
  --heat-4: #5e8a5d;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif", "Noto Serif Devanagari", "Noto Serif Bengali", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --sky: #f2dcc7;
  --glow: #f1c8a6;
  color-scheme: light;
}

/* Dawn skies, one per season. Light mode is early morning just after
   sunrise; dark mode is the blue hour just before it. */
:root[data-season="winter"]  { --sky: #dfe5ee; --glow: #f6dccb; }
:root[data-season="spring"]  { --sky: #f1dfe4; --glow: #f8e8c8; }
:root[data-season="summer"]  { --sky: #f7e1c3; --glow: #fbd2ae; }
:root[data-season="monsoon"] { --sky: #d9e4df; --glow: #ece7d8; }
:root[data-season="autumn"]  { --sky: #f2dcc7; --glow: #f1c8a6; }
:root[data-theme="dark"][data-season="winter"]  { --sky: #1e2331; --glow: #312b33; }
:root[data-theme="dark"][data-season="spring"]  { --sky: #2a2129; --glow: #36292b; }
:root[data-theme="dark"][data-season="summer"]  { --sky: #2c2420; --glow: #3c2b22; }
:root[data-theme="dark"][data-season="monsoon"] { --sky: #1c2625; --glow: #272d29; }
:root[data-theme="dark"][data-season="autumn"]  { --sky: #2c221c; --glow: #3a2920; }

/* Warm, low-glare dark: brown-black paper, never pure black or pure white. */
:root[data-theme="dark"] {
  --bg: #1b1a18;
  --paper: #23211e;
  --ink: #e8e2d6;
  --muted: #a39c90;
  --line: #36332e;
  --hover: #2d2a26;
  --accent: #9cbc98;
  --accent-ink: #a9c8a5;
  --accent-soft: #33412f;
  --on-accent: #1b1a18;
  --warn: #e0a07a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 30px rgba(0, 0, 0, 0.3);
  --heat-0: #2a2824;
  --heat-1: #34432f;
  --heat-2: #4a6446;
  --heat-3: #67875f;
  --heat-4: #8fb486;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}
html { background: var(--bg); transition: background-color 0.3s ease; }
body {
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* The sky sits on its own fixed layer so it stays put while the page scrolls
   (background-attachment: fixed is ignored on iOS). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 70% -5%, var(--glow) 0%, transparent 70%),
    linear-gradient(to bottom, var(--sky) 0%, var(--bg) 65%);
  transition: opacity 0.3s ease;
}

::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

/* Line icons from the sprite in index.html */
.i {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  vertical-align: -0.2em;
}

#app { min-height: 100%; display: flex; flex-direction: column; }

a { color: var(--accent-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; }
h3 { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: 0.45rem; }
h3 .i { color: var(--accent); }

.loading { margin: auto; color: var(--muted); font-family: var(--serif); }

.center { margin: auto; padding: 2rem 1.25rem; }
.narrow { width: 100%; max-width: 30rem; }
.content { width: 100%; max-width: 46rem; margin: 0 auto; padding: 1rem 1.25rem 3rem; }
.stack > * + * { margin-top: 0.75rem; }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.card .hint { margin-bottom: 0; }
.row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

.brand { font-size: 2.6rem; margin: 0 0 0.5rem; letter-spacing: 0.01em; }
.lede { font-family: var(--serif); font-size: 1.2rem; line-height: 1.55; color: var(--muted); margin: 0 0 1.75rem; }
.hint { color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.error { color: var(--warn); font-size: 0.92rem; }

/* Welcome / sign in */
.welcome { text-align: center; }
.welcome form { text-align: left; }
.mark { width: 3.25rem; height: 3.25rem; margin-bottom: 0.75rem; }
.mark-track { stroke: var(--line); }
.mark-fill { stroke: var(--accent); }
.switch { text-align: center; margin-bottom: 0; }
.promises { list-style: none; padding: 0; margin: 1.75rem auto 0; max-width: 24rem; text-align: left; }
.promises li { display: flex; gap: 0.65rem; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.promises li + li { margin-top: 0.6rem; }
.promises .i { color: var(--accent); margin-top: 0.05rem; }

label { display: block; font-size: 0.9rem; color: var(--muted); }
input {
  font: inherit;
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder { color: var(--muted); opacity: 0.6; }
.row input { width: auto; flex: 1; min-width: 8rem; }

button, .button {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.primary {
  background: var(--accent-ink);
  color: var(--on-accent);
  border-color: var(--accent-ink);
  width: 100%;
  padding: 0.8rem 1.1rem;
  font-weight: 500;
}
button.primary:hover:not(:disabled) { filter: brightness(1.06); }
button:disabled { opacity: 0.5; cursor: default; }
.ghost:hover { border-color: var(--muted); background: var(--hover); }
button.warn { color: var(--warn); border-color: currentColor; }
button.warn:hover { background: var(--hover); }

/* Theme picker */
.segmented {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
}
.segmented label { flex: 1; color: var(--ink); font-size: 0.92rem; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented span {
  display: block;
  text-align: center;
  padding: 0.5rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.segmented input:checked + span { background: var(--paper); box-shadow: var(--shadow); font-weight: 500; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Top bar */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: max(0.6rem, env(safe-area-inset-top)) 1rem 0.6rem;
  position: sticky;
  top: 0;
  z-index: 2;
}
/* Frosted and feathered at the bottom edge, so the sky shows through and
   words scroll softly under the bar instead of hitting a line. */
.bar::before {
  content: "";
  position: absolute;
  inset: 0 0 -0.75rem;
  z-index: -1;
  background: color-mix(in srgb, var(--sky) 40%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(#000 65%, transparent);
  mask-image: linear-gradient(#000 65%, transparent);
}
.bar-left, .bar-right { flex: 1; display: flex; gap: 0.25rem; align-items: center; }
.bar-right { justify-content: flex-end; }
.bar-title { margin: 0; font-size: 1.15rem; position: absolute; left: 50%; transform: translateX(-50%); }
.today-label, .season { font-family: var(--serif); color: var(--muted); white-space: nowrap; }
.season { opacity: 0.8; }
@media (max-width: 30rem) { .season { display: none; } }
.private { display: inline-flex; color: var(--accent); margin-right: 0.35rem; cursor: help; }
.private .i { width: 0.95rem; height: 0.95rem; }
.sync { font-size: 0.75rem; color: var(--muted); margin-left: 0.5rem; }
.icon {
  border: none;
  padding: 0.55rem;
  line-height: 0;
  color: var(--muted);
  text-decoration: none;
  border-radius: 12px;
  display: inline-flex;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.icon:hover { color: var(--ink); background: var(--hover); }
.icon[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-soft); }

/* Progress ring: fills gently, never turns red */
.ring-wrap { position: relative; width: 44px; height: 44px; }
.ring { width: 44px; height: 44px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring-track { stroke: var(--line); }
.ring-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 119.38;
  stroke-dashoffset: 119.38;
  transition: stroke-dashoffset 0.6s ease;
}
.count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The page */
.paper { flex: 1; display: flex; padding: 0 1rem 1rem; }
#page {
  flex: 1;
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  min-height: calc(100vh - 5rem);
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.8;
  padding: 1.5rem 0 40vh;
  caret-color: var(--accent);
}
#page::placeholder { color: var(--muted); opacity: 0.65; font-style: italic; }

/* Don't look back: earlier lines fade away */
.dlb #page {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.15) 25%, #000 55%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.15) 25%, #000 55%);
}

.done {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(26rem, calc(100% - 2rem));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow);
  text-align: center;
  animation: rise 0.5s ease both;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 0.75rem); } }
.done-title { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 0.25rem; color: var(--accent-ink); }
.done-stats { color: var(--muted); margin: 0 0 0.75rem; }

/* Primer */
.primer-card { min-height: 15rem; }
.primer-card h2 { font-size: 1.7rem; margin: 0.5rem 0 0.75rem; }
.primer-card p { font-family: var(--serif); font-size: 1.15rem; line-height: 1.65; }
.primer-card .hint { font-family: var(--sans); font-size: 0.92rem; }
.primer .row { justify-content: space-between; margin-top: 1.5rem; }
.primer .row .primary { width: auto; }
.dots { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 1rem; }
.dots li { width: 7px; height: 7px; border-radius: 999px; background: var(--line); transition: width 0.3s ease, background-color 0.3s ease; }
.dots li.on { background: var(--accent); width: 20px; }

/* Calendar */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 0.9rem 1rem; box-shadow: var(--shadow); }
.stat b { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; }
.stat span { color: var(--muted); font-size: 0.82rem; }
.year-nav { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.75rem; }
.year { font-family: var(--serif); font-size: 1.2rem; min-width: 3.5rem; text-align: center; }
.heatmap {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
.heatmap button {
  width: 13px;
  height: 13px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: var(--heat-0);
}
.heatmap button.blank { visibility: hidden; }
.heatmap button[data-day] { cursor: pointer; }
.heatmap button[data-l="1"], .legend i[data-l="1"] { background: var(--heat-1); }
.heatmap button[data-l="2"], .legend i[data-l="2"] { background: var(--heat-2); }
.heatmap button[data-l="3"], .legend i[data-l="3"] { background: var(--heat-3); }
.heatmap button[data-l="4"], .legend i[data-l="4"] { background: var(--heat-4); }
.legend { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 0.78rem; margin-top: 0.5rem; }
.legend span:first-child { margin-right: 0.35rem; }
.legend span:last-child { margin-left: 0.35rem; }
.legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--heat-0); }
.heatmap button.sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.reader { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.reader h3 { margin-top: 0; }
.reader .text { white-space: pre-wrap; font-family: var(--serif); font-size: 1.1rem; line-height: 1.7; }

/* Settings */
.settings { max-width: 34rem; }
.settings > * + * { margin-top: 1rem; }
.settings .signed-in-as { margin: 0.25rem 0 0; }
details.danger summary { cursor: pointer; color: var(--muted); margin-top: 0.5rem; font-size: 0.92rem; }
details.danger[open] summary { color: var(--warn); }