/* Draft Debug Pages: the estimate (pick a plan, add options and the care plan; the first year's total updates).
   Used by /pages (pages.html) and /pages/hearing; both use colours from pages-theme.css.
   Variables it expects: --accent --accent-soft --accent-text --muted --card --rule-light --paper --bg-alt --ink --gutter.
   Wide screens: choices on the left, the total sticks beside them. Phones and .estimate--stacked: one column,
   and a bar with the total sticks to the bottom. */
.estimate {
    margin-top:32px;
}

.estimate[hidden] {
    display:none;
}

.estimate-grid {
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    gap:28px;
    align-items:start;
    margin-top:18px;
}

.estimate-form {
    display:grid;
    gap:26px;
}

.estimate-step {
    min-width:0;
    margin:0;
    padding:0;
    border:0;
}

.estimate-step>legend {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    padding:0;
    font-size:17px;
    font-weight:700;
}

.estimate-num {
    display:inline-grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    font-size:14px;
}

.estimate-select-label {
    display:block;
    margin-bottom:6px;
    font-size:14px;
    color:var(--muted);
}

.estimate-select {
    width:100%;
    max-width:360px;
    min-height:48px;
    padding:0 14px;
    border:1.5px solid var(--muted);
    border-radius:12px;
    background:var(--card);
    color:var(--ink);
    font:inherit;
    font-size:16px;
}

.estimate-industry-note:empty {
    display:none;
}

.estimate-industry-note {
    margin-top:10px;
    font-size:14px;
    line-height:1.8;
}

.estimate-choices {
    display:grid;
    gap:10px;
}

.estimate-choices-2 {
    grid-template-columns:repeat(2,minmax(0,1fr));
}

/* A choice card: name and price on one line, a short description under it. The whole card is the label. */
.estimate-choice {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:12px;
    align-items:baseline;
    padding:14px 16px 14px 46px;
    border:1.5px solid var(--muted);
    border-radius:14px;
    background:var(--card);
    line-height:1.6;
    cursor:pointer;
}

.estimate-choice>input {
    position:absolute;
    top:18px;
    left:16px;
    width:20px;
    height:20px;
    margin:0;
    accent-color:var(--accent);
    cursor:pointer;
}

.estimate-choice:has(input:checked) {
    border-color:var(--accent);
    box-shadow:inset 0 0 0 1px var(--accent);
    background:var(--accent-soft);
}

.estimate-choice:has(input:focus-visible) {
    outline:3px solid var(--accent-text);
    outline-offset:2px;
}

.estimate-choice-name {
    font-weight:700;
}

.estimate-choice-price {
    font-weight:700;
    white-space:nowrap;
}

.estimate-choice-desc {
    grid-column:1 / -1;
    font-size:14px;
    color:var(--muted);
}

/* Counters (extra pages, images) have no checkbox, so no left gap for one. */
.estimate-count {
    padding-left:16px;
    cursor:default;
}

.estimate-stepper {
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
}

.estimate-stepper button {
    width:44px;
    height:44px;
    border:1.5px solid var(--muted);
    border-radius:50%;
    background:var(--paper);
    color:var(--ink);
    font:inherit;
    font-size:20px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
}

.estimate-stepper button:disabled {
    opacity:.55;
    cursor:not-allowed;
}

.estimate-stepper button:focus-visible {
    outline:3px solid var(--accent-text);
    outline-offset:2px;
}

.estimate-stepper output {
    min-width:2ch;
    font-size:20px;
    font-weight:700;
    text-align:center;
}

.estimate-result {
    position:sticky;
    /* Below the fixed header (72px) and the sticky section label (49px). */
    top:137px;
    padding:22px;
    border:2px solid var(--accent);
    border-radius:18px;
    background:var(--card);
    box-shadow:0 14px 34px rgba(40,30,20,.10);
}

.estimate-result-title {
    font-size:14px;
    font-weight:700;
    color:var(--accent-text);
}

.estimate-sums {
    margin:10px 0 0;
}

.estimate-sums>div {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    padding:6px 0;
}

.estimate-sums dt {
    font-size:14px;
    color:var(--muted);
}

.estimate-sums dd {
    margin:0;
    font-weight:700;
    text-align:right;
}

.estimate-sums>.estimate-sum-main {
    flex-wrap:wrap;
    padding-bottom:12px;
    border-bottom:1px solid var(--rule-light);
}

.estimate-sum-main dd>strong {
    font-size:clamp(30px,3vw,40px);
    letter-spacing:-.02em;
}

.estimate-sum-main dd>span {
    display:block;
    font-size:13px;
    color:var(--muted);
}

.estimate-breakdown {
    margin-top:10px;
    font-size:14px;
}

.estimate-breakdown>summary {
    cursor:pointer;
    color:var(--accent-text);
    font-weight:700;
}

.estimate-breakdown ul {
    margin:8px 0 0;
    padding:0;
    list-style:none;
}

.estimate-breakdown li {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:6px 0;
    border-bottom:1px solid var(--rule-light);
}

.estimate-breakdown li>span:last-child {
    flex:none;
    font-weight:700;
}

.estimate-result-note {
    margin-top:12px;
    font-size:13px;
    line-height:1.8;
    color:var(--muted);
}

.estimate-cta {
    width:100%;
    margin-top:16px;
}

/* A slim bar with the total that rides along the bottom while choosing (phones, and the stacked layout). */
.estimate-bar {
    position:sticky;
    bottom:0;
    z-index:2;
    display:none;
    flex-wrap:wrap;
    align-items:baseline;
    column-gap:10px;
    /* Out to the screen edges, and without the grid gaps around it, so the hidden bar leaves little space. */
    margin:-18px calc(var(--gutter) * -1);
    padding:10px max(var(--gutter),16px) 12px;
    border-top:2px solid var(--accent);
    background:var(--card);
    box-shadow:0 -8px 20px rgba(40,30,20,.10);
    transition:opacity .2s ease;
}

@media(max-width:900px) {
    .estimate-grid {
        grid-template-columns:1fr;
        gap:18px;
    }
    .estimate-result {
        position:static;
    }
    .estimate-bar {
        display:flex;
    }
}

.estimate-bar.is-away {
    visibility:hidden;
    opacity:0;
}

.estimate-bar>span {
    font-size:13px;
    color:var(--muted);
}

.estimate-bar>strong {
    font-size:24px;
    letter-spacing:-.02em;
}

@media(max-width:560px) {
    .estimate-choices-2 {
        grid-template-columns:1fr;
    }
}

/* /pages estimate, step 2: small screenshots of the chosen industry's samples, picked like the plan cards. */
.estimate-designs {
    margin-top:16px;
}

.estimate-designs-empty,.estimate-designs-title {
    font-size:14px;
    color:var(--muted);
}

.estimate-designs-empty[hidden] {
    display:none;
}

.estimate-design-list {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    max-width:480px;
    margin:10px 0 0;
    padding:0;
    list-style:none;
}

.estimate-design {
    position:relative;
    display:block;
    cursor:pointer;
}

/* The radio stays for keyboards and screen readers; the picture is what you tap. */
.estimate-design>input {
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
}

.estimate-design>img {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:9 / 16;
    object-fit:cover;
    object-position:top;
    border:3px solid var(--rule-light);
    border-radius:12px;
    background:var(--bg-alt);
}

.estimate-design>input:checked+img {
    border-color:var(--accent);
    box-shadow:0 8px 20px rgba(40,30,20,.16);
}

.estimate-design>input:focus-visible+img {
    outline:3px solid var(--accent-text);
    outline-offset:2px;
}

.estimate-design>span {
    display:block;
    margin-top:6px;
    font-size:13px;
    line-height:1.5;
}

.estimate-design>input:checked~span {
    color:var(--accent-text);
    font-weight:700;
}

.estimate-design>input:checked~span::before {
    content:"✓ ";
}

.estimate-design-open {
    margin-top:10px;
    font-size:14px;
}

.estimate-design-open a,.estimate-industry-note a {
    color:var(--accent-text);
    font-weight:700;
}

.estimate-design-open+.estimate-designs-title {
    margin-top:6px;
    line-height:1.8;
}

/* One column at any width (the hearing sheet's column is narrow). */
.estimate--stacked .estimate-grid {
    grid-template-columns:1fr;
    gap:18px;
}

.estimate--stacked .estimate-result {
    position:static;
}

.estimate--stacked .estimate-bar {
    display:flex;
    border-radius:12px 12px 0 0;
}

/* Nothing picked yet (the hearing sheet starts empty): dim the numbers. */
.estimate.is-empty .estimate-sums dd,.estimate.is-empty .estimate-bar strong {
    color:var(--muted);
}