/* Hotel Positioning · strumenti della library (/bonus/<slug>/)
   Porting di hpx-tools.css + hpx-worksheet.css + le classi base di hpx-system.css usate dagli strumenti,
   rimappato sui token brutalist (brutalist.css). Si carica DOPO il partial tema.

   Mappa dei nomi dal vecchio sito React:
     hpxt-X  -> t-X         (es. hpxt-card__h--ink -> t-card__h--ink)
     hpxw-X  -> t-w-X       (solo worksheet)
     hpx-btn / --lg / --block / --paper -> t-btn / t-btn--lg / t-btn--block / t-btn--paper
     hpx-input, hpx-textarea, hpx-select, hpx-field, hpx-option -> t-input, t-textarea, t-select, t-field, t-option
     hpx-label -> t-label (come hpxt-label)   hpx-check -> t-checkrow   hpx-hl -> t-hl   hpx-wrap -> t-wrap
   Regole: --pomodoro solo come fondo (testo sempre inchiostro); raggio 0; ombre dure --o-*.
   Stili di un solo strumento che non sono qui: <style> inline nella pagina, non in questo file. */

.t-page{
  --t-l:2px solid var(--inchiostro);
  --t-bd:var(--bd);
  --t-soft:#fff4c2;            /* giallo chiaro (ex --yellow-soft) */
  --t-alt:#f4efe2;             /* carta 2 (ex --paper-2) */
  --t-ink-soft:var(--inchiostro-2);
  --t-gut:clamp(16px,4vw,40px);
  min-height:100vh;display:flex;flex-direction:column;
}
.t-page *,.t-page *::before,.t-page *::after{box-sizing:border-box}
/* reset a specificità minima (:where), così i margini delle classi t-* vincono */
:where(.t-page) :where(p,ul,ol,dl,dd,figure,blockquote,fieldset){margin:0}
:where(.t-page) fieldset{border:0;padding:0;min-width:0}
.t-page a{color:inherit}
.t-page [hidden]{display:none!important}
.t-wrap{width:100%;max-width:calc(1200px + 2*var(--t-gut));margin:0 auto;padding:0 var(--t-gut)}

/* ---------- barra dello strumento ---------- */
.t-bar{background:var(--carta);border-bottom:var(--t-bd)}
.t-bar__in{display:flex;align-items:center;gap:20px;min-height:72px;padding-top:10px;padding-bottom:10px}
.t-bar .logo{text-decoration:none;flex:none}
.t-bar__meta{flex:1;min-width:0;display:flex;align-items:center;gap:14px;justify-content:center}
.t-bar__n{font:700 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;background:var(--inchiostro);color:var(--giallo);padding:6px 10px}
.t-bar__name{font:700 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-back{flex:none;font:700 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;text-decoration:none;
  border:var(--t-l);background:var(--carta);color:var(--inchiostro);padding:8px 12px;box-shadow:var(--o-xs);transition:transform .12s,box-shadow .12s,background .12s}
.t-back:hover,.t-back:focus-visible{background:var(--giallo);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--inchiostro)}
.t-steps{display:grid;grid-template-columns:repeat(8,1fr);border-top:var(--t-l);height:10px}
.t-steps i{background:var(--carta);border-right:var(--t-l)}
.t-steps i:last-child{border-right:0}
.t-steps i.is-past{background:var(--t-soft)}
.t-steps i.is-current{background:var(--giallo)}

/* ---------- colonna ---------- */
.t-stage{flex:1 0 auto;max-width:calc(780px + 2*var(--t-gut));padding-top:clamp(36px,6vw,72px);padding-bottom:clamp(48px,7vw,88px)}
.t-stage--wide{max-width:calc(1080px + 2*var(--t-gut))}
.t-foot{max-width:calc(1080px + 2*var(--t-gut));padding-bottom:28px;font:400 12px/1.6 var(--mono);color:var(--inchiostro-3);text-align:center}
.t-foot p{border-top:var(--t-l);padding-top:18px}
.t-foot a{color:var(--inchiostro);text-underline-offset:3px}

/* ---------- testo ---------- */
/* i titoli in Archivo Black maiuscolo sono larghi: mai sillabati, mai spezzati a metà parola */
.t-page :is(h1,h2,h3,.t-title,.t-h2,.t-h3,.t-w-title){-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal;word-break:normal}
.t-page .t-title{font:400 clamp(32px,5.2vw,58px)/1 var(--display);text-transform:uppercase;letter-spacing:-.015em}
.t-page .t-title--sm{font-size:clamp(28px,4vw,44px)}
.t-lead{margin-top:22px;max-width:62ch;font:400 clamp(17px,1.8vw,19px)/1.6 var(--text);border-left:6px solid var(--giallo);padding-left:16px}
.t-page .t-h2{font:400 clamp(24px,3.4vw,36px)/1.04 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.t-page .t-h3{font:400 clamp(17px,2vw,21px)/1.12 var(--display);text-transform:uppercase;letter-spacing:0}
.t-label{display:block;font:700 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--inchiostro)}
/* un titolo (h2/h3) usato come etichetta resta etichetta anche su telefono (brutalist.css ingrandisce gli h2 con !important) */
.t-page :is(h1,h2,h3,h4).t-label{font:700 12px/1.4 var(--mono)!important;letter-spacing:.1em;text-transform:uppercase}
.t-text{font-size:16px;line-height:1.55}
* + .t-text{margin-top:8px}
.t-strong{font-size:17px;font-weight:700;line-height:1.45;margin-top:10px}
.t-hint{display:block;font-size:15px;line-height:1.5;color:var(--t-ink-soft);margin-top:6px}
.t-small{font-size:13px;line-height:1.5;color:var(--t-ink-soft);margin-top:10px}
.t-intro{margin-top:12px}
.t-credit{font:400 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t-ink-soft)}
.t-arrow{font-weight:700}
.t-hl{background:var(--giallo);color:#0a0a0a;padding:0 .15em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- ritmo ---------- */
.t-block{margin-top:clamp(36px,5.5vw,60px)}
.t-block--rule{border-top:var(--t-bd);padding-top:clamp(32px,4.5vw,48px)}
.t-list{display:grid;gap:18px;margin-top:26px}
.t-list--loose{gap:36px}
.t-stack{display:grid;gap:14px;margin-top:18px}
.t-cta{margin-top:36px}
.t-after{margin-top:24px}
.t-field-gap{display:block;margin-top:14px}
.t-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.t-row--center{align-items:center;gap:14px}
.t-row--center .t-btn-sm,.t-row .t-btn-sm{margin-top:0}
.t-actions{display:grid;gap:14px;margin-top:36px}

/* ---------- bottoni e link ---------- */
.t-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-align:center;text-decoration:none;
  font:700 15px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  border:var(--t-bd);background:var(--giallo);color:#0a0a0a;padding:14px 22px;box-shadow:var(--o-sm);transition:transform .12s,box-shadow .12s,background .12s}
.t-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--inchiostro)}
.t-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--inchiostro)}
.t-btn:disabled,.t-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--o-sm)}
.t-btn--lg{font-size:clamp(15px,1.8vw,17px);padding:18px 28px;box-shadow:var(--o-md)}
.t-btn--lg:hover{box-shadow:9px 9px 0 var(--inchiostro)}
.t-btn--paper{background:var(--carta);color:var(--inchiostro)}
.t-btn--ink{background:var(--inchiostro);color:var(--carta)}
.t-btn--block{width:100%}
.t-btn-sm{font-size:13px;padding:9px 14px;margin-top:12px;box-shadow:var(--o-xs)}
.t-link{display:inline-block;background:none;border:0;border-bottom:2px solid currentColor;padding:2px 0;margin-top:18px;
  font:700 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--inchiostro);cursor:pointer;text-decoration:none}
.t-link:hover,.t-link:focus-visible{background:var(--giallo);color:#0a0a0a}
.t-link--top{margin:0 0 18px}
.t-link--inv{margin-top:0;color:var(--giallo)}
.t-next{display:inline-block;margin-top:22px;font-weight:700;font-size:15px;border-bottom:2px solid var(--inchiostro);text-decoration:none}
.t-next:hover{background:var(--giallo)}
.t-page button:focus-visible,.t-page a:focus-visible,.t-page input:focus-visible,.t-page textarea:focus-visible,.t-page select:focus-visible{outline:3px solid var(--inchiostro);outline-offset:3px}

/* ---------- schede ---------- */
.t-card{border:var(--t-l);background:var(--carta);box-shadow:var(--o-xs)}
.t-card--thick{border:var(--t-bd);box-shadow:var(--o-md)}
.t-card--pad{padding:clamp(18px,3vw,28px)}
.t-card--alt{background:var(--t-alt)}
.t-card--y{background:var(--giallo);color:#0a0a0a}
.t-card--flag{border-left:12px solid var(--giallo)}
.t-card__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(16px,3vw,24px);border-bottom:var(--t-l);background:var(--t-alt)}
.t-card__h--ink{background:var(--inchiostro);color:var(--carta)}
.t-card__h--ink .t-label{color:var(--giallo)}
.t-badge{flex:none;width:32px;height:32px;display:inline-grid;place-items:center;border:var(--t-l);background:var(--carta);font:400 16px/1 var(--display)}
.t-badge--lg{width:44px;height:44px;font-size:22px;background:var(--inchiostro);color:var(--giallo)}
.t-note{margin-top:12px;background:var(--t-alt);border:var(--t-l);border-left:8px solid var(--inchiostro);padding:12px 14px;font-size:15px;line-height:1.5}
/* avviso: barra pomodoro piena + testo inchiostro */
.t-warn{position:relative;margin-top:10px;background:var(--t-soft);border:var(--t-l);padding:10px 12px 10px 46px;font-size:14px;font-weight:600;line-height:1.45;color:#0a0a0a}
.t-warn::before{content:"!";position:absolute;left:0;top:0;bottom:0;width:34px;display:grid;place-items:center;background:var(--pomodoro);border-right:var(--t-l);font:400 18px/1 var(--display);color:#0a0a0a}
.t-warn--solid{background:var(--giallo)}

/* ---------- campi ---------- */
.t-field{display:flex;flex-direction:column;gap:6px}
.t-input,.t-select,.t-textarea{width:100%;font:400 17px/1.45 var(--text);color:var(--inchiostro);background:#fff;
  border:var(--t-l);border-radius:0;padding:13px 14px;appearance:none;-webkit-appearance:none;margin:0}
.t-textarea{min-height:120px;resize:vertical;display:block}
.t-select{background-image:linear-gradient(45deg,transparent 50%,var(--inchiostro) 50%),linear-gradient(135deg,var(--inchiostro) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.t-input:focus,.t-select:focus,.t-textarea:focus{outline:none;box-shadow:4px 4px 0 var(--giallo);border-color:var(--inchiostro)}
.t-page .t-input:focus-visible,.t-page .t-textarea:focus-visible,.t-page .t-select:focus-visible{outline:none;box-shadow:4px 4px 0 var(--inchiostro),0 0 0 2px var(--giallo) inset}
.t-input::placeholder,.t-textarea::placeholder{color:#6f6c64}
.t-checkrow{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:16px;cursor:pointer}
.t-checkrow input{width:20px;height:20px;accent-color:var(--inchiostro);margin:2px 0 0}
.t-option{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;cursor:pointer;width:100%;text-align:left;
  border:var(--t-l);padding:14px;background:var(--carta);color:var(--inchiostro);font:inherit;transition:background .12s,box-shadow .12s}
.t-option:hover{background:var(--t-soft)}
.t-option.is-selected,.t-option[aria-checked="true"],.t-option:has(input:checked){background:var(--giallo);color:#0a0a0a;box-shadow:var(--o-xs)}
.t-ta{margin-top:10px;min-height:0;font-size:16px;line-height:1.5}
.t-field .t-ta{margin-top:2px}
.t-input--y,.t-input--y:focus{background-color:var(--giallo);font-weight:700}
.t-input--bold{font-weight:700}
.t-fields{display:grid;gap:18px;margin-top:26px}
.t-card--y .t-textarea,.t-card--y .t-textarea:focus{background-color:#fff}
.t-options{display:grid;gap:10px;margin-top:14px}

/* ---------- cancello (library chiusa) ---------- */
.t-gate{padding:clamp(8px,3vw,32px) 0}
.t-gate__card{border:var(--t-bd);background:var(--carta);box-shadow:var(--o-2xl);padding:clamp(24px,5vw,48px)}
.t-gate__n{display:block;font:400 clamp(56px,9vw,96px)/.9 var(--display);color:transparent;-webkit-text-stroke:2px var(--inchiostro)}
.t-gate__title{margin-top:18px}
.t-gate__cta{margin-top:30px}

/* =========================================================
   02 · MATRICE
   ========================================================= */
.t-matrix{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;margin-top:8px}
.t-matrix__y{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px 0}
.t-matrix__x{display:flex;justify-content:space-between;gap:8px}
.t-axis{font:700 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.t-axis--v{writing-mode:vertical-rl;transform:rotate(180deg)}
.t-matrix__board{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;background:var(--inchiostro);border:var(--t-bd);box-shadow:var(--o-2xl)}
.t-cell{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:clamp(150px,20vw,190px);min-width:0;
  padding:clamp(12px,2vw,18px);background:var(--carta);color:var(--inchiostro);text-align:left;cursor:pointer;border:0;font:inherit;transition:background .12s}
.t-cell:hover{background:var(--t-soft)}
.t-cell.is-win{background:var(--giallo);color:#0a0a0a}
.t-cell.is-open{box-shadow:inset 0 0 0 4px var(--inchiostro)}
.t-cell__name{font:400 clamp(14px,1.9vw,19px)/1.1 var(--display);text-transform:uppercase;overflow-wrap:normal;hyphens:manual}
.t-cell__toggle{font:700 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.t-cell--caro,.t-cell--meno{text-align:right;align-items:flex-end}
.t-cell--poco,.t-cell--meno{flex-direction:column-reverse}
.t-matrix__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.t-matrix__center .t-cell{pointer-events:auto;width:46%;min-height:0;border:var(--t-bd);box-shadow:var(--o-xs);text-align:center;align-items:center;
  background-color:var(--t-alt);background-image:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(10,10,10,.07) 9px 11px)}
.t-matrix__center .t-cell:hover{background-color:var(--t-soft)}
.t-matrix__center .t-cell.is-win{background-color:var(--giallo)}
.t-detail{margin-top:30px}
.t-detail .t-strong{margin-top:12px}
.t-q.is-done .t-badge{background:var(--giallo)}
.t-q__head{display:flex;align-items:center;gap:12px}
.t-q__text{margin-top:12px;font-size:18px;font-weight:700;line-height:1.4}
.t-opt{grid-template-columns:32px 1fr;align-items:center;width:100%;text-align:left;font:inherit;font-size:16px;line-height:1.4}
.t-opt__key{width:32px;height:32px;display:grid;place-items:center;border:var(--t-l);background:var(--carta);font:400 15px/1 var(--display)}
.t-opt.is-selected .t-opt__key,.t-opt[aria-checked="true"] .t-opt__key{background:var(--inchiostro);color:var(--giallo)}
.t-opt.is-selected,.t-opt[aria-checked="true"]{font-weight:700}
.t-verdict{margin-top:14px;font:400 clamp(24px,3.4vw,34px)/1.2 var(--display);text-transform:uppercase}
.t-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;padding-top:18px;border-top:var(--t-l)}

/* =========================================================
   03 · ATTRIBUTI
   ========================================================= */
.t-rules{list-style:none;padding:0}
.t-rules li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start;padding:16px clamp(16px,3vw,24px);border-bottom:var(--t-l)}
.t-rules li:last-child{border-bottom:0}
.t-rules .t-text{margin-top:3px}
.t-picks{list-style:none;padding:0;display:grid;gap:8px;margin-top:8px}
.t-pick{background:var(--giallo);color:#0a0a0a;border:var(--t-l);box-shadow:var(--o-xs);padding:10px 14px;font-size:16px;line-height:1.45}
.t-pick__tag{margin-left:8px;font:700 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.t-checklist{list-style:none;padding:0;display:grid;gap:8px;margin-top:12px;font-size:16px;line-height:1.5}
.t-pin{position:sticky;top:0;z-index:20;margin-top:22px;background:var(--carta);border:var(--t-bd);box-shadow:var(--o-md);padding:14px}
.t-counter{margin-top:10px;font:700 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.t-cats{display:grid;gap:26px;margin-top:32px}
.t-cat{border:var(--t-l);background:var(--carta);box-shadow:var(--o-xs)}
.t-cat__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer;
  background:var(--inchiostro);color:var(--carta);border:0;padding:12px 16px;font:inherit}
.t-cat__head[aria-expanded="false"]{background:var(--t-alt);color:var(--inchiostro)}
.t-cat__name{font:400 clamp(15px,1.8vw,18px)/1.15 var(--display);text-transform:uppercase}
.t-cat__count{font:700 12px/1.2 var(--mono);letter-spacing:.1em;white-space:nowrap;color:var(--giallo)}
.t-cat__head[aria-expanded="false"] .t-cat__count{color:var(--inchiostro)}
.t-attr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:11px 16px;border-top:1px solid rgba(10,10,10,.18)}
.t-attr:first-child{border-top:0}
.t-attr.is-star{background:var(--t-soft)}
.t-attr__t{font-size:16px;line-height:1.4}
.t-attr.is-mai .t-attr__t{color:#6f6c64;text-decoration:line-through}
.t-attr__ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.t-tag{font:700 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;border:2px solid #8a867c;background:var(--carta);color:var(--inchiostro-2);padding:5px 8px;cursor:pointer}
.t-tag:hover{border-color:var(--inchiostro);color:var(--inchiostro)}
.t-tag.is-on,.t-tag[aria-pressed="true"]{border-color:var(--inchiostro);color:#0a0a0a;box-shadow:2px 2px 0 var(--inchiostro)}
.t-tag--ho.is-on,.t-tag--ho[aria-pressed="true"]{background:var(--giallo)}
.t-tag--potrei.is-on,.t-tag--potrei[aria-pressed="true"]{background:var(--t-soft)}
.t-tag--mai.is-on,.t-tag--mai[aria-pressed="true"]{background:var(--inchiostro);color:var(--carta)}
.t-star{width:34px;height:30px;display:grid;place-items:center;font-size:15px;line-height:1;cursor:pointer;border:var(--t-l);background:var(--carta);color:var(--inchiostro)}
.t-star.is-on,.t-star[aria-pressed="true"]{background:var(--giallo);color:#0a0a0a;box-shadow:2px 2px 0 var(--inchiostro)}
.t-star:disabled{opacity:.3;cursor:not-allowed}

/* =========================================================
   04 · COERENZA
   ========================================================= */
.t-pin--promise{margin:0 0 30px}
.t-pin--promise .t-input{margin-top:6px;padding:10px 12px}
.t-rule-line{margin-top:20px;padding:12px 0;border-top:var(--t-bd);border-bottom:var(--t-bd);font:400 clamp(16px,2vw,20px)/1.2 var(--display);text-transform:uppercase}
.t-chain{list-style:none;padding:0;margin-top:28px;border:var(--t-bd);box-shadow:var(--o-md);background:var(--carta)}
.t-chain__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:var(--t-l);border-left:10px solid var(--t-alt)}
.t-chain__row:last-child{border-bottom:0}
.t-chain__row.is-ok{background:var(--giallo);color:#0a0a0a;border-left-color:var(--inchiostro)}
.t-chain__row.is-bad{background:#fff;border-left-color:var(--pomodoro)}
.t-chain__row.is-bad .t-chain__st{background:var(--pomodoro);color:#0a0a0a;padding:2px 6px}
.t-chain__name{font-size:15px;font-weight:700;line-height:1.3}
.t-chain__st{flex:none;font:700 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.t-verdict-line{margin-top:28px;font-size:18px;font-weight:700;line-height:1.5}
.t-meter{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px}
.t-meter__sq{width:26px;height:14px;border:var(--t-l);background:var(--carta)}
.t-meter__sq.is-ok{background:var(--giallo)}
.t-meter__sq.is-bad{background:var(--pomodoro)}
.t-meter__n{margin-left:6px;font:700 12px/1 var(--mono)}
.t-ring.is-bad{border-color:var(--inchiostro);box-shadow:var(--o-calda)}
.t-ring__head{display:flex;align-items:center;gap:14px;padding:14px clamp(16px,3vw,22px);border-bottom:var(--t-l);background:var(--t-alt)}
.t-ring.is-ok .t-ring__head{background:var(--giallo);color:#0a0a0a}
.t-ring.is-bad .t-ring__head{background:var(--pomodoro);color:#0a0a0a}
.t-ring__head .t-h3{margin-top:2px}
.t-ring__body{padding:clamp(16px,3vw,22px)}
.t-check{width:100%;text-align:left;font:inherit;font-size:15px;line-height:1.4;padding:12px}
.t-check__box{font:700 14px/1 var(--mono)}
.t-verdicts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.t-vbtn{font:700 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:12px 10px;border:var(--t-l);background:var(--carta);color:var(--inchiostro-2);cursor:pointer;transition:background .12s,box-shadow .12s}
.t-vbtn:hover{color:var(--inchiostro);background:var(--t-soft)}
.t-vbtn--ok.is-on,.t-vbtn--ok[aria-pressed="true"]{background:var(--giallo);color:#0a0a0a;box-shadow:var(--o-xs)}
.t-vbtn--bad.is-on,.t-vbtn--bad[aria-pressed="true"]{background:var(--pomodoro);color:#0a0a0a;border-color:var(--inchiostro);box-shadow:var(--o-xs)}

/* =========================================================
   05 · SCALA
   ========================================================= */
.t-ladder{display:grid}
.t-rung{border:var(--t-l);background:var(--carta);padding:16px 18px}
.t-rung + .t-rung{margin-top:-2px}
.t-rung--top{background:var(--giallo);color:#0a0a0a;border:var(--t-bd);position:relative;z-index:1}
.t-rung--base{background:var(--t-alt)}
.t-ladder:not(.t-ladder--form) .t-rung--top{margin-left:16%;box-shadow:var(--o-md)}
.t-ladder:not(.t-ladder--form) .t-rung--mid{margin-left:8%}
.t-ladder--form{padding:clamp(14px,3vw,22px);gap:0}
.t-rung__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.t-rung__label{font:400 clamp(15px,1.8vw,18px)/1.1 var(--display);text-transform:uppercase}
.t-rung__note{font:700 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t-ink-soft)}
.t-rung--top .t-rung__note,.t-rung--top .t-hint,.t-rung--top .t-small{color:#0a0a0a}
.t-rung--top .t-textarea,.t-rung--top .t-textarea:focus{background-color:#fff}
.t-jump{border-top:var(--t-l);background:var(--t-alt);padding:14px clamp(14px,3vw,22px)}
.t-sugg{margin-top:24px}
.t-table{margin-top:22px;border:var(--t-bd);box-shadow:var(--o-md);background:var(--carta)}
.t-table__row{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1.4fr);align-items:stretch;border-bottom:var(--t-l)}
.t-table__row:last-child{border-bottom:0}
.t-table__from{padding:12px 14px;font-size:15px;color:var(--t-ink-soft)}
.t-table__arrow{display:grid;place-items:center;background:var(--inchiostro);color:var(--giallo);font-weight:700}
.t-table__to{padding:12px 14px;font-size:15px;font-weight:700;background:var(--t-soft)}

/* =========================================================
   06 · LIVELLI
   ========================================================= */
.t-levels{display:grid;gap:12px;margin-top:24px}
.t-zone .t-levels{margin-top:0}
.t-level{border:var(--t-l);background:var(--carta);padding:16px 18px;box-shadow:var(--o-xs)}
.t-level.is-off{background:var(--t-alt);box-shadow:none;color:var(--t-ink-soft)}
.t-level.is-active{outline:4px solid var(--inchiostro);outline-offset:3px}
.t-level__head{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center}
.t-level__n{width:40px;height:40px;display:grid;place-items:center;background:var(--inchiostro);color:var(--giallo);font:400 20px/1 var(--display)}
.t-level.is-off .t-level__n{background:var(--carta);color:var(--inchiostro-2);border:var(--t-l)}
.t-level__t{font:400 clamp(16px,1.9vw,19px)/1.1 var(--display);text-transform:uppercase}
.t-level__tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.t-pill{font:700 10px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;border:var(--t-l);padding:3px 7px;background:var(--t-alt);color:var(--inchiostro)}
.t-pill--ink{background:var(--inchiostro);color:var(--giallo)}
.t-level__body{margin:12px 0 0;font-size:15px;line-height:1.5}
.t-level__body > div + div{margin-top:4px}
.t-level__body dt{display:inline;font-weight:700}
.t-level__body dd{display:inline;margin:0}
.t-level__budget{font-size:13px;color:var(--t-ink-soft);padding-top:4px}
.t-level__budget dt{text-transform:uppercase;letter-spacing:.04em}
.t-zone{border:var(--t-bd);background:var(--giallo);color:#0a0a0a;padding:12px;box-shadow:var(--o-md)}
.t-zone__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-bottom:12px}
.t-zone__t{font:700 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.t-zone__s{font:400 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.t-zone .t-level{box-shadow:none}
.t-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.t-picker__btn{padding:12px 0;border:var(--t-l);background:var(--carta);color:var(--inchiostro);cursor:pointer;font:400 20px/1 var(--display);box-shadow:var(--o-xs);transition:transform .12s,box-shadow .12s,background .12s}
.t-picker__btn:hover{background:var(--t-soft)}
.t-picker__btn.is-on,.t-picker__btn[aria-pressed="true"],.t-picker__btn[aria-checked="true"]{background:var(--inchiostro);color:var(--giallo);transform:translate(3px,3px);box-shadow:none}
.t-picked{margin-top:12px;border:var(--t-l);background:var(--t-alt);padding:14px}
.t-picked.is-zone{background:var(--giallo);color:#0a0a0a}

/* =========================================================
   07 · CANVAS
   ========================================================= */
.t-canvas{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:28px;background:var(--inchiostro);border:var(--t-bd);box-shadow:var(--o-2xl)}
.t-box{background:var(--carta);display:flex;flex-direction:column;min-width:0}
.t-box__head{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--inchiostro);color:var(--carta)}
.t-box__n{flex:none;width:30px;height:30px;display:grid;place-items:center;background:var(--giallo);color:#0a0a0a;font:400 16px/1 var(--display)}
.t-box__t{font:400 clamp(14px,1.6vw,16px)/1.15 var(--display);text-transform:uppercase}
.t-box__body{padding:16px;flex:1;display:flex;flex-direction:column}
.t-box__body .t-hint{margin-top:0;font-size:14px}
.t-box__body .t-hint.t-field-gap{margin-top:14px}
.t-box--cat{margin-top:14px;background:var(--inchiostro);color:var(--carta);border:var(--t-bd);box-shadow:10px 10px 0 var(--giallo)}
.t-box--cat .t-box__head{border-bottom:2px solid rgba(255,253,246,.25)}
.t-box--cat .t-box__t{font-size:clamp(16px,2vw,19px)}
.t-box--cat .t-hint{color:#d8d4ca}
.t-box--cat .t-textarea{background:transparent;color:var(--carta);border-color:var(--carta);font-weight:700}
.t-box--cat .t-textarea:focus{background-color:rgba(255,253,246,.06);box-shadow:4px 4px 0 var(--giallo)}
.t-box--cat .t-textarea::placeholder{color:#b9b4a9}
.t-box--cat .t-textarea:disabled{opacity:.6;cursor:not-allowed}
.t-box--cat .t-warn{border-color:var(--giallo)}
.t-cat-out{margin-top:12px;background:var(--giallo);color:#0a0a0a;padding:12px 14px;font:400 clamp(16px,2vw,20px)/1.25 var(--display);text-transform:uppercase}
.t-example{margin-top:16px}
.t-example__grid{display:grid;gap:12px;margin-top:12px;font-size:15px;line-height:1.5}
.t-example__grid strong{font:700 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.t-example__cat{background:var(--inchiostro);color:var(--carta);padding:12px 14px}
.t-example__cat strong{color:var(--giallo)}
.t-sugg + .t-row{margin-top:20px}

/* scheda stampabile (nascosta a schermo, compare solo in stampa: vedi @media print; l'interfaccia intorno va in .t-noprint) */
.t-print{display:none;color:#111;background:#fff;font-family:var(--text)}
.t-print__title{font:400 24px/1.05 var(--display);text-transform:uppercase}
.t-print__credit{margin-top:4px;font:400 9px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.t-print__grid{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.t-print__box{border:1.5px solid #111;padding:10px;break-inside:avoid}
.t-print__h{font:400 11px/1.2 var(--display);text-transform:uppercase;letter-spacing:.06em}
.t-print__v{margin-top:6px;font-size:11px;line-height:1.45;white-space:pre-wrap}
.t-print__cat{margin-top:8px;border:3px solid #111;padding:14px;break-inside:avoid}
.t-print__catv{margin-top:6px;font:400 16px/1.3 var(--display);text-transform:uppercase}
.t-print__foot{margin-top:10px;font:400 9px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* =========================================================
   01 · WORKSHEET (ex hpxw-)
   ========================================================= */
.t-w-progress{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.t-w-progress__bar{display:flex;gap:6px;flex-wrap:wrap}
.t-w-progress__bar i{width:30px;height:14px;border:var(--t-l);background:var(--carta)}
.t-w-progress__bar i.is-done{background:var(--inchiostro)}
.t-w-progress__bar i.is-current{background:var(--giallo);box-shadow:2px 2px 0 var(--inchiostro)}
.t-w-progress .t-label{display:inline}
.t-w-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.t-w-num{width:64px;height:64px;display:grid;place-items:center;font:400 36px/1 var(--display);background:var(--giallo);color:#0a0a0a;border:var(--t-bd);box-shadow:var(--o-xs)}
.t-page .t-w-title{font:400 clamp(22px,3.2vw,34px)/1.05 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:4px 0 0}
.t-w-prompt{display:block;margin-top:28px;font:600 clamp(18px,1.9vw,21px)/1.45 var(--text);text-transform:none;letter-spacing:0}
.t-w-ta{margin-top:14px;font-size:17px;line-height:1.5;min-height:0}
.t-field .t-w-ta{margin-top:2px}
.t-w-gap{margin-top:18px}
.t-w-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:36px;padding-top:24px;border-top:var(--t-l)}
.t-w-back{background:none;border:0;padding:8px 0;cursor:pointer;color:var(--inchiostro-2);font:700 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.t-w-back:hover{color:var(--inchiostro);text-decoration:underline;text-underline-offset:3px}
.t-w-back--center{justify-self:center}
.t-w-test{margin-top:28px}
.t-w-test__b{padding:clamp(18px,3vw,26px)}
.t-w-line{margin-top:28px;border:var(--t-bd);background:var(--giallo);color:#0a0a0a;box-shadow:var(--o-2xl);padding:clamp(20px,3.5vw,32px);display:grid;gap:14px}
.t-w-line__q{font:400 clamp(18px,2.2vw,24px)/1.2 var(--display);text-transform:uppercase}
.t-w-line .t-input{background:#fff}
.t-w-sum{margin-top:12px;border-top:var(--t-l)}
.t-w-sum__row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid rgba(10,10,10,.15)}
.t-w-sum dt{font:700 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.t-w-sum dd{margin:0;font-size:16px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.t-w-sum dd.is-empty{color:#6f6c64}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .t-bar__name{display:none}
  .t-bar__meta{justify-content:flex-end}
}
@media (max-width:760px){
  .t-canvas{grid-template-columns:1fr}
  .t-pair{grid-template-columns:1fr;gap:14px}
  .t-attr{grid-template-columns:1fr}
}
@media (max-width:640px){
  .t-w-num{width:52px;height:52px;font-size:28px}
  .t-w-nav{flex-direction:column-reverse;align-items:stretch}
  .t-w-nav .t-btn{width:100%}
  .t-w-sum__row{grid-template-columns:1fr;gap:4px}
}
@media (max-width:600px){
  /* più specifico della regola h1 !important di brutalist.css: una parola di 14 lettere sta in 288px */
  .t-page h1.t-title,.t-page h2.t-title{font-size:clamp(22px,7.4vw,34px)!important;line-height:1.02}
  .t-page h1.t-title--sm,.t-page h2.t-title--sm{font-size:clamp(21px,7vw,30px)!important}
  .t-page h1.t-w-title{font-size:clamp(19px,6vw,26px)!important}
  .t-page .t-h2{font-size:clamp(20px,6.6vw,28px)}
  .t-gate__n{font-size:clamp(48px,16vw,72px)}
}
@media (max-width:560px){
  .t-bar__in{gap:10px;min-height:64px}
  .t-bar .logo{font-size:0;gap:0}
  .t-bar__word{display:none}
  .t-bar__n{padding:5px 8px;font-size:11px}
  .t-back{padding:7px 9px;font-size:11px;box-shadow:2px 2px 0 var(--inchiostro)}
  .t-w-head{gap:12px}
  .t-btn--lg{padding:16px 18px}
  .t-matrix{grid-template-columns:18px minmax(0,1fr);gap:6px}
  .t-axis{font-size:10px;letter-spacing:.08em}
  .t-matrix__center .t-cell{width:50%;padding:10px 8px}
  .t-matrix__board{box-shadow:var(--o-md)}
  .t-ladder:not(.t-ladder--form) .t-rung--top{margin-left:8%}
  .t-ladder:not(.t-ladder--form) .t-rung--mid{margin-left:4%}
  .t-table__row{grid-template-columns:1fr}
  .t-table__arrow{justify-content:start;padding:2px 14px}
  .t-level__head{grid-template-columns:36px minmax(0,1fr)}
  .t-level__n{width:36px;height:36px;font-size:18px}
  .t-level__tags{grid-column:1/-1;justify-content:flex-start}
  .t-level__tags:empty{display:none}
  .t-verdicts{grid-template-columns:1fr}
  .t-box--cat{box-shadow:6px 6px 0 var(--giallo)}
  .t-canvas{box-shadow:var(--o-md)}
  .t-gate__card{box-shadow:var(--o-md)}
  .t-w-line{box-shadow:var(--o-md)}
}
@media (prefers-reduced-motion:reduce){
  .t-page *{transition:none!important}
  .t-btn:hover,.t-back:hover{transform:none}
}

/* ---------- stampa: solo il contenuto e le risposte ---------- */
@media print{
  @page{size:A4 portrait;margin:14mm}
  body{background:#fff!important;color:#111}
  .t-page{min-height:0;display:block}
  .t-bar,.t-foot,.t-steps,.t-w-progress,.t-w-nav,.t-actions,.t-btn,.t-btn-sm,.t-link,.t-back,.t-w-back,.t-noprint,.cc,.skip,button{display:none!important}
  .t-stage{max-width:none;padding:0!important;margin:0}
  .t-page *{box-shadow:none!important;transition:none!important}
  .t-card,.t-gate__card,.t-w-line,.t-canvas,.t-table,.t-chain,.t-zone{break-inside:avoid}
  .t-input,.t-textarea,.t-select{background:#fff!important;border:1.5px solid #111;color:#111;resize:none;overflow:visible}
  .t-w-line,.t-card--y,.t-zone{background:#fff!important;border:3px solid #111}
  /* strumenti con una scheda stampabile (canvas): la scheda .t-print compare, l'interfaccia va in .t-noprint */
  .t-print{display:block!important}
  a[href]{text-decoration:none}
}