/* Arcade — the Steam Tracker as a row of machines.
 *
 * The family is the Table card cabinet (CSS/arcade-parts/tables.css); this
 * page lays the same parts out for a list that is scanned, not browsed:
 *
 *   signal strip   the hall's scoreboard: a lamp, the one-line answer, the
 *                  counts on LCDs, the check button; lit in the signal tone
 *   group head     a marquee band in the group's status tone; "Needs review"
 *                  adds a row of bulbs along both edges, held still
 *   card           one machine, in the game's tone (--game-rgb, written by
 *                  JS/game-tone.js; the CSS fallback is the screen's dim
 *                  colour, an unlit machine):
 *     marquee        the logo on the backlight (.tracker-card-logo)
 *     nameplate      title and Table version (.tracker-card-identity)
 *     lamp           the tracker status (.tracker-card-badge)
 *     control panel  the plate (.tracker-card-main::before) carrying the
 *                    screen (the timeline, .tracker-span), the LCD build
 *                    counter (.tracker-card-build) and the push button
 *                    (.tracker-card-expand)
 *     service panel  the open detail: verdict lamp, a bank of LCD readouts,
 *                    the update history on a second screen
 *
 * Layout, by width:
 *   >= 992   the marquee spans both tiers on the left; tier 1 holds the
 *            nameplate and the lamp, tier 2 is the panel
 *   768-991  the marquee sits beside the nameplate; the panel below holds
 *            the screen, the LCD and the button
 *   < 768    the same, with the lamp under the nameplate and the LCD on its
 *            own line
 * Every column after the nameplate has a fixed width, so the lamps, the
 * LCDs and the buttons stand in one line down the whole page.
 *
 * States: lit means "needs attention" across the family: "Needs review"
 * lamps are lit, and here they blink (mostly on, like a menu cursor), the
 * page's one moving signal at rest; "Up to date" lamps are unlit rings at
 * rest; a status without a verdict (tracked, unknown) is a hollow lamp, as on
 * the Table cards. Hover
 * and keyboard focus power a machine up (marquee strike, lamp, LCD glow,
 * select cursor around the screen, a step forward). Without hover (touch)
 * the machines stand powered up and a tap presses one in. Reduced motion
 * keeps every state and drops every movement.
 *
 * Type: VT323 is 1rem here (22px rendered), never under 0.8rem (17.6px);
 * Press Start 2P is 8px (labels), 16px (names, LCDs, h3) or 24px (bands).
 *
 * Shared parts (the select cursor, the VER plate, the marquee strike and the
 * cursor blink) come from cabinet.css.
 *
 * Specificity: CSS/SteamTracker.css loads after this file, with selectors of
 * at most three classes; every rule here starts with html[data-theme="arcade"]
 * and repeats the page's own classes, so it wins by weight, not by order.
 */

/* ---- shared parts ---------------------------------------------------------- */

html[data-theme="arcade"] .tracker {
    --trk-ink: color-mix(in srgb, var(--arc-fg) 84%, var(--arc-bg));
    --trk-screen: color-mix(in srgb, #000 55%, var(--arc-bg));
    --trk-metal: color-mix(in srgb, #000 40%, var(--arc-bg));
    /* The dim colour lifted toward the foreground, for small print on the lit
     * and tinted surfaces (panel plate, verdict, scoreboard); plain dim drops
     * under 4.5:1 there on the amber screen. */
    --trk-dim: color-mix(in srgb, var(--arc-dim) 70%, var(--arc-fg));
}

/* ---- signal strip: the scoreboard ------------------------------------------- */

html[data-theme="arcade"] .tracker .tracker-signal {
    gap: 14px 24px;
    padding: 16px 20px 18px;
    border: 2px solid rgba(var(--signal-rgb), 0.6);
    background:
        linear-gradient(180deg, rgba(var(--signal-rgb), 0.6) 0 2px, transparent 2px calc(100% - 2px), rgba(var(--signal-rgb), 0.6) calc(100% - 2px)),
        radial-gradient(60% 160% at 0% 50%, rgba(var(--signal-rgb), 0.16), transparent 70%),
        var(--trk-metal);
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--arc-fg) 10%, transparent);
    transition: none;
}

html[data-theme="arcade"] .tracker .tracker-signal-lead {
    gap: 16px;
}

html[data-theme="arcade"] .tracker .tracker-signal-icon {
    width: 48px;
    height: 48px;
    border: 2px solid rgb(var(--signal-rgb));
    background: rgba(var(--signal-rgb), 0.14);
    color: rgb(var(--signal-rgb));
    font-size: 20px;
}

html[data-theme="arcade"] .tracker .tracker-signal-icon > i {
    zoom: 1;
}

/* An alert lights the lamp; its ring steps out like a radar ping. */
html[data-theme="arcade"] .tracker .tracker-signal.is-alert .tracker-signal-icon {
    background: rgb(var(--signal-rgb));
    color: var(--arc-bg);
    box-shadow: 0 0 16px rgba(var(--signal-rgb), 0.6);
}

html[data-theme="arcade"] .tracker .tracker-signal-pulse {
    inset: -2px;
    border-width: 2px;
}

html[data-theme="arcade"] .tracker .tracker-signal.is-alert .tracker-signal-pulse {
    animation-timing-function: steps(4, end);
}

html[data-theme="arcade"] .tracker .tracker-signal-title {
    color: rgb(var(--signal-rgb));
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-shadow: 0 0 12px rgba(var(--signal-rgb), 0.45);
    text-wrap: balance;
}

