/* THE LEGAL PAGES (2026-10-08): Privacy, Terms, Licensing and attribution, Accessibility, and the
   Using this material index (render/legal.ts, render/using.ts).

   Concept: a reference document you can find your way through. The one move is the contents column,
   sticky beside the text on a wide screen and a plain list above it on a phone. The summary carries the
   only accent, a lilac rule, because it is the one block that is not the text itself. Everything else is
   the site's own type scale and 1px rules. No cards, no icons, no accordions hiding the words. */

.legal { max-width: 64rem; padding-block: var(--s6) var(--s9); }
.legal__head .lead { margin-top: var(--s4); }

.legal__short { margin: var(--s7) 0 0; padding: var(--s1) 0 var(--s1) var(--s5); border-left: 2px solid var(--brand); max-width: 44rem; }
.legal__short h2 { margin: 0; font: 600 var(--t-md)/var(--lh-tight) var(--display); color: var(--ink); }
.legal__shortnote { margin: var(--s1) 0 var(--s3); font: var(--t-sm)/var(--lh-meta) var(--ui); color: var(--ink-2); }
.legal__short ul { margin: 0; padding: 0 0 0 1.1em; }
.legal__short li { margin: 0; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink); }
.legal__short li + li { margin-top: var(--s2); }

.legal__body { margin-top: var(--s8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.legal__toc { padding-bottom: var(--s5); border-bottom: 1px solid var(--rule); }
.legal__toch { margin: 0 0 var(--s3); font: 500 var(--t-sm)/1.2 var(--ui); color: var(--ink-2); }
.legal__toc ol { list-style: none; margin: 0; padding: 0; }
.legal__toc li + li { margin-top: var(--s1); }
.legal__toc a { display: inline-block; padding-block: 2px; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); text-decoration: none; }
.legal__toc a:hover { color: var(--ink); text-decoration: underline; }

.legal__text { min-width: 0; max-width: 42rem; }
.legal__sec { scroll-margin-top: var(--s6); }
/* Below 60rem the site navigation is a sticky bar (rail.css: .rail__top 3.5rem + its 1px rule), so a jump
   to a section clears the bar, then keeps the same --s6 gap. Found on Privacy in the 2026-10-11 rehearsal. */
@media (max-width: 60rem) { .legal__sec { scroll-margin-top: calc(3.5rem + 1px + var(--s6)); } }
.legal__sec + .legal__sec { margin-top: var(--s7); }
.legal__sec h2 { margin: 0 0 var(--s4); font: 600 var(--t-lg)/var(--lh-tight) var(--display); color: var(--ink); }
.legal__sec h3 { margin: var(--s6) 0 var(--s3); font: 600 var(--t-md)/var(--lh-tight) var(--display); color: var(--ink); }
.legal__sec p { margin: 0 0 var(--s4); max-width: none; }
.legal__sec p:last-child { margin-bottom: 0; }
.legal__sec code { font: 0.92em var(--mono); overflow-wrap: anywhere; }
.legal__list { margin: 0; padding: 0 0 0 1.4em; }
.legal__list li { padding-left: var(--s1); font-family: var(--ui); }
.legal__list li + li { margin-top: var(--s3); }
.legal__text > .sub { margin-top: var(--s7); }
.legal__others { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--rule); font: var(--t-sm)/var(--lh-meta) var(--ui); color: var(--ink-2); }

@media (min-width: 64rem) {
  .legal__body { grid-template-columns: 12rem minmax(0, 42rem); gap: var(--s8); align-items: start; }
  .legal__toc { position: sticky; top: var(--s6); padding: 0; border: 0; }
}

/* The Using this material index: four rows, the page names large enough to be the whole page. */
.legal__index { list-style: none; margin: var(--s7) 0 0; padding: 0; max-width: 44rem; }
.legal__index li { padding: var(--s5) 0; border-top: 1px solid var(--rule); }
.legal__index li:last-child { border-bottom: 1px solid var(--rule); }
.legal__index a { font: 600 var(--t-lg)/var(--lh-tight) var(--display); color: var(--ink); text-decoration: none; }
.legal__index a:hover { color: var(--brand); text-decoration: underline; }
.legal__index p { margin: var(--s2) 0 0; color: var(--ink-2); }

/* DEVELOPERS (2026-10-08). Lead with the file: each export is a line on what it is for, its address in mono,
   two plain actions, and a real excerpt. One diagram, drawn in the same 1px rules, above them all. */
