/* int_lms legal pages — consumer-side layout for /legal/*.
 *
 * The document TEXT and its own stylesheet (int_legal/legal.css) belong to the shared
 * int_legal package in devops. This file only lays that text out inside Yoshuko's shell:
 * gutters, measure, heading weight, tables at phone width, and the forms and switches
 * this app owns. It never changes the case, wording or order of a clause.
 */

/* ── Shell ─────────────────────────────────────────────────────────────── */
.legal-page.container {
  padding-inline: 1rem; /* 16px: the chrome's gutter, not Bootstrap's 12px */
  --legal-measure: 40rem; /* ~75 characters of Inter body text: one right edge for prose */
}

/* 576-991: the header and footer are Bootstrap `.container`s (540 / 720 wide, 12px
 * padding), so their content starts at x≈36 at 768. The `u-mw-*` cap (820px) is wider
 * than those breakpoints, which pinned the document to a 16px edge under a 36px chrome.
 * Same box as the chrome here; the doubled class outranks the doubled utility. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .legal-page.container.container {
    max-width: 540px;
    padding-inline: .75rem;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .legal-page.container.container {
    max-width: 720px;
  }
}

.legal-page h1 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.legal-page .lead {
  max-width: var(--legal-measure);
}

/* Below lg the lede at 1.25rem is the same size as the h2s it introduces. */
@media (max-width: 991.98px) {
  .legal-page .lead {
    font-size: 1.125rem;
  }
}

@media (max-width: 575.98px) {
  .legal-page .lead {
    font-size: 1.0625rem;
  }
}

/* "← All legal documents" is the only way back to the hub: a navigation row. */
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 44px;
  color: var(--color-muted-fg);
}

/* "Go to the complaint form": the page's only action starts ~2,700px down. */
.legal-jump {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 44px;
  font-weight: 600;
}

#legal-notice-required-key .legal-required {
  margin-left: 0;
}

.legal-section-title {
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* One h2 size on every legal page: the document h2s are `.h5` (1.25rem), so the form
 * titles and the contact heading are too. */
.legal-page h2.legal-section-title {
  font-size: 1.25rem;
}

/* The required marker: the palette's error token, one spacing rule. */
.legal-required {
  color: var(--color-error);
  margin-left: .125rem;
}

/* ── Document body (shared text, laid out here) ────────────────────────── */
.legal-page .int-legal-body h2 {
  font-weight: 700;
  margin-top: 2.5rem;
}

.legal-page .int-legal-body h3,
.legal-page .int-legal-body .h6 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.5rem;
}

.legal-page .int-legal-body p,
.legal-page .int-legal-body li {
  max-width: var(--legal-measure);
}

/* Operative sentences in the shared bodies are marked `small text-body-secondary`.
 * Fine print on a contract reads as hiding something: body size and colour. */
.legal-page .int-legal-body p.small,
.legal-page .int-legal-body .small.text-body-secondary {
  font-size: 1rem;
  color: var(--color-fg) !important;
}

/* Terms 17.5: the class-action waiver is an inline <span> inside <strong>. An inline box
 * with a border draws its frame on every line box, so each wrapped line got a rule
 * through the capitals and the clause read as struck out. As a block it is one frame. */
.legal-page .int-legal-body li .int-legal-conspicuous,
.legal-page .int-legal-body strong .int-legal-conspicuous {
  display: block;
  margin: .75rem 0;
}

.legal-page .int-legal-body .int-legal-conspicuous {
  font-size: 1rem;
  border-color: var(--color-muted-fg) !important; /* keeps the 2px weight */
  background-color: var(--color-surface-raised);
  /* Capitals spanning the whole 788px column ran ~90 characters a line, the hardest
   * lines on the page to track. Capped to the prose measure, with the positive
   * tracking capitals need. Case and wording untouched. */
  max-width: var(--legal-measure);
  letter-spacing: .02em;
}

@media (max-width: 575.98px) {
  .legal-page .int-legal-body .int-legal-conspicuous {
    padding: .75rem;
  }
  .legal-page .int-legal-body ul,
  .legal-page .int-legal-body ol {
    padding-left: 1.25rem;
  }
}

/* One callout language: neutral (summary, pointer) and caution (Affiliate §3/§4). */
.legal-page .int-legal-body .int-legal-callout,
.legal-callout {
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: .375rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  max-width: var(--legal-measure);
}

