:root {
  --paper: #f3f4ef;
  --paper-2: #e9ebe3;
  --ink: #15202b;
  --ink-2: #4a5663;
  --ink-3: #8a94a0;
  --line: #d3d7cf;
  --airway: #1f5fb0;      /* IFR enroute airway blue — the one accent */
  --airway-soft: #dbe6f6;
  --proc: #6b3fa0;
  --ok: #2e7d4f;
  --warn: #b7791f;
  --warn-soft: #fbf1dc;
  --err: #b42318;
  --err-soft: #fbe3e0;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--sans); }
a { color: var(--airway); }
h1, h2 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--airway); outline-offset: 2px; }

/* ---------------------------------------------------------------- header */
.top { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, 2fr); gap: 32px; align-items: end;
       padding: 22px 28px 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.sub { margin: 4px 0 0; color: var(--ink-2); max-width: 46ch; }
.cycle-head { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.cycle-head b { color: var(--ink); font-weight: 600; }
.timeline { position: relative; height: 54px; }
.timeline .bar { position: absolute; left: 0; right: 0; top: 10px; height: 4px; background: var(--paper-2); border-radius: 2px; }
.timeline .bar .done { position: absolute; left: 0; top: 0; bottom: 0; background: var(--airway); border-radius: 2px; }
.timeline .mark { position: absolute; top: 4px; width: 2px; height: 16px; background: var(--ink-3); transform: translateX(-1px); }
.timeline .mark.lock { background: var(--err); }
.timeline .mark.chart { background: var(--ink); }
.timeline .lbl { position: absolute; top: 24px; transform: translateX(-50%); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; line-height: 1.2; text-align: center; }
.timeline .lbl b { display: block; color: var(--ink); font-weight: 500; }
.timeline .today { position: absolute; top: 0; width: 0; height: 0; border: 7px solid transparent; border-top: 10px solid var(--airway); transform: translateX(-7px); }
.timeline .today span { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--airway); font-weight: 600; }

