/* top-bar.css — shared top pill row, standardized across Home, Chapters,
   and Core (2026-07-28, per Owen). Mirrors how bottom-bar.css already
   works: one shared surface, each page just feeds it its own pill data via
   js/components/topBarComponent.js.

   Deliberately no title/subtitle styles here — Owen's explicit call: every
   page using this starts straight into the pill row, nothing above it
   (Core previously had a "Core" / "N memories" header; that's gone now).

   Pill style is intentionally uniform regardless of what the pill means —
   a filter (by Collection/Chapter) and a view-mode tab (Core's
   Featured/All/Pages) render identically. Context/position is what
   distinguishes them, not styling.

   The "+" button is a fixed circle pinned at the right edge, outside the
   scrollable row — pills scroll underneath/behind it rather than pushing it
   off-screen. Pages without a real "create new X" action yet just get a
   placeholder (wired to a "Coming soon" toast) via topBarComponent.js. */

.top-bar{position:relative;padding:10px 16px 10px 16px;flex-shrink:0;}
/* Row's box is deliberately narrower than the bar (100% - 34px) so its own
   overflow-clip boundary lands right at the "+" button's left edge (button
   is 32px wide + 16px inset = 48px from the bar's right edge; 34px of
   reduction + the bar's own 16px right padding = 50px, ~2px of clearance
   before the button starts). Previously the row spanned the bar's full
   width and relied on padding-right + the button's opacity/z-index alone
   to hide scrolled-past pills — that left a sliver of a pill's rounded
   border visible past the button's right edge (2026-07-29 bug, per Owen).
   Tuned tight rather than generous (an earlier pass used 56px, but that
   left a visible gap of bare background between the last pill and the
   button — per Owen, pills should hug the "+" as they fade, not stop
   short of it) — this shrinks the row's actual box just enough to clear
   the button with no overlap, so pills are clipped out of existence right
   as they'd reach it, not covered up well before. */
.top-pill-row{display:flex;gap:7px;overflow:hidden;overflow-x:auto;scrollbar-width:none;width:calc(100% - 34px);}
.top-pill-row::-webkit-scrollbar{display:none;}
.top-pill{flex-shrink:0;font-size:12px;padding:var(--button-top-pill-pad-y,7px) var(--button-top-pill-pad-x,14px);border-radius:99px;border:0.5px solid var(--border-strong);color:var(--text-tertiary);display:flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer;transition:background .15s;max-width:190px;overflow:hidden;text-overflow:ellipsis;}
.top-pill.on{background:var(--text-primary);color:var(--bg-shell);border-color:var(--text-primary);font-weight:500;}
.top-pill-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
/* Fade zone must line up with the row's actual clip boundary (100% - 34px
   width, i.e. 34px + the bar's own 16px padding = 50px in from the bar's
   right edge) so it fades real pill pixels right up to the point they get
   clipped, instead of fading empty background past where content already
   vanished (2026-07-29 fix — the fade and the clip boundary had drifted
   apart, so the last pill was hard-cutting with no fade at all). */
.top-bar::after{content:'';position:absolute;top:10px;right:50px;bottom:10px;width:28px;background:linear-gradient(to right, transparent, var(--bg-shell) 85%);pointer-events:none;z-index:1;}
.top-add-btn{position:absolute;top:10px;right:16px;width:var(--button-top-add-size,32px);height:var(--button-top-add-size,32px);border-radius:50%;background:var(--bg-elevated);border:0.5px solid var(--border-default);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:2;flex-shrink:0;}
.top-add-btn:active{background:var(--bg-control);}

/* Standardized "+" dropdown (2026-07-29, per Owen) — anchored under the
   "+" bubble, drops down over the content below (mirrors the app's
   existing bottom-anchored dropdowns like .expand-menu/.chapter-menu,
   just flipped since this button lives at the top now). Chapters uses
   this for its one real action (Add chapter); Home and Core get the same
   dropdown with a disabled placeholder item until they have a real
   create-action of their own. */
.top-add-menu{position:absolute;top:58px;right:16px;background:var(--bg-elevated);border:0.5px solid var(--border-default);border-radius:16px;padding:6px;display:flex;flex-direction:column;gap:2px;min-width:170px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;z-index:6;box-shadow:0 8px 24px rgba(0,0,0,.35);}
.top-add-menu.open{opacity:1;pointer-events:all;transform:translateY(0);}
.top-add-menu-item{padding:var(--button-menu-pad-y,11px) var(--button-menu-pad-x,13px);border-radius:11px;cursor:pointer;font-size:14px;color:var(--text-primary);white-space:nowrap;}
@media (hover: hover){ .top-add-menu-item:hover{background:var(--border-soft);} }
/* Disabled placeholder items (Home's Select/Add Era, Core's Coming soon)
   keep the exact same text color/weight as a real item (Chapters' Add
   chapter) — per Owen, every item in this dropdown should read as the
   same design regardless of page, not have placeholders visually look
   "lesser." Only cursor + hover-highlight change to signal non-interactive
   (2026-07-29 fix — .disabled previously dimmed the text via
   var(--text-faint), which made Home/Core's dropdown look inconsistent
   with Chapters'). */
.top-add-menu-item.disabled{cursor:default;}
@media (hover: hover){ .top-add-menu-item.disabled:hover{background:none;} }
/* "‹ Back" row auto-inserted by wireAddMenu when a submenu is open
   (2026-07-29, Custom Refine picker's More > Hide/Delete) — same item
   styling, just muted so it doesn't read as another action. */
.top-add-menu-back{color:var(--text-tertiary);border-bottom:0.5px solid var(--border-soft);margin-bottom:2px;padding-bottom:12px;}