/* howmanydaysuntil.co — clean, calm, precise.
   Tokens are declared twice: hex fallback first, OKLCH for browsers that
   support it. Pure white ground; one sky-cobalt primary carries the answer. */

:root {
  --bg: #ffffff;
  --surface: #f3f5f8;
  --ink: #20242c;
  --muted: #5b6472;
  --primary: #2563a8;
  --primary-deep: #1c4f88;
  --primary-soft: #e3ecf6;
  --rule: #dde2e9;

  --bg: oklch(1 0 0);
  --surface: oklch(0.965 0.006 240);
  --ink: oklch(0.26 0.02 250);
  --muted: oklch(0.5 0.025 250);
  --primary: oklch(0.5 0.12 245);
  --primary-deep: oklch(0.42 0.11 245);
  --primary-soft: oklch(0.93 0.03 240);
  --rule: oklch(0.91 0.008 240);
  --error: oklch(0.5 0.17 25);
  --on-primary: #fff;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  color-scheme: light;
}

/* Dark theme: same hue family, ground drops to near-black ink-blue, the
   cobalt lifts so the number still carries the page. Applies from the system
   setting unless the visitor chose light; the footer toggle sets data-theme,
   which wins in both directions. The block is duplicated because CSS cannot
   share a declaration list between a media query and a selector. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15181e;
    --surface: #1e2229;
    --ink: #e6e9ee;
    --muted: #99a1ad;
    --primary: #7aaade;
    --primary-deep: #a3c4ea;
    --primary-soft: #263243;
    --rule: #313743;
    --error: #e08a80;

    --bg: oklch(0.19 0.012 250);
    --surface: oklch(0.24 0.014 250);
    --ink: oklch(0.93 0.008 250);
    --muted: oklch(0.71 0.02 250);
    --primary: oklch(0.72 0.1 245);
    --primary-deep: oklch(0.8 0.08 245);
    --primary-soft: oklch(0.3 0.05 245);
    --rule: oklch(0.32 0.012 250);
    --error: oklch(0.7 0.14 25);
    /* Primary is a pale fill in dark mode — dark text, not white. */
    --on-primary: oklch(0.2 0.02 250);

    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15181e;
  --surface: #1e2229;
  --ink: #e6e9ee;
  --muted: #99a1ad;
  --primary: #7aaade;
  --primary-deep: #a3c4ea;
  --primary-soft: #263243;
  --rule: #313743;
  --error: #e08a80;

  --bg: oklch(0.19 0.012 250);
  --surface: oklch(0.24 0.014 250);
  --ink: oklch(0.93 0.008 250);
  --muted: oklch(0.71 0.02 250);
  --primary: oklch(0.72 0.1 245);
  --primary-deep: oklch(0.8 0.08 245);
  --primary-soft: oklch(0.3 0.05 245);
  --rule: oklch(0.32 0.012 250);
  --error: oklch(0.7 0.14 25);
  --on-primary: oklch(0.2 0.02 250);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { font-kerning: normal; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

.page {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-sm) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

/* Eyebrow and answer read as one unit — tight internal gap instead of the
   page-level rhythm. */
.hero {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.eyebrow {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Answer states ---- */

#answer { display: flex; flex-direction: column; gap: var(--space-xs); }

/* The countdown is one h1 (number + phrase) for document structure; the
   spans carry the visual roles. Reset the h1 chrome. */
.count {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: 1rem;
  font-weight: 400;
}

.num {
  margin: 0;
  display: block;
  font-size: clamp(4rem, 14vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}

.until {
  margin: 0;
  display: block;
  font-size: 1.25rem;
  color: var(--ink);
  text-wrap: balance;
}
.until strong { font-weight: 600; }

.lede {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.sub {
  margin: 0;
  max-width: 34ch;
  align-self: center;
  color: var(--muted);
  text-wrap: pretty;
}

.sub a, .until a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sub a:hover, .until a:hover { color: var(--primary-deep); }

@media (prefers-reduced-motion: no-preference) {
  .num {
    animation: settle 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes settle {
    from { opacity: 0; transform: translateY(0.15em); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---- Type-a-date form ---- */

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

.date-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
}

#dateInput {
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
  width: 10.5rem;
  text-align: center;
}
#dateInput::placeholder { color: var(--muted); }
#dateInput:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
}
#dateInput[aria-invalid="true"] { border-color: var(--error); }
/* Keep the error visible while focused — otherwise the blue focus ring hides
   the red border at the exact moment attention returns to the field. */
#dateInput[aria-invalid="true"]:focus-visible {
  outline-color: var(--error);
  border-color: var(--error);
}

.go-btn {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-primary);
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 0.625rem 1.125rem;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}
.go-btn:hover { background: var(--primary-deep); border-color: var(--primary-deep); }
.go-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.date-hint {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.875rem;
  color: var(--error);
}

/* ---- Share ---- */

.copy-btn {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.625rem 1.125rem;
  cursor: pointer;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}
.copy-btn:hover { background: var(--primary-soft); border-color: var(--primary); }
.copy-btn:active { background: var(--primary-soft); }
.copy-btn:focus-visible,
.flatpickr-day:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.copy-btn.copied { color: var(--muted); border-color: var(--rule); background: var(--bg); }

/* ---- Homepage and generic date pages ---- */

.landing-page {
  max-width: 66rem;
  align-items: stretch;
  text-align: left;
}
.landing-layout {
  display: grid;
  grid-template-columns: minmax(22rem, 1fr) 22rem;
  align-items: start;
  gap: clamp(var(--space-lg), 7vw, 5rem);
  width: 100%;
}
.countdown-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  min-width: 0;
  text-align: center;
}
.event-discovery {
  min-width: 0;
  padding-left: var(--space-lg);
  border-left: 1px solid var(--rule);
}
.event-discovery-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.event-discovery h2 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.event-discovery-head p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.shuffle-events {
  margin: -0.25rem -0.5rem 0 0;
  padding: 0.5rem;
  border: 0;
  border-radius: 6px;
  color: var(--primary);
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.shuffle-events:hover { background: var(--primary-soft); }
.shuffle-events:active { color: var(--primary-deep); }
.shuffle-events:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.event-suggestions {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.event-suggestions li { border-bottom: 1px solid var(--rule); }
.event-suggestions a {
  display: block;
  padding: 0.875rem 0.25rem;
  color: var(--ink);
  text-decoration: none;
}
.event-suggestions a:hover strong { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.event-suggestions strong,
.event-suggestions span { display: block; }
.event-suggestions strong { font-size: 0.9375rem; font-weight: 600; }
.event-suggestions span { margin-top: 0.125rem; color: var(--muted); font-size: 0.8125rem; }

@media (max-width: 50rem) {
  .landing-page { max-width: 40rem; }
  .landing-layout { grid-template-columns: minmax(0, 1fr); }
  .event-discovery {
    padding: var(--space-lg) 0 0;
    border-top: 1px solid var(--rule);
    border-left: 0;
  }
}

/* ---- Calendar (flatpickr inline overrides) ---- */

/* Reserve the 6-week-row worst case (measured 298px in-browser) so the footer
   never jumps when flatpickr builds. */
.calendar { min-height: 19rem; }

.flatpickr-calendar.inline {
  box-shadow: none;
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-family: inherit;
  margin: 0 auto;
  background: var(--bg);
}
.flatpickr-calendar.inline::before,
.flatpickr-calendar.inline::after { display: none; }

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: var(--ink); fill: var(--ink); }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 600; }
.flatpickr-current-month input.cur-year { font-weight: 600; }

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { fill: var(--muted); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--primary); }

span.flatpickr-weekday { color: var(--muted); font-weight: 600; }

.flatpickr-day { color: var(--ink); font-variant-numeric: tabular-nums; }
.flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover {
  background: var(--primary-soft);
  border-color: var(--primary-soft);
}
.flatpickr-day.today { border-color: var(--primary); }
.flatpickr-day.today:hover { color: var(--ink); }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
/* Adjacent-month days are ENABLED, clickable cells when in range — they must
   hold AA contrast (--muted on white ≈ 6:1). Only truly disabled days may
   fade; WCAG exempts disabled controls. */
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: var(--muted);
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
  color: var(--muted);
  opacity: 0.45;
}

/* ---- Footer ---- */

.site-foot {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-md) var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}
.site-foot p { margin: 0 0 var(--space-xs); }
.site-foot code {
  font-family: inherit;
  background: var(--surface);
  border-radius: 4px;
  padding: 0.375rem 0.625rem;
  margin: 0 0.125rem;
  display: inline-block;
}
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--primary); }

.network-foot {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-sm) 0;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
}
.network-foot-group { margin: 0 0 var(--space-xs); }
.network-foot-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.network-foot code {
  font-family: inherit;
  background: var(--surface);
  border-radius: 4px;
  padding: 0.375rem 0.625rem;
  margin: 0 0.125rem 0.375rem;
  display: inline-block;
}
.network-foot a { color: var(--muted); }
.network-foot a:hover { color: var(--primary); }

/* The homepage's landing-page layout is wide and left-aligned, unlike
   the narrow centered event/archive pages - match its width/alignment
   so the footer doesn't look stranded in the middle of a wide page. */
.landing-page ~ .site-foot,
.landing-page ~ .network-foot {
  max-width: 66rem;
  text-align: left;
}
/* .credits-block self-centers (margin: auto) regardless of its parent's
   text-align, so on the wide homepage footer it floats centered in the
   66rem box while the Credits toggle sits at the left - pin it back
   under the toggle instead of following the default center. */
.landing-page ~ .site-foot .credits-block {
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 50rem) {
  .landing-page ~ .site-foot,
  .landing-page ~ .network-foot {
    max-width: 40rem;
    text-align: center;
  }
  .landing-page ~ .site-foot .credits-block {
    margin-left: auto;
    margin-right: auto;
  }
}

.theme-toggle {
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0 0.25rem;
  cursor: pointer;
  position: relative;
}
/* Invisible hit-area expansion — the glyph stays small, the target doesn't. */
.theme-toggle::before {
  content: "";
  position: absolute;
  inset: -12px;
}
.theme-toggle:hover { color: var(--primary); }
.theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.credits summary {
  cursor: pointer;
  display: inline-block;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0.25rem 0.5rem;
}
.credits-block {
  max-width: 26rem;
  margin: var(--space-xs) auto 0;
  padding: var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  text-align: left;
  font-size: 0.875rem;
}
.credits-block ul { margin: var(--space-xs) 0 0; padding-left: 1.25rem; }
.credits-block li { margin: 0; }
.credits-about {
  margin: 0 0 var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--rule);
}
.credits-block a { color: var(--primary); }
.credits-block a:hover { color: var(--primary-deep); }

/* ---- Generated event landing pages ---- */

.event-page {
  max-width: 64rem;
  padding-top: var(--space-md);
  align-items: stretch;
}
.breadcrumb {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  color: var(--muted);
  font-size: 0.875rem;
  text-align: left;
}
.breadcrumb a { color: var(--primary); }
.breadcrumb span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: start;
  gap: clamp(var(--space-lg), 7vw, 5rem);
  width: 100%;
}
.event-content {
  min-width: 0;
  text-align: left;
}
.event-content .hero { align-items: flex-start; }
.event-content #answer { align-items: flex-start; }
.event-content .count { align-items: flex-start; }
.event-content .sub { align-self: flex-start; }
.event-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 20rem;
}
.event-details {
  width: 100%;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  text-align: left;
}
.event-details h2 {
  margin: 0 0 var(--space-sm);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.event-details p {
  max-width: 65ch;
  margin: 0 0 var(--space-sm);
  color: var(--muted);
  text-wrap: pretty;
}
.event-details a { color: var(--primary); text-underline-offset: 2px; }
.event-sources {
  width: 100%;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  text-align: left;
}
.event-sources h2 { margin: 0 0 var(--space-xs); font-size: 1rem; }
.event-sources ul { margin: 0; padding-left: 1.25rem; }
.event-sources li { margin: 0.25rem 0; color: var(--muted); }
.event-sources a { color: var(--primary); text-underline-offset: 2px; }

/* ---- Browseable event archive ---- */

.archive-page {
  width: min(100% - 2rem, 64rem);
  margin: 0 auto;
  padding: var(--space-md) 0 var(--space-xl);
}
.archive-intro { margin: var(--space-xl) 0 var(--space-lg); }
.archive-intro h1 {
  max-width: 18ch;
  margin: 0;
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.archive-intro p { max-width: 55ch; margin: var(--space-xs) 0 0; color: var(--muted); text-wrap: pretty; }
.archive-years {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding: 0 0 var(--space-sm);
  border-bottom: 1px solid var(--rule);
}
.archive-years span { color: var(--muted); font-size: 0.875rem; }
.archive-years a { color: var(--primary); font-weight: 600; text-underline-offset: 3px; }
.archive-switch { margin-left: auto; }
.archive-switch a { white-space: nowrap; }
.archive-empty { margin: 0; padding: var(--space-lg) 0; color: var(--muted); }
.archive-list { display: grid; gap: var(--space-xl); }
.archive-year { scroll-margin-top: var(--space-sm); }
.archive-year-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--ink);
}
.archive-year-head h2 { margin: 0; font-size: 1.5rem; letter-spacing: -0.015em; }
.archive-year-head span { color: var(--muted); font-size: 0.875rem; }
.archive-year ol { margin: 0; padding: 0; list-style: none; }
.archive-year li { border-bottom: 1px solid var(--rule); }
.archive-year a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: baseline;
  padding: 0.75rem 0.25rem;
  color: var(--ink);
  text-decoration: none;
}
.archive-year a:hover strong { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.archive-year strong { min-width: 0; font-size: 0.9375rem; font-weight: 600; }
.archive-year time { color: var(--muted); font-size: 0.875rem; white-space: nowrap; }

@media (max-width: 32rem) {
  .archive-page { width: min(100% - 1.5rem, 64rem); }
  .archive-intro { margin-top: var(--space-lg); }
  .archive-year a { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
  .archive-switch { flex-basis: 100%; margin-left: 0; }
}

@media (max-width: 48rem) {
  .event-page { max-width: 40rem; }
  .event-layout { grid-template-columns: minmax(0, 1fr); }
  .event-content,
  .event-content .hero,
  .event-content #answer,
  .event-content .count { align-items: center; text-align: center; }
  .event-content .sub { align-self: center; }
  .event-details { margin-top: var(--space-lg); text-align: left; }
  .event-tools { width: 100%; }
}