/* ==========================================================================
   Previously — Stats Hub · stats-saved.css v20261102save1
   Saved comparisons front end (companion to stats-saved.js).
   Dark d3 system: deep ground, hairlines, gold only as the action /
   saved accent. No pills. Motion is the premium standard — panels
   travel and fade, taps visibly register, nothing pops.
   ========================================================================== */

/* ---- save button in the results share row ---- */
.pv-save-btn {
  transition: color .18s ease-out, border-color .18s ease-out,
              background-color .18s ease-out, transform .18s ease-out;
}
.pv-save-btn:active { transform: scale(.97); }
.pv-save-btn.is-saved {
  color: #F2BC68;
  border-color: rgba(242, 188, 104, .55);
}
.pv-save-btn.is-busy { opacity: .65; pointer-events: none; }
.pv-save-btn.pv-just-saved { transform: scale(1.05); }
.pv-save-status {
  font-size: 12.5px;
  color: #A4B3C2;
  align-self: center;
}

/* ---- signed-out prompt (mirrors the debate composer's) ---- */
.pv-save-signin {
  margin: 14px 0 4px;
  padding: 14px 16px;
  border: 1px solid #223343;
  border-radius: 10px;
  background: #101823;
  color: #C7D0DA;
  font-size: 14px;
  line-height: 1.5;
  animation: pvsRise .36s cubic-bezier(.22, .8, .24, 1);
}
.pv-save-signin p { margin: 0 0 10px; }
.pv-save-cta {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 8px;
  background: #F2BC68;
  color: #14100a;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform .18s ease-out, filter .18s ease-out;
}
.pv-save-cta:hover { filter: brightness(1.06); }
.pv-save-cta:active { transform: scale(.97); }

/* ---- saved launcher bar (sits beside the field-size bar) ---- */
.cmp-savedbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 2px;
}
.cmp-savedbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #223343;
  border-radius: 10px;
  background: #101823;
  color: #F9F8F3;
  font: 600 13.5px/1 Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .18s ease-out, background-color .18s ease-out, transform .18s ease-out;
}
.cmp-savedbtn:hover { border-color: rgba(242, 188, 104, .5); }
.cmp-savedbtn:active { transform: scale(.97); }
.cmp-savedbtn .pvs-caret {
  color: #F2BC68;
  font-size: 11px;
  transition: transform .3s cubic-bezier(.22, .8, .24, 1);
}
.cmp-savedbtn[aria-expanded="true"] .pvs-caret { transform: rotate(180deg); }
.pvs-toast {
  font-size: 13px;
  color: #F2BC68;
  opacity: 1;
  transition: opacity .6s ease-out;
}
.pvs-toast.is-gone { opacity: 0; }

/* ---- saved panel ---- */
.cmp-savedpanel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: max-height .38s cubic-bezier(.22, .8, .24, 1),
              opacity .3s ease-out, transform .38s cubic-bezier(.22, .8, .24, 1);
}
.cmp-savedpanel.is-open {
  max-height: 640px;
  overflow-y: auto;
  opacity: 1;
  transform: translateY(0);
  margin: 8px 0 14px;
}
.cmp-savedpanel .pvs-loading,
.cmp-savedpanel .pvs-empty {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #223343;
  border-radius: 10px;
  background: #0C121B;
  color: #A4B3C2;
  font-size: 14px;
  line-height: 1.55;
}
.cmp-savedpanel .pvs-empty strong { color: #F9F8F3; }
.cmp-savedpanel .pvs-empty .pv-save-cta { margin-top: 10px; }

/* ---- saved rows: big cutouts on the team-colour block, name in
        team colour, crest present — the fleet presentation standard ---- */
.pvs-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  border: 1px solid #223343;
  border-radius: 12px;
  background: #101823;
  margin-bottom: 8px;
  transition: border-color .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out;
}
.pvs-row:hover {
  border-color: rgba(242, 188, 104, .45);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.pvs-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 6px 12px 14px;
  text-decoration: none;
  min-width: 0;
}
/* Hover = lift, never underlines (owner law): the site-global
   html[data-theme="d3"] a:hover underline rule must not bleed into
   saved rows — the ID-scoped selector outranks it, as the Zone
   board's hardened guards do. */
#cmpSavedPanel .pvs-main,
#cmpSavedPanel .pvs-main:hover,
#cmpSavedPanel .pvs-main:focus-visible {
  text-decoration: none;
}
.pvs-dudes {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.pvs-dude {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pvs-vs {
  align-self: center;
  font: 700 11px/1 "Previously Headline", "Arial Narrow", sans-serif;
  letter-spacing: .14em;
  color: #F2BC68;
}
.pvs-dot { align-self: center; color: #5b6b7d; font-weight: 700; }
.pvs-art {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 9px;
  overflow: hidden;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
}
.pvs-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.pvs-pid { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
.pvs-pname {
  font: 600 15px/1.15 Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  white-space: nowrap;
}
.pvs-pteam {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #A4B3C2;
  white-space: nowrap;
}
.pvs-crest { width: 15px; height: 15px; object-fit: contain; }
.pvs-meta { font-size: 12px; color: #8FA3B5; letter-spacing: .02em; }
.pvs-remove {
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 8px 8px 0 0;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #8FA3B5;
  font-size: 13px;
  cursor: pointer;
  transition: color .18s ease-out, border-color .18s ease-out, background-color .18s ease-out, transform .18s ease-out;
}
.pvs-remove:hover { color: #F9F8F3; border-color: #223343; background: #0C121B; }
.pvs-remove:active { transform: scale(.94); }
.pvs-remove.is-busy { opacity: .5; pointer-events: none; }

@keyframes pvsRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
  .pvs-pname { font-size: 14px; }
  .pvs-art { width: 40px; height: 40px; }
  .pvs-main { padding-left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-savedpanel, .cmp-savedbtn, .cmp-savedbtn .pvs-caret,
  .pv-save-btn, .pv-save-cta, .pvs-row, .pvs-remove, .pvs-toast {
    transition: none;
  }
  .pv-save-signin { animation: none; }
}