/* ==========================================================================
   Beebud — the frame around the app
   --------------------------------------------------------------------------
   The prototype is the app and nothing else. On a phone it fills the screen;
   on a laptop it sits in a phone-shaped frame at the 375px design width, with
   the height following the window so the bottom nav is never below the fold.

   This replaced harness.css + app-mode.css on 2026-10-10, when the review
   portal (spec column, screen switcher, IA labels, captions) was retired. That
   version is archived in archive/prototype-review-2026-10-10.
   ========================================================================== */

html, body { height: 100%; }
body { margin: 0; background: var(--bg-canvas); color: var(--text); font-family: var(--font-body); }

.wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; }
.stage, .frames { width: 100%; height: 100dvh; display: flex; flex-direction: column; }
.frames > .stage { height: 100%; }

/* Full bleed on a phone: a bezel would be a phone drawn inside a phone. */
.device { width: 100%; height: 100%; background: var(--bg-canvas); overflow: hidden;
  position: relative; display: flex; flex-direction: column; }

/* On a laptop, keep the phone proportions instead of stretching a 375-wide
   layout across a monitor. Width is the design viewport; height follows the
   window, with a gutter so the frame still reads as a device. */
@media (min-width: 520px) and (min-height: 700px) {
  body { background: #E9E7E2; }
  .stage, .frames { width: auto; height: auto; align-items: center; }
  .device { width: var(--size-device-w); height: calc(100dvh - 48px); max-height: 900px;
    border: 8px solid #111; border-radius: 48px; box-shadow: var(--shadow-device); box-sizing: content-box; }
}

/* The real status bar is above this one on a phone; ours is a prop. */
.statusbar { display: flex; justify-content: space-between; align-items: center; flex: none;
  height: 44px; padding: 0 28px; font: 700 13px/1 var(--font-body); color: var(--text);
  font-variant-numeric: tabular-nums; pointer-events: none; }
.statusbar .glyphs { display: flex; gap: var(--s-1); align-items: center; }

.screen { flex: 1; overflow-y: auto; overscroll-behavior: contain; position: relative;
  scrollbar-width: none; -ms-overflow-style: none; }
.screen::-webkit-scrollbar { display: none; }

/* Sticky filter zone: canvas-coloured, so it reads as the page, not a bar.
   The 16px top padding is breathing room under the logo bar once the row sticks;
   the matching negative margin tucks it into the headline's bottom padding, so
   the unscrolled page keeps its spacing. */
.tagzone { position: sticky; top: 0; z-index: 3; background: var(--bg-canvas);
  padding-top: var(--s-4); margin-top: calc(-1 * var(--s-4)); padding-bottom: var(--s-2); }

.tail { height: 24px; }