/* fish.simonyou.dev — fishing and crabbing conditions within four hours of Adelaide.
   One screen: controls on top, ranked spots on the left, the chosen spot's day on the right. */
:root {
  --font-sans: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(1rem, 3vw, 2.5rem);
}
:root[data-theme="day"] {
  color-scheme: light;
  --bg: #eef3f1; --surface: #f8fbf9; --ink: #14201d; --dim: #5d6d68;
  --line: rgba(20, 32, 29, 0.12); --line-strong: rgba(20, 32, 29, 0.3);
  --accent: #0e7c86; --night: rgba(20, 32, 29, 0.07); --sol: rgba(14, 124, 134, 0.14);
  --great: #1d8a6b; --good: #a8850a; --fair: #d3651f; --poor: #c0392b;
}
:root[data-theme="night"] {
  color-scheme: dark;
  --bg: #0b1720; --surface: #12222c; --ink: #e6eef0; --dim: #93a3a8;
  --line: rgba(230, 238, 240, 0.12); --line-strong: rgba(230, 238, 240, 0.3);
  --accent: #4dc1d1; --night: rgba(0, 0, 0, 0.28); --sol: rgba(77, 193, 209, 0.16);
  --great: #4fcf9f; --good: #e6c14a; --fair: #f39a5b; --poor: #f0655a;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: clamp(15px, 0.4vw + 10px, 18px); line-height: 1.45;
  font-variant-ligatures: none;
  transition: background-color 700ms ease, color 700ms ease;
}
body { margin: 0; height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; font-variation-settings: "opsz" 14; }
body > *, main > *, .detail > *, .list > * { min-width: 0; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--line-strong); }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
p, h1, h2 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem var(--gutter); font-family: var(--font-mono); font-size: 0.8rem; }
.brand { text-decoration: none; font-weight: 500; }
.top nav { display: flex; align-items: center; gap: 1.1rem; }
.top nav a { color: var(--dim); text-decoration: none; }
.top nav a:hover { color: var(--ink); }
.theme { color: var(--dim); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.22rem 0.75rem; cursor: pointer; }
.theme:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- controls ---------- */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; padding: 0.2rem var(--gutter) 0.9rem; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; background: var(--surface); }
.seg button { background: transparent; border: 0; border-radius: 999px; padding: 0.3rem 0.9rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.8rem; color: var(--dim); }
.seg button.is-on { background: var(--ink); color: var(--bg); }
.moon { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--dim); margin-left: auto; }
.moon svg { width: 1rem; height: 1rem; flex: none; }
.live { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--dim); flex: none; }
.live.is-on { background: var(--accent); }

