:root {
  --bg: #f6f7f5;
  --surface: #ffffff;
  --text: #1c2321;
  --muted: #5d6764;
  --border: #d9ddd9;
  --accent: #15803d;
  --accent-text: #ffffff;
  --error-bg: #fdecec;
  --error: #a61b1b;
  --flash-bg: #e8f4ec;
  --go: #00ff00;
  --near: #ffff00;
  --light: #0000ff;
  --sector: rgba(21, 128, 61, 0.35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131716;
    --surface: #1c2220;
    --text: #e6ebe8;
    --muted: #9aa5a1;
    --border: #333c39;
    --accent: #22a356;
    --accent-text: #08130d;
    --error-bg: #3a1a1a;
    --error: #ff9b9b;
    --flash-bg: #173023;
    --sector: rgba(34, 163, 86, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131716;
  --surface: #1c2220;
  --text: #e6ebe8;
  --muted: #9aa5a1;
  --border: #333c39;
  --accent: #22a356;
  --accent-text: #08130d;
  --error-bg: #3a1a1a;
  --error: #ff9b9b;
  --flash-bg: #173023;
  --sector: rgba(34, 163, 86, 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--accent); }
code { font-size: 0.9em; }
h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }

header.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.75rem 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; color: var(--text); text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
nav a { color: var(--muted); text-decoration: none; padding: 0.15rem 0; }
nav a[aria-current="page"] { color: var(--text); border-bottom: 2px solid var(--accent); }
.status {
  margin-left: auto;
  font-size: 0.8rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.status.busy { color: var(--text); border-color: var(--accent); }
.status.error { color: var(--error); border-color: var(--error); }

main { max-width: 960px; margin: 0 auto; padding: 1.25rem 16px 3rem; }
footer { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 0 16px 2rem; }
section { margin-bottom: 2rem; }
.head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 0.5rem; }
.head h1, .head h2 { margin: 0; }

.flash { background: var(--flash-bg); padding: 0.6rem 0.9rem; border-radius: 6px; margin: 0 0 1rem; }
.flash.error { background: var(--error-bg); color: var(--error); }

img.panel, .panel.empty {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 480;
  border: 10px solid #2b2b2b;
  border-radius: 6px;
  background: #fff;
  image-rendering: pixelated;
}
.panel.empty { display: grid; place-items: center; color: #555; }

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.actions form { margin: 0; }
button, .button {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.actions.sticky {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
  margin: 0;
}
.actions.sticky .primary { margin-left: auto; }

/* Spots editor */
fieldset.spot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem 1rem;
  min-width: 0;
}
fieldset.spot legend {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  float: left;
  margin-bottom: 0.75rem;
}
fieldset.spot legend + * { clear: both; }
fieldset.settings legend h2 { margin: 0; }
fieldset.settings legend small { font-weight: 400; font-size: 0.85rem; }
fieldset.settings p { margin: 0.75rem 0 0; }
input.name { font-weight: 600; font-size: 1.05rem; flex: 1; min-width: 0; }
button.remove { color: var(--error); }
.spot-body { clear: both; display: grid; grid-template-columns: 1fr 180px; gap: 1rem; }
.fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem 0.9rem; align-content: start; }
.fields .station-field { grid-column: span 3; }
.fields .window.off { visibility: hidden; }
.maplink { margin: 0; padding-top: 1.6rem; }
label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--muted); gap: 0.2rem; }
label small { font-size: 0.75rem; }
label > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
input, select {
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.35rem 0.5rem;
  width: 100%;
  min-width: 0;
}
input:invalid { border-color: var(--error); }
[hidden] { display: none !important; }
.station-row { display: flex; gap: 0.5rem; }
.station-row input { max-width: 9rem; }
.errors { clear: both; margin: 0 0 0.75rem; padding: 0.5rem 0.5rem 0.5rem 1.75rem; background: var(--error-bg); color: var(--error); border-radius: 6px; }

