/*
 * Brookside Communications — shared product layer
 * Quiet Apple-inspired surfaces, with Brookside coral and deep teal as anchors.
 */
:root {
  --bs-ink: #17383b;
  --bs-ink-soft: #31575a;
  --bs-muted: #687f80;
  --bs-paper: #f4f6f2;
  --bs-surface: #fbfcf9;
  --bs-surface-2: #e9f0eb;
  --bs-line: #d5e0d9;
  --bs-teal: #087f83;
  --bs-teal-dark: #075e63;
  --bs-coral: #db674f;
  --bs-coral-soft: #f8e4dd;
  --bs-danger: #ad443c;
  --bs-shadow-sm: 0 1px 2px rgba(23,56,59,.05), 0 5px 16px rgba(23,56,59,.04);
  --bs-shadow-md: 0 12px 30px rgba(23,56,59,.10);
  --bs-radius: 14px;
  --bs-radius-sm: 9px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bs-ink: #e5f0eb; --bs-ink-soft: #c3d5d0; --bs-muted: #9cb5af;
    --bs-paper: #122426; --bs-surface: #193033; --bs-surface-2: #203c3e;
    --bs-line: #385458; --bs-teal: #5bc1bd; --bs-teal-dark: #8ed4cc;
    --bs-coral: #f1846c; --bs-coral-soft: #4e2f2b; --bs-danger: #ff9b8b;
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --bs-ink: #e5f0eb; --bs-ink-soft: #c3d5d0; --bs-muted: #9cb5af;
  --bs-paper: #122426; --bs-surface: #193033; --bs-surface-2: #203c3e;
  --bs-line: #385458; --bs-teal: #5bc1bd; --bs-teal-dark: #8ed4cc;
  --bs-coral: #f1846c; --bs-coral-soft: #4e2f2b; --bs-danger: #ff9b8b;
  color-scheme: dark;
}
html { background: var(--bs-paper); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  background: var(--bs-paper) !important;
  color: var(--bs-ink) !important;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at 8% -5%, rgba(219,103,79,.08), transparent 28rem),
              radial-gradient(circle at 95% 5%, rgba(8,127,131,.07), transparent 30rem);
}
button, input, select, textarea { font: inherit; }
a { color: var(--bs-teal); }
button, a, input, select, textarea { transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--bs-coral) 72%, transparent); outline-offset: 3px; }

/* Planner and request pages consume their original tokens through the shared
   adaptive palette, keeping every operational state intact in both schemes. */
