/* ================================================================ legal pages (/privacy, /terms, /notice)
   The landing page's voice for long text: a mono kicker and a heavy display title, the three documents as
   a quiet mono row, then the text in one readable column with a sticky contents list beside it (the
   landing's "How it works" band). Sections are separated by hairlines, not cards. Every size, corner and shadow is a diorama.css token
   (planning/website/DESIGN-SYSTEM.md): --text-*, --space-*, --radius, --shadow. */
.legal { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) var(--space-8); }

/* The top padding follows the screen height between two tokens (36 px on a 900 px screen); no single token renders the same. */
.legal-hero { padding: clamp(var(--space-4), 4vh, var(--space-7)) 0 var(--space-5); border-bottom: 1px solid var(--line); }
.legal-kicker, .legal-docs a, .legal-toc-title, .legal-toc li::before {
  font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
}
.legal-kicker { margin: 0; font-size: var(--text-xs); color: var(--accent-ink); }
.legal-title {
  margin-top: var(--space-3); font: 800 var(--text-2xl)/1.1 var(--font-display); letter-spacing: -.03em;
  text-wrap: balance;
}
.legal-meta { margin-top: var(--space-3); font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: .02em; color: var(--ink-3); }
.legal-lede { margin-top: var(--space-4); max-width: 38em; font-size: var(--text-lg); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* The three documents, in the caption row's voice: the current one is underlined in ink. */
.legal-docs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.legal-docs a { display: inline-block; padding: var(--space-1) 0; font-size: var(--text-xs); color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.legal-docs a:hover, .legal-docs a:focus-visible { color: var(--ink); border-color: var(--line-3); }
.legal-docs a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }

/* On a wide screen the title row uses the width (DESIGN-SYSTEM rule 9): the title sits in the contents column's
   width and everything after it (lede, date, the three documents) in the text column beside it, on the same lines as
   the contents list and the text below. The kicker stays above both. Floats, so any number of lines on the right fit. */
@media (min-width: 901px) {
  .legal-hero { display: flow-root; }
  .legal-title { float: left; clear: left; width: calc((100% - var(--space-8)) / 3); padding-right: var(--space-3); }
  .legal-title ~ * { margin-left: calc((100% - var(--space-8)) / 3 + var(--space-8)); }
  .legal-title + * { margin-top: var(--space-3); }
  /* The date line of a guide (title, date, then the lede) sits under the title, so a long lede keeps its ~80-character
     lines in the text column and the title column holds no empty block (rule 9). Pages whose date follows the lede
     (the notice) or that have no lede (privacy, terms) keep the date in the text column. */
  .legal-title + .legal-meta:has(+ .legal-lede) {
    float: left; clear: left; width: calc((100% - var(--space-8)) / 3); margin-left: 0; padding-right: var(--space-3);
  }
  .legal-title + .legal-meta + .legal-lede { margin-top: var(--space-3); }
  /* A page with no contents list (the guides index): its list fills the width in two columns. */
  .legal-grid > .legal-body:only-child { max-width: none; }
  .legal-grid > .legal-body:only-child .legal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
  /* A short contents list (three entries or fewer: the notice, /creators) would leave its sticky column empty for the
     whole page. It becomes one compact row above the text instead, and the text column (its usual ~80-character
     measure) is centred under the hero, so neither side holds a half-empty column. Four or more entries keep the
     sticky column. */
  .legal-grid:has(> .legal-toc):not(:has(.legal-toc li:nth-child(4))) {
    grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 68ch; margin-inline: auto;
  }
  .legal-fine .legal-grid:has(> .legal-toc):not(:has(.legal-toc li:nth-child(4))) { max-width: 72ch; }
  .legal-grid:has(> .legal-toc):not(:has(.legal-toc li:nth-child(4))) > .legal-toc {
    position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); padding-top: var(--space-5);
  }
  .legal-grid:has(> .legal-toc):not(:has(.legal-toc li:nth-child(4))) > .legal-toc .legal-toc-title { margin: 0; }
  .legal-grid:has(> .legal-toc):not(:has(.legal-toc li:nth-child(4))) > .legal-toc ol { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
}

/* Contents beside the text, like the landing's band head. A page with no contents list (the guides index) gives
   the text the full width instead of leaving the second column empty (DESIGN-SYSTEM rule 9). */
.legal-grid { display: grid; grid-template-columns: minmax(180px, 4fr) minmax(0, 8fr); gap: var(--space-8); align-items: start; }
.legal-grid > .legal-body:only-child { grid-column: 1 / -1; }
.legal-toc { position: sticky; top: var(--space-6); padding-top: var(--space-7); }
.legal-toc-title { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--ink-3); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 0; }
.legal-toc li { counter-increment: toc; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; }
.legal-toc li::before { content: counter(toc, decimal-leading-zero); font-size: var(--text-xs); color: var(--accent-ink); }
.legal-toc a { display: block; padding: var(--space-1) 0; font-size: var(--text-sm); line-height: 1.4; color: var(--ink-2); text-decoration: none; }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* The text: one column of about 68 characters. */
.legal-body { max-width: 68ch; min-width: 0; }
.legal-section { padding: var(--space-6) 0; border-top: 1px solid var(--line); scroll-margin-top: var(--space-4); }
.legal-section:first-child { border-top: 0; }
.legal-section h2 {
  margin: 0 0 var(--space-3); font: 700 var(--text-xl)/1.2 var(--font-display); letter-spacing: -.02em;
  text-wrap: balance;
}
.legal-section p, .legal-section li { font-size: var(--text-base); line-height: 1.7; color: var(--ink-2); overflow-wrap: anywhere; text-wrap: pretty; }
.legal-section p + p, .legal-section p + .legal-list, .legal-section .legal-list + p { margin-top: var(--space-3); }
.legal-section b { color: var(--ink); }
.legal-section a { color: var(--accent-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* Lists: a small block as the marker. */
.legal-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.legal-list li { position: relative; padding-left: var(--space-5); }
.legal-list li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 7px; height: 7px; border-radius: 1.5px; background: var(--accent); }

/* A short summary at the top of a document sits on paper of its own. */
.legal-summary { margin-top: var(--space-7); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.legal-summary + .legal-section { border-top: 0; }

/* Contact line at the end of the text. */
.legal-contact { margin-top: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--line); font-size: var(--text-sm); line-height: 1.6; color: var(--ink-3); }
.legal-contact a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Footer: the landing footer's links, without the console's theme swatches. */
.legal-foot { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) var(--space-6); }
.legal-foot-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; align-items: center; padding-top: var(--space-5); border-top: 1px solid var(--line); }
.legal-foot .small-print { margin: 0; }
.legal-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

@media (max-width: 900px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legal-toc { display: none; }
  .legal-lede { font-size: var(--text-base); margin-top: var(--space-3); }
  .legal-section { padding: var(--space-5) 0; }
  .legal-section h2 { font-size: var(--text-lg); }
  .legal-section p, .legal-section li { line-height: 1.65; }
  .legal-summary { margin-top: var(--space-5); padding: var(--space-5) var(--space-4); }
}

/* ================================================================ fine print (/privacy, /terms)
   Read like the legal pages of most sites: a plain-words summary on its own paper, then the full text at body size
   (--text-base; the guides, /creators and /how-is-shulkerboxes-free share this layout and are read as articles) with
   smaller section headings, numbered sections (1., 9.3) and no hairline between sections. The hosting notice keeps
   the larger one-page layout above. */
.legal-fine .legal-toc li { display: block; }
.legal-fine .legal-toc li::before { content: none; }
.legal-fine .legal-body { max-width: 72ch; }

.legal-fine .legal-summary h2 { margin: 0 0 var(--space-3); font: 700 var(--text-lg)/1.2 var(--font-display); letter-spacing: -.02em; }
.legal-fine .legal-summary li, .legal-fine .legal-summary p { font-size: var(--text-base); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.legal-fine .legal-summary a { color: var(--accent-ink); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-summary-note { margin: var(--space-4) 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-3); }

.legal-fine .legal-text { margin-top: var(--space-6); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.legal-fine .legal-section { padding: var(--space-5) 0 var(--space-2); border-top: 0; }
.legal-fine .legal-section h2 { margin: 0 0 var(--space-2); font: 600 var(--text-lg)/1.35 var(--font-body); letter-spacing: 0; color: var(--ink); }
.legal-fine .legal-section h3 { margin: var(--space-4) 0 var(--space-2); font: 600 var(--text-base)/1.4 var(--font-body); color: var(--ink); scroll-margin-top: var(--space-4); }
.legal-fine .legal-section p, .legal-fine .legal-section li { line-height: 1.65; }
.legal-fine .legal-section p + p, .legal-fine .legal-section p + .legal-list, .legal-fine .legal-section .legal-list + p { margin-top: var(--space-2); }
.legal-fine .legal-list { gap: var(--space-2); }
.legal-fine .legal-list li { padding-left: var(--space-4); }
.legal-fine .legal-list li::before { left: 1px; top: .68em; width: 5px; height: 5px; border-radius: 1px; background: var(--ink-3); }
.legal-num { margin-right: .3em; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink-3); }

@media (max-width: 900px) {
  .legal-fine .legal-text { margin-top: var(--space-5); }
}

/* ================================================================ guides (/guides/*)
   Same column as the legal text; numbered steps, comparison tables and inline code. */
.legal-steps { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.legal-table { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.legal-table table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
.legal-table tbody { display: grid; gap: var(--space-3); }
.legal-table table { border-collapse: collapse; font-size: var(--text-sm); line-height: 1.55; }
/* Comparison cards, not a grid: a row is one card, its first cell the name and every other cell a
   "column name / answer" line (the name from data-label, the same words as the column header). The header
   row stays for screen readers only, at every width; the old five-column grid wrapped full sentences into
   one-word columns (Keiden, website owner, 2026-10-07). */
.legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.legal-table tr { padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.legal-table td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-2) var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--line); color: var(--ink-2); text-align: left; vertical-align: top; }
.legal-table td::before { content: attr(data-label); color: var(--ink-3); font-weight: 500; }
.legal-table td:first-child { display: block; padding: 0 0 var(--space-2); border-top: 0; font: 700 var(--text-base)/1.3 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.legal-table td:first-child::before { content: none; }
.legal-table td a { color: var(--accent-ink); text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .legal-table tr { padding: var(--space-3) var(--space-4); }
  .legal-table td { grid-template-columns: 1fr; gap: 2px; }
}
.legal-section code { font: 500 .9em var(--font-mono); overflow-wrap: anywhere; }

/* ================================================================ short pages (/creators)
   Three short facts under the title, one primary button and its small print, then a short FAQ whose answers open on
   tap (so a short page keeps the recording facts off its first screen, DESIGN-SYSTEM rule 12, D-146). On a wide screen
   the facts and the FAQ sit in the hero's text column; on a phone everything stacks. */
.legal-facts { margin-top: var(--space-5); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.legal-facts li { padding-top: var(--space-3); border-top: 1px solid var(--line-2); font-size: var(--text-base); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.legal-ask { margin-top: var(--space-6); display: grid; justify-items: start; gap: var(--space-3); }
.legal-ask .small-print { margin: 0; max-width: 60ch; }
.legal-fine .legal-faq { border-top: 0; margin-top: 0; }
.legal-faq-item { border-top: 1px solid var(--line); }
.legal-faq-item:last-child { border-bottom: 1px solid var(--line); }
.legal-faq-item summary { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; cursor: pointer; list-style: none; font: 600 var(--text-base)/1.4 var(--font-body); color: var(--ink); }
.legal-faq-item summary::-webkit-details-marker { display: none; }
.legal-faq-item summary::after { content: "+"; color: var(--ink-3); }
.legal-faq-item[open] summary::after { content: "\2212"; }
.legal-faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.legal-fine .legal-faq-item p { padding-bottom: var(--space-3); }

@media (min-width: 901px) {
  .legal-faq { max-width: 72ch; margin-left: calc((100% - var(--space-8)) / 3 + var(--space-8)); }
}
@media (max-width: 720px) {
  .legal-facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .legal-ask { margin-top: var(--space-5); }
}