/* ============================================
   WAB OS — page Applications : l'application ouverte
   Une grande fenêtre dans son écran bleu (le cadre partagé .screen de
   desk-blocks.css). Dans la barre, les modules en onglets : un rail
   creusé, l'onglet actif en touche blanche ;
   dans le corps, la capture du module, qui défile dans la fenêtre
   comme dans l'app. Une capture plus courte que la fenêtre est
   prolongée par le fond et le filet latéral relevés sur l'image
   (--app-bg, --app-rule, --app-side) : jamais de bande vide.
   Les fenêtres des modules, plus bas, reçoivent le même prolongement
   (.app-fill).
   ============================================ */

.app-stage {
    position: relative;
    max-width: var(--app-stage);
    margin: clamp(40px, 6vw, 64px) auto 0;
}

.app-screen {
    position: relative;
}

.app-win {
    box-shadow: 0 0 0 var(--hair) var(--win-edge), var(--win-shadow-lift);
}

/* ── La barre ── la grille partagée (pastilles · titre) : les onglets
   prennent la place du titre au centre ; au téléphone, ils passent
   sur une seconde rangée, sur toute la largeur. Sans script, pas
   d'onglets : le nom de fichier reste au centre. */
.app-win__bar {
    height: auto;
    min-height: var(--win-bar-h);
    padding: 8px 10px;
    row-gap: 8px;
}

.js .app-win__title {
    display: none;
}

.app-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    padding: 3px;
    border-radius: var(--r-ctl);
    background: var(--tab-track);
    box-shadow: inset 0 var(--hair) 0 var(--line);
}

.app-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--tab-h);
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-key);
    background: transparent;
    font: inherit;
    font-size: var(--t-cap);
    font-weight: var(--w-regular);
    white-space: nowrap;
    color: var(--klein-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), scale 0.12s var(--ease-out);
}

.app-tab .sym {
    width: 14px;
    height: 14px;
}

.app-tab[aria-selected='true'] {
    background: var(--tab-on);
    box-shadow: 0 0 0 var(--hair) var(--edge), var(--tab-shadow);
    color: var(--klein-text);
}

.app-tab:focus-visible {
    outline-offset: 1px;
}

@media (hover: hover) {
    .app-tab:not([aria-selected='true']):hover {
        background: var(--hover-tint);
    }
}

.app-tab:active {
    scale: 0.97;
}

/* ── Le corps ── */
.app-win__body {
    aspect-ratio: var(--app-ratio);
}

.app-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    animation: app-panel-in 0.24s var(--ease-out);
}

.app-panel:focus-visible {
    outline-offset: -3px;
}

.app-win__body .app-panel img,
.app-fill .app-fill__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
}

@keyframes app-panel-in {
    from {
        opacity: 0;
    }
}

/* Le prolongement : le fond de l'app et le filet de sa barre latérale,
   à la même position que sur la capture. */
.app-panel,
.app-fill {
    background:
        linear-gradient(90deg,
            transparent var(--app-side),
            var(--app-rule) var(--app-side),
            var(--app-rule) calc(var(--app-side) + 1px),
            transparent calc(var(--app-side) + 1px)),
        var(--app-bg);
}

.app-fill .app-fill__img {
    position: absolute;
    inset: 0 0 auto;
}

/* Très petit écran : les trois onglets tiennent sans leurs symboles. */
@media (max-width: 379px) {
    .app-tab {
        padding: 0 6px;
    }

    .app-tab .sym {
        display: none;
    }
}

@media (min-width: 700px) {
    .app-win__bar {
        min-height: 46px;
        padding-block: 0;
    }

    /* Les onglets au centre de la barre, comme une barre d'outils. */
    .app-tabs {
        grid-column: 2;
        grid-row: 1;
    }

    .app-tab {
        --tab-h: 32px;
        flex: none;
        padding: 0 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-panel {
        animation: none;
    }

    .app-tab:active {
        scale: 1;
    }
}