/* Forecast components, shared by index.html (Surf today card, footer surf card) and
   surf.html (full view). Markup is rendered by forecast.js, so this is plain CSS,
   not Tailwind: it applies before Tailwind's in-browser compile and to late DOM. */
:root {
  --fc-ink: #151515; --fc-paper: #F3F0E8; --fc-panel: #FCFBF7;
  --fc-sun: #E9FF00; --fc-accent: #1F5BFF; --fc-orange: #FF5A1F;
  --fc-aqua: #3CCFFF; --fc-blue: #0870AD; --fc-rust: #C93D0B;
  --fc-line: rgba(21,21,21,.12);
  --fc-display: "Nomine", "Archivo", "Arial Narrow", Impact, sans-serif;
  --fc-body: "Mancunian Sans", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fc-label { font: 700 12px/1 var(--fc-body); letter-spacing: .1em; text-transform: uppercase; }
.fc-display { font-family: var(--fc-display); font-weight: 900; font-stretch: 62%; line-height: .86; letter-spacing: -.005em; text-transform: uppercase; }
.fc-row-i { display: inline-flex; align-items: center; gap: 8px; }
.fc-muted { opacity: .6; }

/* Rating colors (surf-rating.js): --c swell bar, --g wave-height bar, --pb/--pf pill, --tc text */
.r-flat  { --c: rgba(21,21,21,.22); --g: rgba(21,21,21,.07); --pb: rgba(21,21,21,.07); --pf: var(--fc-ink); --tc: var(--fc-ink); }
.r-small { --c: var(--fc-accent); --g: rgba(31,91,255,.22); --pb: var(--fc-accent); --pf: #fff; --tc: var(--fc-accent); }
.r-good  { --c: var(--fc-sun); --g: rgba(233,255,0,.45); --pb: var(--fc-sun); --pf: var(--fc-ink); --tc: var(--fc-ink); }
.r-big   { --c: var(--fc-orange); --g: rgba(255,90,31,.3); --pb: var(--fc-orange); --pf: var(--fc-ink); --tc: var(--fc-rust); }
/* wind is shown, never rated */
.w-light  { --c: rgba(60,207,255,.45); --g: rgba(60,207,255,.18); }
.w-breezy { --c: var(--fc-aqua); --g: rgba(60,207,255,.3); }
.w-strong { --c: var(--fc-blue); --g: rgba(8,112,173,.3); }

.fc-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 3px; background: var(--pb); color: var(--pf); font: 700 12px/1 var(--fc-body); font-variant-numeric: tabular-nums; }
.fc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 10px; border-radius: 4px; background: rgba(21,21,21,.05); font: 600 14px/1 var(--fc-body); }
.fc-chip .ic { font-size: 16px; }
.fc-ring { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(21,21,21,.25); }
.fc-ring .ic { font-size: 14px; }
.fc-ring.r-small, .fc-ring.r-big { border-color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.fc-ring.r-good { border-color: var(--fc-ink); background: var(--fc-sun); }
.fc-ring.r-small .ic { color: var(--fc-accent); }
.fc-ring-w { border-color: rgba(8,112,173,.5); background: rgba(60,207,255,.15); color: var(--fc-blue); }
.fc-sun { color: var(--fc-orange); } .fc-moon { color: rgba(21,21,21,.4); } .fc-rain { color: var(--fc-blue); }
.fc-accent { color: var(--fc-accent); }
.fc-btn { display: flex; align-items: center; justify-content: center; gap: .7em; padding: 16px 20px; background: var(--fc-ink); color: var(--fc-sun); font: 700 13px/1 var(--fc-body); letter-spacing: .08em; text-transform: uppercase; }
.fc-btn:hover { background: #000; }

/* ── Surf today card (landing) ── */
.fc-today { display: grid; background: var(--fc-panel); border: 1px solid rgba(21,21,21,.15); }
.fc-today > * { padding: 22px 20px; }
.fc-verdict { display: grid; gap: 14px; align-content: start; }
.fc-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fc-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--fc-orange); }
.fc-status .fc-label { color: var(--fc-rust); }
.fc-verdict h3 { font-size: clamp(52px, 6.2vw, 88px); }
.fc-verdict p { max-width: 42ch; font: 500 16px/1.5 var(--fc-body); opacity: .75; }
.fc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-tl { border-top: 1px solid var(--fc-line); }
.fc-tl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.fc-tl-cols { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }
.fc-tl-col { display: grid; justify-items: center; gap: 8px; font: 600 11px/1 var(--fc-body); }
.fc-tl-col .ic { font-size: 18px; }
.fc-tl-bar { position: relative; width: 22px; height: 84px; }
.fc-tl-bar span, .fc-bar span { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px 3px 0 0; }
.fc-tl-bar .g, .fc-bar .g { background: var(--g); }
.fc-tl-bar .w, .fc-bar .w { background: var(--c); border-radius: 0; }
.r-good .w { box-shadow: inset 0 0 0 1px rgba(21,21,21,.4); }
.fc-tl-line { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--fc-accent); }
.fc-tl-line span { position: absolute; right: 0; bottom: 3px; color: var(--fc-accent); font: 600 10px/1 var(--fc-body); letter-spacing: .05em; text-transform: uppercase; }
.fc-now { color: var(--fc-rust); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fc-next { display: grid; gap: 12px; align-content: start; background: var(--fc-sun); }
.fc-next h3 { font-size: clamp(44px, 4vw, 54px); }
.fc-next .fc-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 700 14px/1 var(--fc-body); }
.fc-next .fc-facts .ic { font-size: 15px; }
.fc-next p { font: 500 15px/1.45 var(--fc-body); }
.fc-next .fc-btn { margin-top: auto; }
@media (min-width: 901px) {
  .fc-today { grid-template-columns: minmax(0,1fr) minmax(300px,400px) 340px; }
  .fc-today > * { padding: 32px; }
  .fc-tl { border-top: 0; border-left: 1px solid var(--fc-line); }
}
.fc-loading { padding: 32px; font: 600 13px/1 var(--fc-body); letter-spacing: .08em; text-transform: uppercase; opacity: .5; }

