/* legal.css — the policy pages (terms / refunds / privacy) and the studio footer that links them.
   Kept out of studio.css because these pages load nothing else: no ES modules, no fonts, no JS. A
   payment provider reviewing the domain has to be able to reach them even if the app is broken. */

.lg-body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #0c0e12;
  color: #e7e9ee;
  line-height: 1.65;
}

.lg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 22px;
  border-bottom: 1px solid #1c1f27;
  background: #0e1116;
}
.lg-head a { color: #e7e9ee; text-decoration: none; font-weight: 700; font-size: 17px; }
.lg-head nav { display: flex; gap: 18px; font-size: 14px; }
.lg-head nav a { font-weight: 500; color: #9aa1ad; }
.lg-head nav a:hover, .lg-head nav a[aria-current="page"] { color: #22d3ee; }

.lg-main { max-width: 760px; margin: 0 auto; padding: 40px 22px 90px; }
.lg-main h1 { font-size: 27px; margin: 0 0 6px; }
.lg-main h2 { font-size: 17px; margin: 34px 0 8px; color: #cdd2da; }
.lg-main p, .lg-main li { color: #b9c0cb; font-size: 15px; }
.lg-main ul { padding-left: 22px; }
.lg-main li { margin: 5px 0; }
.lg-main a { color: #22d3ee; }
.lg-updated { color: #6f7783; font-size: 13px; margin: 0 0 8px; }
.lg-lede { color: #cdd2da; font-size: 16px; }
.lg-foot { margin-top: 46px; padding-top: 18px; border-top: 1px solid #1c1f27; color: #6f7783; font-size: 13px; }

/* The studio's own footer, which is what makes these pages reachable from the site's navigation —
   a payment provider's domain review checks for exactly that. It must NEVER reach OBS, so
   overlay.css adds it to the list of chrome that overlay mode hides. */
.os-legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 22px;
  border-top: 1px solid #1c1f27;
  background: #0e1116;
  font-size: 13px;
  color: #6f7783;
}
.os-legal a { color: #9aa1ad; text-decoration: none; }
.os-legal a:hover { color: #22d3ee; }
.os-legal-sep { color: #2a2f39; }

/* studio.css sizes .os-main to calc(100vh - 57px), which assumed the header was the only other thing on
   the page. Adding a footer to that would push the document past the viewport and put a scrollbar on the
   studio. So in STUDIO mode the page becomes a flex column and .os-main takes what's left. Overlay mode
   is deliberately untouched: it hides the footer and keeps its own height:100vh. This lives here rather
   than in studio.css because legal.css loads last, so it wins without editing the other file. */
/* height, NOT min-height: the column has to be exactly the viewport so .os-main gets the remainder and
   nothing else. With min-height the main area grew to fit the panel's content and the whole PAGE scrolled,
   instead of the panel scrolling inside its own overflow-y:auto — which is the behaviour the studio had
   before the footer existed. min-height:0 is what lets a flex item shrink below its content and hand the
   overflow back to the panel. */
body:not(.overlay-mode) { display: flex; flex-direction: column; height: 100vh; }
body:not(.overlay-mode) .os-main { flex: 1 1 auto; height: auto; min-height: 0; }