/* ---------------------------------------------------------------------------
   smolvm.work — additive stylesheet for the $SMOLVM rail and the few
   controls the static mirror has to wire itself (tabs, calculator, registry
   filters, docs search). Loads AFTER the site's own CSS so it only adds.
   Colours, borders and fonts come from the site's own custom properties.
   --------------------------------------------------------------------------- */

/* --- navbar ticker -------------------------------------------------------- */
.nav-token {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .04em;
	color: var(--c-mid);
	text-decoration: none;
	border: 1px solid var(--c-border);
	padding: 3px 8px;
	line-height: 18px;
	white-space: nowrap;
}
.nav-token:hover { color: var(--c-black); border-color: var(--c-dark); }
@media (max-width: 640px) { .nav-token { font-size: .72rem; padding: 2px 6px; } }

/* --- the token band ------------------------------------------------------ */
.token-band {
	margin-top: 72px;
	border-top: 1px solid var(--c-border);
	background: var(--c-bg-soft);
}
.token-inner { max-width: 800px; margin: 0 auto; padding: 56px 24px 72px; }
.token-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-mid);
}
.token-chip {
	border: 1px solid var(--c-border);
	background: var(--c-bg);
	color: var(--c-mid);
	padding: 2px 8px;
	letter-spacing: .06em;
}
.token-chip.live { border-color: var(--c-success); color: var(--c-success); }
.token-title { font-size: 1.6rem; font-weight: 600; line-height: 1.3; margin: 14px 0 12px; }
.token-lede { color: var(--c-dark); line-height: 1.7; margin-bottom: 4px; }
.token-grid { margin: 26px 0 4px; }
.token-card { padding: 18px 20px; }
.token-card h3 { font-size: .95rem; font-weight: 600; margin: 0 0 8px; color: var(--c-black); }
.token-card p { font-size: .9rem; line-height: 1.65; color: var(--c-dark); margin: 0; }
.token-tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-light);
	margin-bottom: 8px;
}
.token-ca { margin-top: 30px; }
.token-ca-label {
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-mid);
	margin-bottom: 8px;
}
.token-ca .copy-block { background: var(--c-bg); }
.token-ca .copy-block code {
	font-family: var(--font-mono);
	font-size: .85rem;
	overflow-wrap: anywhere;
	line-height: 1.5;
}
.token-ca .copy-block button[aria-disabled="true"] { color: var(--c-light); cursor: default; }
.token-ca .copy-block button[aria-disabled="true"]:hover { color: var(--c-light); background: none; }
.token-note { font-size: .82rem; color: var(--c-mid); margin-top: 10px; line-height: 1.6; }
.token-disclaimer {
	font-size: .78rem;
	color: var(--c-light);
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--c-border);
	line-height: 1.6;
}
.token-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.token-actions .btn { margin: 0; }

/* --- copy widgets -------------------------------------------------------- */
.copy-block button[data-copied="1"] { color: var(--c-black); }
pre.shiki .code-copy {
	position: absolute;
	top: 6px;
	right: 6px;
	appearance: none;
	border: 1px solid var(--c-border);
	background: var(--c-bg);
	color: var(--c-light);
	font-family: var(--font-base);
	font-size: .72rem;
	padding: 3px 8px;
	cursor: pointer;
}
pre.shiki .code-copy:hover { color: var(--c-black); border-color: var(--c-dark); }
.code-block { position: relative; }

/* --- get-started block bars (mirror-side switching) ---------------------- */
.block-bar .host[aria-disabled="true"] { color: var(--c-light); }

/* --- pricing calculator -------------------------------------------------- */
.calc-row .calc-val { font-family: var(--font-mono); }

/* --- registry filters ---------------------------------------------------- */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.filter-row[hidden] { display: none; }
.filter-chip {
	appearance: none;
	border: 1px solid var(--c-border);
	background: var(--c-bg);
	color: var(--c-mid);
	font-family: var(--font-base);
	font-size: .78rem;
	padding: 4px 10px;
	cursor: pointer;
}
.filter-chip:hover { color: var(--c-black); border-color: var(--c-dark); }
.filter-chip.on { background: var(--c-black); border-color: var(--c-black); color: #fff; }
.machine-card[hidden] { display: none; }
.registry-token-note { margin-top: 8px; font-size: .85rem; color: var(--c-mid); }
.registry-token-note a { color: var(--c-mid); }

/* --- console / demo / status fallbacks ----------------------------------- */
.mirror-notice {
	border: 1px solid var(--c-border);
	border-left-width: 3px;
	border-left-color: var(--c-black);
	background: var(--c-bg-soft);
	padding: 18px 20px;
	max-width: 640px;
	margin: 0 auto;
}
.mirror-notice h1 { font-size: 1.15rem; margin: 0 0 8px; }
.mirror-notice p { font-size: .9rem; line-height: 1.65; color: var(--c-dark); margin-bottom: 10px; }
.mirror-notice .token-actions { margin-top: 16px; }

/* --- docs sidebar disclosure + search ----------------------------------- */
.sidebar-sub { list-style: none; margin: 4px 0 6px; padding-left: 14px; }
.sidebar-sub[hidden] { display: none; }
.disclosure[aria-expanded="true"] .caret { transform: rotate(90deg); }
.caret { transition: transform .18s ease; }
.nav-search-results[hidden] { display: none; }