/* === FONT AUTO-OSPITATI (CSP 'self', nessun CDN) ====================== */ /* Titillium Web = font ufficiale della Pubblica Amministrazione italiana */ @font-face{font-family:"Titillium Web";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/titillium-400.woff2") format("woff2")} @font-face{font-family:"Titillium Web";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/titillium-600.woff2") format("woff2")} @font-face{font-family:"Titillium Web";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/titillium-700.woff2") format("woff2")} @font-face{font-family:"Titillium Web";font-style:normal;font-weight:900;font-display:swap;src:url("fonts/titillium-900.woff2") format("woff2")} @font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/robotomono-400.woff2") format("woff2")} @font-face{font-family:"Roboto Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/robotomono-500.woff2") format("woff2")} /* === DESIGN SYSTEM ISTITUZIONALE - COMUNE DI PROCIDA ================== */ :root{ --blu: #0A3D62; /* header / testo forte */ --blu-2: #0B5394; /* interattivo / accenti */ --blu-soft: #E7EEF4; /* riempimenti tenui */ --bg: #EEF1F4; --surf: #FFFFFF; --ink: #17324D; --ink-soft: #5B6F82; --ink-faint:#8A9AAA; --bd: #D4DCE3; --bd-2: #C2CDD6; --line: #E1E7EC; /* tricolore */ --tri-v:#008456; --tri-b:#FFFFFF; --tri-r:#CD2B2B; /* categorie (sobrie, istituzionali) */ --stop: #B3261E; /* chiusura / blocco ora */ --divieto: #9A1F18; --senso: #0B5394; --ztl: #6A4C93; --scuola: #9A6700; --avviso: #0E7C7B; --warn: #9A6700; --ok: #1E7A46; --shad: 0 1px 3px rgba(16,40,64,.10), 0 6px 20px rgba(16,40,64,.08); --accent-tx: var(--blu); /* testo/accento blu su superfici chiare (light) */ --r: 8px; --rs: 7px; --safe-b: env(safe-area-inset-bottom,0px); } /* === MODO SCURO ======================================================= */ /* Attivato da data-theme="dark" su (script inline in index.html + toggle nel pannello Impostazioni). Header/tricolore restano blu istituzionali; la mappa OSM resta chiara di proposito. Solo il "chrome" (card, fogli, testo) va scuro. */ :root[data-theme="dark"]{ --bg: #0F1720; --surf: #17222E; --ink: #E8EEF4; --ink-soft: #A7B6C4; --ink-faint:#7A8D9C; --bd: #2A3A49; --bd-2: #35485A; --line: #23303C; --blu-soft: #1E2D3A; /* riempimenti tenui su fondo scuro */ --shad: 0 1px 3px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); --accent-tx:#7FB3DE; /* testo/accento blu: azzurro leggibile su fondo scuro */ } /* Superfici a "tinta chiara" fissa (pannelli percorso): in dark il fondo va scurito, altrimenti i sottotesti (var(--ink-soft), che schiarisce) restano illeggibili. */ :root[data-theme="dark"] .result.blocked{background:rgba(179,38,30,.14);border-color:rgba(179,38,30,.42)} :root[data-theme="dark"] .result.blocked .blk-card{border-color:rgba(179,38,30,.42)} :root[data-theme="dark"] .result .warn{background:rgba(154,103,0,.16);color:#E4C06A} :root[data-theme="dark"] .result.blocked .blk-alt{background:rgba(30,122,70,.18);color:#7FC79B} :root[data-theme="dark"] .tl-lb{color:#E4C06A} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;height:100%;font-family:"Titillium Web",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased} .mono{font-family:"Roboto Mono",monospace;font-variant-numeric:tabular-nums} #app{position:fixed;inset:0;overflow:hidden} #map{position:absolute;inset:0;z-index:1;background:var(--bg)} svg.ic{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* === MAP SCRIM ========================================================= */ .map-scrim{position:absolute;inset:0;z-index:28;background:rgba(10,40,64,.30);opacity:0;pointer-events:none;transition:opacity .28s ease} .map-scrim.show{opacity:1;pointer-events:auto} /* === HEADER ISTITUZIONALE ============================================= */ .topbar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;flex-direction:column; box-shadow:0 1px 6px rgba(16,40,64,.14)} .gov{position:relative;display:flex;align-items:center;gap:14px; padding:9px 16px;padding-top:calc(9px + env(safe-area-inset-top,0px)); background:var(--blu);color:#fff} .brand{display:flex;align-items:center;gap:12px;flex:1;min-width:0} .brand img{height:30px;width:auto;display:block;flex:none} .brand .sep{width:1px;height:26px;background:rgba(255,255,255,.26);flex:none} .brand .role{line-height:1.2;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.86);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brand .role small{display:block;font-weight:400;color:rgba(255,255,255,.55);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase} /* tab Oggi/Naviga: CENTRATI nell'header (desktop) */ .navtabs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:flex;gap:2px;background:rgba(255,255,255,.10);border-radius:7px;padding:3px} .navtabs button{border:0;background:transparent;color:rgba(255,255,255,.74); font-family:"Titillium Web";font-weight:700;font-size:13.5px;letter-spacing:.01em; padding:8px 17px;border-radius:5px;cursor:pointer;display:flex;align-items:center;gap:7px;min-height:36px;white-space:nowrap} .navtabs button svg{width:16px;height:16px;flex:none} .navtabs button.on{background:var(--surf);color:var(--accent-tx)} .lang{display:flex;gap:1px;flex:none} .lang button{border:0;background:transparent;color:rgba(255,255,255,.6);font-family:"Roboto Mono";font-weight:500;font-size:12px;padding:6px 8px;border-radius:4px;cursor:pointer} .lang button.on{color:#fff;background:rgba(255,255,255,.14)} #pushLbl{display:none} /* mobile: campanella solo-icona, non ruba spazio a "Polizia Municipale" */ /* stato avvisi: la campanella cambia aspetto (anche solo-icona su mobile) -> feedback on/off */ #pushBtn{border-radius:6px;transition:background .15s,color .15s} #pushBtn[aria-pressed="true"]{background:rgba(255,255,255,.16);color:#FFD24D} #pushBtn[aria-pressed="true"] svg{fill:#FFD24D;stroke:#FFD24D} #pushBtn:disabled{opacity:.5} /* === IMPOSTAZIONI (ingranaggio in header + foglio a comparsa) ========= */ #setBtn{border:0;background:transparent;color:rgba(255,255,255,.72);padding:6px 8px;border-radius:6px;cursor:pointer;display:flex;align-items:center;transition:background .15s,color .15s} #setBtn:hover{background:rgba(255,255,255,.14);color:#fff} .set-ov{position:fixed;inset:0;z-index:120;background:rgba(8,22,36,.5);display:flex;align-items:flex-end;justify-content:center} .set-ov[hidden]{display:none} .set-sheet{width:100%;max-width:440px;background:var(--surf);color:var(--ink);border-radius:16px 16px 0 0;padding:16px 16px calc(16px + var(--safe-b));box-shadow:0 -8px 40px rgba(0,0,0,.3);animation:setUp .22s ease} @keyframes setUp{from{transform:translateY(22px);opacity:.5}to{transform:none;opacity:1}} .set-head{display:flex;align-items:center;margin-bottom:4px} .set-head b{flex:1;font-size:16px;color:var(--ink)} .set-x{border:0;background:var(--blu-soft);color:var(--ink-soft);width:32px;height:32px;border-radius:8px;display:grid;place-items:center;cursor:pointer} .set-row{display:flex;align-items:center;gap:12px;padding:13px 4px;border-top:1px solid var(--line)} .set-row .set-lb{flex:1;font-size:14.5px;color:var(--ink)} .set-sw{position:relative;width:46px;height:27px;flex:none;cursor:pointer} .set-sw input{opacity:0;width:0;height:0;position:absolute} .set-sw i{position:absolute;inset:0;background:var(--bd-2);border-radius:20px;transition:.2s} .set-sw i:before{content:"";position:absolute;width:21px;height:21px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)} .set-sw input:checked + i{background:var(--blu-2)} .set-sw input:checked + i:before{transform:translateX(19px)} .set-lang{display:flex;gap:4px;flex:none} .set-lang button{border:1px solid var(--bd);background:var(--surf);color:var(--ink-soft);font-family:"Roboto Mono";font-weight:600;font-size:13px;padding:6px 15px;border-radius:7px;cursor:pointer} .set-lang button.on{background:var(--blu-2);color:#fff;border-color:var(--blu-2)} /* riga notifiche: il bottone push occupa l'intera riga con etichetta sempre visibile */ .set-push{padding-top:12px} .set-push #pushBtn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--blu-soft);color:var(--ink);border:1px solid var(--bd);border-radius:10px;padding:12px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer} .set-push #pushLbl{display:inline} .set-push #pushBtn[aria-pressed="true"]{background:rgba(224,161,0,.14);border-color:#E0A100;color:var(--ink)} .set-push #pushBtn[aria-pressed="true"] svg{fill:#E0A100;stroke:#E0A100} .set-push #pushBtn:disabled{opacity:.55} .set-foot{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 4px 2px;margin-top:4px;border-top:1px solid var(--line);text-align:center} .set-foot-c{font-size:12px;color:var(--ink-faint);line-height:1.4} .set-foot-b{font-size:12.5px;font-weight:600;color:var(--accent-tx);text-decoration:none} .set-foot-b:hover{text-decoration:underline} /* banda tricolore */ .tricolore{height:3px;display:flex} .tricolore i{flex:1} .tricolore i:nth-child(1){background:var(--tri-v)} .tricolore i:nth-child(2){background:var(--tri-b)} .tricolore i:nth-child(3){background:var(--tri-r)} /* MOBILE: tab come barra segmentata a tutta larghezza, sotto il logo */ @media(max-width:539px){ .gov{flex-wrap:wrap;row-gap:0} .brand .role small{display:none} .navtabs{position:static;transform:none;order:3;width:100%;margin-top:8px;justify-content:stretch} .navtabs button{flex:1;justify-content:center} } /* === PANNELLI (bottom sheet mobile) =================================== */ .panel{position:absolute;left:0;right:0;bottom:0;z-index:25; background:var(--surf);border-top:1px solid var(--bd); border-radius:var(--r) var(--r) 0 0;box-shadow:0 -6px 24px rgba(16,40,64,.16); transform:translateY(calc(100% - 80px));transition:transform .30s cubic-bezier(.32,.82,.42,1); max-height:82%;display:flex;flex-direction:column;padding-bottom:var(--safe-b)} .panel.open{transform:translateY(0)} .grip{padding:10px 0 4px;display:flex;justify-content:center;cursor:grab;flex:none;touch-action:none} .grip i{width:38px;height:4px;border-radius:99px;background:var(--bd-2);display:block} .head{padding:4px 18px 13px;display:flex;align-items:center;gap:10px;flex:none;border-bottom:1px solid var(--line)} .head h2{margin:0;font-size:20px;font-weight:900;letter-spacing:-.01em;color:var(--accent-tx)} .head .sub{font-size:12.5px;color:var(--ink-soft);margin-top:3px} .body{overflow-y:auto;padding:14px 16px 18px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} /* === OGGI: contatore & pill =========================================== */ .count{font-family:"Roboto Mono",monospace;font-size:12px;font-weight:500;padding:3px 9px;border-radius:5px;white-space:nowrap;background:#FBE6E4;color:var(--stop)} .pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:5px;white-space:nowrap} .pill.live{background:#FBE6E4;color:var(--stop)} .pill.off{background:var(--blu-soft);color:var(--ink-soft)} /* === EVENT CARDS ====================================================== */ .card{display:flex;gap:0;padding:0;border:1px solid var(--bd);border-radius:var(--rs);margin-bottom:9px; background:var(--surf);cursor:pointer;overflow:hidden; transition:border-color .12s, box-shadow .12s} .card:hover{border-color:var(--bd-2);box-shadow:0 2px 8px rgba(16,40,64,.08)} .card:active{background:var(--blu-soft)} .card .ico{width:48px;flex:none;display:flex;align-items:center;justify-content:center;align-self:stretch} .card .ico svg{width:20px;height:20px} .card .tx{flex:1;min-width:0;padding:12px 12px 12px 2px} .card .tx .t{font-weight:700;font-size:14.5px;line-height:1.3;color:var(--ink)} .card .tx .m{font-size:12.5px;color:var(--ink-soft);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .card .chev{flex:none;color:var(--ink-faint);align-self:center;padding-right:10px} /* Tipo di limitazione, in testa alla riga descrittiva: deve sempre essere chiaro CHE COSA e' la voce, senza dedurlo dal colore. Separato da un punto medio generato in CSS, cosi' il testo resta pulito e il separatore sparisce se l'etichetta e' l'unico contenuto. */ .card .tx .m .tipo{font-weight:600;color:var(--ink)} /* Il separatore e' un nodo di testo generato da metaLine, non un ::after: la versione precedente usava '.tipo:not(:only-child):after' e non compariva MAI, perche' :only-child conta gli elementi e lo span del tipo e' seguito da puro testo, quindi era sempre figlio unico. Qui si aggiunge solo il respiro. */ .card .tx .m .sep{font-weight:400;color:var(--ink-soft);margin-right:4px} /* icona per categoria: chip tinta chiara, glifo colorato */ .ico.chiusura{color:var(--stop);background:#FBE6E4} .ico.divieto{color:var(--divieto);background:#FBE3E1} .ico.senso_unico{color:var(--senso);background:#E1ECF6} .ico.ztl{color:var(--ztl);background:#EBE4F3} .ico.scuola{color:var(--scuola);background:#F4ECD6} .ico.avviso{color:var(--avviso);background:#DCEFEE} .ico.sosta{color:#0B5394;background:#E6EEF6} /* barra di stato a sinistra della card (browser con :has) */ .card:has(.ico.chiusura){border-left:4px solid var(--stop)} .card:has(.ico.divieto){border-left:4px solid var(--divieto)} .card:has(.ico.senso_unico){border-left:4px solid var(--senso)} .card:has(.ico.ztl){border-left:4px solid var(--ztl)} .card:has(.ico.scuola){border-left:4px solid var(--scuola)} .card:has(.ico.avviso){border-left:4px solid var(--avviso)} .card:has(.ico.sosta){border-left:4px solid #0B5394} .muted-card .ico{filter:saturate(.35);opacity:.7} /* pill di stato (forma + testo: leggibile anche senza distinguere i colori) */ .card .tx .t{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .st{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap} .st svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2} .st.block{background:#FBE6E4;color:var(--stop)} .st.free{background:#DDEEE4;color:var(--ok)} .st.soon{background:#F6ECD3;color:var(--warn)} .st.info{background:#DCEFEE;color:var(--avviso)} .st.oneway{background:#E1ECF6;color:var(--senso)} /* riga orario "quando cambia" sotto la card */ .when{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);margin-top:6px} .when svg{width:13px;height:13px;fill:none;stroke:var(--ink-soft);stroke-width:2;flex:none} /* Il blocco === SUMMARY === e' stato rimosso il 20 lug 2026 insieme a renderSummary: il riquadro "Oggi a Procida: N situazioni attive" ripeteva il contatore gia' presente in testa al pannello e nel segmento. */ /* === SECTION HEADERS ================================================== */ .sec{font-family:"Roboto Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase; color:var(--ink-faint);margin:18px 1px 9px;display:flex;align-items:center;gap:9px} .sec:first-child{margin-top:4px} .sec .n{background:var(--blu-soft);color:var(--ink-soft);border-radius:5px;padding:1px 7px;font-size:11px} .sec.live .n{background:#FBE6E4;color:var(--stop)} .sec-mut .card{opacity:.64} /* === PROGRAMMATI: segmento Attivi ora / In arrivo ===================== */ .segbar{display:flex;gap:5px;background:var(--blu-soft);border-radius:9px;padding:4px;margin-bottom:15px} .segbar button{flex:1;border:0;background:transparent;font-family:inherit;font-weight:700;font-size:13px; color:var(--ink-soft);padding:9px 6px;border-radius:6px;cursor:pointer; display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap} .segbar button.on{background:var(--surf);color:var(--accent-tx);box-shadow:0 1px 2px rgba(16,40,64,.14)} .segbar .n{font-family:"Roboto Mono",monospace;font-size:10.5px;font-weight:500;padding:1px 6px;border-radius:4px; background:var(--surf);color:var(--ink-faint)} .segbar button.on .n{background:#FBE6E4;color:var(--stop)} .segbar button.on.q .n{background:#F6ECD3;color:var(--warn)} /* date rail: il periodo di validita' al posto dell'icona muta */ .drail{width:64px;flex:none;align-self:stretch;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:4px;padding:10px 3px;text-align:center} .drail svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;opacity:.75} .drail .d1{font-family:"Roboto Mono",monospace;font-size:14px;font-weight:500;line-height:1.05;letter-spacing:-.02em} .drail .d2{font-family:"Roboto Mono",monospace;font-size:9.5px;font-weight:500;line-height:1.15; letter-spacing:.08em;text-transform:uppercase;opacity:.72} .drail.chiusura{color:var(--stop);background:#FBE6E4} .drail.divieto{color:var(--divieto);background:#FBE3E1} .drail.ztl{color:var(--ztl);background:#EBE4F3} .drail.avviso{color:var(--avviso);background:#DCEFEE} .drail.sosta{color:#0B5394;background:#E6EEF6} .drail.scuola{color:var(--scuola);background:#F4ECD6} /* senso_unico: oggi vociProg lo esclude (severity 'oneway'), ma public_tipo_from_source ricava il tipo da source='sensi' a prescindere dalla severity, quindi la coppia non e' garantita dal contratto. Senza questa regola una card simile avrebbe il rail incolore: parita' con .ico.*, che copre tutti e sette i tipi. */ .drail.senso_unico{color:var(--senso);background:#E1ECF6} .card:has(.drail.chiusura){border-left:4px solid var(--stop)} .card:has(.drail.divieto){border-left:4px solid var(--divieto)} .card:has(.drail.ztl){border-left:4px solid var(--ztl)} .card:has(.drail.avviso){border-left:4px solid var(--avviso)} .card:has(.drail.sosta){border-left:4px solid #0B5394} .card:has(.drail.scuola){border-left:4px solid var(--scuola)} .card:has(.drail.senso_unico){border-left:4px solid var(--senso)} /* frase di validita' sotto il titolo. Peso 400 di base e 600 sull'enfasi: il 700 di su una riga gia' a 600 rendeva la frase un blocco compatto e faticoso da leggere (riscontro dell'utente, 20 lug 2026). Titillium carica 400/600/700/900, quindi il 600 e' un "grassetto meno grassetto" vero e non serve ricorrere alla sottolineatura, che su una lista di date si scambierebbe per un link. */ .win{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;color:var(--ink);margin-top:6px; line-height:1.4;font-weight:400} .win b{font-weight:600} .win svg{width:13px;height:13px;fill:none;stroke:var(--ink-soft);stroke-width:2;flex:none;margin-top:2px} .win .soft{font-weight:400;color:var(--ink-soft)} /* conto alla rovescia, solo per cio' che scatta oggi */ .tl-lb{font-family:"Roboto Mono",monospace;font-size:10.5px;color:var(--warn);margin-top:5px;font-weight:500} /* intestazione di gruppo dentro "In arrivo" */ .gsec{font-family:"Roboto Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.05em; text-transform:uppercase;color:var(--ink-faint);margin:16px 1px 9px;display:flex;align-items:center;gap:9px} .gsec:first-child{margin-top:2px} .gsec:after{content:"";flex:1;height:1px;background:var(--line)} /* === FILTER BAR ======================================================= */ .filterbar{display:flex;gap:7px;overflow-x:auto;padding:0 0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .filterbar::-webkit-scrollbar{display:none} .filterbar button{flex:none;border:1px solid var(--bd);background:var(--surf);border-radius:6px; padding:6px 12px;font-family:"Titillium Web";font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.12s} .filterbar button.on{background:var(--blu-2);color:#fff;border-color:var(--blu-2)} /* === EMPTY STATE ====================================================== */ .empty{text-align:center;color:var(--ink-soft);padding:34px 16px;font-size:14px} .empty svg{width:44px;height:44px;color:var(--ok);margin:0 auto 12px;display:block} .empty b{color:var(--ink);font-size:15px;display:block;margin-bottom:6px} /* === NAVIGA: campi & modi ============================================= */ .field{display:flex;align-items:center;gap:11px;border:1px solid var(--bd);border-radius:var(--rs);padding:10px 13px;margin-bottom:9px;background:var(--surf)} .field .dot{width:10px;height:10px;border-radius:50%;flex:none} .field .dot.a{background:var(--ok)} .field .dot.b{background:var(--stop)} .field select{border:0;background:transparent;font-family:"Titillium Web";font-weight:600;font-size:14.5px;color:var(--ink);width:100%;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer} .field .fieldsel{border:0;background:transparent;font-family:"Titillium Web";font-weight:600;font-size:14.5px;color:var(--ink);width:100%;outline:none;cursor:pointer;text-align:left;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .field .fieldsel:focus-visible{outline:2px solid var(--blu-2);outline-offset:2px} .field .chev{flex:none;color:var(--ink-soft)} .modes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 16px} .modes button{border:1px solid var(--bd);background:var(--surf);border-radius:var(--rs); padding:11px 4px 9px;font-family:"Titillium Web";font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer; display:flex;flex-direction:column;align-items:center;gap:5px;min-height:70px;transition:.12s} .modes button svg{width:21px;height:21px} .modes button.on{border-color:var(--blu-2);background:var(--blu-soft);color:var(--accent-tx)} /* === BUTTONS ========================================================== */ .btn{width:100%;border:0;border-radius:var(--rs);padding:13px;font-family:"Titillium Web";font-size:15px;font-weight:700; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;transition:.14s} .btn.go{background:var(--blu-2);color:#fff} .btn.go:hover{background:#0A4A86} .btn.go:disabled{background:#9FB4C6;cursor:default} .btn.ghost{background:var(--blu-soft);color:var(--accent-tx);margin-top:8px} .btn.ghost:active{background:#D7E3EE} .btn.accent{background:var(--blu);color:#fff} .btn.accent:active{background:#082F4C} /* Riga azioni POI: Indicazioni + (eventuale) Easy Park sulla stessa riga */ .poi-actions{display:flex;gap:8px;align-items:stretch} .poi-actions .btn{flex:1;margin-top:0} .btn.easypark{background:#7d1f8a;color:#fff;text-decoration:none} .btn.easypark:active{background:#6a1976} /* === ROUTE RESULT ===================================================== */ .result{margin-top:12px;border-radius:var(--rs);background:var(--blu-soft);border:1px solid #D3E0EB;padding:14px;display:none} .result.show{display:block} .result .big{font-family:"Roboto Mono",monospace;font-size:26px;font-weight:500;color:var(--accent-tx)} .result .rsub{font-size:12.5px;color:var(--ink-soft);margin-top:2px} .result .warn{margin-top:10px;background:#F4ECD6;color:#7a5800;border-radius:7px;padding:9px 11px;font-size:12.5px;display:none} .result .warn.show{display:block} .result.blocked{background:#FBEAE8;border-color:#F2C9C5} .result.blocked .blk-head{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--stop)} .result.blocked .blk-head svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .result.blocked .blk-sub{font-size:12.5px;color:var(--ink-soft);margin:7px 0 10px} .result.blocked .blk-card{display:flex;gap:11px;align-items:center;background:var(--surf);border:1px solid #F2C9C5;border-radius:8px;padding:11px} .result.blocked .blk-card .ico{width:36px;height:36px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--stop)} .result.blocked .blk-card .ico svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .result.blocked .bt{font-weight:700;font-size:14px;color:var(--ink)} .result.blocked .bn{font-size:12.5px;color:var(--ink-soft);margin-top:2px} .result.blocked .blk-alt{display:flex;align-items:center;gap:8px;margin-top:10px;background:#DDEEE4;color:var(--ok);border-radius:7px;padding:9px 11px;font-size:12.5px;font-weight:600} .result.blocked .blk-alt svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} /* === ITINERARY ======================================================== */ #navItin .itin-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px} #navItin .itin-dist{font-family:"Roboto Mono",monospace;font-size:22px;font-weight:500;color:var(--accent-tx)} #navItin .itin-mode{font-size:12.5px;color:var(--ink-soft)} ol.itin{list-style:none;margin:0;padding:0} .itin-step{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);position:relative} .itin-step:last-child{border-bottom:0} .itin-ico{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--blu-soft);color:var(--accent-tx)} .itin-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .itin-ico.ev{background:#FBE6E4;color:var(--stop)} .itin-ico.end{background:#DDEEE4;color:var(--ok)} .itin-tx{flex:1;min-width:0;font-size:14px;padding-top:3px} .itin-len{display:block;font-family:"Roboto Mono",monospace;font-size:12px;color:var(--ink-soft);margin-top:1px} .itin-note{font-size:12px;color:var(--ink-soft);margin-top:2px} .itin-step.event .itin-tx b{color:var(--stop)} #navAlong{margin-top:10px} #navAlong .alongh{font-family:"Roboto Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin:4px 1px 8px} .alongcard{display:flex;gap:11px;align-items:flex-start;background:var(--surf);border:1px solid var(--bd);border-radius:8px;padding:11px;margin-bottom:8px} .alongcard .ico{width:34px;height:34px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--ink-soft)} .alongcard .ico svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .alongcard .at{font-weight:700;font-size:13.5px} .alongcard .an{font-size:12.5px;color:var(--ink-soft);margin-top:2px} .alongcard .ast{font-family:"Roboto Mono",monospace;font-size:10px;font-weight:500;border-radius:999px;padding:2px 8px;margin-top:5px;display:inline-block} .alongcard .ast.on{background:#FBE6E4;color:var(--stop)} .alongcard .ast.off{background:#DDEEE4;color:var(--ok)} .hint{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:11px;line-height:1.5} /* === POI BOTTOM SHEET ================================================= */ #panelPOI{display:none;z-index:30;transform:translateY(100%);transition:transform .30s cubic-bezier(.32,.82,.42,1)} #panelPOI.open{transform:translateY(0)} .poi-header{display:flex;align-items:flex-start;gap:12px;padding:4px 16px 14px;border-bottom:1px solid var(--line);flex:none} .poi-hico{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;background:var(--blu-2)} .poi-hico svg{width:24px;height:24px} .poi-htx{flex:1;min-width:0} .poi-htx h2{margin:0;font-size:18px;font-weight:900;letter-spacing:-.01em;line-height:1.2;color:var(--accent-tx)} .poi-htx .poi-cat{font-size:12px;font-weight:600;color:var(--ink-soft);margin-top:3px;text-transform:capitalize} .poi-close{border:0;background:var(--blu-soft);color:var(--ink-soft);border-radius:50%;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:.12s;min-width:32px} .poi-close:hover{background:#D7E3EE;color:var(--ink)} .poi-close svg{width:16px;height:16px} /* === BENTO BOX ======================================================== */ .bento{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0} .bento-cell{background:var(--surf);border:1px solid var(--bd);border-radius:var(--rs);padding:12px 14px;display:flex;flex-direction:column;gap:4px} .bento-cell.span2{grid-column:span 2} .bento-cell.tinted{background:var(--blu-soft);border-color:#D3E0EB} .bento-label{font-family:"Roboto Mono",monospace;font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)} .bento-value{font-size:15px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px} .bento-value svg{width:16px;height:16px;flex:none} .bento-value.sm{font-size:13px;font-weight:600;color:var(--ink-soft)} .bento-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;border-radius:5px;padding:3px 8px;margin-top:2px;width:fit-content} .bento-pill.ok{background:#DDEEE4;color:var(--ok)} .bento-pill.warn{background:#FBE6E4;color:var(--stop)} .bento-pill svg{width:12px;height:12px} .bento-restr-list{display:flex;flex-direction:column;gap:7px;margin-top:2px} .bento-restr-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);line-height:1.3} .restr-ico{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;background:var(--ink-soft)} .restr-ico svg{width:13px;height:13px} /* === VOCE DETAIL SHEET ================================================ */ #panelVoce{display:none;z-index:30;transform:translateY(100%);transition:transform .30s cubic-bezier(.32,.82,.42,1)} #panelVoce.open{transform:translateY(0)} .voce-header{display:flex;align-items:flex-start;gap:12px;padding:4px 16px 14px;border-bottom:1px solid var(--line);flex:none} .voce-hico{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;background:var(--blu-2)} .voce-hico svg{width:22px;height:22px} .voce-htx{flex:1;min-width:0} .voce-htx h2{margin:0;font-size:18px;font-weight:900;letter-spacing:-.01em;line-height:1.2;color:var(--accent-tx)} .voce-tipo{font-family:"Roboto Mono",monospace;font-size:11px;font-weight:500;color:var(--ink-soft);margin-top:3px;text-transform:uppercase;letter-spacing:.04em} .delibera-link{display:flex;align-items:center;gap:10px;background:var(--blu-soft);border:1px solid #D3E0EB;border-radius:var(--rs);padding:12px 14px;margin-top:4px; color:var(--accent-tx);text-decoration:none;font-size:14px;font-weight:700;transition:.12s} .delibera-link:hover{background:#D7E3EE} .delibera-link svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* === MAP PULSE ======================================================== */ .pulse-marker{width:18px;height:18px;border-radius:50%;animation:vocepulse 1.8s ease-out infinite} @keyframes vocepulse{0%{box-shadow:0 0 0 0 rgba(179,38,30,.55);transform:scale(1)}60%{box-shadow:0 0 0 11px rgba(179,38,30,0);transform:scale(1.09)}100%{box-shadow:0 0 0 0 rgba(179,38,30,0);transform:scale(1)}} @media(prefers-reduced-motion:reduce){.pulse-marker{animation:none}} /* archi coinvolti in un divieto: movimento "marching ants" */ .arc-flow{stroke-dasharray:10 8;animation:arcflow 1.5s linear infinite} @keyframes arcflow{to{stroke-dashoffset:-36}} @media(prefers-reduced-motion:reduce){.arc-flow{animation:none}} /* === PANEL COLLAPSE / LAUNCHER (desktop) ============================== */ .panel-collapse-btn,.panel-tab{display:none} /* === TOAST ============================================================ */ .toast{position:absolute;left:50%;bottom:148px;transform:translateX(-50%) translateY(14px);z-index:40; background:var(--ink);color:#fff;padding:11px 18px;border-radius:7px;font-size:13.5px;font-weight:600;box-shadow:var(--shad); opacity:0;pointer-events:none;transition:.25s;white-space:nowrap;max-width:80%} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* === LEGEND =========================================================== */ .legend{position:absolute;right:12px;bottom:148px;z-index:15;background:var(--surf);border:1px solid var(--bd); border-radius:8px;box-shadow:var(--shad);padding:11px 13px;font-size:11.5px;display:none} .legend.show{display:block} .legend .row{display:flex;align-items:center;gap:9px;margin:4px 0;color:var(--ink)} .legend .sw{width:18px;height:4px;border-radius:2px} /* === LOADING ========================================================== */ .loading{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--ink-soft);font-size:14px;flex-direction:column;gap:12px} .loading.hide{display:none} /* Light: logo direttamente sul fondo chiaro (e' disegnato per sfondo chiaro). Width grande perche' logo_splash.png ha margini trasparenti "cotti" per il cerchio (opaco ~52% del canvas): senza il vincolo del cerchio lo ingrandiamo per compensare. */ .splash-logo{width:min(94vw,580px);height:auto;margin-bottom:16px;animation:splashIn .5s ease-out both} /* Dark: testo/stemma navy sparirebbero sul fondo scuro -> disco bianco dietro. Box quadrato + border-radius:50% = cerchio; padding in % per contenere il logo SENZA rimpicciolirlo (area interna ~= larghezza light) e senza clip degli angoli. NB: il padding NON puo' essere in % (in CSS la % si calcola sulla larghezza del CONTENITORE, non dell'elemento: su desktop divorerebbe il box e il logo sparirebbe). Uso min(vw,px) ~= 13% della larghezza dell'elemento. Padding piccolo: il margine (10%) e' gia' "cotto" nel PNG (logo_splash.png ha la corona centrata e il pixel opaco piu' lontano al 90% del raggio, cosi' la tagline "DIrezione..GO" non tocca il bordo del cerchio). */ :root[data-theme="dark"] .splash-logo{width:min(97vw,420px);height:min(97vw,420px);padding:min(3.5vw,15px);background:#fff;border-radius:50%;object-fit:contain;box-shadow:0 10px 34px rgba(0,0,0,.42)} @keyframes splashIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.splash-logo{animation:none}} .serv-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);min-width:220px;max-width:80vw;background:var(--surf);border:1px solid var(--bd);border-radius:10px;box-shadow:0 12px 30px rgba(10,40,70,.18);padding:6px;z-index:1200;display:flex;flex-direction:column;gap:2px} .serv-menu[hidden]{display:none} .serv-menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:7px;color:var(--ink);text-decoration:none;font-size:14px} .serv-menu a:hover{background:var(--blu-soft)} .serv-menu .si{width:20px;height:20px;flex:none;color:var(--accent-tx)} .serv-menu .si svg{width:100%;height:100%} .serv-menu .empty{padding:10px;color:var(--ink-soft);font-size:13px;text-align:center} .serv-menu .serv-cat{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:0;background:none;border-radius:7px;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;text-align:left} .serv-menu .serv-cat:hover{background:var(--blu-soft)} .serv-menu .serv-cat-l{flex:1;font-weight:700} .serv-menu .serv-chev{width:16px;height:16px;flex:none;transition:transform .18s;color:var(--ink-soft)} .serv-menu .serv-cat[aria-expanded="true"] .serv-chev{transform:rotate(180deg)} .serv-menu .serv-sub{display:flex;flex-direction:column;gap:2px;padding-left:10px;margin-left:6px;border-left:2px solid var(--bd)} .serv-menu .serv-sub[hidden]{display:none} .spin{width:30px;height:30px;border:3px solid #CFD9E2;border-top-color:var(--accent-tx);border-radius:50%;animation:sp .8s linear infinite} @keyframes sp{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.spin{animation-duration:1.6s}} /* === DESKTOP ========================================================== */ @media(min-width:780px){ .panel{left:16px;right:auto;bottom:16px;top:84px;width:382px;border-radius:var(--r);transform:none;max-height:none;box-shadow:var(--shad);border:1px solid var(--bd)} .grip{display:none} .legend{right:16px} #pushLbl{display:inline} /* desktop: c'e' spazio, mostra l'etichetta avvisi */ .toast{left:calc(50% + 199px);right:auto;transform:translateX(-50%) translateY(14px)} .toast.show{transform:translateX(-50%) translateY(0)} #panelPOI{left:16px;right:16px;bottom:16px;top:auto;width:auto;border-radius:var(--r);border:1px solid var(--bd)} #panelPOI.open{transform:translateY(0)} #panelVoce{left:414px;right:16px;bottom:16px;top:auto;width:auto;border-radius:var(--r);border:1px solid var(--bd)} #panelVoce.open{transform:translateY(0)} .map-scrim{display:none} #panelOggi{transition:transform .28s cubic-bezier(.32,.82,.42,1)} #panelOggi.collapsed{transform:translateX(calc(-100% - 26px))} .panel-collapse-btn{display:flex;align-items:center;justify-content:center;border:0;background:var(--blu-soft);color:var(--ink-soft); border-radius:6px;width:32px;height:32px;cursor:pointer;transition:.12s;flex-shrink:0;min-width:32px;padding:0} .panel-collapse-btn:hover{background:#D7E3EE;color:var(--ink)} .panel-collapse-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* launcher "a comparsa" */ .panel-tab{position:absolute;left:16px;top:96px;z-index:26;display:none;align-items:center;gap:9px; background:var(--surf);border:1px solid var(--bd);border-radius:8px;padding:11px 14px;cursor:pointer; box-shadow:var(--shad);font-family:"Titillium Web";font-weight:700;font-size:14px;color:var(--accent-tx)} .panel-tab.show{display:flex} .panel-tab svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .panel-tab .n{font-family:"Roboto Mono",monospace;font-size:11px;font-weight:500;color:#fff;background:var(--stop);border-radius:4px;padding:2px 7px} .panel-tab.calm{color:var(--ok)} .panel-tab.alert{animation:tabpulse 2.2s ease-out infinite} @keyframes tabpulse{0%{box-shadow:var(--shad),0 0 0 0 rgba(179,38,30,.35)}70%{box-shadow:var(--shad),0 0 0 12px rgba(179,38,30,0)}100%{box-shadow:var(--shad),0 0 0 0 rgba(179,38,30,0)}} } @media(prefers-reduced-motion:reduce){.panel-tab.alert{animation:none}} /* === FOLLOW-ME (modalita' navigazione) =============================== */ .nav-arrow{width:34px;height:34px;display:flex;align-items:center;justify-content:center} .nav-arrow svg{width:30px;height:30px;fill:var(--blu-2);stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))} .nav-banner{position:absolute;top:calc(64px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%); z-index:35;display:none;align-items:center;gap:10px;max-width:92%; background:var(--surf);border:1px solid var(--bd);border-left:4px solid var(--blu-2); border-radius:8px;box-shadow:var(--shad);padding:11px 14px;font-size:13.5px;font-weight:600;color:var(--ink)} .nav-banner.show{display:flex} .nav-banner.warn{border-left-color:var(--warn)} .nav-banner.offroute{border-left-color:var(--stop)} .nav-banner.ok{border-left-color:var(--ok)} .nav-banner button{border:0;background:var(--blu-2);color:#fff;font-family:"Titillium Web";font-weight:700; font-size:12.5px;border-radius:6px;padding:6px 11px;cursor:pointer;white-space:nowrap} .nav-end{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%); z-index:36;display:none;align-items:center;gap:7px; background:var(--stop);color:#fff;border:0;border-radius:999px;box-shadow:var(--shad); padding:11px 20px;font-family:"Titillium Web";font-weight:700;font-size:14px;cursor:pointer} .nav-end svg{width:16px;height:16px} body.nav-on .nav-end{display:flex} body.nav-on .panel{display:none !important} body.nav-on .legend,body.nav-on .panel-tab{display:none !important} /* --- heading-up: mappa orientata nel senso di marcia -------------------- */ /* #map diventa un quadrato grande quanto la DIAGONALE del viewport (lato imposto in px da navUp): e' il minimo che copre lo schermo comunque lo si ruoti. Un ingrandimento proporzionale scoprirebbe gli angoli. Il centraggio usa i margini e non translate, perche' transform serve alla rotazione. */ body.nav-up #map{left:50%;top:50%;right:auto;bottom:auto; transform:rotate(var(--nav-rot,0deg));transform-origin:50% 50%;will-change:transform} /* I marker vanno contro-ruotati sul wrapper: l'elemento marker di Leaflet porta una transform inline di posizionamento e non va toccato. Perno in basso al centro = la punta dello spillo resta sul suo punto. */ .nav-upright{display:block;width:100%;height:100%;transform-origin:50% 100%} body.nav-up .nav-upright{transform:rotate(var(--nav-inv,0deg))} /* L'attribuzione Leaflet vive dentro #map: sovradimensionato finirebbe fuori schermo, oltre che ruotata. La sostituiamo con una statica nell'overlay. */ body.nav-up .leaflet-control-container{display:none} .nav-attrib{position:absolute;right:6px;bottom:calc(4px + env(safe-area-inset-bottom,0px)); z-index:34;display:none;font-size:9px;opacity:.55;color:var(--ink); background:var(--surf);border-radius:3px;padding:1px 5px;pointer-events:none} body.nav-up .nav-attrib{display:block} .leaflet-control-attribution{font-size:9px;opacity:.55} /* Pastiglia tonda solo-icona in basso a SINISTRA: a destra litigava con i controlli zoom di Leaflet (bottomright), in alto col banner indicazioni, che su smartphone occupa tutta la larghezza. L'angolo libero e' questo. */ .nav-up-btn{position:absolute;left:10px;bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:36;display:none;align-items:center;justify-content:center; width:44px;height:44px;padding:0;background:var(--surf);color:var(--ink); border:1px solid var(--bd);border-radius:999px;box-shadow:var(--shad);cursor:pointer} body.nav-on .nav-up-btn{display:flex} .nav-up-btn svg{width:22px;height:22px;display:block} /* Due icone nel markup, una per stato. Attivo = la stessa freccia del marker utente (la mappa segue quella freccia); spento = bussola con la N (nord fisso in alto). Lo stato e' ribadito dal riempimento blu. */ .nav-up-btn .ico-navup{display:none;fill:currentColor} .nav-up-btn .ico-north{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .nav-up-btn.on{background:var(--blu-2);color:#fff;border-color:var(--blu-2)} .nav-up-btn.on .ico-navup{display:block} .nav-up-btn.on .ico-north{display:none} /* === MODALITA' QR (vista turista go.html) ============================ */ /* header slim: via la caption "Polizia Locale / Mobilita" e il separatore */ body.qr .brand .role, body.qr .brand .sep{display:none} /* Oggi ridotto: niente filtri per tipo (meno distrazione) */ body.qr .filterbar{display:none} /* Vista turista (?qr=1): via cio' che non serve a chi arriva da un cartello. #setBtn e' l'unico punto che apre le impostazioni: nascosto quello, modo scuro e notifiche sono gia' irraggiungibili e non serve nasconderli uno a uno. L'informativa (#dsc) NON si nasconde: e' un'avvertenza legale e deve comparire anche a chi arriva da un QR (scelta esplicita, vedi spec). */ body.qr #setBtn{display:none} /* body.qr #summary rimosso il 20 lug 2026: #summary non esiste piu'. */ /* === Selettore partenza/destinazione (Naviga) ========================= Tendina che si abbassa dal campo: si espande NEL FLUSSO (spinge in giu' il resto) invece di fluttuare. Il .body del pannello ha overflow-y:auto e scorre da solo; una tendina in posizione assoluta verrebbe ritagliata. */ .pick-menu{border:1px solid var(--bd);border-radius:var(--rs);background:var(--surf);box-shadow:0 8px 20px rgba(10,40,70,.10);padding:8px;margin:-4px 0 9px} .pick-menu[hidden]{display:none} /* scorre solo l'elenco: azioni e ricerca restano sempre in vista */ .pick-list{max-height:38vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} /* la chevron del campo segue l'apertura, come le categorie del menu Servizi */ .field .chev{transition:transform .18s} .field .fieldsel[aria-expanded="true"] ~ .chev{transform:rotate(180deg)} /* le azioni stanno sopra un bordo: non sono POI e non devono sembrarlo */ .pick-actions{display:flex;flex-direction:column;gap:2px;padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--bd)} .pick-act{display:flex;align-items:center;gap:10px;width:100%;padding:10px 11px;border:0;background:none;border-radius:7px;color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-align:left} .pick-act:hover{background:var(--blu-soft)} .pick-act svg{width:18px;height:18px;flex:none;color:var(--blu-2)} .pick-search{width:100%;padding:9px 11px;border:1px solid var(--bd);border-radius:var(--rs);background:var(--surf);color:var(--ink);font:inherit;font-size:14px;margin-bottom:9px;outline:none} .pick-search:focus{border-color:var(--blu-2)} .pick-cat{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:0;background:none;border-radius:7px;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;text-align:left} .pick-cat:hover{background:var(--blu-soft)} .pick-cat-l{flex:1;font-weight:700} .pick-n{color:var(--ink-soft);font-size:12.5px} .pick-chev{width:16px;height:16px;flex:none;transition:transform .18s;color:var(--ink-soft)} .pick-cat[aria-expanded="true"] .pick-chev{transform:rotate(180deg)} .pick-sub{display:flex;flex-direction:column;gap:2px;padding-left:10px;margin-left:6px;border-left:2px solid var(--bd)} .pick-sub[hidden]{display:none} .pick-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 11px;border:0;background:none;border-radius:7px;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;text-align:left} .pick-row:hover{background:var(--blu-soft)} .pick-dot{width:10px;height:10px;border-radius:50%;flex:none} .pick-tx{flex:1;min-width:0} .pick-nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pick-cat2{display:block;color:var(--ink-soft);font-size:12px} .pick-empty{color:var(--ink-soft);font-size:13.5px;padding:10px 11px}