/* =============================================================================
   Vyta.co — /tools/ calculator section styles.
   Loaded AFTER learn.css, which supplies the shared "Warm Precision" system
   (hero, .lib-grid, .lib-card, .chip, .byline, .callout, .faq-list, final CTA).
   This file only adds what the tools section needs on top: the coming-soon card
   state and the shared calculator-widget primitives used by individual tool
   pages (built later via docs/generate-and-deploy-tool.md).
   ============================================================================= */

/* ---- Coming-soon tool card (a non-link .lib-card without .is-live) ---- */
.tool-card--soon {
    cursor: default;
    opacity: 0.72;
}
.tool-card--soon .lib-icon svg { color: var(--text-muted); }
.tool-soon-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-card-hover, #f3ede6);
    border: 1px solid var(--border, #e7ddd2);
    border-radius: 999px;
    padding: 4px 10px;
}

/* =============================================================================
   Calculator-widget primitives (for individual /tools/<slug>/ pages).
   Kept generic so every calculator page shares one look. Fleshed out with the
   first real tool page; safe to reference now.
   ============================================================================= */
.calc {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e7ddd2);
    border-radius: 18px;
    padding: 28px;
    max-width: 680px;
    margin: 0 auto;
    box-shadow: var(--shadow-soft, 0 1px 3px rgba(0,0,0,0.04));
}
.calc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
}
.calc-field { display: flex; flex-direction: column; gap: 7px; }
.calc-field.calc-field--full { grid-column: 1 / -1; }
.calc-field label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}
.calc-field input,
.calc-field select {
    font: inherit;
    font-size: 1rem;
    padding: 11px 13px;
    border: 1px solid var(--border, #e7ddd2);
    border-radius: 11px;
    background: var(--bg, #fff);
    color: var(--text, #2b241d);
    transition: border-color 0.18s, box-shadow 0.18s;
}
.calc-field input:focus,
.calc-field select:focus {
    outline: none;
    border-color: var(--border-orange, #e68144);
    box-shadow: 0 0 0 3px rgba(230,129,68,0.14);
}

/* Segmented toggle (e.g. metric / imperial, male / female) */
.calc-toggle { display: inline-flex; border: 1px solid var(--border, #e7ddd2); border-radius: 11px; overflow: hidden; }
.calc-toggle button {
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 9px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.calc-toggle button[aria-pressed="true"] {
    background: var(--orange, #e68144);
    color: #fff;
}

/* Result readout */
.calc-result {
    margin-top: 22px;
    padding: 22px;
    border-radius: 14px;
    background: var(--bg-surface, #f7f2ec);
    border: 1px solid var(--border, #e7ddd2);
    text-align: center;
}
.calc-result-value {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    color: var(--orange-deep, #c86a2e);
}
.calc-result-label { font-size: 0.9rem; color: var(--text-muted); margin-top: 6px; }
.calc-result-note { font-size: 0.92rem; color: var(--text, #2b241d); margin-top: 12px; line-height: 1.55; }

@media (max-width: 620px) {
    .calc { padding: 22px; }
    .calc-grid { grid-template-columns: 1fr; }
    .calc-result-value { font-size: 2.5rem; }
}