/* ── Full view (surf.html) ── */
.fc-best { display: grid; gap: 24px; padding: 24px 20px; background: var(--fc-sun); }
.fc-best .fc-display { font-size: clamp(40px, 4.6vw, 58px); }
.fc-best-col { display: grid; gap: 8px; align-content: start; }
.fc-best-col > span:last-child { font: 600 14px/1.2 var(--fc-body); letter-spacing: .05em; text-transform: uppercase; }
@media (min-width: 901px) {
  .fc-best { grid-template-columns: auto auto auto minmax(0,1fr) auto; align-items: center; gap: 40px; padding: 28px 32px; }
}
.fc-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px,1fr); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.fc-day { display: grid; gap: 4px; align-content: start; min-height: 196px; padding: 14px 12px; scroll-snap-align: start; background: var(--fc-panel); border-top: 4px solid var(--c); }
.fc-day.is-best { background: var(--fc-sun); border: 1.5px solid var(--fc-ink); border-top-width: 4px; }
.fc-day.is-best .fc-rain, .fc-day.is-best .fc-water { color: var(--fc-ink); }
.fc-day-top { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; align-items: center; }
.fc-day-top .ic { font-size: 22px; }
.fc-day .fc-tag { white-space: nowrap; padding: 4px 6px; background: var(--pb); color: var(--pf); font: 700 10px/1 var(--fc-body); letter-spacing: .1em; text-transform: uppercase; }
.fc-day.is-best .fc-tag { background: var(--fc-ink); color: var(--fc-sun); }
.fc-day-range { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; color: var(--tc); }
.fc-day.is-best .fc-day-range { color: var(--fc-ink); }
.fc-day-range .ic { font-size: 20px; }
.fc-day-det { display: flex; gap: 12px; font: 600 12px/1.3 var(--fc-body); }
.fc-day-det span { display: inline-flex; align-items: center; gap: 4px; }
.fc-day-det .ic { font-size: 14px; }
.fc-water { color: var(--fc-blue); }

.fc-panel { background: var(--fc-panel); border: 1px solid var(--fc-line); }
.fc-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 20px 16px; }
.fc-tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; }
.fc-tile .ic { font-size: 22px; }
.fc-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-key { padding: 6px 9px; background: var(--pb); color: var(--pf); font: 700 11px/1 var(--fc-body); letter-spacing: .09em; text-transform: uppercase; }
.fc-key small { margin-left: 6px; font-weight: 500; letter-spacing: 0; opacity: .75; }
.r-good.fc-key { box-shadow: inset 0 0 0 1px rgba(21,21,21,.3); }

/* chart: rows of cells; the gutter sticks left while the days scroll */
.fc-chart { overflow-x: auto; padding: 0 0 20px; }
.fc-rows { width: max-content; min-width: 100%; }
.fc-r { position: relative; display: flex; }
.fc-r + .fc-r.ln { border-top: 1px solid rgba(21,21,21,.1); }
.fc-chart { --gut: 116px; }
@media (max-width: 640px) { .fc-chart { --gut: 92px; } .fc-gut { padding-left: 12px !important; font-size: 10px !important; } }
.fc-gut { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 7px; flex: none; width: var(--gut); padding-left: 20px; background: var(--fc-panel); font: 600 11px/1 var(--fc-body); letter-spacing: .06em; text-transform: uppercase; }
.fc-gut .ic { font-size: 14px; }
.fc-grp { display: flex; flex: none; margin-left: 10px; }
.fc-grp:last-child { margin-right: 20px; }
.fc-c { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; font: 600 12px/1 var(--fc-body); font-variant-numeric: tabular-nums; }
.fc-c .ic { font-size: 18px; }
.fc-c.night { background: rgba(21,21,21,.035); }
.fc-dl { height: 22px; } .fc-dl .fc-grp { font: 700 11px/22px var(--fc-body); letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.fc-bar { position: relative; width: 20px; height: 100%; }
.fc-axis { position: absolute; right: 12px; font: 700 11px/1 var(--fc-body); transform: translateY(50%); opacity: .4; }
.fc-axis.on { opacity: 1; }
.fc-thr { position: absolute; left: var(--gut); right: 0; border-top: 1px dashed; pointer-events: none; }
.fc-nowline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--fc-orange); z-index: 1; }
.fc-nowline span { position: absolute; top: 4px; left: 4px; padding: 3px 6px; background: var(--fc-orange); font: 700 10px/1 var(--fc-body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }

.fc-stats { display: grid; gap: 24px; }
@media (min-width: 701px) { .fc-stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.fc-stat { display: flex; gap: 16px; padding-top: 18px; border-top: 1px solid rgba(21,21,21,.25); }
.fc-stat .fc-tile { width: 48px; height: 48px; }
.fc-stat .fc-tile .ic { font-size: 24px; }
.fc-stat .fc-display { font-size: 44px; }
.fc-stat p { font: 500 13px/1.4 var(--fc-body); opacity: .6; }

/* ── footer surf card (ink background) ── */
.fc-mini { display: grid; gap: 12px; padding: 20px; border: 1px solid rgba(243,240,232,.22); }
.fc-mini .fc-status i { background: var(--fc-sun); }
.fc-mini .fc-status .fc-label { color: var(--fc-sun); }
.fc-mini-now { display: flex; align-items: center; gap: 12px; }
.fc-mini-now .fc-display { font-size: 48px; }
.fc-mini .fc-ring { width: 34px; height: 34px; border-color: rgba(243,240,232,.4); }
.fc-mini .fc-ring .ic { font-size: 18px; }
.fc-mini-tag { justify-self: start; padding: 4px 8px; background: rgba(243,240,232,.12); font: 700 11px/1 var(--fc-body); letter-spacing: .08em; text-transform: uppercase; }