/* Public configurator — friendly home-builder look: white and airy, deep green +
   warm amber, rounded tactile cards, a hand-drawn house. Self-contained on purpose:
   no webfonts (remote Google Fonts is a GDPR problem for a European site, and this
   project removed its last CDN fragility), no frameworks. */

:root {
    --bg:          #f4f4ef;
    --card:        #ffffff;
    --ink:         #1d2521;
    --muted:       #55605a;      /* 6.2:1 on white */
    --soft:        #6d7873;      /* 4.6:1 on white — smallest text only */
    --line:        #e4e6e0;      /* decorative rules */
    --control:     #98a29b;      /* 3.1:1 — interactive borders */
    --green:       #226249;
    --green-deep:  #184a36;
    --green-wash:  #e9f2ec;
    --amber:       #b45309;
    --amber-wash:  #fdf1e0;

    --sans: "Avenir Next", "Seravek", "Segoe UI Variable Text", "Segoe UI",
            -apple-system, "Helvetica Neue", Arial, sans-serif;

    --r-card: 18px;
    --r-ctl: 12px;
    --shadow: 0 1px 2px rgba(29, 37, 33, 0.06), 0 14px 36px -18px rgba(29, 37, 33, 0.22);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }

/* ---- header ---- */

.topbar { padding-top: 22px; }
.topbar .brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 34px; height: 34px; }
.brand-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #181613;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 3vw, 36px);
}
@media (min-width: 860px) {
    .hero { grid-template-columns: minmax(0, 7fr) minmax(220px, 4fr); }
}
.hero h1 {
    font-size: clamp(32px, 4.8vw, 52px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 800;
    margin: 0 0 14px;
    max-width: 18ch;
}
.hero h1 em {
    font-style: normal;
    color: var(--green);
    position: relative;
    white-space: nowrap;
}
.hero h1 em::after {          /* hand-drawn underline swash */
    content: "";
    position: absolute;
    left: 2%; right: 2%; bottom: -6px;
    height: 8px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 10" preserveAspectRatio="none"><path d="M2 7 C 25 3, 55 8, 80 5 S 112 4, 118 6" fill="none" stroke="%23d98324" stroke-width="3.5" stroke-linecap="round"/></svg>') no-repeat center / 100% 100%;
}
.hero .lede {
    margin: 0;
    color: var(--muted);
    font-size: clamp(15.5px, 1.7vw, 17.5px);
    max-width: 52ch;
}
.hero-art { text-align: center; }
.hero-art svg { width: min(100%, 300px); height: auto; }
@media (max-width: 859px) { .hero-art { display: none; } }

/* ---- layout ---- */

.body-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding-bottom: 40px;
}
@media (min-width: 940px) {
    .body-grid { grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); align-items: start; }
}

/* ---- the resume offer (backlog 2026-08-26): one quiet card above the steps,
   filled by app.js on a bare visit with remembered work, gone at the first
   touch. Same green-wash family as the plan bar — it is "your stuff" too. ---- */

#resume-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    background: var(--green-wash);
    border: 1.5px solid var(--green);
    border-radius: var(--r-card);
    padding: 14px 18px;
    margin: 0 0 18px;
}
#resume-banner[hidden] { display: none; }
#resume-text { margin: 0; font-size: 14px; max-width: 72ch; }
.resume-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* .resume-no shares the import offer's quiet "no thanks" rule further down. */

/* ---- steps ---- */

.step {
    background: var(--card);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 30px);
    margin-bottom: 18px;
    animation: rise .5s cubic-bezier(.2,.7,.3,1) both;
}
.step:nth-of-type(2) { animation-delay: .06s; }
.step:nth-of-type(3) { animation-delay: .12s; }
.step:nth-of-type(4) { animation-delay: .18s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.step-no {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    display: grid;
    place-items: center;
}
.step h2 {
    font-size: clamp(19px, 2.2vw, 23px);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0;
}
.step .hint { margin: 6px 0 16px 46px; color: var(--muted); font-size: 14.5px; max-width: 48ch; }
.step-body { margin-left: 46px; }
@media (max-width: 560px) {
    .step .hint, .step-body { margin-left: 0; }
}

/* Step-completion feedback (backlog, game-tester #10): a genuinely answered step
   deepens its circle and earns a check BADGE — the number stays readable, because
   the hint texts say "pasul 2", "pasul 4". Own keyframes on purpose: borrowing the
   orientative badge's `pop` would couple this badge to that one's tuning (and rest
   every check at the orientative badge's −2° tilt). */
.step-no { position: relative; }
.step.done .step-no { background: var(--green-deep); }
.step.done .step-no::after {
    content: "✓";
    position: absolute;
    top: -5px; right: -7px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--card);
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(29, 37, 33, 0.25);
    animation: badge-pop .3s ease both;
}
@keyframes badge-pop { from { transform: rotate(-10deg) scale(1.5); opacity: 0; } }

/* ---- controls ---- */

.field-label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }

.select-wrap { position: relative; max-width: 360px; }
.select-wrap::after {
    content: "";
    position: absolute; right: 16px; top: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
    transform: translateY(-70%) rotate(45deg);
    border-radius: 1px;
    pointer-events: none;
}
select, .param-row input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: var(--card);
    border: 1.5px solid var(--control);
    border-radius: var(--r-ctl);
    padding: 12px 42px 12px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.param-row input { padding-right: 14px; font-variant-numeric: tabular-nums; font-size: 17px; }
select:hover, .param-row input:hover { border-color: var(--green); }
select:focus, .param-row input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-wash), 0 0 0 4px var(--green);
}
.param-row input.invalid {
    border-color: var(--amber);
    background: var(--amber-wash);
}

/* tier cards */
.tier-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; max-width: 620px; }
@media (max-width: 620px) { .tier-row { grid-template-columns: 1fr; } }
.tier { position: relative; cursor: pointer; }
.tier input { position: absolute; opacity: 0; }
.tier-body {
    display: block;
    border: 1.5px solid var(--control);
    border-radius: 14px;
    padding: 14px 15px 12px;
    background: var(--card);
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.tier:hover .tier-body { border-color: var(--green); transform: translateY(-1px); }
.tier input:checked + .tier-body {
    border-color: var(--green);
    background: var(--green-wash);
    box-shadow: inset 0 0 0 1px var(--green);
}
.tier input:focus-visible + .tier-body { outline: 3px solid var(--green); outline-offset: 2px; }
.tier-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tier-name { font-weight: 700; font-size: 16.5px; }
.tier-eur { color: var(--amber); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; }
.tier-desc { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }

/* item cards */
.item-group + .item-group { margin-top: 18px; }
.item-group h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted);
    margin: 0 0 8px;
}
.item { position: relative; display: block; cursor: pointer; margin: 8px 0; max-width: 620px; }
.item input { position: absolute; opacity: 0; }
.item-body {
    display: flex;
    align-items: baseline;
    gap: 12px;
    border: 1.5px solid var(--control);
    border-radius: 14px;
    background: var(--card);
    padding: 14px 15px;
    transition: border-color .15s ease, background .15s ease;
}
.item:hover .item-body { border-color: var(--green); }
.item input:checked ~ .item-body {
    border-color: var(--green);
    background: var(--green-wash);
    box-shadow: inset 0 0 0 1px var(--green);
}
.item input:focus-visible ~ .item-body { outline: 3px solid var(--green); outline-offset: 2px; }
.item-check {
    flex: none;
    width: 20px; height: 20px;
    border: 1.5px solid var(--control);
    border-radius: 7px;
    position: relative;
    top: 3px;
    background: var(--card);
    transition: background .15s ease, border-color .15s ease;
}
.item input:checked ~ .item-body .item-check { background: var(--green); border-color: var(--green); }
.item input:checked ~ .item-body .item-check::after {
    content: "";
    position: absolute; left: 6px; top: 2.5px;
    width: 5px; height: 10px;
    border-right: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    transform: rotate(40deg);
}
.item-name { font-weight: 600; font-size: 15.5px; }
.item-note { color: var(--muted); font-size: 13px; }

/* parameters */
.param-box + .param-box { margin-top: 18px; }
.param-box h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 8px; }
.param-row { margin: 12px 0; max-width: 360px; }
.param-row label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.param-row label em { font-style: normal; font-weight: 400; color: var(--muted); }
.param-row small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--soft); font-variant-numeric: tabular-nums; }

/* ---- summary rail ---- */

.rail {
    background: var(--card);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    padding: clamp(20px, 3vw, 28px);
}
@media (min-width: 940px) {
    /* The column must span the full grid row (align-items:start would shrink it
       to its now-short content), or the sticky rail has no room to travel and
       vanishes after ~600px of scroll — found by looking, 2026-08-25. */
    .rail-col { align-self: stretch; }
    .rail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
}
.rail-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
dl { margin: 0 0 18px; }
.sum-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    font-size: 14.5px;
    border-bottom: 1px solid var(--line);
}
.sum-row dt { color: var(--muted); margin: 0; }
.sum-row dd { margin: 0; text-align: right; font-weight: 600; }
.sum-row dd.is-empty { color: var(--soft); font-weight: 400; font-style: italic; }

.cur-toggle { display: inline-flex; border: 1.5px solid var(--control); border-radius: 999px; overflow: hidden; }
.cur-toggle label { position: relative; cursor: pointer; }
.cur-toggle input { position: absolute; opacity: 0; }
.cur-toggle span {
    display: block;
    padding: 3px 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
    transition: background .15s ease, color .15s ease;
}
.cur-toggle input:checked + span { background: var(--green); color: #fff; }
.cur-toggle input:focus-visible + span { outline: 2px solid var(--green); outline-offset: -2px; }

.run-btn {
    display: block;
    width: 100%;
    font: inherit;
    font-size: 16.5px;
    font-weight: 700;
    color: #fff;
    background: var(--green);
    border: none;
    border-radius: 999px;
    padding: 15px 20px;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease, opacity .15s ease;
    box-shadow: 0 10px 24px -12px rgba(24, 74, 54, 0.6);
}
.run-btn:hover:not(:disabled) { background: var(--green-deep); }
.run-btn:active:not(:disabled) { transform: translateY(1px); }
.run-btn:disabled { background: #a9b6ae; box-shadow: none; cursor: default; }
.run-btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.run-btn.busy { color: transparent; position: relative; }
.run-btn.busy::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2.5px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.run-note { margin: 10px 2px 0; font-size: 13px; color: var(--muted); }

/* ---- result ---- */

/* ==== the result stage (backlog: "the result deserves the stage") ====
   #result and #variants moved out of the rail into .stage-col — a full-width
   grid row below steps+rail on desktop, the same stacking position as before
   on phones. Both are their own cards now (the rail used to be their card). */
.stage-col { min-width: 0; }
#result,
.stage-col #variants {
    background: var(--card);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    padding: clamp(20px, 3vw, 30px);
}
#result { margin-top: 0; scroll-margin-top: 12px; }
#result[hidden] { display: none; }
@media (min-width: 940px) {
    .stage-col { grid-column: 1 / -1; }
    /* Numbers, bands and tables use the full stage; prose keeps a reading measure. */
    #result .result-context, #result .result-eco, #result .included,
    #result .fineprint, #result .conf-meter { max-width: 68ch; }
    #result .excluded { max-width: 640px; }
    #result .prod-card { max-width: 640px; }
    .stage-col #lead-box .param-row { max-width: 380px; }
    .stage-col #lead-box .consent { max-width: 68ch; }
    .stage-col #lead-box .lead-send { max-width: 380px; }
    .stage-col #feedback-box .param-row, .stage-col #feedback-box .hint { max-width: 68ch; }
    .stage-col #feedback-box .lead-send { max-width: 380px; }
    .stage-col #budget-box { max-width: 640px; }
    /* A plan row is a name plus its controls, not a table: stretched across the
       full stage it strands the delete "×" half a screen from the name it
       deletes. Tiling the rows keeps each one near the rail width they were
       drawn for AND finally does what this block is for — the candidate houses
       side by side, which the single rail column could never show. */
    .stage-col #variants-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
        gap: 0 14px;
        align-items: start;
    }
    /* Only the plan cards tile; the note, the import offer, the cap notice and
       the owner footer stay full width. */
    .stage-col #variants-list > :not(.var-row) { grid-column: 1 / -1; }
    .stage-col .variants-note { max-width: 68ch; }
}

/* The rail's compact live total — the loop's number, always in view. */
#rail-total {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 2px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
#rail-total[hidden] { display: none; }
#rail-total-fig {
    font-weight: 700;
    font-size: 16.5px;
    color: var(--green-deep);
    font-variant-numeric: tabular-nums;
}
.result-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
/* flex-wrap added 2026-08-26: measured on live, the share page scrolled sideways by 3 px
   at 375 px because this row could not break — the heading and the tilted badge together
   are wider than a phone, and the badge's rotation widens its box further. The wizard's
   own result header has room and is unaffected (measured before and after). */
.result-head h2 { font-size: 19px; font-weight: 700; margin: 0; }
.badge {
    flex: none;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--amber);
    background: var(--amber-wash);
    border: 1.5px solid rgba(180, 83, 9, 0.45);
    border-radius: 999px;
    padding: 4px 11px;
    transform: rotate(-2deg);
    animation: pop .4s cubic-bezier(.2, 1.4, .4, 1) both .2s;
}
/* The stamp lands from 1.15x, not 1.5x (2026-10-28): from 1.5x the badge spilled
   21 px past the card's edge on phones while it popped, 5 px past the screen at
   360–480 px (a sideways scroll for that moment) and 3 px past the left edge on
   the share page, where it wraps. From 1.15x it stays at least 6.8 px inside the
   card at every width measured, frame by frame; the tilt and the fade are kept. */
@keyframes pop { from { transform: rotate(-10deg) scale(1.15); opacity: 0; } to { transform: rotate(-2deg) scale(1); opacity: 1; } }

.cat-table { width: 100%; border-collapse: collapse; margin: 6px 0 0; }
.cat-table td { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: baseline; }
.cat-table td:first-child { padding-left: 16px; position: relative; }
.cat-table td:first-child::before {
    content: "";
    position: absolute; left: 0; top: 50%;
    width: 8px; height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--green);
    opacity: 0.75;
}
.cat-table td.num {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 13.5px;
}
.cat-table tr { animation: rise .35s ease both; }

