html, body { height: 100%; }

body {
  font-family: var(--font);
  font-size: var(--text-base);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.app {
  display: grid;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-areas: "header header" "sidebar content";
  min-height: 100%;
}

.app-header { grid-area: header; position: sticky; top: 0; z-index: 30; }
.app-sidebar { grid-area: sidebar; }
.app-content { grid-area: content; padding: var(--space-5); overflow-x: auto; }

/* Centre the content column. On a wide monitor a full-bleed layout leaves the
   eye travelling the whole screen width between a label and its value. */
.content-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  width: 100%;
}

/* Form screens narrow the whole column, so the heading and the card centre
   together. Centring only the card leaves the title stranded at the far left,
   which reads as misalignment rather than as a centred form. */
.content-inner.content-narrow { max-width: 40rem; }
.content-inner.content-wide { max-width: 60rem; }

.page-title { font-size: var(--text-xl); margin-bottom: var(--space-5); }

.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--space-4);
}
.auth-brand {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto var(--space-5);
}

.auth-card {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
}

/* Hamburger: only ever visible below the breakpoint. */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  color: inherit;
  padding: var(--space-1) var(--space-2);
  margin-right: var(--space-3);
  line-height: 1;
}

.sidebar-scrim { display: none; }

@media (max-width: 820px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "content";
  }

  .nav-toggle { display: inline-block; }

  /* Off-canvas rather than stacked above the content: a stacked sidebar pushes
     the actual page below the fold on every single screen. */
  .app-sidebar {
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    width: min(78vw, 260px);
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 160ms ease-out;
    overflow-y: auto;
  }

  .app.nav-open .app-sidebar { transform: translateX(0); }

  .app.nav-open .sidebar-scrim {
    display: block;
    position: fixed;
    inset: var(--header-height) 0 0 0;
    z-index: 10;
    background: var(--text);
    opacity: 0.35;
  }

  .app-content { padding: var(--space-4); }
}

/* Someone who has asked for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
  .app-sidebar { transition: none; }
}