/* ============================================================
   STOCK-LIST.CSS - pagina consultazione /stock_list/.
   Dipende da tokens.css + main.css. Riusa .ct-input/.ct-label/.btn.
   ============================================================ */

.page-hero__title { margin-top: var(--space-md); max-width: 16ch; }
.page-lead { margin-top: var(--space-lg); color: var(--text-2); line-height: var(--lh-prose); max-width: 58ch; }

/* --- Gate: form password centrato --- */
.sl-gate {
    max-width: 26rem; margin-inline: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04));
}
.sl-gate__title { color: var(--text-1); }
.sl-gate__hint { margin-top: var(--space-xs); color: var(--text-2); font-size: .95rem; }
.req { color: var(--bronze); }

.sl-form { margin-top: var(--space-lg); display: flex; flex-direction: column; }
.sl-form .ct-label { font-size: .9rem; font-weight: 600; color: var(--text-1); margin-bottom: var(--space-2xs); }
.sl-submit { margin-top: var(--space-lg); width: 100%; justify-content: center; }

/* --- Alert --- */
.sl-alert { margin-top: var(--space-md); padding: .8rem 1rem; border-radius: var(--radius); font-size: .95rem; }
.sl-alert--error { background: color-mix(in oklch, #b3261e 8%, var(--bg)); border: 1px solid #b3261e; color: #7a1a15; }

/* --- Panel (area riservata dopo login) --- */
.sl-panel { max-width: 60rem; margin-inline: auto; }
.sl-panel__top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-lg); flex-wrap: wrap;
}
.sl-intro { max-width: 52ch; color: var(--text-1); line-height: var(--lh-prose); font-size: 1.05rem; }
.sl-logout {
    flex-shrink: 0; font-size: .9rem; color: var(--text-2); text-decoration: none;
    border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease-expo), border-color var(--dur-fast) var(--ease-expo);
}
.sl-logout:hover { color: var(--bronze); border-bottom-color: var(--bronze); }

.sl-info { margin-top: var(--space-xl); }
.sl-info__label { color: var(--text-2); margin-bottom: var(--space-sm); }
.sl-info__list { margin: 0; padding-left: 1.2rem; color: var(--text-2); line-height: var(--lh-prose); }
.sl-info__list li { margin-bottom: var(--space-2xs); }
.sl-info__list strong { color: var(--text-1); }

.sl-arrow { display: flex; justify-content: center; color: var(--bronze); margin: var(--space-xl) 0 var(--space-lg); }
.sl-arrow svg { width: 30px; height: 30px; }

/* --- Scelta listini --- */
.sl-choices {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: var(--space-md);
}
.sl-choice {
    flex: 1 1 clamp(14rem, 40%, 22rem);
    flex-direction: column; gap: .25rem;
    text-align: center;
    padding-block: 1.1rem;
    font-size: 1.15rem;
}
.sl-choice__meta { font-size: var(--fs-small); font-weight: 400; }
/* Stato "non ancora disponibile": era testo bianco su bronzo al 32% (≈1.8:1, illeggibile).
   Ora fondo neutro e testo scuro: si legge, e resta chiaramente inattivo grazie al
   bordo tratteggiato invece che al colore sbiadito. */
.sl-choice--off {
    background: var(--surface);
    border: 1px dashed var(--text-3, var(--text-2));
    color: var(--text-2); cursor: not-allowed; pointer-events: none;
}

.sl-or { text-align: center; color: var(--text-2); margin: var(--space-lg) 0 var(--space-sm); }
.sl-calc { display: flex; justify-content: center; }
/* Era bianco su bronzo al 45% (≈2:1, sotto anche la soglia 3:1 del testo grande).
   Bronzo pieno + --on-bronze è la coppia già validata altrove nel sito (5.93:1). */
.sl-calc__btn {
    background: var(--bronze);
    border: 1px solid transparent; color: var(--on-bronze);
}
.sl-calc__btn:hover { background: var(--bronze-dark); }

@media (max-width: 560px) {
    .sl-choices { flex-direction: column; }
    .sl-choice { flex-basis: auto; }
    .sl-panel__top { flex-direction: column; gap: var(--space-md); }
}