/* Fellwatch: what the theme cannot say. Unlayered, so each rule wins over
   Yeti without a specificity fight. Every rule below is the page's own
   lettering and panel furniture, 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 75% to 125%. */
@font-face {
	font-family: "Encode Sans";
	src: url("/yeti/examples/settings/fonts/encode-sans-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 75% 125%;
	font-display: swap;
}

/* Stamped lettering: the brand and the headings of the section plates,
   in condensed spaced capitals. The page's own. */
.nav > [data-brand],
.plate h2,
#channels h2,
.danger h2 {
	text-transform: uppercase;
	font-stretch: var(--yeti-stretch-heading);
	letter-spacing: 0.1em;
}

/* Section plates: each part of the panel below the channels is its own
   plate on the steel, with a thin slate rule, and its heading a stamped
   legend smaller than the nameplate's. */
.plate h2,
#channels h2,
.danger h2 {
	font-size: var(--yeti-text-lg);
	letter-spacing: 0.12em;
}

/* The station ID is stamped, not written: a read-only field drawn as a
   stamped line, with no well and no border, so it reads as fixed before the
   hint says so. */
.field input[readonly] {
	padding-inline: 0;
	border-color: transparent;
	background-color: transparent;
	font-weight: var(--yeti-weight-bold);
	font-stretch: 80%;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

/* The required marker in slate, not red: red on this panel means a fault or
   a destructive action. The page's own. */
.field:has([required]) > :is(label, legend)::after {
	color: var(--yeti-color-text-muted);
}

/* The range readouts as the logger's display: the value and its unit, in
   tabular figures, a step up from the label. */
.field output {
	font-size: var(--yeti-text-md);
	font-weight: var(--yeti-weight-bold);
	font-variant-numeric: tabular-nums;
}

/* A label-maker tape on each channel: a slate strip with pale capitals. The
   page's own furniture. */
.tape {
	display: inline-block;
	padding: 0.15em 0.55em;
	border-radius: var(--yeti-badge-radius);
	background-color: var(--yeti-color-primary);
	color: var(--yeti-on-primary);
	font-size: var(--yeti-text-sm);
	font-weight: var(--yeti-weight-strong);
	font-stretch: 80%;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

/* A channel's lamp: dark when its switch is off, amber when it is on, red
   when the channel is in fault. Pure CSS: the lamp follows the switch. */
.lamp {
	display: inline-block;
	inline-size: 0.75rem;
	block-size: 0.75rem;
	border-radius: 50%;
	background-color: var(--yeti-color-surface-sunken);
	border: var(--yeti-border-width) solid var(--yeti-color-border-strong);
	vertical-align: -0.05em;
	margin-inline-end: 0.4em;
	transition: background-color var(--yeti-duration-fast) var(--yeti-ease);
}

.lamp.on,
.channel:has([role="switch"]:checked) .lamp {
	background-color: var(--yeti-color-warning);
	border-color: var(--yeti-color-warning-text);
}

.channel.fault .lamp,
.channel.fault:has([role="switch"]:checked) .lamp {
	background-color: var(--yeti-color-alert);
	border-color: var(--yeti-color-alert-strong);
}

/* A channel off: its reading dims with it. */
.channel:has([role="switch"]:not(:checked)) .reading-line {
	color: var(--yeti-color-text-muted);
}

.channel.fault .reading-line,
.fault-text,
.fault-text:hover {
	color: var(--yeti-color-alert-text);
	font-weight: var(--yeti-weight-strong);
}

.reading-line,
.reading {
	font-size: var(--yeti-text-sm);
}

/* The nameplate: the station's details on the paler aluminium. */
.nameplate h1 {
	font-stretch: var(--yeti-stretch-heading);
}

/* The section list down the side is a toc, so toc.js moves the mark to the
   section in view; each link carries the panel's small lamp instead of the
   toc's edge bar, the one in view lit amber. The page's own. */

.sections.toc a {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: var(--yeti-space-xs) var(--yeti-space-sm);
	border-inline-start: 0;
	border-radius: var(--yeti-radius-sm);
	color: var(--yeti-color-text);
	text-decoration: none;
}

.sections.toc a::before {
	content: "";
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	border: var(--yeti-border-width) solid var(--yeti-color-border);
}

.sections.toc a:hover {
	background-color: var(--yeti-color-surface-raised);
}

.sections.toc a[aria-current] {
	font-weight: var(--yeti-weight-strong);
}

.sections.toc a[aria-current]::before {
	background-color: var(--yeti-color-warning);
	border-color: var(--yeti-color-warning-text);
}

/* The save row: it rides at the foot of the viewport while the form is
   longer than the screen, on the steel, above a slate rule. The page's own. */
.savebar {
	position: sticky;
	inset-block-end: 0;
	z-index: 1;
	padding-block: var(--yeti-space-sm);
	border-block-start: var(--yeti-border-width) solid var(--yeti-color-border-strong);
	background-color: var(--yeti-color-surface);
}

#feeds td {
	vertical-align: middle;
}

/* The decommission plate: a red rule, a red heading. */
.danger {
	border-color: var(--yeti-color-alert);
}

.danger h2 {
	color: var(--yeti-color-alert-text);
}

.note {
	font-size: var(--yeti-text-sm);
	color: var(--yeti-color-text-muted);
}