/* ============================================================================
   Pagine pubbliche senza shell: informativa cookie prima del login, survey
   MBO e Soft skills compilate dagli store, demo scaduta.
   Sistema grafico v2 (contratto in DESIGN.md): token da storehub_ds_v2.css.
   ============================================================================ */

body.public-shell{
  min-height: 100vh;
  margin: 0;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--app-font-ui);
}

/* ---- Barra superiore -------------------------------------------------------- */
.public-topbar{
  background: var(--app-sidebar);
  color: var(--app-sidebar-text);
}
.public-topbar__inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}
.public-topbar__brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: #f4f5f7; }
.public-topbar__brand:hover{ color: #f4f5f7; text-decoration: none; }
.public-topbar__brand img{ width: 28px; height: 28px; border-radius: var(--app-radius-sm); display: block; }
.public-topbar__name{ font-weight: 600; font-size: var(--fs-md); letter-spacing: -.01em; }
.public-topbar__meta{ font-size: var(--fs-sm); color: var(--app-sidebar-muted); }
.public-topbar .btn-outline-light{
  border-color: rgba(255,255,255,.35);
  color: #f4f5f7;
}
.public-topbar .btn-outline-light:hover{ background: var(--app-sidebar-soft); border-color: rgba(255,255,255,.5); color: #f4f5f7; }

.public-main{ max-width: 980px; margin: 0 auto; padding: 24px 16px 48px; }
.public-main--narrow{ max-width: 760px; }

/* ---- Riquadri ---------------------------------------------------------------- */
.public-card, .survey-band, .mbo-survey-band{
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  padding: 20px 24px;
}
.public-card + .public-card, .survey-band + .survey-band, .mbo-survey-band + .mbo-survey-band{ margin-top: 16px; }
.public-card h1, .survey-band h1, .mbo-survey-band h1{ font-size: var(--fs-xl); margin: 0 0 4px; }
.public-card h2, .survey-band h2, .mbo-survey-band h2{ font-size: var(--fs-lg); margin: 0 0 4px; }
.public-note{
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  color: var(--app-text-muted);
  font-size: var(--fs-md);
  line-height: 1.5;
}

/* Demo scaduta: unico riquadro centrato */
.public-shell--center{ display: flex; align-items: center; justify-content: center; padding: 24px; }
.public-shell--center .public-card{ max-width: 460px; width: 100%; }
.public-shell--center p{ margin: 0; color: var(--app-text-muted); line-height: 1.5; }

/* ---- Survey: domande e risposte --------------------------------------------- */
.survey-question, .mbo-survey-section{
  border-top: 1px solid var(--app-border);
  padding-top: 16px;
  margin-top: 16px;
}
.survey-question .form-label{ margin-bottom: 2px; }
.survey-question__category{ font-size: var(--fs-sm); color: var(--app-text-muted); margin-bottom: 8px; }
.mbo-survey-grid{ display: flex; flex-direction: column; gap: 10px; }
.mbo-survey-question{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: 12px 24px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--app-border);
}
.mbo-survey-question:last-child{ border-bottom: 0; }
.mbo-survey-question .form-label{ margin: 0; }
.mbo-survey-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

/* Scelte: riquadri selezionabili, uno scelto in inchiostro */
.survey-choice-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.survey-choice-grid--score, .mbo-survey-score{ display: grid; grid-template-columns: repeat(4, minmax(48px, 1fr)); gap: 6px; }
.survey-choice-grid input, .mbo-survey-score input{ position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.survey-choice-grid label, .mbo-survey-score label{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  color: var(--app-text);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.survey-choice-grid--score label, .mbo-survey-score label{ font-family: var(--app-font-mono); font-size: var(--fs-lg); }
.survey-choice-grid label:hover, .mbo-survey-score label:hover{ background: var(--app-surface-soft); border-color: var(--app-text-subtle); }
.survey-choice-grid input:focus-visible + label, .mbo-survey-score input:focus-visible + label{ box-shadow: var(--app-focus-ring); border-color: var(--app-accent); }
.survey-choice-grid input:checked + label, .mbo-survey-score input:checked + label{
  background: var(--app-ink);
  border-color: var(--app-ink);
  color: var(--app-ink-contrast);
  font-weight: 600;
}
.survey-choice-grid input:checked + label:active, .mbo-survey-score input:checked + label:active{ background: var(--app-ink-hover); }

/* Scala 1-4: il valore scelto porta il colore semantico (soft), gli altri restano neutri */
.survey-choice-grid--score input[value="1"]:checked + label, .mbo-survey-score input[value="1"]:checked + label{ background: var(--app-danger); border-color: var(--app-danger); }
.survey-choice-grid--score input[value="2"]:checked + label, .mbo-survey-score input[value="2"]:checked + label{ background: var(--app-warning); border-color: var(--app-warning); }
.survey-choice-grid--score input[value="3"]:checked + label, .mbo-survey-score input[value="3"]:checked + label{ background: var(--app-accent); border-color: var(--app-accent); }
.survey-choice-grid--score input[value="4"]:checked + label, .mbo-survey-score input[value="4"]:checked + label{ background: var(--app-success); border-color: var(--app-success); }
.survey-scale-hint{ display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--app-text-subtle); margin-top: 4px; }

/* Store aggiuntivi (ruolo Multistore) */
.mbo-extra-store{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 8px; }
.mbo-extra-store button{ min-width: 40px; }
.mbo-multistore-help{ display: none; }
.mbo-multistore-help.is-visible{ display: block; }

.public-actions{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--app-border); }

@media (max-width: 767.98px){
  .public-card, .survey-band, .mbo-survey-band{ padding: 16px; }
  .public-main{ padding: 16px 16px 40px; }
  .survey-choice-grid{ grid-template-columns: 1fr; }
  .survey-choice-grid--score{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mbo-survey-question{ grid-template-columns: 1fr; gap: 8px; }
  .mbo-survey-top{ flex-direction: column; }
  .public-actions .btn{ width: 100%; }
}