/* THE FORECAST PAGE
 *
 * The one page on the site where colour is instrumentation rather than
 * mood, so it is the one place that steps outside the palette.
 *
 * Teal → green → yellow → orange → red. Not sand and coral. Every marine
 * forecast on earth uses this ramp and everybody at a marina can already
 * read it; painting a two-metre swell in the brand's coral would be a
 * dial that matches the furniture and tells you nothing. The five steps
 * are the five bands in MAGIK.WAVE_BANDS / WIND_BANDS, and the legend
 * prints their numbers, so a colour on the map converts back to a height
 * rather than to an adjective.
 *
 * One ramp serves both layers. Swell in metres and wind in knots are
 * different quantities, but "how far along the ramp" means the same
 * thing in both — and two ramps would be two things to learn.
 */
/* The ramp itself is in magik.css now, on :root, because the sea panel in
   the header draws the same three verdicts on every page of the site and
   was reaching for the brand palette to do it. This page is still where
   the reasoning is written down; it is no longer where the numbers live. */

/* ---- the page opens on the water ------------------------------------ */
.fc-top{position:relative; padding-block:clamp(16px,2.4vw,26px) clamp(48px,7vw,90px)}
.fc-water{
  position:absolute; z-index:0; pointer-events:none;
  inset:calc(-1 * var(--header-h, 76px)) 0 auto 0; height:clamp(130px,18vw,220px);
  -webkit-mask-image:linear-gradient(#000 44%, transparent 100%);
          mask-image:linear-gradient(#000 44%, transparent 100%);
}
.fc-water canvas{width:100%; height:100%; display:block}
.fc-top .wrap{position:relative; z-index:2}
.fc-h{font-size:clamp(19px,2.1vw,24px); margin:clamp(34px,4vw,52px) 0 14px}

/* ---- today, in one strip --------------------------------------------
   This was a card of seven tiles and the largest object on the page,
   answering the smallest question on it — one number for "the bay",
   when the whole difficulty here is that the harbour and the water
   outside the pass disagree on the same morning. It is a line now. The
   map is the page. */
.fc-now{
  display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); flex-wrap:wrap;
  padding:10px 16px; margin-bottom:clamp(14px,2vw,20px);
  border-radius:var(--r-btn);
  background:color-mix(in srgb, var(--surface) 74%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.fc-now-lead{display:flex; align-items:center; gap:11px; flex:none}
.fc-now-lead span{display:grid; gap:1px}
.fc-now-lead b{font-size:17px; font-weight:650; line-height:1.15}
.fc-now-lead i{font-style:normal; font-size:11.5px; color:var(--muted)}
.fc-now-lead.s0 b{color:var(--s0-ink)}  .fc-now-lead.s1 b{color:var(--s1-ink)}
.fc-now-lead.s2 b{color:var(--s2-ink)}  .fc-now-lead.s3 b{color:var(--s3-ink)}
.fc-now-lead.s4 b{color:var(--s4-ink)}
.fc-now-figs{display:flex; flex-wrap:wrap; gap:6px clamp(14px,2.2vw,26px); margin-left:auto}
.fc-bit{display:grid; gap:0; justify-items:start}
.fc-bit b{font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.2}
.fc-bit i{
  font-style:normal; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}

/* ---- three waves ----------------------------------------------------
   One lit wave is a mild day, three is a big one, and the unlit ones
   stay drawn so the scale is visible rather than remembered. It replaced
   a progress bar whose length was this day measured against the roughest
   day of this particular week — the same sea drew a full bar in a calm
   week and a stub in a rough one. */
.wv{display:block; width:28px; height:28px; flex:none}
.wv svg{width:100%; height:100%; display:block}
.wv path{fill:none; stroke-width:2; stroke-linecap:round}
.wv path.off{stroke:color-mix(in srgb, var(--ink) 14%, transparent)}
.wv.s0 path.on{stroke:var(--s0)} .wv.s1 path.on{stroke:var(--s1)}
.wv.s2 path.on{stroke:var(--s2)} .wv.s3 path.on{stroke:var(--s3)}
.wv.s4 path.on{stroke:var(--s4)} .wv.sna path.on{stroke:var(--sna)}

/* =====================================================================
   THE MAP — the page's protagonist
   ===================================================================== */
.fc-map-wrap[hidden]{display:none}

.fc-controls{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:10px;
}

/* Swell or wind. Two states of one map, so they are one segmented
   control rather than two buttons that happen to be next to each other. */
.fc-modes{
  display:inline-flex; padding:3px; gap:2px; flex:none;
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 7%, transparent);
}
.fc-mode{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 15px 7px 11px; border:0; border-radius:999px;
  font-family:"Lexend",sans-serif; font-size:14px; font-weight:500;
  background:none; color:var(--muted);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.fc-mode[hidden]{display:none}
.fc-mode:hover{color:var(--ink)}
.fc-mode:focus-visible{outline:2.5px solid var(--ac); outline-offset:2px}
.fc-mode.on{
  background:var(--surface); color:var(--ink); font-weight:600;
  box-shadow:0 1px 3px -1px rgba(var(--sh),.28);
}
.fc-mode-ic{width:19px; height:19px; flex:none; background:center/contain no-repeat}
.m-wave{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23238C99' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2.6 9.4c2.4-2.6 4.7-2.6 7.1 0s4.7 2.6 7.1 0 4.7-2.6 4.7-2.6'/%3E%3Cpath d='M2.6 14.4c2.4-2.6 4.7-2.6 7.1 0s4.7 2.6 7.1 0 4.7-2.6 4.7-2.6'/%3E%3Cpath d='M2.6 19.4c2.4-2.6 4.7-2.6 7.1 0s4.7 2.6 7.1 0 4.7-2.6 4.7-2.6'/%3E%3C/svg%3E")}
.m-wind{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23238C99' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2.9 8.4h11.4a2.9 2.9 0 1 0-2.9-2.9'/%3E%3Cpath d='M2.9 13.4h15.2a2.9 2.9 0 1 1-2.9 2.9'/%3E%3Cpath d='M2.9 18.4h6.7'/%3E%3C/svg%3E")}

/* ---- the day strip, on the map ------------------------------------- */
.fc-days{
  list-style:none; margin:0; padding:0; display:flex; gap:6px;
  overflow-x:auto; scrollbar-width:none; flex:1 1 auto; min-width:0;
}
.fc-days::-webkit-scrollbar{display:none}
.fc-daybtn{
  display:grid; justify-items:center; gap:1px; cursor:pointer;
  padding:7px 12px 8px; border-radius:14px; min-width:60px;
  border:1.5px solid transparent; background:none;
  font-family:"Lexend",sans-serif; color:var(--muted);
  transition:border-color .18s, background .18s, color .18s;
}
.fc-daybtn b{font-size:12.5px; font-weight:600}
.fc-daybtn i{font-style:normal; font-size:11px; opacity:.8}
.fc-daybtn .dot{width:16px; height:4px; border-radius:99px; margin-top:3px; background:var(--sna)}
.fc-daybtn .dot.s0{background:var(--s0)} .fc-daybtn .dot.s1{background:var(--s1)}
.fc-daybtn .dot.s2{background:var(--s2)} .fc-daybtn .dot.s3{background:var(--s3)}
.fc-daybtn .dot.s4{background:var(--s4)}
.fc-daybtn:hover{color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent)}
.fc-daybtn:focus-visible{outline:2.5px solid var(--ac); outline-offset:2px}
.fc-daybtn.on{
  color:var(--ink); background:var(--surface);
  border-color:color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow:0 1px 3px -1px rgba(var(--sh),.25);
}

/* ---- the chart ------------------------------------------------------ */
.fc-map{
  position:relative; overflow:hidden;
  height:clamp(420px, 62vh, 720px);
  border-radius:var(--r-card);
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow:var(--elev);
  background:var(--surface);
  cursor:grab; touch-action:pan-y;
}
.fc-map.dragging{cursor:grabbing}
@media (min-width:901px){ .fc-map{touch-action:none} }

/* what is there before the tiles arrive, and if they never do */
.fc-map-plate{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--s0) 22%, var(--surface)),
    color-mix(in srgb, var(--s1) 18%, var(--surface)));
}
.fc-map-tiles{position:absolute; inset:0}
.fc-map-tiles img{position:absolute; display:block; user-select:none; -webkit-user-drag:none}
.fc-map-pts{position:absolute; inset:0; pointer-events:none}

/* ---- the field ------------------------------------------------------
   One value per pixel, interpolated between the five readings — the
   canvas is computed at one cell per seven screen pixels and stretched,
   which the browser smooths for free. That stretch is not a shortcut: it
   is the right amount of blur, because the model's own grid is nine
   kilometres and a field resolved any finer would be drawing precision
   that is not in the data.

   Multiplied over the chart rather than laid on top of it, and at just
   over half strength, so the coastline, the islands and the place names
   read straight through. A forecast field that hides the coast it is
   about is a coloured rectangle. */
.fc-map-field{
  position:absolute; inset:0; width:100%; height:100%;
  mix-blend-mode:multiply; opacity:.58;
  pointer-events:none;
  transition:opacity .3s ease;
}

.fc-map-cred{
  position:absolute; right:0; bottom:0; margin:0; z-index:5;
  padding:4px 10px; font-size:10.5px; color:var(--muted);
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  border-radius:10px 0 0 0;
}
.fc-map-cred a{color:inherit}

/* ---- zoom ----------------------------------------------------------- */
.fc-zoom{
  position:absolute; right:12px; top:12px; z-index:6;
  display:grid; gap:1px; border-radius:12px; overflow:hidden;
  box-shadow:0 1px 3px -1px rgba(var(--sh),.3), 0 10px 22px -12px rgba(var(--sh),.8);
}
.fc-zbtn{
  width:34px; height:34px; border:none; cursor:pointer; padding:0;
  background:var(--surface); color:var(--ink);
  font-size:19px; font-weight:500; line-height:1;
  display:grid; place-items:center; transition:background .16s;
}
.fc-zbtn:hover{background:#fff}
.fc-zbtn:disabled{color:color-mix(in srgb, var(--ink) 30%, transparent); cursor:default}
.fc-zbtn:focus-visible{outline:2.5px solid var(--ac); outline-offset:-2px}

/* ---- the readings ---------------------------------------------------
   A disc in the field's own colour with the number in it, and the place
   written underneath directly on the map.

   These were white boxes with a coloured stripe along the top, which is
   a label sitting ON a map rather than one belonging TO it: three white
   rectangles were the brightest objects on a page whose entire subject
   is the colour underneath them. The disc takes the exact colour the
   field has at that point — forecast.js passes it in as --c — so a
   marker is a sample of the map rather than a competitor to it, and it
   doubles as the key: what that shade means is written in the middle of
   it.

   The number goes white or ink by luminance, decided in JS, because this
   ramp runs deep blue to chartreuse to red and no single ink survives
   all of it. */
.fc-pt{
  position:absolute; translate:-50% -50%; z-index:4;
  display:grid; justify-items:center; gap:5px; white-space:nowrap;
  pointer-events:none;
}
.fc-pt-v{
  display:grid; place-items:center; width:50px; height:50px; border-radius:50%;
  background:var(--c, var(--sna));
  border:2.5px solid color-mix(in srgb, #fff 88%, transparent);
  box-shadow:0 2px 6px -2px rgba(var(--sh),.45), 0 12px 26px -12px rgba(var(--sh),.9);
  font-family:"Bricolage Grotesque",sans-serif; font-variation-settings:"wdth" 88;
  font-weight:800; font-size:17px; letter-spacing:-.02em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.fc-pt-v em{font-style:normal; font-size:9px; font-weight:600; opacity:.8; margin-top:1px}
.fc-pt.on-shell .fc-pt-v{color:#fff}
.fc-pt.on-ink .fc-pt-v{color:var(--ink)}

/* The place name has no plate of its own — a halo instead, so it reads
   over whatever colour the field happens to be under it without putting
   another white box on the water. */
.fc-pt-n{
  font-style:normal; font-size:11px; font-weight:650; letter-spacing:.04em;
  color:#fff; line-height:1.2;
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 0 8px rgba(0,0,0,.4);
}

/* ---- the scale, standing on the map --------------------------------
   One continuous bar painted from the same ramp the field is, with the
   numbers that produced it underneath. It was a row of five labelled
   boxes, which could only ever tell you which WORD a colour meant — and
   it stood below the map, where you had to leave the thing you were
   reading to find out what it said. */
.fc-key{
  position:absolute; left:12px; bottom:12px; z-index:6;
  display:flex; align-items:center; gap:10px;
  padding:8px 14px 9px; border-radius:14px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 3px -1px rgba(var(--sh),.28), 0 10px 24px -14px rgba(var(--sh),.8);
}
.fc-key-t{
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); font-weight:650; flex:none;
}
.fc-key-bar{position:relative; display:block; width:clamp(140px,22vw,240px); flex:none}
.fc-key-bar i{display:block; height:9px; border-radius:99px}
.fc-key-ticks{position:relative; display:block; height:13px}
.fc-key-ticks b{
  position:absolute; top:1px; translate:-50% 0;
  font-size:10px; font-weight:600; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
/* the first number would otherwise hang off the left end of the bar */
.fc-key-ticks b:first-child{translate:0 0}
.fc-key-u{font-size:11px; color:var(--muted); font-weight:600; flex:none}

/* =====================================================================
   THE WEEK
   Seven columns and a header row that names them. Every figure also
   carries its own label; the header hides those on a wide screen, where
   saying it once at the top beats saying it eight times down the page,
   and hands them back the moment the columns start dropping. Nothing on
   this page is ever an unlabelled number.
   ===================================================================== */
.fc-week{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.fc-day,.fc-head{
  display:grid; align-items:center; gap:14px;
  grid-template-columns:minmax(116px,1.2fr) 40px 74px 100px 62px 74px 100px;
}
.fc-head{
  padding:0 16px 4px; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
.fc-head span:nth-child(n+3){text-align:right}

.fc-day{
  padding:12px 16px; border-radius:16px; cursor:pointer;
  background:color-mix(in srgb, var(--surface) 60%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-left:4px solid var(--sna);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
/* the day's swell on the edge of its own row: eight stacked is the shape
   of the week, readable in one pass without reading a number */
.fc-day.s0{border-left-color:var(--s0)} .fc-day.s1{border-left-color:var(--s1)}
.fc-day.s2{border-left-color:var(--s2)} .fc-day.s3{border-left-color:var(--s3)}
.fc-day.s4{border-left-color:var(--s4)}
.fc-day:hover{transform:translateX(2px); background:var(--surface)}
.fc-day:focus-visible{outline:2.5px solid var(--ac); outline-offset:2px}
.fc-day.is-today{border-color:color-mix(in srgb, var(--ac) 45%, transparent)}
.fc-day.picked{background:var(--surface); box-shadow:0 2px 6px -2px rgba(var(--sh),.28)}

.fc-when{display:grid; gap:1px; min-width:0}
.fc-when b{font-size:15px; font-weight:600}
.fc-when i{font-style:normal; font-size:12px; color:var(--muted)}
.fc-sea{display:grid; place-items:center}
.fc-day > span:not(.fc-when):not(.fc-sea){display:grid; gap:1px; justify-items:end}
.fc-day .num{font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums}
.fc-day > span > i{
  font-style:normal; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); display:none;
}
.fc-wind em{font-style:normal; font-weight:400; font-size:11px; color:var(--muted); margin-left:3px}
.fc-rain .num{color:var(--muted)}

.fc-v{
  justify-self:end; text-align:center; align-self:center;
  padding:5px 12px; border-radius:999px; font-size:13px; font-weight:600;
  background:var(--sna-wash); color:var(--sna-ink);
}
.fc-v.s0{background:var(--s0-wash); color:var(--s0-ink)}
.fc-v.s1{background:var(--s1-wash); color:var(--s1-ink)}
.fc-v.s2{background:var(--s2-wash); color:var(--s2-ink)}
.fc-v.s3{background:var(--s3-wash); color:var(--s3-ink)}
.fc-v.s4{background:var(--s4-wash); color:var(--s4-ink)}

.fc-down{padding:22px 24px}
.fc-down b{font-size:17px}
.fc-down p{margin:8px 0 0; color:var(--muted)}
#fc-note{margin-top:18px; max-width:76ch}

/* ---- narrow ---------------------------------------------------------- */
@media (max-width:900px){
  .fc-head{display:none}
  .fc-day{grid-template-columns:minmax(92px,1fr) 34px repeat(3, minmax(56px,auto)); gap:10px 12px}
  .fc-day .fc-rain{display:none}
  .fc-day > span > i{display:block}
  .fc-v{grid-column:1 / -1; justify-self:start; margin-top:2px}
  .fc-now-figs{margin-left:0; width:100%}
  .fc-map{height:clamp(360px, 56vh, 520px)}
}
@media (max-width:560px){
  .fc-day{grid-template-columns:1fr 34px 66px 82px; gap:8px 10px}
  .fc-day .fc-temp{display:none}
  .fc-controls{gap:10px}
  .fc-pt-v{width:42px; height:42px; font-size:15px}
  .fc-pt-n{font-size:10px}

  /* THE DAY STRIP RUNS TO THE EDGE OF THE SCREEN.
     Five days of 60px plus their gaps is 330 of the 350 the content
     column has, and the sixth is the one you are usually after — so the
     strip has always had more in it than it can show. It scrolls, and
     that is correct; what was wrong is WHERE it was cut. Stopping at the
     gutter puts a sliced-off Tuesday in the middle of the page with
     twenty clear pixels to the right of it, which reads as a rendering
     fault rather than as an invitation. Cut at the edge of the glass and
     the same clipped tile is the oldest signal on a touch screen: there
     is more over there, push it.
     Negative margin out to the gutter, the same padding back as scroll
     padding, so the first day still lines up with the heading above it
     and the last can be scrolled clear of the edge. */
  .fc-controls{display:grid; justify-items:start}
  .fc-days{
    width:100vw; margin-inline:calc(-1 * var(--gut));
    padding-inline:var(--gut); scroll-padding-inline:var(--gut);
    scroll-snap-type:x proximity;
  }
  .fc-daybtn{scroll-snap-align:start}

  /* The captions under the readings — SWELL, WIND, the place names on
     the chart, the units on the key. Ten pixels is a size for a screen
     held at arm's length on a desk; this page gets read on a pontoon in
     full sun, which is the worst light any page of this site is read in
     and the reason a floor here is not fussiness. Half a point at a
     time, and no layout moves: every one of these already sits on its
     own line under the number it labels. */
  .fc-day > span > i,
  .fc-pt-n,.fc-key-t,.fc-key-ticks b{font-size:11px}
  .fc-map-cred,.fc-map-cred a{font-size:11px}
}


/* See WHAT A FINGER CAN ACTUALLY HIT at the foot of magik.css. A map is
   the one place where missing the button does something rather than
   nothing: the press lands on the chart and pans it instead. */
@media (hover:none) and (pointer:coarse){
  .fc-zbtn{width:44px; height:44px}
  .fc-mode{min-height:44px}
  .fc-daybtn{min-height:44px}
}