/*
market-panel.css
Role: market panel styles.
Responsibility: compact market section cards and ticker-row sparklines.
Note: Modify only from the latest local file.
*/
#market-panel-shell.market-panel-shell {
    margin-bottom: var(--space-sm);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
}

#market-panel-shell .market-panel-loading-card,
#market-panel-shell .market-panel-empty {
    background: var(--panel);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 16px 18px;
    grid-column: 1 / -1;
}

#market-panel-shell .market-panel-loading-title {
    font-size: var(--text-body);
    font-weight: 700;
    margin-bottom: 4px;
}

#market-panel-shell .market-panel-loading-copy {
    color: var(--muted);
    font-size: var(--text-ui);
}

#market-panel-shell .market-panel-section {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), var(--panel);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: var(--space-sm);
    min-width: 0;
}

#market-panel-shell .market-panel-section-markets {
    border-top: 4px solid var(--chart-line);
}

#market-panel-shell .market-panel-section-commodities {
    border-top: 4px solid #b8860b;
}

#market-panel-shell .market-panel-section-portfolio {
    border-top: 4px solid #6a5acd;
}

#market-panel-shell .market-panel-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

#market-panel-shell .market-panel-section-title {
    margin: 0;
    font-size: var(--text-ui);
    font-weight: 700;
}

#market-panel-shell .market-panel-ticker-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#market-panel-shell .market-panel-ticker-row {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(70px, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
    padding: 8px 6px;
    border-radius: var(--radius);
    background: var(--panel-soft);
}

#market-panel-shell .market-panel-ticker-identity {
    min-width: 0;
}

#market-panel-shell .market-panel-symbol {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
}

#market-panel-shell .market-panel-label {
    font-size: var(--text-meta);
    font-weight: 700;
    line-height: var(--leading-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#market-panel-shell .market-panel-value {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--muted);
    margin-top: 2px;
}

#market-panel-shell .market-panel-ticker-chart-wrap {
    min-width: 0;
}

#market-panel-shell .market-panel-chart-canvas {
    position: relative;
    width: 100%;
    height: 34px;
}

#market-panel-shell .market-panel-sparkline {
    width: 100%;
    height: 100%;
}

#market-panel-shell .market-panel-sparkline polyline {
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#market-panel-shell .market-panel-section-markets .market-panel-sparkline polyline {
    stroke: var(--chart-line);
}

#market-panel-shell .market-panel-section-commodities .market-panel-sparkline polyline {
    stroke: #b8860b;
}

#market-panel-shell .market-panel-section-portfolio .market-panel-sparkline polyline {
    stroke: #6a5acd;
}

#market-panel-shell .market-panel-sparkline-empty {
    width: 100%;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: var(--text-mini);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

#market-panel-shell .market-panel-ticker-performance {
    text-align: right;
    min-width: 56px;
}

#market-panel-shell .market-panel-change {
    font-size: var(--text-meta);
    font-weight: 700;
    white-space: nowrap;
}

#market-panel-shell .market-trend-up {
    color: var(--market-up);
}

#market-panel-shell .market-trend-down {
    color: var(--market-down);
}

#market-panel-shell .market-trend-flat {
    color: var(--muted);
}

@media (max-width: 1100px) {
    #market-panel-shell.market-panel-shell {
        grid-template-columns: 1fr;
    }
}

/* ── Signal market strip ──────────────────────────────────── */

.signal-market-strip {
    display: flex;
    gap: var(--space-sm);
    width: 100%;
    flex-shrink: 0;
    background: transparent;
    overflow-x: auto;
    margin-bottom: var(--space-sm);
    padding: 0 var(--space-sm);
    box-sizing: border-box;
}

.signal-market-loading,
.signal-market-empty {
    padding: var(--space-sm) 0;
    font-size: var(--text-meta);
    color: var(--muted);
}

.signal-market-section {
    flex: 1 1 0;
    min-width: 160px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.signal-market-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: rgba(255, 255, 255, 0.92);
}

.signal-market-timeframe {
    margin-left: 5px;
    font-size: var(--text-mini);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.7;
}

.signal-market-status-inline {
    font-size: var(--text-mini);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    margin-left: 8px;
}

