/* =====================================================================
   MAXPOINT — Shared cross-theme layer (V7)
   Loaded in BOTH themes. Contains only: cross-theme fixes (e.g. the
   hbar-fill motion contract), the theme switcher sheet (used by both
   shells), image-fallback presentation and the offline banner.
   Theme-specific styling never lives here.
   ===================================================================== */

/* ---- motion contract fix: .hbar-fill consumes --w set by motion.js ---- */
/* (Before V7 the --w value was written but never consumed by base CSS —
    bars stayed at 0 width outside pages that carried their own patch.) */
.hbar-fill.is-in { width: var(--w, 100%); }

/* ---- safe image fallback (legacy + missing + invalid images) ---- */
.mx-imgbox { position: relative; display: block; min-width: 0; }
.mx-img-fallback {
  display: grid; place-items: center; gap: 4px;
  width: 100%; height: 100%; min-height: 56px;
  background: repeating-linear-gradient(45deg, rgba(127, 127, 140, .08) 0 10px, transparent 10px 20px);
  border: 1px dashed rgba(127, 127, 140, .35); border-radius: 10px;
  color: rgba(127, 127, 140, .9); font-size: .68rem; font-weight: 700;
  text-align: center; padding: 8px;
}
.mx-img-fallback svg { width: 20px; height: 20px; opacity: .7; }

/* ---- offline banner (api.js network events) ---- */
.mx-offline {
  position: fixed; top: 0; inset-inline: 0; z-index: 200;
  background: #d97706; color: #fff; text-align: center;
  font: inherit; font-size: .78rem; font-weight: 700;
  padding: 7px 12px calc(7px + env(safe-area-inset-top, 0px));
  display: none;
}
.mx-offline.is-visible { display: block; }

/* ---- SITE THEME MANAGER (Classic presentation) ----
   The theme-switch UI is ADMIN-ONLY (it lives in /admin/settings). Normal
   users have no site-theme control in either shell; they only get light/dark.
   Classic needs its own visual language for the admin tiles because the Nova
   design system is not loaded in this theme. */
html[data-ui-theme="classic"] .mx-site-theme { display: grid; gap: 10px; }
html[data-ui-theme="classic"] .mx-site-theme__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
html[data-ui-theme="classic"] .mx-site-theme__head .badge { flex: none; }
html[data-ui-theme="classic"] .mx-theme-studio-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 12px;
}
html[data-ui-theme="classic"] .mx-theme-tile {
  position: relative; display: grid; grid-template-columns: 64px 1fr 22px; align-items: center; gap: 12px;
  padding: 12px; border-radius: 12px; border: 1.5px solid var(--line, rgba(237, 169, 34, .18));
  background: var(--raised, rgba(255, 255, 255, .04)); color: var(--t1, #f2f0e6);
  cursor: pointer; text-align: start; font: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
html[data-ui-theme="classic"] .mx-theme-tile:hover:not(:disabled) { border-color: var(--gold-1, #eda922); }
html[data-ui-theme="classic"] .mx-theme-tile.is-selected {
  border-color: var(--gold-1, #eda922); box-shadow: 0 0 0 3px rgba(237, 169, 34, .2);
}
html[data-ui-theme="classic"] .mx-theme-tile:disabled { opacity: .7; cursor: progress; }
html[data-ui-theme="classic"] .mx-theme-tile > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
html[data-ui-theme="classic"] .mx-theme-tile b { font-size: .88rem; }
html[data-ui-theme="classic"] .mx-theme-tile small { font-size: .68rem; color: var(--t3, #8f8a76); line-height: 1.85; }
html[data-ui-theme="classic"] .mx-theme-tile i {
  display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold-1, #eda922); color: #241a05;
}
html[data-ui-theme="classic"] .mx-theme-tile i svg { width: 13px; height: 13px; }
html[data-ui-theme="classic"] .mx-theme-tile.is-selected i { display: grid; }
html[data-ui-theme="classic"] .mx-theme-tile__swatch {
  width: 64px; height: 46px; border-radius: 9px; display: grid; place-items: center;
}
html[data-ui-theme="classic"] .mx-theme-tile__swatch svg { width: 20px; height: 20px; }
html[data-ui-theme="classic"] .theme-preview--nova { background: linear-gradient(135deg, #6355f7, #14b8c9); color: #fff; }
html[data-ui-theme="classic"] .theme-preview--classic { background: linear-gradient(135deg, #10131f, #2b2417); color: #eda922; }
@media (max-width: 480px) {
  html[data-ui-theme="classic"] .mx-theme-tile { grid-template-columns: 52px 1fr; }
  html[data-ui-theme="classic"] .mx-theme-tile__swatch { width: 52px; height: 42px; }
}
/* ---- composition blocks (engine output) — shared vocabulary ---- */
.nv-compose { display: grid; gap: 18px; }
.nv-block { min-width: 0; }
.nv-block--dominant { position: relative; }

.nv-hero-block .card { border-width: 1.5px; }
.nv-hero-block.is-resume { border-inline-start: 4px solid var(--nv-accent, var(--gold-1, #eda922)); }
.nv-hero-block.is-result { border-inline-start: 4px solid var(--nv-ok, #22c55e); }

.nv-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; border-radius: 16px;
  border: 1px solid var(--nv-line, var(--line, rgba(125,125,140,.25)));
  background: var(--nv-surface-2, var(--card, rgba(255,255,255,.04)));
}
.nv-strip__ico {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--nv-accent-soft, rgba(124, 58, 237, .12));
  color: var(--nv-accent, var(--gold-1, #eda922));
}
.nv-strip__ico svg { width: 20px; height: 20px; }
.nv-strip__body { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.nv-strip__body b { font-size: .86rem; color: var(--nv-t1, var(--t1, inherit)); }
.nv-strip__body span { font-size: .74rem; color: var(--nv-t3, var(--t2, inherit)); }
.nv-strip__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.nv-ai { display: grid; gap: 12px; }
.nv-ai__head { display: flex; align-items: center; gap: 12px; }
.nv-ai__ico {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center;
  background: var(--nv-accent-grad, linear-gradient(135deg, #6355f7, #14b8c9)); color: #fff;
  box-shadow: var(--nv-e-accent, none);
  animation: nv-ai-orbit 4.8s ease-in-out infinite;
}
.nv-ai__ico svg { width: 21px; height: 21px; }
.nv-ai__head b { display: block; font-size: .95rem; }
.nv-ai__head span { font-size: .72rem; color: var(--nv-t3, var(--t2)); }
.nv-ai__body { min-width: 0; }
.nv-ai__body[aria-busy="true"] { display: grid; gap: 9px; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--nv-line, var(--line)); background: var(--nv-surface-2, transparent); }
.nv-ai__body[aria-busy="true"] .skel-line {
  position: relative; overflow: hidden; height: 11px; border-radius: 99px;
  background: var(--nv-line-strong, var(--line-strong, rgba(127,127,140,.22)));
}
.nv-ai__body[aria-busy="true"] .skel-line::after {
  content: ''; position: absolute; inset: 0; transform: translateX(100%);
  background: linear-gradient(105deg, transparent 25%, color-mix(in srgb, var(--nv-accent, var(--gold-2)) 26%, transparent) 50%, transparent 75%);
  animation: nv-ai-shimmer 1.35s var(--nv-ease, ease-in-out) infinite;
}
.nv-ai__rec {
  display: grid; gap: 8px; padding: 14px 15px; border-radius: 14px;
  border: 1px solid var(--nv-line, var(--line)); background: var(--nv-surface-2, transparent);
  animation: nv-ai-result-in .42s var(--nv-ease, ease-out) both;
  transition: border-color var(--nv-d-fast, 160ms), box-shadow var(--nv-d-base, 280ms), transform var(--nv-d-fast, 160ms);
}
.nv-ai__rec-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
  padding: 2px;
  margin: -2px;
}
.nv-ai__rec-link:focus-visible {
  outline: 2px solid var(--nv-accent, var(--gold-2));
  outline-offset: 3px;
}
.nv-ai__rec-link.is-static { cursor: default; }
.nv-ai__go {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--nv-accent, var(--gold-2));
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
}
.nv-ai__go svg { width: 14px; height: 14px; }
.nv-ai__rec:hover { border-color: var(--nv-accent, var(--gold-2)); box-shadow: var(--nv-e2, var(--e2)); transform: translateY(-2px); }
.nv-ai__action { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .95rem; line-height: 2; flex-wrap: wrap; }
.nv-ai__action svg { color: var(--nv-accent, var(--gold-1, #eda922)); flex-shrink: 0; }
.nv-ai__why { margin: 0; font-size: .8rem; color: var(--nv-t2, var(--t2)); line-height: 2; }
.nv-ai__evidence { margin: 0; font-size: .72rem; color: var(--nv-t3, var(--t2)); display: flex; gap: 6px; align-items: baseline; }
.nv-ai__evidence svg { width: 13px; height: 13px; flex-shrink: 0; }
.nv-ai__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--nv-t3, var(--t2)); }
.nv-ai__foot .ibtn { width: 36px; height: 36px; }
.nv-ai__foot .ibtn:hover { color: var(--nv-accent, var(--gold-2)); background: var(--nv-accent-soft, var(--gold-soft)); }
.nv-ai__foot .ibtn:focus-visible { outline: 2px solid var(--nv-accent, var(--gold-2)); outline-offset: 2px; }
.nv-ai__foot .ibtn:active svg { animation: nv-ai-refresh .55s ease; }
@keyframes nv-ai-orbit { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(4deg); } }
@keyframes nv-ai-shimmer { to { transform: translateX(-100%); } }
@keyframes nv-ai-result-in { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes nv-ai-refresh { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .nv-ai__head { align-items: flex-start; }
  .nv-ai__head span { display: block; line-height: 1.8; }
  .nv-ai__action { font-size: .88rem; }
  .nv-ai__foot { align-items: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .nv-ai__ico, .nv-ai__body[aria-busy="true"] .skel-line::after,
  .nv-ai__rec, .nv-ai__foot .ibtn:active svg { animation: none; }
}

/* discovery (new user) dominant block */
.nv-discovery { display: grid; gap: 14px; text-align: center; padding: clamp(20px, 4vw, 38px); }
.nv-discovery__art {
  width: 72px; height: 72px; margin-inline: auto; border-radius: 22px;
  display: grid; place-items: center; color: #fff;
  background: var(--nv-accent-grad, linear-gradient(135deg, #eda922, #f59e0b));
  box-shadow: var(--nv-e-accent, none);
}
.nv-discovery__art svg { width: 34px; height: 34px; }
.nv-discovery h2 { margin: 0; font-size: 1.2rem; }
.nv-discovery p { margin: 0 auto; max-width: 46ch; font-size: .85rem; color: var(--nv-t2, var(--t2)); line-height: 2; }
.nv-discovery__steps { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---- V7 tile-label icon contract (engine tiles render icons inside the
        label row — both themes need a bounded size) ---- */
.tile-label svg { width: .95rem; height: .95rem; flex-shrink: 0; }
.tile-trend svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ---- MXIcons default size contract (V7): every JS-injected icon carries
        .mxi; containers may override. Fixes intrinsic ~300px svg sizing
        that broke flex rows at 320–430px. ---- */
svg.mxi { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }