/**
 * Dart Traening - front-end styles (WP-8).
 *
 * Owns the BEM blocks contract section 18 reserves for this package:
 * dart-tr-games, dart-tr-game, dart-tr-stats, dart-tr-period, dart-tr-history,
 * dart-tr-form and dart-tr-notice, plus the shared dart-tr-button element - the one and
 * only button look on the front end, which every control here conforms to.
 * dart-tr-chart belongs to WP-9 (assets/css/chart.css) and is not touched
 * here. dart-tr-dialog is WP-10's block, but WP-10 could only ship the
 * script - the stylesheet belonged to another package - so WP-12 added it at
 * the bottom of this file. That section is the only place it is styled.
 *
 * House rules, all non negotiable on this site:
 *   - BEM under the dart-tr- prefix.
 *   - NO !important, anywhere. Everything below wins on specificity alone,
 *     and where a theme or the site's Elementor kit fights back the rule is
 *     anchored on one of the block ids (#dart-tr-game, #dart-tr-games,
 *     #dart-tr-dialog, #dart-tr-login, #dart-tr-empty, #dart-tr-form)
 *     rather than shouted down.
 *   - Colour is never the only carrier of meaning: the progression badge also
 *     carries an arrow, a sign and a Danish word; an error field also carries
 *     a visible message and aria-invalid; a game that has not been started
 *     also carries a star and a label.
 *   - Mobile first. The key figures reflow to one column and the history
 *     table scrolls inside its own container, so the page body never scrolls
 *     sideways.
 *   - prefers-reduced-motion is respected.
 *
 * Palette from dart-elementor.css: #42764C green, #F2F0E3 cream.
 */

.dart-tr-games,
.dart-tr-game,
.dart-tr-dialog,
.dart-tr-notice {
	--dart-tr-accent: #42764C;
	--dart-tr-accent-dark: #2C4F33;
	--dart-tr-cream: #F2F0E3;
	--dart-tr-ink: #2b2b26;
	--dart-tr-muted: #5f5f57;
	--dart-tr-line: rgba(43, 43, 38, 0.14);
	--dart-tr-surface: #ffffff;
	--dart-tr-danger: #8f2d21;
	--dart-tr-warning: #7a5a12;
	--dart-tr-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
	--dart-tr-radius: 6px;

	color: var(--dart-tr-ink);
}

/* --------------------------------------------------------------------------
   Shared: buttons and the visually hidden helper.
   -------------------------------------------------------------------------- */

/* Every control on the front end - the <button> elements and the links dressed
   as buttons alike - is the same green pill with white Roboto Serif on it.
   The modifiers stay as hooks for the markup and for modal.js, but they no
   longer change how a button looks: --primary, --quiet and --danger are one
   single look.

   Roboto Serif IS enqueued, by Frontend\FrontendAssets, on exactly the pages
   this stylesheet loads on (handle dart-tr-google-fonts, weight 700 only).
   The site's Elementor kit may well load it too - that is not something this
   package is allowed to assume.

   Everything in THIS rule is geometry, and it deliberately stays at a single
   class: the phone media query at the bottom of the file makes a primary
   button full width with .dart-tr-button, and a heavier rule up here would
   outrank it. The paint - and the type, which the kit also sets on a button -
   lives in the id-anchored block below. */
.dart-tr-button {
	display: inline-block;
	padding: 6px 24px;
	border: 1px solid transparent;
	border-radius: var(--dart-tr-radius);
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: box-shadow 0.2s ease;
	
}

/* Only the paint is repeated across the states - never the geometry. A
   ".dart-tr-button:hover { display: ... }" would outrank the single class
   rules further down that make a button full width on a phone, and the
   button would jump the moment a thumb touched it. */
.dart-tr-button,
.dart-tr-button:link,
.dart-tr-button:visited,
.dart-tr-button:hover,
.dart-tr-button:focus,
.dart-tr-button:active {
	background-color: var(--dart-tr-accent);
	color: #ffffff;
	text-decoration: none;
	text-shadow: none !important;
}

.dart-tr-button:focus-visible {
	outline: 2px solid #2C4F33;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   The whole button family, painted once, at id weight.

   WHY AN ID. The site's Elementor kit styles buttons globally:

       [type=button], [type=submit], button          (0,1,0 and 0,0,1)
       .elementor-kit-<n> ... [type=submit], button  (0,2,0 and 0,1,1)

   A plain .dart-tr-button is (0,1,0) and loses that on a real <button>, while
   the links dressed as buttons were never matched by it at all - which is
   precisely how the two halves of one family drifted apart. Anchoring on one
   of the block ids puts every rule below at (1,x,y), which no class based
   rule can ever reach, and the house rule against !important stays intact.

   :is() takes the specificity of its most specific argument, so one short
   prefix does the work of five selectors at full id weight. Supported in
   Safari 15.4+, Firefox 98+ and Chromium 88+.

   Five anchors, because those are the only five places a dart-tr button can
   appear, and there is exactly one of each per page:

       #dart-tr-game    the game page       templates/game-detail.php
       #dart-tr-games   the game list       templates/game-list.php
       #dart-tr-dialog  the modal           assets/js/modal.js - it is moved
                        to <body>, so it sits OUTSIDE #dart-tr-game and needs
                        an anchor of its own
       #dart-tr-login   the "please log in" block
       #dart-tr-empty   the standalone empty state (unknown game), which is
                        rendered INSTEAD of the game page, not inside it

   The single class rules above and below are kept as a fallback: a theme may
   override these templates, and a button in an overridden template that had
   dropped the id should still be green rather than unstyled.

   Every state is spelled out - :link, :visited, :hover, :focus,
   :focus-visible and :active - because the kit and the theme paint the states
   as well as the resting look, and one forgotten state is one blink in the
   wrong colour. Nothing in here is geometry.
   -------------------------------------------------------------------------- */
:is(#dart-tr-game, #dart-tr-games, #dart-tr-dialog, #dart-tr-login, #dart-tr-empty) :is(a, button):is(.dart-tr-button, .dart-tr-game__back-link, .dart-tr-history__action, .dart-tr-history__page-link, .dart-tr-period__choice, .dart-tr-dialog__close),
:is(#dart-tr-game, #dart-tr-games, #dart-tr-dialog, #dart-tr-login, #dart-tr-empty) :is(a, button):is(.dart-tr-button, .dart-tr-game__back-link, .dart-tr-history__action, .dart-tr-history__page-link, .dart-tr-period__choice, .dart-tr-dialog__close):is(:link, :visited, :hover, :focus, :focus-visible, :active) {
	background-color: var(--dart-tr-accent);
	color: #ffffff;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	text-decoration: none;
	border: none;
	box-shadow: none;
}

/* The hover treatment, and the only one the front end has: a soft drop
   shadow. No colour change, no movement, no border swap. :focus-visible gets
   the same shadow and keeps the ring below on top of it - a shadow on its own
   is far too quiet to be a focus indicator, and it disappears completely in
   Windows high contrast. */
:is(#dart-tr-game, #dart-tr-games, #dart-tr-dialog, #dart-tr-login, #dart-tr-empty) :is(a, button):is(.dart-tr-button, .dart-tr-game__back-link, .dart-tr-history__action, .dart-tr-history__page-link, .dart-tr-period__choice, .dart-tr-dialog__close):is(:hover, :focus-visible) {
	box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
}

/* Every focusable element in the plugin's own blocks carries the same ring, at
   id weight, so a kit rule of the shape ".elementor-kit-<n> button:focus
   { outline: none }" (0,2,1) cannot take it away. Nothing in this file removes
   an outline, with or without a replacement. */
:is(#dart-tr-game, #dart-tr-games, #dart-tr-dialog, #dart-tr-login, #dart-tr-empty) :is(a, button):focus-visible {
	outline: 2px solid #2C4F33;
	outline: 2px solid var(--dart-tr-accent-dark);
	outline-offset: 2px;
}

/* The two inverted controls - the period you are already looking at and the
   history page you are already on. Both are <span> elements, so they are not
   matched by the :is(a, button) rules above and there is no fight to win
   between them; the anchor is here for the same reason it is everywhere else
   in this file, and so that one string stays greppable.

   They lose the extra font-weight they used to carry, because the whole family
   is 700 now. Neither is left on colour alone: the period choice also carries
   a tick, and the current page also carries a heavier border (set in its own
   section further down) plus aria-current. */
:is(#dart-tr-game, #dart-tr-games, #dart-tr-dialog, #dart-tr-login, #dart-tr-empty) span.dart-tr-period__choice--current,
:is(#dart-tr-game, #dart-tr-games, #dart-tr-dialog, #dart-tr-login, #dart-tr-empty) span.dart-tr-history__page-current {
	background-color: #ffffff;
	background-color: var(--dart-tr-surface);
	color: #42764C;
	color: var(--dart-tr-accent);
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	text-decoration: none;
}

/* THE hover treatment, and the only one the front end has: a soft drop shadow,
   and nothing else. No colour change, no movement, no border swap - a button
   that repaints itself under the cursor reads as a different button, and on a
   touch screen the hover state sticks after the tap and then stays wrong.

   :focus-visible gets the same shadow so a keyboard user is shown what a mouse
   user is shown, but the outline ring below is kept as well: a shadow on its
   own is far too quiet to serve as a focus indicator, and it vanishes entirely
   in Windows high contrast. */
.dart-tr-button:hover,
.dart-tr-button:focus-visible,
.dart-tr-history__action:hover,
.dart-tr-history__action:focus-visible,
.dart-tr-history__page-link:hover,
.dart-tr-history__page-link:focus-visible,
.dart-tr-game__back-link:hover,
.dart-tr-game__back-link:focus-visible,
.dart-tr-dialog .dart-tr-dialog__close:hover,
.dart-tr-dialog .dart-tr-dialog__close:focus-visible {
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.3);
}

/* Every focusable element in the plugin's own blocks carries the same ring.
   Nothing in this file removes an outline, with or without a replacement. */
.dart-tr-games a:focus-visible,
.dart-tr-games button:focus-visible,
.dart-tr-game a:focus-visible,
.dart-tr-game button:focus-visible,
.dart-tr-dialog a:focus-visible,
.dart-tr-dialog button:focus-visible,
.dart-tr-notice a:focus-visible,
.dart-tr-notice button:focus-visible {
	outline: 2px solid #2C4F33;
	outline: 2px solid var(--dart-tr-accent-dark);
	outline-offset: 2px;
}

.dart-tr-games .screen-reader-text,
.dart-tr-game .screen-reader-text,
.dart-tr-dialog .screen-reader-text,
.dart-tr-notice .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Notices and empty states.
   -------------------------------------------------------------------------- */

.dart-tr-notice {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-left: 4px solid var(--dart-tr-accent);
	border-radius: var(--dart-tr-radius);
	background-color: var(--dart-tr-cream);
	line-height: 1.5;
}

.dart-tr-notice--success {
	border-left-color: var(--dart-tr-accent);
}

.dart-tr-notice--warning {
	border-left-color: var(--dart-tr-warning);
}

.dart-tr-notice--info {
	border-left-color: var(--dart-tr-muted);
}

.dart-tr-notice--error {
	border-left-color: var(--dart-tr-danger);
	color: var(--dart-tr-danger);
}

.dart-tr-notice--login,
.dart-tr-notice--empty {
	padding: 24px;
	border-left-width: 6px;
	text-align: left;
}

.dart-tr-notice__heading {
	margin: 0 0 8px;
	font-size: 1.25rem;
	line-height: 1.3;
}

.dart-tr-notice__text {
	margin: 0 0 16px;
}

.dart-tr-notice__actions {
	margin: 0;
}

.dart-tr-notice__icon {
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	margin-right: 6px;
	border-radius: 50%;
	background-color: var(--dart-tr-warning);
	color: #ffffff;
	font-weight: 700;
	line-height: 1.4em;
	text-align: center;
}

.dart-tr-notice__detail {
	display: block;
	margin-top: 4px;
	color: var(--dart-tr-muted);
	font-size: 0.9rem;
}

.dart-tr-notice__link {
	margin-left: 6px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   The game list.
   -------------------------------------------------------------------------- */

.dart-tr-games__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dart-tr-games__item {
	padding: 16px 18px;
	border: 1px solid var(--dart-tr-line);
	border-left: 4px solid var(--dart-tr-accent);
	border-radius: var(--dart-tr-radius);
	background-color: var(--dart-tr-surface);
	box-shadow: var(--dart-tr-shadow);
}

#dart-tr-games .dart-tr-games__item--new {
	border-left-style: dashed;
	background-color: var(--dart-tr-cream);
}

.dart-tr-games__link,
.dart-tr-games__link:visited {
	color: var(--dart-tr-accent-dark);
	text-decoration: none;
}

.dart-tr-games__link:hover .dart-tr-games__title,
.dart-tr-games__link:focus .dart-tr-games__title {
	text-decoration: underline;
}

.dart-tr-games__title {
	display: block;
	font-family: "Roboto", inherit, sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
}

.dart-tr-games__meta {
	margin: 6px 0 0;
	color: var(--dart-tr-muted);
	font-size: 0.92rem;
}

.dart-tr-games__separator {
	margin: 0 6px;
}

.dart-tr-games__badge {
	display: inline-block;
	padding: 2px 10px;
	border: 1px dashed var(--dart-tr-accent);
	border-radius: 999px;
	color: var(--dart-tr-accent-dark);
	font-weight: 600;
}

.dart-tr-games__badge-icon {
	margin-right: 4px;
}

/* --------------------------------------------------------------------------
   The game page.
   -------------------------------------------------------------------------- */

/* The theme's own page title is suppressed here, because the page already has
   a truer h1 in .dart-tr-game__title: the theme prints the PAGE's name
   ("Træningsspil"), the plugin prints the GAME's, and two h1 elements where
   the first is the less informative one is exactly backwards.

   Why CSS and not the hello_elementor_page_title filter: that filter runs
   before the_content(), so it cannot know whether the shortcode is about to
   render the real game page or one of its two other states. Both of those -
   the login notice and the "unknown game" message - carry only an h2, and
   removing the theme's h1 there would leave the page with no h1 at all. The
   :has() test asks the only question that actually matters, and it can only
   be asked after the fact: did #dart-tr-game render? Nothing else on the site
   is touched, and frontend.css only loads on pages using a shortcode.

   The wrapper goes too, not just the heading, or the theme's .page-header
   leaves its padding behind as a gap above the game title. A browser without
   :has() support simply shows both headings, which is where we were. */
body:has(#dart-tr-game) .page-header:has(> h1.entry-title),
body:has(#dart-tr-game) h1.entry-title {
	display: none;
}

.dart-tr-game__title {
	margin: 0 0 12px;
	font-family: "Roboto Condensed", inherit, sans-serif;
	line-height: 1.15;
}

.dart-tr-game__description {
	margin: 0 0 24px;
	line-height: 1.6;
}

.dart-tr-game__description :last-child {
	margin-bottom: 0;
}

.dart-tr-game__banner {
	font-weight: 600;
}

.dart-tr-game__form-slot:empty {
	display: block;
	margin: 0;
}

.dart-tr-game__back {
	margin: 28px 0 0;
}

.dart-tr-game__back-link {
	display: inline-block;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: var(--dart-tr-radius);
	font-family: "Roboto Serif", sans-serif;
	font-weight: 700;
	line-height: 1.4;
	transition: box-shadow 0.2s ease;
}

.dart-tr-game__back-link,
.dart-tr-game__back-link:link,
.dart-tr-game__back-link:visited,
.dart-tr-game__back-link:hover,
.dart-tr-game__back-link:focus,
.dart-tr-game__back-link:active {
	background-color: #42764C;
	background-color: var(--dart-tr-accent);
	color: #ffffff;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   The period picker (block dart-tr-period).

   It governs every number on the page below it, so it is a card of its own
   above the key figures rather than a control tucked in beside them.

   It works with JavaScript switched off, which is why the quick choices are
   real links and are painted like the history's pagination: the chosen one is
   inverted, bold AND carries a tick, so which period is active survives
   greyscale and colour blindness alike.
   -------------------------------------------------------------------------- */

.dart-tr-period {
	margin: 0 0 24px;
	padding: 14px 16px;
	border: 1px solid var(--dart-tr-line);
	border-radius: var(--dart-tr-radius);
	background-color: var(--dart-tr-cream);
}

/* The one permanent sentence that keeps every figure below honest. It is
   never hidden and never collapsed - a member has to be able to see what the
   numbers mean without touching anything. */
.dart-tr-period__scope {
	margin: 0 0 12px;
	font-family: "Roboto Condensed", inherit, sans-serif;
	font-weight: 600;
}

.dart-tr-period__form {
	margin: 0;
}

.dart-tr-period__label {
	display: block;
	margin: 0 0 6px;
	font-family: "Roboto Condensed", inherit, sans-serif;
	font-size: 0.92rem;
}

.dart-tr-period__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* Scoped on the block so a theme's own input styling does not have to be
   shouted down with !important. */
.dart-tr-period .dart-tr-period__input {
	width: 6rem;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var(--dart-tr-line);
	border-radius: var(--dart-tr-radius);
	background-color: var(--dart-tr-surface);
	color: var(--dart-tr-ink);
	font-family: inherit;
	font-size: 1rem;
}

.dart-tr-period .dart-tr-period__input:focus-visible {
	outline: 2px solid #2C4F33;
	outline: 2px solid var(--dart-tr-accent-dark);
	outline-offset: 2px;
}

.dart-tr-period__hint {
	display: block;
	margin-top: 6px;
	color: var(--dart-tr-muted);
	font-size: 0.85rem;
}

.dart-tr-period__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.dart-tr-period__choice-item {
	margin: 0;
}

.dart-tr-period__choice {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid #42764C;
	border-color: var(--dart-tr-accent);
	border-radius: var(--dart-tr-radius);
	font-family: "Roboto Serif", sans-serif;
	font-weight: 700;
	text-align: center;
	transition: box-shadow 0.2s ease;
}

/* :link and :visited spelled out for the same reason .dart-tr-button does it:
   an ordinary theme rule on a:hover would otherwise repaint the label. */
.dart-tr-period__choice,
.dart-tr-period__choice:link,
.dart-tr-period__choice:visited,
.dart-tr-period__choice:hover,
.dart-tr-period__choice:focus,
.dart-tr-period__choice:active {
	background-color: #42764C;
	background-color: var(--dart-tr-accent);
	color: #ffffff;
	text-decoration: none;
}

/* The period you are already looking at. A <span>, so it never picks up the
   hover shadow, and two signals at once: inverted and ticked. The bold it used
   to add on top is gone - the whole family is 700 now - but the tick is what
   survived greyscale anyway, and it is still there. The colours are set at id
   weight in the shared section above; this rule is the fallback. */
.dart-tr-period .dart-tr-period__choice--current {
	background-color: #ffffff;
	background-color: var(--dart-tr-surface);
	color: #42764C;
	color: var(--dart-tr-accent);
	font-weight: 700;
}

.dart-tr-period__tick {
	margin-right: 4px;
}

.dart-tr-period__choice:hover,
.dart-tr-period__choice:focus-visible {
	box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   Key figures.
   -------------------------------------------------------------------------- */

.dart-tr-stats {
	margin: 0 0 28px;
}

.dart-tr-stats__heading {
	margin: 0 0 4px;
	font-family: "Roboto Condensed", inherit, sans-serif;
	font-size: 1.35rem;
}

.dart-tr-stats__summary {
	margin: 0 0 14px;
	color: var(--dart-tr-muted);
	font-size: 0.92rem;
}

.dart-tr-stats__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dart-tr-stats__card {
	padding: 16px 18px;
	border: 1px solid var(--dart-tr-line);
	border-radius: var(--dart-tr-radius);
	background-color: var(--dart-tr-surface);
	box-shadow: var(--dart-tr-shadow);
}

.dart-tr-stats__card--calculated {
	background-color: var(--dart-tr-cream);
}

.dart-tr-stats__label {
	margin: 0 0 12px;
	font-family: "Roboto Condensed", inherit, sans-serif;
	font-size: 1.05rem;
	line-height: 1.25;
}

.dart-tr-stats__unit {
	margin-left: 4px;
	color: var(--dart-tr-muted);
	font-weight: 400;
}

.dart-tr-stats__tag {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border: 1px solid var(--dart-tr-accent);
	border-radius: 999px;
	color: var(--dart-tr-accent-dark);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	vertical-align: middle;
}

.dart-tr-stats__figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 10px 14px;
	margin: 0;
}

.dart-tr-stats__figure {
	min-width: 0;
}

.dart-tr-stats__term {
	margin: 0;
	color: var(--dart-tr-muted);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.dart-tr-stats__value {
	margin: 2px 0 0;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: break-word;
}

#dart-tr-stats-heading + .dart-tr-stats__summary {
	margin-top: 0;
}

.dart-tr-stats__figure--record .dart-tr-stats__value {
	color: var(--dart-tr-accent-dark);
}

.dart-tr-stats__when {
	display: block;
	color: var(--dart-tr-muted);
	font-size: 0.8rem;
	font-weight: 400;
}

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

   Two pieces, both server rendered, both absent for a member in no group:
   the line under the period picker naming who the comparison is with, and a
   second block of figures under each key figure card.
   -------------------------------------------------------------------------- */

/* Sits directly under the period card and applies to everything below it, so
   it is styled as a continuation of that card rather than as a notice: this
   is a statement of scope, not a warning. The left rule is what ties it to
   the numbers that follow. */
.dart-tr-group-notice {
	margin: -16px 0 24px;
	padding: 10px 14px;
	border-left: 4px solid var(--dart-tr-accent);
	border-radius: 0 var(--dart-tr-radius) var(--dart-tr-radius) 0;
	background-color: var(--dart-tr-cream);
	color: var(--dart-tr-ink);
	font-size: 0.92rem;
	line-height: 1.5;
}

/* The group's figures. Kept OUT of the personal auto-fit grid on purpose:
   four cells in one grid reflow into a mess on a phone, and the member's own
   numbers and the group's should not read as one set anyway.

   The group block now comes FIRST in the card, directly under the heading, so
   it carries no separator of its own; the member's own block below it does.
   The rule is written on the adjacency, so a member in no group - who gets no
   group block at all - never sees a stray line above their own numbers. */
.dart-tr-stats__group {
	margin: 0;
}

.dart-tr-stats__group + .dart-tr-stats__own {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--dart-tr-line);
}

.dart-tr-stats__group-heading {
	margin: 0 0 8px;
	color: var(--dart-tr-muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Smaller than the member's own figures, and in the muted ink: the group is
   the benchmark, the member's own number is the subject of the page. */
.dart-tr-stats__figures--group .dart-tr-stats__value {
	font-size: 1.05rem;
}

.dart-tr-stats__figure--group-record .dart-tr-stats__value,
.dart-tr-stats__figure--group-average .dart-tr-stats__value {
	color: var(--dart-tr-ink);
}

/* Who holds the record. Its own line above the date, so a long display name
   never pushes the date out of the card. */
.dart-tr-stats__who {
	display: block;
	color: var(--dart-tr-muted);
	font-size: 0.8rem;
	font-weight: 600;
	overflow-wrap: break-word;
}

.dart-tr-stats__progression {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--dart-tr-line);
	font-size: 0.95rem;
}

.dart-tr-stats__progression--pending {
	color: var(--dart-tr-muted);
	font-size: 0.85rem;
}

.dart-tr-stats__arrow {
	font-size: 1.15rem;
	line-height: 1;
}

.dart-tr-stats__delta {
	font-weight: 700;
}

.dart-tr-stats__verdict {
	color: var(--dart-tr-muted);
}

.dart-tr-stats__progression--up .dart-tr-stats__arrow,
.dart-tr-stats__progression--up .dart-tr-stats__delta {
	color: #2C4F33;
	color: var(--dart-tr-accent-dark);
}

.dart-tr-stats__progression--down .dart-tr-stats__arrow,
.dart-tr-stats__progression--down .dart-tr-stats__delta {
	color: var(--dart-tr-danger);
}

.dart-tr-stats__progression--flat .dart-tr-stats__arrow,
.dart-tr-stats__progression--flat .dart-tr-stats__delta {
	color: var(--dart-tr-muted);
}

/* --------------------------------------------------------------------------
   The registration form.
   -------------------------------------------------------------------------- */

.dart-tr-form {
	margin: 0 0 28px;
	padding: 20px;
	border: 1px solid var(--dart-tr-line);
	border-radius: var(--dart-tr-radius);
	background-color: var(--dart-tr-surface);
	box-shadow: var(--dart-tr-shadow);
}

.dart-tr-form--confirm {
	border-left: 4px solid var(--dart-tr-warning);
}

.dart-tr-form__title {
	margin: 0 0 14px;
	font-family: "Roboto Condensed", inherit, sans-serif;
	font-size: 1.25rem;
}

.dart-tr-form__subtitle {
	margin: 0 0 10px;
	font-size: 1rem;
}

.dart-tr-form__confirm {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: var(--dart-tr-radius);
	background-color: var(--dart-tr-cream);
}

.dart-tr-form__confirm-text {
	margin: 0;
}

.dart-tr-form__confirm-values {
	margin: 8px 0 0;
	padding-left: 20px;
}

.dart-tr-form__field {
	margin: 0 0 16px;
}

.dart-tr-form__label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.dart-tr-form__unit {
	margin-left: 4px;
	color: var(--dart-tr-muted);
	font-weight: 400;
}

.dart-tr-form__required {
	margin-left: 2px;
	color: var(--dart-tr-danger);
}

#dart-tr-form .dart-tr-form__input,
#dart-tr-form .dart-tr-form__textarea {
	display: block;
	width: 100%;
	max-width: 22rem;
	padding: 10px 12px;
	border: 1px solid rgba(43, 43, 38, 0.35);
	border-radius: var(--dart-tr-radius);
	background-color: #ffffff;
	color: var(--dart-tr-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
}

#dart-tr-form .dart-tr-form__textarea {
	max-width: 34rem;
	resize: vertical;
}

#dart-tr-form .dart-tr-form__input--readonly {
	background-color: var(--dart-tr-cream);
	color: var(--dart-tr-muted);
}

#dart-tr-form .dart-tr-form__input:focus-visible,
#dart-tr-form .dart-tr-form__textarea:focus-visible {
	outline: 2px solid var(--dart-tr-accent-dark);
	outline-offset: 1px;
}

#dart-tr-form .dart-tr-form__input[aria-invalid="true"] {
	border-color: var(--dart-tr-danger);
	border-width: 2px;
}

