/*
 * EMS single-frame tablet portrait and landscape layout.
 *
 * The source map artwork remains 474 x 570. On a 1024 x 768 logical iPad
 * viewport it is proportionally scaled so the full mission form and an
 * internally scrolling pilot roster stay inside one browser frame.
 */

@supports (height: 100dvh) {
    :root {
        --ems-frame-height: 100dvh;
    }
}

@supports not (height: 100dvh) {
    :root {
        --ems-frame-height: 100vh;
    }
}

/*
 * JavaScript adds .single-frame-landscape after recognizing a touch landscape
 * viewport between 900 and 1100 CSS pixels wide. The media query is a fallback
 * so the layout still works when browser identification is unavailable.
 */
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1100px) and (max-height: 820px) {
    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    body {
        font-size: 12px;
    }

    .mission-device-layout {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        box-sizing: border-box;
        width: 100vw;
        max-width: none;
        height: var(--ems-frame-height);
        margin: 0;
        padding: calc(4px + var(--ems-safe-top, 0px))
                 calc(4px + var(--ems-safe-right, 0px))
                 calc(4px + var(--ems-safe-bottom, 0px))
                 calc(4px + var(--ems-safe-left, 0px));
        overflow: hidden;
    }

    .mission-device-layout .ems-topbar {
        position: static;
        min-height: 42px;
        margin: 0 0 4px;
        padding: 5px 8px;
        gap: 8px;
    }

    .mission-device-layout .ems-topbar h1 {
        margin: 0 0 2px;
        font-size: 19px;
        line-height: 1.05;
    }

    .mission-device-layout .ems-topbar p,
    .mission-device-layout .ems-host-status {
        font-size: 11px;
        line-height: 1.1;
    }

    .mission-device-layout .ems-main {
        display: grid;
        grid-template-rows: clamp(342px, 51vh, 390px) minmax(0, 1fr);
        gap: 4px;
        min-height: 0;
        overflow: hidden;
    }

    body.mission-data-is-collapsed .mission-device-layout .ems-main {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .mission-device-layout .ems-panel {
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 5px;
        overflow: hidden;
    }

    .mission-device-layout .panel-header {
        min-height: 24px;
        margin: 0 0 3px;
        gap: 6px;
    }

    .mission-device-layout .panel-header h2 {
        font-size: 16px;
        line-height: 1;
    }

    .mission-device-layout .panel-header button {
        min-height: 32px;
        padding: 3px 8px;
        font-size: 12px;
    }

    .mission-device-layout .mission-sheet-state {
        min-height: 0;
        margin: 0 0 4px;
        padding: 3px 6px;
        font-size: 11px;
        line-height: 1.15;
    }

    .mission-device-layout .mission-sheet-panel {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto auto;
        min-height: 0;
    }

    .mission-device-layout .mission-configuration-layout {
        grid-template-columns:
            minmax(190px, 0.92fr)
            minmax(300px, 1.38fr)
            minmax(180px, 0.82fr);
        gap: 5px;
        min-height: 0;
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    .mission-device-layout .mission-config-cell {
        min-height: 0;
        height: 100%;
        padding: 4px;
        overflow: hidden;
    }

    .mission-device-layout .mission-config-cell > h3 {
        margin: 0 0 3px;
        padding: 0 0 3px;
        font-size: 12px;
        line-height: 1;
    }

    .mission-device-layout .mission-map-preview-cell {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        align-self: stretch;
        width: 100%;
        max-width: none;
        min-height: 0;
    }

    .mission-device-layout .mission-map-preview-frame {
        align-self: center;
        width: auto;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0 auto;
        aspect-ratio: 474 / 570;
    }

    .mission-device-layout .mission-map-preview-cell figcaption {
        min-height: 0;
        margin: 2px 0 0;
        font-size: 10px;
        line-height: 1.05;
    }

    .mission-device-layout .mission-map-preview-placeholder {
        padding: 6px;
        font-size: 11px;
        line-height: 1.15;
    }

    .mission-device-layout .mission-parameter-cell,
    .mission-device-layout .mission-option-cell {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .mission-device-layout .mission-parameter-list,
    .mission-device-layout .mission-option-list {
        min-height: 0;
        height: 100%;
    }

    .mission-device-layout .mission-parameter-item {
        flex: 1 1 0;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 4px;
        min-height: 0;
        padding: 1px 0;
        font-size: 11px;
        line-height: 1.05;
    }

    .mission-device-layout .mission-parameter-control select {
        min-height: 30px;
        height: 30px;
        padding: 2px 4px;
        font-size: 11px;
    }

    .mission-device-layout .mission-option-list .mission-option-list-item {
        flex: 1 1 0;
        grid-template-columns: 1.65rem minmax(0, 1fr);
        gap: 4px;
        min-height: 0;
        padding: 1px 2px;
        font-size: 10.5px;
        line-height: 1.05;
    }

    .mission-device-layout .mission-option-list .mission-toggle-no-return {
        margin-top: 2px;
    }

    .mission-device-layout .vertical-toggle-switch {
        flex-basis: 16px;
        width: 16px;
        height: 28px;
        border-radius: 9px;
    }

    .mission-device-layout .vertical-toggle-switch::after {
        left: 1px;
        bottom: 1px;
        width: 12px;
        height: 12px;
    }

    .mission-device-layout .vertical-toggle input[type="checkbox"]:checked + .vertical-toggle-switch::after {
        transform: translateY(-12px);
    }

    .mission-device-layout #missionRandomizerStatus {
        min-height: 0;
        margin: 0;
        font-size: 10px;
        line-height: 1;
    }

    .mission-device-layout .mission-action-footer {
        min-height: 0;
        margin: 3px 0 0;
        padding: 0;
    }

    .mission-device-layout .mission-action-stack {
        grid-template-columns: minmax(170px, 210px);
        gap: 3px;
    }

    .mission-device-layout .mission-action-stack > button {
        min-height: 32px;
        height: 32px;
        padding: 3px 8px;
        font-size: 11px;
        line-height: 1;
    }

    .mission-device-layout .signup-panel {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto auto;
        min-height: 0;
    }

    .mission-device-layout .signup-panel .panel-header {
        margin-bottom: 3px;
    }

    .mission-device-layout #missionSheetState {
        margin: 0 0 3px;
    }

    .mission-device-layout .table-wrap {
        min-width: 0;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .mission-device-layout .signup-table {
        min-width: 0 !important;
        width: 100%;
        table-layout: fixed;
        font-size: 11px;
    }

    .mission-device-layout .signup-table thead th {
        position: sticky;
        top: 0;
        z-index: 4;
    }

    .mission-device-layout .signup-table th,
    .mission-device-layout .signup-table td {
        padding: 2px 3px;
        line-height: 1.05;
    }

    .mission-device-layout .signup-table input,
    .mission-device-layout .signup-table select,
    .mission-device-layout .signup-table button {
        min-height: 30px;
        height: 30px;
        padding: 2px 4px;
        font-size: 11px;
    }

    .mission-device-layout .signup-table .pod-col,
    .mission-device-layout .signup-table th:first-child {
        width: 42px;
    }

    .mission-device-layout .signup-table .action-col,
    .mission-device-layout .signup-table th:last-child {
        width: 82px;
    }

    .mission-device-layout .signup-table:not(.adv-signup-table) th:nth-child(2) {
        width: 20%;
    }

    .mission-device-layout .signup-table:not(.adv-signup-table) th:nth-child(3) {
        width: 43%;
    }

    .mission-device-layout .signup-table:not(.adv-signup-table) th:nth-child(4) {
        width: 17%;
    }

    .mission-device-layout .adv-signup-table th:nth-child(2) {
        width: 17%;
    }

    .mission-device-layout .adv-signup-table th:nth-child(3) {
        width: 31%;
    }

    .mission-device-layout .adv-signup-table th:nth-child(4) {
        width: 19%;
    }

    .mission-device-layout .adv-signup-table th:nth-child(5) {
        width: 13%;
    }

    .mission-device-layout .mech-choice-cell,
    .mission-device-layout .adv-mech-choice-cell {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 3px;
        align-items: center;
    }

    .mission-device-layout .mech-id-lookup,
    .mission-device-layout .adv-mech-choice-cell .mech-id-lookup {
        width: 46px;
        max-width: 46px;
    }

    .mission-device-layout .mech-lookup-status {
        min-height: 0;
        margin: 0;
        font-size: 9px;
        line-height: 1;
    }

    .mission-device-layout .mech-lookup-status:empty {
        display: none;
    }

    .mission-device-layout .signup-panel > .panel-footer {
        min-height: 0;
        margin: 3px 0 0;
    }

    .mission-device-layout .commit-btn {
        min-height: 34px;
        height: 34px;
        padding: 3px 12px;
        font-size: 12px;
    }

    .mission-device-layout .sheet-footer,
    .mission-device-layout .device-profile-badge,
    .mission-device-layout .limit-note {
        display: none;
    }

    .mission-device-layout .mission-data-summary {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 5px;
        margin: 3px 0;
    }

    .mission-device-layout .mission-data-summary-group {
        padding: 4px;
    }

    .mission-device-layout .mission-data-summary-group h3 {
        margin: 0 0 3px;
        padding-bottom: 2px;
        font-size: 12px;
    }

    .mission-device-layout .mission-data-summary-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px 6px;
    }

    .mission-device-layout .mission-option-summary-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mission-device-layout .mission-data-summary-item {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 3px;
        padding: 1px 0;
        font-size: 10px;
        line-height: 1.05;
    }

    body.mission-data-is-collapsed .mission-device-layout .mission-sheet-panel {
        max-height: 175px;
    }

    body.mission-data-is-collapsed .mission-device-layout .mission-action-stack > button {
        min-height: 32px;
    }
}
/*
 * Portrait tablet single-frame layout.
 *
 * At an iPad-class 768 x 1024 logical viewport, the Map Preview, Mission
 * Parameters, and Mission Options remain in a compact three-column row.
 * The Pilot Roster uses the remaining frame height and scrolls internally.
 */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 900px) and (min-height: 850px) and (max-height: 1200px) {
    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    body {
        font-size: 12px;
    }

    .device-orientation-notice {
        display: none !important;
    }

    .mission-device-layout {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        box-sizing: border-box;
        width: 100vw;
        max-width: none;
        height: var(--ems-live-viewport-height, var(--ems-frame-height));
        margin: 0;
        padding: calc(4px + var(--ems-safe-top, 0px))
                 calc(4px + var(--ems-safe-right, 0px))
                 calc(4px + var(--ems-safe-bottom, 0px))
                 calc(4px + var(--ems-safe-left, 0px));
        overflow: hidden;
    }

    .mission-device-layout .ems-topbar {
        position: static;
        min-height: 42px;
        margin: 0 0 4px;
        padding: 5px 8px;
        gap: 8px;
    }

    .mission-device-layout .ems-topbar h1 {
        margin: 0 0 2px;
        font-size: 18px;
        line-height: 1.05;
    }

    .mission-device-layout .ems-topbar p,
    .mission-device-layout .ems-host-status {
        font-size: 10.5px;
        line-height: 1.1;
    }

    .mission-device-layout .ems-main {
        display: grid;
        grid-template-rows: clamp(330px, 37vh, 380px) minmax(0, 1fr);
        gap: 4px;
        min-height: 0;
        overflow: hidden;
    }

    body.mission-data-is-collapsed .mission-device-layout .ems-main {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .mission-device-layout .ems-panel {
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 5px;
        overflow: hidden;
    }

    .mission-device-layout .panel-header {
        min-height: 24px;
        margin: 0 0 3px;
        gap: 6px;
    }

    .mission-device-layout .panel-header h2 {
        font-size: 15px;
        line-height: 1;
    }

    .mission-device-layout .panel-header button {
        min-height: 31px;
        padding: 3px 8px;
        font-size: 11px;
    }

    .mission-device-layout .mission-sheet-state {
        min-height: 0;
        margin: 0 0 4px;
        padding: 3px 6px;
        font-size: 10.5px;
        line-height: 1.1;
    }

    .mission-device-layout .mission-sheet-panel {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto auto;
        min-height: 0;
    }

    .mission-device-layout .mission-configuration-layout {
        grid-template-columns:
            minmax(138px, 0.78fr)
            minmax(265px, 1.42fr)
            minmax(142px, 0.8fr);
        gap: 4px;
        min-height: 0;
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    .mission-device-layout .mission-config-cell {
        min-width: 0;
        min-height: 0;
        height: 100%;
        padding: 4px;
        overflow: hidden;
    }

    .mission-device-layout .mission-config-cell > h3 {
        margin: 0 0 3px;
        padding: 0 0 3px;
        font-size: 11px;
        line-height: 1;
    }

    .mission-device-layout .mission-map-preview-cell {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        align-self: stretch;
        width: 100%;
        max-width: none;
        min-height: 0;
    }

    .mission-device-layout .mission-map-preview-frame {
        align-self: center;
        width: auto;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0 auto;
        aspect-ratio: 474 / 570;
    }

    .mission-device-layout .mission-map-preview-cell figcaption {
        min-height: 0;
        margin: 2px 0 0;
        font-size: 9px;
        line-height: 1;
    }

    .mission-device-layout .mission-map-preview-placeholder {
        padding: 5px;
        font-size: 10px;
        line-height: 1.1;
    }

    .mission-device-layout .mission-parameter-cell,
    .mission-device-layout .mission-option-cell {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .mission-device-layout .mission-parameter-list,
    .mission-device-layout .mission-option-list {
        min-height: 0;
        height: 100%;
    }

    .mission-device-layout .mission-parameter-item {
        flex: 1 1 0;
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 3px;
        min-height: 0;
        padding: 1px 0;
        font-size: 10.5px;
        line-height: 1;
    }

    .mission-device-layout .mission-parameter-control select {
        min-height: 29px;
        height: 29px;
        padding: 2px 3px;
        font-size: 10.5px;
    }

    .mission-device-layout .mission-option-list .mission-option-list-item {
        flex: 1 1 0;
        grid-template-columns: 1.5rem minmax(0, 1fr);
        gap: 3px;
        min-height: 0;
        padding: 1px 2px;
        font-size: 9.5px;
        line-height: 1;
    }

    .mission-device-layout .mission-option-list .mission-toggle-no-return {
        margin-top: 1px;
    }

    .mission-device-layout .vertical-toggle-switch {
        flex-basis: 15px;
        width: 15px;
        height: 26px;
        border-radius: 8px;
    }

    .mission-device-layout .vertical-toggle-switch::after {
        left: 1px;
        bottom: 1px;
        width: 11px;
        height: 11px;
    }

    .mission-device-layout .vertical-toggle input[type="checkbox"]:checked + .vertical-toggle-switch::after {
        transform: translateY(-11px);
    }

    .mission-device-layout #missionRandomizerStatus {
        min-height: 0;
        margin: 0;
        font-size: 9px;
        line-height: 1;
    }

    .mission-device-layout .mission-action-footer {
        min-height: 0;
        margin: 2px 0 0;
        padding: 0;
    }

    .mission-device-layout .mission-action-stack {
        grid-template-columns: minmax(160px, 190px);
        gap: 3px;
    }

    .mission-device-layout .mission-action-stack > button {
        min-height: 30px;
        height: 30px;
        padding: 2px 7px;
        font-size: 10.5px;
        line-height: 1;
    }

    .mission-device-layout .signup-panel {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto auto;
        min-height: 0;
    }

    .mission-device-layout .signup-panel .panel-header {
        margin-bottom: 3px;
    }

    .mission-device-layout #missionSheetState {
        margin: 0 0 3px;
    }

    .mission-device-layout .table-wrap {
        min-width: 0;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .mission-device-layout .signup-table {
        min-width: 0 !important;
        width: 100%;
        table-layout: fixed;
        font-size: 10.5px;
    }

    .mission-device-layout .signup-table thead th {
        position: sticky;
        top: 0;
        z-index: 4;
    }

    .mission-device-layout .signup-table th,
    .mission-device-layout .signup-table td {
        padding: 2px;
        line-height: 1;
    }

    .mission-device-layout .signup-table input,
    .mission-device-layout .signup-table select,
    .mission-device-layout .signup-table button {
        min-height: 29px;
        height: 29px;
        padding: 2px 3px;
        font-size: 10.5px;
    }

    .mission-device-layout .signup-table .pod-col,
    .mission-device-layout .signup-table th:first-child {
        width: 38px;
    }

    .mission-device-layout .signup-table .action-col,
    .mission-device-layout .signup-table th:last-child {
        width: 72px;
    }

    .mission-device-layout .signup-table:not(.adv-signup-table) th:nth-child(2) {
        width: 20%;
    }

    .mission-device-layout .signup-table:not(.adv-signup-table) th:nth-child(3) {
        width: 45%;
    }

    .mission-device-layout .signup-table:not(.adv-signup-table) th:nth-child(4) {
        width: 15%;
    }

    .mission-device-layout .adv-signup-table th:nth-child(2) {
        width: 15%;
    }

    .mission-device-layout .adv-signup-table th:nth-child(3) {
        width: 30%;
    }

    .mission-device-layout .adv-signup-table th:nth-child(4) {
        width: 19%;
    }

    .mission-device-layout .adv-signup-table th:nth-child(5) {
        width: 13%;
    }

    .mission-device-layout .mech-choice-cell,
    .mission-device-layout .adv-mech-choice-cell {
        display: grid;
        grid-template-columns: 43px minmax(0, 1fr);
        gap: 2px;
        align-items: center;
    }

    .mission-device-layout .mech-id-lookup,
    .mission-device-layout .adv-mech-choice-cell .mech-id-lookup {
        width: 43px;
        max-width: 43px;
    }

    .mission-device-layout .mech-lookup-status {
        min-height: 0;
        margin: 0;
        font-size: 8px;
        line-height: 1;
    }

    .mission-device-layout .mech-lookup-status:empty {
        display: none;
    }

    .mission-device-layout .signup-panel > .panel-footer {
        min-height: 0;
        margin: 3px 0 0;
    }

    .mission-device-layout .commit-btn {
        min-height: 32px;
        height: 32px;
        padding: 2px 10px;
        font-size: 11px;
    }

    .mission-device-layout .sheet-footer,
    .mission-device-layout .device-profile-badge,
    .mission-device-layout .limit-note {
        display: none;
    }

    .mission-device-layout .mission-data-summary {
        grid-template-columns: 1fr;
        gap: 4px;
        margin: 3px 0;
    }

    .mission-device-layout .mission-data-summary-group {
        padding: 4px;
    }

    .mission-device-layout .mission-data-summary-group h3 {
        margin: 0 0 3px;
        padding-bottom: 2px;
        font-size: 11px;
    }

    .mission-device-layout .mission-data-summary-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px 5px;
    }

    .mission-device-layout .mission-option-summary-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mission-device-layout .mission-data-summary-item {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 3px;
        padding: 1px 0;
        font-size: 9.5px;
        line-height: 1;
    }

    body.mission-data-is-collapsed .mission-device-layout .mission-sheet-panel {
        max-height: 185px;
    }
}