/* use-cases: the cases made on the visitor's company. On the cases page's glass: the sectors as pills, the company field
   with its suggestions; below, on the day: the cases as scenario-columns that open on a click, the 24 hours, the demo.
   The home's cases section has the same block on the day (.uc-scelta-home, its pills those of scenario-columns).
   While the AI writes, the edges of the screen glow as Apple Intelligence does. Needs ../base/base.css and
   ../scenario-columns/scenario-columns.css. */

/* ---------- the choice, on the glass */
.uc-scelta{display:grid;justify-items:center;gap:12px;margin-top:clamp(32px,4vw,48px)}
.uc-dom,.uc-domanda{font-size:calc(15 * var(--px));font-weight:560;color:var(--ink-2);text-align:center}
.uc-settori{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:780px}
.uc-settori button{min-height:42px;padding:0 18px;border:0;border-radius:999px;background:oklch(100% 0 0/.08);box-shadow:inset 0 0 0 1px oklch(100% 0 0/.18);color:var(--ink);font:inherit;font-size:calc(15 * var(--px));font-weight:560;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.uc-settori button:hover{background:oklch(100% 0 0/.15)}
.uc-settori button:active{transform:scale(.95)}
.uc-settori button[aria-checked="true"]{background:oklch(100% 0 0);color:oklch(20% .05 262);box-shadow:0 10px 30px -12px oklch(100% 0 0/.5)}
/* «Altro» opened: a white pill with a field and the arrow */
.uc-tipo{display:flex;align-items:center;gap:4px;height:42px;padding:0 4px 0 18px;border-radius:999px;background:oklch(100% 0 0);box-shadow:0 10px 30px -12px oklch(100% 0 0/.5);animation:uc-apre .35s var(--e-esce)}
.uc-tipo[hidden]{display:none}
@keyframes uc-apre{from{opacity:0;transform:translateX(-8px)}}
.uc-tipo input{width:15ch;min-width:0;height:100%;border:0;background:none;color:oklch(20% .05 262);font:inherit;font-size:16px;font-weight:560;outline:none}   /* 16px: under it a phone zooms in on the field */
.uc-tipo input::placeholder{color:oklch(55% .03 262)}
.uc-settori .uc-tipo button,.sc-settori .uc-tipo button{display:grid;place-items:center;flex:none;width:34px;min-height:34px;height:34px;padding:0;border-radius:50%;background:oklch(20% .05 262);color:oklch(100% 0 0);box-shadow:none}
.uc-tipo button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.uc-azienda{position:relative;display:grid;gap:10px;width:min(560px,100%);margin-top:20px}
.uc-campo{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 22px;border-radius:999px;background:oklch(100% 0 0/.1);box-shadow:inset 0 0 0 1px oklch(100% 0 0/.22);-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);transition:box-shadow .2s,background .2s}
.uc-campo:focus-within{background:oklch(100% 0 0/.14);box-shadow:inset 0 0 0 1.5px oklch(100% 0 0/.5)}
.uc-campo input{flex:1;min-width:0;height:46px;border:0;background:none;color:var(--ink);font:inherit;font-size:calc(17 * var(--px));outline:none}
.uc-campo input::placeholder{color:var(--ink-3)}
.uc-campo button{flex:none;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:oklch(100% 0 0);color:oklch(20% .05 262);cursor:pointer}
.uc-campo button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
/* the suggestions hang below the glass: the hero must not cut them (.sul-vetro clips, for its canvas that never overflows
   anyway) and sits over the day section they fall onto. Radii concentric: list 24, 6 inside, rows 18, the tile 10. */
.sul-vetro:has(.uc-azienda){overflow:visible;z-index:1}
.uc-lista{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;max-height:min(440px,60vh);margin:0;padding:6px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:oklch(86% .01 262) transparent;list-style:none;border-radius:24px;background:oklch(100% 0 0);color:oklch(22% .04 262);text-align:left;box-shadow:0 0 0 1px oklch(28% .04 262/.06),0 30px 70px -24px oklch(12% .08 262/.7);transform-origin:50% 0;animation:uc-giu-lista .3s var(--e-esce)}
@keyframes uc-giu-lista{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.uc-lista li{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:8px;border-radius:18px;cursor:pointer}
.uc-lista li.on{background:oklch(95.5% .018 262)}
.uc-lista img,.uc-lista li>i{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:4px;border-radius:10px;object-fit:contain;background:oklch(100% 0 0);box-shadow:0 0 0 1px oklch(90% .012 262);font-style:normal;font-size:16px;font-weight:650;color:oklch(52% .14 262)}
.uc-lista li>i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.uc-lista span{display:grid;min-width:0}
.uc-lista b{overflow:hidden;font-size:15px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.uc-lista small{overflow:hidden;font-size:13px;color:oklch(50% .02 262);white-space:nowrap;text-overflow:ellipsis}
/* the free search, a row like the others; a hairline above it only when results come first, never on its highlight */
.uc-lista li:not(.uc-libera)+.uc-libera{margin-top:9px}
.uc-lista li:not(.uc-libera)+.uc-libera::before{content:"";position:absolute;left:12px;right:12px;top:-5px;height:1px;background:oklch(92% .01 262);pointer-events:none}
.uc-nomi{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;max-width:640px;margin-top:10px;animation:sale .6s var(--e-esce)}
.uc-nomi[hidden]{display:none}
.uc-nomi .uc-dom{flex-basis:100%;margin-bottom:4px}
.uc-nomi button{min-height:34px;padding:0 14px;border:0;border-radius:999px;background:none;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.2);color:var(--ink-2);font:inherit;font-size:calc(14 * var(--px));cursor:pointer;transition:background .2s,color .2s}
.uc-nomi button:hover{background:oklch(100% 0 0/.1);color:var(--ink)}

/* ---------- the same block in the home's cases section, on the day: the field white with a hairline, the arrow ink */
.uc-scelta-home{position:relative;z-index:2;justify-items:stretch;margin-top:clamp(28px,3vw,40px)}   /* its suggestions over the columns */
.uc-scelta-home>.sc-settori{margin-top:0}
.uc-scelta-home>.uc-azienda,.uc-scelta-home>.uc-nomi{justify-self:center}
.uc-scelta-home .uc-azienda{margin-top:12px}
.sc-settori .uc-tipo{height:40px}
.giorno .uc-tipo{box-shadow:inset 0 0 0 1px var(--riga),0 12px 30px -18px oklch(30% .08 262/.35)}
.giorno .uc-campo{background:oklch(100% 0 0);box-shadow:inset 0 0 0 1px var(--riga),0 16px 40px -26px oklch(30% .08 262/.35);-webkit-backdrop-filter:none;backdrop-filter:none}
.giorno .uc-campo:focus-within{background:oklch(100% 0 0);box-shadow:inset 0 0 0 1.5px var(--blu),0 16px 40px -26px oklch(30% .08 262/.35)}
.giorno .uc-campo button{background:var(--ink);color:var(--fondo)}
.giorno .uc-nomi button{box-shadow:inset 0 0 0 1px var(--riga);color:var(--ink-2)}
.giorno .uc-nomi button:hover{background:var(--piano);color:var(--ink)}
/* the home: the company's field is the last pill of the sectors' row, where «Altro» was, as low as the pills and growing
   as it is used (Tommi, 2026-10-03: "la barra molto meglio integrata al posto di quel chip altro"); on a phone the
   sectors slide in their row and the field takes the line under it */
.uc-riga{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.uc-riga>.sc-settori{display:contents}
.uc-riga .uc-azienda{width:auto;margin-top:0}
.uc-riga .uc-campo{height:40px;gap:8px;padding:0 4px 0 14px;box-shadow:inset 0 0 0 1px var(--riga)}
.uc-riga .uc-campo:focus-within{box-shadow:inset 0 0 0 1.5px var(--blu)}
.uc-riga .uc-campo input{width:15ch;height:100%;font-size:calc(14.5 * var(--px));font-weight:560;transition:width .45s var(--e-esce)}
.uc-riga .uc-campo input:focus,.uc-riga .uc-campo input:not(:placeholder-shown){width:24ch}
.uc-riga .uc-campo button{width:32px;height:32px}
.uc-riga .uc-campo button svg{width:15px;height:15px}
.uc-lente{flex:none;width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round}
.uc-riga .uc-lista{left:50%;right:auto;width:440px;margin-left:-220px}
@media (pointer:coarse){.uc-riga .uc-campo input{font-size:16px}}   /* under 16px a phone zooms in on the field */
@media (max-width:699px){
  .uc-riga{display:grid;justify-content:stretch}
  .uc-riga>.sc-settori{display:flex}
  .uc-riga .uc-campo input,.uc-riga .uc-campo input:focus{flex:1;width:auto}
  .uc-riga .uc-lista{left:0;right:0;width:auto;margin-left:0}
}
.uc-esito-home>.uc-testa,.uc-esito-home>.uc-pensiero,.uc-esito-home>.uc-passo:first-child,.uc-esito-home>.uc-errore{margin-top:clamp(40px,5vw,64px)}

/* ---------- what shows below */
.uc-entra{animation:sale .8s var(--e-esce) backwards}
.uc-testa{display:grid;justify-items:center;gap:14px;text-align:center}
.uc-testa .sotto{max-width:44ch}
.uc-logo img,.uc-logo i{display:grid;place-items:center;width:76px;height:76px;padding:12px;border-radius:22px;object-fit:contain;background:oklch(100% 0 0);box-shadow:0 0 0 1px var(--riga),0 20px 44px -26px var(--ombra-forte);font-style:normal;font-size:32px;font-weight:650;color:var(--blu-t)}
.uc-colonne li{display:block;min-height:0;padding:0;background:none}
.uc-colonne li button{display:grid;width:100%;padding:calc(13 * var(--px)) calc(16 * var(--px));border:0;border-radius:calc(14 * var(--px));background:var(--piano);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .2s}
.uc-colonne li button:hover{background:var(--piano-2,var(--piano))}
.uc-colonne li b{font-size:var(--t-nota);font-weight:600;line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
.uc-colonne li button>span{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--e-esce)}
.uc-colonne li button>span>span{min-height:0;overflow:hidden;font-size:calc(13.5 * var(--px));line-height:1.42;color:var(--ink-2);text-wrap:pretty}
.uc-colonne li button[aria-expanded="true"]>span{grid-template-rows:1fr}
.uc-colonne li button[aria-expanded="true"]>span>span{padding-top:6px}
.uc-prova{display:none;align-items:center;gap:7px;width:max-content;min-height:38px;margin:10px 0 4px calc(16 * var(--px));padding:0 16px 0 13px;border-radius:999px;background:var(--blu);color:var(--su-blu);font-size:calc(14 * var(--px));font-weight:600;transition:background-color .2s}   /* the call on this case, under it once it is open */
.uc-prova .play{width:15px;height:15px}
.uc-colonne li button[aria-expanded="true"]+.uc-prova{display:inline-flex}
@media (hover:hover){.uc-prova:hover{background:var(--blu-su)}}
.uc-novita{display:flex;align-items:center;gap:16px;width:min(780px,100%);margin:clamp(28px,3vw,44px) auto 0;padding:18px 22px;border-radius:22px;background:var(--fondo-2);box-shadow:inset 0 0 0 1px var(--riga)}
.uc-novita img{flex:none;width:44px;height:44px;object-fit:contain}
.uc-novita span{display:grid;gap:3px;font-size:var(--t-corpo);line-height:1.4;text-wrap:pretty}
.uc-novita b{font-size:calc(13 * var(--px));font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--blu-t)}
.uc-fine{display:flex;justify-content:center;margin-top:clamp(28px,3vw,44px)}
.uc-nota{margin-top:16px;font-size:var(--t-nota);color:var(--ink-3);text-align:center}
.uc-errore{margin-bottom:28px;color:var(--ink-2);text-align:center}

/* ---------- the ten seconds: the steps in moving colour, the columns as shimmering outlines */
.uc-pensiero{display:grid;justify-items:center;gap:clamp(28px,3vw,44px)}
.uc-passo{display:block;min-height:1.4em;margin-bottom:clamp(20px,2.4vw,32px);text-align:center;font-size:var(--t-lead);font-weight:600;letter-spacing:-.015em;background:linear-gradient(90deg,var(--ink-2) 0 28%,#0894ff 40%,#c959dd 50%,#ff2e54 60%,#ff9004 66%,var(--ink-2) 76% 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:uc-scorre 2.4s linear infinite}
.uc-passo.uc-luce{animation:uc-scorre 2.4s linear infinite,sale .55s var(--e-esce)}
@keyframes uc-scorre{from{background-position:100% 0}to{background-position:-160% 0}}
.uc-scheletro{width:100%;margin-top:0}
.uc-vuota h3 i{display:block;height:14px;border-radius:7px;background:var(--piano)}
.uc-vuota h3 i:first-child{flex:none;width:40px;height:40px;border-radius:50%}
.uc-vuota h3 i:last-child{width:50%}
.uc-vuota ul{height:calc(3 * 64 * var(--px));border-radius:calc(14 * var(--px));background:linear-gradient(100deg,var(--piano) 30%,oklch(97% .03 290) 45%,oklch(97% .03 20) 52%,var(--piano) 68%) 0 0/300% 100%;animation:uc-luccica 1.8s linear infinite}
.uc-scheletro h3 i{display:block;height:14px;border-radius:7px;background:var(--piano)}
.uc-scheletro h3 i:first-child{flex:none;width:40px;height:40px;border-radius:50%}
.uc-scheletro h3 i:last-child{width:50%}
.uc-scheletro li{min-height:calc(56 * var(--px));background:linear-gradient(100deg,var(--piano) 30%,oklch(97% .03 290) 45%,oklch(97% .03 20) 52%,var(--piano) 68%) 0 0/300% 100%;animation:uc-luccica 1.8s linear infinite}
.uc-scheletro li:nth-child(2){animation-delay:.12s}.uc-scheletro li:nth-child(3){animation-delay:.24s}.uc-scheletro li:nth-child(4){animation-delay:.36s}
@keyframes uc-luccica{from{background-position:100% 0}to{background-position:-100% 0}}

/* the edges of the screen, as Apple Intelligence: a turning ring of colour, sharp at the edge, fading inward */
@property --uc-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.uc-glow{position:fixed;inset:0;z-index:99;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .9s var(--e-esce),visibility 0s .9s}
html.uc-pensa .uc-glow{opacity:1;visibility:visible;transition:opacity .9s var(--e-esce)}
.uc-glow::before,.uc-glow::after{content:"";position:absolute;inset:0;background:conic-gradient(from var(--uc-a),#0894ff,#c959dd,#ff2e54,#ff9004,#ffd60a,#0894ff);animation:uc-giro 3.2s linear infinite paused}
html.uc-pensa .uc-glow::before,html.uc-pensa .uc-glow::after{animation-play-state:running}   /* idle, it neither turns nor paints: the home's hero stays smooth */
.uc-glow::before{--l:4px}
.uc-glow::after{--l:clamp(40px,6vw,90px);opacity:.75}
.uc-glow::before,.uc-glow::after{-webkit-mask:linear-gradient(90deg,#000,transparent var(--l) calc(100% - var(--l)),#000),linear-gradient(#000,transparent var(--l) calc(100% - var(--l)),#000);mask:linear-gradient(90deg,#000,transparent var(--l) calc(100% - var(--l)),#000),linear-gradient(#000,transparent var(--l) calc(100% - var(--l)),#000)}
@keyframes uc-giro{to{--uc-a:360deg}}

@media (max-width:699px){.uc-tipo{flex:none}.uc-settori{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;width:calc(100% + 2 * var(--gutter));max-width:none;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter);scrollbar-width:none}.uc-settori::-webkit-scrollbar{display:none}.uc-settori button{flex:none}}
@media (prefers-reduced-motion:reduce){.uc-tipo,.uc-entra,.uc-nomi,.uc-vuota ul,.uc-passo,.uc-passo.uc-luce,.uc-scheletro li,.uc-glow::before,.uc-glow::after,.uc-lista{animation:none}.uc-passo{color:var(--ink-2);background:none}}