.dev { max-width: 46rem; }
.dev__sec { padding-top: var(--s7); scroll-margin-top: var(--s6); }
.dev__sec h2 { margin: 0 0 var(--s3); font: 600 var(--t-lg)/var(--lh-tight) var(--display); color: var(--ink); }
.dev__lede { font-size: var(--t-md); line-height: var(--lh-body); color: var(--ink); margin: 0 0 var(--s4); }
.dev__sec p { margin: 0 0 var(--s4); color: var(--ink-2); }
.dev__sec code, .dev__map code { font: 0.9em var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.dev__file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding: var(--s3) 0; border-block: 1px solid var(--rule); }
.dev__url { font: var(--t-sm)/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.dev__size { font: var(--t-xs)/1 var(--ui); color: var(--ink-2); }
.dev__acts { display: inline-flex; gap: var(--s2); margin-inline-start: auto; }
.dev__btn { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s3); border: 1px solid var(--rule-firm); background: none; color: var(--ink); font: 500 var(--t-sm)/1 var(--ui); text-decoration: none; cursor: pointer; }
.dev__btn:hover { border-color: var(--brand); color: var(--brand); }
.dev__btn[disabled] { opacity: .6; cursor: progress; }
.dev__code { margin: var(--s4) 0 var(--s2); }
.dev__code figcaption { font: var(--t-xs)/1.4 var(--ui); color: var(--ink-2); margin-bottom: var(--s2); }
.dev__code pre { margin: 0; padding: var(--s4); max-height: 26rem; overflow: auto; background: var(--paper-deep); border: 1px solid var(--rule); font: var(--t-xs)/1.6 var(--mono); color: var(--ink); white-space: pre; }
.dev__code pre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dev__note, .dev__also { font-size: var(--t-sm); }
.dev__dl { margin: 0; }
.dev__dl dt { font: var(--t-sm)/1.4 var(--mono); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.dev__dl dd { margin: var(--s1) 0 var(--s3); color: var(--ink-2); }
.dev__status { min-height: 1.5em; margin-top: var(--s5); font-size: var(--t-sm); color: var(--ink-2); }

.dev__map { margin: var(--s6) 0 0; max-width: 46rem; display: grid; gap: 0; }
.dev__node { display: grid; gap: 2px; padding: var(--s3) var(--s4); border: 1px solid var(--rule-firm); }
.dev__node b { font: 600 var(--t-base)/1.3 var(--display); color: var(--ink); }
.dev__node span { font: var(--t-xs)/1.4 var(--ui); color: var(--ink-2); }
.dev__node--src { justify-self: center; text-align: center; min-width: 16rem; }
.dev__node--on { border-color: var(--brand); }
.dev__arrows { display: grid; grid-template-columns: repeat(3, 1fr); height: var(--s5); }
.dev__arrows span { justify-self: center; width: 1px; background: var(--rule-firm); }
.dev__outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.dev__map figcaption { margin-top: var(--s3); font: var(--t-sm)/var(--lh-meta) var(--ui); color: var(--ink-2); }
@media (max-width: 40rem) {
  .dev__arrows { grid-template-columns: 1fr; height: var(--s4); }
  .dev__arrows span + span { display: none; }
  .dev__outs { grid-template-columns: 1fr; gap: var(--s2); }
  .dev__node--src { justify-self: stretch; }
  .dev__acts { margin-inline-start: 0; flex-basis: 100%; }
}

/* CONTRIBUTE (2026-10-08). An invitation with honest mechanics: a ruled list where the left side is what you
   would do and how, and the right side is what happens to it. No avatars, no seats, no tiles. */
.contrib { list-style: none; margin: var(--s7) 0 0; padding: 0; max-width: 64rem; }
.contrib__path { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3) var(--s7); padding: var(--s5) 0; border-top: 1px solid var(--rule); scroll-margin-top: var(--s6); }
.contrib__path:last-child { border-bottom: 1px solid var(--rule); }
.contrib__main h2 { margin: 0 0 var(--s2); font: 600 var(--t-md)/var(--lh-tight) var(--display); color: var(--ink); }
.contrib__path:first-child .contrib__main h2 { font-size: var(--t-lg); }
.contrib__main p { margin: 0 0 var(--s3); color: var(--ink-2); max-width: 36rem; }
.contrib__acts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; }
.contrib__how { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--ink-2); color: var(--ink); font: 500 var(--t-sm)/1.2 var(--ui); text-decoration: none; }
.contrib__how:hover { border-color: var(--brand); color: var(--brand); }
.contrib__how--quiet { border-color: transparent; padding-inline: 0; text-decoration: underline; text-underline-offset: 3px; }
.contrib__then h3 { margin: 0 0 var(--s1); font: 500 var(--t-sm)/1.3 var(--ui); color: var(--ink-2); }
.contrib__then p { margin: 0; font-size: var(--t-sm); line-height: var(--lh-meta); color: var(--ink); }
.contrib__people { margin-top: var(--s8); }
@media (min-width: 52rem) {
  .contrib__path { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .contrib__then { padding-left: var(--s5); border-left: 1px solid var(--rule); }
}