/* Scheda di analisi — sistema visivo Smoking Mirror 2.0 (chiaro unico).
 * Token da ~/Claude/SmokingMirror-brand-review/output/13-scheda/tokens.css e 12-sito/tokens.css.
 * Nessuna risorsa esterna: font serviti dallo stesso dominio (CSP font-src 'self').
 * Nessun tema scuro, nessun selettore di tema, nessun oro fuori dal punto del wordmark (SVG).
 */

/* --- EB Garamond (titoli) — OFL, file già presenti in fonts/ ---------------- */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/EBGaramond-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/EBGaramond-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/EBGaramond-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/EBGaramond-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- IBM Plex Sans / Mono — OFL (IBM-Plex-OFL.txt in fonts/) ----------------
 * Subset e unicode-range presi dai CSS ufficiali del repository IBM/plex
 * (packages/plex-sans|plex-mono/fonts/split/woff2/*.css): Latin1 = latin,
 * Latin2 = latin-ext. Nessun local(): si usa sempre il file servito qui. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-400-normal-latin.woff2') format('woff2');unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-0101,U+0104-0130,U+0132-0151,U+0154-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+1E80-1E85,U+1E9E,U+20A1,U+20A4,U+20A6,U+20A8-20AA,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexSans-500-normal-latin.woff2') format('woff2');unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexSans-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-0101,U+0104-0130,U+0132-0151,U+0154-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+1E80-1E85,U+1E9E,U+20A1,U+20A4,U+20A6,U+20A8-20AA,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-400-normal-latin.woff2') format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-0101,U+0104-0130,U+0132-0151,U+0154-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+1E80-1E85,U+1E9E,U+20A1,U+20A4,U+20A6,U+20A8-20AA,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexMono-500-normal-latin.woff2') format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexMono-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-0101,U+0104-0130,U+0132-0151,U+0154-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+1E80-1E85,U+1E9E,U+20A1,U+20A4,U+20A6,U+20A8-20AA,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF}

/* --- Token ---------------------------------------------------------------- */
:root{
  color-scheme:light;
  --base:#ECEAE5;        /* fondo pagina */
  --card:#F2F0EB;        /* superfici: testata, riquadri */
  --paper:#FFFFFF;       /* campi */
  --ink:#141413;         /* testo */
  --muted:#54524B;       /* testo secondario */
  --cyan:#14596B;        /* unico accento: link, focus, stati, numerazione */
  --border:#6B6960;      /* bordi funzionali (input, bottoni secondari) */
  --rule:#B9B6AC;        /* SOLO separatori decorativi */
  --on-button:#F2F0EB;   /* testo sul bottone inchiostro e sull'hover ciano */
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --radius:2px;
  --target:44px;
  --page:64rem;
}

/* --- Base ----------------------------------------------------------------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--base)}
body{margin:0;background:var(--base);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,dl,dd,figure{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;text-wrap:pretty}
h1{font-size:clamp(2rem,5vw,3rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.125rem)}
h3{font-size:1.25rem}
p+p{margin-top:1rem}
a{color:var(--cyan);text-underline-offset:.2em}
button,input,select,textarea{font:inherit;color:var(--ink)}
button{cursor:pointer}
button[disabled]{cursor:default;opacity:.65}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
h1:focus,h2:focus,p:focus,div:focus{outline:none}
h1:focus-visible,h2:focus-visible{outline:3px solid var(--cyan);outline-offset:6px}
.shell{max-width:var(--page);margin-inline:auto;padding-inline:24px}
.skip{position:absolute;left:16px;top:-100px;z-index:20;background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:12px 16px}
.skip:focus{top:8px}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Testata -------------------------------------------------------------- */
.mast{background:var(--card);border-bottom:1px solid var(--rule)}
.mast-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:18px}
.identity{min-width:0}
/* Il logo è un link alla pagina iniziale: un solo nome accessibile («Smoking Mirror,
   pagina iniziale»), immagini con alt vuoto. Colore del testo e assenza di sottolineatura
   lasciano il lockup identico a prima; il focus resta l'anello globale. */
/* Il padding porta il bersaglio a 44px senza spostare nulla: i margini negativi lo
   riassorbono, così l'altezza della testata resta quella di prima del link. */
.identity .brand{display:block;min-width:0;color:inherit;text-decoration:none;
  padding-block:12px;margin-block:-12px}
.identity .lockup{display:block;width:min(260px,100%);height:auto}
.identity .compact{display:none;align-items:center;gap:10px;font-size:18px;font-weight:500;min-width:0;overflow-wrap:anywhere}
.identity .compact img{width:24px;height:24px;flex:none}
.descriptor{margin-top:8px;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.project{min-width:0;text-align:right;font:400 13px/1.5 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.project .pname{display:block;color:var(--ink);font-weight:500}

/* --- Barra di stato ------------------------------------------------------- */
.statusbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-block:14px;border-bottom:1px solid var(--rule)}
.statusbar>*{min-width:0;white-space:normal;overflow-wrap:anywhere}
.statusbar .group{font:500 13px/1.5 var(--mono);color:var(--muted)}
.statusbar .saved{font-size:13px;color:var(--muted)}
.statusbar .count{margin-left:auto;font:500 13px/1.5 var(--mono);color:var(--cyan)}
.linkbtn{background:none;border:0;padding:10px 0;min-height:var(--target);color:var(--cyan);font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:.2em;text-align:left;line-height:1.5}

/* --- Impaginato ----------------------------------------------------------- */
main{padding-block:44px 64px}
.question{max-width:44rem}
.eyebrow{font:500 13px/1.5 var(--mono);color:var(--cyan);letter-spacing:.03em;margin-bottom:16px;display:block}
.eyebrow .sep{color:var(--muted)}
.eyebrow .qgroup{color:var(--muted)}
.lead{margin-top:20px;font-size:17px;color:var(--muted);max-width:60ch}
.hint{display:block;margin-top:12px;font-size:14px;color:var(--muted);max-width:60ch}
.qtitle{max-width:26ch}
.qtitle label{display:block;font:inherit;cursor:pointer}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start}
.card{background:var(--card);border:1px solid var(--rule);padding:28px}
.card h2{font-size:1.5rem}
.card ul{margin:18px 0 0;padding-left:20px;color:var(--muted)}
.card li+li{margin-top:8px}
.small{font-size:14px;color:var(--muted)}
.note{border-left:3px solid var(--cyan);padding-left:16px;margin-top:20px}
details.info{margin-top:24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:4px}
details.info summary{min-height:var(--target);display:flex;align-items:center;color:var(--cyan);font-weight:500;cursor:pointer;text-underline-offset:.2em}
details.info summary:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
details.info p{margin-top:0;padding-bottom:14px;font-size:14px;color:var(--muted);max-width:70ch}
details.info p+p{margin-top:12px}

/* --- Controlli ------------------------------------------------------------ */
fieldset.qbox{border:0;margin:0;padding:0;min-inline-size:0}
fieldset.qbox legend{display:block;width:100%;max-width:100%;padding:0;margin:0}
.field{display:block;margin-top:24px;max-width:34rem}
.field>.flabel{display:block;font:500 14px/1.5 var(--mono);color:var(--muted);margin-bottom:8px}
input[type=text],input[type=number],input[type=email],input[type=tel],input[type=date],select,textarea{
  display:block;width:100%;min-height:48px;padding:11px 12px;background:var(--paper);
  border:1px solid var(--border);border-radius:var(--radius);color:var(--ink);font:inherit}
textarea{min-height:132px;resize:vertical;line-height:1.6}
select{min-height:48px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
[aria-invalid=true]{border:2px solid var(--ink)}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:12px;margin-top:24px}
.choices.one{grid-template-columns:minmax(0,1fr)}
.choice{display:flex;align-items:flex-start;gap:12px;min-width:0;min-height:48px;padding:12px 14px;
  background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;line-height:1.4}
.choice span{min-width:0;overflow-wrap:anywhere}
.choice input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--cyan)}
.choice:has(input:checked){border:2px solid var(--cyan);padding:11px 13px;background:var(--card)}
.choice:has(input:focus-visible){outline:3px solid var(--cyan);outline-offset:3px}
.jobs{display:grid;gap:12px;margin-top:24px}
.job{min-width:0;padding:12px 14px;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius)}
.job:has(input[type=checkbox]:checked){border:2px solid var(--cyan);padding:11px 13px;background:var(--card)}
.job .pick{display:flex;align-items:flex-start;gap:12px;min-height:44px;cursor:pointer;line-height:1.4}
.job .pick input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--cyan)}
.job .var{display:none;margin-top:12px}
.job:has(input[type=checkbox]:checked) .var{display:block}
.job .var .flabel{display:block;font:500 13px/1.5 var(--mono);color:var(--muted);margin-bottom:6px}
.job:has(input[type=checkbox]:checked) .pick{outline:none}
.job .pick:has(input:focus-visible){outline:3px solid var(--cyan);outline-offset:3px}

/* --- Messaggi ------------------------------------------------------------- */
.msg{margin-top:22px;padding:14px 18px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);max-width:60ch}
.msg .tag{font-weight:500}
.msg.ok{border-color:var(--cyan)}
.msg.ok .tag{color:var(--cyan)}
.msg:focus{outline:none}
.msg:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* --- Azioni --------------------------------------------------------------- */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:0;
  padding:12px 22px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--ink);
  color:var(--on-button);font-weight:500;line-height:1.4;text-decoration:none;text-align:center}
.btn:hover{background:var(--cyan);border-color:var(--cyan);color:var(--on-button)}
.btn.secondary{background:transparent;color:var(--ink);border-color:var(--border)}
.btn.secondary:hover{background:var(--paper);border-color:var(--ink);color:var(--ink)}
.text-action{background:none;border:0;padding:10px 2px;min-height:var(--target);color:var(--cyan);
  font-weight:500;text-decoration:underline;text-underline-offset:.2em;text-align:left;line-height:1.5}

/* --- Riepilogo ------------------------------------------------------------ */
.review-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;margin-top:28px;align-items:start}
.answer{padding:18px 0;border-top:1px solid var(--rule)}
.answer:last-of-type{border-bottom:1px solid var(--rule)}
.answer .alabel{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.answer .avalue{margin-top:6px;font-size:18px;overflow-wrap:anywhere}
.answer .avalue ul{margin:6px 0 0;padding-left:20px;font-size:17px}
.answer .avalue li+li{margin-top:4px}
.answer .avalue .none{color:var(--muted);font-size:16px}
.answer .avalue .sub{display:block;margin-top:4px;font-size:15px;color:var(--muted)}
.exportbox{margin-top:22px}
.exportbox textarea{min-height:220px;font:13px/1.6 var(--mono)}

/* --- Piede ---------------------------------------------------------------- */
footer.page{border-top:1px solid var(--rule);padding-block:24px 40px;font-size:13px;color:var(--muted);line-height:1.7}
footer.page p+p{margin-top:8px}
/* Dati legali su righe separate, senza punti mediani (footer comune, 00-struttura.md) */
footer.page .legal{overflow-wrap:anywhere}
.thanks footer.page{margin-top:48px}

/* --- Pagina di ringraziamento --------------------------------------------- */
.thanks{max-width:40rem;padding-block:64px 48px}
.thanks .lead{margin-top:24px}

/* --- Navigazione fra schermate -------------------------------------------- */
.screen[hidden]{display:none!important}
.qnav{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:36px;padding-top:24px;border-top:1px solid var(--rule)}
body.longform .qnav{display:none}
body.longform .screen{display:block!important;margin-bottom:56px;padding-bottom:8px}
body.longform .statusbar .count{display:none}

/* --- Larghezze ridotte ---------------------------------------------------- */
@media (max-width:900px){
  .intro-grid,.review-grid{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:700px){
  .mast-in{flex-direction:column;align-items:flex-start;gap:10px;padding-block:16px}
  .project{text-align:left}
  .statusbar{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
  .statusbar .count{margin-left:0}
  main{padding-block:32px 48px}
  .lead{font-size:16px}
}
@media (max-width:480px){
  .shell{padding-inline:16px}
  .card{padding:20px}
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{width:100%}
  .qnav{flex-direction:column;align-items:stretch}
  .qnav .btn{width:100%}
  .qnav .text-action{text-align:center}
}
@media (max-width:360px){
  .identity .lockup{display:none}
  .identity .compact{display:flex}
}

/* --- Preferenze utente ---------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .screen:not([hidden]){animation:screenin .2s ease-out}
  @keyframes screenin{from{opacity:.001}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (forced-colors:active){
  :focus-visible{outline-color:Highlight}
  .choice:has(input:checked),.job:has(input[type=checkbox]:checked){border-color:Highlight}
  .choice input,.job input{forced-color-adjust:auto}
}
@media print{
  .statusbar,.qnav,.actions,.text-action,.skip,.exportbox{display:none!important}
  .screen{display:block!important;break-inside:avoid}
  body{background:#fff}
}