/* Aerobatics Hub — 14 CFR 91.303 Airspace Viewer.
   Palette: black / charcoal / orange.

   NOT rebranded: #b91c1c, the prohibition mask. Red means 'prohibited' on
   every aeronautical chart in existence, and orange sits right next to it in
   hue. A brand palette is not a good enough reason to blur the one
   distinction this map exists to make. */
:root{--bg:#000000;--panel:#121212;--line:#2b2b2b;--fg:#ededed;--muted:#8a8a8a;--panel-w:352px;}
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
    font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow:hidden}
  #masthead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
  #masthead h1{margin:0;font-size:14px;font-weight:600}
  .scope{margin:0;font-size:11px;color:var(--muted)}
  .title{display:flex;align-items:center;gap:14px}
  .mh-logo{width:132px;height:auto;flex:0 0 auto}
  .mh-text{display:flex;align-items:baseline;gap:10px}
  #cycle{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
  #warning{padding:9px 16px;background:#2a1a12;border-bottom:1px solid #b9762c;
    font-size:13px;color:#fed7aa}
  #warning strong{color:#ffedd5}
  #warning em{font-style:normal;text-decoration:underline}
  /* Wide screens: the toggle is plain inline text and the "Hide" link is absent,
     so the banner reads as one continuous sentence exactly as before. */
  #warn-toggle{all:unset;display:inline}
  #warn-hide{display:none}
  @media (max-width:720px){
    /* Small screens: tighter padding and marginally smaller text on both the
       caution banner and the right panel; the panel is also halved in width so
       the map keeps most of the screen. The headline is a full-width tappable
       row and the detail folds beneath it, hidden until #warning gets .open.
       A small "Hide" link at the foot of the detail minimises it. */
    :root{--panel-w:176px}
    #warning{display:flex;flex-wrap:wrap;align-items:baseline;font-size:11px;padding:6px 12px}
    #warn-toggle{display:block;flex:1 1 100%;cursor:pointer}
    #warn-detail{flex:1 1 100%;margin-top:6px}
    #warning:not(.open) #warn-detail{display:none}
    #warn-hide{display:block;width:fit-content;margin:8px auto 0;padding:2px 6px;
      font:inherit;font-size:11px;color:#f0c9a0;background:none;border:0;
      text-decoration:underline;cursor:pointer}
    #panel{padding:10px;font-size:11px}
    /* Header right side stacks into rows: 14 CFR (h1) on top, Continental United
       States (.scope) below it, FAA cycle on its own full-width row beneath. */
    #masthead{flex-wrap:wrap;align-items:flex-start;row-gap:3px}
    .mh-text{flex-direction:column;align-items:flex-start;gap:0}
    #cycle{flex:1 1 100%;text-align:center;color:#6f6f6f}
  }
  main{display:flex;height:calc(100% - 84px);position:relative}
  #mapwrap{position:relative;flex:1;height:100%}
  #map{position:absolute;inset:0}
  /* The mask canvas sits directly on top of the map canvas and is composited
     ONCE at this opacity. Because its own fills are drawn at opacity 1, two
     overlapping restrictions inside it cannot blend darker — the union is
     flat by construction. Non-interactive: all clicks go to the map beneath. */
  #mask{position:absolute;inset:0;pointer-events:none;opacity:.50;
    transition:opacity .15s}
  #panel{width:var(--panel-w);flex:0 0 var(--panel-w);height:100%;overflow-y:auto;padding:16px;
    background:var(--panel);border-left:1px solid var(--line)}
  /* Collapse tab riding the panel's left edge; jumps to the screen edge when the
     panel is hidden. The map is flex:1, so hiding the panel widens it — the JS
     calls map.resize() so MapLibre repaints at the new width. */
  #panel-toggle{position:absolute;top:50%;right:var(--panel-w);transform:translateY(-50%);
    z-index:5;width:22px;height:52px;display:flex;align-items:center;justify-content:center;
    padding:0;font-size:17px;line-height:1;color:var(--muted);cursor:pointer;
    background:var(--panel);border:1px solid var(--line);border-right:0;border-radius:5px 0 0 5px}
  #panel-toggle:hover{color:var(--fg)}
  main.panel-hidden #panel{display:none}
  main.panel-hidden #panel-toggle{right:0}
  .group{margin-bottom:22px}
  .group h2{margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted)}
  .group-note{margin:0 0 10px;font-size:12px;color:var(--muted)}
  .layer{display:flex;align-items:flex-start;gap:9px;padding:7px 0;cursor:pointer}
  .layer input{margin-top:3px;accent-color:#efa14a}
  .sw{flex:0 0 auto;width:15px;height:15px;margin-top:2px;border-radius:3px}
  /* All three share one FILL colour, because they share one operational meaning:
     do not be here. They differ only in outline, which is how the map shows that
     a Prohibited Area is a categorically stronger rule. */
  .sw-airspace{background:rgba(185,28,28,.5);border:1px solid #efa14a}
  .sw-airways{background:rgba(185,28,28,.5);border:1px solid rgba(185,28,28,.5)}
  .sw-prohibited{background:rgba(185,28,28,.6);border:2px solid #7f1d1d}

  .caution{padding:11px 12px;font-size:12px;line-height:1.5;color:#f0c9a0;
    background:#2a1a10;border-left:3px solid #efa14a;border-radius:0 4px 4px 0}
  .caution strong{color:#ffd7a8}
  .caution p{margin:7px 0 0}
  .caution em{font-style:normal;text-decoration:underline}

  .ro-noflight{color:#fca5a5;text-transform:uppercase;letter-spacing:.04em}
  .ro-caution{margin-top:8px;padding-top:7px;border-top:1px solid #2b2b2b;color:#f0c9a0}
  .ro-caution strong{color:#ffd7a8}
  .tag-noflight{color:#fecaca;background:#5b1414}
  .aptnoflight{margin-top:9px;padding:5px 8px;font-size:12px;font-weight:700;color:#fecaca;
    background:#5b1414;border-radius:3px;letter-spacing:.03em}
  .lbl{font-size:13px}
  .lbl strong{display:block;font-size:11px;font-weight:600;color:var(--muted);
    font-variant-numeric:tabular-nums}
  .chartstat{margin-top:8px;padding:6px 9px;border-radius:3px;font-size:11px;
    font-family:ui-monospace,SFMono-Regular,monospace}
  .cs-ok{background:#0f1f18;border-left:2px solid #15803d;color:#86efac}
  .cs-wait{background:#171717;border-left:2px solid #3a3a3a;color:#8a8a8a}
  .cs-fail{background:#2a1416;border-left:2px solid #b91c1c;color:#fca5a5}

  /* ---------- airport search ---------- */
  .group-note code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;
    padding:1px 4px;background:#1f1f1f;border-radius:2px;color:#cfcfcf}
  .searchbox{position:relative}
  .searchbox input{width:100%;padding:8px 28px 8px 10px;font:inherit;font-size:13px;
    color:var(--fg);background:#0d0d0d;border:1px solid var(--line);border-radius:4px;
    text-transform:uppercase}
  .searchbox input::placeholder{color:#666666;text-transform:none}
  .searchbox input:focus{outline:none;border-color:#efa14a}
  .searchbox button{position:absolute;right:6px;top:50%;transform:translateY(-50%);
    width:20px;height:20px;padding:0;font-size:16px;line-height:1;cursor:pointer;
    color:var(--muted);background:transparent;border:0}
  .searchbox button:hover{color:var(--fg)}

  .results{list-style:none;margin:8px 0 0;padding:0;max-height:260px;overflow-y:auto;
    border:1px solid var(--line);border-radius:4px;background:#0d0d0d}
  .results li{padding:7px 10px;cursor:pointer;border-bottom:1px solid #242424;font-size:12px}
  .results li:last-child{border-bottom:0}
  .results li:hover{background:#1e1e1e}
  .rid{display:inline-block;min-width:42px;font-family:ui-monospace,monospace;font-weight:700;
    color:#f6c88d}
  .ricao{margin-left:4px;font-family:ui-monospace,monospace;font-size:11px;color:#8a8a8a}
  .rname{display:block;margin-top:1px;color:var(--fg)}
  .rcity{color:var(--muted);font-size:11px}
  .flag{display:inline-block;margin-left:5px;padding:0 4px;font-size:9px;font-weight:600;
    text-transform:uppercase;letter-spacing:.04em;color:#8a8a8a;background:#1f1f1f;border-radius:2px}

  .aptcard{margin-top:10px;padding:11px;background:#0d0d0d;border:1px solid var(--line);
    border-radius:4px}
  .aptid{font-family:ui-monospace,monospace;font-size:16px;font-weight:700;color:#f6c88d}
  .aptname{margin-top:1px;font-size:13px}
  .aptmeta{margin-top:1px;font-size:11px;color:var(--muted)}
  .apthit{margin-top:9px;padding:5px 8px;font-size:12px;font-weight:600;color:#f6c88d;
    background:#241a0e;border-radius:3px}
  .aptnone{margin-top:9px;padding:5px 8px;font-size:12px;color:#8a8a8a;background:#171717;
    border-radius:3px}
  .aptlist{margin:7px 0 0;padding-left:16px;font-size:12px}
  .aptlist li{margin-bottom:4px}
  .aptlist code{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted)}
  .aptcaveat{margin:9px 0 0;font-size:11px;line-height:1.45;color:#d8b184}

  .aptpin{width:30px;height:30px;border-radius:50%;background:rgba(59,130,246,.5);
    border:2px solid #1e3a8a;box-shadow:0 0 0 3px rgba(59,130,246,.3);cursor:pointer;
    position:relative}
  /* Sonar ping — a ring that grows out of the pin and fades, every 2s. */
  .aptpin::after{content:"";position:absolute;inset:-3px;border-radius:50%;
    border:3px solid rgba(23,37,84,.95);animation:aptping 2s ease-out infinite}
  @keyframes aptping{0%{transform:scale(1);opacity:.95}100%{transform:scale(2.8);opacity:0}}
  @media (prefers-reduced-motion:reduce){.aptpin::after{animation:none;display:none}}

  #coverage{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;
    max-width:520px;padding:9px 14px;font-size:12px;line-height:1.5;color:#fecaca;
    background:rgba(42,20,22,.97);border:1px solid #b91c1c;border-radius:5px}
  #coverage strong{color:#fff}
  .unmapped{margin:0 0 10px;padding-left:16px;font-size:12px;color:var(--muted)}
  .unmapped li{margin-bottom:5px}
  .unmapped strong{color:#cfcfcf;font-weight:600;font-variant-numeric:tabular-nums}
  #provenance{padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
  .notfornav{margin:10px 0 0;font-size:12px;color:#d8b184}
  .notfornav strong{color:#fca5a5}
  #readout{position:absolute;left:16px;bottom:16px;max-width:460px;padding:12px 14px;
    background:rgba(22,26,33,.96);border:1px solid var(--line);border-radius:5px}
  .ro-head{font-size:13px;font-weight:600;margin-bottom:7px;padding-right:20px}
  .ro-close{position:absolute;top:6px;right:8px;width:22px;height:22px;padding:0;
    display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;
    color:var(--muted);background:transparent;border:0;border-radius:3px;cursor:pointer}
  .ro-close:hover{color:var(--fg);background:rgba(255,255,255,.08)}
  .ro-hit{color:#f6c88d}.ro-none{color:#8a8a8a}
  .ro-body{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
  .ro-body strong{color:#ededed}
  .ro-list{margin:0;padding-left:16px;font-size:12px}
  .ro-list li{margin-bottom:4px}
  .ro-list code{font-size:11px;color:var(--muted);font-family:ui-monospace,monospace}
  .tag{display:inline-block;padding:0 5px;font-size:10px;font-weight:600;text-transform:uppercase;
    letter-spacing:.05em;border-radius:2px;color:#f6c88d;background:#241a0e}
  /* ---------- startup dialog ---------- */
  #startup{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
    padding:20px;background:rgba(10,12,15,.93);backdrop-filter:blur(3px)}
  .su-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);
    border-radius:8px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55)}
  .su-head{padding:26px 22px 18px;border-bottom:1px solid var(--line);text-align:center;
    background:#000}
  .su-logo{display:block;width:230px;height:auto;margin:0 auto 16px}
  .su-head h1{margin:0;font-size:15px;font-weight:600;letter-spacing:.01em}
  .su-head p{margin:4px 0 0;font-size:12px;color:var(--muted)}
  .su-body{padding:18px 22px 6px}
  .su-body label{display:block;margin-bottom:6px;font-size:11px;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  #home{width:100%;padding:11px 12px;font:inherit;font-size:16px;letter-spacing:.06em;
    text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,monospace;color:var(--fg);
    background:#0d0d0d;border:1px solid var(--line);border-radius:5px}
  #home::placeholder{letter-spacing:normal;text-transform:none;color:#666666;
    font-family:-apple-system,sans-serif;font-size:14px}
  #home:focus{outline:none;border-color:#efa14a}
  #su-results{list-style:none;margin:8px 0 0;padding:0;max-height:190px;overflow-y:auto;
    border:1px solid var(--line);border-radius:5px;background:#0d0d0d}
  #su-results li{padding:8px 11px;cursor:pointer;border-bottom:1px solid #242424;font-size:12px}
  #su-results li:last-child{border-bottom:0}
  #su-results li:hover,#su-results li.sel{background:#232323}
  #su-err{margin-top:8px;padding:8px 10px;font-size:12px;color:#fca5a5;background:#2a1416;
    border-left:2px solid #b91c1c;border-radius:0 3px 3px 0}
  .su-actions{padding:14px 22px 18px}
  #su-view{display:block;width:100%;padding:12px 22px;font:inherit;font-size:14px;
    font-weight:700;cursor:pointer;color:#000;background:#efa14a;border:0;border-radius:5px;
    letter-spacing:.02em}
  #su-view:hover:not(:disabled){background:#f2b06a}
  #su-view:disabled{opacity:.35;cursor:not-allowed}
  /* Progress details are centred under the card. */
  .su-foot{padding:14px 22px 18px;border-top:1px solid var(--line);background:#0d0d0d;
    text-align:center}
  .su-bar{height:3px;background:#2b2b2b;border-radius:2px;overflow:hidden}
  .su-bar i{display:block;height:100%;width:0;background:#efa14a;transition:width .35s}
  #su-status{margin-top:9px;font-size:11px;color:var(--muted);
    font-family:ui-monospace,SFMono-Regular,monospace}
  #su-status.ready{color:#efa14a}

  .err{max-width:520px;padding:16px;font-size:13px;line-height:1.6;color:#fca5a5;
    background:#2a1416;border:1px solid #b91c1c;border-radius:5px}
  .err code{display:block;margin-top:8px;padding:8px;background:#1a0f11;border-radius:3px;
    color:#fecaca;font-family:ui-monospace,monospace;font-size:12px}
  .err .lbl2{display:inline-block;min-width:92px;color:#f87171;font-size:11px;
    text-transform:uppercase;letter-spacing:.05em;font-weight:600}

/* ---------- public build additions ---------- */
.dim{color:var(--muted)}
/* Zoom read-out, styled to sit flush under the +/- buttons it follows. */
.maplibregl-ctrl-group.zoom-pct{min-width:29px;padding:5px 4px;text-align:center;
  font:600 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#333;cursor:default}
#mapwrap{position:relative;flex:1;height:100%}