/* ================================================================
   Event Cards — Swipe Deck
   Palette: cyan #00cfff  green #00ff88  red #ff4444  blue #3b82f6
   Backgrounds: #0a0e17 / #0d1520 / #111a28
   ================================================================ */

:root {
    --ec-bg: #0a0e17;
    --ec-card: #111a28;
    --ec-panel: rgba(17,24,39,0.6);
    --ec-border: rgba(0,150,255,0.15);
    --ec-cyan: #00cfff;
    --ec-green: #00ff88;
    --ec-red: #ff4444;
    --ec-blue: #3b82f6;
    --ec-text: #e0e8f0;
    /* Phase 1 #6 — was #6b7a8d (4.21:1 on bg, fails WCAG AA).
       New #7d8fa3 → 5.1:1 on #0a0e17 / 4.9:1 on the card panel. */
    --ec-muted: #7d8fa3;
    --ec-font: 'Archivo Black', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Override base content padding for full-bleed deck */
.mobile-bottom-nav,
#nexus-chat-widget,
.nexus-chat-bar,
.footer-bar { display: none !important; }

.content-main:has(#ec-app) {
    padding: 0 !important;
    overflow: hidden !important;
}

/* ── App Shell ─────────────────────────────────────────────── */
#ec-app {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    height: calc(100dvh - 64px);
    min-height: 480px;
    display: flex;
    flex-direction: column;
    background: var(--ec-bg);
    overflow: hidden;
    touch-action: manipulation;
    /* Was applied to the whole shell — blocked long-press copy on
       source URL / title / summary (Phase 1 #9). Narrowed to the
       interactive swipe card + actions; text content stays
       selectable below. */
    overscroll-behavior: none;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.ec-card, .ec-actions, .ec-topbar, .ec-bottombar {
    user-select: none;
    -webkit-user-select: none;
}
.ec-card-title, .ec-card-summary, .ec-source-link,
.ec-chip-sym, .ec-holding-sym {
    user-select: text;
    -webkit-user-select: text;
}

/* ── Top Bar ───────────────────────────────────────────────── */
.ec-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ec-border);
    background: rgba(10,14,23,0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
}

.ec-brand {
    font-family: var(--ec-font);
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--ec-cyan);
    text-transform: uppercase;
}

.ec-brand span { color: #fff; }

.ec-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ec-progress-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ec-progress-bar {
    width: 60px;
    height: 4px;
    background: rgba(0,150,255,0.15);
    border-radius: 2px;
    overflow: hidden;
}

.ec-progress-fill {
    height: 100%;
    background: var(--ec-cyan);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}

#ec-progress {
    font-size: 11px;
    color: var(--ec-muted);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}

.ec-watchlist-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--ec-muted);
    background: none;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    text-decoration: none;
    min-height: 44px;
    min-width: 44px;
}
.ec-watchlist-btn:hover { color: var(--ec-cyan); border-color: rgba(0,207,255,0.3); }
.ec-watchlist-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── Card Stack ────────────────────────────────────────────── */
.ec-stack {
    flex: 1;
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 14px 16px 8px;
    overflow: hidden;
    perspective: 1000px;
}

/* ── Card ──────────────────────────────────────────────────── */
.ec-card {
    position: absolute;
    inset: 14px 16px 8px;
    max-width: 408px;
    margin: 0 auto;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    will-change: transform;
    cursor: grab;
    transition: box-shadow 0.15s;
    box-shadow: 0 4px 32px rgba(0,0,0,0.4);
}
.ec-card:active { cursor: grabbing; }

.ec-card--behind {
    transform: scale(0.96) translateY(10px);
    opacity: 0.6;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ec-card--glow-bull {
    box-shadow: 0 0 48px rgba(0,255,136,0.3), 0 4px 32px rgba(0,0,0,0.4);
    border-color: rgba(0,255,136,0.4);
}

.ec-card--glow-skip {
    box-shadow: 0 0 48px rgba(255,68,68,0.3), 0 4px 32px rgba(0,0,0,0.4);
    border-color: rgba(255,68,68,0.3);
}

/* ── Stamp labels ──────────────────────────────────────────── */
.ec-stamp {
    position: absolute;
    top: 18px;
    font-family: var(--ec-font);
    font-size: 26px;
    letter-spacing: 2px;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    padding: 4px 14px;
    border-radius: 8px;
    border-width: 3px;
    border-style: solid;
}
.ec-stamp--bull {
    right: 18px;
    color: var(--ec-green);
    border-color: var(--ec-green);
    transform: rotate(12deg);
}
.ec-stamp--skip {
    left: 18px;
    color: var(--ec-red);
    border-color: var(--ec-red);
    transform: rotate(-12deg);
}

/* ── Status badge ──────────────────────────────────────────── */
.ec-status-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    /* 9 → 10px — Phase 1 #6 mobile-readability floor. */
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 5;
    pointer-events: none;
}
.ec-status-badge--active,
.ec-status-badge--live {
    background: rgba(0,255,136,0.12);
    color: var(--ec-green);
    border: 1px solid rgba(0,255,136,0.25);
}
.ec-status-badge--closed,
.ec-status-badge--expired,
.ec-status-badge--trading_closed,
.ec-status-badge--settled {
    background: rgba(255,68,68,0.1);
    color: var(--ec-red);
    border: 1px solid rgba(255,68,68,0.2);
}
.ec-status-badge--draft {
    background: rgba(0,207,255,0.08);
    color: var(--ec-cyan);
    border: 1px solid rgba(0,207,255,0.2);
}

/* ── Tabs (compact, never crowding swipe area) ─────────────── */
.ec-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    padding: 6px 10px 0;
    background: rgba(10,14,23,0.5);
    border-bottom: 1px solid var(--ec-border);
}
.ec-tab {
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: none;
    background: none;
    color: var(--ec-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    min-height: 44px;
    min-width: 44px;
}
.ec-tab.active {
    color: var(--ec-cyan);
    border-bottom-color: var(--ec-cyan);
}
.ec-tab:hover:not(.active) { color: var(--ec-text); }

/* ── Panels (scrollable, flex-grow) ───────────────────────── */
.ec-panel {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Phase 2 #12 — keep wheel-scroll inside the panel; without
       this, scrolling past the panel boundary bubbled and triggered
       browser back-nav on some trackpad gestures. */
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
}
.ec-panel.active { display: flex; }

/* ── Card image ────────────────────────────────────────────── */
.ec-card-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    background: rgba(0,150,255,0.08);
}

/* ── Title / summary ───────────────────────────────────────── */
.ec-card-title {
    font-family: var(--ec-font);
    font-size: 15px;
    color: var(--ec-text);
    line-height: 1.35;
    margin: 0;
}

.ec-card-summary {
    font-size: 12px;
    line-height: 1.55;
    color: var(--ec-muted);
    margin: 0;
    /* The parent .ec-panel handles overflow-y:auto, so let long
       summaries flow into the scrollable panel rather than being
       silently truncated at 4 lines. Was: -webkit-line-clamp: 4 —
       caused long summaries to vanish at the cut-off with no
       affordance for the user. */
}

.ec-source-link {
    /* 44px tap target — was unpadded inline, ~13px tall (Phase 1 #8). */
    padding: 10px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--ec-cyan);
    text-decoration: none;
    align-self: flex-start;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.ec-source-link:hover { opacity: 1; text-decoration: underline; }

/* ── Basket chips ──────────────────────────────────────────── */
.ec-basket-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ec-basket-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,207,255,0.07);
    border: 1px solid rgba(0,207,255,0.18);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
}
.ec-chip-sym {
    font-family: var(--ec-font);
    font-size: 11px;
    color: var(--ec-cyan);
}
.ec-chip-venue {
    /* 9 → 10px mobile-readability floor (Phase 1 #6). */
    font-size: 10px;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ec-chip-wt {
    font-size: 10px;
    color: var(--ec-green);
    font-weight: 700;
}

/* ── Chart block ───────────────────────────────────────────── */
.ec-chart-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.ec-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ec-chart-stat {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--ec-muted);
}
.ec-chart-stat.up { color: var(--ec-green); }
.ec-chart-stat.dn { color: var(--ec-red); }

.ec-chart-toggles {
    display: flex;
    gap: 2px;
}
.ec-chart-iv {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--ec-border);
    background: none;
    color: var(--ec-muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    min-height: 44px;
    min-width: 44px;
}
.ec-chart-iv.active {
    background: rgba(0,207,255,0.12);
    color: var(--ec-cyan);
    border-color: rgba(0,207,255,0.3);
}
.ec-chart-iv:hover:not(.active) { color: var(--ec-text); }

.ec-sparkline {
    width: 100%;
    height: 52px;
    display: block;
    border-radius: 6px;
    background: rgba(0,150,255,0.04);
    overflow: visible;
}

/* ── Stats panel specifics ─────────────────────────────────── */
.ec-idx-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(0,207,255,0.06);
    border: 1px solid rgba(0,207,255,0.12);
    border-radius: 8px;
}
.ec-idx-label {
    font-size: 11px;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ec-idx-val {
    font-family: var(--ec-font);
    font-size: 18px;
    color: var(--ec-cyan);
    font-variant-numeric: tabular-nums;
    transition: color 0.6s ease;
}
@keyframes ec-flash-up {
    0%   { color: var(--ec-green); }
    100% { color: var(--ec-cyan); }
}
@keyframes ec-flash-dn {
    0%   { color: var(--ec-red); }
    100% { color: var(--ec-cyan); }
}
.ec-idx-flash-up { animation: ec-flash-up 0.6s ease forwards; }
.ec-idx-flash-dn { animation: ec-flash-dn 0.6s ease forwards; }

/* % change next to the NAV — bold, colored, smaller than the NAV itself. */
.ec-idx-pct {
    margin-left: 8px;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
}

/* Index-product stat grid (Symbol / Market Cap / Base / NAV). */
.ec-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 8px;
}
.ec-stat-cell {
    background: rgba(17,24,39,0.6);
    border: 1px solid rgba(0,150,255,0.15);
    border-radius: 8px;
    padding: 8px 10px;
}
.ec-stat-cell-label {
    color: var(--ec-muted);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.ec-stat-cell-val {
    color: var(--ec-text);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Capital-allocation row — three columns: symbol, $ allocated, weight%. */
.ec-holding-alloc {
    color: var(--ec-text);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ec-pools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ec-pool {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid;
}
.ec-pool--bull {
    background: rgba(0,255,136,0.06);
    border-color: rgba(0,255,136,0.18);
}
.ec-pool--bear {
    background: rgba(255,68,68,0.06);
    border-color: rgba(255,68,68,0.15);
}
.ec-pool-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ec-muted);
    margin-bottom: 2px;
}
.ec-pool--bull .ec-pool-val { color: var(--ec-green); }
.ec-pool--bear .ec-pool-val { color: var(--ec-red); }
.ec-pool-val {
    font-family: var(--ec-font);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.ec-section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ec-muted);
    margin-top: 4px;
}

.ec-holdings-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ec-holding-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 5px;
    font-size: 12px;
}
.ec-holding-sym {
    font-family: var(--ec-font);
    font-size: 12px;
    color: var(--ec-cyan);
    min-width: 48px;
    flex: 0 0 auto;
}
/* Spacer column — $ allocation grows to fill the row. */
.ec-holding-alloc {
    flex: 1;
    text-align: right;
    color: var(--ec-text);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ec-holding-wt {
    font-size: 11px;
    color: var(--ec-green);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 56px;
    text-align: right;
}

/* ── Action Buttons Bar ────────────────────────────────────── */
.ec-actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr 1fr;
    gap: 6px;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--ec-border);
    background: rgba(10,14,23,0.7);
}

.ec-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    border-radius: 10px;
    border: 1px solid var(--ec-border);
    background: none;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    min-height: 52px;
    position: relative;
}
.ec-action-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}
.ec-action-btn span { font-size: 11px; }

.ec-action-btn--skip {
    color: var(--ec-red);
    border-color: rgba(255,68,68,0.2);
}
.ec-action-btn--skip:hover {
    background: rgba(255,68,68,0.1);
    border-color: rgba(255,68,68,0.35);
}

.ec-action-btn--watch {
    color: var(--ec-blue);
    border-color: rgba(59,130,246,0.2);
}
.ec-action-btn--watch:hover {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.35);
}
.ec-action-btn--watch svg { fill: none; }

.ec-action-btn--bull {
    color: var(--ec-green);
    border-color: rgba(0,255,136,0.25);
    background: rgba(0,255,136,0.06);
    font-size: 11px;
}
.ec-action-btn--bull:hover {
    background: rgba(0,255,136,0.15);
    border-color: rgba(0,255,136,0.45);
    box-shadow: 0 0 16px rgba(0,255,136,0.2);
}
.ec-action-btn--bull span { font-size: 10px; }

