/* ============================================================
   TrendNalysis — Terminal shell (REDESIGN PILOT)
   New left-sidebar app shell for the Chart workspace, built from
   the "Trendnalysis platform redesign" Claude Design mockup +
   the TrendNalysis design-system tokens.
   Self-contained: tokens + self-hosted fonts + shell + cards +
   styling for the sidebar content that chart.js injects at runtime.
   Parallel page — does NOT affect the live top-nav pages.
   ============================================================ */

/* ---- Self-hosted fonts (already on the server in /fonts) ---- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:local('Inter'),url('/fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:local('Inter Medium'),url('/fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:local('Inter SemiBold'),url('/fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:local('Inter Bold'),url('/fonts/inter-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:local('Inter ExtraBold'),url('/fonts/inter-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:local('JetBrains Mono'),url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:local('JetBrains Mono Medium'),url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:local('JetBrains Mono SemiBold'),url('/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');}

/* ---- Design tokens (mirror of the redesign _ds tokens) ---- */
:root{
  --ink-900:#0B1220; --ink-850:#0D1424; --ink-800:#0F1729; --ink-750:#141C30;
  --ink-700:#1B2438; --ink-650:#202B43; --ink-600:#25304A; --ink-550:#334155;
  --ink-400:#64748B; --ink-300:#94A3B8; --ink-200:#CBD5E1; --ink-100:#E2E8F0;
  --brand-300:#93BBFD; --brand-400:#5E97F8; --brand-500:#3B82F6; --brand-600:#2563EB; --brand-700:#1D4FD8;
  --bull:#22C55E; --bear:#EF4444; --warn:#F59E0B; --neutral:#64748B;
  --text-primary:#F8FAFC; --text-secondary:#94A3B8; --text-tertiary:#64748B;
  --border-subtle:#1E293B; --border-default:#25304A;
  --brand-tint:rgba(37,99,235,.14);
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --radius-sm:6px; --radius-md:8px; --radius-lg:10px;
  --rail-w:256px; --topbar-h:60px; --ticker-h:34px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body.tn-terminal{
  font-family:var(--font-sans);
  background:var(--ink-900);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
.tn-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums}
.tn-eye{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary)}
a{color:var(--brand-300);text-decoration:none}

/* Scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--ink-600);border-radius:6px;border:2px solid var(--ink-900)}
::-webkit-scrollbar-track{background:transparent}
@keyframes tn-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   APP SHELL
   ============================================================ */
.tn-shell{display:grid;grid-template-columns:var(--rail-w) 1fr;height:100vh;width:100%;overflow:hidden}

