/* ============================================================================
 * Privacy page-local stylesheet.
 *
 * Public route /privacy. Consumes design-tokens.v2.css for typography, colors,
 * radii and shadows; this stylesheet only declares page-specific layout
 * (hero, sticky TOC, article card, table styles).
 *
 * Mirror of login.css contract: extracted from inline <style> so the CSP can
 * eventually drop 'unsafe-inline' from style-src for this public route.
 * ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ds-canvas);
  color: var(--ds-text);
  font-size: var(--ds-fs-body);
  line-height: var(--ds-lh-body);
}

/* Skip link for keyboard users (WCAG 2.4.1). */
.pp-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ds-text);
  color: var(--ds-n-0);
  padding: 8px 14px;
  border-radius: var(--ds-r-md);
  font-size: var(--ds-fs-small);
  font-weight: 600;
  z-index: 100;
}
.pp-skip-link:focus { left: 12px; top: 12px; }

a {
  color: var(--ds-accent);
  text-decoration: none;
  font-weight: 600;
}
a:hover { text-decoration: underline; }

.pp-container {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

/* ─── Header / hero (dark accent band) ──────────────────────────────────── */

.pp-shell {
  background:
    linear-gradient(135deg, rgba(15, 18, 25, 0.92), rgba(35, 38, 46, 0.88)),
    radial-gradient(circle at 20% 5%, rgba(var(--ds-accent-rgb), 0.32), transparent 32%),
    var(--ds-n-900);
  color: var(--ds-n-0);
}

.pp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
}

.pp-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ds-n-0);
}
.pp-brand:hover { text-decoration: none; }

.pp-brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--ds-r-lg);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  flex: 0 0 auto;
  color: var(--ds-n-0);
}
.pp-brand-mark svg { width: 23px; height: 23px; }

.pp-brand-name {
  display: block;
  font-size: var(--ds-fs-h2);
  font-weight: 700;
  white-space: nowrap;
}
.pp-brand-caption {
  display: block;
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--ds-fs-caption);
  white-space: nowrap;
}

.pp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pp-nav-link {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--ds-fs-body);
  font-weight: 600;
}
.pp-nav-link:hover { color: var(--ds-n-0); }

/* ─── Buttons (page-scoped, dark-band variants) ─────────────────────────── */

.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--ds-r-md);
  padding: 0 16px;
  font-size: var(--ds-fs-body);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.pp-btn:hover { text-decoration: none; }
.pp-btn:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
}

.pp-btn-primary {
  background: var(--ds-n-0);
  color: var(--ds-n-900);
}
.pp-btn-primary:hover { background: var(--ds-n-50); }

.pp-btn-secondary {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: var(--ds-n-0);
}
.pp-btn-secondary:hover { background: rgba(255, 255, 255, 0.18); }

/* ─── Hero ──────────────────────────────────────────────────────────────── */

.pp-hero {
  max-width: 850px;
  padding: 40px 0 56px;
}

.pp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ds-r-pill);
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.84);
  font-size: var(--ds-fs-overline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Lifted toward white so it reads against the dark gradient hero — the DS
 * accent alone (#1d6c5c) loses presence on var(--ds-n-900). */
.pp-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-accent) 65%, white);
}

.pp-h1 {
  max-width: 760px;
  margin: 22px 0 16px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: var(--ds-lh-tight);
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--ds-n-0);
}

.pp-hero-copy {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--ds-fs-h2);
}

.pp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
}

/* Subtitle inline below <h1> — replaces the previous floating .pp-updated
 * pill. Tighter coupling to the document title makes the "when was this
 * last updated" signal much easier to scan in a legal document. */
.pp-meta-line {
  margin: 4px 0 14px;
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--ds-fs-small);
  font-weight: 500;
  letter-spacing: 0;
}

/* ─── Main content area (light canvas) ──────────────────────────────────── */

.pp-main {
  padding: 64px 0 86px;
}

.pp-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.pp-toc {
  position: sticky;
  top: var(--ds-space-6);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-space-5);
  box-shadow: var(--ds-shadow-xs);
}

.pp-toc-title {
  margin: 0 0 12px;
  color: var(--ds-accent);
  font-size: var(--ds-fs-overline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pp-toc a {
  display: block;
  padding: var(--ds-space-2) 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-fs-small);
  font-weight: 600;
  transition: color 120ms ease;
}
.pp-toc a:hover { color: var(--ds-text); text-decoration: none; }
/* Highlight the section heading the user just navigated to (CSS-only via
 * :target — no JS scrollspy). Helps orient on a long policy page. The
 * `:target` pseudo-class only matches the element whose `id` matches the
 * URL hash, so this applies to <h2 id="…"> inside the card. */
.pp-card h2:target {
  color: var(--ds-accent);
  scroll-margin-top: var(--ds-space-6);
}
.pp-toc a:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
  border-radius: var(--ds-r-sm);
}

