/* trends.css — Trends mode layout and FRED chart components */

/* ── Shell layout ────────────────────────────────────────────────────────── */

.trends-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--tr-left-w, 200px) 10px minmax(0, 1fr);
    grid-template-rows: 1fr;
    overflow: hidden;
}

/* Phone/narrow: stack the indicator rail on top, chart below, page scrolls — keeps
   indicator selection accessible. At <=820px the app body is scrollable
   (responsive.css), so drop the shell's fixed-height/overflow clipping + the
   col-resize divider, and let the rail size to content instead of inner-scrolling. */
@media (max-width: 820px) {
    .trends-shell {
        display: flex;
        flex-direction: column;
        overflow: visible;
        height: auto;
        min-height: 0;
    }
    .tr-divider { display: none; }
    .tr-left-rail {
        width: 100%;
        overflow-y: visible;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .tr-center { min-width: 0; width: 100%; }
}

/* ── Left rail ───────────────────────────────────────────────────────────── */

.tr-left-rail {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--border);
    background: var(--panel);
}

.tr-rail-loading {
    padding: var(--space-md);
    color: var(--muted);
    font-size: var(--text-sm);
}



.tr-rail-item {
    display: flex;
    flex-direction: column;
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    border: none;
    border-left: 2px solid transparent;
    background: none;
    text-align: left;
    width: 100%;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: background 100ms;
    gap: 2px;
}

.tr-rail-item:hover {
    background: var(--link-bg);
    color: var(--link-text);
}

.tr-rail-item.is-active {
    background: color-mix(in srgb, var(--link-bg) 55%, transparent 45%);
    color: var(--link-text);
    border-left-color: var(--border-accent);
}

.tr-rail-item-title {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.3;
}

.tr-rail-item-sub {
    font-size: var(--text-xs);
    color: var(--muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-rail-item.is-active .tr-rail-item-sub,
.tr-rail-item:hover .tr-rail-item-sub {
    color: inherit;
    opacity: 0.7;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */

.tr-divider {
    cursor: col-resize;
    position: relative;
    align-self: stretch;
}

.tr-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 80px;
    border-radius: 2px;
    background: var(--border);
    transition: background-color 120ms ease;
}

.tr-divider:hover::after {
    background: var(--border-accent);
}

/* ── Center panel ────────────────────────────────────────────────────────── */

.tr-center {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.tr-chart-panel[hidden],
.tr-chart-empty[hidden],
.tr-chart-loading[hidden],
.tr-chart-error[hidden] { display: none !important; }

.tr-chart-empty,
.tr-chart-loading,
.tr-chart-error {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: var(--text-ui);
    padding: var(--space-xl);
    text-align: center;
}

.tr-chart-error {
    color: var(--market-down);
}

.tr-chart-loading {
    flex-direction: column;
    gap: var(--space-sm);
}

.tr-chart-loading::before {
    content: '';
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--border-accent);
    border-radius: 50%;
    animation: chart-spin 0.7s linear infinite;
}

/* ── Chart panel (visible when data loaded) ──────────────────────────────── */

.tr-chart-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Header bar */

#tr-chart-header {
    flex-shrink: 0;
}

#tr-chart-header:hover {
    background: var(--panel-header);
    cursor: default;
}

.tr-hdr-title {
    font-size: var(--text-ui);
    font-weight: 700;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}

.tr-hdr-stat {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

.tr-hdr-stat .tr-hdr-value {
    color: var(--text);
    font-weight: 600;
}

.tr-hdr-stat .tr-hdr-up   { color: var(--market-up); }
.tr-hdr-stat .tr-hdr-down { color: var(--market-down); }

/* Period selector */

.tr-period-bar {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.tr-period-btn {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: background 100ms, color 100ms, border-color 100ms;
    line-height: 1;
    box-shadow: 2px 5px 8px rgba(0,0,0,0.65), 1px 2px 3px rgba(0,0,0,0.5);
}

.tr-period-btn:hover {
    background: var(--link-bg);
    color: var(--link-text);
    border-color: transparent;
}

.tr-period-btn.is-active {
    background: var(--link-bg);
    color: var(--link-text);
    border-color: transparent;
}

/* Chart area */

.tr-chart-wrap {
    flex-shrink: 0;
    height: 420px;
    position: relative;
    overflow: hidden;
}

.tr-chart-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* SVG chart elements */

.tr-grid-line {
    stroke: var(--border);
    stroke-width: 1;
    fill: none;
}

.tr-zero-line {
    stroke: var(--muted);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    fill: none;
}

.tr-axis-label {
    font-size: var(--text-mini);
    fill: var(--muted);
    dominant-baseline: middle;
    text-anchor: end;
    font-family: inherit;
}

.tr-x-label {
    text-anchor: middle;
    dominant-baseline: auto;
}

.tr-area polygon {
    fill: var(--tr-line-color, var(--chart-line));
    opacity: 0.12;
}

.tr-line {
    fill: none;
    stroke: var(--tr-line-color, var(--chart-line));
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.tr-crosshair {
    stroke: var(--muted);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    fill: none;
    pointer-events: none;
}

.tr-hover-dot {
    fill: var(--tr-line-color, var(--chart-line));
    stroke: var(--panel);
    stroke-width: 2;
}

.tr-hover-overlay {
    fill: transparent;
    cursor: crosshair;
}

/* Floating tooltip */

.tr-tooltip {
    position: absolute;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-xs) var(--space-sm);
    pointer-events: none;
    font-size: var(--text-sm);
    white-space: nowrap;
    z-index: 10;
}

.tr-tooltip-date  { color: var(--muted); margin-bottom: 2px; }
.tr-tooltip-value { font-weight: 700; color: var(--text); }

/* Stat strip */

.tr-stat-strip {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-xs) var(--space-md);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.tr-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tr-stat-label {
    font-size: var(--text-xs);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.tr-stat-value {
    font-size: var(--text-ui);
    font-weight: 600;
    color: var(--text);
}

/* API key setup message */

.tr-setup-msg {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    text-align: center;
    color: var(--muted);
}

.tr-setup-msg-title {
    font-size: var(--text-ui);
    font-weight: 600;
    color: var(--text);
}

.tr-setup-msg-body {
    font-size: var(--text-sm);
    max-width: 420px;
    line-height: 1.5;
}

.tr-setup-msg code {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: var(--text-sm);
}