/* Planet Hoto "Customize" styles. Loaded after each page's own <style> so these win on equal specificity.
   Themes set every variable both pages use (index: --surface/--line/--accent...; Avoiding Scientology: --paper/--rule/--hazard...).
   Light and dark are the pages' own palettes; this file adds high contrast and calm. */

/* ---------- Themes ---------- */
html:root[data-ph-theme="contrast"] {
  --bg: #000000; --surface: #000000; --paper: #000000; --fg: #ffffff; --muted: #f0f0f0;
  --line: #ffffff; --rule: #ffffff; --accent: #ffe14d; --accent-fg: #000000;
  --signal: #ffd2c4; --signal-bg: #2b0000; --soft: #141414;
  --hazard: #ffe14d; --hazard-ink: #000000; --danger: #ffd2c4;
  color-scheme: dark;
}
html:root[data-ph-theme="calm"] {
  --bg: #ebeceb; --surface: #f5f6f5; --paper: #f5f6f5; --fg: #2b3236; --muted: #4f595e;
  --line: #c3c9c8; --rule: #c3c9c8; --accent: #3d6461; --accent-fg: #ffffff;
  --signal: #7d3b2b; --signal-bg: #e6dcd8; --soft: #dde2e0;
  --hazard: #c9b27a; --hazard-ink: #2b3236; --danger: #7d3b2b;
  color-scheme: light;
}
/* Scientology page: its top bar is the inverse of the page, so the brand word needs a dark amber on light bars */
html:root[data-ph-theme="contrast"] .brand span { color: #7a5200; }
/* High contrast: every link underlined, strong outlines, heavier borders on the crisis bar */
html:root[data-ph-theme="contrast"] a { text-decoration: underline; }
html:root[data-ph-theme="contrast"] :focus-visible { outline: 4px solid #ffe14d; outline-offset: 3px; }
html:root[data-ph-theme="contrast"] .crisis { border-bottom: 3px solid #ffe14d; }
html:root[data-ph-theme="contrast"] .guide, html:root[data-ph-theme="contrast"] .finder,
html:root[data-ph-theme="contrast"] .chip, html:root[data-ph-theme="contrast"] select { border-width: 2px; }

/* ---------- Text size (--ph-ts is set by customize.js; every font-size in the pages is multiplied by it) ---------- */
html { font-size: calc(100% * var(--ph-ts, 1)); }
body { overflow-wrap: break-word; }
/* Links are inline-block for 44px tap targets, so they size to their longest word; let long URLs break at large text sizes */
a { overflow-wrap: anywhere; max-width: 100%; }

/* ---------- Fonts ---------- */
html[data-ph-font="dyslexia"] {
  --font-body: "OpenDyslexic", "Lexend", "Atkinson Hyperlegible", Verdana, "Trebuchet MS", sans-serif;
  --font-display: "OpenDyslexic", "Lexend", "Atkinson Hyperlegible", Verdana, "Trebuchet MS", sans-serif;
  --font-mono: "OpenDyslexic", "Lexend", Verdana, sans-serif;
}
html[data-ph-font="dyslexia"] body { letter-spacing: 0.03em; word-spacing: 0.12em; }
html[data-ph-font="dyslexia"] * { text-transform: none !important; font-style: normal !important; }
html[data-ph-font="system"] {
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- Line spacing (headings keep their tight leading) ---------- */
html[data-ph-spacing="relaxed"] :where(body, p, li, dd, dt, td, th, label) { line-height: 1.8 !important; }
html[data-ph-spacing="loose"] :where(body, p, li, dd, dt, td, th, label) { line-height: 2.1 !important; }

/* ---------- Motion ---------- */
html[data-ph-motion="reduce"] *, html[data-ph-motion="reduce"] *::before, html[data-ph-motion="reduce"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html[data-ph-motion="reduce"] .stamp { transform: none; }

/* ---------- Layout density ---------- */
/* Planet Hoto home */
html[data-ph-density="compact"] section.block { padding-block: 32px; }
html[data-ph-density="compact"] .hero { padding-block: 20px 28px; }
html[data-ph-density="compact"] .guide, html[data-ph-density="compact"] .finder { padding: 14px; }
html[data-ph-density="compact"] .guides, html[data-ph-density="compact"] .help { gap: 10px; margin-top: 20px; }
html[data-ph-density="roomy"] section.block { padding-block: 80px; }
html[data-ph-density="roomy"] .hero { padding-block: 56px 72px; }
html[data-ph-density="roomy"] .guide, html[data-ph-density="roomy"] .finder { padding: 28px; }
html[data-ph-density="roomy"] .guides, html[data-ph-density="roomy"] .help { gap: 28px; margin-top: 44px; }
html[data-ph-density="roomy"] .chips { gap: 14px; }
/* Avoiding Scientology */
html[data-ph-density="compact"] main > section { padding-block: 16px; }
html[data-ph-density="compact"] .sheet article { padding: 10px 12px; }
html[data-ph-density="compact"] .sheet { gap: 6px; }
html[data-ph-density="roomy"] main > section { padding-block: 48px; }
html[data-ph-density="roomy"] .sheet article { padding: 22px 22px; }
html[data-ph-density="roomy"] .sheet { gap: 20px; }
html[data-ph-density="roomy"] ul.plain li { margin-bottom: 14px; }

/* ---------- Skip link (the home page already styles it; the Scientology page gets the same one) ---------- */
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface, var(--paper)); color: var(--fg); padding: 8px 12px; z-index: 20; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Header button ---------- */
html:not(.ph-js) .ph-open { display: none; } /* customize.js adds ph-js, so the button only shows when it can work */
.ph-open {
  font: inherit; font-weight: 700; font-size: calc(15px * var(--ph-ts, 1)); min-height: 44px; padding: 8px 14px;
  border-radius: 8px; border: 2px solid var(--accent, var(--hazard)); background: transparent;
  color: var(--accent, var(--hazard-ink)); cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.topbar .ph-open { color: var(--bg); border-color: var(--bg); border-radius: 2px; }
.ph-open[aria-expanded="true"] { background: var(--accent, var(--hazard)); color: var(--accent-fg, var(--hazard-ink)); }
.topbar .ph-open[aria-expanded="true"] { background: var(--bg); color: var(--fg); }
.ph-open svg { flex: none; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- The panel (sits in the page flow below the header, so the crisis bar is never covered) ---------- */
.ph-panel { background: var(--surface, var(--paper)); color: var(--fg); border-bottom: 1px solid var(--line, var(--rule)); font-family: var(--font-body); font-size: calc(16px * var(--ph-ts, 1)); }
.ph-panel[hidden] { display: none !important; }
.ph-inner { max-width: 1080px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 14px; }
.topbar ~ .ph-panel .ph-inner { max-width: 760px; }
.ph-panel h2 { font-family: var(--font-display); font-size: calc(24px * var(--ph-ts, 1)); line-height: 1.15; margin: 0; text-transform: none; letter-spacing: 0; max-width: none; font-weight: 800; }
.ph-panel h2:focus { outline: none; }
.ph-panel h2:focus-visible { outline: 3px solid var(--accent, var(--fg)); outline-offset: 2px; }
.ph-note, .ph-help { margin: 0; color: var(--muted); font-size: calc(15px * var(--ph-ts, 1)); line-height: 1.5; max-width: 70ch; }
.ph-help { margin-top: 6px; }
.ph-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.ph-group legend { padding: 0; margin-bottom: 6px; font-weight: 700; }
.ph-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-opt { position: relative; display: inline-flex; }
.ph-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ph-opt span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 2px solid var(--line, var(--rule)); background: var(--bg); color: var(--fg); line-height: 1.3;
}
.ph-opt:hover span { border-color: var(--accent, var(--fg)); }
.ph-opt input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 700; }
.ph-opt input:checked + span::before { content: "\2713\00a0"; }
/* Empty alt text keeps the check mark out of the accessible name; the radio already announces "checked" */
.ph-opt input:checked + span::before { content: "\2713\00a0" / ""; }
.ph-opt input:focus-visible + span { outline: 3px solid var(--accent, var(--fg)); outline-offset: 2px; }
html:root[data-ph-theme="contrast"] .ph-opt span { border-color: #fff; }
html:root[data-ph-theme="contrast"] .ph-opt input:checked + span { background: #ffe14d; color: #000; border-color: #ffe14d; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-btn { font: inherit; font-weight: 700; min-height: 44px; padding: 8px 18px; border-radius: 8px; border: 2px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer; }
.ph-btn:hover { background: var(--fg); color: var(--bg); }
.ph-btn:focus-visible { outline: 3px solid var(--accent, var(--fg)); outline-offset: 2px; }
.ph-status { margin: 0; min-height: 1.4em; color: var(--muted); font-size: calc(15px * var(--ph-ts, 1)); }

@media (max-width: 800px) {
  .ph-opts { gap: 6px; }
  .ph-opt span { padding: 8px 12px; }
}
@media (forced-colors: active) {
  .ph-opt input:checked + span { outline: 2px solid Highlight; }
}

/* Scientology page header: let the brand and the two buttons wrap instead of overflowing at large text sizes */
.topbar-inner { flex-wrap: wrap; }

/* ---------- Accent color. Each preset has a light and a dark value, all checked for WCAG AA in the tests.
   High contrast keeps its own yellow. The Scientology page has no accent color, so there it only tints the panel. ---------- */
html:root[data-ph-accent="blue"]:not([data-ph-theme="contrast"]) { --accent: #1f5fa8; --accent-fg: #ffffff; }
@media (prefers-color-scheme: dark) { html:root[data-ph-accent="blue"]:not([data-theme="light"]):not([data-ph-theme="contrast"]) { --accent: #8ab8f0; --accent-fg: #08121c; } }
html:root[data-ph-accent="blue"][data-theme="dark"]:not([data-ph-theme="contrast"]) { --accent: #8ab8f0; --accent-fg: #08121c; }
html:root[data-ph-accent="purple"]:not([data-ph-theme="contrast"]) { --accent: #6b3fa0; --accent-fg: #ffffff; }
@media (prefers-color-scheme: dark) { html:root[data-ph-accent="purple"]:not([data-theme="light"]):not([data-ph-theme="contrast"]) { --accent: #c3a6f0; --accent-fg: #08121c; } }
html:root[data-ph-accent="purple"][data-theme="dark"]:not([data-ph-theme="contrast"]) { --accent: #c3a6f0; --accent-fg: #08121c; }
html:root[data-ph-accent="green"]:not([data-ph-theme="contrast"]) { --accent: #2e6b34; --accent-fg: #ffffff; }
@media (prefers-color-scheme: dark) { html:root[data-ph-accent="green"]:not([data-theme="light"]):not([data-ph-theme="contrast"]) { --accent: #8fd49a; --accent-fg: #08121c; } }
html:root[data-ph-accent="green"][data-theme="dark"]:not([data-ph-theme="contrast"]) { --accent: #8fd49a; --accent-fg: #08121c; }
html:root[data-ph-accent="rose"]:not([data-ph-theme="contrast"]) { --accent: #a02f5a; --accent-fg: #ffffff; }
@media (prefers-color-scheme: dark) { html:root[data-ph-accent="rose"]:not([data-theme="light"]):not([data-ph-theme="contrast"]) { --accent: #f09ab8; --accent-fg: #08121c; } }
html:root[data-ph-accent="rose"][data-theme="dark"]:not([data-ph-theme="contrast"]) { --accent: #f09ab8; --accent-fg: #08121c; }

/* ---------- Links, focus outline ---------- */
html[data-ph-links="underline"] a { text-decoration: underline !important; text-underline-offset: 3px; }
html[data-ph-focus="thick"] :focus-visible { outline: 5px solid var(--accent, var(--fg)) !important; outline-offset: 3px !important; }
html:root[data-ph-theme="contrast"][data-ph-focus="thick"] :focus-visible { outline-color: #ffe14d !important; }

/* ---------- Letter, word and paragraph spacing (WCAG 1.4.12 values and above) ---------- */
html[data-ph-letter="wide"] body * { letter-spacing: 0.05em !important; }
html[data-ph-letter="wider"] body * { letter-spacing: 0.12em !important; }
html[data-ph-word="wide"] body { word-spacing: 0.16em; }
html[data-ph-word="wider"] body { word-spacing: 0.35em; }
html[data-ph-para="wide"] p:not(:last-child) { margin-bottom: 2em !important; }

/* ---------- Page width ---------- */
html[data-ph-width="narrow"] .wrap, html[data-ph-width="narrow"] .ph-inner { max-width: 760px; }
html[data-ph-width="wide"] .wrap, html[data-ph-width="wide"] .ph-inner { max-width: 1400px; }
html[data-ph-width="narrow"] main, html[data-ph-width="narrow"] .topbar-inner, html[data-ph-width="narrow"] .crisis .wrap, html[data-ph-width="narrow"] .topbar ~ .ph-panel .ph-inner { max-width: 600px; }
html[data-ph-width="wide"] main, html[data-ph-width="wide"] .topbar-inner, html[data-ph-width="wide"] .crisis .wrap, html[data-ph-width="wide"] .topbar ~ .ph-panel .ph-inner { max-width: 1000px; }

/* ---------- Single column ---------- */
html[data-ph-columns="single"] .hero .wrap, html[data-ph-columns="single"] .tool,
html[data-ph-columns="single"] .guides, html[data-ph-columns="single"] .help, html[data-ph-columns="single"] .contact { grid-template-columns: 1fr !important; }

/* ---------- Corners ---------- */
html[data-ph-radius="square"] :is(.guide, .finder, .breath, .chip, .btn, .menubtn, .menu-btn, .ph-open, .ph-opt span, .ph-btn, select, .sheet article, .script, .tablewrap) { border-radius: 0 !important; }
html[data-ph-radius="round"] :is(.guide, .finder, .breath, .sheet article, .script, .tablewrap) { border-radius: 24px !important; }
html[data-ph-radius="round"] :is(.btn, .menubtn, .menu-btn, .ph-open, .ph-btn, select) { border-radius: 999px !important; }

/* ---------- Reading ruler (pointer-events none, so it never blocks a tap or click; a light tint, never an opaque cover) ---------- */
.ph-ruler { position: fixed; left: 0; top: 0; width: 100%; height: 2.6em; font-size: calc(16px * var(--ph-ts, 1)); pointer-events: none; z-index: 40;
  background: rgba(255, 214, 0, 0.18); border-block: 2px solid rgba(255, 214, 0, 0.7); }
html:root[data-ph-theme="contrast"] .ph-ruler { background: rgba(255, 225, 77, 0.2); border-color: #ffe14d; }

/* ---------- Panel sections and file buttons ---------- */
.ph-sec { border: 1px solid var(--line, var(--rule)); border-radius: 10px; padding: 0 14px 14px; }
.ph-sec[open] { padding-bottom: 14px; }
.ph-sec > summary { cursor: pointer; font-weight: 800; font-family: var(--font-display); font-size: calc(18px * var(--ph-ts, 1)); min-height: 44px; display: flex; align-items: center; margin-inline: -14px; padding-inline: 14px; }
.ph-sec > summary:focus-visible { outline: 3px solid var(--accent, var(--fg)); outline-offset: -3px; }
.ph-sec > .ph-group, .ph-sec > .ph-help, .ph-sec > .ph-actions { margin-top: 14px; }
.ph-file { display: none; }