/* ============================================================================
   days-until — tool layer on top of ../base.css
   base.css supplies the reset, typography, header/footer, forms, buttons,
   chips, tables, panels and FAQ. Everything below is either the tool's accent
   or a component base.css does not have: the live countdown clock, the date
   difference result panel, and the counting-mode fieldset.
   ========================================================================= */

:root {
  --accent:     #fb7185;
  --accent-dim: rgba(251, 113, 133, 0.14);

  /* Tells the UA which way round we are, so the native date and time widgets —
     the picker glyph, the radio buttons, the time spinners and the dropdown
     calendar itself — are drawn dark instead of light-on-dark. */
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --accent:     #be123c;
    --accent-dim: rgba(190, 18, 60, 0.10);
    color-scheme: light;
  }
}

/* ------------------------------------------------------------- controls -- */

/* align-items:end keeps the inputs on one line when a label wraps to two */
.field-row { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; }
.field-row .field { flex: 1 1 12rem; min-width: 0; }

/* -------------------------------------------------- date format control -- */
/* One shared control above both calculators: the numeric order (day/month/
   year first) that every date field on the page reads and displays with.
   Defaults to what Intl detects from the visitor's browser; overriding it
   here is the escape hatch for when detection guesses wrong. */

.format-bar { margin: 0 0 1.5rem; }
.format-bar-row { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem 1.25rem; }
.format-bar-field { flex: 0 0 auto; min-width: 12rem; max-width: 16rem; }
.format-bar-row .note {
  flex: 1 1 16rem;
  margin: 0;
  padding-left: 0.85rem;
  align-self: center;
}

.hint { color: var(--text-faint); font-weight: 400; }

/* dates and times are data: show them as such. The picker glyph follows the
   declared color-scheme above, so it needs no inversion — only toning down to
   sit with the hairlines rather than shouting over them. */
input[type="date"], input[type="time"], .date-text {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}
::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }

/* ---------------------------------------------------- typed date field --- */
/* A text input carries the typing. Beside it sits a same-size calendar icon
   with a *real, full-size* native <input type="date"> stacked directly on
   top of it at opacity:0 (the "transparent overlay" pattern) — never
   display:none, visibility:hidden or squashed to 1px. Those all make a
   control effectively unrendered, and mobile Safari in particular refuses
   to present a picker for an element in that state, which is why the old
   visually-hidden + showPicker()-only approach did nothing on a phone: the
   tap never reached a real, hit-testable control.

   Here the tap (or click) lands on the actual native date input, so every
   browser opens its own picker natively, with no JavaScript required. The
   icon button underneath is now purely decorative (aria-hidden, unfocusable)
   — the native input carries the accessible name and is the only tab stop.
   app.js still opportunistically calls showPicker() on it as a belt-and-
   braces enhancement, but nothing depends on that call succeeding. */

.date-group { display: flex; gap: 0.4rem; align-items: stretch; }
.date-group .date-text { flex: 1 1 auto; min-width: 0; }

/* Sized to a ~44px CSS-pixel touch target (2.75rem = 44px at the default
   16px root) rather than the old 2.5rem/40px, per WCAG 2.5.5/2.5.8. Because
   .date-group uses align-items:stretch, the sibling text input is stretched
   to match this height too, so both controls in the row share one touch-
   friendly height. */
.date-pick-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 2.75rem;
  min-height: 2.75rem;
  display: flex;
}

.date-pick-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  background: var(--bg-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}
.date-pick-btn svg { width: 1.15rem; height: 1.15rem; }

/* The real, tappable control. Full size, exactly covering the icon button
   beneath it, invisible but present — so a tap anywhere on the icon's
   footprint hits genuine input[type=date] hit-testing rather than a JS
   proxy. (0,1,1) here beats base.css's own `input[type="date"] { width:
   100% }` (0,1,1) by source order within this stylesheet being irrelevant —
   the extra class below settles it outright at (0,2,1).) */
.date-pick-wrap input[type="date"].date-pick-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
/* Windows/Android Chrome and Firefox paint their own picker-indicator glyph
   inside the box; with the whole control transparent that glyph would be
   invisible too but still occupy hit-testing space identically to the box,
   so there is nothing further to hide here. */

/* Keyboard users: the native input is the only focusable element in this
   pair (the icon button is aria-hidden + tabindex="-1" and purely visual),
   so give it the same focus ring the rest of the page uses rather than
   none at all. It stays transparent — revealing the cramped native widget
   inside a 44px square would be unreadable — the ring plus the icon
   button's own hover-style treatment is the visible feedback instead. */
.date-pick-wrap input[type="date"].date-pick-native:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.date-pick-wrap:focus-within .date-pick-btn,
.date-pick-wrap:hover .date-pick-btn {
  color: var(--text);
  border-color: var(--text-faint);
  background: var(--surface-2);
}

.date-status {
  margin: 0.4rem 0 0;
  min-height: 1.2em;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-dim);
}
.date-status.is-err { color: var(--err); font-weight: 600; }

input.date-text[aria-invalid="true"] {
  border-color: var(--err);
}
input.date-text[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px var(--err-bg);
}

/* include / exclude the end date — a .panel-sunk fieldset */
.mode { margin: 1.35rem 0 1.15rem; padding-top: 0.5rem; }
.mode legend { padding: 0 0.4rem; }

.opt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  padding: 0.45rem 0;
}
.opt + .opt { border-top: 1px solid var(--line); }
.opt input[type="radio"] {
  width: 1rem; height: 1rem; margin: 0.4rem 0 0;
  accent-color: var(--accent);
}
.opt label { cursor: pointer; }
.opt .k {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}
.opt .d {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.err {
  margin: 0.6rem 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--err);
}
.err:empty { display: none; }

/* ------------------------------------------------- the countdown clock --- */
/* The signature readout: sunk cells separated by hairlines, tabular figures so
   the ticking second can never nudge the layout, and numerals large enough to
   be the loudest thing on the page.

   Two by two below 46rem, four across above it. Four cells on a phone leaves
   each one about 100px wide, which clips a day count of 1,000 or more once the
   thousands separator appears; halving the count doubles the room and lets the
   numerals grow rather than shrink on the smallest screens. */

.clock {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.clock[hidden] { display: none; }

.clock .u {
  background: var(--bg-sunk);
  text-align: center;
  padding: clamp(0.9rem, 3.2vw, 1.5rem) 0.25rem clamp(0.6rem, 2vw, 0.95rem);
}

.clock .n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: clamp(2.25rem, 10.5vw, 3.5rem);
  font-weight: 620;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--accent);
}

.clock .l {
  margin-top: 0.65rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
}

@media (min-width: 46rem) {
  .clock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 5.6vw keeps six glyphs ("12,582") inside a quarter-width cell at every
     width from 46rem up to the 68rem container cap. */
  .clock .n { font-size: clamp(1.75rem, 5.6vw, 4rem); }
}

.countdown-sub { font-size: 0.9375rem; color: var(--text-dim); }
.target-date { font-family: var(--mono); font-weight: 600; color: var(--text); }

/* state line above the clock: "it is here today" / "this date has passed" */
.banner {
  display: block;
  margin: 0 0 1rem;
  padding: 0.65rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.banner[hidden] { display: none; }
.banner.today {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--accent);
}

/* ------------------------------------------------ date difference result -- */

.result { margin-top: 1.25rem; }   /* a .panel-sunk; base.css supplies the box */
.result:empty { display: none; }

.big {
  margin: 0 0 0.1em;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.1rem);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--accent);
  overflow-wrap: anywhere;
}

.big-sub { font-size: 0.9375rem; color: var(--text-dim); }
.big-sub em { color: var(--text-faint); }

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}
.compare .c {
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.compare .c.on { border-color: var(--accent); background: var(--accent-dim); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}
.stats .stat {
  padding: 0.6rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* shared label / value pair used by both grids */
.compare .c .k, .stats .k {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.compare .c .v, .stats .v {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-weight: 600;
}
.compare .c .v { font-size: 1.25rem; margin-top: 0.1rem; }
.compare .c.on .v { color: var(--accent); }
/* --text-faint on the accent-dim wash is 4.41:1 in the light theme, under the
   4.5:1 small-text bar. The selected card steps its label up one level. */
.compare .c.on .k { color: var(--text-dim); }
.stats .v { font-size: 1rem; margin-top: 0.1rem; }

.compare .c .n { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--text-dim); }
.compare .c.on .n { color: var(--text); }

/* ---------------------------------------------------------------- prose -- */

.tool-title { margin-top: 0; font-size: 1.25rem; }
.tool-sub { margin-bottom: 1.25rem; font-size: 0.9375rem; color: var(--text-dim); }

.chips { list-style: none; padding: 0; margin: 1.1rem 0 0; }

.example {
  margin: 1.35rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.example h3 { margin-top: 0; font-size: 1rem; }
.example p:last-child { margin-bottom: 0; }
.example .out {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-weight: 600;
  color: var(--accent);
}

details .body p:first-child { margin-top: 0; }
details .body p:last-child { margin-bottom: 0; }

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