/* ============================================================================
   codalume.com — chrome.css
   LAYOUT FOR THE EXPANDED SITE, not a theme.

   site.css carries the header/nav components. This file carries only the
   layout consequences of the site growing to thirteen destinations: a
   four-column footer and table surfaces for the measurement pages. The nav is
   six top-level entries in site.css, so the old `nowrap` / shrink-the-links
   rules that used to live here are gone — they were the cause of the 2026-10
   cut-off (761px–980px: thirteen links on one unwrappable row, 576px of
   horizontal document overflow at an 800px viewport).

   Everything is expressed against site.css tokens/classes: this file only
   adjusts layout properties on site.css components, it does not redefine one.
   Dark mode and print styles come from dark.css and are untouched.
   ========================================================================== */

/* ── header ─────────────────────────────────────────────────────────────── */

/* The header grows to fit its contents rather than clipping them. */
.site-header__inner {
  min-height: var(--header-h);
  padding-block: 0.4rem;
}

@media (max-width: 760px) {
  .site-header__inner {
    padding-block: 0;
  }
}

/* ── footer ─────────────────────────────────────────────────────────────── */

/* Brand + Sections + Record + Elsewhere. */
.site-footer__grid {
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
}

@media (max-width: 980px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ── tables ─────────────────────────────────────────────────────────────── */
/* The performance page renders the raw measurement as tables. site.css has no
   table component, so they arrived with browser defaults: cramped columns and
   — on a 390px screen — 539px of content pushing the document wide. The
   wrapper scrolls instead, and the table gets the site's type scale. */

.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.table-wrap th,
.table-wrap td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table-wrap th {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--panel-2);
}

.table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.table-wrap td {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}

/* First column is the path/asset name — let it use the prose face so long
   paths stay readable while the numbers keep a fixed grid. */
.table-wrap td:first-child {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--text);
}