/* Shared reading surface, approved 2026-10-31. Text colors remain unchanged. */
:root {
  --site-panel-color:#100c1c;
  --site-panel-density:35;
  --site-panel-feather:80px;
  --site-panel-blur:0px;
  --site-panel-background:color-mix(in srgb,var(--site-panel-color) calc(var(--site-panel-density) * 1%),transparent);
  --site-panel-mask:linear-gradient(90deg,transparent,#000 min(var(--site-panel-feather),50%),#000 max(calc(100% - var(--site-panel-feather)),50%),transparent),linear-gradient(transparent,#000 min(var(--site-panel-feather),50%),#000 max(calc(100% - var(--site-panel-feather)),50%),transparent);
}
:root body :is(.internal-page,.home-runes) { --page-glass:transparent; }

/* Use a separate layer: feathering must never fade text or controls. */
:root body :is(.question-form,.compact-panel:not(.legal),.account-form,.ritual-frame,.space-overview,.space-card,.ritual-info,.info-dialog),
:root body .internal-page :is(.question-form,.compact-panel:not(.legal),.account-form,.ritual-frame) {
  background:transparent; box-shadow:none; border-color:transparent;
  isolation:isolate; -webkit-backdrop-filter:none; backdrop-filter:none;
}
:root body :is(.question-form,.compact-panel:not(.legal),.account-form,.ritual-frame,.space-overview,.space-card) { position:relative; }
:root body :is(.question-form,.compact-panel:not(.legal),.account-form,.ritual-frame:not(.reading-surface),.space-overview,.space-card,.ritual-info,.info-dialog)::after {
  content:""; position:absolute; z-index:-2; inset:var(--panel-inset,-20px -28px); pointer-events:none;
  background:var(--site-panel-background); border-radius:20px;
  -webkit-mask-image:var(--site-panel-mask); mask-image:var(--site-panel-mask);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}

/* Existing text veils share exactly the same density and soft edge. */
:root body .internal-page :is(.question-intro,.choose-header,.result-body,.result-sidebar,.legal,.personal-copy,.journal-subtitle,.pricing-page)::before,
:root body :is(.home-faq-list,.home-welcome-copy,.home-example,.home-deck-reading,.home-runes-reading,.personal-copy,.astrolabe-reading,.card-viewer-description)::before,
:root body .catalog-below>div::before,:root body .catalog-steps::before {
  background:var(--site-panel-background); filter:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  -webkit-mask-image:var(--site-panel-mask); mask-image:var(--site-panel-mask);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
:root body .internal-page .reading-surface .result-body.reading-document::before { display:block; inset:-20px -28px; }
/* A container owns one veil; nested text sections do not darken it again. */
:root body :is(.question-form,.compact-panel:not(.legal),.account-form,.ritual-frame:not(.reading-surface),.space-overview,.space-card) :is(.question-intro,.choose-header,.personal-copy)::before { display:none; }
:root body .internal-page .ritual-question.ritual-frame { background:transparent; }
@media(max-width:700px) {
  :root body :is(.question-form,.compact-panel:not(.legal),.account-form,.ritual-frame:not(.reading-surface),.space-overview,.space-card,.ritual-info,.info-dialog)::after,
  :root body .internal-page .reading-surface .result-body.reading-document::before { inset:var(--panel-inset,-12px -14px); }
}
/* A scrolling dialog must contain its veil; negative insets created horizontal overflow. */
:root body :is(.ritual-info,.info-dialog){--panel-inset:0px}
/* Navigation, artwork, question glow and modal dimmers keep their own treatments. */