/* legal.css — styles the legal documents rendered from legal/*.md (see src/routes/legal.js).
   Shares the Mebobox palette: electric blue on a dark glow background, laid out
   for long-form reading. Targets the raw HTML elements Markdown produces. */
:root {
  color-scheme: dark;
  --blue: #0768ff;
  --blue-2: #2b8cff;
  --ink: #e8ecf6;
  --muted: #8a93ad;
  --line: rgba(7, 104, 255, .18);
}
* { box-sizing: border-box; }

@font-face {
  font-family: 'Doto';
  src: url('/assets/fonts/Doto/doto-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(ellipse at top, #16103a 0%, #05030f 70%) fixed;
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  padding: 5vh 16px 12vh;
}

main.doc, .brand, .back { max-width: 720px; margin-left: auto; margin-right: auto; }

/* logo + wordmark, links back to the Library (the wordmark stays "Mebobox") */
.brand {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Doto', monospace; font-size: 30px; line-height: 1;
  text-decoration: none; margin-bottom: 28px;
}
.brand img { height: 0.69em; width: auto; position: relative; top: -0.06em; }
.brand .name {
  font-size: 1em; letter-spacing: 1px;
  color: var(--blue); text-shadow: 0 0 12px rgba(7, 104, 255, .9), 0 0 28px rgba(43, 140, 255, .5);
}

/* --- rendered Markdown ------------------------------------------------------ */
.doc h1 { font-size: 26px; margin: 0 0 6px; }
/* the "*italic lede*" line and the "Version x" line directly under the title */
.doc h1 + p { color: var(--muted); margin: 0 0 6px; }
.doc h1 + p + p { color: var(--muted); font-size: 13px; margin: 0 0 24px; }

.doc h2 {
  font-size: 17px; margin: 30px 0 8px; padding-top: 18px;
  border-top: 1px solid var(--line); color: #fff;
}

.doc p { margin: 0 0 12px; }
.doc a { color: var(--blue-2); }
.doc strong { color: #fff; }

.doc ul, .doc ol { margin: 0 0 12px; padding-left: 22px; }
.doc li { margin: 0 0 6px; }

/* the "TEMPLATE — NOT LEGAL ADVICE" / "In short" style callouts come through as blockquotes */
.doc blockquote {
  margin: 0 0 24px; padding: 14px 18px;
  background: rgba(7, 104, 255, .07);
  border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 10px;
  color: var(--muted);
}
.doc blockquote p:last-child { margin-bottom: 0; }

.doc hr { border: none; border-top: 1px solid var(--line); margin: 30px 0; }

.doc table {
  width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px;
}
.doc th, .doc td {
  border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top;
}
.doc th { background: rgba(7, 104, 255, .12); color: #fff; }

.doc code {
  background: rgba(255, 255, 255, .07); padding: 1px 5px; border-radius: 4px;
  font-size: .9em;
}

.back { display: block; margin-top: 36px; color: var(--muted); text-decoration: none; font-size: 14px; }
.back:hover { color: var(--ink); }