/* tools/flying-conditions/css/flying-conditions.css
   Flying Conditions — Skyout Paragliding

   Direction: "the season board."
   Third tool on tools.skyoutpg.com, so it takes the same tokens, the same warm
   field page and the same dark navy slab as the other two. What changes is the
   slab's job. MacCready's slab is an instrument you read in flight;
   Flight Analysis's slab is a figure you read after landing. This one is the
   only slab in the family you *press*: twelve bars, one per month of the year,
   drawn against a dashed three-season mean — the seasonal profile of the Valle
   del Cauca, and the month picker, as one object. Site and year controls and
   the live record count are stamped underneath on the same board.

   So the page reads dark → light: the board is the question you're asking, and
   everything below it is the answer, printed on the warm page. That inversion
   is the point — in the two sibling tools the dark object is the output.

   The family's recurring device shows up here too: Flight Analysis draws a
   dashed baseline for "the thing you're judged against", and so does the board.
   A month is only interesting relative to the mean of all of them.
*/

/* ── Tokens (shared with mccready.css and flight-analysis.css — keep the three
      in step) ────────────────────────────────────────────── */

:root {
  --color-primary:      #1D3557;
  --color-primary-dark: #0F2035;
  --color-accent:       #C8521A;
  --color-accent-light: #E8784A;
  /* Same clay, darkened for small text on light backgrounds. */
  --color-accent-ink:   #A8420F;
  --color-sky:          #3D8FCE;
  --color-sky-light:    #88C4E4;
  --color-bg:           #F4F1EB;
  --color-bg-alt:       #EAE6DE;
  --color-surface:      #FFFFFF;
  --color-text:         #1A1614;
  --color-text-muted:   #6E6259;
  --color-border:       #DDD8D0;
  --color-border-dark:  #C4BDB3;

  --font-heading: 'Fraunces', Georgia, serif;
  --font-body:    'Epilogue', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* Site pigments. Aliases rather than fresh hexes: the two sites are the only
     two series on this page, so they are simply the palette's clay and sky and
     stay in step with it automatically. .fc-board and .fc-tooltip re-bind these
     to the light variants for the navy ground, the same way mccready.css
     re-binds --color-sky inside its slab. */
  --fc-piede:  var(--color-accent);
  --fc-roldan: var(--color-sky);

  /* Board geometry. --fc-mean is the three-season mean as a percentage of the
     tallest month; flying-conditions.js writes the real number onto .fc-months
     once the data is in, and every bar column draws the dashed rule at that
     height off this one value. */
  --fc-bar-h: 104px;
  --fc-mean: 0;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-accent-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 82, 26, 0.35);
  padding-bottom: 1px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
a:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On the navy board the clay outline is only 2.7:1 against the slab — the
   controls there get a white ring instead so keyboard focus stays findable. */
.fc-board :focus-visible { outline-color: #FFFFFF; }

/* ── Shell ──────────────────────────────────────────────── */

.fc-app {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem) 5rem;
}

/* ── Masthead ───────────────────────────────────────────── */

.fc-masthead {
  max-width: 44rem;
  border-bottom: 1px solid var(--color-border-dark);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.tool-nav-back {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: none;
  margin-bottom: 1rem;
}
.tool-nav-back:hover { color: var(--color-accent-ink, var(--color-accent)); }

.fc-eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

.fc-masthead h1 {
  margin: 0 0 1.25rem;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 7vw, 4.25rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--color-primary-dark);
}
.fc-masthead h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent);
}

.fc-deck {
  margin: 0;
  max-width: 38rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--color-text-muted);
}

/* ── Stamped panel labels ───────────────────────────────── */

.fc-panel-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* The qualifier — "· by best flight" — is part of the same stamp, set lighter
   so the panel's name still reads first. */
.fc-panel-label span { font-weight: 400; }

/* ── Loading ────────────────────────────────────────────── */

.fc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.fc-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border-dark);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: fcSpin 0.7s linear infinite;
}
@keyframes fcSpin { to { transform: rotate(360deg); } }

.fc-loading--failed { color: var(--color-accent-ink); }

/* ── Signature: the season board ────────────────────────── */

.fc-board {
  /* Alphas are floors set by contrast, not taste: over #0F2035 these composite
     to ~7.6:1 (dim) and ~5.0:1 (faint), so even the 9px mono month labels clear
     WCAG AA for normal-weight body text. */
  --panel-ink:   #FFFFFF;
  --panel-dim:   rgba(255, 255, 255, 0.68);
  --panel-faint: rgba(255, 255, 255, 0.50);
  --panel-line:  rgba(255, 255, 255, 0.13);
  /* Clay and sky both go muddy on the navy — the board flies the light
     variants, the same pigments read back as clay and sky on the white panels
     below. */
  --fc-piede:  var(--color-accent-light);
  --fc-roldan: var(--color-sky-light);

  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--color-primary-dark);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--panel-ink);
}

