/* App shell: sidebar + main content area + module grid */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ============================================================
   Sidebar (desktop)
   ============================================================ */

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: var(--space-6) var(--space-4);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.sidebar-brand {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 0 var(--space-3);
}

.sidebar-brand .brand-mark {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--accent-solid);
  line-height: 1;
}

.sidebar-brand .brand-tag {
  font-size: var(--fs-display-tag);
  color: var(--mauve-8);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar-nav .nav-item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  transition: background var(--motion-fast), color var(--motion-fast);
}

.sidebar-nav .nav-item:hover {
  background: var(--mauve-3);
  color: var(--fg-default);
}

.sidebar-nav .nav-item[aria-current="page"] {
  background: var(--accent-bg);
  color: var(--accent-text);
}

.sidebar-nav .nav-icon {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.sidebar-nav .nav-key {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  padding: 2px 6px;
  background: var(--mauve-3);
  border-radius: var(--radius-1);
}

.sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}

.sidebar-foot .help-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  margin-left: calc(-1 * var(--space-2));
  border-radius: var(--radius-2);
  color: var(--fg-subtle);
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.sidebar-foot .help-hint:hover {
  background: var(--mauve-3);
  color: var(--fg-default);
}
.sidebar-foot .help-hint:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ============================================================
   Main content area
   ============================================================ */

.main {
  padding: var(--space-6) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
}

.page-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

.page-subtitle {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

/* ============================================================
   Module grid — fixed sizes (S/M/MV/L/W/XL)
   See plan.md → "Module grid system"
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
  /* Fixed row height — `auto` lets module content grow the row, which
     for SVG-based modules creates a resize feedback loop (chart re-measures
     container, re-renders, container re-grows…). If a module needs more
     vertical space, give it `module-body { overflow: auto }` or move it to
     a multi-row size token. */
  grid-auto-rows: 210px;
  grid-auto-flow: dense;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .app {
    grid-template-columns: var(--sidebar-w-narrow) 1fr;
  }
  .sidebar {
    padding: var(--space-5) var(--space-2);
  }
  .sidebar-brand .brand-tag,
  .sidebar-nav .nav-item span.nav-label,
  .sidebar-nav .nav-key,
  .sidebar-foot .help-hint span:last-child {
    display: none;
  }
  .sidebar-nav .nav-item {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .sidebar-brand {
    justify-content: center;
    padding: 0;
  }
}

@media (max-width: 640px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    height: auto;
    width: 100%;
    border-right: none;
    border-top: 1px solid var(--border-subtle);
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: var(--space-2);
    gap: 0;
    z-index: 10;
    box-shadow: var(--shadow-lg);
  }
  .sidebar-brand,
  .sidebar-foot {
    display: none;
  }
  .sidebar-nav {
    flex-direction: row;
    gap: 0;
    flex: 1;
    justify-content: space-around;
  }
  .sidebar-nav .nav-item {
    flex: 1;
    justify-items: center;
    padding: var(--space-2);
  }
  .main {
    padding: var(--space-4) var(--space-4) calc(72px + var(--space-4));
  }
  .grid {
    grid-template-columns: 1fr;
    --grid-cols: 1;
  }
}