/* ==========================================================================
   dark-factory.space — pagina Calculator
   Fase 2: form GET + blocco risultati (numeri, breakdown, riga ambra "what stays").
   Fase 3: layout preview della sezione edificio nei due stati (sotto).
   ========================================================================== */

.df-hero {
    padding-block: 64px 24px;
    max-width: 880px;
}
.df-hero-lede {
    color: var(--df-fg-dim);
    font-size: 1.08rem;
    max-width: 62ch;
}
.df-hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* --- Form GET --- */
.df-calc-form-wrap { margin-top: 8px; }

.df-calc-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 20px;
    padding: 22px;
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    background: var(--df-bg-2);
}

.df-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.df-field label {
    font-family: var(--df-font-mono);
    font-size: .78rem;
    color: var(--df-fg-dim);
    letter-spacing: .01em;
}
.df-field input,
.df-field select {
    background: var(--df-surface);
    border: 1px solid var(--df-border-strong);
    border-radius: var(--df-radius-sm);
    color: var(--df-fg);
    font-family: var(--df-font-mono);
    font-size: .95rem;
    padding: .6em .7em;
    width: 100%;
}
.df-field input:focus,
.df-field select:focus {
    outline: 2px solid var(--df-accent);
    outline-offset: 1px;
}

.df-field-submit { justify-content: flex-end; }
.df-field-submit .df-btn { width: 100%; justify-content: center; }

/* --- Validazione custom: rimpiazza le bolle native del browser (form.noValidate = true in JS) --- */
.df-field--invalid input,
.df-field--invalid select {
    border-color: var(--df-danger);
}
.df-field--invalid input:focus,
.df-field--invalid select:focus {
    outline-color: var(--df-danger);
}
.df-field-error {
    margin: 0;
    font-family: var(--df-font-mono);
    font-size: .76rem;
    line-height: 1.4;
    color: var(--df-danger);
}

.df-calc-form-note {
    color: var(--df-muted);
    font-size: .88rem;
    max-width: 76ch;
    margin: 12px 0 0;
}

@media (max-width: 900px) {
    .df-calc-form { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .df-calc-form { grid-template-columns: 1fr; }
}

/* --- Risultati: tre numeri grandi --- */
.df-calc-results { margin-top: 40px; }

.df-calc-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.df-stat {
    border: 1px solid var(--df-border);
    border-top-width: 3px;
    border-radius: var(--df-radius);
    background: var(--df-bg-2);
    padding: 18px 20px;
    min-width: 0;
}
.df-stat--violet { border-top-color: var(--df-violet); }
.df-stat--cyan { border-top-color: var(--df-cyan); }

.df-stat-label {
    display: block;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--df-muted);
}
.df-stat-num {
    display: block;
    font-family: var(--df-font-mono);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    line-height: 1.25;
    margin-top: 6px;
    word-break: break-word;
}
.df-stat--violet .df-stat-num { color: var(--df-violet); }
.df-stat--cyan .df-stat-num { color: var(--df-cyan); }
.df-stat-sub {
    display: block;
    color: var(--df-muted);
    font-size: .85rem;
    margin-top: 4px;
}

@media (max-width: 760px) {
    .df-calc-stats { grid-template-columns: 1fr; }
}

/* --- Tabella breakdown: scroll orizzontale contenuto, mai la pagina --- */
.df-calc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
}

.df-calc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    min-width: 560px;
}
.df-calc-table caption {
    text-align: left;
    padding: 14px 18px 0;
    color: var(--df-muted);
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.df-calc-table th,
.df-calc-table td {
    padding: 11px 18px;
    text-align: left;
    border-bottom: 1px solid var(--df-border);
}
.df-calc-table thead th {
    font-family: var(--df-font-mono);
    font-size: .78rem;
    color: var(--df-muted);
    letter-spacing: .04em;
    font-weight: 600;
}
.df-calc-table tbody th {
    font-weight: 500;
    color: var(--df-fg-dim);
    white-space: nowrap;
}
.df-calc-table td { font-family: var(--df-font-mono); color: var(--df-fg); }
.df-calc-dash { color: var(--df-muted); }
.df-calc-total th,
.df-calc-total td {
    border-bottom: none;
    border-top: 1px solid var(--df-border-strong);
    font-weight: 700;
    color: var(--df-fg);
}

.df-cite {
    font-size: .78em;
    color: var(--df-muted);
    text-decoration: none;
    margin-left: 2px;
}
.df-cite:hover { color: var(--df-accent); text-decoration: underline; }

/* --- Riga ambra fissa: "what stays" --- */
.df-calc-residual {
    margin-top: 20px;
    border: 1px solid #4a3a22;
    border-left-width: 3px;
    border-left-color: var(--df-amber);
    border-radius: var(--df-radius);
    background: rgba(224, 164, 88, .06);
    padding: 18px 20px;
}
.df-calc-residual-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--df-font-mono);
    font-weight: 700;
    color: var(--df-amber);
    margin: 0 0 6px;
}
.df-calc-residual-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--df-amber);
    box-shadow: 0 0 8px 2px rgba(224, 164, 88, .5);
    flex: 0 0 auto;
}
.df-calc-residual-lede {
    color: var(--df-fg-dim);
    font-size: .92rem;
    max-width: 74ch;
    margin: 0 0 16px;
}
.df-calc-residual-figs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.df-calc-residual-num {
    display: block;
    font-family: var(--df-font-mono);
    font-weight: 700;
    color: var(--df-amber);
    font-size: 1.1rem;
}
.df-calc-residual-lbl {
    display: block;
    color: var(--df-muted);
    font-size: .82rem;
    margin-top: 2px;
}

@media (max-width: 640px) {
    .df-calc-residual-figs { grid-template-columns: 1fr; }
}

.df-calc-scope-note {
    color: var(--df-muted);
    font-size: .88rem;
    max-width: 78ch;
    margin: 16px 0 0;
}

/* --- Preview due stati affiancati --- */
.df-calc-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 24px;
}

.df-calc-panel {
    min-width: 0; /* l'SVG non deve imporre la sua min-content width alla colonna grid */
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    background: var(--df-bg-2);
    padding: 18px 18px 10px;
}
.df-calc-svg-slot { min-width: 0; } /* contenitore scambiato dalla live API */

.df-calc-panel-title {
    display: flex;
    align-items: center;
    gap: .7ch;
    font-size: .8rem;
    letter-spacing: .16em;
    color: var(--df-fg-dim);
    margin: 0 0 12px;
}

.df-calc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--df-border-strong);
    box-shadow: none;
}
.df-calc-dot--on {
    background: #f4ead8;
    box-shadow: 0 0 8px 2px rgba(244, 234, 216, .45);
}

.df-calc-foot { margin-top: 28px; }
/* In embed (overlay <dialog> della home) manca il footer del sito: aria sotto ai bottoni finali. */
.df-embed .df-calc-foot { padding-bottom: 48px; }
.df-calc-footnote {
    color: var(--df-muted);
    font-size: .92rem;
    max-width: 70ch;
}
.df-calc-footnote code {
    color: var(--df-fg-dim);
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: .85em;
}

@media (max-width: 900px) {
    .df-calc-preview { grid-template-columns: 1fr; }
}