/**
 * Interactive tool pages — calculators, checklists, selectors.
 *
 * These pages were each a standalone document with their own inline <style>,
 * and no two shared a single selector. Their styles collect here as each one
 * moves onto the shell, scoped under .lc-tool-page so they cannot leak, and
 * with the colours taken from the lc-* tokens: every tool had picked its own
 * green, its own grey and its own radius, none of which matched the site.
 */

.lc-tool-page .tool-hero {
    background: linear-gradient(135deg, var(--lc-accent) 0%, var(--lc-accent-dark) 100%);
    color: #ffffff;
    padding: 3.5rem 0;
    text-align: center;
}

.lc-tool-page .tool-hero h1 {
    font-family: var(--lc-font-display);
    margin-bottom: 0.5rem;
}

.lc-tool-page .tool-hero p {
    margin: 0;
    opacity: 0.92;
}

.lc-tool-page .tool-card {
    background: var(--lc-surface);
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius);
    padding: 2.5rem;
    box-shadow: var(--lc-shadow);
    margin: -2rem 0 2rem;
    position: relative;
    z-index: 2;
}

.lc-tool-page .btn-calculate {
    background: var(--lc-accent);
    color: #ffffff;
    border: none;
    padding: 0.9rem 2rem;
    border-radius: var(--lc-radius-btn, 10px);
    font-size: 1.05rem;
    font-weight: 600;
    width: 100%;
}

.lc-tool-page .btn-calculate:hover,
.lc-tool-page .btn-calculate:focus-visible {
    background: var(--lc-accent-dark);
    color: #ffffff;
}

.lc-tool-page .results-card {
    background: var(--lc-accent-soft);
    border-radius: var(--lc-radius);
    border-left: 4px solid var(--lc-accent);
    padding: 2rem;
    margin-top: 2rem;
}

.lc-tool-page .form-control:focus,
.lc-tool-page .form-select:focus {
    border-color: var(--lc-accent-ink);
    box-shadow: 0 0 0 0.2rem var(--lc-accent-soft);
}

@media (max-width: 767px) {
    .lc-tool-page .tool-hero { padding: 2.25rem 0; }
    .lc-tool-page .tool-card { padding: 1.5rem; margin-top: -1.25rem; }
    .lc-tool-page .results-card { padding: 1.25rem; }
}

/* Printable tools — the two move-in checklists are filled in on paper.
 *
 * They used to be standalone pages with no site chrome, so printing gave you
 * the checklist and nothing else. Joining the shell brings a nav bar, a footer
 * and the floating UI with it, none of which belong on a form someone signs at
 * a walkthrough. Anything marked .no-print goes too, which is what the pages
 * already used for their own controls. */
@media print {
    .lc-printable .lc-nav,
    .lc-printable .lc-footer,
    .lc-printable .premium-banner-spacer,
    .lc-printable .mobile-bottom-nav,
    .lc-printable .no-print,
    .lc-printable .action-buttons {
        display: none !important;
    }

    .lc-printable .main-content-premium,
    .lc-printable .content-wrapper {
        padding: 0;
        margin: 0;
    }

    .lc-printable .checklist-container,
    .lc-printable .checklist-card,
    .lc-printable .tool-card {
        box-shadow: none;
        border: none;
        margin: 0;
    }
}