/*
 * camera-factdb layout. Reads only the --fdb-* tokens (tokens.css).
 * Principles (docs/design/references.md): structure from rules and
 * alignment, not boxes; numbers are the heroes, tabular and right-aligned;
 * one accent; provenance next to the data; left-aligned; square corners.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--fdb-paper);
}

body {
	margin: 0;
	background: var(--fdb-paper);
	color: var(--fdb-ink);
	font-family: var(--fdb-font-text);
	font-size: var(--fdb-step-0);
	line-height: var(--fdb-leading);
	font-kerning: normal;
	font-variant-numeric: lining-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--fdb-font-head);
	font-weight: var(--fdb-head-weight);
	letter-spacing: var(--fdb-head-tracking);
	line-height: var(--fdb-leading-tight);
	text-wrap: balance;
}

p,
li,
dd {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--fdb-ink-3);
}

a:hover {
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 2px solid var(--fdb-focus);
	outline-offset: 2px;
}

::selection {
	background: var(--fdb-accent);
	color: var(--fdb-on-accent);
}

.num {
	font-family: var(--fdb-font-num);
	font-variant-numeric: tabular-nums lining-nums;
	text-align: end;
}

.muted {
	color: var(--fdb-ink-3);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wrap {
	width: min(100% - 2 * var(--fdb-gutter), var(--fdb-page));
	margin-inline: auto;
}

/* Labels: small, tracked capitals, the label face. Used for table heads,
   field names, kickers. */
.kicker,
.tbl thead th,
.filters legend,
.sort > span,
.range__label,
.kv dt,
.sheet__kv dt,
.timeline__kind,
.disclosure__label,
.ad {
	font-family: var(--fdb-font-label);
	font-size: var(--fdb-label-size);
	font-weight: 600;
	letter-spacing: var(--fdb-label-tracking);
	text-transform: uppercase;
	line-height: 1.3;
}

/* ---------------------------------------------------------- prototype bar */
/* Tooling outside the design system: the same neutral strip in every look. */

.proto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	padding: 6px max(16px, env(safe-area-inset-left));
	background: #1b1c1f;
	color: #c9cbd1;
	font: 500 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0;
	text-transform: none;
}

.proto__tag {
	color: #f2c14e;
	font-weight: 600;
}

.proto__group {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	border-radius: 6px;
	background: #2a2c31;
}

.proto__group a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 8px;
	border-radius: 4px;
	color: #c9cbd1;
	text-decoration: none;
}

.proto__group a:hover {
	color: #fff;
	background: #383b41;
}

.proto__group a[aria-current] {
	background: #f2f3f5;
	color: #1b1c1f;
}

/* ---------------------------------------------------------- masthead */

.mast {
	border-bottom: var(--fdb-rule-3) solid var(--fdb-ink);
}

.mast__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px var(--fdb-space-4);
	padding-block: var(--fdb-space-4) var(--fdb-space-2);
}

.mast__name {
	font-family: var(--fdb-font-head);
	font-weight: var(--fdb-head-weight);
	font-size: var(--fdb-step-2);
	letter-spacing: var(--fdb-head-tracking);
	line-height: 1;
	text-decoration: none;
}

.mast__tag {
	color: var(--fdb-ink-2);
	font-size: var(--fdb-meta-size);
}

.mast__stand {
	margin-inline-start: auto;
	color: var(--fdb-ink-2);
	font-size: var(--fdb-meta-size);
	font-variant-numeric: tabular-nums;
}

.mast__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--fdb-space-5);
	padding-block: var(--fdb-space-1) var(--fdb-space-2);
	font-family: var(--fdb-font-label);
	font-size: var(--fdb-meta-size);
	font-weight: 600;
}

.mast__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.mast__nav a:hover {
	border-bottom-color: var(--fdb-ink-3);
}

.mast__nav a[aria-current] {
	border-bottom-color: var(--fdb-accent);
}

.disclosure {
	display: flex;
	gap: var(--fdb-space-3);
	align-items: baseline;
	padding-block: var(--fdb-space-2);
	border-bottom: var(--fdb-rule-1) solid var(--fdb-line);
	color: var(--fdb-ink-2);
	font-size: var(--fdb-meta-size);
	line-height: 1.4;
}

.disclosure__label {
	flex: none;
	padding: 1px 5px;
	border: 1px solid var(--fdb-ink);
	color: var(--fdb-ink);
}

.main {
	padding-block: var(--fdb-space-5) var(--fdb-space-8);
}

.foot {
	padding-block: var(--fdb-space-5) var(--fdb-space-7);
	border-top: var(--fdb-rule-2) solid var(--fdb-ink);
	color: var(--fdb-ink-2);
	font-size: var(--fdb-meta-size);
}