/* The shared bodies mark their callouts with Bootstrap's `.border`, whose shorthand is
 * `!important` and flattened the left rule back to a 1px hairline: the r3 "primary left
 * rule" on the data-residency callout (and the Terms summary) never rendered. */
.legal-page .int-legal-body .int-legal-callout.border {
  border-color: var(--color-border) !important;
  border-left: 3px solid var(--color-primary) !important;
}

.legal-callout ul,
.legal-page .int-legal-body .int-legal-callout ul {
  padding-left: 1.1rem;
}

/* One summary dialect for both contracts: the same bullet rhythm in each. */
.legal-callout li + li,
.legal-page .int-legal-body .int-legal-callout li + li {
  margin-top: .375rem;
}

/* Caution keeps amber in the RULE only (the accent is decorative, not a surface). */
.legal-callout--caution {
  border-left-color: #92400E;
}

.legal-callout--caution .legal-callout-title {
  color: #92400E;
}

.legal-callout--danger {
  /* The urgent route must not read like the copyright pointer beside it (design QA r5). */
  border-left: 4px solid var(--color-error);
  background-color: color-mix(in srgb, var(--color-error-surface) 70%, var(--color-surface));
}

/* Icon + label as a flex row: at 390 the full-width button collapsed the space after
 * the envelope glyph and the icon touched "Email". */
#report-child-safety-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.legal-callout-title {
  font-weight: 700;
  margin-bottom: .375rem;
}

/* Tables. The shared rule that contains them is scoped to `.int-legal`, a wrapper no
 * int_lms page carries, so the privacy table widened the whole page by 93px at 390. */
.legal-page .int-legal-body table thead th {
  background-color: var(--color-surface-raised);
  font-weight: 600;
  border-bottom: 2px solid var(--color-border-strong);
}

/* The first column names the row (category, provider): set as a row header. */
.legal-page .int-legal-body tbody td:first-child {
  font-weight: 600;
}

@media (max-width: 575.98px) {
  /* Fallback when legal-pages.js has not run: the table scrolls inside itself, and an
   * edge shadow (local/scroll backgrounds) says there is more to the right. */
  .legal-page .int-legal-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    font-size: .9375rem;
    background:
      linear-gradient(to right, var(--color-surface) 30%, transparent) left center / 2rem 100% no-repeat local,
      linear-gradient(to left, var(--color-surface) 30%, transparent) right center / 2rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(44, 35, 33, .18), transparent) left center / .75rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(44, 35, 33, .18), transparent) right center / .75rem 100% no-repeat scroll;
  }

  /* Stacked rows (legal-pages.js labels every cell from its column heading): at phone
   * width a 4-column table clipped "Why we process it", the column a reader needs. */
  .legal-page .int-legal-body table.legal-table-stacked {
    overflow: visible;
    background: none;
  }
  .legal-page .int-legal-body table.legal-table-stacked thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .legal-page .int-legal-body table.legal-table-stacked tbody,
  .legal-page .int-legal-body table.legal-table-stacked tr,
  .legal-page .int-legal-body table.legal-table-stacked td {
    display: block;
    width: 100%;
  }
  .legal-page .int-legal-body table.legal-table-stacked tr {
    border: 1px solid var(--color-border);
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
    background-color: var(--color-surface);
  }
  .legal-page .int-legal-body table.legal-table-stacked td {
    border: 0;
    padding: .25rem 0;
  }
  .legal-page .int-legal-body table.legal-table-stacked td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-muted-fg);
  }
}

/* ── Contact block (this app's own partial) ────────────────────────────── */
#legal-notice-address {
  background-color: var(--color-surface-raised) !important;
  border-color: var(--color-border) !important;
}

/* Labels and values as one 14rem/1fr grid from 576 up: in `col-sm-4/8` each value sat
 * ~270px right of its label and the pairs floated apart at 1440. */
@media (min-width: 576px) {
  #legal-contact-list {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    column-gap: 1rem;
    margin-inline: 0;
  }
  #legal-contact-list > dt,
  #legal-contact-list > dd {
    width: auto;
    padding-inline: 0;
  }
}

/* ── Contents and end-of-document navigation (legal-pages.js fills them) ─ */
.legal-contents {
  border: 1px solid var(--color-border);
  border-radius: .375rem;
  background-color: var(--color-surface-raised);
  padding: .5rem 1rem;
  margin-bottom: 2rem;
  max-width: var(--legal-measure);
}

.legal-contents > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
}
/* display:flex drops the disclosure triangle; draw a chevron so the closed box reads as
   something that opens (design QA r5). */
