/* =============================================================================
   TRAVEL DISRUPTIONS — the page's own sheet
   -----------------------------------------------------------------------------
   The chrome, the console and the a-* tile vocabulary (chips, tags, NOTAM
   blocks, the quiet panel) come from site.css, this property's copy of the
   airports sheet. This file adds only what the ranked list, the headline
   figures, the filters and the state map need, and reads the site's tokens:
   --taken (red: ground stop, closure), --unsure (amber: delay program, delay),
   --free (green: the quiet state), --muted (grey: restriction notices).
   The html[data-dark] rules at the foot are inert on the paper edition.
   ========================================================================== */

:root {
    --d-map-land:   #F3F4F5;
    --d-map-edge:   rgba(30, 38, 43, .22);
    --d-map-hot:    rgba(185, 28, 28, .10);
    --d-map-warm:   rgba(180, 83, 9, .12);
    --d-map-label:  #1E262B;
    --d-map-halo:   #ffffff;
}

/* ------------------------------------------------------ the headline figures */
.d-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem;
          margin: 1.6rem 0 .8rem; }
.d-fig { min-width: 0; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px;
         background: var(--paper); }
.d-fig em { display: block; font-style: normal; font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.2rem);
            line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.d-fig span { display: block; margin-top: .35rem; font-size: .78rem; color: var(--muted); line-height: 1.3; }
.d-head > .d-fig:not(.d-fig--sm) { grid-column: span 2; }
.d-fig--sm em { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.d-fig.is-red  { border-color: var(--taken);  background: var(--taken-wash); }
.d-fig.is-red em  { color: var(--taken); }
.d-fig.is-amber { border-color: var(--unsure); background: var(--unsure-wash); }
.d-fig.is-amber em { color: var(--unsure); }
.d-fig.is-green { border-color: var(--free); background: var(--free-wash); }
.d-fig.is-green em { color: var(--free); }
@media (max-width: 560px) { .d-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } .d-head > .d-fig:not(.d-fig--sm) { grid-column: auto; } }

.d-note { margin: .4rem 0 .6rem; max-width: 62rem; font-size: .9rem; line-height: 1.5; color: var(--ink-77); }
.d-note b { color: var(--ink); }

/* ------------------------------------------------------------ filters & bar */
.d-filters { display: flex; flex-wrap: wrap; gap: .45rem .5rem; }
.d-filter { font-family: inherit; cursor: pointer; }
.d-filter[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.d-filter[disabled] { opacity: .5; cursor: default; }
.d-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.d-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }
.d-bar .field { flex: 1 1 14rem; max-width: 26rem; }
.d-bar .d-sort { flex: 0 1 12rem; }
.d-sortl { font-size: .78rem; color: var(--muted); margin-left: auto; }

/* ---------------------------------------------------------------- the list */
.d-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; counter-reset: rank; }
.d-card { position: relative; min-width: 0; display: grid; grid-template-columns: 3rem minmax(0, 1fr);
          gap: .2rem 1rem; padding: .95rem 1.1rem 1rem; border: 1px solid var(--line);
          border-left-width: 4px; border-radius: 12px; background: var(--paper);
          transition: box-shadow .16s ease; scroll-margin-top: 90px; }
.d-card--red   { border-left-color: var(--taken); }
.d-card--amber { border-left-color: var(--unsure); }
.d-card--grey  { border-left-color: var(--line); }
.d-card.is-hot { box-shadow: 0 0 0 3px var(--accent); }
.d-rank { grid-row: 1 / span 2; font-size: .78rem; font-weight: 700; color: var(--muted);
          font-variant-numeric: tabular-nums; padding-top: .45rem; }
.d-card__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; min-width: 0; }
.d-card__h .a-code { font-size: 1.6rem; }
.d-card__n { min-width: 0; font-size: .95rem; font-weight: 600; color: var(--ink); }
.d-card__p { font-size: .8rem; color: var(--muted); }
.d-card__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-left: auto; }
.d-card__body { min-width: 0; }
.d-card__links { margin: .6rem 0 0; font-size: .8rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.d-card__links a { color: var(--info); }
@media (max-width: 640px) {
    .d-card { grid-template-columns: minmax(0, 1fr); padding: .85rem .9rem .9rem; }
    .d-rank { grid-row: auto; padding-top: 0; }
    .d-card__tags { margin-left: 0; }
}

.d-prog { min-width: 0; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line-soft);
          font-size: .86rem; line-height: 1.5; color: var(--ink-77); }
