/*
 * The Markets and Economy terminals in TradingView's chart-page layout (css/tv.css holds its tokens and controls).
 *
 *   ┌──────────────────────────── top toolbar (38px) ─────────────────────────────┐
 *   ├────┬──────────────────────────────────────────────┬───────────────────┬─────┤
 *   │draw│  chart (legend over its top left)            │ widget bar (300px)│rail │
 *   │bar │                                              │ watchlist/details │45px │
 *   │52px├──────────────────────────────────────────────┤ or another panel  │     │
 *   │    │  bottom toolbar (38px): ranges, clock, %/log/auto              │     │
 *   └────┴──────────────────────────────────────────────┴───────────────────┴─────┘
 *
 * Blocks sit on the chart page's background with a 4px gap between them, as TradingView lays them. Every id the page
 * scripts read is kept; this file only places and paints them. Narrow screens stack the chart, the rail and the panel.
 */
/* The terminal's own dimensions, on the terminal only: other pages (the Research rail) define these names for themselves. */
.tv-terminal { --toolbar-height:var(--tv-header); --watch-width:var(--tv-widget); --rail-width:var(--tv-right); --scale-inset:var(--tv-size-12); --row-pad:var(--tv-size-6); }

/* ---- the frame ---- */
body.tv-app { display:flex; flex-direction:column; height:100dvh; overflow:hidden; background:var(--tv-page); color:var(--tv-text); }
body.tv-app h1,body.tv-app h2,body.tv-app h3,body.tv-app h4 { font-family:var(--tv-font); letter-spacing:0; }

/* ---- top toolbar ---- */
.tv-header { position:relative; z-index:var(--tv-layer-header); flex:none; height:var(--tv-header); margin-bottom:var(--tv-gap); background:var(--tv-bg); }
.tv-header .wrap::after { display:none; }
.tv-header-row { display:flex; align-items:center; gap:var(--tv-size-2); height:100%; padding:0 var(--tv-size-4); min-width:0; }
.tv-header .site-nav { flex:none; align-items:center; padding-right:var(--tv-size-4); margin-right:var(--tv-size-2); border-right:var(--tv-size-1) solid var(--tv-divider); height:var(--tv-size-22); }
.tv-header .site-nav > :first-child { margin-inline-start:0; }
.tv-header .site-crumb { min-height:var(--tv-size-34); padding:0 var(--tv-size-8); border-radius:var(--tv-size-4); font-family:var(--tv-font); letter-spacing:0; }
.tv-header .site-home { gap:var(--tv-size-6); color:var(--tv-text); font-size:var(--tv-size-15); font-weight:var(--tv-weight-600); }
.tv-header .site-home:hover { background:var(--tv-btn-hover); }
.tv-header .site-logo { width:var(--tv-size-20); height:var(--tv-size-20); }
.tv-header .site-slash { display:none; }
.tv-header .site-section { color:var(--tv-text); font-size:var(--tv-size-14); }
.tv-header .site-section:is(:hover,[aria-expanded="true"]) { background:var(--tv-btn-hover); }
.tv-header .site-chevron { stroke:var(--tv-text-2); }
.tv-tools { flex:1; display:flex; align-items:center; gap:var(--tv-size-2); min-width:0; overflow:hidden; }
.tv-header-end { flex:none; display:flex; align-items:center; gap:var(--tv-size-2); margin:0; padding-left:var(--tv-size-4); }
.tv-header .site-github { margin:0; color:var(--tv-text); }
.tv-header .site-github svg { width:var(--tv-size-18); height:var(--tv-size-18); }
.tv-btn.tv-static { cursor:default; font-weight:var(--tv-weight-600); }
.tv-btn.tv-static:hover { background:transparent; }
.tv-symbol { gap:var(--tv-size-4); padding:0 var(--tv-size-10) 0 var(--tv-size-6); font-weight:var(--tv-weight-600); text-transform:none; }
.tv-symbol svg { width:var(--tv-size-20); height:var(--tv-size-20); color:var(--tv-text-2); }
.tv-symbol span { max-width:var(--tv-size-160); overflow:hidden; text-overflow:ellipsis; }
.tv-btn > span { pointer-events:none; }
.tv-select,#asset { height:var(--tv-size-34); min-height:0; padding:0 var(--tv-size-26) 0 var(--tv-size-10); border:0; border-radius:var(--tv-size-4); background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23808080' d='M5.5 7.5 9 11l3.5-3.5'/%3E%3C/svg%3E") right var(--tv-size-4) center/var(--tv-size-18) no-repeat;
  color:var(--tv-text); font:var(--tv-size-14) var(--tv-font); appearance:none; -webkit-appearance:none; cursor:pointer; }
.tv-select:hover,#asset:hover { background-color:var(--tv-btn-hover); }
.tv-select option { background:var(--tv-popup); color:var(--tv-text); }
.tv-overview-link { color:var(--tv-text); }
.tv-overview-link:hover { color:var(--tv-text); }
/* One icon for each state: the moon in light, the sun in dark; enter or leave full screen. */
#tvTheme .icon-sun,:root[data-theme="dark"] #tvTheme .icon-moon { display:none; }
:root[data-theme="dark"] #tvTheme .icon-sun { display:block; }
#tvTheme[aria-pressed="true"] { background:transparent; color:var(--tv-text); }
#tvTheme[aria-pressed="true"]:hover { background:var(--tv-btn-hover); }
#expand .icon-collapse,#expand[aria-pressed="true"] .icon-expand { display:none; }
#expand[aria-pressed="true"] .icon-collapse { display:block; }
#expand[aria-pressed="true"] { background:transparent; color:var(--tv-text); }