.planner-shell, .request-page {
  --ink: var(--bs-ink);
  --muted: var(--bs-muted);
  --paper: var(--bs-paper);
  --cream: var(--bs-surface);
  --card: var(--bs-surface);
  --line: var(--bs-line);
  --teal: var(--bs-teal);
  --teal-2: var(--bs-teal-dark);
  --coral: var(--bs-coral);
}
.request-page .brand { color: var(--bs-ink); }
.request-page .brand small { color: var(--bs-muted); }
.request-page .request-card {
  background: color-mix(in srgb, var(--bs-surface) 94%, transparent);
  border: 1px solid var(--bs-line);
  box-shadow: var(--bs-shadow-md);
}
@media (prefers-color-scheme: dark) {
  .planner-shell .button.primary,
  .request-page .button.primary { color: #082f31; }
}

/* Legacy screens retain their hooks and forms, but share one coherent surface language. */
body:not(.planner-shell):not(.request-page) { padding: clamp(16px, 3vw, 40px) !important; }
body:not(.planner-shell):not(.request-page) .container {
  max-width: 1180px; margin-inline: auto;
}
body:not(.planner-shell):not(.request-page) .header {
  border-bottom: 1px solid var(--bs-line) !important;
  padding-bottom: 22px !important; margin-bottom: 30px !important;
}
body:not(.planner-shell):not(.request-page) .header h1 {
  color: var(--bs-ink) !important; font-size: clamp(1.65rem, 2.8vw, 2.35rem) !important;
  letter-spacing: -.04em;
}
body:not(.planner-shell):not(.request-page) .nav-links { flex-wrap: wrap; gap: 8px !important; }
body:not(.planner-shell):not(.request-page) .admin-section,
body:not(.planner-shell):not(.request-page) .definitions-section,
body:not(.planner-shell):not(.request-page) .detail-card,
body:not(.planner-shell):not(.request-page) .reference-section,
body:not(.planner-shell):not(.request-page) .edit-section,
body:not(.planner-shell):not(.request-page) .login-container,
body:not(.planner-shell):not(.request-page) .form-container,
body:not(.planner-shell):not(.request-page) .results-container,
body:not(.planner-shell):not(.request-page) .container > .container {
  background: color-mix(in srgb, var(--bs-surface) 92%, transparent) !important;
  border: 1px solid var(--bs-line) !important; border-radius: var(--bs-radius) !important;
  box-shadow: var(--bs-shadow-sm) !important;
}
body:not(.planner-shell):not(.request-page) .admin-section,
body:not(.planner-shell):not(.request-page) .definitions-section,
body:not(.planner-shell):not(.request-page) .detail-card,
body:not(.planner-shell):not(.request-page) .reference-section,
body:not(.planner-shell):not(.request-page) .edit-section { padding: clamp(20px, 3vw, 32px) !important; }
body:not(.planner-shell):not(.request-page) h1,
body:not(.planner-shell):not(.request-page) h2,
body:not(.planner-shell):not(.request-page) h3,
body:not(.planner-shell):not(.request-page) .section-title { color: var(--bs-ink) !important; letter-spacing: -.035em; }
body:not(.planner-shell):not(.request-page) .section-title { border-bottom-color: var(--bs-line) !important; }
body:not(.planner-shell):not(.request-page) .btn,
body:not(.planner-shell):not(.request-page) .back-btn,
body:not(.planner-shell):not(.request-page) .submit-btn {
  min-height: 44px; border-radius: 999px !important; border: 1px solid var(--bs-line) !important;
  background: var(--bs-surface-2) !important; color: var(--bs-ink) !important; padding: 10px 17px !important;
}
body:not(.planner-shell):not(.request-page) .btn-primary,
body:not(.planner-shell):not(.request-page) .btn-success,
body:not(.planner-shell):not(.request-page) .submit-btn {
  background: var(--bs-teal) !important; border-color: var(--bs-teal) !important; color: #fff !important;
}
body:not(.planner-shell):not(.request-page) .btn-danger { background: var(--bs-coral-soft) !important; color: var(--bs-danger) !important; }
body:not(.planner-shell):not(.request-page) .btn:hover { transform: translateY(-1px); box-shadow: var(--bs-shadow-sm); }
body:not(.planner-shell):not(.request-page) input,
body:not(.planner-shell):not(.request-page) textarea,
body:not(.planner-shell):not(.request-page) select {
  min-height: 44px; border: 1px solid var(--bs-line) !important; border-radius: var(--bs-radius-sm) !important;
  background: var(--bs-paper) !important; color: var(--bs-ink) !important;
}
body:not(.planner-shell):not(.request-page) input:focus,
body:not(.planner-shell):not(.request-page) textarea:focus,
body:not(.planner-shell):not(.request-page) select:focus {
  border-color: var(--bs-teal) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-teal) 16%, transparent) !important;
}
body:not(.planner-shell):not(.request-page) .data-table,
body:not(.planner-shell):not(.request-page) .users-table { border: 1px solid var(--bs-line); border-radius: var(--bs-radius-sm); }
body:not(.planner-shell):not(.request-page) .data-table th,
body:not(.planner-shell):not(.request-page) .users-table th { background: var(--bs-surface-2) !important; color: var(--bs-ink) !important; }
body:not(.planner-shell):not(.request-page) .data-table td,
body:not(.planner-shell):not(.request-page) .users-table td { background: transparent !important; color: var(--bs-ink-soft) !important; border-color: var(--bs-line) !important; }

/* Calculator stays graphically intact, with a calmer frame and more legible controls. */
body:has(#volumeSpectrum) { padding: clamp(12px, 3vw, 34px) !important; }
body:has(#volumeSpectrum) .form-container,
body:has(#volumeSpectrum) .results-container { padding: clamp(20px, 4vw, 42px) !important; }
body:has(#volumeSpectrum) .form-control { min-height: 48px; border-radius: var(--bs-radius-sm); }
body:has(#volumeSpectrum) .btn, body:has(#volumeSpectrum) .copy-btn,
body:has(#volumeSpectrum) .print-btn, body:has(#volumeSpectrum) .download-ics-btn {
  min-height: 44px; border-radius: 999px; background: var(--bs-surface-2); color: var(--bs-ink);
}
body:has(#volumeSpectrum) .download-ics-btn { background: var(--bs-teal); }

@media (max-width: 720px) {
  body:not(.planner-shell):not(.request-page) .header { align-items: stretch; }
  body:not(.planner-shell):not(.request-page) .nav-links { justify-content: flex-start; }
  body:not(.planner-shell):not(.request-page) .data-table,
  body:not(.planner-shell):not(.request-page) .users-table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}