/* The system diagram (#2579, #3609): the home page's subway map, and the review page a round is
   looked at in, which carries this same file so the two cannot drift. Every colour is a token and
   every face a role, so nothing here names either. The builder adds a rule for each box, which
   fades everything its cables do not reach while it is hovered over or focused. */

.diagram {
	display: grid;
	gap: 0.875rem;
	margin: 0;
}

.diagram-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 0.8125rem/1.4 var(--font-text);
}

.diagram-legend li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.diagram-legend svg {
	flex: none;
}

.diagram-canvas {
	overflow-x: auto;
}

/* Drawn at the width of the site's reading column, 50rem, and never narrower than 40rem, below which
   a phone scrolls it sideways rather than shrinking its words past reading. */
.system-diagram {
	display: block;
	width: 100%;
	max-width: 50rem;
	min-width: 40rem;
	height: auto;
}

.diagram-caption {
	margin: 0;
	color: var(--ink-quiet);
	font-size: 0.875rem;
}

/* Boxes */

.system-diagram .node { outline: none; transition: opacity 160ms ease; }
.system-diagram .box-app { fill: var(--raised); stroke: var(--rule-strong); stroke-width: 1.25; }
.system-diagram .box-ext { fill: var(--page); stroke: var(--ink-faint); stroke-width: 1; }
.system-diagram .node:focus-visible .box-app,
.system-diagram .node:focus-visible .box-ext { stroke: var(--focus); stroke-width: 2.5; }
.system-diagram .icon-line { fill: none; stroke: var(--ink-quiet); stroke-width: 1.25; stroke-linejoin: round; }
.system-diagram .app-mark { color: var(--ink); }
.system-diagram .ext-mark { color: var(--ink-quiet); }
.system-diagram .app-name { fill: var(--ink); font: 600 22px var(--font-heading); }
.system-diagram .app-caption { fill: var(--ink-quiet); font: 400 14px var(--font-text); }
.system-diagram .chip { fill: var(--surface); }
.system-diagram .chip-text { fill: var(--ink-body); font: 400 11.5px var(--font-text); }   /* the size diagram.py measures a tag at */
.system-diagram .chip-text.code { font-family: var(--font-code); }   /* a tag that is code, an app's own names for things (#3650) */
.system-diagram .ext-label { fill: var(--ink-body); font: 400 14px var(--font-text); }
.system-diagram .tile-label { font-size: 13px; }
.system-diagram .zone { fill: var(--ink-quiet); font: 400 12px var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; }
.system-diagram .baseline { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.system-diagram .baseline-text { fill: var(--ink-quiet); font: 400 11px var(--font-text); letter-spacing: 0.02em; }

/* Cables, coloured by what they carry, and saying it in words too */

.diagram .audio { --flow: var(--flow-audio); }
.diagram .midi { --flow: var(--flow-midi); }
.diagram .events { --flow: var(--flow-events); }
.diagram .other { --flow: var(--flow-other); }
.diagram .plain { --flow: var(--ink-body); }
.system-diagram .link { transition: opacity 160ms ease; }
.diagram .cable { fill: none; stroke: var(--flow); stroke-width: 1.75; stroke-linecap: round; }
/* A planned cable keeps the colour of what it will carry: its dashes, never its colour, say it is planned. */
.diagram .cable.planned { stroke-dasharray: 6 5; stroke-linecap: butt; }
.system-diagram .cable-label { fill: var(--flow); font: 400 11.5px var(--font-text); paint-order: stroke; stroke: var(--page); stroke-width: 5px; stroke-linejoin: round; }
.system-diagram .arrowhead { fill: var(--flow); }

/* A page may offer a switch that hides the planned links: the review page does, and the home page shows them. */
.diagram:has(#show-planned:not(:checked)) .planned-link,
.diagram:has(#show-planned:not(:checked)) .planned-only { display: none; }

@media (prefers-reduced-motion: reduce) {
	.system-diagram .node,
	.system-diagram .link { transition: none; }
}

.diagram:has(#n-sdr_receiver:hover, #n-sdr_receiver:focus-visible) .link:not(.t-sdr_receiver) { opacity: 0.1; }
.diagram:has(#n-sdr_receiver:hover, #n-sdr_receiver:focus-visible) .node:not(#n-sdr_receiver):not(.a-sdr_receiver) { opacity: 0.35; }
.diagram:has(#n-microphone:hover, #n-microphone:focus-visible) .link:not(.t-microphone) { opacity: 0.1; }
.diagram:has(#n-microphone:hover, #n-microphone:focus-visible) .node:not(#n-microphone):not(.a-microphone) { opacity: 0.35; }
.diagram:has(#n-audio_files:hover, #n-audio_files:focus-visible) .link:not(.t-audio_files) { opacity: 0.1; }
.diagram:has(#n-audio_files:hover, #n-audio_files:focus-visible) .node:not(#n-audio_files):not(.a-audio_files) { opacity: 0.35; }
.diagram:has(#n-midi_controllers:hover, #n-midi_controllers:focus-visible) .link:not(.t-midi_controllers) { opacity: 0.1; }
.diagram:has(#n-midi_controllers:hover, #n-midi_controllers:focus-visible) .node:not(#n-midi_controllers):not(.a-midi_controllers) { opacity: 0.35; }
.diagram:has(#n-composition:hover, #n-composition:focus-visible) .link:not(.t-composition) { opacity: 0.1; }
.diagram:has(#n-composition:hover, #n-composition:focus-visible) .node:not(#n-composition):not(.a-composition) { opacity: 0.35; }
.diagram:has(#n-live_data:hover, #n-live_data:focus-visible) .link:not(.t-live_data) { opacity: 0.1; }
.diagram:has(#n-live_data:hover, #n-live_data:focus-visible) .node:not(#n-live_data):not(.a-live_data) { opacity: 0.35; }
.diagram:has(#n-algorithms:hover, #n-algorithms:focus-visible) .link:not(.t-algorithms) { opacity: 0.1; }
.diagram:has(#n-algorithms:hover, #n-algorithms:focus-visible) .node:not(#n-algorithms):not(.a-algorithms) { opacity: 0.35; }
.diagram:has(#n-touchscreen:hover, #n-touchscreen:focus-visible) .link:not(.t-touchscreen) { opacity: 0.1; }
.diagram:has(#n-touchscreen:hover, #n-touchscreen:focus-visible) .node:not(#n-touchscreen):not(.a-touchscreen) { opacity: 0.35; }
.diagram:has(#n-midi_files_in:hover, #n-midi_files_in:focus-visible) .link:not(.t-midi_files_in) { opacity: 0.1; }
.diagram:has(#n-midi_files_in:hover, #n-midi_files_in:focus-visible) .node:not(#n-midi_files_in):not(.a-midi_files_in) { opacity: 0.35; }
.diagram:has(#n-your_work:hover, #n-your_work:focus-visible) .link:not(.t-your_work) { opacity: 0.1; }
.diagram:has(#n-your_work:hover, #n-your_work:focus-visible) .node:not(#n-your_work):not(.a-your_work) { opacity: 0.35; }
.diagram:has(#n-substation:hover, #n-substation:focus-visible) .link:not(.t-substation) { opacity: 0.1; }
.diagram:has(#n-substation:hover, #n-substation:focus-visible) .node:not(#n-substation):not(.a-substation) { opacity: 0.35; }
.diagram:has(#n-subsample:hover, #n-subsample:focus-visible) .link:not(.t-subsample) { opacity: 0.1; }
.diagram:has(#n-subsample:hover, #n-subsample:focus-visible) .node:not(#n-subsample):not(.a-subsample) { opacity: 0.35; }
.diagram:has(#n-subsequence:hover, #n-subsequence:focus-visible) .link:not(.t-subsequence) { opacity: 0.1; }
.diagram:has(#n-subsequence:hover, #n-subsequence:focus-visible) .node:not(#n-subsequence):not(.a-subsequence) { opacity: 0.35; }
.diagram:has(#n-superconductor:hover, #n-superconductor:focus-visible) .link:not(.t-superconductor) { opacity: 0.1; }
.diagram:has(#n-superconductor:hover, #n-superconductor:focus-visible) .node:not(#n-superconductor):not(.a-superconductor) { opacity: 0.35; }
.diagram:has(#n-subroutine:hover, #n-subroutine:focus-visible) .link:not(.t-subroutine) { opacity: 0.1; }
.diagram:has(#n-subroutine:hover, #n-subroutine:focus-visible) .node:not(#n-subroutine):not(.a-subroutine) { opacity: 0.35; }
.diagram:has(#n-radio_recordings:hover, #n-radio_recordings:focus-visible) .link:not(.t-radio_recordings) { opacity: 0.1; }
.diagram:has(#n-radio_recordings:hover, #n-radio_recordings:focus-visible) .node:not(#n-radio_recordings):not(.a-radio_recordings) { opacity: 0.35; }
.diagram:has(#n-sample_library:hover, #n-sample_library:focus-visible) .link:not(.t-sample_library) { opacity: 0.1; }
.diagram:has(#n-sample_library:hover, #n-sample_library:focus-visible) .node:not(#n-sample_library):not(.a-sample_library) { opacity: 0.35; }
.diagram:has(#n-instruments:hover, #n-instruments:focus-visible) .link:not(.t-instruments) { opacity: 0.1; }
.diagram:has(#n-instruments:hover, #n-instruments:focus-visible) .node:not(#n-instruments):not(.a-instruments) { opacity: 0.35; }
.diagram:has(#n-daw:hover, #n-daw:focus-visible) .link:not(.t-daw) { opacity: 0.1; }
.diagram:has(#n-daw:hover, #n-daw:focus-visible) .node:not(#n-daw):not(.a-daw) { opacity: 0.35; }
.diagram:has(#n-midi_file:hover, #n-midi_file:focus-visible) .link:not(.t-midi_file) { opacity: 0.1; }
.diagram:has(#n-midi_file:hover, #n-midi_file:focus-visible) .node:not(#n-midi_file):not(.a-midi_file) { opacity: 0.35; }
.diagram:has(#n-audio_output:hover, #n-audio_output:focus-visible) .link:not(.t-audio_output) { opacity: 0.1; }
.diagram:has(#n-audio_output:hover, #n-audio_output:focus-visible) .node:not(#n-audio_output):not(.a-audio_output) { opacity: 0.35; }