/* The cockpit: the instruments, and the two layouts the lessons are flown on.

   Desktop, half a screen next to Google Meet: the dials with the systems under them on
   one side, the map on the other. Phone held sideways: the same content as pages that
   scroll across, ribbon instruments first and the map second. */

.cockpit {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    outline: none;
}

.cockpit:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

/* --- status bar --------------------------------------------------------- */

.statusbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--edge);
    background: var(--panel);
}

.chip {
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--edge);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--ink-dim);
    white-space: nowrap;
}

.chip--mode { color: var(--accent); border-color: var(--accent); }

.chip--alarm {
    color: #1a0000;
    background: var(--alarm);
    border-color: var(--alarm);
    font-weight: 700;
    animation: blink 0.8s steps(2, end) infinite;
}

@keyframes blink { 50% { opacity: 0.35; } }

/* --- the deck of pages -------------------------------------------------- */

.deck {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.deck__page {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    overflow-y: auto;
    padding: 0.6rem;
}

.panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
    align-content: start;
}

.instrument { margin: 0; }
.instrument svg { width: 100%; height: auto; display: block; }

.instrument figcaption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.15rem 0.3rem 0;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--ink-dim);
}

.instrument figcaption .sub { letter-spacing: 0; opacity: 0.7; }

.instrument figcaption .value {
    color: #7ff0a8;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.deck__page--tapes { display: flex; align-items: center; justify-content: center; }
.deck__page--map { padding: 0.3rem; overflow: hidden; }
.tapes { width: 100%; height: 100%; max-height: 100%; display: block; }

/* --- systems and keyboard ----------------------------------------------- */

.systems {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.8rem;
    margin: 0 0 1rem;
    font-variant-numeric: tabular-nums;
}

.systems dt { color: var(--ink-dim); }
.systems dd { margin: 0; text-align: right; }

.deck__page--systems h2 { font-size: 0.9rem; margin: 0 0 0.35rem; color: var(--ink-dim); }
.keys { list-style: none; margin: 0 0 0.6rem; padding: 0; color: var(--ink-dim); font-size: 0.85rem; }
.keys li { padding: 0.05rem 0; }
.hint { color: var(--ink-dim); font-size: 0.8rem; margin: 0; }

/* --- commands ----------------------------------------------------------- */

.commands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--edge);
    background: var(--panel);
    flex: 0 0 auto;
}

.commands button {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--edge);
    border-radius: 6px;
    background: #1e242d;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.commands button:hover { border-color: var(--accent); }
.commands button:disabled { opacity: 0.45; cursor: default; border-color: var(--edge); }

.targets { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-left: auto; }
.targets label { display: flex; align-items: center; gap: 0.3rem; color: var(--ink-dim); font-size: 0.85rem; }

.targets input {
    width: 5.5rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--edge);
    border-radius: 4px;
    background: #10151c;
    color: var(--ink);
    font: inherit;
}

/* --- the instruments themselves ----------------------------------------- */

