:root {
  color-scheme: light;
  --bg: #f4f6f5;
  --panel: #ffffff;
  --ink: #1c2b28;
  --muted: #5c6b68;
  --border: #dfe6e3;
  --brand: #1e6b52;
  --brand-dark: #154f3d;
  --brand-tint: #eaf3ef;
  --brand-text: #154f3d;
  --accent: #d97b29;
  --danger: #b4413a;
  --danger-bg: #fbe9e7;
  --danger-border: #f0c4bf;
  --success-bg: #e7f5ee;
  --success-border: #b9e0cd;
  --warn-bg: #f2e6d9;
  --warn-text: #8a5a1e;
  --warn-border: #e0c19a;
  --input-bg: #ffffff;
  --code-bg: rgba(0,0,0,0.06);
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Follows the OS/browser setting by default. Guarded by :not([data-theme="light"])
   so an explicit "Light" choice (see assets/js/theme.js) can still win even when
   the system itself is set to dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #131e1a;
    --panel: #1b2925;
    --ink: #e8efec;
    --muted: #94a7a1;
    --border: #2c3e38;
    --brand: #4dc094;
    --brand-dark: #1b4536;
    --brand-tint: #1e332b;
    --brand-text: #7fddb2;
    --accent: #e2984f;
    --danger: #e58077;
    --danger-bg: #3a2320;
    --danger-border: #5c342f;
    --success-bg: #17322a;
    --success-border: #2b5445;
    --warn-bg: #3a2f1e;
    --warn-text: #e0b579;
    --warn-border: #5c4a2c;
    --input-bg: #20302a;
    --code-bg: rgba(255,255,255,0.08);
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
  }
}

/* Explicit "Dark" choice — same values as above, repeated so the toggle wins
   regardless of what the OS/browser is currently set to. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131e1a;
  --panel: #1b2925;
  --ink: #e8efec;
  --muted: #94a7a1;
  --border: #2c3e38;
  --brand: #4dc094;
  --brand-dark: #1b4536;
  --brand-tint: #1e332b;
  --brand-text: #7fddb2;
  --accent: #e2984f;
  --danger: #e58077;
  --danger-bg: #3a2320;
  --danger-border: #5c342f;
  --success-bg: #17322a;
  --success-border: #2b5445;
  --warn-bg: #3a2f1e;
  --warn-text: #e0b579;
  --warn-border: #5c4a2c;
  --input-bg: #20302a;
  --code-bg: rgba(255,255,255,0.08);
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin-top: 0; }

.topbar {
  background: var(--brand-dark);
  color: white;
}
.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.brand { color: white; font-weight: 700; font-size: 1.1rem; }
.main-nav { display: flex; gap: 1rem; flex-wrap: wrap; flex: 1; }
.main-nav a { color: #dfeee7; }
.main-nav a.active, .main-nav a:hover { color: white; text-decoration: underline; }
.nav-user { display: flex; align-items: center; gap: 0.75rem; color: #dfeee7; font-size: 0.9rem; }
.nav-user a { color: white; }

.mobile-nav-toggle { display: none; }

/* Theme toggle button — shared base, then two contexts: inside the dark
   topbar (inherits its light text color) or floating on its own for
   logged-out pages, which have no topbar to sit inside. */
.theme-toggle {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 8px;
  width: 2rem;
  height: 2rem;
  padding: 0;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.85;
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle-fixed {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 100;
  background: var(--panel);
  border-color: var(--border);
  box-shadow: var(--shadow);
  color: var(--ink);
  opacity: 1;
}

.page-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.card-list { display: grid; gap: 1rem; }
/* A .card used as a list item gets its spacing from the grid's own gap —
   without this, .card's own margin-bottom stacked ON TOP of the gap
   (grid gap doesn't collapse with margins the way block-flow does),
   roughly doubling the space between list items. */
.card-list > .card { margin-bottom: 0; }
/* Opt-in tighter variant for lists of many small, mostly-collapsed items
   (e.g. stations.php's station cards) where the default 1rem gap still
   reads as excessive. */
.card-list.card-list-tight { gap: 0.5rem; }
[data-station-card] { padding: 0.85rem 1.25rem; }

.highlight-box { background: var(--brand-tint); padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.9rem; }

.btn {
  display: inline-block;
  background: var(--brand);
  color: white;
  border: none;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn.secondary { background: transparent; color: var(--brand); border: 1px solid var(--brand); }
.btn.secondary:hover { background: var(--brand-tint); }
.btn.danger { background: var(--danger); }
.btn.full { width: 100%; }

form .field { margin-bottom: 1rem; }
label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.92rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=datetime-local], select, textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--input-bg);
  color: var(--ink);
}
textarea { min-height: 80px; }
.hint { color: var(--muted); font-size: 0.85rem; margin-top: 0.25rem; }

