/* ==========================================================================
   Vega Bell - shared styling for the legal pages
   (privacy.html, terms.html, coppa.html, cookies.html)

   Depends on /css/tokens.css for colours, fonts and spacing. Never redefines
   a brand token - see docs/DESIGN_SYSTEM.md, which is the source of truth.
   No JavaScript is required for anything on these pages.
   ========================================================================== */

/* ------------------------------------------------------------- page -- */

body.legal {
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(124, 58, 237, .28), transparent 62%),
    radial-gradient(900px 560px at 92% 4%, rgba(34, 211, 238, .16), transparent 60%),
    var(--bg-void);
  background-attachment: fixed;
}

@media (max-width: 640px) {
  body.legal { font-size: 16px; background-attachment: scroll; }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Anchor targets clear the sticky header. */
:target { scroll-margin-top: 96px; }

/* ------------------------------------------------------- skip link -- */

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -200px;
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  background: var(--surface-2);
  color: var(--text);
  border: 2px solid var(--accent-cyan);
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--sp-3); }

/* ----------------------------------------------------------- focus -- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-cyan);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------------------------------------------------------- header -- */

.legal-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 10, 31, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stroke);
}
.legal-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
}
.legal-header a.home {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  margin-left: calc(var(--sp-3) * -1);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--r-pill);
}
.legal-header a.home:hover { background: var(--surface); }
.legal-header a.home .bell { color: var(--gold); font-size: 1.15em; line-height: 1; }
.legal-header .doc-kind {
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ----------------------------------------------------------- shell -- */

.legal-shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-8);
  display: block;
}

@media (min-width: 1024px) {
  .legal-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: start;
    padding-top: var(--sp-6);
  }
}

/* ------------------------------------------------------------- toc -- */

.toc {
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(42, 37, 96, .55), rgba(30, 27, 75, .35));
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-6);
}
.toc h2 {
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin: 0 0 var(--sp-2);
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.toc li { counter-increment: toc; }
.toc a {
  display: block;
  padding: 10px var(--sp-2);
  color: var(--text-dim);
  text-decoration: none;
  border-radius: var(--r-sm);
  line-height: 1.35;
  font-size: .95rem;
}
.toc a::before {
  content: counter(toc) ".";
  color: var(--primary-lite);
  font-variant-numeric: tabular-nums;
  margin-right: var(--sp-2);
}
.toc a:hover { color: var(--text); background: var(--surface-2); }

@media (min-width: 1024px) {
  .toc {
    position: sticky;
    top: 88px;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    margin-bottom: 0;
  }
}

/* ------------------------------------------------------------ main -- */

.legal-main { max-width: 68ch; }

.legal-main h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.1;
  margin: 0 0 var(--sp-3);
  color: var(--gold);
  background: linear-gradient(135deg, #FDE68A 0%, #A78BFA 55%, #22D3EE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .legal-main h1 { color: var(--gold); -webkit-text-fill-color: currentColor; }
}

.lede {
  font-size: 1.12rem;
  color: var(--text);
  margin: 0 0 var(--sp-4);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: .9rem;
  color: var(--text-dim);
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  padding: var(--sp-3) 0;
  margin: 0 0 var(--sp-6);
}
.meta strong { color: var(--text); font-weight: 600; }

.legal-main section { margin: 0 0 var(--sp-7); scroll-margin-top: 96px; }

.legal-main h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.6vw, 1.7rem);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--sp-3);
  padding-top: var(--sp-2);
}
.legal-main h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-lite);
  margin: var(--sp-5) 0 var(--sp-2);
}
/* These headings are long sentences; on a phone they otherwise leave a single
   orphan word on the last line. */
.legal-main h1, .legal-main h2, .legal-main h3 { text-wrap: balance; }
.legal-main p, .legal-main li, .lede { text-wrap: pretty; }

.legal-main p { margin: 0 0 var(--sp-4); }
.legal-main ul, .legal-main ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.legal-main li { margin-bottom: var(--sp-2); }
.legal-main li::marker { color: var(--accent-cyan); }

.legal-main a { color: var(--accent-cyan); text-underline-offset: 3px; }
.legal-main a:hover { color: var(--text); }

strong { font-weight: 600; color: var(--text); }

