/*
 * Shared stylesheet for the static /privacy and /terms pages (task
 * skyzai-legal-monitoring-20260918). Plain HTML, not Flutter - these are
 * real documents meant to be read, selected and zoomed, not app screens.
 *
 * Colour tokens are the exact M3 colour-role values from
 * lib/features/chat_tasks/presentation/theme/skyzai_brand_scheme.g.dart
 * (Menexus-GmbH/skyzai_brand, pinned commit 12c2033114ed9c54a4f0b5e73a9ef8f475dc8f01,
 * v8.0.7 - the brand kit already adopted in this repo), not invented hex.
 * Type sizes/weights match lib/.../theme/apu_typography.dart's M3 type
 * scale (headlineSmall/titleLarge/titleMedium/bodyLarge/bodyMedium/labelLarge).
 * Respects prefers-color-scheme (no in-page toggle - these are indexed,
 * linked-to pages, not part of the app's own ThemeCubit session).
 */

@font-face {
  font-family: 'Google Sans Flex';
  src: url('/fonts/GoogleSansFlex-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('/fonts/GoogleSansFlex-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('/fonts/GoogleSansFlex-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  --primary: #1565C0;
  --on-primary: #FFFFFF;
  --primary-container: #D3E4FF;
  --on-primary-container: #001D35;
  --surface: #F8FAFC;
  --on-surface: #111827;
  --on-surface-variant: #4B5563;
  --outline: #6B7280;
  --outline-variant: #D8DEE8;
  --surface-container: #F8FAFC;
  --surface-container-low: #FAFBFD;
  --surface-container-high: #EEF2F7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #FFEB3B;
    --on-primary: #050505;
    --primary-container: #333100;
    --on-primary-container: #FFFDE7;
    --surface: #0A0A0A;
    --on-surface: #FFFDE7;
    --on-surface-variant: #9CA3AF;
    --outline: #555555;
    --outline-variant: #2A2A2A;
    --surface-container: #0A0A0A;
    --surface-container-low: #080808;
    --surface-container-high: #111111;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: 'Google Sans Flex', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  /* Defensive: no single piece of content (a long placeholder, an
     unbroken URL) should ever be able to force the whole page to scroll
     horizontally on a phone-width viewport. */
  overflow-x: hidden;
}

.legal-topbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 16px;
  background: var(--surface-container);
  border-bottom: 1px solid var(--outline-variant);
}

.legal-topbar a.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--on-surface);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}

.legal-topbar .mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex: none;
}

.legal-topbar nav {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.legal-topbar nav a {
  color: var(--on-surface-variant);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 100px;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.legal-topbar nav a[aria-current="page"] {
  color: var(--on-primary-container);
  background: var(--primary-container);
}

.legal-topbar nav a:hover { background: var(--surface-container-high); }

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 96px;
}

h1 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 8px;
}

.effective-date {
  color: var(--on-surface-variant);
  font-size: 14px;
  margin: 0 0 32px;
}

h2 {
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  margin: 40px 0 12px;
  padding-top: 8px;
  border-top: 1px solid var(--outline-variant);
}

section:first-of-type h2 { border-top: none; padding-top: 0; }

h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  margin: 24px 0 8px;
}

p, li { font-size: 16px; line-height: 24px; letter-spacing: 0.5px; }
p { margin: 0 0 16px; }

ul, ol { margin: 0 0 16px; padding-left: 20px; }
li { margin-bottom: 8px; }

a { color: var(--primary); overflow-wrap: anywhere; }

code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
  background: var(--surface-container-high);
  border-radius: 4px;
  padding: 1px 6px;
  /* A long unbroken identifier (e.g. an env-var name) must still wrap on a
     phone-width viewport - caught by the Playwright verification pass,
     task skyzai-legal-monitoring-20260918. */
  overflow-wrap: anywhere;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 14px;
}

th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--outline-variant);
  vertical-align: top;
  overflow-wrap: anywhere;
}

th {
  color: var(--on-surface-variant);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.toc {
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 32px;
}

.toc p { margin: 0 0 8px; font-weight: 500; }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 4px; font-size: 14px; }

footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  color: var(--on-surface-variant);
  font-size: 12px;
  line-height: 16px;
}

@media (max-width: 480px) {
  h1 { font-size: 28px; line-height: 34px; }
  main { padding: 24px 16px 80px; }
}