.wind { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.compass { width: 150px; height: 150px; }
.compass .ring { fill: none; stroke: var(--border); stroke-width: 1.5; }
.compass .sector { fill: var(--sector); stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.compass text { fill: var(--muted); font-size: 10px; text-anchor: middle; }
.wind-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; }
.sector-text { margin: 0; text-align: center; }

@media (max-width: 640px) {
  .spot-body { grid-template-columns: 1fr; }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields .station-field { grid-column: 1 / -1; }
  .maplink { padding-top: 0; }
}

/* Sources & about */
.source { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.1rem; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0.75rem 0 0; font-size: 0.9rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; min-width: 0; }
.break { overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; margin-top: 0.75rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
ul.legend { list-style: none; padding: 0; }
ul.legend li { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.4rem; }
.swatch { flex: none; width: 1.1rem; height: 0.8rem; border: 1px solid #000; display: inline-block; }
.swatch.go { background: var(--go); }
.swatch.near { background: var(--near); }
.swatch.light { background: linear-gradient(to top, var(--light) 35%, #fff 35%); }
.swatch.strong { background: linear-gradient(to bottom, #ff0000 35%, #fff 35%); }
.swatch.na { background: radial-gradient(#000 0.7px, #fff 0.8px) 0 0 / 3px 3px; }

/* Login */
.lock { width: 0.7em; height: 0.7em; vertical-align: -0.02em; margin-left: 0.15em; }
header .logout { margin: 0; }
button.link { border: 0; background: none; padding: 0; color: var(--accent); font-size: 0.9rem; text-decoration: underline; }
.login-link { font-size: 0.9rem; }
section.login { max-width: 360px; }
section.login form { display: flex; flex-direction: column; gap: 0.5rem; }

/* Going out */
:root { --gig: #7c3aed; --theatre: #c2410c; --comedy: #a16207; --classical: #1d4ed8; --new: #15803d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --gig: #a78bfa; --theatre: #fb923c; --comedy: #facc15; --classical: #93c5fd; --new: #4ade80; }
}
:root[data-theme="dark"] { --gig: #a78bfa; --theatre: #fb923c; --comedy: #facc15; --classical: #93c5fd; --new: #4ade80; }
.cat-gig { --cat: var(--gig); }
.cat-theatre { --cat: var(--theatre); }
.cat-comedy { --cat: var(--comedy); }
.cat-classical { --cat: var(--classical); }

.filters { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 0.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { flex-direction: row; font-size: 0.9rem; color: var(--text); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  border: 1px solid var(--border);
  border-left: 4px solid var(--cat, var(--border));
  background: var(--surface);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip small { opacity: 0.75; }
.filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filter-row input[type="search"] { flex: 1 1 14rem; width: auto; }
details.venues { position: relative; }
details.venues summary { cursor: pointer; padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.venue-list {
  position: absolute; z-index: 5; margin-top: 0.25rem; padding: 0.5rem 0.75rem; min-width: 14rem;
  max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
}
label.check { flex-direction: row; align-items: center; gap: 0.5rem; color: var(--text); font-size: 0.9rem; padding: 0.15rem 0; }
label.check input { width: auto; }

h2.week { position: sticky; top: 0; background: var(--bg); padding: 0.4rem 0; z-index: 1; border-bottom: 1px solid var(--border); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
article.event { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
article.event img, article.event .noimg { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--border); }
article.event .noimg { background: linear-gradient(135deg, var(--cat), transparent); opacity: 0.35; }
.event-body { padding: 0.6rem 0.8rem 0.8rem; }
.event-body h3 { font-size: 1.02rem; margin: 0.2rem 0; line-height: 1.3; }
.event-body h3 a { color: var(--text); text-decoration: none; }
.event-body h3 a:hover { text-decoration: underline; }
.event-body .meta { margin: 0; font-size: 0.875rem; color: var(--muted); }
.event-body .meta strong { color: var(--text); font-weight: 600; }
.event-body .genre { margin: 0 0 0.15rem; font-size: 0.85rem; color: var(--cat, var(--muted)); font-weight: 600; }
.event-body .summary { margin: 0.45rem 0 0; font-size: 0.875rem; line-height: 1.45; }
.tags { margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tag { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.05rem 0.45rem; border-radius: 4px; border: 1px solid var(--cat, var(--border)); color: var(--cat, var(--muted)); }
.tag.new { border-color: var(--new); color: var(--new); }
.tag.note { text-transform: none; font-weight: 500; }
ul.links { columns: 2 12rem; padding-left: 1.1rem; margin: 0.5rem 0 0; }

/* Going out config */
form.inline { display: inline; margin: 0; }
.row-actions { white-space: nowrap; }
.row-actions form + form { margin-left: 0.25rem; }
.row-actions button, form.inline button { font-size: 0.85rem; padding: 0.25rem 0.6rem; }
tr.muted td { color: var(--muted); }
.bad { color: var(--error); }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem 0.9rem; margin-top: 0.75rem; }
.grid-form .wide { grid-column: 1 / -1; }
details.add { margin-top: 0.75rem; }
details.add summary { cursor: pointer; color: var(--accent); }
section.source + section.source { margin-top: 1rem; }

/* Web board (no panel) */
:root { --b-go: #22c55e; --b-near: #facc15; --b-light: #3b82f6; --b-strong: #ef4444; --b-no: var(--bg); --b-dot: var(--border); }
main:has(.board-page) { max-width: 1280px; }
.board-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
table.board { table-layout: fixed; min-width: 860px; font-size: 0.85rem; }
table.board col.spot-col { width: 11rem; }
table.board th, table.board td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.board td, table.board thead th + th { border-left: 1px solid var(--border); }
table.board tbody tr:last-child > * { border-bottom: 0; }
table.board tbody th { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.board th.day { color: var(--text); vertical-align: top; white-space: nowrap; padding-bottom: 1.1rem; position: relative; }
table.board th.day small { display: block; color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
table.board th.day.go > span:first-child { background: var(--b-go); color: #08130d; padding: 0 0.3rem; border-radius: 3px; }
.ticks { position: absolute; left: 0.4rem; right: 0.4rem; bottom: 0.15rem; height: 0.9rem; }
.ticks span { position: absolute; transform: translateX(-50%); font-size: 0.7rem; font-weight: 400; color: var(--muted); }
.bar { display: flex; height: 1.1rem; border-radius: 3px; overflow: hidden; }
.seg { display: block; min-width: 0; flex-basis: 0; }
.seg.go { background: var(--b-go); }
.seg.near { background: var(--b-near); }
.seg.light { background: linear-gradient(to top, var(--b-light) 30%, transparent 30%); }
.seg.strong { background: linear-gradient(to bottom, var(--b-strong) 30%, transparent 30%); }
.seg.na { background: radial-gradient(var(--b-dot) 0.9px, transparent 1px) 0 0 / 4px 4px; }
.board-legend { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; color: var(--muted); }
.board-legend li { display: flex; align-items: center; gap: 0.4rem; }
.board-legend .seg { flex: none; width: 1.2rem; height: 0.8rem; border: 1px solid var(--border); border-radius: 2px; }
table.sessions tr.best td { font-weight: 600; }
table.sessions td:not(.spot-name) { white-space: nowrap; }

/* Per-spot forecast preview in the spots editor */
.spot-preview { clear: both; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.spot-preview > p { margin: 0; }
.spot-preview h3 { font-size: 0.95rem; margin: 0.75rem 0 0; }
.spot-preview.loading > * { opacity: 0.5; }
.spot-preview .bad { margin: 0; }
.spot-preview table.sessions { width: auto; }
.spot-preview .rules { margin: 0.25rem 0 0.5rem; }
.why-days { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.why-day { font-size: 0.8rem; padding: 0.2rem 0.55rem; }
.why-day[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.why > p { margin: 0 0 0.4rem; }
table.why-table { width: auto; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
table.why-table th, table.why-table td { padding: 0.2rem 0.55rem; white-space: nowrap; }
table.why-table td.reason { white-space: normal; color: var(--muted); min-width: 14rem; }
table.why-table td.fail { color: var(--error); background: var(--error-bg); font-weight: 600; }
.result { display: inline-block; min-width: 3.2rem; text-align: center; border-radius: 3px; padding: 0 0.3rem; border: 1px solid var(--border); }
.result.go { background: var(--b-go); border-color: var(--b-go); color: #08130d; font-weight: 600; }
.result.near { background: var(--b-near); border-color: var(--b-near); color: #1c1a05; }
.result.light { border-color: var(--b-light); color: var(--b-light); }
.result.strong { border-color: var(--b-strong); color: var(--b-strong); }
.spot-preview th.day { cursor: pointer; }