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

.cp-diagram,
.cp-table,
.cp-filters,
.cp-index,
.cp-index-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-touch: #be185d; --cp-strap: #ef4444; --cp-dac: #4d7c0f; --cp-pwm: #1d4ed8; --cp-i2s: #a21caf; --cp-can: #78350f;
	--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-license { margin-top: 0.2em; font-size: 0.85em; opacity: 0.8; }
.cp-license a { font-weight: 600; }

.cp-diagram svg .pinlabel { 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.cp-searching .pad[data-pin]:not(.cp-match) { opacity: 0.25; }
.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; }
.cp-diagram svg .pinlabel.cp-pinned .pinlabel__body { stroke: #dc2626; stroke-width: 3; }
.cp-diagram svg .pinlabel.num.cp-pinned .pinlabel__leader { stroke: #dc2626; stroke-width: 3; }
.cp-diagram svg .pad.cp-pinned { fill: #fde047; stroke: #dc2626; stroke-width: 4; }
.cp-table tr.cp-pinned td { background: var(--cp-hl); }
.cp-table tr.cp-pinned td:first-child { box-shadow: inset 4px 0 0 #dc2626; }

/* ---- tlačítka „pill“ (cp-pill): vrstvy, jména pinů, plánovač, filtry, filtry rozcestníku ---- */
button.cp-pill {
	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;
}
button.cp-pill:hover { border-color: #64748b; }
/* menší filtry rozcestníku; jména pinů a plánovač bez tučného písma a bez zvýraznění pod myší */
.cp-index-filters button.cp-pill { font-size: 0.85em; padding: 0.35em 0.8em; }
.cp-index-filters button.cp-if-reset { background: transparent; }
.cp-index-filters button.cp-if-more:not([aria-expanded="true"]) { border-color: var(--cp-line); }
.cp-names button.cp-pill {
	font-size: 0.85em; font-weight: inherit; line-height: inherit; padding: 0.25em 0.7em; border-color: #cbd5e1;
}
.cp-planner button.cp-pill { font-weight: inherit; line-height: inherit; padding: 0.35em 0.9em; border-color: #7c3aed; color: #5b21b6; }
button.cp-pill.is-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.cp-planner button.cp-pill.is-active { background: #7c3aed; border-color: #7c3aed; color: #fff; }

/* ---- strany desky (horní / spodní) ---- */
.cp-sides { display: none; gap: 0.5em; margin: 0 0 0.6em; }
.cp-sides-on .cp-sides { display: flex; flex-wrap: wrap; }
.cp-side-heading { margin: 1em 0 0.4em; font-weight: 700; }
.cp-diagram [hidden] { display: none !important; }  /* šablona webu nesmí skrytou stranu zobrazit */
.cp-sides-on .cp-side-heading { display: none; }
/* s JavaScriptem (třída cp-js z inline skriptu u diagramu) rozložení jako po startu pinout.js – bez poskakování */
.cp-js .cp-sides { display: flex; flex-wrap: wrap; }
.cp-js .cp-side-heading { display: none; }
.cp-js .cp-diagram:not(.cp-sides-on) [data-side]:not([data-side="top"]):not(button) { display: none; }

/* ---- 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; }
.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-f-touch { --cp-swatch: var(--cp-touch); }
.cp-f-dac { --cp-swatch: var(--cp-dac); } .cp-f-pwm { --cp-swatch: var(--cp-pwm); } .cp-f-i2s { --cp-swatch: var(--cp-i2s); }
.cp-f-can { --cp-swatch: var(--cp-can); }
.cp-filters button.cp-f-strap::before { background: var(--cp-gpio); box-shadow: inset 0 0 0 2px var(--cp-strap); }
.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-remap { font-size: 0.85em; opacity: 0.8; min-width: 12em; }
.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-k-adc { background: var(--cp-adc); }
.cp-k-nc { background: #cbd5e1; color: #334155; } .cp-k-flash { background: #94a3b8; }
.cp-chip.cp-strap { box-shadow: 0 0 0 2px var(--cp-strap); }

/* ---- konektory: štítky signálů, barvy vodičů, zvýraznění čáry od kontaktu ---- */
.cp-k-i2c { background: var(--cp-i2c); }
.cp-k-tx { background: #4338ca; } .cp-k-rx { background: #be185d; } .cp-k-bi { background: #475569; }
.cp-k-usbd { background: #c2410c; } .cp-k-ss { background: #7c3aed; } .cp-k-cc { background: #a16207; }
.cp-k-note { background: #f1f5f9; color: #334155; }
.cp-wirecell { white-space: nowrap; }
.cp-wire {
	display: inline-block; width: 1.9em; height: 0.8em; margin-right: 0.5em; vertical-align: -0.08em;
	border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.28); background: var(--cp-w, #fff);
}
.cp-wire-orange { --cp-w: #f97316; } .cp-wire-green { --cp-w: #16a34a; } .cp-wire-blue { --cp-w: #2563eb; }
.cp-wire-brown { --cp-w: #8b5a2b; } .cp-wire-black { --cp-w: #1f2937; } .cp-wire-red { --cp-w: #dc2626; }
.cp-wire-yellow { --cp-w: #facc15; } .cp-wire-white { --cp-w: #ffffff; }
.cp-wire-white-orange { --cp-w: repeating-linear-gradient(-50deg, #fff 0 3px, #f97316 3px 6px); }
.cp-wire-white-green { --cp-w: repeating-linear-gradient(-50deg, #fff 0 3px, #16a34a 3px 6px); }
.cp-wire-white-blue { --cp-w: repeating-linear-gradient(-50deg, #fff 0 3px, #2563eb 3px 6px); }
.cp-wire-white-brown { --cp-w: repeating-linear-gradient(-50deg, #fff 0 3px, #8b5a2b 3px 6px); }
.cp-filters button.cp-f-plain::before { display: none; }
.cp-diagram svg .pinlabel.num.cp-hl .pinlabel__leader { stroke: #f59e0b; stroke-width: 3; }
.cp-diagram svg .pad.contact.cp-hl { stroke-width: 1.5; }

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

/* ---- rozcestník [pinout_index] ---- */
.cp-index { margin: 0 0 1.5em; }
.cp-index__family { margin: 0 0 1.75em; }
.cp-index__title { margin: 0 0 0.6em; }
.cp-index__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1em;
}
.cp-index__grid > li { margin: 0; padding: 0; }
.cp-card__inner {
	display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
	padding: 0.9em 1em 1em; border: 1px solid var(--cp-line); border-radius: 10px;
	background: #fff; color: inherit; text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
a.cp-card__inner:hover, a.cp-card__inner:focus-visible { border-color: #64748b; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); transform: translateY(-1px); }
.cp-card__media { display: flex; align-items: center; justify-content: center; height: 150px; margin: 0 0 0.8em; }
.cp-card__media img { display: block; max-width: 100%; max-height: 150px; width: auto; height: auto; }
.cp-card__name { font-weight: 700; line-height: 1.3; }
.cp-card__meta { margin-top: 0.3em; font-size: 0.82em; line-height: 1.4; opacity: 0.7; }
.cp-card__desc { margin-top: 0.5em; font-size: 0.9em; line-height: 1.45; }
.cp-card.is-soon .cp-card__inner { opacity: 0.6; }
.cp-card__soon { align-self: flex-start; margin-top: 0.7em; padding: 0.1em 0.6em; border-radius: 999px; background: #f1f5f9; font-size: 0.78em; font-weight: 600; }

/* ---- filtry rozcestníku (pinout.js) ---- */
.cp-index-filters { display: flex; flex-direction: column; gap: 0.6em; margin: 0 0 1.5em; }
.cp-index-filters[hidden], .cp-index-filters [hidden], .cp-index [hidden] { display: none !important; }
.cp-if-top { display: flex; gap: 0.5em; align-items: stretch; }
.cp-if-groups { display: flex; flex-direction: column; gap: 0.6em; }
.cp-if-more { display: none; }
.cp-index-filters input[type="search"] {
	box-sizing: border-box; flex: 1 1 auto; min-width: 0; max-width: 32em;
	font: inherit; font-size: 0.95em; padding: 0.5em 0.8em;
	border: 1px solid var(--cp-line); border-radius: 8px; background: #fff;
}
.cp-if-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; }
.cp-if-label { min-width: 6.5em; font-size: 0.85em; font-weight: 600; opacity: 0.7; }
.cp-if-more[aria-expanded="true"] { border-color: #64748b; }
.cp-if-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin: 0; font-size: 0.9em; opacity: 0.85; }
@media (max-width: 600px) {
	.cp-if-label { min-width: 100%; }
	.cp-if-more { display: inline-block; flex: none; }
	.cp-index-filters:not(.cp-if-open) .cp-if-groups { display: none; }
}
.cp-search-status { align-self: center; font-size: 0.85em; color: #64748b; }
.cp-names { display: none; gap: 0.5em; align-items: center; margin: 0 0 0.6em; flex-wrap: wrap; }
.cp-names-on > .cp-names, .cp-js .cp-names { display: flex; }
.cp-names__label { font-size: 0.85em; color: #64748b; }
.cp-diagram svg .pinlabel.cp-name-long .pinlabel__text { font-size: 80%; }
.cp-table .cp-chip.cp-name-long { font-size: 0.85em; }
.cp-table .cp-also { display: block; font-size: 0.8em; color: #64748b; }
.cp-planner { display: none; margin: 0 0 0.6em; }
.cp-planner-on > .cp-planner, .cp-js .cp-planner { display: flex; }
.cp-planning .pinlabel, .cp-planning .pad[data-pin] { cursor: pointer; }
.cp-planning .bottom-leader, .cp-planning .pinlabel__leader { pointer-events: none; }  /* čáry popisků nesmí zakrýt plošky */
.cp-diagram svg .pinlabel.cp-planned .pinlabel__body { stroke: #7c3aed; stroke-width: 3; }
.cp-diagram svg .pad.cp-planned { stroke: #7c3aed; stroke-width: 4; }
.cp-table tr.cp-planned td:first-child { box-shadow: inset 4px 0 0 #7c3aed; }
.cp-diagram { position: relative; }
.cp-plan-menu {
	position: absolute; z-index: 20; width: 270px; max-height: 60vh; overflow: auto; padding: 0.6em;
	background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}
.cp-plan-menu__pin { font-weight: 700; margin-bottom: 0.3em; }
.cp-plan-menu__group { display: flex; flex-wrap: wrap; gap: 0.3em; margin: 0.35em 0; align-items: center; }
.cp-plan-menu__label { width: 100%; font-size: 0.75em; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
.cp-plan-menu button, .cp-plan-panel button {
	font: inherit; font-size: 0.85em; padding: 0.25em 0.6em; border: 1px solid #cbd5e1; border-radius: 6px;
	background: #fff; color: #0f172a; cursor: pointer;
}
.cp-plan-menu button.is-active, .cp-plan-tabs button.is-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.cp-plan-menu__remove { margin-top: 0.4em; color: #b91c1c !important; }
.cp-plan-panel { margin: 1em 0; padding: 1em; border: 1px solid #ddd6fe; border-radius: 10px; background: #faf5ff; }
.cp-plan-title { margin: 0 0 0.5em; font-size: 1.05em; }
.cp-plan-list { list-style: none; margin: 0 0 0.8em; padding: 0; }
.cp-plan-item { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; padding: 0.3em 0; border-bottom: 1px solid #ede9fe; }
.cp-plan-name { font: inherit; padding: 0.2em 0.4em; border: 1px solid #cbd5e1; border-radius: 6px; width: 10em; }
.cp-plan-role { font-weight: 600; }
.cp-plan-pin { color: #475569; font-family: ui-monospace, Consolas, monospace; }
.cp-plan-warn h4 { margin: 0.5em 0 0.2em; font-size: 0.95em; }
.cp-plan-warn ul { margin: 0 0 0.8em; padding-left: 1.2em; color: #92400e; }
.cp-plan-tabs { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 0.4em; }
.cp-plan-code {
	margin: 0; padding: 0.8em; overflow: auto; max-height: 28em; background: #0f172a; color: #e2e8f0;
	border-radius: 8px; font: 0.85em/1.5 ui-monospace, Consolas, monospace;
}
@media (max-width: 600px) {
	.cp-plan-menu { position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; border-radius: 12px 12px 0 0; }
}