/* ==========================================================================
   Lanterna Service — pagina del sopralluogo.
   Cinque domande, una risposta per tocco. Ogni risposta allunga il fascio del
   faro in alto; alla fine il faro lampeggia. Mobile first.
   ========================================================================== */

.sl {
  --glow: 0;                 /* 0 → 1 man mano che si risponde */
  min-height: 100svh; display: flex; flex-direction: column;
  background:
    radial-gradient(90% 55% at 88% -5%, rgb(140 214 245 / calc(.08 + var(--glow) * .32)), transparent 70%),
    rgb(var(--day-bg));
  transition: background .8s;
  overflow-x: clip;
}
.sl .touchfx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 140; pointer-events: none; }

/* arrivo dalla home: la luce che aveva coperto la pagina si ritira */
.sl-veil {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, #F1F8FC 0, #DDEEF8 22%, #F6F9FB 60%);
  clip-path: circle(150% at 50% 40%);
  transition: clip-path .8s cubic-bezier(.7, 0, .3, 1);
}
.sl-veil.is-gone { clip-path: circle(0 at 50% 40%); }

/* ---------- Barra in alto ---------- */
.sl-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) var(--gutter) 0; height: 64px; box-sizing: content-box;
}
.sl-back { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.sl-back > span:first-child { font-size: 18px; transition: transform .5s var(--ease); }
.sl-back:hover > span:first-child { transform: translateX(-4px); }
.sl-back__brand { display: grid; line-height: 1; }
.sl-back .brand__logo { height: 36px; }
.sl-count { color: rgb(var(--fg) / .55); font-variant-numeric: tabular-nums; }

/* ---------- Il faro e il suo fascio ---------- */
.sl-lamp { position: relative; display: flex; align-items: center; gap: 4px; padding: 6px var(--gutter) 0; height: 92px; }
.sl-lamp__tower { width: 24px; height: 72px; flex: none; color: rgb(var(--fg)); overflow: visible; }
.sl-lamp__tower::after { content: ''; }
.sl-lamp__beam { position: relative; flex: 1; height: 40px; margin-top: -42px; }
.sl-lamp__beam::before { /* la lampada */
  content: ''; position: absolute; left: -16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: #DDF3FF; box-shadow: 0 0 calc(6px + var(--glow) * 18px) calc(2px + var(--glow) * 6px) rgb(140 214 245 / .8);
  transition: box-shadow .8s;
}
.sl-lamp__beam i {
  position: absolute; left: -12px; top: 0; bottom: 0; width: calc(var(--b, 0) * 1%);
  background: linear-gradient(to right, rgb(28 150 210 / .9), rgb(60 175 230 / .3) 60%, rgb(60 175 230 / 0));
  clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 54%);
  transition: width 1s var(--ease);
}
.sl.is-flash .sl-lamp__beam i { animation: lampflash 1.4s var(--ease); }
@keyframes lampflash { 0%, 100% { filter: none; } 20%, 60% { filter: brightness(1.6) drop-shadow(0 0 12px rgb(60 175 230)); } 40% { filter: none; } }
.sl-quip {
  position: absolute; left: calc(var(--gutter) + 34px); right: var(--gutter); bottom: 2px;
  font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.02em; color: rgb(var(--acc));
  opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .6s var(--ease);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-quip.is-on { opacity: 1; transform: none; }

/* ---------- Le domande ---------- */
.sl-stage { flex: 1; display: grid; padding: 18px var(--gutter) calc(96px + env(safe-area-inset-bottom)); overflow-x: clip; overflow-clip-margin: 0; }
.sl-step {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; visibility: hidden; transform: translate3d(48px, 0, 0); pointer-events: none;
  transition: opacity .45s, transform .7s var(--ease), visibility 0s .7s;
}
.sl-step.is-past { transform: translate3d(-48px, 0, 0); }
.sl-step.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .6s .12s, transform .8s .08s var(--ease), visibility 0s; }
.sl-step .eyebrow { margin-bottom: 16px; }
.sl-q { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 9.2vw, 3.8rem); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.sl-q em { color: rgb(var(--acc)); }
.sl-q:focus { outline: none; } /* riceve il focus solo per gli screen reader, a ogni domanda */
.sl-hint { margin: 14px 0 26px; color: rgb(var(--fg) / .62); font-size: 15.5px; }