html[data-theme="arcade"] .tracker .tracker-signal-sub {
    color: var(--ds-text-2);
    font-size: 1rem;
    line-height: 1.3;
}

/* The counts, each on its own LCD. */
html[data-theme="arcade"] .tracker .tracker-metrics {
    gap: 8px;
}

html[data-theme="arcade"] .tracker .tracker-metric {
    --metric-rgb: var(--arc-link-rgb);
}

html[data-theme="arcade"] .tracker .tracker-metric.is-warning { --metric-rgb: var(--arc-wild-rgb); }
html[data-theme="arcade"] .tracker .tracker-metric.is-success { --metric-rgb: var(--arc-good-rgb); }
html[data-theme="arcade"] .tracker .tracker-metric.is-info { --metric-rgb: var(--arc-link-rgb); }
html[data-theme="arcade"] .tracker .tracker-metric.is-neutral { --metric-rgb: var(--arc-dim-rgb); }

html[data-theme="arcade"] .tracker .tracker-metric-button {
    align-items: center;
    gap: 8px;
    padding: 3px 10px 3px 3px;
    border: 2px solid var(--ds-line-2);
    background: color-mix(in srgb, #000 45%, transparent);
    color: var(--trk-ink);
    font-size: 1rem;
    line-height: 1.1;
    transition: border-color 0.08s steps(1), color 0.08s steps(1), box-shadow 0.08s steps(1);
}

html[data-theme="arcade"] .tracker .tracker-metric-button strong,
html[data-theme="arcade"] .tracker .tracker-metric:is(.is-warning, .is-success, .is-info) .tracker-metric-button strong {
    min-width: 40px;
    padding: 5px 5px 4px;
    border: 2px solid rgba(var(--metric-rgb), 0.45);
    background: #000;
    color: rgb(var(--metric-rgb));
    font-family: var(--arc-pixel);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    text-align: right;
}

html[data-theme="arcade"] .tracker .tracker-metric-button:is(:hover, :focus-visible) {
    border-color: rgb(var(--metric-rgb));
    background: color-mix(in srgb, #000 45%, transparent);
    color: var(--arc-fg);
    box-shadow: 0 0 12px rgba(var(--metric-rgb), 0.35);
}

html[data-theme="arcade"] .tracker .tracker-metric-button:is(:hover, :focus-visible) strong {
    border-color: rgb(var(--metric-rgb));
    text-shadow: 0 0 8px rgba(var(--metric-rgb), 0.8);
}

html[data-theme="arcade"] .tracker .tracker-metric-button:active {
    translate: 0 2px;
}

html[data-theme="arcade"] .tracker .tracker-check-status {
    color: var(--trk-dim);
    font-size: 0.9rem;
}

/* Progress: a segmented bar over the bottom tube. */
html[data-theme="arcade"] .tracker .tracker-progress {
    height: 4px;
    background: rgba(var(--signal-rgb), 0.15);
}

html[data-theme="arcade"] .tracker .tracker-progress-bar {
    background: repeating-linear-gradient(90deg, rgb(var(--signal-rgb)) 0 6px, transparent 6px 8px);
    transition: width 0.2s steps(4, end);
}

/* ---- group heads: marquee bands ---------------------------------------------- */

html[data-theme="arcade"] .tracker .tracker-groups {
    gap: 40px;
}

html[data-theme="arcade"] .tracker .tracker-group-head {
    position: relative;
    align-items: center;
    gap: 8px 16px;
    margin: 0 0 18px;
    padding: 14px 18px 13px;
    border: 2px solid rgba(var(--group-rgb), 0.55);
    background:
        linear-gradient(180deg, rgba(var(--group-rgb), 0.65) 0 2px, transparent 2px calc(100% - 2px), rgba(var(--group-rgb), 0.65) calc(100% - 2px)),
        linear-gradient(90deg, rgba(var(--group-rgb), 0.2), rgba(var(--group-rgb), 0.08) 45%, rgba(var(--group-rgb), 0.03)),
        var(--trk-metal);
    box-shadow: 0 0 22px rgba(var(--group-rgb), 0.16);
}

html[data-theme="arcade"] .tracker .tracker-group-head > * {
    position: relative;
    z-index: 1;
}

/* The band's lamp. */
html[data-theme="arcade"] .tracker .tracker-group-dot {
    width: 14px;
    height: 14px;
    background: rgb(var(--group-rgb));
    box-shadow: 0 0 0 2px #000, 0 0 12px rgba(var(--group-rgb), 0.8);
}

html[data-theme="arcade"] .tracker .tracker-group-title {
    color: var(--arc-fg);
    font-size: 24px;
    line-height: 1.3;
    text-shadow: 0 0 12px rgba(var(--group-rgb), 0.6);
}

html[data-theme="arcade"] .tracker .tracker-group-count {
    min-width: 44px;
    padding: 5px 6px 4px;
    border: 2px solid rgba(var(--group-rgb), 0.5);
    background: #000;
    color: rgb(var(--group-rgb));
    font-family: var(--arc-pixel);
    font-size: 16px;
    line-height: 1;
    text-align: right;
}

html[data-theme="arcade"] .tracker .tracker-group-lead {
    color: var(--trk-ink);
    font-size: 1rem;
    line-height: 1.2;
}

/* Needs review: bulbs along both edges, held still like the popular
 * cabinet's at rest; the band's lamp stays lit. The lamps on the machines
 * below are what moves. */
html[data-theme="arcade"] .tracker .tracker-group.is-needs-review .tracker-group-head::after {
    content: '';
    position: absolute;
    inset: 5px 6px;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(var(--group-rgb), 0.9) 0 4px, transparent 4px) 0 0 / 12px 4px repeat-x,
        linear-gradient(90deg, rgba(var(--group-rgb), 0.9) 0 4px, transparent 4px) 6px 100% / 12px 4px repeat-x;
    opacity: 0.6;
    pointer-events: none;
}

/* ---- the machine --------------------------------------------------------------- */

html[data-theme="arcade"] .tracker .tracker-cards {
    gap: 14px;
}

html[data-theme="arcade"] .tracker .tracker-card {
    /* Until JS/game-tone.js writes the artwork's tone inline: an unlit machine. */
    --game-rgb: var(--arc-dim-rgb);
    --trk-mq: 136px;
    --trk-pad: 12px;
    --trk-gap: 16px;
    border: 2px solid var(--ds-line-2);
    background:
        /* T-molding: the tone runs down both sides */
        linear-gradient(90deg, rgba(var(--game-rgb), 0.45) 0 3px, transparent 3px calc(100% - 3px), rgba(var(--game-rgb), 0.45) calc(100% - 3px)),
        linear-gradient(180deg, color-mix(in srgb, var(--arc-fg) 6%, var(--arc-bg)), color-mix(in srgb, var(--arc-fg) 3%, var(--arc-bg)));
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--arc-fg) 10%, transparent);
    color: var(--arc-fg);
    transition: translate 0.12s steps(2, end), box-shadow 0.12s steps(2, end);
}

/* The machines boot in like the site's blocks do (theme-arcade .fade-in-up). */
html[data-theme="arcade"] .tracker .tracker-card:not(.is-changed) {
    animation-duration: 0.42s;
    animation-timing-function: steps(6, end);
}

html[data-theme="arcade"] .tracker .tracker-card.is-changed {
    animation-timing-function: steps(6, end);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-main {
    position: relative;
    grid-template-columns: var(--trk-mq) minmax(0, 1fr) 13rem 44px;
    grid-template-areas:
        "logo identity badge  badge"
        "logo recency  build  expand";
    gap: 0 var(--trk-gap);
    align-items: center;
    padding: 0 var(--trk-pad) 0 3px;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-main > * {
    position: relative;
    z-index: 1;
}

/* The control panel plate: a lit front edge, the tone in the metal. */
html[data-theme="arcade"] .tracker .tracker-card .tracker-card-main::before {
    content: '';
    grid-row: 2;
    grid-column: 2 / -1;
    position: absolute;
    inset: 0 calc(3px - var(--trk-pad)) 0 calc(-1 * var(--trk-gap));
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(var(--arc-fg-rgb), 0.2) 0 2px, rgba(0, 0, 0, 0.55) 2px 4px, transparent 4px),
        linear-gradient(180deg, rgba(var(--game-rgb), 0.1), rgba(var(--game-rgb), 0.02) 70%),
        color-mix(in srgb, var(--arc-fg) 7%, var(--arc-bg));
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
    pointer-events: none;
}

/* ---- marquee ---------------------------------------------------------------------- */

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-logo {
    grid-area: logo;
    align-self: stretch;
    position: relative;
    width: auto;
    height: auto;
    min-height: 64px;
    overflow: hidden;
    border-right: 4px solid #000;
    background: var(--arc-bg);
    color: rgb(var(--game-rgb));
    font-size: 24px;
}

/* The backlight: the tubes along the edges in the tone, the print behind the
 * logo dark (tables.css, "marquee + screen"). */
html[data-theme="arcade"] .tracker .tracker-card .tracker-card-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(42% 46% at 50% 50%, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4) 55%, transparent 100%),
        linear-gradient(180deg, rgba(var(--game-rgb), 0.6) 0 2px, transparent 2px 30%, transparent 70%, rgba(var(--game-rgb), 0.6) calc(100% - 2px)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.25)),
        linear-gradient(90deg, rgba(var(--game-rgb), 0.6), rgba(var(--game-rgb), 0.32) 50%, rgba(var(--game-rgb), 0.6));
    box-shadow: inset 0 0 0 2px rgba(var(--game-rgb), 0.35);
    opacity: 0.85;
    pointer-events: none;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-logo img {
    position: absolute;
    inset: 10px;
    z-index: 1;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    filter:
        drop-shadow(0 0 1px rgba(0, 0, 0, 0.95))
        drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-logo > i {
    position: relative;
    z-index: 1;
    text-shadow: 0 0 12px rgba(var(--game-rgb), 0.6);
}

/* ---- nameplate ---------------------------------------------------------------------- */

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-identity {
    grid-area: identity;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin: 12px 0 10px;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-title {
    overflow: visible;
    color: var(--arc-fg);
    font-family: var(--arc-pixel);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-overflow: clip;
    text-shadow: 0 0 10px rgba(var(--game-rgb), 0.45);
    white-space: normal;
    overflow-wrap: anywhere;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-title:is(:hover, :focus-visible) {
    color: rgb(var(--game-rgb));
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-meta {
    align-items: baseline;
    gap: 2px 12px;
    color: var(--ds-text-2);
    font-size: 1rem;
    line-height: 1.2;
}

/* The version on the VER plate (cabinet.css). */
html[data-theme="arcade"] .tracker .tracker-card .tracker-card-meta code {
    margin-left: 2px;
}

/* ---- lamp ------------------------------------------------------------------------------ */

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-badge {
    --lamp: var(--arc-dim-rgb);
    grid-area: badge;
    justify-self: start;
    align-self: center;
    gap: 10px;
    margin: 12px 0 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--trk-ink);
    font-family: var(--arc-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: normal;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-badge.is-warning { --lamp: var(--arc-wild-rgb); }
html[data-theme="arcade"] .tracker .tracker-card .tracker-card-badge.is-success { --lamp: var(--arc-good-rgb); }
html[data-theme="arcade"] .tracker .tracker-card .tracker-card-badge.is-info { --lamp: var(--arc-link-rgb); }
html[data-theme="arcade"] .tracker .tracker-card .tracker-card-badge.is-error { --lamp: var(--arc-bad-rgb); }

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-badge > i {
    display: inline-grid;
    place-items: center;
    flex: none;
    zoom: 1;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(var(--lamp), 0.6);
    background: rgba(var(--lamp), 0.12);
    color: rgb(var(--lamp));
    font-size: 15px;
}

/* No verdict yet (tracked, unknown): a hollow lamp that never fills. */
html[data-theme="arcade"] .tracker .tracker-card:is(.is-tracked, .is-unknown) .tracker-card-badge > i {
    border-style: dashed;
    background: transparent;
}

/* Needs review: lit, in its warm tone, and blinking. */
html[data-theme="arcade"] .tracker .tracker-card.is-needs-review .tracker-card-badge {
    color: rgb(var(--lamp));
}

html[data-theme="arcade"] .tracker .tracker-card.is-needs-review .tracker-card-badge > i {
    border-color: rgb(var(--lamp));
    background: rgb(var(--lamp));
    color: var(--arc-bg);
    box-shadow: 0 0 12px rgba(var(--lamp), 0.7);
    animation: tracker-arc-lamp 1.2s steps(1, end) infinite;
}

/* ---- screen: the timeline -------------------------------------------------------------- */

html[data-theme="arcade"] .tracker .tracker-card .tracker-span {
    grid-area: recency;
    position: relative;
    gap: 10px;
    margin: 14px 0 12px;
    padding: 2px 12px 3px;
    border: 4px solid #000;
    background:
        radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, 0.06), transparent 42%),
        radial-gradient(ellipse at center, rgba(var(--game-rgb), 0.07), transparent 70%),
        var(--trk-screen);
    box-shadow: 0 0 0 2px var(--ds-line-1), inset 0 0 18px rgba(0, 0, 0, 0.85);
}

html[data-theme="arcade"][data-crt="on"] .tracker .tracker-card .tracker-span {
    background:
        repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.26) 2px 3px),
        radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, 0.06), transparent 42%),
        radial-gradient(ellipse at center, rgba(var(--game-rgb), 0.07), transparent 70%),
        var(--trk-screen);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-span-track {
    background: rgba(var(--arc-fg-rgb), 0.16);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-span.is-partial .tracker-span-track {
    background: repeating-linear-gradient(90deg, rgba(var(--arc-fg-rgb), 0.22) 0 6px, transparent 6px 10px);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-span-track::before,
html[data-theme="arcade"] .tracker .tracker-card .tracker-span-track::after {
    width: 2px;
    background: rgba(var(--arc-fg-rgb), 0.4);
    opacity: 1;
}

/* The gap between the two events is a lit beam in the status tone. */
html[data-theme="arcade"] .tracker .tracker-card .tracker-span-gap {
    background: rgba(var(--span-rgb), 0.9);
    box-shadow: 0 0 8px rgba(var(--span-rgb), 0.6);
    transition: left 0.2s steps(4, end), width 0.2s steps(4, end);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-mark::before {
    opacity: 0.7;
    transition: none;
}

/* The two events as sprites; a border of the screen's own colour cuts them
 * out of the beam. */
html[data-theme="arcade"] .tracker .tracker-card .tracker-tick {
    width: 20px;
    height: 20px;
    border-color: var(--trk-screen);
    transition: left 0.2s steps(4, end), box-shadow 0.12s steps(1);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-tick > i {
    zoom: 1;
    font-size: 10px;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-span-labels {
    gap: 12px;
    color: var(--arc-dim);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-span-label {
    gap: 6px;
    line-height: 1.15;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-span-label::before {
    width: 8px;
    height: 8px;
}

/* The select cursor of the Table cards (cabinet.css), around the screen. */
html[data-theme="arcade"] .tracker .tracker-card .tracker-span::after {
    content: '';
    position: absolute;
    inset: -10px;
    background: var(--cab-cursor);
    filter: drop-shadow(0 0 4px rgba(var(--arc-wild-rgb), 0.6));
    opacity: 0;
    pointer-events: none;
}

/* ---- LCD build counter ------------------------------------------------------------------ */

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-build {
    grid-area: build;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    gap: 6px 8px;
    margin: 12px 0;
    text-align: left;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-label {
    color: var(--trk-dim);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-build .tracker-card-build-id {
    min-width: 144px;
    padding: 5px 6px 4px;
    border: 2px solid rgba(var(--game-rgb), 0.4);
    background: #000;
    color: rgb(var(--game-rgb));
    font-family: var(--arc-pixel);
    font-size: 16px;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.12s steps(1), text-shadow 0.12s steps(1);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-note {
    grid-column: 1 / -1;
    color: var(--trk-dim);
    font-size: 0.85rem;
    line-height: 1.1;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-note.is-error {
    color: var(--arc-bad);
    white-space: normal;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-note code {
    color: var(--ds-text-2);
}

/* A check in progress: the LCD scans. */
html[data-theme="arcade"] .tracker .tracker-card.is-checking .tracker-card-build .tracker-card-build-id {
    color: transparent;
    background:
        linear-gradient(90deg, transparent 0 30%, rgba(var(--game-rgb), 0.35) 30% 45%, transparent 45%) 0 0 / 200% 100%,
        #000;
    animation: skeleton-shimmer 1.4s steps(8, end) infinite;
}

/* ---- push button --------------------------------------------------------------------------- */

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-expand {
    grid-area: expand;
    justify-self: end;
    align-self: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--ds-line-2);
    background: color-mix(in srgb, #000 45%, var(--arc-bg));
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.55);
    color: var(--arc-fg);
    transition: border-color 0.08s steps(1), color 0.08s steps(1), background 0.08s steps(1), box-shadow 0.08s steps(1);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-expand:is(:hover, :focus-visible) {
    border-color: rgb(var(--game-rgb));
    background: color-mix(in srgb, #000 45%, var(--arc-bg));
    color: rgb(var(--game-rgb));
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.55), 0 0 12px rgba(var(--game-rgb), 0.45);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-expand:active {
    translate: 0 2px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.55);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-card-expand i {
    transition: transform 0.16s steps(2, end);
}

/* Open: the button is lit and stays in. */
html[data-theme="arcade"] .tracker .tracker-card.is-open .tracker-card-expand,
html[data-theme="arcade"] .tracker .tracker-card.is-open .tracker-card-expand:is(:hover, :focus-visible) {
    border-color: rgb(var(--game-rgb));
    background: rgb(var(--game-rgb));
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 14px rgba(var(--game-rgb), 0.5);
    color: var(--arc-bg);
}

/* ---- powered up: hover, keyboard focus ------------------------------------------------------- */

html[data-theme="arcade"] .tracker .tracker-card:is(:hover, :has(:focus-visible)) {
    translate: -3px -3px;
    border-color: rgb(var(--game-rgb));
    box-shadow: 10px 10px 0 rgba(var(--game-rgb), 0.4);
}

html[data-theme="arcade"] .tracker .tracker-card:is(:hover, :has(:focus-visible)) .tracker-card-logo::before {
    opacity: 1;
    animation: arc-cab-marquee-on 0.5s both;
}

html[data-theme="arcade"] .tracker .tracker-card:is(:hover, :has(:focus-visible)) .tracker-card-logo img {
    filter:
        drop-shadow(0 0 1px rgba(0, 0, 0, 0.95))
        drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 10px rgba(var(--game-rgb), 0.6));
}

html[data-theme="arcade"] .tracker .tracker-card:is(:hover, :has(:focus-visible)) .tracker-span::after {
    opacity: 1;
    animation: tracker-arc-cursor-in 0.16s steps(2, end) both, arc-cab-cursor-blink 1.2s steps(1, end) 0.6s infinite;
}

html[data-theme="arcade"] .tracker .tracker-card:is(:hover, :has(:focus-visible)) .tracker-tick {
    box-shadow: 0 0 10px rgba(var(--arc-fg-rgb), 0.45);
}

html[data-theme="arcade"] .tracker .tracker-card:is(:hover, :has(:focus-visible)) .tracker-card-build .tracker-card-build-id {
    border-color: rgb(var(--game-rgb));
    text-shadow: 0 0 8px rgba(var(--game-rgb), 0.8);
}

html[data-theme="arcade"] .tracker .tracker-card:not(.is-needs-review):is(:hover, :has(:focus-visible)) .tracker-card-badge {
    color: var(--arc-fg);
}

html[data-theme="arcade"] .tracker .tracker-card:not(.is-tracked):not(.is-unknown):is(:hover, :has(:focus-visible)) .tracker-card-badge > i {
    border-color: rgb(var(--lamp));
    background: rgb(var(--lamp));
    color: var(--arc-bg);
    box-shadow: 0 0 12px rgba(var(--lamp), 0.7);
}

html[data-theme="arcade"] .tracker .tracker-card:is(.is-tracked, .is-unknown):is(:hover, :has(:focus-visible)) .tracker-card-badge > i {
    border-color: rgb(var(--lamp));
}

/* An open machine is selected: lit, and it stays where it is. */
html[data-theme="arcade"] .tracker .tracker-card.is-open,
html[data-theme="arcade"] .tracker .tracker-card.is-open:is(:hover, :has(:focus-visible)) {
    translate: none;
    border-color: rgb(var(--game-rgb));
    box-shadow: 6px 6px 0 rgba(var(--game-rgb), 0.3);
}

/* ---- service panel: the open detail ------------------------------------------------------------ */

html[data-theme="arcade"] .tracker .tracker-card.is-open .tracker-detail-inner {
    padding: 0 18px 20px;
    border-top: 2px dashed var(--ds-line-1);
    background: color-mix(in srgb, #000 45%, var(--arc-bg));
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-detail-content {
    gap: 20px;
    padding-top: 18px;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-detail-loading {
    padding-top: 18px;
}

/* The verdict: the status lamp, large, with its reasoning. */
html[data-theme="arcade"] .tracker .tracker-card .tracker-verdict {
    gap: 10px 16px;
    padding: 14px 16px;
    border: 2px solid rgba(var(--card-rgb), 0.5);
    background:
        linear-gradient(90deg, rgba(var(--card-rgb), 0.12), rgba(var(--card-rgb), 0.03) 60%),
        var(--trk-screen);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-verdict-icon {
    display: inline-grid;
    place-items: center;
    zoom: 1;
    width: 36px;
    height: 36px;
    margin-top: 0;
    border: 2px solid rgb(var(--card-rgb));
    background: rgb(var(--card-rgb));
    box-shadow: 0 0 14px rgba(var(--card-rgb), 0.55);
    color: var(--arc-bg);
    font-size: 18px;
}

html[data-theme="arcade"] .tracker .tracker-card:is(.is-tracked, .is-unknown) .tracker-verdict-icon {
    border-style: dashed;
    background: transparent;
    box-shadow: none;
    color: rgb(var(--card-rgb));
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-verdict-title,
html[data-theme="arcade"] .tracker .tracker-card .tracker-history .subsection-title {
    margin: 0 0 6px;
    color: var(--arc-fg);
    font-size: 16px;
    line-height: 1.5;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-history .subsection-title {
    margin: 0;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-verdict-text {
    color: var(--ds-text-2);
    font-size: 1rem;
    line-height: 1.3;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-verdict .chronology {
    font-size: 1rem;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-verdict .chronology-step:not(.is-warning, .is-success) .chronology-label,
html[data-theme="arcade"] .tracker .tracker-card .tracker-verdict .chronology-step + .chronology-step::before {
    color: var(--trk-dim);
}

html[data-theme="arcade"] .tracker .tracker-card .chronology-value,
html[data-theme="arcade"] .tracker .tracker-card .chronology-step.is-warning .chronology-label,
html[data-theme="arcade"] .tracker .tracker-card .chronology-step.is-success .chronology-label {
    font-weight: 400;
}

/* The facts as a bank of LCD readouts. */
html[data-theme="arcade"] .tracker .tracker-card .tracker-facts {
    gap: 8px;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-facts > div {
    padding: 8px 10px 9px;
    border: 2px solid rgba(var(--game-rgb), 0.3);
    background: #000;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-facts dt {
    color: var(--arc-dim);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-facts dd {
    margin-top: 6px;
    color: var(--arc-fg);
    font-size: 1rem;
    line-height: 1.15;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-facts dd code {
    color: rgb(var(--game-rgb));
}

/* The update history on a second screen. */
html[data-theme="arcade"] .tracker .tracker-card .tracker-history .subsection-header {
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-history .subsection-note {
    color: var(--arc-dim);
    font-size: 0.9rem;
    line-height: 1.3;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-plot {
    grid-template-columns: 8rem minmax(0, 1fr);
    border: 6px solid #000;
    background:
        radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, 0.05), transparent 42%),
        var(--trk-screen);
    box-shadow: 0 0 0 2px var(--ds-line-1), inset 0 0 24px rgba(0, 0, 0, 0.85);
}

html[data-theme="arcade"][data-crt="on"] .tracker .tracker-card .tracker-chart-plot {
    background:
        repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.26) 2px 3px),
        radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, 0.05), transparent 42%),
        var(--trk-screen);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-lane-head {
    gap: 6px;
    color: var(--ds-text-2);
    font-size: 0.9rem;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-lane-head i {
    zoom: 1;
    width: 14px;
    font-size: 12px;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-lane-head.is-news i {
    color: var(--arc-dim);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-lane-count {
    color: var(--arc-dim);
    font-size: 0.9rem;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-track::before {
    background: rgba(var(--arc-fg-rgb), 0.16);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-track.is-empty::before {
    background: repeating-linear-gradient(90deg, rgba(var(--arc-fg-rgb), 0.22) 0 5px, transparent 5px 9px);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-gridline {
    background: repeating-linear-gradient(180deg, rgba(var(--arc-fg-rgb), 0.2) 0 2px, transparent 2px 4px);
    opacity: 1;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-point {
    border-color: var(--trk-screen);
    transition: transform 0.12s steps(2, end), box-shadow 0.12s steps(1);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-point.is-news {
    background: var(--arc-dim);
    opacity: 1;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-point:is(:hover, :focus-within) {
    box-shadow: 0 0 10px rgba(var(--arc-fg-rgb), 0.5);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-axis {
    height: 1.2rem;
    color: var(--arc-dim);
    font-size: 0.85rem;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-empty {
    border: 2px dashed var(--ds-line-1);
    background: var(--trk-screen);
    color: var(--arc-dim);
    font-size: 1rem;
}

/* The way into the Table: the Table cards' coin slot, in the tone, like
 * every other way into a Table (VT323 word, lit slot, pixel arrow). */
html[data-theme="arcade"] .tracker .tracker-card .tracker-detail-actions .btn-primary-mono {
    align-self: center;
    gap: 6px;
    padding: 3px 7px 3px 10px;
    border: 2px solid rgba(var(--game-rgb), 0.65);
    background: #000;
    box-shadow: inset 4px 0 0 currentColor;
    color: rgb(var(--game-rgb));
    font-family: var(--arc-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-detail-actions .btn-primary-mono > i {
    display: none;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-detail-actions .btn-primary-mono::after {
    content: '';
    flex: none;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right: 0;
    border-left: 6px solid currentColor;
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-detail-actions .btn-primary-mono:is(:hover, :focus-visible) {
    border-color: rgb(var(--game-rgb));
    background: rgb(var(--game-rgb));
    box-shadow: inset 4px 0 0 var(--arc-bg), 0 0 14px rgba(var(--game-rgb), 0.55);
    color: var(--arc-bg);
}

html[data-theme="arcade"] .tracker .tracker-card .tracker-detail-actions .btn-primary-mono:is(:hover, :focus-visible)::after {
    animation: arcade-site-blink 0.8s steps(1) infinite;
}

/* ---- 992 to 1199: the nameplate gives the screen more room ------------------------------------ */

@media (max-width: 1199.98px) {
    html[data-theme="arcade"] .tracker .tracker-signal {
        gap: 14px 20px;
    }
}

/* ---- 768 to 991: marquee beside the nameplate, the panel underneath ------------------------- */

@media (max-width: 991.98px) {
    html[data-theme="arcade"] .tracker .tracker-card {
        --trk-mq: 112px;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-main {
        grid-template-columns: var(--trk-mq) minmax(0, 1fr) 13rem 44px;
        grid-template-areas:
            "logo    identity badge badge"
            "recency recency  build expand";
        align-items: center;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-main::before {
        grid-row: 2;
        grid-column: 1 / -1;
        left: 0;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-span {
        margin-left: 12px;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-logo {
        min-height: 60px;
    }

    html[data-theme="arcade"] .tracker .tracker-group-title {
        font-size: 16px;
    }

    /* The LCD counts take the room the answer needs: one column. */
    html[data-theme="arcade"] .tracker .tracker-signal {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The two readings one under the other, each on one line. */
    html[data-theme="arcade"] .tracker .tracker-card .tracker-span-labels {
        flex-direction: column;
        gap: 2px;
        white-space: nowrap;
    }

    /* The lane names keep their column here, so the history axis is short and
     * "3y" (always the eighth stop from the end) prints 3px from "2y". Its
     * gridline stays. */
    html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-axis-stop:nth-last-child(8) {
        display: none;
    }
}

/* ---- phones: the lamp under the nameplate, the LCD on its own line --------------------------- */

@media (max-width: 767.98px) {
    html[data-theme="arcade"] .tracker .tracker-signal {
        padding: 14px 14px 16px;
    }

    html[data-theme="arcade"] .tracker .tracker-signal-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    html[data-theme="arcade"] .tracker .tracker-signal-title {
        font-size: 1.3rem;
    }

    html[data-theme="arcade"] .tracker .tracker-group-head {
        padding: 13px 14px 12px;
    }

    html[data-theme="arcade"] .tracker .tracker-card {
        --trk-mq: 76px;
        --trk-pad: 10px;
        --trk-gap: 12px;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-main {
        grid-template-columns: var(--trk-mq) minmax(0, 1fr) 44px;
        grid-template-areas:
            "logo    identity identity"
            "logo    badge    badge"
            "recency recency  recency"
            "build   build    expand";
        align-items: center;
        padding: 0 var(--trk-pad) 0 3px;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-main::before {
        grid-row: 3 / -1;
        grid-column: 1 / -1;
        left: 0;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-identity {
        flex-direction: column;
        align-items: flex-start;
        margin: 10px 0 8px;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-badge {
        margin: 0 0 12px;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-span {
        margin: 14px 0 10px 10px;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-build {
        margin: 2px 0 12px 10px;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-expand {
        align-self: start;
        margin-top: 2px;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-logo {
        min-height: 72px;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-logo img {
        inset: 8px;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
    }

    html[data-theme="arcade"] .tracker .tracker-card.is-open .tracker-detail-inner {
        padding: 0 12px 16px;
    }

    /* The history screen gives every lane the full width: the lane's name sits
     * above its line, so the axis labels have room to stand apart. */
    html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-plot {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px 0;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-lane-head:not(:first-child) {
        margin-top: 8px;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-lane-count {
        display: inline;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-axis-spacer {
        display: none;
    }

    /* The log scale packs the years together at the old end; at this width
     * "3y" and "5y" would print over their neighbours. Their gridlines stay.
     * (The stops run 5y 3y 2y 1y 6m 3m 1m 1w today, so these two are always
     * the eighth and ninth from the end.) */
    html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-axis-stop:nth-last-child(n+8) {
        display: none;
    }
}

/* Narrow phones: "2y" (the seventh stop from the end) comes within 8px of
 * "1y" under 430px and overlaps it at 320px; the chart's own rule keeps
 * labels 8px apart. Its gridline stays. */
@media (max-width: 429.98px) {
    html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-axis-stop:nth-last-child(7) {
        display: none;
    }
}

/* ---- no hover (touch): the machines stand powered up ------------------------------------------- */

@media (hover: none) {
    html[data-theme="arcade"] .tracker .tracker-card,
    html[data-theme="arcade"] .tracker .tracker-card:is(:hover, :has(:focus-visible)) {
        translate: none;
    }

    html[data-theme="arcade"] .tracker .tracker-card:hover:not(:has(:focus-visible)):not(.is-open) {
        border-color: var(--ds-line-2);
        box-shadow: 6px 6px 0 color-mix(in srgb, var(--arc-fg) 10%, transparent);
    }

    /* The rest of a stuck hover goes too: a machine closed by a tap returns to
     * rest instead of keeping a glowing LCD, lit ticks and a lit button. */
    html[data-theme="arcade"] .tracker .tracker-card:hover:not(:has(:focus-visible)):not(.is-open) .tracker-card-build .tracker-card-build-id {
        border-color: rgba(var(--game-rgb), 0.4);
        text-shadow: none;
    }

    html[data-theme="arcade"] .tracker .tracker-card:hover:not(:has(:focus-visible)):not(.is-open) .tracker-tick {
        box-shadow: none;
    }

    html[data-theme="arcade"] .tracker .tracker-card:not(.is-needs-review):hover:not(:has(:focus-visible)):not(.is-open) .tracker-card-badge {
        color: var(--trk-ink);
    }

    html[data-theme="arcade"] .tracker .tracker-card:is(.is-tracked, .is-unknown):hover:not(:has(:focus-visible)):not(.is-open) .tracker-card-badge > i {
        border-color: rgba(var(--lamp), 0.6);
    }

    html[data-theme="arcade"] .tracker .tracker-card:not(.is-open) .tracker-card-expand:hover:not(:focus-visible):not(:active) {
        border-color: var(--ds-line-2);
        box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.55);
        color: var(--arc-fg);
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-detail-actions .btn-primary-mono:hover:not(:focus-visible):not(:active) {
        border-color: rgba(var(--game-rgb), 0.65);
        background: #000;
        box-shadow: inset 4px 0 0 currentColor;
        color: rgb(var(--game-rgb));
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-detail-actions .btn-primary-mono:hover:not(:focus-visible)::after {
        animation: none;
    }

    html[data-theme="arcade"] .tracker .tracker-metric-button:hover:not(:focus-visible) {
        border-color: var(--ds-line-2);
        box-shadow: none;
        color: var(--trk-ink);
    }

    html[data-theme="arcade"] .tracker .tracker-metric-button:hover:not(:focus-visible) strong {
        border-color: rgba(var(--metric-rgb), 0.45);
        text-shadow: none;
    }

    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-logo::before {
        opacity: 1;
        animation: none;
    }

    html[data-theme="arcade"] .tracker .tracker-card:not(.is-tracked):not(.is-unknown) .tracker-card-badge > i {
        border-color: rgb(var(--lamp));
        background: rgb(var(--lamp));
        color: var(--arc-bg);
        box-shadow: 0 0 10px rgba(var(--lamp), 0.55);
    }

    html[data-theme="arcade"] .tracker .tracker-card:hover:not(:has(:focus-visible)) .tracker-span::after,
    html[data-theme="arcade"] .tracker .tracker-card:hover:not(:has(:focus-visible)) .tracker-card-logo::before {
        animation: none;
    }

    html[data-theme="arcade"] .tracker .tracker-card:hover:not(:has(:focus-visible)):not(:has(.tracker-card-main:active)) .tracker-span::after {
        opacity: 0;
    }

    html[data-theme="arcade"] .tracker .tracker-card:has(.tracker-card-main:active) .tracker-span::after {
        opacity: 1;
    }

    html[data-theme="arcade"] .tracker .tracker-card:not(.is-open):has(.tracker-card-main:active) {
        translate: 3px 3px;
        box-shadow: 3px 3px 0 color-mix(in srgb, var(--arc-fg) 10%, transparent);
    }
}

/* ---- reduced motion: the same states, no movement ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html[data-theme="arcade"] .tracker .tracker-card,
    html[data-theme="arcade"] .tracker .tracker-card .tracker-span-gap,
    html[data-theme="arcade"] .tracker .tracker-card .tracker-tick,
    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-build .tracker-card-build-id,
    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-expand,
    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-expand i,
    html[data-theme="arcade"] .tracker .tracker-card .tracker-chart-point,
    html[data-theme="arcade"] .tracker .tracker-metric-button,
    html[data-theme="arcade"] .tracker .tracker-progress-bar {
        transition: none;
    }

    html[data-theme="arcade"] .tracker .tracker-card:is(:hover, :has(:focus-visible)),
    html[data-theme="arcade"] .tracker .tracker-card:not(.is-open):has(.tracker-card-main:active),
    html[data-theme="arcade"] .tracker .tracker-card .tracker-card-expand:active,
    html[data-theme="arcade"] .tracker .tracker-metric-button:active {
        translate: none;
    }

    html[data-theme="arcade"] .tracker .tracker-card.is-needs-review .tracker-card-badge > i,
    html[data-theme="arcade"] .tracker .tracker-card:is(:hover, :has(:focus-visible)) .tracker-card-logo::before,
    html[data-theme="arcade"] .tracker .tracker-card .tracker-detail-actions .btn-primary-mono:is(:hover, :focus-visible)::after,
    html[data-theme="arcade"] .tracker .tracker-card:is(:hover, :has(:focus-visible)) .tracker-span::after,
    html[data-theme="arcade"] .tracker .tracker-card.is-checking .tracker-card-build .tracker-card-build-id {
        animation: none;
    }

    /* The page marks a card whose status just changed with its border when
     * the ring cannot pulse; the machine's own border would hide that. */
    html[data-theme="arcade"] .tracker .tracker-card.is-changed {
        border-color: rgb(var(--card-rgb));
    }
}

/* ---- keyframes -------------------------------------------------------------------------------------- */

/* A lamp that is mostly on, like a menu cursor (the 74/75 rhythm of every
 * cursor blink, cabinet.css); every frame a hard cut. */
@keyframes tracker-arc-lamp {
    0%, 74% {
        background: rgb(var(--lamp));
        color: var(--arc-bg);
        box-shadow: 0 0 12px rgba(var(--lamp), 0.7);
    }

    75%, 100% {
        background: rgba(var(--lamp), 0.12);
        color: rgb(var(--lamp));
        box-shadow: none;
    }
}

@keyframes tracker-arc-cursor-in {
    from { inset: -18px; }
}