/* ===== Design tokens (flattened) ===== */
  :root{
    --bg:#0a0f1c; --panel:#0e1628; --panel-2:#0b1326; --line:rgba(148,163,184,.25);
    --muted:#94a3b8; --text:#e2e8f0; --accent:#38bdf8;
    --danger:#f87171; --ok:#34d399; --warn:#fbbf24;
    --radius:12px; --gap-1:8px; --gap-2:16px; --gap-3:24px;
    --focus-ring:0 0 0 3px rgba(56,189,248,.4);
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;color:var(--text);
    font:16px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    background:var(--bg);
    letter-spacing:0; -webkit-tap-highlight-color:transparent;
  }
  [hidden]{display:none !important}

    .wrap{max-width:1200px;margin:0 auto;padding:24px 16px 96px}


  .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
  }

  footer {
    text-align: center;
    padding: 1rem 0;
    color: var(--muted);
    font-size: 0.9rem;
    border-top: 1px solid var(--line);
  }


  /* ===== Pilot OPS-style compact hero header ===== */
  .hero-mini{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:160px;
    background:
      radial-gradient(circle at 50% -40%, rgba(56,189,248,.15), transparent 70%),
      linear-gradient(180deg, rgba(11,18,32,1) 0%, rgba(8,12,24,1) 100%);
    border-bottom:1px solid rgba(255,255,255,.06);
    margin-bottom:24px;
  }
  .hero-inner{position:relative;z-index:2;padding:40px 16px}
  .eyebrow{
    display:inline-block;
    font-size:.8rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#cfe6ffb3;
    background:#ffffff12;
    border:1px solid #ffffff26;
    padding:.4rem .8rem;
    border-radius:999px;
  }
  .hero-mini h1{
    font-weight:800;
    font-size:clamp(1.8rem,4.2vw,2.8rem);
    margin:.7rem 0 0;
    color:#e6edf7;
  }
  .hero-mini .sub{
    font-size:1rem;
    color:#a5b4c3;
    margin-top:8px;
  }

  /* ===== Card (flattened) ===== */
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--gap-2);margin-top:var(--gap-2)}
  .card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--gap-1)}
  .title{font-size:18px;letter-spacing:0;margin:0;color:#fff}
  .sub{color:var(--muted);font-size:13px}
  .divider{height:1px;background:rgba(148,163,184,.25);margin:8px 0 16px}

  .grid{display:grid;gap:var(--gap-1)}
  .row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-1)}
  @media (max-width: 900px){ .row3{grid-template-columns:1fr} }
  @media (max-width: 640px){
  /* Make the three main blocks (ICAO, Wheels, Radius) breathe */
  .row3 { 
    gap: var(--gap-2); /* bigger gap than desktop's var(--gap-1) */
  }
  .row3 > .field {
    margin-bottom: 16px;         /* extra space between the three blocks */
  }
  .row3 > .field:last-child {
    margin-bottom: 0;            /* avoid double gap at the end */
  }

  /* The filters group: lift it off the previous block and open the chips a bit */
  .opt-row {
    margin-top: 14px;
    gap: 12px;
  }

  /* The container that wraps filters has inline style="margin-top:8px"
     We'll gently override it on mobile to be roomier */
  .card .field[style] {
    margin-top: 14px !important;
  }

  /* Small, readable gap before the primary button */
  .opt-actions {
    margin-top: 16px;
  }
}

  label{font-size:12px;color:var(--muted);display:block;margin:0 0 6px}
  input,select,button{
    width:100%;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel-2);
    color:var(--text);padding:12px 14px;font-size:16px;transition:border-color .15s,box-shadow .15s,transform .04s;
    min-height:44px; box-shadow:none; text-shadow:none;
  }
  input:focus,select:focus,button:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
  .field{display:flex;flex-direction:column}

  /* ===== Primary button (full-width sticky on small screens) ===== */
  .btn{appearance:none;border:none;border-radius:999px;padding:14px 22px;font-weight:700;
       color:#0b1220;background:white;display:inline-flex;align-items:center;gap:10px;text-decoration:none;justify-content:center}
  .btn-emerald{background:linear-gradient(90deg, var(--ok), #9bf0cd)}
  .btn-error{
  background: linear-gradient(90deg, #f97373, #fb7185); /* pleasant red gradient */
  color:#111827;
}

  .btn[disabled]{opacity:.6;cursor:not-allowed;filter:saturate(.7)}

  .opt-actions{
  display: flex;
  justify-content: center;      /* center the button under the filters */
  margin-top: var(--gap-2);     /* a bit more space below filters */
}

.opt-actions .btn{
  max-width: 360px;             /* keeps it from becoming huge */
  margin-inline: auto;          /* extra safety for centering */
}

  /* Desktop default: buttons shrink to content */
.btn {
  width: auto;
}


  @media (max-width:640px){
    .wrap{padding:20px 12px 80px}
    .card{padding:12px;border-radius:var(--radius)}
    h1{font-size:20px}
    input,select,button{font-size:16px}
    .alt-row{grid-template-columns:1fr}
    .wx-now{font-size:20px}
    .opt-actions{position:sticky;bottom:0;background:var(--panel-2);padding:8px 12px;border-top:1px solid var(--line);z-index:10}
    .opt-actions .btn{width:100%}
  }
  @media (max-width:400px){ .brand{gap:8px} h1{font-size:18px} }

  /* Inline spinner + label inside the button */
  .btn-contents{display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;display:inline-block;animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  .mini{font-size:12px;color:var(--muted);margin-top:6px}

  .tag{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--line);color:var(--muted);background:transparent}
  .tag.chip{border-radius:10px;white-space:nowrap}
    .tag.chip {
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  }

  .tag.chip.chip-on {
    background: rgba(56,189,248,.18);
    border-color: rgba(56,189,248,.70);
    color: #e6edf7;
    box-shadow: 0 0 0 1px rgba(56,189,248,.4);
  }


  .chip-input input[type="number"]{
    width:120px;min-height:32px;padding:6px 10px;border-radius:8px;background:var(--panel-2);
    border:1px solid var(--line);color:var(--text);font-size:14px;
  }
  .chip-input[aria-disabled="true"]{opacity:1}
  .chip-input input[disabled]{opacity:1;cursor:not-allowed}

  /* === Filters layout (stacked) === */
  .opt-row{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:0}
  .opt-row .tag.chip{align-self:stretch;max-width:100%;display:flex;align-items:center;justify-content:flex-start;gap:8px;white-space:normal;box-sizing:border-box}
  .opt-row .tag.chip > span{flex:1 1 auto;min-width:0}
  .chip-input input[type="number"]{flex:0 0 110px;width:110px}
  #rwyChip[aria-disabled="true"] input[type="number"]{display:none}
  #rwyDefaultNote{display:block;align-self:flex-start}

  .alt-list{display:grid;gap:var(--gap-1);margin-top:12px}

  /* RESULT ROW + FIXES */
  .alt-row{
    display:grid;
    grid-template-columns: clamp(220px, 34%, 300px) minmax(0, 1fr);
    align-items:start;
    gap:12px;
    background:var(--panel-2);
    border:1px solid var(--line);
    padding:12px;
    border-radius:var(--radius);
  }
    .alt-row.dest-card{
    border-color: rgb(74,225,223,.8);      /* orange / yellow border (like your dest-only chip) */
    background: rgba(26, 149, 206, 0.171);       /* soft orange background */
    box-shadow: 0 0 0 1px rgba(249,115,22,.35);
    margin-bottom: 4px;                     /* extra space before alternates */
  }

/* Style just the Destination badge inside the destination card */
.dest-card .tag:last-child {
  border-color: rgb(6, 238, 255);   /* your color */
  background: rgba(14, 53, 163, 0.582);    /* optional tint */
  color: #a3fcff;                          /* optional text color */
}


  .alt-row > *{ min-width:0; }
  @media (max-width:900px){
    .alt-row{grid-template-columns:1fr}
    .alt-row > :nth-child(2){grid-column:1 / -1;margin-top:8px}
  }

  .wx-now{font-size:24px;font-weight:900;line-height:1.2;margin:8px 0 6px;color:var(--text)}
  .cb-flag{display:inline-block;margin-left:8px;padding:3px 7px;border-radius:10px;background:#7f1d1d;color:#fee2e2;font-weight:800;line-height:1;border:1px solid rgba(252,165,165,.55);vertical-align:baseline;font-size:14px}
  .cb-flag[hidden]{display:none !important}
  .mini-muted{ color:var(--muted); font-size:12.5px }

  .cat{border-color:transparent}
  .cat.VFR{background:#134e4a;color:#d1fae5}
  .cat.MVFR{background:#1f2937;color:#e5e7eb}
  .cat.IFR{background:#5b1a1a;color:#fee2e2}
  .cat.LIFR{background:#4c1d95;color:#ede9fe}

  .metar{
    display:block;
    width:100%;
    max-width:100%;
    background:var(--panel);
    border:1px dashed rgba(148,163,184,.35);
    border-radius:var(--radius);
    padding:12px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    font-size:13.25px;line-height:1.45;
    overflow-x:auto;
    white-space:pre-wrap;
    word-break:break-word;
    overflow-wrap:anywhere;
  }

  .flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  /* ===== Wheel (flattened, no glow) ===== */
  /* ===== Wheel (flattened, no glow) ===== */
.wheel{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap:8px }
  .wheel-col{position:relative;height:108px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:auto;-webkit-overflow-scrolling:touch}
  .wheel-item{
  display:flex;
  align-items:center;
  justify-content:center;
  height:36px;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  color:var(--muted);
  transition:transform .08s ease,color .12s ease,background .12s ease;
  border-radius:10px;
  margin:0 6px;

  /* NEW: keep each date label on a single line */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

  .wheel-item[aria-selected="true"]{color:#f0f6ff;background:rgba(56,189,248,.08);outline:1px solid rgba(56,189,248,.35)}
  .wheel-col::-webkit-scrollbar{ width:0; height:0 }
  .wheel-mask{ position:relative }
  .wheel-mask::before, .wheel-mask::after{content:""; position:absolute; left:0; right:0; height:36px; pointer-events:none; background: linear-gradient(180deg, rgba(10,15,28,0.9), rgba(10,15,28,0))}
  .wheel-mask::before{ top:0 }
  .wheel-mask::after{ bottom:0; transform:rotate(180deg) }
  .wheel-center{position:absolute; left:8px; right:8px; top:calc(50% - 18px); height:36px; border:1px dashed rgba(148,163,184,.35); border-left:none; border-right:none; pointer-events:none}
  .wheel-col.date .wheel-center{border-color: rgba(96,165,250,.55)}
  .wheel-col.hour .wheel-center{border-color: rgba(34,211,238,.55)}
  .wheel-col.min .wheel-center{ border-color: rgba(34,211,238,.55); }


  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
  .taf-hl {
  background: rgba(56,189,248,0.35);   /* brighter blue background */
  border: 1px solid rgba(125,230,255,0.9); /* brighter border */
  padding: 0 4px;
  border-radius: 6px;
}

.taf-hl, .taf-hl * {
  color: #ffffff !important;  /* bright white text for contrast */
}

  .taf-hl, .taf-hl * { color: var(--text) !important }

  .foot-info{ color:var(--muted); font-size:12.5px; text-align:center; margin-top:6px }

  /* Modal (flattened) */
  .afp-no-scroll { overflow: hidden }
  #app-root[inert] { pointer-events: none; user-select: none }
  .afp-overlay{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5,10,20,.94);
  z-index: 9999;
  padding: 16px;

  
  /* NEW: ensure overlay height matches visible screen */
  min-height: 100vh;
  /* NEW: allow scrolling if modal is taller than viewport */
  overflow-y: auto;
}

/* NEW: iOS Safari & modern browsers → dynamic viewport */
@supports (height: 100dvh) {
  .afp-overlay {
    min-height: 100dvh;
  }
}

    .afp-modal{ width: min(760px,100%); background: var(--panel); color: var(--text); border-radius: var(--radius); border: 1px solid rgba(148,163,184,.35); padding: 18px 18px 14px }

  /* Mobile: keep the button reachable and allow scrolling */
  @media (max-width:640px){
    .afp-overlay{
      place-items: start center;
      padding-top: 24px;
    }

    .afp-modal{
      margin-bottom: env(safe-area-inset-bottom, 20px);
      max-height: calc(100dvh - 48px - env(safe-area-inset-bottom, 20px));
      overflow-y: auto;
    }
  }

  
  .afp-modal h2{ margin:0 0 8px; font-size:20px }
  .afp-body p{ margin:.5rem 0; line-height:1.55; color:#e5edf7 }
  .afp-actions{ margin-top:14px; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap }
  .afp-btn{ appearance:none; border:1px solid var(--line); border-radius:var(--radius); padding:.7rem 1rem; cursor:pointer; font-weight:700; color:var(--text); background:var(--panel-2) }
  .afp-btn-primary{ background: var(--accent); border-color: transparent }
  .afp-btn:disabled{ opacity:.6; cursor:not-allowed }

  /* Compact checkboxes in chips */
  .opt-row input[type="checkbox"]{ width:16px; height:16px; min-height:0; padding:0; margin:0 8px 0 0; flex:0 0 auto; accent-color: var(--accent) }

  /* Inline note + bold ETA value */
  #rwyDefaultNote{ font-size:11px; color:var(--muted); display:inline; margin-left:6px }
  /* Make ETA preview larger and more visible */
#etaPreview {
  font-size: 18px;              /* Slightly bigger */
  font-weight: 800;
  color: var(--text);
  text-align: center;
  background: rgba(56,189,248,.10);
  border: 1px solid rgba(56,189,248,.35);
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

/* Highlight only the time in accent color */
#etaPreview .eta-time {
  color: var(--accent);
}


  /* ICAO input hint */
  .hint{font-size:12px;color:var(--muted);margin-top:6px}
  .hint[aria-hidden="true"]{display:none}
  .invalid{border-color:rgba(248,113,113,.7) !important}
  main, .wrap, header { padding-top: 40px; }

  /* ====== Class by desired inputs ====== */
  #commercialInputs input{
    width:68px; min-height:36px; font-size:14px; text-transform:uppercase;
  }
  #commercialChip[aria-disabled="true"] #commercialInputs input{ display:none }
  /* Blue highlight for the 6 commercial ICAO boxes when enabled */
#commercialChip[aria-disabled="false"] #commercialInputs input{
  border-color: var(--accent);
  background: rgba(56,189,248,.08);               /* subtle blue fill */
  box-shadow: inset 0 0 0 1px rgba(56,189,248,.35);
}

/* Keep the familiar blue focus ring on focus */
#commercialChip[aria-disabled="false"] #commercialInputs input:focus{
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* (already present) hides the boxes when disabled */
#commercialChip[aria-disabled="true"] #commercialInputs input{
  display:none;
}
/* Ensure commercial inputs always use the dark theme (not white) */
#commercialInputs input{
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  appearance: none;
  -webkit-appearance: none;
  background-clip: padding-box;
}
/* Default placeholder color for Alt1..Alt6 slots */
#commercialInputs input::placeholder{
  color: var(--muted);
  opacity: 0.85;
}

/* When the commercial filter is active, make Alt1..Alt6 placeholder text white */
#commercialChip[aria-disabled="false"] #commercialInputs input::placeholder{
  color: #81cace;
  opacity: 1;
}


/* Keep a subtle blue accent when enabled */
#commercialChip[aria-disabled="false"] #commercialInputs input{
  border-color: var(--accent);
  background: rgba(56,189,248,.08); /* dark-ish blue tint over panel */
  box-shadow: inset 0 0 0 1px rgba(56,189,248,.35);
}

/* Disabled state stays dark */
#commercialInputs input[disabled]{
  background: var(--panel-2);
  color: var(--muted);
}

/* Tame browser autofill (iOS/Chrome) which can force light backgrounds */
#commercialInputs input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 30px var(--panel-2) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
}
/* Desktop/tablet: allow wrapping so they stay inside the card */
#commercialInputs{
  gap: 6px;
  flex-wrap: wrap;               /* was: nowrap */
}

#commercialInputs input{
  width: 68px;
  min-height: 36px;
  font-size: 14px;
  text-transform: uppercase;
}


/* Mobile: stack vertically, full width */
@media (max-width:640px){
  #commercialInputs{
    flex-direction: column;
    flex-wrap: nowrap;
    gap:8px;
  }
  #commercialInputs input{
    width:100% !important;
  }
  /* When user clicks inside ALT1..ALT6, hide placeholder immediately */
#commercialInputs input:focus::placeholder {
  color: transparent !important;
}

}
/* ===== Greyed-out filter chip when disabled ===== */
.chip.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.8);
}
/* Greyed-out appearance for disabled radius input */
input.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.8);
}
/* Ensure the "Not applicable..." text is visible when disabled */
/* When radius shows text, prevent overflow clipping on small screens */
/* Radius field appearance when "Class by commercial" is active */
#radius:disabled,
#radius:read-only {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-style: italic;
  color: var(--muted) !important;
  background: var(--panel-2) !important;
  /* you can skip cursor altogether, or use default */
}



/* Color the ETA inside wx-now */
.wx-now .eta{
  color: var(--accent);
  font-weight: 800;
}

/* Base layout: 2 rows everywhere (desktop + mobile) */
.wx-now{
  display: flex;
  flex-direction: column;   /* ETA row on top, WX row below */
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

/* ===== Row 1: ETA at ALTERNATE (bigger) ===== */
.wx-row-eta{
  width: 100%;
}

.wx-row-eta .eta-chip{
  font-size: 1.4rem;   /* ✅ bigger ETA text */
  font-weight: 800;
}

/* ===== Row 2: VIS / WIND / CEIL / CB ===== */
.wx-row-values{
  display: flex;       /* ✅ make it a flex row */
  flex-direction: row;
  flex-wrap: wrap;     /* ✅ allow wrapping INSIDE the card */
  gap: 4px;
  width: 100%;
}

.wx-row-values .wx-chip{
  display: inline;
  white-space: normal; /* ✅ text can wrap, won’t overflow card */
  font-size: 1.3rem;   /* bigger letters for WX */
  font-weight: 600;
}

/* bullets only between WX chips on the second line */
.wx-row-values .wx-chip + .wx-chip::before{
  content: "•";
  margin: 0 6px;
  opacity: .8;
}

/* Optional tiny tweak on very small screens */
@media (max-width:640px){
  .wx-row-eta .eta-chip{
    font-size: 1.5rem;
  }
}


/* ===== Visibility color codes ===== */
.vis-green {
  color: #34d399; /* Tailwind emerald-400 — soft green */
  font-weight: 800;
}

.vis-orange {
  color: #fbbf24; /* amber-400 — warm orange */
  font-weight: 800;
}

.vis-red {
  color: #f87171; /* red-400 — pleasant red */
  font-weight: 800;
}

.vis-magenta {
  color: #ff1aff; /* pure vivid magenta */
  font-weight: 900;
  text-shadow: 0 0 6px rgba(255, 26, 255, 0.5);
}

/* ===== Wind color codes ===== */
.wind-green {
  color: #34d399; /* calm – same emerald green */
  font-weight: 800;
}

.wind-yellow {
  color: #facc15; /* vivid yellow – readable on dark */
  font-weight: 800;
}

.wind-red {
  color: #f87171; /* strong red for dangerous winds */
  font-weight: 800;
}

/* ===== Guided tour (spotlight) ===== */
.tour-spotlight {
  position: relative !important;
  z-index: 99998 !important;
  border-radius: 12px;
  outline: 2px solid var(--accent);
  box-shadow:
    0 0 0 2000px rgba(5,10,20,.78),          /* dim rest of page */
    0 8px 28px rgba(0,0,0,.45);              /* lift target */
  transition: box-shadow .2s ease, outline-color .2s ease;
}

#tour-popover {
  position: fixed;
  z-index: 99999;
  max-width: min(340px, 92vw);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

#tour-popover[hidden] { display: none !important; }

#tour-popover .tour-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
}

#tour-popover .tour-body {
  margin: 0 0 10px;
  font-size: 14px;
  color: #e6edf7;
}

#tour-popover .tour-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

#tour-popover .tour-actions .afp-btn {
  min-width: 90px;
}

@media (max-width:640px){
  .tour-spotlight { border-radius: 10px; }
}

/* Badge for "Commercial rank" (C#) */
.tag.c-badge,
.tag.alt-badge {
  background: rgba(56,189,248,.14);
  border-color: rgba(74,225,223,.8);
  color: #e6edf7;
  font-weight: 800;
}



/* Beautiful red SKIP button */
#tour-skip {
  background: linear-gradient(90deg, #f97373, #fb7185) !important;
  color: #111827 !important;
  border: none !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .1s ease, opacity .15s ease;
}

/* Nice hover + active states (optional but recommended) */
#tour-skip:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

#tour-skip:active {
  transform: translateY(0);
  opacity: 1;
}

/* Radius slider + floating value */
.radius-scale-wrap {
  position: relative;
  margin-top: 6px;
}

/* "XXX NM" above the dot, moves via JS */
.radius-scale-value {
  position: absolute;
  top: -18px;              /* vertical distance above the track */
  left: 50%;               /* will be updated in JS */
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  pointer-events: none;
  white-space: nowrap;
}

/* Compact minimal tour card */
#tour-popover .tour-body { display: none !important; }
#tour-popover { padding-bottom: 10px; }
#tour-popover .tour-title { margin-bottom: 6px; }
#tour-popover .tour-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
#tour-back, #tour-next, #tour-skip {
  padding: 6px 10px;
  line-height: 1;
  border-radius: 999px;
  font-weight: 600;
}

/* Force the three tour buttons onto a single line */
.tour-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 6px;
  width: 100%;
  text-align: center;
}

/* Compact styling for the buttons */
#tour-back, #tour-next, #tour-skip {
  padding: 6px 12px;
  line-height: 1;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

/* WIN OVER SPECIFICITY: force one line, centered, compact */
#tour-popover .tour-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;      /* no wrapping -> stays on one line */
}

/* Make buttons small enough so they don't wrap */
#tour-popover .tour-actions .afp-btn {
  min-width: auto !important;        /* override the 90px min-width */
  padding: 6px 12px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* Reorder to visually show: ←  SKIP  →  (DOM order is Skip, Back, Next) */
#tour-back { order: 1; }
#tour-skip { order: 2; }
#tour-next { order: 3; }

/* Lighter style for METAR card to differentiate from TAF */
.metar.metar-box {
  background: rgba(120, 70, 10, 0.35);
  border: 1px solid rgba(56, 189, 248, 0.2);
}
/* Collapsible TAF/METAR block */
.wx-raw {
  margin-top: 10px;
  border-radius: var(--radius);
  border: 1px dashed rgba(148,163,184,.35);
  background: rgba(15,23,42,.6);
  padding: 8px 10px;
}

