/*
 * The page: every screen's content sits in one .page column (base.html) with one vertical rhythm,
 * so components carry no outer margins of their own. Grids lay panels side by side.
 */

.page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-10) var(--space-12);
}

.grid-halves,
.grid-main-side {
  display: grid;
  align-items: start;
  gap: var(--space-6);
}

.grid-halves {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Several panels stacked in one grid cell, with the page's rhythm between them. */
.panel-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.grid-main-side {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-3);
}

.card-grid-wide {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* In-page section links, sticky under the header. Scroll sideways rather than widen the page. */
.section-tabs {
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-raised);
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  margin-bottom: calc(-1 * var(--space-2));
  border-bottom: 1px solid var(--border);
  background: var(--surface-translucent);
  backdrop-filter: blur(14px);
}

.section-tabs a {
  flex: none;
  padding: var(--space-3) 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.section-tabs a.active {
  border-bottom-color: var(--accent);
  color: var(--text-accent);
}

/* Utilities */

.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.nowrap {
  white-space: nowrap;
}

.text-success {
  color: var(--text-success);
}

.text-warning {
  color: var(--text-warning);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .grid-halves,
  .grid-main-side {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .page {
    padding: var(--space-6) var(--space-5) var(--space-10);
  }
}