/* Relix website — one stylesheet, no framework.
   The palette and type are the ones the capability guide already uses, so the site
   and that page read as one thing rather than two. */

/* ── Web fonts, served from this origin ──────────────────────────────────────
   Both families are SIL OFL 1.1; fonts/OFL-Newsreader.txt and fonts/OFL-Karla.txt
   are the licences, and they are why redistributing the files is permitted.

   They are served from here rather than from fonts.googleapis.com because a
   stylesheet link there makes every reader's browser announce its IP address, its
   User-Agent and the page being read to a third party, which a documentation site
   has no reason to arrange. Self-hosting is also what makes the privacy page's
   claim checkable: a rendered page names no external host, and SiteBuildTest holds
   it to that.

   Both are variable fonts, so one file covers a weight range and the two `src`
   declarations per family are subsets rather than weights. The unicode-range values
   are the ones Google serves, kept verbatim: a reader whose page holds no latin-ext
   codepoint never fetches that file. Neither family ships a Greek subset, so an
   operator glyph in a page title falls to the next font in the stack — which is what
   happened when the stylesheet was remote too.

   Vietnamese is deliberately not vendored: it is a third subset of each face for
   glyphs no page on this site uses. */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  --paper:      #FAF7F5;
  --paper-sunk: #F3EDEA;
  --ink:        #241E1F;
  --muted:      #6E6260;
  --rule:       #E2DAD6;
  --rule-firm:  #CFC3BE;
  --accent:     #9E2B3F;
  --accent-dim: #B8697A;
  --accent-wash:#F5E7EA;
  --slate:      #5A6472;
  --slate-wash: #ECEEF1;

  --tok-operator:   #9E2B3F;
  --tok-keyword:    #7A4EA8;
  --tok-string:     #2F6B4F;
  --tok-number:     #9A5B12;
  --tok-comment:    #726867;
  --tok-comparison: #1F6F87;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* The width prose is held to. Wide for a serif — around 85 characters — because
     these pages set operators and column names in code spans, which eat the line
     without adding words to it, and because a paragraph that stops 14rem short of
     the code block under it reads as a mistake rather than as a measure. */
  --measure: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #171314;
    --paper-sunk: #1F1A1B;
    --ink:        #F0E8E6;
    --muted:      #A2938F;
    --rule:       #322A2B;
    --rule-firm:  #45393B;
    --accent:     #E58EA0;
    --accent-dim: #B8697A;
    --accent-wash:#2E1E22;
    --slate:      #9AA4B2;
    --slate-wash: #222528;

    --tok-operator:   #E58EA0;
    --tok-keyword:    #C4A5E8;
    --tok-string:     #85C7A3;
    --tok-number:     #E0B276;
    --tok-comment:    #948A89;
    --tok-comparison: #7FC2D6;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

code, kbd { font-family: var(--mono); font-size: 0.86em; }
img { max-width: 100%; }

/* ── masthead ─────────────────────────────────────────────────────────── */

.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 5;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.site-nav a {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a.current { color: var(--accent); }

/* ── search ───────────────────────────────────────────────────────────── */
/* The box sits at the end of the masthead and the results fall out of it, so the
   search is part of the site's furniture rather than a page you go to. It is the
   same box on the search page, where the results are drawn into the page instead
   — one box on the site, so the two can never hold different queries. */

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

.site-search {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  min-width: 13rem;
  flex: 0 1 18rem;
}

.site-search input {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  width: 100%;
  padding: 0.42rem 2rem 0.42rem 0.7rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 6px;
  -webkit-appearance: none;
  appearance: none;
}
.site-search input::placeholder { color: var(--muted); }
.site-search input:focus {
  outline: none;
  border-color: var(--accent-dim);
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.site-search input::-webkit-search-decoration,
.site-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.site-search kbd {
  position: absolute;
  right: 0.5rem;
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--muted);
  border: 1px solid var(--rule-firm);
  border-radius: 3px;
  padding: 0.16rem 0.3rem;
  pointer-events: none;
}
/* The hint is only a hint: it goes as soon as the box is in use, whether that is
   because it has focus or because it already holds a query. */
.site-search input:focus ~ kbd,
.site-search input:not(:placeholder-shown) ~ kbd { display: none; }

.search-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(34rem, calc(100vw - 2.5rem));
  max-height: min(30rem, calc(100vh - 7rem));
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--rule-firm);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.13);
  z-index: 20;
}

/* One result, in the panel and on the search page alike. */
.sr {
  display: block;
  padding: 0.62rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
}
.sr:last-child { border-bottom: 0; }
.sr:hover, .sr.current { background: var(--accent-wash); }
.sr.current { outline: none; }

.sr-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.875rem;
}
.sr-title { font-weight: 700; color: var(--accent); }
/* The breadcrumb says which part of the page matched, so it gives way to the title
   rather than wrapping the row onto a third line. */
.sr-crumb {
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-crumb::before { content: "›"; margin-right: 0.4rem; }
.sr-tag {
  margin-left: auto;
  padding-left: 0.6rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-dim);
  white-space: nowrap;
  flex: none;
}
.sr-snip {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}
.sr mark {
  background: none;
  color: var(--ink);
  font-weight: 600;
}
.sr-title mark { color: inherit; }

.sr-all, .sr-empty, .sr-note {
  display: block;
  padding: 0.62rem 0.9rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
  max-width: none;
}
.sr-all { font-weight: 600; border-top: 1px solid var(--rule); }

/* On the search page the results are the page, so they lose the panel's padding
   and take the measure of prose around them. */
.search-page { margin-top: 1.5rem; }
.search-page .sr { padding: 0.75rem 0; }
.search-page .sr:hover, .search-page .sr.current {
  background: none;
}
.search-page .sr:hover .sr-title { text-decoration: underline; }
.search-page .sr-note {
  padding: 0 0 0.6rem;
  border-bottom: 1px solid var(--rule-firm);
}

/* ── shell ────────────────────────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: 3rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 2.5rem 1.75rem 6rem;
}
.shell.wide { grid-template-columns: minmax(0, 1fr); max-width: 58rem; }

main { min-width: 0; }
main > * + * { margin-top: 1.1rem; }

/* ── sidebar ──────────────────────────────────────────────────────────── */

.sidebar {
  font-family: var(--sans);
  font-size: 0.875rem;
  align-self: start;
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  padding-right: 0.5rem;
  border-right: 1px solid var(--rule);
}
.sidebar .toc-index {
  display: block;
  margin-bottom: 1rem;
  font-weight: 600;
}
.toc-chapter {
  margin: 1.25rem 0 0.35rem;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin: 0.15rem 0; }
.sidebar a { color: var(--slate); text-decoration: none; }
.sidebar a:hover { color: var(--ink); text-decoration: underline; }
.sidebar a.current { color: var(--accent); font-weight: 700; }

/* The sidebar is a disclosure so a narrow screen can fold it away; on a wide one it is
   always open and the toggle is not shown. */
.sidebar-details > summary {
  display: none;
  cursor: pointer;
  font-weight: 700;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--rule-firm);
  border-radius: 6px;
  background: var(--paper-sunk);
}

/* ── on this page, and the neighbours ─────────────────────────────────── */

.rail { display: none; }
.on-page { font-family: var(--sans); font-size: 0.8125rem; }
.on-page ul { list-style: none; margin: 0; padding: 0; }
.on-page li { margin: 0.2rem 0; }
.on-page a { color: var(--slate); text-decoration: none; }
.on-page a:hover { color: var(--ink); text-decoration: underline; }

@media (min-width: 90rem) {
  .shell.has-rail { grid-template-columns: 17rem minmax(0, 1fr) 13rem; max-width: 96rem; }
  .shell.wide.has-rail { grid-template-columns: minmax(0, 1fr) 13rem; max-width: 76rem; }
  .shell.has-rail > .rail {
    display: block;
    grid-column: -2;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    border-left: 1px solid var(--rule);
    padding-left: 1rem;
  }
  /* Every child placed explicitly: an item with only a row is placed before the
     auto-placed ones, which put the page in the sidebar's column. */
  .shell.has-rail > .sidebar { grid-column: 1; grid-row: 1; }
  .shell.has-rail > main { grid-column: 2; grid-row: 1; }
  .shell.wide.has-rail > main { grid-column: 1; }
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
}
.pager a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-width: 48%;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 7px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
}
.pager a:hover { border-color: var(--accent-dim); background: var(--paper-sunk); }
.pager span { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pager .pager-next { margin-left: auto; text-align: right; }

/* ── typography ───────────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

h1 {
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 2.25rem 0 0.6rem;
}
h2 { font-size: 1.3rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--rule); }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.95rem; color: var(--muted); }

.heading-anchor {
  margin-left: 0.45rem;
  font-weight: 400;
  color: var(--rule-firm);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s;
}
h2:hover .heading-anchor, h3:hover .heading-anchor, .heading-anchor:focus { opacity: 1; }
.heading-anchor:hover { color: var(--accent); }
h2[id], h3[id] { scroll-margin-top: 5.5rem; }

p { margin: 0 0 1rem; max-width: var(--measure); }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 46rem; }
/* Shown on a manual's contents page only when that manual's PDF was rendered. */
.download { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; }

ul, ol { max-width: var(--measure); padding-left: 1.25rem; }
li { margin: 0.25rem 0; }

blockquote {
  margin: 1.25rem 0;
  padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 3px solid var(--accent-dim);
  color: var(--muted);
  max-width: var(--measure);
}
blockquote p { margin: 0; }

section.labelled, section.chapter { margin-top: 2rem; }

/* ── code ─────────────────────────────────────────────────────────────── */

pre.code {
  margin: 1rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.55;
}
pre.code code { font-size: inherit; }
pre.lang-output { background: transparent; border-style: dashed; color: var(--muted); }
/* A form the parser rejects, shown so it is recognised rather than copied. */
pre.lang-relix-invalid { border-color: var(--accent-dim); border-style: dashed; background: var(--accent-wash); }
pre.lang-relix-invalid::before {
  content: "Does not parse";
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

:not(pre) > code {
  padding: 0.08em 0.3em;
  background: var(--slate-wash);
  border-radius: 3px;
}

.t-operator   { color: var(--tok-operator); font-weight: 600; }
.t-keyword    { color: var(--tok-keyword); font-weight: 600; }
.t-string     { color: var(--tok-string); }
.t-number     { color: var(--tok-number); }
.t-comment    { color: var(--tok-comment); font-style: italic; }
.t-comparison { color: var(--tok-comparison); }
.t-logical    { color: var(--tok-keyword); }
.t-punctuation, .t-bracket { color: var(--muted); }
.t-incomplete { color: var(--muted); }
.t-type { color: var(--tok-comparison); }

/* A block's toolbar sits on its top edge, over the code rather than above it, so a
   page without the script loses no vertical rhythm. */
.code-frame, .spelled { position: relative; margin: 1rem 0; }
.code-frame > pre.code, .spelled > pre.code { margin: 0; }
.code-bar {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: flex;
  gap: 0.35rem;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.code-frame:hover .code-bar, .code-bar:focus-within { opacity: 1; }

/* A block with a spelling switch carries its toolbar as a strip of its own, since the
   switch is something to read and would otherwise sit over the code. */
.spelled, .translation .code-frame {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-sunk);
}
.spelled > .code-bar, .translation .code-frame > .code-bar {
  position: static;
  opacity: 1;
  justify-content: flex-end;
  padding: 0.35rem 0.4rem 0;
}
.spelled > pre.code, .translation .code-frame > pre.code { border: 0; background: transparent; padding-top: 0.4rem; }
.translation pre.code { white-space: pre-wrap; }
.code-bar button, .copy {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--rule-firm);
  border-radius: 5px;
  padding: 0.22rem 0.5rem;
  cursor: pointer;
}
.code-bar button:hover, .copy:hover { color: var(--ink); border-color: var(--accent-dim); }
.copy.done { color: var(--tok-string); border-color: var(--tok-string); }
.spell-switch { display: inline-flex; }
.spell-switch button { border-radius: 0; font-family: var(--mono); font-weight: 600; }
.spell-switch button:first-child { border-radius: 5px 0 0 5px; }
.spell-switch button:last-child { border-radius: 0 5px 5px 0; border-left: 0; }
.spell-switch button[aria-pressed="true"] { color: var(--accent); background: var(--accent-wash); }
figure.worked .spelled { background: var(--paper); }
figure.worked .code-frame > pre.code { background: var(--paper); }

/* ── a SQL statement and its Relix ────────────────────────────────────── */

.translation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}
.translation-side { min-width: 0; }
.translation-side .code-frame, .translation-side .spelled { margin: 0; }
.translation-side pre.code { margin: 0; height: 100%; }
.translation-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 0.3rem !important;
}
.translation-side.relix .translation-label { color: var(--accent); }
.translation-side.relix pre.code, .translation-side.relix .spelled { background: var(--accent-wash); border-color: var(--accent-dim); }
.translation-side.relix .spelled > pre.code { background: transparent; }

/* ── what the engine did ──────────────────────────────────────────────── */

details.engine {
  margin: 0.9rem 0 0.4rem;
  border-top: 1px solid var(--rule-firm);
  padding-top: 0.6rem;
}
details.engine > summary {
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.engine-body { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.8rem; }
.engine-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.35rem;
}
.engine-none { font-size: 0.93rem; color: var(--muted); margin: 0; }
.rewrites { margin: 0; font-size: 0.93rem; max-width: none; }
.rewrite-detail { color: var(--muted); font-size: 0.88rem; }
figure.worked pre.lang-plan { background: var(--paper); margin: 0; font-size: 0.75rem; }

