/* ============================================================================
   TIER long-document layout (tier-site#53)
   Used by the two GENERATED pages, whitepaper.html and technical-reference.html
   (build-whitepaper.sh writes the markup this file styles; never hand-edit the
   pages). Load order: tokens.css -> site.css -> doc.css.

   Layout, by width:
     >= 1100px  two zones in a centred frame: a sticky "Contents" rail on the
                left, and the document on the right. Text keeps a reading
                measure (--doc-measure) on one left edge shared by headings,
                tables and code; a table or code block wider than the measure
                widens rightwards into the rest of the zone, and only past that
                scrolls inside itself. The frame is sized so the text column
                sits near the middle of the window.
     < 1100px   one column, centred: title block, a "Contents" disclosure, then
                the text. The measure still holds; tables and code widen
                symmetrically and scroll inside themselves.
     print      no nav, no contents rail, serif body, URLs printed after links.

   JS (assets/doc.js) is an enhancement only: with it off the contents list is a
   plain, always-visible list of links. The collapsed contents and the two
   buttons (both written into the page by build-whitepaper.sh) key on
   @media (scripting: enabled), so they are in their final state at the first
   paint and doc.js loading moves nothing; the .js class doc.js adds is the
   same switch for browsers that do not know the scripting query.
   ========================================================================== */

.doc-page {
  /* Wider page frame for these two pages only, so the nav, the document and the
     footer share one left edge. */
  --maxw: 1240px;
  /* ~72 characters a line of the 17px sans body (measured in Chrome with the
     macOS system font: 40rem gave ~84). */
  --doc-measure: 36rem;
  --doc-rail: 260px;
  --doc-rail-gap: 72px;
  --doc-nav-h: 62px;
}

.doc-section { padding: 56px 0 96px; }

/* ---- the two-zone grid ---------------------------------------------------
   DOM order is title block, contents, text, source note: the order a reader
   (and a keyboard or screen reader) meets them on every width. On the wide
   layout the contents move into the left column and span all three rows, so
   the rail is sticky for the whole document and stops before the footer. */
.doc-layout { display: block; }
.doc-head, .doc-content, .doc-foot { min-width: 0; }
@media (min-width: 1100px) {
  .doc-layout {
    display: grid;
    grid-template-columns: var(--doc-rail) minmax(0, 1fr);
    column-gap: var(--doc-rail-gap);
  }
  .doc-toc { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .doc-head, .doc-content, .doc-foot { grid-column: 2; }
}

/* ---- every block keeps the reading measure ---------------------------------
   Centred in the single column; on the one left edge in the wide layout. */
.doc-head > *, .doc-content > *, .doc-foot > * {
  max-width: var(--doc-measure); margin-left: auto; margin-right: auto;
}
@media (min-width: 1100px) {
  .doc-head > *, .doc-content > *, .doc-foot > * { margin-left: 0; margin-right: 0; }
}

/* ---- title block --------------------------------------------------------- */
.doc-head { padding-bottom: 8px; }
.doc-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.06; margin-top: .1rem; margin-bottom: .9rem; }
/* The document's first h2 is its subtitle, not a section. */
.doc-head h2 {
  font-size: clamp(1.18rem, 2.2vw, 1.42rem); line-height: 1.35; font-weight: 500;
  color: var(--fg-soft); margin-top: 0; margin-bottom: 1.6rem; letter-spacing: 0;
}
.draft-banner {
  display: block; width: fit-content; margin-top: 0; margin-bottom: 1.4rem; padding: .35rem .8rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--burn); border: 1px solid var(--burn); border-radius: var(--r);
}
/* The banner is narrower than the measure: in the centred column it starts
   where the text does. */
@media (max-width: 1099px) {
  .doc-head > .draft-banner { margin-left: max(0px, calc((100% - var(--doc-measure)) / 2)); }
}

/* The metadata line under the title: version, date, subject, companion, and
   (with scripting on) a print button. It spans the whole document zone, as the
   wide tables do, so the four facts and the button stay on one line. */
