/* Tradility COT Positioning. Tokens mirror the VIX plugin so both charts
   read as one family, but the file is independent on purpose. */
.tcot-stg {
	--tcot-fg: #1a1a1a;
	--tcot-muted: #6b7280;
	--tcot-line: rgba(128, 128, 128, 0.25);
	--tcot-long: #1a7f5a;
	--tcot-short: #CD1316;
	--tcot-bg: transparent;

	color: var(--tcot-fg);
	background: var(--tcot-bg);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-variant-numeric: tabular-nums;
	max-width: 100%;
}

.tcot-title { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.tcot-ticker { color: var(--tcot-short); font-weight: 700; letter-spacing: .04em; }
.tcot-name { font-size: 1.25rem; font-weight: 600; }
.tcot-exch { color: var(--tcot-muted); font-size: .9rem; }
.tcot-stand { color: var(--tcot-muted); font-size: .85rem; margin-top: .15rem; }

/* Single column: every panel gets the full width. The scatter used to share a
   row with the net readout, which cost it about a third of its width for
   numbers that read fine as a strip. */
.tcot-panels { display: grid; gap: 1.25rem; margin-top: 1rem; }

.tcot-panel { min-width: 0; }
.tcot-panel-title { font-size: .95rem; font-weight: 600; margin-bottom: .35rem; }

/* Title row for a panel that carries controls. The hint sits next to the title
   and the reset button is pushed to the far end. */
.tcot-panel-head {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	flex-wrap: wrap;
	margin-bottom: .35rem;
}
.tcot-panel-head .tcot-panel-title { margin-bottom: 0; }
.tcot-zoom-hint { font-size: .72rem; color: var(--tcot-muted); }
/* The gesture hint is mouse-only advice, and it is the first thing worth
   dropping when the row gets tight. */
@media (max-width: 560px), (hover: none) {
	.tcot-zoom-hint { display: none; }
}
.tcot-zoom-reset {
	font: inherit;
	font-size: .78rem;
	margin-left: auto;
	padding: .25rem .6rem;
	border: 1px solid var(--tcot-line);
	border-radius: 6px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.tcot-zoom-reset:hover { border-color: var(--tcot-muted); }
.tcot-zoom-reset:focus-visible { outline: 2px solid var(--tcot-long); outline-offset: 1px; }
/* Box-zoom is a selection gesture, so the cursor should say so. */
.tcot-canvas-wrap:not(.is-oi) canvas { cursor: crosshair; }

/* The scatter is dense — a year of weekly dots per side — so it scales with the
   viewport instead of sitting at a fixed 340px. The floor keeps it usable on a
   phone; the ceiling stops it running past the fold on a tall desktop screen. */
.tcot-canvas-wrap { position: relative; height: clamp(420px, 68vh, 820px); }
.tcot-canvas-wrap.is-oi { height: clamp(180px, 26vh, 300px); }
.tcot-canvas-wrap canvas { position: absolute; inset: 0; }

/* Now a full-width strip above the chart rather than a sidebar card: the net
   figure and the per-trader block sit side by side and the whole thing is one
   or two lines tall, so the scatter keeps the vertical space. */
.tcot-net {
	border: 1px solid var(--tcot-line);
	border-radius: 8px;
	padding: .85rem 1rem;
}
@media (min-width: 720px) {
	.tcot-net {
		display: flex;
		align-items: flex-start;
		gap: 1.5rem;
		flex-wrap: wrap;
	}
	.tcot-net > .tcot-net-label,
	.tcot-net > .tcot-net-value,
	.tcot-net > .tcot-net-change { flex: 0 0 auto; align-self: center; }
	/* Push the per-trader block to the far edge and separate it with a rule
	   instead of the stacked layout's top border. */
	.tcot-net > .tcot-ac {
		margin: 0 0 0 auto;
		border-top: 0;
		border-left: 1px solid var(--tcot-line);
		padding: 0 0 0 1.5rem;
	}
}
.tcot-net-label { font-size: .8rem; color: var(--tcot-muted); }
.tcot-net-value { font-size: 1.5rem; font-weight: 700; margin: .15rem 0; }
.tcot-net-value.is-long { color: var(--tcot-long); }
.tcot-net-value.is-short { color: var(--tcot-short); }
.tcot-net-change { font-size: .8rem; color: var(--tcot-muted); }

.tcot-ac { margin-top: .75rem; border-top: 1px solid var(--tcot-line); padding-top: .6rem; }
.tcot-ac-label { font-size: .75rem; color: var(--tcot-muted); margin-bottom: .3rem; }
.tcot-ac-row { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8rem; margin-bottom: .2rem; }
.tcot-ac-row.is-long .tcot-ac-side { color: var(--tcot-long); font-weight: 600; }
.tcot-ac-row.is-short .tcot-ac-side { color: var(--tcot-short); font-weight: 600; }
.tcot-ac-c { color: var(--tcot-muted); }
.tcot-ac-dev { font-weight: 600; }

.tcot-error {
	border: 1px solid var(--tcot-line);
	border-radius: 8px;
	padding: .75rem 1rem;
	color: var(--tcot-muted);
	font-size: .9rem;
}

.tcot-disclaimer {
	margin-top: .9rem;
	font-size: .72rem;
	color: var(--tcot-muted);
	border-top: 1px solid var(--tcot-line);
	padding-top: .5rem;
}

/* Market picker. Sits above the header so switching market reads as changing
   the subject of the whole panel, not just one chart. */
/* Market and instrument on one row. Wraps to two rows on a narrow screen
   rather than shrinking either select below a usable width. */
.tcot-pickers {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	column-gap: 1.5rem;
}
.tcot-picker {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .75rem;
	flex-wrap: wrap;
}
.tcot-picker-label {
	font-size: .8rem;
	color: var(--tcot-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.tcot-picker-select {
	font: inherit;
	font-size: .9rem;
	padding: .35rem .6rem;
	border: 1px solid var(--tcot-line);
	border-radius: 6px;
	background: transparent;
	color: inherit;
	/* Themes commonly ship a blanket `select { width: 100% }`, which stretched
	   this picker across the full chart width. Size it to its content instead,
	   with a cap so the longest market name cannot blow out the row and a floor
	   so it stays a comfortable target on narrow screens. */
	width: auto;
	min-width: 14rem;
	max-width: min(24rem, 100%);
}
/* Shown in place of the select when an instrument has no markets yet, so the
   picker slot explains itself instead of going blank or keeping the other
   instrument's list. */
.tcot-picker-empty {
	font-size: .85rem;
	color: var(--tcot-muted);
}
.tcot-picker-select:focus-visible {
	outline: 2px solid var(--tcot-long);
	outline-offset: 1px;
}
/* The instrument select holds two fixed, short labels, so it does not need the
   market picker's 14rem floor — that would leave it looking half empty beside
   it. Same border, padding and focus ring; only the width rule differs. */
.tcot-picker-select-instr {
	min-width: 0;
	max-width: min(16rem, 100%);
}

/* --- category tabs (v2) ------------------------------------------------- */

.tcot-tabs {
	display: flex;
	gap: 0.25rem;
	flex-wrap: nowrap;
	/* Scroll rather than wrap: a wrapping row changes height between markets
	   and shoves every panel below it up and down. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-bottom: 1px solid var(--tcot-line, rgba(128, 128, 128, 0.25));
	margin: 0.75rem 0 0.5rem;
}

.tcot-tab {
	flex: 0 0 auto;
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 0.5rem 0.9rem;
	font: inherit;
	font-weight: 600;
	color: inherit;
	opacity: 0.62;
	cursor: pointer;
	white-space: nowrap;
}

.tcot-tab:hover:not(.is-disabled) { opacity: 0.85; }

.tcot-tab.is-active {
	opacity: 1;
	border-bottom-color: var(--tcot-short, #CD1316);
}

.tcot-tab.is-disabled {
	opacity: 0.34;
	cursor: not-allowed;
	/* Not `pointer-events: none` — the title attribute must still be
	   reachable by hover on a pointer device. */
}

/* Keyboard focus must be visible: arrow-key navigation is the only way a
   keyboard user moves between tabs. */
.tcot-tab:focus-visible {
	outline: 2px solid var(--tcot-short, #CD1316);
	outline-offset: -2px;
}

/* A SIBLING of the tablist, not a child: role="tablist" may contain only
   tabs, so the notes are inserted after the row instead of inside it. The
   row's own bottom margin provides the separation. */
.tcot-tab-notes {
	margin: 0 0 0.5rem;
	padding: 0 0.25rem;
}

.tcot-tab-note,
.tcot-cat-note {
	font-size: 0.78rem;
	line-height: 1.35;
	opacity: 0.7;
}

.tcot-cat-note { margin-top: 0.5rem; }

@media (max-width: 40rem) {
	.tcot-tab { padding: 0.5rem 0.6rem; }
	/* Wrap rather than scroll on a narrow screen, where a horizontal scroller
	   inside the page is easy to miss. The notes are already below the row. */
	.tcot-tabs { flex-wrap: wrap; overflow-x: visible; }
}