/* The date page's own drawings: the date fields, the counted/elapsed comparison, the weekday split,
   the midpoint timeline and the seven weekday bars.

   Everything else — the navy hero, the stat tiles, the FAQ accordion, the accent blocks — comes from
   styles.css and results.css. Scoped to .datediff-page, the body class this page opts into.

   The class names are this page's own. The shared sheets already own generic words (.row,
   .field.check, .formula, .stats), so anything specific to this page is named for the page and
   checked against them in the tests. */

/* ---------------------------------------------------------------- The form */

.datediff-page .date-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}
.datediff-page .date-row input[type="date"] {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  font-size: 1rem;
}
.datediff-page .date-row .btn-secondary { margin: 0; white-space: nowrap; }

.datediff-page .lens {
  background: var(--accent);
  border-radius: 12px;
  padding: 14px;
  margin: 16px 0;
}
.datediff-page .lens .dd-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
}
.datediff-page .lens .dd-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--highlight);
}
.datediff-page .lens .hint { margin: 8px 0 0; }

.datediff-page .presets {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 10px 14px 12px;
  margin: 0 0 16px;
  min-width: 0;
}
.datediff-page .presets legend {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0 6px;
}
.datediff-page .preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.datediff-page .preset-row .chip { min-height: 36px; }
.datediff-page .presets .hint { margin: 8px 0 0; }

/* ---------------------------------------------------------------- The results */

.datediff-page .results-empty { font-size: 0.9rem; line-height: 1.55; color: var(--muted); margin: 0 0 12px; }
.datediff-page .dd-block { margin-top: 8px; }
.datediff-page .dd-stats { gap: 10px; margin: 18px 0 0; }
.datediff-page .dd-stats .stat { min-width: 0; }
.datediff-page .dd-stats .value { font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; }
.datediff-page .dd-stats .hint { font-size: 0.72rem; line-height: 1.4; margin: 4px 0 0; }

/* The hero's meaning line sits right under the card, quiet but readable. */
.datediff-page .calc-meaning { margin: 12px 0 0; }

/* ------------------------------------------------ Weekdays against weekends */

.datediff-page .split {
  display: flex;
  height: 22px;
  border-radius: 11px;
  overflow: hidden;
  background: var(--border);
  margin-top: 4px;
}
.datediff-page .split-part { display: block; height: 100%; transition: width 220ms ease; }
.datediff-page .split-part.is-weekday { background: var(--primary); }
.datediff-page .split-part.is-weekend {
  /* A stripe as well as a colour, so the two parts are distinguishable without colour. */
  background-color: var(--highlight);
  background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.16) 0 4px, transparent 4px 8px);
}
.datediff-page .split-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 10px 0 0;
}
.datediff-page .split-legend span { display: inline-flex; align-items: center; gap: 7px; }
.datediff-page .split-legend b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.datediff-page .split-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.datediff-page .key-weekday { background: var(--primary); }
.datediff-page .key-weekend {
  background-color: var(--highlight);
  background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.16) 0 3px, transparent 3px 6px);
}

/* ------------------------------------------------ The timeline */

.datediff-page .timeline { margin: 6px 0 0; }
.datediff-page .tl-ends {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.datediff-page .tl-ends span:last-child { text-align: right; }
.datediff-page .tl-track {
  position: relative;
  height: 54px;
  margin: 0 2px;
}
.datediff-page .tl-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
}
.datediff-page .tl-point {
  position: absolute;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--card);
}
.datediff-page .tl-point.is-start { left: -4px; }
.datediff-page .tl-point.is-end { right: -4px; }
/* One day, one point: a full-width line between two ends would draw a gap that is not there. */
.datediff-page .tl-track.is-same-day .tl-line,
.datediff-page .tl-track.is-same-day .tl-point { display: none; }
.datediff-page .tl-marker.is-single { left: 0; transform: none; }
.datediff-page .tl-marker {
  position: absolute;
  top: 7px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
}
.datediff-page .tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--highlight);
  border: 2px solid var(--card);
}
.datediff-page .tl-label {
  font-size: 0.68rem;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.datediff-page .tl-marker.is-single .tl-label { color: var(--text); font-weight: 600; }
.datediff-page .tl-caption { font-size: 0.85rem; line-height: 1.55; color: var(--muted); margin: 4px 0 0; }

/* ------------------------------------------------ The seven weekday bars */

.datediff-page .week-bars {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}
.datediff-page .week-bar {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
}
.datediff-page .week-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.datediff-page .week-stalk {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 84px;
  border-radius: 6px;
  background: var(--accent);
  overflow: hidden;
}
.datediff-page .week-fill {
  display: block;
  width: 100%;
  background: var(--primary);
  border-radius: 6px 6px 0 0;
  transition: height 220ms ease;
}
.datediff-page .week-fill.is-weekend {
  background-color: var(--highlight);
  background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.16) 0 3px, transparent 3px 6px);
}
.datediff-page .week-name {
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ------------------------------------------------ Elapsed against inclusive */

.datediff-page .compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.datediff-page .compare-card {
  font: inherit;
  text-align: left;
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  min-width: 0;
}
.datediff-page .compare-card:hover { border-color: var(--primary); }
.datediff-page .compare-card:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 3px;
}
.datediff-page .compare-card.is-on {
  border-color: var(--primary);
  border-inline-start-width: 4px;
  background: var(--accent);
}
.datediff-page .compare-card.is-on .compare-label::after {
  content: " ✓";
  color: var(--primary);
  font-weight: 700;
}
.datediff-page .compare-label { font-size: 0.76rem; font-weight: 600; color: var(--muted); }
.datediff-page .compare-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.datediff-page .compare-mode { font-size: 0.68rem; color: var(--muted); }

/* ------------------------------------------------ The prose sections */

.datediff-page .fact-list { display: grid; gap: 12px; }
.datediff-page .fact { background: var(--accent); border-radius: 12px; padding: 14px 16px; }
.datediff-page .fact h3 { font-size: 0.95rem; margin: 0 0 6px; }
.datediff-page .fact p { font-size: 0.88rem; line-height: 1.6; margin: 0; }
.datediff-page .how-list { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 0.9rem; line-height: 1.6; }
.datediff-page .how-list li { margin-bottom: 0; }
.datediff-page .formula-wrap { display: grid; gap: 8px; margin: 12px 0; }
/* The shared .formula scrolls sideways; these are long enough that half would be off a phone. */
.datediff-page .formula {
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------ Narrow screens */

@media (max-width: 600px) {
  .datediff-page .date-row { grid-template-columns: minmax(0, 1fr); }
  /* One tile per row, because "2 years, 2 months, 30 days" needs the width more than the pair does. */
  .datediff-page .dd-stats { grid-template-columns: minmax(0, 1fr); }
  .datediff-page .tl-label { font-size: 0.62rem; }
  .datediff-page .week-bars { gap: 5px; }
  .datediff-page .week-stalk { height: 68px; }
  .datediff-page .week-name { font-size: 0.6rem; }
}

@media (max-width: 420px) {
  .datediff-page .compare { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .datediff-page .split-part,
  .datediff-page .week-fill { transition: none; }
}