.signal-market-title-link {
    color: inherit;
    text-decoration: none;
}
.signal-market-title-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.signal-market-section-markets .signal-market-section-title    { background: var(--chart-line); }
.signal-market-section-commodities .signal-market-section-title { background: #b8860b; }
.signal-market-section-portfolio .signal-market-section-title  { background: #059669; }
.signal-market-section-mostactive .signal-market-section-title { background: #0891b2; }
.signal-market-section-topgainers .signal-market-section-title { background: #6a5acd; }
.signal-market-section-bonds .signal-market-section-title      { background: #c0572a; }

.signal-market-section-subtitle {
    font-size: var(--text-mini);
    color: rgba(255,255,255,0.5);
    padding: 3px var(--space-sm) 0;
}

.signal-market-link {
    color: rgba(255,255,255,0.7);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.signal-market-link:hover { color: #fff; }

.signal-market-link-hd {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.8;
    white-space: nowrap;
}

.signal-market-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 0 8px;
    padding: 8px var(--space-sm);
}

.signal-market-item {
    display: contents;
}

.signal-market-item[data-mkt-symbol] {
    cursor: pointer;
}

.signal-market-symbol {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}

.signal-market-value {
    font-size: var(--text-meta);
    color: var(--muted);
    text-align: right;
}

.signal-market-change {
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

.signal-market-change.market-trend-up   { color: var(--market-up); }
.signal-market-change.market-trend-down { color: var(--market-down); }
.signal-market-change.market-trend-flat { color: var(--muted); }

.signal-market-chart {
    width: 100%;
    height: 28px;
}

.signal-market-chart svg {
    width: 100%;
    height: 100%;
}

.signal-market-section-markets .signal-market-chart svg     { color: var(--chart-line); }
.signal-market-section-commodities .signal-market-chart svg { color: #b8860b; }
.signal-market-section-portfolio .signal-market-chart svg   { color: #059669; }
.signal-market-section-mostactive .signal-market-chart svg  { color: #0891b2; }
.signal-market-section-topgainers .signal-market-chart svg  { color: #6a5acd; }
.signal-market-section-bonds .signal-market-chart svg       { color: #c0572a; }

/* Trend color overrides — take priority via source order (same specificity as section rules above) */
.signal-market-chart.market-trend-up   svg { color: var(--market-up); }
.signal-market-chart.market-trend-down svg { color: var(--market-down); }
.signal-market-chart.market-trend-flat svg { color: var(--muted); }

.signal-market-chart svg polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.signal-market-chart svg .sm-tick {
    stroke: currentColor;
    stroke-width: 0.8;
    opacity: 0.5;
}

.signal-market-chart svg .sm-future {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    opacity: 0.3;
}

.signal-market-chart-empty {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

@media (max-width: 960px) {
    .signal-market-section-topgainers,
    .signal-market-section-commodities {
        display: none;
    }
}

/* ── Signal ticker tape ───────────────────────────────────────── */

.signal-ticker-tape {
    position: relative;
    width: 100%;
    height: var(--ticker-h);
    overflow: hidden;
    background: var(--bg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: calc(-1 * var(--space-sm));
}

/* Phone: PIN the ticker tape just below the sticky header so the iOS keyboard can't shove it up
   and leave it stuck up there after the keyboard closes. Sticky uses the SAME mechanism as the
   header (which stays put), and `top: --topbar-h` is exactly its natural resting position (header
   border-box height + the header margin-bottom cancels the ticker's negative margin-top), so it
   doesn't move at rest — it just refuses to scroll away. z-index below the header (1100) and the
   status strip (1099). The opaque background already covers anything scrolling beneath it. */
html[data-phone-mode] .signal-ticker-tape {
    position: sticky;
    top: var(--topbar-h, 56px);
    z-index: 1090;
}

.stt-loading,
.stt-empty {
    padding: 0 var(--space-sm);
    font-size: var(--text-xs);
    color: var(--muted);
}

/* Status badge — closed / pre-market — pinned right */
.stt-status {
    position: absolute;
    right: var(--space-sm);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-mini);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--muted-2);
    background: var(--panel-soft);
    padding: 2px var(--space-xs);
    pointer-events: none;
    z-index: 2;
}
/* Phone: drop the closed/pre-market badge to give the tape all the width. */
html[data-phone-mode] .stt-status { display: none; }

/* Scrolling track */
.stt-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, black 48px, black calc(100% - 48px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 48px, black calc(100% - 48px), transparent 100%);
}

.stt-inner {
    display: flex;
    align-items: center;
    gap: 2px;
    animation: stt-scroll 60s linear infinite;
    will-change: transform;
}

.stt-track.stt-paused .stt-inner {
    animation-play-state: paused;
}


@keyframes stt-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Individual chip */
.stt-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 var(--space-sm);
    height: var(--ticker-h);
    border: none;
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.1s;
}

.stt-item:hover {
    background: var(--link-bg);
}

.stt-item:hover .stt-sym,
.stt-item:hover .stt-val,
.stt-item:hover .stt-chg {
    color: var(--link-text);
}

/* Subtle separator between tone groups */
.stt-tone-macro  { border-left: 1px solid var(--border); }
.stt-tone-active { border-left: 1px solid var(--border); }

.stt-sym {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text);
}

.stt-val {
    font-size: var(--text-xs);
    color: var(--muted);
}

.stt-chg {
    font-size: var(--text-xs);
    font-weight: 700;
}

.stt-up   { color: var(--market-up);   }
.stt-down { color: var(--market-down); }
.stt-flat { color: var(--muted);       }

/* Inline sparkline */
.stt-spark {
    width: 60px;
    height: 26px;
    flex-shrink: 0;
    color: var(--muted-2);
}

.stt-trend-up   .stt-spark { color: var(--market-up);   }
.stt-trend-down .stt-spark { color: var(--market-down); }
.stt-trend-flat .stt-spark { color: var(--muted-2);     }

.stt-spark polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stt-spark .sm-tick {
    stroke: currentColor;
    stroke-width: 1;
    opacity: 0.5;
}

.stt-spark .sm-future {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    opacity: 0.8;
}