/**
 * Zumba Cue Sheet - Frontend styles (v2, print-friendly).
 *
 * A single, always-visible editable cue sheet: header, input panel,
 * clickable rhythm chips, an editable sequence table with section row tints,
 * an instructor notes block, and an always-visible quick-reference panel.
 *
 * All colors are driven by CSS custom properties scoped under #zcs-app so the
 * widget never leaks styles into the surrounding theme. A dedicated print
 * stylesheet renders a clean, color-accurate PDF.
 *
 * @package Zumba_Cue_Sheet
 * @since   2.0.0
 */

/* -------------------------------------------------------------------------
 * Custom properties (scoped to the widget root).
 * ---------------------------------------------------------------------- */
#zcs-app,
.zcs-app {
	--zcs-accent: #e63946;          /* Zumba red (primary accent).      */
	--zcs-accent-dark: #c52836;     /* Darker red for hover/active.     */
	--zcs-dark: #2b2d42;            /* Dark slate (quick-ref headers).  */
	--zcs-muted: #6c757d;           /* Secondary text.                  */
	--zcs-muted-soft: #6c757d;      /* Placeholder/affordance (AA ~4.7:1). */
	--zcs-border: #e0e0e0;          /* Hairline borders.                */
	--zcs-border-soft: #eceef1;     /* Very light divider.              */
	--zcs-bg: #ffffff;              /* Surface / card background.       */
	--zcs-bg-soft: #f8f9fa;         /* Soft panel background.           */
	--zcs-stripe: #f5f6f8;          /* Table zebra stripe.              */

	/* Section row tints. */
	--zcs-tint-neutral: #f7f7f9;    /* Intro / outro / fallback.        */
	--zcs-tint-verse: #e8f5e9;      /* Verse (green).                   */
	--zcs-tint-chorus: #fdecea;     /* Chorus / pre-ch / drop (red).    */
	--zcs-tint-bridge: #fff4e0;     /* Bridge (amber).                  */

	/* Badge defaults. */
	--zcs-badge-bg: #ffffff;
	--zcs-badge-text: #555b66;

	--zcs-radius: 10px;
	--zcs-radius-sm: 6px;
	--zcs-gap: 16px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	color: var(--zcs-dark);
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * Visibility helper (toggled by JS on spinner / error only).
 * ---------------------------------------------------------------------- */
.zcs-hidden {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Root container.
 * ---------------------------------------------------------------------- */
#zcs-app {
	box-sizing: border-box;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

/* -------------------------------------------------------------------------
 * Optional hero banner (rendered only when an image asset is present).
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-hero {
	margin: 0 0 var(--zcs-gap);
}

#zcs-app .zcs-hero-img {
	display: block;
	width: 100%;
	max-height: 220px;
	object-fit: cover;
	border-radius: var(--zcs-radius);
	box-shadow: 0 1px 3px rgba(43, 45, 66, 0.12);
}

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

/* -------------------------------------------------------------------------
 * Header / logo.
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-logo {
	display: inline-block;
	/* Darker accent for AA contrast of white 14px bold text (5.63:1). */
	background: var(--zcs-accent-dark);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: var(--zcs-radius-sm);
	line-height: 1;
	white-space: nowrap;
}

#zcs-app .zcs-title {
	margin: 10px 0 4px;
	font-size: 24px;
	font-weight: 700;
	color: var(--zcs-accent);
}

#zcs-app .zcs-subtitle {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--zcs-muted);
}

/* Thin accent rule below the header. */
#zcs-app .zcs-header-rule,
#zcs-app hr.zcs-header-rule {
	border: 0;
	height: 3px;
	margin: 0 0 var(--zcs-gap);
	background: var(--zcs-accent);
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
 * Input panel (responsive grid card).
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-input-panel {
	background: var(--zcs-bg);
	border: 1px solid var(--zcs-border);
	border-radius: var(--zcs-radius);
	padding: 20px;
	margin-bottom: var(--zcs-gap);
	box-shadow: 0 1px 3px rgba(43, 45, 66, 0.06);

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--zcs-gap);
}

#zcs-app .zcs-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

#zcs-app .zcs-label {
	font-size: 11px;
	font-weight: 700;
	/* Darker accent so 11px label text meets AA (5.63:1 vs 4.17:1). */
	color: var(--zcs-accent-dark);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

#zcs-app .zcs-input {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	color: var(--zcs-dark);
	background: var(--zcs-bg);
	border: 1px solid var(--zcs-border);
	border-radius: var(--zcs-radius-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#zcs-app .zcs-input::placeholder {
	color: var(--zcs-muted-soft);
}

#zcs-app .zcs-input:focus {
	outline: none;
	border-color: var(--zcs-accent);
	box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
}

/* Actions row (sibling of the input panel, below the field grid). */
#zcs-app .zcs-input-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--zcs-gap);
}

/* -------------------------------------------------------------------------
 * Routines bar (save / list / load / delete + login hint).
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-routines {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--zcs-gap);
}

#zcs-app .zcs-routines .zcs-routine-name {
	width: auto;
	flex: 1 1 200px;
	max-width: 280px;
}

#zcs-app .zcs-saved-select {
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 200px;
	max-width: 320px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	color: var(--zcs-dark);
	background: var(--zcs-bg);
	border: 1px solid var(--zcs-border);
	border-radius: var(--zcs-radius-sm);
	cursor: pointer;
}

#zcs-app .zcs-saved-select:focus {
	outline: none;
	border-color: var(--zcs-accent);
	box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
}

#zcs-app .zcs-login-hint {
	font-size: 13px;
	font-style: italic;
	color: var(--zcs-muted);
}

/* Inline login link inside the error region (limit-reached message). */
#zcs-app .zcs-login-link {
	font-weight: 700;
	color: #842029;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Buttons.
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-btn,
#zcs-app button.zcs-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid transparent;
	border-radius: var(--zcs-radius-sm);
	cursor: pointer;
	background: var(--zcs-bg-soft);
	color: var(--zcs-dark);
	transition: background 0.15s ease, color 0.15s ease,
		border-color 0.15s ease, transform 0.05s ease;
	white-space: nowrap;
}

#zcs-app .zcs-btn:active {
	transform: translateY(1px);
}

#zcs-app .zcs-btn:focus-visible {
	outline: 2px solid var(--zcs-accent);
	outline-offset: 2px;
}

#zcs-app .zcs-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* Primary button (accent background, white text). Uses the darker accent so
 * the 14px white label meets WCAG AA (5.63:1). */
#zcs-app .zcs-btn-primary {
	background: var(--zcs-accent-dark);
	color: #fff;
	border-color: var(--zcs-accent-dark);
}

#zcs-app .zcs-btn-primary:hover {
	background: #a81f2c;
	border-color: #a81f2c;
}

/* Secondary button (white background, accent border + text). */
#zcs-app .zcs-btn-secondary {
	background: var(--zcs-bg);
	color: var(--zcs-accent);
	border-color: var(--zcs-accent);
}

#zcs-app .zcs-btn-secondary:hover {
	background: rgba(230, 57, 70, 0.08);
	border-color: var(--zcs-accent-dark);
	color: var(--zcs-accent-dark);
}

/* Ghost button (subtle, low-emphasis). */
#zcs-app .zcs-btn-ghost {
	background: transparent;
	color: var(--zcs-muted);
	border-color: transparent;
}

#zcs-app .zcs-btn-ghost:hover {
	background: var(--zcs-bg-soft);
	color: var(--zcs-dark);
}

/* -------------------------------------------------------------------------
 * Spinner (CSS keyframe ring; shown by JS via removing .zcs-hidden).
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-spinner,
#zcs-app #zcs-spinner {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--zcs-muted);
}

#zcs-app .zcs-spinner::before {
	content: "";
	width: 20px;
	height: 20px;
	border: 3px solid rgba(230, 57, 70, 0.25);
	border-top-color: var(--zcs-accent);
	border-radius: 50%;
	animation: zcs-spin 0.7s linear infinite;
	flex: 0 0 auto;
}

/* Hidden state must still suppress the ::before pseudo. */
#zcs-app .zcs-spinner.zcs-hidden {
	display: none !important;
}

@keyframes zcs-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Respect reduced-motion preference: stop the infinite ring rotation. The
 * role=status text ("Generating cue sheet…") still conveys the busy state. */
@media (prefers-reduced-motion: reduce) {
	#zcs-app .zcs-spinner::before {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * Toast (transient pill, fixed to the viewport corner).
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-toast,
#zcs-app #zcs-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 9999;
	max-width: 90vw;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--zcs-accent-dark);
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(43, 45, 66, 0.25);
}

/* Hidden state must override the fixed display. */
#zcs-app .zcs-toast.zcs-hidden {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Error alert (red-tinted, accent left border).
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-error,
#zcs-app #zcs-error {
	margin: 4px 0 0;
	padding: 12px 16px;
	background: var(--zcs-tint-chorus);
	border: 1px solid #f5c6cb;
	border-left: 4px solid var(--zcs-accent);
	border-radius: var(--zcs-radius-sm);
	color: #842029;
	font-size: 14px;
}

/* -------------------------------------------------------------------------
 * Rhythm row + chips.
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-rhythm-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: var(--zcs-gap);
}

#zcs-app .zcs-rhythm-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--zcs-dark);
}

#zcs-app .zcs-badges,
#zcs-app #zcs-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#zcs-app .zcs-badge {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
	background: var(--zcs-badge-bg);
	color: var(--zcs-badge-text);
	border: 1px solid var(--zcs-border);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease,
		border-color 0.15s ease;
	white-space: nowrap;
}

#zcs-app .zcs-badge:hover {
	background: var(--zcs-bg-soft);
	border-color: var(--zcs-muted);
}

#zcs-app .zcs-badge:focus-visible {
	outline: 2px solid var(--zcs-accent);
	outline-offset: 2px;
}

#zcs-app .zcs-badge.is-active {
	/* Darker accent for AA contrast of the white 12px bold chip label. */
	background: var(--zcs-accent-dark);
	color: #fff;
	border-color: var(--zcs-accent-dark);
}

/* -------------------------------------------------------------------------
 * Section heading.
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-section-title {
	margin: var(--zcs-gap) 0 10px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--zcs-dark);
}

/* -------------------------------------------------------------------------
 * Sequence table.
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#zcs-app #zcs-sequence-table,
#zcs-app .zcs-sequence-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 760px;
}

#zcs-app .zcs-sequence-table thead th {
	/* Darker accent so the 11px white bold header text meets AA (5.63:1). */
	background: var(--zcs-accent-dark);
	color: #fff;
	padding: 10px 12px;
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	border: 1px solid #a81f2c;
	white-space: nowrap;
}

#zcs-app .zcs-sequence-table tbody td {
	padding: 6px 10px;
	border-bottom: 1px solid var(--zcs-border);
	vertical-align: middle;
	color: var(--zcs-dark);
}

/* Zebra stripe (lowest priority; section row classes override). */
#zcs-app .zcs-sequence-table tbody tr:nth-child(even) td {
	background: var(--zcs-stripe);
}

/* Section row tints (override stripe). */
#zcs-app .zcs-sequence-table tbody tr.row-intro td,
#zcs-app .zcs-sequence-table tbody tr.row-outro td {
	background: var(--zcs-tint-neutral);
}

#zcs-app .zcs-sequence-table tbody tr.row-verse td {
	background: var(--zcs-tint-verse);
}

#zcs-app .zcs-sequence-table tbody tr.row-chorus td {
	background: var(--zcs-tint-chorus);
}

#zcs-app .zcs-sequence-table tbody tr.row-bridge td {
	background: var(--zcs-tint-bridge);
}

/* -------------------------------------------------------------------------
 * Editable cell controls (inputs + section select inside the table).
 * Transparent at rest so the row tint shows through; affordance on hover/focus.
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-sequence-table td .zcs-cell,
#zcs-app .zcs-sequence-table td .zcs-section-select {
	width: 100%;
	padding: 4px 4px;
	font-family: inherit;
	font-size: 14px;
	color: var(--zcs-dark);
	background: transparent;
	border: 0;
	/* Persistent faint dotted underline signals the cell is editable without
	 * adding visual noise; removed in the print stylesheet for a clean sheet. */
	border-bottom: 1px dotted var(--zcs-muted-soft);
	outline: 0;
	transition: border-color 0.12s ease, background 0.12s ease;
}

#zcs-app .zcs-sequence-table td .zcs-cell::placeholder {
	color: var(--zcs-muted-soft);
}

/* Faint affordance on hover. */
#zcs-app .zcs-sequence-table td .zcs-cell:hover,
#zcs-app .zcs-sequence-table td .zcs-section-select:hover {
	background: rgba(43, 45, 66, 0.03);
	border-bottom-color: var(--zcs-muted);
}

/* Clear, AA-contrast focus ring (matches the buttons/chips :focus-visible
 * pattern). Negative offset keeps it inside the cell so the table doesn't shift,
 * and the darker accent stays legible over the colored row tints. */
#zcs-app .zcs-sequence-table td .zcs-cell:focus-visible,
#zcs-app .zcs-sequence-table td .zcs-section-select:focus-visible {
	outline: 2px solid var(--zcs-accent-dark);
	outline-offset: -2px;
	border-bottom-color: transparent;
	background: rgba(255, 255, 255, 0.55);
}

/* Fallback for engines without :focus-visible support. */
#zcs-app .zcs-sequence-table td .zcs-cell:focus,
#zcs-app .zcs-sequence-table td .zcs-section-select:focus {
	background: rgba(255, 255, 255, 0.55);
}

/* Counts column: accent, bold, centered, narrow. Uses the darker accent so the
 * 14px value stays AA-legible even over the colored section row tints. */
#zcs-app .zcs-sequence-table td .zcs-counts {
	color: var(--zcs-accent-dark);
	font-weight: 700;
	text-align: center;
}

/* Section select: bold, narrow column, native chevron retained. */
#zcs-app .zcs-sequence-table td .zcs-section-select {
	font-weight: 700;
	color: var(--zcs-dark);
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Table action toolbar.
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-table-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 var(--zcs-gap);
}

/* -------------------------------------------------------------------------
 * Instructor notes block.
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-notes-block {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: var(--zcs-gap);
}

#zcs-app .zcs-notes-block .zcs-label {
	margin-bottom: 0;
}

#zcs-app .zcs-notes,
#zcs-app #zcs-notes {
	width: 100%;
	min-height: 90px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 14px;
	color: var(--zcs-dark);
	background: var(--zcs-bg);
	border: 1px solid var(--zcs-border);
	border-radius: var(--zcs-radius-sm);
	resize: vertical;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#zcs-app .zcs-notes::placeholder {
	color: var(--zcs-muted-soft);
}

#zcs-app .zcs-notes:focus {
	outline: none;
	border-color: var(--zcs-accent);
	box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
}

/* -------------------------------------------------------------------------
 * Cover art (AI poster image). The button is non-printing; the image and its
 * container print so a generated poster appears on the printed/PDF sheet.
 * ---------------------------------------------------------------------- */
#zcs-app .zcs-cover-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: var(--zcs-gap);
}

#zcs-app .zcs-cover {
	width: 100%;
	text-align: center;
}

#zcs-app .zcs-cover-img {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
	margin: 0 auto;
	border-radius: var(--zcs-radius);
	box-shadow: 0 3px 16px rgba(43, 45, 66, 0.22);
}

/* -------------------------------------------------------------------------
 * Quick-reference panel (always visible, three columns).
 * ---------------------------------------------------------------------- */
/* The heading sits above (.zcs-section-title); the three .zcs-ref-col blocks
 * are direct children of .zcs-quick-ref, so the grid lives here. */
#zcs-app .zcs-quick-ref {
	margin-top: var(--zcs-gap);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--zcs-gap);
}

#zcs-app .zcs-ref-col {
	background: var(--zcs-bg);
	border: 1px solid var(--zcs-border);
	border-radius: var(--zcs-radius-sm);
	overflow: hidden;
}

#zcs-app .zcs-ref-col h4 {
	margin: 0;
	padding: 8px 12px;
	background: var(--zcs-dark);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

#zcs-app .zcs-quick-ref table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

#zcs-app .zcs-quick-ref th {
	background: var(--zcs-dark);
	color: #fff;
	padding: 6px 10px;
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

#zcs-app .zcs-quick-ref td {
	padding: 6px 10px;
	border-bottom: 1px solid var(--zcs-border);
	color: var(--zcs-dark);
	vertical-align: top;
}

#zcs-app .zcs-quick-ref tr:last-child td {
	border-bottom: 0;
}

#zcs-app .zcs-quick-ref td:first-child {
	font-weight: 600;
	/* Darker accent so the 12px code text meets AA. */
	color: var(--zcs-accent-dark);
	white-space: nowrap;
}

/* Footnote under a reference table (the box has no padding, so add our own). */
#zcs-app .zcs-ref-note {
	margin: 0;
	padding: 6px 10px 10px;
	font-size: 11px;
	font-style: italic;
	color: var(--zcs-muted);
}

/* -------------------------------------------------------------------------
 * Responsive layout.
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
	#zcs-app .zcs-input-panel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#zcs-app .zcs-quick-ref {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	#zcs-app .zcs-input-panel {
		grid-template-columns: 1fr;
	}

	#zcs-app .zcs-input-actions .zcs-btn {
		flex: 1 1 auto;
	}
}

/* -------------------------------------------------------------------------
 * Print stylesheet.
 * ---------------------------------------------------------------------- */
@media print {
	@page {
		margin: 1.5cm;
	}

	/* Force background colors (header, section tints, chips) to print. */
	#zcs-app,
	#zcs-app * {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	/* Hide interactive / non-printable chrome. */
	#zcs-app .zcs-no-print,
	#zcs-app .zcs-hero,
	#zcs-app .zcs-routines,
	#zcs-app .zcs-input-actions,
	#zcs-app .zcs-table-actions,
	#zcs-app #zcs-spinner,
	#zcs-app #zcs-toast,
	#zcs-app #zcs-error {
		display: none !important;
	}

	/* Flatten container chrome for a clean sheet. */
	#zcs-app {
		max-width: none;
		margin: 0;
		padding: 0;
	}

	/* The input panel keeps its six meta fields but loses card chrome; the
	 * input values still print (rendered borderless below). */
	#zcs-app .zcs-input-panel {
		border: 0;
		border-radius: 0;
		padding: 0;
		box-shadow: none;
		gap: 8px 24px;
	}

	/* Meta inputs print as plain values, no boxes. */
	#zcs-app .zcs-input {
		border: 0;
		background: transparent;
		padding: 0;
		font-size: 13px;
		box-shadow: none;
	}

	/* Rhythm chips: keep active ones legible. */
	#zcs-app .zcs-badge {
		border: 1px solid #ccc;
	}

	#zcs-app .zcs-badge.is-active {
		background: var(--zcs-accent) !important;
		color: #fff !important;
		border-color: var(--zcs-accent) !important;
	}

	/* Fit the sequence table to the page width. */
	#zcs-app .zcs-table-wrap {
		overflow: visible;
	}

	#zcs-app .zcs-sequence-table {
		table-layout: fixed;
		width: 100%;
		min-width: 0;
		font-size: 9px;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	#zcs-app .zcs-sequence-table thead th {
		font-size: 8px;
		padding: 4px 5px;
	}

	#zcs-app .zcs-sequence-table tbody td {
		padding: 4px 5px;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	/* Avoid breaking rows across pages. */
	#zcs-app .zcs-sequence-table tr {
		page-break-inside: avoid;
	}

	/* Cell controls print as values only: borderless, transparent. */
	#zcs-app .zcs-sequence-table td .zcs-cell,
	#zcs-app .zcs-sequence-table td .zcs-section-select,
	#zcs-app .zcs-notes {
		border: 0 !important;
		background: transparent !important;
		color: inherit !important;
		box-shadow: none !important;
		padding: 0;
		font-size: inherit;
	}

	/* Preserve the accent on the counts column in print. */
	#zcs-app .zcs-sequence-table td .zcs-counts {
		color: var(--zcs-accent-dark) !important;
	}

	/* Notes block keeps its label/value, no resize affordance. */
	#zcs-app .zcs-notes {
		min-height: 0;
		resize: none;
		font-size: 11px;
	}

	/* Cover art: the button is .zcs-no-print (hidden above); the image prints.
	 * Keep it centered, cap its height so it doesn't dominate the page, and
	 * avoid splitting it across a page break. */
	#zcs-app .zcs-cover-block {
		page-break-inside: avoid;
		margin: 8px 0;
	}

	#zcs-app .zcs-cover-img {
		max-width: 100%;
		max-height: 60vh;
		box-shadow: none;
		border-radius: 0;
	}
}