/* app-view.css -- session 310: View her app (app-view.js). A full-screen layer over the Hub: the yellow banner across the
   top, her app in a 390-wide frame below it (the whole width on a phone). */
.av-wrap{ position:fixed; inset:0; z-index:9000; background:rgba(22,24,26,.72); display:flex; flex-direction:column }
body.av-open{ overflow:hidden }
.av-banner{ background:#ffd13a; color:#16181a; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 16px; font-size:14px; line-height:1.35; box-shadow:0 2px 8px rgba(0,0,0,.18) }
.av-say b{ font-weight:800 }
.av-ends{ font-weight:600; color:#5c3f0d; margin-left:6px; white-space:nowrap }
.av-acts{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.av-langs{ display:inline-flex; background:rgba(22,24,26,.10); border-radius:9px; padding:3px; gap:3px }
.av-lang{ border:none; background:transparent; font:inherit; font-size:13px; font-weight:600; color:#4a3b0a; padding:5px 10px; border-radius:7px; cursor:pointer }
.av-lang.on{ background:#16181a; color:#ffd13a; font-weight:700 }
.av-close{ border:none; font:inherit; font-size:13.5px; font-weight:700; padding:7px 16px; border-radius:9px; background:#16181a; color:#ffffff; cursor:pointer }
.av-lang:focus-visible, .av-close:focus-visible{ outline:2px solid #16181a; outline-offset:2px }
.av-stage{ flex:1 1 auto; min-height:0; display:flex; justify-content:center; padding:16px 16px 0 }
.av-frame{ width:390px; max-width:100%; height:100%; border:0; border-radius:18px 18px 0 0; background:#ffffff; box-shadow:0 10px 30px rgba(0,0,0,.35) }
@media (max-width: 480px){
  .av-banner{ padding:8px 12px; font-size:13px }
  .av-stage{ padding:0 }
  .av-frame{ width:100%; border-radius:0 }
}