/* Air traffic controller article: the radar game, the counter and the
 * static figures. Shares tokens with home.css / article.css. The radar
 * scope stays dark in both themes, like a real one. */
.widget.ac { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.ac-help { grid-column: 1 / -1; }
.ac-scope { display: block; width: 100%; height: auto; border-radius: 14px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ac-bg { fill: #0b1d17; }
.ac-ring { fill: none; stroke: #2e5a48; stroke-width: 1; }
.ac-route { stroke: #24473a; stroke-width: 1; stroke-dasharray: 3 5; }
.ac-fix { fill: none; stroke: #7fb59a; stroke-width: 1.4; }
.ac-fixt, .ac-scale { font: 600 12px var(--mono); fill: #7fb59a; }
.ac-scale { font-weight: 500; fill: #4f8a70; }
.ac-plane { cursor: pointer; outline: none; }
.ac-blip { fill: #c9f7dc; }
.ac-vec { stroke: #c9f7dc; stroke-width: 1.2; }
.ac-halo { fill: none; stroke: #5fbf8f; stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.8; }
.ac-cs, .ac-fl { font: 600 13px var(--mono); fill: #c9f7dc; }
.ac-fl { font-weight: 500; }
.ac-need { fill: #ff7ac8; font-weight: 600; }
.ac-ok { fill: #7fb59a; }
.ac-hit { fill: transparent; }
.ac-plane.warn .ac-halo { stroke: #f6c343; stroke-dasharray: none; stroke-width: 1.6; opacity: 1; }
.ac-plane.warn .ac-blip, .ac-plane.warn .ac-cs { fill: #f6c343; }
.ac-plane.lost .ac-halo { stroke: #ff5a5a; stroke-dasharray: none; stroke-width: 2; opacity: 1; fill: rgba(255, 90, 90, 0.12); }
.ac-plane.lost .ac-blip, .ac-plane.lost .ac-cs { fill: #ff5a5a; }
.ac-plane.sel .ac-blip { fill: #ff7ac8; }
.ac-plane.sel .ac-cs { fill: #ff7ac8; text-decoration: underline; }
.ac-plane:focus-visible .ac-blip { stroke: #fff; stroke-width: 2; }

.ac-side { display: grid; gap: 12px; min-width: 0; }
.ac-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ac-start { font: 600 15px var(--body); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }
.ac-time { font: 600 15px var(--mono); color: var(--ink-soft); }
.ac-score { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ac-score div { background: var(--paper-2); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.ac-score dt { font-size: 12px; line-height: 1.25; color: var(--ink-soft); }
.ac-score dd { margin: 2px 0 0; font: 600 22px/1.1 var(--mono); }
.ac-score .g dd { color: #2f855a; }
.ac-score .r dd { color: #c53030; }
.ac-score .y dd { color: #b7791f; }
.widget .ac-sel { margin: 0; font: 600 14px/1.45 var(--mono); color: var(--ink); min-height: 4.3em; }
.ac-cmd { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ac-cmd .wide { grid-column: 1 / -1; }
.ac-cmd button, .ac-chips button { font: 600 14px var(--body); padding: 9px 10px; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; }
.ac-cmd button:disabled { opacity: 0.45; cursor: default; }
.ac-cmd button:not(:disabled):hover, .ac-chips button:hover { border-color: var(--magenta); }
.ac-start:focus-visible, .ac-cmd button:focus-visible, .ac-chips button:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-chips button { font: 600 12px var(--mono); padding: 6px 9px; border-radius: 999px; }
.ac-chips button.sel { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.ac-chips button.warn { border-color: #d69e2e; }
.ac-chips button.lost { border-color: #c53030; color: #c53030; }
.widget .ac-end { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.ac-end:empty { display: none; }
.ac-legend { grid-column: 1 / -1; }

/* flights-while-you-read counter */
.widget.ac-count { grid-template-columns: 1fr; gap: 6px; }
.widget .ac-n { margin: 0; font: 600 17px/1.4 var(--body); color: var(--ink); }

/* figure: a flight passed from controller to controller */
.ch-path { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.ch-seg { fill: none; stroke-width: 7; stroke-linecap: round; opacity: 0.85; }
.ch-s1 { stroke: #3fbfb0; } .ch-s2 { stroke: #58c48a; } .ch-s3 { stroke: #6ea8ea; } .ch-s4 { stroke: #8e9cf0; } .ch-s5 { stroke: var(--magenta); }
.ch-ground { stroke: var(--ink-soft); stroke-width: 1.5; }
.ch-t { font: 600 12px var(--mono); fill: var(--ink); }
.ch-ts { font: 500 11px var(--mono); fill: var(--ink-soft); }
.ch-plane { fill: var(--magenta); }
.ch-tower { fill: var(--ink); }

/* figure: the separation "puck" */
.pk-top { fill: color-mix(in srgb, var(--blue) 14%, var(--card)); stroke: var(--blue); stroke-width: 1.8; }
.pk-side { fill: color-mix(in srgb, var(--blue) 8%, var(--card)); stroke: var(--blue); stroke-width: 1.8; }
.pk-dim { stroke: var(--magenta); stroke-width: 1.6; fill: none; }
.pk-t { font: 600 13px var(--mono); fill: var(--magenta); }
.pk-ts { font: 500 12px var(--mono); fill: var(--ink-soft); }
.pk-plane { fill: var(--ink); }

@media (max-width: 760px) {
  .widget.ac { grid-template-columns: minmax(0, 1fr); }
}

/* landing-order game */
.widget.sq { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.widget .sq-round, .widget .sq-h { margin: 0; font: 600 13px var(--mono); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.widget .sq-h { margin-top: 6px; }
.sq-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; min-height: 10px; }
.prose .widget .sq-order { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.prose .widget .sq-order li, .prose .widget .sq-order li + li { margin: 0; padding: 0; }
.prose .widget .sq-order li::before, .prose .widget .sq-order li::marker { content: none; }
.sq-order li.sq-empty { grid-column: 1 / -1; color: var(--ink-soft); font-size: 15px; }
.sq-card { width: 100%; display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rule); border-left: 5px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; font: 500 13px var(--body); }
.sq-card b { font: 600 14px var(--mono); }
.sq-card .sq-cat { font-weight: 600; }
.sq-card .sq-eta { color: var(--ink-soft); }
.sq-card:hover { border-color: var(--magenta); }
.sq-card:focus-visible, .sq-btns button:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.sq-card.cH { border-left-color: #c53030; } .sq-card.cM { border-left-color: #d69e2e; } .sq-card.cL { border-left-color: #2f855a; }
.sq-final { display: block; width: 100%; height: auto; border-radius: 12px; }
.sq-sky { fill: color-mix(in srgb, var(--blue) 10%, var(--card)); }
.sq-gs { stroke: var(--ink-soft); stroke-width: 1.2; stroke-dasharray: 4 5; }
.sq-rwy { fill: var(--ink); }
.sq-pl { fill: var(--ink); } .sq-pl.cH { fill: #c53030; } .sq-pl.cM { fill: #b7791f; } .sq-pl.cL { fill: #2f855a; }
.sq-cs { font: 600 14px var(--mono); fill: var(--ink); }
.sq-gap { font: 600 15px var(--mono); fill: var(--ink-soft); }
.sq-gap.wake { fill: var(--magenta); }
.widget .sq-total { margin: 0; font: 600 17px var(--mono); color: var(--ink); }
.widget .sq-h.gone, .widget .sq-total:empty, .widget .sq-res:empty { display: none; }
.widget .sq-res { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.sq-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.sq-btns button { font: 600 14px var(--body); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; }
.sq-btns .sq-play { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sq-btns button:disabled { opacity: .45; cursor: default; }
.ac-rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ac-rows div { background: var(--paper-2); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.ac-rows dt { font-size: 13px; line-height: 1.3; color: var(--ink-soft); }
.ac-rows dd { margin: 2px 0 0; font: 600 24px/1.1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .ac-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac-back { stroke: #f6c343; stroke-width: 1.2; stroke-dasharray: 2 6; opacity: .8; }
.ac-todo { border: 1px solid #d69e2e; border-radius: 10px; padding: 8px 10px; background: color-mix(in srgb, #f6c343 10%, var(--card)); }
.widget .ac-todo-t { margin: 0 0 4px; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: #b7791f; }
.prose .widget .ac-todo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.prose .widget .ac-todo li, .prose .widget .ac-todo li + li { margin: 0; padding: 0; font-size: 14px; line-height: 1.35; }
.ac-todo button { all: unset; cursor: pointer; font: 500 14px/1.35 var(--body); color: var(--ink); }
.ac-todo button.urgent { font-weight: 700; color: #c53030; }
.ac-todo button:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.ac-grab { fill: transparent; cursor: grab; touch-action: none; }
.ac-grab:active { cursor: grabbing; }
.ac-plane.sel .ac-grab { stroke: #ff7ac8; stroke-width: 1; stroke-dasharray: 2 3; }
.ac-lead { stroke: #7fb59a; stroke-width: 1; }
.ac-cs, .ac-fl { pointer-events: none; }
.ac-cfl { font: 600 13px var(--mono); fill: #7fd8ff; pointer-events: none; }

/* festive greeting before the quiz */
.atc-cheers { position: relative; overflow: hidden; margin: 2.2em 0 0.6em; padding: 46px 70px 24px; border-radius: 18px; text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, #1c3d6e 0%, #0f2a4a 55%, #0b1d33 100%); color: #fff; box-shadow: var(--shadow); }
.ch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.prose .atc-cheers .ch-title { position: relative; margin: 0; font: 700 clamp(22px, 4.2vw, 34px)/1.2 var(--display, var(--body)); color: #fff; text-wrap: balance; }
.prose .atc-cheers .ch-sub { position: relative; margin: 10px 0 16px; font-size: 17px; color: #cfe0ff; }
.ch-again { position: relative; font: 600 14px var(--body); padding: 8px 16px; border-radius: 999px; border: 1px solid #ff7ac8; background: transparent; color: #ff7ac8; cursor: pointer; }
.ch-again:hover { background: #ff7ac8; color: #0f2a4a; }
.ch-again:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ch-pop { position: absolute; bottom: 8px; width: 56px; height: 56px; }
.ch-pop svg { width: 100%; height: 100%; display: block; }
.ch-pop.l { left: 8px; }
.ch-pop.r { right: 8px; transform: scaleX(-1); }
.atc-cheers.pop .ch-pop.l { animation: ch-kick 0.5s ease-out; }
.atc-cheers.pop .ch-pop.r { animation: ch-kick-r 0.5s ease-out; }
.atc-cheers.pop .ch-title { animation: ch-zoom 0.7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ch-kick { 0% { transform: rotate(0); } 30% { transform: rotate(-14deg) scale(1.12); } 100% { transform: rotate(0); } }
@keyframes ch-kick-r { 0% { transform: scaleX(-1); } 30% { transform: scaleX(-1) rotate(-14deg) scale(1.12); } 100% { transform: scaleX(-1); } }
@keyframes ch-zoom { 0% { transform: scale(0.85); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } }
@media (max-width: 600px) { .atc-cheers { padding: 40px 18px 76px; } .ch-pop { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .atc-cheers.pop .ch-pop, .atc-cheers.pop .ch-title { animation: none; } }
.art-head { position: relative; }
.ch-burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }