:root {
  --bg: #fbfaf7;
  --fg: #1a1a1a;
  --muted: #767370;
  --line: #e5e1da;
  --card: #fff;
  --pad: clamp(1rem, 4vw, 3rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161513; --fg: #ece9e4; --muted: #918d87;
    --line: #2e2c28; --card: #1e1c1a;
  }
}

/* Accent is per holiday. Each theme block sets a light and a dark value; the rules below
   pick whichever suits the viewer. Anything carrying data-holiday gets its own accent,
   which is why the home page cards can each be themed too. */
body { --accent-light: #b4531f; --accent-dark: #e08b4f; --accent: var(--accent-light); }
[data-holiday] { --accent: var(--accent-light); }
@media (prefers-color-scheme: dark) {
  body { --accent: var(--accent-dark); }
  [data-holiday] { --accent: var(--accent-dark); }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100dvh;          /* dvh, not vh -- vh lies under mobile browser chrome */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--accent); }

/* ---- top nav ---- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;      /* the sentence sits top-right */
  padding: .6rem var(--pad);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 6px 16px -12px rgba(0,0,0,.35);
  flex: none;
}

/* "Is my birthday on [ Thanksgiving v ] ?" -- the picker is the object of the sentence.
   Deliberately NOT flex: flex aligns boxes, so the words would sit level with the middle of
   the pill's padded box instead of with the text inside it. Inline flow aligns baselines,
   which is what makes it read as one line of writing. */
.sentence { min-width: 0; }
.brand, .qmark {
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -0.015em;
  color: var(--fg);
  white-space: nowrap;
}
.brand { text-decoration: none; }
.brand:hover { color: var(--accent); }

/* A disclosure panel rather than a row of pills: the holiday list is past the point where
   a single line can hold it, and it is only going to get longer. */
.menu { position: relative; display: inline-block; }
/* inline-block so it sits on the sentence's baseline; same size and weight as the words
   either side, because it is part of the sentence rather than a control beside one. */
.menu summary {
  display: inline-block;
  padding: .2rem .7rem;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.menu summary::-webkit-details-marker { display: none; }
/* A glyph, not a CSS triangle -- it sits on the text baseline with no geometry to tune. */
.menu summary::after { content: "▾"; margin-left: .35rem; font-size: .8em; opacity: .65; }
.menu[open] summary { border-color: var(--accent); color: var(--accent); }
.menu[open] summary::after { content: "▴"; opacity: 1; }

.menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(2, minmax(10rem, 1fr));
  gap: .1rem;
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 34px -12px rgba(0,0,0,.4);
  max-height: 70vh;
  overflow-y: auto;
}
.menu a {
  display: block;
  padding: .45rem .6rem;
  border-radius: 7px;
  font-size: .88rem;
  text-decoration: none;
  color: var(--fg);
  white-space: nowrap;
}
.menu a:hover { background: var(--bg); color: var(--accent); }
.menu [aria-current="page"] { color: var(--accent); font-weight: 700; }

@media (max-width: 34rem) {
  .menu ul { grid-template-columns: 1fr; right: calc(var(--pad) * -1 + .5rem); min-width: 13rem; }
}
/* Must come after .menu summary above -- same specificity, so source order decides. */
@media (max-width: 26rem) {
  .brand, .qmark, .menu summary { font-size: .86rem; }
  .menu summary { padding: .25rem .55rem; }
}

/* ---- layout: fill the viewport, centre the content ---- */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 4vh, 3rem) var(--pad);
}

