/* Home price table: the card look (bordered sheet, pill chips, grey group rows, tinted change pills,
   indigo / pink direction colours) with compact rows. Scoped to :is(.market-home,main[data-page=watchlist]) .sheet, so the
   tiles, the chart and the rail keep the page palette. To go back to the page's up / down colours,
   delete the four --up/--down lines in the first block. */

:is(.market-home,main[data-page=watchlist]) .sheet{
  --up:#4650d8; --up-bg:#eceefe;
  --down:#d4468f; --down-bg:#fdecf4; --down-label:#b8337a;
  --card-line:var(--line);
  background:var(--surface);
  border:1px solid var(--card-line);
  border-radius:20px;
  overflow:clip;
}
:root[data-theme=dark] :is(.market-home,main[data-page=watchlist]) .sheet{--up:#9aa3ff; --up-bg:#242a52; --down:#ff86bd; --down-bg:#3d2433; --down-label:#ff86bd}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) :is(.market-home,main[data-page=watchlist]) .sheet{--up:#9aa3ff; --up-bg:#242a52; --down:#ff86bd; --down-bg:#3d2433; --down-label:#ff86bd}
}

/* toolbar */
:is(.market-home,main[data-page=watchlist]) .sheet .toolbar{padding:12px 16px;gap:12px}
:is(.market-home,main[data-page=watchlist]) .sheet .chip{height:32px;padding:0 14px;border:1px solid var(--line-strong);background:var(--surface)}
:is(.market-home,main[data-page=watchlist]) .sheet .chip[aria-selected=true]{background:var(--up-bg);border-color:var(--up-bg);color:var(--up);font-weight:650}
:is(.market-home,main[data-page=watchlist]) .sheet .search{height:32px;background:var(--surface);border-color:var(--line-strong)}
:is(.market-home,main[data-page=watchlist]) .sheet .seg{border-color:var(--line-strong)}

