/* ============================================================================
   Balanced Breakfast — Neobrute-lite Theme

   Build new UI by COMPOSING the existing vocabulary, in this order of preference:

     1. Use a UTILITY class for one-off adjustments       (.hidden, .sr-only,
                                                           .mb-1, .flex-1 — most
                                                           still to be added)
     2. Use a LAYOUT PRIMITIVE to position content        (.row-flex, .row,
                                                           .stack-{2,3,4} —
                                                           to be added in F1/F2)
     3. Use a COMPONENT PRIMITIVE for a UI element        (.btn, .card, .modal,
                                                           .form-input,
                                                           .form-select, .badge,
                                                           .tag, .toast)
     4. Extend a primitive with a modifier                (.btn-primary, .btn-sm,
                                                           .form-select--ghost)
     5. ONLY THEN consider a new class                    — and add it to the right
                                                            BAND below

   A new class is a smell, not a goal. Before writing one:
     • grep this file for the visual shape you want; almost everything is here
     • check whether an existing primitive + modifier composes to your shape
     • page-scoped rules under a feature class (`.bookmarks .foo`) are a last
       resort, not a first move

   NAMED-LAYOUT EXCEPTION: A row of mixed-intent elements (one fills, others
   size to content) belongs in a NAMED LAYOUT with an explicit
   `grid-template-columns`, not in `.row-flex` + utilities. Smell test: if you
   find yourself reaching for `--compact`, `style="width: auto;"`, or
   `min-width: 0 !important` to make a row lay out right, the layout itself
   wants a name. See `.condition-row` for the canonical form.

   See `_private/docs/balanced_breakfast/design-system.md` for the primitive
   inventory and rules; `styleguide.md` for visual specs.

   ----------------------------------------------------------------------------
   FILE STRUCTURE — search by BAND name (uppercase anchors) to navigate.
   Per-section titles use `===  N. Title  ===` headers; numbered for stability,
   not because order matters. Bands group related sections; cascade order is
   load-bearing only inside the RESPONSIVE LAYERS and TOUCH OVERRIDES bands.

   Note (2026-06-02): the BAND map below is the TARGET layout. Today's file
   still has rules grouped by their original feature-add order. Phase F5 (dedup
   sweep) moves rules into the correct BAND. Until then, the numbered section
   markers below are stable anchors regardless of file position.

     BAND: FOUNDATIONS
       1.  Design System Variables                        — tokens (:root)
       2.  CSS Reset & Base
       3.  Keyframes & Animation

     BAND: APP SHELL & CHROME
       4.  Layout shell                                   — #app, .main
       5.  Header
       6.  Sidebar
       7.  Items panel
       8.  Detail panel

     BAND: COMPONENT PRIMITIVES
       9.  Buttons                                        — .btn family
       10. Forms                                          — .form-group, .form-input
       11. Modal                                          — .modal-overlay/.modal-content
       12. Toast                                          — .toast
       13. Tag                                            — .tag
       14. Context menu                                   — .context-menu
       15. Health indicator                               — .health-dot (state-by-color, F3 fix pending)
       16. Skeleton & loading                             — .skeleton-item, .skeleton-line, spinner
       17. Progress bar                                   — .progress-bar-container
       18. Update banner                                  — .update-banner
       19. Health popover                                 — .health-popover

     BAND: FEATURE SURFACES
       20. Sources list / sidebar entries
       21. Items list / read indicator / star button
       22. Reader-expanded mode
       23. Query feeds (builder + sidebar)
       24. Sidebar saved articles
       25. Plugin list
       26. Help shortcuts
       27. Welcome modal
       28. Settings modal
       29. Sync settings (utility classes)
       30. Reading list / Bookmarks

     BAND: UTILITIES
       31. Screen-reader only (.sr-only)
       32. Focus indicators

     BAND: MOBILE PRIMITIVES
       33. Mobile tab bar
       34. Mobile more-popover
       35. Mobile search bar
       36. Mobile back button
       37. Pull-to-refresh indicator
       38. Source-badge on items (mobile-only display)

     BAND: RESPONSIVE LAYERS                              — cascade-ordered
       39. @media (max-width: 768px) — mobile layout
       40. @media (hover: none)      — touch overrides
       41. @media (prefers-reduced-motion: reduce)

     BAND: SCROLLBAR
       42. Webkit scrollbar
   ============================================================================ */

/* ===  1. Design System Variables  =========================================
   Color tokens are themed via `js/themes.js` (loads shared TOML palettes
   from MNW/shared/themes/). The fallback hex values below are the
   `flatwhite` light theme palette, used only for initial render before
   `themes.js` runs. Annotation legend:

     themed   — set by themes.js COLOR_MAP from TOML
     derived  — computed in themes.js applyTheme() from a themed token
     invariant — fixed; never changes with theme
     unused   — declared but no CSS rule consumes it; see design-system.md
                token audit. Phase F1 cleanup: consume or remove.
   ========================================================================== */
:root {
    --bg-primary: #faf8f5;        /* themed: background.primary */
    --bg-secondary: #f5f0e8;      /* themed: background.secondary */
    --bg-tertiary: #ebe4d8;       /* themed: background.tertiary */
    --text-primary: #3d3225;      /* themed: foreground.primary */
    --text-secondary: #6b5d4d;    /* themed: foreground.secondary */
    --text-muted: #9a8b78;        /* themed: foreground.muted */
    --accent-red: #c94b4b;        /* themed: accent.red */
    --accent-red-hover: #d65d5d;  /* derived in themes.js — consumed by .btn-danger:hover (F2) */
    --accent-green: #6b9b5a;      /* themed: accent.green */
    --accent-blue: #4a8ebd;       /* themed: accent.blue */
    --accent-blue-hover: #5e9dca; /* derived in themes.js */
    --accent-yellow: #e8a841;     /* themed: accent.yellow */
    --accent-yellow-light: #f4c56d; /* derived in themes.js */
    --accent-purple: #8b6bbf;     /* themed: accent.purple — consumed by .tag/.badge[data-color="purple"] (F2) */
    --accent-cyan: #5ab5b5;       /* themed: accent.cyan — consumed by .tag/.badge[data-color="cyan"] (F2) */
    --border: #e0d6c8;            /* themed: border.default */
    --border-dark: #d4c8b5;       /* derived in themes.js */
    --text-on-accent: #ffffff;    /* derived in themes.js (contrast vs accent.blue) */
    --border-width: 2px;          /* invariant */
    --radius-sm: 5px;             /* invariant */
    --radius-lg: 10px;            /* invariant */
    --radius-xl: 20px;            /* invariant */
    --shadow-offset: 3px;         /* invariant — BB neobrute signature */
    --shadow-color: #6b5d4d;      /* derived in themes.js (darken --text-muted) */
    --shadow-brutal: var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-color); /* invariant composition */
}
/* F5 cleanup (2026-06-02): dropped --bg-surface (themed but never consumed),
   --radius-md (duplicate of --radius-sm), --shadow / --shadow-hover (derived
   but never consumed). themes.js still sets --bg-surface / --shadow / --shadow-hover
   in applyTheme — these will be removed in the F5 themes.js cleanup. */

/* ===  2. CSS Reset & Base  ================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===  4. Layout shell — body & #app  ==================================== */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    overflow: hidden;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ===  5. Header  ========================================================== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background-color: var(--bg-secondary);
    border-bottom: var(--border-width) solid var(--border);
    box-shadow: 0 var(--shadow-offset) 0 var(--shadow-color);
    -webkit-user-select: none;
    user-select: none;
    position: relative;
}

.header h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-blue);
    letter-spacing: -0.5px;
}

.header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.search-input {
    padding: 0.4rem 0.75rem;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    width: 180px;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Search spinner */
.search-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent-yellow);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
.search-spinner.active { display: inline-block; }

@keyframes spin {
    to { transform: rotate(360deg); }
}

.search-input::placeholder { color: var(--text-muted); }
.search-input:focus {
    outline: none;
    border-color: var(--accent-yellow);
    box-shadow: 0 0 0 2px var(--accent-yellow);
}

.sort-select {
    padding: 0.4rem 0.75rem;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
}
.sort-select:focus { outline: none; border-color: var(--accent-yellow); }

/* ===  9. Buttons  ========================================================
   Canonical: .btn (+ .btn-primary, .btn-success, .btn-small).
   Charter target: collapse bespoke *-btn classes (.tag-filter-btn,
   .toast-action, .hp-action, .mobile-tab, etc.) onto this family in F5.
   ========================================================================== */
.btn {
    padding: 0.4rem 0.75rem;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background-color 0.2s, border-color 0.2s;
}
.btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-dark);
}
.btn-primary {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--text-on-accent);
}
.btn-primary:hover { background-color: var(--accent-blue-hover); border-color: var(--accent-blue-hover); }
.btn-success {
    background-color: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: var(--text-on-accent);
}
.btn-success:hover { background-color: var(--accent-yellow-light); border-color: var(--accent-yellow-light); }
.btn-small { padding: 0.2rem 0.5rem; font-size: 0.8rem; }
.btn-small.active { background: var(--accent-yellow); color: var(--text-on-accent); border-color: var(--accent-yellow); }

/* F2 additions (2026-06-02) — see design-system.md §Button.
   .btn-sm is the parity name; .btn-small kept as alias until F5 dedup. */
.btn-sm { padding: 0.2rem 0.5rem; font-size: 0.8rem; }
.btn-sm.active { background: var(--accent-yellow); color: var(--text-on-accent); border-color: var(--accent-yellow); }

/* .btn-secondary — explicit neutral; today's default `.btn` already plays this
   role, but having a named modifier lets future surfaces declare intent. */
.btn-secondary {
    background-color: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-primary);
}
.btn-secondary:hover { background-color: var(--bg-tertiary); border-color: var(--border-dark); }

/* .btn-danger — destructive action. Consumes the previously-unused
   --accent-red-hover token. Replaces .hp-action-danger in F5. */
.btn-danger {
    background-color: var(--accent-red);
    border-color: var(--accent-red);
    color: var(--text-on-accent);
}
.btn-danger:hover { background-color: var(--accent-red-hover); border-color: var(--accent-red-hover); }

/* .btn-icon — square, no padding label space; used for close buttons,
   icon-only toolbar buttons (gear, star, more). */
.btn-icon {
    padding: 0.25rem;
    line-height: 1;
    min-width: 1.75rem;
    min-height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* .btn-text — borderless, no background. Used for inline actions inside
   text or as a low-emphasis alternative to .btn-secondary. */
.btn-text {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    color: var(--text-primary);
}
.btn-text:hover { background-color: var(--bg-secondary); border-color: transparent; }

/* .btn-link — looks like an anchor, behaves like a button. */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.btn-link:hover { color: var(--accent-blue-hover); background: none; border-color: transparent; }

/* .btn-loading — spinner-replacement state. Pair with disabled attr. */
.btn-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0.875rem; height: 0.875rem;
    margin: -0.4375rem 0 0 -0.4375rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    color: var(--text-primary);
    opacity: 0.6;
}
.btn-primary.btn-loading::after,
.btn-success.btn-loading::after,
.btn-danger.btn-loading::after { color: var(--text-on-accent); opacity: 1; }

/* ===  N. Card  (F2 addition, 2026-06-02) ================================
   Canonical: .card. Charter target — F5 collapses .source-item,
   .plugin-item, .sidebar-saved, .bookmark-item onto .card with the
   modifier variants below.
     .card           — default: white-ish surface, 2px border, 3px brutal shadow
     .card--row      — row-shaped, no shadow, used in sidebars and lists
     .card--shell    — frame-only, no fill (for grouping)
     .card--muted    — secondary-surface variant
     .card--clickable — adds hover lift
   Container: .cards-grid for grid layouts.
   ========================================================================== */
.card {
    background-color: var(--bg-primary);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    box-shadow: var(--shadow-brutal);
}
.card--row {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    box-shadow: none;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.card--shell {
    background: none;
    box-shadow: none;
}
.card--muted {
    background-color: var(--bg-secondary);
}
.card--clickable {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.card--clickable:hover {
    border-color: var(--accent-yellow);
    transform: translate(-1px, -1px);
    box-shadow: calc(var(--shadow-offset) + 1px) calc(var(--shadow-offset) + 1px) 0 var(--shadow-color);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.card-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.card-badge {
    flex-shrink: 0;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

/* ===  N. Row primitive  (F2-sub addition, 2026-06-02) ===================
   Canonical slot layout: [icon] [primary · badges] [meta] [actions].
   Used via BB.ui.renderRow(model). Per-surface classes (.plugin-item,
   .source-item, .item, .bookmark-item, etc.) sit alongside .row on the
   outer element and add their own padding / border / hover treatment.
   F5 retires per-surface name/desc classes (.plugin-name, .plugin-desc)
   that duplicate .row-primary / .row-secondary.
   ========================================================================== */
.row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}
.row-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row-content {
    flex: 1;
    min-width: 0;
}
.row-primary {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.row-secondary {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 0.15rem;
}
.row-meta {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    align-self: center;
}
.row-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
/* Hover-reveal pattern: actions appear when the row (or any descendant)
   is hovered or focused. Per-surface override with `.row-actions.always`
   keeps them visible. */
.row .row-actions:not(.always) {
    opacity: 0;
    transition: opacity 0.15s;
}
.row:hover .row-actions:not(.always),
.row:focus-within .row-actions:not(.always) {
    opacity: 1;
}

/* F2-sub addition: form-hint error variant (used by renderFormField when
   passed a `field.error`). */
.form-hint--error {
    color: var(--accent-red);
    font-weight: 600;
}

/* ===  4. Layout shell — main  =========================================== */
.main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ===  6. Sidebar  ======================================================== */
.sidebar {
    width: 220px;
    min-width: 220px;
    background-color: var(--bg-secondary);
    border-right: var(--border-width) solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.sidebar h2 {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: var(--border-width) solid var(--border);
}

/* ===  20. Sources list — sidebar entries  ================================
   Charter target (F5): .source-item collapses onto .card --row.
   ========================================================================== */
.sources-list { list-style: none; padding: 0.25rem 0; }

.source-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s;
    min-height: 2.5rem;
    border-left: 3px solid transparent;
}
.source-item:hover { background-color: var(--bg-tertiary); }
.source-item.active {
    background-color: var(--bg-tertiary);
    border-left-color: var(--accent-yellow);
}

.source-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 0.875rem;
}

.source-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.source-count {
    background-color: var(--bg-primary);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-xl);
    font-size: 0.7rem;
    color: var(--text-muted);
    border: var(--border-width) solid var(--border);
    min-width: 1.8rem;
    text-align: center;
}
.source-count.all-read {
    color: var(--accent-green);
    border-color: var(--accent-green);
}

.source-delete {
    display: none;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 0.2rem;
    line-height: 1;
}
.source-delete:hover { color: var(--accent-red); }
.source-item:hover .source-delete { display: inline; }

/* ===  7. Items panel  ==================================================== */
.items-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background-color: var(--bg-primary);
}

.items-list { list-style: none; }

.item {
    display: flex;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s;
}
.item:hover { background-color: var(--bg-secondary); }
.item.unread {
    border-left-color: var(--accent-red);
    background-color: color-mix(in srgb, var(--accent-red) 6%, var(--bg-primary));
}
.item.read { color: var(--text-secondary); }
.item.selected {
    background-color: var(--bg-tertiary);
    border-left-color: var(--accent-yellow);
}
.item.unread.selected {
    border-left-color: var(--accent-red);
    background-color: color-mix(in srgb, var(--accent-red) 12%, var(--bg-primary));
}
.item.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 2rem;
    cursor: default;
    line-height: 1.6;
    flex-direction: column;
    align-items: center;
}
.empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

/* F2 addition (2026-06-02) — .empty-state as its own block. Today's
   .item.empty-state (modifier-on-row) stays as legacy until F5 retires
   call sites. Use this block + BB.ui.renderEmptyState() for new surfaces.
     <div class="empty-state">
       <div class="empty-state-icon">...</div>
       <p class="empty-state-text">No items</p>
       <button class="btn btn-primary">Add one</button>
     </div>
*/
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
    line-height: 1.6;
    gap: 0.75rem;
}
.empty-state-icon {
    font-size: 2.5rem;
    opacity: 0.6;
}
.empty-state-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}
.empty-state--compact {
    padding: 1.5rem 1rem;
    gap: 0.5rem;
}
.empty-state--compact .empty-state-icon { font-size: 1.5rem; }

.item-indicators {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 0.75rem;
    min-width: 24px;
}

.star-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: color 0.2s, transform 0.15s;
    padding: 0.25rem 0.4rem;
    margin: -0.25rem -0.4rem;
    line-height: 1;
}
.star-btn:hover { color: var(--accent-yellow); transform: scale(1.1); }
.star-btn.starred { color: var(--accent-yellow); }

.read-indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: 0.4rem;
}
.read-indicator.unread { background-color: var(--accent-red); }

.item-content { flex: 1; min-width: 0; }

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.15rem;
}

.item-author {
    font-weight: 700;
    color: var(--accent-red);
    font-size: 0.8rem;
}

.item-time { color: var(--text-muted); font-size: 0.7rem; }

.item-text {
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    font-size: 0.875rem;
}

.item-secondary {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.load-more { padding: 1rem; text-align: center; }

/* ===  22. Reader-expanded mode  =========================================
   Hides items panel and expands detail to full width. */
.main.reader-expanded .items-panel {
    display: none;
}

.main.reader-expanded .detail-panel {
    flex: 1;
    width: auto;
    min-width: 0;
    border-left: none;
}

.main.reader-expanded .item-detail {
    max-width: 800px;
    margin: 0 auto;
}

.reader-back-btn {
    margin-right: auto;
}

/* ===  8. Detail panel  =================================================== */
.detail-panel {
    width: 400px;
    min-width: 400px;
    background-color: var(--bg-secondary);
    border-left: var(--border-width) solid var(--border);
    display: none;
    flex-direction: column;
    overflow-y: auto;
}

.detail-header {
    display: flex;
    justify-content: flex-end;
    gap: 0.3rem;
    padding: 0.4rem;
    border-bottom: var(--border-width) solid var(--border);
    background-color: var(--bg-tertiary);
}

.item-detail { padding: 1.25rem; }

.detail-title {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.4;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding-bottom: 0.75rem;
    border-bottom: var(--border-width) solid var(--border);
}

.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

/* ===  13. Tag  ===========================================================
   Canonical: .tag — generic chip used in detail panel.
   Charter target (F5): add [data-color] variants; collapse .tag-chip,
   .tag-filter-btn, .source-tag-chip, .bookmark-tag onto this primitive.
   ========================================================================== */
.tag {
    background-color: var(--bg-tertiary);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* F2 additions (2026-06-02) — color variants via [data-color] attribute.
   Used for both .tag and .badge so the same color contract works for both.
   Consumes previously-unused --accent-cyan and --accent-purple. */
.tag[data-color="green"],  .badge[data-color="green"]  { border-color: var(--accent-green);  color: var(--accent-green);  background-color: color-mix(in srgb, var(--accent-green)  10%, transparent); }
.tag[data-color="yellow"], .badge[data-color="yellow"] { border-color: var(--accent-yellow); color: var(--text-primary);  background-color: color-mix(in srgb, var(--accent-yellow) 12%, transparent); }
.tag[data-color="red"],    .badge[data-color="red"]    { border-color: var(--accent-red);    color: var(--accent-red);    background-color: color-mix(in srgb, var(--accent-red)    10%, transparent); }
.tag[data-color="blue"],   .badge[data-color="blue"]   { border-color: var(--accent-blue);   color: var(--accent-blue);   background-color: color-mix(in srgb, var(--accent-blue)   10%, transparent); }
.tag[data-color="cyan"],   .badge[data-color="cyan"]   { border-color: var(--accent-cyan);   color: var(--accent-cyan);   background-color: color-mix(in srgb, var(--accent-cyan)   10%, transparent); }
.tag[data-color="purple"], .badge[data-color="purple"] { border-color: var(--accent-purple); color: var(--accent-purple); background-color: color-mix(in srgb, var(--accent-purple) 10%, transparent); }
.tag[data-color="muted"],  .badge[data-color="muted"]  { border-color: var(--border);        color: var(--text-muted);    background-color: var(--bg-tertiary); }

/* .badge — smaller and more compact than .tag; used for counts and inline
   status indicators. Same color contract via [data-color]. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background-color: var(--bg-tertiary);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.3;
    white-space: nowrap;
}
.badge--xs   { font-size: 0.6rem; padding: 0 0.3rem; }
.badge--pill { border-radius: var(--radius-xl); }
.badge--filled[data-color="green"]  { background-color: var(--accent-green);  color: var(--text-on-accent); }
.badge--filled[data-color="yellow"] { background-color: var(--accent-yellow); color: var(--text-primary); }
.badge--filled[data-color="red"]    { background-color: var(--accent-red);    color: var(--text-on-accent); }
.badge--filled[data-color="blue"]   { background-color: var(--accent-blue);   color: var(--text-on-accent); }

.detail-body {
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 0.9rem;
    overflow-wrap: break-word;
    word-break: break-word;
}
.detail-body p { margin-bottom: 0.5em; }
.detail-body pre {
    white-space: pre-wrap;
    background-color: var(--bg-tertiary);
    padding: 0.5rem;
    border-radius: 4px;
    overflow-x: auto;
}

.detail-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: var(--border-width) solid var(--border);
}

/* ===  11. Modal  =========================================================
   Canonical: .modal-overlay (single global at #modal-overlay) +
   .modal-content (will rename to .modal-container for parity in F5).
   .tag block (13. Tag) lives below this block in file order.
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: color-mix(in srgb, var(--text-primary) 40%, transparent);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 6px 6px 0 var(--shadow-color);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: var(--border-width) solid var(--border);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-header h2 { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }

/* F3 (2026-06-02): step indicator for multi-step modal flows (OAuth,
   plugin import, encryption setup). Set via BB.ui.setModalStep(n, of). */
.modal-step-indicator {
    margin-left: 0.75rem;
    padding: 0.1rem 0.5rem;
    background-color: var(--bg-tertiary);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-xl);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.modal-body { padding: 1.25rem; }

.plugin-list { list-style: none; }

.plugin-item {
    padding: 0.75rem;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    background-color: var(--bg-primary);
}
.plugin-item:hover {
    border-color: var(--accent-yellow);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-brutal);
    transform: translate(-1px, -1px);
}

/* F5 (2026-06-02): dropped .plugin-name and .plugin-desc — plugin-list
   migrated to BB.ui.renderRow in F2-sub; .row-primary / .row-secondary
   carry the typography now. */

/* F2-sub (2026-06-02): intro paragraph at the top of multi-step modals
   (replaces inline `style="margin-bottom:1rem;color:var(--text-secondary)"`
   in feeds.js plugin picker). */
.modal-intro {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* F4 additions (2026-06-02) — replace inline styles previously hard-coded
   in JS render paths. Each rule below retires a specific style="..." or
   style.cssText violation flagged in the F4 catalogue. */

/* sources.js empty-state (no feeds yet). Was inline cssText + emoji
   wrapper. F5 may further consolidate onto the .empty-state block once
   the row primitive migration lands; this fix lives in the sidebar list
   so it stays a styled <li>. */
.source-item--empty {
    cursor: default;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}
.source-item--empty:hover { background-color: transparent; }
.source-item-empty-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}
.source-item-empty-strong { color: var(--accent-yellow); font-weight: 700; }
.source-item-empty-link   { color: var(--accent-yellow); }

/* sources.js "+ Saved Filter" button label. Was inline color. */
.source-name--muted { color: var(--text-muted); }

/* settings-sync.js renderConnect block. Was three inline styles. */
.sync-connect {
    text-align: center;
    padding: 2rem 0;
}
.sync-connect p { margin-bottom: 1rem; }
.sync-connect p + p { margin-bottom: 1.5rem; color: var(--text-secondary); }

/* settings-sync.js showCodeEntry spinner. Was three inline styles. */
.sync-auth-spinner {
    text-align: center;
    padding: 1rem 0;
    color: var(--text-secondary);
}

/* settings-sync.js pricing fine-print. Class already existed but carried
   inline styles; rules moved here. */
.sync-sub-fine-print {
    font-size: 0.85rem;
    opacity: 0.75;
    margin-top: 0.4rem;
}

/* settings-sync.js subscribe button row. Layout-only; class-ifying for
   consistency. */
.sync-sub-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* mobile.js action sheets — stacked full-width buttons. Replaces inline
   `style.display='block'; style.width='100%'; style.marginBottom='0.5rem'`. */
.btn-stacked {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
}
.btn-stacked:last-child { margin-bottom: 0; }

/* app.js settings theme-import/export row. Layout-only; class-ifying. */
.theme-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Default body paragraph rhythm — retires the per-`<p>` inline
   `margin-bottom: 0.75rem` pattern in feeds.js plugin-warning. */
.modal-body p + p { margin-top: 0.75rem; }

/* ===  10. Forms  =========================================================
   Canonical: .form-group + .form-input. Charter target (F5): split
   .form-input into .form-input / .form-select / .form-textarea so visual
   treatment per kind is targetable; add .form-label class on labels;
   add BB.ui.renderFormField helper.
   ========================================================================== */
.form-group { margin-bottom: 0.75rem; }
.form-group label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
}

.form-input {
    width: 100%;
    padding: 0.6rem;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
    outline: none;
    border-color: var(--accent-yellow);
    box-shadow: 0 0 0 2px var(--accent-yellow);
}

/* F2 additions (2026-06-02) — split .form-input into kind-specific
   primitives so visual treatment per kind is targetable. .form-select and
   .form-textarea inherit .form-input today; future surface-specific tweaks
   land on the kind-specific class. .form-label replaces the unclassed
   `<label>` under `.form-group`. */
.form-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
}
.form-select {
    width: 100%;
    padding: 0.6rem;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-select:focus {
    outline: none;
    border-color: var(--accent-yellow);
    box-shadow: 0 0 0 2px var(--accent-yellow);
}
.form-textarea {
    width: 100%;
    padding: 0.6rem;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
    min-height: 4rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-textarea:focus {
    outline: none;
    border-color: var(--accent-yellow);
    box-shadow: 0 0 0 2px var(--accent-yellow);
}
/* .form-row — horizontal grouping of two related fields (e.g. label + button) */
.form-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.form-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* ===  12. Toast  =========================================================
   Canonical: .toast (+ .toast.success / .toast.error today;
   rename to .toast-success / .toast-error in F5, add .toast-info,
   .toast-undo). Helper: BB.ui.showToast — must inject zero style.cssText.
   ========================================================================== */
.toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1001;
}

.toast {
    background-color: var(--bg-primary);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    box-shadow: var(--shadow-brutal);
    animation: slideIn 0.3s ease-out;
    font-weight: 500;
    font-size: 0.875rem;
}
.toast.success { border-left: 4px solid var(--accent-green); background-color: color-mix(in srgb, var(--accent-green) 8%, var(--bg-primary)); }
.toast.error { border-left: 4px solid var(--accent-red); background-color: color-mix(in srgb, var(--accent-red) 8%, var(--bg-primary)); }

/* F2 additions (2026-06-02) — parity-named variants. The legacy
   `.toast.success` / `.toast.error` stays during the rename window so
   existing showToast calls keep working; F5 migrates everything to the
   `--variant` form and removes the legacy. */
.toast-success { border-left: 4px solid var(--accent-green); background-color: color-mix(in srgb, var(--accent-green) 8%, var(--bg-primary)); }
.toast-error   { border-left: 4px solid var(--accent-red);   background-color: color-mix(in srgb, var(--accent-red)   8%, var(--bg-primary)); }
.toast-info    { border-left: 4px solid var(--accent-blue);  background-color: color-mix(in srgb, var(--accent-blue)  8%, var(--bg-primary)); }
.toast-undo {
    border-left: 4px solid var(--accent-yellow);
    background-color: color-mix(in srgb, var(--accent-yellow) 10%, var(--bg-primary));
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.undo-message { flex: 1; }
.undo-btn {
    background: none;
    border: var(--border-width) solid currentColor;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
}
.undo-btn:hover { background-color: color-mix(in srgb, var(--accent-yellow) 20%, transparent); }
.undo-countdown {
    font-size: 0.7rem;
    color: var(--text-muted);
    min-width: 1.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ===  26. Help shortcuts  ================================================ */
.help-shortcuts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.help-shortcuts .help-section:last-child {
    grid-column: 1 / -1;
}
.help-section h3 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}
.help-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
}
.help-row kbd {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    font-family: inherit;
    font-size: 0.8rem;
    min-width: 1.4rem;
    text-align: center;
    color: var(--text-primary);
}
.help-row span { color: var(--text-secondary); margin-left: auto; }

/* ===  16. Skeleton & loading  ============================================
   Canonical: .skeleton-item, .skeleton-line.{short,medium,long},
   .search-spinner (above). Charter target (F5): add BB.ui.renderSkeleton
   helper; widen first-paint usage beyond items panel.
   ========================================================================== */
.skeleton-item {
    display: flex;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    animation: shimmer 1.5s infinite;
}
.skeleton-item .skeleton-indicators { width: 24px; margin-right: 0.75rem; }
.skeleton-item .skeleton-content { flex: 1; }
.skeleton-line {
    height: 0.75rem;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; margin-top: 0.5rem; }
.skeleton-line.long { width: 90%; margin-top: 0.5rem; }

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===  17. Progress bar  ================================================== */
.progress-bar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--border);
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background-color: var(--accent-yellow);
    transition: width 0.3s ease;
}

/* Toast with action */
.toast-action {
    display: inline-block;
    margin-left: 0.75rem;
    background: none;
    border: 1px solid currentColor;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
}
.toast-action:hover { opacity: 0.8; }

/* Error details */
.error-list {
    list-style: none;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.error-list li { padding: 0.2rem 0; }
.error-list li::before { content: '\2022 '; color: var(--accent-red); }

/* ===  27. Welcome modal  ================================================= */
.welcome-content h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1rem;
    margin-bottom: 0.35rem;
}
.welcome-content h3:first-child { margin-top: 0; }
.welcome-content p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.welcome-cta {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* ===  32. Focus indicators  ==============================================
   2px yellow outline for clickable elements; 2px yellow box-shadow ring
   for inputs (avoids layout shift). Rule: every new interactive
   primitive must appear in one of these selector lists.
   ========================================================================== */
.btn:focus-visible,
.source-item:focus-visible,
.star-btn:focus-visible,
.source-delete:focus-visible,
.item:focus-visible,
.tab:focus-visible,
.plugin-item:focus-visible,
.sort-select:focus-visible,
.toast-action:focus-visible {
    outline: 2px solid var(--accent-yellow);
    outline-offset: 2px;
    box-shadow: none;
}

.search-input:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
    outline: none;
    border-color: var(--accent-yellow);
    box-shadow: 0 0 0 2px var(--accent-yellow);
}

/* ===  20. Sources — tag filter bar  ====================================== */
.tag-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.5rem 0.75rem;
    border-bottom: var(--border-width) solid var(--border);
    background-color: var(--bg-secondary);
}
.tag-chip {
    background-color: var(--bg-primary);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-xl);
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.tag-chip:hover { border-color: var(--accent-yellow); color: var(--text-primary); }
.tag-chip.active {
    background-color: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: var(--text-primary);
    font-weight: 600;
}

/* Source tag chips (small pills under source name) */
.source-info { flex: 1; min-width: 0; }
.source-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.15rem;
}
.source-tag-chip {
    background-color: var(--bg-primary);
    border: var(--border-width) solid var(--border);
    border-radius: 8px;
    padding: 0 0.35rem;
    font-size: 0.6rem;
    color: var(--text-muted);
}

/* ===  15. Health indicator  ==============================================
   STATE-BY-COLOR-ONLY VIOLATION (F3): pair color with shape (--broken
   = hollow ring, --rate_limited = dashed) + aria-label. F5 fix.
   ========================================================================== */
.health-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.3rem;
    flex-shrink: 0;
}
/* F5 (2026-06-02): dropped legacy color-only .health-* classes — render
   site (sources.js) and tests/run.js:472 updated to use [data-health]. */

/* F3 fix (2026-06-02): state-by-color violation retired. Each state now
   pairs color with a SHAPE modifier via [data-health], so the indicator
   is distinguishable in monochrome / for color-blind users. Render
   site must also pass an `aria-label` for screen readers. */
.health-dot[data-health="green"]          { background-color: var(--accent-green); }
.health-dot[data-health="yellow"],
.health-dot[data-health="rate_limited"]   {
    background-color: var(--accent-yellow);
    border: 1.5px dashed var(--shadow-color);
    box-sizing: border-box;
}
.health-dot[data-health="red"]            { background-color: var(--accent-red); position: relative; }
.health-dot[data-health="red"]::after,
.health-dot[data-health="auth_error"]::after,
.health-dot[data-health="config_error"]::after {
    content: '!';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -55%);
    color: var(--text-on-accent);
    font-size: 7px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}
.health-dot[data-health="auth_error"],
.health-dot[data-health="config_error"]   {
    background-color: var(--accent-red);
    position: relative;
}
.health-dot[data-health="circuit_broken"] {
    background-color: transparent;
    border: 2px solid var(--text-muted);
    box-sizing: border-box;
}

/* ===  19. Health popover  ================================================
   Floating panel from gear icon. Charter target (F5): .hp-action
   migrates onto .btn; .hp-row uses filter-bar primitive.
   ========================================================================== */
.health-popover {
    position: fixed;
    z-index: 100;
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-brutal);
    padding: 0.75rem 1rem;
    min-width: 220px;
    max-width: 320px;
    font-size: 0.8rem;
}
.hp-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}
.hp-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.2rem 0;
}
.hp-row-error {
    flex-direction: column;
    gap: 0.15rem;
}
.hp-label {
    color: var(--text-muted);
    flex-shrink: 0;
}
.hp-value {
    text-align: right;
    word-break: break-word;
}
.hp-row-error .hp-value {
    text-align: left;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.hp-green { color: var(--accent-green); }
.hp-yellow { color: var(--accent-yellow); }
.hp-red { color: var(--accent-red); }
.hp-grey { color: var(--text-muted); }

.hp-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: var(--border-width) solid var(--border);
}
.hp-action {
    flex: 1;
    background: none;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-primary);
    cursor: pointer;
}
.hp-action:hover { background-color: var(--bg-tertiary); }
.hp-action-danger { color: var(--accent-red); border-color: var(--accent-red); }
.hp-action-danger:hover { background-color: var(--accent-red); color: #fff; }


/* ===  29. Sync settings utilities  ======================================= */
.sync-check-btn { margin-right: 0.5rem; }
.sync-manual-entry { margin-top: 1rem; }
.sync-manual-form { margin-top: 0.5rem; }
.sync-action-spaced { margin-bottom: 1rem; }
.sync-toggle-label { display: flex; align-items: center; gap: 0.5rem; }
.sync-disconnect { margin-top: 1rem; }

/* ===  20. Sources — edit button  ========================================= */
.source-edit {
    display: inline;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 0.2rem;
    line-height: 1;
    opacity: 0.4;
}
.source-edit:hover { color: var(--accent-yellow); opacity: 1; }

/* ===  23. Query feeds — sidebar divider  ================================ */
.source-divider {
    padding: 0.6rem 1rem 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: var(--border-width) solid var(--border);
    margin-top: 0.25rem;
    cursor: default;
}

/* Query feed items — subtle visual distinction */
.source-item.query-feed .source-name {
    font-style: italic;
}

/* Add query feed button */
.source-item.add-query-feed-btn {
    padding: 0.4rem 1rem;
    border-top: var(--border-width) solid var(--border);
}
.source-item.add-query-feed-btn:hover {
    background-color: var(--bg-tertiary);
}

/* ===  23. Query feeds — builder  =========================================
   `.condition-row` is the canonical NAMED LAYOUT for mixed-intent rows
   (see compose-first rule, named-layout exception).
   ========================================================================== */
.qf-builder .form-group { margin-bottom: 1rem; }

.condition-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.condition-row .sort-select,
.condition-row .search-input {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
}
.condition-row .cond-field { flex: 0 0 auto; width: 90px; }
.condition-row .cond-op { flex: 0 0 auto; width: 120px; }
.condition-row .cond-val { flex: 1; }
.condition-row .cond-remove {
    flex-shrink: 0;
    padding: 0.2rem 0.4rem;
    font-size: 1rem;
    line-height: 1;
}

.add-condition-btn {
    margin-top: 0.25rem;
}

.match-preview {
    padding: 0.5rem 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* ===  28. Settings modal  ================================================ */
.settings-content .form-group { margin-bottom: 1rem; }
.settings-content .form-group label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
}

/* ===  24. Sidebar saved articles  ======================================== */
.sidebar-saved {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-top: var(--border-width) solid var(--border);
    border-left: 3px solid transparent;
    transition: background-color 0.15s;
    min-height: 2.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}
.sidebar-saved:hover { background-color: var(--bg-tertiary); }
.sidebar-saved.active {
    background-color: var(--bg-tertiary);
    border-left-color: var(--accent-yellow);
}

/* Sidebar footer */
.sidebar-footer {
    margin-top: auto;
    padding: 0.5rem 0.75rem;
    border-top: var(--border-width) solid var(--border);
}

/* F2 additions (2026-06-02) — utility primitives.
   .hidden: visibility toggle utility (replaces ad-hoc style.display = 'none').
   .confirm-message: retires the inline-style violation in
     components.js confirmAction (was setting marginBottom, fontSize, color
     via style.cssText). */
.hidden { display: none !important; }
.confirm-message {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* ===  31. Screen-reader only (.sr-only)  ================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===  38. Source-badge on items (mobile-only display)  =================
   Hidden on desktop; shown inside the @media (max-width: 768px) block below.
   ========================================================================== */
.item-source-badge { display: none; }

/* ===  39. @media (max-width: 768px) — mobile layout  ==================== */
@media (max-width: 768px) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: calc(52px + env(safe-area-inset-bottom));
    }

    .mobile-tab-bar { display: flex; }
    .header { display: none; }
    .main { flex-direction: column; }

    .sidebar {
        display: none;
        width: 100%;
        min-width: 0;
        border-right: none;
    }
    .sidebar.mobile-visible {
        display: flex;
        flex: 1;
    }

    .items-panel { width: 100%; }
    .items-panel.mobile-hidden { display: none; }

    .detail-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-width: 0;
        z-index: 1050;
        border-left: none;
    }

    body.mobile-detail-open .mobile-tab-bar { display: none; }
    body.mobile-detail-open { padding-bottom: 0; }
    body.mobile-detail-open .detail-panel {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-back-btn {
        display: inline-flex;
        margin-right: auto;
        font-size: 0.8rem;
    }

    .mobile-search-bar { display: flex; }

    /* Larger tap targets */
    .item { padding: 0.875rem 1rem; }
    .star-btn { font-size: 1.3rem; padding: 0.4rem 0.5rem; margin: -0.4rem -0.5rem; }
    .source-item { min-height: 3rem; }

    /* Modal as bottom sheet */
    .modal-overlay { align-items: flex-end; }
    .modal-content {
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 85vh;
    }
    .modal-content::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background-color: var(--border-dark);
        border-radius: 2px;
        margin: 0.5rem auto;
    }
    .modal-header { border-radius: 0; }

    /* Toast above tab bar */
    .toast-container {
        bottom: calc(60px + env(safe-area-inset-bottom));
        right: 0.75rem;
        left: 0.75rem;
    }

    /* Update banner above tab bar */
    .update-banner {
        bottom: calc(60px + env(safe-area-inset-bottom));
    }

    /* Source badge on items */
    .item-source-badge {
        display: inline-block;
        background-color: var(--bg-tertiary);
        color: var(--text-secondary);
        font-size: 0.65rem;
        font-weight: 600;
        padding: 0.05rem 0.35rem;
        border-radius: var(--radius-sm);
        margin-top: 0.15rem;
    }

    /* Bold unread item titles */
    .item.unread .item-text { font-weight: 700; }

    /* Sticky detail header */
    .detail-header {
        position: sticky;
        top: 0;
        z-index: 5;
    }
    .detail-panel { -webkit-overflow-scrolling: touch; }
    .item-detail { padding: 1rem 1.25rem; }
    .detail-body { line-height: 1.8; }

    /* Horizontal-scroll tag filter bar */
    .tag-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tag-filter-bar::-webkit-scrollbar { display: none; }

    /* Help shortcuts single column */
    .help-shortcuts { grid-template-columns: 1fr; }
}

/* ===  40. @media (hover: none) — touch overrides  ====================== */
@media (hover: none) {
    .item:hover { background-color: transparent; }
    .item.unread:hover { background-color: color-mix(in srgb, var(--accent-red) 6%, var(--bg-primary)); }
    .item.selected:hover { background-color: var(--bg-tertiary); }
    .item.unread.selected:hover { background-color: color-mix(in srgb, var(--accent-red) 12%, var(--bg-primary)); }
    .source-item:hover { background-color: transparent; }
    .source-item.active:hover { background-color: var(--bg-tertiary); }
    .sidebar-saved:hover { background-color: transparent; }
    .sidebar-saved.active:hover { background-color: var(--bg-tertiary); }
    .btn:hover { background-color: var(--bg-primary); border-color: var(--border); }
    .btn-primary:hover { background-color: var(--accent-blue); border-color: var(--accent-blue); }
    .btn-success:hover { background-color: var(--accent-yellow); border-color: var(--accent-yellow); }
    .star-btn:hover { color: var(--text-muted); transform: none; }
    .star-btn.starred:hover { color: var(--accent-yellow); }
    .tag-chip:hover { border-color: var(--border); color: var(--text-secondary); }
    .tag-chip.active:hover { border-color: var(--accent-yellow); }
    .plugin-item:hover { border-color: var(--border); background-color: var(--bg-primary); box-shadow: none; transform: none; }
    .context-menu-item:hover { background-color: transparent; }
}

/* ===  41. @media (prefers-reduced-motion: reduce)  ====================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===  18. Update banner  ================================================
   z-index 1200 — above mobile nav (1100/1101) and context menus, below
   any future fullscreen overlay. F5: lowered from 9999 (was unnecessarily
   high; sat above modals which made it impossible to dismiss when a
   modal opened post-banner-show).
   ========================================================================== */
.update-banner {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    z-index: 1200;
    max-width: 320px;
    box-shadow: var(--shadow-brutal);
    font-size: 0.875rem;
}

/* ===  14. Context menu  ==================================================
   Canonical: .context-menu (state: .visible). Items: .context-menu-item
   (+ .context-menu-item.danger; rename to --danger in F5). Charter
   target: add BB.ui.showContextMenu(x, y, items) helper.
   ========================================================================== */
.context-menu {
    position: fixed;
    z-index: 1100;
    background: var(--bg-primary);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-brutal);
    padding: 0.25rem;
    min-width: 140px;
}
.context-menu-item {
    display: block;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-primary);
    font-size: 0.825rem;
    text-align: left;
    cursor: pointer;
}
.context-menu-item:hover {
    background-color: var(--bg-tertiary);
}

/* ===  33. Mobile tab bar  ================================================ */
.mobile-tab-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    height: calc(52px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background-color: var(--bg-secondary);
    border-top: var(--border-width) solid var(--border);
    align-items: center;
    justify-content: space-around;
}

.mobile-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.15s;
}
.mobile-tab.active { color: var(--accent-blue); }

.mobile-tab-create {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--accent-green);
    text-transform: none;
    letter-spacing: 0;
}

/* ===  34. Mobile more-popover  =========================================== */
.mobile-more-popover {
    display: none;
    position: fixed;
    bottom: calc(52px + env(safe-area-inset-bottom));
    right: 0.5rem;
    z-index: 1101;
    background-color: var(--bg-primary);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 calc(-1 * var(--shadow-offset)) 0 var(--shadow-color);
    padding: 0.25rem;
    min-width: 160px;
}
.mobile-more-popover.visible { display: block; }
.mobile-more-popover button {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}
.mobile-more-popover button:hover {
    background-color: var(--bg-tertiary);
}

/* ===  35. Mobile search bar  ============================================= */
.mobile-search-bar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    background-color: var(--bg-primary);
    border-bottom: var(--border-width) solid var(--border);
}
.mobile-search-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}
.mobile-search-input:focus {
    outline: none;
    border-color: var(--accent-yellow);
    box-shadow: 0 0 0 2px var(--accent-yellow);
}
.mobile-sort-select {
    padding: 0.5rem 0.5rem;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.8rem;
}

/* ===  36. Mobile back button  ============================================ */
.mobile-back-btn { display: none; }

/* ===  37. Pull-to-refresh indicator  ===================================== */
.pull-to-refresh-indicator {
    display: none;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.pull-to-refresh-indicator.visible {
    display: block;
}

/* ===  30. Reading list / Bookmarks  ====================================== */

.bookmark-tag-bar {
    display: flex;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    flex-shrink: 0;
}
.tag-filter-btn {
    white-space: nowrap;
    font-size: 0.75rem;
}
.tag-filter-btn.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}
.bookmark-item .bookmark-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.bookmark-item:hover .bookmark-actions,
.bookmark-item:focus-within .bookmark-actions {
    opacity: 1;
}
.bookmark-item.pinned {
    border-left: 3px solid var(--accent-blue);
}
.bookmark-tags {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.bookmark-tag {
    cursor: pointer;
    font-size: 0.7rem;
}
.bookmark-tag:hover {
    background: var(--accent-blue);
    color: white;
}
.context-menu-item.danger,
.context-menu-item--danger {
    /* F2 (2026-06-02): added --danger parity name; .danger kept as legacy
       alias until F5 retires call sites. Inline #dc3545 fallback removed —
       --accent-red is themed and always defined. */
    color: var(--accent-red);
}

/* ===  42. Webkit scrollbar  ============================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }