/*
 * learn.cogitave.com - stylesheet.
 *
 * The spec is docs/design-language.md. Four constraints from it are absolute and
 * every rule below obeys them:
 *
 *   1. Type is 12 / 13 / 14 / 24 px. Nothing else. Rank comes from weight,
 *      colour, rules, and space - never from a fifth size.
 *   2. Weights are 400 and 500. No semibold, no bold. `<strong>` is 500.
 *   3. Letter spacing is -0.15px everywhere, set once on `body` and inherited.
 *   4. Radii are 8px (controls, code, alerts), 16px (cards, panels), and a full
 *      pill on the primary call to action.
 *
 * Colour is monochrome: a three-step text ramp carries the whole hierarchy.
 * There is exactly one accent - near-black on the light theme, the marketing
 * surface's ivory on the dark theme - so the two properties read as one brand.
 *
 * Plain CSS, no framework, no build step: a RECORDED DEVIATION from
 * design-system.md, which binds docs surfaces to cogitave/ui. That package is
 * README-only today, so there is nothing to consume yet; the custom properties
 * are named after the semantic roles they will map onto when it ships.
 * See docs/build-v0.md, deviation D3.
 */

/* ========================================================================== */
/* faces                                                                      */
/* ========================================================================== */

/*
 * CG Pro and CG Mono are the site-facing names of the two self-hosted faces.
 * Their provenance, licensing, and the command that produced the subsets are
 * recorded in `tools/assets/fonts/README.md` and in docs/design-language.md -
 * the alias is how the site addresses them, not a claim about who drew them.
 *
 * Latin subset only, since the estate is English-only. `swap` because a docs
 * page must be readable before the face arrives.
 */

@font-face {
  font-family: "CG Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cg-pro-text-400.woff2") format("woff2");
}

@font-face {
  font-family: "CG Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cg-pro-text-500.woff2") format("woff2");
}

@font-face {
  font-family: "CG Pro";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cg-pro-text-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "CG Pro";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cg-pro-text-500-italic.woff2") format("woff2");
}

/* The optical size crossover: the display cut is drawn for 20px and up, which
   in this scale is the 24px page title and nothing else. */
@font-face {
  font-family: "CG Pro Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cg-pro-display-500.woff2") format("woff2");
}

@font-face {
  font-family: "CG Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cg-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "CG Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cg-mono-500.woff2") format("woff2");
}

/* ========================================================================== */
/* tokens                                                                     */
/* ========================================================================== */

:root {
  color-scheme: light;

  /* surfaces */
  --bg: #ffffff;
  --bg-sunken: #fafafa;
  --bg-raised: #ffffff;
  --bg-code: #f7f7f7;
  --bg-hover: #f4f4f4;

  /* the text ramp - the whole hierarchy lives here */
  --t1: #292929;
  --t2: #5d5d5d;
  --t3: #9e9e9e;

  /* hairlines */
  --line: #e8e8e8;
  --line-strong: #d8d8d8;

  /* the single accent */
  --accent: #292929;
  --accent-on: #ffffff;
  --accent-wash: #f0f0f0;

  /* alert hues - desaturated so they sit inside a monochrome page */
  --note: #3a5a8c;
  --tip: #2f6b4f;
  --important: #5c4a86;
  --warning: #8a6420;
  --caution: #9b3b34;

  /* type - the fallbacks only cover the window before the face loads */
  --font: "CG Pro", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", system-ui, sans-serif;
  --font-display: "CG Pro Display", var(--font);
  --mono: "CG Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo,
    Consolas, monospace;
  --tracking: -0.15px;

  /* radii */
  --r-sm: 8px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* metrics */
  --bar-h: 56px;
  --chrome-h: 56px;
  --w-side: 288px;
  --w-rail: 256px;
  --measure: 860px;
  --gutter: 32px;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f0f11;
    --bg-sunken: #131315;
    --bg-raised: #17171a;
    --bg-code: #161619;
    --bg-hover: #1c1c20;
    --t1: #ecebe4;
    --t2: #a3a29c;
    --t3: #6f6e6a;
    --line: #232327;
    --line-strong: #2f2f34;
    --accent: #e6e2d4;
    --accent-on: #0a0a0f;
    --accent-wash: #1e1e21;
    --note: #8fb0e0;
    --tip: #6fc296;
    --important: #b39ce0;
    --warning: #d6a344;
    --caution: #e08a83;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f11;
  --bg-sunken: #131315;
  --bg-raised: #17171a;
  --bg-code: #161619;
  --bg-hover: #1c1c20;
  --t1: #ecebe4;
  --t2: #a3a29c;
  --t3: #6f6e6a;
  --line: #232327;
  --line-strong: #2f2f34;
  --accent: #e6e2d4;
  --accent-on: #0a0a0f;
  --accent-wash: #1e1e21;
  --note: #8fb0e0;
  --tip: #6fc296;
  --important: #b39ce0;
  --warning: #d6a344;
  --caution: #e08a83;
}

/* ========================================================================== */
/* base                                                                       */
/* ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--chrome-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Contextual alternates and proper ligatures are drawn into the face; there
     is no reason to render it worse than it was designed. */
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
}

/* Counters, durations, and ordinals must not jitter as their digits change. */
.sidenav-no,
.unit-no,
.question-no,
.section-count,
.chip-count,
.sidenav-group-count,
.progress-label,
.unit-dur,
.card-meta,
.fact-value {
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--accent-wash);
}

a {
  color: var(--t1);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 140ms var(--ease);
}

a:hover {
  text-decoration-color: var(--t1);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-on);
  font-size: 13px;
  text-decoration: none;
  transition: top 160ms var(--ease);
}

.skip:focus {
  top: 12px;
}

/* ========================================================================== */
/* masthead                                                                   */
/* ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}

.topbar-in {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--bar-h);
  max-width: none;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: none;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--t1);
}

.brand-sub {
  color: var(--t2);
  font-weight: 400;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 20px;
}

.topnav-item {
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--t2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}

.topnav-item:hover {
  background: var(--bg-hover);
  color: var(--t1);
}

.topnav-item.is-current {
  color: var(--t1);
  background: var(--bg-hover);
}

.topbar-end {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--t2);
  cursor: pointer;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}

.icon-btn:hover {
  background: var(--bg-hover);
  color: var(--t1);
}

.topbar-burger {
  display: none;
}

/* The toggle always shows the theme it will switch TO, so the control states
   its outcome rather than the current state. Light now -> show the moon. */
.theme-toggle .i-light {
  display: none;
}

.theme-toggle .i-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-light {
    display: block;
  }
  :root:not([data-theme="light"]) .theme-toggle .i-dark {
    display: none;
  }
}

:root[data-theme="dark"] .theme-toggle .i-light {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .i-dark {
  display: none;
}

:root[data-theme="light"] .theme-toggle .i-light {
  display: none;
}

:root[data-theme="light"] .theme-toggle .i-dark {
  display: block;
}

/* --- contextual tier ------------------------------------------------------ */

.subbar {
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
}

.subbar-in {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 44px;
  max-width: none;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

.subbar-in::-webkit-scrollbar {
  display: none;
}

.subbar-title {
  flex: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--t1);
  text-decoration: none;
}

.subnav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.subnav a {
  font-size: 13px;
  color: var(--t2);
  text-decoration: none;
  white-space: nowrap;
}

.subnav a:hover {
  color: var(--t1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Everything that sticks below the masthead measures itself against this, so a
   page with a contextual tier does not park its side nav under the chrome. */
html:has(.subbar) {
  --chrome-h: calc(var(--bar-h) + 44px);
}

/* --- search ------------------------------------------------------------- */

.search {
  position: relative;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 200px;
  height: 32px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--t3);
  transition: border-color 140ms var(--ease), width 200ms var(--ease);
}

.search-field:focus-within {
  border-color: var(--line-strong);
  width: 280px;
}

.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: 13px;
  letter-spacing: var(--tracking);
  color: var(--t1);
}

.search-field input::placeholder {
  color: var(--t3);
}

.search-field input::-webkit-search-cancel-button {
  display: none;
}

.search-key {
  flex: none;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--t3);
}

.search-field:focus-within .search-key {
  display: none;
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(440px, calc(100vw - 32px));
  max-height: min(60vh, 480px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  box-shadow: 0 16px 48px rgb(0 0 0 / 12%), 0 2px 8px rgb(0 0 0 / 6%);
}

.search-hit {
  display: block;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--t1);
}

.search-hit:hover,
.search-hit.is-active {
  background: var(--bg-hover);
}

.search-hit-kind {
  display: block;
  font-size: 12px;
  color: var(--t2);
}

.search-hit-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
}

.search-empty {
  padding: 14px 10px;
  font-size: 13px;
  color: var(--t2);
}

/* The home page promotes the same control: on a knowledge platform, search is
   the primary action, not an affordance parked in a corner. */
.search-hero {
  max-width: 560px;
  margin-top: 24px;
}

.search-hero .search-field {
  width: 100%;
  height: 46px;
  padding: 0 12px 0 16px;
  border-radius: var(--r-sm);
  background: var(--bg);
}

.search-hero .search-field:focus-within {
  width: 100%;
  border-color: var(--t1);
}

.search-hero .search-field svg {
  width: 20px;
  height: 20px;
  color: var(--t2);
}

.search-hero .search-field input {
  font-size: 14px;
}

.search-hero .search-results {
  left: 0;
  right: auto;
  width: 100%;
}

/* ========================================================================== */
/* shell                                                                      */
/* ========================================================================== */

/*
 * The three tracks are always reserved, whether or not a page fills them. An
 * article therefore begins at the same x on every page kind - a path page must
 * not sit 268px to the left of the unit page it links to. Only the home page,
 * which is an index rather than an article, opts out into a centred column.
 */
/*
 * The article column is a FIXED width, centred in the viewport; the two side
 * columns absorb whatever slack is left, and their contents pin to the outer
 * edges. That gives three properties at once:
 *
 *   - prose begins at the same x on every page, whatever the page carries.
 *     (Sizing the middle track as `1fr` and centring inside it does not: the
 *     track changes with the page, so the text moves with it. That was the bug.)
 *   - the side navigation stays flush left and the rail flush right, so the
 *     chrome uses the whole viewport;
 *   - no dead gap opens between the prose and the rail on a wide monitor.
 */
.shell {
  display: grid;
  grid-template-columns:
    minmax(var(--w-side), 1fr)
    minmax(0, var(--measure))
    minmax(var(--w-rail), 1fr);
  column-gap: 40px;
  align-items: start;
  max-width: none;
  padding: 0 var(--gutter);
}

html:not([data-layout="wide"]) .shell-nosidenav > .content {
  grid-column: 2;
}

html[data-layout="wide"] .shell {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
}

/*
 * The chrome uses the whole viewport; the prose does not. A line of body copy
 * stops growing at the measure and the slack falls to its right, inside the
 * track - so the shell is full width while a paragraph stays readable. Blocks
 * that benefit from room (tables, diagrams, card grids) are free to use it.
 */
/* The track already caps the measure, so the column itself must not add a
   second, page-dependent constraint. */
.content {
  min-width: 0;
  padding: 32px 0 96px;
}

html[data-layout="wide"] .content {
  max-width: none;
}

.content:focus {
  outline: none;
}

/* --- side navigation ---------------------------------------------------- */

.sidenav-in {
  max-width: var(--w-side);
  position: sticky;
  top: var(--chrome-h);
  max-height: calc(100vh - var(--chrome-h));
  overflow-y: auto;
  padding: 28px 16px 40px 0;
}

.sidenav-parent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--t2);
  text-decoration: none;
}

.sidenav-parent:hover {
  color: var(--t1);
}

.sidenav-parent svg {
  color: var(--t3);
}

/* Filter, not search: this narrows the section you are already in. It appears
   only once a section is long enough for scanning to cost something. */
.sidenav-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin-bottom: 16px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--t3);
}

.sidenav-filter:focus-within {
  border-color: var(--line-strong);
}

.sidenav-filter input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: 13px;
  letter-spacing: var(--tracking);
  color: var(--t1);
}

.sidenav-filter input::placeholder {
  color: var(--t3);
}

.sidenav-filter input::-webkit-search-cancel-button {
  display: none;
}

.sidenav-group {
  margin-bottom: 4px;
}

.sidenav-group > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--t1);
  cursor: pointer;
  list-style: none;
}

.sidenav-group > summary::-webkit-details-marker {
  display: none;
}

.sidenav-group > summary:hover {
  background: var(--bg-hover);
}

.sidenav-caret {
  flex: none;
  color: var(--t3);
  transition: transform 160ms var(--ease);
}

.sidenav-group:not([open]) .sidenav-caret {
  transform: rotate(-90deg);
}

.sidenav-group-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--t3);
}

.sidenav-group .sidenav-list {
  padding-left: 12px;
  margin-left: 10px;
  border-left: 1px solid var(--line);
}

.sidenav-group[hidden],
.sidenav-item[hidden] {
  display: none;
}

.sidenav-empty {
  padding: 10px;
  font-size: 13px;
  color: var(--t2);
}

.sidenav-empty[hidden] {
  display: none;
}

.progress {
  margin-bottom: 18px;
}

.progress-track {
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.progress-label {
  margin: 7px 0 0;
  font-size: 12px;
  color: var(--t2);
}

.sidenav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.sidenav-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 2px 10px;
  padding: 7px 10px;
  text-decoration: none;
  color: var(--t2);
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}

/* Without an ordinal the label owns the whole row - otherwise it is squeezed
   into the 20px number column and breaks one word per line. */
.sidenav-item.is-plain {
  grid-template-columns: minmax(0, 1fr);
}

.sidenav-item:hover {
  background: var(--bg-hover);
  color: var(--t1);
}

/* No chip, no rule, no rounded block: at this size weight and colour are enough
   to say "you are here", and a bordered pill in a list of plain rows reads as a
   different kind of object than its neighbours. */
.sidenav-item.is-current {
  background: var(--bg-hover);
  color: var(--t1);
  font-weight: 500;
}

.sidenav-no {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--t3);
  padding-top: 1px;
}

.sidenav-item.is-current .sidenav-no {
  color: var(--t1);
}

.sidenav-label {
  font-size: 13px;
  line-height: 1.45;
}

.sidenav-meta {
  grid-column: 2;
  font-size: 12px;
  color: var(--t3);
}

/* --- on-page rail -------------------------------------------------------- */

.rail-in {
  max-width: var(--w-rail);
  margin-left: auto;
  position: sticky;
  top: var(--chrome-h);
  max-height: calc(100vh - var(--chrome-h));
  overflow-y: auto;
  padding: 28px 0 40px;
}

.rail-head {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--t2);
}

.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}

.rail-list a {
  display: block;
  padding: 5px 0 5px 12px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 13px;
  line-height: 1.45;
  color: var(--t2);
  text-decoration: none;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.rail-list a:hover {
  color: var(--t1);
}

.rail-list a.is-active {
  color: var(--t1);
  border-left-color: var(--accent);
}

.rail-l3 a {
  padding-left: 24px;
}

/* ========================================================================== */
/* article typography                                                         */
/* ========================================================================== */

.crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--t2);
  /* A trail that wraps to three lines stops being a trail. The current page is
     the one that gives, since the reader is already looking at its title. */
  min-width: 0;
}

.crumbs > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crumbs a {
  white-space: nowrap;
}

.crumbs a {
  color: var(--t2);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--t1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crumb-sep {
  display: inline-grid;
  place-items: center;
  color: var(--t3);
}

.crumb-sep svg {
  width: 12px;
  height: 12px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: var(--tracking);
  font-weight: 500;
  color: var(--t1);
}

h1 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
}

h2 {
  margin: 40px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
}

h3 {
  margin: 28px 0 10px;
  font-size: 13px;
  line-height: 1.5;
}

h4,
h5,
h6 {
  margin: 22px 0 8px;
  font-size: 13px;
  color: var(--t2);
}

p,
ul,
ol {
  margin: 0 0 16px;
}

/* Body prose stays on the primary step. The ramp separates ROLES - prose,
   supporting text, decoration - not paragraphs from headings; heading rank is
   carried by weight and the rules above them, which the type scale forces. */
blockquote p {
  color: var(--t2);
}

.content strong,
strong {
  font-weight: 500;
  color: var(--t1);
}

.lede {
  font-size: 14px;
  color: var(--t2);
  max-width: 62ch;
}

.meta {
  font-size: 12px;
  color: var(--t2);
}

ul,
ol {
  padding-left: 20px;
}

li {
  margin-bottom: 5px;
}

li::marker {
  color: var(--t3);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}

.xref {
  text-decoration-color: var(--line-strong);
}

/* --- inline code and code blocks ---------------------------------------- */

code {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0;
}

:not(pre) > code {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-code);
  color: var(--t1);
  /* A long URI or UID must break rather than push the measure open. */
  overflow-wrap: anywhere;
}

.code {
  margin: 0 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-code);
  overflow: hidden;
}

.code-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  padding: 0 6px 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
}

.code-lang {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--t2);
}

.code-source {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-size: 12px;
  color: var(--t3);
}

.code-copy {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--t2);
  cursor: pointer;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}

.code-copy:hover {
  background: var(--bg-hover);
  color: var(--t1);
}

.code-copy .i-check {
  display: none;
}

.code-copy.is-done .i-copy {
  display: none;
}

.code-copy.is-done .i-check {
  display: block;
  color: var(--tip);
}

pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
}

pre code {
  font-size: 13px;
  line-height: 1.65;
  color: var(--t1);
  white-space: pre;
}

.code-missing {
  border-color: var(--caution);
}

/* --- diagrams ------------------------------------------------------------- */

.diagram {
  margin: 0 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-code);
}

/* A diagram is the one block allowed to outgrow the measure: prose is capped
   for reading comfort, but a flowchart shrunk to fit is a picture of a
   flowchart rather than a flowchart. */
@media (min-width: 1181px) {
  .diagram {
    width: calc(100% + 160px);
    margin-left: -80px;
  }
}

@media (min-width: 1600px) {
  .diagram {
    width: calc(100% + 400px);
    margin-left: -200px;
  }
}

.diagram-scroll {
  padding: 24px 20px;
  overflow-x: auto;
}

.diagram pre.mermaid {
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--t2);
  text-align: center;
}

/*
 * The global `svg { max-width: 100% }` was scaling the whole drawing down to
 * the frame - and the label text with it, which is why raising the font size
 * changed nothing. A diagram renders at its true size and the frame scrolls.
 */
.diagram svg {
  display: block;
  margin: 0 auto;
  max-width: none;
  width: auto;
  height: auto;
}

.diagram figcaption {
  padding: 9px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t3);
}

/* --- tables -------------------------------------------------------------- */

.table-wrap {
  margin: 0 0 20px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

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

th {
  font-weight: 500;
  color: var(--t1);
  background: var(--bg-sunken);
  white-space: nowrap;
}

td {
  color: var(--t2);
}

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

/* --- alerts and quotes --------------------------------------------------- */

/*
 * A callout is a labelled band, not a tinted box. A rule opens it, a
 * monospaced label sits in a fixed gutter, and the prose keeps the measure it
 * had a paragraph earlier - so an aside reads as part of the document instead
 * of as a widget dropped on top of it. No fill and no hue: the mark and the
 * word carry the kind.
 */
.alert {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  column-gap: 24px;
  margin: 28px 0;
  padding: 16px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.alert-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  /* Top-aligned, not centred: the label marks where the aside begins, so it
     sits on the first line however long the prose runs. */
  align-self: start;
  padding-top: 1px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  /* The one documented exception to the global tracking: this is a label, not
     prose, and uppercase monospace closes up badly at -0.15px. */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t2);
  white-space: nowrap;
}

.alert-label svg {
  flex: none;
  color: var(--t3);
}

.alert-body > :last-child {
  margin-bottom: 0;
}

/* The two hazard kinds invert their label. Still monochrome, but a reader
   cannot skim past a warning the way they can past a note. */
.alert-warning .alert-label,
.alert-caution .alert-label {
  align-self: start;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--t1);
  color: var(--bg);
}

.alert-warning .alert-label svg,
.alert-caution .alert-label svg {
  color: inherit;
}

blockquote {
  margin: 0 0 20px;
  padding-left: 16px;
  border-left: 1px solid var(--line-strong);
  color: var(--t2);
}

/* --- moniker ------------------------------------------------------------- */

.moniker {
  margin: 0 0 20px;
  padding: 14px 16px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.moniker-label {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--t2);
}

/* --- tabs ---------------------------------------------------------------- */

.tabs {
  margin: 0 0 20px;
}

.tab-heads {
  display: flex;
  gap: 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
}

.tab-head {
  padding: 7px 12px;
  border: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: none;
  font: inherit;
  font-size: 13px;
  letter-spacing: var(--tracking);
  color: var(--t2);
  cursor: pointer;
  position: relative;
  transition: color 140ms var(--ease), background-color 140ms var(--ease);
}

.tab-head:hover {
  background: var(--bg-hover);
  color: var(--t1);
}

.tab-head.is-active {
  color: var(--t1);
}

.tab-head.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -3px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.tab-panel {
  display: none;
  padding-top: 16px;
}

.tab-panel.is-active {
  display: block;
}

/* ========================================================================== */
/* cards and page furniture                                                   */
/* ========================================================================== */

.cards {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  /* A fixed rank, not auto-fit or auto-fill: a single card must stay card-sized
     instead of stretching across the page, and it must not leave phantom empty
     tracks either. Two across is the default because most card grids sit inside
     an article, where the measure is capped. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* The home page has no measure cap, so it carries a third column. */
html[data-layout="wide"] .cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-summary {
  /* Summaries are written for the detail page; on a card they are a promise,
     not the content. Three lines, then the card stops growing. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.card a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  text-decoration: none;
  color: var(--t1);
  transition: border-color 160ms var(--ease), box-shadow 200ms var(--ease);
}

/* A card lifting off the page is the reflex every template has; on a reading
   surface it is motion for its own sake. The border tightening and a single
   soft shadow say "this is the target" without moving the text under the
   cursor. */
.card a:hover {
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px rgb(0 0 0 / 6%);
}

/* A drop shadow does nothing on a near-black surface; the raise is a tone step. */
:root[data-theme="dark"] .card a:hover {
  box-shadow: none;
  background: var(--bg-sunken);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card a:hover {
    box-shadow: none;
    background: var(--bg-sunken);
  }
}

.card-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--t2);
}

.card a:hover .card-icon {
  color: var(--t1);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.card-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.card-summary {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t2);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--t2);
}

.card-go {
  display: grid;
  place-items: center;
  height: 36px;
  color: var(--t3);
  transition: transform 160ms var(--ease), color 160ms var(--ease);
}

.card a:hover .card-go {
  color: var(--t1);
  transform: translateX(2px);
}

/* --- fact strip ---------------------------------------------------------- */

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

/* Centre, not baseline: the key carries an icon, which drags a baseline-aligned
   row out of true against its own value. */
.fact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.fact-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--t3);
}

.fact-value {
  color: var(--t2);
}

/* The strip already closes with a rule; a heading straight after it must not
   open with a second one 20px below. */
.facts + h2 {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

/* --- unit rank on a module page ------------------------------------------ */

.unit-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  border-top: 1px solid var(--line);
}

.unit-list a {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 8px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--t1);
  transition: background-color 140ms var(--ease), padding-left 200ms var(--ease);
}

.unit-list a:hover {
  background: var(--bg-sunken);
  padding-left: 14px;
}

.unit-no {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--t3);
}