/* ---------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 2px; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--paper); }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 14px; color: var(--ink-2); font-weight: 500; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--airway); }
main { padding: 20px 28px 60px; }
.tab[hidden] { display: none; }

/* ---------------------------------------------------------------- input */
.input { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; }
.input label { display: block; font-weight: 500; margin-bottom: 8px; }
textarea { width: 100%; font: 13px/1.55 var(--mono); padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); resize: vertical; }
textarea::placeholder { color: var(--ink-3); }
.input-row { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-end; margin-top: 12px; }
.input-row label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; font-size: 14px; }
.opts, .refsel { display: flex; flex-direction: column; gap: 6px; }
.file input { display: none; }
.file span { text-decoration: underline; text-decoration-color: var(--airway); cursor: pointer; color: var(--airway); }
.file em { font-style: normal; color: var(--ink-2); }
select { padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.button, button.primary, button.ghost { display: inline-block; border-radius: 4px; padding: 8px 14px; border: 1px solid var(--line); background: #fff; text-decoration: none; font-weight: 500; line-height: 1.3; }
button.primary, a.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
button.primary:hover, a.primary:hover { background: #26323f; }
button.primary:disabled { opacity: .6; cursor: default; }
.ghost { color: var(--ink); }
.ghost:hover { border-color: var(--ink-3); }
.button[hidden] { display: none; }

/* ---------------------------------------------------------------- build */
.build-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; align-items: end; }
.build-grid label { font-size: 12.5px; color: var(--ink-2); margin: 0; }
.build-grid input, .build-grid select { display: block; width: 100%; margin-top: 4px; font: 13.5px var(--mono); padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); }
.build-grid select { font-family: var(--sans); }
.build-actions { display: flex; align-items: end; }
.hint { margin: 12px 0 0; color: var(--ink-2); font-size: 13px; max-width: 90ch; }
.row.cand { grid-template-columns: 12px 230px 1fr minmax(220px, auto); }
.cand .code small { white-space: normal; }
.cand .counts { text-align: left; white-space: normal; }
.cand .counts .btns { margin-top: 4px; display: flex; gap: 4px; }
.cand .counts .btns button { font-size: 12px; padding: 2px 8px; }
.bulk { margin: -4px 0 12px; }
.bulk input { font-family: var(--mono); }

/* ---------------------------------------------------------------- summary */
.summary { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; margin: 22px 0 10px; }
.summary .n { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.summary .k { color: var(--ink-2); margin-left: 6px; }
.summary .err .n { color: var(--err); } .summary .warn .n { color: var(--warn); } .summary .ok .n { color: var(--ok); }
.summary .codes { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.summary .codes button { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; }
.summary .codes button.error { border-color: var(--err); color: var(--err); }
.summary .codes button.warning { border-color: var(--warn); color: var(--warn); }
.summary .codes button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; margin: 8px 0; }
.filters { display: flex; gap: 4px; align-items: center; }
.filters button { background: none; border: 1px solid transparent; border-radius: 4px; padding: 4px 10px; color: var(--ink-2); }
.filters button.on { background: var(--paper-2); color: var(--ink); }
.info-toggle { margin-left: 10px; font-size: 13px; color: var(--ink-2); }
.exports { display: flex; gap: 6px; flex-wrap: wrap; }
.parse-note { color: var(--ink-2); font-size: 13px; margin: 2px 0 10px; }

/* ---------------------------------------------------------------- rows */
.table { background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.row { display: grid; grid-template-columns: 12px 96px 1fr auto; gap: 12px; align-items: start; padding: 9px 14px; border-top: 1px solid var(--paper-2); cursor: pointer; }
.row:first-child { border-top: 0; }
.row:hover { background: #fafbf8; }
.row.open { background: #fafbf8; }
.row .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--ok); }
.row.warning .dot { background: var(--warn); } .row.error .dot { background: var(--err); }
.row .code { font: 500 13.5px/1.6 var(--mono); }
.row .code small { display: block; color: var(--ink-3); font: 12px var(--sans); }
.row .counts { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; text-align: right; }
.row .counts b { font-weight: 500; }
.row .counts .e { color: var(--err); } .row .counts .w { color: var(--warn); }
.ribbon { font: 13.5px/1.9 var(--mono); display: flex; flex-wrap: wrap; gap: 0 8px; }
.ribbon .t { border-bottom: 2px solid transparent; }
.ribbon .t.ORIGIN, .ribbon .t.DEST { font-weight: 600; }
.ribbon .t.AIRWAY { color: var(--airway); background: var(--airway-soft); padding: 0 4px; border-radius: 3px; }
.ribbon .t.SID, .ribbon .t.STAR { color: var(--proc); font-weight: 500; }
.ribbon .t.FOREIGN_AIRWAY { color: var(--airway); border-bottom-style: dotted; border-bottom-color: var(--airway); }
.ribbon .t.AIRPORT { text-decoration: underline dotted var(--ink-3); }
.ribbon .t.warn { border-bottom-color: var(--warn); }
.ribbon .t.err { border-bottom-color: var(--err); color: var(--err); }
.ribbon .t.UNKNOWN, .ribbon .t.PROC_UNKNOWN, .ribbon .t.AIRWAY_BAD { color: var(--warn); }
.ribbon .t.PROC_STALE, .ribbon .t.AIRWAY_ZERO { color: var(--err); }
.ribbon .meta { color: var(--ink-3); font-size: 12px; }
.detail { grid-column: 1 / -1; padding: 4px 0 6px 108px; cursor: default; }
.detail .f { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: baseline; padding: 4px 0; border-top: 1px dashed var(--paper-2); font-size: 13.5px; }
.detail .f .sev { font-size: 12px; font-weight: 600; text-transform: lowercase; }
.detail .f.error .sev { color: var(--err); } .detail .f.warning .sev { color: var(--warn); } .detail .f.info .sev { color: var(--ink-3); }
.detail .f code { font: 12.5px var(--mono); background: var(--paper); padding: 0 4px; border-radius: 3px; }
.detail .f .apply { font-size: 12.5px; padding: 2px 8px; }
.detail .edit { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.detail .edit label { font-size: 11.5px; color: var(--ink-2); display: block; }
.detail .edit input { width: 100%; font: 13px var(--mono); padding: 3px 6px; border: 1px solid var(--line); border-radius: 3px; }
.detail .edit .wide { grid-column: 1 / -1; }
.computed { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.empty { padding: 28px; color: var(--ink-2); text-align: center; }

/* ---------------------------------------------------------------- cycle break / diff */
.panel-head { display: grid; grid-template-columns: 1fr auto; gap: 10px 28px; align-items: start; margin-bottom: 16px; }
.panel-head p { margin: 4px 0 0; color: var(--ink-2); max-width: 70ch; grid-column: 1; }
.panel-head .actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; align-items: center; }
.stats { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; margin: 10px 0 16px; }
.stats .n { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.stats .k { color: var(--ink-2); margin-left: 6px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; align-items: start; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } .top { grid-template-columns: 1fr; } }
table.plain { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: 13.5px; }
table.plain th, table.plain td { text-align: left; padding: 6px 10px; border-top: 1px solid var(--paper-2); vertical-align: top; }
table.plain th { font-weight: 500; color: var(--ink-2); border-top: 0; }
table.plain td.m { font: 13px var(--mono); }
table.plain td.r, table.plain th.r { text-align: right; }
.sev-error { color: var(--err); font-weight: 600; } .sev-warning { color: var(--warn); font-weight: 600; } .sev-info { color: var(--ink-3); }
.browse-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.browse-form input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-family: var(--mono); font-size: 13px; }
.browse-form span { color: var(--ink-2); }
.diff-field { display: inline-block; font: 12px var(--mono); background: var(--paper); padding: 0 4px; border-radius: 3px; }
.del { color: var(--err); text-decoration: line-through; } .add { color: var(--ok); }
.hover { position: fixed; z-index: 10; max-width: 380px; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.45; padding: 8px 10px; border-radius: 4px; box-shadow: 0 6px 20px rgba(21,32,43,.25); pointer-events: none; }
.hover b { color: #fff; } .hover .dim { color: #b7c0c9; }
.notice { padding: 12px 14px; background: var(--warn-soft); border: 1px solid #ecd9a6; border-radius: 4px; color: #5b3d0c; margin: 10px 0; }
.notice.err { background: var(--err-soft); border-color: #f0b3ad; color: #6f1a13; }
.busy { opacity: .6; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .row, .filters button, .button { transition: background .12s ease; } }

/* ---------------------------------------------------------------- workspace, dialogs, toast */
.ws { margin-top: 8px; font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.ws-name { font-weight: 500; color: var(--ink); }
.ws-name.none { color: var(--ink-3); font-weight: 400; }
button.link { background: none; border: 0; padding: 0; color: var(--airway); text-decoration: underline; font-size: 13px; }
.tab-gap { width: 18px; border-left: 1px solid var(--line); margin: 10px 4px; }
dialog { border: 1px solid var(--line); border-radius: 8px; padding: 0; max-width: 560px; width: calc(100% - 32px); box-shadow: 0 20px 60px rgba(21,32,43,.25); }
dialog::backdrop { background: rgba(21,32,43,.35); }
.dlg { padding: 20px 22px; }
.dlg h2 { margin-bottom: 6px; }
.dlg p { margin: 0 0 12px; }
.dlg-grid { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: end; }
.dlg-grid label { font-size: 12.5px; color: var(--ink-2); display: block; }
.dlg-grid label.wide { grid-column: 1 / -1; }
.dlg-grid input, .dlg-grid select { display: block; width: 100%; margin-top: 4px; font: 13.5px var(--mono); padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; }
.dlg-grid select { font-family: var(--sans); }
.or { text-align: center; color: var(--ink-3); font-size: 12.5px; margin: 14px 0 8px; }
.keybox { margin-top: 14px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; font: 13px var(--mono); word-break: break-all; }
.keybox b { font-family: var(--sans); display: block; margin-bottom: 4px; color: var(--err); }
.dlg-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 6px; font-size: 13.5px; z-index: 20; box-shadow: 0 8px 24px rgba(21,32,43,.3); }
.toast a { color: #9cc0f0; }
.dim { color: var(--ink-3); font-weight: 400; }
label.inline { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
label.inline input { font: 13px var(--mono); padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; width: 5.5em; }

/* ---------------------------------------------------------------- queue */
.centers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.centers button { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font: 12.5px var(--mono); }
.centers button b { font-family: var(--sans); color: var(--ink-2); font-weight: 400; margin-left: 4px; }
.centers button.on { background: var(--ink); color: #fff; border-color: var(--ink); } .centers button.on b { color: #cfd6dd; }
.qrow { grid-template-columns: 22px 100px 1fr minmax(260px, auto); }
.qrow .check { margin-top: 5px; }
.qrow.done { opacity: .55; } .qrow.dismissed { opacity: .4; }
.qrow .counts { text-align: left; white-space: normal; }
.qrow .counts .btns { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.qrow .counts .btns button { font-size: 12px; padding: 2px 8px; }
.bucket-head { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 6px; }
.bucket-head h2 { font-size: 16px; }
.bucket-head .dim { font-size: 13px; }

/* ---------------------------------------------------------------- drafts */
.dlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 18px; }
.dcard { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; cursor: pointer; }
.dcard:hover, .dcard.on { border-color: var(--ink); }
.dcard h3 { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.dcard .dim { font-size: 12.5px; }
.dhead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; margin: 6px 0 10px; }
.dhead h2 { font-size: 17px; }
.dhead input { font: 15px var(--sans); border: 1px solid transparent; border-radius: 4px; padding: 2px 6px; background: transparent; }
.dhead input:hover, .dhead input:focus { border-color: var(--line); background: #fff; }
.drow { grid-template-columns: 70px 100px 1fr minmax(200px, auto); }
.act { font: 600 11.5px var(--sans); letter-spacing: .02em; padding: 2px 6px; border-radius: 3px; display: inline-block; margin-top: 4px; }
.act.add { background: #e3f2e9; color: var(--ok); } .act.amend { background: var(--warn-soft); color: var(--warn); } .act.delete { background: var(--err-soft); color: var(--err); }
.changes { font-size: 12.5px; color: var(--ink-2); }
.changes code { font: 12px var(--mono); background: var(--paper); padding: 0 4px; border-radius: 3px; }
.verify-ok { color: var(--ok); font-weight: 600; } .verify-bad { color: var(--err); font-weight: 600; }

/* ---------------------------------------------------------------- map */
#map { height: 640px; border: 1px solid var(--line); border-radius: 6px; background: #e9eef3; }
.leaflet-container { font: 12px var(--sans); }
.map-label { background: none; border: 0; box-shadow: none; font: 600 11px var(--mono); color: var(--ink-2); text-shadow: 0 0 3px #fff, 0 0 3px #fff; }

/* ---------------------------------------------------------------- impact / coverage */
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.pill-row span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; }
.pill-row span b { font-weight: 600; }

.map-form { display: grid; grid-template-columns: 1fr 320px; gap: 10px; margin-bottom: 10px; }
.map-form textarea { font: 13px/1.5 var(--mono); padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; resize: vertical; }
.map-side { display: flex; flex-direction: column; gap: 8px; }
.map-side input[name=shade] { font: 13px var(--mono); padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
@media (max-width: 900px) { .map-form { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- planning */
.prow { grid-template-columns: 22px 78px 110px 1fr minmax(200px, auto); }
.prow .check { margin-top: 5px; }
.prow.st-withdrawn { opacity: .45; } .prow.st-verified .dot { background: var(--ok); }
.act.st-staged { background: var(--paper-2); color: var(--ink-2); } .act.st-keyed { background: var(--airway-soft); color: var(--airway); }
.act.st-verified { background: #e3f2e9; color: var(--ok); } .act.st-withdrawn { background: var(--paper-2); color: var(--ink-3); }
.prow .act { display: block; width: max-content; margin: 2px 0; }
h3.pcenter { font: 600 14px var(--mono); margin: 16px 0 6px; display: flex; gap: 12px; align-items: baseline; }
h3.pcenter .dim { font: 12.5px var(--sans); }
details summary { font-size: 13px; }
/* Help, references, and refresh health */
.data-notice {padding:12px 24px;background:#fff3cd;color:#634900;border-bottom:1px solid #e2c576}
.help-toolbar {display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin:20px 0}
.getting-started-banner {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 20px;margin-bottom:24px;border:1px solid var(--line);border-left:4px solid var(--airway);border-radius:8px;background:white}
.getting-started-banner p {margin:4px 0 0;color:var(--ink-2)}
.getting-started {margin:24px 0 32px;padding:24px;background:var(--airway-soft);border-radius:8px}
.getting-started-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:16px}
.getting-started .help-card h3 {margin-top:0}
.help-toolbar label {display:grid;gap:6px;min-width:220px}
.help-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px}
.help-card {padding:22px;background:white;border:1px solid var(--line,#dce1e6);border-radius:8px}
.help-card h3 {margin:8px 0 14px}
.help-card li {margin:0 0 10px;line-height:1.5}
.help-card ol {padding-left:21px}
.help-links {display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
#help-data {margin-top:18px;overflow-x:auto}
@media print {.help-toolbar,.help-links button,#help-status-refresh,.data-notice {display:none!important}.help-grid {display:block}.help-card {break-inside:avoid;margin:0 0 15px}.help-links a {color:#000}}
.entry-summary,.entry-navigation,.entry-heading {display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin:18px 0}
.entry-card {padding:24px;background:#fff;border:1px solid var(--line);border-radius:8px}
.entry-heading h2 {display:inline-block;margin:0 12px;font-family:var(--mono)}
.entry-table-wrap {overflow-x:auto;margin:18px 0}
.entry-fields {width:100%;border-collapse:collapse;font-size:13px}
.entry-fields th,.entry-fields td {padding:12px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.entry-fields td {max-width:360px;overflow-wrap:anywhere}
.entry-fields code {white-space:normal}
.entry-changed {background:#fff6d9}
.entry-confirm {display:grid;gap:16px;margin-top:24px}
.entry-confirm label,.entry-fields label {display:flex;gap:8px;align-items:start}
.entry-confirm input,.entry-fields input {width:auto}
#entry-message {padding:10px 0;min-height:24px}