/* ==========================================================================
   Lanterna Service — sopralluogo e informativa nello stile della home 2026.
   Si carica dopo gli altri fogli e cambia solo caratteri e colori:
   Syne per i titoli, Geist per il resto (gli stessi caratteri della home),
   fondo avorio, inchiostro ardesia, accento oro e la luce ambra del faro.
   ========================================================================== */

@font-face { font-family: 'Syne'; src: url(../fonts/syne.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Geist'; src: url(../fonts/geist.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --night-bg: 11 18 26;      /* ardesia #0B121A */
  --night-fg: 238 234 227;   /* marmo #EEEAE3 */
  --night-acc: 235 211 160;  /* oro chiaro #EBD3A0 */
  --day-bg: 245 241 234;     /* avorio #F5F1EA */
  --day-fg: 11 18 26;
  --day-acc: 156 113 40;     /* oro scuro #9C7128, leggibile sull'avorio */
  --ice: 251 249 245;
  --deep: 11 18 26;
  --ambra: 227 162 58;       /* la luce della Lanterna */
  --display: 'Syne', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* etichette: come nella home, maiuscoletto spaziato invece del monospazio */
.mono, .eyebrow { letter-spacing: .26em; font-weight: 500; }
.eyebrow { font-size: 11.5px; color: rgb(var(--acc)); }
@media (max-width: 420px) { .eyebrow { font-size: 11px; letter-spacing: .16em; } }
.eyebrow__line::after { background: rgb(var(--ambra)); box-shadow: 0 0 10px 3px rgb(var(--ambra) / .5); }
[data-tone="day"]::after { background: radial-gradient(closest-side, rgb(var(--ambra) / .1), rgb(var(--ambra) / 0)); }

/* marchio come nel menu della home */
.brand__logo { filter: none; }
.brand__name { font-weight: 600; font-size: 14px; letter-spacing: .16em; }
.brand__sub { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .6; margin-top: 4px; }

/* titoli in Syne, come nella home: la parola in evidenza più leggera e in oro */
.sl-q, .pv-title { font-weight: 500; letter-spacing: -.04em; line-height: .98; }
.sl-q { font-size: clamp(2.3rem, 9.6vw, 4.2rem); }
.sl-done .sl-q { font-size: clamp(2.8rem, 12.6vw, 5.4rem); }
.pv-title { font-size: clamp(2.5rem, 8vw, 4.2rem); }
.sl-q em, .pv-title em { font-style: normal; font-weight: 400; color: rgb(var(--acc)); }
.pv-main h2 { font-weight: 500; font-size: 22px; letter-spacing: -.02em; line-height: 1.15; }
.sl-quip { font-weight: 400; font-size: 15px; letter-spacing: -.01em; }
.sl-card { font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.sl-row__t { font-weight: 500; font-size: 19px; letter-spacing: -.02em; }
.sl-day b { font-weight: 500; font-size: 26px; letter-spacing: -.02em; }
@media (min-width: 720px) { .sl-card { font-size: 20px; } }
.brand__name { font-family: var(--display); }

/* superfici: carte avorio chiaro su avorio, scelte in ardesia */
.sl-card, .sl-row, .sl-day { background: rgb(var(--ice)); box-shadow: inset 0 0 0 1px rgb(var(--fg) / .1); }
.sl-card.is-picked, .sl-row.is-picked, .sl-day.is-picked { background: rgb(var(--night-bg)); }
.sl-card.is-picked { box-shadow: 0 24px 40px -24px rgb(11 18 26 / .55); }
.sl-go { background: rgb(var(--night-bg)); }
.sl-go::after { background: linear-gradient(105deg, transparent 30%, rgb(255 236 200 / .28) 48%, transparent 66%); }
.sl-go i { color: rgb(255 226 176); }

/* il faro in alto: luce calda, come il fascio della home */
.sl {
  background:
    radial-gradient(90% 55% at 88% -5%, rgb(var(--ambra) / calc(.05 + var(--glow) * .2)), transparent 70%),
    rgb(var(--day-bg));
}
.sl-lamp__beam::before { background: #FFF3DC; box-shadow: 0 0 calc(6px + var(--glow) * 18px) calc(2px + var(--glow) * 6px) rgb(var(--ambra) / .75); }
.sl-lamp__beam i { background: linear-gradient(to right, rgb(var(--ambra) / .85), rgb(var(--ambra) / .28) 60%, rgb(var(--ambra) / 0)); }
@keyframes lampflash { 0%, 100% { filter: none; } 20%, 60% { filter: brightness(1.35) drop-shadow(0 0 12px rgb(227 162 58)); } 40% { filter: none; } }
.sl-quip { color: rgb(var(--acc)); }

/* arrivo dalla home: il velo che si ritira è avorio, come la luce che si posa nella home */
.sl-veil { background: radial-gradient(circle at 50% 40%, #FFFDF8 0, #F8F4EC 30%, rgb(var(--day-bg)) 60%); }

/* informativa */
.pv-main a.link { color: rgb(var(--acc)); }
.pv-main section { border-top-color: rgb(var(--fg) / .12); }

/* il faro in alto: disegno nuovo della Lanterna e fascio che parte esattamente dalla lampada
   (nel disegno la lampada è in 50,37 su 100×300: con la torre larga 40 px cade a 20 px dal bordo sinistro e a 19 px dall'alto) */
.sl-lamp { display: block; position: relative; height: 132px; padding: 0; }
.sl-lamp__tower { position: absolute; left: var(--gutter); top: 4px; width: 40px; height: 120px; }
.sl-lamp__beam { position: absolute; left: calc(var(--gutter) + 20px); right: var(--gutter); top: -1px; height: 40px; margin: 0; flex: none; }
.sl-lamp__beam::before { left: -4px; }
.sl-lamp__beam i { left: 0; }
.sl-quip { left: calc(var(--gutter) + 58px); bottom: 10px; }

/* ---------- tutto in una schermata: ogni passo della prenotazione sta nello schermo, senza scorrere ----------
   (qui per la pagina del sopralluogo; la prenotazione della home lo eredita da _strumenti/genera-prenota-home.py) */
.sl-top { height: 56px; }
.sl-stage { padding-top: 8px; padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
.sl-step .eyebrow { margin-bottom: 10px; }
.sl-q { font-size: clamp(1.75rem, 7.6vw, 3rem); line-height: 1; }
.sl-done .sl-q { font-size: clamp(2.2rem, 10vw, 3.6rem); }
.sl-hint { margin: 8px 0 16px; font-size: 14.5px; }
.sl-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sl-card { min-height: 96px; padding: 12px; gap: 10px; border-radius: 14px; font-size: 14.5px; letter-spacing: -.02em; }
.sl-card svg { width: 32px; height: 32px; }
.sl-list { gap: 7px; }
.sl-row { min-height: 54px; }
.sl-row__t { font-size: 17px; }
.sl-day { width: 60px; height: 70px; }
.sl-day b { font-size: 22px; }
.sl-slots { margin-top: 12px; }
.sl-chip { min-height: 44px; }
.sl-form { gap: 12px; margin-top: 8px; }
.sl-form .field input { min-height: 52px; padding: 22px 0 8px; font-size: 16px; }   /* 16 px: l'iPhone non ingrandisce la pagina */
.sl-form .field label { top: 20px; font-size: 16px; }
.sl-form .check { font-size: 13.5px; line-height: 1.45; }
.sl-go { height: 52px; }
.sl-summary { margin: 2px 0 16px; }
.sl-summary div { padding: 7px 0; }
.sl-summary dd { font-size: 14.5px; }
.sl-nav { padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
/* il faro in alto più basso: torre 24 × 72, lampada a 12 px dal bordo e a 13 px dall'alto, il fascio parte da lì */
.sl-lamp { height: 82px; }
.sl-lamp__tower { width: 24px; height: 72px; }
.sl-lamp__beam { left: calc(var(--gutter) + 12px); top: -7px; }
.sl-quip { left: calc(var(--gutter) + 40px); bottom: 8px; }
@media (max-width: 719px) {
  .sl-step .eyebrow { display: none; }   /* ripete quello che c'è già in alto */
}
@media (max-width: 719px) and (max-height: 720px) {
  .sl-lamp { height: 70px; }
  .sl-q { font-size: clamp(1.55rem, 6.8vw, 1.9rem); }
  .sl-hint { margin: 6px 0 12px; }
  .sl-card { min-height: 84px; gap: 6px; }
  .sl-card svg { width: 28px; height: 28px; }
  .sl-row { min-height: 48px; }
  .sl-form { gap: 8px; }
  .sl-form .field input { min-height: 48px; padding: 20px 0 6px; }
  .sl-form .field label { top: 18px; }
  .sl-summary div { padding: 5px 0; }
}
@media (min-width: 720px) {
  .sl-card { min-height: 118px; padding: 16px; font-size: 17px; }
  .sl-card svg { width: 38px; height: 38px; }
  .sl-row { min-height: 58px; }
}
/* riepilogo su due colonne dal computer: 4 righe invece di 7 */
@media (min-width: 720px) {
  .sl-summary { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
/* telefono: carte, righe e campi crescono con l'altezza dello schermo (compatti sui bassi, ariosi sugli alti), sempre in una schermata */
@media (max-width: 719px) {
  .sl-card { min-height: clamp(84px, 13svh, 124px); }
  .sl-card svg { width: clamp(28px, 4.2svh, 38px); height: clamp(28px, 4.2svh, 38px); }
  .sl-row { min-height: clamp(48px, 7.2svh, 64px); }
  .sl-list { gap: clamp(6px, 1.1svh, 10px); }
  .sl-day { height: clamp(66px, 9.6svh, 84px); }
  .sl-form { gap: clamp(8px, 1.8svh, 18px); }
  .sl-summary div { padding: clamp(5px, 1.1svh, 10px) 0; }
  .sl-hint { margin-bottom: clamp(12px, 2.4svh, 22px); }
}
/* il nome della scelta resta su una riga («Molto grande», «Ogni due settimane») */
.sl-row__t { white-space: nowrap; }
@media (max-width: 719px) { .sl-row { gap: 10px; padding-right: 14px; } }