@media (min-width: 1100px) { .doc-head > .doc-meta { max-width: none; } }
.doc-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
  padding: 14px 0; margin-bottom: 8px;
}
.doc-meta dl { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0; flex: 1 1 auto; }
.doc-meta dl > div { min-width: 0; }
.doc-meta dt {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-mute); margin: 0 0 2px;
}
.doc-meta dd { margin: 0; font-size: .92rem; color: var(--fg); font-variant-numeric: tabular-nums; }
.doc-print {
  font: 500 .84rem/1 var(--sans); color: var(--fg); background: transparent; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r); padding: .55rem .85rem;
  display: none; align-items: center; gap: .45rem;
}
/* Shown only where a script can operate it. */
@media (scripting: enabled) { .doc-print { display: inline-flex; } }
.doc-print.js { display: inline-flex; }
.doc-print:hover { border-color: var(--yield-deep); }
.doc-print svg { width: 15px; height: 15px; }

/* ---- the contents rail / disclosure --------------------------------------- */
.doc-toc { font-size: .88rem; line-height: 1.4; min-width: 0; }
.doc-toc-title, .doc-toc-toggle {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-mute); margin: 0 0 12px;
}
.doc-toc ol { list-style: none; margin: 0; padding: 0; }
.doc-toc li { margin: 0; }
.doc-page .doc-toc a:not(.btn) {
  display: flex; gap: .5em; padding: 5px 10px 5px 14px; margin-left: -1px;
  color: var(--fg-soft); text-decoration: none; border-left: 2px solid transparent;
  border-radius: 0 var(--r) var(--r) 0;
}
.doc-page .doc-toc a:not(.btn):hover { color: var(--fg); background: var(--yield-soft); }
.doc-page .doc-toc a[aria-current]:not(.btn) { color: var(--fg); border-left-color: var(--yield); font-weight: 600; }
.doc-toc .toc-n { flex: none; min-width: 1.9em; font-family: var(--mono); font-size: .9em; color: var(--fg-mute); font-weight: 400; }
.doc-toc .toc-l1 { border-left: 1px solid var(--line-strong); }
.doc-page .doc-toc .toc-l2 a:not(.btn) { padding-left: 30px; font-size: .94em; color: var(--fg-mute); }
.doc-page .doc-toc .toc-l2 a:not(.btn):hover { color: var(--fg); }
.doc-page .doc-toc .toc-l2 a[aria-current]:not(.btn) { color: var(--fg); }
.doc-toc .toc-l2 .toc-n { min-width: 2.4em; }
.doc-toc code { font-family: var(--mono); font-size: .9em; }
.doc-toc-toggle { display: none; }

@media (min-width: 1100px) {
  .doc-toc {
    position: sticky; top: calc(var(--doc-nav-h) + 28px);
    max-height: calc(100vh - var(--doc-nav-h) - 56px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    padding: 4px 6px 12px 0;
  }
  /* With JS on, a section's subsections show only while it is current. */
  .doc-toc.js .toc-l1 > li:not(.is-open) > .toc-l2 { display: none; }
}
@media (min-width: 1100px) and (scripting: enabled) {
  .doc-toc .toc-l1 > li:not(.is-open) > .toc-l2 { display: none; }
}

@media (max-width: 1099px) {
  .doc-toc {
    max-width: var(--doc-measure); margin: 28px auto 36px;
    border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel);
    padding: 16px 18px;
  }
  .doc-toc.js { padding: 0; }
  .doc-toc.js .doc-toc-title { display: none; }
  .doc-toc.js .doc-toc-toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    margin: 0; padding: 15px 18px; min-height: 48px; cursor: pointer;
    background: transparent; border: 0; border-radius: 8px; color: var(--fg);
  }
  .doc-toc-toggle .chev {
    width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform .18s ease;
  }
  .doc-toc.open .doc-toc-toggle .chev { transform: translateY(2px) rotate(-135deg); }
  .doc-toc.js .toc-l1 { display: none; margin: 0 18px 16px; }
  .doc-toc.js.open .toc-l1 { display: block; }
  .doc-page .doc-toc a:not(.btn) { padding-top: 8px; padding-bottom: 8px; }
}
/* The same collapsed disclosure from the first paint, keyed on the media query
   rather than the class doc.js adds after it (the .js rules above stay as the
   fallback for browsers without the scripting query). */