.fc-board .fc-panel-label { color: var(--panel-faint); }

.fc-board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1rem;
}

/* Names the dashed rule drawn across the bars, and gives its value. */
.fc-board__mean {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--panel-dim);
}
.fc-board__mean::before {
  content: '';
  flex: none;
  width: 22px;
  height: 0;
  border-top: 1px dashed var(--panel-dim);
}

.fc-board__caption {
  margin: 0.75rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--panel-faint);
}

/* The twelve columns. Bars are the buttons — there is no separate picker. */
.fc-months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}

.fc-month-btn {
  display: block;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.fc-month-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.3);
}
.fc-month-btn[aria-pressed="true"] {
  background: rgba(232, 120, 74, 0.16);
  border-color: var(--color-accent-light);
}

.fc-month-bar-wrap {
  position: relative;
  height: var(--fc-bar-h);
  padding: 0 18%;
  display: flex;
  align-items: flex-end;
}

/* The three-season mean, drawn once per column off the single --fc-mean value
   so every bar is compared to it in place. The 4px grid gaps break the rule
   into twelve segments, which is the honest reading anyway. */
.fc-month-bar-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--fc-mean) * 1%);
  border-top: 1px dashed var(--panel-dim);
}

.fc-month-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 1px 1px 0 0;
  background: var(--color-sky-light);
  transition: background-color 0.15s ease;
}
.fc-month-btn[aria-pressed="true"] .fc-month-bar { background: var(--color-accent-light); }

.fc-month-name {
  display: block;
  padding: 0.4rem 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--panel-faint);
  transition: color 0.15s ease;
}
.fc-month-btn:hover .fc-month-name,
.fc-month-btn[aria-pressed="true"] .fc-month-name { color: var(--panel-ink); }

/* ── Board controls ─────────────────────────────────────── */

.fc-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--panel-line);
}

.fc-control {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.fc-filter-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--panel-faint);
  white-space: nowrap;
}

.fc-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-md);
}

.fc-toggle-btn {
  padding: 0.4rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--panel-dim);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.fc-toggle-btn:hover { color: var(--panel-ink); background: rgba(255, 255, 255, 0.08); }

/* The selected site is marked by a neutral fill, not a clay or sky one: white
   label on solid --color-accent is 4.49:1 and on --color-sky only 3.4:1, so
   neither pigment can carry the label. The pigment goes in the dot instead,
   which is where it has to be anyway — the dot is what ties each site to its
   line on the chart below. */
.fc-toggle-btn[aria-pressed="true"] {
  color: var(--panel-ink);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.16);
}

.fc-toggle-btn[data-loc="piedechinche"]::before,
.fc-toggle-btn[data-loc="roldanillo"]::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.55em;
  border-radius: 50%;
  vertical-align: 1px;
}
.fc-toggle-btn[data-loc="piedechinche"]::before { background: var(--fc-piede); }
.fc-toggle-btn[data-loc="roldanillo"]::before   { background: var(--fc-roldan); }

.fc-filter-summary {
  margin: 0 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--panel-faint);
  /* Was nowrap; on narrow phones the live-region string (e.g. "130 flights ·
     13 weeks · Jan · all years · Piedechinche") is wider than the viewport,
     which forced the whole board (and page) to scroll horizontally. This is
     an aria-live region carrying real filter feedback, so letting it wrap
     keeps it legible instead of hiding it (the pre-redesign fix). */
  text-align: right;
}

/* ── The answers, on paper ──────────────────────────────── */

.fc-content {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* Hairlines are drawn as rings on the tiles rather than as a gap over a dark
   container, so a short last row reads as blank panel, not a grey slab.
   Three columns, not auto-fit: flying-conditions.js always renders exactly four
   tiles and the first one spans the full width, so the three that remain want a
   row of their own — auto-fit fits four and leaves a dead cell on the end. */
.fc-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.fc-stat-card {
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
  padding: 1rem 1.25rem 1.15rem;
  min-width: 0;
}

.fc-stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.fc-stat-value {
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-primary-dark);
}
.fc-stat-value span {
  margin-left: 0.15em;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.fc-stat-sub {
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The typical day is the number this page exists to give — a pilot picking a
   month wants the average, not the ceiling. flying-conditions.js always renders
   it first, so it gets the readout treatment the sibling tools give theirs. */
.fc-stat-card:first-child {
  grid-column: 1 / -1;
  padding: 1.35rem 1.25rem 1.5rem;
}
.fc-stat-card:first-child .fc-stat-value {
  margin-top: 0.5rem;
  font-size: clamp(2.75rem, 9vw, 4rem);
  color: var(--color-accent);
}
.fc-stat-card:first-child .fc-stat-value span { font-size: 0.875rem; }

/* ── Panels ─────────────────────────────────────────────── */

.fc-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  min-width: 0;
}

.fc-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin-bottom: 1.25rem;
}

