/* Crosswind Component Explainer — engineering / blueprint aesthetic.
   Light blue graph-paper ground, dark structural ink, technical type. */

:root {
  /* surfaces / chrome */
  --bg:           #f4f8fc;
  --panel:        #eef5fc;   /* raised cards */
  --border:       #9ec3e6;
  --frame:        #9ec3e6;   /* alias */
  --well:         #eef5fc;   /* chart card ground */
  --text:         #243443;
  --text-dim:     #5a7186;
  --text-faint:   #6e7681;
  --heading:      #16314a;
  /* chart graph-paper + structure */
  --paper:        #eef5fc;   /* alias of --well */
  --grid-minor:   #d3e6f7;   /* fine graph lines */
  --grid-major:   #b9d6ef;   /* heavy graph lines */
  --ink:          #15293a;   /* arcs, spokes, axes */
  --grid-axis:    #15293a;
  --minorline:    #9fb8cb;   /* minor arcs / rays */
  --sector:       transparent;
  --label:        #15293a;   /* tick numbers + chart notes */
  --chip-bg:      #2d3748;   /* angle label chips */
  --chip-fg:      #ffffff;
  --blue:         #1d6fb8;   /* axis titles */
  /* semantic accents (both themes) */
  --accent-headwind:   #1d6fb8;
  --accent-crosswind:  #e03131;
  --accent-wind:       #e8590c;
  --accent-resultant:  #6741d9;
  --accent-valid:      #3fb950;
  --hi-angle:     var(--accent-wind);      /* wind/runway angle ray */
  --hi-comp:      var(--accent-crosswind); /* component drop-lines / pills */
  --hi-wedge:     rgba(232, 89, 12, 0.16);
  --hi-wedge-edge:rgba(232, 89, 12, 0.5);
  --gust-band:    rgba(216, 118, 12, 0.26);
  --gust-edge:    rgba(190, 95, 6, 0.5);
  /* airfield */
  --turf-near:    #82a17c;
  --turf-far:     #6f8f6a;
  --turf-grid:    #94ad8d;
  --asphalt-hi:   #46535f;
  --asphalt-lo:   #3a4754;
  --rwy-edge:     #6b7785;
  --paint:        #eef5fc;
  --compass:      #a9cd9a;
  --compass-tick: #93c283;
  --wind-arrow:   #dee5d8;
  --caption:      #20331c;
  --flood:        rgba(255, 208, 130, 0.0);  /* windsock flood — off in daylight */
  --glow:         0.0;                        /* runway-light bloom — off in daylight */
  --sock-orange:  #ff6a13;
  font-synthesis: none;
}

/* ---------------- DARK: backlit instrument + night airfield ---------------- */
:root[data-theme="dark"] {
  --bg:           #0d1117;
  --panel:        #161b22;
  --border:       #30363d;
  --frame:        #30363d;
  --well:         #010409;   /* deeper than bg -> recessed glass */
  --text:         #e6edf3;
  --text-dim:     #8b949e;
  --text-faint:   #6e7681;
  --heading:      #e6edf3;
  --paper:        #010409;
  --grid-minor:   #1b2129;   /* faint self-lit graph paper */
  --grid-major:   #232b34;
  --ink:          #454d57;   /* arcs / spokes */
  --grid-axis:    #8b949e;
  --minorline:    #2b333c;
  --sector:       #161b22;
  --label:        #b8c2cc;
  --chip-bg:      #21262d;
  --chip-fg:      #e6edf3;
  --blue:         #4493f8;
  --accent-headwind:   #4493f8;
  --accent-crosswind:  #f85149;
  --accent-wind:       #fd853a;
  --accent-resultant:  #bc8cff;
  --accent-valid:      #3fb950;
  --hi-wedge:     rgba(253, 133, 58, 0.15);
  --hi-wedge-edge:rgba(253, 133, 58, 0.5);
  --gust-band:    rgba(253, 133, 58, 0.20);
  --gust-edge:    rgba(253, 133, 58, 0.5);
  --turf-near:    #10341f;
  --turf-far:     #0f2417;
  --turf-grid:    #16331f;
  --asphalt-hi:   #23272e;
  --asphalt-lo:   #15181d;
  --rwy-edge:     #2c333d;
  --paint:        #e6edf3;
  --compass:      #1c4a2c;
  --compass-tick: #1c4a2c;
  --wind-arrow:   #8b949e;
  --caption:      #8b949e;
  --flood:        rgba(255, 198, 110, 0.16); /* soft warm windsock pool */
  --glow:         0.7;                        /* runway lights glow at night */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Helvetica Neue", Arial, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.xw-header {
  padding: 1.4rem 1.6rem 0.4rem;
  max-width: 1180px;
  margin: 0 auto;
}
.xw-home {
  display: inline-block;
  margin: 0 0 0.45rem;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.xw-home:hover { color: var(--heading); text-decoration: underline; }
.xw-header h1 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: var(--heading);
}
.xw-sub {
  margin: 0.25rem 0 0;
  color: var(--text-dim);
  font-size: 0.95rem;
}

.xw-main {
  max-width: 1180px;
  margin: 0.8rem auto 0;
  padding: 0 1.6rem;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1.2rem;
  align-items: stretch;
}
@media (max-width: 880px) {
  .xw-main { grid-template-columns: 1fr; }
}

/* Cards: blueprint paper with a fine graph-paper grid drawn in CSS */
.xw-card {
  position: relative;
  border: 1.5px solid var(--frame);
  border-radius: 3px;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size:
    14px 14px, 14px 14px,
    70px 70px, 70px 70px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  box-shadow: 0 6px 22px rgba(20, 60, 100, 0.08);
  overflow: hidden;
}

.xw-chart-card { padding: 8px; }
#xw-chart { display: block; width: 100%; height: auto; }
.xw-chart-hint {
  margin: 0.1rem 0 0.2rem;
  text-align: center;
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  opacity: 0.85;
}
#xw-chart .angle-chip { cursor: pointer; }
#xw-chart .angle-chip:hover rect { stroke: #ffffff; stroke-width: 1.5px; }

/* Right scene — "grass field" green graph paper so the light wind arrows read */
.xw-runway-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  --paper:      #75906f;   /* darker grass green ground */
  --grid-minor: #85a07e;   /* lighter grid lines on top */
  --grid-major: #94ad8d;
  --frame:      #5f7a59;
}
.xw-runway-card .xw-runway-caption { color: var(--caption); }
/* night airfield: dark turf radial + a faint restored grid (felt, not read) */
:root[data-theme="dark"] .xw-runway-card {
  --frame: #1c4a2c;
  --turf-grid: #173a20;        /* fine grid (faint) */
  --turf-grid-maj: #214a2c;    /* major grid (a touch stronger) */
  background-color: var(--turf-far);
  background-image:
    linear-gradient(var(--turf-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--turf-grid) 1px, transparent 1px),
    linear-gradient(var(--turf-grid-maj) 1px, transparent 1px),
    linear-gradient(90deg, var(--turf-grid-maj) 1px, transparent 1px),
    radial-gradient(circle at 50% 46%, var(--turf-near), var(--turf-far) 72%);
  background-size: 14px 14px, 14px 14px, 70px 70px, 70px 70px, 100% 100%;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px, 0 0;
}
:root[data-theme="dark"] .xw-card { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); }

/* theme toggle (header) */
.xw-theme-toggle {
  margin: 0.7rem 0 0 0.5rem;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 6px 11px;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  vertical-align: top;
}
.xw-theme-toggle:hover { color: var(--text); }
.xw-runway-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 540px;
}
.xw-field, .xw-runway, .xw-socks3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.xw-runway { z-index: 1; }
.xw-field { z-index: 2; pointer-events: none; }  /* arrows overlay the pavement */
.xw-socks3d { z-index: 3; pointer-events: none; }  /* cloth windsocks (WebGL) on top */
.xw-runway-caption {
  margin: 0.4rem 0 0.2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}