/* ---------- the two columns ---------- */
main { display: grid; grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr); gap: 1rem; padding: 0 var(--gutter); min-height: 0; }
.list { display: flex; flex-direction: column; min-height: 0; }
.list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); margin-bottom: 0.4rem; }
.legend { display: inline-flex; gap: 0.7rem; text-transform: none; letter-spacing: 0; }
.legend span::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; border-radius: 2px; margin-right: 0.3em; background: var(--tone); vertical-align: -1px; }
[data-tone="great"] { --tone: var(--great); }
[data-tone="good"] { --tone: var(--good); }
[data-tone="fair"] { --tone: var(--fair); }
[data-tone="poor"] { --tone: var(--poor); }
#spots { overflow-y: auto; min-height: 0; padding-right: 0.25rem; scrollbar-width: thin; display: grid; gap: 0.35rem; align-content: start; }
.spot {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 0.1rem 0.7rem; align-items: center;
  width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 0.55rem; padding: 0.55rem 0.7rem; cursor: pointer;
}
.spot:hover { border-color: var(--line-strong); }
.spot.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.spot .score { grid-row: 1 / 3; font-family: var(--font-mono); font-weight: 500; font-size: 1.05rem; color: #fff; background: var(--tone); border-radius: 0.4rem; text-align: center; padding: 0.35rem 0; }
.spot .name { font-weight: 600; font-size: 0.98rem; line-height: 1.2; }
.spot .drive { font-family: var(--font-mono); font-size: 0.72rem; color: var(--dim); white-space: nowrap; }
.spot .when { grid-column: 2 / 4; font-size: 0.82rem; color: var(--dim); line-height: 1.25; }
.spot .when b { font-weight: 500; color: var(--ink); }
.spot .bar { grid-column: 1 / 4; display: grid; grid-template-columns: repeat(24, 1fr); gap: 1px; height: 4px; margin-top: 0.25rem; border-radius: 2px; overflow: hidden; }
.spot .bar i { display: block; background: var(--tone, var(--line)); opacity: 0.85; }
.spot .bar i.is-past { opacity: 0.3; }
.spot .bar i.is-empty { background: var(--line); }

/* ---------- the chosen spot ---------- */
.detail { display: grid; grid-template-rows: auto auto auto auto auto; align-content: start; gap: 0.8rem; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 0.7rem; padding: 1rem 1.1rem; overflow-y: auto; scrollbar-width: thin; }
.detail h1 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; font-variation-settings: "opsz" 60; }
.meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--dim); margin-top: 0.2rem; }
.targets { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.targets span { font-family: var(--font-mono); font-size: 0.72rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.1rem 0.55rem; }
.targets span.is-closed { text-decoration: line-through; color: var(--dim); border-style: dashed; cursor: help; }
.window { display: flex; align-items: center; gap: 0.7rem; font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; }
.badge { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; color: #fff; background: var(--tone); border-radius: 0.4rem; padding: 0.15rem 0.55rem; }
.reasons { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.35rem; font-size: 0.9rem; color: var(--dim); }
.reasons li::before { content: "·"; margin-right: 0.5rem; color: var(--line-strong); }
.reasons li:first-child::before { content: none; }
.reasons li.is-warn { color: var(--fair); }

.chart { display: grid; grid-template-rows: clamp(6rem, 18vh, 11rem) auto; gap: 0.3rem; min-height: 0; }
.tide { width: 100%; height: 100%; display: block; }
.tide .night { fill: var(--night); }
.tide .sol { fill: var(--sol); }
.tide .sea { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.tide .fill { fill: var(--accent); opacity: 0.1; }
.tide .now { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.tide .turn { fill: var(--ink); }
.tide text { font-family: var(--font-mono); font-size: 10px; fill: var(--dim); }
.tide text.sun { fill: var(--good); }
.hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.hour { font-family: var(--font-mono); text-align: center; border-radius: 3px; padding: 0.3rem 0 0.25rem; background: color-mix(in srgb, var(--tone) 28%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--line)); --tone: var(--line); line-height: 1.2; }
.hour.is-empty { background: transparent; border-style: dashed; }
.hour.is-past { opacity: 0.4; }
.hour.is-best { box-shadow: inset 0 0 0 2px var(--tone); }
.hour .h { font-size: 0.62rem; color: var(--dim); }
.hour .s { font-size: 0.85rem; font-weight: 500; }
.hour .w { font-size: 0.6rem; color: var(--dim); }
@media (max-width: 1250px) { .hour .w { display: none; } }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.5rem; }
.tile { border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.5rem 0.65rem; }
.tile .label { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); }
.tile .value { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 500; margin-top: 0.1rem; white-space: nowrap; }
.tile .value.is-text { font-size: 0.9rem; white-space: normal; line-height: 1.3; }
.tile .value .unit { font-size: 0.72rem; font-weight: 400; color: var(--dim); margin-left: 0.15em; }
.tile .sub { font-size: 0.78rem; color: var(--dim); line-height: 1.3; }
.note { font-size: 0.82rem; color: var(--fair); }

/* ---------- rules and footer ---------- */
.rules { display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; padding: 0.8rem var(--gutter) 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--dim); }
.rules b { font-weight: 500; color: var(--ink); }
.rules .is-off { text-decoration: line-through; }
.foot { padding: 0.6rem var(--gutter) 1rem; font-size: 0.75rem; color: var(--dim); line-height: 1.45; max-width: 80rem; }
.foot a { color: var(--dim); }

@media (max-width: 900px) {
  body { height: auto; min-height: 100dvh; grid-template-rows: auto auto auto auto auto; }
  main { grid-template-columns: 1fr; }
  #spots { max-height: 40vh; }
  .detail { overflow: visible; }
  .top nav a:not(:last-child) { display: none; }
  .moon { margin-left: 0; width: 100%; }
  .hours { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hour:nth-child(odd) { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }