/* Page foundation — customizable skins.
   White / black / light-purple pages. Third colour = spective + factive guide. */

:root {
  --page-white: #ffffff;
  --page-black: #0b0b0d;
  --page-lilac: #f3eef8;
  --page-third: #c4a35a;
  --page-third-ink: #6b4a12;
  --page-lilac-deep: #6e4aa8;
}

/* Default: light purple paper, black ink, gold third */
html,
html[data-page="lilac"] {
  --bg: var(--page-lilac);
  --bg-elev: color-mix(in srgb, var(--page-white) 78%, var(--page-lilac));
  --ink: #16141a;
  --ink-muted: #4a4454;
  --ink-faint: #7a7388;
  --rule: color-mix(in srgb, var(--page-lilac-deep) 18%, var(--page-lilac));
  --rule-strong: #16141a;
  --accent: var(--page-third);
  --focus: var(--page-lilac-deep);
  --fulcrum-paper: var(--page-lilac);
  --fulcrum-ink: #16141a;
  --boundless-bg: var(--page-lilac);
  --boundless-fg: #16141a;
  --boundless-accent: var(--page-third);
  color-scheme: light;
}

html[data-page="white"] {
  --bg: var(--page-white);
  --bg-elev: #f7f5fb;
  --ink: #121212;
  --ink-muted: #4a4a4a;
  --ink-faint: #7a7a7a;
  --rule: #e4e0ea;
  --rule-strong: #121212;
  --accent: var(--page-third);
  --focus: var(--page-lilac-deep);
  --fulcrum-paper: var(--page-white);
  --fulcrum-ink: #121212;
  --boundless-bg: var(--page-white);
  --boundless-fg: #121212;
  --boundless-accent: var(--page-third);
  color-scheme: light;
}

html[data-page="black"] {
  --bg: var(--page-black);
  --bg-elev: #16151c;
  --ink: #f4f1ea;
  --ink-muted: #c9c4d4;
  --ink-faint: #8e8898;
  --rule: color-mix(in srgb, var(--page-lilac) 22%, #000);
  --rule-strong: #f4f1ea;
  --accent: var(--page-third);
  --focus: #cbb4f0;
  --fulcrum-paper: var(--page-black);
  --fulcrum-ink: #f4f1ea;
  --boundless-bg: var(--page-black);
  --boundless-fg: #f4f1ea;
  --boundless-accent: var(--page-third);
  color-scheme: dark;
}

html[data-page="black"] body {
  background: var(--page-black);
  color: var(--ink);
}

/* Third-colour buttons on skins */
html[data-page="lilac"] .b-button.btn-primary,
html[data-page="white"] .b-button.btn-primary,
html[data-page="black"] .b-button.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* ---- Page switcher (quiet, literary) ----
   Sit left of the Galaxy orb (52px + gap ≈ 64px). z 45: under consent (60), over orbs (40). */
.page-foundation {
  position: fixed;
  right: calc(64px + max(0.65rem, env(safe-area-inset-right)));
  top: max(0.7rem, env(safe-area-inset-top));
  z-index: 45;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.page-foundation fieldset {
  margin: 0;
  padding: 0.18rem 0.22rem;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  display: flex;
  gap: 0.08rem;
}
.page-foundation legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.page-foundation label {
  cursor: pointer;
  padding: 0.22rem 0.42rem;
  color: var(--ink-muted);
}
.page-foundation input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.page-foundation input:checked + span,
.page-foundation label:has(input:checked) {
  color: var(--page-third-ink);
  box-shadow: inset 0 -1px 0 var(--page-third);
}
html[data-page="black"] .page-foundation input:checked + span,
html[data-page="black"] .page-foundation label:has(input:checked) {
  color: var(--page-third);
}

/* ---- Important-statement rails: factive | spective ---- */
.uh-statement {
  position: relative;
  padding-left: 0.15rem;
}
.uh-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  margin: 0 0 0.35rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--page-third);
  line-height: 1.2;
}
.uh-guide-factive::before {
  content: "factive  ";
  color: var(--ink-faint);
  letter-spacing: 0.12em;
}
.uh-guide-spective::before {
  content: "spective  ";
  color: var(--ink-faint);
  letter-spacing: 0.12em;
}
.uh-statement::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 0.15rem;
  bottom: 0.15rem;
  width: 2px;
  background: var(--page-third);
  opacity: 0.85;
}
.cover .uh-statement::before,
.cover-page .uh-statement::before {
  left: -0.55rem;
}

@media (max-width: 640px) {
  /* Under the Galaxy orb (44px on narrow), not bottom — cookie card lives there. */
  .page-foundation {
    top: calc(max(0.65rem, env(safe-area-inset-top)) + 52px + 0.4rem);
    right: max(0.5rem, env(safe-area-inset-right));
    bottom: auto;
  }
  .uh-statement::before { left: -0.45rem; }
}


@media (prefers-reduced-motion: reduce) {
  .page-foundation, .uh-guide { transition: none; }
}