/* Aether legal pages: Classic / Emerald theme layer + header and mobile menu.
   Classic values live in each page's own :root and are the original colours.
   Emerald values come from the app (AetherThemeStore.swift EmeraldPalette, AetherTheme.swift), same as index.html. */

:root {
  /* Classic: originals that used to be hard-coded in the page CSS */
  --nav-bg: rgba(5, 5, 5, 0.85);
  --selection: rgba(0, 245, 212, 0.25);
  --warning-line: rgba(255, 184, 0, 0.25);
  --sheet-bg: rgba(5, 5, 5, 0.97);
  --switch-on: rgba(255, 255, 255, 0.09);
  --cta-bg: #00F5D4;
  --cta-ink: #050505;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --heading-weight: 600;
}

:root[data-theme="emerald"] {
  --font-display: "Instrument Serif", "Times New Roman", serif;   /* same display face as index.html */
  --font-body: "Geist", "Helvetica Neue", Arial, sans-serif;

  --color-bg:            #0B2C25;                 /* EP.bgPrimary */
  --color-surface:       #0F3A30;                 /* EP.surfacePrimary */
  --color-surface-2:     #134236;                 /* EP.surfaceSecondary */
  --color-surface-3:     #1A4D40;                 /* EP.surfaceTertiary */
  --color-border:        rgba(255,255,255,0.12);  /* GC stroke */
  --color-border-subtle: rgba(255,255,255,0.10);  /* AT.hairline */
  --color-text:          #F7F5EE;                 /* EP.textPrimary */
  --color-text-muted:    rgba(238,242,236,0.86);  /* EP.textSecondary #EEF2EC, softened for long reading */
  --color-text-faint:    #A9C7BC;                 /* EP.textTertiary */
  --color-text-dim:      #8FB3A6;                 /* EP.textDisabled */
  --color-accent:        #D3EBE0;                 /* EP.mint (AccentColor) */
  --color-accent-hover:  #F7F5EE;                 /* EP.textPrimary */
  --color-accent-glow:   rgba(211,235,224,0.15);
  --color-warning:       #F5C77E;                 /* AT.warning (emerald) */
  --color-warning-bg:    rgba(245,199,126,0.07);
  --warning-line:        rgba(245,199,126,0.28);

  --radius-md: 14px;                              /* AT.radiusControl */
  --radius-xl: 22px;                              /* AT.radiusCard */

  --nav-bg:    rgba(11,44,37,0.80);               /* EP.bgPrimary */
  --sheet-bg:  rgba(11,44,37,0.97);
  --selection: rgba(211,235,224,0.25);
  --switch-on: rgba(255,255,255,0.09);
  --cta-bg:    #2F7A64;                           /* EP.buttonTint */
  --cta-ink:   #FFFFFF;
  --heading-weight: 400;
}

