/* =========================================================================
   MIZTWEAKZ — page-legal.css  (/tos/ and /privacy/ only, loaded after site.css)
   Paragon LegalPage layout: sticky "CONTENTS" TOC (200px, top 120px, hidden
   ≤1200) beside an 800px section column, numbered h2 sections with anchors,
   2px-left-border sub-sections and outlined .footer-link buttons — restyled
   with the MIZTWEAKZ tokens. The page banner itself comes from site.css.
   ========================================================================= */

/* ---------- banner extras ---------- */
.banner--legal .banner-content { gap: 14px; }
.banner--legal .banner-subtitle { font-size: 1rem; line-height: 1.6; }
.legal-meta {
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem;
  margin-top: .25rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-50);
}
.legal-meta time { color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: .06em; text-transform: none; }
.legal-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .25); }

/* ---------- layout: sticky TOC + prose column ---------- */
.legal-layout {
  width: 100%; max-width: var(--max-content); margin: 0 auto;
  display: grid; grid-template-columns: 200px minmax(0, 800px);
  gap: clamp(2rem, 4vw, 4rem); justify-content: center; align-items: start;
}
.legal-content { min-width: 0; }

.legal-toc { position: sticky; top: calc(var(--nav-height) + 24px); }
.legal-toc-title {
  display: block; margin-bottom: .9rem;
  font-family: var(--font-display); font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .15em; color: rgba(255, 255, 255, .5);
}
.legal-toc ol { counter-reset: toc; display: flex; flex-direction: column; gap: .15rem; border-left: 1px solid var(--hairline-soft); }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex; align-items: baseline; gap: .55rem;
  margin-left: -1px; padding: .45rem .9rem;
  border-left: 2px solid transparent;
  font-size: .9rem; line-height: 1.35; color: var(--text-70);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-family: var(--font-display); font-size: .75rem; font-weight: 600; letter-spacing: .05em;
  color: var(--muted); transition: color .2s ease;
}
.legal-toc a:hover { color: #fff; }
.legal-toc a.is-active { color: #fff; border-left-color: var(--accent); background: linear-gradient(90deg, rgba(var(--ambient-rgb), calc(.08 * var(--glow, 1))), transparent); }
.legal-toc a:hover::before, .legal-toc a.is-active::before { color: var(--accent); }

/* ---------- prose ---------- */
.legal-prose p, .legal-prose li { font-size: 1rem; line-height: 1.75; color: var(--text); }
.legal-prose p { max-width: 70ch; margin: 0 0 1rem; }
.legal-prose ul { list-style: disc; max-width: 70ch; margin: 0 0 1rem; padding-left: 1.35rem; display: flex; flex-direction: column; gap: .55rem; }
.legal-prose li::marker { color: var(--accent); }
.legal-prose strong { color: #fff; font-weight: 600; }
.legal-prose a {
  color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(var(--ambient-rgb), calc(.35 * var(--glow, 1))); text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.legal-prose a:hover { color: var(--accent-bright); text-decoration-color: currentColor; }
.legal-prose h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; margin: 1.5rem 0 .6rem; }
.legal-prose > :last-child, .legal-sub > :last-child { margin-bottom: 0; }

.legal-intro { padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); border-bottom: 1px solid var(--hairline-soft); }
.legal-intro p { font-size: 1.05rem; }

/* ---------- numbered sections ---------- */
.legal-section { padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; border-bottom: 1px solid var(--hairline-soft); }
.legal-content > .legal-section:first-child { padding-top: 0; }
.legal-section h2 {
  display: flex; align-items: baseline; gap: .65rem;
  margin: 0 0 1.1rem;
  font-size: clamp(1.35rem, 2.5vw, 1.6rem); font-weight: 700; line-height: 1.2;
}
.legal-num { flex: none; color: var(--accent); font-variant-numeric: tabular-nums; }
.legal-anchor {
  margin-left: .25rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 400; color: var(--muted);
  opacity: 0; transition: opacity .2s ease, color .2s ease;
}
.legal-section h2:hover .legal-anchor, .legal-anchor:focus-visible { opacity: 1; }
.legal-anchor:hover { color: var(--accent); }
@media (hover: none) { .legal-anchor { opacity: .45; } }

/* Paragon's bordered sub-section */
.legal-sub { margin: 1.25rem 0 1rem; padding: .25rem 0 .25rem 1.25rem; border-left: 2px solid rgba(var(--ambient-rgb), calc(.45 * var(--glow, 1))); }
.legal-sub h3 { margin-top: 0; }

/* emphasised statement (e.g. "all sales are final") */
.legal-callout {
  max-width: 70ch; margin: 0 0 1.25rem; padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: rgba(var(--ambient-rgb), calc(.06 * var(--glow, 1))); border: 1px solid rgba(var(--ambient-rgb), calc(.25 * var(--glow, 1)));
}
.legal-callout p { color: #fff; font-weight: 500; }

/* ---------- footer note + link row ---------- */
.legal-footer { display: flex; flex-direction: column; gap: 1.25rem; padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.legal-footer-note { max-width: 70ch; font-size: .95rem; line-height: 1.7; color: var(--text-70); }
.legal-links { display: flex; flex-wrap: wrap; gap: .75rem; }
.footer-link {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline); background: transparent;
  font-family: var(--font-display); font-size: .9rem; font-weight: 500; letter-spacing: .04em; color: #fff;
  transition: background .2s ease, border-color .2s ease;
}
.footer-link .icon { width: 14px; height: 14px; transition: transform .2s ease; }
.footer-link:hover { background: rgba(255, 255, 255, .05); border-color: var(--accent); }
.footer-link:hover .icon { transform: translate(2px, -2px); }
.footer-link--internal:hover .icon { transform: translateX(2px); }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .legal-layout { grid-template-columns: minmax(0, 800px); }
  .legal-toc { position: static; }
  .legal-toc ol { flex-direction: row; flex-wrap: wrap; gap: 8px; border-left: 0; }
  .legal-toc a {
    margin: 0; padding: 12px 14px; /* 44px touch target */
    border: 1px solid var(--hairline-soft); border-radius: 100px;
    background: rgba(255, 255, 255, .04);
    font-size: .85rem;
  }
  .legal-toc a::before { font-size: .75rem; }
  .legal-toc a:hover { border-color: var(--hairline); }
  .legal-toc a.is-active { border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--ambient-rgb), calc(.08 * var(--glow, 1))); }
}
@media (max-width: 640px) {
  .legal-section, .legal-intro { padding: 1.5rem 0; }
  .legal-content > .legal-section:first-child, .legal-intro { padding-top: 0; }
  .legal-section h2 { font-size: 1.3rem; }
  .legal-meta { flex-direction: column; gap: .25rem; }
  .legal-meta-dot { display: none; }
  .legal-links { flex-direction: column; }
  .footer-link { justify-content: center; }
}
/* phones: the TOC becomes one horizontally scrolling pill strip inside its own container (13 wrapped pills were 550px tall on /privacy/) */
@media (max-width: 640px) {
  .legal-toc ol {
    position: relative;
    flex-wrap: nowrap; gap: 8px;
    margin: 0 -20px; padding: 2px 20px 8px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
  .legal-toc ol::-webkit-scrollbar { display: none; }
  .legal-toc li { flex: none; scroll-snap-align: start; }
  .legal-toc a { white-space: nowrap; }
  .legal-anchor { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -12px 0 -12px -8px; } /* "#" permalink: 44px hit area without growing the heading */
}