/* Perceived performance: skeleton, transisi hasil, stabilitas layout. Memakai token tema yang ada. */
html{scrollbar-gutter:stable}

/* Skeleton: mengikuti dimensi kartu info (thumb 140x90) dan grid format */
.skel-card{display:flex;flex-direction:column;gap:16px}
.skel{display:block;background:var(--card2,var(--bg2));border-radius:8px;position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink,#888) 7%,transparent),transparent);animation:skel-sheen 1.6s ease-in-out infinite}
@keyframes skel-sheen{to{transform:translateX(100%)}}
.skel-card .thumb.skel{border-radius:var(--r-md,12px)}
.skel-line{height:12px;margin-bottom:10px}
.skel-line.skel-lg{height:18px}
.skel-pills{display:flex;gap:8px;margin-top:4px}
.skel-pills span{width:64px;height:22px;border-radius:999px}
.skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.skel-grid span{height:58px;border-radius:14px}
.skel-status{font-size:.8rem;color:var(--ink3);min-height:1.2em}

/* Hasil lama dipudarkan (tidak dihapus mendadak) selama analisis baru */
.info-card.is-stale,#fmtSection.is-stale{opacity:.55;pointer-events:none;transition:opacity .18s ease}
.info-card,#fmtSection{transition:opacity .18s ease}

/* Munculnya hasil: opacity + transform saja */
@keyframes pp-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.info-card.reveal,#fmtSection.reveal{animation:pp-reveal .24s ease-out backwards}

/* Tombol loading: lebar stabil, spinner sejajar */
.btn[aria-busy="true"]{cursor:progress}
.btn[aria-busy="true"] .spin{margin-right:6px;vertical-align:-2px}
.btn:focus-visible,.q-btn:focus-visible,.type-opt:focus-visible,.theme-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn:disabled{cursor:not-allowed}
.btn[aria-busy="true"]:disabled{cursor:progress}

/* Thumbnail: ruang stabil sebelum gambar dimuat */
.thumb{aspect-ratio:14/9}
.thumb img{display:block}

/* Reduced motion: matikan shimmer dan transisi dekoratif; teks status tetap menjelaskan proses */
@media (prefers-reduced-motion:reduce){
  .skel::after{animation:none;display:none}
  .info-card.reveal,#fmtSection.reveal{animation:none}
  .info-card,#fmtSection,.info-card.is-stale,#fmtSection.is-stale{transition:none}
  .spin{animation-duration:1.4s!important}
}