.foot p {
	margin: 0 0 var(--fdb-space-2);
	max-width: var(--fdb-measure);
}

.foot__links {
	display: flex;
	gap: var(--fdb-space-4);
}

/* ---------------------------------------------------------- page intro */

.crumbs {
	display: flex;
	gap: var(--fdb-space-2);
	margin-bottom: var(--fdb-space-3);
	color: var(--fdb-ink-2);
	font-size: var(--fdb-meta-size);
}

.intro {
	padding-bottom: var(--fdb-space-4);
	max-width: 52rem;
}

.kicker {
	margin: 0 0 var(--fdb-space-2);
	color: var(--fdb-accent-text);
}

[data-fdb-accent="yellow"] .kicker {
	display: inline-block;
	padding: 1px 6px;
	background: var(--fdb-accent);
}

.intro h1 {
	font-size: min(var(--fdb-step-4), 1.6rem + 3vw);
}

.standfirst {
	margin: var(--fdb-space-3) 0 0;
	max-width: var(--fdb-measure);
	font-size: var(--fdb-step-1);
	line-height: 1.4;
	color: var(--fdb-ink-2);
}

.prov {
	margin: var(--fdb-space-3) 0 0;
	color: var(--fdb-ink-2);
	font-size: var(--fdb-meta-size);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- filters */

.filters {
	display: grid;
	gap: var(--fdb-space-4);
	padding-block: var(--fdb-space-4);
	border-top: var(--fdb-rule-1) solid var(--fdb-line);
	margin-bottom: var(--fdb-space-5);
}

.filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--fdb-space-4) var(--fdb-space-5);
}

.filters fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.filters legend,
.sort > span,
.range__label {
	display: block;
	padding: 0;
	margin-bottom: var(--fdb-space-2);
	color: var(--fdb-ink-2);
}

.seg__opts,
.knob__opts,
.tuner__tabs {
	display: flex;
	flex-wrap: wrap;
}

.seg__opt,
.knob__opt {
	position: relative;
	display: inline-flex;
}

.seg__opt input,
.knob__opt input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.seg__opt span {
	display: inline-flex;
	align-items: center;
	min-height: var(--fdb-control-h);
	padding: 0 14px;
	margin-inline-start: -1px;
	border: 1px solid var(--fdb-ink);
	background: var(--fdb-paper);
	color: var(--fdb-ink);
	font-family: var(--fdb-font-label);
	font-size: var(--fdb-meta-size);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.seg__opt:first-child span {
	margin-inline-start: 0;
}

.seg__opt input:hover + span {
	background: var(--fdb-paper-2);
}

.seg__opt input:checked + span {
	position: relative;
	background: var(--fdb-ink);
	color: var(--fdb-paper);
	box-shadow: inset 0 -3px 0 var(--fdb-accent);
}

.seg__opt input:focus-visible + span,
.knob__opt input:focus-visible + span {
	outline: 2px solid var(--fdb-focus);
	outline-offset: 2px;
	z-index: 2;
}

.checks__opts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fdb-space-2) var(--fdb-space-5);
}

.check {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--fdb-space-2);
	align-items: baseline;
	min-height: var(--fdb-control-h);
	cursor: pointer;
}

.check input[type="checkbox"] {
	grid-row: 1 / span 2;
	align-self: start;
	appearance: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	border: 1.5px solid var(--fdb-ink);
	border-radius: 0;
	background: var(--fdb-paper);
	display: grid;
	place-content: center;
	cursor: pointer;
}

.check input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--fdb-ink);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	transform: scale(0);
}

.check input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.check__text {
	font-weight: 600;
	font-size: var(--fdb-step-0);
	line-height: 22px;
}

.check__hint {
	grid-column: 2;
	font-size: var(--fdb-meta-size);
	line-height: 1.35;
	color: var(--fdb-ink-2);
}

.sort {
	display: block;
}

