/* The family guide chrome: the header, nav, hero, and footer the four published guides draw
   the same, plus the body typography, table, code, and button rules the guides' own pages
   share underneath it. This file is vendored into each guide's `docs/assets/css/site.css` by
   `scripts/distribute-guide-styles.py`, the way `brand/icons/` is vendored into each product --
   see DESIGN.md#published-guide-consistency and #published-guide-chrome. Do not edit a vendored
   copy directly; edit this file and re-run the script.

   What stays out, and why: `--accent`/`--accent-surface` are the one thing DESIGN.md assigns
   per product rather than fixing family-wide, so they are declared in each guide's own
   `site-local.css`, loaded after this file, along with any selector that names a component
   only that guide has (a card grid, a task list, a bridge-launch panel). A shared file that
   also carried those would be four files disagreeing on what "shared" means.

   Reconciled 2026-08-05 from the four guides' independently maintained copies (dal, dalDesk,
   dalMap, dalSDR), which agreed on the token values DESIGN.md already fixed and drifted below
   them. Two drifts were a family rule already being broken rather than a style choice between
   equals, and are not carried forward: a header `backdrop-filter` blur, which
   DESIGN.md#dark-appearance declines by name as assuming a native compositor; and a card and
   button `box-shadow` standing in for elevation in dark appearance, which the same section
   fixes to surface tone instead. `table` and `th` text sized off [the scale](../../DESIGN.md#the-scale)
   moved onto its nearest step -- `table` to Body (`1rem`), `th` to Fine (`0.75rem`) -- rather
   than to whichever guide happened to hold the plurality.

   Every margin, padding, and gap moved onto DESIGN.md's spacing scale the same way --
   `0.25/0.5/0.75/1/1.5/2/3rem` -- rather than the finer-grained values (`0.35rem`, `0.65rem`,
   `0.72rem`, and others) three of the four guides had drifted to independently. Only dalDesk
   had a test holding its own guide to this scale; the other three had drifted below where
   anything was watching. `border-radius` moved onto a token set the same way dalDesk's
   application already uses -- `--radius-xs/-sm/-radius/-radius-lg` at
   `0.25/0.5/0.75/1rem` -- rather than four more ad hoc values. The clamp minimum on
   `.page-content` is a fluid range, not a step, the same reason the hero title's clamp sits
   outside the type scale.

   Where nothing above decided it, the guide three of the four already agreed on won. */

:root {
  color-scheme: dark;
  --canvas: #071211;
  --surface: #0d1d1b;
  --surface-strong: #142724;
  --line: #38504b;
  --line-soft: #29413c;
  --ink: #f4f7f6;
  --muted: #b5c7c1;
  --dim: #8fa7a0;
  --action: #0a84ff;
  --action-fill: #006fd6;
  --action-text: #9ccaff;
  --focus: var(--action-text);
  --header: rgb(7 18 17 / 93%);
  --footer: #06100f;
  --code-surface: #102621;
  --code-ink: #d9eee8;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --max-width: 72rem;
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f4f8f6;
  --surface: #ffffff;
  --surface-strong: #edf4f1;
  --line: #aec1ba;
  --line-soft: #d5e1dc;
  --ink: #14211f;
  --muted: #4b625b;
  --dim: #5d736b;
  --action-text: #00639a;
  --focus: var(--action-fill);
  --header: rgb(247 251 249 / 94%);
  --footer: #e4efea;
  --code-surface: #e7f0ec;
  --code-ink: #183f34;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--canvas);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--canvas);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

a {
  color: var(--action-text);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--ink);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 0.2rem;
}

/* The family horizontal inset, from ../../DESIGN.md#product-header. The header, the nav, the
   content, and the footer share this frame, which is what lets the header's contents take the
   bounds of the surface below it. */
.site-frame {
  width: min(calc(100% - 3rem), var(--max-width));
  margin: 0 auto;
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-200%);
  padding: 0.5rem 0.75rem;
  background: var(--action-fill);
  color: #fff;
  font-weight: 700;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  z-index: 2;
  top: 0;
  border-bottom: 1px solid var(--line-soft);
  /* No backdrop-filter: DESIGN.md#dark-appearance declines Apple's vibrancy and material-blur
     system as assuming a native compositor the web canvas does not have. The flat
     bounded-surface language below already does the grouping work it would be there for. */
  background: var(--header);
  box-shadow: 0 1px 0 rgb(0 0 0 / 16%);
}

.header-frame {
  display: flex;
  /* The family header height, from ../../DESIGN.md#product-header. */
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Two gaps, not one: 0.75rem between the mark and the name, 0.5rem between the name and the
   descriptor. Each is a row of the header table, so each is declared where it applies. */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  text-decoration: none;
}

/* No radius, border, or glow: the artwork is a rounded frame already. */
.brand-mark {
  display: block;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.75rem;
}

