/**
 * Dart Traening - the chart block (WP-9).
 *
 * Owns exactly one BEM block, dart-tr-chart, which contract section 18
 * reserves for this work package. WP-8 builds frontend.css and must not
 * restyle anything in here; everything the JavaScript toggles is listed in
 * docs/chart-markup.md so the two files cannot end up fighting.
 *
 * House rules, all of them non negotiable on this site:
 *   - BEM under the dart-tr- prefix.
 *   - No !important, anywhere. Every rule below wins on specificity alone,
 *     and the custom properties on .dart-tr-chart give a theme a clean way
 *     to override colours without needing to outrank anything.
 *   - Colour is never the only carrier of meaning: the selected tab is inverted
 *     and also carries extra weight and a heavier bottom rule; a session with
 *     a note also has a
 *     bigger dot with a ring around it; a gap in the data is an actual gap in
 *     the line, not a change of hue.
 *   - prefers-reduced-motion is respected.
 *
 * The palette is the site's own (dart-elementor.css): #42764C green, #F2F0E3
 * cream, and the same soft black box shadows.
 */

.dart-tr-chart {
	--dart-tr-chart-accent: #42764C;
	--dart-tr-chart-accent-dark: #2C4F33;
	--dart-tr-chart-cream: #F2F0E3;
	--dart-tr-chart-ink: #2b2b26;
	--dart-tr-chart-muted: #5f5f57;
	--dart-tr-chart-grid: rgba(43, 43, 38, 0.1);
	--dart-tr-chart-rule: rgba(43, 43, 38, 0.32);
	--dart-tr-chart-surface: #ffffff;
	--dart-tr-chart-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
	--dart-tr-chart-radius: 6px;

	margin: 0 0 28px;
}

/* --------------------------------------------------------------------------
   The group palette (Gr-4).

   Eight hues, and every one of them is measured, not guessed:

     hue         contrast vs #ffffff   vs cream #F2F0E3
     c0 blue     7.99                  6.98
     c1 red      5.44                  4.75
     c2 purple   7.07                  6.17
     c3 teal     5.84                  5.10
     c4 orange   5.20                  4.54
     c5 magenta  6.57                  5.74
     c6 slate    9.02                  7.88
     c7 brown    7.78                  6.80

   The requirement was 3:1 against both of the site's backgrounds; the lowest
   here is 4.54, so a thin 1.5 unit stroke is still comfortably readable.

   None of the eight is green. #42764C is the site's own green and is reserved
   for the member's OWN curve, which is also the only 2.5 unit stroke on the
   drawing and the only one with 3.5 unit dots - so own versus group is a
   difference in width and in size before it is ever a difference in hue.

   The same three classes carry the hue everywhere it is needed: --mate on the
   drawn curve, --swatch on the key's colour bar and --legend-toggle on the
   switch itself, which paints itself in its member's colour. All three set
   one custom property, so the hex value below is written exactly once.

   Beyond eight members the colour repeats but the dash pattern moves on
   (the server hands out color = index % 8, dash = index / 8 % 5), so there
   are forty distinct combinations before a genuine repeat - and the page
   still draws correctly if a group somehow grows past that.
   -------------------------------------------------------------------------- */

.dart-tr-chart__mate--c0,
.dart-tr-chart__swatch--c0,
.dart-tr-chart__legend-toggle--c0 {
	--dart-tr-chart-mate: #1F4E9C;
}

.dart-tr-chart__mate--c1,
.dart-tr-chart__swatch--c1,
.dart-tr-chart__legend-toggle--c1 {
	--dart-tr-chart-mate: #C0392B;
}

.dart-tr-chart__mate--c2,
.dart-tr-chart__swatch--c2,
.dart-tr-chart__legend-toggle--c2 {
	--dart-tr-chart-mate: #7D3C98;
}

.dart-tr-chart__mate--c3,
.dart-tr-chart__swatch--c3,
.dart-tr-chart__legend-toggle--c3 {
	--dart-tr-chart-mate: #00707A;
}

.dart-tr-chart__mate--c4,
.dart-tr-chart__swatch--c4,
.dart-tr-chart__legend-toggle--c4 {
	--dart-tr-chart-mate: #B25000;
}

.dart-tr-chart__mate--c5,
.dart-tr-chart__swatch--c5,
.dart-tr-chart__legend-toggle--c5 {
	--dart-tr-chart-mate: #B01A69;
}