.sort select {
	min-height: var(--fdb-control-h);
	padding: 0 36px 0 12px;
	border: 1px solid var(--fdb-ink);
	border-radius: 0;
	background: var(--fdb-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23222'/%3E%3C/svg%3E") no-repeat right 12px center;
	appearance: none;
	color: var(--fdb-ink);
	font-family: var(--fdb-font-label);
	font-size: var(--fdb-meta-size);
	font-weight: 600;
}

.range {
	display: block;
	min-width: 240px;
}

.range__row {
	display: flex;
	align-items: center;
	gap: var(--fdb-space-3);
	min-height: var(--fdb-control-h);
}

.range input {
	flex: 1;
	accent-color: var(--fdb-ink);
}

.range__out {
	min-width: 1.5ch;
	font-size: var(--fdb-step-2);
	font-weight: 700;
	line-height: 1;
}

.apply {
	min-height: var(--fdb-control-h);
	padding: 0 16px;
	border: 1px solid var(--fdb-ink);
	background: var(--fdb-ink);
	color: var(--fdb-paper);
	font: inherit;
	font-weight: 600;
}

/* ---------------------------------------------------------- results */

.results,
.compare {
	transition: opacity 120ms ease-out;
}

.results[aria-busy="true"],
.compare[aria-busy="true"] {
	opacity: 0.55;
}

.summary {
	display: flex;
	flex-wrap: wrap;
	gap: 2px var(--fdb-space-3);
	align-items: baseline;
	margin: 0 0 var(--fdb-space-2);
	font-size: var(--fdb-meta-size);
	color: var(--fdb-ink-2);
}

.summary__count {
	color: var(--fdb-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.note {
	margin: var(--fdb-space-4) 0 0;
	max-width: var(--fdb-measure);
	font-size: var(--fdb-meta-size);
	color: var(--fdb-ink-2);
}

.empty {
	padding: var(--fdb-space-7) 0;
	border-block: var(--fdb-rule-1) solid var(--fdb-line);
}

.empty p {
	margin: 0 0 var(--fdb-space-2);
	font-size: var(--fdb-step-1);
}

/* ---------------------------------------------------------- tables */

.tbl {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fdb-table-size);
	line-height: 1.35;
}

.tbl caption {
	caption-side: top;
	text-align: start;
	padding-bottom: var(--fdb-space-3);
	font-family: var(--fdb-font-head);
	font-weight: var(--fdb-head-weight);
	font-size: var(--fdb-step-1);
}

.tbl th,
.tbl td {
	padding: var(--fdb-cell-y) var(--fdb-cell-x) var(--fdb-cell-y) 0;
	text-align: start;
	vertical-align: baseline;
	font-weight: 400;
}

.tbl thead th {
	padding-block: var(--fdb-space-2);
	color: var(--fdb-ink);
	vertical-align: bottom;
}

.tbl tbody th {
	font-weight: 600;
}

.tbl .num {
	text-align: end;
}

/* Table styles. ruled: hairlines between rows under the head rule. Only
   the master table carries the heavy rule; small tables get the section
   weight. */
.tbl {
	border-top: var(--fdb-rule-2) solid var(--fdb-ink);
}

.dt {
	border-top: var(--fdb-rule-3) solid var(--fdb-ink);
}

.tbl thead th {
	border-bottom: var(--fdb-rule-1) solid var(--fdb-ink);
}

.dt thead th {
	border-bottom-width: var(--fdb-rule-2);
}

.tbl tbody tr > * {
	border-bottom: var(--fdb-rule-1) solid var(--fdb-line);
}

.tbl tbody tr:last-child > * {
	border-bottom: var(--fdb-rule-2) solid var(--fdb-ink);
}

[data-fdb-table="zebra"] .tbl tbody tr > * {
	border-bottom: 0;
}

[data-fdb-table="zebra"] .tbl tbody tr:nth-child(even) > * {
	background: var(--fdb-paper-2);
}

[data-fdb-table="zebra"] .tbl tbody tr:last-child > * {
	border-bottom: var(--fdb-rule-2) solid var(--fdb-ink);
}

[data-fdb-table="boxed"] .tbl th,
[data-fdb-table="boxed"] .tbl td,
[data-fdb-table="timetable"] .tbl th,
[data-fdb-table="timetable"] .tbl td {
	border: var(--fdb-rule-1) solid var(--fdb-line);
	padding-inline: var(--fdb-cell-x);
}

[data-fdb-table="boxed"] .tbl thead th,
[data-fdb-table="timetable"] .tbl thead th {
	border-color: var(--fdb-ink);
}

[data-fdb-table="boxed"] .tbl,
[data-fdb-table="timetable"] .tbl {
	border-top: 0;
}

[data-fdb-table="boxed"] .tbl thead th {
	border-bottom-width: var(--fdb-rule-2);
}

[data-fdb-table="timetable"] .tbl thead th {
	background: var(--fdb-accent);
	color: var(--fdb-on-accent);
	border-bottom-width: var(--fdb-rule-1);
}

[data-fdb-table="timetable"] .tbl tbody th,
[data-fdb-table="timetable"] .dt__rank {
	background: var(--fdb-paper-2);
}

.tbl tbody tr:hover > * {
	background: var(--fdb-paper-2);
}

/* Master table */

.dt-wrap {
	position: relative;
}

.dt__rank {
	width: 3.2em;
	color: var(--fdb-accent-text);
	font-weight: 700;
}

.dt thead .dt__rank {
	color: var(--fdb-ink);
}

[data-fdb-table="timetable"] .dt thead .dt__rank {
	color: var(--fdb-on-accent);
}

.dt__model {
	min-width: 14em;
}

/* Column budget: the subscription column keeps "Kein Abo nötig" on one
   line, the local-storage column shrinks to its content. */
.dt td:nth-child(5) {
	min-width: 10em;
}

.dt td:nth-child(6) {
	width: 1%;
	white-space: nowrap;
}

.dt__model a {
	font-family: var(--fdb-font-head);
	font-weight: var(--fdb-head-weight);
	font-size: min(var(--fdb-step-1), 20px);
	letter-spacing: var(--fdb-head-tracking);
	text-decoration: none;
}

.dt__model a:hover {
	text-decoration: underline;
}

.dt__meta,
.dt__sub,
.dt__stamp {
	display: block;
	margin-top: 2px;
	font-family: var(--fdb-font-text);
	font-size: var(--fdb-meta-size);
	font-weight: 400;
	color: var(--fdb-ink-2);
	letter-spacing: 0;
	white-space: normal;
}

.dt__stamp {
	font-variant-numeric: tabular-nums;
}

.dt__units {
	display: inline-block;
	margin-top: 4px;
	padding: 0 4px;
	border: 1px solid var(--fdb-ink);
	font-size: var(--fdb-label-size);
	font-weight: 600;
}

.dt__cost {
	width: 12em;
}

.dt__costrow {
	display: flex;
	align-items: baseline;
	gap: var(--fdb-space-3);
}

.dt__cost strong {
	flex: none;
	min-width: 5.2em;
	font-size: min(var(--fdb-step-1), 20px);
	font-weight: 700;
}

.dt__cost .dt__sub {
	text-align: end;
}

.dt__price {
	width: 9em;
}

.dt__buy {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-weight: 600;
	text-decoration: none;
}

.dt__buy:hover {
	text-decoration: underline;
}

/* The scale: an energy-label bar. Track = most expensive in view; device
   solid, subscription hatched, both ink. */
.scale {
	display: flex;
	flex: 1;
	min-width: 5em;
	height: 10px;
	background: var(--fdb-paper-3);
}

.scale__hw {
	background: var(--fdb-bar-hw);
}

.scale__sub {
	background: var(--fdb-bar-sub);
	box-shadow: inset 0 0 0 1px var(--fdb-ink);
}

.scale--key {
	display: inline-flex;
	flex: none;
	width: 3em;
	min-width: 0;
	margin: 0 4px 0 0;
	vertical-align: middle;
}

/* Values: glyph and word, no colour. */
.nowrap {
	white-space: nowrap;
}

.v__glyph {
	display: inline-block;
	width: 0.9em;
	font-family: var(--fdb-font-num);
	font-weight: 700;
}

.v--good {
	font-weight: 600;
}

.v--bad {
	color: var(--fdb-ink-2);
}

.v--unknown {
	color: var(--fdb-ink-3);
}

.flag {
	display: inline;
	padding: 0 3px;
	border: 1px solid var(--fdb-ink-2);
	color: var(--fdb-ink-2);
	font: 600 10px/1 var(--fdb-font-label);
	text-decoration: none;
	vertical-align: 0.15em;
	cursor: help;
}

.flag--unverified {
	border-style: dashed;
}

.key {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fdb-space-1) var(--fdb-space-4);
	align-items: center;
	margin: var(--fdb-space-3) 0 0;
	font-size: var(--fdb-meta-size);
	color: var(--fdb-ink-2);
}

.key .flag {
	margin-inline-end: 2px;
}

/* Ad label: printed before every merchant link. */
.ad {
	display: inline-block;
	padding: 0 4px;
	border: 1px solid var(--fdb-ink-2);
	color: var(--fdb-ink-2);
	font-size: 10px;
	line-height: 1.5;
	vertical-align: 0.1em;
}

.cost-missing {
	display: block;
	font-size: var(--fdb-meta-size);
	color: var(--fdb-ink-2);
	font-family: var(--fdb-font-text);
}

/* ---------------------------------------------------------- prices and bills */

.price {
	display: grid;
	gap: var(--fdb-space-1);
	justify-items: start;
}

.price__amount {
	font-size: var(--fdb-step-2);
	font-weight: 700;
	line-height: 1.1;
}

.price__none {
	font-weight: 600;
}

.price__why,
.stamp {
	font-size: var(--fdb-meta-size);
	color: var(--fdb-ink-2);
	line-height: 1.4;
}

.price__discount {
	font-weight: 700;
	color: var(--fdb-accent-text);
}

.stamp__sample {
	display: inline-block;
	margin-inline-end: 6px;
	padding: 0 4px;
	border: 1px dashed var(--fdb-ink);
	color: var(--fdb-ink);
	font: 600 var(--fdb-label-size) / 1.4 var(--fdb-font-label);
	letter-spacing: var(--fdb-label-tracking);
	text-transform: uppercase;
}

.buy {
	display: inline-flex;
	align-items: center;
	gap: var(--fdb-space-2);
	min-height: var(--fdb-control-h);
	margin-top: var(--fdb-space-1);
	padding: 0 14px;
	border: 1px solid var(--fdb-ink);
	background: var(--fdb-ink);
	color: var(--fdb-paper);
	font-family: var(--fdb-font-label);
	font-size: var(--fdb-meta-size);
	font-weight: 600;
	text-decoration: none;
}

.buy:hover {
	background: var(--fdb-ink-2);
	text-decoration: none;
}

.buy .ad {
	border-color: currentColor;
	color: inherit;
}

/* The bill: a till receipt for three years. */
.bill {
	margin: 0;
	font-family: var(--fdb-font-num);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: var(--fdb-step-0);
	border-top: var(--fdb-rule-2) solid var(--fdb-ink);
}

.bill__row {
	display: flex;
	align-items: baseline;
	gap: var(--fdb-space-2);
	padding: var(--fdb-space-2) 0;
	border-bottom: var(--fdb-rule-1) dashed var(--fdb-line);
}

.bill__row dt {
	flex: 1;
	min-width: 0;
	color: var(--fdb-ink-2);
	font-family: var(--fdb-font-text);
}

.bill__row dd {
	margin: 0;
	white-space: nowrap;
}

.bill__total {
	border-top: var(--fdb-rule-2) solid var(--fdb-ink);
	border-bottom: 0;
	margin-top: -1px;
}

.bill__total dt {
	color: var(--fdb-ink);
	font-weight: 700;
}

.bill__total dd {
	font-size: var(--fdb-step-3);
	font-weight: 700;
	line-height: 1;
}

.bill__note {
	margin: var(--fdb-space-1) 0 0;
}

/* ---------------------------------------------------------- model page */

.intro--model {
	padding-bottom: var(--fdb-space-5);
	border-bottom: var(--fdb-rule-3) solid var(--fdb-ink);
	max-width: none;
}

.intro--model .standfirst,
.intro--model .prov {
	max-width: 52rem;
}

.split {
	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	gap: var(--fdb-space-7);
	align-items: start;
	padding-top: var(--fdb-space-5);
}

.sheet {
	position: sticky;
	top: var(--fdb-space-4);
	display: grid;
	gap: var(--fdb-space-4);
}

.sheet__title {
	font-size: var(--fdb-step-1);
}

.sheet__opt {
	margin: 0;
	font-size: var(--fdb-meta-size);
	color: var(--fdb-ink-2);
}

.sheet__kv {
	margin: 0;
	padding-top: var(--fdb-space-3);
	border-top: var(--fdb-rule-1) solid var(--fdb-line);
}

.sheet__kv dt {
	color: var(--fdb-ink-2);
	margin-bottom: var(--fdb-space-1);
}

.sheet__kv dd {
	margin: 0;
	font-size: var(--fdb-meta-size);
}

.mswitch {
	display: flex;
	margin: 0;
	font-family: var(--fdb-font-label);
	font-size: var(--fdb-meta-size);
	font-weight: 600;
}

.mswitch a,
.mswitch__off {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	margin-inline-start: -1px;
	border: 1px solid var(--fdb-ink);
	text-decoration: none;
}

.mswitch a[aria-current] {
	background: var(--fdb-ink);
	color: var(--fdb-paper);
	box-shadow: inset 0 -3px 0 var(--fdb-accent);
}

.mswitch__off {
	color: var(--fdb-ink-3);
	border-color: var(--fdb-line);
	text-decoration: line-through;
}

/* Numbered sections, as in a data sheet. */
.sec {
	padding-block: var(--fdb-space-5) var(--fdb-space-6);
	border-top: var(--fdb-rule-2) solid var(--fdb-ink);
}

.body .sec:first-child {
	border-top: 0;
	padding-top: 0;
}

.sec h2 {
	display: flex;
	align-items: baseline;
	gap: var(--fdb-space-3);
	margin-bottom: var(--fdb-space-4);
	font-size: var(--fdb-step-2);
}

.sec__n {
	font-family: var(--fdb-font-num);
	font-variant-numeric: tabular-nums;
	color: var(--fdb-accent-text);
}

[data-fdb-accent="yellow"] .sec__n {
	padding: 0 6px;
	background: var(--fdb-accent);
}

.sec__lede,
.sec__note {
	margin: var(--fdb-space-3) 0 0;
	max-width: var(--fdb-measure);
	font-size: var(--fdb-meta-size);
	color: var(--fdb-ink-2);
}

.kv {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 0 var(--fdb-space-6);
	margin: 0;
}

.kv__row {
	display: grid;
	gap: var(--fdb-space-1);
	align-content: start;
	padding: var(--fdb-space-3) 0;
	border-top: var(--fdb-rule-1) solid var(--fdb-line);
}

.kv__row--wide {
	grid-column: 1 / -1;
}

.kv dt {
	color: var(--fdb-ink-2);
}

.kv dd {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--fdb-space-1) var(--fdb-space-3);
}

.kv__extra {
	color: var(--fdb-ink-2);
	font-size: var(--fdb-meta-size);
}

.kv__extra--strong {
	color: var(--fdb-ink);
	font-weight: 600;
}

.howto {
	display: block;
	padding: var(--fdb-space-2) var(--fdb-space-3);
	border-inline-start: var(--fdb-rule-2) solid var(--fdb-accent);
	background: var(--fdb-paper-2);
	font-family: var(--fdb-font-num);
	font-size: var(--fdb-meta-size);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.locks,
.plans,
.skus,
.diff,
.years,
.weights {
	margin-top: var(--fdb-space-5);
}

.locks__note {
	display: block;
	margin-top: 2px;
	font-size: var(--fdb-meta-size);
	color: var(--fdb-ink-2);
}

.scroll {
	overflow-x: auto;
}

.timeline {
	list-style: none;
	margin: var(--fdb-space-4) 0 0;
	padding: 0;
}

.timeline__item {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	column-gap: var(--fdb-space-4);
	row-gap: var(--fdb-space-1);
	padding: var(--fdb-space-3) 0;
	border-top: var(--fdb-rule-1) solid var(--fdb-line);
	align-items: baseline;
}

.timeline__date {
	grid-row: 1 / span 3;
	text-align: start;
	font-weight: 600;
	font-size: var(--fdb-meta-size);
}

.timeline__kind {
	color: var(--fdb-ink-2);
}

.timeline__text {
	max-width: var(--fdb-measure);
}

.timeline__item .mark-pop {
	justify-self: start;
}

.timeline__item--named {
	box-shadow: inset var(--fdb-rule-2) 0 0 var(--fdb-accent);
	padding-inline-start: var(--fdb-space-3);
}

.sources {
	margin: 0;
	padding-inline-start: 2em;
	display: grid;
	gap: var(--fdb-space-2);
	font-size: var(--fdb-meta-size);
}

.sources li::marker {
	font-family: var(--fdb-font-num);
	color: var(--fdb-ink-2);
}

.sources a {
	overflow-wrap: anywhere;
}

.sources__meta {
	display: block;
	color: var(--fdb-ink-2);
}

/* Status marks: footnote-like, printed, no colour. */
.mark-pop {
	vertical-align: baseline;
}

.mark {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	min-height: 24px;
	padding: 3px 6px 0;
	border: 1px solid var(--fdb-line);
	font-family: var(--fdb-font-label);
	font-size: var(--fdb-label-size);
	font-weight: 600;
	letter-spacing: var(--fdb-label-tracking);
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--fdb-ink-2);
	white-space: nowrap;
	cursor: pointer;
}

