/* Matrix design system tokens, ported from the 0.36.0 prototype baseline.

   IMPORTANT: matrix-light-glass.css already owns the --mx-* namespace and
   defines --mx-ink, --mx-line, --mx-line-strong, --mx-danger and --mx-mono for
   the production light theme. These tokens are therefore declared on .mx-next
   and never on :root — custom properties resolve from the nearest ancestor that
   defines them, so redesigned subtrees get these values while every un-migrated
   view keeps the light theme's. Declaring them globally silently repaints the
   entire legacy UI. */

.mx-next {
  --mx-bg: #0b0d18;
  --mx-bg-soft: #101425;
  --mx-panel: #151a2f;
  --mx-panel-2: #1b2240;
  --mx-panel-3: #222a4d;
  --mx-ink: #f3f5ff;
  --mx-dim: #a3a9cb;
  --mx-faint: #73799e;
  --mx-line: #2a3158;
  --mx-line-strong: #3a467c;
  --mx-iris: #7d8dff;
  --mx-iris-soft: #aeb8ff;
  --mx-gold: #f2c65a;
  --mx-ok: #64dda4;
  --mx-warn: #f3b65c;
  --mx-danger: #f1716b;
  --mx-cyan: #54cbd8;
  --mx-radius: 14px;
  --mx-radius-sm: 8px;
  --mx-shadow: 0 18px 54px -28px rgba(0, 0, 0, .78);
  --mx-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mx-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  font: 13px/1.5 var(--mx-sans);
}

/* Only the view containers stretch; the topbar host must hug its header or it
   paints a full-height panel behind the page. */
.page.mx-next { min-height: 100%; }

/* matrix-light-glass.css sets `html[data-theme="light"] .page { background:
   var(--mx-canvas) !important }`, and redesigned views render into those same
   .page containers. !important here is not a shortcut — it is the only thing
   that can override an !important declaration, and it is scoped to .mx-next so
   no legacy view is affected. Remove it once .page is off the light theme. */
html[data-theme] .mx-next.mx-next {
  color-scheme: dark;
  background:
    radial-gradient(circle at 9% -7%, rgba(125, 141, 255, .13), transparent 30%),
    radial-gradient(circle at 91% 5%, rgba(84, 203, 216, .08), transparent 26%),
    var(--mx-bg) !important;
  color: var(--mx-ink);
}

.mx-next *{ box-sizing: border-box; }
.mx-next button,
.mx-next input,
.mx-next select,
.mx-next textarea { font: inherit; }
.mx-next button { color: inherit; }
.mx-next a { color: inherit; text-decoration: none; }
.mx-next [hidden] { display: none !important; }
.mx-next button:focus-visible,
.mx-next a:focus-visible,
.mx-next [tabindex]:focus-visible {
  outline: 2px solid var(--mx-iris-soft);
  outline-offset: 2px;
}

/* A redesigned view owns the whole viewport, so the legacy light page and its
   leftover chrome must not show through underneath it. The colour is a literal
   rather than var(--mx-bg): body and html sit outside .mx-next, where that
   token deliberately does not resolve. `!important` is required on html because
   index.html sets an inline light background on the element itself. */
html.mx-next-active { background: #0b0d18 !important; }
body.mx-next-active { background: #0b0d18 !important; }
body.mx-next-active #ctx,
body.mx-next-active #famlegend,
body.mx-next-active #round-drawer,
body.mx-next-active #assistant-pet,
body.mx-next-active .assistant-pet { display: none !important; }

/* The legacy onboarding overlay is Chinese-only and the redesigned views carry
   their own honest empty states. Suppressing it in CSS rather than at its call
   sites is deliberate: world.js is a classic script and evaluates before the
   boot.mjs module defines window.MatrixNext, so any JS-side guard loses that
   race and the overlay paints for one frame or longer. */
body.mx-next-active #onboard,
body.mx-next-active #onboard.open { display: none !important; }

/* ---------------------------------------------------------------- no flash

   Two distinct windows let the previous/legacy page show through, and both are
   races that JS cannot win from inside a module:

   1. First paint. The document ships #view-pool already `.open` with legacy
      light-theme markup, and world.js (a classic script) reaches showView()
      before boot.mjs has defined window.MatrixNext. `mx-next-boot` is set by the
      inline head script — before any stylesheet or module — and released by the
      registry once the first render settles, or by index.html's own time bound if
      the redesign layer never loads.

   2. Every navigation. showView() reveals the container with `.open`
      synchronously, but the renderer arrives through a lazy import(), so the
      container's un-migrated legacy children are on screen until the renderer's
      innerHTML lands. `mx-next-pending` covers exactly that gap.

   Both hide the legacy CHILDREN, not the container: the container is already
   dark under .mx-next, so the transition is dark → dark, never light → dark. */
html.mx-next-boot { background: #0b0d18 !important; color-scheme: dark; }
html.mx-next-boot body { background: #0b0d18 !important; }

/* The legacy appbar is replaced by .mx-topbar. syncTopbar() hides it
   imperatively, which is one frame late on first paint. */
html.mx-next-boot header.appbar,
body.mx-next-active header.appbar { display: none !important; }

/* `> *` rather than a bare descendant selector: the renderer's own output is a
   child of the container too, and must never be caught by this. `display:none`
   rather than `visibility:hidden` because the containers are position:fixed with
   overflow:auto — merely invisible legacy markup still lays out and still raises
   a scrollbar, which is its own visible artefact. Nothing measures this markup in
   the meantime: world.js's legacy renderers already bail out through
   legacyOwnsView() for any view the redesign claims. */
html.mx-next-boot .page[id^="view-"] > *,
.page.mx-next-pending > * { display: none !important; }

/* The legacy pages are position:fixed and painted with the light theme, so an
   un-owned one showing beneath the redesigned view reads as a flash of the old
   product even while its children are hidden. */
html.mx-next-boot .page[id^="view-"] { background: #0b0d18 !important; }