:root {
  --bg:#f4f7fb;
  --header:rgba(255,255,255,.84);
  --card:#fff;
  --soft:#f8fafc;

  --text:#101828;
  --text2:#344054;
  --text3:#667085;

  --border:#e4e7ec;

  --brand:#245edb;
  --brand2:#1746a2;

  --good:#15803d;
  --warning:#e56b0a;

  --red:#d20d13;
  --black:#101214;
  --yellow:#f0c419;

  --shadow:
    0 10px 30px rgba(16,24,40,.08),
    0 2px 8px rgba(16,24,40,.04);

  --max:1460px;
}


html[data-theme="dark"] {
  --bg:#0c1016;
  --header:rgba(16,22,31,.88);
  --card:#121821;
  --soft:#0f151d;

  --text:#f4f7fb;
  --text2:#d4dbe5;
  --text3:#8f9bad;

  --border:#252f3d;

  --brand:#72a1ff;
  --brand2:#9bbcff;

  --good:#4ade80;
  --warning:#fb923c;

  --shadow:
    0 18px 42px rgba(0,0,0,.25),
    0 2px 8px rgba(0,0,0,.18);
}


* {
  box-sizing:border-box;
}


html {
  background:var(--bg);
}


body {
  margin:0;
  min-width:320px;

  color:var(--text);

  background:
    radial-gradient(
      circle at 15% 0%,
      color-mix(
        in srgb,
        var(--brand) 6%,
        transparent
      ),
      transparent 28rem
    ),
    var(--bg);

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  -webkit-font-smoothing:antialiased;
}


button,
select {
  font:inherit;
}


.page-shell {
  min-height:100vh;

  display:flex;
  flex-direction:column;
}


/*
 * ============================================================
 * HEADER
 * ============================================================
 */

.site-header {
  position:sticky;
  top:0;
  z-index:50;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;

  min-height:86px;

  padding:
    16px
    max(
      24px,
      calc(
        (
          100vw -
          var(--max)
        ) /
        2
      )
    );

  border-bottom:
    1px solid var(--border);

  background:
    var(--header);

  backdrop-filter:
    blur(18px)
    saturate(150%);
}


.brand {
  display:flex;
  align-items:center;

  gap:12px;

  color:var(--text);

  text-decoration:none;

  font-weight:780;
  font-size:1.55rem;

  letter-spacing:-.03em;
}


.brand-mark {
  width:42px;
  height:42px;

  color:var(--brand2);
}


.brand-mark svg {
  width:100%;
  height:100%;
}


.header-actions {
  display:flex;
  align-items:end;

  gap:10px;
}


.airport-control {
  display:grid;

  gap:6px;
}


.control-label,
.section-kicker,
.metric-label,
.eyebrow {
  font-size:.72rem;
  font-weight:800;

  letter-spacing:.09em;

  color:var(--text3);
}


.select-shell {
  position:relative;

  display:flex;
  align-items:center;
}


.select-plane {
  position:absolute;

  left:14px;

  z-index:1;

  color:var(--brand);

  pointer-events:none;
}


.select-shell select {
  min-width:178px;
  height:46px;

  padding:
    0
    42px
    0
    40px;

  border:
    1px solid var(--border);

  border-radius:12px;

  background:var(--card);

  color:var(--text);

  font-weight:700;

  appearance:none;

  box-shadow:var(--shadow);
}


.chevron {
  position:absolute;

  right:13px;

  width:18px;

  color:var(--text3);

  pointer-events:none;
}


.theme-toggle {
  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  border:
    1px solid var(--border);

  border-radius:12px;

  background:var(--card);

  color:var(--text);

  cursor:pointer;

  box-shadow:var(--shadow);
}


.theme-icon {
  width:20px;
  height:20px;
}


.theme-icon svg {
  width:100%;
  height:100%;
}


.moon {
  display:none;
}


html[data-theme="dark"] .sun {
  display:none;
}


html[data-theme="dark"] .moon {
  display:block;
}


/*
 * ============================================================
 * MAIN
 * ============================================================
 */

.content,
.site-footer {
  width:
    min(
      calc(
        100% -
        48px
      ),
      var(--max)
    );

  margin-left:auto;
  margin-right:auto;
}


.content {
  padding:
    38px
    0
    34px;
}


.airport-summary {
  display:flex;

  justify-content:space-between;
  align-items:end;

  gap:20px;

  margin-bottom:24px;
}


.airport-summary h1 {
  margin:
    5px
    0
    7px;

  font-size:
    clamp(
      1.75rem,
      3vw,
      2.55rem
    );

  line-height:1.05;

  letter-spacing:-.045em;
}


.airport-meta {
  margin:0;

  color:var(--text2);

  font-weight:600;
}


.dot {
  margin:
    0
    7px;

  color:var(--text3);
}


.live-pill,
.status-pill {
  display:inline-flex;

  align-items:center;

  gap:8px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--good) 20%,
      var(--border)
    );

  background:
    color-mix(
      in srgb,
      var(--good) 8%,
      var(--card)
    );

  color:var(--good);

  font-size:.78rem;
  font-weight:800;

  border-radius:999px;

  padding:
    8px
    11px;
}


.live-pill span {
  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--good);
}


.card {
  background:var(--card);

  border:
    1px solid var(--border);

  border-radius:18px;

  box-shadow:var(--shadow);
}


/*
 * ============================================================
 * RUNWAY CARDS
 * ============================================================
 */

.runway-grid {
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:22px;
}


.runway-card {
  padding:24px;
}


.section-heading,
.card-title-row {
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:14px;
}


.section-heading > div,
.card-title-row > div {
  display:flex;
  align-items:center;

  gap:12px;
}


.section-heading strong {
  display:block;

  margin-top:2px;
}


.heading-icon {
  width:39px;
  height:39px;

  display:grid;
  place-items:center;

  border-radius:12px;

  color:var(--brand);

  background:
    color-mix(
      in srgb,
      var(--brand) 9%,
      var(--card)
    );

  font-size:1.45rem;
  font-weight:800;
}


/*
 * ============================================================
 * RUNWAY SIGN
 * ============================================================
 */

.runway-sign-list {
  display:grid;
  gap:14px;

  margin:
    23px
    0
    18px;
}


.runway-sign {
  position:relative;

  display:grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    118px;

  min-height:180px;

  margin:0;

  overflow:hidden;

  border:
    6px solid #0a0b0c;

  border-radius:17px;

  background:#0c0d0f;

  box-shadow:
    0 10px 24px rgba(0,0,0,.16);
}


.runway-red {
  display:flex;

  align-items:center;
  justify-content:center;

  flex-wrap:nowrap;

  gap:
    clamp(
      12px,
      2vw,
      28px
    );

  padding:
    18px
    24px;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #df1319,
      #c7080e
    );

  border-right:
    6px solid var(--yellow);
}


/*
 * One complete placard is rendered per runway in use.
 *
 * Example:
 *
 * RW 14R
 * RW 14L
 */
.runway-red .runway-placard-item {
  display:inline-flex;

  align-items:center;
  justify-content:center;

  flex:
    0
    1
    auto;

  min-width:0;

  padding:0;

  border:0;

  border-radius:0;

  background:transparent;

  box-shadow:none;

  color:#fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(
      3.6rem,
      5.5vw,
      6.2rem
    );

  font-weight:500;

  line-height:.92;

  letter-spacing:.025em;

  white-space:nowrap;
}




/*
 * Backward compatibility if JS writes a single raw span.
 */
.runway-red > span:not(.runway-placard-item) {
  color:#fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(
      4.2rem,
      7.5vw,
      7rem
    );

  font-weight:500;

  line-height:1;

  letter-spacing:.035em;

  white-space:nowrap;
}


.runway-black {
  display:grid;

  place-items:center;

  background:
    radial-gradient(
      circle at 45% 35%,
      #191b1f,
      #070809 75%
    );
}


.direction-arrow {
  color:var(--yellow);

  font-size:
    clamp(
      4rem,
      6vw,
      6rem
    );
}


.bolt {
  position:absolute;

  width:10px;
  height:10px;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 35% 35%,
      #fff 0 18%,
      #c7cbd0 20% 58%,
      #6f757c 60%
    );
}


.tl {
  top:8px;
  left:8px;
}


.tr {
  top:8px;
  right:8px;
}


.bl {
  bottom:8px;
  left:8px;
}


.br {
  bottom:8px;
  right:8px;
}


/*
 * ============================================================
 * RUNWAY STATISTICS
 * ============================================================
 */

.runway-stats {
  display:grid;

  grid-template-columns:
    1fr
    1px
    1fr;

  gap:18px;

  align-items:center;
}


.mini-stat {
  display:grid;

  gap:6px;
}


.mini-label {
  color:var(--text3);

  font-size:.72rem;
  font-weight:750;

  text-transform:uppercase;
}


.mini-divider {
  height:42px;

  background:var(--border);
}


.good {
  color:var(--good)!important;
}


.warning {
  color:var(--warning)!important;
}


.muted {
  color:var(--text3);

  font-weight:600;
}


/*
 * ============================================================
 * WEATHER
 * ============================================================
 */

.weather-grid {
  display:grid;

  grid-template-columns:
    1.25fr
    1.35fr
    .72fr;

  gap:22px;

  margin-top:22px;
}


.weather-card,
.wind-source-card {
  padding:22px;
}


.card-title-row h2 {
  margin:0;

  font-size:1rem;
}


.weather-icon {
  color:var(--brand);

  font-size:1.2rem;
}


.timestamp {
  color:var(--text3);

  font-size:.78rem;
  font-weight:700;
}


/*
 * METAR / TAF:
 *
 * plain card background,
 * no inset grey box,
 * larger and clearer text.
 */
pre {
  min-height:118px;

  margin:
    18px
    0
    0;

  padding:
    6px
    0
    2px;

  overflow:auto;

  white-space:pre-wrap;

  word-break:normal;
  overflow-wrap:anywhere;

  border:0;

  border-radius:0;

  background:transparent;

  color:var(--text);

  font-family:
    "SFMono-Regular",
    "SF Mono",
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:
    clamp(
      1rem,
      1.15vw,
      1.12rem
    );

  font-weight:700;

  line-height:1.68;

  letter-spacing:.005em;
}


.wind-source-card {
  display:flex;

  flex-direction:column;

  align-items:flex-start;
  justify-content:center;

  min-height:210px;
}


.windsock {
  width:44px;
  height:44px;

  color:var(--brand);

  margin-bottom:12px;
}


.windsock svg {
  width:100%;
  height:100%;
}


.wind-source-card strong {
  margin:
    12px
    0
    5px;

  font-size:
    clamp(
      1.45rem,
      2vw,
      2rem
    );
}


/*
 * ============================================================
 * METRICS
 * ============================================================
 */

.metrics-grid {
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:18px;

  margin-top:22px;
}


.metric-card {
  min-height:138px;

  display:flex;
  align-items:center;

  gap:17px;

  padding:20px;
}


.metric-icon {
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--brand) 24%,
      var(--border)
    );

  border-radius:50%;

  color:var(--brand);

  font-size:1.55rem;

  background:
    color-mix(
      in srgb,
      var(--brand) 6%,
      var(--card)
    );
}


.metric-card > div {
  display:grid;

  gap:5px;
}


.metric-card strong {
  font-size:
    clamp(
      1.65rem,
      2.4vw,
      2.15rem
    );

  letter-spacing:-.03em;
}


.metric-note {
  color:var(--text3);

  font-size:.8rem;
  font-weight:600;
}


/*
 * ============================================================
 * FOOTER
 * ============================================================
 */

.site-footer {
  margin-top:auto;

  padding:
    20px
    0
    30px;

  border-top:
    1px solid var(--border);

  display:flex;

  justify-content:space-between;

  gap:18px;

  color:var(--text3);

  font-size:.8rem;
}


.footer-status {
  display:flex;
  align-items:center;

  gap:12px;
}


.footer-divider {
  width:1px;
  height:17px;

  background:var(--border);
}


/*
 * ============================================================
 * TABLET
 * ============================================================
 */

@media(max-width:1024px) {
  .content,
  .site-footer {
    width:
      min(
        calc(
          100% -
          32px
        ),
        var(--max)
      );
  }


  .site-header {
    padding-left:16px;
    padding-right:16px;
  }


  .runway-grid {
    gap:16px;
  }


  .runway-card {
    padding:18px;
  }


  .runway-sign {
    min-height:145px;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      100px;
  }


  .runway-red {
    gap:12px;

    padding:
      16px
      16px;
  }


  .runway-red .runway-placard-item {
    font-size:
      clamp(
        3rem,
        5vw,
        4.9rem
      );
  }


  .weather-grid {
    grid-template-columns:
      1fr
      1fr;

    gap:16px;
  }


  .wind-source-card {
    grid-column:1/-1;

    min-height:150px;
  }


  .metrics-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );

    gap:16px;
  }
}


/*
 * ============================================================
 * MOBILE
 * ============================================================
 */

@media(max-width:720px) {
  .site-header {
    min-height:auto;

    padding:12px;

    gap:12px;
  }


  .brand {
    font-size:1.1rem;

    gap:8px;
  }


  .brand-mark {
    width:34px;
    height:34px;
  }


  .control-label {
    display:none;
  }


  .header-actions {
    align-items:center;

    gap:8px;
  }


  .select-shell select {
    min-width:130px;
    height:42px;

    padding-left:36px;
    padding-right:34px;
  }


  .select-plane {
    left:11px;
  }


  .theme-toggle {
    width:42px;
    height:42px;
  }


  .content {
    width:
      min(
        calc(
          100% -
          24px
        ),
        var(--max)
      );

    padding-top:24px;
  }


  .airport-summary {
    align-items:flex-start;

    margin-bottom:18px;
  }


  .live-pill {
    display:none;
  }


  .runway-grid {
    grid-template-columns:1fr;
  }


  .runway-card {
    padding:16px;
  }


  .status-pill {
    display:none;
  }


  .runway-sign {
    min-height:128px;

    margin-top:18px;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      82px;

    border-width:5px;
  }


  .runway-red {
    gap:8px;

    padding:
      12px
      12px;

    border-right-width:5px;
  }


  .runway-red .runway-placard-item {
    font-size:
      clamp(
        2.4rem,
        11vw,
        4rem
      );
  }


  .runway-red > span:not(.runway-placard-item) {
    font-size:
      clamp(
        4rem,
        24vw,
        6.1rem
      );
  }


  .direction-arrow {
    font-size:
      clamp(
        3.3rem,
        17vw,
        5rem
      );
  }


  .weather-grid {
    grid-template-columns:1fr;
  }


  .wind-source-card {
    grid-column:auto;
  }


  pre {
    min-height:auto;

    padding:
      4px
      0;

    font-size:.95rem;

    line-height:1.62;
  }


  .metrics-grid {
    grid-template-columns:
      1fr
      1fr;

    gap:12px;
  }


  .metric-card {
    min-height:122px;

    padding:16px;

    gap:12px;
  }


  .metric-icon {
    width:40px;
    height:40px;

    font-size:1.25rem;
  }


  .site-footer {
    width:
      min(
        calc(
          100% -
          24px
        ),
        var(--max)
      );

    flex-direction:column;
  }
}


/*
 * ============================================================
 * SMALL PHONE
 * ============================================================
 */

@media(max-width:470px) {
  .brand span:last-child {
    display:none;
  }


  .header-actions {
    margin-left:auto;
  }


  .airport-summary h1 {
    font-size:1.7rem;
  }


  .runway-sign {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      72px;
  }


  .runway-red {
    padding:
      10px
      8px;

    gap:6px;
  }


  .runway-red .runway-placard-item {
    font-size:
      clamp(
        2rem,
        10vw,
        3.3rem
      );
  }


  .metrics-grid {
    grid-template-columns:1fr;
  }


  .metric-card {
    min-height:106px;
  }


  pre {
    font-size:.9rem;

    line-height:1.58;
  }
}

/*
 * ============================================================
 * RUNWAY COMPONENT / WIND SOURCE UPDATE
 * ============================================================
 */

.wind-source-top {
  width:100%;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:14px;
}


.wind-source-card .windsock {
  color:var(--brand);
}


.wind-source-value,
.wind-source-label {
  color:var(--brand)!important;
}


.wind-source-label {
  font-size:.84rem;
  font-weight:800;

  letter-spacing:.02em;
}


.wind-nav {
  display:flex;

  gap:7px;
}


.wind-nav button {
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--brand) 25%,
      var(--border)
    );

  border-radius:10px;

  background:
    color-mix(
      in srgb,
      var(--brand) 7%,
      var(--card)
    );

  color:var(--brand);

  font-size:1.15rem;
  font-weight:850;

  cursor:pointer;
}


.wind-nav button:hover:not(:disabled) {
  background:
    color-mix(
      in srgb,
      var(--brand) 13%,
      var(--card)
    );
}


.wind-nav button:disabled {
  opacity:.34;
  cursor:default;
}


.selected-wind {
  padding:
    2px
    4px;

  border-radius:5px;

  background:
    color-mix(
      in srgb,
      var(--brand) 15%,
      transparent
    );

  color:var(--brand);

  font-weight:850;
}


.runway-components {
  display:grid;

  gap:18px;

  margin-top:22px;
}


.runway-component-row {
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:18px;
}


.compact-runway-card {
  align-items:center;
}


.compact-runway-card > div:last-child {
  min-width:0;
}


.compact-runway-sign {
  flex:
    0
    0
    auto;

  min-width:96px;
  min-height:58px;

  display:grid;
  place-items:center;

  padding:
    10px
    13px;

  border:
    4px solid #0a0b0c;

  border-radius:10px;

  background:
    linear-gradient(
      180deg,
      #df1319,
      #c7080e
    );

  box-shadow:
    0 5px 13px rgba(0,0,0,.16);
}


.compact-runway-sign span {
  color:#fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(
      1.15rem,
      1.7vw,
      1.55rem
    );

  font-weight:700;

  line-height:1;

  white-space:nowrap;
}


.environmental-metrics {
  margin-top:18px;
}


@media(max-width:1024px) {
  .runway-component-row {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:16px;
  }
}


@media(max-width:720px) {
  .runway-component-row {
    grid-template-columns:
      1fr
      1fr;

    gap:12px;
  }


  .compact-runway-sign {
    min-width:82px;
    min-height:50px;

    padding:
      8px
      10px;
  }


  .compact-runway-sign span {
    font-size:1.05rem;
  }


  .wind-source-top {
    align-items:center;
  }
}


@media(max-width:470px) {
  .runway-component-row {
    grid-template-columns:1fr;
  }
}


.metric-icon-svg svg {
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}