/* A descriptor, not an eyebrow: sentence case, normal tracking, and spacing rather than a
   divider rule. The uppercase, letter-spaced treatment belongs to the hero eyebrow. */
.brand-context {
  margin-left: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.theme-menu {
  position: relative;
}

.theme-menu summary {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 700;
  list-style: none;
  white-space: nowrap;
}

.theme-menu summary::-webkit-details-marker {
  display: none;
}

.theme-menu summary > span:first-child {
  color: var(--muted);
}

/* One of the accent's three slots in the chrome, from DESIGN.md#published-guide-chrome. */
.theme-menu[open] summary {
  border-color: var(--accent);
  color: var(--ink);
}

.theme-menu-panel {
  position: absolute;
  z-index: 3;
  top: calc(100% + 0.45rem);
  right: 0;
  display: grid;
  min-width: 8rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: 0 12px 28px rgb(0 0 0 / 24%);
}

.theme-menu-panel button {
  min-height: 2.75rem;
  padding: 0.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.theme-menu-panel button:hover,
.theme-menu-panel button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--accent-surface);
}

.site-nav {
  display: flex;
  min-height: 3.25rem;
  align-items: stretch;
  gap: 0.25rem;
  overflow-x: auto;
}

.site-nav a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  border-bottom: 0.2rem solid transparent;
  padding: 0.5rem 0.75rem 0.5rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* The current-page underline is the second of the accent's three chrome slots. */
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

.site-nav-menu {
  display: none;
}

.page-content {
  padding-block: clamp(2.25rem, 6vw, 5rem);
}

/* The family hero, from ../../DESIGN.md#page-hero: the mark, the eyebrow, the title, and the
   lede, left-aligned and stacked in that order. */
.hero-mark {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 0 0.75rem;
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--action-text);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  color: var(--ink);
  line-height: 1.2;
}

h1 {
  max-width: 20ch;
  margin: 0;
  /* Anchored on the scale's top step and reaching past it: the one place 2rem is not enough is
     the title of a page whose whole job is to open a subject. */
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* -0.03em is the ceiling DESIGN.md#text-tracking sets, available from the Page step (1.5rem)
   up -- the clamp floor moved from 1.45rem to meet it, rather than carrying tracking below the
   step where the optical correction it exists for stops applying. */
h2 {
  margin: 3rem 0 0.75rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.03em;
}

h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
}

p,
li {
  max-width: 76ch;
}

.lede {
  max-width: 62ch;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.55;
}

.button-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--action-fill);
  border-radius: var(--radius-sm);
  background: var(--action-fill);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}

.button-link:hover {
  background: #005eb8;
  color: #fff;
}

.button-link.secondary {
  border-color: var(--line);
  background: var(--surface-strong);
  color: var(--muted);
}

.button-link.secondary:hover {
  border-color: var(--action);
  color: var(--ink);
}

table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 1rem;
}

th,
td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--dim);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

code {
  padding: 0.1em 0.3em;
  border-radius: var(--radius-xs);
  background: var(--code-surface);
  color: var(--code-ink);
  font-family: var(--mono);
}

pre {
  overflow-x: auto;
  padding: 0.75rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--code-surface);
  color: var(--code-ink);
  font-family: var(--mono);
  /* `monospace, monospace` is the long-standing fix for a generic monospace family resolving
     to the browser's own (larger) monospace default size rather than the inherited one -- see
     dalSDR's `pre` rule history. Declaring the size explicitly here does the same job. */
  font-size: 1em;
}

pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

.site-footer {
  padding-block: 2rem;
  border-top: 1px solid var(--line-soft);
  background: var(--footer);
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer p {
  margin: 0.25rem 0;
}

@media (max-width: 48rem) {
  .site-nav {
    display: none;
  }

  .site-nav-menu {
    display: block;
    padding-block: 0.5rem;
  }

  .site-nav-menu summary {
    min-height: 2.75rem;
    padding: 0.75rem 0;
    color: var(--ink);
    cursor: pointer;
    font-weight: 800;
  }

  .site-nav-menu nav {
    display: grid;
    gap: 0.25rem;
    padding: 0.5rem 0 0.75rem;
  }

  .site-nav-menu a {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
  }

  .site-nav-menu a[aria-current="page"] {
    border-color: var(--accent);
    color: var(--ink);
  }
}

/* The narrow inset and the narrow height are one block, so the header changes shape once on
   the way down rather than twice. The control label is not in it: the frame fixes one size,
   and the room a narrow viewport needs comes from the padding instead. */
@media (max-width: 38rem) {
  .site-frame {
    width: min(calc(100% - 2rem), var(--max-width));
  }

  .header-frame {
    min-height: 3.5rem;
  }

  .brand-context {
    display: none;
  }

  .theme-menu summary {
    padding-inline: 0.5rem;
  }
}

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