/* ──────────────────────────────────────────────────────────────────────
 * SurfCheck tide pages — shared stylesheet
 * Loaded by every build_tides.py page (/tides/<spot>, /morocco/tides/<spot>)
 * after brand.css, which supplies the colour tokens for both themes.
 * Layout is the locked v4 tide design; this file only reskins it onto the
 * brand tokens. brand.css --radius is 0 and the reset below pins every
 * element to 0 as well (editorial default).
 * ────────────────────────────────────────────────────────────────────── */

:root{--on-accent:#0C2033}

*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{font-size:16px}
body{background:var(--void);color:var(--foam);font-family:var(--fb);line-height:1.4;min-height:100vh}
a{color:inherit;text-decoration:none}

/* ── page frame ── */
.page{max-width:900px;margin:0 auto;padding:20px 16px 60px}
.crumb{font-family:var(--fm);font-size:11px;color:var(--fog);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}.crumb a{color:var(--mist)}.crumb a:hover{color:var(--tidal)}
h1{font-family:var(--fd);font-size:2rem;font-weight:800;color:var(--white);letter-spacing:-.01em;text-transform:uppercase;line-height:1}
.sub{font-family:var(--fb);color:var(--mist);font-size:13px;margin-top:6px}
.bar{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--foam);border-bottom:1px solid var(--border-dim);margin:14px 0 16px}
.bar-l{font-family:var(--fd);font-size:11px;font-weight:700;color:var(--foam);letter-spacing:.12em;text-transform:uppercase}.bar-r{font-family:var(--fm);font-size:12px;color:var(--tidal)}

/* ── surf-conditions strip (snapshot-powered, filled by tides.js) ── */
.cond{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding:9px 12px 9px 12px;background:var(--surface);border:1px solid var(--border-dim);border-left:3px solid var(--border)}
.cond.go{border-left-color:var(--tidal)}.cond.fair{border-left-color:var(--amber)}.cond.bad{border-left-color:var(--storm)}
.cond-l{display:flex;align-items:center;gap:8px;flex-shrink:0}
.cond-k{font-family:var(--fd);font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--fog)}
.cond-score{font-family:var(--fd);font-size:20px;font-weight:800;line-height:1;color:var(--white);font-variant-numeric:tabular-nums}
.cond.go .cond-score{color:var(--tidal)}.cond.fair .cond-score{color:var(--amber)}.cond.bad .cond-score{color:var(--storm)}
.cond .sc-stars svg,.cond .sc-stars.sc-stars-sm svg{width:13px;height:13px}
.cond-line{font-family:var(--fm);font-size:12px;color:var(--foam);flex:1 1 220px;min-width:0}
.cond-line .cond-wq{color:var(--mist)}
.cond-cta{font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tidal);white-space:nowrap;padding:6px 10px;border:1px solid var(--tidal);flex-shrink:0;margin-left:auto}
.cond-cta:hover{background:var(--tidal);color:var(--on-accent)}
.cond.pending .cond-line,.cond.unavailable .cond-line{color:var(--fog)}
/* placeholders live in CSS, not markup, so the crawlable text is just the label + CTA */
.cond.pending .cond-score:empty::before{content:"—";color:var(--fog)}
.cond.pending .cond-line:empty::before{content:"Loading live conditions…"}
@media(max-width:640px){.cond-cta{margin-left:0}}

/* ── hero: clock + today's high/low ── */
.hero{display:grid;grid-template-columns:168px 1fr;gap:12px;align-items:stretch}
@media(max-width:640px){.hero{grid-template-columns:1fr}}
.clockp{background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px}
.clock-cap{font-family:var(--fm);font-size:11px;color:var(--mist);margin-top:8px;text-align:center}
.pop{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border)}
.pc{padding:12px 12px;border-right:1px solid var(--border-dim);position:relative}.pc:last-child{border-right:0}.pc.next{background:var(--tidal-glow)}
.pc .k{font-family:var(--fd);font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:6px}.pc.hi .k{color:var(--tidal)}.pc.lo .k{color:var(--amber)}
.pc .t{font-family:var(--fd);font-size:28px;font-weight:800;color:var(--white);line-height:.95}.pc .h{font-family:var(--fm);font-size:12px;color:var(--mist);margin-top:3px}.pc .in{font-family:var(--fm);font-size:10px;color:var(--fog);margin-top:4px}
.pc.next .k::after{content:" · NEXT";color:var(--foam)}
@media(max-width:640px){.pop{grid-template-columns:repeat(2,1fr)}.pc:nth-child(2){border-right:0}}

