/* ════════════════════════════════════════════════════════════════════
   uiPolish.css — site-wide accessibility & consistency layer
   Loaded LAST so it refines the existing design without rewriting it.
   Goals: keyboard accessibility, motion safety, consistent interactive
   states, and small craft fixes. Intentionally additive & low-risk.
   ════════════════════════════════════════════════════════════════════ */

/* ── Keyboard focus ring (only for keyboard users, not mouse clicks) ── */
:where(a, button, select, input, textarea, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    border-radius: 6px;
}
/* Don't show the ring on mouse/touch interaction */
:where(a, button, select, input, textarea, [role="button"], [tabindex]):focus:not(:focus-visible) {
    outline: none;
}

/* ── Text selection colour matches the brand accent ── */
::selection {
    background: rgba(99, 102, 241, 0.35);
    color: #fff;
}

/* ── Consistent disabled affordance ── */
button:disabled,
.qf-refresh:disabled,
.bgs-run:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* ── Kill the blue tap-flash on mobile for interactive elements ── */
a, button, select, input, textarea, [role="button"], .nb, .qp, .card, .qf-card, .bgs-card {
    -webkit-tap-highlight-color: transparent;
}

/* ── Interactive buttons get a subtle, consistent press feedback ── */
button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
    transform: translateY(0.5px) scale(0.995);
}

/* ── Respect users who prefer reduced motion (a11y / vestibular) ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Accessible hidden helper (for screen-reader-only labels) ── */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Images never overflow their container ── */
img { max-width: 100%; }

/* ── Smoother, quieter scrollbars on any scroller that lacks custom styling
      (Firefox). WebKit already styled in style.css — keep both consistent. ── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

/* ════════════════════════════════════════════════════════════════════
   Cross-tab consistency refinements
   The app already uses a variable-based design system (--s1/--s2/--border
   /--accent etc.) with transitions in most places. These rules smooth the
   few interactive controls that lacked feedback and unify their states,
   so all six tabs feel like one product. Additive only — no layout changes.
   ════════════════════════════════════════════════════════════════════ */

/* ── Unified motion on interactive pills / buttons / tiles that lacked it ── */
.news-filter-btn,
.cmt-btn,
.sl-btn,
.qp,
.school-track-chip,
.v2-gate-pill,
.v2-icon-btn,
.mini-badge,
.nb {
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

/* ── Subtle, consistent hover feedback on small clickable controls ──
      (kept to pills/buttons/chips — never applied to static info cards) ── */
.news-filter-btn:hover,
.cmt-btn:hover,
.sl-btn:hover,
.qp:hover,
.school-track-chip:hover,
.v2-icon-btn:hover {
    border-color: rgba(99, 102, 241, .45);
    transform: translateY(-1px);
}

/* ── Consistent, intentional empty states across tabs ── */
.empty-list,
.news-digest-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    min-height: 44px;
    padding: 14px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

/* ── Loading skeleton shimmer (used by the news digest, reusable anywhere) ── */
.news-skel-line {
    position: relative;
    overflow: hidden;
    background: var(--s2);
}
.news-skel-line::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
    animation: skelShimmer 1.3s infinite;
}
@keyframes skelShimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .news-skel-line::after { animation: none; }
}

/* ── Active/selected pills read clearly across every tab ── */
.news-filter-btn.active,
.cmt-btn.active,
.sl-btn.active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(99, 102, 241, .18);
}

/* ── Bottom-nav: smoother active transition (icon + label) ── */
.nb:active { transform: translateY(0.5px); }

/* ── Trading School: beginner caption under each lesson chart ── */
.school-visual-caption {
    margin: 0;
    padding: 10px 14px 14px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted);
}
.school-visual-caption b { color: var(--text); }

/* ── Tap-to-zoom lightbox for Trading School charts ── */
.school-candle-svg { cursor: zoom-in; }
.chart-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    background: rgba(4, 5, 12, .93);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.chart-zoom-overlay.open { display: block; animation: czFade .18s ease; }
@keyframes czFade { from { opacity: 0; } to { opacity: 1; } }
.chart-zoom-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(58px, calc(env(safe-area-inset-top) + 58px)) 16px max(48px, calc(env(safe-area-inset-bottom) + 48px));
    touch-action: none;
}
.chart-zoom-svg {
    width: min(980px, 94vw);
    height: auto;
    flex: 0 0 auto;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    cursor: zoom-in;
    transform-origin: center center;
    transition: transform .14s ease;
    will-change: transform;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
/* during an active pinch/drag, drop the transition for 1:1 tracking */
.chart-zoom-svg.cz-active { transition: none; }
.chart-zoom-close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: 14px;
    z-index: 2;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background: rgba(20, 20, 30, .82);
    color: #fff;
    font-size: 22px; font-weight: 800;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.chart-zoom-hint {
    position: fixed;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 0; right: 0;
    text-align: center;
    color: rgba(255, 255, 255, .6);
    font-size: 12px; font-weight: 600;
    pointer-events: none;
}
body.chart-zoom-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .chart-zoom-overlay.open { animation: none; } .chart-zoom-svg { transition: none; } }