/* ==========================================================================
   dark-factory.space — mini-calculator dell'hero (Fase 4)
   Widget precalcolato server-side: toggle = flip di classe, zero fetch.
   ========================================================================== */

/* --- Layout hero a due colonne --- */
.df-hero-grid {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
.df-hero-copy { min-width: 0; }
.df-hero-copy .df-hero-overline { margin-bottom: 18px; }
.df-hero-widget-col { min-width: 0; }

/* Sotto 900px il widget passa sotto il testo — mai nascosto (il messaggio visivo deve esserci anche su mobile). */
@media (max-width: 900px) {
    .df-hero-grid { grid-template-columns: 1fr; }
    .df-hero-widget-col { margin-top: 8px; }
}

/* --- Il pannello widget --- */
.df-widget {
    min-width: 0;
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    background:
        radial-gradient(120% 90% at 80% 0%, rgba(124, 111, 240, .08), transparent 60%),
        var(--df-bg-2);
    padding: 16px 16px 18px;
}

.df-widget-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 10px;
}
.df-widget-eyebrow {
    font-size: .72rem;
    letter-spacing: .1em;
    color: var(--df-muted);
    text-transform: uppercase;
}

/* --- Interruttore HUMAN-RATED ⇄ ROBOT-ONLY --- */
.df-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--df-font-mono);
}
.df-switch-opt {
    font-size: .74rem;
    letter-spacing: .08em;
    color: var(--df-muted);
    transition: color .3s ease;
    white-space: nowrap;
}
.df-switch[aria-checked="false"] .df-switch-opt--human { color: #f4ead8; }
.df-switch[aria-checked="true"] .df-switch-opt--robot { color: var(--df-cyan); }

.df-switch-track {
    position: relative;
    width: 46px;
    height: 24px;
    border-radius: 999px;
    background: var(--df-surface);
    border: 1px solid var(--df-border-strong);
    flex: 0 0 auto;
    transition: background-color .3s ease, border-color .3s ease;
}
.df-switch[aria-checked="true"] .df-switch-track {
    background: rgba(63, 197, 218, .18);
    border-color: var(--df-cyan);
}
.df-switch-knob {
    position: absolute;
    top: 50%;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f4ead8;
    transform: translateY(-50%);
    transition: transform .3s cubic-bezier(.65, .05, .35, 1), background-color .3s ease;
}
.df-switch[aria-checked="true"] .df-switch-knob {
    transform: translate(22px, -50%);
    background: var(--df-cyan);
}
.df-switch:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 3px; border-radius: 4px; }

/* --- Viz --- */
.df-widget-viz {
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-sm);
    background: var(--df-bg);
    overflow: hidden;
    transition: background-color .7s ease;
}
.df-widget--human .df-widget-viz { background: #131319; }

/* --- Due numeri chiave --- */
.df-widget-nums {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}
.df-widget-num {
    border: 1px solid var(--df-border);
    border-top-width: 2px;
    border-radius: var(--df-radius-sm);
    background: var(--df-surface);
    padding: 12px 14px;
    min-width: 0;
}
.df-widget-num--violet { border-top-color: var(--df-violet); }
.df-widget-num--cyan { border-top-color: var(--df-cyan); }
.df-widget-num-label {
    display: block;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--df-muted);
}
.df-widget-num-val {
    display: block;
    font-family: var(--df-font-mono);
    font-weight: 700;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.2;
    margin-top: 5px;
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}
.df-widget-num--violet .df-widget-num-val { color: var(--df-violet); }
.df-widget-num--cyan .df-widget-num-val { color: var(--df-cyan); }

/* --- CTA + nota --- */
.df-widget-cta {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 14px;
}
.df-widget-foot {
    color: var(--df-muted);
    font-size: .72rem;
    line-height: 1.5;
    margin: 12px 0 0;
    text-align: center;
}

/* --- Reset senza animazione: la JS azzera lo stato iniziale (robot→human) senza far vedere
       la transizione di partenza. Rimosso subito dopo il reflow. --- */
.df-widget--no-anim .df-widget-viz,
.df-widget--no-anim .df-bs,
.df-widget--no-anim .df-bs *,
.df-widget--no-anim .df-switch-knob,
.df-widget--no-anim .df-switch-track { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
    .df-switch-knob, .df-switch-track, .df-widget-viz { transition: none !important; }
}

/* --- Overlay <dialog> del calcolatore completo (Fase 5) --- */
.df-calc-dialog {
    width: min(1180px, 96vw);
    height: 92vh;
    max-width: 96vw;
    max-height: 92vh;
    padding: 0;
    border: 1px solid var(--df-border-strong);
    border-radius: var(--df-radius);
    background: var(--df-bg);
    overflow: hidden;
}
.df-calc-dialog::backdrop {
    background: rgba(4, 4, 8, .72);
    backdrop-filter: blur(3px);
}
.df-calc-dialog-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--df-bg);
}
.df-calc-dialog-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    font-family: var(--df-font-mono);
    font-size: .82rem;
    color: var(--df-fg);
    background: rgba(20, 20, 26, .9);
    border: 1px solid var(--df-border-strong);
    border-radius: var(--df-radius-sm);
    padding: .5em .9em;
    cursor: pointer;
}
.df-calc-dialog-close:hover { border-color: var(--df-accent); color: var(--df-accent); }
.df-calc-dialog-close:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }