/* legal.css — the published privacy notice and terms (/privacy, /terms).
   Marketing surface: single-theme light like every public page (CLAUDE.md #10),
   colours and type from tokens.css only. One bold element per page: the
   "short version" summary on /privacy; everything else stays quiet. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--m-bg); }
body {
  font-family: var(--m-font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--m-ink-soft);
  -webkit-font-smoothing: antialiased;
  padding: 0 var(--m-pad-x-mobile) var(--m-space-80);
}

.lg-nav, .lg-doc, .lg-foot { max-width: 720px; margin: 0 auto; }

.lg-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--m-space-24) 0 0;
}
/* Website v3 (#203): the same brand mark as every public page, drawn in CSS so the legal
   pages' HTML (and so their text) stays exactly as published. The mark's letter is given an
   empty alternative, so the link's name stays "Hven". */
.lg-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--m-font-display);
  font-size: 22px; font-weight: var(--m-weight-regular);
  color: var(--m-ink); text-decoration: none; letter-spacing: var(--m-track-head);
}
.lg-brand::before {
  content: "H" / "";
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--m-accent); color: var(--m-accent-ink);
  font: 400 16px/1 var(--m-font-display);
  display: inline-grid; place-items: center;
}
.lg-nav a.lg-home { font-size: 15px; color: var(--m-ink-soft); text-decoration: none; }
.lg-nav a.lg-home:hover { color: var(--m-ink); }

.lg-doc { padding-top: var(--m-space-56); }

h1 {
  font-family: var(--m-font-display);
  font-weight: var(--m-weight-regular);
  font-size: clamp(34px, 6vw, 52px);
  line-height: var(--m-line-h1);
  letter-spacing: var(--m-track-display);
  color: var(--m-ink);
  margin: 0 0 var(--m-space-12);
}
.lg-updated { font-size: var(--m-size-caption); color: var(--m-ink-soft); margin: 0 0 var(--m-space-40); }

/* The short version: a definition list read in twenty seconds. */
.lg-summary {
  margin: 0 0 var(--m-space-56);
  background: var(--m-surface);
  border: var(--m-border-width) solid var(--m-line);
  border-left: 4px solid var(--m-accent);
  border-radius: var(--m-radius-lg);
  padding: var(--m-space-24) var(--m-space-24) var(--m-space-8);
}
.lg-summary h2 {
  margin: 0 0 var(--m-space-16);
  font-size: var(--m-size-h3);
}
.lg-summary dl { margin: 0; }
.lg-summary .lg-row {
  display: grid; grid-template-columns: 9.5em 1fr; gap: var(--m-space-16);
  padding: var(--m-space-12) 0;
  border-top: var(--m-border-width) solid var(--m-line);
}
.lg-summary dt {
  font-family: var(--m-font-display);
  font-size: 17px; color: var(--m-ink);
}
.lg-summary dd { margin: 0; color: var(--m-ink-soft); }

.lg-contents { margin: 0 0 var(--m-space-56); }
.lg-contents h2 { font-size: var(--m-size-h3); margin: 0 0 var(--m-space-12); }
.lg-contents ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: var(--m-space-32); }
.lg-contents li { margin: 0 0 var(--m-space-6); break-inside: avoid; }

h2 {
  font-family: var(--m-font-display);
  font-weight: var(--m-weight-regular);
  font-size: 26px; line-height: var(--m-line-h2);
  letter-spacing: var(--m-track-head);
  color: var(--m-ink);
  margin: var(--m-space-56) 0 var(--m-space-16);
  scroll-margin-top: var(--m-space-24);
}
h3 {
  font-size: var(--m-size-body); font-weight: var(--m-weight-semibold);
  color: var(--m-ink); margin: var(--m-space-24) 0 var(--m-space-8);
}
p { margin: 0 0 var(--m-space-14); }
ul, ol { margin: 0 0 var(--m-space-16); padding-left: 1.3em; }
li { margin: 0 0 var(--m-space-6); }
strong { color: var(--m-ink); font-weight: var(--m-weight-semibold); }

a { color: var(--m-ink); text-decoration: underline; text-decoration-color: var(--m-accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; border-radius: 2px; }

/* Wide tables scroll inside their own box, never the page. */
.lg-table { overflow-x: auto; margin: 0 0 var(--m-space-24); border: var(--m-border-width) solid var(--m-line); border-radius: var(--m-radius-md); background: var(--m-surface); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--m-size-body-sm); line-height: 1.5; }
th, td { text-align: left; vertical-align: top; padding: var(--m-space-10) var(--m-space-12); border-bottom: var(--m-border-width) solid var(--m-line); }
th { color: var(--m-ink); font-weight: var(--m-weight-semibold); background: var(--m-surface-2); }
tr:last-child td { border-bottom: 0; }

code { font-family: var(--m-font-mono); font-size: 0.86em; color: var(--m-ink); overflow-wrap: anywhere; }

.lg-foot {
  margin-top: var(--m-space-80);
  padding-top: var(--m-space-24);
  border-top: var(--m-border-width) solid var(--m-line);
  display: flex; flex-wrap: wrap; gap: var(--m-space-20);
  font-size: var(--m-size-caption);
}
.lg-foot a { color: var(--m-ink-soft); }

@media (max-width: 640px) {
  .lg-doc { padding-top: var(--m-space-32); }
  .lg-summary { padding: var(--m-space-20) var(--m-space-16) var(--m-space-4); }
  .lg-summary .lg-row { grid-template-columns: 1fr; gap: var(--m-space-2); }
  .lg-contents ol { columns: 1; }
  h2 { font-size: 22px; margin-top: var(--m-space-40); }
  /* At phone width the tables wrap instead of scrolling sideways: a scrolling box would need
     keyboard focus, and the legal pages' HTML is not changed (website v3, #203). */
  .lg-table { overflow-x: visible; }
  table { min-width: 0; }
  th, td { overflow-wrap: anywhere; padding: var(--m-space-8); }
}