/* ==========================================================================
   Recommendations panel — the "Get Recommendations" experience. The action
   lives in the tool's tab bar; clicking it opens this panel with staged
   loading, then a grouped, prioritized action plan.
   Reference implementation: Keyword Overview. Reusable across all tools.

   Namespaced .mvrec-* and scoped so nothing collides with the dashboard.
   Colors/radius/shadow/type come only from css/tokens.css tokens (light/dark
   handled there). Matches the .mvte explainer + exec-summary tab look.
   ========================================================================== */

/* action button, injected into the tool's .mv-tabbar (or used inline) */
.mvrec-tabdiv{width:1px;align-self:stretch;min-height:20px;background:var(--hairline);margin:0 3px}
.mvrec-tabgo{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;font-family:var(--font);
  font-weight:700;font-size:13px;padding:11px 18px;border-radius:var(--radius-pill);color:var(--on-brand);
  background:var(--gradient);box-shadow:0 6px 16px -8px var(--purple);white-space:nowrap;
  transition:transform .15s,box-shadow .15s,filter .15s;position:relative;overflow:hidden}
.mvrec-tabgo svg{flex-shrink:0}
.mvrec-tabgo::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--on-brand) 42%,transparent),transparent);
  transform:skewX(-18deg);animation:mvrec-shine 4s ease-in-out 1.5s infinite}
.mvrec-tabgo:hover::after{animation-duration:1.4s}
.mvrec-tabgo:hover{transform:translateY(-1px);box-shadow:0 12px 22px -10px var(--purple)}
/* periodic little hop so the AI action reads as special (applied inline by JS) */
@keyframes mvrec-bounce{0%,70%,100%{transform:translateY(0)}78%{transform:translateY(-5px)}85%{transform:translateY(0)}91%{transform:translateY(-2px)}97%{transform:translateY(0)}}
.mvrec-tabgo:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.mvrec-tabgo.on{box-shadow:0 0 0 2px color-mix(in srgb,var(--purple) 42%,transparent),0 6px 16px -8px var(--purple)}
/* Defeat any tab-bar/global colour bleed onto the action pill (higher specificity). */
.mv-tabbar .mvrec-tabgo{background:var(--gradient);opacity:1;filter:none}
.mv-tabbar .mvrec-tabgo,.mv-tabbar .mvrec-tabgo span{color:var(--on-brand);-webkit-text-fill-color:var(--on-brand)}
.mv-tabbar .mvrec-tabgo svg{color:var(--on-brand);stroke:var(--on-brand)}
@keyframes mvrec-shine{0%{left:-120%}28%,100%{left:140%}}

/* panel (invitation shown by default; tab-bar shortcut also opens it) */
.mvrec{display:block;margin-top:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--card);overflow:hidden;font-family:var(--font);color:var(--text);position:relative;
  animation:mvrec-rise .5s cubic-bezier(.22,1,.36,1)}
@keyframes mvrec-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mvrec *{box-sizing:border-box}
.mvrec-band{position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient)}
.mvrec-pad{padding:24px 26px}
.mvrec svg{display:block}

.mvrec-state{display:none}
.mvrec-state.on{display:block;animation:mvrec-fade .4s ease}
@keyframes mvrec-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* shared header (icon + eyebrow) */
.mvrec-top{display:flex;align-items:center;gap:11px}
.mvrec-ai{width:34px;height:34px;border-radius:var(--radius-sm);flex-shrink:0;display:grid;place-items:center;
  color:var(--on-brand);background:var(--gradient);box-shadow:0 6px 16px -8px var(--purple)}
.mvrec-eyebrow{font:800 11px/1.1 var(--font);letter-spacing:.13em;text-transform:uppercase;color:var(--purple-bright)}
.mvrec-eyebrow small{display:block;margin-top:4px;font:600 12.5px/1.3 var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}

/* ---------- INVITATION (always shown, below the result) ---------- */
/* Two columns: the copy stacks on the left, the call to action sits centred on
   the right. As a plain stack the panel used only the left half of a very wide
   card and left a tall empty void beside it on every tool. No markup change —
   the copy nodes are placed in column 1 and the action block spans the rows. */
/* Copy + action share the top row; a full-width stats band sits below so the
   plan preview reads as a real section, not a strip of small chips. */
.mvrec-invite.on{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy action" "stats stats";column-gap:36px;row-gap:22px;align-items:center}
.mvrec-invite>.mvrec-copy{grid-area:copy;min-width:0}
.mvrec-invite>.mvrec-preview{grid-area:stats}
.mvrec-invite>.mvrec-actions{grid-area:action;flex-direction:column;align-items:stretch;justify-content:center;gap:10px}
.mvrec-invite>.mvrec-actions .mvrec-go{justify-content:center}
.mvrec-invite>.mvrec-actions .mvrec-note{justify-content:center}
@media (max-width:900px){
  .mvrec-invite.on{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "stats" "action"}
  .mvrec-invite>.mvrec-actions{flex-direction:row;align-items:center}
}
.mvrec-invite .mvrec-top{margin-bottom:14px}
.mvrec-h{font-family:var(--font-heading);font-weight:800;font-size:21px;letter-spacing:-.01em;margin:0 0 6px}
.mvrec-sub{font-size:14px;color:var(--text-2);max-width:62ch;margin:0;line-height:1.55}
/* stat tiles — the plan preview, sized to read as a finished section */
.mvrec-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0}
.mvrec-ptile{padding:15px 18px;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--panel);display:flex;flex-direction:column;gap:4px;min-width:0}
.mvrec-ptile b{font-family:var(--font-heading);font-weight:800;font-size:30px;line-height:1;color:var(--text)}
.mvrec-ptile span{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.mvrec-ptile.total{border-color:color-mix(in srgb,var(--purple) 26%,var(--border));background:color-mix(in srgb,var(--purple) 7%,var(--panel))}
.mvrec-ptile.total b{color:var(--purple-bright)}
.mvrec-ptile.hi{border-color:color-mix(in srgb,var(--red) 30%,transparent);background:color-mix(in srgb,var(--red) 6%,var(--panel))}
.mvrec-ptile.hi b{color:var(--red)}
.mvrec-ptile.me{border-color:color-mix(in srgb,var(--amber) 32%,transparent);background:color-mix(in srgb,var(--amber) 8%,var(--panel))}
.mvrec-ptile.lo{border-color:color-mix(in srgb,var(--green) 30%,transparent);background:color-mix(in srgb,var(--green) 6%,var(--panel))}
.mvrec-ptile.lo b{color:var(--green)}
.mvrec-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mvrec-go{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;font-family:var(--font);font-weight:700;
  font-size:14.5px;padding:15px 26px;border-radius:var(--radius);color:var(--on-brand);background:var(--gradient);
  box-shadow:0 8px 22px -10px var(--purple);transition:filter .15s,box-shadow .15s;position:relative;overflow:hidden;
  animation:mvrec-bounce 3.6s ease-in-out 1.4s infinite}
.mvrec-go svg{flex-shrink:0}
.mvrec-go::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--on-brand) 42%,transparent),transparent);
  transform:skewX(-18deg);animation:mvrec-shine 4s ease-in-out 1.5s infinite}
.mvrec-go:hover::after{animation-duration:1.4s}
.mvrec-go:hover{filter:brightness(1.06);box-shadow:0 14px 28px -12px var(--purple)}
.mvrec-go:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.mvrec-note{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.mvrec-note svg{color:var(--muted)}

/* ---------- LOADING ---------- */
.mvrec-loading .mvrec-top{margin-bottom:14px}
.mvrec-lhead{font-family:var(--font-heading);font-weight:800;font-size:17px;margin:0 0 4px}
.mvrec-lsub{font-size:13px;color:var(--muted);margin:0 0 16px}
.mvrec-prog{height:5px;border-radius:var(--radius-pill);background:var(--bg-2);overflow:hidden;margin-bottom:20px}
.mvrec-prog-fill{height:100%;width:6%;border-radius:var(--radius-pill);background:var(--gradient);transition:width .6s cubic-bezier(.22,1,.36,1)}
.mvrec-steps-l,.mvrec-loading .mvrec-steps{display:grid;gap:11px;margin-bottom:22px}
.mvrec-step{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--text-2);transition:opacity .3s,color .3s}
.mvrec-step.pending{opacity:.45}
.mvrec-step.active{color:var(--text);font-weight:600}
.mvrec-step .ic{width:26px;height:26px;border-radius:var(--radius-pill);flex-shrink:0;display:grid;place-items:center;
  border:1.5px solid var(--border-strong);color:var(--muted);position:relative;font:700 12px/1 var(--font-mono);transition:.3s}
.mvrec-step.active .ic{border-color:var(--purple);color:var(--purple-bright)}
.mvrec-step.active .ic::after{content:"";position:absolute;inset:-4px;border-radius:var(--radius-pill);border:2px solid color-mix(in srgb,var(--purple) 45%,transparent);animation:mvrec-ping 1.1s ease-out infinite}
@keyframes mvrec-ping{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.mvrec-step.done .ic{border-color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.mvrec-step .spin{width:14px;height:14px;border-radius:var(--radius-pill);border:2px solid color-mix(in srgb,var(--purple) 30%,transparent);border-top-color:var(--purple);animation:mvrec-spin .7s linear infinite}
@keyframes mvrec-spin{to{transform:rotate(360deg)}}
.mvrec-skel{display:grid;gap:12px}
.mvrec-skelcard{height:66px;border-radius:var(--radius);border:1px solid var(--hairline);
  background:linear-gradient(90deg,var(--bg-2) 25%,color-mix(in srgb,var(--purple) 7%,var(--bg-2)) 50%,var(--bg-2) 75%);
  background-size:200% 100%;animation:mvrec-shim 1.5s linear infinite}
.mvrec-skelcard:nth-child(2){animation-delay:.2s}.mvrec-skelcard:nth-child(3){animation-delay:.4s}
@keyframes mvrec-shim{to{background-position:-200% 0}}
/* Invite preview: a skeleton in each tile until the plan resolves (it is built on
   click, from /api/premium-ai), so no count is shown before it is computed. */
.mvrec-ptile.skel{background:var(--panel);border-color:var(--hairline)}
.mvrec-ptile.skel .mvrec-skelnum,.mvrec-ptile.skel .mvrec-skelbar{display:block;border-radius:var(--radius-sm);
  background:linear-gradient(90deg,var(--bg-2) 25%,color-mix(in srgb,var(--purple) 7%,var(--bg-2)) 50%,var(--bg-2) 75%);
  background-size:200% 100%;animation:mvrec-shim 1.5s linear infinite}
.mvrec-ptile.skel .mvrec-skelnum{width:40px;height:26px}
.mvrec-ptile.skel .mvrec-skelbar{width:76%;height:11px;margin-top:6px}
@media (prefers-reduced-motion:reduce){.mvrec-ptile.skel .mvrec-skelnum,.mvrec-ptile.skel .mvrec-skelbar{animation:none}}

/* ---------- RESULTS ---------- */
.mvrec-rhead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.mvrec-done{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--green);padding:5px 12px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--green) 12%,transparent)}
.mvrec-done svg{width:14px;height:14px}
.mvrec-verdict{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius);margin-bottom:16px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--purple) 9%,transparent),color-mix(in srgb,var(--magenta) 6%,transparent));
  border:1px solid color-mix(in srgb,var(--purple) 26%,var(--border))}
.mvrec-verdict .vi{width:32px;height:32px;border-radius:var(--radius-sm);flex-shrink:0;display:grid;place-items:center;color:var(--on-brand);background:var(--gradient)}
.mvrec-verdict .vi svg{width:17px;height:17px}
.mvrec-verdict p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text)}
.mvrec-verdict .vl{display:block;font:800 10.5px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--purple-bright);margin-bottom:5px}

/* stat tiles */
.mvrec-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.mvrec-stat{flex:1 1 120px;min-width:110px;padding:14px 16px;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--panel);display:flex;flex-direction:column;gap:2px}
.mvrec-stat b{font-family:var(--font-heading);font-weight:800;font-size:26px;line-height:1;color:var(--text)}
.mvrec-stat span{font-size:11.5px;font-weight:600;color:var(--muted)}
.mvrec-stat.hi{border-color:color-mix(in srgb,var(--red) 30%,transparent);background:color-mix(in srgb,var(--red) 6%,var(--panel))}
.mvrec-stat.hi b{color:var(--red)}
.mvrec-stat.lo{border-color:color-mix(in srgb,var(--green) 30%,transparent);background:color-mix(in srgb,var(--green) 6%,var(--panel))}
.mvrec-stat.lo b{color:var(--green)}

/* priority groups */
.mvrec-group{margin-bottom:22px}
.mvrec-group:last-of-type{margin-bottom:6px}
.mvrec-group-h{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.mvrec-gicon{width:30px;height:30px;border-radius:var(--radius-sm);flex-shrink:0;display:grid;place-items:center}
.mvrec-gicon svg{width:16px;height:16px}
.mvrec-gicon.high{color:var(--red);background:color-mix(in srgb,var(--red) 13%,transparent)}
.mvrec-gicon.med{color:var(--amber);background:color-mix(in srgb,var(--amber) 15%,transparent)}
.mvrec-gicon.low{color:var(--green);background:color-mix(in srgb,var(--green) 13%,transparent)}
.mvrec-glabel{font-family:var(--font-heading);font-weight:800;font-size:15.5px;color:var(--text);display:flex;flex-direction:column;line-height:1.2}
.mvrec-glabel em{font-family:var(--font);font-style:normal;font-weight:500;font-size:11.5px;color:var(--muted);margin-top:2px}
.mvrec-gcount{margin-left:auto;font:800 12px/1 var(--font-mono);color:var(--text-3);background:var(--bg-2);border-radius:var(--radius-pill);padding:5px 10px}
.mvrec-list{display:grid;gap:12px}

/* recommendation card */
.mvrec-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel);transition:transform .18s,box-shadow .18s,border-color .18s}
.mvrec-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--purple) 28%,var(--border))}
.mvrec-cpad{padding:17px 19px}
.mvrec-chead{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:11px}
.mvrec-rank{width:26px;height:26px;flex-shrink:0;border-radius:var(--radius-pill);display:grid;place-items:center;font:800 12px/1 var(--font-mono);color:var(--on-brand)}
.mvrec-rank.high{background:var(--red)}
.mvrec-rank.med{background:var(--amber)}
.mvrec-rank.low{background:var(--green)}
.mvrec-ctitle{font-family:var(--font-heading);font-weight:800;font-size:15.5px;color:var(--text);flex:1;min-width:190px;line-height:1.35}
.mvrec-area{font-size:11px;font-weight:700;color:var(--text-3);padding:3px 9px;border-radius:var(--radius-pill);background:var(--bg-2);white-space:normal;overflow-wrap:break-word}
.mvrec-what{font-size:13.5px;color:var(--text-2);margin:0 0 13px;line-height:1.55}
.mvrec-why{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:var(--radius-sm);margin:0 0 14px;
  background:color-mix(in srgb,var(--purple) 6%,transparent);border:1px solid color-mix(in srgb,var(--purple) 16%,transparent)}
.mvrec-why svg{width:15px;height:15px;color:var(--purple-bright);flex-shrink:0;margin-top:2px}
.mvrec-why p{margin:0;font-size:13px;color:var(--text-2);line-height:1.5}
.mvrec-why b{color:var(--text);font-weight:700}
.mvrec-stepsh{font:800 10.5px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.mvrec-steps{list-style:none;margin:0 0 15px;padding:0;display:grid;gap:10px;counter-reset:rc}
.mvrec-steps li{position:relative;padding-left:32px;font-size:13.5px;color:var(--text-2);line-height:1.5}
.mvrec-steps li::before{counter-increment:rc;content:counter(rc);position:absolute;left:0;top:-1px;width:22px;height:22px;
  border-radius:var(--radius-pill);background:color-mix(in srgb,var(--purple) 12%,transparent);color:var(--purple-bright);font:800 11px/22px var(--font-mono);text-align:center}
.mvrec-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:13px;border-top:1px solid var(--hairline)}
.mvrec-meters{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mvrec-meter{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.02em;text-transform:uppercase}
.mvrec-dots{display:inline-flex;gap:3px}
.mvrec-dots i{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--hairline)}
.mvrec-dots.effort i.on{background:var(--amber)}
.mvrec-dots.impact i.on{background:var(--green)}
.mvrec-fix{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--font);font-weight:700;font-size:12.5px;
  padding:8px 14px;border-radius:var(--radius);border:1px solid var(--border-strong);background:transparent;color:var(--purple-bright);cursor:pointer;transition:background .15s,border-color .15s}
.mvrec-fix:hover{background:color-mix(in srgb,var(--purple) 9%,transparent);border-color:var(--purple)}
.mvrec-fix:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.mvrec-fix svg{width:14px;height:14px}
.mvrec-redo{margin-top:18px;display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;cursor:pointer;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--muted);padding:4px 0}
.mvrec-redo:hover{color:var(--text-2)}
.mvrec-redo:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.mvrec-redo svg{width:14px;height:14px}

/* ---------- ERROR ---------- */
.mvrec-error .mvrec-top{margin-bottom:14px}
.mvrec-err{display:flex;gap:12px;align-items:flex-start}
.mvrec-err .ei{width:32px;height:32px;border-radius:var(--radius-sm);flex-shrink:0;display:grid;place-items:center;color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
.mvrec-err h4{font-family:var(--font-heading);font-size:15px;margin:0 0 4px}
.mvrec-err p{font-size:13px;color:var(--text-2);margin:0 0 12px}
/* Plan gate (upgrade / quota) reuses the error slot but must read as a prompt,
   not a failure: swap the red error mark for a brand-purple upgrade mark. */
.mvrec-gate .ei{color:var(--purple-bright);background:color-mix(in srgb,var(--purple) 14%,transparent)}
.mvrec-upgrade{text-decoration:none}
.mvrec-upgrade:hover{text-decoration:none}

@media (max-width:640px){
  .mvrec-pad{padding:20px}
  .mvrec-foot{gap:12px}
  .mvrec-fix{margin-left:0}
  .mvrec-stat{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .mvrec *{animation:none!important;transition:none!important}
  .mvrec,.mvrec-state.on{animation:none}
  .mvrec-tabgo,.mvrec-tabgo::after{animation:none!important}
}


/* ------------------------------------------------------------------
   Defeat the legacy result reset. Result containers carry .mvx, and
   css/legacy-mvx.css sets `.mvx * { margin:0; padding:0 }`. That selector has
   the same specificity as our single-class rules, so whichever stylesheet
   loads last wins, and the panel lost every scrap of its padding: the button
   collapsed onto its label and the stat tiles clipped their own text.
   These re-assert the SAME values one specificity step higher, so the panel
   is correct wherever it is mounted and whatever the load order.
   ------------------------------------------------------------------ */
.mv-tabbar .mvrec-tabgo{padding:11px 18px}
.mvrec .mvrec-pad{padding:24px 26px}
.mvrec .mvrec-h{margin:0 0 6px}
.mvrec .mvrec-sub{margin:0}
.mvrec .mvrec-ptile{padding:15px 18px}
.mvrec .mvrec-go{padding:15px 26px}
.mvrec .mvrec-lhead{margin:0 0 4px}
.mvrec .mvrec-lsub{margin:0 0 16px}
.mvrec .mvrec-done{padding:5px 12px}
.mvrec .mvrec-verdict{padding:16px 18px;margin-bottom:16px}
.mvrec .mvrec-verdict p{margin:0}
.mvrec .mvrec-stat{padding:14px 16px}
.mvrec .mvrec-gcount{margin-left:auto;padding:5px 10px}
.mvrec .mvrec-cpad{padding:17px 19px}
.mvrec .mvrec-area{padding:3px 9px}
.mvrec .mvrec-what{margin:0 0 13px}
.mvrec .mvrec-why{padding:11px 13px;margin:0 0 14px}
.mvrec .mvrec-why p{margin:0}
.mvrec .mvrec-steps{margin:0 0 15px;padding:0}
.mvrec .mvrec-fix{margin-left:auto;padding:8px 14px}
.mvrec .mvrec-redo{margin-top:18px;padding:4px 0}
.mvrec .mvrec-err h4{margin:0 0 4px}
.mvrec .mvrec-err p{margin:0 0 12px}

/* Several icons in the panel's set ship without width/height attributes, so an
   inline SVG with no intrinsic size stretches to fill its flex line. Give every
   icon in a button or status chip an explicit box. */
.mvrec .mvrec-go svg,.mv-tabbar .mvrec-tabgo svg{width:17px;height:17px;flex:none}
.mvrec .mvrec-err .ei svg,.mvrec .mvrec-gate .ei svg{width:17px;height:17px;flex:none}