/* Legal documents in a modal (static/legal-modal.js; owner 2026-10-01: "make sure its good on
 * mobile too"). A phone gets a full-height sheet (safe areas respected, the document scrolling under
 * a fixed tab row); from 640px a centred reading panel. The document itself is styled by legal.css
 * (.legal-doc), exactly as on its own page. Unscoped on purpose: the sign-in page and the app both
 * load it, and every class here is the modal's own. */

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  font-family: var(--g-font, inherit);
}
.legal-modal[hidden] { display: none; }
.legal-modal-scrim { position: absolute; inset: 0; background: rgba(4, 8, 14, 0.72); }

.legal-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--g-bg, #090d13);
  color: var(--g-fg, #e8eef5);
}

.legal-modal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px 16px;
  background: var(--g-head, #0c1219);
  box-shadow: 0 1px 0 var(--g-card-ring, #1f2a37);
}
.legal-modal-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.legal-modal-tabs::-webkit-scrollbar { display: none; }
.legal-modal-tab {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: var(--g-btn, #16202b);
  box-shadow: inset 0 0 0 1px var(--g-btn-ring, #263342);
  color: var(--g-soft, #b3bfcd);
  font: 600 13px var(--g-font, inherit);
  cursor: pointer;
}
.legal-modal-tab:hover { color: var(--g-strong, #f2f6fa); }
.legal-modal-tab[aria-current="true"] {
  background: rgba(245, 185, 66, 0.12);
  box-shadow: inset 0 0 0 1px rgba(245, 185, 66, 0.45);
  color: var(--g-amber, #f5b942);
}
.legal-modal-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--g-soft, #b3bfcd);
  cursor: pointer;
}
.legal-modal-close:hover { background: var(--g-btn, #16202b); color: var(--g-strong, #f2f6fa); }

.legal-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(32px + env(safe-area-inset-bottom, 0px));
  outline: none;
}
.legal-modal .legal-doc { margin-top: 20px; }
.legal-modal .legal-doc a {
  color: var(--g-amber, #f5b942);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal-modal-loading { color: var(--g-muted, #8b98a9); font-size: 14px; }

/* The page under it stays put while the document scrolls. */
html.legal-modal-open, html.legal-modal-open body { overflow: hidden; }

@media (min-width: 640px) {
  .legal-modal { align-items: center; padding: 24px; }
  .legal-modal-card {
    max-width: 760px;
    height: auto;
    max-height: min(86vh, 920px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--g-card-ring, #1f2a37), 0 24px 64px rgba(0, 0, 0, 0.55);
  }
  .legal-modal-head { padding: 12px 12px 12px 20px; }
  .legal-modal-body { padding: 0 28px 32px; }
  .legal-modal .legal-doc { margin-top: 24px; }
}