/* -------------------------------------------------------- callouts -- */

/* The one-line plain-English summary that opens every section. */
.summary {
  background: rgba(34, 211, 238, .09);
  border: 1px solid rgba(34, 211, 238, .38);
  border-left: 5px solid var(--accent-cyan);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
}
.summary p { margin: 0; }
.summary .tag {
  display: block;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  font-weight: 700;
  margin-bottom: 4px;
}

.callout {
  border: 1px solid var(--stroke);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-5);
}
.callout > :last-child { margin-bottom: 0; }
.callout h2, .callout h3 { margin-top: 0; }

.callout--gold { border-color: rgba(251, 191, 36, .5); background: rgba(251, 191, 36, .08); }
.callout--gold h2, .callout--gold h3 { color: var(--gold); }
.callout--warn { border-color: rgba(251, 113, 133, .5); background: rgba(251, 113, 133, .08); }
.callout--warn h3 { color: var(--danger); }
.callout--contact { border-color: rgba(124, 58, 237, .6); background: rgba(124, 58, 237, .14); }

/* The "we never do this" list - a genuine differentiator, so it gets weight. */
.never {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}
.never li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: rgba(52, 211, 153, .08);
  border: 1px solid rgba(52, 211, 153, .32);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin: 0;
}
.never li::before {
  content: "\2715";
  color: var(--success);
  font-weight: 700;
  line-height: 1.7;
}

/* ------------------------------------------------------------ misc -- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* On a phone these tables have to scroll sideways. The two `local` panels
   ride with the content and cover the two pinned `scroll` shadows, so an
   edge is only shaded while there is more table hiding behind it. */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 var(--sp-5);
  border-radius: var(--r-md);
  background:
    linear-gradient(to right, var(--surface), rgba(30, 27, 75, 0)) 0 0 / 22px 100% no-repeat local,
    linear-gradient(to left, var(--surface), rgba(30, 27, 75, 0)) 100% 0 / 22px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)) 0 0 / 20px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)) 100% 0 / 20px 100% no-repeat scroll,
    var(--surface);
  scrollbar-width: thin;
  scrollbar-color: var(--stroke) transparent;
}
table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: .95rem;
  /* transparent, so the scroll shading above stays visible behind the rows */
  background: transparent;
}
th, td {
  text-align: left;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--stroke);
  vertical-align: top;
}
th { color: var(--accent-cyan); font-weight: 600; background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }

code, .mono {
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  word-break: break-word;
}

/* Obvious, unmissable stand-in for a real-world detail we do not yet have. */
.placeholder {
  font-family: var(--font-mono);
  font-size: .9em;
  color: var(--gold);
  background: rgba(251, 191, 36, .12);
  border: 1px dashed var(--gold);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { margin-bottom: var(--sp-3); }
.contact-list .label {
  display: block;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  font-weight: 600;
  text-decoration: none;
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary-lite);
}
.btn:hover { background: var(--primary-lite); color: var(--bg-void); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--stroke); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }

hr.rule { border: 0; border-top: 1px solid var(--stroke); margin: var(--sp-6) 0; }

/* ---------------------------------------------------------- footer -- */

.legal-footer {
  border-top: 1px solid var(--stroke);
  background: rgba(20, 18, 53, .6);
  margin-top: var(--sp-7);
}
.legal-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4);
  color: var(--text-dim);
  font-size: .93rem;
}
.legal-footer h2 {
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 var(--sp-3);
}
.legal-footer nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding: 0;
  margin: 0 0 var(--sp-4);
}
.legal-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--accent-cyan);
  text-decoration: none;
  font-weight: 600;
}
.legal-footer nav a:hover { text-decoration: underline; }
.legal-footer nav a[aria-current="page"] { color: var(--gold); }
.legal-footer p { margin: 0 0 var(--sp-2); }

/* ----------------------------------------------------------- print -- */

@media print {
  body.legal { background: #fff; color: #000; }
  .legal-header, .toc, .skip-link, .legal-footer nav { display: none; }
  .legal-main { max-width: none; }
  .legal-main h1 { color: #000; -webkit-text-fill-color: #000; }
  .summary, .callout, .never li { border: 1px solid #666; background: #fff; }
  a { color: #000; }
}