/**
 * Qode Prism — landing · Veil tuning layer · page-scoped CSS (load LAST).
 *
 * Goal: the ten veils must read as ten clearly different materials on the landing surfaces.
 * One number drives everything — `--pl-vt` (0 → 1), the position of the veil inside its group:
 *
 *   LIGHT   no-moon → waxing-crescent → first-quarter → waxing-gibbous → full-moon
 *           visibility ↑  luminance ↑  contrast ↑  transparency ↓   (airy frost → milk glass)
 *   DARK    waning-gibbous → last-quarter → waning-crescent → eclipse → total-eclipse
 *           visibility ↑  luminance ↓  contrast ↑  transparency ↓   (luminous night glass → obsidian)
 *
 * Every channel is a straight line between its two ends, so the order can never fold back
 * (the engine's own dark coefficients are not monotonic; this page re-maps them locally —
 * the engine and every other page stay untouched).
 * Channels: surface alpha, tint, blur, saturation, brightness, contrast, hairline, rim light,
 * shadow / glow and the e-ink of text + icons (--q2-ink-*).
 */

/* ── Position of each veil in its group ─────────────────────────────────────────────────── */
html[data-ql-veil="no-moon"], html[data-ql-veil="waning-gibbous"]   { --pl-vt: 0; }
html[data-ql-veil="waxing-crescent"], html[data-ql-veil="last-quarter"]   { --pl-vt: 0.25; }
html[data-ql-veil="first-quarter"], html[data-ql-veil="waning-crescent"]  { --pl-vt: 0.5; }
html[data-ql-veil="waxing-gibbous"], html[data-ql-veil="eclipse"]         { --pl-vt: 0.75; }
html[data-ql-veil="full-moon"], html[data-ql-veil="total-eclipse"]        { --pl-vt: 1; }

/* ── LIGHT veils: airy frost → milk glass ───────────────────────────────────────────────── */
html:is([data-ql-veil="no-moon"], [data-ql-veil="waxing-crescent"], [data-ql-veil="first-quarter"], [data-ql-veil="waxing-gibbous"], [data-ql-veil="full-moon"]) :is(body.pl-page, body.pl-page #q2-surface) {
  /* engine ratios, re-mapped (they feed every q2 widget on the page too) */
  --q2-veil-alpha-k: calc(0.16 + 0.76 * var(--pl-vt));
  --q2-veil-blur-k: calc(0.55 + 1.25 * var(--pl-vt));
  --q2-veil-sat-k: calc(0.86 + 0.30 * var(--pl-vt));
  --q2-veil-bright-k: calc(0.99 + 0.07 * var(--pl-vt));
  --q2-veil-contrast-k: calc(0.97 + 0.15 * var(--pl-vt));

  /* landing glass */
  --pl-g-tint: #ffffff;
  --pl-g-alpha: var(--q2-veil-alpha-k);
  --pl-g-sheen: calc(10% + 36% * var(--pl-vt));
  --pl-g-blur: calc(20px * var(--q2-veil-blur-k));
  --pl-g-sat: calc(var(--q2-veil-sat-k) * 1.45);
  --pl-g-bright: calc(1 + 0.08 * var(--pl-vt));
  --pl-g-contrast: var(--q2-veil-contrast-k);
  --pl-g-edge: calc(7% + 17% * var(--pl-vt));
  --pl-g-rim: rgba(255, 255, 255, calc(0.35 + 0.55 * var(--pl-vt)));
  --pl-g-shadow: 0 26px 60px -34px color-mix(in srgb, #0a215c calc(14% + 30% * var(--pl-vt)), transparent);
  --pl-g-glow: 0 0 calc(10px + 26px * var(--pl-vt)) -6px color-mix(in srgb, var(--pl-glow, #2f6bff) calc(30% - 12% * var(--pl-vt)), transparent);

  /* e-ink: from soft slate to deep navy */
  --q2-ink-0: color-mix(in srgb, #0a1330 calc(18% + 82% * var(--pl-vt)), #2f3d5c);
  --q2-ink-heading: var(--q2-ink-0);
  --q2-ink-1: color-mix(in srgb, #1d2c50 calc(10% + 90% * var(--pl-vt)), #53627f);
  --q2-ink-2: color-mix(in srgb, #3a4b72 calc(10% + 90% * var(--pl-vt)), #66758f);
  --q2-ink-primary: var(--q2-ink-0);
  --q2-ink-secondary: var(--q2-ink-1);
  --q2-ink-muted: var(--q2-ink-2);
}

/* ── DARK veils: luminous night glass → obsidian ────────────────────────────────────────── */
html:is([data-ql-veil="waning-gibbous"], [data-ql-veil="last-quarter"], [data-ql-veil="waning-crescent"], [data-ql-veil="eclipse"], [data-ql-veil="total-eclipse"]) :is(body.pl-page, body.pl-page #q2-surface) {
  --q2-veil-alpha-k: calc(0.30 + 0.64 * var(--pl-vt));
  --q2-veil-blur-k: calc(1.4 - 0.8 * var(--pl-vt));
  --q2-veil-sat-k: calc(1.05 - 0.30 * var(--pl-vt));
  --q2-veil-bright-k: calc(1.04 - 0.22 * var(--pl-vt));
  --q2-veil-contrast-k: calc(1 + 0.2 * var(--pl-vt));

  /* the glass is tinted by the veil's own palette; the tint drains and darkens toward the eclipse */
  --pl-g-tint: color-mix(in srgb, #010208 calc(8% + 84% * var(--pl-vt)), color-mix(in srgb, var(--pl-c1, #3a5bff) calc(30% - 26% * var(--pl-vt)), #0d1530));
  --pl-g-alpha: var(--q2-veil-alpha-k);
  --pl-g-sheen: calc(14% - 9% * var(--pl-vt));
  --pl-g-blur: calc(20px * var(--q2-veil-blur-k));
  --pl-g-sat: calc(var(--q2-veil-sat-k) * 1.45);
  --pl-g-bright: calc(1.1 - 0.3 * var(--pl-vt));
  --pl-g-contrast: var(--q2-veil-contrast-k);
  --pl-g-edge: calc(10% + 22% * var(--pl-vt));
  --pl-g-rim: rgba(255, 255, 255, calc(0.12 + 0.2 * var(--pl-vt)));
  --pl-g-shadow: 0 30px 70px -30px rgba(0, 0, 0, calc(0.35 + 0.5 * var(--pl-vt)));
  --pl-g-glow: 0 0 calc(34px - 10px * var(--pl-vt)) -8px color-mix(in srgb, var(--pl-glow, #3a5bff) calc(70% - 25% * var(--pl-vt)), transparent);

  /* e-ink: from bluish-grey light to pure white */
  --q2-ink-0: color-mix(in srgb, #ffffff calc(40% + 60% * var(--pl-vt)), #c4cce0);
  --q2-ink-heading: var(--q2-ink-0);
  --q2-ink-1: color-mix(in srgb, #eef2fb calc(10% + 90% * var(--pl-vt)), #a3aec8);
  --q2-ink-2: color-mix(in srgb, #c9d2e6 calc(10% + 90% * var(--pl-vt)), #8996b3);
  --q2-ink-primary: var(--q2-ink-0);
  --q2-ink-secondary: var(--q2-ink-1);
  --q2-ink-muted: var(--q2-ink-2);
}

/* ── Shared hairline strength (cards, tables, rails all read --pl-line) ─────────────────── */
body.pl-page {
  --pl-line: color-mix(in srgb, var(--q2-ink-0) var(--pl-g-edge, 14%), transparent);
  --pl-line-strong: color-mix(in srgb, var(--q2-ink-0) calc(var(--pl-g-edge, 14%) + 12%), transparent);
}

/* ── The surfaces ───────────────────────────────────────────────────────────────────────── */
.pl-page :is(.pl-glass, .pl-window) {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff var(--pl-g-sheen, 20%), transparent), transparent 46%),
    color-mix(in srgb, var(--pl-g-tint, #fff) calc(var(--pl-g-alpha, 0.5) * 100%), transparent);
  -webkit-backdrop-filter: blur(var(--pl-g-blur, 20px)) saturate(var(--pl-g-sat, 1.45)) brightness(var(--pl-g-bright, 1)) contrast(var(--pl-g-contrast, 1));
  backdrop-filter: blur(var(--pl-g-blur, 20px)) saturate(var(--pl-g-sat, 1.45)) brightness(var(--pl-g-bright, 1)) contrast(var(--pl-g-contrast, 1));
}
/* Featured (Flow, Growth) and obsidian (Nova) cards keep their own signature shadow. */
.pl-page :is(.pl-glass, .pl-window, [data-ql-surface="panel"], .pl-pr__plan--spark, .pl-pr__plan--power, .pl-fh__pack--starter, .pl-fh__pack--scale) {
  box-shadow: inset 0 1px 0 var(--pl-g-rim, transparent), var(--pl-g-shadow), var(--pl-g-glow);
}