/* The site menu, as TradingView's dropdowns. */
.tv-app .site-panel { top:calc(var(--tv-header) + var(--tv-size-2)); padding:var(--tv-size-6) 0; border:0; border-radius:var(--tv-size-6); background:var(--tv-popup); color:var(--tv-text); box-shadow:var(--tv-popup-shadow); font:var(--tv-size-14)/var(--tv-size-20) var(--tv-font); }
.tv-app .site-menu a { min-height:var(--tv-size-36); padding:0 var(--tv-size-16); border-radius:0; color:var(--tv-text); }
.tv-app .site-menu a:hover { background:var(--tv-popup-hover); }
.tv-app .site-menu a[aria-current] { background:var(--tv-brand); color:var(--tv-white); font-weight:var(--tv-weight-400); }
.tv-app .site-menu a[aria-current]::before { display:none; }
.tv-app .site-options li.active { background:var(--tv-popup-hover); }
.tv-app .site-search { border:var(--tv-size-1) solid var(--tv-border-hover); background:var(--tv-input); }

/* ---- the terminal: draw bar, chart, panel, rail ---- */
.tv-terminal { flex:1; min-height:0; display:grid; grid-template-columns:var(--tv-left) minmax(0,1fr) auto; gap:var(--tv-gap); padding:0 !important; background:var(--tv-page); }
.tv-terminal > .chart-panel,.tv-terminal > .screener { grid-column:2; grid-row:1; }
.tv-terminal > .dock { grid-column:3; grid-row:1; }

/* The drawing toolbar: one column of 52px tool buttons, then the magnet, lock, hide and remove at the foot. */
.tv-drawbar { grid-column:1; grid-row:1; display:flex; flex-direction:column; justify-content:space-between; min-height:0; padding:var(--tv-size-4) 0; overflow-y:auto; overflow-x:hidden; background:var(--tv-bg); scrollbar-width:none; }
.tv-drawbar-group { display:flex; flex-direction:column; align-items:center; gap:var(--tv-size-2); }
.tv-drawbar .tv-btn { width:var(--tv-size-44); height:var(--tv-size-38); min-width:0; padding:0; border-radius:var(--tv-size-4); color:var(--tv-text); }
.tv-drawbar .tv-btn svg { width:var(--tv-size-28); height:var(--tv-size-28); }
.tv-hdivider { flex:none; width:var(--tv-size-32); height:var(--tv-size-1); margin:var(--tv-size-4) 0; background:var(--tv-divider); }

/* The chart block: the chart over its legend and markers, the bottom toolbar under a 4px gap. */
.tv-terminal .chart-panel { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) var(--tv-bottom); gap:var(--tv-gap); min-width:0; min-height:0; border:0; background:transparent; container:chart / inline-size; }
.tv-terminal .chart-area { position:relative; min-height:0; overflow:clip; background:var(--tv-pane); }
.tv-terminal .chart-status { background:var(--tv-pane); color:var(--tv-text-2); font-size:var(--tv-size-14); }

/* The legend, TradingView's: the symbol line in 16px, the SELL and BUY boxes, then a 13px row per series. */
.tv-app .tv-terminal .chart-head { left:var(--tv-size-12); top:var(--tv-size-8); gap:var(--tv-size-6); max-width:calc(100% - var(--tv-size-96)); color:var(--tv-text); font-family:var(--tv-font); }
.tv-terminal .head-line { align-items:baseline; gap:0 var(--tv-size-8); }
.tv-terminal .head-line h2 { font:var(--tv-weight-400) var(--tv-size-17)/var(--tv-size-24) var(--tv-font); color:var(--tv-text); }
.tv-legend-int { display:inline-flex; gap:var(--tv-size-8); color:var(--tv-text); font-size:var(--tv-size-17); line-height:var(--tv-size-24); white-space:nowrap; }
.tv-terminal .symbol-meta { gap:var(--tv-size-8); color:var(--tv-text-2); font-size:var(--tv-size-13); }
.tv-terminal .symbol-quote { gap:var(--tv-size-6); font-size:var(--tv-size-13); }
.tv-terminal .symbol-last { font-size:var(--tv-size-17); font-weight:var(--tv-weight-400); }
.tv-terminal .symbol-change { font-size:var(--tv-size-13); }
.tv-terminal .symbol-range { color:var(--tv-text-2); font-size:var(--tv-size-12); font-weight:var(--tv-weight-400); letter-spacing:0; }
.tv-terminal .symbol-change .up,.tv-terminal .symbol-change.up { color:var(--tv-up-text); }
.tv-terminal .symbol-change .down,.tv-terminal .symbol-change.down { color:var(--tv-down-text); }

/* SELL and BUY: TradingView's order buttons on the legend, here the market side the chart shows. The side shown is
   filled in its colour; the other is outlined. The spread sits between them. */
.tv-terminal #side { gap:0; padding:0; border-radius:0; background:none; }
.tv-terminal #side button { flex-direction:column; align-items:flex-start; justify-content:center; gap:0; min-width:var(--tv-size-78); min-height:var(--tv-size-40); padding:var(--tv-size-2) var(--tv-size-10);
  border:var(--tv-size-1) solid currentColor; border-radius:var(--tv-size-6); background:var(--tv-pane); font:var(--tv-weight-600) var(--tv-size-14)/var(--tv-size-18) var(--tv-font); box-shadow:none; }
.tv-terminal #side button[data-side="sell"] { color:var(--tv-down-text); }
.tv-terminal #side button[data-side="buy"] { align-items:flex-end; color:var(--tv-buy-text); }
.tv-terminal #side .side-name { order:1; color:inherit; font-size:var(--tv-size-11); font-weight:var(--tv-weight-400); letter-spacing:0; text-transform:uppercase; opacity:.85; }
.tv-terminal #side .side-value { color:inherit; }
.tv-terminal #side button:hover .side-name { color:inherit; }
.tv-terminal #side button[aria-checked="true"] { background:currentColor; box-shadow:none; }
.tv-terminal #side button[aria-checked="true"] :is(.side-name,.side-value),
.tv-terminal #side button[data-side][aria-checked="true"] :is(.side-name,.side-value) { color:var(--tv-white); }
.tv-terminal #side button:not([aria-checked="true"]):hover { background:var(--tv-btn-hover); }
.tv-terminal .side-spread { display:grid; place-items:center; align-self:center; min-width:var(--tv-size-40); height:var(--tv-size-24); margin:0 calc(var(--tv-size-4) * -1); padding:0 var(--tv-size-6); position:relative; z-index:var(--tv-layer-inline);
  border:var(--tv-size-1) solid var(--tv-border-hover); border-radius:var(--tv-size-4); background:var(--tv-pane); color:var(--tv-text); font-size:var(--tv-size-12); }