[data-theme="emerald"] body { line-height: 1.72; }
[data-theme="emerald"] .page-title { font-weight: 400; font-size: clamp(2.4rem, 1.7rem + 3vw, 3.6rem); letter-spacing: -0.01em; line-height: 1.05; }
[data-theme="emerald"] .section-title { font-weight: 400; font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.05rem); letter-spacing: -0.005em; line-height: 1.15; }
[data-theme="emerald"] .contact-box h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; }
[data-theme="emerald"] .page-tag,
[data-theme="emerald"] .toc-title { letter-spacing: 0.2em; font-weight: 500; }
[data-theme="emerald"] .section-number { letter-spacing: 0.12em; font-weight: 500; font-variant-numeric: tabular-nums; }
[data-theme="emerald"] .legal-content strong { color: var(--color-text); font-weight: 600; }
[data-theme="emerald"] .callout-warning strong { color: var(--color-warning); }
[data-theme="emerald"] .callout,
[data-theme="emerald"] .toc,
[data-theme="emerald"] .contact-box {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 40%), rgba(15,58,48,0.96); /* GC glass */
}
[data-theme="emerald"] .callout { border-left-color: #7FB8A4; }  /* mintDeep, as in the mark */
/* inline links in the policy text are underlined in both themes, so they are not told apart by colour alone (WCAG 1.4.1) */
.legal-content a:not(.toc a) { text-decoration: underline; text-decoration-color: rgba(0,245,212,0.45); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-content a:not(.toc a):hover { text-decoration-color: currentColor; }
[data-theme="emerald"] .legal-content a:not(.toc a) { text-decoration-color: rgba(211,235,224,0.45); }
[data-theme="emerald"] .legal-content a:not(.toc a):hover { text-decoration-color: currentColor; }
[data-theme="emerald"] body::before { opacity: 0.25; }

/* ---------- brand marks per theme ---------- */
.nav-logo .mark { position: relative; width: 24px; height: 24px; flex: 0 0 24px; display: block; }
.nav-logo .mark svg { position: absolute; inset: 0; width: 24px; height: 24px; }
.mark-emerald { display: none; }
[data-theme="emerald"] .mark-classic { display: none; }
[data-theme="emerald"] .mark-emerald { display: block; }
/* Classic uses the same folded A and serif wordmark as Emerald, in Classic colours:
   left leg = Classic --color-text, right leg = Classic --color-accent-hover #00D4B8 (Emerald: ivory + mintDeep) */
.nav-logo .mark-classic { display: none; }
.nav-logo .mark-emerald { display: block; }
:root:not([data-theme="emerald"]) .nav-logo .mark-emerald path:nth-child(1) { fill: var(--color-accent-hover); }
:root:not([data-theme="emerald"]) .nav-logo .mark-emerald path:nth-child(2) { fill: var(--color-text); }
/* same rotateY spin as index.html's .brand-a (4.5s linear); perspective scaled from index's 48px on a 30px mark */
.nav-logo .mark > span { position: absolute; inset: 0; perspective: 38px; }
.nav-logo .mark-emerald svg { overflow: visible; transform-origin: 50% 50%; transform-style: preserve-3d; animation: aether-mark-spin 4.5s linear infinite; }
@keyframes aether-mark-spin { to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .nav-logo .mark-emerald svg { animation: none; } }
.nav-logo-text { font-family: "Instrument Serif", "Times New Roman", serif; font-weight: 400; font-size: 1.4rem; letter-spacing: 0.05em; }

/* ---------- theme switch (same control as index.html) ---------- */
.theme-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--color-border); border-radius: 999px;
}
.theme-switch button {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.34rem 0.62rem; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 0.64rem; line-height: 1.25; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--color-text-faint);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.theme-switch button:hover { color: var(--color-text); }
.theme-switch button[aria-pressed="true"] { background: var(--switch-on); color: var(--color-text); }
.swatch { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.swatch.classic { background: #050505; box-shadow: inset 0 0 0 2px #00F5D4; }
.swatch.emerald { background: #0B2C25; box-shadow: inset 0 0 0 2px #D3EBE0; }
.top-nav-inner > .theme-switch { margin-left: var(--space-2); margin-block: -4px; }

/* inline code (privacy policy) */
.legal-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; padding: 0.1em 0.35em; border-radius: 6px; background: var(--color-surface-2); color: var(--color-text); }

/* footer note, same wording as index.html */
.footer-note { font-size: var(--text-xs); color: var(--color-text-dim); margin-top: var(--space-1); }
.footer-note span { white-space: nowrap; }
/* footer phrases: each phrase stays whole; a separator never starts or ends a line */
.dotlist { overflow: hidden; }
.dotlist .dl { display: block; margin-left: -1.3em; white-space: normal; text-wrap: balance; }
.dotlist .dl > span { display: inline-block; white-space: nowrap; }
.dotlist .dl > span::before { content: "·"; content: "·" / ""; display: inline-block; width: 1.3em; text-align: center; }

/* ---------- mobile menu (below 860px, same breakpoint as index.html) ---------- */
.menu-btn { display: none; }
.msheet { display: none; }
@media (max-width: 859px) {
  .top-nav { padding-top: max(var(--space-2), env(safe-area-inset-top)); padding-bottom: var(--space-2); }
  .top-nav .container { padding-left: max(var(--space-5), env(safe-area-inset-left)); padding-right: max(var(--space-5), env(safe-area-inset-right)); }
  .top-nav .back-link,
  .top-nav-inner > .theme-switch { display: none; }
  .top-nav .nav-logo, .msheet .nav-logo { margin-left: 0; min-height: 44px; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    min-height: 44px; min-width: 44px; padding: 0 0.9rem; margin-left: auto; margin-right: -0.35rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-md); background: none; cursor: pointer;
    font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
    color: var(--color-text);
  }
  .menu-btn .bars { position: relative; width: 16px; height: 8px; flex: 0 0 16px; }
  .menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor; }
  .menu-btn .bars::before { top: 0; }
  .menu-btn .bars::after { bottom: 0; }
  [data-theme="emerald"] .menu-btn { border-radius: 999px; }

  .msheet {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column;
    padding: max(var(--space-2), env(safe-area-inset-top)) max(var(--space-5), env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(var(--space-5), env(safe-area-inset-left));
    background: var(--sheet-bg);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    backdrop-filter: blur(28px) saturate(150%);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.45s;
  }
  .msheet.open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s; }
  .msheet[hidden] { display: none; }
  .msheet-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding-top: 0; }
  .msheet-close .bars::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
  .msheet-close .bars::after { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
  .msheet nav { display: grid; margin-top: 1.5rem; border-top: 1px solid var(--color-border-subtle); }
  .msheet nav a {
    display: flex; align-items: center; justify-content: space-between; min-height: 56px;
    border-bottom: 1px solid var(--color-border-subtle);
    font-family: var(--font-display); font-weight: var(--heading-weight); font-size: 1.35rem; letter-spacing: -0.01em;
    color: var(--color-text); text-decoration: none;
  }
  [data-theme="emerald"] .msheet nav a { font-size: clamp(1.7rem, 7.5vw, 2.1rem); min-height: 60px; }
  .msheet nav a::after { content: "→"; font-family: var(--font-body); font-size: 1rem; color: var(--color-text-dim); }
  .msheet nav a[aria-current="page"] { color: var(--color-accent); font-weight: 600; }
  .msheet nav a[aria-current="page"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 4px; }
  .msheet nav a:hover, .msheet nav a:active { color: var(--color-accent); text-decoration: none; }
  .msheet nav .sub { font-family: var(--font-body); font-size: 1rem; font-weight: 500; min-height: 48px; color: var(--color-text-faint); }
  [data-theme="emerald"] .msheet nav .sub { font-size: 1rem; min-height: 48px; }
  .msheet-foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 1rem; }
  .msheet-foot .theme-label { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-dim); margin: 0; }
  .msheet .theme-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .msheet .theme-switch button { justify-content: center; min-height: 44px; padding: 0 0.8rem; font-size: 0.7rem; }
  .msheet .cta-full {
    display: flex; align-items: center; justify-content: center; min-height: 52px;
    background: var(--cta-bg); color: var(--cta-ink); border-radius: var(--radius-md);
    font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; text-decoration: none;
  }
  .msheet .cta-full:hover { color: var(--cta-ink); text-decoration: none; }
  .msheet .msheet-note { font-size: 0.74rem; color: var(--color-text-dim); text-align: center; margin: 0; }
  body.menu-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .msheet, .msheet.open { transition: none; transform: none; }
}