.ec-action-btn--bear {
    color: var(--ec-muted);
    border-color: rgba(107,122,141,0.15);
}
.ec-action-btn--bear.disabled,
.ec-action-btn--bear:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ec-action-btn--bear:hover .ec-tooltip,
.ec-action-btn--bear:focus .ec-tooltip,
.ec-action-btn--bear:focus-visible .ec-tooltip,
.ec-action-btn--bear.touch-active .ec-tooltip { display: block; }

/* ── "Coming soon" tooltip ─────────────────────────────────── */
.ec-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #1a2132;
    border: 1px solid var(--ec-border);
    color: var(--ec-muted);
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 5px;
    pointer-events: none;
    z-index: 50;
    text-transform: none;
    letter-spacing: 0;
}
.ec-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1a2132;
}

/* ── Bottom Bar ─────────────────────────────────────────────── */
.ec-bottombar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid var(--ec-border);
    background: rgba(10,14,23,0.95);
    font-size: 11px;
    color: var(--ec-muted);
}

.ec-hint {
    display: flex;
    gap: 12px;
}
.ec-hint-skip { color: var(--ec-red); }
.ec-hint-bull { color: var(--ec-green); }

/* ── Toast ─────────────────────────────────────────────────── */
#ec-toast {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top, 0));
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s, transform 0.22s;
    z-index: 300;
    max-width: 88vw;
    text-align: center;
}
#ec-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.ec-toast--cyan { background: rgba(0,207,255,0.15); border: 1px solid rgba(0,207,255,0.35); color: var(--ec-cyan); }
.ec-toast--bull { background: rgba(0,255,136,0.15); border: 1px solid rgba(0,255,136,0.3); color: var(--ec-green); }
.ec-toast--red  { background: rgba(255,68,68,0.15); border: 1px solid rgba(255,68,68,0.3); color: var(--ec-red); }

/* ── Loading / Empty ───────────────────────────────────────── */
.ec-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ec-loading span {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(0,207,255,0.2);
    border-top-color: var(--ec-cyan);
    border-radius: 50%;
    animation: ec-spin 0.75s linear infinite;
}
@keyframes ec-spin { to { transform: rotate(360deg); } }

.ec-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
}
.ec-empty-icon {
    font-size: 40px;
    color: var(--ec-cyan);
    opacity: 0.5;
}
.ec-empty-title {
    font-family: var(--ec-font);
    font-size: 18px;
    color: var(--ec-cyan);
}
.ec-empty-msg {
    font-size: 13px;
    color: var(--ec-muted);
    max-width: 260px;
    line-height: 1.5;
}
.ec-reload-btn {
    margin-top: 6px;
    padding: 10px 22px;
    border: 1px solid var(--ec-cyan);
    border-radius: 8px;
    background: rgba(0,207,255,0.08);
    color: var(--ec-cyan);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.15s;
}
.ec-reload-btn:hover { background: rgba(0,207,255,0.15); }

/* ── Buy Sheet (bottom sheet modal) ───────────────────────── */
#ec-buy-sheet {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: rgba(0,0,0,0.65);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
}
#ec-buy-sheet.open {
    opacity: 1;
    pointer-events: auto;
}

.ec-buy-box {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background: #0d1520;
    border: 1px solid var(--ec-border);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0));
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: translateY(20px);
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    /* Mobile keyboard fix — iOS Safari opens the soft keyboard when
       the amount input is focused, shrinking the visual viewport so
       Confirm Buy can fall below the fold. Letting the sheet box
       scroll internally keeps the submit button reachable.
       ``dvh`` collapses with the URL bar; ``vh`` is the fallback
       for browsers that don't support dvh. */
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#ec-buy-sheet.open .ec-buy-box { transform: translateY(0); }

.ec-buy-handle {
    /* Phase 1 #13 — drag handle was 36×4 at 25% blue, nearly
       invisible on OLED dark theme. Bumped to 48×5 white-35% so
       users see the sheet is dismissible. */
    width: 48px;
    height: 5px;
    background: rgba(255,255,255,0.35);
    border-radius: 3px;
    margin: 0 auto -6px;
}

.ec-buy-heading {
    font-family: var(--ec-font);
    font-size: 14px;
    color: var(--ec-cyan);
    line-height: 1.35;
}

.ec-buy-subheading {
    font-size: 11px;
    color: var(--ec-muted);
    margin-top: -6px;
}

.ec-buy-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ec-muted);
    margin-bottom: 4px;
}

.ec-quick-amts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ec-quick-amt {
    /* HIG-compliant 44px tap target — was 6px padding × 12px font
       resolving to ~26px (Phase 1 finding #3). */
    padding: 11px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    background: none;
    color: var(--ec-cyan);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ec-quick-amt:hover {
    background: rgba(0,207,255,0.1);
    border-color: rgba(0,207,255,0.3);
}

.ec-buy-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(17,26,40,0.8);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    color: var(--ec-text);
    font-size: 18px;
    font-family: var(--ec-font);
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}
.ec-buy-input::-webkit-outer-spin-button,
.ec-buy-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ec-buy-input:focus { border-color: rgba(0,207,255,0.4); }
.ec-buy-input::placeholder { color: var(--ec-muted); font-size: 14px; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 400; }

.ec-buy-error {
    font-size: 12px;
    color: var(--ec-red);
    min-height: 16px;
}

.ec-buy-actions {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8px;
}

.ec-buy-cancel {
    padding: 13px;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    background: none;
    color: var(--ec-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s;
    min-height: 48px;
}
.ec-buy-cancel:hover { color: var(--ec-text); }

.ec-buy-submit {
    padding: 13px;
    border: none;
    border-radius: 10px;
    background: var(--ec-green);
    color: #0a0e17;
    font-family: var(--ec-font);
    font-size: 14px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: opacity 0.15s, box-shadow 0.15s;
    min-height: 48px;
}
.ec-buy-submit:hover { opacity: 0.9; box-shadow: 0 0 20px rgba(0,255,136,0.3); }
.ec-buy-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Paper/Live mode toggle */
.ec-mode-toggle {
    display: flex;
    gap: 8px;
    background: rgba(17,24,39,0.6);
    border: 1px solid rgba(0,150,255,0.15);
    border-radius: 8px;
    padding: 4px;
}
.ec-mode-btn {
    flex: 1;
    /* 44px HIG — was 8px padding resolving to ~34px (Phase 1 #5). */
    padding: 11px 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--ec-muted);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: background 0.15s, color 0.15s;
}
.ec-mode-btn.is-active {
    background: rgba(0,207,255,0.15);
    color: #00cfff;
    box-shadow: 0 0 8px rgba(0,207,255,0.25);
}
.ec-mode-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.ec-mode-hint {
    margin-top: 6px;
    color: var(--ec-muted);
    font-size: 11px;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.4;
}

/* ── Backtest button (in the chart header) ────────────────── */
.ec-chart-backtest {
    margin-left: auto;
    /* 44px HIG — was 4px padding resolving to ~23px (Phase 1 #2). */
    padding: 10px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,207,255,0.08);
    border: 1px solid rgba(0,207,255,0.30);
    border-radius: 6px;
    color: var(--ec-cyan);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.ec-chart-backtest:hover {
    background: rgba(0,207,255,0.18);
    box-shadow: 0 0 12px rgba(0,207,255,0.25);
}

/* ── Backtest Sheet (reuses ec-buy-sheet bottom-sheet pattern) */
#ec-backtest-sheet {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: rgba(0,0,0,0.65);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
}
#ec-backtest-sheet.open {
    opacity: 1;
    pointer-events: auto;
}
.ec-backtest-box {
    /* Override default ec-buy-box max-width — backtest needs more room
       for the chart + stats grid. */
    max-width: 520px !important;
    max-height: 90vh;
    overflow-y: auto;
}
#ec-backtest-sheet.open .ec-buy-box { transform: translateY(0); }

/* Period chips are styled as ec-quick-amt — only the active state differs */
.ec-bt-period.is-active {
    background: rgba(0,207,255,0.25);
    color: var(--ec-cyan);
    border-color: rgba(0,207,255,0.6);
}

