/**
 * Calculators — screen tweaks and the printed sheet
 * Real Estate CMS
 *
 * The printed output is a document, not a screenshot of a form. On print
 * everything interactive is removed and .calc-print-sheet takes over, which JS
 * has already filled with the figures the visitor actually entered.
 */

/* Inputs have to LOOK like inputs.
   A flat white rectangle next to a slider reads as a label, not as something you
   can type into. The inset shadow is what does the work — it makes the field look
   like a recess rather than a panel. The border width is set here as well as in
   the markup, because Tailwind's Preflight resets border-width to 0 on every
   element and a borderless field is the thing being fixed. */
.calculator .calc-box {
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    padding: 0.5rem 0.7rem;
    background-color: #fff;
    color: #0f172a;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    box-shadow:
        inset 0 2px 4px rgba(15, 23, 42, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.9);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Figures right-align so the digits line up as they change. */
.calculator input.calc-box { text-align: right; }

.calculator .calc-box:hover { border-color: #94a3b8; }

.calculator .calc-box:focus {
    outline: none;
    border-color: var(--calc-accent, #0f172a);
    box-shadow:
        inset 0 2px 4px rgba(15, 23, 42, 0.07),
        0 0 0 3px rgba(var(--calc-accent-rgb, 15, 23, 42), 0.25);
}

/* A select is not typeable, so it gets the frame but not the recess — the
   difference is the point. */
.calculator select.calc-box {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 1.1em;
    padding-right: 2.2rem;
    -webkit-appearance: none;
    appearance: none;
}

/* Range sliders, since Tailwind does not style them. */
.calculator input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 1.5rem;
    background: transparent;
    cursor: pointer;
}
.calculator input[type="range"]::-webkit-slider-runnable-track {
    height: 0.375rem;
    border-radius: 999px;
    background: #e2e8f0;
}
.calculator input[type="range"]::-moz-range-track {
    height: 0.375rem;
    border-radius: 999px;
    background: #e2e8f0;
}
.calculator input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.4375rem;
    border-radius: 999px;
    background: var(--calc-accent, #0f172a);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.calculator input[type="range"]::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--calc-accent, #0f172a);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.calculator input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--calc-accent, #0f172a);
    outline-offset: 2px;
}

/* Hide the number spinners: the slider is the coarse control, so the arrows
   just add clutter and mis-taps on a phone. */
.calculator input[type="number"]::-webkit-outer-spin-button,
.calculator input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.calculator input[type="number"] { -moz-appearance: textfield; }

/* ---------------------------------------------------------------- print ---- */

.calc-print-sheet { color: #000; }
.calc-print-sheet .cps-head { border-bottom: 2px solid #000; padding-bottom: 0.5rem; margin-bottom: 1.25rem; }
.calc-print-sheet .cps-brand { font-size: 10pt; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.calc-print-sheet .cps-title { font-size: 19pt; font-weight: 700; margin: 0.15rem 0 0; }
.calc-print-sheet .cps-date { font-size: 9pt; color: #444; margin: 0.15rem 0 0; }

.calc-print-sheet .cps-headline {
    display: flex; justify-content: space-between; align-items: baseline;
    border: 2px solid #000; padding: 0.7rem 0.9rem; margin-bottom: 1.25rem;
}
.calc-print-sheet .cps-headline-label { font-size: 11pt; }
.calc-print-sheet .cps-headline-value { font-size: 22pt; font-weight: 700; }

.calc-print-sheet .cps-cols { display: flex; gap: 2rem; align-items: flex-start; }
.calc-print-sheet .cps-cols > div { flex: 1; }
.calc-print-sheet h3 {
    font-size: 9pt; text-transform: uppercase; letter-spacing: 0.08em;
    border-bottom: 1px solid #999; padding-bottom: 0.2rem; margin: 0 0 0.4rem;
}
.calc-print-sheet .cps-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
.calc-print-sheet .cps-table th {
    text-align: left; font-weight: 400; padding: 0.22rem 0; border-bottom: 1px solid #e5e5e5;
}
.calc-print-sheet .cps-table td {
    text-align: right; font-weight: 600; padding: 0.22rem 0; border-bottom: 1px solid #e5e5e5;
    white-space: nowrap; padding-left: 0.75rem;
}
.calc-print-sheet .cps-contact { font-size: 9.5pt; margin-top: 1.25rem; padding-top: 0.5rem; border-top: 1px solid #999; }
.calc-print-sheet .cps-disclaimer { font-size: 8pt; color: #333; line-height: 1.45; margin-top: 0.5rem; }

@media print {
    /* Printing one element out of a full page is done by marking everything that
       is NOT on the path to the calculator, which calculators.js does before it
       opens the print dialog. Selecting the chrome from CSS instead would mean
       either guessing where the calculator sits in the document or relying on
       :has() — this needs neither, and leaves no invisible blocks behind to push
       the sheet onto a second page. */
    .calc-print-hide { display: none !important; }
    .is-printing > *:not(.calc-print-sheet) { display: none !important; }
    .is-printing { padding: 0 !important; margin: 0 !important; }
    .calc-print-sheet { display: block !important; }

    @page { margin: 14mm; }
    body.printing-calculator {
        background: #fff !important;
        font-family: Georgia, 'Times New Roman', serif;
    }
    /* Neither column of the sheet should be split across a page break. */
    .calc-print-sheet .cps-cols > div { break-inside: avoid; }
    .calc-print-sheet .cps-headline { break-inside: avoid; }
}