/* Controls */
.xw-controls {
  max-width: 1180px;
  margin: 1.1rem auto 2.4rem;
  padding: 0 1.6rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr);
  gap: 1.1rem;
  align-items: start;   /* readout can grow downward without shoving the sliders */
}
@media (max-width: 880px) {
  .xw-controls { grid-template-columns: 1fr 1fr; }
}
.xw-control label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.xw-val {
  float: right;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
  font-weight: 700;
}
.xw-control input[type="range"] {
  width: 100%;
  accent-color: var(--blue);
  display: block;
}
.xw-gust-lock {
  border: 0; background: none; cursor: pointer; padding: 0 2px;
  font-size: 0.9rem; line-height: 1; vertical-align: baseline; filter: grayscale(0.2);
}
.xw-control.locked input[type="range"] { opacity: 0.4; }

/* tick strip under a slider — side margins ~ thumb radius so 0–100% aligns */
.xw-ticks {
  position: relative;
  height: 17px;
  margin: 4px 9px 0;
}
.xw-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.xw-mark {
  width: 1px;
  height: 4px;
  background: var(--text-faint);
}
.xw-tick.major .xw-mark {
  width: 1.5px;
  height: 7px;
  background: var(--text-dim);
}
.xw-lbl {
  font-size: 9px;
  line-height: 1;
  margin-top: 2px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.xw-readout {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-dim);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  min-height: 3.4rem;   /* reserve space so head/tail-wind swaps don't jump layout */
}
.xw-readout b { color: var(--hi-comp); }
.xw-readout .hw { color: var(--blue); }

/* ---------------- Guided tour ---------------- */
.xw-tour-btn {
  margin-top: 0.7rem;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  border-radius: 6px;
  padding: 6px 13px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.xw-tour-btn:hover { background: #195f9e; }

.xw-tour-overlay { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.xw-tour {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 460px;
  max-width: calc(100vw - 24px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 44px rgba(20, 60, 100, 0.24);
  padding: 15px 18px 12px;
  pointer-events: auto;
}
.xw-tour-x {
  position: absolute; top: 9px; right: 9px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-dim);
  cursor: pointer; font-size: 16px; line-height: 1;
}
.xw-tour-x:hover { background: var(--panel); }
.xw-tour-title { margin: 0 30px 8px 0; font-size: 1.05rem; color: var(--heading); cursor: grab; }
.xw-tour-body { font-size: 0.93rem; line-height: 1.5; color: var(--text); min-height: 64px; }
.xw-tour-body p { margin: 0 0 0.6rem; }
.xw-tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.xw-tour-prev, .xw-tour-next {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg); color: var(--accent-headwind);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.xw-tour-prev:disabled, .xw-tour-next:disabled { opacity: 0.4; cursor: default; }
.xw-tour-progress { flex: 1; accent-color: var(--blue); }
.xw-tour-badge {
  border: 1px solid var(--border); background: var(--panel); color: var(--accent-headwind);
  font-weight: 700; font-variant-numeric: tabular-nums;
  border-radius: 6px; padding: 4px 9px; cursor: pointer; font-size: 0.82rem;
}
.xw-tour-menu {
  position: absolute; right: 14px; bottom: 50px; width: 240px; max-height: 232px;
  overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(20, 60, 100, 0.22); padding: 4px;
}
.xw-tour-menu[hidden] { display: none; }
.xw-tour-menu-item {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 7px 9px; border-radius: 6px; font-size: 0.85rem; color: var(--text); cursor: pointer;
}
.xw-tour-menu-item:hover { background: var(--bg); }

.xw-tour-hand { position: fixed; z-index: 60; pointer-events: none; font-size: 25px; }
.xw-hand-em { display: inline-block; animation: xwbob 0.9s ease-in-out infinite; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
@keyframes xwbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* colored emphasis used in tour copy */
.em    { color: var(--accent-headwind); font-weight: 700; }
.em-hw { color: var(--accent-headwind); font-weight: 700; }
.em-xw { color: var(--accent-crosswind); font-weight: 700; }
.em-shade { color: var(--accent-wind); font-weight: 700; }
.em-hyp { color: var(--accent-resultant); font-weight: 700; }

.xw-pulse { animation: xwsvgpulse 1s ease-in-out infinite; }
@keyframes xwsvgpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* runway lighting is night-only — hidden entirely in daylight */
.xw-night { display: none; }
:root[data-theme="dark"] .xw-night { display: inline; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; }
}