/* Auto Layout Lint (Strumento 04): stessa impalcatura degli altri strumenti (.app, .viewport, .panel da tools.css), qui solo le parti sue */
.alv{ background:var(--wash); }
/* lo scorrimento sta in .scroll, così zoom e nome restano fermi sopra; safe center: ingrandito si scorre anche a sinistra */
.alv .scroll{ position:absolute; inset:0; overflow:auto; display:grid; place-items:center; place-items:safe center; touch-action:pan-x pan-y; overscroll-behavior:contain; }
.alv.panning .scroll{ cursor:grabbing; user-select:none; }
.alv .stage{ position:relative; margin:var(--s-8); cursor:pointer; }
.zoom{ position:absolute; right:12px; bottom:12px; display:flex; background:var(--paper); box-shadow:0 0 0 1px var(--line); }
.zoom button{ appearance:none; min-width:40px; height:40px; padding:0 var(--s-2); font:500 12px/1 var(--f-mono); letter-spacing:.04em; color:var(--ink); background:transparent; border:0; border-radius:var(--r-ui); cursor:pointer; }
.zoom button:hover{ background:var(--wash); }
.zoom button:focus-visible{ outline-offset:-2px; }
.zoom #zin, .zoom #zout{ font-size:18px; }
.zoom #zfit{ min-width:64px; }
.alv .stage > div, .alv .stage svg{ display:block; }
#stage-svg svg{ overflow:visible; }
#over{ position:absolute; inset:0; overflow:visible; pointer-events:none; }
#marks{ position:absolute; inset:0; pointer-events:none; }
.alv .tip{ position:absolute; left:12px; bottom:12px; margin:0; font:500 var(--fs-label)/1.5 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--paper); padding:var(--s-1) var(--s-2); pointer-events:none; max-width:calc(100% - 200px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* segni sull'anteprima: velo, contorno di quello che guardi, padding e gap come in Figma */
.veil{ fill:rgba(15,16,21,.42); }
.hl{ fill:none; stroke-width:2; }
.hl-sel{ stroke:var(--brand); }
.hl-error{ stroke:var(--coral); }
.hl-warning{ stroke:var(--yellow); }
.hl-info{ stroke:var(--brand); }
.pad{ fill:rgba(43,43,234,.16); }
.gap{ fill:rgba(219,55,141,.2); }
.inner{ fill:none; stroke:var(--coral); stroke-width:1; stroke-dasharray:4 3; }
.cut{ fill:rgba(255,107,87,.35); stroke:var(--coral); stroke-width:1.5; }
.lb{ position:absolute; transform:translate(-50%,-50%); padding:2px 5px; font:600 11px/1.2 var(--f-mono); white-space:nowrap; color:#fff; background:#0F1015; }
.lb-pad{ background:var(--brand); }
.lb-gap{ background:#C2246F; }
.lb-error{ transform:translate(-50%,0); background:var(--coral); color:#0F1015; }
/* numeri dei problemi: quadrati, ombra dura del colore della gravità */
.mk{ position:absolute; display:grid; place-items:center; width:24px; height:24px; margin:-12px 0 0 -12px; padding:0; font:600 12px/1 var(--f-mono); color:#fff; background:#0F1015; border:0; border-radius:var(--r-ui); box-shadow:0 0 0 2px #fff, 3px 3px 0 2px var(--brand); cursor:pointer; pointer-events:auto; }
.mk-error{ box-shadow:0 0 0 2px #fff, 3px 3px 0 2px var(--coral); }
.mk-warning{ box-shadow:0 0 0 2px #fff, 3px 3px 0 2px var(--yellow); }
.mk:focus-visible{ outline:2px solid var(--link); outline-offset:4px; }
/* tocco: il quadrato resta 24 ma l'area cliccabile arriva a 44 */
.mk::after{ content:""; position:absolute; inset:-10px; }

/* pannello */
.paste{ display:grid; gap:var(--s-1); padding:var(--s-4); border:1.5px dashed var(--muted); }
.paste b{ font-weight:600; font-size:var(--fs-ui); }
.paste span{ font-size:var(--fs-note); color:var(--muted); }
#frame-info{ display:grid; gap:2px; }
#frame-info b{ font-weight:600; font-size:var(--fs-ui); overflow-wrap:anywhere; }
#frame-info span{ font-size:var(--fs-note); color:var(--muted); }
body[data-sample="true"] #reset{ display:none; }
.checks{ display:grid; }
.checks .check{ min-height:32px; }

#sum{ display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-4); }
#sum:empty{ display:none; }
.sv{ display:inline-flex; align-items:center; gap:var(--s-2); font-size:var(--fs-note); color:var(--ink); }
.sv i, .dot{ display:inline-block; flex:none; width:10px; height:10px; }
.sv-error i, .d-error{ background:var(--coral); }
.sv-warning i, .d-warning{ background:var(--yellow); }
.sv-info i, .d-info{ background:var(--muted); }

#issues{ list-style:none; margin:0; padding:0; display:grid; border:1px solid var(--line); }
#issues > li + li{ border-top:1px solid var(--line); }
.is{ box-shadow:inset 4px 0 0 var(--muted); }
.is-error{ box-shadow:inset 4px 0 0 var(--coral); }
.is-warning{ box-shadow:inset 4px 0 0 var(--yellow); }
.ih{ appearance:none; display:flex; align-items:flex-start; gap:var(--s-3); width:100%; min-height:var(--tap); padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4); font:inherit; color:var(--ink); background:transparent; border:0; border-radius:var(--r-ui); text-align:left; cursor:pointer; }
.ih:hover{ background:var(--wash); }
.ih:focus-visible{ outline-offset:-2px; }
.ih .n{ display:grid; place-items:center; flex:none; width:24px; height:24px; font:600 var(--fs-label)/1 var(--f-mono); color:var(--paper); background:var(--ink); }
.it{ display:grid; gap:2px; min-width:0; }
.it strong{ font-weight:600; font-size:var(--fs-ui); line-height:1.3; }
.it .im{ font-size:var(--fs-note); color:var(--muted); overflow-wrap:anywhere; }
.tg{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.is.on > .ih{ background:var(--wash); }
/* il livello scelto ha questo problema */
.is.hit .ih .n{ background:var(--brand); color:#fff; }
.occ button[aria-current]{ background:var(--ink); color:var(--paper); }
.ib{ display:grid; gap:10px; padding:0 16px 16px 52px; background:var(--wash); }
.ib p{ margin:0; font-size:var(--fs-note); line-height:1.45; color:var(--muted); }
.ib .fix{ color:var(--ink); }
.ib .fix b{ display:block; margin-bottom:2px; font-family:var(--f-mono); font-size:var(--fs-label); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.occ{ list-style:none; margin:0; padding:0; display:grid; border:1px solid var(--line); background:var(--paper); }
.occ li + li{ border-top:1px solid var(--line); }
.occ button{ appearance:none; display:block; width:100%; min-height:var(--tap); padding:var(--s-2) var(--s-3); font:inherit; font-size:var(--fs-note); color:var(--ink); background:transparent; border:0; border-radius:var(--r-ui); text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.occ button:hover{ background:var(--wash); }
.ok{ display:grid; gap:var(--s-1); padding:var(--s-4); box-shadow:inset 4px 0 0 var(--green); }
.ok b{ font-weight:600; }
.ok span{ font-size:var(--fs-note); color:var(--muted); }

/* livelli, come il pannello Layers: icona, nome, sizing a destra */
#tree{ list-style:none; margin:0; padding:0; max-height:420px; overflow:auto; border:1px solid var(--line); }
#tree button{ appearance:none; display:flex; align-items:center; gap:var(--s-2); width:100%; min-height:32px; padding:var(--s-1) var(--s-3); font:inherit; font-size:var(--fs-note); color:var(--ink); background:transparent; border:0; border-radius:var(--r-ui); text-align:left; cursor:pointer; }
#tree button:hover{ background:var(--wash); }
#tree button[aria-current]{ background:var(--ink); color:var(--paper); }
#tree button[aria-current] .sz, #tree button[aria-current] .ic{ color:inherit; }
#tree button:focus-visible{ outline-offset:-2px; }
#tree .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#tree .nm.dflt{ font-style:italic; color:var(--muted); }
#tree button[aria-current] .nm.dflt{ color:inherit; }
#tree .sz{ flex:none; font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.04em; color:var(--muted); }
/* sotto il livello scelto: i suoi problemi, rimandano alla lista */
#tree .th{ display:grid; padding:4px 12px 8px 44px; background:var(--wash); }
#tree .th button{ min-height:32px; font-size:var(--fs-note); }
#tree .th .n{ display:grid; place-items:center; flex:none; width:20px; height:20px; font:600 var(--fs-label)/1 var(--f-mono); color:#fff; background:var(--brand); }
/* livelli con il nome di default */
.names{ margin:0; display:grid; gap:2px; padding:var(--s-3) var(--s-4); font-size:var(--fs-note); line-height:1.45; color:var(--muted); box-shadow:inset 4px 0 0 var(--muted); background:var(--wash); }
.names b{ font-weight:600; color:var(--ink); }
.names.clean{ box-shadow:inset 4px 0 0 var(--green); }
.ic{ flex:none; width:16px; font:500 var(--fs-label)/1 var(--f-mono); font-style:normal; text-align:center; color:var(--muted); }
.ic-al{ color:var(--ink); }


/* resoconto: il testo si vede prima di copiarlo */
.rep{ width:min(640px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:var(--s-5); color:var(--ink); background:var(--paper); border:1px solid var(--ink); border-radius:var(--r-ui); box-shadow:var(--shadow-hard); }
.rep::backdrop{ background:rgba(15,16,21,.5); }
.rep[open]{ display:grid; gap:var(--s-4); }
.rep h2{ margin:0; font:800 var(--fs-card)/1.1 var(--f-display); }
.rep p{ margin:0; font-size:var(--fs-ui); line-height:1.45; color:var(--muted); }
.rep textarea{ width:100%; box-sizing:border-box; min-height:240px; padding:var(--s-3); font:400 var(--fs-label)/1.5 var(--f-mono); color:var(--ink); background:var(--wash); border:1px solid var(--line); border-radius:var(--r-ui); resize:vertical; }
.rep .btns{ display:flex; justify-content:flex-end; gap:var(--s-2); flex-wrap:wrap; }
@media (max-width:860px){
  .alv{ height:min(64vh,600px); }
  .alv .stage{ margin:var(--s-7) var(--s-5); }
  .mk{ width:20px; height:20px; margin:-10px 0 0 -10px; font-size:11px; }
  .zoom button{ min-width:var(--tap); height:44px; }
  .alv .tip{ top:12px; bottom:auto; max-width:calc(100% - 24px); }
}