@media (max-width: 1099px) and (scripting: enabled) {
  .doc-toc { padding: 0; }
  .doc-toc .doc-toc-title { display: none; }
  .doc-toc .doc-toc-toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    margin: 0; padding: 15px 18px; min-height: 48px; cursor: pointer;
    background: transparent; border: 0; border-radius: 8px; color: var(--fg);
  }
  .doc-toc .toc-l1 { display: none; margin: 0 18px 16px; }
  .doc-toc.open .toc-l1 { display: block; }
}
@media (prefers-reduced-motion: reduce) { .doc-toc-toggle .chev { transition: none; } }

/* ---- document body --------------------------------------------------------- */
.doc-content h2, .doc-content h3 { scroll-margin-top: calc(var(--doc-nav-h) + 20px); }
.doc-content h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.14; margin-top: 2.6rem; margin-bottom: .6rem; }
.doc-content h3 { font-size: 1.26rem; line-height: 1.25; margin-top: 2.1rem; margin-bottom: .5rem; }
.doc-content hr + h2 { margin-top: 0; }
.doc-content p, .doc-content li { color: var(--fg-soft); font-size: 1.0625rem; line-height: 1.7; overflow-wrap: break-word; }
.doc-content p { margin-top: 0; margin-bottom: 1.05em; }
.doc-content li { margin: .4rem 0; }
.doc-content li > p { margin-bottom: .5em; }
.doc-content ul, .doc-content ol { padding-left: 1.35rem; margin-top: 0; margin-bottom: 1.1em; }
.doc-content strong { color: var(--fg); font-weight: 600; }
.doc-content em { color: var(--fg); font-style: italic; }
.doc-content hr { border: none; border-top: 1px solid var(--line); margin-top: 2.8rem; margin-bottom: 2.6rem; }
.doc-content code {
  font-family: var(--mono); font-size: .86em; color: var(--fg);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: .1em .4em;
}
.doc-content p code, .doc-content li code { overflow-wrap: anywhere; }
/* A table scrolls inside itself, so an identifier in a cell stays whole
   instead of breaking mid-name ("merge_com" / "mit_sha"). */
.doc-content td code, .doc-content th code { white-space: nowrap; overflow-wrap: normal; }
.doc-content blockquote { padding: .2em 1.1em; color: var(--fg-mute); border-left: 3px solid var(--line-strong); margin-top: 1.3rem; margin-bottom: 1.3rem; }

/* Wide blocks. At least the reading measure (so a narrow one lines up with the
   text's left edge); a longer one widens into the whole document zone, and only
   past that scrolls inside itself. The page never scrolls sideways. */
.doc-content > pre, .doc-content > table {
  max-width: 100%; min-width: min(100%, var(--doc-measure));
}
.doc-content pre {
  width: max-content; background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 14px 18px; overflow-x: auto; margin-top: 1.3rem; margin-bottom: 1.4rem;
}
.doc-content pre code { background: none; border: none; padding: 0; font-size: .86rem; line-height: 1.6; color: var(--fg-soft); white-space: pre; }
.doc-content table {
  border-collapse: collapse; display: block; overflow-x: auto; width: fit-content;
  font-variant-numeric: tabular-nums;
  font-size: .9rem; margin-top: 1.6rem; margin-bottom: 1.8rem;
}
.doc-content th, .doc-content td { border: 1px solid var(--line); padding: 9px 14px; text-align: left; vertical-align: top; line-height: 1.5; }
.doc-content th { background: var(--panel); color: var(--fg-mute); font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.doc-content td { color: var(--fg-soft); }
.doc-content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--panel) 55%, transparent); }
/* Phones: a smaller face and tighter cells give each column more characters a
   line; a table still too wide scrolls inside itself. */
@media (max-width: 600px) {
  .doc-content table { font-size: .8rem; }
  .doc-content th, .doc-content td { padding: 6px 9px; }
  /* Stacked cards. A table whose cells carry data-label (build-whitepaper.sh
     adds one per cell, from its column header) sets each row as a card and
     each cell as a labelled line, so a prose column keeps the full width
     instead of one or two words a line. The header row is hidden visually
     but stays in the accessibility tree. */
  .doc-content table:has(td[data-label]) {
    display: block; width: auto; min-width: 0; overflow: visible;
    border: 0; font-size: .95rem;
  }
  .doc-content table:has(td[data-label]) thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .doc-content table:has(td[data-label]) tbody { display: block; }
  .doc-content table:has(td[data-label]) tr {
    display: block; margin: 0 0 12px; padding: 2px 16px;
    background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px;
  }
  .doc-content table:has(td[data-label]) td {
    display: block; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line);
    background: none; overflow-wrap: break-word;
  }
  .doc-content table:has(td[data-label]) td:last-child { border-bottom: 0; }
  .doc-content table:has(td[data-label]) td:first-child { color: var(--fg); font-weight: 600; }
  .doc-content table:has(td[data-label]) td::before {
    content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: 3px;
    font-family: var(--mono); font-size: .66rem; font-weight: 400; letter-spacing: .08em;
    text-transform: uppercase; color: var(--fg-mute);
  }
  .doc-content table:has(td[data-label]) td code { white-space: normal; overflow-wrap: anywhere; font-weight: 400; }
  .doc-section { padding-top: 36px; }
  .doc-meta dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
}

.doc-foot { margin-top: 3rem; }
.doc-foot hr { border: none; border-top: 1px solid var(--line); margin-top: 0; margin-bottom: 1.2rem; }
.doc-source { font-size: .9rem; color: var(--fg-mute); }

/* ---- print ------------------------------------------------------------------
   A white paper gets printed: black on white, serif body, no site chrome, and
   every link's destination written out after it. */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --ink: #fff; --ink-panel: #f4f4f2; --ink-raised: #fff;
    --line: #c8c8c8; --line-strong: #999;
    --fg: #000; --fg-soft: #111; --fg-mute: #444;
    --yield: #000; --yield-deep: #000; --burn: #7a3d0a;
  }
  @page { margin: 18mm 17mm 20mm; }
  html { scroll-behavior: auto; }
  body { background: #fff; color: #000; font-family: var(--serif); font-size: 10.5pt; line-height: 1.5; }
  header.nav, footer, .doc-toc, .doc-print { display: none !important; }
  .doc-section { padding: 0; border: 0; }
  .wrap { max-width: none; padding: 0; }
  .doc-layout { display: block; }
  .doc-head > *, .doc-content > *, .doc-foot > * { max-width: none; }
  .doc-head > .draft-banner { margin-left: 0; }
  .doc-head h1 { font-size: 24pt; }
  .doc-head h2 { font-size: 13pt; }
  .doc-meta { break-after: avoid; }
  .doc-meta dl { gap: 8px 22px; }
  .doc-meta dd { font-size: 9.5pt; }
  .doc-content p, .doc-content li { font-size: 10.5pt; line-height: 1.5; color: #000; orphans: 3; widows: 3; }
  .doc-content h2 { font-size: 16pt; margin-top: 18pt; }
  .doc-content h3 { font-size: 12.5pt; margin-top: 12pt; }
  .doc-content h2, .doc-content h3 { break-after: avoid; page-break-after: avoid; break-inside: avoid; }
  .doc-content hr { margin: 14pt 0; }
  .doc-content pre, .doc-content blockquote, .doc-content tr { break-inside: avoid; page-break-inside: avoid; }
  .doc-content > pre, .doc-content > table { min-width: 0; }
  .doc-content pre { width: auto; max-width: 100%; margin-right: 2px; overflow: visible; white-space: pre-wrap; border-color: #999; }
  .doc-content pre code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 8.5pt; }
  .doc-content table { display: table; width: 100%; overflow: visible; font-size: 8pt; }
  .doc-content thead { display: table-header-group; }
  .doc-content td code, .doc-content th code { white-space: normal; overflow-wrap: anywhere; }
  .doc-content tbody tr:nth-child(even) td { background: none; }
  .doc-content code { border: 0; background: none; padding: 0; }
  a:not(.btn), :root[data-theme="dark"] a:not(.btn) { color: #000; text-decoration: underline; }
  .doc-content a[href^="http"]::after, .doc-foot a[href^="http"]::after {
    content: " (" attr(href) ")"; font-family: var(--mono); font-size: 7.5pt; overflow-wrap: anywhere;
  }
  .doc-content a[href^="/"]::after, .doc-meta a[href^="/"]::after, .doc-foot a[href^="/"]::after {
    content: " (https://tiermetric.org" attr(href) ")"; font-family: var(--mono); font-size: 7.5pt; overflow-wrap: anywhere;
  }
}