/*
 * legal.css — brand-styled rendering for long-form legal documents
 *
 * Loaded by src/services/legalNoticeRenderer.js for /privacy, /privacy/consumer-health-data,
 * and /terms. Layers on top of public/assets/styles.css to provide reading-mode typography,
 * brand color palette, and reading-rhythm spacing for the long-form legal pages.
 *
 * All colors and fonts reference brand tokens from public/assets/tokens.css and
 * public/assets/fonts.css. Do NOT redefine brand colors here; consume via var(--...).
 *
 * Brand discipline notes (from tokens.css comments):
 * - Terracotta: signature accent — NEVER more than ~15% of composition.
 * - font-weight-bold (700) is reserved for hero numbers + critical alerts, NOT body / labels / section headers.
 * - Fraunces (display) for headings; Satoshi (body) for body copy; JetBrains Mono for inline code.
 */

/* Outer canvas: warm-stone, the brand's default light background.
   The renderer wraps content in <main class="app"><section class="panel">; we restyle .panel
   for legal docs without disturbing other surfaces (Settings, Dashboard etc. don't load legal.css). */
body {
  background: var(--color-primitive-warm-stone, #f2efeb);
  color: var(--color-primitive-deep-ink, #0f1a2a);
  font-family: var(--font-family-body, Satoshi, Calibri, sans-serif);
  font-size: var(--font-size-md, 1.0625rem); /* 17px — emphasized body for reading rhythm */
  line-height: var(--font-line-height-relaxed, 1.6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The .panel card on the warm-stone background: white raised surface with reading-mode max-width. */
.app > .panel,
.app .panel {
  background: var(--color-primitive-white, #ffffff);
  max-width: 45rem; /* ~720px — long-form legal-document reading rhythm */
  margin: var(--spacing-12, 3rem) auto;
  padding: var(--spacing-12, 3rem) clamp(var(--spacing-6, 1.5rem), 5vw, var(--spacing-12, 3rem));
  border-radius: var(--spacing-2, 0.5rem);
  box-shadow: 0 1px 3px rgba(15, 26, 42, 0.04), 0 8px 24px rgba(15, 26, 42, 0.06);
}

/* Headings — Fraunces display, brand typographic scale.
   No font-weight-bold (700); that's reserved for hero numbers. */
.app .panel h1,
.app .panel h2,
.app .panel h3,
.app .panel h4 {
  font-family: var(--font-family-display, Fraunces, Georgia, serif);
  color: var(--color-primitive-deep-ink, #0f1a2a);
  letter-spacing: var(--font-letter-spacing-tight, -0.01em);
  font-weight: var(--font-weight-light, 300);
  margin-top: var(--spacing-12, 3rem);
  margin-bottom: var(--spacing-4, 1rem);
  line-height: var(--font-line-height-snug, 1.25);
}

.app .panel h1 {
  font-size: var(--font-size-3xl, 2.5625rem); /* 41px */
  margin-top: 0;
  letter-spacing: var(--font-letter-spacing-tight, -0.01em);
}

.app .panel h2 {
  font-size: var(--font-size-2xl, 2.0625rem); /* 33px */
  padding-top: var(--spacing-4, 1rem);
  border-top: 1px solid rgba(138, 138, 135, 0.18); /* warm-grey @ low opacity */
}

/* The first h2 in the document shouldn't have the section divider (it's right after the title). */
.app .panel h1 + h2,
.app .panel header + h2 {
  border-top: none;
  padding-top: 0;
}

.app .panel h3 {
  font-size: var(--font-size-xl, 1.625rem); /* 26px */
  font-weight: var(--font-weight-regular, 400);
}

.app .panel h4 {
  font-size: var(--font-size-lg, 1.3125rem); /* 21px */
  font-weight: var(--font-weight-medium, 500);
  margin-top: var(--spacing-8, 2rem);
}

/* Body paragraphs and lists */
.app .panel p {
  margin: 0 0 var(--spacing-4, 1rem);
}

.app .panel ul,
.app .panel ol {
  margin: 0 0 var(--spacing-4, 1rem);
  padding-left: var(--spacing-6, 1.5rem);
}

.app .panel li {
  margin-bottom: var(--spacing-2, 0.5rem);
}

.app .panel li > strong:first-child {
  /* Lead-bold pattern in §0 summary bullets — emphasize without going to bold weight */
  font-weight: var(--font-weight-semibold, 600);
}

.app .panel strong {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-primitive-deep-ink, #0f1a2a);
}

.app .panel em {
  /* Fraunces italic reserved for emphasis (terracotta color) per brand discipline */
  font-style: italic;
  color: var(--color-primitive-terracotta, #c2704e);
}

/* Links — terracotta with persistent underline (long-form reading expects predictable affordance) */
.app .panel a {
  color: var(--color-primitive-terracotta, #c2704e);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness 120ms ease-in-out;
}

.app .panel a:hover,
.app .panel a:focus {
  text-decoration-thickness: 2px;
}

.app .panel a:focus-visible {
  outline: 2px solid var(--color-primitive-terracotta, #c2704e);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Inline code — JetBrains Mono with subtle warm-stone tinted background */
.app .panel code {
  font-family: var(--font-family-mono, 'JetBrains Mono', Consolas, monospace);
  font-size: 0.92em;
  background: var(--color-primitive-warm-stone, #f2efeb);
  color: var(--color-primitive-deep-ink, #0f1a2a);
  padding: 0.1em 0.4em;
  border-radius: 0.2em;
  border: 1px solid rgba(138, 138, 135, 0.18);
}

/* Tables — §10 sub-processor table, §24 CCPA categories, §26 changelog */
.app .panel table {
  width: 100%;
  /* table-layout: fixed is REQUIRED so columns get distributed widths and the overflow-wrap
     rule on td/th below actually wraps long URLs. Without fixed layout, the browser sizes
     columns to fit their unbreakable content (URLs without word-break points), which forces
     the table wider than the 45rem panel container. */
  table-layout: fixed;
  border-collapse: collapse;
  margin: var(--spacing-6, 1.5rem) 0 var(--spacing-8, 2rem);
  font-size: var(--font-size-sm, 0.8125rem); /* 13px — denser for tabular reading */
  line-height: var(--font-line-height-normal, 1.45);
}

.app .panel thead {
  background: var(--color-primitive-warm-stone, #f2efeb);
}

.app .panel th {
  text-align: left;
  font-family: var(--font-family-body, Satoshi, sans-serif);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-primitive-deep-ink, #0f1a2a);
  letter-spacing: var(--font-letter-spacing-normal, 0);
  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
  border-bottom: 2px solid rgba(138, 138, 135, 0.32); /* warm-grey @ stronger opacity */
  vertical-align: top;
}

.app .panel td {
  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
  border-bottom: 1px solid rgba(138, 138, 135, 0.18);
  vertical-align: top;
}

/* Wrap long URLs and other unbreakable strings inside table cells so they don't
   force the table wider than the 45rem panel container. URLs like
   https://www.anthropic.com/legal/privacy have no native word-break points;
   overflow-wrap: anywhere lets the browser break mid-string when needed. */
.app .panel th,
.app .panel td {
  overflow-wrap: anywhere;
  word-break: break-word; /* older syntax fallback */
}

.app .panel tr:last-child td {
  border-bottom: none;
}

/* Mobile: allow horizontal scroll on tables wider than viewport. */
@media (max-width: 600px) {
  .app .panel table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Blockquotes — terracotta left border, slight indent */
.app .panel blockquote {
  border-left: 3px solid var(--color-primitive-terracotta, #c2704e);
  padding: var(--spacing-2, 0.5rem) 0 var(--spacing-2, 0.5rem) var(--spacing-6, 1.5rem);
  margin: var(--spacing-6, 1.5rem) 0;
  color: rgba(15, 26, 42, 0.85); /* deep-ink slightly muted */
  font-style: italic;
}

.app .panel blockquote p:last-child {
  margin-bottom: 0;
}

/* Horizontal rules — section breaks */
.app .panel hr {
  border: none;
  height: 1px;
  background: rgba(138, 138, 135, 0.24);
  margin: var(--spacing-8, 2rem) 0;
}

/* "Return to Revora" link at bottom + final paragraph */
.app .panel > p:last-child {
  margin-top: var(--spacing-8, 2rem);
  padding-top: var(--spacing-4, 1rem);
  border-top: 1px solid rgba(138, 138, 135, 0.18);
}

/* Muted prose — used for the "Past versions of this notice are available on request" sentence
   and similar metadata. Markdown source doesn't tag these with a class; we accept they
   render in default body color. The brand tradeoff: clarity > excess decoration. */

/* Anchor target for deep-linked sections (e.g. /privacy#10-3-tier-3-authorization-sub-processors).
   Scroll-margin lifts the target below the rendered top edge so it's not flush against the panel border. */
.app .panel :target {
  scroll-margin-top: var(--spacing-8, 2rem);
}

/* Reduced motion: tone down hover transition */
@media (prefers-reduced-motion: reduce) {
  .app .panel a {
    transition: none;
  }
}