/* ══════════════════════════════════════════
   SupraBench — Legal pages (TOS, Privacy, Imprint)
   Shares tokens with style.css but uses a standalone
   scrollable body. The sticky top bar (.legal-topbar)
   replaces the SPA sidebar so users always have a
   one-tap way back into the app, on every viewport.
   ══════════════════════════════════════════ */

html.legal-html, body.legal-body {
  height: auto;
  overflow: auto;
}

.legal-body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--bd);
  line-height: 1.65;
  /* Top padding leaves room for the sticky topbar (3.5rem) plus the
     iOS notch / Dynamic Island. Bottom padding lifts the page above
     the iOS home indicator. Left/right pick up landscape insets. */
  padding: calc(env(safe-area-inset-top, 0px) + 5rem)
           calc(env(safe-area-inset-right, 0px) + 1.5rem)
           calc(env(safe-area-inset-bottom, 0px) + 6rem)
           calc(env(safe-area-inset-left, 0px) + 1.5rem);
}

.legal-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* Bar grows to host the iOS notch / Dynamic Island; inner content
     stays the original 3.5rem so layout (logo size etc.) is unchanged. */
  height: calc(env(safe-area-inset-top, 0px) + 3.5rem);
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: calc(env(safe-area-inset-left, 0px) + 1.5rem);
  padding-right: calc(env(safe-area-inset-right, 0px) + 1.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(3, 3, 3, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.legal-topbar__logo {
  font-family: var(--hd);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.5px;
}
.legal-topbar__logo span { color: var(--accent); }

.legal-topbar__nav {
  display: flex;
  gap: 1.4rem;
  align-items: center;
}
.legal-topbar__nav a {
  color: var(--text2);
  font-family: var(--hd);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color var(--transition);
}
.legal-topbar__nav a:hover { color: var(--accent); }
.legal-topbar__nav a.active { color: var(--accent); }

.legal-container {
  max-width: 780px;
  margin: 0 auto;
}

.legal-container .back-link {
  margin-bottom: 2.5rem;
  text-decoration: none;
}

.legal-title {
  font-family: var(--hd);
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.legal-lead {
  color: var(--text2);
  font-size: 1.05rem;
  margin-bottom: 3rem;
}

.legal-container h2 {
  font-family: var(--hd);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2.4rem;
  margin-bottom: 0.9rem;
  color: var(--text);
}

.legal-container h3 {
  font-family: var(--hd);
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.6rem;
  margin-bottom: 0.6rem;
  color: var(--text);
}

.legal-container p,
.legal-container ul,
.legal-container ol {
  color: var(--text2);
  font-size: 0.98rem;
  margin-bottom: 1rem;
}

.legal-container ul,
.legal-container ol {
  padding-left: 1.4rem;
}

.legal-container li {
  margin-bottom: 0.35rem;
}

.legal-container a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-container a:hover {
  color: var(--text);
}

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

.legal-footer-links {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  color: var(--text3);
  font-family: var(--hd);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 600px) {
  .legal-title { font-size: 2.1rem; }
  .legal-body  {
    padding: calc(env(safe-area-inset-top, 0px) + 4.5rem)
             calc(env(safe-area-inset-right, 0px) + 1rem)
             calc(env(safe-area-inset-bottom, 0px) + 4rem)
             calc(env(safe-area-inset-left, 0px) + 1rem);
  }
  .legal-topbar {
    padding-left: calc(env(safe-area-inset-left, 0px) + 1rem);
    padding-right: calc(env(safe-area-inset-right, 0px) + 1rem);
  }
  .legal-topbar__nav { gap: 0.9rem; }
  .legal-topbar__nav a { font-size: 0.72rem; }
}

@media (max-width: 380px) {
  /* On the smallest phones, hide secondary nav items.
     The logo (= home link) and the active page indicator stay. */
  .legal-topbar__nav a:not(.active):not(.legal-topbar__home) {
    display: none;
  }
}