/* Shared styling for the legal pages (privacy, terms). */
/* A legal page wants a reading column and headings you can scan, not the
     centred marketing rhythm the rest of the site uses. */
  .legal { max-width: 72ch; margin: 0 auto; padding: var(--sp-12) var(--sp-6) var(--sp-20); }
  .legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--sp-3); }
  .legal .updated { color: var(--ink-500); font-size: 0.9rem; margin-bottom: var(--sp-10); }
  .legal h2 { font-size: 1.35rem; margin: var(--sp-12) 0 var(--sp-4); }
  .legal h3 { font-size: 1rem; font-family: var(--font-sans); font-weight: 600; margin: var(--sp-6) 0 var(--sp-2); }
  .legal p, .legal li { color: var(--ink-700); line-height: 1.65; }
  .legal p { margin-bottom: var(--sp-4); }
  .legal ul { margin: 0 0 var(--sp-4) var(--sp-5); }
  .legal li { margin-bottom: var(--sp-2); }
  .legal strong { color: var(--ink-900); }
  .legal .callout {
    border-left: 3px solid var(--teal);
    background: var(--paper-card);
    padding: var(--sp-4) var(--sp-5);
    margin: var(--sp-6) 0;
    border-radius: 0 var(--r-card) var(--r-card) 0;
  }
  .legal .callout p:last-child { margin-bottom: 0; }
  .legal table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-6); font-size: 0.94rem; }
  .legal th, .legal td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--hairline); vertical-align: top; }
  .legal th { color: var(--ink-900); font-weight: 600; }

  /* The storage table's first column holds unbreakable identifiers
     (chrome.storage.local), so its min-content width blew past a phone
     viewport and put the whole page into horizontal scroll. The cells now
     break, and the wrapper takes any remainder as its own scroll. */
  .legal .table-scroll { overflow-x: auto; margin-bottom: var(--sp-6); }
  .legal .table-scroll table { margin-bottom: 0; }

  @media (max-width: 767px) {
    .legal { padding: var(--sp-10) var(--sp-4) var(--sp-16); }
    .legal th, .legal td { padding: var(--sp-2); font-size: 0.88rem; }
    /* Only on a phone. `anywhere` is what lets the identifier column shrink
       below its min-content width, but it applies to intrinsic sizing too,
       so on a wide screen the table auto-layout squeezed that column and
       chopped chrome.storage.local across three lines with room to spare. */
    .legal code { overflow-wrap: anywhere; }
  }