/* ══════════════════════════════════════════════════════════════════
   Saved stories (competitive-feature-gaps #9, phase 1 — localStorage).
   Save toggle on story pages + the /saved list page. Token-driven:
   light/dark comes free from the cnn-theme custom properties — no raw
   colors in this file.
   ══════════════════════════════════════════════════════════════════ */

/* ── Save toggle (story pages, lives in .story-meta-info) ───────── */
/* min-width holds both "Save" and "Saved" labels so the state swap
   never reflows the meta row (no layout shift). */
.save-story-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;min-width:96px;margin-left:auto;padding:5px 14px;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:12.5px;font-weight:700;line-height:1.2;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.save-story-btn svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.save-story-btn:hover{border-color:var(--brand);color:var(--brand-ink)}
.save-story-btn[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)}
.save-story-btn[aria-pressed="true"] svg{fill:currentColor}

/* ── /saved page ────────────────────────────────────────────────── */
.saved-page-wrap{max-width:760px;margin:0 auto 64px}
.saved-count{font-size:13px;color:var(--faint);font-weight:600;margin:2px 0 14px}
.saved-items{display:flex;flex-direction:column;gap:12px}
.saved-item{display:flex;align-items:flex-start;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:16px 18px;transition:box-shadow .2s,border-color .2s}
.saved-item:hover{box-shadow:var(--shadow-2);border-color:var(--line-strong)}
.saved-item-body{flex:1;min-width:0}
.saved-item-body h3{font-family:var(--serif);font-size:16.5px;font-weight:700;line-height:1.32;color:var(--ink);letter-spacing:-.005em;margin-bottom:5px}
.saved-item-body h3 a:hover{color:var(--brand-ink)}
.saved-item-meta{font-size:12.5px;color:var(--muted);font-weight:500}
.saved-item-remove{flex-shrink:0;background:transparent;border:1.5px solid var(--line-strong);color:var(--muted);border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700;cursor:pointer;min-height:32px;transition:border-color .15s,color .15s}
.saved-item-remove:hover{border-color:var(--brand);color:var(--brand-ink)}
.saved-empty{background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius);padding:44px 24px;text-align:center}
.saved-empty h2{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink);margin-bottom:8px}
.saved-empty p{font-size:14px;color:var(--muted);line-height:1.6;max-width:44ch;margin:0 auto 18px}
.saved-noscript{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;font-size:14px;color:var(--muted)}
@media (max-width:560px){
  .saved-item{flex-direction:column}
  .saved-item-remove{align-self:flex-start}
}