/* Driveonomics shared stylesheet — Nov 9, 2026.
   Linked from every page. The nav toggle + sticky-total bar live here.
   Phones (max-width 900px): nav collapses behind a Menu button.
   Desktop (min-width 901px): the first six nav links show in one tidy row;
   the rest live behind the same Menu button. Colors use each page's own
   variables with literal fallbacks, so the sheet works on every page. */

/* --- Nav toggle: visually-hidden checkbox + Menu button. --- */
.nav-toggle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav-toggle-btn { display: none; }

/* --- Sticky calculator total bar: hidden on desktop, shown on phones. --- */
.sticky-total { display: none; }

@media (min-width: 901px) {
  /* Desktop nav: brand + first six links + Menu button in one tidy row.
     Links 7+ stay reachable behind the same Menu toggle (no links deleted).
     The first six links are identical on every page of the site. */
  .nav-toggle-btn { display: inline-block; padding: 8px 12px; border: 1px solid var(--line, #d7ddd7); border-radius: 8px; background: var(--accent-soft, #d7eee8); color: var(--ink, #17211d); font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
  nav.site-nav a:nth-of-type(n+7) { display: none; }
  .nav-toggle:checked ~ a:nth-of-type(n+7) { display: inline-block; }
  .nav-toggle:focus-visible + .nav-toggle-btn { outline: 3px solid var(--focus, #ffb44a); outline-offset: 2px; }
}

@media (max-width: 900px) {
  /* Nav: brand + Menu button on one row; links hidden until the toggle opens. */
  nav.site-nav { width: 100%; }
  .nav-toggle-btn { display: inline-block; margin-left: auto; padding: 8px 12px; border: 1px solid var(--line, #d7ddd7); border-radius: 8px; background: var(--accent-soft, #d7eee8); color: var(--ink, #17211d); font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
  nav.site-nav a { display: none; }
  .nav-toggle:checked ~ a { display: block; width: 100%; }
  .nav-toggle:focus-visible + .nav-toggle-btn { outline: 3px solid var(--focus, #ffb44a); outline-offset: 2px; }

  /* Sticky total: pinned to the top of the viewport while editing. */
  .sticky-total { display: block; position: sticky; top: 8px; z-index: 40; background: var(--surface, #ffffff); border: 1px solid var(--line, #d7ddd7); border-radius: 14px; box-shadow: 0 10px 28px rgba(22, 36, 30, .14); padding: 10px 16px 12px; margin: 0 0 14px; }
  .sticky-total .sticky-label { display: block; font-size: .72rem; font-weight: 700; color: var(--muted, #5e6b65); }
  .sticky-total .sticky-value { display: block; font-family: "DM Mono", monospace; font-size: 1.7rem; line-height: 1.1; letter-spacing: -.05em; color: var(--accent-strong, #056252); font-variant-numeric: tabular-nums; }
  .sticky-total .sticky-value[data-verdict="good"] { color: var(--verdict-good, #0a6e4c); }
  .sticky-total .sticky-value[data-verdict="warn"] { color: var(--verdict-warn, #9a550a); }
  .sticky-total .sticky-value[data-verdict="bad"] { color: var(--verdict-bad, #c0433c); }
  .sticky-total .sticky-sub { display: block; font-size: .8rem; color: var(--muted, #5e6b65); margin-top: 2px; }
  .sticky-total .sticky-sub strong { color: var(--ink, #17211d); }
}

/* Maintenance-first blocks: per-service price and factory schedule tables. */
.maint-table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: .95rem; }
.maint-table th, .maint-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line, #d7ddd7); vertical-align: top; }
.maint-table th { font-weight: 700; }
.maint-table tr:last-child td { border-bottom: none; }
@media (max-width: 600px) {
  .maint-table { font-size: .88rem; }
  .maint-table th, .maint-table td { padding: 6px 8px; }
}