/* Mobile-first, sunlight-readable, no external assets. */
:root {
  --bg: #0e1116; --panel: #171c24; --ink: #e8edf4; --dim: #9aa7b8;
  --ok: #34d399; --warn: #fbbf24; --bad: #f87171; --info: #60a5fa;
  --accent: #4ade80;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { max-width: 640px; margin: 0 auto; padding: 0 14px 40px; }
a { color: var(--info); text-decoration: none; }

header.top {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid #222a35;
}
.brand { font-weight: 800; font-size: 18px; color: var(--ink); letter-spacing: -0.5px; }
.brand span { color: var(--accent); }
.mini-search { display: flex; gap: 6px; }
.mini-search input { width: 150px; }
input, select, button {
  font: inherit; border-radius: 8px; border: 1px solid #2c3644;
  background: var(--panel); color: var(--ink); padding: 8px 10px;
}
button { cursor: pointer; background: #24466e; border-color: #2f5a88; }
button:active { transform: translateY(1px); }

.hero { text-align: center; padding: 48px 0 20px; }
.hero h1 { font-size: 28px; margin: 0 0 6px; }
.hero .sub { color: var(--dim); margin: 0 auto 24px; max-width: 42ch; }
.big-search { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.big-search input { flex: 1; font-size: 18px; text-transform: uppercase; }
.results { list-style: none; padding: 0; text-align: left; }
.results li { padding: 8px 0; border-bottom: 1px solid #222a35; }

.airport-head h1 { margin: 18px 0 2px; font-size: 22px; }
.apname { color: var(--dim); font-weight: 400; font-size: 16px; }
.etaline { color: var(--warn); margin: 2px 0; }

/* THE ANSWER — enormous, state-colored, degraded states equally loud */
.answer { text-align: center; padding: 8px 0 4px; }
.numeral {
  font-size: clamp(96px, 34vw, 170px); font-weight: 900; line-height: 1;
  letter-spacing: -4px; color: var(--accent);
}
.numeral.split { font-size: clamp(64px, 21vw, 110px); color: var(--warn); }
.numeral.split .amp { color: var(--dim); padding: 0 6px; }
.numeral.unknown-mark { color: var(--bad); }
.statebar {
  display: inline-block; margin-top: 4px; padding: 3px 14px; border-radius: 999px;
  font-weight: 700; letter-spacing: 1px; font-size: 14px;
}
.state-confirmed .statebar { background: #0b3a25; color: var(--ok); }
.state-likely .statebar { background: #0b3a25; color: var(--ok); }
.state-probable .statebar { background: #2c2a10; color: var(--warn); }
.state-wind_inferred .statebar { background: #1e2a3f; color: var(--info); }
.state-split .statebar { background: #3a2c0b; color: var(--warn); }
.state-unknown .statebar { background: #3a1214; color: var(--bad); }
.statebar .pct { margin-left: 8px; }
.headline { font-size: 18px; margin: 12px 0 4px; font-weight: 600; }
.caveat { color: var(--warn); margin: 4px auto; max-width: 48ch; font-size: 14px; }
.dials { color: var(--dim); font-size: 13px; }
.dial { padding: 2px 8px; border: 1px solid #2c3644; border-radius: 999px; margin: 0 3px; }

.diagram { text-align: center; margin: 12px 0; }
.diagram svg { width: min(260px, 70vw); height: auto; }
.ring { fill: none; stroke: #232b37; }
.north { fill: var(--dim); font-size: 10px; text-anchor: middle; }
.rwy { stroke: #6e7a8a; stroke-width: 6; stroke-linecap: butt; }
.rwy.closed { stroke: #4b2126; stroke-dasharray: 4 3; }
/* dark halo (paint-order stroke) keeps labels readable over runway strokes */
.rl { fill: #cfd7e2; font-size: 11px; font-weight: 700;
      text-anchor: middle; dominant-baseline: middle;
      paint-order: stroke; stroke: var(--bg); stroke-width: 3.5px;
      stroke-linejoin: round; }
.rl.hot { fill: var(--accent); font-size: 13px; }
.wind { stroke: var(--info); stroke-width: 2.5; }
.windhead { fill: var(--info); }
.windline { color: var(--dim); font-size: 14px; }
.listenline { margin: 8px 0 0; }
.liveatc {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: #1e2a3f; color: var(--info); font-weight: 700; font-size: 14px;
  border: 1px solid #2f5a88;
}
.liveatc:active { transform: translateY(1px); }
.listenline .fine { display: block; margin-top: 3px; }
.age.stale { color: var(--bad); font-weight: 700; }

.runways { margin: 10px 0; }
.rwycard { background: var(--panel); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.rwycard.closedcard { opacity: 0.75; border: 1px solid #4b2126; }
.rwyrow { display: flex; align-items: baseline; gap: 10px; }
.rwyname { font-size: 22px; font-weight: 800; min-width: 52px; }
.prob { font-size: 18px; font-weight: 700; color: var(--accent); }
.closedtag { color: var(--bad); font-weight: 800; letter-spacing: 1px; }
.meta { color: var(--dim); font-size: 13px; }
.meta .tail { color: var(--bad); }
.calmtag { color: var(--warn); font-weight: 600; }
.bar { height: 5px; background: #232b37; border-radius: 3px; margin-top: 8px; }
.fill { height: 100%; background: var(--accent); border-radius: 3px; }
.closedcard .fill { background: var(--bad); }

/* NOTAMs */
.notams h2 { font-size: 16px; margin: 18px 0 8px; }
.notamcard { background: var(--panel); border-radius: 10px; padding: 8px 12px;
             margin: 8px 0; border-left: 3px solid #2c3644; }
.notamcard.notam-closed { border-left-color: var(--bad); }
.notamhead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.notamclass { font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
              padding: 1px 7px; border-radius: 4px; background: #2c3644; color: var(--dim); }
.nc-rwy_closed { background: #3a1214; color: var(--bad); }
.nc-apch_ots { background: #1e2a3f; color: var(--info); }
.nc-lighting, .nc-surface, .nc-displaced { background: #2c2a10; color: var(--warn); }
.notamrwy { font-weight: 800; }
.notamuntil { color: var(--dim); font-size: 12px; }
.notamtext { margin: 6px 0 2px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
             color: var(--dim); white-space: pre-wrap; word-break: break-word;
             max-height: 8.5em; overflow-y: auto; }

details.why { background: var(--panel); border-radius: 10px; padding: 10px 14px; margin: 14px 0; }
details.why summary { cursor: pointer; font-weight: 700; }
details.why h3 { margin: 12px 0 4px; font-size: 15px; }
details.why ul { margin: 4px 0; padding-left: 18px; }
details.why li { margin: 4px 0; font-size: 14px; }
.src { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 4px;
       background: #2c3644; margin-right: 4px; letter-spacing: 0.5px; }
.src-atis { background: #0b3a25; color: var(--ok); }
.src-adsb_op { background: #1e2a3f; color: var(--info); }
.src-wind, .src-taf_wind { background: #1e2a3f; color: var(--info); }
.src-prior, .src-pattern { background: #2c2a10; color: var(--warn); }
.src-notam { background: #3a1214; color: var(--bad); }
.wt { color: var(--dim); font-size: 12px; margin-left: 6px; }
li .age { color: var(--dim); font-size: 12px; margin-left: 6px; }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; color: var(--dim); font-weight: 600; }
td, th { padding: 5px 8px; border-bottom: 1px solid #232b37; }
.rwycell { font-weight: 800; }
.sources .st-unavailable td, .sources .st-error td { color: var(--warn); }
.sources .st-not_configured td { color: var(--dim); }
.ops h2, .feedback h2 { font-size: 16px; margin: 18px 0 8px; }
.none { color: var(--dim); }

.feedback .fbrow { display: flex; gap: 8px; }
.genline { color: var(--dim); font-size: 12px; text-align: center; margin-top: 22px; }

footer { border-top: 1px solid #222a35; margin-top: 30px; padding: 14px; text-align: center; }
.disclaimer { color: var(--warn); font-weight: 700; margin: 0 0 4px; }
.fine { color: var(--dim); font-size: 12px; margin: 2px 0; }

/* favorites dashboard */
.favs h2 { font-size: 15px; color: var(--dim); margin: 16px 0 8px;
           text-transform: uppercase; letter-spacing: 1px; }
.favgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
           gap: 10px; }
.favcard { position: relative; display: block; background: var(--panel);
           border-radius: 12px; padding: 12px 12px 10px; color: var(--ink);
           border: 1px solid #222a35; }
.favcard:active { transform: translateY(1px); }
.favtop { display: flex; justify-content: space-between; align-items: baseline; }
.favident { font-weight: 800; letter-spacing: 0.5px; }
.favstate { font-size: 10px; font-weight: 800; letter-spacing: 1px;
            padding: 1px 7px; border-radius: 999px; }
.favcard.state-confirmed .favstate, .favcard.state-likely .favstate
  { background: #0b3a25; color: var(--ok); }
.favcard.state-probable .favstate, .favcard.state-split .favstate
  { background: #2c2a10; color: var(--warn); }
.favcard.state-wind_inferred .favstate { background: #1e2a3f; color: var(--info); }
.favcard.state-unknown .favstate { background: #3a1214; color: var(--bad); }
.favrwy { font-size: 44px; font-weight: 900; line-height: 1.1; letter-spacing: -1px;
          color: var(--accent); margin: 2px 0; }
.favcard.state-split .favrwy { font-size: 30px; color: var(--warn); }
.favcard.state-unknown .favrwy { color: var(--bad); }
.favpct { font-size: 15px; font-weight: 700; color: var(--dim); margin-left: 6px; }
.favmeta { font-size: 12px; color: var(--dim); }
.favline { font-size: 12px; color: var(--dim); margin-top: 6px;
           overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
           -webkit-box-orient: vertical; }
.unfav { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
         padding: 0; line-height: 1; font-size: 14px; border-radius: 50%;
         background: transparent; border: none; color: var(--dim); }
.unfav:hover { color: var(--bad); }
.hero-compact { padding-top: 20px; }
.hero-compact h1 { font-size: 20px; }

#favstar { background: transparent; border: none; font-size: 24px; padding: 0 4px;
           color: var(--dim); cursor: pointer; vertical-align: middle; }
#favstar.on { color: var(--warn); }

/* typeahead */
.ac-wrap { position: relative; flex: 1; display: flex; }
.ac-wrap input { flex: 1; width: 100%; }
.ac-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  margin: 0; padding: 4px; list-style: none; background: var(--panel);
  border: 1px solid #2c3644; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5); text-align: left;
  max-height: 320px; overflow-y: auto;
}
.ac-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer;
              font-size: 14px; color: var(--dim); white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }
/* fixed ident column so names align regardless of code length (W56 vs KVUO) */
.ac-list li b { color: var(--ink); font-size: 15px; letter-spacing: 0.5px;
                display: inline-block; min-width: 3.4em; }
.ac-list li.active { background: #24466e; color: var(--ink); }
.ac-list li.ac-empty { cursor: default; color: var(--dim); font-style: italic; }
/* keep the header search a fixed width; the wrapper must not stretch it */
.mini-search .ac-wrap { flex: 0 0 160px; width: 160px; }

.metricspage h1 { font-size: 22px; }
.insufficient { background: var(--panel); border: 1px dashed #2c3644;
                border-radius: 10px; padding: 16px; margin: 14px 0; }
.insufficient h2 { color: var(--warn); margin-top: 0; }
.nores { color: var(--dim); }

/* nearby airports: a real navigation aid, and how a crawler reaches the tail */
.nearby { margin: 22px 0 8px; }
.nearby h2 { font-size: 16px; margin: 0 0 8px; }
.nearby ul { list-style: none; padding: 0; margin: 0;
             display: flex; flex-wrap: wrap; gap: 8px; }
.nearby a { display: flex; align-items: baseline; gap: 8px;
            background: var(--panel); border-radius: 8px; padding: 7px 11px;
            text-decoration: none; color: var(--fg); font-weight: 700; }
.nearby a:hover, .nearby a:focus-visible { outline: 2px solid var(--accent); }
.nbname { color: var(--dim); font-weight: 400; font-size: 13px;
          max-width: 16ch; overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap; }
.nbdist { color: var(--dim); font-weight: 400; font-size: 12px; }
.explainer { margin: 26px 0; }
.explainer h2 { font-size: 17px; margin: 0 0 8px; }
.explainer ul { margin: 8px 0; padding-left: 20px; line-height: 1.6; }
.explainer li { margin: 3px 0; }

/* airport directory */
.dir h1 { margin-bottom: 4px; }
.statelist { list-style: none; padding: 0; display: grid;
             grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.statelist a { display: flex; justify-content: space-between; gap: 8px;
               background: var(--panel); border-radius: 8px; padding: 9px 12px;
               text-decoration: none; color: var(--fg); }
.statelist a:hover, .statelist a:focus-visible { outline: 2px solid var(--accent); }
.statelist .cnt { color: var(--dim); font-size: 13px; }
.dirtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.dirtable th, .dirtable td { text-align: left; padding: 6px 8px;
                             border-bottom: 1px solid #1e2532; }
.dirtable a { color: var(--fg); }
.dirtags .tag { background: #1b2432; color: var(--dim); border-radius: 5px;
                padding: 1px 6px; font-size: 12px; margin-right: 4px; }
.dirtags .tag.priv { color: var(--warn); }
/* durable field + history sections */
.field, .history { margin: 24px 0; }
.field h2, .history h2 { font-size: 17px; margin: 0 0 8px; }
.fieldline { color: var(--fg); margin: 0 0 10px; }
.rwytable { width: 100%; border-collapse: collapse; font-size: 14px; }
.rwytable caption { text-align: left; margin-bottom: 6px; }
.rwytable th, .rwytable td { text-align: left; padding: 5px 8px;
                             border-bottom: 1px solid #1e2532; }
.usebars { list-style: none; padding: 0; margin: 8px 0; }
.usebars li { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.uselbl { min-width: 48px; font-weight: 700; }
.usebar { flex: 1; height: 9px; background: #1a2130; border-radius: 5px; overflow: hidden; }
.usefill { display: block; height: 100%; background: var(--accent); }
.usepct { min-width: 42px; text-align: right; }
.usen { color: var(--dim); font-size: 12px; min-width: 68px; }
.toggle { margin-left: 10px; color: var(--info); }

/* local VFR procedures */
.flowbanner { border-radius: 10px; padding: 10px 14px; margin: 12px 0; font-size: 14px; }
.flowbanner p { margin: 0; }
.flow-known { background: #0b3a25; color: var(--ok); }
.flow-known a { color: var(--ink); }
.flow-unknown { background: #2c2a10; color: var(--warn); }
.flow-off { background: #1e2a3f; color: var(--info); }
.flow-dead { background: #3a1214; color: var(--bad); }
.procnotice { color: var(--warn); font-size: 13px; margin: 8px 0; }
.procgroup { margin: 20px 0; }
.procgroup h2 { font-size: 17px; margin: 0 0 8px; }
/* one box per flow: membership is structure, not a chip on every card */
.flowgroup { border-left: 3px solid #2c3644; border-radius: 4px 10px 10px 4px;
             padding: 2px 0 2px 12px; margin: 10px 0 14px; }
.flowgroup.fg-now { border-left-color: var(--accent); }
.flowgroup.fg-off { opacity: 0.78; }
.flowhead { font-size: 13px; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.8px; color: var(--dim); margin: 4px 0 6px;
            display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fg-now .flowhead { color: var(--ink); }
.fgrwys { color: var(--info); }
.proclist { list-style: none; padding: 0; margin: 0; }
.proclist li { margin: 7px 0; line-height: 1.45; }
.proc-dead { opacity: 0.7; }
.proctag { font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
           border-radius: 5px; padding: 2px 6px; }
.tag-now { background: #0b3a25; color: var(--ok); }
.tag-off { background: #1e2a3f; color: var(--info); }
.tag-unk { background: #2c2a10; color: var(--warn); }
.tag-dead { background: #3a1214; color: var(--bad); }
/* only the name is the link; the summary is plain text after a dash */
.procname { font-size: 15px; font-weight: 700; color: var(--info); }
.procname:hover, .procname:focus-visible { text-decoration: underline; }
.procsummary { color: var(--dim); font-size: 13px; }
.procheadline { text-align: left; }
.procsteps ol { padding-left: 22px; }
.procsteps li { margin: 6px 0; }
.procsteps h2, .procapply h2, .procoriginal h2, .procsources h2 { font-size: 16px; margin: 18px 0 6px; }
.procapply li { margin: 5px 0; }
.procspan { display: block; }
.procsources li { margin: 6px 0; }
.procsources .fine { display: block; }
.authdial.mandatory { border-color: var(--bad); color: var(--bad); font-weight: 700; }
.staledial { border-color: var(--warn); color: var(--warn); }
.proclink { margin: 18px 0; }
.proclink a { display: block; background: var(--panel); border-radius: 10px;
              padding: 12px 14px; color: var(--ink); font-weight: 700;
              border-left: 3px solid var(--info); }
.proclink a:hover, .proclink a:focus-visible { outline: 2px solid var(--accent); }
.proclink .procn { color: var(--info); font-size: 13px; margin-left: 8px; }
.proclink .fine { display: block; font-weight: 400; margin-top: 3px; }
.procintro { color: var(--dim); font-size: 14px; max-width: 60ch; }
.dirtable .proctag { margin-left: 6px; }
.ackform { display: inline; margin-left: 6px; }
.ackform button { font-size: 11px; padding: 2px 8px; }

/* procedures index table. Its own class, not .dirtable: the state directory
   deliberately styles its links as body text, which is exactly what made the
   identifier here not read as a link. Every cell lays its lines out as
   blocks, so nothing wraps a single word onto a line of its own. */
.proctable { width: 100%; border-collapse: collapse; font-size: 14px; }
.proctable caption { text-align: left; margin-bottom: 8px; }
.proctable thead th {
  text-align: left; padding: 4px 10px 6px 0; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px; color: var(--dim);
  border-bottom: 1px solid #2c3644; }
.proctable thead th:last-child, .proctable td.pverified { text-align: right; }
.proctable tbody th, .proctable tbody td {
  text-align: left; padding: 9px 10px 9px 0; vertical-align: top;
  border-bottom: 1px solid #1e2532; font-weight: 400; }
.proctable tbody td:last-child { padding-right: 0; }
/* the identifier is the link and must look like one */
.proctable tbody th a {
  display: block; color: var(--info); font-weight: 800; font-size: 16px;
  letter-spacing: 0.3px; }
.proctable tbody th a:hover, .proctable tbody th a:focus-visible { text-decoration: underline; }
/* name on its own line, with room under the identifier */
.apsub { display: block; color: var(--dim); font-size: 12px; margin-top: 3px;
         line-height: 1.35; }
.pcount { display: block; font-weight: 700; }
.psub { display: block; color: var(--dim); font-size: 12px; margin-top: 3px;
        white-space: nowrap; }
.pdate { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.proctable .proctag { display: inline-block; margin: 5px 0 0; white-space: nowrap; }
/* Numeric column in a data table. Explicitly NOT .numeral, which is the
   airport page's 170px hero digit and has no business inside a table cell. */
.proctable th.rnum, .proctable td.rnum {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.proctable td.rnum { font-size: 14px; font-weight: 400; }
.proctable td.rnum strong { font-weight: 700; color: var(--accent); }
/* overrides thead th:last-child, which right-aligns a final column that here
   holds prose rather than a number */
.proctable th.pleft { text-align: left; }
.proctable td.pverified { white-space: nowrap; }

/* runway table: does the painted number still match its magnetic bearing.
   The number in here is a NAME, not a measurement -- it is set like the
   designators in the first column so it does not read as a quantity. */
.rwytable td.rwynum { font-size: 13px; line-height: 1.3; }
.rwytable td.rwynum .numok { color: var(--dim); }
.rwytable td.rwynum a.numoff {
  color: var(--warn); font-weight: 800; letter-spacing: 0.3px; white-space: nowrap; }
.rwytable td.rwynum a.numoff:hover,
.rwytable td.rwynum a.numoff:focus-visible { text-decoration: underline; }
.rwytable td.rwynum .psub { white-space: normal; margin-top: 2px; }

/* the NASR remark behind a calm-wind designation: the tag says which runway,
   the remark says under what conditions -- hours, wind limits, arr vs dep */
.rwytable .calmnote { max-width: 22em; white-space: normal; font-size: 11px; }

/* operator traffic page: one column per day, bots stacked under the rest. Bars are
   scaled to the window's busiest day, so the shape is a trend and the caption
   carries the number -- an unlabelled bar chart is a decoration. */
.daybars { display: flex; align-items: flex-end; gap: 2px; list-style: none;
           padding: 0; margin: 10px 0 6px; height: 110px; }
.daybars li { flex: 1; display: flex; flex-direction: column; align-items: center;
              height: 100%; justify-content: flex-end; min-width: 0; }
.daycol { width: 100%; height: 100%; display: flex; flex-direction: column;
          justify-content: flex-end; background: #161c26; border-radius: 2px;
          overflow: hidden; }
.dayhum { display: block; width: 100%; background: var(--accent); }
.daybot { display: block; width: 100%; background: #3d4a5c; }
.daylbl { font-size: 9px; color: var(--dim); margin-top: 3px; }
.key { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
       margin: 0 3px 0 8px; vertical-align: baseline; }
.key-hum { background: var(--accent); }
.key-bot { background: #3d4a5c; }
.dirtable .errcount { color: var(--bad); }

/* operator index: a plain list of the pages behind the secret prefix */
.opslist { list-style: none; padding: 0; margin: 16px 0; }
.opslist li { padding: 10px 0; border-bottom: 1px solid #1e2532; }
.opslist a { font-weight: 700; }
.opslist .dim { display: block; color: var(--dim); font-size: 13px; margin-top: 2px; }

/* --- procedure plate: where the named landmarks actually are --------------- */
.plate h2, .dl h2 { font-size: 16px; margin: 18px 0 6px; }
.plate-svg { width: 100%; height: auto; display: block; border: 1px solid #2c3644;
  border-radius: 10px; margin: 10px 0 4px; background: #0d1d28; }
.pl-bg { fill: #0d1d28; }
.pl-land { fill: #2f3a33; stroke: #54869c; stroke-width: 0.8; }
.pl-lake { fill: #0d1d28; stroke: #54869c; stroke-width: 0.8; }
.pl-river { fill: none; stroke: #4a7a90; stroke-width: 1.4; }
.pl-fwy { fill: none; stroke: #a6793f; stroke-width: 1.9; }
.pl-hwy { fill: none; stroke: #6f5c42; stroke-width: 1.2; }
.pl-built { fill: #6b7b85; stroke: none; }
.pl-classb { fill: none; stroke: #8b6fd6; stroke-width: 1.1; stroke-dasharray: 1 4; }
.pl-classd { fill: none; stroke: #49a673; stroke-width: 1.8; stroke-dasharray: 7 5; }
.pl-rwy { fill: none; stroke: #e6eef3; stroke-width: 2.6; }
.pl-halo { fill: none; stroke: #0e1116; stroke-width: 9; stroke-linejoin: round;
  stroke-linecap: round; }
.pl-route { fill: none; stroke: #ff6f3c; stroke-width: 5; stroke-linejoin: round;
  stroke-linecap: round; }
.pl-wp { fill: #0e1116; stroke: #e8edf4; stroke-width: 2.2; }
.pl-wp.soft { stroke-dasharray: 4 3; }
.pl-wpn { fill: #e8edf4; font: 700 12px system-ui, sans-serif; text-anchor: middle; }
.pl-ref { fill: #0e1116; stroke: #9aa7b8; stroke-width: 2; }
.pl-ref.avoid { fill: #f87171; stroke: #2a0f10; }
.pl-lbl, .pl-lbl-halo { font: 600 12px system-ui, sans-serif; }
.pl-lbl-halo { fill: none; stroke: #0b1016; stroke-width: 4.5;
  stroke-linejoin: round; }
.pl-lbl { fill: #f2f6fa; stroke: none; }
.pl-lbl.avoid { fill: #ff8d8d; }
.pl-scale, .pl-north { fill: none; stroke: #9aa7b8; stroke-width: 1.5; }
.pl-north { fill: #9aa7b8; }
.pl-fine { fill: #9aa7b8; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }

.wplist { list-style: none; padding: 0; margin: 12px 0 6px; }
.wplist .wp { display: flex; gap: 10px; padding: 10px 0;
  border-top: 1px solid #222a35; }
.wplist .wpref { opacity: 0.95; }
.wpmark { flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--ink); display: grid; place-items: center;
  font-weight: 700; font-size: 13px; margin-top: 2px; }
.wpmark.soft { border-style: dashed; color: var(--dim); }
.wpmark.ref { border-radius: 3px; transform: rotate(45deg); width: 18px; height: 18px;
  border-color: var(--dim); margin: 5px 3px; }
.wpavoid .wpmark.ref { border-color: var(--bad); background: #2a0f10; }
.wpbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wpname { color: var(--dim); font-size: 13px; }
.wplook { font-size: 14px; }
.wpnote { font-size: 13px; color: var(--dim); }
.wpsrc { font-size: 11px; color: #6c7a8c; }
.wpmeta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center;
  margin-top: 3px; }
.coord, .chip { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 1px 6px; border-radius: 4px; background: #1b2230; color: var(--dim); }
.chip.leg { background: #16304a; color: var(--info); }
.chip.warn { background: #2c2a10; color: var(--warn); }
.chip.code { border: 1px solid #2c3644; background: none; }
.wplinks { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; margin-top: 2px; }
.dllist { list-style: none; padding: 0; margin: 8px 0; }
.dllist li { padding: 7px 0; border-top: 1px solid #222a35; }
.dllist a { font-weight: 600; }
.dllist .fine { display: block; }