.d-prog__k { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
             text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.d-prog--red .d-prog__k   { color: var(--taken); }
.d-prog--amber .d-prog__k { color: var(--unsure); }
.d-times { display: flex; flex-wrap: wrap; gap: .15rem 1.1rem; margin-top: .25rem; }
.d-times em, .a-nums em { font-style: normal; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.d-sched { color: var(--info); font-weight: 600; }
.d-past  { color: var(--muted); font-style: italic; }
.a-tag--grey  { color: var(--muted); border-color: var(--line); }
.a-tag--sched { color: var(--info); border-color: var(--info); }
.d-group-h { margin: 1.2rem 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
             text-transform: uppercase; color: var(--muted); }
.d-afp dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .15rem .9rem; margin: .3rem 0 0; }
.d-afp dt { color: var(--muted); font-size: .78rem; }
.d-afp dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* ----------------------------------------------------------------- the map */
.d-mapbox { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--tint); }
.d-map { display: block; width: 100%; min-width: 320px; height: auto; }
.d-map .st   { fill: var(--d-map-land); stroke: var(--d-map-edge); stroke-width: .8; }
.d-map .st--red   { fill: var(--d-map-hot); }
.d-map .st--amber { fill: var(--d-map-warm); }
.d-map .dot { stroke: var(--d-map-halo); stroke-width: 2; cursor: pointer; }
.d-map .dot--red   { fill: var(--taken); }
.d-map .dot--amber { fill: var(--unsure); }
.d-map .dot--grey  { fill: var(--muted); }
.d-map .dot:focus-visible { outline: none; stroke: var(--accent); stroke-width: 4; }
.d-map text { font: 700 15px/1 system-ui, sans-serif; fill: var(--d-map-label);
              paint-order: stroke; stroke: var(--d-map-halo); stroke-width: 4px; stroke-linejoin: round;
              pointer-events: none; }

.d-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .6rem; }
.d-state { min-width: 0; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.d-state h3 { margin: 0 0 .35rem; font-size: .85rem; font-weight: 700; color: var(--ink);
              display: flex; justify-content: space-between; gap: .5rem; }
.d-state h3 span { color: var(--muted); font-weight: 500; }
.d-state a { display: flex; gap: .5rem; align-items: baseline; padding: .15rem 0; font-size: .82rem;
             color: var(--ink-77); text-decoration: none; }
.d-state a:hover b, .d-state a:focus-visible b { text-decoration: underline; }
.d-state a b { flex: none; color: var(--ink); min-width: 2.6rem; }
.d-state a span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-state a i { font-style: normal; margin-left: auto; white-space: nowrap; font-size: .72rem; font-weight: 700; }
.d-state .is-red i   { color: var(--taken); }
.d-state .is-amber i { color: var(--unsure); }
.d-state .is-grey i  { color: var(--muted); }

/* -------------------------------------------------------------- the guide */
.d-guide { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .8rem;
           margin-top: 1.2rem; }
.d-guide article { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.d-guide h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--ink); }
.d-guide p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-77); }

@media (hover: none) and (pointer: coarse) {
    .d-filter { min-height: 40px; }
    .d-state a { min-height: 40px; align-items: center; }
}

/* ------------------------------------------------------ the dark edition */
html[data-dark] {
    --d-map-land:  #151C23;
    --d-map-edge:  rgba(255, 255, 255, .20);
    --d-map-hot:   rgba(248, 113, 113, .16);
    --d-map-warm:  rgba(251, 191, 36, .14);
    --d-map-label: #F5F7FA;
    --d-map-halo:  #0C1116;
}
html[data-dark] .d-fig, html[data-dark] .d-card, html[data-dark] .d-state,
html[data-dark] .d-guide article { background: var(--deep); }
html[data-dark] .d-fig.is-red   { background: var(--taken-wash); }
html[data-dark] .d-fig.is-amber { background: var(--unsure-wash); }
html[data-dark] .d-fig.is-green { background: var(--free-wash); }
html[data-dark] .d-mapbox { background: var(--deep-soft); }

/* ------------------------------------------------ the bar on a phone (labs488)
   Measured before this block, dark edition: at 390 "Travel Disruptions" broke
   onto two lines inside the 63px bar and the Outpost, search and menu keys were
   squeezed from 44px to 21px; at 380 and under site.css hides the name
   outright. The plate, the name, the build chip, the edition pill and three
   44px keys come to about 460px against the 350 a 390 phone gives the bar.
   The chess/ answer this build: the edition pill steps out at 640 (the same
   switch is in the menu's foot), and at 480 the labs.llc plate does too (the
   menu's head carries the same home link). The name stays whole, on one line,
   at every phone width. */
@media (max-width: 640px) {
    .nav__in > .mode-pill { display: none; }
    .nav__mark, .nav__mark-self { min-width: 0; }
    .nav__mark-self b { white-space: nowrap; }
}
@media (max-width: 480px) {
    .nav__mark .nav__mark-labs { display: none; }
}
@media (max-width: 380px) {
    .nav__mark b { display: inline; }
    .nav__in { gap: .4rem; }
}