/* ============================================================
   rawcloser.com — Legal pages (Phase 7.G)

   Shared by the six generated documents: /privacy/, /terms/, /licenses/,
   /licenses/ffmpeg/, /cookies/ and /forms-privacy/.

   These pages are long-form reading, not marketing. The layout does one job:
   hold a comfortable measure and give the reader an unambiguous hierarchy of
   document → section → sub-section → paragraph / list / address. No reveal
   animation is applied to the body copy — a legal document that fades in
   paragraph by paragraph as you scroll is hostile to the person trying to read
   it, and to the person trying to Ctrl-F it. The FOOTER keeps its shared
   .reveal treatment, which is why landing.css is still linked.

   Consumes tokens.css only. Never hardcode a color, spacing, radius, type,
   shadow, or motion value in this file.
   ============================================================ */

/* ----- 1. Document header ----- */

/* Carries id="hero" for nav.js only — it takes none of the landing hero's
   styling. Top padding clears the fixed nav. */
.legal-intro{
  padding-top:var(--space-9);
  padding-bottom:var(--space-6);
}

.legal-title{
  font-size:var(--text-4xl);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-tight);
  line-height:var(--leading-tight);
  color:var(--color-text);
  text-wrap:balance;
}

.legal-subhead{
  margin-top:var(--space-3);
  font-size:var(--text-lg);
  line-height:var(--leading-relaxed);
  color:var(--color-text-secondary);
  text-wrap:pretty;
}

/* The version stamp. Deliberately NOT small print: the brief requires the
   version string to be visibly rendered, and its whole purpose is to make a
   stale vendored artifact obvious to a human at a glance. It sits in a bordered
   strip so it reads as document metadata rather than as body copy, and the
   version itself is <strong>, in the mono face, at full text colour. */
.legal-version{
  margin-top:var(--space-5);
  padding-top:var(--space-3);
  border-top:1px solid var(--color-border);
  font-size:var(--text-sm);
  color:var(--color-text-tertiary);
}

.legal-version strong{
  font-family:var(--font-mono);
  font-weight:var(--weight-medium);
  color:var(--color-text-secondary);
}

/* ----- 2. Body ----- */

.legal-body{
  padding-bottom:var(--space-section-y);
}

/* One measure for the whole page — header and body align to the same left
   edge and the same maximum line length. */
.legal-measure{
  max-width:var(--measure-prose);
}

.legal-lede{
  margin-bottom:var(--space-4);
  font-size:var(--text-lg);
  line-height:var(--leading-relaxed);
  color:var(--color-text-secondary);
  text-wrap:pretty;
}

.legal-section{
  margin-top:var(--space-7);
}

.legal-section:first-of-type{
  margin-top:var(--space-6);
}

/* Section headings sit above a hairline so a 25-section document has real
   visual breaks to scroll past, not just a change in type size.
   scroll-margin-top keeps a #fragment jump clear of the fixed nav. */
.legal-heading{
  margin-bottom:var(--space-3);
  padding-top:var(--space-3);
  border-top:1px solid var(--color-border);
  font-size:var(--text-xl);
  font-weight:var(--weight-semibold);
  line-height:var(--leading-tight);
  color:var(--color-text);
  scroll-margin-top:var(--space-9);
}

/* Sub-heading INSIDE a section (Privacy §4 'A. Account and entitlement data',
   Terms §15 'Per-call confirmation'). One step below .legal-heading: same
   weight, body size, no rule, extra space above so it reads as a break rather
   than as a bolded paragraph. Mirrors the app's .subheading. */
.legal-subheading{
  margin:var(--space-5) 0 var(--space-2);
  font-size:var(--text-base);
  font-weight:var(--weight-semibold);
  color:var(--color-text);
}

.legal-subheading:first-of-type{
  margin-top:var(--space-3);
}

.legal-para{
  margin-bottom:var(--space-3);
  font-size:var(--text-base);
  line-height:var(--leading-relaxed);
  color:var(--color-text-secondary);
  text-wrap:pretty;
}

.legal-para:last-child{
  margin-bottom:0;
}

.legal-list{
  margin:0 0 var(--space-3);
  padding-left:var(--space-5);
  list-style:disc;
}

.legal-list li{
  margin-bottom:var(--space-1);
  font-size:var(--text-base);
  line-height:var(--leading-relaxed);
  color:var(--color-text-secondary);
}

.legal-list li:last-child{
  margin-bottom:0;
}

.legal-list:last-child{
  margin-bottom:0;
}

/* ----- 3. Address blocks -----

   A run of short lines — the trader identity in Terms §1, the privacy contact
   in Privacy §1 and §22. Paragraph spacing between these lines reads as a
   formatting error: the block is one address, not five paragraphs. So the lines
   stack on line-height alone and the gap goes AROUND the block. Same reasoning,
   same result as the app's .address / .addressLine. <address> is the correct
   element and browsers italicise it by default, which we undo. */
.legal-address{
  display:flex;
  flex-direction:column;
  margin:0 0 var(--space-3);
  font-style:normal;
}

.legal-address:last-child{
  margin-bottom:0;
}

.legal-address-line{
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--color-text-secondary);
}

/* ----- 4. Links inside legal prose -----

   Underlined, not colour-only: these are cross-references inside a legal
   document and must be identifiable without relying on hue. */
.legal-body a,
.legal-intro a{
  color:var(--color-text);
  text-decoration:underline;
  text-underline-offset:0.15em;
  text-decoration-thickness:1px;
  transition:color var(--dur-fast) var(--ease-standard);
}

.legal-body a:hover,
.legal-intro a:hover{
  color:var(--gold);
}

/* The download button on /licenses/ffmpeg/ and /tester/start/ is a real .btn
   and must keep its own component styling — colour and every interactive
   state, not just decoration — rather than picking up the prose link
   treatment above. .btn itself sets no colour; the variant actually used
   here is .btn-primary, whose colour is var(--color-text-inverse)
   (components.css:493-496) and stays that colour on :hover, since
   .btn-primary:hover only changes background (components.css:498-500).
   Restoring that same custom property here — and neutralising the prose
   a:hover gold (line 192-195 above) on hover too — keeps the button's own
   colour in every state instead of hardcoding a literal. */
.legal-body a.btn,
.legal-intro a.btn{
  text-decoration:none;
  color:var(--color-text-inverse);
}

.legal-body a.btn:hover,
.legal-intro a.btn:hover{
  color:var(--color-text-inverse);
}

.legal-download{
  margin:var(--space-4) 0;
}

/* ----- 5. Code, hashes, configure line -----

   The ffmpeg SHA-256 and configure line are text a reader will COPY and paste
   into a terminal to verify the archive. They must be selectable, unwrapped
   where wrapping would corrupt them, and legible at small sizes. */
.legal-pre{
  margin:0 0 var(--space-3);
  padding:var(--space-4);
  overflow-x:auto;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
}

.legal-pre code{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  line-height:var(--leading-relaxed);
  color:var(--color-text);
  white-space:pre;
}

.legal-body code{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  color:var(--color-text);
}

/* A 64-character hex digest. It is allowed to break anywhere rather than force
   the page to scroll sideways — it is copied by selection, not retyped. */
.legal-hash{
  overflow-wrap:anywhere;
  word-break:break-all;
}

/* ----- 6. Tables -----

   The 232-row notices table and the ffmpeg fact table. Wrapped in a scroller so
   a narrow viewport scrolls the TABLE, never the page. */
.legal-table-scroll{
  overflow-x:auto;
  margin-bottom:var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
}

.legal-table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--text-sm);
}

.legal-table-caption{
  padding:var(--space-3) var(--space-4);
  text-align:left;
  font-size:var(--text-sm);
  color:var(--color-text-tertiary);
  border-bottom:1px solid var(--color-border);
}

.legal-table th,
.legal-table td{
  padding:var(--space-2) var(--space-4);
  text-align:left;
  vertical-align:top;
  line-height:var(--leading-normal);
  border-bottom:1px solid var(--color-border);
}

.legal-table thead th{
  position:sticky;
  top:0;
  background:var(--color-surface-2);
  font-weight:var(--weight-semibold);
  color:var(--color-text);
  white-space:nowrap;
}

.legal-table tbody th{
  font-weight:var(--weight-medium);
  color:var(--color-text);
}

.legal-table tbody td{
  color:var(--color-text-secondary);
}

.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td{
  border-bottom:0;
}

/* The ffmpeg build-facts table is a two-column key/value list, not a data grid:
   the key column is fixed and narrow, the value column takes the rest. */
.legal-table--facts tbody th{
  width:10rem;
  white-space:nowrap;
  color:var(--color-text-tertiary);
  font-weight:var(--weight-regular);
}

/* ----- 7. Narrow viewports ----- */

@media (max-width: 40rem){
  .legal-intro{
    padding-top:var(--space-8);
  }

  .legal-title{
    font-size:var(--text-3xl);
  }

  .legal-subhead{
    font-size:var(--text-base);
  }

  .legal-lede{
    font-size:var(--text-base);
  }

  .legal-heading{
    font-size:var(--text-lg);
  }

  .legal-table--facts tbody th{
    width:auto;
    white-space:normal;
  }
}