/*! BD Blocks 0.19.0 - blocco Elenco: 16 temi, aspetto automatico (.custom-dark), sempre scuro o sempre chiaro */

/* ------------------------------------------------------------------ Base
   Il colore d'accento di ogni tema viene da --bdl-a-light / --bdl-a-dark; --bdl-c e
   --bdl-cd sono i colori scelti nel blocco (chiaro e dark) e vincono sul tema. */
.bd-list {
	--bdl-a-light: #2563eb;
	--bdl-a-dark: #60a5fa;
	--bdl-gap: .55em;
	--bdl-accent: var(--bdl-c, var(--bdl-a-light));
	/* Sfondi scelti (blocco o impostazioni): punti e blocco; in dark solo quelli dark. */
	--bdl-ibx: var(--bdl-ib);
	--bdl-bbx: var(--bdl-bb);
	margin: 1.5em 0;
}
:is(.custom-dark .bd-list:not(.bd-list--m-light), .bd-list.bd-list--m-dark) { --bdl-accent: var(--bdl-cd, var(--bdl-c, var(--bdl-a-dark))); --bdl-ibx: var(--bdl-ibd); --bdl-bbx: var(--bdl-bbd); }
.bd-list--d-compact { --bdl-gap: .25em; }
.bd-list--d-airy { --bdl-gap: 1em; }

/* Classi doppie: battono gli stili delle liste del tema e dell'editor. */
.bd-list.bd-list :is(ul, ol) {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: bdl;
}
.bd-list.bd-list li {
	position: relative;
	list-style: none;
	margin: 0 0 var(--bdl-gap);
	padding: 0 0 0 1.6em;
	counter-increment: bdl;
}
.bd-list.bd-list li:last-child { margin-bottom: 0; }
.bd-list.bd-list li > :is(ul, ol) { margin-top: var(--bdl-gap); }
.bd-list.bd-list li > p:first-child { margin-top: 0; }
.bd-list.bd-list li > p:last-child { margin-bottom: 0; }

/* Colonne */
.bd-list--cols-2 > :is(ul, ol) { column-count: 2; column-gap: 2rem; }
.bd-list--cols-3 > :is(ul, ol) { column-count: 3; column-gap: 2rem; }
.bd-list.bd-list li { break-inside: avoid; }
@media (max-width: 700px) {
	.bd-list--cols-2 > :is(ul, ol),
	.bd-list--cols-3 > :is(ul, ol) { column-count: 1; }
}

@keyframes bdl-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.bd-list.bd-list li, .bd-list.bd-list li::before { transition: none !important; }
	.bd-list--t-terminal li:last-child::after { animation: none !important; }
}


/* -------------- RIVISTA -------------- */

/* editorial */
.bd-list.bd-list--t-editorial { --bdl-a-light: #e11d48; --bdl-a-dark: #fb7185; }
.bd-list.bd-list--t-editorial li { padding: .7em 0 .7em 1.7em; margin: 0; border-bottom: 1px solid rgba(127, 127, 127, .28); }
.bd-list.bd-list--t-editorial li:last-child { border-bottom: 0; }
.bd-list.bd-list--t-editorial ul > li::before { content: ""; position: absolute; left: .1em; top: 1.25em; width: .5em; height: .5em; background: var(--bdl-accent); }
.bd-list.bd-list--t-editorial ol > li { padding-left: 2.7em; }
.bd-list.bd-list--t-editorial ol > li::before { content: counter(bdl, decimal-leading-zero); position: absolute; left: 0; top: .95em; font: 700 .8em/1 Georgia, "Times New Roman", serif; letter-spacing: .04em; color: var(--bdl-accent); }

/* top10 */
.bd-list.bd-list--t-top10 { --bdl-a-light: #f97316; --bdl-a-dark: #fb923c; }
.bd-list.bd-list--t-top10 li { padding: .2em 0 .2em 3.2em; margin-bottom: 1.1em; min-height: 2.4em; }
.bd-list.bd-list--t-top10 ol > li::before { content: counter(bdl); position: absolute; left: 0; top: -.15em; font: 900 2.7em/1 "Arial Black", system-ui, sans-serif; letter-spacing: -.02em; color: var(--bdl-accent); }
@supports (-webkit-text-stroke: 2px red) {
	.bd-list.bd-list--t-top10 ol > li::before { color: transparent; -webkit-text-stroke: 2px var(--bdl-accent); }
	.bd-list.bd-list--t-top10 ol > li:first-child::before { color: var(--bdl-accent); -webkit-text-stroke: 0; }
}
.bd-list.bd-list--t-top10 ul > li { padding-left: 2.3em; }
.bd-list.bd-list--t-top10 ul > li::before { content: ""; position: absolute; left: .4em; top: .45em; width: .8em; height: .8em; background: var(--bdl-accent); transform: rotate(45deg); }

/* cards */
.bd-list.bd-list--t-cards { --bdl-a-light: #6366f1; --bdl-a-dark: #818cf8; }
.bd-list.bd-list--t-cards li { padding: .85em 1em .85em 3em; margin-bottom: .7em; background: var(--bdl-ibx, rgba(127, 127, 127, .09)); border: 1px solid rgba(127, 127, 127, .22); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .07); transition: transform .15s, box-shadow .15s; }
.bd-list.bd-list--t-cards li:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.bd-list.bd-list--t-cards li li { background: transparent; border: 0; box-shadow: none; padding: .3em 0 .3em 2em; }
.bd-list.bd-list--t-cards ul > li::before { content: ""; position: absolute; left: 1.05em; top: 1.15em; width: .8em; height: .8em; border-radius: 50%; background: var(--bdl-accent); box-shadow: 0 0 0 .28em rgba(127, 127, 127, .18); }
.bd-list.bd-list--t-cards ol > li::before { content: counter(bdl); position: absolute; left: .8em; top: .8em; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--bdl-accent); color: #fff; font: 700 .8em/1.5em system-ui, sans-serif; text-align: center; }
:is(.custom-dark .bd-list:not(.bd-list--m-light), .bd-list.bd-list--m-dark).bd-list--t-cards ol > li::before { color: #0f172a; }

/* arrow */
.bd-list.bd-list--t-arrow { --bdl-a-light: #0284c7; --bdl-a-dark: #38bdf8; }
.bd-list.bd-list--t-arrow li { padding-left: 1.8em; }
.bd-list.bd-list--t-arrow ul > li::before { content: "\2192"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--bdl-accent); transition: transform .15s; }
.bd-list.bd-list--t-arrow ul > li:hover::before { transform: translateX(3px); }
.bd-list.bd-list--t-arrow ol > li::before { content: counter(bdl) "."; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--bdl-accent); }
.bd-list.bd-list--t-arrow ol > li { padding-left: 2.1em; }

/* -------------- GAMING -------------- */

/* neon */
.bd-list.bd-list--t-neon { --bdl-a-light: #a855f7; --bdl-a-dark: #c084fc; --bdl-b: #22d3ee; padding: 1.2em 1.4em; color: #e5e7eb; background: linear-gradient(135deg, #0b0f1a 0%, #17103a 100%); border: 1px solid rgba(168, 85, 247, .45); border-radius: 14px; box-shadow: 0 0 24px rgba(168, 85, 247, .2); }
.bd-list.bd-list--t-neon li { padding-left: 1.9em; }
.bd-list.bd-list--t-neon ul > li::before { content: ""; position: absolute; left: .2em; top: .55em; width: .55em; height: .55em; transform: rotate(45deg); background: linear-gradient(135deg, var(--bdl-accent), var(--bdl-b)); box-shadow: 0 0 10px var(--bdl-accent); }
.bd-list.bd-list--t-neon ol > li { padding-left: 2.3em; }
.bd-list.bd-list--t-neon ol > li::before { content: counter(bdl, decimal-leading-zero); position: absolute; left: 0; top: .05em; font: 800 .85em/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--bdl-b); text-shadow: 0 0 8px var(--bdl-b); }
.bd-list.bd-list--t-neon a { color: var(--bdl-b); }

/* levels */
.bd-list.bd-list--t-levels { --bdl-a-light: #f43f5e; --bdl-a-dark: #fb7185; --bdl-b: #f59e0b; }
.bd-list.bd-list--t-levels li { padding-left: 4.9em; min-height: 2em; margin-bottom: .9em; }
.bd-list.bd-list--t-levels li::before { content: "LVL " counter(bdl, decimal-leading-zero); position: absolute; left: 0; top: .1em; padding: .4em .8em .4em .55em; font: 800 .66em/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; white-space: nowrap; color: #0b0f1a; background: linear-gradient(135deg, var(--bdl-accent), var(--bdl-b)); clip-path: polygon(0 0, 100% 0, 100% 62%, 86% 100%, 0 100%); }

/* pixel */
.bd-list.bd-list--t-pixel { --bdl-a-light: #16a34a; --bdl-a-dark: #4ade80; --bdl-ink: #111111; --bdl-paper: #ffffff; font-family: ui-monospace, "Courier New", monospace; letter-spacing: .03em; text-transform: uppercase; }
:is(.custom-dark .bd-list:not(.bd-list--m-light), .bd-list.bd-list--m-dark).bd-list--t-pixel { --bdl-ink: #f5f5f5; --bdl-paper: #16161a; }
.bd-list.bd-list--t-pixel li { padding: .6em .9em .6em 2.4em; margin-bottom: .75em; color: var(--bdl-ink); background: var(--bdl-ibx, var(--bdl-paper)); border: 3px solid var(--bdl-ink); box-shadow: 4px 4px 0 var(--bdl-ink); }
.bd-list.bd-list--t-pixel li li { box-shadow: none; border-width: 2px; }
.bd-list.bd-list--t-pixel ul > li::before { content: ""; position: absolute; left: .8em; top: .95em; width: .65em; height: .65em; background: var(--bdl-accent); box-shadow: 0 0 0 2px var(--bdl-ink); }
.bd-list.bd-list--t-pixel ol > li::before { content: counter(bdl); position: absolute; left: .7em; top: .55em; font: 900 1em/1 ui-monospace, "Courier New", monospace; color: var(--bdl-accent); -webkit-text-stroke: .6px var(--bdl-ink); }

/* -------------- PROGRAMMAZIONE -------------- */

/* terminal */
.bd-list.bd-list--t-terminal { --bdl-a-light: #22c55e; --bdl-a-dark: #4ade80; padding: 1em 1.2em; font: .95em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #4ade80; background: #000; border: 1px solid #166534; border-radius: 8px; }
.bd-list.bd-list--t-terminal li { padding-left: 1.8em; margin-bottom: .4em; }
.bd-list.bd-list--t-terminal ul > li::before { content: "$"; position: absolute; left: 0; font-weight: 700; color: var(--bdl-accent); }
.bd-list.bd-list--t-terminal ol > li { padding-left: 2.3em; }
.bd-list.bd-list--t-terminal ol > li::before { content: counter(bdl) ">"; position: absolute; left: 0; font-weight: 700; color: var(--bdl-accent); }
.bd-list.bd-list--t-terminal > :is(ul, ol) > li:last-child::after { content: "_"; margin-left: .15em; color: var(--bdl-accent); animation: bdl-blink 1s steps(1) infinite; }
.bd-list.bd-list--t-terminal a { color: #86efac; }

/* code */
.bd-list.bd-list--t-code { --bdl-a-light: #58a6ff; --bdl-a-dark: #79c0ff; padding: .8em 0; overflow: hidden; font: .93em/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #c9d1d9; background: #0d1117; border: 1px solid #30363d; border-radius: 10px; }
.bd-list.bd-list--t-code li { margin: 0; padding: .2em 1em .2em 3.9em; border-left: 3px solid transparent; }
.bd-list.bd-list--t-code li::before { content: counter(bdl); position: absolute; left: 0; top: .2em; bottom: .2em; width: 2.7em; padding-right: .7em; text-align: right; color: #6e7681; border-right: 1px solid #30363d; }
.bd-list.bd-list--t-code li:hover { background: rgba(110, 118, 129, .18); border-left-color: var(--bdl-accent); }
.bd-list.bd-list--t-code li:hover::before { color: #c9d1d9; }
.bd-list.bd-list--t-code a { color: #79c0ff; }

/* changelog */
.bd-list.bd-list--t-changelog { --bdl-a-light: #16a34a; --bdl-a-dark: #4ade80; font: .95em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.bd-list.bd-list--t-changelog li { padding: .3em .7em .3em 2.1em; margin-bottom: .25em; border-radius: 6px; background: linear-gradient(90deg, rgba(34, 197, 94, .16), rgba(34, 197, 94, 0) 78%); background: linear-gradient(90deg, color-mix(in srgb, var(--bdl-accent) 16%, transparent), transparent 78%); }
.bd-list.bd-list--t-changelog ul > li::before { content: "+"; position: absolute; left: .7em; top: .3em; font-weight: 800; color: var(--bdl-accent); }
.bd-list.bd-list--t-changelog ol > li { padding-left: 2.6em; }
.bd-list.bd-list--t-changelog ol > li::before { content: counter(bdl) "."; position: absolute; left: .7em; top: .3em; font-weight: 800; color: var(--bdl-accent); }

/* -------------- GUIDE -------------- */

/* check */
.bd-list.bd-list--t-check { --bdl-a-light: #16a34a; --bdl-a-dark: #4ade80; --bdl-glyph: #ffffff; }
:is(.custom-dark .bd-list:not(.bd-list--m-light), .bd-list.bd-list--m-dark).bd-list--t-check { --bdl-glyph: #052e16; }
.bd-list.bd-list--t-check li { padding-left: 2.1em; }
.bd-list.bd-list--t-check li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--bdl-accent); }
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
	.bd-list.bd-list--t-check li::after { content: ""; position: absolute; left: 0; top: .2em; width: 1.3em; height: 1.3em; background: var(--bdl-glyph); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 66% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 66% no-repeat; }
}

/* cross */
.bd-list.bd-list--t-cross { --bdl-a-light: #dc2626; --bdl-a-dark: #f87171; --bdl-glyph: #ffffff; }
:is(.custom-dark .bd-list:not(.bd-list--m-light), .bd-list.bd-list--m-dark).bd-list--t-cross { --bdl-glyph: #450a0a; }
.bd-list.bd-list--t-cross li { padding-left: 2.1em; }
.bd-list.bd-list--t-cross li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--bdl-accent); }
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
	.bd-list.bd-list--t-cross li::after { content: ""; position: absolute; left: 0; top: .2em; width: 1.3em; height: 1.3em; background: var(--bdl-glyph); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center / 66% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center / 66% no-repeat; }
}

/* warning */
.bd-list.bd-list--t-warning { --bdl-a-light: #d97706; --bdl-a-dark: #fbbf24; --bdl-glyph: #1f2937; }
.bd-list.bd-list--t-warning li { padding-left: 2.2em; }
.bd-list.bd-list--t-warning li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.4em; height: 1.25em; background: var(--bdl-accent); border-radius: 2px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bd-list.bd-list--t-warning li::after { content: "!"; position: absolute; left: 0; top: .55em; width: 1.4em; text-align: center; font: 900 .72em/1 system-ui, sans-serif; color: var(--bdl-glyph); }
:is(.custom-dark .bd-list:not(.bd-list--m-light), .bd-list.bd-list--m-dark).bd-list--t-warning li::before { filter: drop-shadow(0 0 3px rgba(251, 191, 36, .45)); }

/* timeline */
.bd-list.bd-list--t-timeline { --bdl-a-light: #8b5cf6; --bdl-a-dark: #a78bfa; }
.bd-list.bd-list--t-timeline li { margin: 0 0 0 .6em; padding: 0 0 1.25em 2em; border-left: 2px solid rgba(127, 127, 127, .38); }
.bd-list.bd-list--t-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.bd-list.bd-list--t-timeline li li { padding-bottom: .6em; }
.bd-list.bd-list--t-timeline ul > li::before { content: ""; position: absolute; left: -.6em; top: .2em; width: .95em; height: .95em; border-radius: 50%; background: var(--bdl-accent); box-shadow: 0 0 0 .28em rgba(127, 127, 127, .2); }
.bd-list.bd-list--t-timeline ol > li::before { content: counter(bdl); position: absolute; left: -.95em; top: 0; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--bdl-accent); color: #fff; font: 800 .8em/1.7em system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 .22em rgba(127, 127, 127, .2); }
:is(.custom-dark .bd-list:not(.bd-list--m-light), .bd-list.bd-list--m-dark).bd-list--t-timeline ol > li::before { color: #1e1b4b; }


/* -------------- ASPETTO --------------
   Automatico: segue l'interruttore chiaro/scuro del sito (.custom-dark).
   Sempre scuro / sempre chiaro: l'elenco ha un suo fondo, leggibile su qualsiasi pagina. */
.bd-list.bd-list--m-dark:not(.bd-list--t-neon):not(.bd-list--t-terminal):not(.bd-list--t-code):not(.bd-list--t-cinema) { padding: 1.1em 1.3em; color: #e5e7eb; background: var(--bdl-bbx, #111827); border: 1px solid #1f2937; border-radius: 12px; }
.bd-list.bd-list--m-light:not(.bd-list--t-neon):not(.bd-list--t-terminal):not(.bd-list--t-code):not(.bd-list--t-cinema) { padding: 1.1em 1.3em; color: #1f2937; background: var(--bdl-bbx, #ffffff); border: 1px solid #e5e7eb; border-radius: 12px; }
.bd-list.bd-list--m-dark:not(.bd-list--t-neon):not(.bd-list--t-terminal):not(.bd-list--t-code):not(.bd-list--t-cinema) a { color: #93c5fd; }
.bd-list.bd-list--m-light:not(.bd-list--t-neon):not(.bd-list--t-terminal):not(.bd-list--t-code):not(.bd-list--t-cinema) a { color: #1d4ed8; }
.bd-list.bd-list--m-light.bd-list--t-pixel { --bdl-ink: #111111; --bdl-paper: #ffffff; }
.bd-list.bd-list--m-light.bd-list--t-check { --bdl-glyph: #ffffff; }
.bd-list.bd-list--m-light.bd-list--t-cross { --bdl-glyph: #ffffff; }
/* I temi con un fondo proprio (Neon, Terminale, Editor di codice, Cinema) restano sempre come sono. */

/* Sfondo del blocco scelto (nel blocco o nelle impostazioni): riquadro attorno a tutto l'elenco.
   Senza il colore per il tema attuale (es. solo chiaro, sito in dark) resta trasparente. */
.bd-list.bd-list--bb { padding: 1.1em 1.3em; background: var(--bdl-bbx, transparent); border-radius: 12px; }
/* Punti con uno sfondo pieno scelto: niente velo, bordo appena accennato. */
.bd-list.bd-list--t-cards li { border-color: color-mix(in srgb, var(--bdl-ibx, transparent) 82%, #7f7f7f); }

/* Dark automatico: testi delle schede e bordi piu' visibili */
:is(.custom-dark .bd-list:not(.bd-list--m-light), .bd-list.bd-list--m-dark).bd-list--t-cards li { background: var(--bdl-ibx, rgba(255, 255, 255, .05)); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
:is(.custom-dark .bd-list:not(.bd-list--m-light), .bd-list.bd-list--m-dark).bd-list--t-editorial li { border-bottom-color: rgba(255, 255, 255, .14); }
:is(.custom-dark .bd-list:not(.bd-list--m-light), .bd-list.bd-list--m-dark).bd-list--t-timeline li { border-left-color: rgba(255, 255, 255, .22); }
:is(.custom-dark .bd-list:not(.bd-list--m-light), .bd-list.bd-list--m-dark).bd-list--t-changelog li { background: linear-gradient(90deg, rgba(74, 222, 128, .16), rgba(74, 222, 128, 0) 78%); background: linear-gradient(90deg, color-mix(in srgb, var(--bdl-accent) 18%, transparent), transparent 78%); }

/* -------------- CINEMA E STREAMING -------------- */

/* cinema: sala buia, accento oro, pellicola al posto del pallino */
.bd-list.bd-list--t-cinema { --bdl-a-light: #f5c518; --bdl-a-dark: #f5c518; padding: 1.1em 1.3em; color: #f1f1f1; background: linear-gradient(180deg, #1c1c1f 0%, #0f0f11 100%); border: 1px solid #2a2a2e; border-top: 3px solid var(--bdl-accent); border-radius: 10px; }
.bd-list.bd-list--t-cinema li { padding-left: 2em; }
.bd-list.bd-list--t-cinema li + li { padding-top: .1em; }
.bd-list.bd-list--t-cinema ul > li::before { content: ""; position: absolute; left: 0; top: .22em; width: 1.25em; height: 1.05em; background: var(--bdl-accent); border-radius: 2px; }
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
	.bd-list.bd-list--t-cinema ul > li::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath fill-rule='evenodd' d='M2 0h20a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm1 2.5v2h2v-2zm0 6.5v2h2V9zm0 6.5v2h2v-2zm16-13v2h2v-2zm0 6.5v2h2V9zm0 6.5v2h2v-2zM7 3v14h10V3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath fill-rule='evenodd' d='M2 0h20a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm1 2.5v2h2v-2zm0 6.5v2h2V9zm0 6.5v2h2v-2zm16-13v2h2v-2zm0 6.5v2h2V9zm0 6.5v2h2v-2zM7 3v14h10V3z'/%3E%3C/svg%3E") center / contain no-repeat; border-radius: 0; }
}
.bd-list.bd-list--t-cinema ol > li { padding-left: 2.6em; }
.bd-list.bd-list--t-cinema ol > li::before { content: counter(bdl, decimal-leading-zero); position: absolute; left: 0; top: .1em; padding: .15em .35em; font: 800 .78em/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #0f0f11; background: var(--bdl-accent); border-radius: 3px; }
.bd-list.bd-list--t-cinema a { color: var(--bdl-accent); }

/* streamtop: classifica con numeri grandi a contorno, accento rosso */
.bd-list.bd-list--t-streamtop { --bdl-a-light: #e50914; --bdl-a-dark: #ff3b45; }
.bd-list.bd-list--t-streamtop ol > li { padding: .35em 0 .35em 3.6em; margin-bottom: 1em; min-height: 2.9em; }
.bd-list.bd-list--t-streamtop ol > li::before { content: counter(bdl); position: absolute; left: 0; top: -.12em; width: 1.25em; text-align: center; font: 900 2.9em/1 "Arial Black", Impact, system-ui, sans-serif; letter-spacing: -.06em; color: var(--bdl-accent); }
@supports (-webkit-text-stroke: 2px red) {
	.bd-list.bd-list--t-streamtop ol > li::before { color: transparent; -webkit-text-stroke: 2px var(--bdl-accent); }
	.bd-list.bd-list--t-streamtop ol > li:nth-child(-n+3)::before { color: var(--bdl-accent); -webkit-text-stroke: 0; }
}
.bd-list.bd-list--t-streamtop ol > li:nth-child(n+10) { padding-left: 4.4em; }
.bd-list.bd-list--t-streamtop ol > li:nth-child(n+10)::before { width: 1.55em; }
.bd-list.bd-list--t-streamtop ul > li { padding-left: 1.6em; }
.bd-list.bd-list--t-streamtop ul > li::before { content: ""; position: absolute; left: .1em; top: .3em; width: .35em; height: 1em; background: var(--bdl-accent); border-radius: 1px; }

/* -------------- SMARTPHONE (sotto i 700 px) --------------
   bd-list--sm-compact: stessi temi, rientri, numeri e riquadri piu' piccoli.
   bd-list--sm-simple:  solo il simbolo colorato del tema, niente riquadri ne' cornici. */
@media (max-width: 700px) {
	/* Compatto */
	.bd-list.bd-list--sm-compact { --bdl-gap: .4em; }
	.bd-list.bd-list--sm-compact li { padding-left: 1.35em; }
	.bd-list.bd-list--sm-compact:is(.bd-list--t-neon, .bd-list--t-terminal, .bd-list--t-cinema, .bd-list--m-dark, .bd-list--m-light) { padding: .8em .85em; border-radius: 10px; }
	.bd-list.bd-list--sm-compact.bd-list--t-neon { box-shadow: 0 0 12px rgba(168, 85, 247, .18); }
	.bd-list.bd-list--sm-compact.bd-list--t-editorial li { padding: .5em 0 .5em 1.35em; }
	.bd-list.bd-list--sm-compact.bd-list--t-editorial ul > li::before { top: 1.02em; width: .45em; height: .45em; }
	.bd-list.bd-list--sm-compact.bd-list--t-editorial ol > li { padding-left: 2.2em; }
	.bd-list.bd-list--sm-compact.bd-list--t-editorial ol > li::before { top: .75em; }
	.bd-list.bd-list--sm-compact.bd-list--t-top10 li { padding-left: 2.3em; min-height: 1.8em; margin-bottom: .7em; }
	.bd-list.bd-list--sm-compact.bd-list--t-top10 ol > li::before { font-size: 1.9em; top: -.05em; }
	.bd-list.bd-list--sm-compact.bd-list--t-top10 ul > li { padding-left: 1.6em; }
	.bd-list.bd-list--sm-compact.bd-list--t-top10 ul > li::before { left: .2em; width: .6em; height: .6em; }
	.bd-list.bd-list--sm-compact.bd-list--t-streamtop ol > li { padding-left: 2.5em; min-height: 2.1em; margin-bottom: .65em; }
	.bd-list.bd-list--sm-compact.bd-list--t-streamtop ol > li::before { font-size: 2em; top: -.05em; }
	.bd-list.bd-list--sm-compact.bd-list--t-streamtop ol > li:nth-child(n+10) { padding-left: 3em; }
	.bd-list.bd-list--sm-compact.bd-list--t-cards li { padding: .6em .7em .6em 2.3em; margin-bottom: .5em; border-radius: 9px; box-shadow: none; }
	.bd-list.bd-list--sm-compact.bd-list--t-cards ul > li::before { left: .8em; top: .95em; width: .65em; height: .65em; box-shadow: 0 0 0 .2em rgba(127, 127, 127, .18); }
	.bd-list.bd-list--sm-compact.bd-list--t-cards ol > li::before { left: .55em; top: .6em; }
	.bd-list.bd-list--sm-compact.bd-list--t-arrow li { padding-left: 1.45em; }
	.bd-list.bd-list--sm-compact.bd-list--t-arrow ol > li { padding-left: 1.8em; }
	.bd-list.bd-list--sm-compact.bd-list--t-neon li { padding-left: 1.5em; }
	.bd-list.bd-list--sm-compact.bd-list--t-neon ol > li { padding-left: 1.95em; }
	.bd-list.bd-list--sm-compact.bd-list--t-levels li { padding-left: 3.7em; margin-bottom: .6em; }
	.bd-list.bd-list--sm-compact.bd-list--t-levels li::before { font-size: .58em; padding: .38em .6em .38em .45em; }
	.bd-list.bd-list--sm-compact.bd-list--t-pixel li { padding: .45em .6em .45em 1.9em; margin-bottom: .55em; border-width: 2px; box-shadow: 2px 2px 0 var(--bdl-ink); }
	.bd-list.bd-list--sm-compact.bd-list--t-pixel ul > li::before { left: .6em; top: .8em; width: .55em; height: .55em; }
	.bd-list.bd-list--sm-compact.bd-list--t-pixel ol > li::before { left: .55em; top: .45em; }
	.bd-list.bd-list--sm-compact.bd-list--t-terminal li { padding-left: 1.4em; }
	.bd-list.bd-list--sm-compact.bd-list--t-terminal ol > li { padding-left: 1.9em; }
	.bd-list.bd-list--sm-compact.bd-list--t-code li { padding: .2em .6em .2em 2.9em; }
	.bd-list.bd-list--sm-compact.bd-list--t-code li::before { width: 2.1em; padding-right: .5em; }
	.bd-list.bd-list--sm-compact.bd-list--t-changelog li { padding: .25em .5em .25em 1.7em; }
	.bd-list.bd-list--sm-compact.bd-list--t-changelog ul > li::before,
	.bd-list.bd-list--sm-compact.bd-list--t-changelog ol > li::before { left: .5em; top: .25em; }
	.bd-list.bd-list--sm-compact.bd-list--t-changelog ol > li { padding-left: 2.2em; }
	.bd-list.bd-list--sm-compact:is(.bd-list--t-check, .bd-list--t-cross) li { padding-left: 1.75em; }
	.bd-list.bd-list--sm-compact:is(.bd-list--t-check, .bd-list--t-cross) li::before,
	.bd-list.bd-list--sm-compact:is(.bd-list--t-check, .bd-list--t-cross) li::after { width: 1.1em; height: 1.1em; top: .25em; }
	.bd-list.bd-list--sm-compact.bd-list--t-warning li { padding-left: 1.8em; }
	.bd-list.bd-list--sm-compact.bd-list--t-warning li::before { width: 1.2em; height: 1.07em; top: .25em; }
	.bd-list.bd-list--sm-compact.bd-list--t-warning li::after { top: .62em; width: 1.9em; font-size: .64em; }
	.bd-list.bd-list--sm-compact.bd-list--t-timeline li { margin-left: .45em; padding: 0 0 .9em 1.45em; }
	.bd-list.bd-list--sm-compact.bd-list--t-timeline ul > li::before { left: -.5em; width: .8em; height: .8em; top: .25em; }
	.bd-list.bd-list--sm-compact.bd-list--t-timeline ol > li::before { left: -.8em; width: 1.5em; height: 1.5em; line-height: 1.5em; font-size: .75em; }
	.bd-list.bd-list--sm-compact.bd-list--t-cinema li { padding-left: 1.65em; }
	.bd-list.bd-list--sm-compact.bd-list--t-cinema ul > li::before { width: 1.05em; height: .9em; top: .28em; }
	.bd-list.bd-list--sm-compact.bd-list--t-cinema ol > li { padding-left: 2.3em; }

	/* Semplice: niente riquadri, schede o cornici; resta il colore del tema. */
	.bd-list.bd-list--sm-simple { --bdl-gap: .35em; padding: 0; color: inherit; font-family: inherit; font-size: inherit; letter-spacing: normal; text-transform: none; background: none; border: 0; border-radius: 0; box-shadow: none; }
	.bd-list.bd-list--sm-simple li { min-height: 0; margin: 0 0 var(--bdl-gap); padding: 0 0 0 1.3em; color: inherit; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; }
	.bd-list.bd-list--sm-simple li:hover { background: none; box-shadow: none; transform: none; }
	.bd-list.bd-list--sm-simple li::after,
	.bd-list.bd-list--sm-simple > :is(ul, ol) > li:last-child::after { content: none; }
	.bd-list.bd-list--sm-simple ul > li::before { content: ""; position: absolute; left: .2em; top: .62em; width: .45em; height: .45em; padding: 0; color: transparent; background: var(--bdl-accent); border: 0; border-radius: 50%; box-shadow: none; transform: none; clip-path: none; -webkit-mask: none; mask: none; -webkit-text-stroke: 0; text-shadow: none; }
	.bd-list.bd-list--sm-simple ol > li,
	.bd-list.bd-list--sm-simple ol > li:nth-child(n) { min-height: 0; margin: 0 0 var(--bdl-gap); padding: 0 0 0 1.7em; }
	.bd-list.bd-list--sm-simple ol > li::before,
	.bd-list.bd-list--sm-simple ol > li:nth-child(n)::before { content: counter(bdl) "."; position: absolute; left: 0; top: 0; bottom: auto; width: auto; height: auto; padding: 0; font-family: inherit; font-size: 1em; font-weight: 700; line-height: inherit; letter-spacing: normal; color: var(--bdl-accent); background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; clip-path: none; -webkit-text-stroke: 0; text-shadow: none; text-align: left; }
	.bd-list.bd-list--sm-simple:is(.bd-list--t-neon, .bd-list--t-terminal, .bd-list--t-code, .bd-list--t-cinema) a { color: inherit; }
	/* Spunte, croci e "attenzione" sono gia' simboli leggeri: restano, piu' piccoli. */
	.bd-list.bd-list--sm-simple:is(.bd-list--t-check, .bd-list--t-cross) li { padding-left: 1.6em; }
	.bd-list.bd-list--sm-simple:is(.bd-list--t-check, .bd-list--t-cross) li::before { content: ""; left: 0; top: .28em; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--bdl-accent); }
	.bd-list.bd-list--sm-simple:is(.bd-list--t-check, .bd-list--t-cross) li::after { content: ""; left: 0; top: .28em; width: 1.05em; height: 1.05em; }
	.bd-list.bd-list--sm-simple.bd-list--t-warning li { padding-left: 1.6em; }
	.bd-list.bd-list--sm-simple.bd-list--t-warning li::before { content: ""; left: 0; top: .3em; width: 1.1em; height: 1em; border-radius: 2px; background: var(--bdl-accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
	.bd-list.bd-list--sm-simple.bd-list--t-arrow ul > li::before { content: "\2192"; top: 0; width: auto; height: auto; color: var(--bdl-accent); background: none; border-radius: 0; font-weight: 800; }
}