.dart-tr-chart__mate--c6,
.dart-tr-chart__swatch--c6,
.dart-tr-chart__legend-toggle--c6 {
	--dart-tr-chart-mate: #3E4A59;
}

.dart-tr-chart__mate--c7,
.dart-tr-chart__swatch--c7,
.dart-tr-chart__legend-toggle--c7 {
	--dart-tr-chart-mate: #6D4C1B;
}

/* --------------------------------------------------------------------------
   Series selector.
   Server side these are ordinary links to ?serie=<key>, so they work with a
   full page load. The script turns them into a real tab list; the styling is
   identical either way, which is why the enhanced/unenhanced chart does not
   flicker into a different shape when the JavaScript boots.
   -------------------------------------------------------------------------- */

.dart-tr-chart__series {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	padding: 0;
}

/* An unselected tab is an ordinary front-end button: green fill, white
   Roboto Serif 700, no underline - the same type the whole button family
   carries since 1.4.1, so a tab and the period picker's quick choices two
   inches above it are one family again. The state selectors are spelled out
   so a theme's own "a:hover { color }" cannot repaint the label mid hover.
   A tab is an <a>, never a <button>, so the Elementor kit's global button
   rule never matched it and no id anchor is needed here. */
a.dart-tr-chart__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 7px 15px;
	border: 1px solid var(--dart-tr-chart-accent);
	border-bottom-width: 3px;
	border-radius: var(--dart-tr-chart-radius);
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	transition: box-shadow 0.2s ease;
	text-shadow: none !important;
}

/* Only the paint is repeated across the states, never the geometry - the
   phone rule below is a single class and has to stay able to win. */
.dart-tr-chart__series a.dart-tr-chart__tab,
.dart-tr-chart__series a.dart-tr-chart__tab:link,
.dart-tr-chart__series a.dart-tr-chart__tab:visited,
.dart-tr-chart__series a.dart-tr-chart__tab:hover,
.dart-tr-chart__series a.dart-tr-chart__tab:focus,
.dart-tr-chart__series a.dart-tr-chart__tab:active {
	background-color: #42764C;
	background-color: var(--dart-tr-chart-accent);
	color: #ffffff;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
}

/* Hover adds the shadow and changes nothing else - the same rule the rest of
   the front end follows. :focus-visible keeps its ring as well, because the
   shadow alone is not a focus indicator. */
.dart-tr-chart__series a.dart-tr-chart__tab:hover,
.dart-tr-chart__series a.dart-tr-chart__tab:focus-visible {
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.3);
}

a.dart-tr-chart__tab:focus-visible {
	outline: 2px solid var(--dart-tr-chart-accent-dark);
	outline-offset: 2px;
}

/* Selected: inverted - white plate, green ink, green border - and on top of
   that a heavier bottom rule, 5px against the unselected 3px. Since the whole
   button family went to 700 the weight no longer says anything, so that extra
   rule is now the ONE thing carrying the selection in greyscale, in high
   contrast and to a member who cannot separate the two hues. aria-selected
   carries it for a screen reader. */
.dart-tr-chart__series a.dart-tr-chart__tab--current,
.dart-tr-chart__series a.dart-tr-chart__tab--current:link,
.dart-tr-chart__series a.dart-tr-chart__tab--current:visited,
.dart-tr-chart__series a.dart-tr-chart__tab--current:hover,
.dart-tr-chart__series a.dart-tr-chart__tab--current:focus,
.dart-tr-chart__series a.dart-tr-chart__tab--current:active {
	border-color: #42764C;
	border-color: var(--dart-tr-chart-accent);
	border-bottom-width: 5px;
	background-color: #ffffff;
	background-color: var(--dart-tr-chart-surface);
	color: #42764C;
	color: var(--dart-tr-chart-accent);
	font-family: "Roboto", sans-serif;
	font-weight: 700;
}

/* Only the enhanced tab list behaves like a control rather than a link. */
.dart-tr-chart--enhanced .dart-tr-chart__tab {
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Panel and canvas.
   -------------------------------------------------------------------------- */

.dart-tr-chart__panel {
	margin: 0;
	text-shadow: none !important;
}

.dart-tr-chart__panel:focus-visible {
	outline: 2px solid var(--dart-tr-chart-accent-dark);
	outline-offset: 4px;
}

.dart-tr-chart__canvas {
	position: relative;
	padding: 10px 8px 6px;
	border: 1px solid rgba(43, 43, 38, 0.12);
	border-radius: var(--dart-tr-chart-radius);
	background-color: var(--dart-tr-chart-surface);
	box-shadow: var(--dart-tr-chart-shadow);
}

/* viewBox plus width:100% is what makes the drawing responsive without a
   resize listener. preserveAspectRatio stays at its uniform default, so the
   axis labels are never stretched out of shape. */
.dart-tr-chart__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	font-family: inherit;
}