.flow {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  align-items: center;
  gap: 0.8rem;
  overflow-x: auto;
}
.flow-inputs { display: flex; flex-direction: column; gap: 0.6rem; }
.flow-table {
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  border-collapse: separate;
  border-spacing: 0;
}
.flow-table caption {
  text-align: left;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0 0 0.2rem;
  color: var(--ink);
}
.flow-table th, .flow-table td { padding: 0.18rem 0.6rem; font-size: 0.72rem; }
.flow-table th { letter-spacing: 0.02em; text-transform: none; font-family: var(--mono); }
.flow-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.flow-step::after {
  content: "";
  width: 2.2rem;
  height: 2px;
  background: var(--accent-dim);
  box-shadow: 4px 0 0 -1px var(--accent-dim);
}
.flow-step span { max-width: 9rem; white-space: normal; text-align: center; }
.flow-output .flow-table { border-color: var(--accent-dim); }

/* ── the operator lookup ──────────────────────────────────────────────── */

.op-grid {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.6rem;
}
.op-grid li { margin: 0; }
.op-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 0.75rem;
  height: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
}
.op-card:hover { border-color: var(--accent-dim); background: var(--paper-sunk); }
.op-glyph {
  grid-row: 1 / span 2;
  font-family: var(--mono);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--tok-operator);
  min-width: 2rem;
  text-align: center;
  align-self: center;
}
.op-card.word { grid-template-columns: 1fr; }
.op-name { font-family: var(--sans); font-weight: 700; font-size: 0.9rem; }
.op-keyword { font-size: 0.72rem; color: var(--tok-keyword); background: none !important; padding: 0 !important; }
.op-what { grid-column: 1 / -1; margin-top: 0.45rem; font-size: 0.85rem; line-height: 1.4; color: var(--muted); }
.op-keys { grid-column: 1 / -1; margin-top: 0.4rem; line-height: 1.5; }
.op-keys code { font-size: 0.68rem; margin-right: 0.15rem; color: var(--slate); }

/* ── worked examples ──────────────────────────────────────────────────── */

figure.worked {
  margin: 1.5rem 0;
  padding: 0.25rem 1rem 0.5rem;
  border: 1px solid var(--rule-firm);
  border-radius: 8px;
  background: var(--accent-wash);
}
figure.worked figcaption {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.9rem;
}
figure.worked pre.code { background: var(--paper); margin-top: 0.35rem; }

/* ── tables ───────────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; margin: 1.1rem 0; }
table { border-collapse: collapse; font-size: 0.9375rem; min-width: 100%; }
th, td { text-align: left; padding: 0.45rem 0.85rem 0.45rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--rule-firm);
}
tbody tr:hover { background: var(--paper-sunk); }

/* ── diagrams ─────────────────────────────────────────────────────────── */

pre.mermaid { background: transparent; border: 0; text-align: center; margin: 1.5rem 0; }

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

.site-foot {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 1.75rem 3rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
}
.site-foot p { margin: 0; max-width: none; }
.site-foot-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin-top: 0.4rem !important; }
.site-foot a { color: var(--muted); }
.site-foot-llms { display: inline-flex; align-items: center; opacity: 0.6; }
.site-foot-llms:hover, .site-foot-llms:focus-visible { opacity: 1; }

@media (max-width: 60rem) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .sidebar-details > summary { display: block; }
  .sidebar-details[open] > summary { margin-bottom: 0.9rem; }
  /* The nav has already wrapped by here, so the box takes a row of its own rather
     than a sliver at the end of one. */
  .site-search { margin-left: 0; flex: 1 1 100%; }
  .search-panel { left: 0; right: auto; width: min(34rem, calc(100vw - 2.5rem)); }
  .sidebar {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1rem;
  }
}