.unit-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.unit-title {
  font-size: 14px;
  line-height: 1.45;
}

.unit-summary {
  font-size: 13px;
  color: var(--t2);
}

.unit-dur {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--t3);
  white-space: nowrap;
}

/* --- award --------------------------------------------------------------- */

.award {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 32px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
}

.award-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-on);
}

.award-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.award-label {
  font-size: 12px;
  color: var(--t3);
}

.award-title {
  font-size: 14px;
  font-weight: 500;
}

.award-summary {
  font-size: 13px;
  color: var(--t2);
}

/* --- calls to action ------------------------------------------------------ */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-on);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms var(--ease), opacity 140ms var(--ease);
}

.cta:hover {
  opacity: 0.88;
}

.cta:active {
  transform: scale(0.98);
}

.cta-ghost {
  background: none;
  color: var(--t1);
  border-color: var(--line-strong);
}

.cta-ghost:hover {
  opacity: 1;
  background: var(--bg-hover);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
}

/* --- pager ---------------------------------------------------------------- */

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.pager-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--t1);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}

.pager-link:hover {
  border-color: var(--line-strong);
  background: var(--bg-sunken);
}

.pager-next {
  text-align: right;
}

.pager-dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--t3);
}

.pager-next .pager-dir {
  flex-direction: row-reverse;
}

.pager-title {
  font-size: 13px;
  line-height: 1.45;
}

/* ========================================================================== */
/* quiz                                                                       */
/* ========================================================================== */

.quiz {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* The section already carries the rule; the h2 default would draw a second one
   a line below it. */
.quiz-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding-top: 0;
  border-top: 0;
  font-size: 14px;
  font-weight: 500;
}

.quiz-head svg {
  color: var(--t3);
}

.quiz-lede {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--t2);
}

.questions {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: q;
}

.question {
  margin-bottom: 28px;
  counter-increment: q;
}

.question-text {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--t1);
}

.question-no {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--t3);
  margin-right: 8px;
}

.choices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.choice {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  font: inherit;
  font-size: 13px;
  letter-spacing: var(--tracking);
  color: var(--t1);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}

.choice:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--bg-sunken);
}

.choice:disabled {
  cursor: default;
}

.choice-dot {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: transparent;
}

.choice-dot svg {
  width: 12px;
  height: 12px;
  margin: 0 0 0 -1px;
}

/* Without scripting every explanation is visible, which is the honest static
   fallback. With scripting they stay hidden until the reader has answered. */
.choice-explain {
  display: block;
  grid-column: 2;
  margin-top: 6px;
  font-size: 13px;
  color: var(--t2);
}

.js .choice-explain {
  display: none;
}

.js .choice.is-answered .choice-explain {
  display: block;
}

.choice.is-correct {
  border-color: var(--tip);
}

.choice.is-correct .choice-dot {
  border-color: var(--tip);
  background: var(--tip);
  color: var(--bg);
}

.choice.is-wrong {
  border-color: var(--caution);
}

.choice.is-wrong .choice-dot {
  border-color: var(--caution);
  background: var(--caution);
  color: var(--bg);
}

.quiz-score {
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  font-size: 13px;
  color: var(--t2);
}

.quiz-score[hidden] {
  display: none;
}

.quiz-noscript {
  margin: 0 0 20px;
  font-size: 12px;
  color: var(--t3);
}

/* ========================================================================== */
/* home                                                                       */
/* ========================================================================== */

/* No rule under the hero: the first section head already draws one, and two
   hairlines 20px apart read as a mistake. */
.hero {
  padding: 48px 0 20px;
}

.hero-lead {
  padding: 72px 0 56px;
}

/* --- landing cards -------------------------------------------------------- */

.lcards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
}

.lcard {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
}

.lcard-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
}

.lcard-desc {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--t2);
}

.lcard-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lcard-list li {
  margin: 0;
}

.lcard-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  margin: 0 -8px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--t1);
  text-decoration: none;
  transition: background-color 140ms var(--ease);
}

.lcard-list a:hover {
  background: var(--bg-hover);
}

.lcard-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--t2);
}

.lcard-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-size: 13px;
  color: var(--t1);
  text-decoration: none;
}

.lcard-more svg {
  transition: transform 160ms var(--ease);
}

.lcard-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lcard-more:hover svg {
  transform: translateX(2px);
}

/* --- closing band --------------------------------------------------------- */

.band {
  margin: 48px 0 16px;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
}
/* Home hero, two columns: the lede + search on the left, a compact "connect an
   agent" card on the right so the space beside the hero carries the MCP endpoint
   and the plugin instead of sitting empty. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 560px);
  gap: clamp(36px, 4vw, 64px);
  align-items: start;
}
/* The traveling beam animates a single custom angle; declaring it as a typed
   property is what lets it interpolate in @keyframes. Where @property is
   unsupported the beam simply sits still - a static colorful edge, still fine. */
@property --hc-beam {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
/* BorderBeam (mono, strength ~0.7): the card itself is a 1.5px conic-gradient
   frame whose start angle animates, and an inner panel covers the centre so the
   gradient shows ONLY as the border - a single bright arc that travels the edge.
   The bright colour is the theme's foreground (dark on light, light on dark) so
   the mono beam reads on both. This paints the frame directly (no mask, no
   overlay), so it is reliably visible; where @property is unsupported the angle
   holds at 0deg - a static mono accent, still fine. */
.hero-connect {
  padding: 1.5px;
  border-radius: var(--r-lg);
  background: conic-gradient(
    from var(--hc-beam),
    var(--line) 0deg,
    var(--line) 200deg,
    color-mix(in srgb, var(--t1) 35%, var(--line)) 256deg,
    color-mix(in srgb, var(--t1) 90%, transparent) 300deg,
    color-mix(in srgb, var(--t1) 35%, var(--line)) 344deg,
    var(--line) 360deg
  );
  animation: hc-beam-travel 5s linear infinite;
}
.hero-connect-inner {
  padding: 22px 24px;
  border-radius: calc(var(--r-lg) - 1.5px);
  background: var(--bg-sunken);
}
@keyframes hc-beam-travel {
  to {
    --hc-beam: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-connect {
    animation: none;
  }
}
.hero-connect-kicker {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t3);
}
.hero-connect h2 {
  margin: 0 0 6px;
  font-size: 16px;
}
.hero-connect-inner > p {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--t2, var(--t3));
}
.hcl {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t3);
}
/* Client switcher: hidden radios drive which panel shows - pure CSS, no script,
   so the same server can be added from any agent, not just Claude Code. */
.hc-switch {
  position: relative;
}
.hc-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.hc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
}
.hc-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--t2);
  cursor: pointer;
  user-select: none;
  transition: background-color 140ms var(--ease), color 140ms var(--ease),
    border-color 140ms var(--ease);
}
.hc-tab svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.hc-tab:hover {
  background: var(--bg-hover);
  color: var(--t1);
}
.hc-panel {
  display: none;
}
.hc-panel .hcl:not(:first-child) {
  margin-top: 12px;
}
#hc-cc:checked ~ .hc-tabs label[for="hc-cc"],
#hc-cursor:checked ~ .hc-tabs label[for="hc-cursor"],
#hc-windsurf:checked ~ .hc-tabs label[for="hc-windsurf"],
#hc-vscode:checked ~ .hc-tabs label[for="hc-vscode"],
#hc-cline:checked ~ .hc-tabs label[for="hc-cline"],
#hc-zed:checked ~ .hc-tabs label[for="hc-zed"] {
  background: var(--t1);
  color: var(--bg);
  border-color: var(--t1);
}
#hc-cc:focus-visible ~ .hc-tabs label[for="hc-cc"],
#hc-cursor:focus-visible ~ .hc-tabs label[for="hc-cursor"],
#hc-windsurf:focus-visible ~ .hc-tabs label[for="hc-windsurf"],
#hc-vscode:focus-visible ~ .hc-tabs label[for="hc-vscode"],
#hc-cline:focus-visible ~ .hc-tabs label[for="hc-cline"],
#hc-zed:focus-visible ~ .hc-tabs label[for="hc-zed"] {
  outline: 2px solid var(--t1);
  outline-offset: 2px;
}
#hc-cc:checked ~ .hc-panels .p-cc,
#hc-cursor:checked ~ .hc-panels .p-cursor,
#hc-windsurf:checked ~ .hc-panels .p-windsurf,
#hc-vscode:checked ~ .hc-panels .p-vscode,
#hc-cline:checked ~ .hc-panels .p-cline,
#hc-zed:checked ~ .hc-panels .p-zed {
  display: block;
}
/* A copyable command block, reusing the .code copy affordance in a compact form:
   no bar, the copy button in the corner. The command WRAPS instead of scrolling,
   so a long `claude mcp add ...` is fully readable with no cut-off or scrollbar. */
.hc-cmd {
  position: relative;
  margin: 0;
  background: var(--bg-code);
}
.hc-cmd + .hc-cmd {
  margin-top: 6px;
}
.hc-cmd pre {
  padding: 9px 34px 9px 11px;
  overflow: visible;
}
.hc-cmd code {
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.hc-cmd .code-copy {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: var(--bg-code);
}
.hc-cmd .code-copy:hover {
  background: var(--bg-hover);
}
@media (max-width: 860px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
  .hero-connect {
    max-width: none;
  }
}

.band-body {
  max-width: 62ch;
}

.band-kicker {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t3);
}

.band h2 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
}

.band p {
  color: var(--t2);
}

.band .cta {
  margin-top: 12px;
}

.hero h1 {
  max-width: 20ch;
}

.hero .lede {
  margin-bottom: 24px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.section-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}

.section-head h2 svg {
  color: var(--t3);
}

/* The home page is the one surface with no measure cap; keep its prose readable
   even though the grid lets the section run the full width. */
html[data-layout="wide"] .hero .lede {
  max-width: 68ch;
}

.section-count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--t3);
}

.section-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--t2);
  text-decoration: none;
  white-space: nowrap;
}

.section-more:hover {
  color: var(--t1);
}

/* --- the taxonomy, set as an index ---------------------------------------- */

.ranks {
  margin: 0 0 8px;
}

.rank {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0 32px;
  padding: 22px 0 6px;
  border-top: 1px solid var(--line);
}

.rank:first-child {
  border-top: 0;
  padding-top: 4px;
}

/* Same gutter label as a callout: one pattern for "this names what follows". */
.rank-axis {
  margin: 0;
  padding-top: 11px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t3);
}

.rank-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}

.rank-rows li {
  margin: 0;
}

.rank-rows a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 14px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--t1);
  text-decoration: none;
  transition: padding-left 240ms var(--ease), background-color 200ms var(--ease);
}

/* The marketing surface's drill-down gesture: the row steps aside and its arrow
   advances. Both properties move the same way, which is the point. */
@media (hover: hover) and (pointer: fine) {
  .rank-rows a:hover {
    padding-left: 12px;
    background: linear-gradient(90deg, var(--accent-wash), transparent 85%);
  }

  .rank-rows a:hover .rank-go {
    transform: translateX(3px);
    color: var(--t1);
  }

  .rank-rows a:hover .rank-count {
    color: var(--t2);
  }
}

.rank-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-count {
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--t3);
  transition: color 200ms var(--ease);
}

.rank-go {
  display: grid;
  place-items: center;
  color: var(--t3);
  transition: transform 220ms var(--ease), color 200ms var(--ease);
}

/* ========================================================================== */
/* footer                                                                     */
/* ========================================================================== */

.sitefoot {
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
}

.foot-in {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 40px;
  max-width: none;
  padding: 48px var(--gutter) 32px;
}

.foot-brand p {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--t2);
  max-width: 44ch;
}

.foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
}

.foot-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--t3);
}

.foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.foot-col li {
  margin-bottom: 7px;
}

.foot-col a {
  font-size: 13px;
  color: var(--t2);
  text-decoration: none;
}

.foot-col a:hover {
  color: var(--t1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  max-width: none;
  padding: 16px var(--gutter) 32px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--t3);
}

.foot-base code {
  font-size: 12px;
  color: var(--t2);
}

/* ========================================================================== */
/* responsive                                                                 */
/* ========================================================================== */

@media (max-width: 1180px) {
  /* The rail is the first track to go: it is a convenience, the side nav is
     the way through the module. */
  .shell {
    grid-template-columns: var(--w-side) minmax(0, 1fr);
  }
  .rail {
    display: none;
  }
}

@media (max-width: 900px) {
  :root {
    --gutter: 20px;
  }

  .topnav {
    display: none;
  }

  .topbar-burger {
    display: inline-grid;
  }

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

  html:not([data-layout="wide"]) .shell-nosidenav > .content {
    grid-column: auto;
  }

  .sidenav {
    position: fixed;
    inset: var(--chrome-h) 0 0;
    z-index: 40;
    background: var(--bg);
    border-right: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 160ms var(--ease), visibility 160ms var(--ease);
  }

  .sidenav.is-open {
    visibility: visible;
    opacity: 1;
  }

  .sidenav-in {
    position: static;
    max-height: none;
    height: 100%;
    padding: 24px var(--gutter) 48px;
  }

  .content {
    max-width: none;
    padding-bottom: 64px;
  }

  .search-field {
    width: 140px;
  }

  .search-field:focus-within {
    width: 200px;
  }

  .foot-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-top: 36px;
  }

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

  /* The gutter costs too much of the measure on a phone; the label stacks. */
  .alert {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }

  .alert-warning .alert-label,
  .alert-caution .alert-label {
    justify-self: start;
  }

  .hero {
    padding-top: 36px;
  }
}

@media (max-width: 1040px) {
  .lcards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .cards,
  html[data-layout="wide"] .cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-lead {
    padding: 44px 0 36px;
  }

  .band {
    padding: 28px 20px;
  }
}

@media (max-width: 560px) {
  .search-key {
    display: none;
  }

  .card a {
    grid-template-columns: auto 1fr;
  }

  .card-go {
    display: none;
  }
}

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

@media print {
  .topbar,
  .sidenav,
  .rail,
  .sitefoot,
  .pager,
  .skip {
    display: none;
  }
  .shell {
    display: block;
    max-width: none;
  }
  .content {
    max-width: none;
  }
}