/* cavelux.org - institutional variant (R-6). Documents first. Calm.
   No CRT, boot, ticker or scanlines. No colour literals: tokens only (org-tokens.css). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--cvl-bg);
  background-image:
    linear-gradient(var(--cvl-master-grid-line) var(--cvl-master-rule), transparent var(--cvl-master-rule)),
    linear-gradient(90deg, var(--cvl-master-grid-line) var(--cvl-master-rule), transparent var(--cvl-master-rule));
  background-size: var(--cvl-master-grid) var(--cvl-master-grid);
  color: var(--cvl-ink-dim);
  font-family: var(--cvl-font);
  font-size: 1rem;
  line-height: var(--cvl-leading-body);
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--cvl-ink); text-decoration-color: var(--cvl-border-control); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--cvl-lime); }
:focus-visible { outline: 2px solid var(--cvl-lime); outline-offset: 3px; }
h1, h2, h3 { color: var(--cvl-ink); font-weight: 600; margin: 0; }
p { margin: 0; }

.skip {
  position: absolute; left: var(--cvl-space-4); top: -10rem;
  background: var(--cvl-ink); color: var(--cvl-bg);
  font-family: var(--cvl-mono); font-size: 0.875rem; padding: var(--cvl-space-2) var(--cvl-space-3);
}
.skip:focus { top: var(--cvl-space-4); }

.wrap { width: 100%; max-width: var(--org-wrap); margin: 0 auto; padding: 0 var(--org-gutter); }
.mono { font-family: var(--cvl-mono); }
.label {
  font-family: var(--cvl-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: var(--cvl-tracking-label); text-transform: uppercase; color: var(--cvl-muted);
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--cvl-bg);
  border-bottom: var(--cvl-master-rule) solid var(--cvl-border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: var(--cvl-space-6);
  min-height: var(--org-header-h);
}
.brand { display: flex; align-items: center; gap: var(--cvl-space-3); text-decoration: none; flex: none; }
.brand img { width: var(--cvl-master-mark); height: var(--cvl-master-mark); object-fit: contain; image-rendering: crisp-edges; image-rendering: pixelated; }
.wordmark {
  font-family: var(--cvl-font-display); font-weight: 700; font-size: 1.125rem;
  letter-spacing: 0.14em; color: var(--cvl-voxel-1);
}
.nav-toggle { display: none; }
.site-nav { display: flex; align-items: center; gap: var(--cvl-space-6); flex: 1; }
.site-nav ul { display: flex; gap: var(--cvl-space-6); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  font-family: var(--cvl-mono); font-size: 0.8125rem; letter-spacing: var(--cvl-tracking-nav);
  text-transform: uppercase; text-decoration: none; color: var(--cvl-ink-dim);
  padding: var(--cvl-space-2) 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--cvl-ink); }
.site-nav a[aria-current="page"] { color: var(--cvl-ink); border-bottom-color: var(--cvl-lime); }
.site-nav .out { margin-left: auto; }
.site-nav .out a { text-transform: none; letter-spacing: 0; color: var(--cvl-ink); }

/* ---------- draft banner ---------- */
.draft-bar { border-bottom: var(--cvl-master-rule) solid var(--cvl-border); background: var(--cvl-surface); }
.draft-bar p { font-family: var(--cvl-mono); font-size: 0.75rem; color: var(--cvl-ink-dim); padding: var(--cvl-space-2) 0; }
.chip {
  display: inline-block; font-family: var(--cvl-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--cvl-tracking-label); text-transform: uppercase;
  border: var(--cvl-master-rule) solid var(--cvl-border-control); color: var(--cvl-ink);
  padding: 0.125rem var(--cvl-space-2); line-height: 1.5; vertical-align: middle;
}
.chip--draft { border-color: var(--cvl-lime); color: var(--cvl-lime); }

/* ---------- home ---------- */
.hero { padding: var(--cvl-space-10) 0 var(--cvl-space-9); border-bottom: var(--cvl-master-rule) solid var(--cvl-border); }
.hero h1 {
  font-size: clamp(2rem, 5.2vw, 4.25rem); line-height: var(--cvl-leading-display);
  letter-spacing: -0.02em; font-weight: 600; max-width: 18ch; margin-top: var(--cvl-space-5);
}
.hero .lede { max-width: var(--cvl-content-measure); margin-top: var(--cvl-space-6); font-size: 1.125rem; color: var(--cvl-ink-dim); }

.section { padding: var(--cvl-space-9) 0; border-bottom: var(--cvl-master-rule) solid var(--cvl-border); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--cvl-space-4); margin-bottom: var(--cvl-space-6); }
.section-head h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.section-head a { font-family: var(--cvl-mono); font-size: 0.8125rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--cvl-master-rule); background: var(--cvl-border); border: var(--cvl-master-rule) solid var(--cvl-border); }
.card { background: var(--cvl-surface); padding: var(--cvl-space-6); display: flex; flex-direction: column; gap: var(--cvl-space-4); min-height: 15rem; }
.card h3 { font-size: 1.25rem; }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: " \2192"; color: var(--cvl-muted); }
.card h3 a:hover::after { color: var(--cvl-lime); }
.card p { font-size: 0.9375rem; }
.card .meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--cvl-space-3); align-items: center; font-family: var(--cvl-mono); font-size: 0.75rem; color: var(--cvl-muted); }

.principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cvl-space-6) var(--cvl-space-7); }
@media (max-width: 1080px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .principles { grid-template-columns: minmax(0, 1fr); } }
.principles li { border-top: var(--cvl-master-rule) solid var(--cvl-border-control); padding-top: var(--cvl-space-4); }
.principles .num { font-family: var(--cvl-mono); font-size: 0.8125rem; color: var(--cvl-lime); }
.principles h3 { font-size: 1.0625rem; margin: var(--cvl-space-2) 0 var(--cvl-space-3); }
.principles p { font-size: 0.9375rem; }

.handoff { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--cvl-space-5); }
.handoff a {
  display: flex; flex-direction: column; gap: var(--cvl-space-2); text-decoration: none;
  border: var(--cvl-master-rule) solid var(--cvl-border-control); padding: var(--cvl-space-5) var(--cvl-space-6);
  background: var(--cvl-bg);
}
.handoff a:hover { border-color: var(--cvl-lime); }
.handoff strong { font-family: var(--cvl-mono); font-weight: 600; color: var(--cvl-ink); font-size: 1rem; }
.handoff span { font-size: 0.9375rem; color: var(--cvl-ink-dim); }
.handoff .host { font-family: var(--cvl-mono); font-size: 0.75rem; color: var(--cvl-muted); }

/* ---------- document page ---------- */
.crumbs { padding-top: var(--cvl-space-7); font-family: var(--cvl-mono); font-size: 0.8125rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--cvl-space-2); color: var(--cvl-muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--cvl-space-2); }
.doc-head { padding: var(--cvl-space-6) 0 var(--cvl-space-8); border-bottom: var(--cvl-master-rule) solid var(--cvl-border); }
.doc-head h1 { font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: var(--cvl-leading-display); letter-spacing: -0.02em; margin-top: var(--cvl-space-4); }
.doc-head .summary { max-width: var(--cvl-content-measure); margin-top: var(--cvl-space-5); font-size: 1.0625rem; }
.doc-meta { margin: var(--cvl-space-6) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--cvl-space-4) var(--cvl-space-6); max-width: 52rem; }
.doc-meta div { border-left: 2px solid var(--cvl-border-control); padding-left: var(--cvl-space-3); }
.doc-meta dt { font-family: var(--cvl-mono); font-size: 0.6875rem; letter-spacing: var(--cvl-tracking-label); text-transform: uppercase; color: var(--cvl-muted); }
.doc-meta dd { margin: 0.125rem 0 0; font-family: var(--cvl-mono); font-size: 0.875rem; color: var(--cvl-ink); }

.doc-layout { display: grid; grid-template-columns: var(--org-toc-col) minmax(0, var(--cvl-content-measure)); gap: var(--cvl-space-9); padding: var(--cvl-space-8) 0 var(--cvl-space-10); }
.toc { position: sticky; top: calc(var(--org-header-h) + var(--cvl-space-5)); align-self: start; }
.toc h2 { font-family: var(--cvl-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: var(--cvl-tracking-label); text-transform: uppercase; color: var(--cvl-muted); margin-bottom: var(--cvl-space-3); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-left: var(--cvl-master-rule) solid var(--cvl-border); }
.toc li { counter-increment: toc; }
.toc a { display: block; padding: 0.3rem 0 0.3rem var(--cvl-space-4); font-family: var(--cvl-mono); font-size: 0.8125rem; text-decoration: none; color: var(--cvl-ink-dim); margin-left: -1px; border-left: var(--cvl-master-rule) solid transparent; }
.toc a::before { content: counter(toc, decimal-leading-zero) "  "; color: var(--cvl-muted); white-space: pre; }
.toc a:hover { color: var(--cvl-ink); border-left-color: var(--cvl-lime); }

.prose > section { padding-bottom: var(--cvl-space-8); scroll-margin-top: calc(var(--org-header-h) + var(--cvl-space-5)); }
.prose > section + section { padding-top: var(--cvl-space-2); }
.prose h2 { font-size: 1.5rem; margin-bottom: var(--cvl-space-4); display: flex; gap: var(--cvl-space-3); align-items: baseline; }
.prose h2 .n { font-family: var(--cvl-mono); font-size: 0.875rem; color: var(--cvl-lime); font-weight: 500; }
.prose p + p, .prose p + ul, .prose ul + p, .prose dl + p { margin-top: var(--cvl-space-4); }
.prose ul { margin: var(--cvl-space-4) 0 0; padding-left: 1.25rem; }
.prose li + li { margin-top: var(--cvl-space-2); }
.prose li::marker { color: var(--cvl-muted); }
.prose strong { color: var(--cvl-ink); font-weight: 600; }
.defs { margin: 0; }
.defs div { padding: var(--cvl-space-3) 0; border-top: var(--cvl-master-rule) solid var(--cvl-border); display: grid; grid-template-columns: 10rem 1fr; gap: var(--cvl-space-4); }
.defs dt { font-family: var(--cvl-mono); font-size: 0.875rem; color: var(--cvl-ink); }
.defs dd { margin: 0; font-size: 0.9375rem; }

.table-scroll { overflow-x: auto; border: var(--cvl-master-rule) solid var(--cvl-border); }
table.gates { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 34rem; }
.gates caption { text-align: left; padding: var(--cvl-space-3) var(--cvl-space-4); font-family: var(--cvl-mono); font-size: 0.75rem; color: var(--cvl-muted); border-bottom: var(--cvl-master-rule) solid var(--cvl-border); }
.gates th, .gates td { text-align: left; vertical-align: top; padding: var(--cvl-space-3) var(--cvl-space-4); border-bottom: var(--cvl-master-rule) solid var(--cvl-border); }
.gates thead th { font-family: var(--cvl-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--cvl-tracking-label); text-transform: uppercase; color: var(--cvl-muted); background: var(--cvl-surface); }
.gates tbody th { font-family: var(--cvl-mono); font-weight: 500; color: var(--cvl-ink); white-space: nowrap; }
.gates tbody tr:last-child > * { border-bottom: 0; }

.changelog { list-style: none; margin: 0; padding: 0; }
.changelog li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--cvl-space-4); padding: var(--cvl-space-3) 0; border-top: var(--cvl-master-rule) solid var(--cvl-border); }
.changelog time, .changelog .v { font-family: var(--cvl-mono); font-size: 0.8125rem; color: var(--cvl-ink); }
.empty { font-family: var(--cvl-mono); font-size: 0.8125rem; color: var(--cvl-muted); border: var(--cvl-master-rule) dashed var(--cvl-border-control); padding: var(--cvl-space-4); }

/* ---------- index pages (phase 1) ---------- */
.section--last { border-bottom: 0; }
.measure { max-width: var(--cvl-content-measure); }
.note { margin-top: var(--cvl-space-5); font-size: 0.9375rem; }
.doc-list { list-style: none; margin: 0; padding: 0; border-top: var(--cvl-master-rule) solid var(--cvl-border); }
.doc-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cvl-space-4) var(--cvl-space-8); padding: var(--cvl-space-6) 0; border-bottom: var(--cvl-master-rule) solid var(--cvl-border); }
.doc-list h3 { font-size: 1.25rem; }
.doc-list h3 a { text-decoration: none; }
.doc-list h3 a::after { content: " \2192"; color: var(--cvl-muted); }
.doc-list h3 a:hover::after { color: var(--cvl-lime); }
.doc-list p { margin-top: var(--cvl-space-2); max-width: var(--cvl-content-measure); font-size: 0.9375rem; }
.doc-list dl { margin: 0; display: grid; grid-template-columns: repeat(3, auto); gap: var(--cvl-space-2) var(--cvl-space-6); align-self: start; }
.doc-list dt { font-family: var(--cvl-mono); font-size: 0.6875rem; letter-spacing: var(--cvl-tracking-label); text-transform: uppercase; color: var(--cvl-muted); }
.doc-list dd { margin: 0.125rem 0 0; font-family: var(--cvl-mono); font-size: 0.875rem; color: var(--cvl-ink); }
.chapters { padding-top: var(--cvl-space-6); }
.chapters ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--cvl-space-3); }
.chapters a { display: inline-flex; gap: var(--cvl-space-2); align-items: baseline; font-family: var(--cvl-mono); font-size: 0.8125rem; text-decoration: none; color: var(--cvl-ink); border: var(--cvl-master-rule) solid var(--cvl-border-control); padding: var(--cvl-space-2) var(--cvl-space-4); }
.chapters a:hover { border-color: var(--cvl-lime); }
.chapters .n { color: var(--cvl-lime); }
.doc-layout--single { grid-template-columns: minmax(0, var(--cvl-content-measure)); }
.doc-head--last { border-bottom: 0; padding-bottom: var(--cvl-space-10); }
.link-list { list-style: none; margin: var(--cvl-space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--cvl-space-3) var(--cvl-space-6); font-family: var(--cvl-mono); font-size: 0.875rem; }
@media (max-width: 760px) {
  .doc-list > li { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- footer ---------- */
.site-footer { border-top: var(--cvl-master-rule) solid var(--cvl-border); background: var(--cvl-bg); padding: var(--cvl-space-9) 0 var(--cvl-space-7); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--cvl-space-6); }
.foot-grid h2 { font-family: var(--cvl-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--cvl-tracking-label); text-transform: uppercase; color: var(--cvl-muted); margin-bottom: var(--cvl-space-3); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li + li { margin-top: var(--cvl-space-2); }
.foot-grid a { font-size: 0.875rem; color: var(--cvl-ink-dim); text-decoration: none; }
.foot-grid a:hover { color: var(--cvl-ink); text-decoration: underline; }
.entity { margin-top: var(--cvl-space-8); padding-top: var(--cvl-space-5); border-top: var(--cvl-master-rule) solid var(--cvl-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cvl-space-3); font-family: var(--cvl-mono); font-size: 0.75rem; color: var(--cvl-muted); }
.entity p:first-child { color: var(--cvl-ink-dim); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--cvl-space-6); }
  .toc { position: static; border: var(--cvl-master-rule) solid var(--cvl-border); background: var(--cvl-surface); padding: var(--cvl-space-4); }
}
@media (max-width: 760px) {
  .site-header .wrap { flex-wrap: wrap; gap: 0; }
  .js .nav-toggle {
    display: inline-flex; margin-left: auto; align-items: center; min-height: 2.75rem;
    background: transparent; color: var(--cvl-ink); border: var(--cvl-master-rule) solid var(--cvl-border-control);
    border-radius: var(--cvl-radius); font-family: var(--cvl-mono); font-size: 0.8125rem; letter-spacing: var(--cvl-tracking-nav);
    text-transform: uppercase; padding: 0 var(--cvl-space-4); cursor: pointer;
  }
  .site-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--cvl-space-4); }
  .js .site-nav:not(.is-open) { display: none; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: var(--cvl-space-3) 0; border-bottom: var(--cvl-master-rule) solid var(--cvl-border); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--cvl-border); box-shadow: inset 2px 0 0 var(--cvl-lime); padding-left: var(--cvl-space-3); }
  .site-nav .out { margin-left: 0; }
  .hero { padding: var(--cvl-space-8) 0 var(--cvl-space-8); }
  .section { padding: var(--cvl-space-8) 0; }
  .defs div { grid-template-columns: 1fr; gap: var(--cvl-space-2); }
  /* gate table stacks as label/value blocks; no sideways scroll on phones */
  table.gates { min-width: 0; }
  .gates thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .gates tbody tr { display: block; padding: var(--cvl-space-3) var(--cvl-space-4); border-bottom: var(--cvl-master-rule) solid var(--cvl-border); }
  .gates tbody tr:last-child { border-bottom: 0; }
  .gates tbody th, .gates tbody td { display: block; padding: var(--cvl-space-2) 0; border-bottom: 0; white-space: normal; }
  .gates td::before { content: attr(data-label); display: block; font-family: var(--cvl-mono); font-size: 0.6875rem; letter-spacing: var(--cvl-tracking-label); text-transform: uppercase; color: var(--cvl-muted); }
  .changelog li { grid-template-columns: 1fr; gap: var(--cvl-space-2); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* muted text on panels (--cvl-surface): cvl-muted measures 4.49:1 there, below AA */
.card .label, .card .meta, .card h3 a::after, .draft-bar, .gates thead th, .gates caption, .toc h2, .toc a::before { color: var(--org-muted-panel); }
