/* ============================================================
   legal/ — the shared shell for every hosted policy.
   Loaded after shared/base.css by /legal/<app>/privacy/ and by
   /tobydoro/privacy/, which lives beside its landing but on this same host.
   Not by /dumbphone/privacy/: README -> Hosted legal pages.

   It deliberately overrides NO --brand-* token. A policy is the
   site's own document, not a product ad, so all four inherit the
   base palette and read as one set. It is also deliberately not
   personal.css: tuning the homepage must never restyle a legal page.
   ============================================================ */

/* A legal page is prose. Same measure as the logbook notes. */
.legal .container { max-width: var(--maxw-prose); }
.legal { padding-top: clamp(3.5rem, 11vh, 7rem); }

.legal .back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--text-2); font-size: var(--fs-sm); margin-bottom: 2rem;
}
.legal .back:hover { color: var(--text-1); }
/* Only a policy that sits beside its landing carries the app's icon in its
   back link (/tobydoro/privacy/); the /legal/ ones link home with text alone. */
.legal .back img { width: 24px; height: 24px; border-radius: 7px; }

.legal__title { font-size: clamp(2rem, 4vw + 0.5rem, 3rem); margin-bottom: 0.9rem; }
.legal .dateline {
  font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--text-3);
  letter-spacing: 0.08em; margin-bottom: 2rem;
}

/* The plain-language precis. Every claim in it restates a section below.
   Selected as `.legal p.legal__summary`, not `.legal__summary`: `.legal p`
   below is more specific than a lone class, so it would win on colour,
   line-height and margin no matter the source order and this box would render
   as ordinary body copy. Do not "simplify" the selector — here or in the print
   block, which repeats it for the same reason. */
.legal p.legal__summary {
  font-size: clamp(1.05rem, 0.8vw + 0.95rem, 1.25rem);
  line-height: 1.55; color: var(--text-1);
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--brand-accent);
  border-radius: var(--radius-card);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  margin-bottom: 3rem;
}

.legal h2 {
  font-size: var(--fs-h3); color: var(--brand-accent);
  margin: 2.6rem 0 0.8rem;
}
.legal p { color: var(--text-2); line-height: 1.65; margin-bottom: 1rem; }
/* A policy spells some URLs out in full (Tobydoro's section 10 names its own
   address), and at 320px one of them is wider than the column: it pushed the
   page to 353px. Break such a word only when it cannot fit. */
.legal p, .legal li { overflow-wrap: break-word; }
.legal p b { color: var(--text-1); font-weight: 500; }
.legal a { color: var(--brand-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---- lists ----
   base.css resets every `ul` to no markers and no indent, so a policy that
   lists what it stores would otherwise read as loose paragraphs. Em-dash
   markers in the accent, hung in their own gutter so a wrapped line aligns
   under the text, not under the dash: the same marker /dumbphone/privacy/
   uses. StudyBuddy's policy has no lists; Tobydoro's does. */
.legal ul { margin-bottom: 1rem; }
.legal li { position: relative; padding-left: 1.5rem; color: var(--text-2); line-height: 1.65; }
.legal li + li { margin-top: 0.5rem; }
.legal li::before {
  content: "\2014";
  position: absolute; left: 0; top: 0;
  color: var(--brand-accent);
}

/* ---- language toggle ----
   Hidden until the inline script flags itself in, so a no-JS visitor is never
   offered a control that cannot work. Without JS both languages simply render,
   one after the other — which is the correct fallback for a legal document. */
.lang { display: none; gap: 0.5rem; margin-bottom: 2.5rem; }
.has-lang-toggle .lang { display: flex; }
.lang__btn {
  font: inherit; font-size: var(--fs-cap); font-family: var(--font-mono);
  letter-spacing: 0.06em;
  padding: 0.45rem 0.95rem;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.lang__btn:hover { color: var(--text-1); border-color: var(--brand-accent); }
.lang__btn.is-active {
  color: var(--brand-accent-ink);
  background: var(--brand-accent);
  border-color: var(--brand-accent);
}
.lang__btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* The script hides a language with the `hidden` attribute; make sure no
   display rule above can out-specify it. */
[hidden] { display: none !important; }

/* Second language follows the first when there is no JS to hide it. */
.legal__doc + .legal__doc { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--hairline); }
.has-lang-toggle .legal__doc + .legal__doc { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- print ----
   A policy is the one page here anyone saves or archives, and the screen palette
   is near-white text on near-black. Chrome and Safari drop backgrounds by default
   while still honouring the declared colour, so on paper this would come out
   blank. Force ink instead, and drop the chrome that means nothing there. The
   `hidden` attribute above is left alone: with JS on only the chosen language
   prints, and with JS off both do, which is the right fallback for a legal
   document. */
@media print {
  html, body { background: #fff !important; color: #111 !important; }
  .halo, .lang, .back, .footer, .skip-link { display: none !important; }

  .legal { padding-top: 0; }
  .legal .eyebrow, .legal__title, .legal h2, .legal p b { color: #111 !important; }
  .legal p, .legal li, .legal .dateline { color: #222 !important; }
  .legal a, .legal li::before { color: #111 !important; }

  .legal p.legal__summary {
    color: #111 !important;
    background: transparent !important;
    border: 1px solid #bbb !important;
    border-left: 3px solid #111 !important;
  }

  .legal__doc + .legal__doc { border-top-color: #bbb; }
}