/* Long-form pages. The app stylesheet is scoped to #app, so these need their
   own type and rhythm rather than inheriting a phone layout. */
/* The page itself.
 *
 * This set overflow and nothing else, so every long-form page fell through to
 * the browser default white in both themes: the tokens were loaded, the theme
 * attribute was set, and nothing was using either. That is why the changelog
 * and the creator page looked like documents rather than like Sailyn. */
body{
  overflow-y:auto; height:auto;
  background:var(--ground);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  font-size:var(--fs-3);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* The site's container, resolved from the same two values as every other
   page. It was one of three different widths with three different gutters, and
   the gutter now clears a notch when the phone is on its side. */
.lw{ width:100%; max-width:var(--shell-w); margin:0 auto;
  padding-inline:max(var(--gutter), var(--safe-left), var(--safe-right)); }
/* A document is read a sentence at a time, so it takes the reading measure
   rather than the layout one. */
.legal .lw, .lw.lw--doc{ max-width:var(--measure-w); }

/* The .lnav header is gone. Four navigation systems became one, and it lives
   in pages.css with the rest of the site chrome. */

.legal{ padding-block:var(--space-7); }
.legal h1{ font-family:var(--display); font-weight:var(--fw-body);
  font-size:clamp(38px,6vw,58px); line-height:1.05; letter-spacing:-0.02em; margin-bottom:var(--space-2); }
.lupdated{ font-size:var(--fs-2); color:var(--ink-mute); margin-bottom:var(--space-6); }
.llede{ font-size:var(--fs-3); line-height:1.68; color:var(--ink-soft); margin-bottom:var(--space-7);
  padding-bottom:var(--space-6); border-bottom:1px solid var(--line); text-wrap:pretty; }

.legal h2{ font-family:var(--display); font-weight:var(--fw-body);
  font-size:clamp(25px,3.4vw,32px); letter-spacing:-0.015em;
  margin:var(--space-7) 0 var(--space-4); padding-top:var(--space-5);
  border-top:1px solid var(--line-soft); text-wrap:balance; }
.legal h2:first-of-type{ padding-top:0; border-top:0; }
.legal h3{ font-size:var(--fs-3); font-weight:var(--fw-hi); margin:var(--space-5) 0 var(--space-3); color:var(--ink); }
.legal p{ font-size:var(--fs-3); line-height:1.72; color:var(--ink-soft); margin-bottom:var(--space-4); text-wrap:pretty; }
.legal b{ color:var(--ink); font-weight:var(--fw-hi); }
.legal a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

.legal ul{ list-style:none; margin:0 0 var(--space-4); padding:0; }
.legal li{ font-size:var(--fs-3); line-height:1.68; color:var(--ink-soft);
  padding-left:var(--space-5); margin-bottom:var(--space-3); position:relative; }
.legal li::before{ content:""; position:absolute; left:2px; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.75; }

.ltable{ width:100%; border-collapse:collapse; margin:var(--space-2) 0 var(--space-5); font-size:var(--fs-2); }
.ltable th{ text-align:left; font-weight:var(--fw-hi); color:var(--ink); font-size:var(--fs-1);
  letter-spacing:.05em; text-transform:uppercase; padding:0 var(--space-3) var(--space-2) 0;
  border-bottom:1px solid var(--line); }
.ltable td{ padding:var(--space-3) var(--space-3) var(--space-3) 0; color:var(--ink-soft); line-height:1.55;
  border-bottom:1px solid var(--line-soft); vertical-align:top; }
.ltable td:first-child{ color:var(--ink); font-weight:var(--fw-hi); white-space:nowrap; }

.lfoot{ margin-top:var(--space-7); padding-top:var(--space-5); border-top:1px solid var(--line);
  font-size:var(--fs-2); color:var(--ink-mute); }
.lfoot a{ color:var(--ink-soft); text-decoration:none; }
.lfoot a:hover{ color:var(--ink); }

@media (max-width:620px){
  .legal{ padding:var(--space-6) var(--space-5) var(--space-7); }
  .ltable, .ltable tbody, .ltable tr, .ltable td, .ltable th{ display:block; width:100%; }
  .ltable thead{ display:none; }
  .ltable tr{ padding:var(--space-3) 0; border-bottom:1px solid var(--line-soft); }
  .ltable td{ border:none; padding:var(--space-1) 0; }
  .ltable td:first-child{ font-size:var(--fs-3); margin-bottom:var(--space-1); }
}

/* the Impressum is mostly addresses, which want space rather than prose rhythm */
.laddr{ font-size:var(--fs-3); line-height:1.9; color:var(--ink); }
.laddr a{ color:var(--accent); }
.lrule{ border:none; border-top:1px solid var(--line); margin:var(--space-7) 0 0; }

/* The setup videos: each at the width of the text column, in its own shape. */
.legal .setupvid{ display:block; width:100%; height:auto; border-radius:var(--r-control); margin-top:var(--space-3); }
.legal .setupdl{ margin-top:var(--space-2); margin-bottom:var(--space-6); font-size:var(--fs-2); }