/*
 * The overview pages (markets-overview.html, economy-overview.html) in the idiom of TradingView's /markets/ page:
 * a page of sections, each a heading with a link onward, then its widget: the market summary (a large chart and the
 * symbol cards that switch it), hotlists, a heatmap, tables and a calendar. Tokens and controls are css/tv.css.
 */
body.tv-page { min-height:100dvh; background:var(--tv-bg); color:var(--tv-text); }
.tv-page .tv-header { position:sticky; top:0; margin:0; border-bottom:var(--tv-size-1) solid var(--tv-border); }
.tv-page .tv-header-row { max-width:var(--tv-size-1440); margin:0 auto; padding:0 var(--tv-size-16); }
.tv-page-search { display:flex; align-items:center; gap:var(--tv-size-8); width:min(var(--tv-size-360),40vw); height:var(--tv-size-34); margin:0 auto; padding:0 var(--tv-size-12); border:0; border-radius:var(--tv-size-18);
  background:var(--tv-bg-3); color:var(--tv-text-2); font:var(--tv-size-14) var(--tv-font); cursor:pointer; }
.tv-page-search:hover { background:var(--tv-btn-hover); color:var(--tv-text); }
.tv-page-search svg { width:var(--tv-size-22); height:var(--tv-size-22); flex:none; fill:none; stroke:currentColor; }
.tv-page-search kbd { margin-left:auto; padding:0 var(--tv-size-6); border:var(--tv-size-1) solid var(--tv-border-hover); border-radius:var(--tv-size-4); font:var(--tv-size-12) var(--tv-font); }
/* Phones: the search and the link onward keep their icons. */
/* TODO(design): no TV reference — retained APP responsive fit threshold. */
@media (max-width:600px) {
  .tv-page-search { width:var(--tv-size-34); margin:0 0 0 auto; padding:0; justify-content:center; background:transparent; }
  .tv-page-search :is(span,kbd),.tv-page .tv-header-end .tv-btn span { display:none; }
  .tv-page .tv-header-row { padding:0 var(--tv-size-8); }
}
/* TODO(design): no TV reference — retained APP responsive fit threshold. */
@media (max-width:360px) { .tv-page .site-section { display:block; max-width:var(--tv-size-132); overflow:hidden; text-overflow:ellipsis; } }

.tv-main { max-width:var(--tv-size-1440); margin:0 auto; padding:0 var(--tv-size-40) var(--tv-size-96); }
/* TODO(design): no TV reference — retained APP responsive fit threshold. */
@media (max-width:900px) { .tv-main { padding:0 var(--tv-size-16) var(--tv-size-64); } }

/* The hero: a large heading, a line under it, then the page's sections as chips. */
.tv-hero { padding:var(--tv-size-56) 0 var(--tv-size-24); }
.tv-hero h1 { margin:0; font:var(--tv-weight-700) clamp(var(--tv-size-32),5vw,var(--tv-size-56))/1.1 var(--tv-font); letter-spacing:-.02em; }
.tv-hero p { max-width:var(--tv-size-760); margin:var(--tv-size-14) 0 0; color:var(--tv-text-2); font-size:var(--tv-size-18); line-height:var(--tv-size-28); }
.tv-chips { display:flex; flex-wrap:wrap; gap:var(--tv-size-8); margin-top:var(--tv-size-28); }
.tv-chips a,.tv-chips button { display:inline-flex; align-items:center; gap:var(--tv-size-6); height:var(--tv-size-36); padding:0 var(--tv-size-16); border:var(--tv-size-1) solid var(--tv-border-hover); border-radius:var(--tv-size-18);
  background:transparent; color:var(--tv-text); font:var(--tv-weight-500) var(--tv-size-15) var(--tv-font); cursor:pointer; }
.tv-chips a:hover,.tv-chips button:hover { background:var(--tv-bg-3); color:var(--tv-text); }
.tv-chips [aria-pressed="true"],.tv-chips [aria-selected="true"] { border-color:var(--tv-text); background:var(--tv-text); color:var(--tv-bg); }