span.mark {
	cursor: default;
}

button.mark:hover {
	border-color: var(--fdb-ink);
	color: var(--fdb-ink);
}

button.mark:focus-visible {
	outline: 2px solid var(--fdb-focus);
	outline-offset: 2px;
}

.mark--verified {
	border-color: var(--fdb-ink);
	color: var(--fdb-ink);
}

.mark--unverified {
	border-style: dashed;
}

.mark__ref {
	font-family: var(--fdb-font-num);
	font-size: 0.85em;
	letter-spacing: 0;
	line-height: 0;
	vertical-align: 0.35em;
}

.pop {
	max-width: 20rem;
	font-family: var(--fdb-font-text);
	font-size: var(--fdb-meta-size);
	line-height: 1.45;
	color: var(--fdb-ink-2);
	white-space: normal;
	text-transform: none;
	letter-spacing: 0;
}

.pop p {
	margin: 0 0 var(--fdb-space-2);
}

.pop__status {
	color: var(--fdb-ink);
	font-weight: 600;
}

.pop__sources {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--fdb-space-2);
}

.pop__sources a {
	display: block;
	color: var(--fdb-ink);
	font-weight: 600;
}

.pop__pub {
	display: block;
}

/* ---------------------------------------------------------- comparison */

.matchup:first-child {
	border-top: 0;
	padding-top: 0;
}

.headline {
	margin: 0 0 var(--fdb-space-5);
	max-width: var(--fdb-measure);
	font-family: var(--fdb-font-head);
	font-weight: var(--fdb-head-weight);
	font-size: var(--fdb-step-1);
	line-height: 1.3;
}

.headline--missing {
	font-weight: 400;
	color: var(--fdb-ink-2);
}

.pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 26rem));
	gap: var(--fdb-space-7);
}

.pair .bill__total dd,
.sheet .bill__total dd {
	font-size: var(--fdb-step-2);
}

.bill__total dt {
	white-space: nowrap;
}

.pair h3 {
	margin-bottom: var(--fdb-space-2);
	font-size: var(--fdb-step-1);
}

.pair h3 a {
	text-decoration: none;
}

.years {
	max-width: 46rem;
}

.years tbody tr:last-child > * {
	font-weight: 700;
}

.diff {
	max-width: 52rem;
	table-layout: fixed;
}

.diff th:first-child {
	width: 26%;
}

.diff .price__amount {
	font-size: var(--fdb-step-1);
}

/* ---------------------------------------------------------- prose pages */

.prose {
	max-width: 48rem;
}

.prose .sec p,
.prose .sec li {
	max-width: var(--fdb-measure);
}

.legend {
	display: grid;
	gap: var(--fdb-space-3);
	margin: 0;
}

