/* Beckside Buses control: what the theme cannot say. Unlayered, so each rule
   wins over Yeti without a specificity fight. Every rule below is either the
   page's own drawing, its own lettering, or a gap the ledger carries under
   the GAP number in its comment. */

/* The face. Yeti ships no fonts and expects the page to load its own.
   Variable: weight 100 to 900, width 62% to 125%. */
@font-face {
	font-family: "Archivo";
	src: url("/yeti/examples/dashboard/fonts/archivo-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
}

/* Engraved lettering is capitals: the headings in the theme's layer
   (GAP-037); the brand, the column heads, the terms and the labels here. */
.nav > [data-brand],
.table thead th,
aside dt,
.engraved {
	text-transform: uppercase;
}

/* The notice plate keeps the board's one cream rule all round, rather
   than an edge in the variant's hue; its width is --yeti-alert-edge in the
   theme. */
.alert {
	border-color: var(--yeti-color-border-strong);
}

/* A plate's small engraved label, above a readout, a column or a term: the
   small width and tracking from the theme, in capitals. The page's own.
   Engraving is for labels; sentences are set plain, below. */
.table thead th,
.board dt,
aside dt,
.engraved {
	font-size: var(--yeti-text-sm);
	font-stretch: var(--yeti-stretch-small);
	letter-spacing: 0.08em;
	color: var(--yeti-color-text-muted);
}

/* The drawing keeps its drawn size and scrolls sideways below it: the
   track's width, with a floor. */
.panel > .mimic {
	inline-size: max(100%, 56rem);
	block-size: auto;
	flex: none;
}

/* A sentence on the board, set plain and muted: engraving is for labels. */
.note {
	font-size: var(--yeti-text-sm);
	color: var(--yeti-color-text-muted);
}

/* The counters are the panel's own top strip, one plate with the diagram;
   their figures engraved in the condensed width. The page's own lettering. */
.counters .billboard {
	font-stretch: var(--yeti-stretch-heading);
	font-weight: var(--yeti-weight-bold);
	line-height: 1;
}

/* The mimic panel: the page's own drawing, in the theme's colours. */
.mimic .plate {
	fill: var(--yeti-color-surface-sunken);
	stroke: var(--yeti-color-border-strong);
	stroke-width: 1;
}

.mimic .plate-no {
	font: 700 26px/1 "Archivo", system-ui, sans-serif;
	font-stretch: 72%;
	fill: var(--yeti-color-text);
}

.mimic .plate-name,
.mimic .stop,
.mimic .svc {
	font: 600 15px/1 "Archivo", system-ui, sans-serif;
	font-stretch: 78%;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	fill: var(--yeti-color-text-muted);
}

.mimic .stop {
	text-anchor: middle;
}

/* The terminus is named back from its buffer stop, so the last stop on each
   line ends at the line's end instead of running out to the plate's edge. */
.mimic .stop.last {
	text-anchor: end;
}

.mimic .svc {
	text-anchor: middle;
	fill: var(--yeti-color-text);
}

.mimic .line {
	stroke: var(--yeti-color-text);
	stroke-width: 6;
	stroke-linecap: round;
}

.mimic .tick {
	stroke: var(--yeti-color-text);
	stroke-width: 2;
}

.mimic .tick.end {
	stroke-width: 4;
}

/* The lamps. Each state is a colour, a shape and a word: a full lens with a
   glint when running or late, a hollow red ring with a bar when cancelled,
   and the service number and delay lettered above it. */
.mimic .lens {
	stroke: var(--yeti-color-surface);
	stroke-width: 2;
	transition: stroke-width var(--yeti-duration-fast) var(--yeti-ease);
}

.mimic .glint {
	fill: oklch(1 0 0 / 0.55);
}

.mimic .run .lens {
	fill: var(--yeti-color-success);
}

.mimic .late .lens {
	fill: var(--yeti-color-warning);
}

.mimic .late .svc {
	fill: var(--yeti-color-warning-text);
}

.mimic .void .lens {
	fill: var(--yeti-color-surface);
	stroke: var(--yeti-color-alert);
	stroke-width: 3;
}

.mimic .void .bar {
	stroke: var(--yeti-color-alert);
	stroke-width: 3;
	stroke-linecap: round;
}

.mimic .void .svc {
	fill: var(--yeti-color-alert-text);
}

/* Not out yet: an unlit lens, dark with a cream ring, at the stop it starts
   from. */
.mimic .due .lens {
	fill: var(--yeti-color-surface-sunken);
	stroke: var(--yeti-color-text-muted);
	stroke-width: 2;
}

.mimic .due .svc {
	fill: var(--yeti-color-text-muted);
}

/* A late lamp flashes as a real panel's does: on and off, once a second.
   Under reduced motion it holds steady. */
.mimic .late .lens,
.mimic .late .glint {
	animation: flash 1s steps(1) infinite;
}

@keyframes flash {
	50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
	.mimic .late .lens,
	.mimic .late .glint {
		animation: none;
	}
}

.mimic a:focus-visible {
	outline: none;
}

.mimic a:is(:hover, :focus-visible) .lens {
	stroke: var(--yeti-color-text);
	stroke-width: 4;
}

/* A row under the pointer or the focus, or the one a lamp led to, lights
   its lamp; the generator writes one selector per lamp. */
/* lamps:start */
main:has([data-svc="1-14"]:is(:hover, :focus-within, :target)) #lamp-1-14 .lens,
main:has([data-svc="1-15"]:is(:hover, :focus-within, :target)) #lamp-1-15 .lens,
main:has([data-svc="1-16"]:is(:hover, :focus-within, :target)) #lamp-1-16 .lens,
main:has([data-svc="2-08"]:is(:hover, :focus-within, :target)) #lamp-2-08 .lens,
main:has([data-svc="2-09"]:is(:hover, :focus-within, :target)) #lamp-2-09 .lens,
main:has([data-svc="2-10"]:is(:hover, :focus-within, :target)) #lamp-2-10 .lens,
main:has([data-svc="3-05"]:is(:hover, :focus-within, :target)) #lamp-3-05 .lens,
main:has([data-svc="3-06"]:is(:hover, :focus-within, :target)) #lamp-3-06 .lens,
main:has([data-svc="3-07"]:is(:hover, :focus-within, :target)) #lamp-3-07 .lens,
main:has([data-svc="1-17"]:is(:hover, :focus-within, :target)) #lamp-1-17 .lens,
main:has([data-svc="2-11"]:is(:hover, :focus-within, :target)) #lamp-2-11 .lens,
main:has([data-svc="3-08"]:is(:hover, :focus-within, :target)) #lamp-3-08 .lens {
	stroke: var(--yeti-color-text);
	stroke-width: 4;
}
/* lamps:end */

/* The row a lamp led to is marked in the lever frame. */
.levers tr:target > * {
	background-color: var(--yeti-color-primary-subtle);
}

/* The lever plates' column shrinks to its plates; the tables keep every
   cell on its line with data-nowrap. */
.levers th[scope="row"] {
	inline-size: 1%;
}

/* The counters: four readouts on one plate, the figure large and tabular,
   the change since last Saturday small beneath it. */
.counters .change {
	font-size: var(--yeti-text-sm);
	color: var(--yeti-color-text-muted);
}