/* Live mesh background, glass panels and nav icons for the dark, light and colour-blind themes.
   phi.js sets html.phi-on for those three and removes it in the intern shell. Every colour is one of the
   theme's own variables, so nothing here needs changing when a palette does. */
#phi-mesh { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: none; }
.phi-on #phi-mesh { display: block; }

/* glass over the mesh, so text stays readable while the mesh shows through the margins */
.phi-on .site-header { background-color: color-mix(in srgb, var(--bg) 76%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* The blur sits on a pseudo-element, not on the wrapper: backdrop-filter on the wrapper itself would make it the
   containing block for position:fixed children and pull the reading-progress bar (.tp-progress) out of the viewport. */
.phi-on .page-content > .wrapper {
  position: relative; isolation: isolate;
  border: 1px solid var(--border); border-radius: 12px;
  margin-top: 18px; margin-bottom: 18px; padding-top: 18px; padding-bottom: 18px;
}
.phi-on .page-content > .wrapper::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
/* the table of contents sits over the mesh too, so it gets the same glass (it has no fixed children, so blur is safe here) */
.phi-on .tp-toc {
  box-sizing: border-box; padding: 0.8em 0.9em; border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.phi-on .site-footer { background: color-mix(in srgb, var(--bg) 66%, transparent); }

.phi-ico, .mesh-chip { display: none; }
.phi-on .phi-ico { display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.35em; vertical-align: -0.22em; }
.phi-ico svg { width: 100%; height: 100%; display: block; }
.phi-ico .phi-anim { display: none; width: 100%; height: 100%; }
.phi-ico.phi-live .phi-static { display: none; }
.phi-ico.phi-live .phi-anim { display: block; }
/* Lottie carries a fixed ink colour; these make every animation follow the text colour instead */
.phi-anim svg [stroke] { stroke: currentColor; }
.phi-anim svg [fill]:not([fill="none"]) { fill: currentColor; }

.phi-on .mesh-chip {
  display: block; position: fixed; right: 16px; bottom: 16px; z-index: 150;   /* right side: the left margin holds the TOC and progress bar */
  font: 0.75rem ui-monospace, 'Menlo', 'Consolas', monospace; padding: 0.3em 0.7em; cursor: pointer;
  color: var(--text-dim); background: color-mix(in srgb, var(--bg) 76%, transparent); border: 1px solid var(--border);
}
.phi-on .mesh-chip:hover { color: var(--accent-hover); border-color: var(--accent-hover); }