/* C: VERSIONE — il link a questo foglio porta ?v=N in ogni pagina che lo include. Toccando il file
   va alzato anche quel numero (app/public/*.html, app/app/View/Guscio.php, app/public/index.php),
   altrimenti chi ha gia visitato il sito continua a vedere la versione vecchia dalla cache.
   C: fondamenta condivise — stessi colori, caratteri e comandi della pagina pubblica.
   Un file solo: le pagine del prodotto non ridefiniscono ciò che sta qui, aggiungono soltanto
   ciò che è proprio di ognuna. */
@import url("/assets/font/font.css");

:root {
	--ink: #05003d;
	--ink-2: #1a1060;
	--bg: #f6f6fb;
	--surface: #ffffff;
	--surface-2: #eeeef7;
	--line: #e3e3ee;
	--muted: #6b6b80;
	--text: #191333;

	--note: #FFD84D;
	--note-deep: #e8bd25;
	--review: #2EA8FF;
	--review-deep: #1c86d6;
	--fact: #1f9d55;
	--fact-deep: #177841;
	--star: #ffb400;

	--flat-a: #dcdce6;
	--flat-b: #e9e9f2;
	--flat-c: #cdcddc;
	--flat-bg: #f2f2f7;

	--band-bg: #05003d;
	--band-text: #d9d7ef;
	--band-line: rgba(255,255,255,.14);
	--band-surface: rgba(255,255,255,.06);

	--pin-shadow: 2px 4px 10px rgba(5,0,61,.30);
	--pin-shadow-lg: 6px 14px 34px rgba(5,0,61,.28);
	--card-shadow: 0 1px 2px rgba(5,0,61,.04), 0 12px 34px rgba(5,0,61,.06);

	--display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--wrap: 1140px;
	--r-card: 18px;
	--step: clamp(56px, 9vw, 108px);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ink: #e9e7fb;
		--ink-2: #cfcbf5;
		--bg: #08062a;
		--surface: #110d44;
		--surface-2: #191352;
		--line: rgba(255,255,255,.13);
		--muted: #a3a0c4;
		--text: #e9e7fb;

		--flat-a: #2a2560;
		--flat-b: #221d55;
		--flat-c: #352f72;
		--flat-bg: #14104a;

		--band-bg: #03011c;
		--band-text: #c9c6e8;
		--band-line: rgba(255,255,255,.12);
		--band-surface: rgba(255,255,255,.05);

		--pin-shadow: 2px 4px 12px rgba(0,0,0,.5);
		--pin-shadow-lg: 6px 14px 34px rgba(0,0,0,.55);
		--card-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.35);
	}
}
:root[data-theme="dark"] {
	--ink: #e9e7fb;
	--ink-2: #cfcbf5;
	--bg: #08062a;
	--surface: #110d44;
	--surface-2: #191352;
	--line: rgba(255,255,255,.13);
	--muted: #a3a0c4;
	--text: #e9e7fb;

	--flat-a: #2a2560;
	--flat-b: #221d55;
	--flat-c: #352f72;
	--flat-bg: #14104a;

	--band-bg: #03011c;
	--band-text: #c9c6e8;
	--band-line: rgba(255,255,255,.12);
	--band-surface: rgba(255,255,255,.05);

	--pin-shadow: 2px 4px 12px rgba(0,0,0,.5);
	--pin-shadow-lg: 6px 14px 34px rgba(0,0,0,.55);
	--card-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 17px/1.6 var(--body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 800; color: var(--ink); margin: 0; text-wrap: balance; letter-spacing: -.02em; }
h1 { font-size: clamp(2.7rem, 6.6vw, 5.1rem); line-height: .98; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.04; }
h3 { font-size: 1.3rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.lede { max-width: 60ch; color: var(--muted); font-size: 1.125rem; line-height: 1.65; }
.section { padding: var(--step) 0; }
.eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .5; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.ic { width: 18px; height: 18px; flex: none; }

:where(a, button, summary):focus-visible { outline: 3px solid var(--review); outline-offset: 3px; border-radius: 6px; }

/* ─── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 16px/1.6 var(--body);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 700; }
h2 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }
a { color: var(--ink); }
code, pre, .mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }

/* ─── comandi ──────────────────────────────────────────────────────────── */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	border: 1px solid transparent; border-radius: 999px; padding: 13px 24px;
	font: 600 16px/1 var(--body); text-decoration: none; cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn--primary { background: var(--ink); color: var(--bg); box-shadow: 0 8px 22px rgba(5,0,61,.22); }
.btn--primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(5,0,61,.3); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover:not(:disabled) { background: var(--surface); transform: translateY(-2px); }
.btn--light { background: var(--note); color: #05003d; box-shadow: 0 8px 26px rgba(255,216,77,.4); }
.btn--light:hover:not(:disabled) { transform: translateY(-2px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.btn--sm { padding: 9px 16px; font-size: 14px; }

/* ─── superfici ────────────────────────────────────────────────────────── */
.card {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
	box-shadow: var(--card-shadow); padding: 22px 24px;
}
.chip {
	display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
	background: var(--surface); border-radius: 999px; padding: 7px 14px;
	font: 500 13px/1 var(--body); color: var(--ink);
}
.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ─── moduli ───────────────────────────────────────────────────────────── */
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
/* C: per ESCLUSIONE, non per elenco di type. Un <input> senza attributo type si comporta come
   testo ma nessun selettore input[type="text"] lo raggiunge: restava con l'aspetto nudo del
   browser — 22px di altezza, nessun bordo arrotondato — in mezzo a campi vestiti.
   Il gruppo sta dentro :where() per non pesare: nove :not() valgono nove classi, e senza
   questo gli stati che seguono (:disabled, :hover) perderebbero il confronto e non si vedrebbero. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"])),
select, textarea {
	width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px;
	background: var(--surface); color: var(--text); font: 400 15.5px/1.45 var(--body);
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
/* C: senza appearance:none il menu a tendina tiene l'aspetto di sistema e ignora meta' di quanto
   sopra — resta piu' basso dei campi accanto. La freccia la disegniamo noi, in due versioni
   perche' un data-URI non conosce currentColor. */
select {
	appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b80' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 13px center; background-size: 15px;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a0c4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
}
:root[data-theme="dark"] select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a0c4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
textarea { min-height: 96px; resize: vertical; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--flat-c); }
input:disabled, select:disabled, textarea:disabled { background: var(--flat-bg); color: var(--muted); cursor: not-allowed; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 14%, transparent);
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::placeholder { color: var(--muted); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}