.tv-terminal .chart-legend { gap:var(--tv-size-2) var(--tv-size-8); color:var(--tv-text); font-size:var(--tv-size-13); line-height:var(--tv-size-18); }
.tv-terminal .legend .day { color:var(--tv-text-2); font-size:var(--tv-size-12); font-weight:var(--tv-weight-400); letter-spacing:0; }
.tv-terminal .legend .label { color:var(--tv-text); }
.tv-terminal .legend .value { color:var(--tv-text); }
.tv-terminal .legend .meta,.tv-terminal .legend .meta-label,.tv-terminal .legend .note { color:var(--tv-text-2); }
.tv-terminal .legend .rest { color:var(--tv-text-2); }
#indicatorLegend .label button { padding:0 var(--tv-size-4); border:0; border-radius:var(--tv-size-3); background:none; color:var(--tv-text-2); font:inherit; cursor:pointer; }
#indicatorLegend .label button:hover { background:var(--tv-btn-hover); color:var(--tv-text); }

/* The bottom toolbar: ranges at the start; the day's end, the clock and the scale modes at the end. */
.tv-bottom { display:flex; align-items:center; justify-content:space-between; gap:var(--tv-size-8); min-height:0; height:var(--tv-bottom); padding:0 var(--tv-size-8) 0 var(--tv-size-4) !important; border:0 !important; background:var(--tv-bg); font-family:var(--tv-font); }
.tv-terminal .ranges { gap:var(--tv-size-2); margin:0; }
.tv-terminal .ranges button { min-height:var(--tv-size-28); padding:0 var(--tv-size-8); border-radius:var(--tv-size-4); color:var(--tv-text); font:var(--tv-size-13) var(--tv-font); }
.tv-terminal .ranges button:hover { background:var(--tv-btn-hover); color:var(--tv-text); }
.tv-terminal .ranges button[aria-checked="true"] { background:var(--tv-btn-active-bg); color:var(--tv-btn-active); font-weight:var(--tv-weight-400); }
.tv-bottom-end { flex:1; display:flex; align-items:center; justify-content:flex-end; gap:var(--tv-size-6); min-width:0; }
.tv-terminal .tv-bottom > .ranges { flex:none; }
.tv-terminal .through { flex:0 1 auto; min-width:0; color:var(--tv-text-2); font-size:var(--tv-size-12); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tv-clock { color:var(--tv-text); font-size:var(--tv-size-13); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tv-scale { display:flex; gap:var(--tv-size-2); }
.tv-scale button { min-width:var(--tv-size-28); height:var(--tv-size-28); padding:0 var(--tv-size-6); border:0; border-radius:var(--tv-size-4); background:transparent; color:var(--tv-text); font:var(--tv-size-13) var(--tv-font); cursor:pointer; }
.tv-scale button:hover { background:var(--tv-btn-hover); }
.tv-scale button[aria-pressed="true"] { color:var(--tv-btn-active); }

/* ---- the screener takes the chart's place ---- */
.tv-terminal .screener { border:0; background:var(--tv-bg); font-family:var(--tv-font); }
.tv-terminal .screener .toolbar { min-height:var(--tv-header); padding:var(--tv-size-4) var(--tv-size-12); }
.tv-terminal .screener .toolbar-bottom { border-top:var(--tv-gap) solid var(--tv-page); }
.tv-terminal .screener h2 { font:var(--tv-weight-600) var(--tv-size-16) var(--tv-font); }
.tv-terminal .screener-controls { padding:0 var(--tv-size-12) var(--tv-size-8) !important; }
.tv-terminal .screener-controls label { color:var(--tv-text-2); font-size:var(--tv-size-12); font-weight:var(--tv-weight-400); letter-spacing:0; text-transform:none; }
.tv-terminal .screener-controls select { height:var(--tv-size-30); border:var(--tv-size-1) solid var(--tv-border-hover); border-radius:var(--tv-size-4); background:var(--tv-input); font-size:var(--tv-size-13); }
.tv-terminal .screener-scroll { padding:var(--tv-size-12); border-top:var(--tv-size-1) solid var(--tv-border); }
.tv-terminal .screen-card { border:var(--tv-size-1) solid var(--tv-border); border-radius:var(--tv-size-6); background:var(--tv-bg); }
.tv-terminal .screen-card:hover { border-color:var(--tv-border-hover); background:var(--tv-bg-2); }
.tv-terminal .screen-card[aria-current="true"] { border-color:var(--tv-brand); box-shadow:inset 0 0 0 var(--tv-size-1) var(--tv-brand); }
.tv-terminal .screen-name { font:var(--tv-weight-600) var(--tv-size-15) var(--tv-font); }
.tv-terminal .segmented { min-height:var(--tv-size-30); padding:var(--tv-size-2); border-radius:var(--tv-size-6); background:var(--tv-bg-3); }
.tv-terminal .segmented button { font:var(--tv-size-13) var(--tv-font); color:var(--tv-text); }
.tv-terminal .segmented button[aria-checked="true"] { background:var(--tv-bg); font-weight:var(--tv-weight-600); }
.tv-terminal .screener-side [data-side="sell"][aria-checked="true"] { color:var(--tv-down-text); }
.tv-terminal .screener-side [data-side="buy"][aria-checked="true"] { color:var(--tv-buy-text); }
.tv-terminal .screener-button { color:var(--tv-text); font:var(--tv-size-13) var(--tv-font); }
.tv-terminal .screener-button:hover { background:var(--tv-btn-hover); }

/* ---- the widget bar: the open panel, then the rail ---- */
.tv-terminal .dock { display:flex; gap:var(--tv-gap); min-height:0; }
.tv-terminal .dock-panel { width:var(--tv-widget); min-height:0; border:0; background:var(--tv-bg); font-family:var(--tv-font); }
.tv-terminal .dock-rail { width:var(--tv-right); padding:var(--tv-size-4) 0; background:var(--tv-bg); }
.tv-terminal .dock-group { gap:var(--tv-size-2); }
.tv-terminal .dock-tool,.tv-terminal .dock-rail .tool { width:var(--tv-size-36); height:var(--tv-size-36); border-radius:var(--tv-size-4); color:var(--tv-text); }
.tv-terminal .dock-rail .tool svg { width:var(--tv-size-28); height:var(--tv-size-28); stroke-width:1; }
.tv-terminal .dock-rail .tool:hover { background:var(--tv-btn-hover); color:var(--tv-text); }
.tv-terminal .dock-rail .tool:is([aria-expanded="true"],[aria-pressed="true"]) { background:var(--tv-btn-active-bg); color:var(--tv-btn-active); }

/* Panel heads: TradingView's widget header, 16px semibold, its actions at the end. */
.tv-terminal :is(.watch-head,.panel-head) { min-height:var(--tv-size-46); padding:var(--tv-size-6) var(--tv-size-8) var(--tv-size-6) var(--tv-size-12); border-bottom:var(--tv-size-1) solid var(--tv-border); }
.tv-terminal :is(.watch-title,.panel-title) { color:var(--tv-text); font:var(--tv-weight-600) var(--tv-size-16)/var(--tv-size-24) var(--tv-font); letter-spacing:0; text-transform:none; }
.tv-terminal .watch-count { color:var(--tv-text-2); font-weight:var(--tv-weight-400); }
.tv-terminal :is(.filter,.watch-head .filter,.screener-head .filter) { height:var(--tv-size-30); min-height:0; padding:0 var(--tv-size-10); border:var(--tv-size-1) solid var(--tv-border-hover); border-radius:var(--tv-size-4); background:var(--tv-input); color:var(--tv-text); font:var(--tv-size-13) var(--tv-font); }
.tv-terminal .filter:focus { border-color:var(--tv-brand); outline:0; }
.tv-terminal .panel-body { padding:var(--tv-size-12); color:var(--tv-text); font-size:var(--tv-size-14); line-height:var(--tv-size-20); }
.tv-terminal .panel-body p { margin:var(--tv-size-12) 0 0; }
.tv-terminal .btn { min-height:var(--tv-size-30); padding:0 var(--tv-size-10); border:var(--tv-size-1) solid var(--tv-border-hover); border-radius:var(--tv-size-4); background:var(--tv-bg); color:var(--tv-text); font:var(--tv-size-13) var(--tv-font); }
.tv-terminal .btn:hover:not(:disabled) { background:var(--tv-btn-hover); }
.tv-terminal .btn[aria-pressed="true"] { border-color:var(--tv-btn-active-bg); background:var(--tv-btn-active-bg); color:var(--tv-btn-active); }

/* The watchlist: TradingView's columns (Symbol, Last, Chg, Chg%), fixed so they fit the 300px widget: the name takes
   what the figures leave, figures right-aligned and tabular, 30px rows, blue hover and selection. */
.tv-terminal .watch-scroll { overflow-x:hidden; }
.tv-terminal table.watch { table-layout:fixed; font-size:var(--tv-size-13); font-variant-numeric:tabular-nums lining-nums; }
.tv-terminal table.watch :is(th,td) { height:var(--tv-size-30); padding:0 var(--tv-size-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tv-terminal table.watch thead th { height:var(--tv-size-28); border-bottom:var(--tv-size-1) solid var(--tv-border); background:var(--tv-bg); color:var(--tv-text-2); font-size:var(--tv-size-12); font-weight:var(--tv-weight-400); letter-spacing:0; text-transform:none; }
.tv-terminal table.watch :is(thead th:first-child,tbody th) { padding-left:var(--tv-size-12); }
.tv-terminal table.watch :is(thead th:last-child,td:last-child) { padding-right:var(--tv-size-10); }
/* Widths from the widest figures: Last 45px, Chg 53px, Chg% 65px (Markets); Per day 56px, Chg% 77px (Economy). */
#market table.watch thead th:nth-child(2) { width:18%; }
#market table.watch thead th:nth-child(3) { width:21%; }
#market table.watch thead th:nth-child(4) { width:27%; }
#economy table.watch thead th:nth-child(2) { width:25%; }
#economy table.watch thead th:nth-child(3) { width:31%; }
.tv-terminal table.watch tbody tr:hover { background:var(--tv-row-hover); }
.tv-terminal table.watch tbody tr[aria-selected="true"] { background:var(--tv-row-selected); box-shadow:none; }
.tv-terminal table.watch .pick { max-width:100%; overflow:hidden; color:var(--tv-text); font-weight:var(--tv-weight-600); text-overflow:ellipsis; vertical-align:middle; }
.tv-terminal table.watch td.stale { color:var(--tv-text-2); }
.tv-terminal table.watch .flag { color:var(--tv-text-2); }
.tv-terminal table.watch .flag-retired { color:var(--tv-warning-text); }
/* Economy's aggregate leads the list, set apart from the worlds as a watchlist's section. */
#economy table.watch tr[data-world="All"] :is(th,td) { border-bottom:var(--tv-size-1) solid var(--tv-border); }
.tv-terminal .watch-tip,.tv-terminal .event-tip { border:0; border-radius:var(--tv-size-4); background:var(--tv-tooltip); color:var(--tv-white); box-shadow:var(--tv-shadow); font-size:var(--tv-size-13); }
.tv-terminal .event-tip :is(.event-tip-days,.event-tip-text) { color:var(--tv-tooltip-muted); }
/* Above the chart's layers (legend, marker strip), under the header's menus; a long list scrolls inside it. */
.tv-terminal .event-tip { z-index:var(--tv-layer-tip); max-height:min(var(--tv-size-420), calc(100dvh - var(--tv-size-24))); overflow-y:auto; overscroll-behavior:contain; }
/* Clicked open, it takes the pointer: its list scrolls and the wheel no longer zooms the chart beneath it. */
.tv-terminal .event-tip.pinned { pointer-events:auto; }

/* The details widget, under the list, as TradingView's symbol details: a widget of its own (the page's gap above it),
   16px side padding. The symbol and its facts, dotted apart; the quote at 28px with its change on a 16px line and
   what it is beneath, as TradingView's update line; Key stats as rows, a label at the left and the figure at the
   right; then Performance. */
.tv-terminal .details { flex:none; padding:var(--tv-size-10) var(--tv-size-16) var(--tv-size-14); border-top:var(--tv-gap) solid var(--tv-page); }
/* The details keep their whole height, never a scroll of their own: the list above gives up the room (it scrolls), and
   only a screen too short for both scrolls the widget as a whole. */
.tv-terminal .watchlist { overflow-y:auto; overflow-x:hidden; }
.tv-terminal .watchlist .watch-scroll { min-height:var(--tv-size-150); }
.tv-terminal .details-title { margin:0; font:var(--tv-weight-600) var(--tv-size-16)/var(--tv-size-24) var(--tv-font); }
.tv-terminal .details-link { display:inline-flex; vertical-align:top; margin-left:var(--tv-size-2); color:var(--tv-text-2); border-radius:var(--tv-size-4); }
.tv-terminal .details-link:hover { color:var(--tv-brand); background:var(--tv-btn-hover); }
.tv-terminal .details-link svg { width:var(--tv-size-18); height:var(--tv-size-18); }
.tv-terminal .details-meta { display:flex; flex-wrap:wrap; align-items:center; gap:0; margin:0; color:var(--tv-text-2); font-size:var(--tv-size-12); line-height:var(--tv-size-20); }
.tv-terminal .details-meta > span + span::before { content:""; display:inline-block; width:var(--tv-size-3); height:var(--tv-size-3); margin:0 var(--tv-size-6); border-radius:50%; background:var(--tv-text-3); vertical-align:middle; }
.tv-terminal .details-meta .tag { margin:0; }
.tv-terminal .details-status { margin:var(--tv-size-6) 0 0; color:var(--tv-text-2); font-size:var(--tv-size-12); line-height:var(--tv-size-18); }
.tv-terminal .details-quote { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--tv-size-8); margin:var(--tv-size-12) 0 0; }
.tv-terminal .details-last { font:var(--tv-weight-600) var(--tv-size-28)/var(--tv-size-36) var(--tv-font); letter-spacing:0; font-variant-numeric:tabular-nums lining-nums; }
.tv-terminal .details-change { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--tv-size-8); margin:0; font:var(--tv-weight-600) var(--tv-size-16)/var(--tv-size-24) var(--tv-font); font-variant-numeric:tabular-nums lining-nums; }
.tv-terminal .details-change .details-unit { font-weight:var(--tv-weight-400); }
.tv-terminal .details-unit { color:var(--tv-text-2); font-size:var(--tv-size-12); font-weight:var(--tv-weight-400); }
.tv-terminal .details-caption { margin:var(--tv-size-2) 0 0; color:var(--tv-text-2); font-size:var(--tv-size-13); line-height:var(--tv-size-18); }
.tv-terminal .details-heading { margin:var(--tv-size-16) 0 var(--tv-size-4); color:var(--tv-text); font:var(--tv-weight-600) var(--tv-size-14)/var(--tv-size-20) var(--tv-font); letter-spacing:0; text-transform:none; }
.tv-terminal .tv-keystats { display:grid; gap:0; margin:0; }
.tv-terminal .tv-keystats > div { display:flex; align-items:baseline; justify-content:space-between; gap:var(--tv-size-12); padding:var(--tv-size-2) 0; }
.tv-terminal .tv-keystats dt { flex:none; white-space:nowrap; color:var(--tv-text-2); font-size:var(--tv-size-13); line-height:var(--tv-size-18); }
.tv-terminal .tv-keystats dd { margin:0; color:var(--tv-text); font-size:var(--tv-size-13); font-weight:var(--tv-weight-600); line-height:var(--tv-size-18); text-align:right; font-variant-numeric:tabular-nums lining-nums; }
.tv-terminal .tv-keystats dd .details-unit { margin-left:var(--tv-size-4); }
/* Performance: TradingView's tiles, tinted by the sign of the change. */
.tv-terminal .performance { gap:var(--tv-size-6); }
.tv-terminal .performance button { gap:var(--tv-size-2); padding:var(--tv-size-6) var(--tv-size-4); border-radius:var(--tv-size-6); background:var(--tv-bg-3); color:var(--tv-text); font-family:var(--tv-font); }
.tv-terminal .performance button:has(.up) { background:var(--tv-up-soft); }
.tv-terminal .performance button:has(.down) { background:var(--tv-down-soft); }
.tv-terminal .performance button:hover { filter:brightness(.97); }
:root[data-theme="dark"] .tv-terminal .performance button:hover { filter:brightness(1.2); }
.tv-terminal .performance button[aria-pressed="true"] { box-shadow:inset 0 0 0 var(--tv-size-1) var(--tv-brand); }
.tv-terminal .perf-value { font-size:var(--tv-size-14); font-weight:var(--tv-weight-600); font-variant-numeric:tabular-nums lining-nums; }
.tv-terminal .perf-value .up,.tv-terminal .perf-value.up { color:var(--tv-up-text); } .tv-terminal .perf-value .down,.tv-terminal .perf-value.down { color:var(--tv-down-text); }
.tv-terminal .perf-range { color:var(--tv-text-2); font-size:var(--tv-size-12); }

/* Events and Forecast history: the same widget frame, TradingView's inputs. */
.tv-terminal .event-section-nav { padding:var(--tv-size-6) var(--tv-size-12); border-bottom:var(--tv-size-1) solid var(--tv-border); }
.tv-terminal .events-panel :is(button,select,input[type="month"]),.tv-terminal .history-panel :is(select,input[type="date"]) { min-height:var(--tv-size-30); border:var(--tv-size-1) solid var(--tv-border-hover); border-radius:var(--tv-size-4); background:var(--tv-input); color:var(--tv-text); font:var(--tv-size-13) var(--tv-font); }
.tv-terminal .events-panel button:hover { background:var(--tv-btn-hover); }
.tv-terminal .events-panel button[aria-pressed="true"],.tv-terminal .history-panel button[aria-pressed="true"] { border-color:var(--tv-btn-active-bg); background:var(--tv-btn-active-bg); color:var(--tv-btn-active); }
.tv-terminal .event-calendar button[aria-current] { border-color:var(--tv-brand); }
.tv-terminal .event-span { background:var(--tv-brand); }
.tv-terminal .history-edition,.tv-terminal .history-list > li { border-color:var(--tv-border); border-radius:var(--tv-size-6); }

/* The object tree: one row per drawing, its visibility, lock and removal at the end. */
.tv-object-list { display:grid; gap:var(--tv-size-2); margin:0 calc(var(--tv-size-12) * -1); padding:0; list-style:none; }
.tv-object-list li { display:flex; align-items:center; gap:var(--tv-size-8); min-height:var(--tv-size-36); padding:0 var(--tv-size-8) 0 var(--tv-size-12); cursor:pointer; }
.tv-object-list li:hover { background:var(--tv-row-hover); }
.tv-object-list li[aria-selected="true"] { background:var(--tv-row-selected); }
.tv-object-list .tv-obj-icon { width:var(--tv-size-28); height:var(--tv-size-28); flex:none; fill:none; stroke:currentColor; color:var(--tv-text-2); }
.tv-object-list .tv-obj-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tv-object-list .tv-btn { width:var(--tv-size-28); min-width:0; height:var(--tv-size-28); }
.tv-object-list .tv-btn svg { width:var(--tv-size-24); height:var(--tv-size-24); }
.tv-muted { color:var(--tv-text-2); }

/* ---- floating chart UI: the drawing's own toolbar, the text editor, replay, the selection outline ---- */
.tv-float { position:absolute; z-index:var(--tv-layer-float); display:flex; align-items:center; gap:var(--tv-size-2); padding:var(--tv-size-2); border-radius:var(--tv-size-6); background:var(--tv-popup); box-shadow:var(--tv-popup-shadow); }
.tv-float .tv-btn { height:var(--tv-size-30); min-width:var(--tv-size-30); }
.tv-float .tv-btn svg { width:var(--tv-size-24); height:var(--tv-size-24); }
.tv-swatch { width:var(--tv-size-18); height:var(--tv-size-18); border-radius:var(--tv-size-3); box-shadow:inset 0 0 0 var(--tv-size-1) var(--tv-swatch-outline); }
.tv-colors { display:grid; grid-template-columns:repeat(8,var(--tv-size-22)); gap:var(--tv-size-4); padding:var(--tv-size-8); }
.tv-colors button { width:var(--tv-size-22); height:var(--tv-size-22); padding:0; border:0; border-radius:var(--tv-size-4); cursor:pointer; }
.tv-colors button[aria-checked="true"] { outline:var(--tv-size-2) solid var(--tv-brand); outline-offset:var(--tv-size-1); }
.tv-text-edit { position:absolute; z-index:var(--tv-layer-edit); min-width:var(--tv-size-120); padding:var(--tv-size-4) var(--tv-size-6); border:var(--tv-size-1) solid var(--tv-brand); border-radius:var(--tv-size-4); background:var(--tv-pane); color:var(--tv-text); font:var(--tv-size-14) var(--tv-font); outline:0; }
.tv-replay { position:absolute; z-index:var(--tv-layer-replay); left:50%; bottom:var(--tv-size-12); transform:translateX(-50%); display:flex; align-items:center; gap:var(--tv-size-2); padding:var(--tv-size-2) var(--tv-size-6); border-radius:var(--tv-size-6); background:var(--tv-popup); box-shadow:var(--tv-popup-shadow); font-size:var(--tv-size-13); }
.tv-replay[hidden] { display:none; }
.tv-replay .tv-btn { height:var(--tv-size-30); min-width:var(--tv-size-30); }
.tv-replay .tv-btn svg { width:var(--tv-size-24); height:var(--tv-size-24); }
.tv-replay output { min-width:var(--tv-size-88); padding:0 var(--tv-size-6); color:var(--tv-text-2); font-variant-numeric:tabular-nums; text-align:center; }
.chart-area.is-drawing,.chart-area.is-drawing * { cursor:crosshair !important; }
.chart-area.is-hovering-drawing,.chart-area.is-hovering-drawing * { cursor:pointer !important; }
.chart-area.is-dragging-drawing,.chart-area.is-dragging-drawing * { cursor:grabbing !important; }

/* ---- dialogs: world search (Mod+K) and indicators ---- */
.tv-search { width:min(var(--tv-size-620),calc(100vw - var(--tv-size-32))); max-height:min(var(--tv-size-640),calc(100dvh - var(--tv-size-64))); }
.tv-search[open] { display:flex; flex-direction:column; }
.tv-dialog-head { display:flex; align-items:center; justify-content:space-between; padding:var(--tv-size-16) var(--tv-size-20) var(--tv-size-8); }
.tv-dialog-head h2 { margin:0; font:var(--tv-weight-600) var(--tv-size-20)/var(--tv-size-28) var(--tv-font); }
.tv-dialog-search { display:flex; align-items:center; gap:var(--tv-size-8); margin:0 var(--tv-size-20) var(--tv-size-8); padding:0 var(--tv-size-10); border-bottom:var(--tv-size-1) solid var(--tv-border); }
.tv-dialog-search svg { width:var(--tv-size-28); height:var(--tv-size-28); flex:none; fill:none; stroke:var(--tv-text-2); }
.tv-dialog-search input { flex:1; height:var(--tv-size-44); border:0; background:transparent; color:var(--tv-text); font:var(--tv-size-16) var(--tv-font); outline:0; }
.tv-dialog-tabs { display:flex; gap:var(--tv-size-6); padding:0 var(--tv-size-20) var(--tv-size-8); }
.tv-dialog-tabs button { height:var(--tv-size-28); padding:0 var(--tv-size-12); border:0; border-radius:var(--tv-size-14); background:var(--tv-bg-3); color:var(--tv-text); font:var(--tv-size-13) var(--tv-font); cursor:pointer; }
.tv-dialog-tabs button[aria-pressed="true"] { background:var(--tv-text); color:var(--tv-bg); }
.tv-results { flex:1; min-height:0; margin:0; padding:0 0 var(--tv-size-8); overflow-y:auto; list-style:none; }
.tv-results li { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:var(--tv-size-12); min-height:var(--tv-size-44); padding:0 var(--tv-size-20); cursor:pointer; font-size:var(--tv-size-14); }
.tv-results li:is(:hover,.active) { background:var(--tv-row-hover); }
.tv-results .tv-r-name { font-weight:var(--tv-weight-600); }
.tv-results .tv-r-desc { color:var(--tv-text-2); font-size:var(--tv-size-13); }
.tv-results .tv-r-meta { color:var(--tv-text-2); font-size:var(--tv-size-12); text-align:right; }
.tv-results .tv-r-last { font-variant-numeric:tabular-nums; text-align:right; }
.tv-dialog-close { width:var(--tv-size-34); padding:0; }
.tv-indicators { width:min(var(--tv-size-520),calc(100vw - var(--tv-size-32))); }
.tv-indicators[open] { display:flex; flex-direction:column; }


/* ---- Economy: the measures as TradingView's legend toggles (a dot in the series' colour), the gold mode beside ---- */
.tv-interval { display:flex; gap:var(--tv-size-2); }
.tv-interval .tv-btn { min-width:var(--tv-size-30); padding:0 var(--tv-size-6); font-weight:var(--tv-weight-600); }
.tv-terminal .eco-chart-controls { gap:var(--tv-size-6) var(--tv-size-8); }
.tv-terminal #measure { gap:var(--tv-size-4); padding:0; border-radius:0; background:none; }
.tv-terminal #measure button { --m:var(--tv-text-2); display:inline-flex; flex-direction:row; align-items:center; gap:var(--tv-size-6); min-height:var(--tv-size-26); padding:0 var(--tv-size-8);
  border:var(--tv-size-1) solid var(--tv-border-hover); border-radius:var(--tv-size-4); background:var(--tv-pane); box-shadow:none; color:var(--tv-text-2); font:var(--tv-size-13) var(--tv-font); }
.tv-terminal #measure button::before { content:none; }
.tv-terminal #measure button[aria-pressed="true"] { border-color:var(--m); color:var(--tv-text); font-weight:var(--tv-weight-400); }
.tv-terminal #measure button[aria-pressed="true"] :is(.side-name,.side-value) { color:var(--tv-text); }
.tv-terminal #measure button:not([aria-pressed="true"]):hover { background:var(--tv-btn-hover); }
.tv-terminal #measure .side-name { color:inherit; font-size:var(--tv-size-13); font-weight:var(--tv-weight-400); letter-spacing:0; text-transform:none; }
.tv-terminal #measure .side-value { font-weight:var(--tv-weight-600); }
.tv-terminal #measure [data-measure="gross"] { --m:var(--eco-gross); }
.tv-terminal #measure [data-measure="coins"] { --m:var(--eco-coins); }
.tv-terminal #measure [data-measure="npc"] { --m:var(--eco-npc); }
.tv-terminal #measure #killsToggle { --m:var(--tv-gray-400); }
.tv-terminal #measure #priceToggle { --m:var(--average); }
.tv-terminal #measure #eventsShown { --m:var(--event-world); }
.tv-terminal #valueMode { margin:0; }
.tv-terminal #loadFeedback.has-view { border-top:var(--tv-size-1) solid var(--tv-border); background:var(--tv-popup); }
.tv-terminal .eco-panel-heading { color:var(--tv-text); font-size:var(--tv-size-14); letter-spacing:0; text-transform:none; }
.tv-terminal .eco-list li { border-bottom-color:var(--tv-border); }
.tv-terminal .eco-data-frame :is(th,td):first-child,.tv-terminal .eco-data-frame th { background:var(--tv-bg); }

/* ---- News: TradingView's headlines (the widget bar) and its story dialog ---- */
.tv-news-all { margin-left:auto; font-size:var(--tv-size-13); }
.tv-news-list { display:grid; gap:0; margin:calc(var(--tv-size-12) * -1) calc(var(--tv-size-12) * -1) 0; padding:0; list-style:none; }
.tv-news-list > li.tv-muted { padding:var(--tv-size-12); }
.tv-news-item { display:grid; gap:var(--tv-size-2); width:100%; padding:var(--tv-size-10) var(--tv-size-12); border:0; border-bottom:var(--tv-size-1) solid var(--tv-border); background:none; color:var(--tv-text); font:inherit; text-align:left; cursor:pointer; }
.tv-news-item:hover { background:var(--tv-row-hover); }
.tv-news-meta { display:flex; flex-wrap:wrap; align-items:center; color:var(--tv-text-2); font-size:var(--tv-size-12); line-height:var(--tv-size-18); }
.tv-news-meta > span::before { content:""; display:inline-block; width:var(--tv-size-3); height:var(--tv-size-3); margin:0 var(--tv-size-6); border-radius:50%; background:var(--tv-text-3); vertical-align:middle; }
.tv-news-headline { font-size:var(--tv-size-14); font-weight:var(--tv-weight-600); line-height:var(--tv-size-20); }
.tv-news-credit { color:var(--tv-text-2); font-size:var(--tv-size-12); }
.tv-news-story { width:min(var(--tv-size-720),calc(100vw - var(--tv-size-32))); max-height:min(80dvh,var(--tv-size-860)); padding:0 var(--tv-size-24) var(--tv-size-20); overflow:auto; }
.tv-news-story .tv-dialog-head { position:sticky; top:0; z-index:var(--tv-layer-inline); margin:0 calc(var(--tv-size-24) * -1); padding:var(--tv-size-12) var(--tv-size-16) var(--tv-size-8) var(--tv-size-24); background:var(--tv-popup); }
.tv-news-title { margin:var(--tv-size-4) 0 var(--tv-size-12); font:var(--tv-weight-700) var(--tv-size-24)/var(--tv-size-32) var(--tv-font); }
.tv-news-body { color:var(--tv-text); font-size:var(--tv-size-15); line-height:var(--tv-size-24); }
.tv-news-body :is(p,ul,ol,blockquote) { margin:0 0 var(--tv-size-12); }
.tv-news-body img { max-width:100%; height:auto; border-radius:var(--tv-size-6); }
.tv-news-body .tv-news-figure { display:block; margin:var(--tv-size-4) auto var(--tv-size-12); }
.tv-news-body .tv-news-float-right { float:right; max-width:min(45%, var(--tv-size-243)); margin:var(--tv-size-4) 0 var(--tv-size-8) var(--tv-size-16); }
.tv-news-body .tv-news-float-left { float:left; max-width:min(45%, var(--tv-size-243)); margin:var(--tv-size-4) var(--tv-size-16) var(--tv-size-8) 0; }
.tv-news-body .tv-news-clear { clear:both; }
/* TODO(design): no TV reference — retained APP responsive fit threshold. */
@media (max-width:480px) { .tv-news-body :is(.tv-news-float-right,.tv-news-float-left) { float:none; display:block; max-width:100%; margin:var(--tv-size-4) auto var(--tv-size-12); } }
.tv-news-body table { max-width:100%; border-collapse:collapse; font-size:var(--tv-size-13); }
.tv-news-body :is(td,th) { padding:var(--tv-size-4) var(--tv-size-8); border:var(--tv-size-1) solid var(--tv-border); }
.tv-news-source { margin:var(--tv-size-16) 0 0; font-size:var(--tv-size-13); }

/* ---- full screen: the whole terminal, as the page shows it; the rail keeps the way back, as the header is not shown ---- */
.tv-exit-full { display:none !important; }
.tv-terminal:is(.expanded,:fullscreen) .tv-exit-full { display:inline-grid !important; }
.tv-terminal:fullscreen,.tv-terminal.expanded { position:fixed; inset:0; z-index:var(--tv-layer-fullscreen); padding:0 !important; background:var(--tv-page); }

/* ---- narrow: the chart, then the rail as a row, then the panel; the page scrolls ---- */
/* TODO(design): no TV reference — retained APP responsive fit threshold. */
@media (max-width:900px) {
  body.tv-app { display:block; height:auto; overflow:visible; }
  .tv-header { position:sticky; top:0; }
  .tv-tools > :not(#tvSymbol,#tvStyle,#tvIndicators,.tv-static,.tv-interval) { display:none; }
  .tv-tools #tvIndicators span,.tv-overview-link { display:none; }
  .tv-terminal { display:flex; flex-direction:column; }
  .tv-drawbar { flex-direction:row; order:0; padding:0 var(--tv-size-4); overflow-x:auto; overflow-y:hidden; }
  .tv-drawbar-group { flex-direction:row; }
  .tv-drawbar .tv-btn { width:var(--tv-size-38); }
  .tv-hdivider { width:var(--tv-size-1); height:var(--tv-size-22); margin:0 var(--tv-size-4); }
  .tv-terminal .chart-panel { height:clamp(var(--tv-size-380),72dvh,var(--tv-size-640)); }
  .tv-terminal .dock { flex-direction:column; }
  .tv-terminal .dock-rail { order:-1; flex-direction:row; width:auto; padding:0 var(--tv-size-4); }
  .tv-terminal .dock-group { flex-direction:row; }
  .tv-terminal .dock-panel { width:auto; }
  .tv-terminal .screener { height:max(var(--tv-size-380),calc(100dvh - var(--tv-header) - var(--tv-size-100))); }
}
/* TODO(design): no TV reference — retained APP responsive fit threshold. */
@container chart (max-width:520px) {
  .tv-terminal .chart-head { max-width:calc(100% - var(--tv-size-64)); }
  .tv-legend-int { display:none; }
  .tv-terminal #side button { min-width:var(--tv-size-64); min-height:var(--tv-size-36); }
  .tv-terminal .head-line h2,.tv-terminal .symbol-last { font-size:var(--tv-size-15); }
}
/* TODO(design): no TV reference — retained APP responsive fit threshold. */
@media (max-width:600px) {
  .tv-header .site-home span,.tv-header .site-github { display:none; }
  .tv-bottom .through,.tv-bottom .tv-divider { display:none; }
  .tv-terminal .ranges button { padding:0 var(--tv-size-6); }
  .tv-symbol span { display:none; }
  .tv-symbol { padding:0; width:var(--tv-size-34); }
}
/* Phones: the bottom toolbar keeps the ranges and the scale modes, as TradingView's mobile chart does. */
/* TODO(design): no TV reference — retained APP responsive fit threshold. */
@media (max-width:480px) {
  .tv-clock { display:none; }
  .tv-tools > :not(#tvSymbol,.tv-interval) { display:none; }
  .tv-terminal .ranges button { padding:0 var(--tv-size-5); }
  .tv-scale button { min-width:var(--tv-size-24); padding:0 var(--tv-size-4); }
}

/* Quote text and fill are separate: AA labels, with the plotted series keeping its original color. */
.tv-terminal #side button[data-side="sell"][aria-checked="true"] { background:var(--tv-red-700); border-color:var(--tv-red-700); }
.tv-terminal #side button[data-side="buy"][aria-checked="true"] { background:var(--tv-blue-500); border-color:var(--tv-blue-500); }

/* Keep all primary header actions inside the existing phone breakpoint: the asset picker yields width first. */
/* TODO(design): no TV reference — APP asset names and phone fit threshold retained. */
@media (max-width:480px) {
  .tv-header-end { flex-shrink:1; min-width:0; }
  .tv-header-end #asset { min-width:0; max-width:100%; }
}
.tv-terminal #side .side-name { opacity:1; }