@media (max-width: 44rem) {
  /* Three things do not fit on one line at this width, and squeezing them truncates
     the breadcrumb to two letters. The title takes the row it needs and the two
     labels share the next. */
  .sr-head { flex-wrap: wrap; }
  .sr-title { flex: 1 1 100%; }

  /* A sticky masthead with a wrapped nav took a third of a phone screen. Here it
     scrolls away, and the nav is one line that scrolls sideways. */
  .site-head { position: static; padding: 0.8rem 1rem; gap: 0.6rem 1rem; }
  .site-nav { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 0.2rem; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
  .shell { padding-left: 1rem; padding-right: 1rem; }
  .translation { grid-template-columns: minmax(0, 1fr); }
  .code-bar { opacity: 1; }
  .pager { flex-direction: column; }
  .pager a { max-width: none; }
  .pager .pager-next { margin-left: 0; }
}

/* ── the capability guide ─────────────────────────────────────────────── */
/* Beyond SQL is one long argument rather than a manual page, so it carries the
   layout it was written with: a masthead, a thesis panel, a tagged contents grid,
   and an entry per capability whose SQL and Relix sides sit in one comparison
   grid. The palette and the type are the site's own, which is why it reads as
   part of the site rather than as a page pasted into it.

   Everything is scoped under .capability because the page redefines p, .lede and
   the headings. Unscoped, its measure and its serif headings would reach every
   manual page on the site. */

/* One column, like .wide — without this the page is laid out in the sidebar's track
   and the whole capability guide renders 17rem wide, which is what it did from the day
   it shipped: .shell.feature set a width and inherited a two-column grid whose second
   column nothing was ever placed in. */
.shell.feature { grid-template-columns: minmax(0, 1fr); max-width: 68rem; }

.capability { --gutter: 6.5rem; --measure: 38rem; }
.capability p { margin: 0; max-width: var(--measure); }

/* The guide sets its own inline code bare, inside prose that is already mono on
   one side of every comparison; the site's wash would band those lines. */
.capability :not(pre) > code { padding: 0; background: none; }

.capability .eyebrow { margin: 0; }

/* ── masthead ── */

.capability .masthead { display: flex; flex-direction: column; gap: 1.5rem; }

.capability .masthead h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
  max-width: 20ch;
}
.capability .masthead h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.capability .lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 40rem;
}
.capability .lede + .lede { margin-top: 0.9rem; }
.capability .masthead .sub { color: var(--muted); max-width: 40rem; }

/* ── the thesis panel ── */

.capability .thesis {
  margin-top: 3.25rem;
  padding: 1.9rem 2rem 2rem;
  background: var(--paper-sunk);
  border-top: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.capability .thesis p { max-width: 42rem; }
.capability .thesis .big {
  font-size: 1.32rem;
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 32ch;
}

/* ── contents ── */

.capability .contents { margin-top: 3.5rem; }
.capability .contents ol {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.42rem 2.25rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
  max-width: none;
}
.capability .contents li {
  font-size: 0.97rem;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.capability .contents a { color: var(--ink); text-decoration: none; }
.capability .contents a:hover { color: var(--accent); text-decoration: underline; }
.capability .contents .tag {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--accent-dim);
  margin-left: auto;
  padding-left: 0.6rem;
  white-space: nowrap;
  flex: none;
}

/* ── tier openers ── */

.capability .tier { margin-top: 5.5rem; }
.capability .tier-head {
  border-top: 1px solid var(--rule-firm);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.capability .tier-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
  padding-bottom: 0;
  border-bottom: 0;
}
.capability .tier-head p { color: var(--muted); max-width: 40rem; }

/* ── an entry ── */

.capability .entry { margin-top: 3.4rem; }

.capability .entry h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.34rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 0 0 0.3rem;
  max-width: 30ch;
  text-wrap: balance;
}
.capability .entry .op {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.55rem;
}
.capability .entry p { margin-top: 0.75rem; }
.capability .entry p + p { margin-top: 0.7rem; }

/* The comparison: the label sits in the gutter rather than on a card, so the two
   sides read as one table with a rule between the rows. */
.capability .compare {
  margin-top: 1.35rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: var(--gutter) 1fr;
}
.capability .compare > div {
  padding: 0.78rem 0 0.82rem;
  border-bottom: 1px solid var(--rule);
  display: contents;
}
.capability .compare .side-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
}
.capability .compare .side-body {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.62;
  overflow-x: auto;
  max-width: none;
}
.capability .compare .sql   .side-label { color: var(--slate); }
.capability .compare .relix .side-label { color: var(--accent); }
.capability .compare .relix .side-body  { color: var(--ink); }
.capability .compare .sql   .side-body {
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.97rem;
  line-height: 1.55;
}
.capability .compare .sql .side-body code { color: var(--slate); }
.capability .compare .relix .side-body pre { margin: 0; white-space: pre; }

/* An input/result demonstration: both sides are data, so neither is prose. */
.capability .compare.io .side-body,
.capability .compare.io .sql .side-body {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.62;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.capability .compare.io .sql .side-body pre { margin: 0; white-space: pre; color: var(--muted); }
.capability .compare.io .relix .side-body pre { color: var(--ink); }

.capability .note {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  color: var(--muted);
  max-width: var(--measure);
}
.capability .note strong { color: var(--ink); font-weight: 600; }

/* ── closing sections ── */

.capability .plain { margin-top: 3rem; }
.capability .plain h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}
.capability .plain ul { margin: 0.8rem 0 0; padding-left: 1.15rem; max-width: var(--measure); }
.capability .plain li { margin-bottom: 0.5rem; }
.capability .plain li::marker { color: var(--accent-dim); }

