/* Harbour conditions: readings from the club's observations Worker, drawn
   by /assets/js/harbour-conditions.js. Its own file because site.css sits
   at its weight budget; linked from the page's front matter and nowhere
   else. Phone first: the page is read on the pontoon and on the water. */
.obs h2 { margin: 2rem 0 .3rem; }
.obs-note { margin: 0; color: var(--slate); font-size: .95rem; max-width: 46rem; }
.obs-latest { margin: .75rem 0 0; font-size: .95rem; color: var(--slate); }
.obs-latest time { font-weight: 600; color: var(--ink, inherit); }
.obs-status { margin: .5rem 0 0; font-size: .95rem; color: var(--slate); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.obs-refresh { background: var(--card); color: var(--navy-2); border: 1px solid var(--navy-2); border-radius: 2px; font: inherit; font-size: .9rem; font-weight: 600; padding: .35rem .8rem; cursor: pointer; }
.obs-refresh:hover { background: var(--canvas); }
.obs-refresh[hidden] { display: none; }
.obs-unavailable { margin-top: 1rem; }
.obs-swatch { display: inline-block; width: 1.1rem; height: 0; border-top: 3px solid var(--navy-2); vertical-align: middle; margin: 0 .25rem 0 .15rem; }
.obs-swatch-gust { border-top: 2px solid var(--brass); }

/* The race-day line: on a race day, the start set against the forecast,
   the tide, the current and the sunset, at the head of the page. A card in
   the readings' style with the race's name as the link to its page, and
   the figures in bold so the eye finds them on the pontoon. Hidden until
   the script has a race on. */
.race-day { margin: .8rem 0 0; background: var(--card); border: 1px solid var(--canvas-2); border-left: 4px solid var(--emblem); padding: .6rem .9rem; font-size: 1rem; line-height: 1.5; max-width: 46rem; font-variant-numeric: tabular-nums; }
.race-day[hidden] { display: none; }
.race-day strong { color: var(--navy); }
.race-day-name { font-weight: 700; }
.race-day-note { display: block; margin-top: .25rem; font-size: .82rem; color: var(--slate); }

/* Cards: one column on a phone, more as the width allows */
.obs-grid { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.obs-card { background: var(--card); border: 1px solid var(--canvas-2); border-top: 3px solid var(--emblem); padding: .7rem .9rem .5rem; min-width: 0; }
.obs-card h3 { margin: 0; font-size: 1.05rem; }
.obs-where { margin: 0; font-size: .8rem; color: var(--slate); }
.obs-body { margin-top: .35rem; }
.obs-hero { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .35rem; }
/* Every figure a sailor must read sets in the sans, tabular, so 11 and 1.1 line up */
.obs-value { font-size: 2.2rem; font-weight: 700; line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; }
.obs-unit { font-size: 1rem; color: var(--slate); }
.obs-dir { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: 1rem; color: var(--slate); white-space: nowrap; font-variant-numeric: tabular-nums; }
.obs-arrow { width: 1.4rem; height: 1.4rem; fill: var(--navy-2); flex: none; }
.obs-meta { margin: .1rem 0 0; font-size: .9rem; color: var(--slate); }
.obs-trend { margin: .2rem 0 .3rem; font-size: .9rem; }
/* A reading over half an hour old is late, over an hour and a half stale.
   Brass, not red: red is for action, and a late reading is a warning. */
.obs-card.is-late .obs-meta, .obs-card.is-stale .obs-meta { color: var(--brass-ink); }
.obs-card.is-stale { border-top-color: var(--brass); }
.obs-card.is-waiting .obs-meta, .obs-card.is-missing .obs-meta { font-style: italic; }

/* The line: six hours of wind, twelve of tide, drawn as inline SVG */
.obs-spark { display: block; width: 100%; height: auto; overflow: visible; margin-top: .2rem; }
.obs-spark text { font-size: 10px; fill: var(--slate); font-family: var(--sans); }
.obs-spark-grid { stroke: var(--canvas-2); stroke-width: 1; }
.obs-spark path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.obs-line-mean { stroke: var(--navy-2); stroke-width: 2; }
.obs-line-gust { stroke: var(--brass); stroke-width: 1.5; }
.obs-spark-end { fill: var(--navy-2); stroke: var(--card); stroke-width: 2; }
.obs-spark-dir { stroke: var(--navy-2); stroke-width: 1.4; }
.obs-source { font-size: .95rem; color: var(--slate); }
/* The barometer's line runs on past now: the forecast dashed, and a dotted
   rule where now is */
.obs-line-forecast { stroke: var(--navy-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.obs-spark-now { stroke: var(--slate); stroke-width: 1; stroke-dasharray: 2 2; }

/* Station maps: the course maps' land and water with a mark per station,
   and the wind drawn in by the script as a wedge flying with it, shaded by
   the step of the scale its ten minute mean falls in and lengthened with
   it. The scale is the one wind maps share, calm blue-grey through green,
   amber and orange to red and maroon: six steps a phone in sunlight tells
   apart, each checked against its neighbours under colour-blindness
   simulation, with a white edge to lift every wedge off the water and the
   figures written beside it. */
.obs-map { margin: .6rem 0 0; max-width: 34rem; }
.obs-map-coast { max-width: 22rem; }
.obs-map-west { max-width: 30rem; }
.obs-map-north { max-width: 22rem; }
.map-obs-north .map-water { stroke: none; }
.obs-map figcaption { font-size: .82rem; color: var(--slate); margin-top: .35rem; }
.obs-map-key { margin: .6rem 0 .8rem; }
.map-obs-coast .map-water, .map-obs-west .map-water { stroke: none; }
/* The west map's rivers: lines in the shore's blue, since their water is
   thinner than a pixel at that scale */
.map-river { fill: none; stroke: var(--map-shore); stroke-linejoin: round; stroke-linecap: round; }
.st-dot { fill: #FFF; stroke: var(--navy-2); }
.st-point { fill: var(--card); stroke: var(--slate); }
.st-club rect { fill: var(--navy); stroke: #FFF; }
.lbl-club { fill: var(--navy); }
.st-wedge { stroke: #FFF; stroke-width: 1.5px; }
.st.is-late .st-wedge { fill-opacity: .6; }
.st.is-stale .st-wedge { fill-opacity: .35; }
.st-band-0, .obs-band-0 { fill: #7FA1BD; background: #7FA1BD; }
.st-band-1, .obs-band-1 { fill: #1F8A4C; background: #1F8A4C; }
.st-band-2, .obs-band-2 { fill: #E0B020; background: #E0B020; }
.st-band-3, .obs-band-3 { fill: #E0661A; background: #E0661A; }
.st-band-4, .obs-band-4 { fill: #B01B26; background: #B01B26; }
.st-band-5, .obs-band-5 { fill: #4A0D33; background: #4A0D33; }
.obs-band { display: inline-block; width: 1.25rem; height: .85rem; border: 1px solid #FFF; box-shadow: 0 0 0 1px var(--canvas-2); border-radius: 1px; }
/* The current: an outlined arrow with a white halo, the way it sets */
.st-current { fill: none; stroke: var(--navy-2); stroke-linecap: round; stroke-linejoin: round; }
.st-current-halo { fill: none; stroke: #FFF; stroke-linecap: round; stroke-linejoin: round; }
/* The sea at the Heads: the same arrow with two heads, in brass */
.st-sea { fill: none; stroke: var(--brass-ink); stroke-linecap: round; stroke-linejoin: round; }
.st.is-late .st-current, .st.is-stale .st-current, .st.is-late .st-sea, .st.is-stale .st-sea { stroke-opacity: .5; }
/* With the wind or the current drawn, a name moves beside its wedge or arrow */
.lbl.is-replaced { display: none; }
.lbl-wind-value { font-weight: 600; }

@media (max-width: 350px) {
  .obs-value { font-size: 2rem; }
  .obs-dir { font-size: .95rem; }
}
@media print {
  .obs-refresh { display: none; }
  .obs-card { break-inside: avoid; }
}

/* The forecast: twelve hours of wind under the harbour cards, a table that
   scrolls sideways on a phone with its row labels held at the left. Hidden
   until the script has a forecast to show. */
.fc { margin-top: 1rem; }
.fc[hidden] { display: none; }
.fc-title { margin: 0; font-size: 1.05rem; }
.fc-sub { display: block; font-family: var(--sans); font-weight: 400; font-size: .85rem; letter-spacing: 0; color: var(--slate); }
.fc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: .4rem; background: var(--card); border: 1px solid var(--canvas-2); border-top: 3px solid var(--emblem); }
.fc-scroll:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.fc-table { border-collapse: collapse; min-width: 100%; font-variant-numeric: tabular-nums; }
.fc-table th, .fc-table td { padding: .3rem .2rem; text-align: center; white-space: nowrap; min-width: 2.5rem; border-bottom: 1px solid var(--canvas-2); font-size: .95rem; vertical-align: middle; }
.fc-table tr:last-child td, .fc-table tr:last-child th { border-bottom: 0; }
/* Row labels read as words, not as the site's small-cap column headers */
.fc-label { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--slate); padding-left: .6rem; padding-right: .5rem; box-shadow: 1px 0 0 var(--canvas-2); }
.fc-hour { font-weight: 600; letter-spacing: 0; color: var(--navy); }
.fc-day { display: block; font-size: .7rem; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: .03em; }
.fc-mean { font-weight: 700; color: var(--navy); }
.fc-gust { color: var(--brass-ink); }
.fc-from { display: inline-flex; flex-direction: column; align-items: center; font-size: .75rem; color: var(--slate); line-height: 1.2; }
.fc-from .obs-arrow { width: 1.1rem; height: 1.1rem; }
.fc-credit { margin: .4rem 0 0; font-size: .85rem; color: var(--slate); max-width: 46rem; }
/* Forecasts from elsewhere: a click-to-load map in a box, and a link.
   The frame is about 600 px tall on a desk and most of the screen on a phone. */
.pw { background: var(--card); border: 1px solid var(--canvas-2); border-top: 3px solid var(--emblem); padding: .7rem .9rem .6rem; margin-top: 1rem; }
.pw-text { margin: .3rem 0 0; font-size: .95rem; color: var(--slate); max-width: 46rem; }
.pw-actions { margin: .6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; font-size: .95rem; }
.pw-frame[hidden] { display: none; }
.pw-frame { margin-top: .6rem; }
.pw-frame iframe { display: block; width: 100%; height: 600px; border: 1px solid var(--canvas-2); background: var(--canvas); }
.pw .fc-credit { margin-top: .5rem; }
@media (max-width: 700px) {
  .pw-frame iframe { height: 70vh; }
}
@media print {
  .fc-scroll { overflow: visible; }
  .pw-load, .pw-frame { display: none; }
}

/* The rain radar: RainViewer's frames laid on the club's map when asked
   for, with the loop's controls over it and the scale under it. A frame is
   an image in the map's own units; only the one shown has any opacity. The
   places that orient the map are quiet marks, named in the slate. */
.radar-view[hidden], .radar-status[hidden] { display: none; }
.radar-view { margin-top: .6rem; }
.radar-status { margin-top: .5rem; }
.obs-map-radar { max-width: 30rem; margin-top: .5rem; }
.radar-frame { opacity: 0; }
.radar-frame.is-shown { opacity: .9; }
.radar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; max-width: 30rem; }
.radar-btn { min-width: 3.6rem; height: 2.2rem; padding: 0 .6rem; }
.radar-range { flex: 1 1 100%; min-width: 0; margin: 0; accent-color: var(--navy-2); }
.radar-time { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.radar-time strong { font-size: 1.15rem; color: var(--navy); }
.radar-ago { color: var(--slate); font-size: .9rem; white-space: nowrap; }
.radar-view.is-late .radar-ago, .radar-view.is-stale .radar-ago { color: var(--brass-ink); }
.radar-key { margin: .5rem 0 0; font-size: .82rem; color: var(--slate); max-width: 30rem; }
.radar-key-strip { display: flex; gap: 2px; max-width: 20rem; }
.radar-key-strip span { flex: 1 1 0; height: .85rem; border: 1px solid #FFF; box-shadow: 0 0 0 1px var(--canvas-2); border-radius: 1px; }
.radar-key-words { display: block; margin-top: .25rem; }
.lbl-place { font-weight: 600; fill: var(--slate); }
.st-place .st-point { fill: var(--slate); stroke: #FFF; }
@media (max-width: 350px) {
  .radar-time { margin-left: 0; flex: 1 1 100%; }
}
@media print {
  .radar-controls, .radar-status { display: none; }
}