.legal-contents > summary { list-style: none; }
/* Moved inside the body by legal-pages.js: keep the body's list rules off it. */
.legal-page .int-legal-body .legal-contents ol { padding-left: 0; }
.legal-page .int-legal-body .legal-contents li { margin-bottom: 0; padding-left: 0; max-width: none; }
.legal-contents > summary::-webkit-details-marker { display: none; }
.legal-contents > summary::after {
  content: "";
  margin-inline-start: auto;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.legal-contents[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

.legal-contents ol {
  list-style: none;
  padding-left: 0;
  margin: .25rem 0 .5rem;
  columns: 2 16rem;
  column-gap: 1.5rem;
}

.legal-contents li {
  break-inside: avoid;
}

.legal-contents a {
  display: flex;
  align-items: center;
  min-height: 36px;
  text-decoration: none;
}

.legal-contents a:hover,
.legal-contents a:focus-visible {
  text-decoration: underline;
}

.legal-doc-end {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  margin-top: 2.5rem;
}

.legal-doc-end a {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 44px;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .legal-contents a {
    min-height: 44px;
  }
}

@media (max-width: 575.98px) {
  #legal-contact-list dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── Index ─────────────────────────────────────────────────────────────── */
#legal-document-list .list-group-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-color: var(--color-border);
}

#legal-document-list .legal-row-chevron {
  margin-left: auto;
  color: var(--color-muted-fg);
}

.legal-issue-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.legal-issue-card .btn {
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap; /* one line at every width: 3-up at 1440 wrapped each to two */
}

@media (max-width: 575.98px) {
  .legal-issue-card .btn {
    width: 100%;
  }
}

/* ── Notice forms ──────────────────────────────────────────────────────── */
.legal-step {
  margin-bottom: 2rem;
}

.legal-step + .legal-step {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}

.legal-step-legend {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: .75rem;
}

/* Radios and sworn-declaration checkboxes: the whole row is the target, ≥44px. */
.legal-check {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  min-height: 44px;
  padding-block: .5rem;
  padding-left: 0;
  margin-bottom: .25rem;
}

.legal-check .form-check-input {
  float: none;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: .125rem 0 0;
}

.legal-check .form-check-label {
  flex: 1 1 auto;
  cursor: pointer;
}

/* The signature sat 16px under the last declaration and read as part of it. */
.legal-check + .mb-3 {
  margin-top: 1.25rem;
}

.legal-submit {
  font-weight: 600;
  min-height: 48px;
  margin-top: .5rem;
}

@media (max-width: 575.98px) {
  .legal-submit {
    width: 100%;
  }
}

/* ── Cookie preferences ────────────────────────────────────────────────── */
.legal-switch {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  padding-left: 0;
  margin-bottom: .5rem;
}

.legal-switch .form-check-input {
  float: none;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 1.375rem;
  margin: 0;
  border-color: var(--color-muted-fg); /* off state: 5.7:1, was ~1.9:1 */
}

.legal-switch .form-check-label {
  flex: 1 1 auto;
  color: var(--color-fg);
  cursor: pointer;
}

/* "Strictly necessary" is disabled but informational: not greyed to 3.5:1. */
.legal-switch .form-check-input:disabled ~ .form-check-label {
  opacity: 1;
}

/* Always on, so drawn ON at full strength: Bootstrap's :disabled opacity made the one
 * switch that is on the faintest on the panel. */
.legal-switch .form-check-input:disabled:checked {
  opacity: 1;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Off-state knob in the muted ink (#6B625C), not Bootstrap's ~1.9:1 grey. */
.legal-switch .form-check-input:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236B625C'/%3e%3c/svg%3e");
}

.legal-prefs-actions .btn-primary {
  font-weight: 600;
}

.legal-prefs-actions .btn-outline-secondary {
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .legal-prefs-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
  .legal-prefs-actions #gc-save-prefs,
  .legal-prefs-actions #gc-prefs-status {
    grid-column: 1 / -1;
  }
  .legal-prefs-actions .btn {
    min-height: 44px;
  }
}

/* ── /legal/review/ (re-consent) ───────────────────────────────────────── */
.legal-review-eyebrow {
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
  margin-bottom: 0;
}

.legal-review-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  margin-top: 1.5rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: .75rem;
}

.legal-review-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
  color: var(--color-success);
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.legal-review-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

#legal-review-pending {
  margin-top: 1.5rem;
}