/* When there is nothing to plot the canvas collapses and the empty state
   below it takes over. */
.dart-tr-chart--blank .dart-tr-chart__canvas {
	display: none;
}

/* --------------------------------------------------------------------------
   The drawing itself.
   -------------------------------------------------------------------------- */

.dart-tr-chart__gridline {
	stroke: var(--dart-tr-chart-grid);
	stroke-width: 1;
	shape-rendering: crispEdges;
}

.dart-tr-chart__baseline {
	stroke: var(--dart-tr-chart-rule);
	stroke-width: 1;
	shape-rendering: crispEdges;
}

.dart-tr-chart__tick {
	stroke: var(--dart-tr-chart-rule);
	stroke-width: 1;
	shape-rendering: crispEdges;
}

.dart-tr-chart__label {
	fill: var(--dart-tr-chart-muted);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

/* The member's average for the period. Dashed - the stroke-dasharray is a
   presentation attribute in the markup, because it is geometry and both
   renderers read it from docs/chart-markup.md section 10 - and drawn under
   the curve, so it can never hide a reading. It is the only horizontal line
   in the drawing that is not a gridline, which is what makes it readable
   without colour vision; the ink here is the darkest value on the palette,
   so it also carries in greyscale. */
.dart-tr-chart__average {
	fill: none;
	stroke: var(--dart-tr-chart-ink);
	stroke-width: 1.5;
}

/* Sits inside .dart-tr-chart__label, so it inherits the axis type and the
   phone size; only the ink is darkened, and it wins by coming later at the
   same specificity - never by !important. */
.dart-tr-chart__average-label {
	fill: var(--dart-tr-chart-ink);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   The group curves (Gr-4). Drawn by chart.js only, between the average line
   and the member's own curve, so own is always the topmost thing on the
   drawing. Thinner stroke, smaller dots and a dash pattern per member: three
   differences from the member's own curve, none of which is colour.
   -------------------------------------------------------------------------- */

.dart-tr-chart__mate-line {
	fill: none;
	stroke: var(--dart-tr-chart-mate);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.9;
}

.dart-tr-chart__mate-dot {
	fill: var(--dart-tr-chart-mate);
	stroke: var(--dart-tr-chart-surface);
	stroke-width: 1;
}

/* Five stroke patterns, so the key still works printed in greyscale. None of
   them is "6 4" - that one belongs to the average line and has to stay the
   one dashed rule nobody confuses with a curve. d0 is solid and is left
   without a rule, which is also the fallback for an unknown index. */
.dart-tr-chart__mate--d1 .dart-tr-chart__mate-line {
	stroke-dasharray: 7 4;
}

.dart-tr-chart__mate--d2 .dart-tr-chart__mate-line {
	stroke-dasharray: 2 3;
}

.dart-tr-chart__mate--d3 .dart-tr-chart__mate-line {
	stroke-dasharray: 11 3 2 3;
}

.dart-tr-chart__mate--d4 .dart-tr-chart__mate-line {
	stroke-dasharray: 1 4;
}

.dart-tr-chart__line {
	fill: none;
	stroke: var(--dart-tr-chart-accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dart-tr-chart__dot {
	fill: var(--dart-tr-chart-accent);
	stroke: var(--dart-tr-chart-surface);
	stroke-width: 1.5;
}

/* A session that carries a note: bigger, ringed, unmistakably a different
   shape - not merely a different colour. */
.dart-tr-chart__ring {
	fill: var(--dart-tr-chart-cream);
	stroke: var(--dart-tr-chart-accent-dark);
	stroke-width: 2;
}

.dart-tr-chart__point--note .dart-tr-chart__dot {
	fill: var(--dart-tr-chart-accent-dark);
	stroke: none;
}

.dart-tr-chart__hit {
	fill: transparent;
	stroke: none;
	cursor: pointer;
}

.dart-tr-chart__point--active .dart-tr-chart__dot {
	fill: var(--dart-tr-chart-accent-dark);
	stroke: var(--dart-tr-chart-cream);
	stroke-width: 2;
}

.dart-tr-chart__point--active .dart-tr-chart__ring {
	stroke: var(--dart-tr-chart-ink);
}

/* --------------------------------------------------------------------------
   The key under the chart (Gr-4), which is also the on/off switch for each
   group member's curve. Inserted by chart.js and by nothing else: it controls
   something that does not exist without JavaScript.

   A switch is painted in ITS OWN member's curve colour, and it inverts the
   way the period picker's quick choices do:

     on  (aria-pressed="true")   white plate, the member's colour on the ink
                                 and the border
     off (aria-pressed="false")  the member's colour as the plate, white ink

   The state is carried by that inversion - a LUMINANCE difference, which
   survives greyscale and every form of colour blindness - and by
   aria-pressed, which is what a screen reader announces. Not by hue: the hue
   is the member's identity here, not the switch position. The struck-through
   name the off state used to carry is gone; a line through a club mate's name
   read as though the person had been cancelled rather than their curve.

   The swatch shows in BOTH states and is not part of the signalling. It
   answers a different question - which line on the chart is this? - and that
   question is asked hardest when the curve is off and the member is hunting
   for the switch that turns it on.
   -------------------------------------------------------------------------- */

.dart-tr-chart__legend {
	margin: 10px 0 0;
}

.dart-tr-chart__legend-label {
	margin: 0 0 6px;
	color: var(--dart-tr-chart-muted);
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-shadow: none !important;
}

.dart-tr-chart__legend-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dart-tr-chart__legend-item {
	display: flex;
	align-items: center;
	margin: 0;
	list-style: none;
}

/* The swatch is a short bar rather than a square, so it can carry the very
   stroke pattern its curve is drawn with. Each gradient below repeats at
   EXACTLY the stroke-dasharray of the curve it stands for, in px against the
   curve's user units, so two club mates who share a hue - the palette repeats
   after eight, the pattern moves on - are told apart in the key the same way
   they are told apart in the drawing.

   The ink is a variable rather than a colour, because the bar has to work in
   three places that hand it three different inks: the member's own entry
   (green), a switch (see below) and forced colours (the system ink). */
.dart-tr-chart__swatch {
	--dart-tr-swatch-ink: var(--dart-tr-chart-mate);

	display: block;
	flex: 0 0 auto;
	width: 26px;
	height: 3px;
	margin-right: 7px;
	background-color: var(--dart-tr-swatch-ink);
}

/* Inside a switch the bar spans the full width of the plate and sits ABOVE
   the name rather than beside it. It costs the switch nothing in width - it
   is as wide as the name already made it - and buys a much longer sample of
   the line, which is the whole point when the thing being read off it is a
   dash pattern. A 26px stub shows one and a bit repeats of "11 3 2 3"; the
   full plate shows four or five, and only then does dash-dot actually read as
   dash-dot.

   The ink is the switch's OWN, not the member's hue directly. currentColor is
   the member's colour on a switched-on (white) plate and white on a
   switched-off (coloured) plate, so the bar - and the pattern with it - is
   legible in both states from one declaration. Painting it in the hue made it
   invisible the moment the plate took that same hue, which is exactly what
   had happened. */
.dart-tr-chart__legend-toggle .dart-tr-chart__swatch {
	--dart-tr-swatch-ink: currentColor;

	width: 100%;
	margin: 0 0 4px;
}

.dart-tr-chart__swatch--self {
	--dart-tr-swatch-ink: var(--dart-tr-chart-accent);

	height: 5px;
}

/* stroke-dasharray: 7 4 */
.dart-tr-chart__swatch--d1 {
	background-color: transparent;
	background-image: repeating-linear-gradient(
		to right,
		var(--dart-tr-swatch-ink) 0 7px,
		transparent 7px 11px
	);
}

/* stroke-dasharray: 2 3 */
.dart-tr-chart__swatch--d2 {
	background-color: transparent;
	background-image: repeating-linear-gradient(
		to right,
		var(--dart-tr-swatch-ink) 0 2px,
		transparent 2px 5px
	);
}

/* stroke-dasharray: 11 3 2 3 - dash, gap, dot, gap. */
.dart-tr-chart__swatch--d3 {
	background-color: transparent;
	background-image: repeating-linear-gradient(
		to right,
		var(--dart-tr-swatch-ink) 0 11px,
		transparent 11px 14px,
		var(--dart-tr-swatch-ink) 14px 16px,
		transparent 16px 19px
	);
}

/* stroke-dasharray: 1 4 */
.dart-tr-chart__swatch--d4 {
	background-color: transparent;
	background-image: repeating-linear-gradient(
		to right,
		var(--dart-tr-swatch-ink) 0 1px,
		transparent 1px 5px
	);
}

.dart-tr-chart__legend-item--self .dart-tr-chart__legend-name {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	text-shadow: none !important;
}

/* The member's own entry keeps the bar BESIDE the name - it is a caption, not
   a switch, and it is the one entry whose line never has a pattern to read.
   The right margin sets it apart from the row of switches that follows, so
   "Dig" is not mistaken for the first of them. */
.dart-tr-chart__legend-item--self {
	display: inline-flex;
	margin-right: 30px;
	padding: 5px 8px;
}

/* Geometry only, and deliberately at a single class so a narrower screen can
   still win. All the paint is in the id-anchored rules below. */
.dart-tr-chart__legend-toggle {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	min-height: 32px;
	margin: 0;
	padding: 5px 8px;
	border: 1px solid var(--dart-tr-chart-mate);
	border-radius: var(--dart-tr-chart-radius);
	font-size: 0.9rem;
	line-height: 1.3;
	cursor: pointer;
	transition: box-shadow 0.2s ease;
}

/* A switched-on switch also carries a heavier outline: 2px instead of 1px,
   with the padding taken back by the extra pixel so the row does not shift. */
.dart-tr-chart__legend-toggle[aria-pressed="true"] {
	border-width: 2px;
	padding: 4px 7px;
}

/* --------------------------------------------------------------------------
   The paint, at id weight.

   #dart-tr-game is on the wrapper in templates/game-detail.php, which is the
   only place a chart is ever drawn, and there is exactly one of it per page.
   It is here for the same reason it is all over frontend.css: the site's
   Elementor kit styles "button" globally, and a legend switch IS a <button> -
   a plain .dart-tr-chart__legend-toggle (0,1,0) simply loses to
   ".elementor-kit-<n> button" (0,1,1). Anchoring puts these at (1,2,1), which
   no class based rule can reach, and no !important is needed anywhere.

   Every state is spelled out, so neither hover nor focus can repaint a
   switch. They add the shadow and the ring below, and nothing else - a
   control that changes colour under the cursor reads as a different control,
   and on a touch screen the hover state sticks after the tap.
   -------------------------------------------------------------------------- */
#dart-tr-game button.dart-tr-chart__legend-toggle[aria-pressed="true"],
#dart-tr-game button.dart-tr-chart__legend-toggle[aria-pressed="true"]:is(:hover, :focus, :focus-visible, :active) {
	border-color: var(--dart-tr-chart-mate);
	border-width: 1px;
	background-color: #ffffff;
	background-color: var(--dart-tr-chart-surface);
	color: var(--dart-tr-chart-mate);
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	text-decoration: none;
	padding: 6px 10px;
	box-shadow: none;
	text-shadow: none !important;
}

#dart-tr-game button.dart-tr-chart__legend-toggle[aria-pressed="false"],
#dart-tr-game button.dart-tr-chart__legend-toggle[aria-pressed="false"]:is(:hover, :focus, :focus-visible, :active) {
	border-color: var(--dart-tr-chart-mate);
	border-width: 1px;
	background-color: var(--dart-tr-chart-mate);
	color: #ffffff;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	text-decoration: none;
	padding: 6px 10px;
	box-shadow: none;
	text-shadow: none !important;
}

#dart-tr-game button.dart-tr-chart__legend-toggle[aria-pressed="true"]:is(:hover),
#dart-tr-game button.dart-tr-chart__legend-toggle[aria-pressed="false"]:is(:hover) {
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.3);
	text-shadow: none !important;
}

/* The swatch stays on in BOTH states, and deliberately so: it is not the
   state marker, it is the answer to "which line on the chart is this?" - and
   a member scanning the key for the dotted teal curve needs that answer most
   when the curve is off and they are looking for the switch that turns it on.
   It rides on currentColor (see the swatch section above), so it inverts with
   the plate instead of vanishing into it.

   The state is carried by the inversion, which is a LUMINANCE difference and
   therefore survives greyscale and colour blindness, and by aria-pressed,
   which is what a screen reader announces. The swatch is aria-hidden and says
   nothing to either. */

/* The same hover treatment the rest of the front end has, and the same ring
   on top of it. */
#dart-tr-game button.dart-tr-chart__legend-toggle:is(:hover, :focus-visible) {
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.3);
}

#dart-tr-game button.dart-tr-chart__legend-toggle:focus-visible {
	outline: 2px solid #2C4F33;
	outline: 2px solid var(--dart-tr-chart-accent-dark);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Tooltip. Purely visual - it is aria-hidden, because the SVG is role="img"
   and the history table below the chart is the text alternative.
   -------------------------------------------------------------------------- */

.dart-tr-chart__tooltip {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	max-width: 240px;
	padding: 7px 10px;
	border-radius: 4px;
	background-color: var(--dart-tr-chart-accent-dark);
	color: var(--dart-tr-chart-cream);
	font-size: 13px;
	line-height: 1.4;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, calc(-100% - 12px));
	transition: opacity 0.15s ease;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35);
}