/* head and group rows */
:is(.market-home,main[data-page=watchlist]) .sheet .grid thead th{padding:9px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
:is(.market-home,main[data-page=watchlist]) .sheet .grid tr.grp th{padding:8px 12px;background:var(--surface-2);border-block:1px solid var(--line);font-size:12.5px;font-weight:650;color:var(--ink)}
:is(.market-home,main[data-page=watchlist]) .sheet .grid tbody tr.grp:first-child th{border-top:0}

/* asset rows: one 48px line, the price and its unit stacked tightly */
:is(.market-home,main[data-page=watchlist]) .sheet .grid td{height:48px;padding:5px 12px}
:is(.market-home,main[data-page=watchlist]) .sheet .grid tbody tr:last-child td{border-bottom:1px solid var(--line)}
:is(.market-home,main[data-page=watchlist]) .sheet .asset{gap:10px}
:is(.market-home,main[data-page=watchlist]) .sheet .asset .ico{width:32px;height:32px;border-radius:10px}
:is(.market-home,main[data-page=watchlist]) .sheet .nm strong{font-size:14px;line-height:1.4}
:is(.market-home,main[data-page=watchlist]) .sheet .nm small{font-size:11px;line-height:1.3}
:is(.market-home,main[data-page=watchlist]) .sheet .c-price b{font-size:16px;line-height:1.35}
:is(.market-home,main[data-page=watchlist]) .sheet .c-price small{font-size:11px;line-height:1.3}
:is(.market-home,main[data-page=watchlist]) .sheet .c-spark .spark{width:84px;height:26px}
:is(.market-home,main[data-page=watchlist]) .sheet .rl{margin-top:3px;font-size:10px;line-height:1.3}
:is(.market-home,main[data-page=watchlist]) .sheet .range svg{height:6px}

/* the change as a tinted pill again */
:is(.market-home,main[data-page=watchlist]) .sheet .chg{height:24px;padding:0 9px;border-radius:999px;font-size:12.5px;font-weight:650}
:is(.market-home,main[data-page=watchlist]) .sheet .chg.up{color:var(--up);background:var(--up-bg)}
:is(.market-home,main[data-page=watchlist]) .sheet .chg.down{color:var(--down-label);background:var(--down-bg)}
:is(.market-home,main[data-page=watchlist]) .sheet .chg.flat{color:var(--muted);background:var(--flat-bg)}
:is(.market-home,main[data-page=watchlist]) .sheet .chg.down .tri{fill:currentColor}

:is(.market-home,main[data-page=watchlist]) .sheet .sheet-foot{padding:11px 16px;border-top:0}

@media (max-width:520px){
  :is(.market-home,main[data-page=watchlist]) .sheet{border-radius:16px}
  :is(.market-home,main[data-page=watchlist]) .sheet .toolbar{padding:10px 12px}
  :is(.market-home,main[data-page=watchlist]) .sheet .grid td{padding:5px 8px}
}

/* ---- the market hub at "/" (templates/market_hub.html): the same card look on its quote tables ---- */
.universe-market-grid .universe-panel,.market-highlights{
  --up:#4650d8; --up-bg:#eceefe;
  --down:#d4468f; --down-bg:#fdecf4; --down-label:#b8337a;
  border-radius:20px;
}
:root[data-theme=dark] .universe-market-grid .universe-panel,:root[data-theme=dark] .market-highlights{--up:#9aa3ff; --up-bg:#242a52; --down:#ff86bd; --down-bg:#3d2433; --down-label:#ff86bd}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .universe-market-grid .universe-panel,:root:not([data-theme=light]) .market-highlights{--up:#9aa3ff; --up-bg:#242a52; --down:#ff86bd; --down-bg:#3d2433; --down-label:#ff86bd}
}
.universe-market-grid .universe-table-wrap{border-bottom:0}
.universe-market-grid .market-quotes-table thead th{padding-block:7px;background:var(--surface-2);border-bottom:1px solid var(--line);color:var(--muted);font-weight:500}
.universe-market-grid .market-quotes-table tbody th,
.universe-market-grid .market-quotes-table tbody td{padding-block:3px}
.universe-market-grid .market-quotes-table tbody tr:last-child>*{border-bottom:1px solid var(--line)}
.universe-market-grid .market-quotes-table tbody tr:hover>*{background:var(--surface-2)}
.universe-market-grid .market-delta,.market-highlight-table .market-delta{padding:2px 9px;border-radius:999px;font-weight:650}
.universe-market-grid .market-delta.up,.market-highlight-table .market-delta.up{color:var(--up);background:var(--up-bg)}
.universe-market-grid .market-delta.down,.market-highlight-table .market-delta.down{color:var(--down-label);background:var(--down-bg)}
.universe-market-grid .market-delta.flat,.market-highlight-table .market-delta.flat{color:var(--muted);background:var(--flat-bg)}
.universe-market-grid .section-count{background:var(--up-bg);color:var(--up)}
.universe-market-grid .market-delta,.market-highlight-table .market-delta{padding:1px 8px;border-radius:11px;font-size:11px;gap:3px}

/* ---- day range as one bar: the marker is where the price sits between the day's low and high ---- */
.market-range-cell{min-width:128px}
.range-bar{width:100%;max-width:190px;margin-inline:auto;direction:ltr}
.range-track{width:100%;height:12px;overflow:visible}
.range-track line{vector-effect:non-scaling-stroke;stroke-linecap:round}
.range-line{stroke:var(--line-strong);stroke-width:4}
.range-dot{stroke:var(--ink);stroke-width:4}
.range-labels{display:flex;justify-content:space-between;gap:8px;margin-top:3px;font-size:10.5px;line-height:1.3;color:var(--muted);unicode-bidi:isolate}
.universe-market-grid .market-range-cell{min-width:112px}
.universe-market-grid .range-labels{font-size:10px;gap:6px}

/* ---- softer tables: a barely-there tint behind column titles, hairline row separators ---- */
:root{
  --soft-line:color-mix(in srgb,var(--line) 45%,transparent);
  --soft-head:color-mix(in srgb,var(--surface-2) 40%,var(--surface));
}
.universe-table th,.universe-table td,
.market-highlight-table th,.market-highlight-table td,
.universe-mini th,.universe-mini td{border-bottom-color:var(--soft-line)}
.universe-table thead th,.market-highlight-table thead th,.universe-mini thead th,
.universe-market-grid .market-quotes-table thead th{background:var(--soft-head);border-bottom-color:var(--soft-line)}
.universe-market-grid .market-quotes-table tbody tr:last-child>*{border-bottom-color:var(--soft-line)}
.universe-table-wrap{border-top-color:var(--soft-line);border-bottom-color:var(--soft-line)}
.universe-viewall{border-top-color:var(--soft-line)}
.universe-market-grid .market-quotes-table tbody tr:hover>*,.market-highlight-table tbody tr:hover{background:var(--soft-head)}
:is(.market-home,main[data-page=watchlist]) .sheet .grid td,:is(.market-home,main[data-page=watchlist]) .sheet .grid thead th{border-bottom-color:var(--soft-line)}
:is(.market-home,main[data-page=watchlist]) .sheet .grid tr.grp th{background:var(--soft-head);border-block-color:var(--soft-line)}

/* ---- change column: the percent only; the amount appears in a small tag on hover ---- */
.market-quotes-table .market-delta,.market-highlight-table .market-delta{position:relative;cursor:default}
.market-quotes-table .market-delta .market-delta-values,.market-highlight-table .market-delta .market-delta-values{flex-direction:row;align-items:center;gap:0;line-height:1.4}
.market-quotes-table .market-delta small:not(:empty):before,.market-quotes-table .market-delta small:not(:empty):after,
.market-highlight-table .market-delta small:not(:empty):before,.market-highlight-table .market-delta small:not(:empty):after{content:none}
.market-quotes-table .market-delta [data-change-amount],.market-highlight-table .market-delta [data-change-amount]{
  position:absolute;z-index:6;bottom:calc(100% + 5px);left:50%;transform:translate(-50%,3px);
  padding:3px 9px;border-radius:8px;background:var(--ink);color:var(--bg);font-size:11px;font-weight:500;line-height:1.5;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .12s,transform .12s}
.market-quotes-table .market-delta:hover [data-change-amount],.market-highlight-table .market-delta:hover [data-change-amount]{opacity:1;transform:translate(-50%,0)}
/* a source that gives an amount but no percent: the amount is all there is, so it stays in the pill */
.market-quotes-table .market-delta-values:has(small:empty) [data-change-amount],.market-highlight-table .market-delta-values:has(small:empty) [data-change-amount]{
  position:static;transform:none;padding:0;border-radius:0;background:none;color:inherit;font-size:inherit;font-weight:inherit;opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.market-quotes-table .market-delta [data-change-amount],.market-highlight-table .market-delta [data-change-amount]{transition:none}}

/* watchlist: the range marker is the tall bar of the home table, not a dot */
main[data-page=watchlist] .range .dot{fill:var(--ink);stroke:none;transform-box:fill-box;transform-origin:center;transform:scale(.5,1.9)}

/* a slimmer day-range bar, so the tables fit their column before they need a scrollbar */
.market-range-cell,.universe-market-grid .market-range-cell{min-width:88px}
.range-bar{max-width:124px}
.market-range-cell .range-labels{font-size:10px}
.universe-market-grid .universe-table th,.universe-market-grid .universe-table td{padding-inline:9px}
.universe-market-grid .market-quotes-table{min-width:0}
@media(max-width:1180px){.universe-table.market-quotes-table{min-width:0}}
/* the small chart-link column is the first thing to go when room runs short: the name already opens the same page */
@media(max-width:1180px){.universe-market-grid .market-quotes-table thead th:last-child,.universe-market-grid .market-quotes-table tbody td:last-child{display:none}}
@media(max-width:620px){.market-quotes-table thead th:last-child,.market-quotes-table tbody td:last-child{display:none}.market-range-cell,.universe-market-grid .market-range-cell{min-width:80px}.range-bar{max-width:100px}}