/* ==========================================================================
   php-net.pro — Code-Karte im CLI-Chrome (Wachstumsplan 3.5, 23.08.2026).
   EINE Datei fuer die Zeitung und alle Print-Blaetter (Muster: print-
   comments.css). Die Karte ist ein Terminalfenster: Leiste mit drei Punkten,
   Titelzeile (Dateiname / "terminal"), Copy-Button, darunter der Code mit
   serverseitigem Highlighting (CodeCard::highlight, Klassen .t-*).

   Palette als eigene Tokens: dunkles Terminal ist der Default (auch auf
   hellen Seiten ein bewusstes "Figure"), [data-theme=light] schaltet auf ein
   helles Terminal — theme-faehig war eines der Argumente fuer HTML statt
   Bild. Markup: CodeCard::render().
   ========================================================================== */

.code-card {
	--cc-bg: #0d1020;
	--cc-bar: #161a2e;
	--cc-border: rgba(148, 156, 208, .22);
	--cc-text: #e6e1d6;
	--cc-title: #a9a290;
	--cc-kw: #c792ea;
	--cc-str: #c3e88d;
	--cc-num: #f78c6c;
	--cc-cmt: #6b7394;
	--cc-var: #82aaff;
	--cc-cmd: #ffcb6b;
	--cc-key: #82aaff;
	--cc-tag: #f07178;
	--cc-attr: #ffcb6b;
	--cc-prm: #6b7394;
	--cc-ok: #34d399;

	margin: 1.25rem 0 1.35rem;
	border: 1px solid var(--cc-border);
	border-radius: 10px;
	background: var(--cc-bg);
	color: var(--cc-text);
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55);
	overflow: hidden;
	/* Print-Blaetter: Mehrspalten-Satz darf die Karte nicht zerteilen */
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	column-span: all;
	text-align: left;
	hyphens: none;
	-webkit-hyphens: none;
}

[data-theme="light"] .code-card {
	--cc-bg: #f5f5fa;
	--cc-bar: #e9e9f3;
	--cc-border: rgba(79, 82, 155, .22);
	--cc-text: #1f2233;
	--cc-title: #5b5f7a;
	--cc-kw: #7c3aed;
	--cc-str: #1a7f4b;
	--cc-num: #b45309;
	--cc-cmt: #7b7f99;
	--cc-var: #1d4ed8;
	--cc-cmd: #92400e;
	--cc-key: #1d4ed8;
	--cc-tag: #be123c;
	--cc-attr: #92400e;
	--cc-prm: #7b7f99;
	--cc-ok: #0a8560;

	box-shadow: 0 8px 24px -18px rgba(25, 27, 44, .35);
}

.code-card-bar {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .45rem .7rem .45rem .8rem;
	border-bottom: 1px solid var(--cc-border);
	background: var(--cc-bar);
	font: 500 .72rem/1.4 ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
	color: var(--cc-title);
}

.code-card-dots { display: inline-flex; gap: .32rem; flex-shrink: 0; }

.code-card-dots i {
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	background: #ff5f57;
}

.code-card-dots i:nth-child(2) { background: #febc2e; }
.code-card-dots i:nth-child(3) { background: #28c840; }

.code-card-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	letter-spacing: .02em;
}

.code-card-copy {
	flex-shrink: 0;
	margin: 0;
	padding: .14rem .6rem;
	border: 1px solid var(--cc-border);
	border-radius: 999px;
	background: transparent;
	font: 600 .64rem/1.5 inherit;
	font-family: inherit;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cc-title);
	cursor: pointer;
	transition: color .15s, border-color .15s;
}

.code-card-copy:hover { color: var(--cc-text); border-color: var(--cc-text); }
.code-card-copy.copied { color: var(--cc-ok); border-color: var(--cc-ok); }

.code-card pre {
	margin: 0;
	padding: .85rem 1rem .95rem;
	overflow-x: auto;
	font: 400 .84rem/1.6 ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
	-moz-tab-size: 4;
	tab-size: 4;
	color: var(--cc-text);
	background: transparent;
	border: 0;
	border-radius: 0;
	white-space: pre;
	word-break: normal;
}

.code-card code {
	font: inherit;
	color: inherit;
	background: transparent;
	padding: 0;
	border: 0;
}

.code-card .t-kw { color: var(--cc-kw); }
.code-card .t-str { color: var(--cc-str); }
.code-card .t-num { color: var(--cc-num); }
.code-card .t-cmt { color: var(--cc-cmt); font-style: italic; }
.code-card .t-var { color: var(--cc-var); }
.code-card .t-cmd { color: var(--cc-cmd); font-weight: 600; }
.code-card .t-key { color: var(--cc-key); }
.code-card .t-tag { color: var(--cc-tag); }
.code-card .t-attr { color: var(--cc-attr); }
.code-card .t-prm { color: var(--cc-prm); user-select: none; }

@media (max-width: 560px) {
	.code-card { margin-inline: -.25rem; border-radius: 8px; }
	.code-card pre { padding: .75rem .8rem .85rem; font-size: .78rem; }
}

@media print {
	.code-card { box-shadow: none; break-inside: avoid; }
	.code-card-copy { display: none; }
}