/* comfortable tap targets on phones */
@media (max-width: 640px) {
  .page-meta { gap: var(--space-1) var(--space-5); }
  .footer-links { gap: var(--space-5); flex-wrap: wrap; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .toc a { display: inline-block; padding: 0.3rem 0; }
}

/* footer without the old attribution row */
.footer-inner:last-child { margin-bottom: 0; }

/* contact box notes (were inline style attributes; moved here so the CSP needs no inline styles) */
.contact-box .contact-note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-faint); }
.contact-box .contact-note-tight { margin-top: var(--space-3); }
.contact-box a { overflow-wrap: anywhere; }

/* skip link: hidden until focused */
.skip-link {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 300;
  padding: 0.7rem 1rem; border-radius: var(--radius-md);
  background: var(--cta-bg); color: var(--cta-ink);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-decoration: none;
  transform: translateY(-180%); transition: transform 0.2s var(--ease);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; color: var(--cta-ink); text-decoration: none; }
main:focus { outline: none; }

/* ---------- phone/tablet refinements (below 860px): slimmer header, quieter menu sheet, theme switch in the footer ---------- */
.footer-theme { display: none; }
@media (max-width: 859px) {
  .top-nav .nav-logo, .msheet .nav-logo { min-height: 40px; }
  .nav-logo-text { font-size: 1.25rem; }
  .menu-btn { min-height: 38px; min-width: 38px; padding: 0 0.8rem; gap: 0.5rem; font-size: 0.62rem; letter-spacing: 0.14em; margin-right: -0.2rem; }
  .menu-btn .bars { width: 14px; height: 7px; flex-basis: 14px; }
  .msheet-top { min-height: 40px; }
  .msheet nav { margin-top: 1.25rem; }
  .msheet nav a,
  [data-theme="emerald"] .msheet nav a { min-height: 48px; font-size: 1.3rem; letter-spacing: 0; }
  .msheet nav a::after { font-size: 0.85rem; }
  .msheet nav .sub,
  [data-theme="emerald"] .msheet nav .sub { font-size: 0.9rem; min-height: 44px; }
  .msheet-foot { padding-top: 1.5rem; gap: 0.75rem; }
  .msheet .cta-full { min-height: 46px; font-size: 0.68rem; }
  .msheet .msheet-note { font-size: 0.7rem; }

  .footer-theme {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    margin-top: var(--space-4); padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
  }
  .footer-theme-label { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-dim); }
  .footer-theme .theme-switch button { padding: 0.3rem 0.6rem; min-height: 32px; font-size: 0.6rem; }
  .footer-theme .swatch { width: 9px; height: 9px; flex-basis: 9px; }
}

/* ---------- footer social links (monochrome inline SVG) ---------- */
.footer-social { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--color-text-faint); border-radius: 999px; text-decoration: none; transition: color var(--transition-interactive), background var(--transition-interactive); }
.footer-social a:hover { color: var(--color-text); background: rgba(255,255,255,0.06); text-decoration: none; }
.footer-social svg { width: 16px; height: 16px; display: block; }
@media (max-width: 640px) { .footer-social { margin-left: -0.55rem; } }