/* ---- LEFT RAIL ---- */
.tn-rail{display:flex;flex-direction:column;background:var(--ink-850);border-right:1px solid var(--border-subtle);min-height:0}
.tn-rail__brand{display:flex;align-items:center;gap:10px;padding:18px 18px 16px}
/* Previous TrendNalysis wordmark: 135deg blue→cyan text gradient (mirrors .navbar-brand) */
.tn-wordmark{font-size:20px;font-weight:700;letter-spacing:-.01em;background:linear-gradient(135deg,#60A5FA,#06B6D4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.tn-wl-add{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-default);border-radius:6px;color:var(--text-secondary);font-size:15px;line-height:1;cursor:pointer}
.tn-wl-add:hover{color:var(--ink-100);border-color:var(--ink-550)}
.tn-watchlist__empty{font-size:11.5px;color:var(--text-tertiary);padding:8px 10px;line-height:1.5}
.tn-nav{display:flex;flex-direction:column;gap:3px;padding:6px 12px 4px}
.tn-nav a{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--text-secondary);transition:background .15s,color .15s}
.tn-nav a svg{flex:none}
.tn-nav a:hover{background:var(--ink-750);color:var(--ink-100)}
.tn-nav a.active{background:var(--brand-tint);color:var(--brand-300)}
.tn-rail__wlhdr{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 8px}
.tn-watchlist{flex:1;overflow-y:auto;padding:0 12px 12px;display:flex;flex-direction:column;gap:2px;min-height:0}
.tn-wl{display:grid;grid-template-columns:1fr 36px 80px;align-items:center;column-gap:7px;width:100%;padding:9px 10px;border:none;border-radius:8px;cursor:pointer;text-align:left;background:transparent;font-family:inherit;transition:background .15s}
.tn-wl:hover{background:var(--ink-750)}
.tn-wl__l{display:flex;flex-direction:column;gap:2px;min-width:0}
.tn-wl__sym{font-size:12.5px;font-weight:600;color:var(--text-primary)}
.tn-wl__name{font-size:10.5px;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px}
.tn-wl__r{display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.tn-wl__px{font-size:12px;color:var(--ink-200)}
.tn-wl__pct{font-size:11px;font-weight:600}
.tn-rail__user{border-top:1px solid var(--border-subtle);padding:12px;display:flex;align-items:center;gap:10px}
.tn-rail__avatar{width:30px;height:30px;border-radius:8px;background:var(--ink-700);border:1px solid var(--border-default);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--brand-300)}
.tn-rail__uinfo{display:flex;flex-direction:column;min-width:0;flex:1}
.tn-rail__uname{font-size:12.5px;font-weight:600;color:var(--ink-100)}
.tn-rail__uplan{font-size:10.5px;color:var(--text-tertiary)}

/* ---- MAIN COLUMN ---- */
.tn-main{display:flex;flex-direction:column;min-width:0;height:100vh}
.tn-topbar{display:flex;align-items:center;gap:14px;height:var(--topbar-h);padding:0 24px;background:var(--ink-850);border-bottom:1px solid var(--border-subtle);flex:none}
.tn-search{position:relative;flex:1;max-width:440px}
.tn-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-tertiary)}
.tn-search .search-input{width:100%;height:38px;padding:0 12px 0 38px;background:var(--ink-900);border:1px solid var(--border-default);border-radius:9px;color:var(--text-primary);font-family:inherit;font-size:13.5px;outline:none}
.tn-search .search-input:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.tn-topbar .search-btn{height:38px;padding:0 18px;background:var(--brand-600);border:none;border-radius:9px;color:#fff;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.tn-topbar .search-btn:hover{background:var(--brand-700)}
.tn-topbar__spacer{flex:1}
.tn-iconbtn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-default);border-radius:9px;color:var(--text-secondary);cursor:pointer}
.tn-iconbtn:hover{color:var(--ink-100);border-color:var(--ink-550)}
/* Mobile nav: topbar hamburger (hidden on desktop) + rail-drawer backdrop */
.tn-rail-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:38px;height:38px;flex:none;background:transparent;border:1px solid var(--border-default);border-radius:9px;cursor:pointer}
.tn-rail-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:#94A3B8}
.tn-rail-toggle:hover span{background:#E2E8F0}
.tn-rail-toggle:hover{border-color:var(--ink-550)}
.tn-rail-backdrop{display:none}
.tn-iconbtn svg{flex:none} /* keep icon from shrinking to 0 width as a flex child */

/* ---- TICKER ---- */
/* override chart-page.css's old sticky/paused ticker so the new in-flow ticker scrolls */
#tickerBar{display:flex;align-items:center;height:var(--ticker-h);background:var(--ink-900);border-bottom:1px solid var(--border-subtle);overflow:hidden;flex:none;position:relative;top:auto;z-index:auto}
#tickerScroll{display:flex;align-items:center;white-space:nowrap;gap:0;animation:tn-ticker 46s linear infinite;animation-play-state:running}
.tn-tick{display:inline-flex;align-items:center;gap:7px;padding:0 16px;border-right:1px solid var(--border-subtle);font-size:11.5px;cursor:pointer;text-decoration:none;color:inherit}
.tn-tick:hover{background:var(--ink-750)}
#tickerScroll:hover{animation-play-state:paused} /* pause on hover so a passing symbol can be clicked */
.tn-tick__sym{font-weight:600;color:var(--text-secondary)}
.tn-tick__px{color:var(--ink-200)}
.tn-tick__pct{font-weight:600}

/* ---- SCROLL AREA ---- */
.tn-scroll{flex:1;overflow-y:auto;min-height:0}
.tn-scroll__inner{padding:22px 24px 40px;max-width:none;margin:0 auto;display:flex;flex-direction:column;gap:16px} /* full-width terminal: chart + tables fill the window on maximize (was capped 1640px → empty space on wide screens); gap = vertical spacing between chart / oscillators / report / panels */

/* Card primitive */
.tn-card{background:var(--ink-700);border:1px solid var(--border-default);border-radius:var(--radius-lg)}

/* ============================================================
   CHART WORKSPACE
   ============================================================ */
/* price-info (chart.js injects price-header + price-stats here) */
.price-info .price-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.price-info .price-header h3{font-family:var(--font-mono);font-size:27px;font-weight:700;letter-spacing:-.01em;margin:0;color:var(--text-primary)}
.price-info .price-value{font-family:var(--font-mono);font-size:30px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.price-info .price-change{font-family:var(--font-mono);font-size:14px;font-weight:600;margin-top:2px}
.price-change.bullish,.bullish{color:var(--bull)}
.price-change.bearish,.bearish{color:var(--bear)}
.price-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.price-stats .stat{background:var(--ink-700);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:10px 13px;display:flex;flex-direction:column;gap:4px}
.price-stats .stat label{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}
.price-stats .stat value{font-family:var(--font-mono);font-size:14.5px;font-weight:600;color:var(--ink-100)}

/* main two-column grid */
.tn-grid{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start;margin-top:16px}
.tn-left{display:flex;flex-direction:column;gap:14px;min-width:0}
.tn-right{display:flex;flex-direction:column;gap:14px}

/* chart card */
.tn-chartcard{overflow:hidden}
.tn-chartcard__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--border-default)}
.tn-chartcard__title{font-family:var(--font-mono);font-size:14px;font-weight:600}
.tn-legend{display:flex;align-items:center;gap:12px;font-size:10.5px;color:var(--text-tertiary)}
.tn-legend span{display:flex;align-items:center;gap:5px}
.tn-legend i{width:14px;height:2px;border-radius:2px;display:inline-block}
.tn-tfs{display:flex;flex-wrap:wrap;gap:4px}
.timeframe-btn{font-family:var(--font-mono);padding:5px 9px;border-radius:6px;border:1px solid var(--border-default);background:var(--ink-900);color:var(--text-secondary);font-size:11.5px;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.timeframe-btn:hover{color:var(--ink-100);border-color:var(--ink-550)}
.timeframe-btn.active{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
#mainChart{width:100%;height:430px;min-height:0;contain:none} /* override chart-page.css min-height/contain */
.tn-chartcard__foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--border-default);background:#161E30}

/* toggles row */
.tn-toggles{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px}
.tn-toggles label{font-size:12px;display:inline-flex;align-items:center;gap:5px;cursor:pointer;color:var(--text-secondary)}

/* patterns list (chart-page.js / chart.js inject chips) */
.patterns-list{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* oscillators */
.tn-osc{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tn-osc__card{padding:12px 14px;min-width:0} /* min-width:0 so the 1fr/1fr cells shrink and RSI/MACD rescale */
.tn-osc__head{display:flex;align-items:center;justify-content:space-between}
.tn-osc__head .tn-eye{font-size:10px}
.tn-osc__sub{font-size:13.5px;font-weight:600;margin-top:2px}
#rsiChart,#macdChart{width:100%;height:104px;margin-top:6px;min-height:0;contain:none}

/* analysis report */
.analysis-report{padding:14px}
.analysis-report h3{font-size:14px;margin:0 0 12px}
.analysis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.analysis-grid h4{font-size:12px;margin:0 0 4px}
.analysis-grid p{font-size:12.5px;color:var(--ink-200);line-height:1.5;margin:0}

/* AI insight card */
.tn-ai{border-top:2px solid var(--brand-600);padding:15px;display:flex;flex-direction:column;container-type:inline-size} /* column flex so body fills the uniform height and the disclaimer pins to the bottom */
.tn-ai__head{display:flex;align-items:center;justify-content:space-between}
.tn-ai__title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.tn-ai__title svg{color:var(--brand-400)}
.tn-ai__conf{font-size:10px;font-weight:600;letter-spacing:.04em;padding:3px 8px;border-radius:999px;background:rgba(94,151,248,.14);color:var(--brand-300);text-transform:uppercase}
.tn-ai__body{font-size:13px;line-height:1.6;color:var(--ink-200);margin:11px 0 0;flex:1 1 auto} /* fills space between header and disclaimer; ~670 chars comfortable (see tnAiCharBudget) */
.tn-ai__foot{font-size:12px;line-height:1.5;color:var(--text-secondary);margin-top:11px;padding-top:10px;border-top:1px solid var(--border-subtle)}
.tn-ai__foot b{color:var(--warn);font-weight:600}

/* signal summary (chart.js injects verdict + regime/momentum/setup) */
.signal-summary{padding:0}
.signal-summary .signal-badge{display:block}
/* AI + signal + readings panels: full-width row under the chart, flow into columns */
.tn-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:stretch} /* stretch = all 3 panels share the tallest one's height (uniform) */
.tn-panel{padding:16px 22px;container-type:inline-size} /* generous H-padding; container-type lets the inner tables reflow to multiple columns when the card is wide */
.tn-panel-title{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);margin:0 0 12px}

/* Indicator readings — roomy 2-up grid; label left, value right-aligned (bigger),
   status caption beneath. Generous edge padding so values don't hug the border. */
.indicator-readings{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));column-gap:26px;align-content:start;padding:0} /* auto-fit: 1 column on a narrow card, 2–3 columns on a wide card to fill the space */
.indicator-readings h4{grid-column:1 / -1;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);margin:0 0 6px}
.indicator-readings .indicator{display:grid;grid-template-columns:1fr auto;column-gap:14px;row-gap:1px;padding:10px 0;border-bottom:1px solid var(--border-subtle);background:transparent} /* kill chart-page.css's dark row chip so rows sit flat on the card like Signal Summary */
.indicator-readings .indicator label{grid-column:1;grid-row:1 / span 2;align-self:center;color:var(--text-secondary);font-size:13.5px}
.indicator-readings .indicator value{grid-column:2;grid-row:1;text-align:right;font-family:var(--font-mono);font-weight:600;font-size:15px;color:var(--ink-100);white-space:nowrap}
.indicator-readings .ind-status{grid-column:2;grid-row:2;text-align:right;font-size:11px;color:var(--text-tertiary);white-space:nowrap}
/* Wide cards (container query on .tn-panel): Signal Summary flows into 2 columns; the
   verdict badge + score line stay full-width on top. Fills the horizontal space at max width. */
