/* ── Shared components ────────────────────────────────────────────────────────
   Selectors used by more than one feature. This file loads straight after the
   tokens, so every feature stylesheet comes later and can still override a
   component where one surface genuinely differs. */

/* ── Pill toggle ── one of a row of options, gold once chosen: the scene image
   style presets (Settings → Visuals) and the onboarding reason chips. The
   feature keeps its own class alongside this one as the JS hook. */
.pill-toggle {
    padding: 0.38rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--gold-line);
    background: var(--wash);
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pill-toggle:hover { background: var(--gold-wash); color: var(--text); }
.pill-toggle.active {
    background: var(--gold-wash-2);
    border-color: var(--gold);
    color: var(--gold);
}

/* ── Floating menu ── the shell for a small menu positioned against whatever
   opened it: the task options menu and the portrait edit menu. Both are
   fixed-position and stay hidden until their opener adds .show. */
.floating-menu {
    position: fixed;
    background: var(--panel2);
    border: 1px solid var(--seam);
    border-radius: 6px;
    box-shadow: 0 6px 20px var(--shadow-md);
    z-index: 2000;
    min-width: 138px;
    overflow: hidden;
    display: none;
}
.floating-menu.show { display: block; }

/* ── Menu item ── one row inside a .floating-menu. Flex because a task row
   leads with an emoji; inert for the plain-text rows. A feature keeps its own
   class alongside this one to hang state modifiers off (.task-menu-item.frog-on
   and friends, in sidebar.css) — those load later and so win on hover. */
.menu-item {
    padding: 0.42rem 0.9rem;
    font-size: 0.78rem;
    color: var(--text);
    cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
    font-family: 'Nunito', sans-serif;
}
.menu-item:hover { background: var(--panel); color: var(--accent); }