/* ---- hero ---- */
.hero { text-align: center; }
.hero h1 {
  font-size: clamp(1.9rem, 6.5vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.tagline {
  max-width: 40rem;
  margin: 1rem auto 0;
  color: var(--muted);
}

/* ---- form ---- */
form { margin: 2rem 0 0; }
.field-label { display: block; font-size: .9rem; color: var(--muted); margin-bottom: .45rem; }
.field-label em { font-style: normal; opacity: .7; }
.controls { display: flex; gap: .5rem; }
.selects { display: flex; gap: .5rem; flex: 1 1 auto; min-width: 0; }
select {
  flex: 1 1 0;
  min-width: 0;
  padding: .65rem .7rem;
  font: inherit;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.selects select:first-child { flex: 1.6 1 0; }   /* month names are longer */
button {
  flex: none;
  padding: .65rem 1.3rem;
  font: inherit;
  font-weight: 600;
  color: var(--bg);
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
button:hover { opacity: .9; }
select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 30rem) {
  .controls { flex-wrap: wrap; }
  .selects { flex: 1 1 100%; }
  button { width: 100%; }
}

/* ---- answered state: title steps back so the answer owns the screen ---- */
body.answered .hero h1 { font-size: clamp(1.15rem, 3vw, 1.5rem); color: var(--muted); font-weight: 600; }
body.answered .tagline { display: none; }
body.answered form { margin-top: 1rem; }
body.answered .field-label { display: none; }

/* ---- results ---- */
#result { margin-top: 1.75rem; }
.verdict {
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: center;
}
.next { margin: .35rem 0 0; text-align: center; color: var(--muted); }
.next strong { color: var(--fg); }

.years {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
  gap: .4rem;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}
.years li {
  padding: .4rem .25rem;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 7px;
  line-height: 1.25;
}
.years b { display: block; font-variant-numeric: tabular-nums; font-size: .95rem; }
.years span { font-size: .75rem; color: var(--muted); }
.years .past { opacity: .4; }
.years .soonest { border-color: var(--accent); }

.group-label {
  margin: 1.1rem 0 .4rem;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.group-label + .years { margin-top: 0; }

.pattern { margin: 1.25rem 0 0; font-size: .95rem; }
details { margin-top: .6rem; font-size: .9rem; color: var(--muted); }
summary { cursor: pointer; color: var(--accent); }
details p { margin: .5rem 0 0; }
.fine { font-size: .9rem; color: var(--muted); margin: 1rem 0 0; }
.miss { text-align: center; max-width: 34rem; margin: .75rem auto 0; }

/* ---- home: holiday picker grid ---- */
.holidays {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .6rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}
.holidays a {
  display: block;
  height: 100%;
  padding: .9rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  color: var(--fg);
}
.holidays a:hover { border-color: var(--accent); }
.holidays small { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); }

/* ---- per-holiday themes ---- */
[data-holiday="thanksgiving"]           { --accent-light: #b4531f; --accent-dark: #e08b4f; }
[data-holiday="black-friday"]           { --accent-light: #4f4f57; --accent-dark: #b9b9c4; }
[data-holiday="easter"]                 { --accent-light: #7b5ea7; --accent-dark: #c3abe9; }
[data-holiday="good-friday"]            { --accent-light: #5f5566; --accent-dark: #b0a4bb; }
[data-holiday="mothers-day"]            { --accent-light: #c0507e; --accent-dark: #f2a2c1; }
[data-holiday="fathers-day"]            { --accent-light: #2f6f8a; --accent-dark: #7fc6e2; }
[data-holiday="memorial-day"]           { --accent-light: #8c3a3a; --accent-dark: #e59595; }
[data-holiday="labor-day"]              { --accent-light: #2f7a5e; --accent-dark: #74c9a4; }
[data-holiday="mlk-day"]                { --accent-light: #4a4f9e; --accent-dark: #9ca2ea; }
[data-holiday="presidents-day"]         { --accent-light: #1f3a63; --accent-dark: #85aede; }
[data-holiday="indigenous-peoples-day"] { --accent-light: #8a6d1f; --accent-dark: #dcbc63; }
[data-holiday="election-day"]           { --accent-light: #4a5a6b; --accent-dark: #a8bccd; }
[data-holiday="spring-forward"]         { --accent-light: #a07a1f; --accent-dark: #e6c46b; }
[data-holiday="fall-back"]              { --accent-light: #6b4a7a; --accent-dark: #c19ad6; }
[data-holiday="friday-the-13th"]        { --accent-light: #a01f2e; --accent-dark: #f28a97; }
[data-holiday="weekend"]                { --accent-light: #4a8a2f; --accent-dark: #a3d97a; }

/* Chips can carry two lines (weekday + age on the weekend page), and need a little more
   room when they do. */
.years span { display: block; }
[data-holiday="weekend"] .years { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }