/* /Components/Alerts/PgAlertForm.razor.rz.scp.css */
.pg-alert-toggle-row[b-vtz7rug91l] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
}

.pg-alert-toggle[b-vtz7rug91l] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    cursor: pointer;
}

.pg-alert-toggle--active[b-vtz7rug91l] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.pg-alert-toggle:disabled[b-vtz7rug91l] {
    opacity: 0.6;
    cursor: default;
}

.pg-alert-feed-filter[b-vtz7rug91l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.pg-alert-feed-chip[b-vtz7rug91l] {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 99px;
    font-size: var(--text-xs);
    cursor: pointer;
    user-select: none;
}

.pg-alert-feed-chip--selected[b-vtz7rug91l] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
/* /Components/Alerts/PgAlertHistory.razor.rz.scp.css */
.pg-trigger-table[b-84xptciyl1] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
}

.pg-trigger-table th[b-84xptciyl1] {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.pg-trigger-table td[b-84xptciyl1] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.pg-trigger-article[b-84xptciyl1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 320px;
}

.pg-trigger-article a[b-84xptciyl1] {
    color: var(--color-accent);
    text-decoration: none;
}

.pg-trigger-article a:hover[b-84xptciyl1] {
    text-decoration: underline;
}

.pg-trigger-feed[b-84xptciyl1] {
    color: var(--color-text-muted);
}

.pg-trigger-reason[b-84xptciyl1] {
    font-style: italic;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.pg-trigger-status[b-84xptciyl1] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 99px;
    font-size: var(--text-xs);
    font-weight: 600;
}

.pg-trigger-status--ok[b-84xptciyl1]   { background: #dcfce7; color: #166534; }
.pg-trigger-status--fail[b-84xptciyl1] { background: #fee2e2; color: #991b1b; }
/* /Components/Alerts/PgAlertList.razor.rz.scp.css */
.pg-alert-list-toolbar[b-xrjvqad35o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.pg-alert-list-heading[b-xrjvqad35o] {
    font-size: var(--text-md);
    font-weight: 600;
}

.pg-alert-intro[b-xrjvqad35o] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.pg-alert-empty[b-xrjvqad35o] {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}

.pg-alert-cards[b-xrjvqad35o] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pg-alert-card[b-xrjvqad35o] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--color-surface);
}

.pg-alert-card--inactive[b-xrjvqad35o] {
    opacity: 0.65;
}

.pg-alert-card-header[b-xrjvqad35o] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.pg-alert-card-name[b-xrjvqad35o] {
    font-weight: 600;
    font-size: var(--text-sm);
}

.pg-alert-card-channel[b-xrjvqad35o] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: var(--color-surface-2);
    padding: 2px 8px;
    border-radius: 99px;
}

.pg-alert-card-meta[b-xrjvqad35o] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.pg-alert-badge[b-xrjvqad35o] {
    padding: 1px 8px;
    border-radius: 99px;
    font-size: var(--text-xs);
}

.pg-alert-badge--inactive[b-xrjvqad35o] {
    background: var(--color-warning);
    color: #fff;
}

.pg-alert-badge--ai[b-xrjvqad35o] {
    margin-left: var(--space-2);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.pg-alert-card-actions[b-xrjvqad35o] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pg-placeholder[b-xrjvqad35o] {
    color: var(--color-text-muted);
    padding: var(--space-4);
}
/* /Components/Digests/PgDigestForm.razor.rz.scp.css */
.pg-digest-form[b-wluydcky2q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.pg-form-section[b-wluydcky2q] {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pg-form-legend[b-wluydcky2q] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.pg-form-hint[b-wluydcky2q] {
    font-size: var(--text-xs);
    color: var(--color-text-faint);
    margin-top: calc(-1 * var(--space-2));
}

.pg-form-check[b-wluydcky2q] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    cursor: pointer;
}

.pg-form-input--mono[b-wluydcky2q] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.pg-form-input--sm[b-wluydcky2q] {
    max-width: 120px;
}

.pg-schedule-modes[b-wluydcky2q] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.pg-schedule-mode[b-wluydcky2q] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
}

.pg-schedule-mode--active[b-wluydcky2q] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.pg-schedule-dows[b-wluydcky2q] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.pg-schedule-dow[b-wluydcky2q] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
    min-width: 48px;
}

.pg-schedule-dow--active[b-wluydcky2q] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
/* /Components/Digests/PgDigestList.razor.rz.scp.css */
.pg-digest-list-toolbar[b-i9605r2dwp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.pg-digest-list-heading[b-i9605r2dwp] {
    font-size: var(--text-md);
    font-weight: 600;
}

.pg-digest-empty[b-i9605r2dwp] {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}

.pg-digest-cards[b-i9605r2dwp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pg-digest-card[b-i9605r2dwp] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--color-surface);
}

.pg-digest-card--inactive[b-i9605r2dwp] {
    opacity: 0.65;
}

.pg-digest-card-header[b-i9605r2dwp] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.pg-digest-card-name[b-i9605r2dwp] {
    font-weight: 600;
    font-size: var(--text-sm);
}

.pg-digest-card-channel[b-i9605r2dwp] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: var(--color-surface-2);
    padding: 2px 8px;
    border-radius: 99px;
}

.pg-digest-card-meta[b-i9605r2dwp] {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.pg-digest-badge[b-i9605r2dwp] {
    padding: 1px 8px;
    border-radius: 99px;
    font-size: var(--text-xs);
}

.pg-digest-badge--inactive[b-i9605r2dwp] {
    background: var(--color-warning);
    color: #fff;
}

.pg-digest-card-actions[b-i9605r2dwp] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pg-placeholder[b-i9605r2dwp] {
    color: var(--color-text-muted);
    padding: var(--space-4);
}
/* /Components/Digests/PgDigestPreviewModal.razor.rz.scp.css */
.pg-modal--lg[b-sifibywez3] {
    width: min(720px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.pg-preview-body[b-sifibywez3] {
    overflow-y: auto;
    flex: 1;
}

.pg-preview-status[b-sifibywez3] {
    padding: var(--pg-space-2) var(--pg-space-3);
    border-radius: var(--pg-radius-sm);
    margin-bottom: var(--pg-space-4);
    font-size: var(--pg-text-sm);
    font-weight: 500;
}

.pg-preview-status--ok[b-sifibywez3] {
    background: color-mix(in srgb, var(--pg-color-success) 12%, transparent);
    color: var(--pg-color-success);
}

.pg-preview-status--skip[b-sifibywez3] {
    background: color-mix(in srgb, var(--pg-color-warning) 12%, transparent);
    color: var(--pg-color-warning);
}

.pg-preview-list[b-sifibywez3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-3);
}

.pg-preview-item[b-sifibywez3] {
    padding: var(--pg-space-3);
    border: 1px solid var(--pg-color-border);
    border-radius: var(--pg-radius-sm);
}

.pg-preview-item-header[b-sifibywez3] {
    display: flex;
    align-items: baseline;
    gap: var(--pg-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--pg-space-1);
}

.pg-preview-item-title[b-sifibywez3] {
    color: var(--pg-color-text);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--pg-text-sm);
}

.pg-preview-item-title:hover[b-sifibywez3] {
    text-decoration: underline;
}

.pg-preview-item-feed[b-sifibywez3] {
    font-size: var(--pg-text-xs);
    color: var(--pg-color-text-muted);
    flex-shrink: 0;
}

.pg-preview-item-date[b-sifibywez3] {
    font-size: var(--pg-text-xs);
    color: var(--pg-color-text-muted);
    margin-bottom: var(--pg-space-1);
}

.pg-preview-item-summary[b-sifibywez3] {
    font-size: var(--pg-text-xs);
    color: var(--pg-color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Components/Digests/PgDigestRunHistory.razor.rz.scp.css */
.pg-run-table[b-uca01crkd5] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
}

.pg-run-table th[b-uca01crkd5] {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.pg-run-table td[b-uca01crkd5] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.pg-run-status[b-uca01crkd5] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 99px;
    font-size: var(--text-xs);
    font-weight: 600;
}

.pg-run-status--sent[b-uca01crkd5]     { background: #dcfce7; color: #166534; }
.pg-run-status--failed[b-uca01crkd5]   { background: #fee2e2; color: #991b1b; }
.pg-run-status--skipped[b-uca01crkd5]  { background: #fef9c3; color: #854d0e; }
.pg-run-status--pending[b-uca01crkd5]  { background: var(--color-surface-2); color: var(--color-text-muted); }

.pg-run-note[b-uca01crkd5] {
    color: var(--color-text-muted);
    max-width: 260px;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.pg-main[b-j4buhkrvwl] {
    display: grid;
    /* The real list/reader split. The list grows with the window instead of handing every spare
       pixel to the reader, which caps its own text around 780px anyway — at 1965px that left the
       list at 17% of the window with titles on three lines beside 600px of empty margin. Bounded
       at 420px on purpose: past that the list competes with the article instead of flanking it. */
    grid-template-columns: minmax(340px, 420px) 1fr;
    grid-column: 2 / -1;
    overflow: hidden;
    height: 100vh;
}

@media (max-width: 767px) {
    /* Pass-through so .pg-panes (list + reader) becomes a direct flex child of the
       300vw slide track in .pg-shell, sitting beside the sidebar pane. */
    .pg-main[b-j4buhkrvwl] {
        display: contents;
    }
}

#blazor-error-ui[b-j4buhkrvwl] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-j4buhkrvwl] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/PgSidebar.razor.rz.scp.css */
.pg-sidebar[b-344494g2if] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    border-right: 1px solid var(--color-border);
    background: var(--color-surface);
    overflow-y: auto;
    overscroll-behavior: contain;
    position: relative; /* anchors the pull-to-refresh indicator (.pg-pull) */
}

@media (max-width: 767px) {
    /* Full-screen root pane of the push-nav slide track. */
    .pg-sidebar[b-344494g2if] {
        flex: 0 0 100vw;
        width: 100vw;
        height: 100dvh;
        max-height: none;
        border-right: none;
    }

}

/* Home-screen PWA (standalone): 100vh is the only iOS measurement that reaches the true
   screen bottom; 100%/100dvh fall ~59px short behind the status bar (the chin gap). See
   PgArticleReader.razor.css / app.css. */
@media (max-width: 767px) and (display-mode: standalone) {
    .pg-sidebar[b-344494g2if] {
        height: 100vh;
    }
}

.pg-sidebar-header[b-344494g2if] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* Desktop/tablet: match .pg-list-header's vertical padding so the two headers are the
   same height and their bottom borders align as one continuous line across the panes. */
@media (min-width: 768px) {
    .pg-sidebar-header[b-344494g2if] {
        padding: var(--space-3) var(--space-4);
    }
}

.pg-sidebar-header-actions[b-344494g2if] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Collapsed-state hide rules live in app.css (global) — Blazor's scoped CSS rewrites
   `.pg-sidebar` with a per-component attribute, which makes ancestor selectors like
   `html.pg-sidebar-collapsed .pg-sidebar` unreliable here. */

.pg-sidebar-logo[b-344494g2if] {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-decoration: none;
}

.pg-sidebar-add-btn[b-344494g2if] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-sm);
    touch-action: manipulation;
}

.pg-sidebar-add-btn:hover[b-344494g2if] {
    background: var(--color-surface-2);
    color: var(--color-text);
}

.pg-sidebar-nav[b-344494g2if] {
    flex: 1;
    padding: var(--space-2) 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pg-sidebar-section-label[b-344494g2if] {
    padding: var(--space-3) var(--space-4) var(--space-1);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-faint);
}

.pg-nav-item[b-344494g2if] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    gap: var(--space-2);
    border-radius: 0;
    touch-action: manipulation;
    min-height: 36px;
}

.pg-nav-item:hover[b-344494g2if] {
    background: var(--color-surface-2);
}

.pg-nav-item--active[b-344494g2if] {
    background: var(--color-surface-2);
    font-weight: 600;
}

.pg-nav-item-row[b-344494g2if] {
    display: flex;
    align-items: center;
}

.pg-nav-item-row .pg-nav-item[b-344494g2if] {
    flex: 1;
    min-width: 0;
}

.pg-nav-item-action[b-344494g2if] {
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    color: var(--color-text-faint);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.pg-nav-item-row:hover .pg-nav-item-action[b-344494g2if],
.pg-nav-item-action:focus-visible[b-344494g2if] {
    opacity: 1;
}

.pg-nav-item-action:hover[b-344494g2if] {
    color: var(--color-danger);
}

.pg-nav-label[b-344494g2if] {
    flex: 1;
    font-size: var(--text-xs);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-nav-badge[b-344494g2if] {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-unread);
    min-width: 18px;
    text-align: right;
}

/* Folders / Saved / Tags use a muted badge so feeds (purple) stay the visual priority. */
.pg-nav-badge--muted[b-344494g2if] { color: var(--color-text-faint); }

/* Collapse arrow: horizontal on desktop (sidebar is a left column), vertical on mobile
   (≤767px) where the feed list stacks on top and collapses up/down. */
.pg-collapse-arrow-v[b-344494g2if] { display: none; }

@media (max-width: 767px) {
    .pg-collapse-arrow-h[b-344494g2if] { display: none; }
    .pg-collapse-arrow-v[b-344494g2if] { display: inline; }
}

.pg-sidebar-footer[b-344494g2if] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.pg-sidebar-footer-spacer[b-344494g2if] {
    flex: 1 1 auto;
}

/* Uniform icon buttons (theme, shortcuts, settings, account, sign out). */
.pg-sidebar-icon-btn[b-344494g2if] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.pg-sidebar-icon-btn:hover[b-344494g2if] {
    color: var(--color-text);
    background: var(--color-surface-2);
}

.pg-sidebar-icon-btn svg[b-344494g2if] { display: block; }

/* The account icon is informational (email on hover), not a hover target. */
.pg-sidebar-user[b-344494g2if],
.pg-sidebar-user:hover[b-344494g2if] {
    cursor: default;
    background: none;
    color: var(--color-text-muted);
}

.pg-sidebar-logout-form[b-344494g2if] { display: inline-flex; margin: 0; }

/* ---- Folder UI ---- */

.pg-sidebar-section-label--with-btn[b-344494g2if] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: var(--space-3);
}

.pg-folder-new-btn[b-344494g2if] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-faint);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    touch-action: manipulation;
}

.pg-folder-new-btn:hover[b-344494g2if] { color: var(--color-text); background: var(--color-surface-2); }

/* Folder header is just another nav row: [16px caret] [name] [right-rail control].
   It shares .pg-feed-row (position/flex/stacking) with feeds so everything lines up. */
/* Caret toggles collapse only; the adjacent name button selects the folder. */
.pg-folder-caret-btn[b-344494g2if] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
    border: none;
    background: none;
    cursor: pointer;
    min-height: 34px;
    touch-action: manipulation;
}

.pg-folder-caret-btn:hover[b-344494g2if] { background: var(--color-surface-2); }

.pg-folder-toggle[b-344494g2if] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: var(--space-1) calc(var(--space-3) + 22px) var(--space-1) 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    min-height: 34px;
    touch-action: manipulation;
}

.pg-folder-toggle:hover[b-344494g2if] { background: var(--color-surface-2); }

.pg-folder-caret[b-344494g2if] {
    flex-shrink: 0;
    width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--color-text-faint);
}

.pg-folder-row--active .pg-folder-toggle[b-344494g2if] { background: var(--color-surface-2); }
.pg-folder-row--active .pg-folder-name[b-344494g2if] { color: var(--color-text); }

.pg-folder-name[b-344494g2if] {
    flex: 1;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-folder-row--collapsed .pg-folder-name[b-344494g2if] { color: var(--color-text-faint); }

.pg-folder-rename-row[b-344494g2if],
.pg-folder-new-row[b-344494g2if] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    margin: var(--space-1) var(--space-2);
}

.pg-folder-rename-input[b-344494g2if] {
    flex: 1;
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    font-family: var(--font-body);
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    outline: none;
    min-width: 0;
}

.pg-folder-rename-ok[b-344494g2if],
.pg-folder-rename-cancel[b-344494g2if] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    font-size: var(--text-2xs);
    cursor: pointer;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    touch-action: manipulation;
}

.pg-folder-rename-ok[b-344494g2if] { background: var(--color-primary); color: #fff; }
.pg-folder-rename-cancel[b-344494g2if] { background: none; color: var(--color-text-muted); }
.pg-folder-rename-cancel:hover[b-344494g2if] { background: var(--color-surface-2); }

/* Feed row with inline folder select */

.pg-feed-row[b-344494g2if] {
    display: flex;
    align-items: center;
    position: relative;
}

/* Lift the row whose ⋯ menu is open above its siblings, or the popover paints
   behind the rows below it. */
.pg-feed-row:has(.is-menu-open)[b-344494g2if] { z-index: 60; }

.pg-feed-row--active .pg-feed-btn[b-344494g2if] {
    background: var(--color-surface-2);
    font-weight: 600;
}

.pg-feed-btn[b-344494g2if] {
    flex: 1;
    min-width: 0;
    /* Reserve the fixed right rail (slot at right: var(--space-3), ~22px wide) so the
       label truncates before the badge/⋯ instead of running under it. */
    padding-right: calc(var(--space-3) + 22px);
}

/* Feed favicon (or letter placeholder when no icon resolves). */
.pg-feed-fav[b-344494g2if] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 3px;
    object-fit: contain;
}

.pg-feed-fav--placeholder[b-344494g2if] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-text-faint);
    background: var(--color-surface-2);
    text-transform: uppercase;
    line-height: 1;
}

/* Quick filter for the feed list (shown only when there are many feeds). */
.pg-feed-filter[b-344494g2if] {
    padding: var(--space-2) var(--space-4) 0;
}

.pg-feed-filter-input[b-344494g2if] {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-family: var(--font-body);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    outline: none;
}

.pg-feed-filter-input:focus[b-344494g2if] { border-color: var(--color-border-strong); }

/* ---- Shared right rail: one fixed slot per row, badge at rest, ⋯ on hover/open ----
   Both the badge and the ⋯ button are absolutely positioned in the same 22px slot at
   right: var(--space-3); CSS cross-fades opacity between them so the label width — and
   therefore the right edge of every row — never shifts. */
.pg-row-control[b-344494g2if] {
    position: absolute;
    right: var(--space-3);
    top: 7px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.pg-folder-row .pg-row-control[b-344494g2if] { top: 6px; }

.pg-row-badge[b-344494g2if] {
    position: absolute;
    right: 0;
    transition: opacity 0.12s ease;
}

.pg-row-more[b-344494g2if] {
    position: absolute;
    right: -3px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-faint);
    font-size: 0.95rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
    touch-action: manipulation;
}

.pg-row-more:hover[b-344494g2if] { background: var(--color-border); color: var(--color-text); }

.pg-feed-row:hover .pg-row-badge[b-344494g2if],
.pg-row-control.is-menu-open .pg-row-badge[b-344494g2if] { opacity: 0; }

.pg-feed-row:hover .pg-row-more[b-344494g2if],
.pg-feed-row:focus-within .pg-row-more[b-344494g2if],
.pg-row-control.is-menu-open .pg-row-more[b-344494g2if] { opacity: 1; pointer-events: auto; }

.pg-row-control.is-menu-open .pg-row-more[b-344494g2if] { background: var(--color-border); color: var(--color-text); }

@media (prefers-reduced-motion: reduce) {
    .pg-row-badge[b-344494g2if],
    .pg-row-more[b-344494g2if] { transition: none; }
}

/* Touch devices can't hover: show both the badge and the ⋯ side by side in-flow. */
@media (hover: none) {
    .pg-feed-btn[b-344494g2if],
    .pg-folder-toggle[b-344494g2if] { padding-right: calc(var(--space-3) + 48px); }
    .pg-row-control[b-344494g2if] { width: auto; gap: var(--space-1); }
    .pg-row-badge[b-344494g2if] { position: static; opacity: 1; }
    .pg-row-more[b-344494g2if] { position: static; opacity: 1; pointer-events: auto; }
}

.pg-feed-menu[b-344494g2if] {
    position: absolute;
    right: -3px;
    top: calc(100% + 2px);
    /* Wide enough for the longest item ("Always load full text" / "Cargar siempre el texto
       completo") plus its leading icon and trailing checkmark, so labels stay on one or two
       lines instead of collapsing into a column. */
    min-width: 248px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-popover);
    padding: var(--space-1);
    z-index: 70;
    display: flex;
    flex-direction: column;
}

.pg-feed-menu-item[b-344494g2if] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.pg-feed-menu-item:hover:not(:disabled)[b-344494g2if],
.pg-feed-menu-item:focus-visible[b-344494g2if] {
    background: var(--color-surface-2);
}

.pg-feed-menu-item--danger[b-344494g2if] { color: var(--color-danger); }
.pg-feed-menu-item:disabled[b-344494g2if] { opacity: 0.5; cursor: not-allowed; }

/* Checkable menu item ("Always load full text"): the label keeps its place and a check
   floats to the trailing edge, so toggling does not reflow the row. Only the trailing
   <span> can be styled from here — the tick inside it is rendered by PgIcon, a child
   component the scope attribute never reaches (style those from app.css instead). */
/* --color-accent is the text colour in both themes (identical in dark, indistinguishable in
   light), so it would read as a no-op — use the same hue as the checkmark to carry the "on" state. */
.pg-feed-menu-item--active[b-344494g2if] { color: var(--color-unread); font-weight: 500; }
.pg-feed-menu-check[b-344494g2if] {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--color-unread);
}

.pg-feed-menu-divider[b-344494g2if] {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-1) var(--space-2);
}

.pg-feed-menu-label[b-344494g2if] {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-faint);
    padding: var(--space-1) var(--space-3);
}


/* Collapsible section headers (Tags, Smart feeds): same look as the static labels, but a real
   button so the section can fold away when the feed tree matters more. */
.pg-sidebar-section-toggle[b-344494g2if] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    padding-left: var(--space-3);
}
.pg-sidebar-section-toggle:hover[b-344494g2if] { color: var(--color-text-muted); }

/* Feed-menu inner page ("Move to") and the row that opens it. */
.pg-feed-menu-back[b-344494g2if] { color: var(--color-text-muted); }
.pg-feed-menu-text[b-344494g2if] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pg-feed-menu-tail[b-344494g2if] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 45%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text-faint);
    font-size: var(--text-xs);
}
a.pg-feed-menu-item[b-344494g2if] { text-decoration: none; }

/* Muted (snoozed) feed: still listed and openable, visibly out of the unread flow. */
.pg-feed-row--snoozed .pg-nav-label[b-344494g2if] { opacity: 0.55; }
.pg-feed-snoozed[b-344494g2if] { display: inline-flex; margin-left: 4px; color: var(--color-text-faint); flex-shrink: 0; }
.pg-feed-menu-hint[b-344494g2if] {
    padding: var(--space-1) var(--space-3) var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-faint);
    line-height: 1.4;
    max-width: 248px;
}

/* Mobile safe areas — MUST stay at the end of the file: these override the base
   .pg-sidebar-header / .pg-sidebar-footer padding shorthands above, and media queries
   add no specificity, so source order is what makes them win. (A previous version sat
   above the base rules and was silently dead — logo and add-feed button rendered under
   the iPhone status bar / Dynamic Island.) */
@media (max-width: 767px) {
    /* Offset the header below the status bar / Dynamic Island. */
    .pg-sidebar-header[b-344494g2if] {
        padding-top: calc(var(--space-4) + env(safe-area-inset-top));
    }

    /* Keep the footer (theme / settings / account) clear of the home indicator. */
    .pg-sidebar-footer[b-344494g2if] {
        padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-wm9v9ckpe9],
.components-reconnect-repeated-attempt-visible[b-wm9v9ckpe9],
.components-reconnect-failed-visible[b-wm9v9ckpe9],
.components-pause-visible[b-wm9v9ckpe9],
.components-resume-failed-visible[b-wm9v9ckpe9],
.components-rejoining-animation[b-wm9v9ckpe9] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-wm9v9ckpe9],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-wm9v9ckpe9],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-wm9v9ckpe9],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-wm9v9ckpe9],
#components-reconnect-modal.components-reconnect-retrying[b-wm9v9ckpe9],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-wm9v9ckpe9],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-wm9v9ckpe9],
#components-reconnect-modal.components-reconnect-failed[b-wm9v9ckpe9],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-wm9v9ckpe9] {
    display: block;
}


#components-reconnect-modal[b-wm9v9ckpe9] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-wm9v9ckpe9 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-wm9v9ckpe9 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-wm9v9ckpe9 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-wm9v9ckpe9]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-wm9v9ckpe9 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-wm9v9ckpe9 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-wm9v9ckpe9 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-wm9v9ckpe9 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-wm9v9ckpe9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-wm9v9ckpe9] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-wm9v9ckpe9] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-wm9v9ckpe9] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-wm9v9ckpe9] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-wm9v9ckpe9] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-wm9v9ckpe9] {
        position: absolute;
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        border: 3px solid #0087ff;
        border-radius: 50%;
        animation: components-rejoining-animation-b-wm9v9ckpe9 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
        will-change: transform, opacity;
    }

        .components-rejoining-animation div:nth-child(2)[b-wm9v9ckpe9] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-wm9v9ckpe9 {
    0%, 4.9% {
        transform: scale(0);
        opacity: 0;
    }

    5% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}
/* /Components/Layout/SettingsLayout.razor.rz.scp.css */
.pg-settings-main[b-9me40753jx] {
    grid-column: 2 / -1;
    overflow-y: auto;
    padding: 32px 48px;
    /* Wide enough that the tab bar and tables use the available window space (forms cap
       themselves via .pg-form-section), but bounded so it doesn't sprawl on huge monitors. */
    max-width: 1100px;
    overscroll-behavior: contain;
}

@media (max-width: 767px) {
    .pg-settings-main[b-9me40753jx] { padding: var(--space-4); }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.pg-settings[b-4bmj489hre] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    /* Never let wide children (rail, tables) push the page wider than its column. */
    min-width: 0;
    max-width: 100%;
}

.pg-settings-header[b-4bmj489hre] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pg-settings-title[b-4bmj489hre] {
    font-size: var(--text-lg);
    font-weight: 600;
}

/* Rail + panel. The rail is a fixed column so panel width does not jump between sections
   (section names differ in length, and a content-sized column would shift the whole page). */
.pg-settings-shell[b-4bmj489hre] {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}

.pg-settings-rail[b-4bmj489hre] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 20px);
    position: sticky;
    /* Clears the page padding so the rail does not touch the viewport edge while scrolling. */
    top: var(--space-2);
}

.pg-settings-rail-group[b-4bmj489hre] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pg-settings-rail-label[b-4bmj489hre] {
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-faint);
    padding: 0 var(--space-3) var(--space-1);
}

.pg-settings-rail-item[b-4bmj489hre] {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    /* Long names wrap rather than overflow the fixed column. */
    overflow-wrap: anywhere;
    transition: color 0.15s, background-color 0.15s;
}

.pg-settings-rail-item:hover[b-4bmj489hre] {
    color: var(--color-text);
    background: var(--color-surface-2);
}

.pg-settings-rail-item--active[b-4bmj489hre] {
    color: var(--color-text);
    background: var(--color-surface-2);
    font-weight: 600;
}

.pg-settings-body[b-4bmj489hre] {
    min-width: 0;
    min-height: 200px;
}

/* Mobile back link — only rendered inside a section, hidden on desktop by .pg-mobile-only. */
.pg-settings-back[b-4bmj489hre] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: var(--space-2);
    padding: var(--space-1) var(--space-2) var(--space-1) 0;
    color: var(--color-link);
    text-decoration: none;
    font-size: var(--text-xs);
}

/* ≤767px: two-level push instead of stacking everything. The index is a full-width list of
   sections; choosing one swaps the panel in and the rail out. Stacking a 17-item rail above the
   panel meant scrolling past every section name to reach the one you had already picked. */
@media (max-width: 767px) {
    .pg-settings-shell[b-4bmj489hre] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .pg-settings-rail[b-4bmj489hre] {
        position: static;
        gap: var(--space-5, 20px);
    }

    /* Full-width rows with a real touch target, not chips. */
    .pg-settings-rail-item[b-4bmj489hre] {
        padding: var(--space-3) var(--space-3);
        min-height: 44px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--color-border);
        border-radius: 0;
        font-size: var(--text-sm);
        overflow-wrap: normal;
    }

    .pg-settings-rail-group[b-4bmj489hre] { gap: 0; }

    .pg-settings-rail-label[b-4bmj489hre] {
        padding: 0 var(--space-3) var(--space-1);
    }

    /* The active highlight is meaningless on the index — you are never looking at both panes. */
    .pg-settings-rail-item--active[b-4bmj489hre] {
        background: none;
        font-weight: 400;
        color: var(--color-text-muted);
    }

    /* One pane at a time. */
    .pg-settings-shell--index .pg-settings-body[b-4bmj489hre] { display: none; }
    .pg-settings-shell--panel .pg-settings-rail[b-4bmj489hre] { display: none; }

    /* The section name becomes the page title, so it must not be a 24px display heading. */
    .pg-settings-title--panel[b-4bmj489hre] {
        font-size: var(--text-md);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/* /Components/Settings/PgAiSettings.razor.rz.scp.css */
.pg-ai-profile-list[b-vse1gb4rmb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.pg-ai-profile-row[b-vse1gb4rmb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.pg-ai-profile-name[b-vse1gb4rmb] {
    font-weight: 600;
    color: var(--color-text);
    flex: 0 0 auto;
}

.pg-ai-profile-meta[b-vse1gb4rmb] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    flex: 1;
    min-width: 0;
}

.pg-ai-profile-editor[b-vse1gb4rmb] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--color-surface);
}

.pg-ai-profile-editor-actions[b-vse1gb4rmb] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
/* /Components/Settings/PgFreshRssSettings.razor.rz.scp.css */
.pg-freshrss[b-cv41lh8376] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pg-freshrss-header[b-cv41lh8376] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pg-freshrss-heading[b-cv41lh8376] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.pg-freshrss-body[b-cv41lh8376] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pg-freshrss-desc[b-cv41lh8376] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.pg-freshrss-config[b-cv41lh8376] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pg-freshrss-status[b-cv41lh8376] {
    font-weight: 500;
    font-size: 0.875rem;
}

.pg-freshrss-status--on[b-cv41lh8376] {
    color: var(--color-success);
}

.pg-freshrss-status--off[b-cv41lh8376] {
    color: var(--color-text-muted);
}

.pg-freshrss-value[b-cv41lh8376] {
    font-size: 0.875rem;
    color: var(--color-text);
}

.pg-freshrss-hint[b-cv41lh8376] {
    padding: 1rem;
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.pg-freshrss-hint p[b-cv41lh8376] {
    margin: 0 0 0.75rem;
    color: var(--color-text-muted);
}

.pg-freshrss-code[b-cv41lh8376] {
    margin: 0;
    padding: 0.75rem;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-break: break-all;
}
/* /Components/Settings/PgStats.razor.rz.scp.css */
.pg-stats-cards[b-9bwqah5y80] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.pg-stat-card[b-9bwqah5y80] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    min-width: 100px;
    flex: 1 1 100px;
}

.pg-stat-value[b-9bwqah5y80] {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--font-display);
    line-height: 1;
    color: var(--color-text);
}

.pg-stat-label[b-9bwqah5y80] {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pg-stats-chart-section[b-9bwqah5y80] {
    margin-bottom: var(--space-6);
}

.pg-stats-section-title[b-9bwqah5y80] {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3) 0;
}

/* Bar chart */
.pg-chart-wrap[b-9bwqah5y80] {
    overflow-x: auto;
}

.pg-bar-chart[b-9bwqah5y80] {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
}

.pg-bar[b-9bwqah5y80] {
    fill: var(--color-accent);
    opacity: 0.55;
    transition: opacity 0.15s;
}

.pg-bar:hover[b-9bwqah5y80] {
    opacity: 1;
}

.pg-bar--today[b-9bwqah5y80] {
    fill: var(--color-accent);
    opacity: 1;
}

.pg-chart-labels[b-9bwqah5y80] {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    max-width: 600px;
    padding-top: var(--space-1);
}

/* Top feeds horizontal bars */
.pg-stats-feed-list[b-9bwqah5y80] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 560px;
}

.pg-stats-feed-row[b-9bwqah5y80] {
    display: grid;
    grid-template-columns: 160px 1fr 56px;
    align-items: center;
    gap: var(--space-3);
}

.pg-stats-feed-name[b-9bwqah5y80] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-stats-feed-bar-wrap[b-9bwqah5y80] {
    background: var(--color-border);
    border-radius: 2px;
    height: 8px;
    overflow: hidden;
}

.pg-stats-feed-bar[b-9bwqah5y80] {
    background: var(--color-accent);
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.pg-stats-feed-count[b-9bwqah5y80] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
    .pg-stats-feed-row[b-9bwqah5y80] {
        grid-template-columns: 120px 1fr 40px;
        gap: var(--space-2);
    }
}
/* /Components/Shared/PgAddFeedModal.razor.rz.scp.css */
/* Styles for this component use global primitives in wwwroot/css/app.css */

/* Moved out of the global wwwroot/css/app.css: every selector below targets markup this
   component authors itself and no other component uses, so Blazor's scoped-CSS attribute
   reaches all of it. Rules whose selectors cross components — or reach into a child
   component's markup, such as anything matching PgIcon's span — must stay global. */
/* Add Feed — search results / candidate cards */
.pg-addfeed-results[b-8q0r72r5p1] {
  margin-top: var(--space-3);
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pg-addfeed-hint[b-8q0r72r5p1] {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-1);
}

.pg-feed-card[b-8q0r72r5p1] {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.pg-feed-card-icon[b-8q0r72r5p1] {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}

.pg-feed-card-icon img[b-8q0r72r5p1] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-feed-card-body[b-8q0r72r5p1] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pg-feed-card-title[b-8q0r72r5p1] {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-feed-card-host[b-8q0r72r5p1] {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.pg-feed-card-desc[b-8q0r72r5p1] {
  font-size: var(--text-xs);
  color: var(--color-text-secondary, var(--color-text-muted));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pg-feed-card-action[b-8q0r72r5p1] {
  flex: 0 0 auto;
  align-self: center;
  white-space: nowrap;
}
/* /Components/Shared/PgArticleList.razor.rz.scp.css */
.pg-list[b-1xtqykqf6o] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    border-right: 1px solid var(--color-border);
    background: var(--color-bg);
    overflow: hidden;
    position: relative; /* anchors the pull-to-refresh indicator (.pg-pull) */
}

@media (max-width: 767px) {
    /* Full-screen middle pane of the push-nav slide track. */
    .pg-list[b-1xtqykqf6o] {
        flex: 0 0 100vw;
        width: 100vw;
        height: 100dvh;
        min-height: 0;
        border-right: none;
    }
}

/* Home-screen PWA (standalone): 100vh is the only iOS measurement that reaches the true
   screen bottom; 100%/100dvh fall ~59px short behind the status bar (the chin gap). See
   PgArticleReader.razor.css / app.css. */
@media (max-width: 767px) and (display-mode: standalone) {
    .pg-list[b-1xtqykqf6o] {
        height: 100vh;
    }
}

.pg-list-header[b-1xtqykqf6o] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* The collapsible search (lens button + .pg-search-popover / .pg-search-icon /
   .pg-search-input) lives in the global app.css: the icon is rendered by the
   <PgIcon> child component, so its span never receives this component's scoped-CSS
   attribute and a rule here would not reach it. */

/* Toolbar row — context label (left) + grouped tools incl. the search lens (right). */
.pg-list-toolbar[b-1xtqykqf6o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.pg-list-context[b-1xtqykqf6o] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
    overflow: hidden;
}

.pg-list-context-title[b-1xtqykqf6o] {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-list-context-count[b-1xtqykqf6o] {
    font-size: var(--text-2xs);
    color: var(--color-text-faint);
    flex-shrink: 0;
}

.pg-list-tools[b-1xtqykqf6o] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    /* Positioning context for the search popover: its right edge aligns with the
       tools' right edge (the pane's right content edge) so it never overflows left. */
    position: relative;
}

/* Ghost icon buttons matching the reader toolbar — no border. */
.pg-tool-btn[b-1xtqykqf6o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.pg-tool-btn:hover[b-1xtqykqf6o] {
    background: var(--color-surface-2);
    color: var(--color-text);
}

.pg-tool-btn--active[b-1xtqykqf6o] {
    background: var(--color-surface-2);
    color: var(--color-accent);
}

.pg-tool-btn:disabled[b-1xtqykqf6o] {
    opacity: 0.5;
    cursor: default;
}

.pg-tool-divider[b-1xtqykqf6o] {
    width: 1px;
    height: 18px;
    background: var(--color-border);
    margin: 0 var(--space-1);
    flex-shrink: 0;
}

.pg-list-body[b-1xtqykqf6o] {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pg-list-placeholder[b-1xtqykqf6o] {
    padding: var(--space-6);
    font-size: var(--text-xs);
    color: var(--color-text-faint);
    text-align: center;
}

/* Loading skeleton rows — mirror .pg-article-row metrics so the list doesn't jump
   when real articles replace them. */
.pg-skeleton-row[b-1xtqykqf6o] {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
}

.pg-skeleton-row-lines[b-1xtqykqf6o] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: 2px;
}

/* Day separator. Sticky so the block you are scrolling through keeps announcing itself — the
   whole point is knowing where "today" ends without reading every timestamp. Sits above rows but
   below the search popover (z 70) and the bulk toolbar. */
.pg-list-daysep[b-1xtqykqf6o] {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-faint);
}

.pg-article-row[b-1xtqykqf6o] {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: var(--space-3) var(--space-4);
    /* Transparent 3px left border on every row so the active row can colour it in
       without shifting the row's content sideways. */
    border: none;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    text-align: left;
    cursor: pointer;
    gap: var(--space-3);
    position: relative;
    touch-action: manipulation;
    transition: background-color 0.12s ease, border-left-color 0.12s ease;
}

.pg-article-row:hover[b-1xtqykqf6o] {
    background: var(--color-surface-2);
}

/* Compact density: tighter rows, no thumbnail or summary, single-line title. */
.pg-list--compact .pg-article-row[b-1xtqykqf6o] { padding: var(--space-2) var(--space-4); gap: var(--space-2); }
.pg-list--compact .pg-article-row-thumb[b-1xtqykqf6o] { display: none; }
.pg-list--compact .pg-article-row-summary[b-1xtqykqf6o] { display: none; }
.pg-list--compact .pg-article-row-title[b-1xtqykqf6o] { -webkit-line-clamp: 1; }

.pg-article-row--active[b-1xtqykqf6o] {
    background: var(--color-surface-2);
    border-left-color: var(--color-accent);
}

.pg-article-row--read .pg-article-row-title[b-1xtqykqf6o] {
    color: var(--color-text-muted);
    font-weight: 400;
    transition: color 0.2s ease;
}

/* Selection has to outrank read-state on the title. Opening an article marks it read, so without
   this the row under your attention drops to muted/400 — lighter than every unread row around it —
   and you lose your place the moment you glance away. Declared after the --read rule so it wins at
   equal specificity; the accent left rail alone was not enough signal. */
.pg-article-row--active .pg-article-row-title[b-1xtqykqf6o] {
    color: var(--color-text);
    font-weight: 600;
}

.pg-article-row-thumb[b-1xtqykqf6o] {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    margin-top: 2px;
}

.pg-article-row-body[b-1xtqykqf6o] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.pg-article-row-meta[b-1xtqykqf6o] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: 2px;
}

.pg-article-row-feed[b-1xtqykqf6o] {
    font-size: 0.75rem;
    color: var(--color-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-article-row-date[b-1xtqykqf6o] {
    font-size: 0.75rem;
    color: var(--color-text-faint);
    flex-shrink: 0;
}

.pg-article-row-title[b-1xtqykqf6o] {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* "+2" affordance on the row that stands in for a collapsed duplicate group. Deliberately quiet:
   it reports that deduplication did something and offers a way to check, rather than advertising
   itself. Sits inline after the title so it never shifts the row's layout when absent. */
/* The wrapper exists only to anchor the chip; it must stay layout-neutral or it would break the
   row's border-bottom rhythm. */
.pg-article-row-wrap[b-1xtqykqf6o] { position: relative; display: block; }

.pg-dup-chip[b-1xtqykqf6o] {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-3);
    z-index: 2;
    padding: 1px var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    /* Opaque, not transparent: it is absolutely positioned bottom-right, which is exactly where the
       summary's last line runs, and a see-through chip rendered both unreadable. */
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    cursor: pointer;
    flex-shrink: 0;
}

.pg-dup-chip:hover[b-1xtqykqf6o] {
    border-color: var(--color-unread);
    color: var(--color-unread);
}


.pg-article-row-summary[b-1xtqykqf6o] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    overflow: hidden;
    /* anywhere, not break-all: break-all split ordinary words mid-word ("par t 2") on every
       row; anywhere only breaks a string that cannot otherwise fit (a long URL). */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

.pg-article-row-saved[b-1xtqykqf6o] {
    font-size: 0.75rem;
    color: var(--color-secondary);
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.pg-list-load-more[b-1xtqykqf6o] {
    display: block;
    width: 100%;
    padding: var(--space-3);
    border: none;
    background: none;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    cursor: pointer;
    text-align: center;
}

.pg-list-load-more:hover[b-1xtqykqf6o] {
    background: var(--color-surface-2);
    color: var(--color-text);
}

/* Mobile header restructure — kept at the end of the file so these overrides win by source
   order over the base .pg-list-context / .pg-list-toolbar rules above (media queries add no
   specificity). The Reeder-style title block replaces the cramped inline context label. */
@media (max-width: 767px) {
    /* Offset the whole header below the status bar / Dynamic Island. */
    .pg-list-header[b-1xtqykqf6o] {
        padding-top: calc(var(--space-3) + env(safe-area-inset-top));
    }

    /* Row 3 — the prominent feed title sits on its own line below the back+tools row. */
    .pg-list-mhead[b-1xtqykqf6o] {
        padding-bottom: var(--space-1);
    }

    /* Flex row so only the title text ellipsizes; the count stays pinned and visible
       even for long feed names (the bare-text version clipped the count). */
    .pg-list-mtitle[b-1xtqykqf6o] {
        display: flex;
        align-items: baseline;
        gap: var(--space-2);
        max-width: 100%;
        font-family: var(--font-display);
        font-size: var(--text-xl);
        font-weight: 700;
        color: var(--color-text);
        line-height: 1.15;
    }

    .pg-list-mtitle-text[b-1xtqykqf6o] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pg-list-mtitle-count[b-1xtqykqf6o] {
        flex-shrink: 0;
        font-size: var(--text-lg);
        font-weight: 600;
        color: var(--color-text-faint);
    }

    /* Row 2 — the big title replaces the cramped inline label; hide it, and let the
       "‹ Feeds" back chevron (left) and view tools (right) split the toolbar row. */
    .pg-list-context[b-1xtqykqf6o] { display: none; }

    /* --- Collapsing header (scroll) --- */
    /* At rest the big title owns its own row. Once .pg-list--scrolled lands (observer.js flips it
       past 32px) the row folds to nothing and the compact title+count take its place inline in the
       toolbar, giving roughly one more article per screen without losing where you are. */
    .pg-list-mhead[b-1xtqykqf6o] {
        overflow: hidden;
        max-height: 3.5rem;
        opacity: 1;
        transition: max-height 0.24s var(--ease-ios), opacity 0.16s ease, padding-bottom 0.24s var(--ease-ios);
    }

    .pg-list--scrolled .pg-list-mhead[b-1xtqykqf6o] {
        max-height: 0;
        opacity: 0;
        padding-bottom: 0;
    }

    /* Outranks the `.pg-list-context { display: none }` above on specificity, not source order. */
    .pg-list--scrolled .pg-list-context[b-1xtqykqf6o] {
        display: flex;
        min-width: 0;
        opacity: 1;
        animation: pg-mhead-in-b-1xtqykqf6o 0.2s var(--ease-out);
    }

    @keyframes pg-mhead-in-b-1xtqykqf6o { from { opacity: 0; } to { opacity: 1; } }

    @media (prefers-reduced-motion: reduce) {
        .pg-list-mhead[b-1xtqykqf6o] { transition: none; }
        .pg-list--scrolled .pg-list-context[b-1xtqykqf6o] { animation: none; }
    }

    .pg-list-toolbar[b-1xtqykqf6o] { justify-content: space-between; }
}

/* Moved out of the global wwwroot/css/app.css: every selector below targets markup this
   component authors itself and no other component uses, so Blazor's scoped-CSS attribute
   reaches all of it. Rules whose selectors cross components — or reach into a child
   component's markup, such as anything matching PgIcon's span — must stay global. */
/* Bulk selection */
.pg-bulk-toolbar[b-1xtqykqf6o] { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); flex-wrap: nowrap; }
.pg-bulk-count[b-1xtqykqf6o] { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 1.25rem; text-align: center; }
.pg-bulk-tag-select[b-1xtqykqf6o] { flex: 1 1 auto; min-width: 4rem; font-size: var(--text-sm); padding: var(--space-1) var(--space-2); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

/* Bulk action icon buttons (mark read/unread, save, select-all, apply-tag) — kept compact
   so the whole selection toolbar fits on one line; the action label is the title tooltip. */
.pg-bulk-btn[b-1xtqykqf6o] {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 30px; height: 30px; padding: 0; font-size: 16px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pg-bulk-btn:hover:not(:disabled)[b-1xtqykqf6o] { background: var(--color-surface-2); border-color: var(--color-border-strong); color: var(--color-accent); }
.pg-bulk-btn:disabled[b-1xtqykqf6o] { opacity: .4; cursor: not-allowed; }
.pg-article-row-check[b-1xtqykqf6o] {
  flex-shrink: 0; width: 1.1rem; height: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-strong); border-radius: 4px;
  background: var(--color-surface); color: white; font-size: .75rem;
}
.pg-article-row-check--checked[b-1xtqykqf6o] { background: var(--color-accent); border-color: var(--color-accent); }
.pg-article-row--checked[b-1xtqykqf6o] { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }

.pg-empty-actions[b-1xtqykqf6o] {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* --- Mobile: "active" must not outshout "read" ---------------------------------------------
   On desktop the reader sits beside the list, so .pg-article-row--active means "this is what the
   pane on the right is showing" — the filled background and the bold title are honest signals of
   a live split view, and they beat read-state on purpose (see the rule near .pg-article-row--read).
   On mobile there is no split view: the reader is a full-screen pane on the slide track, and by
   the time you see the list again it is gone. The same styling then says nothing true — it just
   leaves the one article you *did* read looking heavier than every unread row around it.
   So below 768px the row falls back to plain read styling and keeps only the 3px accent rail as a
   quiet "you were here" marker. Placed at the end of the file so it wins by source order over the
   base --active rules (media queries add no specificity). */
@media (max-width: 767px) {
    .pg-article-row--active[b-1xtqykqf6o] {
        background: var(--color-surface);
        /* Softened rail: at full accent a 3px bar is the loudest thing on the screen, which is the
           very "still highlighted" look this block exists to remove. Half-strength still finds the
           spot at a glance without competing with the unread rows. */
        border-left-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
    }

    .pg-article-row--active.pg-article-row--read .pg-article-row-title[b-1xtqykqf6o] {
        color: var(--color-text-muted);
        font-weight: 400;
    }
}

/* Mark-as-read menu trigger — positioning context until menu.js fixes the popover in place. */
.pg-list-markread[b-1xtqykqf6o],
.pg-list-view[b-1xtqykqf6o] { position: relative; display: inline-flex; }

/* Row ⋯ menu trigger, top-right of the row (the duplicate chip owns bottom-right). Desktop:
   revealed on hover/focus and while open, sitting over the date. Touch has no hover, so it is
   always shown there and the meta line leaves room for it. */
.pg-row-menu-btn[b-1xtqykqf6o] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
}
.pg-article-row-wrap:hover .pg-row-menu-btn[b-1xtqykqf6o],
.pg-row-menu-btn:focus-visible[b-1xtqykqf6o],
.pg-row-menu-btn.is-open[b-1xtqykqf6o] { opacity: 1; }
.pg-row-menu-btn:hover[b-1xtqykqf6o],
.pg-row-menu-btn.is-open[b-1xtqykqf6o] { color: var(--color-text); background: var(--color-surface-2); }

@media (hover: none) {
    .pg-row-menu-btn[b-1xtqykqf6o] { opacity: 1; border-color: transparent; background: transparent; }
    .pg-article-row-meta[b-1xtqykqf6o] { padding-right: 28px; }
}

/* ── Cards layout ─────────────────────────────────────────────────────────────
   Same row markup as the other layouts, restyled: the image spans the card at 16:9 on top.
   Deliberately a plain column, not a grid: the list pane has a fixed width, so a grid only ever
   produced one column, and a sticky day separator inside a grid is confined to its own grid area —
   it stopped pinning. Kept last in the file so it outranks the row rules above. */
.pg-list--cards .pg-list-body[b-1xtqykqf6o] {
    padding: 0 var(--space-3) var(--space-3);
    background: var(--color-bg);
}
.pg-list--cards .pg-list-daysep[b-1xtqykqf6o] { margin: 0 calc(-1 * var(--space-3)); }
.pg-list--cards .pg-article-row-wrap[b-1xtqykqf6o] { margin-top: var(--space-3); }

.pg-list--cards .pg-article-row[b-1xtqykqf6o] {
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
/* The rows' accent rail is a left border; on a card the whole outline carries it instead. */
.pg-list--cards .pg-article-row--active[b-1xtqykqf6o] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
}

/* Fixed ratio reserves the space before the lazy image arrives, so cards never jump. */
.pg-list--cards .pg-article-row-thumb[b-1xtqykqf6o] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0;
    border-radius: 0;
    background: var(--color-surface-2);
}
.pg-list--cards .pg-article-row--read .pg-article-row-thumb[b-1xtqykqf6o] { opacity: 0.6; }

.pg-list--cards .pg-article-row-body[b-1xtqykqf6o] { width: 100%; padding: var(--space-3); }
.pg-list--cards .pg-article-row-title[b-1xtqykqf6o] { font-size: var(--text-sm); -webkit-line-clamp: 3; }
.pg-list--cards .pg-article-row-summary[b-1xtqykqf6o] { margin-top: var(--space-1); -webkit-line-clamp: 3; }
/* No image: the text is the card, so let the summary run longer instead of leaving it short. */
.pg-list--cards .pg-article-row:not(:has(.pg-article-row-thumb)) .pg-article-row-summary[b-1xtqykqf6o] { -webkit-line-clamp: 6; }

.pg-list--cards .pg-article-row-saved[b-1xtqykqf6o] { position: absolute; bottom: var(--space-3); right: var(--space-3); margin: 0; }
.pg-list--cards .pg-article-row-check[b-1xtqykqf6o] { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 1; }
/* Keep the date clear of the hover ⋯ button, which sits on the meta line of a text-only card. */
.pg-list--cards .pg-article-row-meta[b-1xtqykqf6o] { padding-right: 28px; }
/* /Components/Shared/PgArticleReader.razor.rz.scp.css */
.pg-reader[b-xlc2fufeiy] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--color-bg);
    position: relative;
}

/* Swipe-to-navigate edge indicators. Hidden until a touch drag drives their
   inline opacity/transform from gestures.js; --ready lights up past the trigger. */
.pg-swipe-indicator[b-xlc2fufeiy] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.7);
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
}

.pg-swipe-indicator--prev[b-xlc2fufeiy] { left: var(--space-4); }
.pg-swipe-indicator--next[b-xlc2fufeiy] { right: var(--space-4); }

.pg-swipe-indicator--ready[b-xlc2fufeiy] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg);
}

/* Reading-progress bar driven by pigeonRss.initReaderProgress (scaleX, no reflow). */
.pg-reader-progress[b-xlc2fufeiy] {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    z-index: 45;
    pointer-events: none;
    transition: transform 0.05s linear;
}

.pg-reader-back[b-xlc2fufeiy] {
    display: none;
}

@media (max-width: 767px) {
    /* Full-screen right pane of the push-nav slide track. The desktop toolbar (and its
       back chevron) is hidden ≤767px — the .pg-mnav top bar + bottom action bar take over. */
    .pg-reader[b-xlc2fufeiy] {
        flex: 0 0 100vw;
        width: 100vw;
        height: 100dvh;
        min-height: 0;
    }
}

/* Home-screen PWA (standalone): .pg-reader is the containing block for the absolutely pinned
   bottom action bar, so its height must equal the true full screen. 100vh is the only iOS
   measurement that doesn't fall ~59px short behind the status bar (the chin gap); 100%/100dvh
   do. See app.css for the full rationale. Outweighs the scoped 100dvh rule above. */
@media (max-width: 767px) and (display-mode: standalone) {
    .pg-reader[b-xlc2fufeiy] {
        height: 100vh;
    }
}

.pg-reader-empty[b-xlc2fufeiy] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-faint);
    font-size: var(--text-xs);
}

.pg-reader-toolbar[b-xlc2fufeiy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-surface);
}

.pg-reader-feed[b-xlc2fufeiy] {
    font-size: var(--text-2xs);
    color: var(--color-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.pg-reader-actions[b-xlc2fufeiy] {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.pg-reader-btn[b-xlc2fufeiy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 1rem;
    touch-action: manipulation;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.pg-reader-btn:hover[b-xlc2fufeiy] {
    background: var(--color-surface-2);
    color: var(--color-text);
}

.pg-reader-btn:active[b-xlc2fufeiy] { transform: translateY(0.5px); }

.pg-reader-btn--active[b-xlc2fufeiy] {
    color: var(--color-secondary);
}

/* Reading-display preferences: hover/focus-within popover. */
.pg-reader-prefs[b-xlc2fufeiy] {
    position: relative;
    display: inline-flex;
}

.pg-reader-prefs-glyph[b-xlc2fufeiy] {
    font-size: 0.95rem;
    line-height: 1;
}

.pg-reader-prefs-glyph small[b-xlc2fufeiy] {
    font-size: 0.7em;
}

.pg-reader-prefs-popover[b-xlc2fufeiy] {
    /* Rendered only while open; menu.js switches it to position: fixed and places it. */
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 260px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-popover);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    z-index: 50;
}

.pg-reader-prefs-label[b-xlc2fufeiy] { white-space: nowrap; }

.pg-reader-more[b-xlc2fufeiy] { position: relative; }

.pg-reader-prefs-row[b-xlc2fufeiy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.pg-reader-prefs-label[b-xlc2fufeiy] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pg-reader-prefs-btns[b-xlc2fufeiy] {
    display: flex;
    gap: var(--space-1);
}

.pg-reader-prefs-btn[b-xlc2fufeiy] {
    min-width: 34px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
    touch-action: manipulation;
}

.pg-reader-prefs-btn:hover:not(:disabled)[b-xlc2fufeiy] { background: var(--color-surface-2); }
.pg-reader-prefs-btn:disabled[b-xlc2fufeiy] { opacity: 0.4; cursor: not-allowed; }
/* Includes :hover — the plain hover rule above is more specific and used to repaint the selected
   option light while its label stayed white. Label uses --color-bg, not #fff: the dark theme's
   accent is near-white, so white-on-accent was unreadable there. */
.pg-reader-prefs-btn--active[b-xlc2fufeiy],
.pg-reader-prefs-btn--active:hover:not(:disabled)[b-xlc2fufeiy] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg);
}

.pg-reader-content[b-xlc2fufeiy] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-8) var(--space-6);
    max-width: var(--reader-content-w, 780px);
    margin: 0 auto;
    width: 100%;
    min-width: 0;
    overscroll-behavior: contain;
    /* Keyed on the article id in the markup, so this replays on each article change. */
    animation: pg-reader-fade-in-b-xlc2fufeiy 0.18s ease-out;
}

@keyframes pg-reader-fade-in-b-xlc2fufeiy {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Loading skeleton — roughly matches the title / byline / body rhythm. */
.pg-reader-skeleton .pg-skeleton-title[b-xlc2fufeiy] {
    height: 1.9rem;
    width: 80%;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-sm);
}

.pg-reader-skeleton .pg-skeleton-byline[b-xlc2fufeiy] {
    height: 0.8rem;
    width: 42%;
    margin-bottom: var(--space-6);
    border-radius: var(--radius-sm);
}

.pg-reader-skeleton .pg-skeleton-para[b-xlc2fufeiy] {
    margin-bottom: var(--space-3);
}

@media (max-width: 767px) {
    /* The dense desktop toolbar is replaced by the .pg-mnav top bar + bottom action bar. */
    .pg-reader-toolbar[b-xlc2fufeiy] { display: none; }

    /* The .pg-mnav header is in normal flow so no top padding is needed; bottom padding
       clears the absolutely-pinned action bar (--pg-bottombar-h + the safe-area inset it spans). */
    .pg-reader-content[b-xlc2fufeiy] { padding: var(--space-6) var(--space-4) calc(var(--pg-bottombar-h) + env(safe-area-inset-bottom) + var(--space-6)); }

    /* The progress bar sits above the mnav/bottom-bar chrome, offset below the status bar
       / Dynamic Island so it isn't hidden under the notch. */
    .pg-reader-progress[b-xlc2fufeiy] { z-index: 47; top: env(safe-area-inset-top); }
}

.pg-reader-title[b-xlc2fufeiy] {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    margin-bottom: var(--space-3);
    overflow-wrap: break-word;
    word-break: break-word;
}

.pg-reader-title-link[b-xlc2fufeiy] {
    color: inherit;
    text-decoration: none;
}

.pg-reader-title-link:hover[b-xlc2fufeiy],
.pg-reader-title-link:focus-visible[b-xlc2fufeiy] {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.pg-reader-byline[b-xlc2fufeiy] {
    font-size: var(--text-xs);
    color: var(--color-text-faint);
    margin-bottom: var(--space-6);
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.pg-reader-sep[b-xlc2fufeiy] {
    color: var(--color-border-strong);
}

.pg-reader-no-content[b-xlc2fufeiy] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    padding: var(--space-4) 0;
}

/* Separates the toolbar's five intent groups: navigate · display · enrich · keep · share.
   Ten same-size, same-colour glyphs in an undifferentiated row gave no clue which button did
   what, and nothing separated a reversible action from one that opens an external page. */
.pg-reader-tool-divider[b-xlc2fufeiy] {
    width: 1px;
    align-self: stretch;
    margin: var(--space-1) var(--space-1);
    background: var(--color-border);
    flex-shrink: 0;
}

.pg-reader-spinner[b-xlc2fufeiy] {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    animation: pulse-b-xlc2fufeiy 1s ease-in-out infinite;
    will-change: opacity;
}

@keyframes pulse-b-xlc2fufeiy {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.pg-ai-summary[b-xlc2fufeiy] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
}

.pg-ai-summary-header[b-xlc2fufeiy] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.pg-ai-summary-label[b-xlc2fufeiy] {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pg-ai-summary-model[b-xlc2fufeiy] {
    font-size: var(--text-xs);
    color: var(--color-text-faint);
}

.pg-ai-summary-body[b-xlc2fufeiy] {
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: 1.6;
}

.pg-telegram-embed[b-xlc2fufeiy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    align-items: flex-start;
}

.pg-telegram-embed iframe[b-xlc2fufeiy] {
    width: 100%;
    max-width: 520px;
    height: 480px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface);
}

.pg-telegram-embed a[b-xlc2fufeiy] {
    font-size: var(--text-sm);
    color: var(--color-secondary);
}

/* Moved out of the global wwwroot/css/app.css: every selector below targets markup this
   component authors itself and no other component uses, so Blazor's scoped-CSS attribute
   reaches all of it. Rules whose selectors cross components — or reach into a child
   component's markup, such as anything matching PgIcon's span — must stay global. */
/* Article Notes */
.pg-notes-editor[b-xlc2fufeiy] { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-3); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pg-notes-textarea[b-xlc2fufeiy] { resize: vertical; min-height: 80px; font-family: inherit; font-size: var(--text-sm); padding: var(--space-2); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); width: 100%; box-sizing: border-box; }
.pg-notes-actions[b-xlc2fufeiy] { display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end; }
.pg-notes-error[b-xlc2fufeiy] { font-size: var(--text-xs); color: var(--color-danger); flex: 1; }
.pg-notes-display[b-xlc2fufeiy] { margin-bottom: var(--space-4); padding: var(--space-3); background: var(--color-surface-2); border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.pg-notes-label[b-xlc2fufeiy] { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-1); }
.pg-notes-body[b-xlc2fufeiy] { font-size: var(--text-sm); white-space: pre-wrap; }
/* /Components/Shared/PgToastHost.razor.rz.scp.css */
/* Moved out of the global wwwroot/css/app.css: every selector below targets markup this
   component authors itself and no other component uses, so Blazor's scoped-CSS attribute
   reaches all of it. Rules whose selectors cross components — or reach into a child
   component's markup, such as anything matching PgIcon's span — must stay global. */
/* Toast notifications */
.pg-toast-host[b-nbc9kgropv] {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(360px, calc(100vw - 2 * var(--space-4)));
  pointer-events: none;
}
.pg-toast[b-nbc9kgropv] {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
  color: var(--color-text);
  pointer-events: auto;
  animation: pg-toast-in-b-nbc9kgropv 0.18s ease-out;
}
.pg-toast--success[b-nbc9kgropv] { border-left-color: var(--color-success); }
.pg-toast--error[b-nbc9kgropv]   { border-left-color: var(--color-danger); }
.pg-toast--info[b-nbc9kgropv]    { border-left-color: var(--color-secondary); }
.pg-toast-icon[b-nbc9kgropv] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  margin-top: 1px;
}
.pg-toast--success .pg-toast-icon[b-nbc9kgropv] { background: var(--color-success); }
.pg-toast--error .pg-toast-icon[b-nbc9kgropv]   { background: var(--color-danger); }
.pg-toast--info .pg-toast-icon[b-nbc9kgropv]    { background: var(--color-secondary); }
.pg-toast-msg[b-nbc9kgropv] { flex: 1; line-height: 1.5; overflow-wrap: anywhere; }
.pg-toast-action[b-nbc9kgropv] {
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-link);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0 var(--space-1);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.12s ease;
}
.pg-toast-action:hover[b-nbc9kgropv] { color: var(--color-text); }
.pg-toast-close[b-nbc9kgropv] {
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-faint);
  font-size: var(--text-2xs);
  padding: 0 2px;
  line-height: 1.5;
  transition: color 0.12s ease;
}
.pg-toast-close:hover[b-nbc9kgropv] { color: var(--color-text); }

@keyframes pg-toast-in-b-nbc9kgropv {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
  .pg-toast-host[b-nbc9kgropv] {
    left: var(--space-3);
    right: var(--space-3);
    /* Lifted above the reader's bottom action bar so toasts never sit under it. */
    bottom: calc(var(--pg-bottombar-h) + var(--space-3) + env(safe-area-inset-bottom));
    max-width: none;
  }
}