/* ===========================================================================
   Arsy Solutions — Manual-work cost calculator
   Depends on the design tokens already defined on :root in site.css
   (--brand-purple, --brand-orange, --brand-ink, --surface, --text-primary,
    --text-secondary, --border-soft, --shadow-soft, --shadow-strong,
    --header-height, --theme-subhero-background, --theme-contact-callout-background)
   Every selector below is namespaced `calc-` so nothing collides with site.css.
   =========================================================================== */

.calc-page {
    --calc-radius: 2rem;
    --calc-radius-sm: 1.15rem;
    --calc-gap: clamp(1.1rem, 2.2vw, 1.75rem);
    background: var(--surface, #fff8ef);
    color: var(--text-primary, #241428);
}

/* ---------- hero ---------- */
.calc-hero {
    position: relative;
    isolation: isolate;
    padding: calc(var(--header-height, 92px) + 3.2rem) 0 clamp(3rem, 6vw, 4.5rem);
    background: var(--theme-subhero-background,
        radial-gradient(circle at 20% 18%, rgba(255, 165, 0, .18), transparent 22%),
        linear-gradient(135deg, rgba(24, 1, 24, .99), rgba(77, 22, 89, .96) 58%, rgba(255, 165, 0, .22) 160%));
    color: #fff;
}

.calc-hero__inner {
    display: grid;
    gap: 1.15rem;
    max-width: 62ch;
}

.calc-hero__eyebrow {
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 214, 168, .92);
}

.calc-hero__title {
    margin: 0;
    font-size: clamp(2rem, 4.4vw, 3.15rem);
    line-height: 1.12;
    font-weight: 400;
}

.calc-hero__title strong {
    font-weight: 400;
    background: linear-gradient(100deg, #ffd08a, #ffa500 55%, #ffb3ea);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.calc-hero__lead {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.62;
    color: rgba(255, 255, 255, .84);
}

.calc-hero__note {
    margin: .35rem 0 0;
    font-size: .87rem;
    color: rgba(255, 255, 255, .62);
}

/* ---------- layout ---------- */
.calc-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.75rem);
}

.calc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--calc-gap);
    align-items: start;
}

@media (max-width: 960px) {
    .calc-layout { grid-template-columns: minmax(0, 1fr); }
}

.calc-card {
    background: #fff;
    border: 1px solid var(--border-soft, rgba(36, 20, 40, .1));
    border-radius: var(--calc-radius);
    box-shadow: var(--shadow-soft, 0 18px 42px rgba(24, 1, 24, .08));
    padding: clamp(1.35rem, 2.6vw, 2rem);
}

.calc-card__title {
    margin: 0 0 .3rem;
    font-size: 1.16rem;
    font-weight: 400;
}

.calc-card__hint {
    margin: 0 0 1.3rem;
    font-size: .87rem;
    line-height: 1.55;
    color: var(--text-secondary, rgba(36, 20, 40, .72));
}

/* ---------- inputs ---------- */
.calc-fields { display: grid; gap: 1.05rem; }

.calc-field { display: grid; gap: .4rem; }

.calc-field__label {
    font-size: .88rem;
    line-height: 1.4;
    color: var(--text-primary, #241428);
}

.calc-field__hint {
    font-size: .76rem;
    color: var(--text-secondary, rgba(36, 20, 40, .72));
}

.calc-field__control {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--border-soft, rgba(36, 20, 40, .1));
    border-radius: var(--calc-radius-sm);
    background: #fffdf9;
    padding: .1rem .85rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.calc-field__control:focus-within {
    border-color: rgba(128, 0, 128, .45);
    box-shadow: 0 0 0 4px rgba(128, 0, 128, .09);
}

.calc-field__control input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1.02rem;
    color: var(--text-primary, #241428);
    padding: .72rem 0;
    -moz-appearance: textfield;
}

.calc-field__control input::-webkit-outer-spin-button,
.calc-field__control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-field__control input:focus { outline: none; }

.calc-field__unit {
    font-size: .85rem;
    color: var(--text-secondary, rgba(36, 20, 40, .72));
    white-space: nowrap;
}

.calc-field.is-invalid .calc-field__control {
    border-color: rgba(194, 59, 59, .55);
    box-shadow: 0 0 0 4px rgba(194, 59, 59, .08);
}

/* ---------- advanced ---------- */
.calc-advanced { margin-top: 1.3rem; border-top: 1px solid var(--border-soft, rgba(36, 20, 40, .1)); padding-top: 1.1rem; }

.calc-advanced__toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: .88rem;
    color: var(--brand-purple, #800080);
    cursor: pointer;
}

.calc-advanced__toggle::after {
    content: "";
    width: .48rem; height: .48rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease;
}

.calc-advanced__toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.calc-advanced__panel { margin-top: 1.1rem; }
.calc-advanced__panel[hidden] { display: none; }

/* ---------- result ---------- */
.calc-result { display: grid; gap: var(--calc-gap); align-content: start; }

/* Only the headline number sticks — the column itself must not, or a tall
   unlocked breakdown would pin in place and become unreachable. */
@media (min-width: 961px) {
    .calc-total { position: sticky; top: calc(var(--header-height, 92px) + 1.2rem); z-index: 2; }
}

.calc-total {
    background: var(--theme-section-ink-background,
        radial-gradient(circle at top right, rgba(255, 165, 0, .14), transparent 22%),
        linear-gradient(145deg, rgba(24, 1, 24, .99), rgba(61, 24, 70, .95)));
    color: #fff;
    border-radius: var(--calc-radius);
    padding: clamp(1.5rem, 3vw, 2.1rem);
    box-shadow: var(--shadow-strong, 0 30px 80px rgba(24, 1, 24, .18));
}

.calc-total__label {
    margin: 0;
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 214, 168, .9);
}

.calc-total__value {
    margin: .5rem 0 .2rem;
    font-size: clamp(2.3rem, 5.4vw, 3.4rem);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.calc-total__sub { margin: 0; font-size: .92rem; color: rgba(255, 255, 255, .72); }

.calc-bars { margin-top: 1.6rem; display: grid; gap: .85rem; }

.calc-bar__head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .87rem;
    margin-bottom: .35rem;
}

.calc-bar__value { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .92); }

.calc-bar__track {
    height: 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}

.calc-bar__fill {
    height: 100%;
    border-radius: 99px;
    transition: width .45s cubic-bezier(.22, .8, .3, 1);
}

.calc-bar--labour .calc-bar__fill { background: linear-gradient(90deg, #ffb733, #ffa500); }
.calc-bar--errors .calc-bar__fill { background: linear-gradient(90deg, #e0629d, #b0246b); }
.calc-bar--late   .calc-bar__fill { background: linear-gradient(90deg, #b46bd0, #800080); }

/* ---------- gated detail ---------- */
.calc-detail { position: relative; }

.calc-detail__grid { display: grid; gap: .1rem; }

.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .62rem 0;
    border-bottom: 1px solid var(--border-soft, rgba(36, 20, 40, .1));
    font-size: .92rem;
}

.calc-row:last-child { border-bottom: 0; }
.calc-row__value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-row--strong { font-weight: 400; }
.calc-row--strong .calc-row__value { color: var(--brand-purple, #800080); }

.calc-subhead {
    margin: 1.2rem 0 .2rem;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-secondary, rgba(36, 20, 40, .72));
}

.calc-subhead:first-child { margin-top: 0; }

/* locked state */
.calc-detail__body { transition: filter .3s ease, opacity .3s ease; }

/* Locked: show enough to prove there is real detail underneath, then cut. */
.calc-detail.is-locked { padding-bottom: 0; }

.calc-detail.is-locked .calc-detail__body {
    filter: blur(5px);
    opacity: .5;
    pointer-events: none;
    user-select: none;
    max-height: 250px;
    overflow: hidden;
}

.calc-gate {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: .6rem;
    padding: 3.2rem 1.5rem clamp(1.35rem, 2.6vw, 2rem);
    border-radius: 0 0 var(--calc-radius) var(--calc-radius);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .82) 32%,
        rgba(255, 255, 255, .98) 60%);
}

.calc-detail:not(.is-locked) .calc-gate { display: none; }

.calc-gate__title { margin: 0; font-size: 1.06rem; }

.calc-gate__text {
    margin: 0;
    max-width: 40ch;
    font-size: .89rem;
    line-height: 1.55;
    color: var(--text-secondary, rgba(36, 20, 40, .72));
}

/* ---------- lead form ---------- */
.calc-lead {
    background: var(--theme-contact-callout-background,
        linear-gradient(135deg, rgba(128, 0, 128, .13), rgba(255, 165, 0, .14)));
    border: 1px solid var(--border-soft, rgba(36, 20, 40, .1));
    border-radius: var(--calc-radius);
    padding: clamp(1.35rem, 2.6vw, 1.9rem);
}

.calc-lead__title { margin: 0 0 .35rem; font-size: 1.08rem; }

.calc-lead__text {
    margin: 0 0 1.15rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--text-secondary, rgba(36, 20, 40, .72));
}

.calc-lead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.calc-lead__grid .calc-field--full { grid-column: 1 / -1; }

@media (max-width: 520px) { .calc-lead__grid { grid-template-columns: 1fr; } }

.calc-lead .contact-field__input {
    width: 100%;
    border: 1px solid var(--border-soft, rgba(36, 20, 40, .1));
    border-radius: var(--calc-radius-sm);
    background: #fffdf9;
    font: inherit;
    padding: .72rem .85rem;
    color: var(--text-primary, #241428);
}

.calc-lead .contact-field__input:focus {
    outline: none;
    border-color: rgba(128, 0, 128, .45);
    box-shadow: 0 0 0 4px rgba(128, 0, 128, .09);
}

.calc-field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.calc-lead__actions { margin-top: 1.05rem; display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.calc-lead__consent {
    margin: .8rem 0 0;
    font-size: .76rem;
    line-height: 1.5;
    color: var(--text-secondary, rgba(36, 20, 40, .72));
}

/* The shared handler in site.js rewrites className to
   "contact-form__status is-<state>", so both names are styled here. */
.calc-form__status,
.calc-lead .contact-form__status {
    margin-bottom: .9rem;
    padding: .7rem .9rem;
    border-radius: var(--calc-radius-sm);
    font-size: .87rem;
}

.calc-form__status.is-success,
.calc-lead .contact-form__status.is-success { background: rgba(31, 122, 61, .1); color: #1f7a3d; }

.calc-form__status.is-error,
.calc-lead .contact-form__status.is-error { background: rgba(194, 59, 59, .1); color: #a32d2d; }

.calc-form__status[hidden],
.calc-lead .contact-form__status[hidden] { display: none; }

.calc-lead .contact-form__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

form.is-submitting .calc-lead__actions { opacity: .6; pointer-events: none; }

/* ---------- fallback button (only if site.css is absent) ---------- */
.calc-page .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid transparent;
    border-radius: 99px;
    padding: .78rem 1.5rem;
    font: inherit;
    font-size: .92rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.calc-page .button--primary {
    background: linear-gradient(120deg, var(--brand-purple, #800080), #b0246b 58%, var(--brand-orange, #ffa500) 160%);
    color: #fff;
    box-shadow: 0 14px 30px rgba(128, 0, 128, .22);
}

.calc-page .button--primary:hover { transform: translateY(-1px); box-shadow: 0 18px 38px rgba(128, 0, 128, .28); }

.calc-page .button--ghost {
    background: transparent;
    border-color: var(--border-soft, rgba(36, 20, 40, .18));
    color: var(--text-primary, #241428);
}

.calc-page .button--ghost:hover { border-color: rgba(128, 0, 128, .4); }

/* ---------- closing CTA ---------- */
.calc-cta {
    margin-top: var(--calc-gap);
    display: grid;
    gap: .8rem;
    justify-items: start;
    background: #fff;
    border: 1px solid var(--border-soft, rgba(36, 20, 40, .1));
    border-radius: var(--calc-radius);
    box-shadow: var(--shadow-soft, 0 18px 42px rgba(24, 1, 24, .08));
    padding: clamp(1.35rem, 2.6vw, 2rem);
}

.calc-cta__title { margin: 0; font-size: 1.2rem; font-weight: 400; }

.calc-cta__text {
    margin: 0;
    max-width: 62ch;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--text-secondary, rgba(36, 20, 40, .72));
}

.calc-cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .3rem; }

.calc-assumptions {
    margin-top: var(--calc-gap);
    font-size: .8rem;
    line-height: 1.6;
    color: var(--text-secondary, rgba(36, 20, 40, .72));
}

.calc-assumptions summary { cursor: pointer; color: var(--brand-purple, #800080); }
.calc-assumptions ul { margin: .7rem 0 0; padding-left: 1.1rem; display: grid; gap: .4rem; }

@media print {
    .calc-hero, .calc-lead, .calc-cta, .calc-gate { display: none !important; }
    .calc-detail.is-locked .calc-detail__body { filter: none; opacity: 1; }
}