/* Fenêtre « application plein écran » (#dhapp, cf. 78-appwin.js).
   Les cartes de la section Application ouvrent leur atelier PAR-DESSUS l'app.
   <dialog>.showModal() met la fenêtre dans le top layer : pas de z-index ici.
   Le socle (06-components.css) donne déjà à tout dialog fond transparent,
   marges auto et le voile ::backdrop - on ne reprend que ce qui diffère. */
@layer modules{
  .dhapp{ width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:0; }

  .dhapp-w{
    display:grid; grid-template-rows:auto 1fr;
    height:100%; min-height:0;
    background:var(--bg); color:var(--txt);
  }

  /* Barre de titre : même densité que le chrome des éditeurs Studio. */
  .dhapp-bar{
    display:flex; align-items:center; gap:var(--sp-10);
    padding:var(--sp-10) var(--sp-14);
    border-bottom:1px solid var(--line); background:var(--card);
  }
  .dhapp-ic{ display:flex; align-items:center; width:18px; height:18px; color:var(--accent); flex:none; }
  .dhapp-ic svg{ width:18px; height:18px; }
  .dhapp-t{ font-size:var(--fs-base); font-weight:var(--fw-strong); letter-spacing:-.01em; }
  .dhapp-sub{ font-size:var(--fs-sm); color:var(--mut); flex:1; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dhapp-sub::before{ content:'·'; margin-right:var(--sp-8); color:var(--mut2); }

  .dhapp-x{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:28px; height:28px; padding:0; cursor:pointer;
    border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--card2); color:var(--mut);
  }
  .dhapp-x:hover{ color:var(--txt); border-color:var(--mut2); }
  .dhapp-x svg{ width:15px; height:15px; }

  /* Hôte du module. Une seule rangée en 1fr : un module court (la bibliothèque,
     un éditeur) OCCUPE toute la hauteur au lieu de flotter en haut, un module
     long défile. Les ateliers qui n'ont pas de marge à eux demandent `pad`. */
  .dhapp-body{ display:grid; grid-template-rows:minmax(0,1fr); min-height:0; overflow:auto; }
  .dhapp-body > *{ min-width:0; }
  .dhapp-body.pad{ padding:var(--sp-16) var(--sp-20); }

  /* La bibliothèque Édition est dimensionnée pour un onglet : son hôte d'éditeur
     s'arrête à sa hauteur minimale (.ed-editor.full : 600px) et laisse un vide
     sous lui. En plein écran, l'éditeur DOIT remplir la fenêtre - on ne corrige
     que dans cette surface, la mise en page de l'onglet ne bouge pas. */
  .dhapp-body .ed-body{ display:flex; flex-direction:column; min-height:0; }
  .dhapp-body .ed-editor{ flex:1; min-height:0; }
  /* Dernier maillon : la racine de l'éditeur lui-même (.cide, .esh, l'éditeur de
     texte…) s'arrête à SA hauteur minimale. On l'étire sur son hôte. */
  .dhapp-body .ed-editor-host{ display:flex; flex-direction:column; }
  .dhapp-body .ed-editor-host > *{ flex:1; min-height:0; }

  .dhapp-wait{
    display:flex; align-items:center; justify-content:center; gap:var(--sp-10);
    height:100%; color:var(--mut); font-size:var(--fs-md);
  }

  /* L'animation d'ouverture du socle (translate+scale) déforme une surface
     plein écran : on ne garde que le fondu. */
  @media (prefers-reduced-motion:no-preference){
    dialog.dhapp[open]{ animation:dhappin .16s ease; }
    @keyframes dhappin{ from{ opacity:0 } to{ opacity:1 } }
  }
}