/* The answer-first gate (PR1), shared by the two page.js tools (/ and
   /business-days/): their mode buttons wrap to two full-width rows unless
   constrained to sit side by side. A page.css rather than a dates.css rule
   because several other routes have almost no payload headroom left (see
   the PR body's accounting), and only these two routes use .dc-modes. */
@media (max-width: 560px) {
  .dc-modes { flex-wrap: nowrap; gap: .3rem; margin-bottom: .3rem; }
  .dc-modes .btn { flex: 1 1 0; font-size: .76rem; padding: .4rem .25rem; text-align: center; min-height: var(--tap); line-height: 1.15; }
  main.wrap { padding-top: .25rem; }
  .eyebrow, h1 { margin-bottom: .1rem; }
  .tool-panel { padding: .5rem; margin-bottom: .35rem; }
  .controls { margin: .15rem 0; gap: .2rem .45rem; }
  .dc-answer { padding: .25rem .45rem .22rem; margin-top: .6rem; }
  .dc-answer .dc-big { font-size: clamp(1.2rem, 6.2vw, 1.55rem); }
  .dc-answer .dc-sub { font-size: .73rem; margin-top: .15rem; }
}

/* PR2: the home index (one line per tool, replacing the card grid) and the
   Today strip. Only / uses these two classes; kept here (home+business-days'
   shared file) rather than dates.css, which several other routes have very
   little payload headroom left in. */
.today-strip { font-family: var(--mono); font-size: .76rem; color: var(--ink-soft); margin: 0 0 .5rem; }
@media (max-width: 560px) { .today-strip { margin-bottom: .1rem; font-size: .72rem; } }
.tool-index { list-style: none; padding: 0; margin: .5rem 0 1.5rem; max-width: 46rem; }
.tool-index li { padding: .55rem 0; border-top: 1px solid var(--line); }
.tool-index li:first-child { border-top: none; }
.tool-index a { font-weight: 700; color: var(--ink); text-decoration: none; }
.tool-index a:hover { color: var(--fail); }
.tool-index span { color: var(--ink-soft); font-size: .92rem; }