/* VitaSan Labs - pagina prodotto alimentare e ambientale (prototipo): formato, codice che si compone, tabella dei formati, tessera dell'elemento */
.ag-forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ag-forms .lvl{margin-top:0}
.ag-forms .lvl>span{height:100%}
.ag-panel[hidden]{display:none}
.ag-sub{font-size:13.5px;color:var(--muted);margin:10px 0 0}
.ag-custom{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,.9fr);gap:10px;margin-top:14px}
.ag-custom[hidden]{display:none}
.ag-custom label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--fg2)}
.ag-custom .u{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.ag-custom .u:focus-within{border-color:var(--navy)}
.ag-custom .u input{border:0;padding:10px 12px;min-width:0;flex:1;background:transparent;color:var(--fg)}
.ag-custom .u input:focus{outline:none}
.ag-custom .u span{padding:0 12px;font-size:14px;color:var(--muted);white-space:nowrap}
.ag-custom select{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;color:var(--fg);width:100%}

/* il codice del formato scelto, scomposto nelle sue parti */
.ag-code{margin-top:26px;border:1.5px dashed var(--line2);border-radius:18px;padding:18px 20px;background:var(--bg2)}
.ag-code .lab{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent2)}
.ag-code .big{display:flex;flex-wrap:wrap;align-items:baseline;gap:0;margin-top:8px;font-family:var(--mono);font-weight:700;font-size:clamp(26px,2.6vw,36px);color:var(--navy);letter-spacing:.02em;cursor:copy}
.ag-code .big span{border-bottom:3px solid transparent;padding-bottom:2px}
.ag-code .big .s1{border-color:var(--slate)}
.ag-code .big .s2{border-color:var(--navy2)}
.ag-code .big .s3{border-color:var(--accent)}
.ag-code .big .d{color:var(--muted);font-weight:400;border:0}
.ag-key{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.ag-key li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline;font-size:14.5px;color:var(--fg2)}
.ag-key li b{font-family:var(--mono);font-size:13.5px;color:var(--navy);padding:1px 8px;border-radius:6px;background:#fff;border:1px solid var(--line);min-width:3.2em;text-align:center}
.ag-key li.k1 b{box-shadow:inset 0 -3px 0 var(--slate)}
.ag-key li.k2 b{box-shadow:inset 0 -3px 0 var(--navy2)}
.ag-key li.k3 b{box-shadow:inset 0 -3px 0 var(--accent)}

/* tabella di tutti i formati */
.ag-tab{margin-top:24px;overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:#fff}
.ag-tab table{width:100%;border-collapse:collapse;min-width:560px}
.ag-tab th,.ag-tab td{padding:13px 20px;border-bottom:1px solid var(--line);text-align:left;font-size:15px;vertical-align:middle}
.ag-tab thead th{background:var(--bg2);color:var(--navy);font-size:14px;letter-spacing:.02em}
.ag-tab tbody tr:last-child td{border-bottom:0}
.ag-tab tbody tr:hover td{background:#FAFCFD}
.ag-tab td.c{font-family:var(--mono);font-weight:700;color:var(--navy);white-space:nowrap}
.ag-tab td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.ag-tab td.b{text-align:right;width:1%}
.ag-tab tr.grp td{background:var(--bg3);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy2);padding-block:8px}
.ag-tab tr.sel td{background:#FFF7F5}
.ag-tab .btn.s{white-space:nowrap}
.ag-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* tessera dell'elemento al posto della struttura */
.el-tile{aspect-ratio:9/7;display:flex;align-items:center;justify-content:center}
.el-tile .t{width:min(78%,360px);aspect-ratio:1;border:2px solid var(--navy);border-radius:22px;display:grid;grid-template-rows:auto 1fr auto auto;padding:7% 9%;background:linear-gradient(160deg,#fff 0%,var(--bg2) 100%);position:relative}
.el-tile .z{font-family:var(--mono);font-size:clamp(18px,1.8vw,26px);color:var(--navy2);font-weight:700}
.el-tile .sym{font-family:var(--disp);font-weight:700;font-size:clamp(96px,10vw,150px);line-height:1;color:var(--navy);align-self:center;letter-spacing:-.02em}
.el-tile .nm{font-size:clamp(17px,1.5vw,22px);color:var(--fg);font-weight:700}
.el-tile .w{font-family:var(--mono);font-size:clamp(15px,1.3vw,19px);color:var(--muted);margin-top:2px}
.el-tile .cfg{position:absolute;top:7%;right:9%;text-align:right;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--muted)}

/* altri elementi della stessa tecnica */
.el-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:24px}
.el-grid a{display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--line);border-radius:12px;background:#fff;text-decoration:none;color:var(--navy);font-weight:700;font-size:19px;transition:border-color .2s,transform .2s}
.el-grid a:hover{border-color:var(--navy2);transform:translateY(-1px)}
.el-grid a.cur{background:var(--navy);border-color:var(--navy);color:#fff}
.el-grid a span{display:grid;justify-items:center;line-height:1.05;gap:3px}
.el-grid a small{display:block;font-size:11px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.el-grid a.cur small{color:#B8C6D2}

@media (min-width:1101px){.fgrid.ag3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* nota del prototipo */
.proto-note{background:#FFF7F5;border-bottom:1px solid #F1D5CF;font-size:14px;color:var(--fg2)}
.proto-note .wrap{padding-block:9px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.proto-note b{color:var(--accent2);letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.proto-note a{font-weight:700;color:var(--navy)}

@media (max-width:760px){
  .ag-forms{grid-template-columns:minmax(0,1fr)}
  .ag-custom{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ag-custom label.sv{grid-column:1/-1}
}