/* The legal surface: /terms and /privacy, in the app, in both themes.
   Decision 0037.

   Every value here is a token. No hex, no literal radius, no font size off the
   ramp: this file is in tests/laws/brand_skin.test.js EXTRA_SHEETS, so the
   colour law, the type ramp, the one-radius-per-shape-class rule and the
   var() resolution check all read it exactly as they read the shell. It is a
   reading surface, so it spends no mint and no ember at all.

   It ships as a separate stylesheet rather than in the two pages' heads for
   the same reason pay.css did: neither page is on the first paint path
   (tests/build/first_paint_budget.test.js counts index.html and the two
   stylesheets its head links), and one copy of the skin cannot drift from
   itself the way two copies can. */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --sans:'IBM Plex Sans','PlexS',system-ui,-apple-system,sans-serif;
  --data:'IBM Plex Mono','PlexM',monospace;
  --r:var(--radius-card-xl);
}
html,body{background:var(--page)}
body{
  color:var(--text);font-family:var(--sans);font-size:var(--fs-body);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}

/* 360 is the floor, so the gutter is a token and the column is capped rather
   than sized. Everything below reads in one column at 320 upward. */
.wrap{max-width:640px;margin:0 auto;padding:0 var(--space-5) var(--space-8)}

/* ---------- the bar ---------- */
.nav{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-5) 0 var(--space-2);
}
/* Both of these are nav, so both clear the 44px floor. The mark plus wordmark
   measures 27px on its own and was under it. */
.brand{
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:44px;text-decoration:none;color:var(--text);
}
.mark{height:18px;width:auto;display:none}
[data-theme="light"] .mark.on-light{display:block}
[data-theme="dark"] .mark.on-dark{display:block}
.wordmark{font-size:var(--fs-lead);font-weight:600;letter-spacing:-0.01em}
/* 44px of tap target, the standing floor, without 44px of visible chrome. */
.back{
  margin-left:auto;display:inline-flex;align-items:center;
  min-height:44px;padding:0 var(--space-2);
  font-size:var(--fs-label);font-weight:600;color:var(--text);text-decoration:none;
}

/* ---------- the head of the document ---------- */
h1{
  margin-top:var(--space-5);font-size:var(--fs-title);line-height:1.2;
  font-weight:600;letter-spacing:-0.02em;
}
.stamp{
  margin-top:var(--space-2);font-family:var(--data);font-size:var(--fs-micro);
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.draft{
  margin-top:var(--space-4);background:var(--notice);color:var(--notice-fg);
  border-radius:var(--r);padding:var(--space-3) var(--space-4);
  font-size:var(--fs-label);font-weight:600;
}
.lede{margin-top:var(--space-4);font-size:var(--fs-lead);line-height:1.5;color:var(--muted)}
.lede b{color:var(--text);font-weight:600}

/* ---------- the body of the document ---------- */
h2{
  margin-top:var(--space-7);font-size:var(--fs-lead);line-height:1.35;
  font-weight:600;letter-spacing:-0.01em;
}
p{margin-top:var(--space-3);font-size:var(--fs-body);color:var(--muted)}
p b{color:var(--text);font-weight:600}
ul{margin:var(--space-3) 0 0 var(--space-5)}
li{margin-top:var(--space-2);font-size:var(--fs-body);color:var(--muted)}
li b{color:var(--text);font-weight:600}
a{color:var(--text);text-decoration:underline;text-underline-offset:2px}

/* A plain plate for the facts a reader scans for rather than reads: the price,
   the fields kept. Same card language as the app. */
.plate{
  margin-top:var(--space-4);background:var(--card);border-radius:var(--r);
  padding:var(--space-4) var(--space-5);box-shadow:var(--sh);
}
[data-theme="dark"] .plate{border:1px solid var(--line)}
.plate .row{
  display:flex;align-items:baseline;gap:var(--space-4);
  padding:var(--space-3) 0;border-top:1px solid var(--line);
}
.plate .row:first-child{padding-top:0;border-top:0}
.plate .row:last-child{padding-bottom:0}
.plate .k{font-size:var(--fs-label);color:var(--muted);flex:none;min-width:104px}
.plate .v{font-size:var(--fs-body);color:var(--text);font-weight:600}
.plate .v.num{font-family:var(--data);font-variant-numeric:tabular-nums}

/* ---------- the foot ---------- */
footer{margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--line)}
.legal{font-size:var(--fs-micro);line-height:1.6;color:var(--muted)}
.legal b{color:var(--text);font-weight:600}
.legal-links{margin-top:var(--space-2);font-size:var(--fs-label)}
/* A row of destinations rather than links inside a sentence, so these clear
   the floor too: inline-flex plus the row's own line height gets them there
   without a button's worth of chrome. */
.legal-links a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}