/* The legal documents (tools/legal.mjs): long text set for reading.
   Only the tokens from base.css, which already carries light and dark; no
   sticky parts, one column of text about 70 characters wide, tables allowed
   the width the column leaves, and on a phone each table row becomes a card
   with its column names. Hebrew needs nothing of its own: every rule is
   logical (start, end, inline), so it mirrors. */

.legal { --measure: 38rem; }

/* ---- Head: title, effective date, version, the archive ------------------ */
.legal-head { max-width: var(--measure); display: grid; gap: .9rem; margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }
.legal-head h1 { font-size: var(--step-4); overflow-wrap: break-word; }
.legal-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.5rem; font-size: .95rem; color: var(--ink-2); }
.legal-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin: 0; }
.legal-meta div { display: flex; flex-wrap: wrap; gap: .1rem .4rem; }
.legal-meta dt { font-weight: 700; color: var(--ink-2); }
.legal-meta dd { margin: 0; color: var(--ink); }
.legal-past a { color: var(--brand); font-weight: 600; text-underline-offset: 3px; }
.legal-old { padding: .9rem 1.1rem; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); }
.legal-stub { max-width: var(--measure); color: var(--ink-2); }

/* ---- On this page -------------------------------------------------------- */
.legal-toc {
  max-width: var(--measure); margin-bottom: clamp(2rem, 5vw, 3rem);
  padding: 1.05rem 1.3rem 1.15rem; border-radius: var(--r-card);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.legal-toc .legal-toc-h, [dir="rtl"] .legal-toc .legal-toc-h {
  font-family: var(--f-body); font-size: .8rem; font-weight: 700; line-height: 1.3;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem;
}
[dir="rtl"] .legal-toc .legal-toc-h { letter-spacing: 0; font-size: .9rem; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; }
.legal-toc li { break-inside: avoid; }
.legal-toc a { display: block; padding: .28rem 0; color: var(--ink-2); font-weight: 600; font-size: .95rem; line-height: 1.4; text-decoration: none; }
.legal-toc a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 52em) { .legal-toc ol.two { columns: 2; column-gap: 2.25rem; } }
/* After the short version (tools/legal.mjs docBody): the text goes on below
   the contents with the gap the short version keeps from the next section. */
.legal-body + .legal-toc { margin-top: clamp(2rem, 5vw, 3rem); }
.legal-toc + .legal-rest > .legal-sec:first-child { padding-top: 0; }

/* ---- The text ------------------------------------------------------------- */
.legal-body { max-width: var(--measure); color: var(--ink); line-height: 1.7; overflow-wrap: break-word; }
.legal-body p + p, .legal-body p + ul, .legal-body p + ol, .legal-body ul + p, .legal-body ol + p { margin-top: 1em; }
.legal-sec { padding-top: clamp(1.75rem, 4.5vw, 2.5rem); }
.legal-intro > * + * { margin-top: 1em; }
.legal h2, [dir="rtl"] .legal h2 { font-size: var(--step-3); line-height: 1.15; margin-bottom: .9rem; overflow-wrap: break-word; }
.legal-body h3 { font-size: var(--step-1); font-weight: 600; line-height: 1.3; margin: 1.8rem 0 .6rem; }
.legal-body ul, .legal-body ol { margin: .8em 0; padding-inline-start: 1.3em; display: grid; gap: .5em; }
.legal-body li > ul, .legal-body li > ol { margin: .5em 0 .2em; }
.legal-body li::marker { color: var(--brand); }
.legal-body strong { font-weight: 700; color: var(--ink); }
.legal-body a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-body a:hover { text-decoration-thickness: 2px; }
/* html already keeps 80px clear of the sticky header (guide.css); adding
   guide.css's 84px on top left a jump from the contents with the heading
   halfway down a phone. */
.legal :target { scroll-margin-top: .75rem; }

/* /cancel/: the notice of section 9 as a ready email (tools/legal.mjs
   cancelSend). The site's own pill, keeping the pill's colours over the
   text's link colour, and allowed to wrap on a narrow phone. */
.legal-body p.legal-send { margin-top: 1.5rem; }
.legal-body a.legal-send-btn { color: var(--on-brand); text-decoration: none; white-space: normal; text-align: center; }
.legal-body p.legal-send-note { margin-top: .75rem; color: var(--ink-2); font-size: .95rem; }
.legal-send-wait { font-weight: 700; color: var(--ink-2); }

/* The short version: the whole document in a few lines, on the techelet tint. */
.legal-short { margin-top: .25rem; padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.15rem, 3.2vw, 1.6rem); border-radius: var(--r-card); background: var(--brand-tint); }
.legal-short h2, [dir="rtl"] .legal-short h2 { font-size: var(--step-2); }
.legal-intro + .legal-short { margin-top: 1.5rem; }
.legal-short + .legal-sec { padding-top: clamp(2rem, 5vw, 3rem); }

/* ---- Tables --------------------------------------------------------------- */
.legal-table { margin: 1.25rem 0; overflow-x: auto; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
/* Four columns or more may run wider than the text, up to the page's width,
   and scroll inside themselves before they squeeze a column. */
.legal-table.wide { width: min(calc(var(--cols) * 12rem), calc(100vw - 2 * var(--gutter)), calc(var(--max) - 2 * var(--gutter))); }
.legal-table table { border-collapse: collapse; width: 100%; font-size: .95rem; line-height: 1.55; }
.legal-table.wide table { min-width: calc(var(--cols) * 9rem); }
.legal-table th, .legal-table td { padding: .8rem 1rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-table thead th { font-size: .85rem; font-weight: 700; color: var(--ink-2); background: var(--inset); }
.legal-table tbody th { font-weight: 700; color: var(--ink); }
.legal-table tbody tr:last-child > * { border-bottom: 0; }
.legal-table td { color: var(--ink); }
.legal-short .legal-table { background: var(--surface); }

@media (max-width: 640px) {
  .legal-table, .legal-table.wide { overflow: visible; width: auto; background: transparent; box-shadow: none; border-radius: 0; }
  .legal-table table, .legal-table.wide table { min-width: 0; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .legal-table table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; }
  .legal-table tr { display: grid; gap: .6rem; margin-bottom: .75rem; padding: 1rem 1.1rem; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .legal-table tbody th, .legal-table td { padding: 0; border: 0; }
  .legal-table tbody th { font-size: 1.02rem; }
  .legal-table td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: .1rem; font-size: .8rem; font-weight: 700; color: var(--ink-3); }
}

@media print {
  .site-head, .guide-foot, .crumbs, .legal-toc { display: none; }
  .legal-body, .legal-head { max-width: none; }
  .legal-short { background: none; box-shadow: inset 0 0 0 1px #999; }
}