layout.css

/* ══════════════════════════════════════════════════════════════════════════
   starlight-gstack · Datasheet — structure
   ══════════════════════════════════════════════════════════════════════════

   Colour lives in tokens.css. This sheet is the part that makes the theme
   Datasheet rather than a recolour: mono body, serif display, hairline grid,
   grain, numbered sections, sharp corners, uppercase tracked labels.

   Everything here targets Starlight's own class names and element structure —
   no markup changes required beyond the Header/Footer overrides.
   ────────────────────────────────────────────────────────────────────────── */

/* ── grain ─────────────────────────────────────────────────────────────────
   Fixed rather than per-element so it does not tile differently across
   scroll containers. Sits above content but takes no pointer events. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--gs-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── hairline grid ─────────────────────────────────────────────────────────
   Masked in from the top-right of the content column so it reads as a
   drafting surface behind the title, and is gone by the time real prose
   starts. Deliberately not applied to the sidebar or nav. */
.main-frame .main-pane {
  position: relative;
}
.main-frame .main-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--gs-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--gs-grid) 1px, transparent 1px);
  background-size: var(--gs-grid-size) var(--gs-grid-size);
  /* Kept tight to the top-right corner. Any wider and it runs under body copy,
     where a 1px grid behind mono text reads as a rendering artefact. */
  -webkit-mask-image: radial-gradient(
    ellipse 45% 32% at 100% 0%,
    #000,
    transparent 70%
  );
  mask-image: radial-gradient(
    ellipse 45% 32% at 100% 0%,
    #000,
    transparent 70%
  );
}
.main-frame .main-pane > * {
  position: relative;
  z-index: 1;
}

/* ── type ──────────────────────────────────────────────────────────────── */
body {
  font-feature-settings:
    "ss02" on,
    "cv05" on;
  letter-spacing: -0.005em;
}

/* Display serif on page titles and anything explicitly opted in with
   `.gs-display`. Section headings stay mono — mixing both at every level turns
   into a ransom note.

   `.sl-markdown-content .gs-display` is listed as well as the bare class, and
   it has to be: Astro compiles component-scoped styles with `:where()`, which
   has ZERO specificity, so a scoped rule in a hero component loses to the
   `.sl-markdown-content :is(h2, …)` mono rule below and silently renders in
   the wrong face. The two-class form outranks it. */
.content-panel h1#_top,
.hero h1,
.sl-markdown-content .gs-display,
.gs-display {
  font-family: var(--gs-font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  color: var(--sl-color-white);
  text-transform: none;
}

.sl-markdown-content :is(h2, h3, h4, h5, h6) {
  font-family: var(--sl-font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Numbered section rules — 01 OPTIONS ───────────────────────────────
   Counter is scoped to the markdown body so the numbering restarts per page
   and ignores headings in the sidebar or TOC. */
.sl-markdown-content {
  counter-reset: gs-section;
}

/* Starlight does NOT put headings directly in .sl-markdown-content — each one
   is wrapped in `<div class="sl-heading-wrapper level-hN">` alongside its
   anchor link. A `.sl-markdown-content > h2` selector therefore never matches
   anything, silently. The rule goes on the wrapper; the heading inside becomes
   the label.

   `.gs-section` is the same treatment as an opt-in class, for hand-written
   splash pages whose headings have no wrapper. The doubled class there is
   load-bearing: Starlight's `.sl-markdown-content h2:not(:where(.not-content *))`
   font-size rule uses `:not(:where())`, which contributes zero specificity, so
   it ties with a single class and wins on source order. */
.sl-markdown-content .sl-heading-wrapper.level-h2,
.gs-section.gs-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.75rem;
  /* Sized at 0.8125rem rather than the 0.625rem used for nav and table labels.
     Those label the chrome; this labels the content. On the keybindings pages
     the heading IS the payload — "? — Toggle Help" is the thing a reader scans
     for — and a heading set smaller and dimmer than the prose under it inverts
     the hierarchy. This is the smallest size that still outweighs body copy. */
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sl-color-white);
}

.sl-markdown-content .sl-heading-wrapper.level-h2 > h2 {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* Inline code and keys inside a heading opt out of the uppercase transform.
   These sites document case-sensitive YAML keys and literal keystrokes, so
   rendering `prSections` as PRSECTIONS is not a style choice, it is wrong.
   They also keep their own size instead of inheriting the label's. */
.sl-markdown-content .sl-heading-wrapper :is(h1, h2, h3, h4) :is(code, kbd),
.gs-section.gs-section :is(code, kbd) {
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
}

.sl-markdown-content .sl-heading-wrapper.level-h2::before,
.gs-section.gs-section::before {
  counter-increment: gs-section;
  content: counter(gs-section, decimal-leading-zero);
  color: var(--gs-accent);
  font-size: var(--gs-label-size);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.sl-markdown-content .sl-heading-wrapper.level-h2::after,
.gs-section.gs-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sl-color-hairline);
}

/* A body-level h1 (several reference pages open with one) is a title, not a
   section — give it the display serif rather than the label treatment. */
.sl-markdown-content .sl-heading-wrapper.level-h1 > h1 {
  font-family: var(--gs-font-display);
  font-weight: 400;
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
  letter-spacing: -0.02em;
}

/* ── sharp corners ─────────────────────────────────────────────────────── */
.sl-markdown-content :is(pre, table, img, video),
.card,
.starlight-aside,
.sl-link-card,
.expressive-code .frame pre,
.expressive-code .frame .header {
  border-radius: var(--gs-radius) !important;
}

/* ── tables as spec grids ──────────────────────────────────────────────────
   `display: table` is load-bearing. Starlight ships
   `.sl-markdown-content table { display: block; overflow: auto }` so wide
   tables scroll on narrow screens — but a block-level <table> sizes its
   internal table box to content, so `width: 100%` stretches only the outer
   block and the cells stop partway across, leaving a dead strip on the right
   with no seams and a header background that ends mid-row.

   Restore real table layout at reading widths, and re-enable the scroll
   behaviour only where it is actually needed. */
.sl-markdown-content.sl-markdown-content table {
  display: table;
  width: 100%;
  border: 1px solid var(--sl-color-hairline);
  border-collapse: collapse;
  font-size: 0.8125rem;
}

@media (max-width: 50rem) {
  .sl-markdown-content.sl-markdown-content table {
    display: block;
    overflow-x: auto;
  }
}
.sl-markdown-content.sl-markdown-content :is(th, td) {
  border: 0;
  border-right: 1px solid var(--sl-color-hairline);
  border-bottom: 1px solid var(--sl-color-hairline);
  padding: 0.5625rem 0.75rem;
  vertical-align: top;
}
.sl-markdown-content.sl-markdown-content :is(th, td):last-child {
  border-right: 0;
}
.sl-markdown-content.sl-markdown-content tr:last-child td {
  border-bottom: 0;
}
.sl-markdown-content.sl-markdown-content th {
  background: var(--gs-panel);
  font-size: var(--gs-label-size);
  font-weight: 600;
  letter-spacing: var(--gs-label-track);
  text-transform: uppercase;
  color: var(--gs-dim);
  text-align: left;
}
/* First column of a reference table is nearly always the option key. */
.sl-markdown-content.sl-markdown-content td:first-child {
  color: var(--sl-color-white);
  white-space: nowrap;
}

/* ── uppercase micro-labels ────────────────────────────────────────────── */
.sidebar-content > ul > li > details > summary,
.sidebar-content > ul > li > .large,
.right-sidebar h2,
.pagination-links a > span:first-child {
  font-size: var(--gs-label-size) !important;
  letter-spacing: var(--gs-label-track);
  text-transform: uppercase;
  color: var(--gs-dim);
  font-weight: 600;
}

/* ── sidebar ───────────────────────────────────────────────────────────────
   The ASCII tree markers (│ for items, → / ↓ for groups) came from gdash's
   local stylesheet. They belong in the theme rather than in one site: they are
   the most Datasheet thing in the whole design, and all four sites want them. */
.sidebar-content {
  font-size: 1em;
  line-height: 1;
}

.sidebar-content ul > li {
  --sl-sidebar-item-padding-inline: 0;
  display: flex;
  border-left: none;
  padding-block: 2px;
  color: var(--sl-color-gray-2);
}

.sidebar-content ul > li::before {
  content: "│";
  padding-right: 0.375rem;
  color: var(--sl-color-hairline);
  flex-shrink: 0;
}

.sidebar-content ul > li:has(details)::before {
  content: "";
  padding-right: 0;
}

.sidebar-content a {
  border-radius: 0;
  border-inline-start: none;
  font-size: 0.75rem;
  line-height: 1.35;
  padding-block: 0;
  padding-inline: 0.25rem;
  text-decoration: none;
}

.sidebar-content a[aria-current="page"] {
  background: transparent;
  color: var(--gs-accent);
  font-weight: 600;
}

.sidebar-content a[aria-current="page"]:hover {
  background: transparent;
}

.sidebar-content summary {
  padding-top: 0;
  font-weight: 600;
}

.sidebar-content summary svg {
  display: none;
}

.sidebar-content summary .group-label::before {
  content: "→";
  padding-right: 0.375rem;
  color: var(--gs-dim);
}

.sidebar-content details[open] > summary .group-label::before {
  content: "↓";
}

/* ── asides: dashed, accent rule on the leading edge only ──────────────── */
.starlight-aside {
  background: transparent;
  border: 1px dashed var(--sl-color-hairline);
  border-inline-start: 2px solid var(--gs-accent);
  padding: 0.875rem 1rem;
}
.starlight-aside__title {
  font-size: var(--gs-label-size);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gs-accent);
  font-weight: 600;
}
.starlight-aside__icon {
  color: var(--gs-accent);
}

