/* Application shell and page-level layout.
 *
 * Two-pane layout (Task C slice C1): sidebar at medium+ breakpoints,
 * tab strip below. Both navs are always rendered; CSS picks.
 *
 * The body is the flex container — no wrapper div. This lets auth
 * pages center naturally without fighting a nested flex context. */
body {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.main-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* The sidebar and main-col are direct children of body. */
.sidebar { display: none; }

@media (min-width: 48rem) {
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    align-self: flex-start;
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 13rem;
    padding: var(--space-4);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
  }
}

.site-nav,
main {
  width: min(100% - 2rem, 56rem);
  margin-inline: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 3.5rem;
}

/* Must come after the .site-nav base rules above: on medium+
 * breakpoints the sidebar replaces the top tab strip. */
@media (min-width: 48rem) {
  .site-nav { display: none; }
}

.sidebar .site-title { font-weight: 700; }

.site-title { margin-right: auto; }

main { padding-bottom: var(--space-10); }

section {
  margin-block: var(--space-8) var(--space-8);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

h1 { margin-block: var(--space-6) var(--space-4); }
h2 { margin-top: 0; font-size: 1.25rem; }