@container (min-width:520px){
  .signal-summary{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-content:start}
  .signal-summary > .signal-badge,.signal-summary > .signal-score{grid-column:1 / -1}
  .signal-summary > div:not(.signal-badge):not(.signal-score){margin-top:14px}
}

/* disclaimer */
.tn-disclaim{font-size:11px;line-height:1.5;color:var(--text-tertiary);background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.28);padding:11px 13px;border-radius:8px}
.tn-disclaim b{color:var(--warn)}
/* prominent full-width bottom disclaimer (amber, centered) */
.tn-foot-disclaim{margin-top:24px;font-size:13px;line-height:1.6;color:var(--ink-200);background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);border-radius:10px;padding:14px 18px;text-align:center}
.tn-foot-disclaim strong{color:var(--warn)}

/* loading + error */
.loading-spinner{display:none;align-items:center;justify-content:center;gap:12px;padding:18px;color:var(--text-secondary);font-size:13px}
.loading-spinner .spinner{width:18px;height:18px;border:2px solid var(--ink-600);border-top-color:var(--brand-500);border-radius:50%;animation:tn-spin .8s linear infinite}
@keyframes tn-spin{to{transform:rotate(360deg)}}
.error-message{display:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .tn-grid{grid-template-columns:1fr}
  .price-stats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .tn-shell{grid-template-columns:1fr}
  .tn-osc{grid-template-columns:1fr}
  /* Rail becomes a slide-in drawer; the topbar hamburger opens it */
  .tn-rail-toggle{display:flex}
  .tn-rail{position:fixed;top:0;left:0;bottom:0;width:min(84vw,300px);z-index:1001;transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto}
  .tn-shell.tn-rail-open .tn-rail{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.55)}
  .tn-rail-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;opacity:0;pointer-events:none;transition:opacity .22s ease}
  .tn-shell.tn-rail-open .tn-rail-backdrop{opacity:1;pointer-events:auto}
}
@media (max-width:560px){
  .price-stats{grid-template-columns:repeat(2,1fr)}
  .tn-topbar{padding:0 14px;gap:8px}
}