/* card dello spazio */
.sl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sl-card {
  position: relative; display: grid; align-content: space-between; justify-items: start; gap: 14px;
  min-height: 128px; padding: 16px; border-radius: 16px; text-align: left;
  background: rgb(255 255 255 / .72); box-shadow: inset 0 0 0 1px rgb(var(--fg) / .1);
  font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.08; letter-spacing: -.03em;
  transition: transform .5s var(--ease), background-color .4s, color .4s, box-shadow .4s;
}
.sl-card svg { width: 46px; height: 46px; color: rgb(var(--acc)); }
.sl-card svg * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sl-card:active { transform: scale(.96); }
.sl-card.is-picked { background: #081B2E; color: rgb(var(--night-fg)); box-shadow: 0 24px 40px -24px rgb(5 10 18 / .6); }
.sl-card.is-picked svg { color: rgb(var(--night-acc)); }
.sl-card.is-picked svg * { animation: redraw 1s var(--ease-io); }
@keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (hover: hover) { .sl-card:hover { box-shadow: inset 0 0 0 1px rgb(var(--fg) / .35); } }

/* righe: misura e frequenza */
.sl-list { display: grid; gap: 8px; }
.sl-row {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px;
  min-height: 66px; padding: 0 18px 0 14px; border-radius: 16px; text-align: left;
  background: rgb(255 255 255 / .72); box-shadow: inset 0 0 0 1px rgb(var(--fg) / .1);
  transition: transform .5s var(--ease), background-color .4s, color .4s;
}
.sl-row:active { transform: scale(.98); }
.sl-row__t { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.03em; }
.sl-row__m { color: rgb(var(--fg) / .5); font-size: 10px; }
.sl-row.is-picked { background: #081B2E; color: rgb(var(--night-fg)); }
.sl-row.is-picked .sl-row__m { color: rgb(var(--night-acc)); }
.sl-row__box { width: 34px; height: 34px; display: grid; place-items: end start; border: 1px dashed rgb(var(--fg) / .25); border-radius: 3px; }
.sl-row.is-picked .sl-row__box { border-color: rgb(var(--night-fg) / .3); }
.sl-row__box i { display: block; background: rgb(var(--acc)); border-radius: 2px; transition: transform .6s var(--ease); }
.sl-row[data-scale="1"] .sl-row__box i { width: 30%; height: 30%; }
.sl-row[data-scale="2"] .sl-row__box i { width: 52%; height: 52%; }
.sl-row[data-scale="3"] .sl-row__box i { width: 76%; height: 76%; }
.sl-row[data-scale="4"] .sl-row__box i { width: 100%; height: 100%; }
.sl-row.is-picked .sl-row__box i { background: rgb(var(--night-acc)); }
.sl-row__dots { display: flex; gap: 4px; }
.sl-row__dots::before { content: ''; }
.sl-row__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--fg) / .15); }
.sl-row__dots i.on { background: rgb(var(--acc)); }
.sl-row.is-picked .sl-row__dots i.on { background: rgb(var(--night-acc)); box-shadow: 0 0 8px rgb(var(--night-acc) / .7); }

/* giorni e momenti */
.sl-days { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 10px; scrollbar-width: none; }
.sl-days::-webkit-scrollbar { display: none; }
.sl-day {
  flex: none; scroll-snap-align: start; width: 66px; height: 84px; border-radius: 16px; display: grid; place-content: center; justify-items: center; gap: 4px;
  background: rgb(255 255 255 / .72); box-shadow: inset 0 0 0 1px rgb(var(--fg) / .1);
  transition: transform .5s var(--ease), background-color .4s, color .4s;
}
.sl-day:active { transform: scale(.95); }
.sl-day .mono { font-size: 9.5px; color: rgb(var(--fg) / .55); }
.sl-day b { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -.03em; }
.sl-day.is-picked { background: #081B2E; color: rgb(var(--night-fg)); }
.sl-day.is-picked .mono { color: rgb(var(--night-acc)); }
.sl-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; opacity: .45; transition: opacity .4s; pointer-events: none; }
.sl-slots.is-ready { opacity: 1; pointer-events: auto; }
.sl-chip { min-height: 48px; padding: 0 20px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgb(var(--fg) / .22); font-size: 15px; transition: background-color .4s, color .4s, transform .4s var(--ease); }
.sl-chip:active { transform: scale(.96); }
.sl-chip.is-picked { background: rgb(var(--fg)); color: rgb(var(--bg)); box-shadow: none; }

/* modulo finale */
.sl-form { display: grid; gap: 24px; margin-top: 22px; }
.sl-go {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; height: 58px; padding: 0 26px; border-radius: 99px; margin-top: 4px;
  background: #081B2E; color: rgb(var(--night-fg)); font-size: 16px; font-weight: 500;
  transition: transform .5s var(--ease);
}
.sl-go::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgb(140 214 245 / .35) 48%, transparent 66%); transform: translateX(-120%); animation: goglint 3.2s var(--ease) 1s infinite; }
@keyframes goglint { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.sl-go i { font-style: normal; color: rgb(var(--night-acc)); }
.sl-go:active { transform: scale(.97); }
.sl-msg { min-height: 1.4em; font-size: 14.5px; color: rgb(var(--fg) / .75); }
.sl-msg.is-bad { color: #B23A34; }

/* fatto */
.sl-done .sl-q { font-size: clamp(2.8rem, 13vw, 5.4rem); }
.sl-done__burst { position: absolute; left: 50%; top: 20%; width: 1px; height: 1px; pointer-events: none; }
.sl-summary { display: grid; margin: 4px 0 26px; border-top: 1px solid rgb(var(--fg) / .12); }
.sl-summary div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgb(var(--fg) / .12); }
.sl-summary dt { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--fg) / .5); padding-top: 3px; }
.sl-summary dd { text-align: right; font-size: 15.5px; }
.sl-home { margin-top: 18px; color: rgb(var(--fg) / .7); }
.sl.is-done .sl-nav { opacity: 0; pointer-events: none; }
.sl.is-done .sl-count { opacity: 0; }

/* ---------- Navigazione in basso ---------- */
.sl-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgb(var(--day-bg)) 60%, rgb(var(--day-bg) / 0));
  transition: opacity .4s;
}
.sl-prev { min-height: 44px; padding: 0 4px; font-size: 15px; color: rgb(var(--fg) / .7); transition: opacity .3s; }
.sl-prev[disabled] { opacity: 0; pointer-events: none; }
.sl-dots { display: flex; gap: 6px; }
.sl-dots i { width: 22px; height: 3px; border-radius: 2px; background: rgb(var(--fg) / .14); transition: background-color .4s, width .5s var(--ease); }
.sl-dots i.on { background: rgb(var(--acc)); }
.sl-dots i.now { width: 34px; background: rgb(var(--fg)); }

@media (min-width: 720px) {
  .sl-stage, .sl-lamp { width: 100%; max-width: 680px; margin-inline: auto; }
  .sl-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .sl-card { min-height: 150px; font-size: 20px; padding: 20px; }
  .sl-nav { max-width: 680px; margin: 0 auto; background: none; }
  .sl-go { width: auto; justify-self: start; min-width: 300px; }
}

/* 03/11: tolto il blocco «riduci movimento»: animato per tutti */