:root {
  --bg: #ffffff;
  --bg-alt: #f7f7f7;
  --text: #1a1a1a;
  --text-muted: #888;
  --text-faint: #aaa;
  --separator: #e8e8e8;
  --bar-bg: #ffffff;
  --bar-border: #e0e0e0;
  --field-border: #ccc;
  --field-bg: #ffffff;
  --accent: #007aff;
  --accent-text: #ffffff; /* text against an --accent background; same in both themes */
  /* The sentence body; the age and grade phrases lift out of it in --value-*.
     Ratios are against --bg, for 15px text, so the bar is AA 4.5:1. */
  --sentence: #666; /* 5.74:1 */
  --value-present: #1a1a1a; /* today — 17.40:1 */
  --value-future: #1a7f37; /* ahead of today — 5.08:1 */
  /* Orange, not brown: on white the ratio caps how bright an orange can be, and
     dropping the lightness far enough to pass drifts it toward brown. Hue 23°
     at full saturation is the compromise that still reads orange. */
  --value-past: #c04a00; /* behind today — 4.98:1 */
  --grade-out: #999; /* not-in-school / graduated: present but de-emphasized */
  --danger: #a05040;
  --track: #dcdcdc;

  --title-bar-height: 45px;

  /* Font sizes */
  --font-size-10: 10px;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-17: 17px;
  --font-size-22: 22px;
  --font-size-zoom-safe: 16px; /* min size to prevent iOS zoom-on-focus */

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-64: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --bg-alt: #222;
    --text: #e8e8e8;
    --text-muted: #888;
    --text-faint: #666;
    --separator: #2a2a2a;
    --bar-bg: #1a1a1a;
    --bar-border: #303030;
    --field-border: #444;
    --field-bg: #222;
    --accent: #0a84ff;
    --sentence: #9a9a9a; /* 6.19:1 */
    --value-present: #e8e8e8; /* 14.20:1 */
    --value-future: #3fb950; /* 6.85:1 */
    --value-past: #d29922; /* 6.90:1 */
    --grade-out: #777;
    --danger: #c07060;
    --track: #3a3a3a;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Panels are toggled with the `hidden` attribute, but the UA's
   `[hidden] { display: none }` loses to any author `display` rule — and several
   of these are flex containers. Without this, hiding the form leaves it up. */
[hidden] {
  display: none !important;
}

html,
body {
  overscroll-behavior: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--font-size-14);
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  /* Room for the fixed title bar above and the fixed time bar below */
  padding-top: calc(var(--title-bar-height) + env(safe-area-inset-top));
  /* Clears the fixed time bar, which measures 77px tall at its default sizes */
  padding-bottom: calc(var(--space-64) + var(--space-16) + env(safe-area-inset-bottom));
}

body::-webkit-scrollbar {
  display: none;
}

body {
  scrollbar-width: none;
}

button {
  font-family: inherit;
  font-size: var(--font-size-13);
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-6) var(--space-8);
}

/* --- Title bar --- */

#title-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--title-bar-height) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--space-8) 0 var(--space-16);
  background: var(--bar-bg);
  border-bottom: 1px solid var(--bar-border);
}

#app-title {
  font-size: var(--font-size-15);
  font-weight: 600;
  /* Same tense colour as the age and grade phrases below, so the heading and
     the rows read as one statement about the same moment. */
  color: var(--value, var(--value-present));
  /* Holds a full date, so it has to yield before the Manage button does */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#title-actions {
  display: flex;
  gap: var(--space-4);
}

/* --- People list --- */

#people-list {
  list-style: none;
}

.person-row {
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--separator);
}

/* Only rendered when a heading would actually separate people — see
   groupedPeople(). A single household never sees one. */