.legend div {
	display: grid;
	grid-template-columns: 12rem minmax(0, 1fr);
	gap: var(--fdb-space-3);
	align-items: baseline;
}

.legend dd {
	margin: 0;
}

.lawlist {
	padding-inline-start: 1.25em;
}

.placeholder {
	margin-top: var(--fdb-space-5);
	padding: var(--fdb-space-3) var(--fdb-space-4);
	border: 1px dashed var(--fdb-ink);
}

/* ---------------------------------------------------------- tuner */
/* The panel is tooling, outside the system (like the prototype bar); the
   rest of the page is the real thing. */

.tuner {
	position: fixed;
	z-index: 20;
	right: 12px;
	bottom: 12px;
	width: min(330px, calc(100vw - 24px));
	border-radius: 8px;
	background: #1b1c1f;
	color: #e3e5ea;
	font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0;
	box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.45);
}

.tuner__panel {
	max-height: min(72dvh, 680px);
	overflow: auto;
	padding: 0 14px 14px;
}

.tuner__title {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	font: 600 14px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0;
	cursor: pointer;
}

.tuner__title:focus-visible {
	outline: 2px solid #f2c14e;
	outline-offset: -2px;
}

.tuner__hint {
	margin: 6px 0 12px;
	color: #a9adb6;
	font-size: 12px;
}

.tuner__reset,
.tuner__copy {
	min-height: 28px;
	padding: 0 10px;
	border: 1px solid #4a4d55;
	border-radius: 4px;
	background: #2a2c31;
	color: #f2f3f5;
	font: inherit;
	cursor: pointer;
}

.tuner__reset:hover,
.tuner__copy:hover {
	background: #383b41;
}

.knob {
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.knob legend {
	padding: 0;
	margin-bottom: 4px;
	color: #a9adb6;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.knob__opts {
	gap: 3px;
}

.knob__opt span {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 8px;
	border-radius: 4px;
	background: #2a2c31;
	color: #d5d8de;
	font-size: 12px;
}

.knob__opt input:hover + span {
	background: #383b41;
}

.knob__opt input:checked + span {
	background: #f2f3f5;
	color: #1b1c1f;
	font-weight: 600;
}

.knob__opt input:focus-visible + span {
	outline-color: #f2c14e;
}

.tuner__out {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #383b41;
}

.tuner__values {
	margin: 0 0 8px;
	padding: 8px;
	border-radius: 4px;
	background: #111214;
	color: #c9cbd1;
	font: 11px/1.45 ui-monospace, Menlo, monospace;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	user-select: all;
}

.tuner__links {
	display: grid;
	gap: 4px;
	margin: 10px 0 0;
}

.tuner__links a {
	color: #f2c14e;
}

.tuner__tabs {
	margin-bottom: var(--fdb-space-4);
}

/* ---------------------------------------------------------- narrow screens */

@media (max-width: 60rem) {
	.split {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fdb-space-5);
	}

	.sheet {
		position: static;
	}

	/* The master table becomes one block per model. */
	.dt,
	.dt tbody {
		display: block;
	}

	.dt {
		border-top: var(--fdb-rule-3) solid var(--fdb-ink);
	}

	.dt thead {
		display: none;
	}

	.dt tbody tr {
		display: grid;
		grid-template-columns: 1.9rem minmax(0, 1fr);
		grid-template-areas:
			"rank model"
			". cost"
			". price"
			". sub"
			". local"
			". rtsp"
			". ha";
		align-items: baseline;
		column-gap: var(--fdb-space-3);
		padding: var(--fdb-space-3) 0;
		border-bottom: var(--fdb-rule-1) solid var(--fdb-line);
	}

	.dt tbody tr > * {
		padding: 0;
		width: auto !important;
		white-space: normal !important;
		border: 0 !important;
		background: none !important;
	}

	.dt tbody tr > :nth-child(1) { grid-area: rank; text-align: start; font-size: var(--fdb-step-1); }
	.dt tbody tr > :nth-child(2) { grid-area: model; }
	.dt tbody tr > :nth-child(3) { grid-area: cost; margin-top: var(--fdb-space-2); }
	.dt tbody tr > :nth-child(4) { grid-area: price; text-align: start; margin-top: var(--fdb-space-2); }
	.dt tbody tr > :nth-child(n + 5) { margin-top: var(--fdb-space-1); }
	.dt tbody tr > :nth-child(5) { grid-area: sub; }
	.dt tbody tr > :nth-child(6) { grid-area: local; }
	.dt tbody tr > :nth-child(7) { grid-area: rtsp; }
	.dt tbody tr > :nth-child(8) { grid-area: ha; }

	.dt tbody tr > :nth-child(n + 5) {
		display: grid;
		grid-template-columns: 8.5rem minmax(0, 1fr);
		column-gap: var(--fdb-space-2);
		align-items: baseline;
	}

	.dt tbody tr > :nth-child(n + 5) > * {
		grid-column: 2;
	}

	.dt tbody tr > :nth-child(n + 5)::before {
		grid-column: 1;
		grid-row: 1 / span 2;
		font-family: var(--fdb-font-label);
		font-size: var(--fdb-label-size);
		font-weight: 600;
		letter-spacing: var(--fdb-label-tracking);
		text-transform: uppercase;
		color: var(--fdb-ink-2);
	}

	.dt tbody tr > :nth-child(5)::before { content: var(--l-sub); }
	.dt tbody tr > :nth-child(6)::before { content: var(--l-local); }
	.dt tbody tr > :nth-child(7)::before { content: "RTSP · Frigate"; }
	.dt tbody tr > :nth-child(8)::before { content: "Home Assistant"; }

	.dt tbody tr > :nth-child(n + 5) .dt__sub {
		margin-top: 0;
	}

	.dt__stamp {
		display: inline;
		margin-inline-start: var(--fdb-space-2);
	}

	.dt__cost,
	.dt__price {
		width: auto;
	}
}

:lang(de) .dt { --l-sub: "Abo"; --l-local: "Lokal speichern"; }
:lang(en) .dt { --l-sub: "Subscription"; --l-local: "Local storage"; }

@media (max-width: 40rem) {
	.intro {
		padding-bottom: var(--fdb-space-2);
	}

	.standfirst {
		font-size: var(--fdb-step-0);
	}

	.check__hint {
		display: none;
	}

	.filters {
		gap: var(--fdb-space-3);
		padding-block: var(--fdb-space-3);
	}

	.tuner__panel {
		max-height: 48dvh;
	}

	.pair {
		grid-template-columns: minmax(0, 1fr);
	}

	.timeline__item {
		grid-template-columns: minmax(0, 1fr);
	}

	.timeline__date {
		grid-row: auto;
	}

	.legend div {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fdb-space-1);
	}

	/* Feature locks: the feature on its own line, value and mark below. */
	.locks,
	.locks tbody {
		display: block;
	}

	.locks thead {
		display: none;
	}

	.locks tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--fdb-space-1) var(--fdb-space-3);
		align-items: baseline;
		padding: var(--fdb-cell-y) 0;
		border-bottom: var(--fdb-rule-1) solid var(--fdb-line);
	}

	.locks tr > th {
		grid-column: 1 / -1;
	}

	.locks tr > * {
		padding: 0;
		border: 0 !important;
	}

	/* Comparison facts: both models side by side under each fact. */
	.diff,
	.diff thead,
	.diff tbody {
		display: block;
	}

	.diff tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--fdb-space-1) var(--fdb-space-4);
		padding: var(--fdb-cell-y) 0;
		border-bottom: var(--fdb-rule-1) solid var(--fdb-line);
	}

	.diff tr > :first-child {
		grid-column: 1 / -1;
	}

	.diff thead tr > :first-child {
		display: none;
	}

	.diff th,
	.diff td {
		padding: 0;
		border: 0 !important;
		width: auto !important;
	}

	.diff .buy {
		white-space: normal;
	}

	.diff .v {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.results,
	.compare {
		transition: none;
	}
}

@media print {
	.proto,
	.filters,
	.tuner__panel,
	.buy {
		display: none;
	}
}