/* A .hint directly under a page header row (h1 + action buttons,
   flex-wrap:wrap). The negative top margin only tightens the gap
   correctly while that row stays on one line — once it wraps to two
   lines on a narrow screen, pulling the hint up by a fixed amount drags
   it into the wrapped buttons instead. See the mobile override below. */
.page-header-hint { margin-top: -0.5rem; margin-bottom: 1.25rem; }

.alert { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.95rem; }
.alert.error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.alert.success { background: var(--success-bg); color: var(--brand-text); border: 1px solid var(--success-border); }
.alert.warning { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); }
.alert code { background: var(--code-bg); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.9em; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.radio-group { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.radio-group label {
  display: flex; align-items: center; gap: 0.4rem; font-weight: 500;
  border: 1px solid var(--border); border-radius: 20px; padding: 0.4rem 0.9rem;
  cursor: pointer; background: var(--panel);
}
.radio-group input { width: auto; }
.freq-chip-active { border-color: var(--brand) !important; background: var(--brand-tint) !important; font-weight: 600; }

.rst-group { margin-bottom: 0.75rem; }
.rst-group:last-of-type { margin-bottom: 0; }
.rst-group-label { font-weight: 600; margin-bottom: 0.2rem; }
.rst-group-label .hint { font-weight: 400; display: block; margin-top: 0.1rem; }
.rst-chip-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.3rem 0; }
.rst-chip {
  min-width: 2.2rem; text-align: center; font-weight: 600;
  border: 1px solid var(--border); border-radius: 20px; padding: 0.3rem 0.6rem;
  cursor: pointer; background: var(--panel); color: inherit;
}
.rst-chip-active { border-color: var(--brand) !important; background: var(--brand-tint) !important; color: var(--brand-text); }
.rst-caption { min-height: 1.1em; margin-top: 0.15rem; }

.pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 20px; font-size: 0.8rem; background: var(--brand-tint); color: var(--brand-text); }
.pill.warn { background: var(--warn-bg); color: var(--warn-text); }
.pill.danger { background: var(--danger-bg); color: var(--danger); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
th { color: var(--muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; }

#map { width: 100%; height: 65vh; min-height: 400px; border-radius: var(--radius); border: 1px solid var(--border); }

#map-card { position: relative; }
#map-fullscreen-toggle {
  position: absolute; bottom: 2.75rem; right: 1.5rem; z-index: 500;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; font-size: 1.2rem; line-height: 1; color: inherit; padding: 0;
  box-shadow: var(--shadow);
}
#map-card.map-fullscreen {
  position: fixed; inset: 0; z-index: 9999; margin: 0; border-radius: 0;
}
#map-card.map-fullscreen #map { height: 100%; border-radius: 0; }

.autocomplete-wrap { position: relative; }
.autocomplete-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: var(--panel); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 8px 8px; max-height: 220px; overflow-y: auto;
  box-shadow: var(--shadow); display: none;
}
.autocomplete-results div { padding: 0.5rem 0.7rem; cursor: pointer; }
.autocomplete-results div:hover { background: var(--brand-tint); }

.site-footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 1.5rem 1rem; }

@media (max-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .topbar-inner { flex-direction: column; align-items: flex-start; }
  .main-nav {
    display: none; flex-direction: column; width: 100%;
    background: var(--brand-dark);
  }
  .main-nav.open { display: flex; }
  .mobile-nav-toggle {
    display: block; width: 100%; background: var(--brand-dark); color: white;
    border: none; padding: 0.6rem 1rem; font-size: 1rem; text-align: left;
  }

  /* The header row above .page-header-hint wraps to two (or more) lines
     at this width — see the rule's own doc comment. A small positive
     margin here instead of the desktop negative one keeps the hint
     readably below the wrapped row rather than overlapping it. */
  .page-header-hint { margin-top: 0.5rem; }

  /* A table wider than the viewport (most of the admin/history tables)
     otherwise drags the whole page into horizontal scroll instead of
     just scrolling within its own box. display:block only changes how
     the <table> element itself is boxed — its thead/tbody/tr/td children
     keep their normal table layout — so this is just "give the table its
     own scrollbar," not a structural rework. nowrap keeps a long cell
     (a Notes column, say) from being squeezed into an unreadable wrap
     instead of just widening that table's own scroll region.
  */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table th, table td { white-space: nowrap; }
}