/*
 * Codice → Reso — stile del blocco (concept B promosso).
 *
 * Due strati SOVRAPPOSTI, non due colonne affiancate: il codice e il suo reso
 * devono stare nello stesso punto, altrimenti la maniglia non trasforma niente
 * — spinge via un contenuto e ne scopre un altro. Le righe sono la stessa
 * griglia in entrambi gli strati, cosi' `<a>` cade sopra il bottone e `<h2>`
 * sopra il titolo, sempre.
 *
 * La console e' una SUPERFICIE SUA, non una superficie del tema: i colori del
 * pannello scuro sono fissi e non `--ds-text`/`--ds-bg`. In dark quei ruoli si
 * invertono, il pannello del codice diventerebbe chiaro e i colori della
 * sintassi (smeraldo, verde chiaro, ocra) finirebbero su fondo panna.
 */

.ds-cr {
	padding-block: var(--ds-space-3xl, 6rem);

	/*
	 * DUE superfici, non una. Il blocco vive del gradino fra il lato codice e
	 * il lato reso, e in dark quel gradino spariva: misurato, `--ds-card`
	 * (#262626) contro la console (#0e1512) dava 1.23:1 fra i due fondi —
	 * restava visibile solo la linea smeraldo, e il pannello sembrava uno.
	 * Quindi in dark la console scende quasi al nero e il lato reso sale sopra
	 * la card del tema: 1.81:1, piu' marcato del gradino --ds-bg/--ds-card del
	 * tema stesso (1.23:1). In light non cambia niente: bianco su ink, 12.6:1.
	 *
	 * Sono colori FISSI e non ruoli semantici: in dark i ruoli si invertono, il
	 * pannello del codice diventerebbe chiaro e i colori della sintassi
	 * (smeraldo, verde chiaro, ocra) finirebbero su fondo panna.
	 */
	--cr-ink: #292929;
	--cr-live: var(--ds-card, #fff);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ds-cr {
		--cr-ink: #070d0a;
		--cr-live: #3d3d3d;
	}
}

:root[data-theme="dark"] .ds-cr {
	--cr-ink: #070d0a;
	--cr-live: #3d3d3d;
}

.ds-cr__inner {
	max-width: var(--ds-content, 1280px);
	margin-inline: auto;
	padding-inline: var(--ds-space-m, 1.5rem);
}

/* ---------------------------------------------------------------- head -- */

.ds-cr__head {
	margin-bottom: var(--ds-space-2xl, 4rem);
}

.ds-cr__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 var(--ds-space-s, 1rem);
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ds-soft, #6b6862);
}

.ds-cr__eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	border-radius: 2px;
	background: var(--ds-lime, #20b07a);
}

.ds-cr__heading {
	margin: 0;
	max-width: 20ch;
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ds-text, #292929);
}

.ds-cr__mark {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.ds-cr__mark-line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.12em;
	width: 100%;
	height: 0.26em;
	color: var(--ds-lime, #20b07a);
	overflow: visible;
}

.ds-cr__mark-line path {
	stroke-dasharray: 1;
	stroke-dashoffset: 0; /* senza JS il tratto e' gia' disegnato */
}

@media (prefers-reduced-motion: no-preference) {
	.js .ds-cr__mark-line path {
		stroke-dashoffset: 1;
		transition: stroke-dashoffset 760ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
	}

	.js .is-revealed .ds-cr__mark-line path {
		stroke-dashoffset: 0;
	}
}

.ds-cr__intro {
	margin: var(--ds-space-m, 1.5rem) 0 0;
	max-width: 58ch;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ds-soft, #6b6862);
}

/* --------------------------------------------------------------- stage -- */

.ds-cr__stage {
	position: relative;
	border: 1px solid var(--ds-line-strong, #8a857c);
	border-radius: var(--ds-radius-md, 12px);
	background: var(--cr-live, #fff);
	overflow: hidden;
	min-height: clamp(300px, 36vw, 440px);
}

/*
 * Il fondo scuro E' la maniglia: scorre e si porta dietro il lato codice.
 */
.ds-cr__ink {
	position: absolute;
	inset: 0;
	background: var(--cr-ink, #292929);
	clip-path: inset(0 calc(100% - var(--pos, 52%)) 0 0);
}

.ds-cr__layer {
	position: absolute;
	inset: 0;
}

.ds-cr__layer--code {
	clip-path: inset(0 calc(100% - var(--pos, 52%)) 0 0);
	color: #f1efeb;
}

.ds-cr__layer--live {
	clip-path: inset(0 0 0 var(--pos, 52%));
}

.ds-cr__rows {
	display: grid;
	grid-template-rows: repeat(var(--rows, 2), 1fr);
	height: 100%;
	padding: clamp(1.25rem, 4vw, 3rem);
}

/*
 * Centrati, non allineati a sinistra: la maniglia deve tagliare LO STESSO
 * oggetto. Con i contenuti a sinistra il lato «reso» resterebbe vuoto — il
 * taglio cadrebbe a destra di tutto, e sembrerebbe che il pannello non
 * renderizzi nulla.
 */
.ds-cr__cell {
	display: grid;
	align-content: center;
	justify-items: center;
	min-width: 0;
}

.ds-cr pre {
	margin: 0;
	text-align: left;
	font-family: var(--ds-font-mono, monospace);
	font-size: clamp(0.75rem, 1.15vw, 0.9375rem);
	line-height: 1.8;
	white-space: pre;
}

.ds-cr pre .t { color: var(--ds-lime, #20b07a); }
.ds-cr pre .a { color: #b9d7c9; }
.ds-cr pre .s { color: #f3d9a4; }

/* E' la resa di un bottone, non un bottone: non porta da nessuna parte. */
.ds-cr__btn {
	cursor: default;
}

.ds-cr__claim {
	margin: 0;
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 3.4vw, 2.75rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--ds-text, #292929);
	white-space: nowrap;
}

.ds-cr__text {
	margin: 0;
	max-width: 34ch;
	text-align: center;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ds-text, #292929);
}

.ds-cr__em {
	position: relative;
	font-style: normal;
	white-space: nowrap;
}

.ds-cr__underline {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.18em;
	width: 100%;
	height: 0.3em;
	color: var(--ds-lime, #20b07a);
	overflow: visible;
}

/* -------------------------------------------------------------- handle -- */

/*
 * Due chevron opposti, non tre barre: tre barre leggono come un burger, cioe'
 * «apro un menu», non «trascinami». L'asse dei chevron e' quello del gesto.
 */
/*
 * ⚠️ `--ds-accent-text`, NON `--ds-lime`: la maniglia e' un controllo, e i
 * confini dei controlli devono stare a 3:1 (WCAG 1.4.11). Misurato, lo
 * smeraldo pieno su fondo panna dava 2.42:1 sul grip e 2.8:1 sulla linea —
 * il difetto era gia' nel concept. Il token dello smeraldo COME COLORE DI
 * TESTO esiste per questo e flippa da solo in dark. Misurato sul grip, che e'
 * il controllo vero (44px, riposo e stato invertito): 4.66:1 in light,
 * 5.93:1 in dark.
 *
 * ⚠️ La LINEA resta sotto 3:1 su meta' della sua lunghezza, ed e' inevitabile:
 * sta esattamente sul confine fra due superfici che in light distano 14.55:1
 * (#292929 e #fff), e nessun colore singolo puo' stare sopra 3:1 su entrambe.
 * Misurato: 2.72 sul lato codice / 5.35 sul lato reso in light, 7.05 / 3.91 in
 * dark. Non e' un fallimento 1.4.11: il componente e' identificato dal grip e
 * dal salto fra le due superfici, la linea non porta informazione da sola.
 */
.ds-cr__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos, 52%);
	width: 2px;
	margin-left: -1px;
	background: var(--ds-accent-text, #0d6f4a);
	pointer-events: none;
}

.ds-cr__grip {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border: 2px solid var(--ds-accent-text, #0d6f4a);
	border-radius: var(--ds-radius-md, 12px);
	background: var(--ds-bg, #f1efeb);
	color: var(--ds-accent-text, #0d6f4a);
	transition: background-color var(--ds-t-fast, 160ms) var(--ds-ease, ease),
		color var(--ds-t-fast, 160ms) var(--ds-ease, ease);
}

.ds-cr__grip svg {
	width: 28px;
	height: 28px;
}

/*
 * Hover, trascinamento e focus da tastiera dicono la stessa cosa, e la dicono
 * con l'UNICO gesto del sistema bottoni: inversione di colore, nessun
 * movimento. Niente da disattivare sotto prefers-reduced-motion.
 */
.ds-cr__stage:hover .ds-cr__grip,
.ds-cr__stage:has(.ds-cr__range:focus-visible) .ds-cr__grip,
.ds-cr__stage:has(.ds-cr__range:active) .ds-cr__grip {
	background: var(--ds-accent-text, #0d6f4a);
	color: var(--ds-bg, #f1efeb);
}

.ds-cr__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ds-cr__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}

/* L'input resta invisibile anche col focus: `opacity: 1` farebbe comparire il
   cursore nativo del browser sopra il pannello. L'anello va sulla maniglia. */
.ds-cr__stage:has(.ds-cr__range:focus-visible) .ds-cr__grip {
	outline: 3px solid var(--ds-text, #292929);
	outline-offset: 3px;
}

@media (max-width: 700px) {
	.ds-cr pre {
		font-size: 0.6875rem;
	}

	.ds-cr__claim {
		font-size: 1.375rem;
	}
}