/* Collection feedback layer.
 *
 * Owns three things that previously had no visual owner at all:
 *   1. Quick Actions save state — pressed, changed, dirty, saved.
 *   2. The current level marker in Sprite Info power scaling.
 *   3. The gold dust treatment on the profile Sprite.
 *
 * This file replaces nothing and is additive by necessity, but it is deliberately
 * scoped to selectors no other stylesheet writes, so it cannot collide with the
 * existing quick-editor rules in ui-polish-v2.css or next-phases.css. Motion is
 * gated behind prefers-reduced-motion at the bottom of the file.
 */

/* ---- 1. Quick Actions ------------------------------------------------ */

.quick-editor [data-quick-status],
.quick-editor [data-quick-level],
.quick-editor .quick-tile,
.quick-editor .quick-wide,
.quick-editor .quick-save{
  transition:border-color .16s ease,box-shadow .18s ease,background-color .18s ease,color .16s ease,transform .12s ease;
}
.quick-editor [data-quick-status]:active,
.quick-editor [data-quick-level]:active,
.quick-editor .quick-tile:active,
.quick-editor .quick-wide:active{transform:translateY(1px) scale(.985)}

/* The pressed control gets one short confirmation pulse. It is applied to the
   element that was clicked, so a change made with the keyboard reads the same. */
@keyframes quick-change-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-cyan) 55%,transparent)}
  70%{box-shadow:0 0 0 9px color-mix(in srgb,var(--st-cyan) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-cyan) 0%,transparent)}
}
.quick-editor .just-changed{animation:quick-change-pulse .42s ease-out}

/* Bright edge on the selected status and level, per the request that the chosen
   button be obvious. ui-polish-v2.css already sets the fill; this adds the rim. */
.quick-editor [data-quick-status].active,
.quick-editor [data-quick-level].active{outline:2px solid color-mix(in srgb,var(--st-cyan) 78%,white);outline-offset:1px}
.quick-editor [data-quick-level].active{outline-color:color-mix(in srgb,currentColor 70%,white)}

.quick-editor-note{
  margin:0;padding:7px 10px;border-radius:9px;
  border:1px solid var(--st-border);background:color-mix(in srgb,var(--st-surface-2) 88%,transparent);
  color:var(--st-muted);font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.quick-editor[data-dirty="1"] .quick-editor-note{
  border-color:color-mix(in srgb,var(--st-gold) 62%,var(--st-border));
  background:color-mix(in srgb,var(--st-gold) 10%,var(--st-surface-2));
  color:color-mix(in srgb,var(--st-gold) 72%,var(--st-text));
}
/* A dirty panel is marked at the shell, not just at the note, so the unsaved
   state is visible even when the note is scrolled out of view on a short screen. */
.quick-editor[data-dirty="1"]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-gold) 34%,transparent)}
.quick-editor .quick-save:disabled{opacity:.55;cursor:default}
.quick-editor[data-dirty="1"] .quick-save{animation:quick-save-ready 1.9s ease-in-out infinite}
@keyframes quick-save-ready{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-gold) 34%,transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--st-gold) 0%,transparent)}
}

/* Profile eligibility is explained in place rather than by hiding the control. */
.quick-editor .quick-profile:disabled{opacity:.72;cursor:not-allowed;font-size:.56rem;line-height:1.25;padding:6px 8px}
.quick-editor .quick-profile.locked{
  border-color:color-mix(in srgb,var(--st-muted) 44%,var(--st-border));
  color:var(--st-muted);
}
.quick-editor .quick-profile.confirmed{
  border-color:color-mix(in srgb,var(--st-gold) 66%,var(--st-border));
  color:color-mix(in srgb,var(--st-gold) 80%,var(--st-text));
}

/* ---- 2. Power scaling current level --------------------------------- */

.sprite-info-level-legend{
  margin:2px 0 8px;color:var(--st-muted);font-size:.72rem;
}
.sprite-info-level-legend b{color:var(--st-gold);font-weight:900}
.sprite-info-level{transition:border-color .18s ease,background-color .18s ease,opacity .18s ease}
/* Levels already passed are dimmed, the current one is lit, and anything above it
   keeps the default weight so the list still reads as a full 1-5 scale. */
.sprite-info-level.is-reached{opacity:.62}
.sprite-info-level.is-current{
  border-color:color-mix(in srgb,var(--st-gold) 68%,var(--st-border));
  background:color-mix(in srgb,var(--st-gold) 9%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--st-gold) 26%,transparent);
}
.sprite-info-level.is-current>b{color:color-mix(in srgb,var(--st-gold) 82%,var(--st-text));display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sprite-info-level.is-current>b>i{
  font-style:normal;padding:2px 7px;border-radius:999px;
  background:color-mix(in srgb,var(--st-gold) 22%,transparent);
  border:1px solid color-mix(in srgb,var(--st-gold) 50%,transparent);
  font-size:.5rem;font-weight:900;letter-spacing:.09em;
}

/* ---- 3. Profile Sprite gold dust ------------------------------------ */

/* Applied to both profile Sprite surfaces: the large card on the Profile page and
   the compact preview in the Crown Archivist ribbon. Pure CSS — no observers and
   no extra elements, so it costs nothing on pages that never show a Sprite. */
@keyframes sprite-gold-dust{
  0%{transform:translate3d(0,6%,0) rotate(0deg);opacity:0}
  18%{opacity:.85}
  82%{opacity:.5}
  100%{transform:translate3d(0,-14%,0) rotate(180deg);opacity:0}
}
@keyframes sprite-gold-halo{
  0%,100%{opacity:.32;transform:scale(1)}
  50%{opacity:.6;transform:scale(1.045)}
}
.profile-art-wrap:has(img),
.profile-rank-sprite:has(img){position:relative;isolation:isolate}
.profile-art-wrap:has(img)::before,
.profile-rank-sprite:has(img)::before{
  content:"";position:absolute;z-index:0;inset:-6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--st-gold) 34%,transparent),transparent 62%);
  animation:sprite-gold-halo 4.6s ease-in-out infinite;
}
.profile-art-wrap:has(img)::after,
.profile-rank-sprite:has(img)::after{
  content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 22% 72%,color-mix(in srgb,var(--st-gold) 92%,white) 0 1.4px,transparent 1.9px),
    radial-gradient(circle at 74% 62%,color-mix(in srgb,var(--st-gold) 88%,white) 0 1.1px,transparent 1.6px),
    radial-gradient(circle at 46% 84%,color-mix(in srgb,var(--st-gold) 96%,white) 0 1.6px,transparent 2.1px),
    radial-gradient(circle at 62% 32%,color-mix(in srgb,var(--st-gold) 80%,white) 0 1px,transparent 1.5px),
    radial-gradient(circle at 33% 44%,color-mix(in srgb,var(--st-gold) 86%,white) 0 1.2px,transparent 1.7px);
  animation:sprite-gold-dust 5.4s linear infinite;
}
/* The Sprite artwork itself must stay above both layers. */
.profile-art-wrap img,
.profile-rank-sprite img{position:relative;z-index:2}

@media(prefers-reduced-motion:reduce){
  .quick-editor .just-changed,
  .quick-editor[data-dirty="1"] .quick-save,
  .profile-art-wrap:has(img)::before,.profile-rank-sprite:has(img)::before,
  .profile-art-wrap:has(img)::after,.profile-rank-sprite:has(img)::after{animation:none!important}
  .quick-editor [data-quick-status]:active,
  .quick-editor [data-quick-level]:active,
  .quick-editor .quick-tile:active,
  .quick-editor .quick-wide:active{transform:none!important}
  .profile-art-wrap:has(img)::after,.profile-rank-sprite:has(img)::after{opacity:.5}
}