/* =====================================================================
   MAXPOINT NOVA — Base (V7)
   Reset, typography, page canvas, layout primitives, utilities.
   Scoped to html[data-ui-theme="nova"] so Classic stays untouched.
   ===================================================================== */

html[data-ui-theme="nova"] {
  font-size: 16px;
  scroll-behavior: smooth;
  background: var(--nv-bg);
}

html[data-ui-theme="nova"] body {
  margin: 0;
  background:
    radial-gradient(1100px 480px at 88% -10%, var(--nv-accent-soft), transparent 62%),
    radial-gradient(900px 420px at 4% 4%, var(--nv-accent-soft-2), transparent 58%),
    var(--nv-bg);
  color: var(--nv-t1);
  font-family: Vazirmatn, "Vazirmatn FD", Tahoma, sans-serif;
  line-height: 1.8;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

html[data-ui-theme="nova"] *,
html[data-ui-theme="nova"] *::before,
html[data-ui-theme="nova"] *::after { box-sizing: border-box; }

html[data-ui-theme="nova"] img { max-width: 100%; }

/* ------------------------------------------------------------ headings */
html[data-ui-theme="nova"] h1,
html[data-ui-theme="nova"] h2,
html[data-ui-theme="nova"] h3,
html[data-ui-theme="nova"] h4 {
  margin: 0 0 .5em;
  line-height: 1.45;
  color: var(--nv-t1);
  font-weight: 800;
}

/* ------------------------------------------------------------ links */
html[data-ui-theme="nova"] a { color: var(--nv-accent); text-decoration: none; }
html[data-ui-theme="nova"] a:hover { color: var(--nv-accent-2); }

/* ------------------------------------------------------------ focus */
html[data-ui-theme="nova"] :focus-visible {
  outline: none;
  box-shadow: var(--nv-ring);
  border-radius: var(--nv-r-xs);
}

/* ------------------------------------------------------------ selection */
html[data-ui-theme="nova"] ::selection { background: var(--nv-accent-soft); color: var(--nv-t1); }

/* ------------------------------------------------- layout primitives */
.nv-container { width: 100%; max-width: var(--nv-max); margin-inline: auto; padding-inline: clamp(14px, 3vw, 28px); }
.nv-stack { display: grid; gap: 16px; }
.nv-stack--lg { gap: 24px; }
.nv-row { display: flex; align-items: center; gap: 10px; }
.nv-row--wrap { flex-wrap: wrap; }
.nv-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nv-grow { min-width: 0; flex: 1; }

.nv-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------- page header */
.nv-pagehead { display: grid; gap: 6px; margin-bottom: 20px; }
.nv-pagehead__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content;
  font-size: .72rem; font-weight: 700; color: var(--nv-accent);
  background: var(--nv-accent-soft);
  border-radius: var(--nv-r-full); padding: 3px 12px;
}
.nv-pagehead__title { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 800; margin: 0; }
.nv-pagehead__sub { color: var(--nv-t2); font-size: .88rem; margin: 0; max-width: 62ch; }
.nv-pagehead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* -------------------------------------------------------- section head */
.nv-secthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 14px; }
.nv-secthead h2 { font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.nv-secthead h2 svg { color: var(--nv-accent); }
.nv-secthead .nv-linkmore { font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }

/* ------------------------------------------------------ text helpers */
html[data-ui-theme="nova"] .nv-muted { color: var(--nv-t2); }
html[data-ui-theme="nova"] .nv-faint { color: var(--nv-t3); }
html[data-ui-theme="nova"] .nv-small { font-size: .8rem; }
html[data-ui-theme="nova"] .nv-strong { font-weight: 800; color: var(--nv-t1); }
html[data-ui-theme="nova"] .nv-num { font-variant-numeric: tabular-nums; letter-spacing: 0; }
html[data-ui-theme="nova"] .nv-center { text-align: center; }

/* --------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html[data-ui-theme="nova"] *,
  html[data-ui-theme="nova"] *::before,
  html[data-ui-theme="nova"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
html[data-ui-theme="nova"][data-reduced-motion="1"] *,
html[data-ui-theme="nova"][data-reduced-motion="1"] *::before,
html[data-ui-theme="nova"][data-reduced-motion="1"] *::after {
  animation-duration: .01ms !important;
  transition-duration: .01ms !important;
}

/* ---- MXIcons stroke contract: JS-injected lucide SVGs carry no fill/stroke
     attributes; without this they render as solid black shapes. Elements that
     set their own attributes (e.g. seal stroke-width) keep them via :not. ---- */
html[data-ui-theme="nova"] svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
html[data-ui-theme="nova"] svg:not([stroke-width]) { stroke-width: 2; }
html[data-ui-theme="nova"] svg:not([width]) { flex-shrink: 0; }

/* V7: horizontal reveal offsets hold below the fold and create transient
   scroll-overflow on phones — mobile gets fade-only reveals. */
@media (max-width: 1023px) {
  html[data-ui-theme="nova"] .rv[data-rv="left"],
  html[data-ui-theme="nova"] .rv[data-rv="right"] { transform: none; }
}

/* 768–1023 band: co-grid single-column with the 40px reveal offset still
   applies — cap the mock stages so they can never exceed their column. */
@media (max-width: 1023px) {
  html[data-ui-theme="nova"] .mx-split-stage .qcard,
  html[data-ui-theme="nova"] .mx-split-stage .panel { max-width: 100%; }
  html[data-ui-theme="nova"] .co-grid > * { min-width: 0; }
}

/* V7-hotfix: the [hidden] attribute must ALWAYS win. Nova has no app.css
   global guard, and component rules like .mx-alert { display:flex } beat
   the UA default — empty [hidden] alerts painted stray pale bars. */
html[data-ui-theme="nova"] [hidden] { display: none !important; }

/* Phase-4: utility completion for client-rendered pages.
   JS pages emit app.css utility classes (flex-wrap / flex-1 / m-0) and the
   withBusy() spinner, but Nova does NOT load app.css — add Nova-scoped parity
   so component markup never silently loses wrap/shrink/loading behaviour. */
html[data-ui-theme="nova"] .flex-wrap { flex-wrap: wrap; }
html[data-ui-theme="nova"] .flex-1 { flex: 1 1 0%; min-width: 0; }
html[data-ui-theme="nova"] .m-0 { margin: 0; }
html[data-ui-theme="nova"] .spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--nv-line-strong, rgba(148, 152, 175, .35));
  border-top-color: var(--nv-accent);
  animation: mx-spin .8s linear infinite;
}
html[data-ui-theme="nova"] .spinner--lg { width: 36px; height: 36px; border-width: 3.5px; }
html[data-ui-theme="nova"] .btn.loading { pointer-events: none; opacity: .8; }
@keyframes mx-spin { to { transform: rotate(360deg); } }