/* ═══════════════════════════════════════════════════════════════════════════
   layout.css — Shell layout, tab content area, responsive breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Body is the tab viewport, no page scroll ───────────────────────────── */
html, body {
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

/* ── Tab content area (fills remaining space below nav) ─────────────────── */
.tab-content {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ── Tab pane (injected by tabs.js) ─────────────────────────────────────── */
.tab-pane {
  display: none;
  padding: 1.5rem 1rem;
}

.tab-pane.active {
  display: block;
}

/* Home tab specifically fills the viewport */
.tab-pane--fill {
  display: none;
  padding: 0;
  height: 100%;
}
.tab-pane--fill.active {
  display: flex;
  flex-direction: column;
}

/* ── Container (shared across all tabs) ─────────────────────────────────── */
.container {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (min-width: 576px) {
  .tab-pane { padding: 2rem 1.5rem; }
}

@media (min-width: 768px) {
  .container  { max-width: 704px; }
  .tab-pane   { padding: 2rem 2rem; }
}

@media (min-width: 992px) {
  .container  { max-width: 800px; }
  .tab-pane   { padding: 2.5rem 2rem; }
}

@media (min-width: 1200px) {
  .container  { max-width: 880px; }
}