/* ============================================================
   base.css — shared structural styles for the suite
   ------------------------------------------------------------
   Linked AFTER tokens.css and BEFORE each page's inline <style>.
   Contains ONLY rules that are identical (or semantically harmless
   supersets) across every page that uses them:
     · box-sizing reset
     · link defaults, placeholder inheritance
     · skip-link (a11y)
     · back-link, legend/dot, toggle-switch/slider (theme control)
     · .btn-danger, .invalid input
   Page-specific layout, buttons, tables and charts stay inline.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

a { color: var(--blue); text-decoration: none; }
img, svg { display: block; }

::placeholder { font-family: inherit; }

/* ---- Skip link (accessibility) ---- */
.skip-link {
  position: absolute; top: -100%; left: 0;
  background: var(--blue); color: #fff;
  padding: 0.6rem 1.2rem; z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none; font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ---- Back link (header) ---- */
.back-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  color: var(--muted); transition: color .15s, background .15s;
  flex-shrink: 0;
}
.back-link:hover { color: var(--text); background: var(--bg); }
.back-link svg { width: 20px; height: 20px; }

/* ---- Legend dots ---- */
.legend { font-size: 0.75rem; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.calc { background: var(--blue); }

/* ---- Toggle switch (dark-mode control) ---- */
.toggle-switch {
  position: relative; display: inline-flex; align-items: center; cursor: pointer;
  font-size: 0.8rem; font-weight: 500; color: var(--muted); gap: 0.4rem;
  min-height: 44px; user-select: none;
}
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.slider {
  width: 44px; height: 24px; background: #cbd5e1; border-radius: 24px;
  position: relative; flex-shrink: 0;
}
.slider::after {
  content: ''; position: absolute; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; top: 3px; left: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .slider { transition: background .25s; }
  .slider::after { transition: transform .25s; }
}
input:checked + .slider { background: var(--blue); }
input:checked + .slider::after { transform: translateX(20px); }

/* ---- Danger button ---- */
.btn-danger { background: #DC2626; color: #fff; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3); }
.btn-danger:hover { background: #B91C1C; box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4); transform: translateY(-1px); }
.btn-danger:active { transform: translateY(0) scale(0.98); }

/* ---- Invalid input (out-of-range feedback) ---- */
.input-group input.invalid,
table.data input.invalid,
input.invalid { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18); }

/* ---- Hide number-input spinner arrows (all pages) ---- */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }