/* ===  9. Buttons  ========================================================
   Canonical: .button (+ .button--primary, .button--secondary, .button--success, .button--danger,
   .button--icon, .button--text, .button--link; size .button--sm; state .button--loading).
   Charter target: collapse remaining one-off *-btn classes onto this family.
   ========================================================================== */
/* The fill and the bevel are gone from here, along with the whole
   :active rule: .button, .button:hover and .button:active come from
   makeover-webview, which emits the fill and the edge together so they
   cannot disagree. What stays is everything that is not depth -- box
   model, type, cursor -- plus the disabled overrides below.

   Two visible consequences, both the description's answer rather than
   this file's: hover reads as --hover-surface instead of
   --surface-sunken, and pressing reads as a well. */
.button {
    padding: var(--gap-peer) var(--gap-group);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--content);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-size-base);
}
.button:hover {
    border-color: var(--border-strong);
}
/* Disabled keeps its bevel. The object is still there; greying the content
   is what says the action is unavailable -- and the greying is the generated
   sheet's, along with the cursor. Only the edge is this app's. */
.button:disabled {
    border-color: var(--content-muted);
}
/* The `.button:disabled:hover, .button:disabled:active` pair that used to
   sit here is gone. It existed to out-specify the generated hover and
   pressed rules, in those words, and makeover-webview 0.10.0 emits
   disabled after both and restates the rest depth, so source order settles
   it at equal specificity. Nothing has to reach (0,3,0) to win any more,
   which matters because raising a selector is what the cascade layer would
   have had to unpick.

   The colour, border colour and cursor above stay, and are not a candidate
   for the same deletion. Layers resolve before specificity, so the
   generated `.button:disabled` in `makeover` loses to `.button` in this
   file whatever its specificity. An app has to state the disabled variant
   of every property it sets at rest; makeover can only supply what the app
   is silent about. */
.button--primary {
    background-color: var(--action);
    border-color: var(--action);
    color: var(--content-on-action);
}
.button--primary:hover { background-color: var(--action-hover); border-color: var(--action-hover); }
.button--success {
    background-color: var(--category-four);
    border-color: var(--category-four);
    color: var(--content-on-action);
}
.button--success:hover { background-color: var(--accent-yellow-light); border-color: var(--accent-yellow-light); }
/* .button--sm: canonical small-button size (see wiki note `bb-design-system`). */
.button--sm { padding: var(--gap-bound) var(--gap-peer); font-size: var(--font-size-md); }
.button--sm.active { background: var(--category-four); color: var(--content-on-action); border-color: var(--category-four); }

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

/* ===  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: var(--gap-bound);
    min-width: 0;
}
.row-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row-content {
    flex: 1;
    min-width: 0;
}
/* The three row text colours come from makeover-webview, which derives
   them from the same content ramp this file used to spell out by hand.
   Identical values, so nothing moves; what changes is that there is one
   place to change them. */
.row-primary {
    font-weight: 600;
    font-size: var(--font-size-base);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: var(--gap-bound);
    flex-wrap: wrap;
}
.row-secondary {
    font-size: var(--font-size-md);
    line-height: 1.4;
    margin-top: var(--step-hair);
}
.row-meta {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    align-self: center;
}
.row-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-peer);
}
/* The hover-reveal comes from makeover-webview now. It also toggles
   pointer-events, which the hand-written pair did not: a hidden action
   used to be invisible and still clickable, so the row carried dead
   targets a cursor could find. The `.always` escape hatch went with the
   rules it was written against; nothing ever set it. */

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

/* ===  10. Forms  =========================================================
   Canonical: .form-group + .field.

   One class for every field kind, with the kind riding on the element
   (`select.field`, `textarea.field`) rather than on a second class. The F2
   split into .form-input / .form-select / .form-textarea is retired: all
   twenty-odd call sites had .form-input on an <input>, .form-select on a
   <select> and .form-textarea on a <textarea>, with no exceptions, so the
   class was saying what the tag already said, and an element selector cannot
   be forgotten at a call site the way a modifier class can.

   Fill and inset edge now come from the generated layout.css, where a field
   is a Depth::Well. Every rule here used to write `background-color:
   var(--surface-page)` under `box-shadow: var(--bevel-inset)` -- a page fill
   beneath a recessed edge -- and so did .search-input, .sort-select and (with
   no bevel at all) the two mobile fields. Five hand-written answers to one
   question. goingson had the same pair and retired it the same way; its
   .field block carries the long form of this note.
   ========================================================================== */
.form-group { margin-bottom: var(--gap-section); }

/* Shape only. The wider padding is what .search-input and .sort-select
   carried; a field inside a form group keeps the tighter one, below. */
.field {
    padding: var(--gap-peer) var(--gap-group);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--content);
    font-size: var(--font-size-base);
}

/* A field in a form group fills it. The three fields outside one carry their
   own width, which is why this is not on .field itself. */
.form-group .field {
    width: 100%;
    padding: var(--gap-peer);
}

select.field { cursor: pointer; }

/* layout.css draws the disabled field -- muted content, not-allowed cursor --
   but the two rules above set colour and cursor at rest in an unlayered sheet,
   so the resting rules win and the generated disabled arm never applies. An
   app must state the disabled variant of every property it sets at rest.
   Found by adopting the generated states, not reported. The fill and the edge
   come from layout.css and are not restated here. */
.field:disabled,
.field[aria-disabled="true"] {
    color: var(--content-muted);
    cursor: not-allowed;
}

textarea.field {
    font-family: inherit;
    resize: vertical;
    min-height: 4rem;
}

/* .form-label replaces the unclassed `<label>` under `.form-group`. */
.form-group label,
.settings-content .form-group label,
.form-label {
    display: block;
    margin-bottom: var(--gap-bound);
    color: var(--content-secondary);
    font-size: var(--font-size-md);
    font-weight: 700;
}
/* .form-row: horizontal grouping of two related fields (e.g. label + button) */

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--gap-peer);
    margin-top: var(--gap-section);
}

.form-hint {
    font-size: var(--font-size-xs);
    color: var(--content-muted);
    margin-top: var(--gap-bound);
}

/* ===  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(--content) 40%, transparent);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: var(--surface-raised);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    /* Floating surfaces carry both: the bevel says the panel is a lit
       object, the drop shadow says it is above the page. */
    box-shadow: var(--bevel-raised), var(--shadow-brutal-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gap-group) var(--gap-pane);
    border-bottom: var(--border-width) solid var(--border);
    background-color: var(--surface-overlay);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-header h2 { font-size: var(--font-size-xl); font-weight: 700; color: var(--content); }

/* 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: var(--gap-bound);
    padding: var(--step-hair) var(--step-base);
    background-color: var(--surface-sunken);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-xl);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--content-muted);
    white-space: nowrap;
}

.modal-body { padding: var(--gap-pane); }



/* Carries `.card`: a pressable raised object with a hover fill and an inset
   pressed state, which is what these three rules wrote by hand. The fill, the
   bevel, the hover and the press all come from layout.css now, wrapped in
   (hover: hover) and (pointer: fine) there so a fingertip gets no phantom
   hover. What is left here is the box and the accent border. */
.plugin-item {
    padding: var(--gap-group);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--gap-peer);
    cursor: pointer;
}
.plugin-item:hover {
    border-color: var(--category-four);
}

/* 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(--content-secondary)"`
   in feeds.js plugin picker). */
.modal-intro {
    margin-bottom: var(--gap-section);
    color: var(--content-secondary);
    font-size: var(--font-size-base);
}

/* 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: var(--gap-pane) var(--gap-group);
    color: var(--content-muted);
    font-size: var(--font-size-md);
    line-height: 1.5;
}
.source-item--empty:hover { background-color: transparent; }
.source-item-empty-icon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--gap-peer);
    color: var(--content-muted);
}
.source-item-empty-icon svg { width: 1.5rem; height: 1.5rem; }
.source-item-empty-strong { color: var(--category-four); font-weight: 700; }
.source-item-empty-link   { color: var(--category-four); }

/* sources.js "+ Saved Filter" button label. Was inline color. */

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

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

/* settings-sync.js pricing fine-print. Class already existed but carried
   inline styles; rules moved here. */
.sync-sub-fine-print {
    font-size: var(--font-size-base);
    opacity: 0.75;
    margin-top: var(--gap-bound);
}

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

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

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

/* 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: var(--gap-section); }

/* ===  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(--surface-raised);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--gap-peer) var(--gap-group);
    margin-top: var(--gap-peer);
    box-shadow: var(--bevel-raised), var(--shadow-brutal);
    animation: slideIn 0.3s ease-out;
    font-weight: 500;
    font-size: var(--font-size-base);
}
.toast.success { border-left: 4px solid var(--success); background-color: color-mix(in srgb, var(--success) 8%, var(--surface-page)); }
.toast.error { border-left: 4px solid var(--danger); background-color: color-mix(in srgb, var(--danger) 8%, var(--surface-page)); }
.toast-undo {
    border-left: 4px solid var(--category-four);
    background-color: color-mix(in srgb, var(--category-four) 10%, var(--surface-page));
    display: flex;
    align-items: center;
    gap: var(--gap-bound);
}
.undo-message { flex: 1; }
.undo-btn {
    background: none;
    border: var(--border-width) solid currentColor;
    border-radius: var(--radius-sm);
    color: var(--content);
    cursor: pointer;
    padding: var(--step-tight) var(--step-roomy);
    font-size: var(--font-size-md);
    font-weight: 600;
}
.undo-btn:hover { background-color: color-mix(in srgb, var(--category-four) 20%, transparent); }
.undo-countdown {
    font-size: var(--font-size-xs);
    color: var(--content-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; }
}

/* ===  13. Tag  ===========================================================
   Canonical: .tag[data-color], display chip (detail panel, source/bookmark
   tags). Size modifier .tag--xs. .tag-chip is the separate interactive
   filter-chip (tag bars): it toggles (cursor + .active), unlike a display tag.
   Source tags use .tag.tag--xs[data-color="muted"]; .bookmark-tag composes on
   .tag with a click-to-filter modifier.
   ========================================================================== */
/* Carries `.raised`, which is where the fill and the bevel come from now.
   Left standing on purpose: a tag is a label and not pressable, which is the
   argument that flattened `.badge` on 2026-08-05, so `.tag` being an object at
   all is worth a second look. That is a decision about how the app should
   look, not a place the design system was being restated, so it is recorded
   rather than taken here. */
.tag {
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--step-hair) var(--step-base);
    font-size: var(--font-size-sm);
    color: var(--content-secondary);
}

/* F2 additions (2026-06-02): color variants via [data-color] attribute.
   Consumes --category-five and --category-six.

   .badge dropped off these selectors when badges moved to [data-tone]:
   nothing sets [data-color] on a badge any more, so the badge halves were
   matching nothing. .tag keeps the axis, since a tag names a category
   rather than a state and green-because-green is the right contract for
   it. That is also why the two stopped sharing: they were never saying
   the same thing, only spelling it the same way. */
.tag[data-color="green"]  { border-color: var(--category-two);  color: var(--category-two);  background-color: color-mix(in srgb, var(--category-two)  10%, transparent); }
.tag[data-color="yellow"] { border-color: var(--category-four); color: var(--content);       background-color: color-mix(in srgb, var(--category-four) 12%, transparent); }
.tag[data-color="red"]    { border-color: var(--category-one);   color: var(--category-one);   background-color: color-mix(in srgb, var(--category-one)   10%, transparent); }
.tag[data-color="blue"]   { border-color: var(--category-three); color: var(--category-three); background-color: color-mix(in srgb, var(--category-three) 10%, transparent); }
.tag[data-color="cyan"]   { border-color: var(--category-six);  color: var(--category-six);  background-color: color-mix(in srgb, var(--category-six)  10%, transparent); }
.tag[data-color="purple"] { border-color: var(--category-five); color: var(--category-five); background-color: color-mix(in srgb, var(--category-five) 10%, transparent); }
.tag[data-color="muted"]  { border-color: var(--border);        color: var(--content-muted);  background-color: var(--surface-sunken); }
.tag--xs { font-size: var(--font-size-xxs); padding: 0 var(--step-snug); }  /* mirrors .badge--xs */

/* .badge: smaller and more compact than .tag; used for counts and inline
   status indicators.

   The colour axis is [data-tone], which makeover-webview emits, replacing
   the [data-color] axis this file used to carry. The old axis named the
   paint (green, yellow, red, blue) and the new one names the meaning, so
   a badge now says what it is rather than what colour it came out. The
   swap is close to free here because three of the four category tokens
   were already the same value under a second name: category-one is
   danger, category-two is success, category-four is warning.

   The base text colour is the generated one. What stays below is the box:
   the border and the type.

   The raised fill and bevel this rule used to add are gone (2026-08-05).
   Token::Badge is Depth::Flat because a label is not pressable, GoingsOn's
   badges are flat, and BB was the only app dressing one as an object. A
   divergence nothing else shares is drift, whatever the comment above it
   said. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-bound);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 var(--step-snug);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
/* Filled is this app's own variant and has no counterpart in the
   description, which tones the text and leaves the fill alone. It is kept
   because a filled badge is how a recommendation reads at a glance, and it
   is driven off the same tone attribute so there is still one axis. */
.badge--filled { border: none; }
.badge--filled[data-tone="info"]    { background-color: var(--info);    color: var(--content-on-action); }
.badge--filled[data-tone="success"] { background-color: var(--success); color: var(--content-on-action); }
.badge--filled[data-tone="warning"] { background-color: var(--warning); color: var(--content); }
.badge--filled[data-tone="danger"]  { background-color: var(--danger);  color: var(--content-on-action); }

.detail-body {
    color: var(--content);
    line-height: 1.7;
    font-size: var(--font-size-base);
    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(--surface-sunken);
    padding: var(--gap-peer);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}

.detail-actions {
    display: flex;
    gap: var(--gap-peer);
    margin-top: var(--gap-section);
    padding-top: var(--gap-section);
    border-top: var(--border-width) solid var(--border);
}

/* ===  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(--surface-raised);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--bevel-raised), var(--shadow-brutal);
    padding: var(--gap-bound);
    min-width: 140px;
}
.context-menu-item {
    display: block;
    width: 100%;
    padding: var(--gap-peer) var(--gap-group);
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--content);
    font-size: var(--font-size-md);
    text-align: left;
    cursor: pointer;
}
.context-menu-item:hover {
    background-color: var(--surface-sunken);
}

/* ===  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: var(--radius-full);
    margin-right: var(--gap-bound);
    flex-shrink: 0;
}
/* F5 (2026-06-02): dropped legacy color-only .health-* classes; render
   site (sources.js) and the sources render tests 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(--success); }
.health-dot[data-health="yellow"],
.health-dot[data-health="rate_limited"]   {
    background-color: var(--category-four);
    border: 1.5px dashed var(--shadow-color);
    box-sizing: border-box;
}
.health-dot[data-health="red"]            { background-color: var(--danger); 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(--content-on-action);
    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(--danger);
    position: relative;
}
.health-dot[data-health="circuit_broken"] {
    background-color: transparent;
    border: 2px solid var(--content-muted);
    box-sizing: border-box;
}

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

@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);
    box-shadow: var(--bevel-inset);
    overflow: hidden;
}
/* Kept motion: the fill moves through space, which is period-correct. State
   feedback that only recolors is not, and was dropped across the file. */
.progress-bar {
    height: 100%;
    background-color: var(--category-four);
    transition: width var(--transition-slow) ease;
}
/* The two numbers the bar is drawn from, said out loud. A 3px bar at the foot
   of the header reports roughly-a-quarter and nothing else; this says which
   quarter of what. Empty until something has counted, so a refresh that has not
   heard from a feed yet shows a trough and no claim. */
.progress-reading {
    position: absolute;
    right: var(--gap-section);
    bottom: var(--gap-bound);
    color: var(--content-muted);
    font-size: var(--font-size-xs);
}

/* Toast with action */
.toast-action {
    display: inline-block;
    margin-left: var(--gap-bound);
    background: none;
    border: var(--border-width) solid currentColor;
    border-radius: var(--radius-sm);
    color: inherit;
    cursor: pointer;
    padding: var(--step-hair) var(--step-base);
    font-size: var(--font-size-md);
    font-weight: 600;
}
.toast-action:hover { opacity: 0.8; }

/* ===  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(--surface-overlay);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--gap-peer) var(--gap-group);
    z-index: 1200;
    max-width: 320px;
    box-shadow: var(--bevel-raised), var(--shadow-brutal);
    font-size: var(--font-size-base);
}

/* ===  19. Health popover  ================================================
   Floating panel from gear icon. Actions use the .button family (.hp-actions .button
   fills the row). .hp-row is a one-off label/value line (kept).
   ========================================================================== */
.health-popover {
    position: fixed;
    z-index: 100;
    background: var(--surface-overlay);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--bevel-raised), var(--shadow-brutal);
    padding: var(--gap-group);
    min-width: 220px;
    max-width: 320px;
    font-size: var(--font-size-md);
}
.hp-title {
    font-weight: 700;
    margin-bottom: var(--gap-peer);
    padding-bottom: var(--gap-peer);
    border-bottom: var(--border-width) solid var(--border);
}
.hp-row {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-bound);
    padding: var(--gap-bound) 0;
}
.hp-row-error {
    flex-direction: column;
    gap: var(--step-hair);
}
.hp-label {
    color: var(--content-muted);
    flex-shrink: 0;
}
.hp-value {
    text-align: right;
    word-break: break-word;
}
.hp-row-error .hp-value {
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--content-secondary);
}
.hp-green { color: var(--success); }
.hp-yellow { color: var(--category-four); }
.hp-red { color: var(--danger); }
.hp-grey { color: var(--content-muted); }

.hp-actions {
    display: flex;
    gap: var(--gap-peer);
    margin-top: var(--gap-section);
    padding-top: var(--gap-peer);
    border-top: var(--border-width) solid var(--border);
}
/* Popover actions are the .button family (Mark Read / Edit / Tags / Delete);
   they fill the row equally. */
.hp-actions .button { flex: 1; }