/* Chiptron Pinouts – vzhled obalů, filtrů a tabulky. Vzhled samotného diagramu je vložený v SVG. */

.cp-diagram,
.cp-table,
.cp-filters {
	--cp-gpio: #334155; --cp-uart: #7c3aed; --cp-i2c: #0e7490; --cp-spi: #c2410c;
	--cp-adc: #15803d; --cp-pwr: #b91c1c; --cp-gnd: #111827; --cp-ctrl: #a16207;
	--cp-line: rgba(100, 116, 139, 0.28);
	--cp-hl: rgba(253, 224, 71, 0.45);
}

/* ---- diagram ---- */
.cp-diagram { margin: 0 0 1.5em; }
.cp-diagram__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border: 1px solid var(--cp-line);
	border-radius: 10px;
}
.cp-diagram svg { display: block; width: 100%; min-width: 720px; height: auto; }
.cp-diagram figcaption { margin-top: 0.5em; font-size: 0.9em; opacity: 0.75; }
.cp-downloads { margin-top: 0.5em; font-size: 0.9em; }
.cp-downloads a { margin-left: 0.6em; font-weight: 600; }

.cp-diagram svg .pinlabel { transition: opacity 0.15s; cursor: pointer; }
.cp-diagram svg.cp-filtering .pinlabel { opacity: 0.12; }
.cp-diagram svg.cp-filtering .pinlabel.cp-on-row { opacity: 0.45; }
.cp-diagram svg.cp-filtering .pinlabel.cp-on { opacity: 1; }
.cp-diagram svg.cp-searching .pinlabel:not(.cp-match) { opacity: 0.12; }
.cp-diagram svg .pinlabel.cp-hl .pinlabel__body { stroke: #f59e0b; stroke-width: 3; }
.cp-diagram svg .pad.cp-hl { fill: #fde047; stroke: #f59e0b; stroke-width: 4; }

/* ---- filtry ---- */
.cp-filters { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; margin: 0 0 1em; }
.cp-filters button {
	display: inline-flex; align-items: center; gap: 0.45em;
	font: inherit; font-size: 0.9em; font-weight: 600; line-height: 1.2;
	padding: 0.4em 0.9em;
	border: 1px solid var(--cp-line); border-radius: 999px;
	background: #fff; color: #0f172a; cursor: pointer;
}
.cp-filters button:hover { border-color: #64748b; }
.cp-filters button.is-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.cp-filters button[data-filter]:not([data-filter="all"])::before {
	content: ""; width: 0.7em; height: 0.7em; border-radius: 2px; background: var(--cp-swatch, currentColor);
}
.cp-f-uart { --cp-swatch: var(--cp-uart); } .cp-f-i2c { --cp-swatch: var(--cp-i2c); }
.cp-f-spi { --cp-swatch: var(--cp-spi); } .cp-f-adc { --cp-swatch: var(--cp-adc); }
.cp-f-pwr { --cp-swatch: var(--cp-pwr); } .cp-f-gnd { --cp-swatch: var(--cp-gnd); }
.cp-f-ctrl { --cp-swatch: var(--cp-ctrl); }
.cp-filters input[type="search"] {
	margin-left: auto; min-width: 12em;
	font: inherit; font-size: 0.9em; padding: 0.4em 0.7em;
	border: 1px solid var(--cp-line); border-radius: 8px;
}
.cp-filters.cp-no-search input[type="search"] { display: none; }

/* ---- tabulka ---- */
.cp-table { overflow-x: auto; margin: 0 0 1.5em; }
.cp-table table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.cp-table th, .cp-table td { text-align: left; padding: 0.4em 0.6em; border-bottom: 1px solid var(--cp-line); vertical-align: middle; }
.cp-table th { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; white-space: nowrap; }
.cp-table td.cp-num { opacity: 0.6; font-variant-numeric: tabular-nums; }
.cp-table td.cp-note { opacity: 0.8; }
.cp-table td.cp-dir { white-space: nowrap; }
.cp-table tr { transition: opacity 0.15s; }
.cp-table tr.cp-dim { opacity: 0.25; }
.cp-table tr.cp-hidden { display: none; }
.cp-table tr.cp-hl td { background: var(--cp-hl); }
.cp-chip {
	display: inline-block; min-width: 4.4em; padding: 0.1em 0.5em;
	border-radius: 4px; text-align: center;
	color: #fff; font-weight: 700; font-size: 0.92em; white-space: nowrap;
}
.cp-k-gpio { background: var(--cp-gpio); } .cp-k-pwr { background: var(--cp-pwr); }
.cp-k-gnd { background: var(--cp-gnd); } .cp-k-ctrl { background: var(--cp-ctrl); }

.cp-missing { padding: 0.6em 0.8em; border: 1px dashed #b91c1c; color: #b91c1c; font-size: 0.9em; }