/* legal.css — terms + privacy pages, on the plenum ecosystem palette.
   Colours come from hub/css/plenum.css (loaded before this); spacing from
   css/tokens.css (--sp-*). Light + dark aware via :root[data-theme]. */

/* Top bar */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; height: 58px; position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--hair);
}
.top-bar-logo { font-size: var(--t-md); font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: var(--track-snug); }
.top-bar-logo span { color: var(--accent); }
.top-bar-right { display: flex; align-items: center; gap: var(--sp-3); }
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-1_5); padding: 0 var(--sp-4); height: 35px;
  font-size: var(--t-sm); font-weight: 600; border-radius: 9px; cursor: pointer; font-family: inherit; text-decoration: none;
  transition: border-color var(--dur) var(--out), color var(--dur), box-shadow var(--dur);
}
.btn-secondary { background: var(--panel); color: var(--ink-2); border: 1px solid var(--hair-2); box-shadow: var(--sh-1); }
.btn-secondary:hover { color: var(--ink); border-color: var(--ink-3); }

/* Legal layout */
.legal-wrap { max-width: 820px; margin: 0 auto; padding: var(--sp-12) var(--sp-6) 96px; }
.legal-eyebrow { font-family: var(--mono); font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-2_5); }
.legal-title { font-size: var(--t-3xl); font-weight: 600; line-height: 1.1; letter-spacing: var(--track-tight); margin-bottom: var(--sp-2_5); }
.legal-updated { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: var(--sp-7); }

/* Intro / summary callout */
.legal-callout {
  background: var(--panel-2); border: 1px solid var(--hair); border-left: 3px solid var(--accent);
  border-radius: var(--r); padding: var(--sp-4) var(--sp-5); margin-bottom: 36px;
  font-size: var(--t-base); line-height: 1.7; color: var(--ink-2);
}
.legal-callout strong { color: var(--ink); font-weight: 600; }

/* Table of contents */
.legal-toc { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 18px 22px; margin-bottom: var(--sp-10); box-shadow: var(--sh-1); }
.legal-toc h2 { font-family: var(--mono); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-3); }
.legal-toc ol { list-style: none; counter-reset: toc; columns: 2; column-gap: var(--sp-8); }
.legal-toc li { counter-increment: toc; margin-bottom: 7px; break-inside: avoid; }
.legal-toc a { color: var(--ink-2); text-decoration: none; font-size: var(--t-base); display: flex; gap: var(--sp-2); align-items: baseline; transition: color var(--dur); }
.legal-toc a:hover { color: var(--accent); }
.legal-toc a::before { content: counter(toc) "."; color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 18px; }
@media (max-width: 600px) { .legal-toc ol { columns: 1; } }

/* Sections */
.legal-section { margin-bottom: 36px; scroll-margin-top: 72px; }
.legal-section h2 { font-size: var(--t-xl); font-weight: 600; letter-spacing: var(--track-snug); margin-bottom: var(--sp-3_5); display: flex; align-items: baseline; gap: var(--sp-2_5); }
.legal-section h2 .sec-num { color: var(--accent); font-variant-numeric: tabular-nums; font-size: var(--t-md); font-family: var(--mono); }
.legal-section h3 { font-size: var(--t-md); font-weight: 600; margin: var(--sp-5) 0 var(--sp-2); color: var(--ink); }
.legal-section p { font-size: var(--t-base); line-height: 1.75; color: var(--ink-2); margin-bottom: var(--sp-3); }
.legal-section p strong, .legal-section li strong { color: var(--ink); font-weight: 600; }
.legal-section a { color: var(--accent); text-decoration: none; }
.legal-section a:hover { text-decoration: underline; }
.legal-section ul, .legal-section ol { margin: 0 0 var(--sp-3_5) 22px; }
.legal-section li { font-size: var(--t-base); line-height: 1.75; color: var(--ink-2); margin-bottom: 7px; }

/* Definition / data table */
.legal-table { width: 100%; border-collapse: collapse; margin: var(--sp-2) 0 18px; font-size: var(--t-base); }
.legal-table th, .legal-table td { text-align: left; padding: var(--sp-2_5) var(--sp-3_5); border: 1px solid var(--hair); vertical-align: top; line-height: 1.6; }
.legal-table th { background: var(--panel-2); color: var(--ink); font-weight: 600; font-size: var(--t-sm); }
.legal-table td { color: var(--ink-2); }
.legal-table td strong { color: var(--ink); }

/* Contact card */
.legal-contact { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 22px var(--sp-6); margin-top: var(--sp-2); box-shadow: var(--sh-1); }
.legal-contact p { margin-bottom: var(--sp-2); color: var(--ink-2); }
.legal-contact .contact-row { display: flex; align-items: center; gap: var(--sp-2_5); font-size: var(--t-base); color: var(--ink); margin-bottom: var(--sp-2); }
.legal-contact .contact-row i { color: var(--accent); font-size: 18px; }

.legal-back { display: inline-flex; align-items: center; gap: var(--sp-1_5); font-size: var(--t-sm); color: var(--ink-3); text-decoration: none; margin-top: var(--sp-2); }
.legal-back:hover { color: var(--accent); }

/* Footer */
.legal-footer { border-top: 1px solid var(--hair); padding: var(--sp-7) var(--sp-6); text-align: center; }
.legal-footer-links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.legal-footer-links a { font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; }
.legal-footer-links a:hover { color: var(--ink); }
.legal-footer-copy { font-size: var(--t-xs); color: var(--ink-3); }

/* Responsive */
@media (max-width: 600px) {
  .legal-wrap { padding: 36px 18px 72px; }
  .legal-title { font-size: var(--t-2xl); }
  .legal-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .legal-toc a { padding: var(--sp-1_5) 0; min-height: 44px; align-items: center; }
  .legal-footer-links a { display: inline-block; padding: var(--sp-2_5) var(--sp-1); }
}