/* AT-1 simulator page. The AT-1 belongs to AIR Traffic: accent magenta (brand rule: one accent per
   product world, traffic = magenta). */
:root { --aav-acc: #e32ca0; --aav-hl-acc: #e32ca0; }
.top a.lang { color: #fff; text-decoration: none; }
.tabs { display: flex; gap: 22px; margin: 26px var(--m) 0; border-bottom: 1px solid var(--line); }
.tabs a { font: 500 12px/16px "Vito Wide", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #5f5f63; text-decoration: none; padding: 10px 0; }
.tabs a.on { color: #000; box-shadow: inset 0 -2px 0 var(--aav-acc); }
.sim { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 28px 40px; padding: 24px var(--m) 48px; align-items: start; }
@media (max-width: 960px) { .sim { grid-template-columns: 1fr; } }

.photo { position: relative; }
.photo img { width: 100%; height: auto; display: block; }
.photo .led { position: absolute; width: 2.6%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.led { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #2a2a2a; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.led.lit { box-shadow: 0 0 6px 2px var(--c), inset 0 0 0 1px rgba(255,255,255,.4); background: var(--c); }
.leds { display: grid; gap: 4px; margin: 10px 0 14px; font-size: 14px; }
.leds div { display: flex; align-items: center; gap: 10px; }
.state { font-size: 14px; color: #5f5f63; }
.progress { min-height: 24px; margin: 10px 0 0; font: 500 12px/16px "Vito Wide", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #000; }

.stick { margin-top: 18px; padding: 16px 18px; background: #f4f4f4; }
.stick h5 { margin-bottom: 8px; }
.files { list-style: none; padding: 0; margin: 10px 0; font-size: 14px; }
.files li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid #e2e2e2; }
.files a { color: #000; }
.files .empty { color: #8a8a8f; }
.stick label.uk-button-small { display: inline-block; }
.stick .warn { color: #c4006f; }

.browser { position: relative; border: 1px solid #cfcfcf; background: #fff; display: flex; flex-direction: column; height: min(78vh, 760px); }
.bar { display: flex; align-items: center; gap: 12px; padding: 7px 10px; background: #ececec; border-bottom: 1px solid #cfcfcf; font-size: 13px; }
.dots i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #c9c9c9; margin-right: 4px; }
.addr { flex: 1; background: #fff; padding: 2px 10px; border-radius: 3px; color: #333; }
.net { color: #5f5f63; white-space: nowrap; }
.browser iframe { flex: 1; width: 100%; border: 0; }
.cover { position: absolute; inset: 37px 0 0 0; background: rgba(255,255,255,.94); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.cover[hidden] { display: none; }
.cover p { max-width: 420px; font-size: 15px; }
.wizard { background: #f4f4f4; padding: 20px 24px; }
.wizard[hidden] { display: none; }
.wz-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wz-field input { font: 400 16px/20px "Vito Wide", sans-serif; padding: 8px 10px; border: 1px solid #d4d4d4; width: 160px; }
.wz-note { font-size: 14px; color: #5f5f63; margin: 6px 0 0; }
.wz-result { margin-top: 14px; font-size: 14px; }
.wz-result code { background: #fff; padding: 1px 5px; }

/* compact frame for the simulator: the unit's page needs > 1000 px for its desktop layout
   (device/style.css), and everything fits 1512 x 830 without scrolling */
body.simpage { --m: 24px; }
body.simpage .aav-edge-headline { margin-top: 18px; font-size: 30px; line-height: 36px; }
body.simpage .aav-intro-lead { margin-top: 10px; max-width: 1100px; font-size: 14px; line-height: 20px; }
body.simpage .tabs { margin-top: 14px; }
body.simpage .sim { grid-template-columns: 300px 1fr; gap: 20px 24px; padding-top: 14px; padding-bottom: 24px; }
body.simpage .browser { height: calc(100vh - 297px); min-height: 520px; }
body.simpage .stick { margin-top: 12px; padding: 12px 14px; }
body.simpage .leds { margin: 6px 0 10px; }
@media (max-width: 960px) { body.simpage .sim { grid-template-columns: 1fr; } body.simpage .browser { height: 80vh; } }

.browser[hidden] { display: none; }
body.simpage .wizard { height: calc(100vh - 297px); min-height: 520px; overflow-y: auto; }
/* the unit column scrolls inside the frame when the stick panel grows (fits 1512 x 830) */
body.simpage .unit { max-height: calc(100vh - 297px); min-height: 520px; overflow-y: auto; padding-right: 4px; }
body.simpage .site-foot { display: none; }
@media (max-width: 960px) { body.simpage .unit { max-height: none; } body.simpage .site-foot { display: block; } }

/* ---- headline backdrop: the website's rule (aav-header.css, 2026-10-28): every line of a
   black backdrop span gets .27em on both sides, the box repeated per line ---- */
.aav-edge-headline span { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .27em; }
body.simpage .aav-edge-headline { font-size: 34px; line-height: 40.8px; margin-top: 16px; }

/* ---- status LEDs: a recessed hole when off, a lit diode with core and halo when on ---- */
.led { width: 13px; height: 13px; border-radius: 50%;
       background: radial-gradient(circle at 50% 45%, #3a3a3a 0 35%, #161616 70%);
       box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); transition: background .08s, box-shadow .08s; }
.led.lit { background: radial-gradient(circle at 50% 45%, #fff 0 18%, var(--c) 45%, color-mix(in srgb, var(--c) 70%, #000) 100%);
           box-shadow: 0 0 4px 1px var(--c), 0 0 12px 3px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 0 1px rgba(255,255,255,.35); }
.photo .led { width: 1.8%; height: auto; aspect-ratio: 1; }
.photo .led:not(.lit) { opacity: 0; }
.photo .led.lit { box-shadow: 0 0 3px 1px var(--c), 0 0 10px 4px color-mix(in srgb, var(--c) 60%, transparent); }
.leds { gap: 7px; }
.leds div { font: 400 14px/18px "Vito", sans-serif; }

/* ---- configuration file panel ---- */
.cfg { margin-top: 14px; padding: 14px 16px; background: #f4f4f4; }
.cfg h5 { margin-bottom: 4px; }
.cfg .meta { margin: 0 0 12px; line-height: 18px; }
.cfg-actions { display: grid; gap: 8px; }
.cfg-actions .uk-button { display: block; text-align: left; }
.cfg-msg { font-size: 14px; line-height: 19px; margin: 12px 0 0; }
.cfg-msg .led { width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; }
.aav-edge-headline span.acc { padding-inline: .27em; }

/* legend and result line: plain round dots in the LED's colour, no glow (Marc, 2026-10-29);
   the glow stays on the photo only */
.leds .led, .cfg-msg .led, .guide .led { background: #cfcfcf; box-shadow: none; }
.leds .led.lit, .cfg-msg .led.lit, .guide .led.lit { background: var(--c); box-shadow: none; }

/* embedded in howto.html: the unit as a compact row above the configuration page, which keeps
   its desktop layout (> 1000 px) */
body.embed .top, body.embed .aav-edge-headline, body.embed .aav-intro-lead, body.embed .tabs, body.embed .site-foot { display: none; }
body.embed .sim { padding: 0; grid-template-columns: 1fr; gap: 8px; }
body.embed .unit { display: grid; grid-template-columns: 170px auto 1fr; align-items: center; gap: 4px 18px; height: auto; max-height: none; min-height: 0; overflow: visible; }
body.embed .unit .photo { grid-row: 1 / span 2; }
body.embed .unit .leds { margin: 0; }
body.embed .unit > .row { grid-column: 2; }
body.embed .unit .progress { display: none; }
body.embed .cfg { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 8px 12px; background: none; }
body.embed .cfg h5, body.embed .cfg .meta, body.embed .cfg-actions { display: none; }
body.embed .cfg-msg { margin: 0; }
body.embed .browser { height: calc(100vh - 110px); min-height: 0; }