.face { fill: #10151c; stroke: #39424f; stroke-width: 3; }
.tick { stroke: #9fb0c4; stroke-width: 2; fill: none; }
.tick-major { stroke: #e9eef5; stroke-width: 3.5; }

.arc { fill: none; stroke-width: 7; stroke-linecap: butt; }
.arc-white { stroke: #e9eef5; }
.arc-green { stroke: var(--ok); }
.arc-yellow { stroke: var(--warn); }
.arc-red { stroke: var(--alarm); stroke-width: 7; }

.needle { fill: #f4f7fb; stroke: #0b0f14; stroke-width: 1; }
.needle-short { fill: #b9c6d6; }
.hub { fill: #2a323d; stroke: #0b0f14; stroke-width: 2; }

.dial-label { fill: #e9eef5; font-size: 19px; font-weight: 600; text-anchor: middle; font-family: inherit; }
.dial-label.card { font-size: 21px; }

.readout-box { fill: #070a0e; stroke: #39424f; stroke-width: 1.5; }
.readout { fill: #7ff0a8; font-size: 20px; font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
.readout.small { font-size: 16px; }

.aircraft-symbol path { stroke: var(--warn); stroke-width: 4; fill: none; stroke-linecap: round; }
.index { fill: var(--warn); }
.track-bug { stroke: var(--accent); stroke-width: 5; fill: none; }

.tape-bg { fill: #10151c; stroke: #39424f; stroke-width: 2; }
.tape-window { fill: #070a0e; stroke: #2a323d; stroke-width: 1.5; }
.tape-tick { stroke: #9fb0c4; stroke-width: 1.5; fill: none; }
.tape-label { fill: #cdd8e6; font-size: 11px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.tape-label.start { text-anchor: start; }
.tape-readout { fill: #7ff0a8; font-size: 15px; font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
.tape-index { fill: var(--warn); }
.vs-bar { stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }

/* --- desktop: everything visible at once, no scrolling pages ------------- */

@media (min-width: 900px) {
    .deck {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas: "dials map" "systems map";
        overflow: hidden;
        scroll-snap-type: none;
    }

    .deck__page { min-width: 0; flex: initial; }

    /* The ribbon instruments are the phone layout: on a desktop the dials say it all. */
    .deck__page--tapes { display: none; }

    .deck__page--dials { grid-area: dials; }
    .deck__page--map { grid-area: map; padding: 0.6rem; border-left: 1px solid var(--edge); }

    .deck__page--systems {
        grid-area: systems;
        border-top: 1px solid var(--edge);
        background: #12171f;
        columns: 2 12rem;
        column-gap: 1.5rem;
    }

    .deck__page--systems .systems { break-inside: avoid; }

    .panel { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 46rem; }
}

/* --- phone held sideways: short screen, keep the pages readable ---------- */

@media (max-height: 520px) and (orientation: landscape) {
    .statusbar { padding: 0.25rem 0.5rem; }
    .chip { font-size: 0.7rem; }
    .panel { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
    .commands { padding: 0.3rem 0.5rem; }
    .commands button { padding: 0.25rem 0.6rem; font-size: 0.85rem; }
}

/* --- fase 3: guida, motore, radio, istruzioni ---------------------------- */

/* Riquadro fisso sotto la barra: modo di guida, prossimo punto, istruzioni ATC. */
.flightinfo {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid var(--edge);
    background: #0f141b;
    flex: 0 0 auto;
}

.routebox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.7rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--edge);
    border-radius: 6px;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.routebox__mode { padding: 0.05rem 0.45rem; border-radius: 4px; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.05em; }
.routebox__mode--route { background: #d86bff; color: #1a0524; }
.routebox__mode--heading { background: var(--accent); color: #06121f; }
.routebox__mode--manual { background: var(--warn); color: #1f1600; }
.routebox__end { color: var(--ink-dim); }
.routebox__reengage, .atcbox button {
    padding: 0.15rem 0.55rem;
    border: 1px solid #d86bff;
    border-radius: 5px;
    background: #2a1433;
    color: #f3d1ff;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.atcbox { display: flex; flex-wrap: wrap; gap: 0.3rem; flex: 1 1 18rem; }
.atcbox__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-size: 0.85rem;
}
.atcbox__item.is-new { border: 1px solid var(--warn); background: #2b2206; color: #ffe9a6; animation: blink 1.2s steps(2, end) 3; }
.atcbox__item.is-done { border: 1px solid var(--edge); color: var(--ink-dim); }
.atcbox__item button { border-color: var(--warn); background: #3a2d07; color: #ffe9a6; }
.atcbox__ok { color: var(--ok); font-weight: 800; }

/* Slider di quota verticale, con l'indice della quota assegnata. */
.dials { display: flex; gap: 0.6rem; align-items: stretch; }
.dials .panel { flex: 1 1 auto; }
.altslider {
    flex: 0 0 4.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.2rem;
    border: 1px solid var(--edge);
    border-radius: 6px;
    background: #10151c;
}
.altslider__value { color: #7ff0a8; font-weight: 800; font-variant-numeric: tabular-nums; }
.altslider__value small { color: var(--ink-dim); font-weight: 400; }
.altslider__track { position: relative; flex: 1 1 auto; min-height: 9rem; display: flex; justify-content: center; }
.altslider input[type=range] {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 2.2rem;
    height: 100%;
    margin: 0;
    accent-color: #7ff0a8;
}
.altslider__bug {
    position: absolute;
    right: -0.2rem;
    transform: translate(100%, 50%);
    padding: 0 0.25rem;
    border-radius: 3px;
    background: var(--warn);
    color: #1f1600;
    font-size: 0.7rem;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
}
.altslider__label { color: var(--ink-dim); font-size: 0.7rem; text-align: center; }
.altitude-bug { fill: var(--warn); stroke: #1f1600; stroke-width: 1; }

/* Strumenti motore compatti in fila. */
.engine-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.4rem 0.8rem;
    margin-top: 0.6rem;
}
.egauge { margin: 0; }
.egauge svg { width: 100%; height: 1.4rem; display: block; }
.egauge figcaption { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--ink-dim); }
.egauge__value { color: #7ff0a8; font-weight: 700; font-variant-numeric: tabular-nums; }
.egauge--yellow .egauge__value { color: var(--warn); }
.egauge--red .egauge__value { color: var(--alarm); animation: blink 0.8s steps(2, end) infinite; }
.egauge__band--green { fill: var(--ok); }
.egauge__band--yellow { fill: var(--warn); }
.egauge__band--red { fill: var(--alarm); }
.egauge__needle { fill: #f4f7fb; stroke: #0b0f14; stroke-width: 0.8; }

/* Magneti, transponder e radio. */
.magnetos, .radio__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-bottom: 0.5rem; }
.magnetos__label, .radio__label { min-width: 3.2rem; color: var(--ink-dim); font-size: 0.8rem; font-weight: 700; }
.magnetos button, .radio button {
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--edge);
    border-radius: 5px;
    background: #1e242d;
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}
.magnetos button.is-on, .radio button.is-on { border-color: #7ff0a8; color: #7ff0a8; background: #12281c; }
.magnetos .magnetos__off.is-on { border-color: var(--alarm); color: var(--alarm); background: #2a1010; }
.radio__ident.is-on { animation: blink 0.6s steps(2, end) infinite; }
.radio input {
    width: 5.2rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--edge);
    border-radius: 4px;
    background: #070a0e;
    color: #7ff0a8;
    font: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.radio input.is-wrong { border-color: var(--alarm); }
.radio__active { color: #7ff0a8; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 4.5rem; }
.radio__swap { font-size: 1rem !important; }

/* Checklist. */
.checklist { margin: 0.4rem 0 0.8rem; }
.checklist h2 small { color: var(--ink-dim); font-weight: 400; }
.checklist details { border-bottom: 1px solid var(--edge); padding: 0.2rem 0; }
.checklist summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.checklist ul { list-style: none; margin: 0.25rem 0 0.35rem; padding: 0; }
.checklist li label { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.85rem; padding: 0.1rem 0; }

@media (min-width: 900px) {
    .deck__page--dials { display: flex; flex-direction: column; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .flightinfo { padding: 0.2rem 0.4rem; gap: 0.3rem; }
    .routebox, .atcbox__item { font-size: 0.75rem; padding: 0.1rem 0.4rem; }
    .deck__page--tapes { gap: 0.4rem; }
    .altslider { flex-basis: 4rem; }
    .altslider__track { min-height: 6rem; }
    .engine-row { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0.3rem; }
    .dials .panel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Altezza dello slider: fissa accanto ai quadranti, tutta la pagina accanto ai nastri. */
.dials { align-items: flex-start; }
.dials .altslider__track { flex: none; height: 13rem; }
.deck__page--tapes { gap: 0.6rem; align-items: stretch; }
.deck__page--tapes .altslider { align-self: stretch; }
.deck__page--tapes .altslider__track { flex: 1 1 0; min-height: 0; }
.deck__page--tapes .tapes { flex: 1 1 auto; min-width: 0; }

@media (max-height: 520px) and (orientation: landscape) {
    /* Sul telefono la barra resta su una riga: il resto si legge nelle altre pagine. */
    .chip--optional { display: none; }
    .statusbar { flex-wrap: nowrap; overflow-x: auto; }
    .dials .altslider__track { height: 8rem; }
}
.statusbar, .flightinfo { flex: 0 0 auto; }
.statusbar .chip, .statusbar .callsign { flex-shrink: 0; }
.radio input.radio__standby { width: 6.2rem; }

/* A terra: rullaggio, punto attesa, parcheggio. */
.groundbox { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border: 1px solid var(--line, #334); border-radius: 6px; }
.groundbox__hint { color: var(--ink-dim); font-size: 0.85rem; }
.routebox__mode--circuit { background: #1f6f5c; }

/* --- suggerimenti di fraseologia, sopra la mappa ------------------------------------------ */
.deck__page--map { display: flex; flex-direction: column; gap: 0.4rem; }
.deck__page--map > .map-frame { flex: 1 1 auto; height: auto; min-height: 12rem; }
.phrasebox { flex: 0 0 auto; padding: 0.4rem 0.6rem; border: 1px solid var(--edge); border-left: 3px solid #7fd4ff; border-radius: 6px; background: #111823; font-size: 0.85rem; }
.phrasebox__head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.phrasebox__langs { display: flex; gap: 0.2rem; }
.phrasebox__langs button { padding: 0 0.35rem; border: 1px solid var(--edge); border-radius: 3px; background: transparent; color: var(--ink-dim); font: inherit; font-size: 0.7rem; cursor: pointer; }
.phrasebox__langs button.is-on { background: #7fd4ff; color: #06121f; border-color: #7fd4ff; }
.phrasebox p { margin: 0.2rem 0 0; }
.phrasebox__written { font-weight: 700; color: #e9eef5; }
.phrasebox__spoken { color: #9fdcff; font-style: italic; }
.phrasebox__reply { color: #c9d3de; }
.phrasebox__reply span { color: var(--ink-dim); }
.phrasebox__note { color: #ffcf70; }
.phrasebox__source { color: var(--ink-dim); font-size: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; }
.phrasebox__unverified { padding: 0 0.3rem; border-radius: 3px; background: rgba(255, 176, 32, 0.2); color: #ffcf70; }
@media (max-height: 520px) and (orientation: landscape) {
    .phrasebox { padding: 0.2rem 0.4rem; font-size: 0.72rem; }
    .phrasebox__reply, .phrasebox__source, .phrasebox__note { display: none; }
    .phrasebox__spoken { display: none; }
    .phrasebox--compact .phrasebox__written { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}