/* ============================================================
   base.css — page chrome + responsive shell for the cycle IG
   site generator. Design-system PRIMITIVES carry their own inline
   styles (ported from the React source); this file owns the parts
   that must reflow: the shell grid, top bar, footer, prose, and the
   element table's responsive behaviour.
   Tokens come from assets/cycle/*.css (linked before this file).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink-900);
  font-family: var(--font-body); font-size: var(--text-base);
  line-height: var(--leading-normal); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection); }
a { color: var(--menstrual-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }
img { max-width: 100%; }

/* ---------- top bar ---------- */
.cycle-topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--border-hair);
}
.cycle-topbar-inner {
  max-width: var(--width-page); margin: 0 auto; height: 60px;
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
}
.cycle-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.cycle-brand:hover { text-decoration: none; }
.cycle-brand svg { width: 30px; height: 30px; display: block; }
.cycle-wordmark { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.03em; color: var(--ink-900); }
.cycle-tld { color: var(--menstrual); }
.cycle-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: var(--radius-full); background: var(--follicular-tint); color: var(--follicular-deep);
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
.cycle-nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.cycle-nav a {
  padding: 7px 12px; border-radius: var(--radius-sm); color: var(--ink-500);
  font-size: var(--text-sm); font-weight: 600;
}
.cycle-nav a:hover { background: var(--paper-sunken); color: var(--ink-900); text-decoration: none; }
.cycle-nav a[aria-current] { background: var(--paper-sunken); color: var(--ink-900); }
.cycle-menu-btn { display: none; }

/* ---------- shell: sidebar · main · toc ---------- */
.cycle-shell {
  max-width: var(--width-page); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: var(--width-sidebar) minmax(0, 1fr) var(--width-toc);
  gap: 36px; align-items: start;
}
.cycle-side, .cycle-toc {
  position: sticky; top: 76px; align-self: start;
  max-height: calc(100vh - 88px); overflow-y: auto; padding: 28px 0 40px;
}
.cycle-main { min-width: 0; padding: 30px 0 90px; }
.cycle-doc { max-width: var(--width-content); }

/* sidebar nav */
.cycle-side .side-group { margin-bottom: 20px; }
.cycle-side .side-title {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--ink-300); padding: 0 10px; margin-bottom: 6px;
}
.cycle-side .side-subtitle {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-300); padding: 9px 10px 3px;
}
.cycle-side a {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px; margin: 1px 0;
  border-radius: var(--radius-sm); border-left: 2px solid transparent;
  color: var(--ink-700); font-size: var(--text-sm); font-weight: 500;
}
.cycle-side a:hover { background: var(--paper-sunken); text-decoration: none; }
.cycle-side a[aria-current] {
  border-left-color: var(--menstrual); background: var(--menstrual-tint);
  color: var(--menstrual-deep); font-weight: 600;
}
.cycle-side .dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }

/* toc */
.cycle-toc .toc-title {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--ink-300); margin-bottom: 10px;
}
.cycle-toc a {
  display: block; padding: 3px 0 3px 12px; border-left: 2px solid var(--line);
  color: var(--ink-500); font-size: var(--text-sm);
}
.cycle-toc a:hover { color: var(--ink-900); text-decoration: none; }

/* ---------- prose ---------- */
.cycle-doc h1, .cycle-doc h2, .cycle-doc h3, .cycle-doc h4 {
  font-family: var(--font-display); color: var(--ink-900); letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug); scroll-margin-top: 80px;
}
.cycle-doc h2 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: var(--tracking-tight); margin: 1.6em 0 .5em; padding-bottom: .25em; border-bottom: var(--border-hair); }
.cycle-doc h3 { font-size: var(--text-xl); font-weight: 600; margin: 1.4em 0 .4em; }
.cycle-doc p { max-width: var(--measure-prose); }
.cycle-doc > section { margin-top: 38px; }

/* ---------- breadcrumb ---------- */
.cycle-breadcrumb { display: flex; gap: 6px; align-items: center; margin-bottom: 14px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-500); flex-wrap: wrap; }
.cycle-breadcrumb a { color: var(--ink-500); }
.cycle-breadcrumb .sep { color: var(--ink-300); }

/* ---------- element table ---------- */
.el-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); border: var(--border-hair); border-radius: var(--radius-md); overflow: hidden; background: var(--paper-card); }
.el-table thead th { background: var(--paper-sunken); text-align: left; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); font-weight: 600; padding: 9px 14px; border: none; }
.el-table td { padding: 10px 14px; border-top: var(--border-hair); vertical-align: top; }
.el-table tbody tr:hover { background: var(--paper-sunken); }
.el-name { font-family: var(--font-mono); color: var(--ink-900); font-weight: 500; }
.el-name a { color: var(--ink-900); }
.el-tree { color: var(--ink-300); white-space: pre; }
.el-desc { color: var(--ink-700); line-height: var(--leading-normal); }
.el-types { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- footer ---------- */
.cycle-footer { border-top: var(--border-hair); background: var(--paper); color: var(--ink-500); font-size: var(--text-sm); margin-top: 60px; }
.cycle-footer-inner { max-width: var(--width-page); margin: 0 auto; padding: 28px 24px; }
.cycle-footer a { color: var(--ink-500); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
  .cycle-shell { grid-template-columns: var(--width-sidebar) minmax(0, 1fr); }
  .cycle-toc { display: none; }
}
@media (max-width: 860px) {
  .cycle-shell { grid-template-columns: minmax(0, 1fr); padding: 0 18px; }
  .cycle-side { display: none; }
  .cycle-nav { display: none; }
  .cycle-menu-btn { display: inline-flex; margin-left: auto; }
  .cycle-topbar-inner { padding: 0 18px; }
}
/* element table → stacked cards on small screens */
@media (max-width: 680px) {
  .el-table, .el-table tbody, .el-table tr, .el-table td { display: block; width: 100%; }
  .el-table thead { display: none; }
  .el-table tr { border-top: var(--border-hair); padding: 6px 4px; }
  .el-table tr:first-child { border-top: none; }
  .el-table td { border: none; padding: 3px 12px; }
  .el-table td[data-label]::before {
    content: attr(data-label); display: block;
    font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-300); margin-bottom: 2px;
  }
}

/* ============================================================
   Menu dropdowns (top nav submenus)
   ============================================================ */
.cycle-nav-link {
  background: none; border: none; font: inherit; cursor: pointer;
  padding: 7px 12px; border-radius: var(--radius-sm); color: var(--ink-500);
  font-size: var(--text-sm); font-weight: 600; display: inline-flex; align-items: center;
}
.cycle-nav-link:hover { background: var(--paper-sunken); color: var(--ink-900); text-decoration: none; }
.cycle-nav-link[aria-current] { color: var(--ink-900); background: var(--paper-sunken); }
.cycle-nav .caret { color: var(--ink-300); font-size: 10px; }
.cycle-nav-item.has-sub { position: relative; }
.cycle-submenu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 260px;
  background: var(--paper-card); border: var(--border-hair); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 6px; z-index: 40;
}
.cycle-nav-item.has-sub:hover .cycle-submenu,
.cycle-nav-item.has-sub:focus-within .cycle-submenu,
.cycle-submenu.open { display: block; }
.cycle-submenu a {
  display: block; padding: 6px 12px; border-radius: var(--radius-sm);
  color: var(--ink-700); font-size: var(--text-sm); font-weight: 500;
}
.cycle-submenu a:hover { background: var(--menstrual-tint); color: var(--menstrual-deep); text-decoration: none; }
.cycle-submenu-group + .cycle-submenu-group { margin-top: 4px; padding-top: 4px; border-top: var(--border-hair); }
.cycle-submenu-label {
  padding: 8px 12px 4px; font-family: var(--font-mono); font-size: var(--text-2xs);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400);
}
.cycle-submenu-link[data-depth="1"] { padding-left: 22px; }
.cycle-submenu-link[data-depth="2"] { padding-left: 32px; }

/* ============================================================
   Markdown prose (narrative pages)
   ============================================================ */
.cycle-prose { max-width: var(--measure-prose); }
.cycle-prose > svg, .cycle-prose img { max-width: 100%; height: auto; }
.cycle-prose h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0 0 .4em; }
.cycle-prose h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); margin: 1.7em 0 .5em; padding-bottom: .25em; border-bottom: var(--border-hair); scroll-margin-top: 80px; }
.cycle-prose h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); margin: 1.5em 0 .4em; scroll-margin-top: 80px; }
.cycle-prose h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); margin: 1.3em 0 .3em; }
.cycle-prose p, .cycle-prose li { line-height: var(--leading-relaxed); }
.cycle-prose ul, .cycle-prose ol { padding-left: 1.4em; }
.cycle-prose li { margin: .25em 0; }
.cycle-prose a { color: var(--menstrual-deep); }
.cycle-prose strong { font-weight: var(--weight-semibold); color: var(--ink-900); }
.cycle-prose :not(pre) > code { background: var(--paper-sunken); border: var(--border-hair); border-radius: var(--radius-xs); padding: .12em .4em; font-family: var(--font-mono); font-size: .875em; }
.cycle-prose pre { background: var(--code-bg); color: var(--code-fg); border: 1px solid var(--code-line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); overflow: auto; line-height: var(--leading-code); font-size: var(--text-sm); }
.cycle-prose pre code { background: none; border: none; padding: 0; color: inherit; font-family: var(--font-mono); }
.cycle-prose blockquote { margin: var(--space-4) 0; padding: var(--space-3) var(--space-5); background: var(--paper-sunken); border-left: 3px solid var(--ink-300); border-radius: var(--radius-md); color: var(--ink-700); }
.cycle-prose table, .cycle-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); border: var(--border-hair); border-radius: var(--radius-md); overflow: hidden; background: var(--paper-card); margin: var(--space-4) 0; }
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: var(--space-4) 0;
  border: var(--border-hair);
  border-radius: var(--radius-md);
  background: var(--paper-card);
}
.table-scroll > .cycle-table,
.table-scroll > table {
  width: auto;
  min-width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.cycle-prose th, .cycle-table th {
  background: var(--paper-sunken); text-align: left; font-family: var(--font-body);
  font-size: var(--text-xs); line-height: var(--leading-snug); letter-spacing: 0;
  color: var(--ink-600); font-weight: 700; padding: 8px 12px;
  overflow-wrap: normal;
}
.cycle-prose td, .cycle-table td {
  padding: 10px 14px;
  border-top: var(--border-hair);
  vertical-align: top;
  min-width: 0;
  overflow-wrap: break-word;
}
.cycle-prose table td:first-child strong,
.cycle-table td:first-child strong { white-space: nowrap; }
.cycle-prose th.code-col,
.cycle-prose td.code-col,
.cycle-table th.code-col,
.cycle-table td.code-col,
.cycle-prose td:has(> code:only-child),
.cycle-table td:has(> code:only-child),
.cycle-prose th.code-col code,
.cycle-prose td.code-col code,
.cycle-table th.code-col code,
.cycle-table td.code-col code,
.cycle-prose td:has(> code:only-child) code,
.cycle-table td:has(> code:only-child) code {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.cycle-prose th.code-col,
.cycle-prose td.code-col,
.cycle-table th.code-col,
.cycle-table td.code-col,
.cycle-prose td:has(> code:only-child),
.cycle-table td:has(> code:only-child) {
  width: 1%;
  max-width: none;
}
.sql-table--balanced {
  table-layout: fixed;
}
.sql-table--balanced th.sql-prose-col,
.sql-table--balanced td.sql-prose-col,
.sql-table--balanced th.sql-mixed-code-col,
.sql-table--balanced td.sql-mixed-code-col {
  white-space: normal;
}
.sql-table--balanced td.sql-prose-col,
.sql-table--balanced td.sql-mixed-code-col {
  overflow-wrap: normal;
  word-break: normal;
}
.sql-table--balanced td.sql-mixed-code-col code {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.profile-layer-table {
  table-layout: fixed;
  min-width: 760px;
}
.profile-layer-table .profile-layer-col-layer { width: 16%; }
.profile-layer-table .profile-layer-col-profile { width: 20%; }
.profile-layer-table .profile-layer-col-meaning { width: 35%; }
.profile-layer-table .profile-layer-col-result { width: 29%; }
.profile-layer-table th,
.profile-layer-table td {
  line-height: var(--leading-snug);
}
.profile-layer-table .profile-layer-label {
  background: var(--paper-sunken);
  color: var(--ink-800);
  font-weight: 600;
}
.profile-layer-table .profile-layer-label strong {
  display: block;
  color: var(--ink-900);
  font-weight: 700;
}
.profile-layer-table .profile-layer-label span {
  display: block;
  margin-top: 3px;
  color: var(--ink-500);
  font-weight: 500;
}
.profile-layer-table td code {
  white-space: nowrap;
}
.profile-layer-table .profile-layer-core td {
  background: color-mix(in srgb, var(--menstrual) 5%, var(--paper-card));
}
.profile-layer-table .profile-layer-support th,
.profile-layer-table .profile-layer-support td {
  background: color-mix(in srgb, var(--paper-sunken) 65%, var(--paper-card));
}
.cycle-prose .contains-task-list { list-style: none; padding-left: 0; }
.cycle-prose .task-list-item { list-style: none; margin: .5em 0; padding-left: 1.85em; }
.cycle-prose .task-list-item-checkbox {
  appearance: none; width: 1.05em; height: 1.05em; margin: 0 .65em 0 -1.85em;
  vertical-align: -.16em; border: 1.5px solid var(--ink-300); border-radius: var(--radius-xs);
  background: var(--paper-card); box-shadow: inset 0 0 0 2px var(--paper-card);
}
.cycle-prose .task-list-item-checkbox:checked { background: var(--menstrual); border-color: var(--menstrual); }
.muted { color: var(--ink-500); font-size: var(--text-sm); }

/* ============================================================
   Artifacts rows
   ============================================================ */
.art-card { border: var(--border-hair); border-radius: var(--radius-md); overflow: hidden; background: var(--paper-card); }
.art-row {
  display: block;
  border-top: var(--border-hair);
  color: inherit;
  text-decoration: none;
}
.art-row:first-child { border-top: none; }
.art-row:hover {
  background: var(--paper-sunken);
  text-decoration: none;
}
.art-subgroup {
  border-top: var(--border-hair); background: var(--paper-sunken);
  padding: 7px 16px; font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-500);
}
.art-subgroup:first-child { border-top: none; }
.art-summary { display: grid; grid-template-columns: 1.3fr 120px 1fr; gap: 14px; align-items: center; padding: 12px 16px; }
.art-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--ink-900); }
.art-short { font-size: var(--text-sm); color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-detail { padding: 0 16px 14px 16px; color: var(--ink-700); font-size: var(--text-sm); line-height: var(--leading-normal); }
.art-action { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--menstrual-deep); }
@media (max-width: 680px) {
  .art-summary { grid-template-columns: 1fr; gap: 8px; }
  .art-summary > .art-kind, .art-short { display: none; }
}

/* ============================================================
   Element list — fused rows (header line + full-width detail)
   ============================================================ */
.el-list { border: var(--border-hair); border-radius: var(--radius-md); overflow: hidden; background: var(--paper-card); }
.el-list-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--paper-sunken); padding: 8px 14px;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500); font-weight: 600;
}
.el-toggle-all {
  display: none; min-height: 28px; padding: 3px 8px;
  border: var(--border-hair); border-radius: var(--radius-xs);
  background: var(--paper-card); color: var(--ink-600);
  font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0; text-transform: none;
  cursor: pointer;
}
.js .el-toggle-all { display: inline-flex; align-items: center; }
.el-toggle-all:hover { background: var(--paper); color: var(--ink-900); }
.el { padding: 12px 14px; border-top: var(--border-hair); }
.el-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start; gap: 7px;
}
.el-identity { min-width: 0; display: grid; gap: 2px; align-items: start; }
.el-name { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink-900); overflow-wrap: anywhere; word-break: normal; }
.el-cardinality { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-400); white-space: nowrap; }
.el-cardinality.is-required { color: var(--menstrual); font-weight: 700; }
.el-types { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.el-body { margin-top: 8px; display: grid; gap: 8px; max-width: none; }
.el-short { display: block; color: var(--ink-700); font-size: var(--text-sm); line-height: var(--leading-normal); }
.el-constraints { display: grid; gap: 8px; margin: 0; }
.el-constraints dt {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--ink-400);
}
.el-constraints dd { margin: -4px 0 0; min-width: 0; }
.el-json {
  display: inline-block; max-width: 100%; padding: 4px 7px; border-radius: var(--radius-xs);
  border: var(--border-hair); background: var(--paper-sunken); color: var(--ink-900);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-snug);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.el-binding-value { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; }

/* ============================================================
   Shared artifact-page parts (header, metadata grid, sections)
   ============================================================ */
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--menstrual-deep); font-weight: 600; }
.page-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 6px 0 12px; line-height: var(--leading-tight); }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.lead { font: var(--type-lead); color: var(--ink-700); max-width: 62ch; margin: 0 0 4px; }
.kv { border: var(--border-hair); border-radius: var(--radius-md); overflow: hidden; background: var(--paper-card); margin-top: 18px; }
.kv-row { display: grid; gap: 7px; padding: 12px 16px; }
.kv-row + .kv-row { border-top: var(--border-hair); }
.kv-k { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-500); }
.kv-v { font-size: var(--text-sm); color: var(--ink-900); min-width: 0; }
.copy-value { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; max-width: 100%; }
.copy-value-code {
  display: block; min-width: 0; max-width: 100%;
  padding: 5px 8px; border-radius: var(--radius-xs); border: var(--border-hair);
  background: var(--paper-sunken); color: var(--ink-800);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-snug);
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.copy-value-button {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: var(--border-hair); border-radius: var(--radius-sm);
  background: var(--paper-card); color: var(--ink-600);
  font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 700;
  cursor: pointer; transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.js .copy-value-button { display: inline-flex; }
.copy-value-button:hover { background: var(--paper-sunken); color: var(--ink-900); }
.copy-value-button[data-copied="true"] {
  background: var(--ovulatory-tint); color: var(--ovulatory-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ovulatory) 22%, transparent);
  transform: scale(.96);
}
/* Middle-truncate: head ellipses, final path segment (the id) stays whole.
   Wide box → full URL on one line; narrow box → "host/…/id". */
.copy-value-code--midtrunc {
  display: flex; align-items: baseline;
  white-space: nowrap; overflow: hidden; word-break: normal; overflow-wrap: normal;
}
.copy-value-code--midtrunc .cv-head {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-500);
}
.copy-value-code--midtrunc .cv-tail {
  flex: 0 0 auto; white-space: nowrap; color: var(--ink-900);
}
.copy-value--codeblock .copy-value-code {
  width: 100%;
  box-sizing: border-box;
  padding-right: 46px;
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-overflow-scrolling: touch;
}
.copy-value--codeblock {
  position: relative;
  display: block;
}
.copy-value--codeblock .copy-value-button {
  position: absolute;
  /* Sized to sit inside a single code line and centred on it; on multi-line
     blocks this keeps the button tucked into the top-right corner. */
  top: 2px;
  right: 4px;
  width: 26px;
  height: 26px;
  background: color-mix(in srgb, var(--paper-card) 92%, transparent);
  backdrop-filter: blur(2px);
}
.art-section { margin-top: 40px; }
.art-section > h2.sec { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: var(--tracking-snug); margin: 6px 0 14px; }
.section-lead { margin: -4px 0 14px; color: var(--ink-600); font-size: var(--text-sm); line-height: var(--leading-normal); max-width: var(--measure-prose); }
.flag-legend { font-size: var(--text-xs); color: var(--ink-500); margin: 10px 2px 0; }
.glance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.glance-card {
  border: var(--border-hair); border-radius: var(--radius-md); background: var(--paper-card);
  padding: 12px 14px;
}
.glance-card h3 {
  margin: 0 0 8px; font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-500);
}
.glance-card dl { display: grid; grid-template-columns: minmax(74px, .55fr) minmax(0, 1fr); gap: 6px 10px; margin: 0; }
.glance-card dt {
  min-width: 0; font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--ink-500); overflow-wrap: anywhere;
}
.glance-card dd {
  min-width: 0; margin: 0; font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--ink-800); line-height: var(--leading-snug); overflow-wrap: anywhere;
}
.glance-card a { color: var(--menstrual-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.glance-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.glance-binding { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.glance-value-pair { display: grid; gap: 4px; }
.glance-value-pair > span {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--ink-400);
}
.glance-code {
  display: inline-block; max-width: 100%; padding: 4px 7px; border-radius: var(--radius-xs);
  border: var(--border-hair); background: var(--paper-sunken); color: var(--ink-900);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-snug);
  white-space: pre; overflow-x: auto; overflow-wrap: normal; word-break: normal;
}
.constraint-list { display: grid; gap: 10px; }
.constraint-card {
  border: var(--border-hair); border-radius: var(--radius-md); background: var(--paper-card);
  padding: 12px 14px;
}
.constraint-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 7px; }
.constraint-head code { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--ink-900); }
.constraint-card p { margin: 0 0 9px; color: var(--ink-800); font-size: var(--text-sm); line-height: var(--leading-normal); }
.profile-example-list { display: grid; border: var(--border-hair); border-radius: var(--radius-md); overflow: hidden; background: var(--paper-card); }
.profile-example {
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(120px, .6fr) auto;
  gap: 14px; align-items: center; padding: 12px 14px; border-top: var(--border-hair);
  color: inherit; text-decoration: none;
}
.profile-example:first-child { border-top: none; }
.profile-example:hover { background: var(--paper-sunken); text-decoration: none; }
.profile-example strong { display: block; color: var(--ink-900); font-size: var(--text-sm); }
.profile-example span { min-width: 0; color: var(--ink-600); font-size: var(--text-xs); line-height: var(--leading-normal); }
.profile-example > span:nth-child(2) { font-family: var(--font-mono); color: var(--menstrual-deep); white-space: nowrap; }
.profile-example-action {
  justify-self: end; padding: 4px 8px; border: var(--border-hair); border-radius: var(--radius-xs);
  background: var(--paper-sunken); color: var(--ink-800) !important; font-weight: 700;
}
.profile-inline-example { margin-top: 20px; }
.profile-inline-heading {
  margin: 0 0 10px;
  color: var(--ink-900);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: var(--leading-tight);
}
.formal-constraints {
  margin-top: 14px; border-top: var(--border-hair); padding-top: 14px;
}
.formal-constraints h3 {
  margin: 0 0 8px; font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-500);
}
.formal-constraints ul { margin: 0; padding-left: 1.2em; }
.formal-constraints li { margin: 5px 0; color: var(--ink-700); font-size: var(--text-sm); line-height: var(--leading-normal); }
.constraint-severity {
  margin-left: 8px; color: var(--menstrual-deep); font-family: var(--font-mono);
  font-size: var(--text-2xs); text-transform: uppercase;
}
.split-action {
  margin-top: 12px; display: inline-flex; align-items: stretch; position: relative;
  border: var(--border-hair); border-radius: var(--radius-sm); background: var(--paper-card);
  box-shadow: var(--shadow-sm);
}
.split-action-main {
  display: inline-flex; align-items: center; min-height: 38px; padding: 7px 13px;
  color: var(--menstrual-deep); font-weight: 700; font-size: var(--text-sm);
}
.split-action-main:hover { background: var(--paper-sunken); text-decoration: none; }
.split-action-menu { position: relative; border-left: var(--border-hair); }
.split-action-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 100%; min-height: 38px; border: 0; background: transparent;
  color: var(--ink-500); cursor: pointer;
}
.split-action-toggle:hover { background: var(--paper-sunken); color: var(--ink-900); }
.split-action-options {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px;
  padding: 6px; border: var(--border-hair); border-radius: var(--radius-sm);
  background: var(--paper-card); box-shadow: var(--shadow-md); z-index: 10;
}
.split-action-menu:hover .split-action-options,
.split-action-menu:focus-within .split-action-options { display: block; }
.split-action-options a {
  display: block; padding: 7px 9px; border-radius: var(--radius-xs);
  color: var(--ink-700); font-size: var(--text-sm); font-weight: 600;
}
.split-action-options a:hover { background: var(--paper-sunken); text-decoration: none; color: var(--ink-900); }
@media (max-width: 560px) {
  .glance-grid { grid-template-columns: 1fr; }
  .glance-card dl { grid-template-columns: minmax(0, .48fr) minmax(0, 1fr); }
  .el-constraints { grid-template-columns: 1fr; }
  .copy-value { grid-template-columns: minmax(0, 1fr) auto; }
  .profile-example { grid-template-columns: 1fr; gap: 5px; }
  .profile-example > span:nth-child(2) { white-space: normal; }
  .profile-example-action { justify-self: start; margin-top: 3px; }
}

/* ============================================================
   Machine-formats aside + element detail expand
   ============================================================ */
.machine { background: var(--ink-900); border-radius: var(--radius-md); padding: 14px 15px; color: var(--paper); margin-bottom: 18px; }
.machine-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.machine-title { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-100); }
.machine-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--paper); }
.machine-row:hover { background: rgba(255,255,255,0.07); text-decoration: none; }
.machine-label { color: var(--ink-100); }
.machine-file { color: var(--code-str); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }

details.el > summary {
  display: block; position: relative;
  list-style: none; cursor: pointer;
}
details.el > summary::-webkit-details-marker { display: none; }
.el-summary-main { min-width: 0; }
details.el > summary .el-head { padding-right: 92px; }
.el-detail-action {
  position: absolute; top: 0; right: 0;
  min-height: 24px; padding: 3px 8px;
  border: var(--border-hair); border-radius: var(--radius-xs); background: var(--paper-sunken);
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-500);
}
.el-detail-action::before { content: "Details"; }
details.el[open] .el-detail-action::before { content: "Less"; }
details.el > summary:hover .el-detail-action { background: var(--paper); color: var(--ink-900); }
details.el[open] > summary { padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.el-deep { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.el-deep .el-def { font-size: var(--text-sm); color: var(--ink-700); line-height: var(--leading-normal); max-width: var(--measure-prose); }
.el-deep .el-k { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-300); margin-right: 6px; }
.el-inv { font-size: var(--text-xs); color: var(--ink-700); }
.el-inv code { font-family: var(--font-mono); color: var(--ovulatory-deep); }

/* ============================================================
   Tabs (redundant alt-views) — JS off shows all panes stacked
   ============================================================ */
.tablist { display: flex; gap: 2px; border-bottom: var(--border-hair); }
html:not(.js) .tablist { display: none; }
.tab { background: none; border: none; cursor: pointer; padding: 8px 14px; margin-bottom: -1px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 600; color: var(--ink-500); border-bottom: 2px solid transparent; }
.tab:hover { color: var(--ink-900); }
.tab[aria-selected="true"] { color: var(--ink-900); border-bottom-color: var(--brand); }
.tabpane { padding-top: var(--space-4); }
.tabpane-label { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--ink-300); margin: 16px 0 6px; }
.js .tabpane-label { display: none; }

/* ============================================================
   Skip link + mobile nav drawer
   ============================================================ */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink-900); color: var(--paper); padding: 8px 14px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; }
.skip-link:focus { left: 0; }
@media (max-width: 860px) {
  .cycle-nav.open-mobile {
    display: flex; position: absolute; top: 60px; right: 12px; left: 12px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--paper-card); border: var(--border-hair); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md); padding: 8px; z-index: 50;
  }
  .cycle-nav.open-mobile .cycle-nav-item.has-sub { position: static; }
  .cycle-nav.open-mobile .cycle-nav-link { justify-content: flex-start; }
  .cycle-nav.open-mobile .cycle-submenu { position: static; display: block; box-shadow: none; border: none; padding: 0 0 6px 14px; min-width: 0; }
}

/* ============================================================
   Overflow guards + long-word wrapping (fixes h1 overflow that
   shifted the top bar and broke the mobile gutter)
   ============================================================ */
/* clip (not hidden) contains horizontal overflow WITHOUT creating a scroll
   container — `overflow-x:hidden` on html/body breaks position:sticky (the TOC). */
body { overflow-x: clip; }
.cycle-doc, .cycle-prose { min-width: 0; }
.cycle-prose, .cycle-doc { overflow-wrap: break-word; }
h1, h2, h3, h4, .page-title, .cycle-prose h1, .cycle-prose h2, .cycle-prose h3 { overflow-wrap: break-word; hyphens: auto; }
.cycle-prose pre, .cycle-prose table { max-width: 100%; }
/* Tables inside a scroll wrapper size to their content so the wrapper (not the
   page) owns horizontal scrolling; without this the max-width cap above would
   squish columns and the page-level clip would hide overflow. */
.table-scroll > .cycle-table, .table-scroll > table { max-width: none; }

/* No-sidebar (narrative) layout: content + TOC, centered */
.cycle-shell.no-side { grid-template-columns: minmax(0, 1fr) var(--width-toc); max-width: 1060px; }
@media (max-width: 1180px) {
  .cycle-shell.no-side { grid-template-columns: minmax(0, 1fr); }
}

/* Scrollable mobile nav drawer (so later menu items are reachable) */
@media (max-width: 860px) {
  .cycle-nav.open-mobile { max-height: calc(100vh - 72px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   Heading deep-link anchors (durable, copyable)
   ============================================================ */
.cycle-doc h1, .cycle-doc h2, .cycle-doc h3, .cycle-doc h4,
.cycle-prose h1, .cycle-prose h2, .cycle-prose h3, .cycle-prose h4,
h2.sec, .page-title { position: relative; }
.heading-anchor {
  margin-left: .4em; padding: 0 .25em; font-family: var(--font-mono); font-weight: 500;
  color: var(--ink-300); text-decoration: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-snap);
}
.heading-anchor::before { content: "#"; }
:hover > .heading-anchor, .heading-anchor:focus-visible { opacity: 1; }
.heading-anchor:hover { color: var(--menstrual); text-decoration: none; }
.heading-anchor.copied::after { content: " copied"; color: var(--ovulatory-deep); font-size: var(--text-2xs); }

/* ============================================================
   OVERRIDES (source-order wins)
   ============================================================ */
/* Machine formats: light, compact, no overflow (replaces the dark box) */
.machine { background: none; padding: 0; margin-bottom: 22px; color: inherit; }
.machine-title { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-300); margin-bottom: 8px; }
.machine-links { display: grid; gap: 6px; }
.machine-link {
  display: flex; align-items: center; justify-content: flex-start; gap: 7px; width: 100%;
  min-height: 32px; padding: 5px 10px; border: var(--border-hair); border-radius: var(--radius-sm);
  background: var(--paper-card); font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--ink-700); white-space: nowrap;
}
.machine-link:hover { background: var(--paper-sunken); color: var(--ink-900); text-decoration: none; }
.copy-ai-source {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 34px; margin: 0 0 18px; padding: 6px 10px;
  border: var(--border-hair); border-radius: var(--radius-sm);
  background: var(--paper-card); color: var(--ink-700);
  font-size: var(--text-xs); font-weight: 700; text-decoration: none;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.copy-ai-source:hover { background: var(--paper-sunken); color: var(--ink-900); text-decoration: none; }
.copy-ai-source[data-copied="true"] {
  background: var(--ovulatory-tint); color: var(--ovulatory-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ovulatory) 22%, transparent);
  transform: scale(.98);
}
.copy-ai-source[data-copied="true"]::after { content: " copied"; }
.copy-ai-source-mobile { display: none; margin: 0 0 18px; }
@media (max-width: 1180px) {
  .copy-ai-source-mobile { display: inline-flex; }
}
.source-action { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.source-action a {
  display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 6px 10px; border: var(--border-hair); border-radius: var(--radius-sm);
  background: var(--paper-card); font-size: var(--text-sm); font-weight: 700;
}
.source-action a:hover { background: var(--paper-sunken); text-decoration: none; }

/* Top nav never wraps a label mid-word */
.cycle-nav a, .cycle-nav-link { white-space: nowrap; }

/* "Copied" as a small positioned tooltip (no baseline misalignment) */
.heading-anchor { position: relative; }
.heading-anchor.copied { opacity: 1; color: var(--ovulatory); }
.heading-anchor.copied::after {
  content: "Copied"; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  margin-bottom: 6px; background: var(--ink-900); color: var(--paper);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-2xs); letter-spacing: 0;
  padding: 3px 7px; border-radius: var(--radius-xs); white-space: nowrap; pointer-events: none;
}

/* Aside-collapse: drop the rail when empty, reflow the grid */
.cycle-shell.no-aside { grid-template-columns: var(--width-sidebar) minmax(0, 1fr); }
.cycle-shell.no-side.no-aside { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
@media (max-width: 1180px) { .cycle-shell.no-aside { grid-template-columns: var(--width-sidebar) minmax(0, 1fr); } }
@media (max-width: 860px) { .cycle-shell.no-aside { grid-template-columns: minmax(0, 1fr); } }

/* Whole heading is the copy click-target (JS adds .has-anchor) */
.has-anchor { cursor: pointer; }

/* Bridge the hover gap between a top-nav item and its submenu (kills the dead zone) */
.cycle-nav-item.has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }

/* ============================================================
   Wide-screen real estate: wider content column; text keeps a
   readable measure, but media (diagrams, tables, code) fill it.
   ============================================================ */
.cycle-shell.no-side { max-width: 1340px; }
.cycle-doc { max-width: 1000px; }
.cycle-prose { max-width: none; }
.cycle-prose > p,
.cycle-prose > ul,
.cycle-prose > ol,
.cycle-prose > blockquote,
.cycle-prose > h1,
.cycle-prose > h2,
.cycle-prose > h3,
.cycle-prose > h4 { max-width: var(--measure-prose); }
.cycle-prose > figure, .cycle-prose > p:has(> img:only-child), .cycle-prose img,
.cycle-prose > table, .cycle-prose > pre { max-width: 100%; }
@media (max-width: 860px) {
  .cycle-prose h1 { font-size: var(--text-2xl); overflow-wrap: normal; hyphens: none; }
}

/* ============================================================
   TOC scrollspy active state (set by entry.tsx IntersectionObserver)
   ============================================================ */
.cycle-toc a[data-active] { color: var(--ink-900); font-weight: 600; border-left-color: var(--menstrual); }

/* ============================================================
   Footer — a proper multi-section footer
   ============================================================ */
.cycle-footer { border-top: var(--border-hair); background: var(--paper-sunken); margin-top: 80px; }
.cycle-footer-inner { max-width: var(--width-page); margin: 0 auto; padding: 40px 24px 28px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.foot-mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.foot-word { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.03em; color: var(--ink-900); }
.foot-tag { font-size: var(--text-sm); color: var(--ink-500); line-height: var(--leading-normal); margin: 12px 0 10px; max-width: 38ch; }
.foot-ver { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-300); }
.foot-col h4 { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-300); margin: 4px 0 12px; font-weight: 600; }
.foot-col a, .foot-pub { display: block; font-size: var(--text-sm); color: var(--ink-700); margin: 7px 0; }
.foot-col a:hover { color: var(--menstrual); text-decoration: none; }
.foot-pub { color: var(--ink-500); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 18px; border-top: var(--border-hair); font-size: var(--text-xs); color: var(--ink-500); }
.foot-base code { font-family: var(--font-mono); }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ============================================================
   Colorblind-safe links: inside RUNNING TEXT, color alone can't
   signal "link" — add a subtle underline by default (stronger on
   hover). Chrome links (nav, sidebar, TOC, footer, breadcrumb,
   tags/badges) are positionally obvious, so they stay clean.
   ============================================================ */
.cycle-prose a,
.el-deep a,
.el-constraints dd a,
.art-detail a,
.lead a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-underline-offset: 0.16em;
}
.cycle-prose a:hover,
.el-deep a:hover,
.el-constraints dd a:hover,
.art-detail a:hover,
.lead a:hover { text-decoration-color: currentColor; }