/*
  BIRD Route Check — ATC-scope theme.
  Palette drawn from a radar display: deep scope navy, phosphor green for
  "clear", amber for advisory, red for a hard fail, cyan for data values.
*/
:root {
    --scope-bg:      #0a1220;
    --scope-panel:   #101c30;
    --scope-panel-2: #0d1727;
    --scope-line:    #1e3050;
    --ink:           #cdd9ec;
    --ink-dim:       #6f83a3;
    --ink-faint:     #47597a;
    --green:         #37e07f;
    --amber:         #ffbb52;
    --red:           #ff5d6c;
    --cyan:          #59c7ec;
    --radius:        10px;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    margin: 0;
    background:
        radial-gradient(1200px 600px at 50% -10%, #12233d 0%, transparent 60%),
        var(--scope-bg);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.scope {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 3rem) 1.25rem 4rem;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Masthead ─────────────────────────────────────────── */
.masthead { margin-bottom: 1.75rem; }

.ident {
    display: inline-flex; align-items: baseline; gap: .55rem;
    font-family: var(--mono);
    margin-bottom: .9rem;
}
.ident .fir {
    font-size: .95rem; font-weight: 600; letter-spacing: .28em;
    color: var(--scope-bg); background: var(--green);
    padding: .12rem .5rem; border-radius: 4px;
}
.ident .cta {
    font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink-dim);
}

h1 {
    margin: 0 0 .35rem;
    font-size: clamp(1.6rem, 4vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -.01em;
}
.lede { margin: 0; color: var(--ink-dim); max-width: 48ch; }

/* ── Query ────────────────────────────────────────────── */
.query {
    background: var(--scope-panel);
    border: 1px solid var(--scope-line);
    border-radius: var(--radius);
    padding: 1.1rem;
    margin-bottom: 1.5rem;
}
.query-row { display: flex; gap: .6rem; }

#callsign {
    flex: 1;
    font-family: var(--mono);
    font-size: 1.15rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cyan);
    background: var(--scope-panel-2);
    border: 1px solid var(--scope-line);
    border-radius: 8px;
    padding: .7rem .85rem;
    min-width: 0;
}
#callsign::placeholder { color: var(--ink-faint); letter-spacing: .08em; text-transform: none; }
#callsign:focus-visible {
    outline: 2px solid var(--cyan); outline-offset: 1px; border-color: transparent;
}

#check {
    font-family: var(--sans);
    font-weight: 600; font-size: 1rem;
    color: var(--scope-bg);
    background: var(--green);
    border: 0; border-radius: 8px;
    padding: 0 1.5rem;
    cursor: pointer;
    transition: filter .12s ease, transform .06s ease;
}
#check:hover { filter: brightness(1.08); }
#check:active { transform: translateY(1px); }
#check:disabled { opacity: .5; cursor: default; }
#check:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.hint { margin: .7rem 0 0; font-size: .82rem; color: var(--ink-faint); }
.hint.error { color: var(--red); }

/* ── Verdict ──────────────────────────────────────────── */
.verdict:empty { display: none; }
.verdict { display: grid; gap: .9rem; }

.strip {
    position: relative;
    background: var(--scope-panel);
    border: 1px solid var(--scope-line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem 1rem 1.35rem;
    overflow: hidden;
}
.strip::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--ink-faint);
}
.strip.pass::before, .strip.clear::before, .strip.ok::before { background: var(--green); }
.strip.advisory::before, .strip.watch::before { background: var(--amber); }
.strip.fail::before, .strip.attention::before { background: var(--red); }
.strip.skip::before { background: var(--ink-faint); }

/* Header strip: the aircraft identity + overall state */
.head-strip .cs {
    font-family: var(--mono); font-size: 1.35rem; font-weight: 600;
    letter-spacing: .1em; color: var(--ink);
}
.head-strip .route-line {
    font-family: var(--mono); color: var(--cyan);
    margin-top: .5rem; font-size: .92rem; word-break: break-word;
}
.meta {
    display: flex; flex-wrap: wrap; gap: .4rem .9rem;
    margin-top: .7rem; font-family: var(--mono);
    font-size: .8rem; color: var(--ink-dim);
}
.meta b { color: var(--ink); font-weight: 500; }

.pill {
    font-family: var(--mono); font-size: .72rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    padding: .2rem .55rem; border-radius: 999px;
}
.pill.ok, .pill.pass, .pill.clear { background: rgba(55,224,127,.14); color: var(--green); }
.pill.watch, .pill.advisory { background: rgba(255,187,82,.14); color: var(--amber); }
.pill.attention, .pill.fail { background: rgba(255,93,108,.14); color: var(--red); }
.pill.skip { background: rgba(71,89,122,.18); color: var(--ink-dim); }

.check-head {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.check-head h3 {
    margin: 0; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-dim); font-weight: 600;
}
.check-body { margin: .6rem 0 0; font-size: .95rem; }
.check-body .detail { color: var(--ink-dim); font-size: .85rem; margin-top: .35rem; }

.amend {
    margin-top: .7rem; padding: .55rem .7rem;
    background: var(--scope-panel-2); border: 1px dashed var(--scope-line);
    border-radius: 8px; font-family: var(--mono); font-size: .9rem;
}
.amend .k { color: var(--ink-dim); letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
.amend .v { color: var(--green); font-weight: 600; }

.traffic { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.traffic li {
    display: grid;
    grid-template-columns: 5.5rem auto 1fr;
    gap: .5rem .8rem; align-items: baseline;
    font-family: var(--mono); font-size: .86rem;
    padding: .35rem .5rem; border-radius: 6px;
    background: var(--scope-panel-2);
}
.traffic .t-cs { color: var(--cyan); font-weight: 600; }
.traffic .t-fl { color: var(--ink); }
.traffic .t-note { color: var(--ink-dim); font-size: .8rem; }
.traffic .t-cs.hot { color: var(--red); }

.spinner {
    display: inline-block; width: 1rem; height: 1rem; vertical-align: -2px;
    border: 2px solid var(--ink-faint); border-top-color: var(--cyan);
    border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Disclaimer ───────────────────────────────────────── */
.disclaimer { margin-top: 2.25rem; }
.disclaimer p {
    margin: 0; font-size: .8rem; color: var(--ink-faint);
    border-top: 1px solid var(--scope-line); padding-top: 1rem;
}
.disclaimer strong { color: var(--amber); }

@media (max-width: 480px) {
    .query-row { flex-direction: column; }
    #check { padding: .7rem; }
    .traffic li { grid-template-columns: 1fr auto; }
    .traffic .t-note { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; }
    #check { transition: none; }
}

/* ── Route token highlighting ─────────────────────────── */
.rt { border-radius: 3px; padding: 0 .12em; }
.rt-ok      { color: var(--cyan); }
.rt-outside { color: var(--ink-dim); }
.rt-error   { color: var(--red); text-decoration: underline wavy var(--red); }
.rt-neutral { color: var(--ink-faint); }

/* Route check detail lines */
.detail .d-err { color: var(--red); }
.detail .d-out { color: var(--ink-dim); }

/* Partial coverage = watch tier */
.strip.partial::before { background: var(--amber); }
.pill.partial { background: rgba(255,187,82,.14); color: var(--amber); }

/* Minimal-diff amendment block */
.amend .diff { margin: .35rem 0 .6rem; line-height: 1.6; }
.amend .diff .was { color: var(--ink-dim); text-decoration: line-through; }
.amend .diff .now { color: var(--green); font-weight: 600; }
.amend .diff .arrow { color: var(--ink-faint); }
.amend .v.full { color: var(--cyan); word-break: break-word; }