/* ── best surf tide window ── */
.surfwin{margin-top:14px;border:1px solid var(--tidal);background:var(--tidal-glow)}
.surfwin .lh{background:var(--tidal);color:var(--on-accent)}
.sw-body{padding:12px 14px}
.sw-win{font-family:var(--fd);font-weight:800;font-size:20px;color:var(--white)}
.sw-note{font-family:var(--fb);font-size:12px;color:var(--mist);margin-top:5px}.sw-note a{color:var(--tidal);font-weight:600}

/* ── tide curve ── */
.chart{margin-top:18px;background:var(--surface);border:1px solid var(--border)}
.lh{padding:6px 12px;background:var(--abyss);color:var(--white);font-family:var(--fd);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between}.lh .r{color:var(--mist);font-family:var(--fm);letter-spacing:0}
.cnav{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border-dim)}
.cnav .day{font-family:var(--fd);font-size:13px;font-weight:700;color:var(--white);letter-spacing:.04em;text-transform:uppercase}.cnav .day span{color:var(--tidal);font-size:10px;margin-left:6px}
.navbtn{background:var(--raised);border:1px solid var(--border);color:var(--foam);font-family:var(--fd);font-weight:700;font-size:12px;padding:6px 12px;cursor:pointer;text-transform:uppercase;letter-spacing:.05em}
.navbtn:hover{border-color:var(--tidal);color:var(--tidal)}.navbtn:disabled{opacity:.3;cursor:default}
#chart{display:block;width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:16px;padding:10px 14px;border-top:1px solid var(--border-dim);font-family:var(--fm);font-size:11px;color:var(--mist)}
.lg{display:flex;align-items:center;gap:6px}.sw{width:18px;height:0;border-top-width:2px;border-top-style:solid}

/* ── tables: 7-day + range ── */
section.blk{margin-top:22px}
table{width:100%;border-collapse:collapse;font-size:13px;background:var(--surface);border:1px solid var(--border)}
th{text-align:left;font-family:var(--fm);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--fog);padding:8px 12px;border-bottom:1px solid var(--border);background:var(--abyss)}
td{padding:9px 12px;border-bottom:1px solid var(--border-dim)}td.d{font-family:var(--fm);color:var(--white);white-space:nowrap}
.tv{font-family:var(--fm);color:var(--foam)}.th{font-family:var(--fm);color:var(--tidal);margin-left:5px;margin-right:14px;font-size:12px}.stt{font-family:var(--fb);color:var(--mist);font-size:12px}
tr.tr-today td{background:var(--tidal-glow)}tr.tr-today td.d{color:var(--tidal)}tr.tr-sel td{background:var(--tidal-glow);box-shadow:inset 3px 0 0 var(--tidal)}

/* ── facts, links, attribution ── */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--border-dim);margin-top:22px}
.fact{padding:10px 14px;border-right:1px solid var(--border-dim);font-family:var(--fm);font-size:14px;color:var(--foam)}.fact .k{font-family:var(--fd);font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--fog);display:block;margin-bottom:3px}
.links{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}.links a{background:var(--raised);border:1px solid var(--border-dim);padding:9px 14px;font-family:var(--fd);font-size:13px;color:var(--foam);text-transform:uppercase;letter-spacing:.03em}.links a:hover{border-color:var(--tidal);color:var(--tidal)}.links a.primary{background:var(--tidal);color:var(--on-accent);border-color:var(--tidal);font-weight:700}.links a.primary:hover{color:var(--on-accent);opacity:.9}
.attn{margin-top:20px;font-size:11px;color:var(--fog)}