.fc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fc-legend__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Same variables flying-conditions.js strokes the two series with, so the key
   cannot drift from the lines. */
.fc-legend__item::before {
  content: '';
  flex: none;
  width: 22px;
  height: 0;
}
.fc-legend__item--p::before { border-top: 2px solid var(--fc-piede); }
.fc-legend__item--r::before { border-top: 2px solid var(--fc-roldan); }

/* ── Weekly trend ───────────────────────────────────────── */

.fc-chart-svg-wrap {
  position: relative;
  width: 100%;
}

.fc-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* The board's material, borrowed for the readout that follows the cursor. */
.fc-tooltip {
  --fc-piede:  var(--color-accent-light);
  --fc-roldan: var(--color-sky-light);

  position: absolute;
  top: 0.5rem;
  z-index: 10;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  white-space: pre;
  color: rgba(255, 255, 255, 0.82);
  background: var(--color-primary-dark);
  border-radius: var(--radius-md);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.12s ease;
}
.fc-tooltip.visible { opacity: 1; }

.fc-tooltip strong {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.fc-tooltip__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.5em;
  border-radius: 50%;
  vertical-align: 1px;
}
.fc-tooltip__dot--p { background: var(--fc-piede); }
.fc-tooltip__dot--r { background: var(--fc-roldan); }

/* ── Pilots and flights ─────────────────────────────────── */

/* Two eight-row tables, but the flights table carries a date under each name and
   so always runs taller. Start-aligned rather than stretched — a panel padded
   out with blank paper to match its neighbour reads as missing rows. */
.fc-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.fc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.fc-table th {
  padding: 0 0.5rem 0.55rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: right;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-dark);
}
.fc-table th:first-child { text-align: left; padding-left: 0; }
.fc-table th:last-child  { padding-right: 0; }

.fc-table td {
  padding: 0.55rem 0.5rem;
  font-size: 0.875rem;
  text-align: right;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.fc-table td:first-child { text-align: left; padding-left: 0; }
.fc-table td:last-child  { padding-right: 0; }
.fc-table tbody tr:last-child td { border-bottom: 0; }
.fc-table tbody tr:hover td { background: var(--color-bg-alt); }

/* Ranks are already sorted, so only the leader is marked — a full medal ramp
   would be colour spent on information the order already carries. */
.fc-rank {
  display: inline-block;
  width: 1.5em;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}
.fc-rank--lead { font-weight: 700; color: var(--color-accent-ink); }

.fc-pilot-name {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.fc-km { font-weight: 500; color: var(--color-primary-dark); }

.fc-flight-date {
  display: block;
  padding-left: 1.5em;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* Sites are shown as codes, the way a pilot writes them in a logbook. */
.fc-site {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.fc-location-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.45em;
  border-radius: 50%;
  vertical-align: 1px;
}
.fc-location-dot--p { background: var(--fc-piede); }
.fc-location-dot--r { background: var(--fc-roldan); }

/* ── Empty states ───────────────────────────────────────── */

.fc-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}
.fc-stats .fc-empty { grid-column: 1 / -1; }

/* ── Provenance ─────────────────────────────────────────── */

.fc-notes {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--color-border-dark);
}
.fc-notes p {
  margin: 1rem 0 0;
  max-width: 44rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ── Data not in yet ────────────────────────────────────── */

#fc-app[aria-busy="true"] .fc-board,
#fc-app[aria-busy="true"] .fc-content {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Narrow screens ─────────────────────────────────────── */

@media (max-width: 860px) {
  .fc-bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* Twelve columns stop being legible well before the page does; two rows of
     six keep every bar on the same scale, so the mean still reads across. */
  :root { --fc-bar-h: 76px; }
  .fc-months { grid-template-columns: repeat(6, 1fr); }
  .fc-filter-summary { margin-left: 0; }
  /* Three tiles across a phone would set the readouts in 140px columns and
     ellipsis every sub-line. One per row instead. */
  .fc-stats { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .fc-filter-row { align-items: flex-start; }
  .fc-control { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
  .fc-spinner { animation-duration: 2s; }
}