/* ── code ──────────────────────────────────────────────────────────────── */
.sl-markdown-content code:not(:where(pre code)) {
  border: 1px solid var(--sl-color-hairline);
  padding: 0.1em 0.35em;
  font-size: 0.86em;
}
.expressive-code .frame .header {
  font-size: var(--gs-label-size);
  letter-spacing: var(--gs-label-track);
  text-transform: uppercase;
}

/* ── links: underline is the signal, colour is the confirmation ────────────
   `.gs-cta` and `.gs-card` are excluded because they are buttons and panels,
   not prose links. Without the exclusion this rule repaints the primary CTA's
   label in the accent — on an accent-filled background — and the button
   renders as a solid block of colour with no readable text. */
.sl-markdown-content
  a:not(:where(.sl-link-card, .gs-cta, .gs-card, .not-content *)) {
  color: var(--gs-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--gs-accent-edge);
}
.sl-markdown-content
  a:not(:where(.sl-link-card, .gs-cta, .gs-card, .not-content *)):hover {
  border-bottom-color: var(--gs-accent);
}

/* ── pagination ────────────────────────────────────────────────────────── */
.pagination-links a {
  border-radius: var(--gs-radius);
  border-color: var(--sl-color-hairline);
  background: var(--gs-panel);
}
.pagination-links a:hover {
  border-color: var(--gs-accent);
}

/* ── TOC ───────────────────────────────────────────────────────────────── */
.right-sidebar a {
  font-size: 0.6875rem;
}

/* ── kbd ───────────────────────────────────────────────────────────────────
   These sites document keyboard-driven tools; <kbd> is load-bearing content,
   not decoration. Physical-key look, sharp, no accent. */
kbd:not(.sl-hidden) {
  display: inline-block;
  margin-top: 0;
  padding: 2px 5px;
  border: 1px solid var(--sl-color-hairline);
  border-bottom-width: 2px;
  border-radius: var(--gs-radius);
  background-color: var(--gs-surface);
  color: var(--sl-color-gray-1);
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-xs);
  font-weight: 500;
  line-height: 1;
}

/* ── focus: one visible ring, accent, everywhere ───────────────────────── */
:where(a, button, summary, input, select):focus-visible {
  outline: 2px solid var(--gs-accent);
  outline-offset: 2px;
  border-radius: var(--gs-radius);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}