/* A section: its heading links onward, a chevron after it, as TradingView heads every widget. */
.tv-section { margin-top:var(--tv-size-56); scroll-margin-top:var(--tv-size-56); }
.tv-section-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--tv-size-12); margin-bottom:var(--tv-size-20); }
.tv-section-head h2 { margin:0; font:var(--tv-weight-700) var(--tv-size-28)/var(--tv-size-36) var(--tv-font); letter-spacing:-.01em; }
.tv-section-head h2 a { color:var(--tv-text); }
.tv-section-head h2 a::after { content:""; display:inline-block; width:var(--tv-size-10); height:var(--tv-size-10); margin-left:var(--tv-size-10); border:solid currentColor; border-width:var(--tv-size-2_5) var(--tv-size-2_5) 0 0; transform:translateY(calc(var(--tv-size-2) * -1)) rotate(45deg); }
.tv-section-head h2 a:hover { color:var(--tv-brand); }
.tv-section-note { margin:var(--tv-size-8) 0 0; color:var(--tv-text-2); font-size:var(--tv-size-14); }

/* Market summary: the large chart beside the symbol cards that choose it. */
.tv-summary { display:grid; grid-template-columns:minmax(0,1fr) var(--tv-size-340); gap:var(--tv-size-32); }
/* TODO(design): no TV reference — retained APP responsive fit threshold. */
@media (max-width:1000px) { .tv-summary { grid-template-columns:minmax(0,1fr); } }
.tv-summary-quote { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--tv-size-4) var(--tv-size-12); }
.tv-summary-name { width:100%; color:var(--tv-text-2); font-size:var(--tv-size-14); }
.tv-summary-last { font:var(--tv-weight-600) var(--tv-size-36)/var(--tv-size-44) var(--tv-font); font-variant-numeric:tabular-nums; }
.tv-summary-unit { color:var(--tv-text-2); font-size:var(--tv-size-14); }
.tv-summary-change { font-size:var(--tv-size-16); font-weight:var(--tv-weight-600); font-variant-numeric:tabular-nums; }
.tv-summary-chart { position:relative; min-width:0; height:var(--tv-size-380); margin-top:var(--tv-size-12); overflow:hidden; }
.tv-summary-ranges { display:flex; gap:var(--tv-size-4); margin-top:var(--tv-size-12); }
.tv-summary-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--tv-size-8); margin-top:var(--tv-size-12); }
.tv-summary-tools .tv-summary-ranges { margin-top:0; }
.tv-summary-ranges button { height:var(--tv-size-30); padding:0 var(--tv-size-12); border:0; border-radius:var(--tv-size-15); background:transparent; color:var(--tv-text); font:var(--tv-weight-500) var(--tv-size-14) var(--tv-font); cursor:pointer; }
.tv-summary-ranges button:hover { background:var(--tv-bg-3); }
.tv-summary-ranges button[aria-pressed="true"] { background:var(--tv-bg-3); color:var(--tv-text); font-weight:var(--tv-weight-700); }
.tv-cards { display:grid; gap:var(--tv-size-4); align-content:start; margin:0; padding:0; list-style:none; }
.tv-card { display:grid; grid-template-columns:var(--tv-size-36) minmax(0,1fr) auto; align-items:center; gap:var(--tv-size-4) var(--tv-size-12); padding:var(--tv-size-12); border:0; border-radius:var(--tv-size-12);
  background:transparent; color:var(--tv-text); font:inherit; text-align:left; cursor:pointer; width:100%; }
