/* Station cards and their parts (hero, tiles, legends, charts, tables), the
   embedded-site pages, and the footer. */

/* One column, always. Two-up halved each chart's width, and chart width is
   exactly what makes a wind trace readable. */
.cards { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
/* One per station, kept for the life of the page so a repaint replaces the
   contents of a slot rather than the whole list — see render.js */
.card-slot { min-width: 0; }

/* ---------- focus mode ----------------------------------------------------
   One station on its own, edge to edge. The others are hidden rather than
   removed, so their slots survive and coming back costs no rebuild. The
   width cap and the page padding both come off — the point of expanding is
   the widest possible trace. */
body.is-focused .inner { max-width: none; }
body.is-focused #page-wind .scroller { padding: 12px 12px 24px; }
body.is-focused .card-slot.is-focus .card { border-radius: 10px; }
.cards.focused .card-slot { display: none; }
.cards.focused .card-slot.is-focus { display: block; }
.cards.focused .card-slot.is-focus .hero .num { font-size: 3.4rem; }
.cards.focused .card-slot.is-focus .hero .verdict { font-size: 1.5rem; }
.cards.focused .card-slot.is-focus .tile .t-val { font-size: 1.6rem; }
.cards.focused .card-slot.is-focus .table-scroll { max-height: none; }
/* The wide two-column arrangement is for wide screens ONLY. Left unscoped it
   beat the narrow-screen rule below on specificity, forcing a 330px column onto
   a phone and pushing the chart off the right of the screen. */
@media (min-width: 861px) {
  .cards.focused .card-slot.is-focus .card-body { grid-template-columns: 330px 1fr; }
  .cards.focused .card-slot.is-focus svg.compass { width: 320px; }
}
.btn-focus { white-space: nowrap; }
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 11px; overflow: hidden;
}
.card.stale { opacity: 0.72; }
.card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--panel-alt); border-bottom: 1px solid var(--border);
}
.card-head h2 { font-size: 1.18rem; margin: 0; font-weight: 650; letter-spacing: -0.015em; }
/* Rewritten every second ("just now" → "11s ago" → "3 min ago"). In a wrapping
   head a change of width can change where the row breaks and shunt the card's
   height, so the box is reserved and the text never wraps. */
.card-head .age {
  font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums;
  min-width: 9ch; white-space: nowrap; flex: none;
}
.card-head .spacer { flex: 1; }
.card-head a.src { color: var(--muted); text-decoration: none; font-size: 0.8rem; }
.card-head a.src:hover { color: var(--accent); text-decoration: underline; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.82rem; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  border: 1px solid currentColor;
}
.chip .ic { font-size: 0.86rem; line-height: 1; }
.card-body { padding: 16px; display: grid; grid-template-columns: 250px 1fr; gap: 20px; }
/* A phone held sideways is ~740–930px wide but only ~380 tall, so stacking the
   compass above the chart there spends the dimension that is actually scarce.
   Side by side down to 700px; single column below that, which is a phone in
   portrait, where width is the scarce one instead. */
@media (max-width: 900px) { .card-body { grid-template-columns: 190px 1fr; gap: 14px; padding: 13px; } }
@media (max-width: 700px) { .card-body { grid-template-columns: 1fr; padding: 12px; } }

/* Short viewport: give the vertical space to the chart, not to the readout */
@media (max-height: 560px) {
  .card-head { padding: 7px 12px; gap: 8px; }
  .card-head h2 { font-size: 1rem; }
  .card-body { padding: 11px; gap: 12px; }
  svg.compass { width: 150px; }
  .hero .num { font-size: 1.8rem; }
  .hero .num-alt { font-size: 0.95rem; }
  .hero .verdict { font-size: 1.02rem; }
  .hero .cap { font-size: 0.74rem; margin-top: 2px; }
  .tiles { gap: 7px; margin-bottom: 9px; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
  .tile { padding: 6px 9px; }
  .tile .t-val { font-size: 1.1rem; }
  .tile .t-alt { font-size: 0.76rem; }
  .meta-line { margin-top: 7px; font-size: 0.75rem; }
  .cards { gap: 12px; }
}
/* Both columns must be allowed to shrink. A grid item defaults to min-width
   auto, which refuses to go below its content — and an SVG's content is its
   intrinsic width, so without this the chart pushes the card wider than the
   screen instead of scaling down inside it. */
.left-col { display: flex; flex-direction: column; gap: 10px; align-items: center; min-width: 0; }
.right-col { min-width: 0; }

/* The verdict leads and the speed supports it. The number is set in ink, not in
   the status colour — the chip above carries the state, and coloured display
   text is the least reliable way to encode it in two themes. */
.hero { text-align: center; }
.hero .verdict {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2;
}
.hero .verdict .v-ic { font-size: 1.05rem; }
.hero .num {
  font-size: 2.6rem; font-weight: 600; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--text); margin-top: 4px;
}
.hero .unit { font-size: 0.95rem; color: var(--muted); margin-left: 4px; font-weight: 400; }
.hero .num-alt { font-size: 1.15rem; color: var(--text-dim); font-weight: 550; margin-top: 1px; }
.hero .cap { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }
.cards.focused .card-slot.is-focus .hero .num-alt { font-size: 1.5rem; }
svg.compass { width: 240px; max-width: 100%; height: auto; }
/* The needle swings to whatever moment the pointer is over on either chart.
   The easing is what makes it read as a dial settling rather than a value
   being replaced — but it is motion, so it goes when motion is unwelcome. */