.ec-bt-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
}
.ec-bt-stat {
    background: rgba(17,24,39,0.6);
    border: 1px solid rgba(0,150,255,0.15);
    border-radius: 8px;
    padding: 10px 12px;
}
.ec-bt-stat-label {
    color: var(--ec-muted);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ec-bt-stat-value {
    color: var(--ec-text);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px;
    font-weight: 700;
}
.ec-bt-meta {
    margin-top: 10px;
    color: var(--ec-muted);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    line-height: 1.5;
}
.ec-bt-svg {
    display: block;
    width: 100%;
    height: 120px;
    margin-top: 12px;
    border: 1px solid rgba(0,150,255,0.15);
    border-radius: 8px;
    background: rgba(10,14,23,0.6);
}

/* ── Create Card sheet ───────────────────────────────────── */
.ec-create-btn { padding-right: 14px; }
.ec-create-btn svg { stroke: currentColor; }

#ec-create-sheet {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: rgba(0,0,0,0.65);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
}
#ec-create-sheet.open {
    opacity: 1;
    pointer-events: auto;
}
.ec-create-box { max-width: 480px !important; }
#ec-create-sheet.open .ec-buy-box { transform: translateY(0); }

.ec-create-textarea {
    resize: vertical;
    min-height: 96px;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
}

/* ── Keyboard shortcut hint ────────────────────────────────── */
.ec-hint .ec-hint-key {
    font-size: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 2px;
    color: rgba(255,255,255,0.4);
}

/* ── Sticky-hover guard (Phase 1 #7) ────────────────────────
   On touch devices :hover sticks after tap, so the buy button glows
   permanently, etc. Suppress all hover styling unless the user
   actually has a hover-capable pointer (mouse, trackpad). Provide
   :active fallbacks for tactile feedback on touch. */
@media (hover: none) {
    .ec-watchlist-btn:hover,
    .ec-action-btn--skip:hover,
    .ec-action-btn--watch:hover,
    .ec-action-btn--bull:hover,
    .ec-chart-iv:hover:not(.active),
    .ec-chart-backtest:hover,
    .ec-quick-amt:hover,
    .ec-buy-cancel:hover,
    .ec-buy-submit:hover,
    .ec-reload-btn:hover,
    .ec-create-btn:hover,
    .ec-source-link:hover {
        /* Reset the hover styles — touch devices apply :hover
           post-tap and it sticks until next interaction elsewhere. */
        background: inherit;
        box-shadow: none;
        opacity: inherit;
        border-color: inherit;
        color: inherit;
        text-decoration: none;
    }
}
.ec-action-btn--bull:active     { background: rgba(0,255,136,0.2); }
.ec-action-btn--skip:active     { background: rgba(255,68,68,0.15); }
.ec-action-btn--watch:active    { background: rgba(0,207,255,0.15); }
.ec-quick-amt:active            { background: rgba(0,207,255,0.18); }
.ec-buy-submit:active           { transform: scale(0.98); }
.ec-buy-cancel:active           { color: var(--ec-text); }
.ec-chart-backtest:active       { background: rgba(0,207,255,0.22); }

/* ── Focus rings ───────────────────────────────────────────── */
.ec-action-btn:focus-visible,
.ec-tab:focus-visible,
.ec-chart-iv:focus-visible,
.ec-chart-backtest:focus-visible,
.ec-mode-btn:focus-visible,
.ec-bt-period:focus-visible,
.ec-create-mode:focus-visible,
.ec-create-btn:focus-visible,
.ec-buy-submit:focus-visible,
.ec-buy-cancel:focus-visible,
.ec-buy-input:focus-visible,
.ec-reload-btn:focus-visible,
.ec-quick-amt:focus-visible,
.ec-source-link:focus-visible,
.ec-watchlist-btn:focus-visible {
    outline: 2px solid var(--ec-cyan);
    outline-offset: 2px;
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    /* Disable swipe drag transition and fly-out animation */
    .ec-card {
        transition: none !important;
    }
    /* Disable behind-card scale animation */
    .ec-card--behind {
        transition: none !important;
    }
    /* Disable progress bar transition */
    .ec-progress-fill {
        transition: none !important;
    }
    /* Disable stamp opacity transitions and index flash animations */
    .ec-idx-val {
        transition: none !important;
        animation: none !important;
    }
    .ec-idx-flash-up,
    .ec-idx-flash-dn {
        animation: none !important;
    }
    /* Disable buy-sheet slide-up */
    .ec-buy-box {
        transition: none !important;
    }
    #ec-buy-sheet {
        transition: none !important;
    }
    /* Disable toast slide */
    #ec-toast {
        transition: none !important;
    }
    /* Disable loading spinner */
    .ec-loading span {
        animation: none !important;
        border-top-color: var(--ec-cyan);
    }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ec-card-img { height: 100px; }
    .ec-card-title { font-size: 14px; }
    .ec-actions { grid-template-columns: 1fr 1fr 1.3fr 1fr; gap: 5px; padding: 7px 8px 9px; }
    .ec-action-btn { min-height: 46px; }
    .ec-action-btn svg { width: 16px; height: 16px; }
}

