/* ==========================================================================
   Documentation components (RouterOS Guides / Command Reference).
   Reuses the site's existing --ch-* dark design tokens (defined in
   codespot-home.css, which is already loaded site-wide) - this file only
   adds the handful of components genuinely specific to reference content
   (syntax blocks, warning/info boxes, command cards, TOC, official-
   reference box). Loaded only on documentation pages, not site-wide.
   ========================================================================== */

/* ── Table of contents ────────────────────────────────────────────── */
.mtl-doc-toc {
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: var(--ch-radius);
	padding: 22px 26px;
	margin: 0 0 32px;
}

.mtl-doc-toc p {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ch-green-hover);
}

.mtl-doc-toc ol {
	margin: 0;
	padding-left: 20px;
	color: var(--ch-muted);
	columns: 2;
	column-gap: 28px;
}

.mtl-doc-toc li {
	margin-bottom: 6px;
	break-inside: avoid;
}

.mtl-doc-toc a {
	color: var(--ch-muted);
	text-decoration: none;
}

.mtl-doc-toc a:hover {
	color: var(--ch-green-hover);
}

@media (max-width: 640px) {
	.mtl-doc-toc ol {
		columns: 1;
	}
}

/* ── Syntax / command block with copy button ──────────────────────── */
.mtl-doc-syntax {
	position: relative;
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: 14px;
	margin: 0 0 24px;
	overflow: hidden;
}

.mtl-doc-syntax-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	background: rgba(0, 193, 106, 0.08);
	border-bottom: 1px solid var(--ch-border);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ch-muted);
}

.mtl-doc-syntax pre {
	margin: 0;
	padding: 16px 18px;
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ch-text);
}

.mtl-doc-syntax code {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
}

.mtl-doc-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--ch-border);
	color: var(--ch-text);
	border: none;
	border-radius: 8px;
	padding: 5px 12px;
	font-size: 11.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.mtl-doc-copy:hover {
	background: var(--ch-green);
	color: #021a12;
}

.mtl-doc-copy:focus-visible {
	outline: 2px solid var(--ch-green-hover);
	outline-offset: 2px;
}

.mtl-doc-copy[data-copied="1"] {
	background: var(--ch-green);
	color: #021a12;
}

@media (prefers-reduced-motion: reduce) {
	.mtl-doc-copy {
		transition: none;
	}
}

/* ── Warning / info / output boxes ────────────────────────────────── */
.mtl-doc-warning,
.mtl-doc-info,
.mtl-doc-output {
	border-radius: 14px;
	padding: 16px 20px;
	margin: 0 0 24px;
	font-size: 14.5px;
	line-height: 1.65;
}

.mtl-doc-warning {
	background: rgba(255, 200, 87, 0.1);
	border: 1px solid rgba(255, 200, 87, 0.35);
	color: #f5d38a;
}

.mtl-doc-warning p {
	margin: 0 0 6px;
	color: #f5d38a;
}

.mtl-doc-warning p:last-child {
	margin-bottom: 0;
}

.mtl-doc-warning-title {
	font-weight: 800;
	color: #ffdd9a !important;
}

.mtl-doc-info {
	background: rgba(14, 165, 233, 0.1);
	border: 1px solid rgba(14, 165, 233, 0.3);
	color: #bfe6fb;
}

.mtl-doc-info p {
	margin: 0;
	color: #bfe6fb;
}

.mtl-doc-output {
	background: #08130f;
	border: 1px solid var(--ch-border);
	color: var(--ch-muted);
}

.mtl-doc-output pre {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 13px;
	white-space: pre-wrap;
	word-break: break-word;
}

/* ── Version-difference panel (v7 vs v6) ──────────────────────────── */
.mtl-doc-versions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0 0 24px;
}

.mtl-doc-version {
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: 14px;
	padding: 16px 18px;
}

.mtl-doc-version.is-current {
	border-color: var(--ch-green);
}

.mtl-doc-version-label {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ch-green-hover);
	margin-bottom: 8px;
}

.mtl-doc-version.is-legacy .mtl-doc-version-label {
	color: var(--ch-muted);
}

.mtl-doc-version p,
.mtl-doc-version pre {
	margin: 0;
	font-size: 13.5px;
	color: var(--ch-muted);
}

.mtl-doc-version pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	white-space: pre-wrap;
	word-break: break-word;
}

@media (max-width: 640px) {
	.mtl-doc-versions {
		grid-template-columns: 1fr;
	}
}

/* ── Command / guide index cards (hub pages) ──────────────────────── */
.mtl-doc-card {
	display: block;
	text-decoration: none;
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: var(--ch-radius);
	padding: 24px;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.mtl-doc-card:hover {
	transform: translateY(-4px);
	border-color: var(--ch-green);
}

.mtl-doc-card-num {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--ch-green-hover);
	margin-bottom: 8px;
	display: block;
}

.mtl-doc-card h3 {
	color: var(--ch-text);
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
}

.mtl-doc-card p {
	color: var(--ch-muted);
	font-size: 13.5px;
	line-height: 1.6;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mtl-doc-card {
		transition: none;
	}
}

/* ── Related guides / commands box ────────────────────────────────── */
.mtl-doc-related {
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: var(--ch-radius);
	padding: 22px 26px;
	margin: 0 0 24px;
}

.mtl-doc-related p.mtl-doc-related-title {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ch-green-hover);
}

.mtl-doc-related ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mtl-doc-related a {
	display: inline-block;
	background: var(--ch-bg);
	border: 1px solid var(--ch-border);
	color: var(--ch-muted);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 100px;
	text-decoration: none;
}

.mtl-doc-related a:hover {
	border-color: var(--ch-green);
	color: var(--ch-green-hover);
}

/* ── Official-reference box ───────────────────────────────────────── */
.mtl-doc-reference {
	border-top: 1px solid var(--ch-border);
	margin-top: 48px;
	padding-top: 24px;
	font-size: 13px;
	color: var(--ch-muted);
}

.mtl-doc-reference p {
	margin: 0 0 4px;
	color: var(--ch-muted);
}

.mtl-doc-reference-label {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 11px;
	color: var(--ch-green-hover) !important;
}

.mtl-doc-reference a {
	color: var(--ch-blue);
}

/* ── Breadcrumb-style eyebrow used at the top of each doc page ────── */
.mtl-doc-crumb {
	font-size: 12.5px;
	color: var(--ch-muted);
	margin: 0 0 18px;
}

.mtl-doc-crumb a {
	color: var(--ch-muted);
	text-decoration: none;
}

.mtl-doc-crumb a:hover {
	color: var(--ch-green-hover);
}