/* EA TL;DR - stile front-end + editor. Integrato nel tema, nessuna
   dipendenza esterna, dark-mode aware, zero layout shift (CLS).
   Struttura: aside.tldr-box > .tldr-header > .tldr-title
                              > .tldr-content > .tldr-lead / .tldr-points / .tldr-cta */

.tldr-box {
	--tldr-accent: #0d9488;
	--tldr-bg: #f2fbfa;
	--tldr-border: #0d9488;
	--tldr-fg: #1f2937;
	--tldr-muted: #4b5563;
	--tldr-cta-fg: #ffffff;
	box-sizing: border-box;
	max-width: 760px;
	margin: 1.5rem auto;
	padding: 0;
	border-radius: 12px;
	line-height: 1.55;
	font-size: 1rem;
	color: var(--tldr-fg);
	overflow: hidden;
}

.tldr-box--evidenziato {
	background: var(--tldr-bg);
	border: 1px solid rgba( 13, 148, 136, 0.35 );
	border-left: 4px solid var(--tldr-border);
}

.tldr-box--minimal {
	background: transparent;
	border: 0;
	border-top: 2px solid rgba( 13, 148, 136, 0.5 );
	border-radius: 0;
}

.tldr-header {
	padding: 0.7rem 1.15rem 0.35rem;
}

.tldr-box--minimal .tldr-header {
	padding-left: 0;
	padding-right: 0;
}

.tldr-title {
	display: inline-block;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.01em;
	color: var(--tldr-accent);
}

.tldr-content {
	padding: 0 1.15rem 0.9rem;
}

.tldr-box--minimal .tldr-content {
	padding-left: 0;
	padding-right: 0;
}

.tldr-lead {
	margin: 0 0 0.6rem;
	color: var(--tldr-fg);
}

.tldr-points-title {
	margin: 0 0 0.3rem;
	font-weight: 700;
	color: var(--tldr-fg);
}

.tldr-points {
	margin: 0 0 0.7rem;
	padding-left: 1.15rem;
}

.tldr-points li {
	margin: 0.2rem 0;
	color: var(--tldr-fg);
}

/* Jump-link ai paragrafi. */
.tldr-nav li a {
	color: var(--tldr-accent);
	text-decoration: none;
	border-bottom: 1px dotted rgba( 13, 148, 136, 0.6 );
}

.tldr-nav li a:hover,
.tldr-nav li a:focus {
	border-bottom-style: solid;
}

.tldr-nav li a:focus-visible {
	outline: 2px solid var(--tldr-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Pulsante verso la lezione interattiva: il click che serve alla maestra. */
.tldr-actions {
	margin-top: 0.2rem;
}

.tldr-cta {
	display: inline-block;
	background: var(--tldr-accent);
	color: var(--tldr-cta-fg);
	font-weight: 600;
	text-decoration: none;
	padding: 0.55rem 1.05rem;
	border-radius: 8px;
	line-height: 1.2;
	transition: filter 0.15s ease;
}

.tldr-cta:hover,
.tldr-cta:focus {
	color: var(--tldr-cta-fg);
	filter: brightness( 0.93 );
	text-decoration: none;
}

.tldr-cta:focus-visible {
	outline: 2px solid var(--tldr-accent);
	outline-offset: 2px;
}

/* Sticky su desktop, senza spostare il layout. */
@media ( min-width: 782px ) {
	.tldr-box.is-sticky {
		position: sticky;
		top: 1rem;
	}
}

html { scroll-behavior: smooth; }
:target { scroll-margin-top: 1.5rem; }

/* Dark mode. */
@media ( prefers-color-scheme: dark ) {
	.tldr-box {
		--tldr-bg: #0f2b28;
		--tldr-fg: #e5e7eb;
		--tldr-muted: #9ca3af;
		--tldr-accent: #2dd4bf;
		--tldr-cta-fg: #06201d;
	}
	.tldr-box--evidenziato {
		border-color: rgba( 45, 212, 191, 0.35 );
		border-left-color: #2dd4bf;
	}
}

body.dark-mode .tldr-box,
[data-theme="dark"] .tldr-box,
.is-dark-theme .tldr-box {
	--tldr-bg: #0f2b28;
	--tldr-fg: #e5e7eb;
	--tldr-muted: #9ca3af;
	--tldr-accent: #2dd4bf;
	--tldr-cta-fg: #06201d;
}

/* ---------------------- solo editor --------------------------------- */
.tldr-editor.tldr-box { margin: 0; }

.tldr-title-input .components-text-control__input {
	font-weight: 700;
	color: var(--tldr-accent);
}

.tldr-editrows { margin: 0.3rem 0 0.6rem; }

.tldr-editrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.tldr-editrow .components-base-control {
	flex: 1 1 auto;
	margin-bottom: 0;
}

.tldr-anchor-tag {
	flex: 0 0 auto;
	font-size: 0.72rem;
	font-family: monospace;
	color: #6b7280;
	background: rgba( 13, 148, 136, 0.1 );
	padding: 2px 6px;
	border-radius: 4px;
}

.tldr-cta-preview {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 0.3rem;
}

.tldr-cta--preview { cursor: default; }

.tldr-status {
	font-size: 0.82rem;
	color: var(--tldr-accent);
	margin: 4px 0 0;
}

.tldr-hint,
.tldr-empty {
	font-size: 0.8rem;
	color: #6b7280;
	line-height: 1.4;
}

.tldr-empty { font-style: italic; margin: 0.4rem 0 0; }