@media (max-width: 360px) {
    .ec-brand { font-size: 13px; }
    /* At 360px: 4 cols × 44px min + 3 gaps × 4px + 12px padding = 200px — fits cleanly */
    .ec-actions { padding: 6px 6px 8px; gap: 4px; grid-template-columns: 1fr 1fr 1.2fr 1fr; }
    .ec-panel { padding: 10px 10px; gap: 8px; }
    .ec-stamp { font-size: 20px; }
    /* Keep chart toggles usable AND tappable — was 40px (below Material
       48dp minimum). Allow the chart stat to ellipsize so toggles + the
       Backtest button never push off-screen (Phase 1 #12). */
    .ec-chart-toggles { gap: 1px; }
    .ec-chart-iv { min-width: 44px; min-height: 44px; padding: 2px 4px; }
    .ec-chart-stat {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 90px;
    }
    /* Basket chips can wrap freely */
    .ec-basket-chips { gap: 4px; }
    /* Stat-grid collapses to single column at narrowest width. */
    .ec-stat-grid { grid-template-columns: 1fr; }
}

@media (max-height: 600px) and (orientation: portrait) {
    .ec-card-img { height: 72px; }
    .ec-card-summary { -webkit-line-clamp: 2; }
    .ec-sparkline { height: 38px; }
    .ec-panel { gap: 7px; padding: 8px 12px; }
}

@media (orientation: landscape) and (max-height: 480px) {
    .ec-card-img { display: none; }
    .ec-card-summary { -webkit-line-clamp: 2; }
    .ec-sparkline { height: 34px; }
    .ec-topbar { padding: 6px 14px; }
    /* Landscape phones — sheets must stay in-bounds (Phase 1 #15). */
    .ec-buy-box { max-height: 80dvh; }
}

/* ── Phase 2 — desktop layout adjustments (≥768px) ─────────── */
@media (min-width: 768px) {
    /* Modals centered on-screen, not anchored to the bottom edge —
       Phase 2 #2. Bottom-sheet pattern is mobile UX; a desktop user
       expects a proper centered dialog. */
    #ec-buy-sheet,
    #ec-backtest-sheet,
    #ec-create-sheet {
        align-items: center;
        justify-content: center;
    }
    .ec-buy-box {
        border-radius: 18px;
        border-bottom: 1px solid var(--ec-border);
        max-height: 90vh;
        max-height: 90dvh;
    }
    /* 4-column stat grid uses the desktop's wider card better
       (Phase 2 #9). Mobile keeps the 2-column layout. */
    .ec-stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    /* Bigger sparkline reveals real chart shape — Phase 2 #8. */
    .ec-sparkline { height: 90px; }
}

/* ≥1024 — large laptop / desktop further-tuned spacing. */
@media (min-width: 1024px) {
    .ec-sparkline { height: 120px; }
    /* Subtle hover on the swipe card so mouse users see it's
       interactive before they grab — Phase 2 #10. The :hover guard
       is only active under @media (hover: hover), so this never
       sticks on touch. */
}
@media (hover: hover) and (min-width: 1024px) {
    .ec-card:hover:not(.ec-card--behind) {
        box-shadow: 0 0 0 1px rgba(0,207,255,0.35),
                    0 8px 28px rgba(0,207,255,0.10);
    }
}

/* ── Multi-pane sidebar (≥1280px) ──────────────────────────── */

#ec-sidebar {
    display: none;
}

