/* ----------------------------------------------------------------
 * Glassmorphism design system — shared across the site.
 * Extracted from public/index.html so other pages
 * (simulated-portfolio, news-dashboard, etc.) can reuse it.
 *
 * Base shell. ::before is the top "sheen" line and ::after is the
 * left accent strip — both gradients, swapped by the accent classes
 * below. The shell itself includes a soft top-highlight via a
 * layered background gradient (no extra DOM needed).
 *
 * Defaults (no accent class) use a blue → cyan family.
 * ---------------------------------------------------------------- */
.glass-panel {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 64px),
        rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.6);
}
.glass-panel::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, rgba(96, 165, 250, 0.4) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.glass-panel::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(59, 130, 246, 0.8) 0%, rgba(6, 182, 212, 0.8) 50%, rgba(59, 130, 246, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Accent variants — recolor the sheen + accent strip. */
.glass-accent-purple::before  { background: linear-gradient(to right, transparent 0%, rgba(192, 132, 252, 0.4) 50%, transparent 100%); }
.glass-accent-purple::after   { background: linear-gradient(to bottom, rgba(139, 92, 246, 0.8) 0%, rgba(59, 130, 246, 0.8) 50%, rgba(139, 92, 246, 0) 100%); }

.glass-accent-blue::before    { background: linear-gradient(to right, transparent 0%, rgba(96, 165, 250, 0.4) 50%, transparent 100%); }
.glass-accent-blue::after     { background: linear-gradient(to bottom, rgba(59, 130, 246, 0.8) 0%, rgba(6, 182, 212, 0.8) 50%, rgba(59, 130, 246, 0) 100%); }

.glass-accent-emerald::before { background: linear-gradient(to right, transparent 0%, rgba(52, 211, 153, 0.4) 50%, transparent 100%); }
.glass-accent-emerald::after  { background: linear-gradient(to bottom, rgba(16, 185, 129, 0.8) 0%, rgba(20, 184, 166, 0.8) 50%, rgba(16, 185, 129, 0) 100%); }

.glass-accent-amber::before   { background: linear-gradient(to right, transparent 0%, rgba(251, 191, 36, 0.4) 50%, transparent 100%); }
.glass-accent-amber::after    { background: linear-gradient(to bottom, rgba(245, 158, 11, 0.8) 0%, rgba(249, 115, 22, 0.8) 50%, rgba(245, 158, 11, 0) 100%); }

.glass-accent-cyan::before    { background: linear-gradient(to right, transparent 0%, rgba(34, 211, 238, 0.4) 50%, transparent 100%); }
.glass-accent-cyan::after     { background: linear-gradient(to bottom, rgba(6, 182, 212, 0.8) 0%, rgba(14, 165, 233, 0.8) 50%, rgba(6, 182, 212, 0) 100%); }

.glass-accent-rose::before    { background: linear-gradient(to right, transparent 0%, rgba(244, 114, 182, 0.4) 50%, transparent 100%); }
.glass-accent-rose::after     { background: linear-gradient(to bottom, rgba(244, 63, 94, 0.8) 0%, rgba(225, 29, 72, 0.8) 50%, rgba(244, 63, 94, 0) 100%); }

.glass-accent-indigo::before  { background: linear-gradient(to right, transparent 0%, rgba(129, 140, 248, 0.4) 50%, transparent 100%); }
.glass-accent-indigo::after   { background: linear-gradient(to bottom, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.8) 50%, rgba(99, 102, 241, 0) 100%); }

.glass-accent-slate::before   { background: linear-gradient(to right, transparent 0%, rgba(148, 163, 184, 0.25) 50%, transparent 100%); }
.glass-accent-slate::after    { background: linear-gradient(to bottom, rgba(100, 116, 139, 0.5) 0%, rgba(71, 85, 105, 0.5) 50%, rgba(100, 116, 139, 0) 100%); }

/* More opaque variant for content-dense / sticky panels where
   you don't want the page video bleeding through. */
.glass-panel--solid {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 64px),
        rgba(15, 23, 42, 0.55);
}

/* Even denser variant for tabular data grids (holdings tables,
   transaction logs) where row legibility beats transparency. */
.glass-panel--data {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 64px),
        rgba(15, 23, 42, 0.72);
}

/* Hover lift for clickable glass cards. */
.glass-panel--hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.glass-panel--hover:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 16px 50px -12px rgba(0, 0, 0, 0.7);
}

/* ----------------------------------------------------------------
 * Search input — glass field with soft blue focus glow
 * ---------------------------------------------------------------- */
.search-input-container {
    position: relative;
}

.search-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #f3f4f6;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    border-radius: 0.65rem;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.search-input::placeholder { color: rgba(148, 163, 184, 0.7); }

.search-input:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

.search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 0 24px -8px rgba(59, 130, 246, 0.4);
}

.search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

.filter-group-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Market Divergence cards — seamless vertical infinite marquee.
   The inner track contains the card list duplicated back-to-back, so a
   translation of -50% lands the second copy pixel-identically where the
   first started — no jump, no rewind. Pauses on hover so users can read.
   To tune speed, change ONLY the animation duration. */
@keyframes divergence-loop {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
.animate-divergence-loop {
    animation: divergence-loop 80s linear infinite;
}
.animate-divergence-loop:hover {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .animate-divergence-loop { animation: none; }
}

/* ----------------------------------------------------------------
 * Disclaimer toast — bottom-right popup card
 * ---------------------------------------------------------------- */
#disclaimer-toast {
    position: fixed;
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    max-width: 380px;
    width: calc(100vw - 2rem);
    padding: 0.85rem 1rem;
    color: #f3f4f6;
    font-size: 0.825rem;
    line-height: 1.4;
    z-index: 110;
    animation: toastSlideIn 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
#disclaimer-toast.toast-out {
    animation: toastSlideOut 240ms ease-in forwards;
}
#disclaimer-toast .toast-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
#disclaimer-toast .toast-body { flex: 1 1 auto; min-width: 0; }
#disclaimer-toast .toast-title {
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(244, 114, 182, 0.95);
    margin-bottom: 0.2rem;
}
#disclaimer-toast .toast-close {
    background: transparent;
    border: 0;
    color: #cbd5e1;
    cursor: pointer;
    padding: 0.1rem;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
#disclaimer-toast .toast-close:hover { color: #f8fafc; }
#disclaimer-toast .toast-more { display: none; color: #cbd5e1; margin-top: 0.35rem; }
#disclaimer-toast.is-expanded .toast-more { display: block; }
#disclaimer-toast .toast-expand {
    background: transparent;
    border: 0;
    color: #fda4af;
    font-size: 0.75rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    margin-top: 0.35rem;
}
@keyframes toastSlideIn {
    from { transform: translate(120%, 0); opacity: 0; }
    to   { transform: translate(0, 0); opacity: 1; }
}
@keyframes toastSlideOut {
    from { transform: translate(0, 0); opacity: 1; }
    to   { transform: translate(120%, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #disclaimer-toast,
    #disclaimer-toast.toast-out { animation: none; }
}