/*
 * The Terms of Service and Privacy Policy dialog shown before every payment
 * (js/legal-gate.js). The kit's dialog inside the kit overlay, made taller and
 * wider than a confirmation because it holds two documents, with the policy
 * pages' text classes (.doc-section, .prose, .doc-list, .doc-table -- normally
 * policy.css's, which these pages do not load) restyled at a reading size that
 * fits a dialog. Colour comes only from theme.css tokens.
 */

/* Above everything else that can be open when a payment starts: the pricing
   upsell (200), the AI Designer and AI edit overlays (150/160), other kit
   modals (300). */
.modal.modal--kit.legal-modal {
  z-index: 400;
  align-items: center;
  padding: 32px 16px;
}

/* Nothing inside may grow the box past its frame: the foot (Accept, Decline)
   must always be inside it, whatever the window height. */
.legal-modal .legal-dialog {
  width: 760px;
  max-height: calc(100dvh - 64px);
  overflow: hidden;
}

.legal-dialog__head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.legal-dialog__lede { margin: 0; font: var(--text-body); color: var(--color-ink-2); }

.legal-dialog__summary {
  margin: 14px 24px 0;
  padding: 12px 16px;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-control);
  background: var(--color-field-reading);
}
.legal-dialog__summary-title { margin: 0 0 6px; font: var(--text-button); color: var(--color-ink); }
.legal-dialog__summary-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font: var(--text-body-sm); color: var(--color-ink); }

/* `position: relative` is load-bearing: the boxes' inputs are `.sr-only`
   (absolutely positioned), and without a positioned ancestor here they are
   placed against the overlay, so focusing one scrolled the whole sheet tens of
   thousands of pixels away on a phone. */
.legal-dialog__docs {
  position: relative;
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 14px 24px 0;
  padding: 18px 22px 22px;
  border: 1px solid var(--color-edge-strong);
  border-radius: var(--radius-control);
  background: var(--color-ground);
}
.legal-dialog__docs:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
.legal-dialog__loading,
.legal-dialog__error { margin: 0; font: var(--text-body); color: var(--color-ink-2); }
.legal-dialog__error { color: var(--color-danger); }
.legal-dialog__end { margin: 28px 0 0; padding-top: 14px; border-top: var(--rule-hair); font: var(--text-body-sm); color: var(--color-ink-2); text-align: center; }

.legal-doc + .legal-doc { margin-top: 36px; padding-top: 28px; border-top: var(--rule-strong); }
.legal-doc__title { margin: 0; font: var(--text-title-md); letter-spacing: var(--tracking-title-md); color: var(--color-ink); }
.legal-doc__version { margin: 4px 0 0; font: var(--text-body-sm); color: var(--color-ink-2); }

.legal-doc .doc-section { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.legal-doc .tt-section-head { display: block; margin: 0; padding: 0; border: 0; }
.legal-doc .tt-section-head__title { margin: 0; font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); color: var(--color-ink); }
.legal-doc .doc-h3 { margin: 6px 0 0; font: var(--text-button); color: var(--color-ink); }
.legal-doc .prose { margin: 0; font: var(--text-body); color: var(--color-ink); }
.legal-doc .doc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.legal-doc .doc-list__item { position: relative; padding-left: 18px; font: var(--text-body); color: var(--color-ink); }
.legal-doc .doc-list__item::before { content: ''; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; background: currentColor; }
.legal-doc em { font-style: normal; font-weight: 600; }
.legal-doc .doc-note { margin-top: 4px; }
.legal-doc .doc-table { width: 100%; border-collapse: collapse; table-layout: fixed; font: var(--text-body-sm); }
.legal-doc .doc-table th,
.legal-doc .doc-table td { padding: 8px 10px 8px 0; text-align: left; vertical-align: top; border-bottom: var(--rule-hair); color: var(--color-ink); overflow-wrap: anywhere; }
.legal-doc .doc-table thead th { font: var(--text-label); color: var(--color-ink-2); border-bottom: var(--rule-strong); }
.legal-doc .ref-list { display: flex; flex-direction: column; gap: 4px; }

.legal-dialog__confirm { display: flex; flex-direction: column; gap: 6px; padding: 12px 24px 0; }
.legal-dialog__progress { margin: 0; font: var(--text-body-sm); color: var(--color-ink-2); transition: color 0.2s ease; }
.legal-dialog__progress.is-done { color: var(--color-success); }
.legal-dialog__progress.is-nudged { color: var(--color-ink); font-weight: 600; }
.legal-dialog__checks { display: flex; flex-direction: column; }
.legal-dialog__check { position: relative; }
.legal-dialog__check .tt-check__text { color: var(--color-ink); }
.legal-dialog__docs .legal-dialog__summary { margin: 0 0 20px; }
.legal-dialog__assent { margin: 2px 0 0; font: var(--text-body-sm); color: var(--color-ink-2); }

.legal-dialog .tt-btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }

/* A phone: the kit's bottom sheet (theme.css), nearly full height, the text
   region taking whatever the summary and the boxes leave. */
[data-layout='mobile'] .modal.modal--kit.legal-modal { padding: 0; align-items: flex-end; }
[data-layout='mobile'] .legal-modal .legal-dialog { max-height: 96dvh; }
[data-layout='mobile'] .legal-dialog__summary,
[data-layout='mobile'] .legal-dialog__docs { margin-left: 16px; margin-right: 16px; }
[data-layout='mobile'] .legal-dialog__docs { padding: 14px 16px 18px; min-height: 140px; }
[data-layout='mobile'] .legal-dialog__lede { font: var(--text-body-sm); }
[data-layout='mobile'] .legal-dialog__docs .legal-dialog__confirm { padding: 16px 0 0; }