.grand {
    margin: 16px 0 0;
    padding: 16px;
    background: var(--green-wash);
    border-radius: 14px;
}
.grand .label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--green); display: block; }
.grand .figure {
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--green-deep);
    line-height: 1.25;
}
.grand .punct { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.range-band { margin: 12px 0 2px; }
.range-band .band {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: #d3e4da;
    overflow: visible;
}
.range-band .fill { position: absolute; inset: 0; border-radius: 999px; }
.range-band .tick {
    position: absolute; top: -4px; bottom: -4px;
    width: 3px;
    border-radius: 2px;
    background: var(--green-deep);
}
.range-band .ends {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.msg { padding: 12px 14px; margin: 10px 0; font-size: 14px; border-radius: 12px; border: 1.5px solid; }
.msg-error { color: #8a2a12; background: #fbe9e2; border-color: #e5b39f; }
.msg-warn  { color: #7a5a10; background: #faf1d8; border-color: #e2cd92; }

.included { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.fineprint {
    font-size: 12.5px;
    color: var(--soft);
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- mobile sticky CTA ---- */

.mobile-cta {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    z-index: 30;
}
@media (max-width: 939px) {
    .mobile-cta.on { display: block; animation: rise .3s ease both; }
    body.cta-on { padding-bottom: 84px; }
}

/* ---- empty state ---- */

.empty-state {
    background: var(--card);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    padding: clamp(44px, 7vw, 80px) clamp(20px, 4vw, 48px);
    margin: 24px 0 40px;
    text-align: center;
}
.empty-state svg { width: 170px; height: auto; margin-bottom: 20px; }
.empty-state svg .draw {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: draw 2.4s ease forwards .2s;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.empty-state h1 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; }
.empty-state p { max-width: 46ch; margin: 0 auto; color: var(--muted); }

/* ---- footer ---- */

.site-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    padding-bottom: 30px;
    font-size: 13px;
    color: var(--soft);
}

/* ---- step 2: area helper ---- */

/* Helper actions used to be underlined links; visitors overlooked them (Jutas,
   2026-08-25: "real helpers, nice features to discover" - make them obvious buttons). */
.link-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1.5px solid var(--green);
    border-radius: 999px;
    padding: 9px 16px;
    font: inherit; font-size: 14.5px; font-weight: 700;
    color: var(--green); text-decoration: none; cursor: pointer;
    margin: 6px 0 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: background .15s, color .15s;
}
.link-btn:hover { background: var(--green); color: #fff; }
.link-btn:active { transform: translateY(1px); }
.link-btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
/* Compact variant for small in-context actions (room editor's regenerate/back). */
.link-btn--subtle {
    padding: 6px 12px;
    font-size: 13.5px; font-weight: 600;
    border: 1px solid var(--control);
    background: #fbfcfa;
    box-shadow: none;
}
.link-btn--subtle:hover { background: #eef3ee; color: var(--green-deep); }

.helper {
    border: 1.5px dashed var(--control);
    border-radius: 14px;
    padding: 16px;
    margin: 8px 0 16px;
    background: #fbfcfa;
}

/* ---- house-template picker (2D from-above schemes as cards) ---- */
.tpl-hint { margin-top: 10px; }
#tpl-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    -webkit-overflow-scrolling: touch;
}
.tpl-card {
    flex: 0 0 158px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1.5px solid var(--control);
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}
.tpl-card:hover { border-color: var(--green); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.tpl-card:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.tpl-icon svg { width: 100%; height: auto; display: block; }
.tpl-name { font-weight: 700; font-size: 13.5px; }
.tpl-meta { font-size: 12px; color: #5a6b5f; }

/* Small per-room guide link under the preset dropdown. */
.room-guide {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.room-guide:hover { color: var(--green-deep); }

/* ---- the guide pages (configurator/ghid.php) ---- */
.guide-hero { padding: 22px 0 6px; }
.guide-main { max-width: 720px; margin: 0 auto; padding: 0 20px 60px; }
/* The page title is the h1 since 2026-10-29 (search pass); it keeps the look the h2 had. */
.guide-article h1, .guide-article h2 { font-size: 30px; line-height: 1.15; margin: 14px 0 14px; }
.guide-article h3 { font-size: 19px; margin: 26px 0 8px; }
.guide-article p, .guide-article li { font-size: 16px; line-height: 1.65; }
.guide-article ul { padding-left: 22px; margin: 8px 0 14px; }
.guide-article li { margin: 6px 0; }
.guide-back { margin-top: 30px; }
.guide-note { font-size: 12.5px; color: #5a6b5f; border-top: 1px solid var(--control); padding-top: 12px; margin-top: 26px; }
.helper-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; }
.helper-result { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.helper-suggest { font-size: 16px; margin: 6px 0 10px; }
.helper-suggest strong { color: var(--green-deep); font-size: 18px; }
.helper-apply { max-width: 300px; padding: 11px 18px; font-size: 15px; }
.eco-note { margin-top: 12px; max-width: 56ch; }

.type-mat { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 16px; margin-top: 8px; }
.derived { font-size: 16.5px; margin: 12px 0 4px; }
.derived strong { color: var(--green-deep); font-size: 19px; }
.hint-inline { color: var(--soft); font-size: 13px; }

/* ---- milestones ---- */

.milestones { margin: 14px 0 2px; border-top: 2px solid var(--line); padding-top: 8px; }
.mile-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 6px 0; font-size: 14.5px;
}
.mile-name { font-weight: 700; }
.mile-val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* ---- sponsored products ---- */

.prod-title { font-weight: 700; font-size: 14.5px; margin: 16px 0 6px; }
.prod-card {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 6px 0;
    background: #fbfcfa;
}
.prod-name { font-weight: 600; font-size: 14px; }
.prod-meta { color: var(--muted); font-size: 12.5px; }
.prod-sponsored {
    margin-left: auto;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--amber); background: var(--amber-wash);
    border-radius: 999px; padding: 2px 8px;
}

/* ---- result actions + lead ---- */

#result-actions { margin: 14px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.mini-btn {
    font: inherit; font-size: 13px; font-weight: 700;
    color: var(--green-deep); background: var(--green-wash);
    border: 1.5px solid var(--green); border-radius: 999px;
    padding: 7px 14px; cursor: pointer;
    /* A no-op on the <button> users, but the rail's "vezi detaliile" pill is an
       <a> and would otherwise wear a browser underline through its label —
       .link-btn already carries this declaration for the same reason. */
    text-decoration: none;
}
.mini-btn:hover { background: #dcebe2; }

#lead-box { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.lead-title { font-weight: 700; font-size: 15px; margin: 0 0 8px; }
#lead-box .param-row { margin: 8px 0; max-width: none; }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); margin: 8px 0 10px; cursor: pointer; }
.consent input { margin-top: 2px; }
.lead-send { padding: 10px 18px; font-size: 15px; }

/* ---- share page ---- */

.share-card {
    background: var(--card);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    padding: clamp(22px, 3.4vw, 34px);
    margin: 10px 0 30px;
    max-width: 640px;
}
.share-actions { margin-top: 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.new-link { color: var(--green-deep); font-weight: 600; }

/* ==== share page: has the price book moved since this estimate? ====
   Deliberately NOT reusing #plan-bar: that id is hidden in the print block below, and
   a printed or PDF'd estimate is exactly where the "these numbers are from August"
   caveat matters most. This block prints. */

.fresh-note {
    margin: 16px 0 0;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fbfcfa;
}
/* "Still current" is reassurance, not news. Looked at on live 2026-08-26: a green box
   directly beneath the green total box gave a non-event the same weight as the headline
   figure. It stays quiet — neutral card, green text only. Movement earns the amber. */
.fresh-note.fresh-ok     { background: #fbfcfa; border-color: var(--line); }
.fresh-note.fresh-moved  { background: var(--amber-wash); border-color: var(--amber); }
.fresh-title {
    font-size: 13.5px; font-weight: 700; color: #7a4a10; margin: 0 0 4px;
}
.fresh-body {
    font-size: 13px; margin: 0; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.fresh-note.fresh-ok .fresh-body { color: var(--green-deep); }
.fresh-sub { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.fresh-missing {
    font-size: 12.5px;
    color: #7a4a10;
    background: var(--amber-wash);
    border-radius: 8px;
    padding: 6px 10px;
    margin: 8px 0 0;
}
.fresh-note.fresh-moved .fresh-missing { background: #fff; }

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

@media print {
    body { background: #fff; }
    /* The rail is pure controls since the result moved to its stage — hide it whole. */
    .topbar, .steps-col, .rail-col, .mobile-cta, .site-foot, #result-actions, #lead-box, #feedback-box, #range-note, .test-banner a, #rate-box,
    .run-btn, .run-note, .hero-art, .share-actions, noscript,
    #budget-box, #variants, #plan-bar, #resume-banner, .conf-hint { display: none !important; }
    .hero { padding: 0 0 10px; }
    /* .step is not listed: its only container, .steps-col, is hidden above. */
    #result, .share-card { box-shadow: none; border: none; padding: 0; }
    .body-grid { display: block; }
}

/* ---- what the estimate excludes (biobuilds lesson: honesty as trust) ---- */

.excluded {
    margin: 16px 0 0;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fbfcfa;
}
.excl-title { font-weight: 700; font-size: 13.5px; margin: 0 0 6px; }
.excluded ul { margin: 0 0 6px; padding-left: 18px; font-size: 13px; color: var(--muted); }
.excluded li { margin: 2px 0; }
.excluded .hint { margin: 0; font-size: 12.5px; }

/* ---- room-by-room size editor ---- */

#rooms-editor { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.room-row {
    display: grid;
    grid-template-columns: minmax(90px, 1.1fr) minmax(150px, 1.6fr) 74px 24px 28px;
    gap: 8px;
    align-items: center;
    margin: 6px 0;
}
.room-label { font-size: 13.5px; font-weight: 600; }
.room-preset { max-width: none; }
.room-preset select { padding: 8px 32px 8px 10px; font-size: 13px; }
.room-preset::after { right: 12px; }
input.room-mp {
    font: inherit; font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding: 8px 8px;
    border: 1.5px solid var(--control);
    border-radius: 10px;
    width: 100%;
}
input.room-mp:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-wash); }
.room-unit { font-size: 12px; color: var(--soft); }
.room-del {
    font: inherit; font-size: 16px; line-height: 1;
    color: var(--soft); background: none;
    border: none; cursor: pointer;
    padding: 4px; border-radius: 8px;
}
.room-del:hover { color: #8a2a12; background: #fbe9e2; }
.room-note { margin: -2px 0 6px; font-size: 12px; color: var(--amber); }
.room-add { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.room-add .select-wrap { max-width: 220px; flex: 1; }
.room-add select { padding: 8px 32px 8px 10px; font-size: 13px; }
.room-circ {
    grid-template-columns: 1fr auto;
    border-top: 1px dashed var(--line);
    padding-top: 8px;
    margin-top: 10px;
}
.room-circ-label { font-size: 13px; color: var(--muted); }
.room-circ-val { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The live room scheme (feature panel wave 3): the visitor's rooms in the template
   cards' visual language. Always visible while the editor is open; phones get a
   reduced height (Jutas's call) — the SVG letterboxes inside the cap. */
.rooms-scheme { margin: 4px 0 10px; }
.rooms-scheme svg { display: block; width: 100%; height: auto; max-height: 250px; }
.rooms-scheme-note { margin: 4px 0 0; }
@media (max-width: 560px) {
    .room-row { grid-template-columns: minmax(80px, 1fr) minmax(120px, 1.4fr) 64px 20px 26px; gap: 5px; }
    .room-preset select { font-size: 12px; }
    .rooms-scheme svg { max-height: 150px; }
}

/* Wave-3 imagery: garage position sketches on the choose-one cards, and the
   "what am I measuring?" helpers under the step-5 fields. Cards and fields
   without a sketch render exactly as before. */
.item-sketch { flex: none; margin-left: auto; width: 78px; align-self: center; }
.item-sketch svg { display: block; width: 100%; height: auto; }
.measure-helper { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; }
.mh-sketch { flex: none; width: 92px; }
.mh-sketch svg { display: block; width: 100%; height: auto; }
.mh-cap { margin: 0; font-size: 12.5px; color: var(--muted); }
.mh-side { flex: 1; }
.mh-ctl { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.param-row .mh-area { width: 90px; padding: 6px 8px; font-size: 14px; }
.mh-live { display: block; font-size: 12.5px; color: var(--green-deep); margin-top: 4px; font-variant-numeric: tabular-nums; }
.mh-pv { display: block; }
.mh-pv .mh-panels { display: block; margin-bottom: 2px; }
@media (max-width: 560px) { .item-sketch { width: 60px; } }
/* Where the card's parts go (check, name, chip, note, sketch) is decided by the
   card grid further down ("Every feature card is the same small grid"). */
/* The two reuse wins: the storey elevation on template cards (cloned from the
   step-3 cards) and the sender's house mark on the share page's head. The mark
   is deliberately NOT in the print-hide list — it belongs on the printed sheet. */
.tpl-storey { display: inline-block; vertical-align: -7px; width: 26px; }
.tpl-storey svg { display: block; width: 100%; height: auto; }
.house-mark { flex: none; width: 60px; }
.house-mark svg { display: block; width: 100%; height: auto; }

/* ==== excitement pass, 2026-08-25 (game-tester + game-architect reviews) ==== */

/* The number's story + the honest right-sizing acknowledgement. */
.result-context { font-size: 13.5px; font-weight: 600; color: var(--green-deep); margin: 2px 0 10px; }
.result-eco { font-size: 12.5px; color: #3c6b52; background: #eef6f0; border-radius: 8px; padding: 6px 10px; margin: 0 0 10px; }

/* The quotable €/m², the second currency at a glance, the direction of change. */
.per-m2 { display: block; font-size: 13.5px; font-weight: 700; color: var(--green-deep); margin-top: 6px; }
.alt-cur { display: block; font-size: 12.5px; color: #5a6b5f; margin-top: 2px; }
.delta-chip {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    animation: chip-in .25s ease-out;
}
.delta-up { background: #fdeee8; color: #8a2a12; }
.delta-down { background: #e6f3ea; color: #1d5c40; }
@keyframes chip-in { from { transform: translateY(4px); opacity: 0; } }

/* Microfeedback: a short flash where a value just reacted to the visitor. */
.flash { animation: flash-bg .45s ease-out; }
@keyframes flash-bg { 0% { background-color: #dff0e6; } 100% { background-color: transparent; } }
#helper-total.flash { border-radius: 6px; }

/* The checkmark pops instead of teleporting. */
.item input:checked ~ .item-body .item-check::after { animation: check-pop .16s ease-out; }
@keyframes check-pop { 0% { transform: rotate(45deg) scale(.3); opacity: 0; } 100% { transform: rotate(45deg) scale(1); opacity: 1; } }

/* Invalid fields say it with a shake, not only a colour (colour-blind visitors). */
.param-row input.invalid { animation: shake .3s ease-in-out; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Mobile mini-state on the sticky bar: play with the number in sight. */
.mobile-cta-state {
    display: block;
    text-align: center;
    font-size: 12.5px; font-weight: 700;
    color: var(--green-deep);
    margin-bottom: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Mobile feel fixes (review findings 5, 26, 27, 28). */
@media (max-width: 859px) {
    /* The hand-drawn house is the brand's warmth — keep a small one on phones. */
    .hero-art { display: block; }
    .hero-art svg { width: min(52%, 190px); }
}
@media (max-width: 560px) {
    .room-del { min-width: 40px; min-height: 40px; }
    .cur-toggle span { padding: 7px 14px; font-size: 13.5px; }
}
/* A right-edge fade tells the thumb there are more template cards. */
#tpl-strip-wrap { position: relative; }
#tpl-strip-wrap::after {
    content: "";
    position: absolute; right: 0; top: 28px; bottom: 10px; width: 36px;
    background: linear-gradient(90deg, rgba(251, 252, 250, 0), #fbfcfa);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .delta-chip, .flash, .item input:checked ~ .item-body .item-check::after, .param-row input.invalid { animation: none; }
}

/* ==== house-type cards (three-expert panel verdict, 2026-08-25) ==== */

.ht-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 620px;
    margin: 0 0 6px;
}
@media (max-width: 620px) {
    .ht-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ht-card { position: relative; cursor: pointer; }
.ht-card input { position: absolute; opacity: 0; }
.ht-body {
    display: block;
    border: 1.5px solid var(--control);
    border-radius: 14px;
    padding: 10px 8px 9px;
    background: var(--card);
    text-align: center;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.ht-card:hover .ht-body { border-color: var(--green); transform: translateY(-1px); }
.ht-card input:checked + .ht-body {
    border-color: var(--green);
    background: var(--green-wash);
    box-shadow: inset 0 0 0 1px var(--green);
}
.ht-card input:focus-visible + .ht-body { outline: 3px solid var(--green); outline-offset: 2px; }
.ht-icon svg { width: 100%; max-width: 96px; height: auto; display: block; margin: 0 auto 4px; }
.ht-name { display: block; font-weight: 700; font-size: 13px; line-height: 1.25; }
.ht-m2 { display: block; font-size: 12px; color: #5a6b5f; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ht-note { margin-top: 0; }

/* The four little houses draw themselves in, once, on load. */
#house-type-cards svg path { stroke-dasharray: 1; }
#house-type-cards.draw svg path { animation: ht-draw .6s ease-out both; }
#house-type-cards.draw .ht-card:nth-child(2) svg path { animation-delay: .08s; }
#house-type-cards.draw .ht-card:nth-child(3) svg path { animation-delay: .16s; }
#house-type-cards.draw .ht-card:nth-child(4) svg path { animation-delay: .24s; }
@keyframes ht-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* The old dropdown stays in the DOM as the state carrier; the cards are the control. */
.ht-fallback { display: none; }

/* Conflict notices: the wizard says out loud what it just fixed. */
.item-notice {
    background: var(--amber-wash);
    color: #7a4a10;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13.5px;
    margin: 0 0 8px;
    max-width: 620px;
    animation: chip-in .25s ease-out;
    transition: opacity .4s;
}
.item-notice.fade { opacity: 0; }

/* Per-tier price preview on the quality cards. */
.tier-price {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--green-deep);
    font-variant-numeric: tabular-nums;
    min-height: 1.1em;
}

/* ==== 2026-08-25 (night): confidence, journey bar, budget, variants ==== */

/* Honest confidence meter: how much of the visitor's own house the number uses. */
.conf-meter { margin: 0 0 12px; }
.conf-line { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.conf-bar { display: flex; gap: 4px; margin: 0 0 5px; }
.conf-seg {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #e2e6e1;
    transition: background .25s ease;
}
.conf-seg.on { background: var(--green); }
.conf-hint { font-size: 12.5px; color: var(--soft); margin: 0; }

/* Build-journey money bar: the milestone subtotals as one picture. */
.money-bar {
    display: flex;
    height: 16px;
    border-radius: 999px;
    overflow: hidden;
    margin: 6px 0 6px;
}
.mb-seg { display: block; min-width: 4px; }
.mb-seg + .mb-seg { border-left: 2px solid #fff; }
.mb-rosu  { background: #b0503a; }   /* cărămida structurii — la roșu */
.mb-gri   { background: #8f9a94; }   /* tencuiala — la gri */
.mb-cheie { background: var(--green); }
.mb-other { background: #d98324; }   /* proiectare, taxe și exterior */
.mb-caption {
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 8px;
    font-variant-numeric: tabular-nums;
}

/* Budget target: the visitor's own number, played against the honest range. */
#budget-box {
    margin: 14px 0 0;
    border: 1.5px dashed var(--control);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fbfcfa;
}
#budget-box[hidden] { display: none; }
.budget-label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; }
.budget-row { display: flex; align-items: center; gap: 8px; max-width: 240px; }
#budget-in {
    font: inherit; font-size: 15px;
    font-variant-numeric: tabular-nums;
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--control);
    border-radius: 10px;
}
#budget-in:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-wash); }
.budget-cur { font-size: 13px; font-weight: 700; color: var(--muted); }
.budget-msg { font-size: 13px; color: var(--ink); margin: 10px 0 0; }
.budget-ideas { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); }
.budget-ideas li { margin: 4px 0; }

/* The budget marker on the range band — amber, clearly not the estimate's own tick. */
.budget-tick {
    position: absolute; top: -7px; bottom: -7px;
    width: 3px;
    border-radius: 2px;
    background: var(--amber);
}
.budget-tick .budget-flag {
    position: absolute;
    top: -15px; left: 50%;
    transform: translateX(-50%);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--amber);
    line-height: 1;
    white-space: nowrap;
}
.budget-tick.out { opacity: 0.55; }
.range-band .band { margin-top: 16px; }   /* room for the budget flag above the band */

/* Variantele mele: the household's candidate houses, side by side. */
/* #variants is its own card on the stage (see the .stage-col block above), so it
   carries no separator rule of its own any more — the earlier version set a
   top border and padding that the card styling silently cancelled. */
#variants { margin-top: 18px; }
#variants[hidden] { display: none; }
.variants-title { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.var-row {
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 8px 0;
    background: #fbfcfa;
}
.var-main { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.var-name {
    font-size: 14px; font-weight: 700;
    color: var(--green-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
.var-name:hover { color: var(--green); }
.var-del {
    flex: none;
    font: inherit; font-size: 16px; line-height: 1;
    color: var(--soft); background: none;
    border: none; cursor: pointer;
    padding: 2px 6px; border-radius: 8px;
    min-width: 28px; min-height: 28px;
}
.var-del:hover { color: #8a2a12; background: #fbe9e2; }
.var-house {
    font-size: 11.5px; color: var(--soft);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.var-total { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 5px; }
.var-delta { font-size: 12px; color: #8a5a12; margin-top: 1px; font-variant-numeric: tabular-nums; }
.var-delta.cheapest { color: #1d5c40; font-weight: 700; }
.var-cap { margin: 6px 0 0; }
.variants-note { margin: 8px 0 0; font-size: 12px; }

/* Inline save-as-variant name field in the actions row. */
#variant-save { display: inline-flex; align-items: center; gap: 6px; }
#variant-save[hidden] { display: none; }
#variant-name {
    font: inherit; font-size: 13px;
    padding: 6px 10px;
    border: 1.5px solid var(--green);
    border-radius: 999px;
    min-width: 0;
    width: 180px;
}
#variant-name:focus { outline: none; box-shadow: 0 0 0 3px var(--green-wash); }

@media (max-width: 560px) {
    .var-del { min-width: 40px; min-height: 40px; }
}

/* ==== saved plans, phase 0 (2026-08-25 — docs/SAVED_PLANS.md) ==== */

/* The "și online" default in the save row. */
.variant-online-lbl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}
.variant-online-lbl input { margin: 0; }

/* Online badge on a panel row. */
.var-online {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1d5c40;
    background: #e6f3ea;
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 2px;
}

/* Inline rename. */
.var-ren {
    flex: none;
    font: inherit; font-size: 13px; line-height: 1;
    color: var(--soft); background: none;
    border: none; cursor: pointer;
    padding: 4px 6px; border-radius: 8px;
    margin-left: auto;
}
.var-ren:hover { color: var(--green-deep); background: var(--green-wash); }
.var-main .var-del { margin-left: 0; }
.var-rename-input {
    font: inherit; font-size: 13.5px;
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1.5px solid var(--green);
    border-radius: 10px;
}
.var-rename-input:focus { outline: none; box-shadow: 0 0 0 3px var(--green-wash); }

/* One-shot panel notice + the honest catalogue-freshness chip. */
.var-note { margin: 0 0 8px; color: var(--green-deep); font-weight: 600; }
.var-chip {
    display: inline-block;
    margin-top: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--amber);
    background: var(--amber-wash);
    border-radius: 999px;
    padding: 2px 9px;
}

/* The once-only import offer. */
.var-import {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border: 1.5px dashed var(--control);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 8px 0;
    font-size: 13px;
    background: #fbfcfa;
}
/* The quiet "no thanks" mini-btn variant — the import offer and the resume
   banner decline with one look. */
.var-import-no, .resume-no { border-color: var(--control); color: var(--muted); background: #fff; }

/* Owner footer: the public support handle + the secret adoption link. */
.owner-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border-top: 1px dashed var(--line);
    margin-top: 10px;
    padding-top: 10px;
}
.owner-lbl { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.owner-hint { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; }

@media (max-width: 560px) {
    .var-ren { min-width: 40px; min-height: 40px; }
}

/* ==== saved plans, phase 1: the plan bar (docs/SAVED_PLANS.md §6) ==== */

#plan-bar {
    margin: 8px 0 12px;
    background: var(--green-wash);
    border: 1.5px solid var(--green);
    border-radius: 12px;
    padding: 12px 14px;
}
#plan-bar[hidden] { display: none; }
.plan-bar-title { font-size: 13px; font-weight: 700; color: var(--green-deep); margin: 0 0 4px; }
.plan-bar-body { font-size: 13px; margin: 0; font-variant-numeric: tabular-nums; }
.plan-bar-fx { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.plan-bar-missing {
    font-size: 12.5px;
    color: #7a4a10;
    background: var(--amber-wash);
    border-radius: 8px;
    padding: 6px 10px;
    margin: 8px 0 0;
}
.plan-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.plan-bar-update {
    font: inherit; font-size: 13px; font-weight: 700;
    color: #fff;
    background: var(--green);
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
}
.plan-bar-update:hover:not(:disabled) { background: var(--green-deep); }
.plan-bar-update:disabled { opacity: 0.6; cursor: default; }

/* One-handed mobile (EXPERIENCE_GUIDELINES: tap targets ≥ 40 px) — every
   saved-plans control, not just the delete/rename glyphs. */
@media (max-width: 560px) {
    .plan-bar-update,
    .plan-bar-actions .mini-btn,
    #variants .mini-btn,
    .var-import .mini-btn,
    .owner-row .mini-btn,
    #rail-total .mini-btn,
    #result-actions > .mini-btn,
    .resume-actions .mini-btn,
    #variant-save .mini-btn { min-height: 40px; }
    /* min-height alone would grow the box and leave the label at the top. */
    #rail-total .mini-btn,
    #result-actions > .mini-btn { display: inline-flex; align-items: center; }
    .variant-online-lbl { min-height: 40px; }
    .variant-online-lbl input { width: 20px; height: 20px; }
}

/* ---- engineer's notes (feature panel 2026-08-26) ----
   Quiet advisories under the step-4 checklist: buildable-but-incomplete
   combinations get one honest sentence. Calmer than .item-notice (which is a
   transient action confirmation) — these persist while the condition is true. */
#advisories:empty { display: none; }
#advisories { margin-top: 12px; }
.advisory {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-left: 3px solid var(--amber);
    background: var(--amber-wash);
    border-radius: 0 10px 10px 0;
    color: #7a4a10;
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 60ch;
}

/* ---- declutter (feature panel 2026-08-26) ---- */

/* Step 4: category groups as <details>. Desktop keeps them open; on phones a
   closed group's header still names every checked option — never hide a choice. */
details.item-group > summary.ig-sum {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 8px;
}
details.item-group > summary.ig-sum::-webkit-details-marker { display: none; }
details.item-group > summary.ig-sum::before {
    content: '▸';
    color: var(--control);
    font-size: 12px;
    transition: transform .15s ease;
}
details.item-group[open] > summary.ig-sum::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
    details.item-group > summary.ig-sum::before { transition: none; }
}
summary.ig-sum:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.ig-name {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted);
}
.ig-meta { color: var(--soft); font-size: 12px; }
.ig-meta.has-picks { color: var(--green-deep); font-weight: 600; }

/* Option cards stand in two columns only while each card gets at least 238 px,
   otherwise in one. 238 px is the narrowest card measured on live (2026-10-28) at
   which the longest demo name still fits in three lines; 233 px gave four, and the
   196 px cards of a 940 px window gave five. A width rule, not a breakpoint: with
   the rail beside the steps it switches at a window of about 1099 px (later with a
   classic scrollbar, which is the point); between 620 and 939 px it stays two
   columns, except about 620–630 px with a classic scrollbar (one column). The
   34% stops a third column; it also avoids the exact fit of calc((100% - 10px) / 2),
   where subpixel rounding could drop a wide grid to one column. The first
   grid-template-columns is the fallback for browsers without max(). If a real name
   needs four lines at 238 px, raise the 238px — it is the only number to edit. */
@media (min-width: 620px) {
    .ig-body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-columns: repeat(auto-fill, minmax(max(238px, 34%), 1fr));
        gap: 0 10px;
        align-items: start;
    }
    .ig-body .item { max-width: none; }
}

/* Helper text clamps to one line until the card is checked; the full sentence
   appears exactly at decision time. The choose-one chip stays always visible. */
.item input:not(:checked) ~ .item-body .item-note {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.item-chip {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--amber-wash);
    color: #7a4a10;
    font-size: 11.5px;
    font-weight: 600;
    vertical-align: 1px;
    white-space: nowrap;
}

/* The rail identity lines (they replace the six-row table). */
.rail-line { margin: 0 0 4px; font-weight: 600; font-size: 14px; }
.rail-line-2 { color: var(--muted); font-weight: 400; margin-bottom: 10px; }
.rail-cur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 12px;
    border-top: 1px solid var(--line);
}
.rail-cur-label { color: var(--muted); font-size: 14px; }
@media (max-width: 939px) { .rail-line, .rail-line-2 { display: none; } }

/* The category fold on the result. */
.cat-details { margin: 14px 0 0; }
.cat-details > summary.cat-sum {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--control);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    background: var(--card);
}
.cat-details > summary.cat-sum::-webkit-details-marker { display: none; }
.cat-details > summary.cat-sum::after { content: '▾'; color: var(--control); }
.cat-details[open] > summary.cat-sum::after { content: '▴'; }
.cat-details > summary.cat-sum:hover { border-color: var(--green); }
.cat-details > summary.cat-sum:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* Step 5: the dimension boxes tile where there is room. */
@media (min-width: 620px) {
    #params { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px 16px; align-items: start; }
    #params .param-box + .param-box { margin-top: 0; }
}

/* Bounds show at typing time (focus or a refused value); provenance stays. */
.param-row .bounds-hint { display: none; }
.param-row:focus-within .bounds-hint { display: inline; }
.param-row input.invalid ~ small .bounds-hint { display: inline; }

/* The lead form folded behind its honest button. */
#lead-box.collapsed #lead-fields { display: none; }
#lead-box:not(.collapsed) #lead-collapsed { display: none; }
.lead-open-hint { margin: 6px 0 0; }

/* Visitor feedback (2026-10-27): the call-back box's place and fold, a free-text field. */
#feedback-box { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
#feedback-box .param-row { margin: 4px 0 10px; max-width: none; }
#feedback-box.collapsed #fb-fields { display: none; }
#feedback-box:not(.collapsed) #fb-collapsed { display: none; }
.fb-lbl { display: block; font-size: 14px; color: var(--ink); margin: 8px 0 0; }
.param-row textarea {
    width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--card);
    border: 1.5px solid var(--control); border-radius: var(--r-ctl);
    padding: 10px 14px; min-height: 96px; resize: vertical;
}
.param-row textarea:hover { border-color: var(--green); }
.param-row textarea:focus {
    outline: none; border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-wash), 0 0 0 4px var(--green);
}
#feedback-box .param-row input:disabled, .param-row textarea:disabled { opacity: .7; }
.test-banner a { color: var(--amber); font-weight: 700; }
#range-note { margin: 0 0 10px; }

@media print {
    /* The fold is opened by app.js for the print; its button-like summary is a
       control and stays off the paper. */
    .cat-details > summary.cat-sum { display: none !important; }
}

/* Every feature card is the same small grid at every width: check + name on the
   first row, then the choose-one chip, the note and the sketch beneath, the
   sketch at the card's bottom-right. Nothing sits beside the name, so the name
   always gets the whole text column (DESIGN.md, "The Name Gets the Room Rule").
   History, all measured on live on 2026-10-28: in the two-column checklist the
   chip sat beside the name and the sketch had no slot (auto-placed beside the
   name or under the check) — a name got 46–88 px and five lines on every desktop
   width and at 620–700 px, and chip cards pushed their parts over the card's
   edge. On phones the cards were flex rows: the note sat beside the name (seven
   lines at 375 px) and on sketch cards a long name wrapped below a lone check. */
.ig-body .item-body {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 3px 10px;
    align-items: baseline;
}
.ig-body .item-check { grid-column: 1; grid-row: 1; top: 2px; }
.ig-body .item-name { grid-column: 2; grid-row: 1; }
.ig-body .item-chip { grid-column: 2; grid-row: 2; justify-self: start; margin-left: 0; }
.ig-body .item-note { grid-column: 2; grid-row: 3; }
.ig-body .item-sketch { grid-column: 2; grid-row: 4; justify-self: end; align-self: start; margin: 4px 0 0; }

/* ---- content batch (feature panel item 4, 2026-09-07) ---- */

/* Small guide doors inside the honesty panel. */
.excl-more { display: inline-block; margin-left: 6px; color: var(--green-deep); font-size: 12px; }

/* ---- marketing pair (Jutas, 2026-09-08) ---- */
/* Hero eyebrow: what you obtain, before the question. */
.eyebrow { margin: 0 0 8px; color: var(--green-deep); font-weight: 700;
           font-size: 13.5px; letter-spacing: .01em; }
/* Test-version notice (2026-10-27, launch review): the demo-catalogue status is said
   above the fold on every page that shows a price. */
.test-banner { margin: 0 0 16px; padding: 9px 13px; border-radius: var(--r-ctl);
               background: var(--amber-wash); border: 1px solid #efcf9f; color: #5f3305;
               font-size: 13.5px; line-height: 1.45; }
.test-banner strong { color: var(--amber); }
/* Operator identification on every public page (2026-10-27): small, quiet, always there. */
.legal-foot { padding-top: 6px; padding-bottom: 28px; }
.legal-foot p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.legal-foot a { color: var(--green-deep); }
/* One-click verdict on the total (2026-10-29): a quiet question right under the numbers. */
.rate-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 6px; }
.rate-q { font-weight: 700; font-size: 15px; }
.rate-btns { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.rate-btn[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.rate-msg { flex-basis: 100%; margin: 2px 0 0; }
.rate-msg a { color: var(--green-deep); font-weight: 700; }
/* Footer supplier call-to-action strip. */
.foot-cta { display: flex; gap: 12px 18px; align-items: center; justify-content: space-between;
            flex-wrap: wrap; margin: 26px 0 6px; padding: 14px 16px;
            border: 1.5px solid var(--green); border-radius: 14px; background: var(--green-wash); }
.foot-cta strong { color: var(--ink); }
.foot-cta span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.foot-cta > a { flex: none; background: var(--green); color: #fff; font-weight: 700;
                text-decoration: none; padding: 10px 20px; border-radius: 999px; }
.foot-cta > a:hover { background: var(--green-deep); }
.foot-cta > a:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; }
/* The supplier sign-up form (furnizori.php). */
.sup-form { max-width: 560px; }
.sup-lbl { display: block; font-weight: 700; font-size: 13.5px; margin: 14px 0 4px; }
.sup-in { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px;
          border: 1.5px solid var(--control); border-radius: 12px; background: var(--card); }
.sup-in:focus-visible { outline: 3px solid var(--green); outline-offset: 1px; }
.sup-err { color: #b3261e; font-size: 12.5px; margin: 4px 0 0; }
.sup-hp { position: absolute; left: -9999px; top: -9999px; }
.sup-btn { margin-top: 18px; }
.sup-note { margin-top: 10px; }
.msel { position: relative; }
.msel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.msel-chip { background: var(--green-wash); border: 1px solid var(--green); border-radius: 999px;
             padding: 2px 10px; font-size: 12.5px; cursor: pointer; }
.msel-list { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 4px;
             max-height: 260px; overflow: auto; background: var(--card);
             border: 1.5px solid var(--control); border-radius: 12px; padding: 6px;
             box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.msel-opt { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px;
            cursor: pointer; font-size: 14px; }
.msel-opt:hover { background: var(--green-wash); }
.msel-all { border-bottom: 1px solid var(--control); margin-bottom: 4px; padding-bottom: 8px; }

/* The inflation line diagram on the result (2026-09-08): the same project
   priced at past years' average cost levels (INS yearly indices); the
   projected point hangs on a dotted amber segment — dotted = not yet real. */
#infl-box { margin: 18px 0 4px; }
.infl svg { display: block; width: 100%; height: auto; max-width: 620px; }
.infl-note { margin-top: 6px; }

/* The permits-to-moving-in strip on the result. */
#timeline-box { margin: 18px 0 4px; }
.tl-title { font-weight: 700; font-size: 14.5px; margin: 0 0 10px; }
.tl { display: flex; align-items: stretch; }
.tl-step { flex: 1; position: relative; padding: 0 6px; text-align: center; }
.tl-dot {
    display: block; width: 12px; height: 12px; border-radius: 50%;
    background: var(--green); margin: 0 auto; position: relative; z-index: 1;
}
.tl-step::before {
    content: ""; position: absolute; top: 5px; left: 50%; right: -50%;
    height: 2.5px; background: var(--green);
}
.tl-step:last-child::before { display: none; }
.tl-nm { display: block; font-weight: 600; font-size: 12px; line-height: 1.25; margin-top: 7px; }
.tl-dur { display: block; font-size: 11.5px; font-weight: 700; color: var(--amber); margin-top: 2px; }
.tl-note { margin: 10px 0 0; }
@media (max-width: 560px) {
    .tl { display: block; }
    .tl-step { display: grid; grid-template-columns: 16px 1fr auto; gap: 0 10px;
               align-items: baseline; text-align: left; padding: 3px 0; }
    .tl-step::before { top: 10px; left: 5px; right: auto; bottom: -8px; width: 2.5px; height: auto; }
    .tl-step:last-child::before { display: none; }
    .tl-nm { margin-top: 0; }
    .tl-dur { margin-top: 0; }
}

/* The printable pre-signing list (ghid-semnare). */
.semnare-list { padding-left: 20px; }
.semnare-list li { margin: 10px 0; }
.semnare-list em { color: var(--muted); font-style: normal; font-size: 13.5px; }
@media print {
    .guide-others, .guide-back, .guide-hero .brand, #timeline-box .tl-note a,
    .guide-article .mini-btn { display: none !important; }
    .guide-article { max-width: none; }
}

/* Guide links inside hints follow the house palette, not browser blue. */
.tl-note a, #lead-land-hint a { color: var(--green-deep); }

/* ---- "Cum îl plătești?" (2026-09-07) ---- */
#paybox { margin: 16px 0 4px; }
#paybox > summary.pay-sum {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--control);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    background: var(--card);
}
#paybox > summary.pay-sum::-webkit-details-marker { display: none; }
#paybox > summary.pay-sum::after { content: '▾'; color: var(--control); }
#paybox[open] > summary.pay-sum::after { content: '▴'; }
#paybox > summary.pay-sum:hover { border-color: var(--green); }
#paybox > summary.pay-sum:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.pay-tabs { display: flex; gap: 8px; margin: 12px 0 10px; }
.pay-tab {
    font: inherit; font-size: 13.5px; font-weight: 600;
    border: 1.5px solid var(--control); border-radius: 999px;
    background: var(--card); color: var(--ink);
    padding: 6px 14px; cursor: pointer;
}
.pay-tab.on { background: var(--green); border-color: var(--green); color: #fff; }
.pay-tab:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
@media (min-width: 620px) {
    .pay-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
}
.pay-big { font-size: 15px; margin: 10px 0 6px; }
.pay-big .pay-sub { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pay-line { font-size: 13.5px; color: var(--ink); margin: 8px 0; max-width: 68ch; }
.pay-foot { margin-top: 10px; }
.pay-cash-lead { margin: 4px 0 10px; }
.pay-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.pay-row span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-row-total { border-top: 2px solid var(--ink); border-bottom: none; font-size: 14.5px; }
.pay-fine { margin-top: 12px; }
@media print { #paybox { display: none !important; } }

/* The dossier teaser under the pay section. */
#dosar-tease { margin: 14px 0 4px; }
#dosar-tease #dosar-note { margin-top: 8px; max-width: 62ch; }
#dosar-tease a { color: var(--green-deep); }
@media print { #dosar-tease { display: none !important; } }

/* ---- "Cum îl plătești?" redesign (2026-09-07, Jutas's feedback): bigger door,
   a panel visibly its own tool, sliders, hero result, IRCC + marja rate. ---- */
#paybox > summary.pay-sum {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    border-radius: 14px;
    border-width: 2px;
    padding: 14px 18px;
    position: relative;
}
.pay-sum-title { font-size: 18px; font-weight: 800; }
.pay-sum-sub { font-size: 13px; font-weight: 400; color: var(--muted); }
#paybox > summary.pay-sum::after {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    font-size: 18px;
}
.pay-panel {
    margin-top: 10px;
    background: var(--green-wash);
    border: 1.5px solid var(--green);
    border-radius: 14px;
    padding: 16px 18px;
}
.pay-field { margin: 0 0 6px; }
.pay-field > label { display: flex; justify-content: space-between; align-items: baseline;
    font-weight: 600; font-size: 14px; gap: 10px; }
.pay-field output { font-weight: 800; color: var(--green-deep); font-variant-numeric: tabular-nums; }
.pay-field input[type="range"] { width: 100%; accent-color: var(--green); height: 26px; margin: 2px 0 0; }
.pay-field small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.pay-field-rate > label { justify-content: flex-start; }
.pay-rate-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pay-ircc { display: inline-flex; align-items: center; gap: 5px; }
.pay-ircc label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pay-ircc input {
    font: inherit; font-size: 14px; font-weight: 700; width: 64px;
    padding: 5px 8px; border: 1.5px solid var(--control); border-radius: 8px;
    text-align: right; font-variant-numeric: tabular-nums; background: var(--card);
}
.pay-ircc em { font-style: normal; color: var(--muted); font-size: 13px; }
.pay-plus { font-weight: 800; color: var(--muted); }
.pay-marja { flex: 1; min-width: 150px; }
.pay-marja label { display: flex; justify-content: space-between; font-size: 12.5px;
    color: var(--muted); font-weight: 600; }
.pay-marja input[type="range"] { width: 100%; accent-color: var(--green); }
.pay-eq { font-size: 15px; white-space: nowrap; }
.pay-eq strong { font-size: 17px; color: var(--green-deep); font-variant-numeric: tabular-nums; }
.pay-hero {
    background: var(--card);
    border: 1.5px solid var(--green);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 12px 0 10px;
}
.pay-hero-label { display: block; font-size: 10.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep); }
.pay-hero-fig { display: block; font-size: 26px; font-weight: 800;
    color: var(--green-deep); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pay-hero-fig em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--muted); }
.pay-hero-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pay-callout {
    background: var(--card);
    border-left: 3.5px solid var(--green);
    border-radius: 0 10px 10px 0;
    padding: 9px 13px;
    margin: 8px 0;
    font-size: 13.5px;
    max-width: none;
}
.pay-callout-amber { border-left-color: var(--amber-bright); background: var(--amber-wash); color: #7a4a10; }
.pay-panel .pay-row { background: transparent; }
@media (min-width: 620px) {
    .pay-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
    .pay-field-rate { grid-column: 1 / -1; }
}

/* The glazing composer's stepper rows (2026-09-07). */
.mh-step { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.mh-pm { min-width: 34px; min-height: 34px; padding: 2px 0; font-size: 17px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; }
.mh-cnt { min-width: 18px; text-align: center; font-weight: 800; font-size: 15px;
    font-variant-numeric: tabular-nums; color: var(--green-deep); }
.mh-step-lbl { font-size: 12.5px; color: var(--muted); line-height: 1.3; }

/* ---- the option-guide dialog (2026-09-07, owner amendment) ---- */
.opt-guide {
    font: inherit; font-size: 11.5px; font-weight: 600;
    margin-left: 8px; padding: 1px 9px;
    border: 1px solid var(--control); border-radius: 999px;
    background: var(--card); color: var(--green-deep);
    cursor: pointer; vertical-align: 1px; white-space: nowrap;
    position: relative;
}
/* The pill is drawn 44 x 22 px, but the tap target must be at least 40 px tall
   (docs/EXPERIENCE_GUIDELINES.md, mergol repo). An invisible layer centred on the
   pill makes it 48 x 40 px to the finger without changing how the card looks or
   flows: taps up to 9 px above or below the pill, or 2 px beside it, open the guide
   instead of ticking the card (measured 2026-10-28). The offsets count from inside
   the 1 px border, hence -3px for 2 px outside the drawn pill. */
.opt-guide::after {
    content: "";
    position: absolute;
    left: -3px; right: -3px;
    top: 50%;
    height: 40px;
    transform: translateY(-50%);
}
.opt-guide:hover { border-color: var(--green); }
.opt-guide:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
dialog#guide-pop {
    border: none; border-radius: 16px; padding: 0;
    width: calc(100vw - 32px); max-width: 560px; max-height: 85vh;
    box-shadow: 0 24px 60px rgba(29, 37, 33, .25);
    background: var(--card); color: var(--ink);
    display: flex; flex-direction: column;
}
dialog#guide-pop:not([open]) { display: none; }
#guide-pop::backdrop { background: rgba(29, 37, 33, .45); }
.gp-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 18px 10px; border-bottom: 1px solid var(--line); flex: none;
}
.gp-head h2 { font-size: 17px; margin: 0; }
.gp-close {
    width: 40px; height: 40px; flex: none;
    border: none; background: none; cursor: pointer;
    font-size: 26px; line-height: 1; color: var(--muted); border-radius: 10px;
}
.gp-close:hover { background: var(--bg); color: var(--ink); }
.gp-close:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
#guide-pop-body { padding: 12px 18px 18px; overflow-y: auto; font-size: 14px; line-height: 1.55; }
#guide-pop-body > h2:first-child { display: none; }  /* the dialog header already carries the title */
#guide-pop-body h3 { font-size: 14.5px; margin: 14px 0 4px; }
#guide-pop-body .gp-calc {
    border-top: 1.5px dashed var(--control); margin-top: 14px; padding-top: 10px;
}

/* ---- upgraded option-guide helpers (specialist specs, 2026-09-08) ---- */

/* Glazing scenario chips (dialog only) */
.mh-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.mh-preset { display: block; text-align: left; border-radius: var(--r-ctl);
             padding: 6px 10px; background: var(--card); border-color: var(--control); color: var(--ink); }
.mh-preset .mh-preset-name { display: block; font-size: 13px; font-weight: 700; }
.mh-preset .mh-preset-sub { display: block; font-size: 12px; font-weight: 400;
                            color: var(--muted); font-variant-numeric: tabular-nums; }
.mh-preset:hover { background: var(--green-wash); }
.mh-preset[aria-pressed="true"] { background: var(--green-wash); border-color: var(--green); color: var(--green-deep); }
.mh-preset[aria-pressed="true"] .mh-preset-sub { color: var(--green-deep); }
.mh-preset-desc { display: block; font-size: 12.5px; color: var(--muted); margin: 2px 0 6px; min-height: 1.3em; }

/* Shading preset rows (vertical list — descriptions must be readable before tapping) */
.gp-presets { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.gp-preset { font: inherit; text-align: left; cursor: pointer; border: 1.5px solid var(--control);
    border-radius: 12px; background: var(--card); color: var(--ink); padding: 8px 10px; }
.gp-preset:hover { border-color: var(--green); }
.gp-preset:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.gp-preset.is-on { border-color: var(--green); background: var(--green-wash); }
.gp-preset-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gp-preset-lbl { font-weight: 700; font-size: 13px; }
.gp-preset-mp { font-size: 12.5px; color: var(--green-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-preset-desc { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 2px; }

/* Battery profile slider: kWh numbers at the ticks, label above, story below */
.psl-label { margin: 4px 0 2px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.psl-ticks { display: grid; grid-template-columns: repeat(6, 1fr); margin: 0 0 2px; }
.psl-ticks span { text-align: center; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.psl-ticks span.on { color: var(--green-deep); font-weight: 700; }
.psl-range { width: 100%; accent-color: var(--green); margin: 0 0 6px; }
.psl-dim { opacity: .35; }
.psl-desc { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); line-height: 1.4; min-height: 2.6em; }
.psl-note { margin: 6px 0 8px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.psl-ov-link { display: inline-block; margin-top: 4px; }
.psl-ov { margin-top: 6px; }
.psl-ov .mh-cap { margin-top: 6px; }

/* ---- guide object figures (2026-09-08, "illustration for models/objects") ---- */
/* The door-type strip inside guide articles (inline SVG, ink + amber hand) */
.gp-figs { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 10px 0 4px; }
.gp-fig { width: 88px; text-align: center; }
.gp-fig svg { width: 100%; height: auto; display: block; }
.gp-fig > span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* Tiny element sketches at the start of the counter rows */
.mh-el { flex: none; width: 38px; align-self: center; }
.mh-el svg { width: 100%; height: auto; display: block; max-height: 44px; margin: 0 auto; }