.wx-raw summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Hide default marker */
.wx-raw summary::marker,
.wx-raw summary::-webkit-details-marker {
  display: none;
}

/* Tiny arrow indicator */
.wx-raw summary::after {
  content: "▾";
  font-size: 11px;
  margin-left: 8px;
  opacity: .8;
}

.wx-raw[open] summary::after {
  transform: rotate(180deg);
}

/* Color theme for the "TAF & METAR" expand card */
.wx-raw {
  background: rgba(51, 79, 145, 0.55);          /* darker blue-ish panel */
  border: 1px solid rgba(148, 163, 184, 0.45); /* slightly stronger border */
}

.wx-raw summary {
  color: #9ec3ff;        /* text color of TAF & METAR label */
}

.wx-raw summary:hover {
  color: #cfe2ff;        /* lighter on hover */
}

.taf-outside {
  color: var(--danger);
  font-weight: 800;
  text-transform: uppercase;
}

.metar{
  display:block;
  width:100%;
  max-width:100%;
  background: rgba(45, 187, 248, 0.705);
  border:1px dashed rgba(23, 169, 226, 0.733);
  border-radius:var(--radius);
  padding:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:13.25px;line-height:1.45;
  overflow-x:auto;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.taf{
  display:block;
  width:100%;
  max-width:100%;
  background: var(--panel); /* or another color */
  border:1px dashed rgba(148,163,184,.35);
  border-radius:var(--radius);
  padding:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:13.25px;line-height:1.45;
  overflow-x:auto;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
}