.tv-card:hover { background:var(--tv-bg-2); }
.tv-card[aria-pressed="true"] { background:var(--tv-bg-3); }
.tv-card-name { min-width:0; overflow:hidden; font-weight:var(--tv-weight-600); text-overflow:ellipsis; white-space:nowrap; }
.tv-card-desc { display:block; overflow:hidden; color:var(--tv-text-2); font-size:var(--tv-size-13); font-weight:var(--tv-weight-400); text-overflow:ellipsis; white-space:nowrap; }
.tv-card-value { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tv-card-value small { display:block; font-size:var(--tv-size-13); }

/* A symbol's round logo: its initial on a colour of its own. */
.tv-logo-chip { display:grid; place-items:center; width:var(--tv-size-32); height:var(--tv-size-32); border-radius:50%; background:var(--c,var(--tv-brand)); color:var(--tv-white); font:var(--tv-weight-700) var(--tv-size-14) var(--tv-font); flex:none; }
.tv-logo-chip.sm { width:var(--tv-size-28); height:var(--tv-size-28); font-size:var(--tv-size-12); }

/* Change, as TradingView's pill: the sign's colour on its soft tint. */
.tv-pill { display:inline-flex; align-items:center; justify-content:center; min-width:var(--tv-size-68); height:var(--tv-size-24); padding:0 var(--tv-size-8); border-radius:var(--tv-size-6); background:var(--tv-bg-3);
  color:var(--tv-text-2); font:var(--tv-weight-600) var(--tv-size-13) var(--tv-font); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tv-pill.up { background:var(--tv-up-soft); color:var(--tv-up-text); }
.tv-pill.down { background:var(--tv-down-soft); color:var(--tv-down-text); }

/* Hotlists: TradingView's highlights, lists of six beside each other. */
.tv-hotlists { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(var(--tv-size-300),100%),1fr)); gap:var(--tv-size-32) var(--tv-size-40); }
.tv-hotlist h3 { display:flex; align-items:center; justify-content:space-between; margin:0 0 var(--tv-size-8); font:var(--tv-weight-700) var(--tv-size-18)/var(--tv-size-26) var(--tv-font); }
.tv-hotlist h3 a { color:var(--tv-text); }
.tv-hotlist h3 a:hover { color:var(--tv-brand); }
.tv-hotlist ol { margin:0; padding:0; list-style:none; }
.tv-hotlist li a { display:grid; grid-template-columns:var(--tv-size-28) minmax(0,1fr) auto auto; align-items:center; gap:var(--tv-size-12); min-height:var(--tv-size-52); padding:0 var(--tv-size-8); margin:0 calc(var(--tv-size-8) * -1); border-radius:var(--tv-size-8); color:var(--tv-text); }
.tv-hotlist li a:hover { background:var(--tv-bg-2); color:var(--tv-text); }
.tv-hotlist .tv-row-name { min-width:0; overflow:hidden; font-weight:var(--tv-weight-600); text-overflow:ellipsis; white-space:nowrap; }
.tv-hotlist .tv-row-name small { display:block; overflow:hidden; color:var(--tv-text-2); font-size:var(--tv-size-12); font-weight:var(--tv-weight-400); text-overflow:ellipsis; }
.tv-hotlist .tv-row-value { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.tv-more { display:inline-flex; align-items:center; gap:var(--tv-size-6); margin-top:var(--tv-size-12); color:var(--tv-text); font-weight:var(--tv-weight-600); }
.tv-more::after { content:""; width:var(--tv-size-7); height:var(--tv-size-7); border:solid currentColor; border-width:var(--tv-size-2) var(--tv-size-2) 0 0; transform:rotate(45deg); }

/* The heatmap: a squarified treemap, each tile a world sized by its weight and coloured by its change. */
.tv-heat-tools { display:flex; flex-wrap:wrap; align-items:center; gap:var(--tv-size-8) var(--tv-size-16); }
.tv-heat-tools label { display:inline-flex; align-items:center; gap:var(--tv-size-8); color:var(--tv-text-2); font-size:var(--tv-size-13); }
.tv-heat-tools select { height:var(--tv-size-30); padding:0 var(--tv-size-28) 0 var(--tv-size-10); border:var(--tv-size-1) solid var(--tv-border-hover); border-radius:var(--tv-size-6); appearance:none; -webkit-appearance:none;
  background:var(--tv-input) 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-6) center/var(--tv-size-18) no-repeat;
  color:var(--tv-text); font:var(--tv-size-13) var(--tv-font); }
.tv-heatmap { position:relative; height:var(--tv-size-560); overflow:hidden; border-radius:var(--tv-size-8); background:var(--tv-bg-3); }
/* TODO(design): no TV reference — retained APP responsive fit threshold. */
@media (max-width:700px) { .tv-heatmap { height:var(--tv-size-440); } }
.tv-tile { position:absolute; display:grid; place-content:center; justify-items:center; overflow:hidden; padding:var(--tv-size-2); border:var(--tv-size-1) solid var(--tv-bg); color:var(--tv-white); text-align:center;
  font:var(--tv-weight-600) var(--tv-size-13)/1.2 var(--tv-font); text-decoration:none; text-shadow:var(--tv-text-shadow); }
.tv-tile:hover { z-index:var(--tv-layer-inline); outline:var(--tv-size-2) solid var(--tv-text); outline-offset:calc(var(--tv-size-2) * -1); color:var(--tv-white); }
.tv-tile span { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tv-tile .tv-tile-change { font-weight:var(--tv-weight-400); opacity:.95; }
.tv-heat-scale { display:flex; flex-wrap:wrap; align-items:center; gap:var(--tv-size-2); margin-top:var(--tv-size-12); color:var(--tv-text-2); font-size:var(--tv-size-12); }
/* TODO(design): no TV reference — retained APP responsive fit threshold. */
@media (max-width:600px) { .tv-heat-scale span { min-width:var(--tv-size-40); font-size:var(--tv-size-11); } }
.tv-heat-scale span { display:grid; place-items:center; min-width:var(--tv-size-52); height:var(--tv-size-22); color:var(--tv-white); font-weight:var(--tv-weight-600); }
.tv-heat-scale span:first-of-type { border-radius:var(--tv-size-4) 0 0 var(--tv-size-4); } .tv-heat-scale span:last-of-type { border-radius:0 var(--tv-size-4) var(--tv-size-4) 0; }
.tv-tip-float { position:fixed; z-index:var(--tv-layer-heat-tip); display:grid; gap:var(--tv-size-2); min-width:var(--tv-size-180); padding:var(--tv-size-10) var(--tv-size-12); border-radius:var(--tv-size-8); background:var(--tv-popup); color:var(--tv-text);
  box-shadow:var(--tv-popup-shadow); font-size:var(--tv-size-13); pointer-events:none; }
.tv-tip-float strong { font-size:var(--tv-size-15); }
.tv-tip-float .tv-muted { font-size:var(--tv-size-12); }

/* Tables: TradingView's screener rows, sticky heads, sortable columns. */
.tv-table-wrap { overflow:auto; border-top:var(--tv-size-1) solid var(--tv-border); }
table.tv-table { width:100%; border-collapse:collapse; font-size:var(--tv-size-14); font-variant-numeric:tabular-nums; }
table.tv-table th { position:sticky; top:0; z-index:var(--tv-layer-inline); height:var(--tv-size-40); padding:0 var(--tv-size-12); border-bottom:var(--tv-size-1) solid var(--tv-border); background:var(--tv-bg);
  color:var(--tv-text-2); font-size:var(--tv-size-13); font-weight:var(--tv-weight-400); text-align:right; white-space:nowrap; }
table.tv-table th:first-child,table.tv-table td:first-child { text-align:left; }
table.tv-table th button { padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
table.tv-table th button:hover { color:var(--tv-text); }
table.tv-table th[aria-sort="ascending"] button::after { content:" ↑"; }
table.tv-table th[aria-sort="descending"] button::after { content:" ↓"; }
table.tv-table td { height:var(--tv-size-52); padding:0 var(--tv-size-12); border-bottom:var(--tv-size-1) solid var(--tv-border); text-align:right; white-space:nowrap; }
table.tv-table tbody tr { cursor:pointer; }
table.tv-table tbody tr:hover { background:var(--tv-bg-2); }
table.tv-table .tv-cell-sym { display:flex; align-items:center; gap:var(--tv-size-10); }
table.tv-table .tv-cell-sym a { color:var(--tv-text); font-weight:var(--tv-weight-600); }
table.tv-table .tv-cell-sym small { display:block; color:var(--tv-text-2); font-size:var(--tv-size-12); font-weight:var(--tv-weight-400); }
table.tv-table .tv-text-left { text-align:left; }
.tv-table-tools { display:flex; flex-wrap:wrap; align-items:center; gap:var(--tv-size-8) var(--tv-size-12); margin-bottom:var(--tv-size-12); }
.tv-table-tools .tv-input { height:var(--tv-size-34); width:var(--tv-size-220); }

/* Regions: a bar per region, its share of the whole. */
.tv-bars { display:grid; gap:var(--tv-size-14); margin:0; padding:0; list-style:none; }
.tv-bars li { display:grid; grid-template-columns:var(--tv-size-240) minmax(0,1fr) var(--tv-size-220) var(--tv-size-64); align-items:center; gap:var(--tv-size-16); font-variant-numeric:tabular-nums; }
.tv-bars .tv-bar { height:var(--tv-size-10); border-radius:var(--tv-size-5); background:var(--tv-bg-3); overflow:hidden; }
.tv-bars .tv-bar i { display:block; height:100%; border-radius:var(--tv-size-5); background:var(--tv-brand); }
.tv-bars .tv-bar-value { display:flex; align-items:center; justify-content:flex-end; gap:var(--tv-size-10); font-weight:var(--tv-weight-600); white-space:nowrap; }
.tv-bars .tv-bar-share { color:var(--tv-text-2); text-align:right; }
/* TODO(design): no TV reference — retained APP responsive fit threshold. */
@media (max-width:700px) { .tv-bars li { grid-template-columns:1fr auto; } .tv-bars .tv-bar { grid-column:1 / -1; order:3; } .tv-bars .tv-bar-share { display:none; } }

/* Stat cards: the economy's headline figures, as TradingView's economic indicators. */
.tv-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(var(--tv-size-220),100%),1fr)); gap:var(--tv-size-16); }
.tv-stat { display:grid; gap:var(--tv-size-6); padding:var(--tv-size-20); border-radius:var(--tv-size-16); background:var(--tv-bg-2); border:0; color:var(--tv-text); font:inherit; text-align:left; cursor:pointer; }
.tv-stat:hover { background:var(--tv-bg-3); }
.tv-stat[aria-pressed="true"] { box-shadow:inset 0 0 0 var(--tv-size-2) var(--tv-text); }
.tv-stat-name { display:flex; align-items:center; gap:var(--tv-size-8); color:var(--tv-text-2); font-size:var(--tv-size-14); }
.tv-stat-name i { width:var(--tv-size-10); height:var(--tv-size-10); border-radius:50%; background:var(--c); }
.tv-stat-value { font:var(--tv-weight-700) var(--tv-size-28)/var(--tv-size-34) var(--tv-font); font-variant-numeric:tabular-nums; }
.tv-stat-sub { display:flex; align-items:center; gap:var(--tv-size-8); color:var(--tv-text-2); font-size:var(--tv-size-13); }

/* The calendar: TradingView's economic calendar, a day per group, an event per row. */
.tv-calendar { display:grid; gap:var(--tv-size-24); }
.tv-cal-day h3 { position:sticky; top:var(--tv-size-38); z-index:var(--tv-layer-inline); margin:0; padding:var(--tv-size-8) 0; border-bottom:var(--tv-size-1) solid var(--tv-border); background:var(--tv-bg); font:var(--tv-weight-700) var(--tv-size-15) var(--tv-font); }
.tv-cal-day ul { margin:0; padding:0; list-style:none; }
.tv-cal-day li { display:grid; grid-template-columns:var(--tv-size-120) var(--tv-size-28) minmax(0,1fr) auto; align-items:center; gap:var(--tv-size-12); min-height:var(--tv-size-52); padding:var(--tv-size-6) 0; border-bottom:var(--tv-size-1) solid var(--tv-border); }
.tv-cal-day .tv-cal-when { color:var(--tv-text-2); font-size:var(--tv-size-13); font-variant-numeric:tabular-nums; }
.tv-cal-day .tv-cal-title { min-width:0; font-weight:var(--tv-weight-600); }
.tv-cal-day .tv-cal-title small { display:block; overflow:hidden; color:var(--tv-text-2); font-size:var(--tv-size-13); font-weight:var(--tv-weight-400); text-overflow:ellipsis; white-space:nowrap; }
.tv-cal-day .tv-cal-scope { color:var(--tv-text-2); font-size:var(--tv-size-13); text-align:right; }
.tv-cal-mark { display:grid; place-items:center; width:var(--tv-size-24); height:var(--tv-size-24); border:var(--tv-size-1_5) solid var(--c); border-radius:var(--tv-size-12); color:var(--c); font:var(--tv-weight-700) var(--tv-size-11) var(--tv-font); }
/* TODO(design): no TV reference — retained APP responsive fit threshold. */
@media (max-width:700px) { .tv-cal-day li { grid-template-columns:var(--tv-size-28) minmax(0,1fr); } .tv-cal-day .tv-cal-when,.tv-cal-day .tv-cal-scope { grid-column:2; text-align:left; } }

.tv-footer { margin-top:var(--tv-size-96); padding:var(--tv-size-24) 0; border-top:var(--tv-size-1) solid var(--tv-border); color:var(--tv-text-2); font-size:var(--tv-size-13); }
.tv-skeleton { color:var(--tv-text-2); }

/* Top stories: the latest of Tibia's news as cards, each opening its story (js/tv-news.js). */
.tv-stories { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(var(--tv-size-260),100%),1fr)); gap:var(--tv-size-16); margin:0; padding:0; list-style:none; }
.tv-story { display:grid; align-content:start; gap:var(--tv-size-8); width:100%; height:100%; min-height:var(--tv-size-120); padding:var(--tv-size-16); border:0; border-radius:var(--tv-size-12); background:var(--tv-bg-2);
  color:var(--tv-text); font:inherit; text-align:left; cursor:pointer; }
.tv-story:hover { background:var(--tv-bg-3); }
.tv-story-headline { font:var(--tv-weight-600) var(--tv-size-17)/var(--tv-size-24) var(--tv-font); }