.capability .colophon {
  margin-top: 5rem;
  border-top: 1px solid var(--rule-firm);
  padding-top: 1.4rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.capability .colophon p { max-width: 42rem; }

@media (max-width: 44rem) {
  .capability { --gutter: 4.25rem; }
  .capability .thesis { padding: 1.4rem 1.25rem 1.6rem; }
  .capability .compare { grid-template-columns: 1fr; }
  .capability .compare .side-label { padding: 0.8rem 0 0.15rem; border-bottom: 0; }
  .capability .compare .side-body { padding-top: 0.1rem; }
}


/* ── the home page ────────────────────────────────────────────────────── */
/* The home page is laid out rather than written, so like the capability guide it
   carries its own rules — every one scoped under .home, since it reuses short class
   names (.hero, .pair, .step) that would otherwise reach the manuals. */

.shell.home-shell { max-width: 72rem; }
.home { --measure: 38rem; }
.home p { max-width: var(--measure); }
.home .code-frame, .home .spelled { margin: 0; }
.home .spelled { border: 0; border-radius: 0; background: transparent; }
.home { --measure: 38rem; }
.home p { max-width: var(--measure); }
.home .section { margin-top: 5rem; }
.home .section-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.12;
  letter-spacing: -0.018em; border: 0; padding: 0; margin: 0.3rem 0 0.7rem;
  max-width: 26ch; text-wrap: balance;
}
.home .section-head p { color: var(--muted); }
.home .link-strong { font-family: var(--sans); font-size: 0.875rem; font-weight: 700; }
/* hero */
.home .hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 3rem; align-items: start; padding-top: 1rem;
}
.home .hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  line-height: 1.05; letter-spacing: -0.022em;
  margin: 0.5rem 0 1.2rem; max-width: 16ch;
}
.home .hero h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.home .hero .lede { color: var(--ink); font-size: 1.2rem; line-height: 1.55; }
.home .cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.7rem; }
.home .btn {
  font-family: var(--sans); font-weight: 700; font-size: 0.875rem;
  padding: 0.62rem 1.05rem; border-radius: 6px; text-decoration: none;
  border: 1px solid var(--accent);
}
.home .btn.primary { background: var(--accent); color: var(--paper); }
.home .btn.primary:hover { filter: brightness(1.08); }
.home .btn.ghost { color: var(--accent); }
.home .btn.ghost:hover { background: var(--accent-wash); }
.home .trust {
  list-style: none; padding: 0; margin: 1.4rem 0 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--muted);
}
.home .trust li { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; }
.home .trust li::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent-dim); }
.home .trust a { color: var(--muted); }
.home .demo { border: 1px solid var(--rule-firm); border-radius: 10px; overflow: hidden; background: var(--paper-sunk); }
.home .demo-label {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  padding: 0.6rem 1rem; border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 1rem;
}
.home .demo-label span { text-transform: none; letter-spacing: 0.02em; font-weight: 600; }
.home .demo pre.code { margin: 0; border: 0; border-radius: 0; background: var(--paper); font-size: 0.76rem; }
.home .demo .out { border-top: 1px solid var(--rule); background: var(--paper-sunk); }
.home .demo .out pre.code { background: transparent; color: var(--muted); }
.home .demo-note { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); padding: 0 1rem 0.8rem; margin: 0; max-width: none; }
/* what it is / isn't */
.home .is-isnt {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  margin-top: 3.5rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.home .is-isnt > div { padding: 1.2rem 1.2rem 1.2rem 0; }
.home .is-isnt > div + div { padding-left: 1.2rem; border-left: 1px solid var(--rule); }
/* These four are h2 because they are the page's own claims, sitting between its
   sections rather than inside one — as h3 they made the document skip a level
   straight from the h1. They are not section headings, so the global h2 rule's
   underline is reset rather than inherited. */
.home .is-isnt h2 {
  margin: 0 0 0.3rem; font-size: 0.95rem; padding-bottom: 0; border-bottom: 0;
}
.home .is-isnt p { font-size: 0.93rem; color: var(--muted); margin: 0; line-height: 1.5; }
/* federation */
.home .fed-q {
  font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-style: italic;
  margin: 2rem 0 1.4rem; padding-left: 1rem; border-left: 3px solid var(--accent); max-width: 44rem !important;
}
.home .fed-q em { font-style: normal; color: var(--accent); }
.home .fed {
  display: grid; grid-template-columns: minmax(0, 1.65fr) 2.2rem minmax(0, 1fr);
  align-items: center; gap: 0.75rem;
}
.home .fed-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.home .src { border: 1px solid var(--rule-firm); border-radius: 8px; background: var(--paper-sunk); overflow: hidden; }
.home .src-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.55rem 0.8rem 0; font-family: var(--sans); }
.home .src-head strong { font-family: var(--mono); font-size: 0.85rem; }
.home .src-head span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); white-space: nowrap; }
.home .src-sent { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); margin: 0.1rem 0.8rem 0; }
.home .src pre.code { margin: 0.4rem 0 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: var(--paper); font-size: 0.66rem; padding: 0.55rem 0.8rem; }
.home .fed-arrow { height: 2px; background: var(--accent-dim); position: relative; }
.home .fed-arrow::after {
  content: ""; position: absolute; right: -2px; top: -5px;
  border: 6px solid transparent; border-left: 8px solid var(--accent-dim); border-right: 0;
}
.home .fed-arrow.down { width: 2px; height: 1.6rem; margin: 0 auto; }
.home .fed-arrow.down::after { right: -5px; top: auto; bottom: -2px; border: 6px solid transparent; border-top: 8px solid var(--accent-dim); border-bottom: 0; }
.home .fed-engine { display: flex; flex-direction: column; gap: 0.6rem; }
.home .engine { border: 1px solid var(--accent-dim); background: var(--accent-wash); border-radius: 10px; padding: 0.9rem 1rem; }
.home .engine-name { font-family: var(--sans); font-weight: 700; font-size: 0.9rem; color: var(--accent); margin: 0 0 0.3rem; }
.home .engine ul { margin: 0; padding-left: 1.1rem; font-size: 0.92rem; }
.home .engine li { margin: 0.1rem 0; }
.home .fed-result { border: 1px solid var(--rule-firm); border-radius: 10px; padding: 0.7rem 1rem 0.8rem; }
.home .fed-result .result-label { font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.2rem; }
.home .fed-result table { min-width: 0; font-family: var(--mono); font-size: 0.78rem; }
.home .fed-result th, .home .fed-result td { padding: 0.3rem 1.2rem 0.3rem 0; }
.home .fed-result td.num { text-align: right; }
.home .fed-code { margin-top: 2rem; }
.home .fed-code .pane pre.code { font-size: 0.72rem; }
.home .fed-plan { margin-top: 1rem; }
.home .fed-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2rem; }
.home .fed-points h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.home .fed-points p { font-size: 0.92rem; color: var(--muted); margin: 0; line-height: 1.5; }
.home .fed-list { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--rule); max-width: none !important; }
.home .fed-list strong { color: var(--ink); margin-right: 0.4rem; }
/* capabilities */
.home .caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.home .cap { border: 1px solid var(--rule-firm); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.home .cap-body { padding: 1.1rem 1.1rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.home .cap h3 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; margin: 0; letter-spacing: -0.01em; line-height: 1.25; }
.home .cap .sql { font-size: 0.9rem; color: var(--muted); margin: 0; }
.home .cap .sql strong { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin-right: 0.3rem; }
.home .cap pre.code { margin: 0; border-radius: 0; border-left: 0; border-right: 0; background: var(--accent-wash); font-size: 0.76rem; }
.home .cap .result { margin: 0; padding: 0.7rem 1.1rem 1rem; flex: 1; }
.home .cap .result table { min-width: 0; font-family: var(--mono); font-size: 0.74rem; }
.home .cap .result th, .home .cap .result td { padding: 0.28rem 1.1rem 0.28rem 0; }
.home .cap .result td.num { text-align: right; }
.home .cap .result-label { font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.2rem; }
/* side by side */
.home .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.8rem; }
.home .pane { border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-sunk); overflow: hidden; }
.home .pane-label {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--slate); padding: 0.6rem 1rem 0;
}
.home .pane.accent { border-color: var(--accent-dim); background: var(--accent-wash); }
.home .pane.accent .pane-label { color: var(--accent); }
.home .pane pre.code { margin: 0.3rem 0 0; border: 0; background: transparent; font-size: 0.78rem; }
.home .pane.out pre.code { color: var(--muted); white-space: pre; }
.home .pane-foot { font-size: 0.92rem; color: var(--muted); padding: 0 1rem 0.9rem; margin: 0; }
/* FAQ */
.home .faq { margin-top: 1.6rem; border-top: 1px solid var(--rule); max-width: 50rem; }
.home .faq details { border-bottom: 1px solid var(--rule); }
.home .faq summary {
  cursor: pointer; list-style: none; padding: 0.95rem 2rem 0.95rem 0; position: relative;
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
}
.home .faq summary::-webkit-details-marker { display: none; }
.home .faq summary::after {
  content: "+"; position: absolute; right: 0.2rem; top: 0.75rem;
  font-size: 1.3rem; font-weight: 500; color: var(--accent);
}
.home .faq details[open] summary::after { content: "−"; }
.home .faq details p { color: var(--muted); margin: 0 0 1rem; }
/* get started + install box */
.home .start { max-width: 50rem; margin-top: 1.6rem; }
.home .step { display: flex; gap: 0.8rem; align-items: baseline; margin: 0 0 0.9rem; }
.home .step > .n {
  flex: none; font-family: var(--sans); font-size: 0.75rem; font-weight: 700;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent); transform: translateY(-0.1rem);
}
.home .start > .install, .home .start > pre.code, .home .start > .code-frame { margin: 0 0 2rem 2.3rem; }
.home .start > pre.code { font-size: 0.78rem; }

/* ── the install widget ───────────────────────────────────────────────────
   The dependency to add, offered on the home page and on the install page and
   written by SiteBuilder for both, so its rules are not either page's. */
.install {
  background: var(--paper-sunk); border: 1px solid var(--rule-firm); border-radius: 10px;
  overflow: hidden; font-family: var(--sans); margin: 1.4rem 0;
}
.install-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--rule); }
.install-head strong { font-size: 0.875rem; }
.badge {
  margin-left: auto; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.18rem 0.5rem; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent); text-decoration: none; white-space: nowrap;
}
.badge:hover { text-decoration: underline; }
/* The rule under the tabs belongs to the row, not to the tablist: a tablist may own
   nothing but tabs, and the copy button is not one. align-items: flex-end keeps the
   selected tab's 2px underline landing on that rule, which is what it marks. */
.install .tab-row {
  display: flex; align-items: flex-end; padding: 0.5rem 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.install .tabs { display: flex; gap: 0.25rem; }
.install .tabs button {
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--muted);
  background: none; border: 0; padding: 0.45rem 0.6rem 0.55rem; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.install .tabs button:hover { color: var(--ink); }
.install .tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.install .snippet pre.code { margin: 0; border: 0; border-radius: 0; background: var(--paper); padding: 1rem; min-height: 7.2rem; }
.install-foot {
  list-style: none; margin: 0; padding: 0.7rem 1rem 0.8rem; border-top: 1px solid var(--rule);
  font-size: 0.78rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; max-width: none;
}
.install-foot li { margin: 0; }
.install-foot li::before { content: "·"; margin-right: 0.45rem; color: var(--accent-dim); }
.install-foot a { color: var(--muted); }
.badge.snapshot { background: var(--slate-wash); color: var(--slate); }
/* The auto margin is on the slot, not on the button inside it: the slot is what the
   row lays out, and the button was a flex child only while it sat in the tablist. */
.install .tab-row [data-copy-slot] { margin-left: auto; align-self: center; }
.install .tab-row .copy { margin: 0 0 0.4rem; }

/* going further */
.home .routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.home .route { border: 1px solid var(--rule-firm); border-radius: 10px; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.home .route h3 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; margin: 0; }
.home .route p { font-size: 0.95rem; color: var(--muted); margin: 0; flex: 1; }
.home .route .go { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; }
.home .spell { display: grid; grid-template-columns: auto auto; gap: 0.15rem 0.9rem; justify-content: start; font-family: var(--mono); font-size: 0.78rem; margin: 0.2rem 0 0.4rem; }
.home .spell span:nth-child(odd) { color: var(--tok-keyword); font-weight: 600; }
.home .spell span:nth-child(even) { color: var(--tok-operator); }
@media (max-width: 60rem) {
  .home .hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .home .is-isnt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .is-isnt > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .home .is-isnt > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .home .caps { grid-template-columns: minmax(0, 1fr); }
  .home .fed { grid-template-columns: minmax(0, 1fr); }
  .home .fed > .fed-arrow { width: 2px; height: 1.6rem; margin: 0 auto; }
  .home .fed > .fed-arrow::after { right: -5px; top: auto; bottom: -2px; border: 6px solid transparent; border-top: 8px solid var(--accent-dim); border-bottom: 0; }
  .home .fed-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 44rem) {
  .home .pair, .home .is-isnt, .home .fed-sources, .home .fed-points { grid-template-columns: minmax(0, 1fr); }
  .home .is-isnt > div, .home .is-isnt > div + div { padding: 1rem 0; border-left: 0; }
  .home .is-isnt > div + div { border-top: 1px solid var(--rule); }
  .install .wide-only { display: none; }
  .install .snippet pre.code { font-size: 0.72rem; }
  .home .start > .install, .home .start > pre.code, .home .start > .code-frame { margin-left: 0; }
}