/*
	The game timeline and the arena, which are the two things on the stats pages that are
	their own rather than the component library's.

	The sheet is named for the game page because that is where the timeline lives, and the
	map page asks for it too: the arena is drawn on both and reads its colors off the .rt
	element, so both carry the same skin element and the same token declarations.

	The timeline is the only interactive surface on the stats pages, so it gets a sheet
	rather than a component - nothing else on the site has a playhead. Its shape is a
	cockpit: one transport pinned at the top of a body that never grows, so the scrubber
	cannot scroll away from the thing it drives and no floating bar is needed.

	Colors come from the uikit tokens, so this sheet cannot repaint a page it is merely
	added to, and the series the chart emphasizes take the library's categorical ones. The
	one color it declares itself is the latency band's, which is an area rather than a
	series, and it follows the same opt in dark rule as everything else.

	The control chrome is the library's too - the bands, the buttons, the segmented control
	and the split body are ui- components, and the rt- names beside them are what the script
	queries by rather than what paints them.
*/

/* the demo is an action rather than a figure, so its tile carries links at a size that
   reads as one */
.ffg-tile-action {
	font-size: 15px;
	font-weight: 600;
}

/* said as an id, in the heading bar where the panel's own links sit */
.ffg-id {
	font: 11px/1.4 ui-monospace, "DejaVu Sans Mono", Consolas, monospace;
	letter-spacing: 0.04em;
}

.ffg-id-label {
	margin-right: 5px;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}

.ffg-red  { color: var(--ui-team-red); font-weight: 600; }
.ffg-blue { color: var(--ui-team-blue); font-weight: 600; }

/* timeline */

.rt {
	--rt-red: var(--ui-team-red);
	--rt-blue: var(--ui-team-blue);
	--rt-neutral: var(--ui-t3);

	/*
		The three emphasized lines on the chart. Identity, not team, because two players
		on the same side would otherwise draw the same line. Every one of them carries its
		name at the end of its line, which is what lets the third sit below the contrast
		floor on a light ground.

		They are the library's categorical series colors rather than the chart's own, so a
		second surface drawing the same three series draws them in the same order.
	*/
	--rt-lead1: var(--ui-c1);
	--rt-lead2: var(--ui-c2);
	--rt-lead3: var(--ui-c3);

	/*
		The line a reader picked off the rail, where the ranking had not already emphasized
		it. A fourth color rather than one of the three, so a pick reads as a pick and the
		automatic lines do not change color under a click.
	*/
	--rt-pick: var(--ui-c4);

	/*
		The hot end of the density ramp, which the arena reaches by stacking alpha rather
		than by stepping. Violet because every warm hue collides with the red team, and a
		viewer flipping between modes carries the color across.
	*/
	--rt-heat: var(--ui-c4);

	/*
		The latency band. A warm grey rather than a neutral one, so it sits on the panel
		instead of on top of it, and grey rather than the line's own color because the band
		is the absence of a reading being certain rather than a second series.
	*/
	--rt-smoke: #6E6259;

	position: relative;
	font-size: 13px;
	color: var(--ui-tx);
}

:root[data-theme="dark"] .rt {
	--rt-smoke: #B6A89C;
}

.rt-red { color: var(--rt-red); font-weight: 600; }
.rt-blue { color: var(--rt-blue); font-weight: 600; }
.rt-none { color: var(--ui-t2); font-weight: 600; }

/* transport. the band, the buttons and the segmented control are ui-ctlbar and ui-ctl,
   which the markup carries alongside these names. what is left here is the scrubber, which
   nothing else on the site has */

.rt-scrub:focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 2px; }

.rt-clock {
	font-family: ui-monospace, "DejaVu Sans Mono", Consolas, monospace;
	font-size: 14px;
	font-weight: bold;
	font-variant-numeric: tabular-nums;
	min-width: 104px;
}

.rt-clock span { color: var(--ui-t3); font-weight: normal; font-size: 11px; }

.rt-scrub {
	flex: 1;
	min-width: 180px;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	height: 18px;
	margin: 0;
	cursor: pointer;
}

.rt-scrub::-webkit-slider-runnable-track { height: 4px; background: var(--ui-line-hi); border-radius: 2px; }
.rt-scrub::-moz-range-track { height: 4px; background: var(--ui-line-hi); border-radius: 2px; }
.rt-scrub::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 5px;
	height: 18px;
	margin-top: -7px;
	background: var(--ui-brand);
	border: 0;
	border-radius: 1px;
}
.rt-scrub::-moz-range-thumb { width: 5px; height: 18px; background: var(--ui-brand); border: 0; border-radius: 1px; }

/*
	The stage is a segmented control and its own options follow it, so a control that does
	not apply to what is on the stage is never drawn at all. The control itself is the
	library's, so what is here is only the height filter the map stage carries.
*/

.rt-band {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ui-t2);
}

.rt-slider {
	width: 84px;
	accent-color: var(--ui-brand);
}

.rt-band select {
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ui-tx);
	background: var(--ui-raised);
	border: 1px solid var(--ui-line-hi);
	border-radius: var(--ui-radius);
	padding: 2px 4px;
}

/* the fixed body, its stage and its rail are ui-cockpit, carried alongside these names in
   the markup */

.rt-plot { width: 100%; flex: 1; min-height: 0; display: block; }

/* one stage, and the pane on it is whichever the segmented control chose. the other is
   not drawn at all, which is also what keeps its controls off the bar */
.rt-pane {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.rt-hide { display: none !important; }

/* a mode the gametype offers but this game reported nothing into. the plot and its legend
   come off the pane and this takes their place, so an empty chart is never mistaken for a
   flat one */
.rt-plotempty {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 18px;
	font-size: 12px;
	color: var(--ui-t3);
}

.rt-plotempty .rt-emptysay { color: var(--ui-t2); }
.rt-plotempty .rt-emptynote { max-width: 52ch; font-size: 11px; }

/* a rail that reads out a plot carries more than fits, and scrolls inside the body rather
   than growing it. the stage next to it has a fixed height and must keep it */
.rt-railscroll { overflow-y: auto; }

.rt-opts {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	flex: 1;
}

.rt-legend {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	padding: 7px 10px 0;
	font-size: 11px;
	color: var(--ui-t2);
}

.rt-legend b { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }

/* the band and its low confidence hatch read as areas rather than as series, so their
   legend chips are wider than the square ones beside them */
.rt-legend i {
	display: inline-block;
	width: 15px;
	height: 10px;
	border-radius: 1px;
	margin-right: 5px;
	vertical-align: -1px;
}
.rt-legend i.rt-swatch-band { background: var(--rt-smoke); opacity: 0.26; }
.rt-legend i.rt-swatch-thin {
	background:
		repeating-linear-gradient(45deg, var(--rt-smoke) 0 1px, transparent 1px 4px),
		var(--rt-smoke);
	opacity: 0.5;
}

/* standings */

/* the rows are placed rather than flowed, so a change of order is a move rather than a
   repaint and the reader can follow a player up the board */
.rt-standings {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 4px 0;
}

.rt-row {
	position: absolute;
	left: 0;
	right: 0;
	transition: transform 300ms ease;
	display: flex;
	align-items: center;
	gap: 7px;
	height: 25px;
	padding: 0 10px;
}

.rt-row .rt-rank {
	flex: none;
	width: 16px;
	font-size: 10px;
	color: var(--ui-t3);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.rt-row .rt-tick { flex: none; width: 3px; height: 13px; border-radius: 1px; }

.rt-row .rt-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
}

.rt-row .rt-bar {
	flex: none;
	width: 54px;
	height: 5px;
	border-radius: 2px;
	background: var(--ui-line);
	overflow: hidden;
}

.rt-row .rt-bar i { display: block; height: 100%; }

.rt-row .rt-kd, .rt-row .rt-sc {
	flex: none;
	font-family: ui-monospace, "DejaVu Sans Mono", Consolas, monospace;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.rt-row .rt-kd { width: 46px; font-size: 11px; color: var(--ui-t3); }
.rt-row .rt-sc { width: 30px; font-size: 12px; font-weight: bold; }

/* the rail picks the line the chart draws for, and in latency mode the band under it, so
   a row is a control as well as a reading */
.rt-row { cursor: pointer; }
.rt-row:hover { background: var(--ui-inset); }

/* a player with nothing drawn for them in this mode has no line to pull out, so the row is
   a reading rather than a control and does not offer a click that would be discarded */
.rt-row.rt-nopick { cursor: default; }
.rt-row.rt-nopick:hover { background: none; }

/* the marker itself is inline, since it takes the color of the line it points at */
.rt-row.rt-focus { background: var(--ui-inset); }

/* latency is the one mode whose value column carries a word rather than a number */
.rt-standings.rt-ping .rt-row .rt-sc { width: 42px; }

/* a stalled window is a word rather than a number, since a dash would read as no
   milliseconds at all, which is the best possible connection instead of none */
.rt-row .rt-sc .rt-stall {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ui-warn);
}

/* a bot or a spectator is part of the game but never part of the result, so it is
   present everywhere and emphasized nowhere */
.rt-muted { opacity: 0.5; }

.rt-flag {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ui-t3);
	border: 1px solid var(--ui-line-hi);
	border-radius: 2px;
	padding: 0 3px;
	margin-left: 4px;
}

.rt-axis { fill: var(--ui-t3); font-size: 10px; font-family: Verdana, Arial, sans-serif; }
.rt-grid-line { stroke: var(--ui-line); stroke-width: 1; }
.rt-play-line { stroke: var(--ui-brand); stroke-width: 1; stroke-dasharray: 3 3; }

/* arena, drawn on the same stage the chart uses rather than in a disclosure below it */

.rt-arena {
	flex: 1;
	min-height: 0;
	display: flex;
	font-size: 0;
}

/*
	pan-y rather than none: one finger has to keep scrolling the page past the plot, or a
	reader on a phone is trapped at it. Disallowing everything else is what stops the browser
	claiming a two finger gesture as a page zoom before the arena sees it.
*/
.rt-arena canvas { display: block; cursor: grab; touch-action: pan-y; }

.rt-keys {
	padding: 8px 10px;
	font-size: 11px;
	line-height: 1.6;
	color: var(--ui-t2);
}

.rt-keys p { margin: 0 0 6px; }
.rt-keys p:last-child { margin-bottom: 0; }

.rt-key { display: flex; align-items: center; gap: 6px; }
.rt-key b { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.rt-key .rt-ramp { flex: 1; height: 10px; border-radius: 2px; }

.rt-hist { display: block; width: 100%; height: 78px; flex: none; }

/* feed, its own section now, so the timeline stays short and the feed can breathe */

.rt-feed {
	max-height: 366px;
	overflow-y: auto;
}

.rt-feedrow {
	display: flex;
	gap: 9px;
	align-items: baseline;
	padding: 3px 10px;
	border-top: 1px solid var(--ui-line);
}

/* the rule sits on the top edge so the message row a filter can leave behind does not
   put a stray line under the list */
.rt-feedrow:first-child { border-top: 0; }

.rt-feedrow .rt-at {
	flex: none;
	width: 42px;
	font-family: ui-monospace, "DejaVu Sans Mono", Consolas, monospace;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--ui-t3);
}

.rt-feedrow .rt-what { min-width: 0; font-size: 12px; }
.rt-feedrow .rt-w { color: var(--ui-t3); font-size: 11px; }

.rt-feedrow .rt-kind {
	flex: none;
	width: 4px;
	align-self: stretch;
	border-radius: 1px;
	background: transparent;
}

.rt-feedrow.rt-obj .rt-kind { background: var(--ui-good); }
.rt-feedrow.rt-awd .rt-kind { background: var(--ui-warn); }
.rt-feedrow.rt-sys .rt-kind { background: var(--ui-line-hi); }
.rt-feedrow.rt-gap .rt-kind { background: var(--ui-bad); }
.rt-feedrow.rt-gap .rt-what { color: var(--ui-bad); }

/* the opponent an award names, which is the whole reason the grant is worth a line */
.rt-nem { font-weight: bold; }

.rt-empty {
	padding: 18px 10px;
	text-align: center;
	font-size: 12px;
	color: var(--ui-t3);
}

/* tooltip */

.rt-tip {
	position: fixed;
	z-index: 60;
	display: none;
	pointer-events: none;
	padding: 5px 8px;
	background: var(--ui-raised);
	border: 1px solid var(--ui-line-hi);
	border-radius: var(--ui-radius);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
	font-size: 12px;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--ui-tx);
}

.rt-tip.rt-on { display: block; }
.rt-tip strong { font-weight: bold; }

@media (prefers-reduced-motion: reduce) {
	.rt-row { transition: none; }
}