@media (min-width: 1280px) {
    /* Restructure the app shell into a two-column grid: main column
       (card stack) + sidebar with positions + up-next. */
    #ec-app {
        max-width: 1080px;
        display: grid;
        grid-template-columns: 440px 1fr;
        column-gap: 24px;
        align-items: stretch;
    }
    #ec-main {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    #ec-sidebar {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 14px 0 8px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Mobile / tablet fallback: #ec-main is the flex column it always
   was; #ec-sidebar is hidden so screen-readers don't read empty
   content. */
@media (max-width: 1279px) {
    #ec-main { display: contents; }
    #ec-sidebar { display: none !important; }
}

.ec-side-section {
    background: rgba(17,24,39,0.4);
    border: 1px solid rgba(0,150,255,0.12);
    border-radius: 12px;
    padding: 12px 14px;
}
.ec-side-title {
    font-family: var(--ec-font);
    font-size: 11px;
    letter-spacing: 1.2px;
    color: var(--ec-cyan);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.ec-side-empty {
    font-size: 12px;
    color: var(--ec-muted);
    padding: 8px 0;
}

/* Positions list inside the sidebar. */
.ec-side-positions { display: flex; flex-direction: column; gap: 6px; }
.ec-side-pos {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    padding: 8px 10px;
    background: rgba(10,14,23,0.6);
    border: 1px solid rgba(0,150,255,0.10);
    border-radius: 8px;
    font-size: 11px;
    color: var(--ec-text);
}
.ec-side-pos-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-side-pos-side {
    color: var(--ec-muted);
    font-variant-numeric: tabular-nums;
}
.ec-side-pos-val {
    grid-column: 1 / 3;
    display: flex;
    justify-content: space-between;
    color: var(--ec-muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.ec-side-pos-pnl { font-weight: 700; }

/* Up-Next column shows compact thumbnail cards for the next 5
   items in the deck so the user can jump ahead by clicking. */
.ec-side-upnext { display: flex; flex-direction: column; gap: 6px; }
.ec-side-up {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    background: rgba(10,14,23,0.6);
    border: 1px solid rgba(0,150,255,0.10);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ec-side-up:hover {
    background: rgba(0,207,255,0.08);
    border-color: rgba(0,207,255,0.25);
}
.ec-side-up-img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    background: #1a2333;
}
.ec-side-up-title {
    font-size: 11px;
    color: var(--ec-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ec-side-up-idx {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Chart hover crosshair (desktop chart) ──────────────────── */
.ec-chart-hover-lbl {
    paint-order: stroke;
    stroke: rgba(10,14,23,0.85);
    stroke-width: 3px;
}

/* ── Share button in chart header + share sheet (Phase 4) ────── */

.ec-chart-share {
    margin-left: 6px;
    padding: 10px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,255,136,0.08);
    border: 1px solid rgba(0,255,136,0.30);
    border-radius: 6px;
    color: var(--ec-green);
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.ec-chart-share:active { background: rgba(0,255,136,0.20); }

#ec-share-sheet {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: rgba(0,0,0,0.65);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
}
#ec-share-sheet.open {
    opacity: 1;
    pointer-events: auto;
}
.ec-share-box { max-width: 520px !important; }
#ec-share-sheet.open .ec-buy-box { transform: translateY(0); }

.ec-share-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 8px;
}
@media (max-width: 420px) {
    .ec-share-grid { grid-template-columns: repeat(3, 1fr); }
}
.ec-share-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 10px 8px;
    background: rgba(17,24,39,0.6);
    border: 1px solid rgba(0,150,255,0.20);
    border-radius: 9px;
    color: var(--ec-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ec-share-tile:hover {
    background: rgba(0,207,255,0.12);
    border-color: rgba(0,207,255,0.35);
    color: var(--ec-cyan);
}

.ec-share-copies {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.ec-share-copy {
    width: 100%;
    padding: 11px 14px;
    min-height: 44px;
    background: rgba(0,207,255,0.08);
    border: 1px solid rgba(0,207,255,0.30);
    color: var(--ec-cyan);
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.ec-share-copy:active { background: rgba(0,207,255,0.22); }

@media (min-width: 768px) {
    .ec-share-box { border-radius: 18px; max-height: 90dvh; }
}

/* Bottom-bar leaderboard link (Phase: leaderboard discoverability). */
.ec-hint-lb {
    margin-left: 16px;
    color: var(--ec-cyan);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}
.ec-hint-lb:hover {
    background: rgba(0,207,255,0.10);
    text-decoration: none;
}