/* TradingView-style charts (assets/tvcharts.js): the chart, its pane headers (crosshair.css's .xh-head look), its loading state */
.tv-host { position: relative; width: 100%; min-height: 360px; }
.tv-box { position: relative; width: 100%; }
.tv-head { position: absolute; z-index: 5; pointer-events: none; font: 12px/18px var(--rv-font); white-space: nowrap; overflow: hidden; }
.tv-head .xh-in { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: center; }
.tv-head .xh-help { position: absolute; right: 0; top: 1px; }
.tv-head .xh-in { padding-right: 22px; }
.tv-head .xh-item, .tv-head .xh-help { pointer-events: auto; }
.tv-head .xh-title { color: var(--rv-ink); }
.tv-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 0; }
.tv-head b { font-weight: 600; }
.tv-host.tv-small { min-height: 200px; margin-top: 12px; }
.tv-message { display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--rv-mute); font: 13px var(--rv-font); }
/* above the positions chart: a window of days to read as a cohort (apps/perpsview.py: window_bar) */
.tv-winbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 6px; }
.app .tv-winbar button { height: 32px; min-height: 32px; padding: 0 12px; font: 500 12px var(--rv-font); }
.app .tv-winbar button.on { background: var(--rv-ink); color: var(--rv-paper); }
.app .tv-winbar .tv-date { flex: 0 0 auto; width: 150px; }  /* dcc.Input: a wrapper (the class, a flex box) around the input */
.app .tv-winbar .tv-date input { width: 100%; min-height: 0; height: 32px; padding: 0 6px; border: 1px solid var(--rv-ink); border-radius: 0;
                                 font: 500 12px var(--rv-mono); background: var(--rv-paper); color: var(--rv-ink); }
/* every plot header's chips live in .xh-in (moved from zz_theme.css, which the embeds do not load: there the phone's title ran into its
   readout) (the "?" beside it, at the top right like on every plot) */
.xh-head > .xh-in { display:flex; flex-wrap:wrap; gap:inherit; align-items:center; flex:1 1 auto; min-width:0; }
.xh-head .xh-read { display:contents; }
/* phone: two rows, each one line that scrolls sideways, fading where there is more */
.xh-head > .xh-in.xh-two { flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:3px; }
.xh-two > .xh-row { display:flex; align-items:center; gap:6px; overflow-x:auto; overflow-y:hidden; white-space:nowrap; pointer-events:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.xh-two > .xh-row::-webkit-scrollbar { display:none; }
.xh-two > .xh-row > *, .xh-two .xh-read > * { flex:none; line-height:17px; }
.xh-two .xh-read { display:flex; align-items:center; gap:8px; flex:none; }
.xh-two > .xh-row.xh-more { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent); }