/* ══════════════════════════════════════════════════════════════════════════
   BARRE — app frame, screen region, tab bar, overlay stacking
   ══════════════════════════════════════════════════════════════════════ */

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface-app);
  font-family: var(--font-ui);
  color: var(--text-ink);
  overflow: hidden;
  position: relative;
}

/* Boot: hold the paint until the first screen is committed, so there is no
   flash of an empty frame or of the wrong screen. */
.app.is-booting > #main,
.app.is-booting > #tabbar { opacity: 0; }
.app > #main, .app > #tabbar { transition: opacity .18s var(--ease); }

/* ── The screen region ─────────────────────────────────────────────────── */
#main {
  flex: 1;
  position: relative;
  min-height: 0;
}

/* One persistent container per screen; inactive ones stay in the DOM (hidden)
   so their scroll position survives a round trip. */
.b-screen {
  position: absolute;
  inset: 0;
  padding: var(--safe-top) 0 var(--space-16);
  background: var(--surface-app);
}
.b-screen[data-chrome="none"] {
  padding-top: var(--safe-top-detail);
}
.b-screen[hidden] { display: none !important; }

/* Every block inside a screen sets its own 22px gutter, so chip rows can
   bleed-scroll to the edge. */
.b-block { padding: 0 var(--gutter); }

/* ── Tab bar ───────────────────────────────────────────────────────────── */
.b-tabbar {
  flex: none;
  z-index: var(--z-tabbar);
  background: var(--tabbar-bg);
  border-top: 1px solid var(--border-card);
  -webkit-backdrop-filter: var(--tabbar-blur);
  backdrop-filter: var(--tabbar-blur);
  padding: var(--space-7) var(--space-6) calc(var(--space-7) + var(--safe-bottom, 0px) + 21px);
  display: flex;
}
.b-tabbar[hidden] { display: none !important; }

/* ── Overlay / sheet stacking ──────────────────────────────────────────── */
.b-overlay-host {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
}
.b-overlay-host.is-open { display: block; }

.b-scrim {
  position: absolute;
  inset: 0;
  background: rgba(42, 15, 38, .34);
}

.b-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--surface-app);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  padding: var(--space-17) var(--gutter) calc(var(--space-20) + var(--safe-bottom, 0px));
  max-height: 86%;
  overflow-y: auto;
  animation: sheetUp .22s var(--ease) both;
}
.b-sheet h2 { font: var(--font-display-panel); margin-bottom: var(--space-8); }

/* ── Studio overlay ────────────────────────────────────────────────────── */
.b-studio {
  position: fixed;
  inset: 0;
  z-index: var(--z-studio);
  background: var(--surface-studio);
  color: var(--text-on-studio);
  padding: calc(var(--safe-top)) var(--gutter) calc(var(--space-21) + var(--safe-bottom, 0px));
  overflow-y: auto;
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.b-toast-host {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(88px + var(--safe-bottom, 0px));
  z-index: var(--z-toast);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.b-toast {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  font: var(--font-label-pill);
  border-radius: var(--radius-pill);
  padding: 11px 18px;
  animation: riseIn .22s var(--ease) both;
  max-width: calc(100% - 2 * var(--gutter));
}

/* ── Update pill ───────────────────────────────────────────────────────── */

/* riseIn's own `to { transform: none }` cannot be used here: `animation-fill-mode:
   both` keeps that final frame applied for as long as the pill is on screen, and
   `transform: none` overrides the translateX(-50%) that centres it — so the pill
   sat half a pill-width right of centre in normal use, and was only correct under
   prefers-reduced-motion, where motion.css collapses the animation away. This
   keyframe rises the same 10px while carrying the centring through every frame,
   including the last. (spec 09 §4) */
@keyframes riseInCentred {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translateX(-50%); }
}
.b-updatepill {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--safe-top) - 26px);
  z-index: var(--z-update);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  font: var(--font-label-pill);
  border-radius: var(--radius-pill);
  padding: 11px 18px;
  animation: riseInCentred .25s var(--ease) both;
}
.b-updatepill[hidden] { display: none !important; }