.family-heading {
  padding: var(--space-16) var(--space-16) var(--space-6);
  font-size: var(--font-size-11);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* The first heading sits directly under the fixed title bar, where the
   full leading above would read as a gap rather than a grouping. */
.family-heading:first-child {
  padding-top: var(--space-10);
}

.person-sentence {
  font-size: var(--font-size-15);
  line-height: 1.35;
  color: var(--sentence);
  /* Keep "8th grade" and "isn't born" from breaking across lines mid-phrase */
  text-wrap: pretty;
}

/* Full contrast regardless of the slider — whose row this is doesn't change
   with the date, so it shouldn't carry the tense colour. */
.person-name {
  font-weight: 600;
  color: var(--text);
}

/* The heading and the age/grade phrases carry the slider's tense as colour.
   The tint is resolved once on <body> — which the fixed title bar is inside and
   the list is too — so scrubbing sets a single attribute rather than restyling
   anything individually. */
body[data-tense="present"] {
  --value: var(--value-present);
}

body[data-tense="future"] {
  --value: var(--value-future);
}

body[data-tense="past"] {
  --value: var(--value-past);
}

.person-value {
  font-weight: 600;
  color: var(--value, var(--value-present));
}

/* Outside K-12 there's no grade to report, so the clause stays de-emphasized
   instead of taking the tense colour — it isn't reporting a moment in time. */
.person-value.out-of-range {
  color: var(--grade-out);
}

.person-birth {
  font-size: var(--font-size-12);
  color: var(--text-muted);
  margin-top: var(--space-4);
}

/* --- Onboarding --- */

#onboarding {
  padding: var(--space-32) var(--space-20);
  color: var(--text-muted);
  font-size: var(--font-size-14);
  line-height: 1.5;
}

#onboarding p + p {
  margin-top: var(--space-14);
}

.a2hs-hint {
  font-size: var(--font-size-12);
}

.cta-btn {
  display: inline-block;
  margin-top: var(--space-20);
  padding: var(--space-10) var(--space-16);
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 8px;
  font-size: var(--font-size-14);
}

/* --- Manage panel --- */

#manage-panel {
  padding: var(--space-16) var(--space-16) var(--space-32);
}

/* A view of its own now rather than a header above the roster, so it needs no
   rule dividing it from anything. */
#person-form {
  display: flex;
  flex-direction: column;
}

#add-person-btn {
  width: 100%;
  margin-top: 0;
  margin-bottom: var(--space-20);
  text-align: center;
}

#form-heading {
  font-size: var(--font-size-13);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-12);
}

#person-form label {
  font-size: var(--font-size-12);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

#person-form label + input,
#person-form label + #grade-row,
#person-form label + #family-row {
  margin-bottom: var(--space-12);
}

#family-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.optional-note {
  color: var(--text-faint);
}

#person-form input,
#person-form select {
  font-family: inherit;
  /* 16px keeps iOS from zooming the viewport when a field takes focus */
  font-size: var(--font-size-zoom-safe);
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 6px;
  padding: var(--space-8) var(--space-10);
  width: 100%;
}

#grade-row {
  display: flex;
  gap: var(--space-8);
}

#grade-row select {
  flex: 1;
}

#form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-4);
}

#form-actions .cta-btn {
  margin-top: 0;
  flex: 1;
  text-align: center;
}

#manage-list {
  list-style: none;
}

.manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--separator);
}

.manage-row .manage-info {
  min-width: 0;
}

.manage-row .manage-name {
  font-size: var(--font-size-14);
  font-weight: 600;
}

.manage-row .manage-detail {
  font-size: var(--font-size-11);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.manage-row .manage-actions {
  flex-shrink: 0;
  white-space: nowrap;
}

.manage-row .remove-btn {
  color: var(--danger);
}

#backup-row {
  display: flex;
  gap: var(--space-12);
  margin-top: var(--space-20);
}

#backup-text {
  width: 100%;
  height: 140px;
  margin-top: var(--space-12);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-zoom-safe);
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 6px;
  padding: var(--space-8);
  resize: vertical;
}

/* --- Time bar --- */

#time-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--bar-bg);
  border-top: 1px solid var(--bar-border);
  padding: var(--space-10) var(--space-16)
    calc(var(--space-8) + env(safe-area-inset-bottom));
}

#date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-2);
}

#date-label {
  font-size: var(--font-size-12);
  color: var(--text-muted);
}

#today-btn {
  flex-shrink: 0;
  border: 1px solid var(--field-border);
  border-radius: 999px;
  padding: var(--space-4) var(--space-12);
}

#time-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: none;
}

#time-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--track);
}

#time-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
}

#time-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--track);
}

#time-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
}

#slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-10);
  color: var(--text-faint);
  /* Align the end labels with the thumb's centre at each extreme */
  padding: 0 var(--space-2);
  margin-top: -2px;
}