/* Pandu News "Kaca Bening": halaman Tersimpan (PRD 7.6). Nilai px/hex dari mockup Claude Design
   (design/pandu-news-redesign/Tersimpan dan Status.dc.html 1a-1d). */

/* Setinggi layar di bawah header: footer selalu di luar layar saat daftar dari browser muncul
   setelah hidrasi, jadi tidak ada yang bergeser. */
.pn-saved-main { min-height: calc(100dvh - 76px); }
.pn-saved { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; padding-block: 32px 72px; }
.pn-saved-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pn-saved-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pn-saved-heading { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pn-saved-heading h1 { font-size: 36px; line-height: 44px; font-weight: 800; letter-spacing: -0.02em; }
.pn-saved-count { font-size: 14px; line-height: 20px; color: var(--color-ink-3); }
.pn-saved-clear {
  flex-shrink: 0; height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--color-danger-line);
  background: var(--color-surface); color: var(--color-danger); font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background-color var(--dur-color);
}
.pn-saved-clear:hover { background: var(--color-danger-bg); }

.pn-saved-list {
  list-style: none; margin: 0; padding: 0 24px; border-radius: var(--radius-panel);
  background: var(--glass-solid-bg); border: 1px solid var(--color-line); box-shadow: var(--glass-solid-hi), 0 2px 12px rgba(15,23,42,.04);
}
.pn-saved-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 44px; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--color-line-soft); }
.pn-saved-row:last-child { border-bottom: 0; }
.pn-saved-thumb { width: 160px; height: auto; aspect-ratio: 7 / 5; border-radius: 12px; object-fit: cover; background: var(--color-line); }
.pn-saved-open { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--color-ink); }
.pn-saved-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; color: var(--color-muted); }
.pn-saved-read { display: flex; gap: 8px; }
.pn-saved-title { font-size: 18px; line-height: 25px; font-weight: 700; transition: color var(--dur-color); }
.pn-saved-open:hover .pn-saved-title { color: var(--color-brand-600); }
.pn-saved-row.is-seen .pn-saved-title { color: var(--color-seen); }
.pn-saved-foot { display: none; }
.pn-saved-remove {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--color-line);
  background: var(--color-surface); color: var(--color-ink-3); cursor: pointer; transition: color var(--dur-color), border-color var(--dur-color);
}
.pn-saved-remove:hover { color: var(--color-danger); border-color: var(--color-danger-line); }

/* Sebelum hidrasi: tiga baris kerangka seukuran baris asli. */
.pn-saved-skel .pn-skel { animation: pn-shimmer 1.2s linear infinite; }
.pn-saved-skel .pn-saved-thumb { height: auto; }
.pn-saved-skel-text { display: flex; flex-direction: column; gap: 12px; }
.pn-saved-skel-text .pn-skel { width: 40%; height: 14px; border-radius: 7px; }
.pn-saved-skel-text .pn-skel + .pn-skel { width: 80%; height: 22px; }

.pn-saved-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px; border-radius: 24px;
  background: var(--glass-solid-bg); border: 1px solid var(--color-line); box-shadow: var(--glass-solid-hi);
}
.pn-saved-empty h2 { font-size: 22px; line-height: 28px; font-weight: 750; }
.pn-saved-empty p { max-width: 560px; font-size: 16px; line-height: 25px; color: var(--color-ink-2); }
.pn-saved-empty strong { color: var(--color-ink); }
.pn-saved-cta { height: 48px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 12px; background: #1d4ed8; color: #fff; font-size: 15px; font-weight: 700; transition: background-color var(--dur-color); }
.pn-saved-cta:hover { background: #2563eb; color: #fff; }

.pn-saved-about {
  display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--radius-panel);
  background: var(--glass-solid-bg); border: 1px solid var(--color-line); box-shadow: var(--glass-solid-hi);
  font-size: 14px; line-height: 22px; color: var(--color-ink-2);
}
.pn-saved-about h2 { font-size: 16px; line-height: 22px; font-weight: 750; color: var(--color-ink); }

/* Dialog Hapus semua */
.pn-confirm { position: fixed; inset: 0; z-index: 80; }
.pn-confirm-back { position: absolute; inset: 0; background: rgba(5,20,60,.40); animation: pn-fade-in var(--dur-card) var(--ease-in); }
.pn-confirm-box {
  position: absolute; top: 31vh; left: 0; right: 0; width: min(440px, calc(100% - 32px)); margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 20px;
  background: var(--color-surface); border: 1px solid var(--color-line); color: var(--color-ink);
  box-shadow: 0 32px 80px rgba(5,20,60,.30); animation: pn-pop var(--dur-card) var(--ease-in);
}
.pn-confirm-box h2 { font-size: 20px; line-height: 26px; font-weight: 750; }
.pn-confirm-box p { font-size: 15px; line-height: 23px; color: var(--color-ink-2); }
.pn-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.pn-confirm-actions button { height: 44px; padding: 0 18px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color var(--dur-color); }
.pn-confirm-cancel { border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink); }
.pn-confirm-cancel:hover { background: var(--color-line-soft); }
.pn-confirm-ok { border: 0; background: #b91c1c; color: #fff; }
.pn-confirm-ok:hover { background: #991b1b; }
.pn-confirm.is-closing .pn-confirm-back, .pn-confirm.is-closing .pn-confirm-box { animation: pn-fade-out 200ms ease forwards; }
@keyframes pn-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Gulir dikunci; ruang scrollbar tetap dan diberi warna yang tertutup latar dialog (seperti palette). */
:root[data-dialog] { overflow: hidden; scrollbar-gutter: stable; background-color: color-mix(in srgb, var(--color-page) 60%, rgb(5 20 60)); }

@media (max-width: 1023px) {
  .pn-saved { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* Mobile (mockup 1c/1d): thumbnail 72 px di kiri, rubrik tanpa pil, waktu baca di bawah judul,
   dialog menjadi lembar bawah. Panel "Tentang daftar baca" tidak tampil. */
@media (max-width: 767px) {
  .pn-saved-main { min-height: calc(100dvh - 60px); }
  .pn-saved { padding-block: 20px 32px; }
  .pn-saved-col { gap: 12px; }
  .pn-saved-head { gap: 12px; }
  .pn-saved-heading { gap: 4px; }
  .pn-saved-heading h1 { font-size: 28px; line-height: 34px; }
  .pn-saved-count { font-size: 13px; line-height: 18px; }
  .pn-saved-clear { padding: 0 12px; font-size: 13px; }
  .pn-saved-list { padding: 0 12px; }
  .pn-saved-row { grid-template-columns: 72px minmax(0, 1fr) 44px; gap: 10px; padding: 12px 0; }
  .pn-saved-thumb { width: 72px; border-radius: 10px; }
  .pn-saved-open { gap: 3px; }
  .pn-saved-meta time, .pn-saved-read { display: none; }
  .pn-saved-meta .pn-badge { padding: 0; background: none; font-size: 12px; }
  .pn-saved-title { font-size: 14px; line-height: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .pn-saved-foot { display: block; font-size: 12px; line-height: 18px; color: var(--color-muted); }
  .pn-saved-remove { border: 0; background: transparent; }
  .pn-saved-skel-text { gap: 8px; }
  .pn-saved-empty { gap: 14px; padding: 24px 20px; border-radius: 20px; }
  .pn-saved-empty h2 { font-size: 19px; line-height: 25px; }
  .pn-saved-empty p { font-size: 15px; line-height: 23px; }
  .pn-saved-cta { padding: 0 18px; }
  .pn-saved-about { display: none; }

  .pn-confirm-box {
    top: auto; bottom: 0; width: auto; gap: 10px; padding: 20px 18px calc(28px + env(safe-area-inset-bottom));
    border: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -16px 40px rgba(15,23,42,.18); animation: pn-sheet-in var(--dur-panel) var(--ease-in);
  }
  .pn-confirm-box h2 { font-size: 19px; line-height: 25px; }
  .pn-confirm-actions { flex-direction: column-reverse; gap: 10px; margin-top: 4px; }
  .pn-confirm-actions button { height: 48px; font-size: 15px; }
  .pn-confirm.is-closing .pn-confirm-box { animation: pn-sheet-out 240ms var(--ease-out) forwards; }
  /* Header dan bottom bar tertutup latar dialog: blurnya dimatikan agar ringan. */
  :root[data-dialog] .pn-header, :root[data-dialog] .pn-bottombar { -webkit-backdrop-filter: none; backdrop-filter: none; }
}