/* =============================================================================
   Computer Science — the stack
   -----------------------------------------------------------------------------
   The page is a core sample. Five strata run the full width of the column and
   abut with hard seams; a borehole rail on the left holds their names in
   vertical type, sized to the real height each stratum occupies, with a marker
   that tracks the descent. Scrolling is going down.

   Two things carry the identity, and nothing else is allowed to:
     · TYPE — one variable family (Archivo). WIDTH is the altitude axis: the
       stratum names are ultra-wide (125), domain names normal, topic names
       condensed (88). As you descend into detail, the type narrows.
     · HEAT — one accent, ramped by depth. Gold at the human surface through to
       rust at the substrate. It is one hue family walked from 82° to 24°, not
       five colors; it reads as looking down into something, not as a legend.

   Structure stays neutral graphite; the ramp carries depth and state only.
   No protractors, no rules, no graph paper: the shared contour canvas and the
   radial wash are both suppressed — this surface supplies its own ground.
============================================================================= */

.csx-body {
  --csx-face: 'Archivo', var(--sans);
  --csx-spine-w: clamp(58px, 7vw, 92px);
  --csx-colw: 1700px;
  /* What this page's own chrome docks against: the admin edge plus the nav,
     measured live by layout.js. Both actually stay pinned now that #nav-mount
     is display:contents — before that they scrolled away, and docking against
     their height reserved a band of nothing. */
  --csx-dock: var(--psub-top, 46px);
  --csx-r: 6px;                         /* small radius — never the 12px default */
  --csx-ease: cubic-bezier(.42, 0, .58, 1);   /* 300ms ease-in-out, ratified */
  --csx-disclose: 300ms;
}
/* The shared atmospheres are off: this page is its own environment. */
.csx-body::before { content: none; }
.csx-body::after { opacity: .03; }        /* grain stays — it reads as material */
.csx-body .scroll-progress { display: none; }   /* the borehole marker is the progress */

@media (prefers-reduced-motion: reduce) {
  .csx-body { --csx-disclose: 1ms; }
}
/* bulk opens, closes and every filter pass skip the tween — ninety-eight
   simultaneous height animations is not motion, it is a stutter */
.csx-body.csx-instant { --csx-disclose: 1ms; }

/* ---------- the depth ramp ----------------------------------------------- */
/* --sa: stratum accent (heat). --g: stratum ground. --sf/--sf-open: slab face.
   The two themes elevate in opposite directions. Dark: the ground is the void
   and a slab is a lit face lifted out of it. Light: the ground is the material
   and a slab is a white card resting on it — deriving the light slab from the
   same "+3.5% ink" formula made it DARKER than its own ground, which reads as a
   hole, not a panel. */
.csx-stratum { --sa: var(--accent); --g: var(--bg); --sf: var(--bg-elev); --sf-open: var(--bg-elev); }

:root[data-theme="dark"] .csx-stratum {
  --sf: color-mix(in srgb, var(--fg) 3.5%, var(--g));
  --sf-open: color-mix(in srgb, var(--fg) 5.5%, var(--g));
  --csx-lift: 0 14px 34px -24px rgba(0, 0, 0, .9);
}
:root[data-theme="light"] .csx-stratum {
  --sf: #ffffff;
  --sf-open: color-mix(in srgb, var(--sa) 4%, #ffffff);
  --csx-lift: 0 10px 26px -18px rgba(10, 15, 26, .28), 0 1px 2px rgba(10, 15, 26, .05);
}

:root[data-theme="dark"] .csx-stratum[data-stratum="human"]        { --sa: oklch(.84 .142 84); --g: #10131a; }
:root[data-theme="dark"] .csx-stratum[data-stratum="intelligence"] { --sa: oklch(.80 .150 67); --g: #0d0f15; }
:root[data-theme="dark"] .csx-stratum[data-stratum="craft"]        { --sa: oklch(.76 .156 50); --g: #0a0c11; }
:root[data-theme="dark"] .csx-stratum[data-stratum="machine"]      { --sa: oklch(.72 .158 36); --g: #07080d; }
:root[data-theme="dark"] .csx-stratum[data-stratum="substrate"]    { --sa: oklch(.68 .152 23); --g: #050609; }

/* a ~7-point step per band: the old 4-point step was invisible on a screen */
:root[data-theme="light"] .csx-stratum[data-stratum="human"]        { --sa: oklch(.57 .130 78); --g: #fbfbfd; }
:root[data-theme="light"] .csx-stratum[data-stratum="intelligence"] { --sa: oklch(.55 .142 62); --g: #f4f4f8; }
:root[data-theme="light"] .csx-stratum[data-stratum="craft"]        { --sa: oklch(.53 .150 46); --g: #edeef3; }
:root[data-theme="light"] .csx-stratum[data-stratum="machine"]      { --sa: oklch(.51 .154 32); --g: #e6e7ee; }
:root[data-theme="light"] .csx-stratum[data-stratum="substrate"]    { --sa: oklch(.49 .150 22); --g: #dfe0e9; }

/* the spine mirrors the same ramp, keyed off the segment instead */
.csx-alt-seg { --sa: var(--accent); }
:root[data-theme="dark"] .csx-alt-seg[data-stratum="human"]        { --sa: oklch(.84 .142 84); }
:root[data-theme="dark"] .csx-alt-seg[data-stratum="intelligence"] { --sa: oklch(.80 .150 67); }
:root[data-theme="dark"] .csx-alt-seg[data-stratum="craft"]        { --sa: oklch(.76 .156 50); }
:root[data-theme="dark"] .csx-alt-seg[data-stratum="machine"]      { --sa: oklch(.72 .158 36); }
:root[data-theme="dark"] .csx-alt-seg[data-stratum="substrate"]    { --sa: oklch(.68 .152 23); }
:root[data-theme="light"] .csx-alt-seg[data-stratum="human"]        { --sa: oklch(.57 .130 78); }
:root[data-theme="light"] .csx-alt-seg[data-stratum="intelligence"] { --sa: oklch(.55 .142 62); }
:root[data-theme="light"] .csx-alt-seg[data-stratum="craft"]        { --sa: oklch(.53 .150 46); }
:root[data-theme="light"] .csx-alt-seg[data-stratum="machine"]      { --sa: oklch(.51 .154 32); }
:root[data-theme="light"] .csx-alt-seg[data-stratum="substrate"]    { --sa: oklch(.49 .150 22); }

/* ---------- page shell ---------------------------------------------------- */
.csx-main {
  max-width: none;
  padding: 0;
  font-family: var(--csx-face);
  font-variation-settings: 'wdth' 100;
}

/* ---------- masthead ------------------------------------------------------ */
/* The masthead sits above the borehole, so it has the spine's width more than
   the column below it does. Adding that width back on the left lands its text
   on exactly the same left edge as every seam and slab. */
.csx-mast {
  max-width: calc(var(--csx-colw) + var(--csx-spine-w));
  margin: 0 auto;
  padding: 3.25rem var(--pad-x) 2.5rem calc(var(--pad-x) + var(--csx-spine-w));
}
.csx-back {
  display: block; width: fit-content;
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .1em;
  color: var(--fg-mute);
  margin-bottom: 1.6rem;
}
.csx-back:hover { color: var(--accent); }

.csx-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.csx-eyebrow-mark {
  width: 7px; height: 7px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.csx-title {
  font-family: var(--csx-face);
  font-variation-settings: 'wdth' 112;
  font-size: clamp(3rem, 11vw, 8.5rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .86;
  margin: 0 0 1.4rem;
  /* the title itself carries the ramp: gold at the top edge, rust at the base */
  background: linear-gradient(178deg,
      oklch(.86 .13 86) 0%,
      oklch(.76 .155 50) 52%,
      oklch(.63 .148 22) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
:root[data-theme="light"] .csx-title {
  background: linear-gradient(178deg,
      oklch(.60 .125 80) 0%,
      oklch(.52 .150 46) 52%,
      oklch(.44 .145 20) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.csx-lead {
  font-size: clamp(15.5px, 1.35vw, 18px);
  line-height: 1.62;
  color: var(--fg-dim);
  max-width: 68ch;
  margin: 0 0 1.9rem;
}

.csx-stats { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--border); }
.csx-stat {
  display: flex; flex-direction: column; gap: .18rem;
  padding: .85rem 1.5rem .85rem 0;
  margin-right: 1.5rem;
  border-right: 1px solid var(--border);
}
.csx-stat:last-child { border-right: none; margin-right: 0; }
.csx-stat b {
  font-family: var(--csx-face);
  font-variation-settings: 'wdth' 100;
  font-size: 25px; font-weight: 800; letter-spacing: -.03em;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.csx-stat span {
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--fg-mute);
}

/* ---------- instrument: borehole + column -------------------------------- */
.csx-instrument {
  display: grid;
  grid-template-columns: var(--csx-spine-w) minmax(0, 1fr);
  align-items: start;
  border-top: 1px solid var(--border-hi);
}

/* ---------- the borehole -------------------------------------------------- */
.csx-spine {
  position: sticky;
  top: var(--csx-dock);
  height: calc(100dvh - var(--csx-dock));
  border-right: 1px solid var(--border-hi);
  background: color-mix(in srgb, var(--fg) 2%, var(--bg));
  z-index: 4;
}
.csx-spine-inner {
  height: 100%;
  display: flex; flex-direction: column;
  padding: .7rem 0 .55rem;
}
.csx-spine-cap,
.csx-spine-foot {
  flex: 0 0 auto;
  text-align: center;
  font-family: var(--mono);
  font-size: 8.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--fg-mute);
}
.csx-spine-cap { color: color-mix(in srgb, var(--fg-dim) 55%, var(--fg-mute)); }
.csx-spine-foot { padding-top: .55rem; }
.csx-depth-read { color: var(--fg-dim); font-variant-numeric: tabular-nums; }

.csx-alt {
  position: relative;
  flex: 1 1 auto;
  margin: .7rem 0 0;
  padding: 0;
  list-style: none;
  display: flex; flex-direction: column;
  min-height: 0;
}
/* Proportional to the real stratum height, but never shorter than its own name
   needs — JS measures the vertical type and publishes --min. */
.csx-alt-seg { flex: var(--h, 1) 1 var(--min, 0px); min-height: 0; display: flex; }
.csx-alt-btn {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: .4rem;
  padding: .5rem 0;
  border: none; background: none;
  border-top: 1px solid var(--border);
  /* the rail is navigation, not caption — --fg-mute alone left the strata you
     are NOT in almost unreadable in both themes */
  color: color-mix(in srgb, var(--fg-dim) 72%, var(--fg-mute));
  overflow: hidden;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.csx-alt-seg:first-child .csx-alt-btn { border-top: none; }
.csx-alt-btn:hover { background: color-mix(in srgb, var(--sa) 8%, transparent); color: var(--fg-dim); }
.csx-alt-idx {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--sa) 70%, var(--fg-mute));
}
.csx-alt-name {
  writing-mode: vertical-rl;
  font-family: var(--csx-face);
  font-variation-settings: 'wdth' 125;
  font-size: clamp(8.5px, .7vw, 10px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  white-space: nowrap;
  overflow: hidden;
  color: inherit;
}
.csx-alt-mass {
  font-family: var(--mono); font-size: 8.5px;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}
.csx-alt-seg[aria-current="true"] .csx-alt-btn { color: var(--fg); }
.csx-alt-seg[aria-current="true"] .csx-alt-name { color: var(--sa); }

/* the descent marker — a hairline that rides the whole rail */
.csx-alt-marker {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: translateY(var(--y, 0px));
  pointer-events: none;
  z-index: 2;
}
.csx-alt-marker::after {
  content: ""; position: absolute; right: 0; top: -2.5px;
  width: 5px; height: 5px;
  background: var(--accent);
}

/* ---------- tools --------------------------------------------------------- */
.csx-column { min-width: 0; }

/* Opaque, not frosted: once the site nav has scrolled away this bar is the only
   chrome on screen, and a translucent one let domain titles read straight
   through it. It docks; it does not float. */
.csx-tools {
  position: sticky;
  top: var(--csx-dock);
  z-index: 5;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border-hi);
  background: var(--bg-elev);
  box-shadow: 0 6px 16px -14px rgba(0, 0, 0, .7);
}
/* same measure as the seams and slabs below — a filter that starts 150px left
   of the column it filters reads as a different page element */
.csx-tools-inner {
  max-width: var(--csx-colw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex; align-items: center; gap: .7rem;
}
.csx-find {
  display: flex; align-items: center; gap: .5rem;
  flex: 0 1 340px;
  min-width: 0;          /* an input's min-content floor is wide enough to wrap the row */
  padding: .38rem .6rem;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--csx-r);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.csx-find:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.csx-find svg {
  width: 13px; height: 13px; flex: 0 0 auto;
  fill: none; stroke: var(--fg-mute); stroke-width: 1.5; stroke-linecap: round;
}
.csx-find input {
  flex: 1; min-width: 0;
  border: none; background: none; outline: none;
  font-family: var(--csx-face);
  font-size: 13.5px; font-weight: 500;
  color: var(--fg);
}
.csx-find input::placeholder { color: var(--fg-mute); }
.csx-find input::-webkit-search-cancel-button { display: none; }
.csx-find-clear {
  border: none; background: none; padding: 0 .1rem;
  font-size: 15px; line-height: 1;
  color: var(--fg-mute);
}
.csx-find-clear:hover { color: var(--fg); }

.csx-found {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--fg-mute);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* with no filter running it holds no text — and a flex item with a basis still
   reserves its row, which is how it wrapped the buttons onto a second line */
.csx-found:empty { display: none; }
.csx-btns { margin-left: auto; display: flex; gap: .4rem; }
.csx-btn {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  padding: .45rem .7rem;
  color: var(--fg-dim);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--csx-r);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.csx-btn:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ---------- a stratum ----------------------------------------------------- */
.csx-stratum {
  background: var(--g);
  border-bottom: 1px solid var(--border-hi);
  /* the shorthand is deliberate: global.css puts 8rem on every `section` after
     the first, which would open a void above every stratum but Human */
  padding: 0 0 2.6rem;
  scroll-margin-top: calc(var(--csx-dock) + 58px);
}
.csx-stratum:last-child { border-bottom: none; }

/* the seam — the hard edge between two layers. It lives on the stratum, not on
   the centred header, so it runs the full bleed the ground does. */
.csx-stratum::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg,
      var(--sa) 0%,
      color-mix(in srgb, var(--sa) 34%, transparent) 30%,
      transparent 72%);
}
.csx-seam {
  position: relative;
  max-width: var(--csx-colw);
  margin: 0 auto;
  padding: 2.4rem var(--pad-x) 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.15rem;
  align-items: baseline;
}
.csx-seam-idx {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em;
  color: var(--sa);
  font-variant-numeric: tabular-nums;
}
.csx-seam-name {
  font-family: var(--csx-face);
  font-variation-settings: 'wdth' 125;
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .34em;
  line-height: 1;
  margin: 0;
  color: var(--fg);
}
.csx-seam-gloss {
  grid-column: 2;
  margin: .65rem 0 0;
  font-size: 14px; line-height: 1.55;
  color: var(--fg-dim);
  max-width: 74ch;
}
.csx-seam-mass {
  grid-column: 2;
  margin-top: .5rem;
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--fg-mute);
}

/* ---------- a domain slab ------------------------------------------------- */
.csx-band {
  max-width: var(--csx-colw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex; flex-direction: column;
  gap: 10px;
}
.csx-dom {
  background: var(--sf);
  border: 1px solid var(--border);
  border-left: 3px solid color-mix(in srgb, var(--sa) 38%, transparent);
  border-radius: var(--csx-r);
  box-shadow: var(--csx-lift);
  scroll-margin-top: calc(var(--csx-dock) + 66px);
  transition: border-left-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.csx-dom:hover { border-left-color: color-mix(in srgb, var(--sa) 70%, transparent); }
.csx-dom.open {
  border-left-color: var(--sa);
  background: var(--sf-open);
}
.csx-dom.flash { animation: csx-flash 1.1s var(--ease); }
@keyframes csx-flash {
  0%, 100% { box-shadow: var(--csx-lift); }
  22%      { box-shadow: 0 0 0 2px var(--sa), var(--csx-lift); }
}

.csx-dom-head {
  width: 100%;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.15rem;
  padding: 1.05rem 1.15rem;
  background: none; border: none;
  text-align: left;
}
.csx-dom-glyph {
  width: 56px; height: 56px;
  display: block;
  color: color-mix(in srgb, var(--sa) 55%, var(--fg-mute));
  transition: color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.csx-dom-glyph svg { display: block; width: 100%; height: 100%; }
.csx-dom-glyph svg [data-fill] { fill: currentColor; stroke: none; }
.csx-dom:hover .csx-dom-glyph { color: var(--sa); }
.csx-dom.open .csx-dom-glyph { color: var(--sa); }

.csx-dom-id { min-width: 0; }
.csx-dom-name {
  display: block;
  font-family: var(--csx-face);
  font-variation-settings: 'wdth' 100;
  font-size: clamp(18px, 1.75vw, 24px);
  font-weight: 800; letter-spacing: -.028em;
  line-height: 1.08;
  color: var(--fg);
  margin-bottom: .3rem;
}
.csx-dom-gloss {
  display: block;
  font-size: 13.5px; line-height: 1.5;
  color: var(--fg-dim);
  max-width: 82ch;
}
.csx-dom-meta {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--fg-mute);
  white-space: nowrap;
}
.csx-dom-meta b {
  color: var(--fg-dim); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.csx-dom-chev {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 9px;
  color: var(--fg-mute);
  transition: transform var(--csx-disclose) var(--csx-ease),
              border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.csx-dom.open .csx-dom-chev {
  transform: rotate(180deg);
  color: var(--sa);
  border-color: color-mix(in srgb, var(--sa) 45%, transparent);
}

/* disclosure — 0fr → 1fr so the real content height drives the motion */
.csx-dom-body,
.csx-topics {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--csx-disclose) var(--csx-ease);
}
.csx-dom.open > .csx-dom-body,
.csx-field.open > .csx-topics { grid-template-rows: 1fr; }
/* the clip element carries NO padding of its own: overflow clips at the padding
   box, so padding on it would leave a strip of open content visible when closed */
.csx-dom-body > .csx-clip,
.csx-topics > .csx-clip { overflow: hidden; min-height: 0; padding: 0; }

.csx-dom-inner { padding: 0 1.15rem 1.15rem 1.15rem; }

/* ---------- fields -------------------------------------------------------- */
.csx-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr));
  gap: 9px;
  align-items: start;
  border-top: 1px solid var(--border);
  padding-top: 1.05rem;
}
.csx-field {
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--csx-r);
  padding: .7rem .8rem .75rem;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.csx-field:hover { border-color: color-mix(in srgb, var(--sa) 32%, var(--border)); }
/* An open field takes the floor rather than stretching one cell of the grid
   and leaving three columns of void beside it — the same move the domain slab
   makes one level up. Document order is preserved either way. */
.csx-field.open {
  grid-column: 1 / -1;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border-color: color-mix(in srgb, var(--sa) 38%, var(--border));
}
.csx-field.open .csx-field-gloss { max-width: 74ch; }
.csx-field-head {
  width: 100%;
  display: flex; align-items: baseline; gap: .6rem;
  background: none; border: none; padding: 0;
  text-align: left;
}
.csx-field-name {
  flex: 1; min-width: 0;
  font-family: var(--csx-face);
  font-variation-settings: 'wdth' 100;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.012em;
  line-height: 1.2;
  color: var(--fg);
}
.csx-field.open .csx-field-name { color: var(--sa); }
.csx-field-n {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  padding: .1rem .3rem;
  color: var(--fg-mute);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.csx-field.open .csx-field-n {
  color: var(--sa);
  border-color: color-mix(in srgb, var(--sa) 40%, transparent);
}
.csx-field-gloss {
  margin: .3rem 0 0;
  font-size: 12.5px; line-height: 1.48;
  color: var(--fg-dim);
}

/* ---------- topics -------------------------------------------------------- */
.csx-topic-list {
  list-style: none;
  margin: .7rem 0 0;
  padding: .6rem 0 0;
  border-top: 1px dashed color-mix(in srgb, var(--sa) 26%, var(--border));
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(224px, 100%), 1fr));
  gap: .55rem 1.6rem;
  align-items: start;
}
.csx-topic { display: block; }
.csx-topic-name {
  display: block;
  font-family: var(--csx-face);
  font-variation-settings: 'wdth' 88;      /* narrows as you descend */
  font-size: 13px; font-weight: 700; letter-spacing: .004em;
  color: var(--fg);
  line-height: 1.25;
}
.csx-topic-gloss {
  display: block;
  font-size: 12px; line-height: 1.45;
  color: color-mix(in srgb, var(--fg-dim) 76%, var(--fg-mute));
  margin-top: .08rem;
  max-width: 46ch;
}

/* ---------- seams (real cross-domain edges) ------------------------------- */
.csx-seams {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
}
.csx-seams-cap {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--fg-mute);
  margin-right: .3rem;
}
.csx-seam-chip {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  padding: .26rem .5rem;
  color: var(--fg-dim);
  background: color-mix(in srgb, var(--sa) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--sa) 26%, transparent);
  border-radius: 3px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.csx-seam-chip:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--sa) 20%, transparent);
}

/* ---------- filter state -------------------------------------------------- */
.csx-hidden { display: none !important; }
.csx-topic mark, .csx-dom-name mark, .csx-field-name mark,
.csx-dom-gloss mark, .csx-field-gloss mark, .csx-topic-gloss mark {
  background: color-mix(in srgb, var(--sa) 30%, transparent);
  color: var(--fg);
  border-radius: 2px;
  padding: 0 .1em;
}
.csx-empty {
  max-width: var(--csx-colw);
  margin: 0 auto;
  padding: 3.5rem var(--pad-x);
  font-family: var(--mono); font-size: 12px;
  color: var(--fg-mute);
}

/* ---------- colophon ------------------------------------------------------ */
.csx-colophon {
  max-width: var(--csx-colw);
  margin: 0 auto;
  padding: 2.4rem var(--pad-x) 4.5rem;
}
.csx-colophon p {
  max-width: 78ch;
  margin: 0;
  font-size: 13px; line-height: 1.6;
  color: var(--fg-mute);
}
.csx-colophon strong { color: var(--fg-dim); font-weight: 700; }
.csx-inline-seam {
  font-family: var(--mono); font-size: 11.5px;
  padding: .05rem .3rem;
  border: 1px solid var(--border-hi);
  border-radius: 3px;
  color: var(--fg-dim);
}

/* ---------- entrance ------------------------------------------------------ */
/* An animation, not a transition — a transition here would out-specify the
   slab's own hover/open transitions and quietly kill them. */
.csx-rise { opacity: 0; }
.csx-rise.in { animation: csx-rise .42s var(--ease-out) both; }
@keyframes csx-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .csx-rise { opacity: 1; }
  .csx-rise.in { animation: none; }
}

/* ---------- focus --------------------------------------------------------- */
.csx-body :is(.csx-dom-head, .csx-field-head, .csx-alt-btn, .csx-seam-chip, .csx-btn):focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--sa, var(--accent)) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sa, var(--accent)) 60%, transparent);
}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  /* minmax(0,1fr), never 1fr: a bare 1fr takes its min-content floor from the
     widest thing inside and blows the column past the viewport */
  .csx-instrument { grid-template-columns: minmax(0, 1fr); }
  .csx-spine {
    position: sticky;
    top: var(--csx-dock);
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-hi);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    z-index: 6;
  }
  .csx-spine-inner { flex-direction: row; align-items: center; padding: .4rem .55rem; gap: .5rem; min-width: 0; }
  .csx-spine-cap, .csx-spine-foot { display: none; }
  .csx-alt {
    flex-direction: row; margin: 0; min-width: 0; width: 100%;
    overflow-x: auto; scrollbar-width: none;
  }
  .csx-alt::-webkit-scrollbar { display: none; }
  /* --min is a vertical-type measurement; it means nothing lying down */
  .csx-alt-seg { flex: 0 0 auto; }
  .csx-alt-btn {
    flex-direction: row; gap: .35rem; padding: .4rem .3rem;
    border-top: none; border-left: 1px solid var(--border);
  }
  .csx-alt-seg:first-child .csx-alt-btn { border-left: none; }
  .csx-alt-name { writing-mode: horizontal-tb; letter-spacing: .12em; font-size: 9.5px; }
  .csx-alt-mass { display: none; }
  .csx-alt-marker { display: none; }
  .csx-tools { top: calc(var(--csx-dock) + 40px); }
  .csx-tools-inner { flex-wrap: wrap; gap: .5rem; }
  /* one row, not two: the sticky chrome already costs a third of a phone screen */
  .csx-find { flex: 1 1 130px; }
  .csx-btns { margin-left: 0; }
  .csx-btn { padding: .45rem .52rem; }
  .csx-found { order: 3; flex: 1 1 100%; }
  .csx-dom-head { grid-template-columns: 40px minmax(0, 1fr); gap: .8rem; padding: .85rem .9rem; }
  .csx-dom-glyph { width: 40px; height: 40px; }
  .csx-dom-meta { grid-column: 1 / -1; margin-top: .1rem; }
  .csx-dom-chev { margin-left: auto; }
  .csx-fields { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* the spine is a top strip down here, not a left rail — stop reserving it */
  .csx-mast { padding-left: var(--pad-x); max-width: var(--csx-colw); }
}
@media (max-width: 560px) {
  .csx-mast { padding-top: 2.25rem; }
  .csx-stat { padding-right: 1rem; margin-right: 1rem; }
  .csx-seam-name { letter-spacing: .2em; }
  /* all five strata on one phone row beats four and a scroll nobody notices */
  .csx-alt-idx { display: none; }
  .csx-alt-btn { padding: .4rem .18rem; }
  .csx-alt-name { font-size: 8.5px; letter-spacing: .07em; }
}