svg.compass .needle { transition: transform .22s cubic-bezier(.22,.68,.36,1); }
@media (prefers-reduced-motion: reduce) { svg.compass .needle { transition: none; } }
.hero .dir-cap i { font-style: normal; color: var(--muted); }
/* The trace takes the gesture so a drag can inspect it; the strip should not,
   or a phone can't scroll past it. */
.strip-wrap, .strip-wrap svg.chart { touch-action: pan-y; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 9px; margin-bottom: 14px; }
.tile { background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; }
.tile .t-lab { font-size: 0.73rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
/* Proportional figures: these are standalone values, not a column, and tabular
   digits make a number like 12 sit loose at this size. */
.tile .t-val { font-size: 1.35rem; font-weight: 600; margin-top: 3px; }
.tile .t-val small { font-size: 0.76rem; color: var(--muted); font-weight: 400; margin-left: 3px; }
.tile .t-alt { font-size: 0.85rem; color: var(--muted); margin-top: 1px; }

/* Station housekeeping — real, but not what you are deciding on */
.meta-line {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px;
  font-size: 0.8rem; color: var(--text-dim);
}
.meta-line i { font-style: normal; color: var(--muted); margin-right: 5px; }

.chart-wrap { position: relative; }
svg.chart { width: 100%; height: auto; display: block; touch-action: none; }
.tooltip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: var(--tooltip-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; font-size: 0.85rem; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 6px 20px var(--shadow); z-index: 5;
}
.tooltip .tt-t { color: var(--muted); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.tooltip .tt-r { display: flex; align-items: center; gap: 6px; }
.tooltip .tt-r b { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: auto; padding-left: 14px; }
.tooltip .sw { width: 12px; height: 4px; border-radius: 2px; }

table.data { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--grid); }
table.data th { color: var(--muted); font-weight: 500; text-align: right; position: sticky; top: 0; background: var(--panel); }
table.data th:first-child, table.data td:first-child { text-align: left; }
.table-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }

.empty { color: var(--muted); font-size: 0.92rem; padding: 30px 10px; text-align: center; }

.embed-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 24px; background: var(--panel); border-bottom: 1px solid var(--border); flex: none;
}
.embed-bar h2 { margin: 0; font-size: 1.05rem; font-weight: 650; }
.embed-bar .note { font-size: 0.82rem; color: var(--muted); }
.embed-bar .spacer { flex: 1; }
.embed-bar a.ext {
  color: var(--accent); text-decoration: none; font-size: 0.86rem;
  border: 1px solid var(--border); padding: 7px 14px; border-radius: 7px;
}
.embed-bar a.ext:hover { border-color: var(--accent); }
.embed-host { flex: 1; min-height: 0; position: relative; background: #fff; }
.embed-host iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.embed-fallback {
  position: absolute; inset: 0; display: none; place-content: center; text-align: center;
  background: var(--bg); color: var(--text-dim); padding: 40px; font-size: 0.88rem;
}
.embed-links { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 24px; background: var(--panel-alt); border-top: 1px solid var(--border); flex: none; }
.embed-links a { color: var(--text-dim); text-decoration: none; font-size: 0.86rem; border: 1px solid var(--border); padding: 7px 13px; border-radius: 7px; }
.embed-links a:hover { color: var(--accent); border-color: var(--accent); }

footer { flex: none; text-align: center; color: var(--muted); font-size: 0.78rem; padding: 12px; border-top: 1px solid var(--border); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }