/* ============================================================
   FTMU — App Shell boundary (Blocco 8 · B3B1 → B10A)

   Perimetro persistente #bf-app-shell: header (logo FTMU + #bf-shell-nav +
   avatar) · #bf-activity-host · #bf-route-root · #bf-player-host.
   #bf-shell-nav = 6 voci SPA (Food·Training·Music·Utility·Oggi·Progressi).
   --bf-mobile-nav-h: altezza della bottom-nav mobile (0 su desktop), usata
   anche da bf-ytplayer.js per alzare il mini-player compact sopra la nav.
   ============================================================ */
[hidden] { display: none !important; }

:root { --bf-mobile-nav-h: 0px; }

#bf-app-shell { display: block; }

/* ---- header persistente: logo FTMU + nav + avatar ---- */
#bf-shell-header {
  display: flex; align-items: center; gap: 10px;
  max-width: var(--bf-w-read); margin: 2px auto 12px; padding: 2px 0;
}
#bf-app-shell.bf-wide #bf-shell-header { max-width: var(--bf-w-wide); }

#bf-shell-header .bf-shell-home {
  display: flex; align-items: center;
  text-decoration: none; flex: none;
}
/* logo lockup FTMU (wordmark, senza tagline): altezza fissa, larghezza auto.
   Niente più testo/ellissi → nessun conflitto con la nav (B10A). */
#bf-shell-header .bf-shell-logo {
  height: 34px; width: auto; display: block;
}
@media (min-width: 760px) { #bf-shell-header .bf-shell-logo { height: 38px; } }

#bf-shell-header .bf-shell-avatar {
  margin-left: 8px; width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: #fff; color: var(--green); border: 1px solid var(--line);
  font: 700 .9rem 'Poppins', Arial, sans-serif; cursor: pointer;
  display: grid; place-items: center;
}

/* ---- #bf-shell-nav ---- */
#bf-shell-nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 2px; min-width: 0;
}
#bf-shell-nav a {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; border-radius: 10px;
  text-decoration: none; color: var(--muted);
  font: 600 .82rem 'Poppins', system-ui, Arial, sans-serif;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
#bf-shell-nav a svg { width: 18px; height: 18px; flex: none; display: none; }
#bf-shell-nav a > span { display: inline; }
#bf-shell-nav a:hover { color: var(--ink); }
#bf-shell-nav a.is-active { color: var(--green); background: var(--green-soft, #e9f2e6); }

/* desktop: nav in linea nell'header (solo testo) */
@media (min-width: 760px) {
  #bf-shell-header { flex-wrap: nowrap; }
}

/* mobile: bottom-nav fissa, icona + label corta */
@media (max-width: 759px) {
  :root { --bf-mobile-nav-h: 54px; }
  #bf-shell-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    margin: 0; gap: 0; justify-content: space-around;
    padding: 5px 2px calc(env(safe-area-inset-bottom, 0px) + 5px);
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line, rgba(90, 120, 90, .2));
    box-shadow: 0 -4px 18px rgba(60, 90, 60, .06);
  }
  #bf-shell-nav a {
    flex: 1; flex-direction: column; gap: 2px;
    min-height: 44px; padding: 4px 0; justify-content: center;
    border-radius: 0;
    font-size: .58rem; letter-spacing: -.1px;
  }
  #bf-shell-nav a svg { display: block; width: 21px; height: 21px; }
  #bf-shell-nav a.is-active { background: transparent; }
  /* il contenuto non deve finire sotto la bottom-nav */
  #bf-app-shell { padding-bottom: calc(var(--bf-mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 8px); }
  /* nav fuori flusso (fixed) → l'avatar si tiene comunque a destra (B10A) */
  #bf-shell-header .bf-shell-avatar { margin-left: auto; }
}

/* ---- host persistenti ---- */
/* #bf-activity-host: ancora vuoto (mini-player Timer/Metronomo = B8)
   #bf-player-host: iframe YouTube unico e persistente (B4); expanded (in-flow)
   o compact (floating, position:fixed) gestito da bf-ytplayer.js (B5).
   Vuoto = nessuna riga: non occupa spazio finché non c'è una superficie. */
#bf-activity-host,
#bf-player-host {
  max-width: var(--bf-w-read);
  margin: 0 auto;
}
#bf-app-shell.bf-wide #bf-activity-host,
#bf-app-shell.bf-wide #bf-player-host { max-width: var(--bf-w-wide); }
#bf-player-host:empty { display: none; }
#bf-player-host { padding: 0 2px; }
#bf-activity-host:empty { display: none; }   /* controllo persistente GAL (B8B2) via bf-activity-ui.js */

/* il route-root non impone larghezza: la .wrap / .wrap.is-wide interna
   si auto-centra (bf-layout.css) come nelle pagine pre-shell */
#bf-route-root { display: block; }