/* ============================================================
   ON1 FX — client-side GPU visual-effects "skin" system.
   Styles ONLY the background canvas + the theme selector control.
   Theme-neutral on purpose: this overlays ANY ON1 surface
   (nrs / ssmailab / panel / landing) without inheriting or
   fighting that surface's palette. All selectors are namespaced
   under #on1fx-* / .on1fx-* so nothing here leaks into a host page.
   Fonts: reuses the project's 3 Google fonts (already loaded by
   every surface). We only *reference* them; we never @import.
   ============================================================ */

/* --- Local, scoped tokens. Self-contained so we don't depend on
       any host surface's CSS custom properties. --------------- */
:root {
  --on1fx-panel-bg:    rgba(14, 16, 22, 0.92);
  --on1fx-panel-bd:    rgba(120, 160, 200, 0.28);
  --on1fx-ink:         #e8edf4;        /* AA on the dark panel */
  --on1fx-ink-dim:     #aab4c2;        /* >= 4.5:1 on panel bg */
  --on1fx-accent:      #36d6e7;        /* ON1 cyan */
  --on1fx-accent-2:    #b59bff;        /* ON1 violet */
  --on1fx-focus:       #ffd166;        /* high-contrast focus ring */
  --on1fx-radius:      10px;
  --on1fx-z-canvas:    0;              /* host content should sit > 0 */
  --on1fx-z-ui:        2147483000;     /* control floats above content */
}

/* --- Full-bleed background canvas -------------------------------
   Fixed + inset:0, sits behind page content. Host pages keep their
   own backgrounds; when a theme is active the canvas paints over a
   transparent gap. pointer-events default = none so clicks pass
   through; fx-core flips this to 'auto' (with a guard) only for
   effects that opt into pointer interaction, and even then forwards
   non-drag clicks. ------------------------------------------------ */
#on1fx-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: var(--on1fx-z-canvas);
  pointer-events: none;          /* default: never intercept clicks */
  background: transparent;
  opacity: var(--on1fx-opacity, 1);
  /* never let the canvas create a scrollbar or get selected */
  user-select: none;
  -webkit-user-select: none;
  contain: strict;
}
/* When fx-core marks the canvas interactive, it adds this class.
   We still keep it visually behind content; pointer routing is the
   only behavioural change. */
#on1fx-bg.on1fx-interactive {
  pointer-events: auto;
}
/* Hidden state (theme=classic / no-op). Removed from a11y + paint. */
#on1fx-bg[hidden] {
  display: none !important;
}

/* --- Launcher button (corner, unobtrusive) --------------------- */
.on1fx-launch {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: var(--on1fx-z-ui);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--on1fx-panel-bd);
  background: var(--on1fx-panel-bg);
  color: var(--on1fx-ink);
  cursor: pointer;
  font: 16px/1 "Chakra Petch", "IBM Plex Mono", monospace;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 140ms ease, border-color 140ms ease, opacity 140ms ease;
  opacity: 0.78;
}
.on1fx-launch:hover { opacity: 1; transform: translateY(-1px); }
.on1fx-launch:focus-visible {
  outline: 2px solid var(--on1fx-focus);
  outline-offset: 2px;
  opacity: 1;
}
.on1fx-launch .on1fx-glyph { pointer-events: none; }

/* --- Popover panel: the theme list ----------------------------- */
.on1fx-panel {
  position: fixed;
  right: 14px;
  bottom: 62px;
  z-index: var(--on1fx-z-ui);
  width: min(320px, calc(100vw - 28px));
  max-height: min(70vh, 560px);
  overflow: auto;
  padding: 12px;
  border-radius: var(--on1fx-radius);
  border: 1px solid var(--on1fx-panel-bd);
  background: var(--on1fx-panel-bg);
  color: var(--on1fx-ink);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  font-family: "Familjen Grotesk", system-ui, sans-serif;
}
.on1fx-panel[hidden] { display: none !important; }

.on1fx-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 2px 10px;
}
.on1fx-title {
  margin: 0;
  font: 13px/1.2 "Chakra Petch", monospace;
  letter-spacing: 0.04em;
  color: var(--on1fx-ink);
}
.on1fx-sub {
  margin: 0;
  font: 10px/1.3 "IBM Plex Mono", monospace;
  color: var(--on1fx-ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* The selectable list. role=radiogroup; each row is role=radio. */
.on1fx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.on1fx-opt {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: start;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font: inherit;
}
.on1fx-opt:hover { background: rgba(255, 255, 255, 0.05); }
.on1fx-opt:focus-visible {
  outline: 2px solid var(--on1fx-focus);
  outline-offset: -2px;
}
.on1fx-opt[aria-checked="true"] {
  border-color: var(--on1fx-accent);
  background: rgba(54, 214, 231, 0.10);
}
.on1fx-opt .on1fx-mark {
  grid-row: 1;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--on1fx-ink-dim);
  box-sizing: border-box;
}
.on1fx-opt[aria-checked="true"] .on1fx-mark {
  border-color: var(--on1fx-accent);
  background:
    radial-gradient(circle at center,
      var(--on1fx-accent) 0 4px, transparent 5px);
}
.on1fx-opt .on1fx-label {
  grid-column: 2;
  font: 500 13px/1.25 "Familjen Grotesk", system-ui, sans-serif;
  color: var(--on1fx-ink);
}
.on1fx-opt .on1fx-blurb {
  grid-column: 2;
  margin-top: 2px;
  font: 11px/1.35 "IBM Plex Mono", monospace;
  color: var(--on1fx-ink-dim);
}
.on1fx-opt .on1fx-tier {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  font: 9px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--on1fx-panel-bd);
  color: var(--on1fx-ink-dim);
  white-space: nowrap;
}
.on1fx-opt .on1fx-tier[data-tier="low"]    { color: #9fe6c0; border-color: rgba(159,230,192,0.4); }
.on1fx-opt .on1fx-tier[data-tier="medium"] { color: #ffd166; border-color: rgba(255,209,102,0.4); }
.on1fx-opt .on1fx-tier[data-tier="high"]   { color: #ff9f9f; border-color: rgba(255,159,159,0.4); }

/* operator-only rows get a faint badge */
.on1fx-opt .on1fx-tier[data-access="operator"] {
  color: var(--on1fx-accent-2);
  border-color: rgba(181,155,255,0.45);
}

/* Footer note area: reduced-motion / load-cap explanations. */
.on1fx-note {
  margin: 10px 2px 2px;
  padding-top: 8px;
  border-top: 1px solid var(--on1fx-panel-bd);
  font: 11px/1.4 "IBM Plex Mono", monospace;
  color: var(--on1fx-ink-dim);
}
.on1fx-note[hidden] { display: none !important; }
.on1fx-note strong { color: var(--on1fx-ink); font-weight: 600; }

/* --- Reduced motion: hide nothing functionally, but never animate
       the chrome. The CANVAS itself is forced off in JS (theme is
       pinned to classic), this just calms the control. ---------- */
@media (prefers-reduced-motion: reduce) {
  .on1fx-launch { transition: none; }
  .on1fx-launch:hover { transform: none; }
}

/* --- Tiny screens: dock the panel to the bottom edge. ---------- */
@media (max-width: 380px) {
  .on1fx-panel {
    right: 8px;
    left: 8px;
    width: auto;
    bottom: 56px;
  }
  .on1fx-launch { right: 10px; bottom: 10px; }
}