.dart-tr-chart__tooltip--visible {
	opacity: 1;
}

.dart-tr-chart__tooltip-date,
.dart-tr-chart__tooltip-value,
.dart-tr-chart__tooltip-note {
	display: block;
}

.dart-tr-chart__tooltip-date {
	font-size: 12px;
	color: #dcdac9;
}

.dart-tr-chart__tooltip-value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.dart-tr-chart__tooltip-note {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid rgba(242, 240, 227, 0.3);
	font-style: italic;
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Empty state and the pointer to the accessible alternative.
   -------------------------------------------------------------------------- */

.dart-tr-chart__empty[hidden],
.dart-tr-chart__tooltip[hidden] {
	display: none;
}

.dart-tr-chart__empty {
	margin: 0;
	padding: 22px 18px;
	border: 1px dashed rgba(66, 118, 76, 0.45);
	border-radius: var(--dart-tr-chart-radius);
	background-color: var(--dart-tr-chart-cream);
	color: var(--dart-tr-chart-ink);
	text-align: center;
}

.dart-tr-chart__alt {
	margin: 8px 0 0;
	font-size: 14px;
}

.dart-tr-chart__alt a,
.dart-tr-chart__alt a:visited {
	color: var(--dart-tr-chart-accent-dark);
	text-decoration: underline;
}

.dart-tr-chart__alt a:hover,
.dart-tr-chart__alt a:focus {
	color: var(--dart-tr-chart-ink);
}

.dart-tr-chart__alt a:focus-visible {
	outline: 2px solid var(--dart-tr-chart-accent-dark);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Mobile. The chart has to stay readable in a narrow column, and nothing may
   force the page to scroll sideways.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.dart-tr-chart__series {
		gap: 6px;
	}

	/* 44x44 touch target: a tab is the one thing on this block that gets
	   tapped, and 37px was not enough of it. */
	.dart-tr-chart__tab {
		flex: 1 1 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 8px 10px;
		font-size: 15px;
		text-align: center;
	}

	.dart-tr-chart__canvas {
		padding: 8px 4px 4px;
	}

	.dart-tr-chart__label {
		font-size: 12px;
	}

	.dart-tr-chart__tooltip {
		max-width: 200px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dart-tr-chart__tab,
	.dart-tr-chart__legend-toggle,
	.dart-tr-chart__tooltip {
		transition: none;
	}
}

/* Forced colours (Windows high contrast): let the system palette through and
   lean on the shapes, which is exactly why none of the meaning lives in
   colour alone. */
@media (forced-colors: active) {
	.dart-tr-chart__line,
	.dart-tr-chart__dot,
	.dart-tr-chart__ring,
	.dart-tr-chart__average,
	.dart-tr-chart__mate-line,
	.dart-tr-chart__mate-dot {
		forced-color-adjust: none;
		stroke: CanvasText;
	}

	/* Every curve is the system ink here, so the only thing left telling them
	   apart is the stroke pattern and the width - which is precisely why the
	   palette was never allowed to be the sole carrier of identity. */
	.dart-tr-chart__mate-dot {
		fill: CanvasText;
	}

	/* The bar is a background, and forced colours would otherwise flatten it
	   to Canvas and take the whole key with it. Opting out and naming the
	   system ink keeps both the bar and its pattern - which is the only thing
	   telling the curves apart once every hue is CanvasText. */
	.dart-tr-chart__swatch {
		--dart-tr-swatch-ink: CanvasText;

		forced-color-adjust: none;
	}

	.dart-tr-chart__average-label {
		forced-color-adjust: none;
		fill: CanvasText;
	}

	.dart-tr-chart__dot {
		fill: CanvasText;
	}

	.dart-tr-chart__ring {
		fill: Canvas;
	}
}