/* ==========================================================================
   Fase 2 — Definisci il target, in una schermata sola
   Ultimo foglio caricato: a parita' di specificita' vince su theme-premium,
   search e target-editor, che disegnano la stessa fase a strati.

   La pagina non scorre. La colonna e' alta quanto lo spazio fra la barra in
   alto e la riga dell'informativa in basso, ed e' centrata come la home.
   L'editor dei criteri si apre in una finestra sua, quindi la colonna non
   cambia altezza. Se su uno schermo molto basso non basta, scorre la
   colonna, mai la pagina.
   ========================================================================== */

/* --- La pillola della localita': dice dove stai cercando e ti riporta li' -- */
html body #view-analysis #analysis-step-goal .step-locator {
  align-self: center;
  margin: 0 0 18px;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--motion-premium), box-shadow var(--motion-premium);
}
html body #view-analysis #analysis-step-goal .step-locator:hover {
  border-color: var(--emerald-border);
  box-shadow: 0 1px 2px rgba(11, 31, 58, .04), 0 6px 16px rgba(61, 154, 99, .10);
}
html body #view-analysis #analysis-step-goal .step-locator b {
  color: var(--pine-dark);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* --- Le schede: titolo e descrizione, senza il corpo sotto il filo --------
   Le etichette del profilo e l'elenco puntato ripetevano quello che dice gia'
   la riga "Clienti cercati e criteri" qui sotto. */
html body #view-analysis #analysis-step-goal .target-option-body { display: none; }
html body #view-analysis #analysis-step-goal .search-target-option { padding: 18px 20px; }
html body #view-analysis #analysis-step-goal .client-modes label { padding: 16px 20px; }
html body #view-analysis #analysis-step-goal :is(.search-target-selector, .client-modes) { margin: 0 0 20px; }
html body #view-analysis #analysis-step-goal :is(.search-target-selector, .client-modes) > legend { margin: 0 0 10px; }
html body #view-analysis #analysis-step-goal #client-target-editor { margin: 0 0 20px; }
html body #view-analysis #analysis-step-goal #client-target-editor > .client-target-card { padding: 16px 22px; }
html body #view-analysis #analysis-step-goal .search-config-summary { margin: 0 0 20px; }
html body #view-analysis #analysis-step-goal .location-intro { margin-bottom: 28px; }
html body #view-analysis #analysis-step-goal .location-intro > p { margin-top: 10px; }
html body #view-analysis #analysis-step-goal .analysis-preflight-warning { margin: 0 0 16px; }

/* --- La fila in fondo: raggio a sinistra, avvio a destra ------------------
   Il vecchio riepilogo ripeteva area, target e modalita', gia' scritti nella
   pillola e nelle schede. Resta l'unica cosa che non si vede altrove: il
   raggio, con la porta verso le opzioni avanzate. */
html body #view-analysis #analysis-step-goal .wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
html body #view-analysis #analysis-step-goal .target-radius {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
}
html body #view-analysis #analysis-step-goal .target-radius b {
  color: var(--navy);
  font-weight: 500;
}
html body #view-analysis #analysis-step-goal .target-radius .text-button {
  min-height: 44px;
  padding: 8px 4px;
  color: var(--pine-dark);
  background: none;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
html body #view-analysis #analysis-step-goal .target-radius .text-button::before {
  content: "·";
  margin-right: 8px;
  color: var(--muted);
  font-weight: 400;
}
html body #view-analysis #analysis-step-goal .target-radius .text-button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Il motivo per cui non si puo' ancora partire sta accanto al bottone, non
   sotto: sotto allungava la colonna proprio quando serviva spazio. */
html body #view-analysis #analysis-step-goal .submit-action,
html body #view-analysis #analysis-step-goal .submit-action.is-mobile-pinned {
  flex-direction: row-reverse;
  align-items: center;
  gap: 14px;
}
html body #view-analysis #analysis-step-goal #start-requirements:not([hidden]) {
  max-width: 280px;
  text-align: right;
}

/* --- Una schermata sola -------------------------------------------------- */
@media (min-width: 901px) {
  /* Con l'avviso di configurazione in cima la colonna non ci sta: in quel
     caso raro la pagina torna a scorrere invece di tagliare il bottone. */
  html:has(#view-analysis.is-active #analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))):not(:has(#analysis-availability:not(.is-hidden))) {
    overflow: hidden;
  }
  /* 56px sotto: la riga dell'informativa e' fissa in fondo e non deve
     finire sopra il bottone. */
  html body[data-active-view="analysis"]:has(#view-analysis.is-active #analysis-step-goal.is-active) .app-main {
    padding-bottom: 56px;
  }
  html body #view-analysis #analysis-step-goal .recurring-target-layout.premium-split {
    box-sizing: border-box;
    height: calc(100dvh - var(--header-height) - 28px - 56px);
    min-height: 0;
    justify-content: center;
    justify-content: safe center;
  }
  /* Lo scorrimento di riserva taglierebbe ai lati l'ombra della scheda
     scelta e il contorno del focus: il contenitore sborda di 28px per parte
     e li restituisce col padding, cosi' il contenuto resta dov'era. */
  html body #view-analysis #analysis-step-goal .recurring-target-main {
    box-sizing: border-box;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 100%;
    margin: 0 -28px;
    padding: 4px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Una colonna flex sola: i due involucri intermedi non fanno scatola,
     cosi' i figli si dividono lo spazio direttamente. */
  html body #view-analysis #analysis-step-goal .recurring-target-main :is(.location-hero-block, .location-step-main) {
    display: contents;
  }
  html body #view-analysis #analysis-step-goal .recurring-target-main > *,
  html body #view-analysis #analysis-step-goal .location-step-main > * {
    flex: none;
  }
  /* L'editor dei criteri non cede piu' spazio: si apre in una finestra sua
     (target-editor.css), e qui resta un riquadro alto una riga. */
}

/* Schermi bassi (portatili da 768px): stessa schermata, piu' stretta. Via il
   sottotitolo e le domande sopra le schede, che le schede dicono da sole;
   restano per chi legge con lo schermo. */
@media (min-width: 901px) and (max-height: 820px) {
  html body #view-analysis #analysis-step-goal .step-locator { margin-bottom: 14px; }
  html body #view-analysis #analysis-step-goal .location-intro { margin-bottom: 20px; }
  html body #view-analysis #analysis-step-goal .location-intro h1 { font-size: clamp(30px, 2.8vw, 38px); }
  html body #view-analysis #analysis-step-goal .location-intro > p { display: none; }
  html body #view-analysis #analysis-step-goal :is(.search-target-selector, .client-modes) > legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  html body #view-analysis #analysis-step-goal .search-target-option { padding: 14px 18px; }
  html body #view-analysis #analysis-step-goal .client-modes label { padding: 12px 18px; }
  html body #view-analysis #analysis-step-goal :is(.search-target-selector, .client-modes, #client-target-editor, .search-config-summary) { margin-bottom: 14px; }
  html body #view-analysis #analysis-step-goal #client-target-editor > .client-target-card { padding: 12px 20px; }
  html body #view-analysis #analysis-step-goal .wizard-actions { padding-top: 14px; }
}

/* Sul telefono le schede vanno in colonna e non ci stanno in una schermata:
   li' la pagina scorre come prima. La pillola tiene "Modifica", che ora e'
   l'unico ritorno alla localita'. */
@media (max-width: 650px) {
  html body #view-analysis #analysis-step-goal .step-locator b { display: inline; }
  html body #view-analysis #analysis-step-goal .wizard-actions { flex-direction: column; align-items: stretch; }
  html body #view-analysis #analysis-step-goal .submit-action,
  html body #view-analysis #analysis-step-goal .submit-action.is-mobile-pinned { flex-direction: column; align-items: stretch; }
  html body #view-analysis #analysis-step-goal #start-requirements:not([hidden]) { max-width: none; text-align: left; }
}