/* ================================================================
   App: Reader — Bookmarks UI (sidebar Saved-section + detail star
   toggle + resume notice). Companion of reader-bookmarks.js.
   Scoped to [data-window="reader"].
   ================================================================ */

/* ---- Sidebar Saved-section ---- */
[data-window="reader"] .blog__sb-saved[hidden] { display: none; }
[data-window="reader"] .blog__sb-saved .blog__sb-header {
    display: flex;
    align-items: center;
    gap: 4px;
}
[data-window="reader"] .blog__sb-saved .blog__sb-header i {
    color: var(--byte-warning);
    font-size: 13px;
}
[data-window="reader"] .blog__sb-saved-count {
    margin-left: auto;
    color: var(--byte-text-subtle);
    font-variant-numeric: tabular-nums;
}
[data-window="reader"] .blog__sb-saved-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
[data-window="reader"] .blog__sb-saved-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--byte-r-sm);
    color: var(--byte-text-muted);
    font-family: var(--byte-font-mono);
    font-size: var(--byte-fs-xs);
    text-align: left;
    cursor: pointer;
    transition: background var(--byte-t-fast), color var(--byte-t-fast);
}
[data-window="reader"] .blog__sb-saved-item:hover {
    background: var(--byte-ink-800);
    color: var(--byte-text);
}
[data-window="reader"] .blog__sb-saved-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--byte-text-subtle);
}
[data-window="reader"] .blog__sb-saved-dot.is-progress { background: var(--byte-warning); }
[data-window="reader"] .blog__sb-saved-dot.is-done     { background: var(--byte-success); }
[data-window="reader"] .blog__sb-saved-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-window="reader"] .blog__sb-saved-pct {
    color: var(--byte-warning);
    font-variant-numeric: tabular-nums;
}

/* ---- Star-toggle in article header ---- */
[data-window="reader"] .blog__bookmark-toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: transparent;
    border: 1px solid var(--byte-border);
    border-radius: var(--byte-r-sm);
    color: var(--byte-text-muted);
    font-family: var(--byte-font-mono);
    font-size: var(--byte-fs-xs);
    cursor: pointer;
    transition: color var(--byte-t-fast), border-color var(--byte-t-fast);
}
[data-window="reader"] .blog__bookmark-toggle:hover {
    color: var(--byte-warning);
    border-color: var(--byte-warning);
}
[data-window="reader"] .blog__bookmark-toggle.is-bookmarked {
    color: var(--byte-warning);
    border-color: var(--byte-warning);
    background: rgba(254, 188, 46, 0.10);
}
[data-window="reader"] .blog__bookmark-toggle i { font-size: 14px; }

/* ---- Resume notice (top of detail-main) ---- */
[data-window="reader"] .blog__resume {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(254, 188, 46, 0.08);
    border: 1px solid rgba(254, 188, 46, 0.30);
    border-radius: var(--byte-r-sm);
    color: var(--byte-text);
    font-family: var(--byte-font-mono);
    font-size: var(--byte-fs-sm);
}
[data-window="reader"] .blog__resume i {
    color: var(--byte-warning);
    font-size: 16px;
    flex-shrink: 0;
}
[data-window="reader"] .blog__resume span {
    flex: 1;
    color: var(--byte-text-muted);
}
[data-window="reader"] .blog__resume-btn {
    padding: 3px 10px;
    background: transparent;
    border: 1px solid var(--byte-warning);
    border-radius: var(--byte-r-sm);
    color: var(--byte-warning);
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    transition: background var(--byte-t-fast);
}
[data-window="reader"] .blog__resume-btn:hover {
    background: rgba(254, 188, 46, 0.12);
}
[data-window="reader"] .blog__resume-dismiss {
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--byte-text-subtle);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: color var(--byte-t-fast), background var(--byte-t-fast);
}
[data-window="reader"] .blog__resume-dismiss:hover {
    color: var(--byte-text);
    background: var(--byte-ink-800);
}