/* ==========================================================================
   Substory #1256 — the legal pages (Terms, Privacy, Refund, Contact) and
   Pricing: templates/legal/{page,unavailable,pricing}.html.

   * A reading measure of 70ch at most.
   * Logical properties only (#840): margin-block / padding-inline /
     inset-inline, never left/right, so Urdu (rtl) mirrors with no override.
   * Tokens only, AA contrast (#765): --sim-ink on --sim-surface and
     --sim-muted (5.68:1) for secondary text; the draft banner uses the warn
     pair (--sim-warn-ink on --sim-warn-soft).
   Everything is a `.sim-legal*` class, so nothing here touches another page.
   ========================================================================== */

.sim-legal {
  box-sizing: border-box;
  max-inline-size: 70ch;
  margin-inline: auto;
  margin-block: var(--space-8, 32px);
  padding-block: var(--space-8, 32px);
  padding-inline: var(--space-6, 24px);
  background: var(--sim-surface, #FFFFFF);
  color: var(--sim-ink, #0E1418);
  border: 1px solid var(--sim-line, #E3E7EC);
  border-radius: var(--sim-radius-lg, 18px);
  font-family: var(--font-family);
  font-size: var(--text-base, 0.9375rem);
  line-height: var(--leading-relaxed, 1.65);
}

.sim-legal__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-block-end: var(--space-6, 24px);
  color: inherit;
  text-decoration: none;
}

.sim-legal__wordmark {
  font-weight: var(--font-bold, 700);
  font-size: var(--text-lg, 1.125rem);
}

.sim-legal__title {
  margin-block: 0 var(--space-2, 8px);
  font-size: var(--text-xl, 1.5rem);
  line-height: var(--leading-tight, 1.25);
}

.sim-legal__status,
.sim-legal__notice,
.sim-legal__reference {
  margin-block: 0 var(--space-4, 16px);
  color: var(--sim-muted, #5E6872);
  font-size: var(--text-sm, 0.8125rem);
}

.sim-legal__banner {
  margin-block: 0 var(--space-5, 20px);
  padding-block: var(--space-3, 12px);
  padding-inline: var(--space-4, 16px);
  background: var(--sim-warn-soft, #FBF1DC);
  color: var(--sim-warn-ink, #8A5D0A);
  border-inline-start: 4px solid var(--sim-warn, #9A6A0F);
  border-radius: var(--sim-radius-sm, 9px);
  font-weight: var(--font-semibold, 600);
}

.sim-legal__lead,
.sim-legal__price {
  font-size: var(--text-lg, 1.125rem);
}

.sim-legal__text {
  margin-block: var(--space-5, 20px);
}

.sim-legal__list {
  padding-inline-start: var(--space-5, 20px);
}

.sim-legal__list li + li {
  margin-block-start: var(--space-2, 8px);
}

/* Substory #1260, deploy-failure round 1: the Privacy cookies table
   (data-testid="legal-cookies", §9) must fit its section at 390px. With no
   rule it took its min-content width -- <code>django_language</code> cannot
   break (130px) -- and overflowed a 358px section in every locale, scrolling
   /fr/ and /ur/ sideways. Fill the section; only the cookie names (code)
   break anywhere, prose cells wrap at words and hyphenate by their lang.
   Logical properties only (#840). */
.sim-legal table {
  inline-size: 100%;
  max-inline-size: 100%;
  border-collapse: collapse;
  margin-block: var(--space-4, 16px);
  font-size: var(--text-sm, 0.8125rem);
}

.sim-legal th,
.sim-legal td {
  padding-block: var(--space-2, 8px);
  padding-inline: var(--space-2, 8px);
  border-block-end: 1px solid var(--sim-line, #E3E7EC);
  text-align: start;
  vertical-align: top;
  overflow-wrap: break-word;
  hyphens: auto;
}

.sim-legal td code {
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* The same round: base.css resets every element to padding 0, so the text's
   plain <ul>/<ol> drew their `outside` markers ~27px before the item, past
   .sim-legal's 16px phone padding and off the viewport. In ltr that overflow
   is not scrollable; in /ur/ (rtl document) it is, and /ur/privacy/ and
   /ur/refund/ scrolled to 401px. Indent lists so the marker stays inside. */
.sim-legal__text ul,
.sim-legal__text ol {
  padding-inline-start: var(--space-6, 24px);
}

.sim-legal a {
  color: var(--sim-ink, #0E1418);
  text-decoration: underline;
}

.sim-legal__brand,
.sim-legal__brand:hover {
  text-decoration: none;
}

.sim-legal__links {
  margin-block-start: var(--space-8, 32px);
  padding-block-start: var(--space-4, 16px);
  border-block-start: 1px solid var(--sim-line, #E3E7EC);
  font-size: var(--text-sm, 0.8125rem);
}

.sim-legal__links ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px) var(--space-5, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sim-legal__links a {
  display: inline-block;
  min-block-size: var(--sim-tap, 44px);
  line-height: var(--sim-tap, 44px);
}

@media (max-width: 480px) {
  .sim-legal {
    margin-block: 0;
    border-radius: 0;
    border-inline: 0;
    padding-inline: var(--space-4, 16px);
  }
}