/* In-app dark theme for help/terms/privacy. Enabled by the <head> script when the URL has
   in_app=true&theme=dark (the Sojiwa app WebView). Palette = the app's SojiScheme.dark. */
html[data-theme="dark"] {
  color-scheme: dark;
  --d-bg: #1E1A28;
  --d-surface: #2C2738;
  --d-surface-2: #363047;
  --d-border: #423B54;
  --d-text: #EFEAF4;
  --d-text-2: #B0A8B9;
  --d-text-3: #A39BAD;
  --d-primary: #B78BF7;
  --d-accent: #F49AA8;

  /* help.njk tokens */
  --primary: var(--d-primary);
  --primary-light: var(--d-surface-2);
  --ink: var(--d-text);
  --muted: var(--d-text-2);
  --line: var(--d-border);
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .help-hero,
html[data-theme="dark"] .terms-page,
html[data-theme="dark"] .privacy-page {
  background: var(--d-bg);
  color: var(--d-text);
}

/* Tailwind utilities used across the pages */
html[data-theme="dark"] .bg-white { background-color: transparent; }
html[data-theme="dark"] .bg-gray-50 { background-color: var(--d-surface); }
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800 { color: var(--d-text); }
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600 { color: var(--d-text-2); }
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400 { color: var(--d-text-3); }
html[data-theme="dark"] .border-gray-100 { border-color: var(--d-border); }
html[data-theme="dark"] strong { color: var(--d-text); }
html[data-theme="dark"] a { color: var(--d-primary); }

html[data-theme="dark"] .prose {
  --tw-prose-body: var(--d-text-2);
  --tw-prose-headings: var(--d-text);
  --tw-prose-links: var(--d-primary);
  --tw-prose-bold: var(--d-text);
  --tw-prose-bullets: var(--d-text-3);
  --tw-prose-counters: var(--d-text-3);
  --tw-prose-hr: var(--d-border);
  --tw-prose-quotes: var(--d-text);
  --tw-prose-quote-borders: var(--d-border);
  --tw-prose-code: var(--d-text);
  --tw-prose-th-borders: var(--d-border);
  --tw-prose-td-borders: var(--d-border);
}

/* Help */
html[data-theme="dark"] .faq-item.active { background-color: transparent; }
html[data-theme="dark"] .faq-item:hover { border-color: var(--d-surface-2); }
html[data-theme="dark"] .faq-icon { background: var(--d-surface-2); }
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .help-contact-card { background: var(--d-surface); }
html[data-theme="dark"] .help-contact-primary { background: var(--d-primary); color: var(--d-bg); box-shadow: none; }
html[data-theme="dark"] .help-contact-primary:hover { background: #C7A3F9; }
html[data-theme="dark"] .help-contact-secondary { background: var(--d-surface-2); border-color: var(--d-border); color: var(--d-text); }
html[data-theme="dark"] .help-contact-secondary:hover { background: var(--d-border); }

/* Terms / Privacy */
html[data-theme="dark"] .terms-kicker,
html[data-theme="dark"] .privacy-kicker,
html[data-theme="dark"] .terms-title em,
html[data-theme="dark"] .privacy-title em,
html[data-theme="dark"] .terms-toc h2,
html[data-theme="dark"] .privacy-toc h2,
html[data-theme="dark"] .terms-summary-card a,
html[data-theme="dark"] .privacy-summary-card a,
html[data-theme="dark"] .section-ref { color: var(--d-primary); }
html[data-theme="dark"] .terms-title,
html[data-theme="dark"] .privacy-title,
html[data-theme="dark"] .terms-summary-card h3,
html[data-theme="dark"] .privacy-summary-card h3 { color: var(--d-text); }
html[data-theme="dark"] .terms-subtitle,
html[data-theme="dark"] .privacy-subtitle,
html[data-theme="dark"] .terms-summary-card p,
html[data-theme="dark"] .privacy-summary-card p,
html[data-theme="dark"] .privacy-quick-access { color: var(--d-text-2); }
html[data-theme="dark"] .terms-summary-card,
html[data-theme="dark"] .privacy-summary-card,
html[data-theme="dark"] .terms-toc,
html[data-theme="dark"] .privacy-toc {
  background: var(--d-surface);
  border-color: var(--d-border);
  box-shadow: none;
}
html[data-theme="dark"] .terms-toc a,
html[data-theme="dark"] .privacy-toc a { color: var(--d-text); }
html[data-theme="dark"] .terms-toc a:hover,
html[data-theme="dark"] .privacy-toc a:hover { color: var(--d-primary); }

html[data-theme="dark"] .terms-content .border-l-4,
html[data-theme="dark"] .privacy-content .border-l-4,
html[data-theme="dark"] .theme-callout {
  background: var(--d-surface);
  border-color: var(--d-border);
  border-left-color: var(--d-primary);
  box-shadow: none;
  color: var(--d-text-2);
}
html[data-theme="dark"] .bg-red-50 { border-left-color: var(--d-accent) !important; }
html[data-theme="dark"] .bg-yellow-50 { border-left-color: #E5B45C !important; }
html[data-theme="dark"] .terms-content .border-l-4 p,
html[data-theme="dark"] .terms-content .border-l-4 li,
html[data-theme="dark"] .privacy-content .border-l-4 p,
html[data-theme="dark"] .privacy-content .border-l-4 li,
html[data-theme="dark"] .theme-callout p { color: var(--d-text-2); }
html[data-theme="dark"] .terms-content .border-l-4 p:first-child,
html[data-theme="dark"] .terms-content .border-l-4 h4,
html[data-theme="dark"] .privacy-content .border-l-4 p:first-child,
html[data-theme="dark"] .privacy-content .border-l-4 h4,
html[data-theme="dark"] .theme-callout h3 { color: var(--d-text); }

/* Long URLs/emails must not push callouts past a 360px viewport */
html.in-app .terms-content,
html.in-app .privacy-content,
html.in-app .faq-answer { overflow-wrap: anywhere; }
html[data-theme="dark"] p[style*="#6B5E80"] { color: var(--d-text-3) !important; }

/* Tailwind v4 ships inside @layer, which WebViews older than Chrome 99 ignore entirely —
   keep the box model sane there so nothing exceeds the viewport. */
html.in-app *,
html.in-app *::before,
html.in-app *::after { box-sizing: border-box; }
html.in-app img,
html.in-app svg { max-width: 100%; }
html.in-app .terms-content,
html.in-app .privacy-content,
html.in-app .faq-answer { word-wrap: break-word; }
html[data-theme="dark"] .terms-summary-icon,
html[data-theme="dark"] .privacy-summary-icon { color: var(--d-primary); }

/* App look for in-app pages (also covers the web app's iframe, which can't inject CSS):
   app font, upright headings, no cookie banner. Mirrors the app's web_content_page.dart. */
html.in-app body,
html.in-app body *:not(i):not([class*='icon']):not([class*='material']) {
  font-family: 'Plus Jakarta Sans', 'PingFang SC', 'Noto Sans SC', Roboto, sans-serif !important;
}
html.in-app h1, html.in-app h2, html.in-app h3,
html.in-app h1 *, html.in-app h2 *, html.in-app h3 * { font-style: normal !important; }
html.in-app .cookie-consent-banner { display: none !important; }
/* App-sized page titles: plain text, no display serif or coloured word */
html.in-app .help-title, html.in-app .terms-title, html.in-app .privacy-title {
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
}
html.in-app h1 em { color: inherit !important; }