/* App shell frame: roots, main column, screen gutters, focus mode, content scroller. */
.app-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  background: var(--bg-main);
  align-items: stretch;
}

/* Chrome ink ladder has light-theme values, so no separate light-theme block. */
.app-sidebar,
.app-topbar {
  --text-primary:   var(--chrome-ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);
}
.app-footer {
  --text-primary:   var(--ink-2);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);
}
.app-main {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.app-topbar {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 16px;
  padding: 0 24px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
  height: 60px; /* matches .app-sidebar-brand — top borders align */
  flex: 0 0 auto;
  box-sizing: border-box;
}
/* Padding in rem for a11y scaling — do not switch to px. */
.app-content > .screen {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  /* ONE padding declaration; the breakpoints below re-pin the tokens only. Screen gutters
     live here and nowhere else — a page that adds its own inline padding stacks on top of
     this and indents further than every other page (which is what feedback did). */
  --screen-pad-top: 2rem;
  --screen-pad-inline: 5.75rem;
  --screen-pad-bottom: 3rem;
  padding: var(--screen-pad-top) var(--screen-pad-inline) var(--screen-pad-bottom);
  box-sizing: border-box;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .app-content > .screen { --screen-pad-top: 1.5rem; --screen-pad-inline: 2rem; --screen-pad-bottom: 2.5rem; }
}
@media (max-width: 640px) {
  .app-content > .screen { --screen-pad-top: 1rem; --screen-pad-inline: 1rem; --screen-pad-bottom: 0.5rem; }
}
/* Per-screen max-width restorations — specificity (0,3,0) beats shell's (0,2,0). */
.app-content > .screen.recruit-screen     { max-width: 1300px; }
.app-content > .screen.deploy-screen,
.app-content > .screen.map-select-screen,
.app-content > .screen.game-screen        { max-width: 1600px; }
.app-content > .screen > * + * {
  margin-top: 1.5rem;
}
@media (max-width: 640px) {
  .app-content > .screen > * + * { margin-top: 1rem; }
}
/* width:100% on direct children stops short sections shrink-wrapping. */
.app-content > .screen.legal-screen > *,
.app-content > .screen.about-screen > *,
.app-content > .screen.static-page > * {
  width: 100%;
  box-sizing: border-box;
}

/* Gameover overrides shell default; owns vertical rhythm via gap. */
.app-content > .screen.gameover-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1500px;
}
.app-content > .screen.gameover-screen > * + * { margin-top: 0; }

/* Focus-mode PLAY rules live in screens/play-layout.css, the one owner of the play grid.
   What stays here is shell chrome: which shell parts focus hides, and the exit pill. */
.app-shell.is-focus .app-sidebar,
.app-shell.is-focus .app-topbar,
.app-shell.is-focus .app-footer {
  display: none;
}
.app-shell.is-focus .app-main {
  margin-left: 0;
}
.app-shell.is-focus .app-content {
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
}

.app-focus-exit {
  display: none;
  position: fixed;
  top: 12px; right: 12px;
  z-index: 1200;
  align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--accent-gold);
  border-radius: 999px;
  color: var(--accent-gold);
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  transition: background 0.12s ease, transform 0.12s ease;
}
.app-focus-exit:hover {
  background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
  transform: translateY(-1px);
}
.app-focus-exit svg {
  width: 16px; height: 16px; display: block;
}
/* Selector LIST, not a copy: the guest shell reuses this pill verbatim, and without its scope
   here a spectator in focus mode has no way back but the F key. */
.app-shell.is-focus .app-focus-exit,
.app-public.is-focus .app-focus-exit {
  display: inline-flex;
}
.app-content {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  min-width: 0;
  background: var(--bg-main);
}

/* .app-content is the height-bounded scroller; the inbox fills it rather than hugging its rows,
   so a short queue still paints a full-height panel. Nothing competes for this — no `.screen`
   or `.admin-feedback-screen` min-height exists anywhere, at any breakpoint. */
.app-content .admin-feedback-screen {
  min-height: 100%;
}