:root {
	--viewer-max-width: 1280px;
	--meeting-list-max-width: 1280px;
	--viewer-basis: 55;
	--meeting-list-basis: 45;
	--content-gap: 10px;
	--content-max-width: calc(var(--viewer-max-width) / (var(--viewer-basis) / 100) + var(--content-gap));

	--breakpoint-stack: 1023px;   /* stack (mobile) at/below this; 1024 = tablet landscape, kept on desktop */
	--breakpoint-phone: 600px;
	--breakpoint-fullscreen-height: 500px;

	--touch-control-height: 24px;

	--color-brand: #004990;
	--color-brand-dark: #171d40;
	--color-brand-light: #dde9f4;

	--color-text: #000;
	--color-text-secondary: #333;
	--color-text-muted: #666;
	--color-text-inverse: #fff;

	--color-bg-page: #dde9f4;
	--color-bg-content: #fff;
	--color-bg-controls: #e2e2e2;
	--color-bg-hover: #e9ecef;
	--color-bg-subtle: #f5f5f5;
	--color-bg-disabled: #f0f0f0;
	--color-bg-dark: #222;

	--color-border: #bdbdbd;
	--color-border-light: #ccc;
	--color-border-subtle: #ddd;
	--color-border-faint: #eee;

	--color-tab-bg: #e0e0e0;
	--color-tab-hover: #d0d0d0;
	--color-tab-border: #555;

	--color-link: #26425f;
	--color-link-hover: #36362a;

	--color-success: #28a745;
	--color-success-dark: #218838;

	--color-highlight-active: #fff3cd;
	--color-highlight-active-text: #044f85;
	--color-highlight-search: #b3e5fc;
	--color-highlight-search-border: #03a9f4;
	--color-highlight-current: #ffb74d;
	--color-highlight-current-border: #f57c00;

	--font-base: arial, helvetica, sans-serif;
	--font-mono: 'Courier New', monospace;
	--font-content: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

	--font-size-xs: 11px;
	--font-size-sm: 12px;
	--font-size-base: 13px;
	--font-size-md: 14px;
	--font-size-lg: 15px;
	--font-size-overlay: 18pt;

	--spacing-xs: 4px;
	--spacing-sm: 5px;
	--spacing-md: 8px;
	--spacing-base: 10px;
	--spacing-lg: 15px;
	--spacing-xl: 20px;

	--radius-sm: 2px;
	--radius-base: 4px;
	--radius-lg: 5px;
	--radius-box: 0.3em;

	--line-height-base: 1.4;
	--line-height-relaxed: 1.6;

	--peaks-height: 32px;
	--peaks-bg: #4c4c4c;
	--peaks-padding: 5px;
	--peaks-gradient-green: #4caf50;
	--peaks-gradient-yellow: #ffc107;
	--peaks-gradient-orange: #ff9800;
	--peaks-gradient-red: #f44336;
	--peaks-playhead: #000;

	/* Paragraph transcript: the archive player's document, and the editor's. */
	--transcript-speaker-track: 128px;        /* left column, curated: speaker name over its timecode */
	--transcript-time-track: 74px;            /* left column, uncurated: the timecode alone */

	/* Playhead underlays. Blue for the paragraph, yellow for the word — the two are read together,
	   so the paragraph tint is kept weak enough that the word still reads as the sharper mark. */
	--transcript-active-paragraph: #e6eefa;
	--transcript-active-word: #ffe07a;

	--transcript-cue-mark: #f2c9c0;           /* dropout / inaudible / garbled region */

	/* Voice / correction palette. Sixteen entries, every one at least 4.8:1 on white so it can
	   colour text and not just a swatch. Consecutive indices sit ~158 degrees apart in hue and
	   alternate in weight, so two voices assigned one after another never look related.
	   Shared: the editor's correction key draws from the same set as the voice key. */
	--speaker-0: #841515;
	--speaker-1: #257e5d;
	--speaker-2: #841568;
	--speaker-3: #307e25;
	--speaker-4: #4c1584;
	--speaker-5: #6c7722;
	--speaker-6: #153184;
	--speaker-7: #9e582e;
	--speaker-8: #147b7b;
	--speaker-9: #9e2e58;
	--speaker-10: #158431;
	--speaker-11: #902e9e;
	--speaker-12: #477b14;
	--speaker-13: #3c2e9e;
	--speaker-14: #846815;
	--speaker-15: #2e749e;

	--peaks-height: 32px;
	--peaks-bg: #4c4c4c;
	--peaks-padding: 5px;
	--peaks-gradient-green: #4caf50;
	--peaks-gradient-yellow: #ffc107;
	--peaks-gradient-orange: #ff9800;
	--peaks-gradient-red: #f44336;
	--peaks-playhead: #000;

}

.bar.bar-footer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-bg-controls);
	color: var(--color-text-muted);
	border: none;
	border-top: 1px solid var(--color-border-light);
	border-radius: 0;
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-xs);
	text-align: center;
}

.bar.bar-footer #footer { max-width: var(--content-max-width); }

/* Keep this on one line, whatever the container would rather do.
   The white-space rule alone is usually enough, but several places in these sheets set
   `overflow-wrap: anywhere` on names and labels so a long one cannot overflow its column. That also
   changes the element's min-content width, which is what makes a flex item shrink to a single
   character. Resetting both alongside the wrap means "nowrap" means it wherever the class is used,
   rather than only where nothing else has an opinion. */
.nowrap {
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: normal;
}