.dart-tr-form__error {
	margin: 6px 0 0;
	color: var(--dart-tr-danger);
	font-size: 0.88rem;
	font-weight: 600;
}

.dart-tr-form__error::before {
	content: "\26A0\FE0E";
	margin-right: 6px;
}

.dart-tr-form__hint {
	margin: 6px 0 0;
	color: var(--dart-tr-muted);
	font-size: 0.85rem;
}

.dart-tr-form__calculated {
	margin: 0 0 16px;
	padding: 14px;
	border-radius: var(--dart-tr-radius);
	background-color: var(--dart-tr-cream);
}

.dart-tr-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}

/* --------------------------------------------------------------------------
   The history table - the chart's accessible alternative.
   -------------------------------------------------------------------------- */

.dart-tr-history {
	margin: 0 0 28px;
}

.dart-tr-history__heading {
	margin: 0 0 12px;
	font-family: "Roboto Condensed", inherit, sans-serif;
	font-size: 1.35rem;
}

/* The table scrolls inside its own box so the page body never does. */
.dart-tr-history__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.dart-tr-history__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

/* Anchored for the same reason the buttons are: a theme rule of the shape
   ".entry-content table td { padding: ... }" is (0,2,1) and would otherwise
   beat a plain (0,2,0). The two rules that have to keep winning over this one
   - the head's heavier rule and the numeric columns' right alignment - are
   anchored to match. */
:is(#dart-tr-game, #dart-tr-games, #dart-tr-dialog, #dart-tr-login, #dart-tr-empty) .dart-tr-history__table th,
:is(#dart-tr-game, #dart-tr-games, #dart-tr-dialog, #dart-tr-login, #dart-tr-empty) .dart-tr-history__table td {
	padding: 2px 12px;
	border-bottom: 1px solid var(--dart-tr-line);
	text-align: left;
	vertical-align: top;
}

:is(#dart-tr-game, #dart-tr-games, #dart-tr-dialog, #dart-tr-login, #dart-tr-empty) .dart-tr-history__table thead th {
	border-bottom: 2px solid var(--dart-tr-accent);
	color: var(--dart-tr-accent-dark);
	font-family: "Roboto Condensed", inherit, sans-serif;
	white-space: nowrap;
}

.dart-tr-history__row:nth-child(even) {
	background-color: rgba(242, 240, 227, 0.55);
}

.dart-tr-history__date {
	white-space: nowrap;
}

:is(#dart-tr-game, #dart-tr-games, #dart-tr-dialog, #dart-tr-login, #dart-tr-empty) td.dart-tr-history__value {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dart-tr-history__note {
	max-width: 22rem;
	color: var(--dart-tr-muted);
	overflow-wrap: break-word;
}

.dart-tr-history__unit {
	color: var(--dart-tr-muted);
	font-weight: 400;
}

.dart-tr-history__actions {
	white-space: nowrap;
}

/* "Ret" and "Slet" are links rather than buttons - a GET may never destroy
   anything - but they are dressed as buttons, so they follow the button rule.
   --delete no longer differs in colour; what marks the destructive path is the
   confirmation it opens, which spells the consequence out in words inside a
   red bordered box. */
.dart-tr-history__action {
	display: inline-block;
	margin-right: 10px;
	padding: 6px 12px;
	border: 1px solid transparent;
	border-radius: var(--dart-tr-radius);
	font-family: "Roboto Serif", sans-serif;
	font-weight: 700;
	transition: box-shadow 0.2s ease;
}

.dart-tr-history__action,
.dart-tr-history__action:link,
.dart-tr-history__action:visited,
.dart-tr-history__action:hover,
.dart-tr-history__action:focus,
.dart-tr-history__action:active {
	background-color: #42764C;
	background-color: var(--dart-tr-accent);
	color: #ffffff;
	text-decoration: none;
}

.dart-tr-history__confirm {
	display: inline-block;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid var(--dart-tr-danger);
	border-radius: var(--dart-tr-radius);
	background-color: #ffffff;
	white-space: normal;
}

.dart-tr-history__confirm-text {
	margin: 0 0 8px;
	font-weight: 600;
}

.dart-tr-history__pagination {
	margin-top: 14px;
}

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

.dart-tr-history__page-link,
.dart-tr-history__page-current {
	display: inline-block;
	min-width: 2.4em;
	padding: 6px 10px;
	border: 1px solid #42764C;
	border-color: var(--dart-tr-accent);
	border-radius: var(--dart-tr-radius);
	font-family: "Roboto Serif", sans-serif;
	font-weight: 700;
	text-align: center;
	transition: box-shadow 0.2s ease;
}

.dart-tr-history__page-link,
.dart-tr-history__page-link:link,
.dart-tr-history__page-link:visited,
.dart-tr-history__page-link:hover,
.dart-tr-history__page-link:focus,
.dart-tr-history__page-link:active,
.dart-tr-history__page-current {
	background-color: #42764C;
	background-color: var(--dart-tr-accent);
	color: #ffffff;
	text-decoration: none;
}

/* The page you are already on is inverted, the same way the selected chart tab
   is. The extra weight it used to carry no longer says anything - the whole
   family is 700 - so the second signal is a heavier border instead, with the
   padding taken back by exactly the extra pixel so nothing moves. That is a
   difference in SHAPE, and it survives greyscale, high contrast and any form
   of colour blindness alike; aria-current="page" is the third. It is a <span>
   rather than a link, so it never picks up the hover shadow either, and its
   colours are set at id weight in the shared section at the top of the file. */
:is(#dart-tr-game, #dart-tr-games, #dart-tr-dialog, #dart-tr-login, #dart-tr-empty) span.dart-tr-history__page-current {
	border-width: 2px;
	padding: 5px 9px;
}

/* --------------------------------------------------------------------------
   Wider screens.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 600px) {

	.dart-tr-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dart-tr-games__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (min-width: 960px) {

	.dart-tr-stats__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Phones. Members register their results in the club, on a telephone, so
   this is the size that has to be comfortable rather than merely possible.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 600px) {

	/* The table keeps its columns readable and scrolls inside
	   .dart-tr-history__scroll. Without a floor it would squeeze every
	   column instead, and nothing would ever scroll. */
	.dart-tr-history__table {
		min-width: 34rem;
	}

	.dart-tr-history__note {
		max-width: 14rem;
	}

	/* 44x44 touch targets. */
	.dart-tr-history__action {
		padding: 12px 10px;
		margin-right: 4px;
	}

	.dart-tr-history__page-link,
	.dart-tr-history__page-current {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 6px 10px;
	}

	.dart-tr-history__pages {
		gap: 8px;
	}

	/* A full width primary button is easier to hit than a centred one. */
	.dart-tr-game__open,
	.dart-tr-form__actions .dart-tr-button {
		display: block;
		width: 100%;
		text-align: center;
	}

	/* The period field and its button share the row until there is no room,
	   then each takes a full one. 44px floors on both, and on the quick
	   choices, so every one of them is a comfortable touch target. */
	.dart-tr-period .dart-tr-period__input,
	.dart-tr-period .dart-tr-period__submit {
		flex: 1 1 8rem;
		width: auto;
		min-height: 44px;
	}

	.dart-tr-period__choice {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}

	.dart-tr-form {
		padding: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.dart-tr-button,
	.dart-tr-history__action,
	.dart-tr-history__page-link,
	.dart-tr-period__choice,
	.dart-tr-game__back-link,
	.dart-tr-dialog__close {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   The registration dialog (block dart-tr-dialog, contract section 18).

   assets/js/modal.js builds it at run time: it creates the <dialog>, wraps
   the server rendered form in .dart-tr-dialog__box, and inserts the close
   button, the alert region and the overwrite confirmation. Those five class
   names are the whole contract, so everything below is written against the
   markup that file actually produces - not against a guess.

   Two things follow from the dialog living in the top layer, as a direct
   child of <body>:

     1. It is OUTSIDE .dart-tr-game, so it is named in the custom property
        block and in the .screen-reader-text rule at the top of this file.
        Without that, every var() on the form resolved to nothing and every
        visually hidden span became visible text the moment the form moved.
     2. ::backdrop does not inherit custom properties in every engine, so
        its colour is written out literally.

   The form is flattened inside the dialog: it already has a border, a
   shadow and padding of its own, and a card inside a card reads as a bug.
   -------------------------------------------------------------------------- */

.dart-tr-dialog {
	position: relative;
	width: 34rem;
	width: min(34rem, calc(100vw - 2rem));
	max-width: calc(100vw - 2rem);
	padding: 0;
	border: 1px solid rgba(43, 43, 38, 0.14);
	border-top: 4px solid #42764C;
	border-top-color: var(--dart-tr-accent);
	border-radius: var(--dart-tr-radius);
	background-color: #ffffff;
	background-color: var(--dart-tr-surface);
	overflow: hidden;
	box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.35);
}

.dart-tr-dialog::backdrop {
	background-color: rgba(28, 28, 24, 0.55);
}

.dart-tr-dialog[open] {
	animation: dart-tr-dialog-in 0.18s ease-out;
}

.dart-tr-dialog[open]::backdrop {
	animation: dart-tr-dialog-veil 0.18s ease-out;
}

@keyframes dart-tr-dialog-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes dart-tr-dialog-veil {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* The box scrolls, not the page behind it. 100dvh keeps the whole dialog
   reachable when a mobile browser's address bar is showing. */
.dart-tr-dialog__box {
	max-height: calc(100vh - 3rem);
	max-height: calc(100dvh - 3rem);
	padding: 22px 22px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Pinned to the dialog rather than to the box, so it stays put while the
   form scrolls under it. 44x44 on every screen, not just on a phone. */
.dart-tr-dialog .dart-tr-dialog__close {
	position: absolute;
	z-index: 2;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background-color: #42764C;
	background-color: var(--dart-tr-accent);
	color: #ffffff;
	font-family: "Roboto Serif", sans-serif;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.2s ease;
}

/* The form is already a card; inside the dialog it is just content. */
.dart-tr-dialog .dart-tr-form {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

/* Room for the close button, so a long game name never runs under it. */
.dart-tr-dialog .dart-tr-form__title {
	padding-right: 46px;
}

.dart-tr-dialog .dart-tr-form__actions {
	margin-top: 22px;
	padding: 16px 0 0;
	border-top: 1px solid rgba(43, 43, 38, 0.14);
	border-top-color: var(--dart-tr-line);
}

/* The two regions modal.js writes into. [hidden] is spelled out because a
   theme reset that sets div { display: block } would otherwise beat the
   user agent rule and leave an empty box on the screen. */
.dart-tr-dialog__alert[hidden],
.dart-tr-dialog__confirm[hidden] {
	display: none;
}

.dart-tr-dialog__alert {
	margin: 0;
}

.dart-tr-dialog__alert .dart-tr-notice {
	margin: 0 0 18px;
}

/* The overwrite confirmation. Warning yellow on the rule, a heading weight
   on the question and the actual figures underneath: the member can see
   what disappears without relying on the colour to tell them it matters. */
.dart-tr-dialog__confirm {
	margin: 0 0 20px;
	padding: 14px 16px;
	border-left: 4px solid #7a5a12;
	border-left-color: var(--dart-tr-warning);
	border-radius: var(--dart-tr-radius);
	background-color: #F2F0E3;
	background-color: var(--dart-tr-cream);
}

.dart-tr-dialog__confirm .dart-tr-form__confirm-text {
	font-weight: 600;
}

.dart-tr-dialog__confirm .dart-tr-form__confirm-values {
	margin: 10px 0 0;
}

.dart-tr-dialog__confirm .dart-tr-form__actions {
	margin-top: 14px;
	padding: 0;
	border-top: 0;
}

/* --------------------------------------------------------------------------
   What modal.js adds to the page around the dialog.
   -------------------------------------------------------------------------- */

/* Two live regions sit above the trigger from the moment the script boots.
   They are empty nearly all of the time and must take up no room then -
   but they may not be display:none, or a screen reader stops watching. */
.dart-tr-game__messages:empty {
	margin: 0;
	padding: 0;
}

.dart-tr-game__messages .dart-tr-notice {
	margin: 0 0 18px;
}

.dart-tr-game__open {
	margin: 4px 0 28px;
}

/* --------------------------------------------------------------------------
   The dialog on a phone: a sheet anchored to the bottom edge, where the
   thumb already is, rather than a small box floating in the middle.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 600px) {

	.dart-tr-dialog {
		width: 100%;
		max-width: 100%;
		margin: auto auto 0;
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
		border-radius: var(--dart-tr-radius) var(--dart-tr-radius) 0 0;
	}

	.dart-tr-dialog[open] {
		animation: dart-tr-dialog-sheet 0.2s ease-out;
	}

	.dart-tr-dialog__box {
		max-height: calc(100vh - 2.5rem);
		max-height: calc(100dvh - 2.5rem);
		padding: 18px 16px 20px;
	}
}

@keyframes dart-tr-dialog-sheet {
	from {
		opacity: 0;
		transform: translateY(100%);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------------
   Reduced motion, last in the file on purpose.

   Both dialog animations are set on .dart-tr-dialog[open] - one of them from
   inside the phone media query - so the rule that switches them off has to
   carry the same attribute selector and come after both of them. A weaker
   .dart-tr-dialog { animation: none } further up simply loses.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.dart-tr-dialog[open],
	.dart-tr-dialog[open]::backdrop {
		animation: none;
	}

	.dart-tr-dialog__close,
	.dart-tr-dialog .dart-tr-dialog__close {
		transition: none;
	}
}