/* Windsock.
 *
 * The design brief is an instrument, not a brochure. A student checks this on a
 * phone in a car park with ten minutes before a lesson, so the priorities are:
 * the numbers are large and unambiguous, colour means exactly one thing, and
 * nothing decorative competes with the data.
 *
 * Colour is used for verdict and for danger only. Everything else is greyscale.
 * That is what keeps a red crosswind figure meaning something.
 *
 * System fonts throughout. No webfonts, so nothing blocks the first paint and
 * no third party sees a request.
 */

:root {
  --ws-bg: #fbfaf8;
  --ws-surface: #ffffff;
  --ws-line: #ddd8d0;
  --ws-line-soft: #ece8e2;
  --ws-ink: #1c1a17;
  --ws-ink-soft: #5d574e;
  --ws-ink-faint: #857e73;

  /* Verdict. Desaturated on purpose: these sit next to each other in a long
     list and saturated greens and reds turn it into a fruit machine. */
  --ws-good: #2f6b46;
  --ws-marginal: #97631a;
  --ws-no: #9a3324;
  --ws-unknown: #6b6459;

  --ws-danger: #9a3324;
  --ws-accent: #1c4f7c;

  --ws-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ws-sans: system-ui, -apple-system, "Segoe UI", sans-serif;

  --ws-measure: 38rem;
  --ws-radius: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ws-bg: #14130f;
    --ws-surface: #1c1a16;
    --ws-line: #35312a;
    --ws-line-soft: #27241e;
    --ws-ink: #ece7dd;
    --ws-ink-soft: #b0a89a;
    --ws-ink-faint: #837b6d;

    --ws-good: #6fbf8d;
    --ws-marginal: #d9a441;
    --ws-no: #e08472;
    --ws-unknown: #8d8578;

    --ws-danger: #e08472;
    --ws-accent: #7fb4e0;
  }
}

* { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ws-bg);
  color: var(--ws-ink);
  font-family: var(--ws-sans);
  font-size: 16px;
  line-height: 1.45;
}

a { color: var(--ws-accent); }
a:hover { text-decoration-thickness: 2px; }

/* Focus must stay obvious. This gets used one-handed on a phone in daylight. */
:focus-visible {
  outline: 2px solid var(--ws-accent);
  outline-offset: 2px;
}

.ws-sr,
.ws-skip:not(:focus) {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ws-skip:focus {
  position: static;
  display: block;
  padding: 0.6rem 1rem;
  background: var(--ws-accent);
  color: #fff;
}

/* --- frame ------------------------------------------------------------- */

.ws-head { border-bottom: 1px solid var(--ws-line); background: var(--ws-surface); }

.ws-head-in,
main,
.ws-foot {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.ws-head-in { padding-top: 0.9rem; padding-bottom: 0.9rem; }

.ws-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ws-ink);
  text-decoration: none;
}

/* A windsock, drawn in CSS rather than shipped as an asset. */
.ws-brand-mark {
  width: 0; height: 0;
  border-left: 14px solid var(--ws-danger);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.ws-tag { margin: 0.15rem 0 0; color: var(--ws-ink-faint); font-size: 0.85rem; }

/* The disclaimer is permanent and above the content, not tucked in a footer.
   People act on this page. */
.ws-warn {
  margin: 0;
  padding: 0.55rem 1rem;
  background: var(--ws-danger);
  color: #fff;
  font-size: 0.85rem;
  text-align: center;
}
.ws-warn strong { font-weight: 700; }

main { padding-top: 1.5rem; padding-bottom: 3rem; }

.ws-foot {
  border-top: 1px solid var(--ws-line);
  padding-top: 1.2rem;
  padding-bottom: 2.5rem;
  color: var(--ws-ink-faint);
  font-size: 0.82rem;
}
.ws-foot p { max-width: var(--ws-measure); }

.ws-stale {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ws-danger);
  border-left-width: 4px;
  border-radius: var(--ws-radius);
  background: var(--ws-surface);
  color: var(--ws-ink);
}

/* --- limits form -------------------------------------------------------- */

.ws-controls { margin-bottom: 1.5rem; }
.ws-controls fieldset {
  margin: 0;
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius);
  background: var(--ws-surface);
  padding: 0.75rem 1rem 1rem;
}
.ws-controls legend { padding: 0 0.4rem; font-weight: 650; font-size: 0.9rem; }
.ws-controls-why {
  margin: 0 0 0.75rem;
  max-width: var(--ws-measure);
  color: var(--ws-ink-faint);
  font-size: 0.82rem;
}

.ws-fields { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.ws-fields label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; }
.ws-fields label > span:first-child { color: var(--ws-ink-soft); }
.ws-fields input {
  width: 5.5rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius);
  background: var(--ws-bg);
  color: var(--ws-ink);
  font: 600 1rem/1.2 var(--ws-mono);
}
.ws-unit { color: var(--ws-ink-faint); font-size: 0.72rem; }
.ws-fields button {
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--ws-accent);
  border-radius: var(--ws-radius);
  background: var(--ws-accent);
  color: #fff;
  font: 600 0.9rem var(--ws-sans);
  cursor: pointer;
}

/* --- the list ----------------------------------------------------------- */

.ws-list h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  font-size: 1rem;
  font-weight: 650;
}
.ws-asof { color: var(--ws-ink-faint); font-size: 0.8rem; font-weight: 400; }

.ws-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.ws-card {
  background: var(--ws-surface);
  border: 1px solid var(--ws-line);
  /* The verdict is a left edge, not a filled panel. A wall of coloured blocks
     stops meaning anything by the fourth one. */
  border-left: 4px solid var(--ws-unknown);
  border-radius: var(--ws-radius);
  padding: 0.7rem 0.9rem 0.8rem;
}
.ws-v-good { border-left-color: var(--ws-good); }
.ws-v-marginal { border-left-color: var(--ws-marginal); }
.ws-v-no { border-left-color: var(--ws-no); }
.ws-v-unknown { border-left-color: var(--ws-unknown); }

.ws-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.ws-card h3 { margin: 0; font-size: 1rem; font-weight: 650; }
.ws-card h3 a { font: 700 1.15rem/1 var(--ws-mono); text-decoration: none; color: var(--ws-ink); }
.ws-card h3 a:hover { color: var(--ws-accent); text-decoration: underline; }
.ws-name { color: var(--ws-ink-soft); font-weight: 400; font-size: 0.85rem; }

.ws-verdict { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.ws-v-good .ws-verdict { color: var(--ws-good); }
.ws-v-marginal .ws-verdict { color: var(--ws-marginal); }
.ws-v-no .ws-verdict { color: var(--ws-no); }
.ws-v-unknown .ws-verdict { color: var(--ws-unknown); }

.ws-best {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  margin: 0.5rem 0 0.35rem;
}
.ws-rwy { font: 700 0.95rem var(--ws-mono); letter-spacing: 0.02em; }
.ws-num { font: 600 0.95rem var(--ws-mono); }
.ws-bad { color: var(--ws-danger); font-weight: 700; }

.ws-flag {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--ws-line);
  border-radius: 2px;
  color: var(--ws-ink-soft);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.ws-cond {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  margin: 0;
  color: var(--ws-ink-faint);
  font-size: 0.78rem;
}

.ws-reasons { list-style: none; margin: 0.55rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.ws-reasons li { font-size: 0.82rem; padding-left: 0.85rem; position: relative; }
.ws-reasons li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ws-ink-faint);
}
.ws-r-gate { color: var(--ws-ink); font-weight: 600; }
.ws-r-gate::before { background: var(--ws-no) !important; }
.ws-r-penalty::before { background: var(--ws-marginal) !important; }
.ws-r-note { color: var(--ws-ink-soft); }
.ws-r-more::before { display: none; }
.ws-r-more { padding-left: 0; font-size: 0.78rem; }
.ws-detail { color: var(--ws-ink-faint); font-weight: 400; }
.ws-muted { color: var(--ws-ink-faint); }

/* --- airport page ------------------------------------------------------- */

.ws-back { margin-bottom: 1rem; font-size: 0.85rem; }

.ws-detail-page {
  border-left: 4px solid var(--ws-unknown);
  padding-left: 1rem;
}
.ws-detail-head h1 { margin: 0; font-size: 1.5rem; }
.ws-detail-head h1 { font-family: var(--ws-mono); }
.ws-detail-head .ws-name { font-family: var(--ws-sans); font-size: 1rem; }
.ws-sub { margin: 0.2rem 0 1.25rem; color: var(--ws-ink-faint); font-size: 0.85rem; }

.ws-detail-page h2 {
  margin: 1.75rem 0 0.6rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ws-ink-faint);
  font-weight: 700;
}

.ws-gates {
  border: 1px solid var(--ws-no);
  border-radius: var(--ws-radius);
  padding: 0.5rem 1rem 0.9rem;
  background: var(--ws-surface);
}
.ws-gates h2 { margin-top: 0.6rem; color: var(--ws-no); }
.ws-gates ul { margin: 0; padding-left: 1.1rem; }

.ws-metar {
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius);
  background: var(--ws-surface);
  font: 0.85rem/1.5 var(--ws-mono);
  white-space: pre-wrap;
  word-break: break-word;
}

.ws-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin: 0; }
.ws-facts dt { color: var(--ws-ink-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ws-facts dd { margin: 0.1rem 0 0; font: 600 0.95rem var(--ws-mono); }

/* Wide content scrolls inside its own box; the page body never does. */
.ws-scroll { overflow-x: auto; }
.ws-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ws-table th, .ws-table td { padding: 0.45rem 0.6rem; text-align: left; border-bottom: 1px solid var(--ws-line-soft); }
.ws-table thead th {
  border-bottom: 1px solid var(--ws-line);
  color: var(--ws-ink-faint);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ws-table tbody th { font-family: var(--ws-mono); font-weight: 700; white-space: nowrap; }
.ws-table td { font-family: var(--ws-mono); }
.ws-table .ws-detail { display: block; font-size: 0.72rem; font-family: var(--ws-sans); }
.ws-is-best { background: color-mix(in srgb, var(--ws-good) 8%, transparent); }

.ws-raw { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.ws-raw li {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius);
  background: var(--ws-surface);
  font: 0.8rem/1.5 var(--ws-mono);
  word-break: break-word;
}
.ws-n-critical { border-left: 3px solid var(--ws-no); }
.ws-n-relevant { border-left: 3px solid var(--ws-marginal); }

details summary { cursor: pointer; margin: 0.7rem 0; font-size: 0.85rem; color: var(--ws-ink-soft); }

.ws-note {
  margin: 0.9rem 0 0;
  max-width: var(--ws-measure);
  color: var(--ws-ink-soft);
  font-size: 0.85rem;
}

/* --- prose -------------------------------------------------------------- */

.ws-prose { max-width: var(--ws-measure); }
.ws-prose h1 { font-size: 1.5rem; margin: 0 0 1rem; }
.ws-prose h2 { font-size: 1rem; margin: 2rem 0 0.5rem; }
.ws-prose p { margin: 0 0 0.9rem; }

/* --- map ---------------------------------------------------------------- */

.ws-map {
  /* Tall enough that fitting Santa Rosa to Monterey does not zoom the Bay down
     to a smudge: the airports span about 130 nm north to south, so a short wide
     box fits on latitude and wastes the width. */
  height: 30rem;
  margin: 0 0 1.5rem;
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius);
  background: var(--ws-surface);
  overflow: hidden;
}
.ws-map:empty::after {
  content: "Map needs JavaScript. Everything it shows is in the list below.";
  display: grid;
  place-items: center;
  height: 100%;
  padding: 1rem;
  color: var(--ws-ink-faint);
  font-size: 0.85rem;
  text-align: center;
}

@media (max-width: 34rem) {
  .ws-card-head { flex-direction: column; gap: 0.1rem; }
  .ws-fields input { width: 4.5rem; }
  .ws-detail-page { padding-left: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}