.trend-page { --trend-fast: var(--accent); --trend-slow: var(--violet); }
.trend-page .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.trend-heading,.trend-scope,.trend-panel-heading,.trend-detail-heading,.trend-detail-title,.trend-price-line,.trend-chart-tools { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.trend-heading { margin:10px 0 22px; align-items:flex-end; }
.trend-eyebrow { color:var(--muted); font-size:11px; letter-spacing:.14em; }
.trend-heading h1 { margin:7px 0; letter-spacing:.025em; font-size:34px; }
.trend-heading p,.trend-scope p,.trend-detail-heading p { margin:0; color:var(--muted); font-size:13px; }
.trend-refresh { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; }
.trend-page button,.trend-page select { min-height:38px; padding:8px 12px; }
.trend-scope { margin-bottom:16px; }
.trend-segment { display:flex; gap:4px; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-l); }
.trend-segment button { border-color:transparent; background:transparent; }
.trend-page button.on { color:var(--accent); border-color:var(--accent); background:var(--panel-2); }
.trend-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.trend-summary button { display:flex; flex-direction:column; align-items:flex-start; gap:9px; background:var(--panel); border:1px solid var(--line); padding:16px 18px; border-radius:var(--r-l); text-align:left; color:var(--text); }
.trend-summary button span { font-size:13px; }.trend-summary strong { font-size:30px; line-height:1; font-weight:600; font-variant-numeric:tabular-nums; }
.trend-summary small { color:var(--muted); font-size:11px; font-weight:400; }
.trend-bull,.trend-badge.BULL { color:var(--long); }.trend-bear,.trend-badge.BEAR { color:var(--short); }
.trend-breadth { display:flex; align-items:center; gap:16px; margin:16px 0 22px; font-size:12px; color:var(--muted); }
#trend-breadth-bar { display:flex; flex:1; overflow:hidden; height:5px; border-radius:4px; background:var(--line); }
#trend-breadth-bar i { height:100%; }
.trend-tools { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }.trend-search { flex:1; min-width:190px; }.trend-search input { width:100%; padding:10px 14px; }
.trend-tools button[aria-pressed=true] { border-color:var(--accent); color:var(--accent); }
.trend-workspace { display:grid; grid-template-columns:minmax(340px,.85fr) minmax(0,1.6fr); gap:18px; align-items:start; }
.trend-list-panel,.trend-detail,.trend-method { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; min-width:0; }
.trend-panel-heading { padding:18px 16px; border-bottom:1px solid var(--line); }.trend-panel-heading h2 { font-size:15px; margin:0; }.trend-panel-heading span { color:var(--muted); font-size:12px; }
.trend-list-head,.trend-row { display:grid; grid-template-columns:minmax(0,1fr) 74px 74px 30px; align-items:center; gap:6px; }
.trend-list-head { color:var(--muted); font-size:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
.trend-list-head span:not(:first-child) { text-align:center; }
.trend-row { padding:12px 14px; border-bottom:1px solid var(--line); min-height:73px; cursor:pointer; border-left:3px solid transparent; }
.trend-row:hover { background:var(--panel-2); }.trend-row.selected { border-left-color:var(--accent); background:var(--panel-2); }
.trend-row-main { min-width:0; }.trend-row-main strong { display:block; font-size:14px; margin-bottom:5px; }.trend-row-main small { display:block; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
.trend-row .trend-star { padding:0; min-height:32px; border:0; background:transparent; color:var(--muted); font-size:21px; }.trend-row .trend-star[aria-pressed=true] { color:var(--accent); }
.trend-badge { display:inline-block; border-radius:5px; padding:4px 6px; background:var(--bg); font-size:10px; text-align:center; white-space:nowrap; }.trend-badge.NEUTRAL { color:var(--muted); }.trend-badge.STALE,.trend-badge.NO_DATA { color:var(--warn); }
.trend-pagination { display:flex; align-items:center; justify-content:center; gap:20px; padding:12px; color:var(--muted); font-size:12px; }
.trend-detail { padding:20px; min-height:570px; }.trend-detail-title { justify-content:flex-start; gap:10px; }.trend-detail-title h2 { margin:0; font-size:22px; }.trend-detail-heading p { margin-top:5px; }.trend-detail-heading a { white-space:nowrap; color:var(--accent); font-size:12px; }
.trend-price-line { justify-content:flex-start; gap:12px; margin:18px 0; flex-wrap:wrap; }.trend-price-line strong { font-size:28px; font-weight:600; font-variant-numeric:tabular-nums; }.trend-price-line span { font-size:12px; color:var(--muted); }
.trend-chart-tools { border-top:1px solid var(--line); padding-top:12px; }.trend-chart-tools label { font-size:11px; color:var(--muted); white-space:nowrap; }.trend-chart-tools select { min-height:30px; padding:4px; }
.trend-legend { display:flex; gap:15px; align-items:center; font-size:11px; color:var(--muted); flex-wrap:wrap; }.trend-fast { color:var(--trend-fast); }.trend-slow { color:var(--trend-slow); }
.trend-hover { font:11px/1.5 var(--mono); color:var(--muted); min-height:32px; margin:8px 0 0; }
#trend-chart { width:100%; height:335px; display:block; touch-action:pan-y; }
.trend-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:12px 0 18px; padding:14px 0; gap:12px; }
.trend-metric small { display:block; color:var(--muted); font-size:10px; margin-bottom:7px; }.trend-metric strong { font-size:14px; font-weight:500; }
.trend-explanation h3 { margin:0 0 8px; font-size:13px; }.trend-explanation p { color:var(--muted); line-height:1.6; font-size:12px; margin:0 0 10px; }
.trend-conditions { display:flex; flex-wrap:wrap; gap:8px; }.trend-conditions span { font-size:11px; padding:5px 8px; border:1px solid var(--line); border-radius:var(--r-s); color:var(--muted); }.trend-conditions span.pass { color:var(--long); }
.trend-note { color:var(--muted); font-size:11px; line-height:1.6; margin:16px 0 0; }.trend-method { margin-top:20px; padding:16px 20px; }.trend-method summary { cursor:pointer; font-size:13px; }.trend-method p { color:var(--muted); font-size:12px; line-height:1.7; }.trend-method strong { color:var(--text); }
.trend-empty { padding:36px 20px; text-align:center; font-size:13px; color:var(--muted); line-height:1.7; }.trend-error { padding:14px; border:1px solid var(--warn); border-radius:var(--r-m); color:var(--warn); }
@media(max-width:600px) { .trend-tools #trend-kind,.trend-tools #trend-sort { flex:0 0 calc(50% - 4px); width:calc(50% - 4px); min-width:0; }.trend-tools button { flex:1; }.trend-search { flex-basis:100%; } }
@media(min-width:1200px) { .trend-detail { position:sticky; top:16px; } }
@media(max-width:1100px) { .trend-workspace { grid-template-columns:minmax(310px,.9fr) minmax(0,1.3fr); gap:12px; }.trend-summary button { padding:14px 12px; }.trend-summary small { font-size:10px; }.trend-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.trend-detail { padding:16px; } }
@media(max-width:800px) { .trend-workspace { grid-template-columns:1fr; }.trend-heading { align-items:flex-start; }.trend-refresh { flex-direction:column; align-items:flex-end; gap:6px; }.trend-summary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.trend-summary button:first-child { grid-column:span 2; }.trend-summary small { display:none; }.trend-summary strong { font-size:24px; }.trend-breadth { flex-direction:column; align-items:stretch; gap:8px; }#trend-breadth-bar { flex:auto; }.trend-detail { min-height:0; }.trend-list { max-height:400px; overflow:auto; }.trend-heading p { max-width:270px; line-height:1.5; } }
@media(max-width:460px) { .trend-heading h1 { font-size:28px; }.trend-refresh>span { max-width:100px; text-align:right; line-height:1.5; }.trend-scope { align-items:flex-start; flex-direction:column; gap:12px; }.trend-summary button { padding:12px 10px; }.trend-summary button span { font-size:12px; }.trend-tools select { flex:1; width:calc(50% - 8px); }.trend-search { flex-basis:100%; }.trend-list-head,.trend-row { grid-template-columns:minmax(0,1fr) 65px 65px 25px; gap:4px; padding-left:10px; padding-right:10px; }.trend-badge { font-size:9px; padding:4px; }.trend-detail { padding:14px 10px; }.trend-detail-title h2 { font-size:19px; }.trend-chart-tools { gap:6px; }.trend-legend { gap:8px; font-size:10px; }#trend-chart { height:295px; }.trend-detail-heading { gap:8px; align-items:flex-start; }.trend-price-line strong { font-size:24px; }.trend-method { padding:14px; } }