/* Legal-document card: a long-form reading surface should feel anchored, not
 * floating. Using xs shadow keeps the card grounded next to the sticky TOC. */
.pp-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-xl);
  padding: clamp(24px, 4vw, 44px);
  box-shadow: var(--ds-shadow-xs);
  overflow: hidden;
}

.pp-card h2 {
  font-size: var(--ds-fs-h1);
  font-weight: 700;
  color: var(--ds-text);
  margin: 2.2rem 0 0.75rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ds-border);
  line-height: var(--ds-lh-snug);
}
.pp-card h2:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* Reading-density override for legal copy paragraphs — kept slightly looser
 * than --ds-lh-body for long-form readability. */
.pp-card p {
  margin: 0 0 0.75rem;
  color: var(--ds-text);
  line-height: 1.65;
}

.pp-card ul {
  margin: 0.5rem 0 0.75rem 1.5rem;
  color: var(--ds-text);
  line-height: 1.65;
}
.pp-card ul li { margin-bottom: 0.4rem; }

.pp-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg);
}

.pp-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-fs-small);
  min-width: 620px;
}

.pp-card th {
  background: var(--ds-n-50);
  text-align: left;
  padding: 0.75rem 0.85rem;
  font-weight: 700;
  color: var(--ds-text);
  border-bottom: 1px solid var(--ds-border);
}
.pp-card td {
  padding: 0.75rem 0.85rem;
  border-top: 1px solid var(--ds-border-soft);
  color: var(--ds-text);
  vertical-align: top;
}
.pp-card th + th,
.pp-card td + td {
  border-left: 1px solid var(--ds-border-soft);
}
.pp-card tr:nth-child(even) td { background: var(--ds-n-25); }

.pp-highlight {
  background: var(--ds-success-bg);
  border: 1px solid color-mix(in srgb, var(--ds-success) 25%, transparent);
  border-left: 4px solid var(--ds-success);
  padding: 0.9rem 1rem;
  border-radius: 0 var(--ds-r-lg) var(--ds-r-lg) 0;
  margin: 1.1rem 0;
  font-size: var(--ds-fs-small);
  color: var(--ds-success-fg);
  font-weight: 700;
}

/* Ensure links inside the highlight inherit the success foreground color
 * so contrast remains AA on the success-bg tint (var(--ds-accent) drops to
 * ~4.85:1 on this background, which is the WCAG AA limit). */
.pp-highlight a { color: var(--ds-success-fg); text-decoration: underline; }

/* ─── Footer ────────────────────────────────────────────────────────────── */

.pp-footer {
  border-top: 1px solid var(--ds-border);
  background: var(--ds-surface);
  padding: 24px 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-fs-small);
}

.pp-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.pp-footer-links {
  display: flex;
  align-items: center;
  gap: var(--ds-space-5);
}
.pp-footer-links a { color: var(--ds-text); font-weight: 600; }
.pp-footer-links a:hover { color: var(--ds-accent); }

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .pp-layout { grid-template-columns: 1fr; }
  .pp-toc { position: static; }
}

/* Responsive table → stacked rows at small breakpoints.
 * Avoids horizontal scroll inside the card on phones, which breaks the
 * vertical reading flow. The first <td> of each row carries the bold
 * category label (matches the leftmost column of the desktop table). */
@media (max-width: 640px) {
  .pp-table-wrap {
    overflow-x: visible;
    border: none;
    border-radius: 0;
  }
  .pp-card table { min-width: 0; display: block; }
  .pp-card thead { display: none; }
  .pp-card tbody { display: block; }
  .pp-card tr {
    display: block;
    padding: var(--ds-space-3) 0;
    border-top: 1px solid var(--ds-border);
  }
  .pp-card tr:first-child { border-top: none; }
  .pp-card td {
    display: block;
    border: none;
    padding: var(--ds-space-1) 0;
    background: transparent;
  }
  .pp-card td:first-child {
    font-weight: 700;
    color: var(--ds-text);
    padding-bottom: var(--ds-space-2);
  }
  .pp-card td:not(:first-child) {
    color: var(--ds-text-muted);
    font-size: var(--ds-fs-small);
  }
  .pp-card tr:nth-child(even) td { background: transparent; }
}

@media (max-width: 640px) {
  .pp-container { width: min(100% - 28px, 1120px); }
  .pp-topbar { align-items: flex-start; }
  .pp-topbar-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  /* Keep the secondary nav link visible on mobile — it's the only path back
   * to /tutorial-acesso besides the footer-row which is many scrolls away on
   * a long policy page. Shrink the typography to fit. */
  .pp-nav-link { font-size: var(--ds-fs-small); }
  .pp-h1 { font-size: var(--ds-fs-display); }
  .pp-hero { padding: 42px 0 58px; }
  .pp-main { padding: 42px 0 64px; }
  .pp-footer-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pp-btn { transition: none; }
}