/* ============================================================================
   TraderAlign — Shared Account Picker (search / recently-active-first /
   first-5 + Show More / lifecycle badges / glow indicator).

   Extracted verbatim from public/journal.php's "Right Now" workspace
   (2026-07-29 session) so this is ONE real implementation, not a second
   parallel build — linked by both public/journal.php and
   public/trading-center.php. Class names/custom-property names are
   unchanged from journal.php's own inline copy on purpose, so no other
   markup or JS anywhere had to be renamed.

   --rn-* custom properties are declared here (not in assets/tokens.css)
   because they're specific to this component's visual language, not
   general design tokens — this file is the single source for them now;
   journal.php's own inline :root block still declares the same values
   for its many OTHER .rn-* classes that live outside this component and
   were not extracted (harmless duplication of the same values, not a
   behavioral conflict).
   ============================================================================ */

:root {
    --rn-green: #22C55E;
    --rn-green-dim: rgba(34,197,94,.14);
    --rn-gold: #E0A64A;
    --rn-gold-dim: rgba(224,166,74,.14);
    --rn-purple: #8B7CF6;
    --rn-purple-dim: rgba(139,124,246,.10);
    --rn-blue: #60A5FA;
    --rn-red: #EF5350;
}

@keyframes rn-pulse{0%,100%{opacity:1}50%{opacity:.35}}

.rn-badge{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:.22rem .6rem;border-radius:var(--radius-full)}
.rn-badge-green{background:var(--rn-green-dim);color:var(--rn-green)}
.rn-badge-blue{background:color-mix(in srgb,var(--rn-blue) 16%,transparent);color:var(--rn-blue)}
.rn-badge-red{background:color-mix(in srgb,var(--rn-red) 16%,transparent);color:var(--rn-red)}
.rn-badge-gold{background:var(--rn-gold-dim);color:var(--rn-gold)}
.rn-badge-neutral{background:var(--background-surface);color:var(--foreground-dim);border:1px solid var(--border)}

.rn-live-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--rn-purple);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.05em;padding:.28rem .7rem;border-radius:var(--radius-full)}
.rn-live-dot{width:.4rem;height:.4rem;border-radius:50%;background:#fff;animation:rn-pulse 1.4s infinite}

/* display:inline-block (2026-08-06 fix) — without it, this wrapper is a
   plain block element that stretches to fill its own parent row's full
   width, while the visible trigger button inside only occupies its own
   natural width at the left edge. The dropdown panel's right:0 was then
   anchoring to the WRAPPER's far-right edge (often nearly the full page
   width away) instead of the button's own right edge, making the opened
   panel appear far from the button that opened it. Shrink-wrapping the
   wrapper to its content (the button) makes right:0 correctly align with
   the button itself, everywhere this shared component is used. */
.rn-account-picker{position:relative;display:inline-block}
.rn-account-picker-btn{display:flex;align-items:center;gap:.65rem;background:var(--background-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:.55rem .9rem;font-size:.85rem;font-weight:600;color:var(--foreground);cursor:pointer;min-width:14rem;justify-content:space-between}
.rn-account-picker-btn:hover{border-color:var(--foreground-dim)}
.rn-account-picker-current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16rem}
.rn-account-picker-chev{color:var(--foreground-dim);font-size:.7rem}
/* position:fixed, computed by rnToggleAccountPicker() at open time
   (2026-08-06 fix) — a static right:0/left:0 anchor can't work for every
   placement this shared picker is used at: some sit near the page's left
   edge (Trading Archive's account selector), others near the right
   (Active Journeys' picker) — a fixed anchor side overflows the viewport
   for whichever placement it wasn't tuned for. Fixed positioning, with
   top/left computed from the trigger button's real on-screen position
   and clamped to the viewport, is correct regardless of where the button
   sits — the exact same technique already used for the Impact-rating
   popover elsewhere on this page, for the identical reason. The inline
   variant below (.rn-account-picker-panel-inline) still overrides this
   back to position:static, unaffected. */
.rn-account-picker-panel{position:fixed;z-index:210;width:22rem;max-width:90vw;background:var(--popover);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.75rem;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.rn-account-search{width:100%;background:var(--background-surface);border:1px solid var(--border);color:var(--foreground);padding:.5rem .7rem;border-radius:var(--radius-md);font-size:.8rem;margin-bottom:.6rem}
.rn-account-list{max-height:18rem;overflow-y:auto;display:flex;flex-direction:column;gap:.3rem}
.rn-account-item{display:flex;flex-direction:column;gap:.2rem;padding:.55rem .7rem;border-radius:var(--radius-md);text-decoration:none;color:var(--foreground);background:var(--background-surface);border:1px solid transparent}
.rn-account-item:hover{border-color:var(--border)}
.rn-account-item-selected{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent)}
.rn-account-item-label{font-size:.82rem;font-weight:700}
.rn-account-item-meta{font-size:.66rem;color:var(--foreground-dim);display:flex;align-items:center;gap:.3rem}
.rn-account-item-meta .rn-badge{font-size:.56rem;padding:.1rem .4rem}
.rn-show-more-accts{width:100%;margin-top:.6rem;background:transparent;border:1px solid var(--border);color:var(--foreground-dim);font-size:.74rem;font-weight:700;padding:.45rem;border-radius:var(--radius-md);cursor:pointer}
.rn-show-more-accts:hover{color:var(--foreground);border-color:var(--foreground-dim)}

/* Inline mode (apRenderAccountPicker($expanded=true)) — a plain, static,
   in-page search box + list, not the floating dropdown popover. No toggle
   button exists in this mode, so the panel is never absolutely positioned
   and never depends on a "current selection" width — it just fills its
   container like any other page content. */
.rn-account-picker-inline{max-width:40rem}
.rn-account-picker-panel-inline{position:static;display:block;width:100%;max-width:none;box-shadow:none;padding:0;background:transparent;border:none}
.rn-account-picker-panel-inline .rn-account-search{margin-bottom:.75rem}
.rn-account-picker-panel-inline .rn-account-list{max-height:none}

/* New for Trading Center — glowing "current real lifecycle stage" indicator
   (e.g. "🟢 Phase 2 Active"). Built from the same rn-pulse keyframe + badge
   family above. Deliberately never applied to a breached account — see
   AccountPicker::apLifecycleGlowBadge(), which returns the plain (non-glow)
   .rn-badge-red markup for that case instead of this component. */
.ap-glow-badge{display:inline-flex;align-items:center;gap:.45rem;background:var(--rn-green-dim);color:var(--rn-green);font-size:.78rem;font-weight:800;padding:.4rem .85rem;border-radius:var(--radius-full);border:1px solid color-mix(in srgb,var(--rn-green) 40%,transparent)}
.ap-glow-badge.ap-glow-gold{background:var(--rn-gold-dim);color:var(--rn-gold);border-color:color-mix(in srgb,var(--rn-gold) 40%,transparent)}
.ap-glow-dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;animation:rn-pulse 1.4s infinite}
