/* css/levels-v3.css
 * Purpose: Styles for Levels v3 (Expected Move Levels redesign, member-home sandbox v3)
 * Created: 7/12/2026
 *
 * Palette (from member-home-v2, deliberate deviation from prompt's dark-slate palette):
 *   amber accent   #fbbf24   card blue   #1e3a5f   surface   #000000
 *   text           #ffffff   muted       #d1d5db   dim       #9ca3af
 *   hairline       #374151   success     #00AB5E   danger    #ff0000
 *   warning gold   #FFD700   neutral     #a0a0a0   info blue #60a5fa
 *
 * All class names namespaced with `lv3-` to avoid collision with v1/v2.
 */

/* ==================================================================
   Layout root
   ================================================================== */
.lv3-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 12px;
    color: #ffffff;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}
.lv3-page *,
.lv3-page *::before,
.lv3-page *::after {
    box-sizing: border-box;
}

/* Card chassis: matches the legacy Stats card look — Tailwind gray-900 at 80%
 * opacity with a solid amber hairline. No backdrop blur (Stats card doesn't
 * use one, and adding one shifts the perceived color). */
.lv3-card {
    background: #111827;                       /* fallback */
    background: rgba(17, 24, 39, 0.8);
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

/* Mono display for all numeric values */
.lv3-mono {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* Utility color classes used inside chart tooltip */
.lv3-txt-success { color: #22c55e; }
.lv3-txt-danger  { color: #f87171; }
.lv3-txt-muted   { color: #d1d5db; }

/* Empty/error states */
.lv3-empty {
    padding: 24px 12px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
}
.lv3-empty-inline {
    padding: 12px;
}
.lv3-error {
    text-align: center;
}
.lv3-error-title {
    font-weight: 600;
    color: #f87171;
    margin-bottom: 6px;
}
.lv3-error-msg {
    color: #d1d5db;
    font-size: 13px;
    margin-bottom: 12px;
}
.lv3-retry-btn {
    padding: 10px 18px;
    min-height: 44px;
    background: #fbbf24;
    color: #000;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.lv3-retry-btn:hover { background: #fcd34d; }

/* ==================================================================
   Skeleton
   ================================================================== */
.lv3-skeleton-card {
    background: #1e3a5f;
    border-color: rgba(251, 191, 36, 0.4);
}
.lv3-skeleton-line {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    height: 12px;
    margin: 8px 0;
    animation: lv3-shimmer 1.4s ease-in-out infinite;
}
.lv3-skeleton-header { height: 22px; width: 60%; }
.lv3-skeleton-row    { height: 18px; }
@keyframes lv3-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lv3-skeleton-line { animation: none; }
}

/* ==================================================================
   LevelsLadder
   ================================================================== */
.lv3-ladder-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(55, 65, 81, 0.6);
}

/* Mode toggle */
.lv3-mode-toggle {
    display: inline-flex;
    align-self: flex-start;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.lv3-mode-btn {
    min-height: 44px;
    padding: 8px 18px;
    background: transparent;
    color: #d1d5db;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
.lv3-mode-btn:hover { color: #ffffff; }
.lv3-mode-btn-active {
    background: #fbbf24;
    color: #000000;
}
.lv3-mode-btn-active:hover { color: #000000; }

/* EM headline — hero treatment on a single row.
 * The EM value is the single most important number on this card, so it's
 * rendered oversize and bold. The "EM" eyebrow (via ::before) and the
 * expiration sit inline on either side of the hero number so the whole
 * header reads as one continuous row next to the mode toggle. */
.lv3-em-headline {
    color: #d1d5db;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding: 0;
}
.lv3-em-headline::before {
    content: 'Expected Move';
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #9ca3af;
    line-height: 1;
}
.lv3-em-value {
    color: #ffffff;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.lv3-em-exp {
    color: #9ca3af;
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* Ladder row grid: σ | SPX | ES | SPY | copy */
.lv3-row {
    display: grid;
    grid-template-columns: 46px 1fr 1fr 1fr 28px;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(55, 65, 81, 0.35);
    position: relative; /* anchor for absolutely-positioned .lv3-inplay-badge */
}
.lv3-row:last-of-type { border-bottom: none; }

.lv3-row-header {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 4px 6px;
    border-bottom: 1px solid rgba(55, 65, 81, 0.6);
}
.lv3-cell-header,
.lv3-sd-label-header {
    text-align: center;
    color: #9ca3af;
}

/* σ label */
.lv3-sd-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #d1d5db;
    padding-right: 4px;
}
.lv3-sd-text {
    white-space: nowrap;
}

/* Row tone.
 * Design intent: the amber Anchor row is the visual anchor (pun intended)
 * of the ladder. ±1σ rows should be present but quiet — they used to have
 * a colored background + bold SPX, which competed with the anchor. Now
 * they carry only a tinted σ label; the SPX value stays default weight.
 * ±1.5σ keeps the same colored σ label. ±2/±3σ remain muted.
 */
.lv3-row-core-pos .lv3-sd-text,
.lv3-row-soft-pos .lv3-sd-text { color: #22c55e; }
.lv3-row-core-neg .lv3-sd-text,
.lv3-row-soft-neg .lv3-sd-text { color: #f87171; }

.lv3-row-extreme {
    opacity: 0.72;
}
.lv3-row-extreme .lv3-sd-text,
.lv3-row-extreme .lv3-cell {
    color: #9ca3af;
    font-weight: 400;
}

/* Cells */
.lv3-cell {
    display: block;
    background: transparent;
    border: 1px solid transparent;
    color: #ffffff;
    text-align: right;
    padding: 6px 8px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
}
.lv3-cell:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(251, 191, 36, 0.3);
}
.lv3-cell:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 1px;
}
.lv3-cell-copied {
    background: rgba(0, 171, 94, 0.18) !important;
    border-color: rgba(0, 171, 94, 0.6) !important;
}

/* Locked cell — used by <LevelsLadder marketing /> on the public homepage
 * widget for ES/SPY columns. Renders a blurred placeholder bar + centered
 * lock glyph; the real numeric value never enters the DOM (spread is
 * stripped server-side in handle_get_weekly_data for logged-out visitors). */
.lv3-cell-locked {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: not-allowed;
    overflow: hidden;
}
.lv3-cell-locked-bar {
    position: absolute;
    inset: 25% 15%;
    background: linear-gradient(90deg,
        rgba(156, 163, 175, 0.25) 0%,
        rgba(156, 163, 175, 0.55) 50%,
        rgba(156, 163, 175, 0.25) 100%);
    border-radius: 3px;
    filter: blur(3px);
    pointer-events: none;
}
.lv3-cell-locked-glyph {
    position: relative;
    z-index: 1;
    color: #d1d5db;
    font-size: 12px;
    line-height: 1;
    opacity: 0.85;
}

/* Copy button (dedicated) */
.lv3-copy-btn {
    background: transparent;
    border: none;
    color: #9ca3af;
    padding: 12px 4px;    /* larger hit area than the visible glyph */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    min-height: 44px;
    min-width: 28px;
}
.lv3-copy-btn:hover { color: #fbbf24; background: rgba(255,255,255,0.04); }
.lv3-copy-btn:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 1px;
}
.lv3-copy-spacer {
    cursor: default;
    pointer-events: none;
}

/* "In play" badge — pinned to the right edge of the row, vertically centered,
 * offset just left of the 28px copy-icon column so it never overlaps values
 * or overflows the card (was previously inline in the 46px σ column, which
 * pushed the SD label out past the card's left edge on ±1.5σ rows). */
.lv3-inplay-badge {
    position: absolute;
    left: 52px;              /* just right of the 46px σ column + 6px gap */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;    /* purely decorative; row's copy button stays clickable */
    background: rgba(255, 215, 0, 0.18);
    color: #FFD700;
    font-size: 9px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 3px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    line-height: 1.2;
    white-space: nowrap;
}

/* Anchor row */
.lv3-anchor {
    background: rgba(0, 0, 0, 0.30);
    border-top: 2px solid #fbbf24;
    border-bottom: 2px solid #fbbf24;
    padding: 12px 8px;
    margin: 4px 0;
    border-radius: 4px;
}
.lv3-anchor-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.lv3-anchor-label {
    color: #d1d5db;
    font-size: 13px;
}
.lv3-anchor-value {
    background: transparent;
    border: 1px solid transparent;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
    font-variant-numeric: tabular-nums;
    min-height: 44px;
}
.lv3-anchor-value:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(251, 191, 36, 0.4);
}
.lv3-anchor-copy-icon {
    color: #9ca3af;
    display: inline-flex;
}

/* Position bar */
.lv3-posbar-wrap {
    margin-top: 12px;
    padding: 0 4px;
}
.lv3-posbar-track {
    position: relative;
    height: 4px;
    background: rgba(96, 165, 250, 0.20);
    border-radius: 2px;
    margin: 8px 0 6px;
}
.lv3-posbar-notch {
    position: absolute;
    left: 50%;
    top: -3px;
    width: 2px;
    height: 10px;
    background: #9ca3af;
    transform: translateX(-1px);
    border-radius: 1px;
    opacity: 0.7;
}
.lv3-posbar-marker {
    position: absolute;
    top: -4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #1e3a5f;
    box-shadow: 0 0 0 1px #fbbf24;
    transform: translateX(-6px);
    transition: left 250ms ease;
}
@media (prefers-reduced-motion: reduce) {
    .lv3-posbar-marker { transition: none; }
}
.lv3-posbar-marker-outside {
    background: #ff0000;
    box-shadow: 0 0 0 1px #ff0000;
}
.lv3-posbar-labels {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
    color: #d1d5db;
    min-height: 14px;
}
.lv3-posbar-left  { color: #f87171; }
.lv3-posbar-right { color: #22c55e; }
/* `.lv3-posbar-center` tracks the marker dot: the inline `left: <posPct>%`
 * is set from JSX, and translateX(-50%) centers the caption under its dot.
 * Left/right EM labels remain pinned to the edges via flex space-between. */
.lv3-posbar-center {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #ffffff;
    font-weight: 600;
    text-align: center;
}
/* Anchor number repeated under the center notch (mid-point of the posbar).
 * Right-side headline still shows the full anchor value — this row gives
 * viewers a spatial anchor directly beneath the notch. */
.lv3-posbar-anchor-row {
    position: relative;
    text-align: center;
    margin-top: 4px;
}
.lv3-posbar-anchor-mid {
    color: #fbbf24;
    font-weight: 600;
    font-size: 12px;
}
.lv3-outside-tag {
    display: inline-block;
    margin-left: 6px;
    background: rgba(255, 0, 0, 0.18);
    border: 1px solid rgba(255, 0, 0, 0.5);
    color: #ff0000;
    font-size: 9px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 3px;
}

/* Extremes toggle */
.lv3-extremes-toggle {
    margin-top: 10px;
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    background: transparent;
    color: #d1d5db;
    border: 1px dashed rgba(251, 191, 36, 0.4);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    flex-wrap: wrap;
}
.lv3-extremes-toggle:hover {
    background: rgba(251, 191, 36, 0.06);
    color: #ffffff;
}
.lv3-extremes-toggle:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 1px;
}
.lv3-inplay-hint {
    color: #FFD700;
    font-size: 11px;
    font-style: italic;
}

/* Stat chips */
.lv3-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(55, 65, 81, 0.6);
}
.lv3-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 999px;
    border: 1px solid #374151;
    background: rgba(0, 0, 0, 0.35);
    color: #d1d5db;
    line-height: 1.3;
}
.lv3-chip-flat {
    /* default; no override */
}
.lv3-chip-warning {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.5);
    color: #FFD700;
    font-weight: 600;
}
.lv3-chip-danger {
    background: rgba(255, 0, 0, 0.14);
    border-color: rgba(255, 0, 0, 0.5);
    color: #ff8080;
    font-weight: 600;
}

/* ==================================================================
   VolatilityPanel
   ================================================================== */
.lv3-vol-card {
    padding: 0; /* header spans full width */
    overflow: hidden;
}

.lv3-vol-header {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    background: transparent;
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    flex-wrap: wrap;
}
.lv3-vol-header:hover {
    background: rgba(255, 255, 255, 0.03);
}
.lv3-vol-header:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: -2px;
}

.lv3-vol-header-left,
.lv3-vol-header-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lv3-vol-header-label {
    font-weight: 600;
    font-size: 15px;
}
.lv3-vol-trend {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #374151;
    background: rgba(0, 0, 0, 0.35);
    color: #d1d5db;
}
.lv3-vol-trend-success {
    border-color: rgba(34, 197, 94, 0.5);
    color: #22c55e;
}
.lv3-vol-trend-danger {
    border-color: rgba(255, 0, 0, 0.5);
    color: #f87171;
}
.lv3-vol-trend-flat { /* default */ }

.lv3-vol-current {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}
.lv3-vol-delta {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #374151;
    background: rgba(0, 0, 0, 0.35);
    color: #d1d5db;
    font-weight: 600;
}
.lv3-vol-delta-success {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.5);
    color: #22c55e;
}
.lv3-vol-delta-danger {
    background: rgba(255, 0, 0, 0.14);
    border-color: rgba(255, 0, 0, 0.5);
    color: #f87171;
}

/* Body */
.lv3-vol-body {
    padding: 14px;
    border-top: 1px solid rgba(55, 65, 81, 0.6);
    animation: lv3-expand 200ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .lv3-vol-body { animation: none; }
}
@keyframes lv3-expand {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Baseline cards grid */
.lv3-baseline-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.lv3-baseline-card {
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.lv3-baseline-label {
    color: #9ca3af;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.lv3-baseline-value {
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
}
.lv3-baseline-sub {
    margin-top: 4px;
    font-size: 11px;
    color: #d1d5db;
}
.lv3-baseline-sub-success { color: #22c55e; }
.lv3-baseline-sub-danger  { color: #f87171; }
.lv3-baseline-sub-flat    { color: #9ca3af; }

/* Chart wrapper */
.lv3-chart-wrap {
    width: 100%;
    height: 320px;
    background: transparent;
}
.lv3-chart-tooltip {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #374151;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
}
.lv3-chart-tooltip-title {
    color: #ffffff;
    font-weight: 600;
    margin: 0 0 4px 0;
}
.lv3-chart-tooltip-line {
    margin: 2px 0;
}

/* ==================================================================
   Mobile-first tuning at 380px
   ================================================================== */
@media (max-width: 400px) {
    .lv3-page {
        padding: 8px;
    }
    .lv3-card {
        padding: 10px;
    }
    /* Tighter columns so the 5-col grid still fits without scroll */
    .lv3-row {
        grid-template-columns: 40px 1fr 1fr 1fr 24px;
        gap: 4px;
        padding: 5px 2px;
    }
    .lv3-cell {
        padding: 6px 4px;
        font-size: 13px;
    }
    .lv3-sd-label { font-size: 12px; }
    .lv3-anchor-value { font-size: 16px; }
    .lv3-em-value { font-size: 30px; }
    .lv3-vol-header-label { font-size: 14px; }
    .lv3-vol-current { font-size: 16px; }
    .lv3-baseline-value { font-size: 18px; }
    .lv3-chart-wrap { height: 260px; }
}