@font-face {
  font-family: "Barlow Condensed";
  src: url("./assets/barlow-condensed-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("./assets/barlow-condensed-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("./assets/barlow-extrabold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #171716;
  --muted: #66615e;
  --canvas: #f5f0e8;
  --paper: #fbf8f1;
  --vermilion: #cf372f;
  --vermilion-dark: #a92622;
  --vermilion-soft: #f7dfda;
  --rule: #d8c5b9;
  --gold: #d5a035;
  --success: #2f9a45;
  --warning: #8f3029;
  --shadow: 0 18px 44px rgba(67, 42, 29, .12);
  --display-font: "Barlow", sans-serif;
  --label-font: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body-font: "Avenir Next", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--body-font);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--vermilion) var(--canvas); scrollbar-width: thin; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--canvas); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("./assets/materialfit-paper.png") repeat; background-size: 512px; opacity: .18; }
::selection { color: var(--paper); background: var(--vermilion); }
button, input, select { font: inherit; }
button { cursor: pointer; }
svg { display: block; }
h1, h2, h3, p, dl, ol { margin-top: 0; }
h1 { max-width: none; margin-bottom: .55rem; font-family: var(--label-font); font-size: clamp(3rem, 4vw, 4rem); font-weight: 700; line-height: .92; letter-spacing: -.025em; text-wrap: balance; }
h2, h3 { margin-bottom: 0; }

[data-js-state="disabled"] .skip-link,
[data-js-state="disabled"] .workbench,
[data-js-state="disabled"] .workspace,
[data-js-state="disabled"] .footer { display: none; }
.shell-recovery { display: none; max-width: 42rem; margin: 4rem auto; padding: 1.5rem; border: 2px solid var(--vermilion); border-radius: 4px; background: var(--paper); box-shadow: var(--shadow); }
[data-js-state="disabled"] .shell-recovery { display: block; }
.shell-recovery h1 { margin: 0 0 .65rem; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.shell-recovery p { margin: .55rem 0 0; color: var(--muted); line-height: 1.55; }
#no-script-recovery { display: none; }

.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 30; padding: .8rem 1rem; border-radius: 3px; color: var(--paper); background: var(--ink); font-weight: 800; }
.skip-link:focus { top: 1rem; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-shell[hidden], #account-change-recovery[hidden] { display: none; }
.topbar { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem clamp(1rem, 2vw, 2rem); border-bottom: 1px solid var(--vermilion); background: rgba(251, 248, 241, .96); }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }
.brand-cluster { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; color: var(--paper); background: var(--vermilion); }
.brand-mark svg { width: 23px; height: 23px; }
.brand-mark path { fill: none; stroke: currentColor; stroke-width: 1.7; }
.brand strong { font-family: var(--display-font); font-size: clamp(1.55rem, 2.3vw, 2.15rem); letter-spacing: -.04em; }
.section-nav { display: flex; align-items: center; gap: 1rem; min-height: 44px; }
.section-nav a { position: relative; padding: .5rem .1rem; color: var(--muted); font-family: var(--label-font); font-weight: 700; text-decoration: none; white-space: nowrap; }
.section-nav a:hover, .section-nav a[aria-current="page"] { color: var(--ink); }
.section-nav a[aria-current="page"]::after { content: ""; position: absolute; inset: auto 0 2px; height: 2px; background: var(--vermilion); }
.section-nav a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.topbar-actions { display: flex; align-items: center; gap: 1rem; }
.offline-pill, .draft-badge { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .77rem; white-space: nowrap; }
.offline-pill { padding-left: 1.3rem; border-left: 1px solid #aaa29c; font-family: var(--label-font); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.draft-badge { padding-left: .25rem; }
.status-dot, .draft-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.draft-dot { background: var(--gold); }
.help-disclosure { position: relative; }
.help-disclosure summary { list-style: none; }
.help-disclosure summary::-webkit-details-marker { display: none; }
.icon-button { min-height: 44px; display: flex; align-items: center; gap: .55rem; padding: .45rem .65rem; border: 0; border-left: 1px solid #aaa29c; color: var(--ink); background: transparent; }
.icon-button svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button span { font-weight: 700; }
.help-panel { position: absolute; z-index: 20; top: 3.2rem; right: 0; width: min(350px, calc(100vw - 2rem)); padding: 1rem; border: 1px solid var(--vermilion); border-radius: 3px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow); font-size: .83rem; line-height: 1.5; }
.help-panel p { margin: .35rem 0 0; color: var(--muted); }

.room-allowance { min-height: 34px; display: inline-flex; align-items: center; padding: .35rem .65rem; border: 1px solid var(--gold); border-radius: 3px; color: #68480b; background: #fff2cc; font-family: var(--label-font); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.room-allowance.is-signed-in { border-color: #88ae8d; color: #1f662e; background: #e7f3e9; }
.account-button { min-height: 44px; padding: .55rem .9rem; border: 1.5px solid var(--vermilion); border-radius: 3px; color: var(--vermilion-dark); background: transparent; font-family: var(--label-font); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.account-button:hover { color: #fff; background: var(--vermilion-dark); }

.account-dialog { width: min(960px, calc(100vw - 2rem)); max-height: min(880px, calc(100vh - 2rem)); padding: 0; border: 1px solid var(--vermilion); border-radius: 4px; color: var(--ink); background: var(--paper); box-shadow: 0 28px 80px rgba(42, 22, 16, .32); overflow: hidden; }
.account-dialog::backdrop { background: rgba(31, 22, 18, .68); }
.account-frame { min-height: 610px; display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); }
.account-rail { display: flex; flex-direction: column; padding: clamp(1.6rem, 4vw, 3rem); color: #fff4e9; background-color: var(--vermilion); background-image: url("./assets/materialfit-paper.png"); background-size: 512px; background-blend-mode: multiply; }
.account-brand { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: auto; color: inherit; text-decoration: none; }
.account-brand .brand-mark { color: var(--vermilion-dark); background: #fff4e9; }
.account-brand strong { font-family: var(--display-font); font-size: 1.55rem; letter-spacing: -.03em; }
.account-rail h2 { max-width: 10ch; margin: 3rem 0 .8rem; font-family: var(--label-font); font-size: clamp(2.4rem, 4vw, 4.1rem); font-weight: 700; line-height: .92; letter-spacing: -.025em; text-wrap: balance; }
.account-rail > p { max-width: 33ch; color: #ffe8dc; line-height: 1.55; }
.account-rail-status { display: flex; align-items: center; gap: .65rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(255, 244, 233, .62); font-family: var(--label-font); letter-spacing: .08em; text-transform: uppercase; }
.account-rail-status span { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.account-rail .account-data-note { margin: auto 0 0; padding-top: 2rem; font-size: .74rem; }
.account-content { position: relative; max-height: calc(100vh - 2rem); padding: clamp(1.6rem, 4vw, 3rem); overflow-y: auto; }
.account-content > section { max-width: 590px; margin-inline: auto; }
.account-content h2 { margin: .6rem 0 .45rem; font-family: var(--label-font); font-size: clamp(2.2rem, 4vw, 3.35rem); line-height: .95; letter-spacing: -.02em; }
.account-close { position: sticky; z-index: 3; top: 0; float: right; width: 44px; height: 44px; display: grid; place-items: center; margin: -.65rem -.65rem .5rem .5rem; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink); background: var(--paper); }
.account-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.account-intro { max-width: 58ch; margin-bottom: 1.4rem; color: var(--muted); line-height: 1.55; }
.auth-switch { display: inline-flex; gap: .25rem; margin-bottom: 1.2rem; padding: .25rem; border: 1px solid var(--rule); border-radius: 4px; }
.auth-switch button { min-height: 40px; padding: .45rem .75rem; border: 0; border-radius: 3px; color: var(--muted); background: transparent; font-family: var(--label-font); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.auth-switch button[aria-pressed="true"] { color: #fff; background: var(--vermilion); }
.google-button { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .75rem 1rem; border: 1.5px solid var(--ink); border-radius: 4px; color: var(--ink); background: transparent; font-weight: 800; }
.google-button:hover { color: #fff; background: var(--ink); }
.google-button svg { width: 22px; height: 22px; fill: currentColor; }
.auth-divider { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0; color: var(--muted); font-size: .75rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.account-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.account-form[aria-busy="true"] { opacity: .72; }
.account-field { min-width: 0; }
.account-field label { margin-bottom: .4rem; font-size: .76rem; }
.account-field label span { color: var(--muted); font-family: var(--body-font); font-size: .7rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.account-field input, .account-field select, .delete-account input { min-height: 52px; border-width: 1.5px; }
.account-field p { margin: .3rem 0 0; color: var(--muted); font-size: .72rem; }
.account-primary, .account-secondary, .account-text-button { min-height: 50px; padding: .7rem 1rem; border-radius: 4px; font-weight: 800; }
.account-primary { border: 1.5px solid var(--vermilion); color: #fff; background: var(--vermilion); }
.account-primary:hover { background: var(--vermilion-dark); }
.account-secondary { border: 1.5px solid var(--vermilion); color: var(--vermilion-dark); background: transparent; }
.account-secondary:hover { color: #fff; background: var(--vermilion-dark); }
.account-text-button { border: 1px solid transparent; color: var(--muted); background: transparent; }
.account-text-button:hover { border-color: var(--rule); color: var(--ink); }
.account-form > .account-primary { align-self: end; }
.account-footnote { margin: 1rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.account-status { min-height: 1.25rem; margin: 1rem 0 0; color: #246d32; font-size: .78rem; line-height: 1.45; }
.account-status.is-error { color: var(--warning); }
.profile-form { margin-top: 1.2rem; }
.location-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: .35rem 0 0; padding: 1rem; border: 1px solid var(--rule); }
.location-fields legend { padding: 0 .35rem; font-family: var(--label-font); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.location-fields > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .75rem; }
.marketing-choice { grid-column: 1 / -1; display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: .65rem; margin: .35rem 0; font-family: var(--body-font); font-size: .82rem; font-weight: 500; letter-spacing: 0; line-height: 1.45; text-transform: none; }
.marketing-choice input { width: 20px; min-height: 20px; margin: 0; accent-color: var(--vermilion); }
.account-form-actions { grid-column: 1 / -1; display: flex; gap: .6rem; }
.account-email { margin: .75rem 0 .35rem; font-size: 1.05rem; font-weight: 800; overflow-wrap: anywhere; }
.account-management-actions { display: grid; gap: .7rem; margin-top: 1.5rem; }
.delete-account { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.delete-account summary { min-height: 44px; display: flex; align-items: center; color: var(--warning); font-weight: 800; cursor: pointer; }
.delete-account p { color: var(--muted); font-size: .8rem; line-height: 1.5; }
.delete-account form { display: grid; gap: .65rem; }
.delete-account form label { margin: 0; }
.delete-account form button { min-height: 48px; border: 1px solid var(--warning); border-radius: 4px; color: #fff; background: var(--warning); font-weight: 800; }

.workbench { flex: 1; display: grid; grid-template-columns: minmax(380px, 37.75vw) minmax(0, 1fr); align-items: stretch; }
.plan-panel { position: sticky; top: 0; align-self: start; min-height: calc(100vh - 74px); padding: clamp(1.8rem, 3vw, 3rem) clamp(1.5rem, 2.15vw, 2.4rem) 2rem; color: #fff6e9; background-color: var(--vermilion); background-image: url("./assets/materialfit-paper.png"); background-size: 512px; background-blend-mode: multiply; overflow: hidden; }
.plan-heading h2, .plan-ledger h3, .plan-totals dt { font-family: var(--label-font); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.plan-heading h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); overflow-wrap: anywhere; }
.plan-heading p { margin: .65rem 0 0; color: #ffecdf; font-size: .93rem; line-height: 1.45; }
.plan-diagram { margin: 1.65rem 0 1.8rem; }
.plan-grid { height: clamp(255px, 31vw, 350px); padding: .75rem; border: 1px solid rgba(255, 244, 226, .65); background: rgba(101, 22, 19, .12); }
.plan-grid > p { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; color: #ffe9d6; text-align: center; line-height: 1.5; }
.plan-map { display: block; width: 100%; height: 100%; }
.plan-shape { fill: rgba(255, 246, 233, .16); stroke: #fff1df; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.plan-shape:nth-of-type(even) { fill: rgba(255, 246, 233, .27); }
.plan-shape-small { stroke: #fff; stroke-width: 8px; }
.plan-shape-label { fill: #fff9ef; font-family: var(--body-font); font-weight: 700; pointer-events: none; }
.plan-scale-note { margin: .55rem 0 0; color: #ffe9d6; font-size: .75rem; line-height: 1.35; }
.plan-scale-note[hidden] { display: none; }
.plan-ledger { padding: 1.2rem 0 1rem; border-top: 1px solid rgba(255, 241, 222, .85); border-bottom: 1px solid rgba(255, 241, 222, .85); }
.plan-ledger h3 { margin-bottom: .9rem; font-size: .85rem; overflow-wrap: anywhere; }
.plan-list { display: grid; gap: .45rem; margin-bottom: 0; padding: 0; list-style: none; }
.plan-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: .65rem; font-size: .79rem; font-variant-numeric: tabular-nums; }
.plan-list span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 2px; color: var(--vermilion-dark); background: #fff5e7; font-family: var(--label-font); font-weight: 700; }
.plan-list strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-list em { min-width: 0; color: #ffead8; font-style: normal; text-align: right; overflow-wrap: anywhere; }
.plan-totals { display: grid; gap: .55rem; margin: 1rem 0 0; }
.plan-totals > div { display: flex; justify-content: space-between; gap: 1rem; }
.plan-totals dt { font-size: .78rem; }
.plan-totals dd { margin: 0; text-align: right; font-size: .83rem; font-variant-numeric: tabular-nums; }
.plan-disclaimer { margin: 1.1rem 0 0; color: #ffe1d2; font-size: .7rem; line-height: 1.45; }

.workspace { min-width: 0; width: 100%; padding: clamp(2rem, 3vw, 3.4rem) clamp(2rem, 3.4vw, 4rem) 3rem; background: rgba(251, 248, 241, .74); }
.intro { margin-bottom: 2rem; }
.intro-copy { margin-bottom: 0; color: var(--muted); font-size: clamp(1.2rem, 2vw, 1.75rem); line-height: 1.35; }
.stepper { display: flex; align-items: flex-start; width: 100%; margin: 0 0 2.4rem; padding: 0 clamp(.4rem, 2.5vw, 2.5rem); }
.step { display: flex; flex-direction: column; align-items: center; gap: .48rem; color: var(--muted); white-space: nowrap; font-family: var(--label-font); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.step span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #898582; border-radius: 50%; color: var(--muted); background: var(--canvas); font-family: var(--body-font); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.step.active { color: var(--ink); }
.step.active span { border-color: var(--gold); color: #fff; background: var(--gold); }
.step.completed { color: var(--vermilion-dark); }
.step.completed span { border-color: var(--vermilion); color: #fff; background: var(--vermilion); }
.step.active span { border-color: var(--gold); color: #fff; background: var(--gold); }
.step-line { flex: 1; min-width: 1.2rem; height: 1px; margin: 21px .2rem 0; background: #a4a09d; }

.form-card { min-width: 0; }
.card-heading { display: flex; justify-content: flex-end; min-height: 1px; }
.card-heading h2 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.required-note { color: var(--muted); font-family: var(--label-font); font-size: .73rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.required-note span, .required-marker { color: var(--vermilion); }
.selector-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.6rem; }
.field-group { min-width: 0; }
.unit-field { grid-column: 1; }
label, .result-label, .result-subheading, .action-copy > strong { display: block; margin-bottom: .5rem; color: var(--ink); font-family: var(--label-font); font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
select, input { width: 100%; min-height: 60px; padding: .8rem 1rem; border: 2px solid var(--vermilion); border-radius: 4px; color: var(--ink); background: rgba(255, 253, 248, .86); outline: none; font-size: 1rem; font-variant-numeric: tabular-nums; caret-color: var(--vermilion); }
select:hover, input:hover { border-color: var(--vermilion-dark); }
select:focus, input:focus, button:focus-visible, summary:focus-visible { outline: 3px solid rgba(213, 160, 53, .54); outline-offset: 3px; }
.illustrated-select { position: relative; }
.illustrated-trigger { width: 100%; min-height: 60px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 22px; align-items: center; gap: .8rem; padding: .75rem 1rem; border: 2px solid var(--vermilion); border-radius: 4px; color: var(--ink); background: rgba(255, 253, 248, .86); text-align: left; }
.illustrated-trigger:hover:not(:disabled) { border-color: var(--vermilion-dark); }
.illustrated-trigger:disabled { cursor: not-allowed; opacity: .55; }
.illustrated-trigger.is-placeholder { color: var(--muted); }
.select-art { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.select-chevron { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease-out; }
.illustrated-trigger[aria-expanded="true"] .select-chevron { transform: rotate(180deg); }
.illustrated-options { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: min(390px, 60vh); overflow-y: auto; padding: .35rem; border: 1px solid var(--vermilion); border-radius: 4px; background: var(--paper); box-shadow: var(--shadow); }
.illustrated-options[hidden] { display: none; }
.illustrated-option { width: 100%; min-height: 58px; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: .8rem; padding: .7rem .75rem; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink); background: transparent; text-align: left; }
.illustrated-option:last-child { border-bottom: 0; }
.illustrated-option:hover, .illustrated-option:focus-visible, .illustrated-option[aria-selected="true"] { background: var(--vermilion-soft); }
.illustrated-option[aria-selected="true"] { color: var(--vermilion-dark); }
.illustrated-option > span { min-width: 0; }
.illustrated-option strong, .illustrated-option small { display: block; }
.illustrated-option strong { font-size: .9rem; }
.illustrated-option small { margin-top: .18rem; color: var(--muted); font-size: .7rem; line-height: 1.35; }
.illustrated-option .select-art { width: 28px; height: 28px; }
.field-help { max-width: 72ch; margin: .45rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.trade-status.planned { color: var(--warning); }
.planned-callout { padding: .9rem; border: 1px solid #b98b32; border-radius: 3px; color: #65430d; background: #f7e9bd; font-size: .8rem; line-height: 1.5; }
.planned-callout strong { display: block; margin-bottom: .25rem; }
.product-section { grid-column: 1 / -1; margin-top: .6rem; padding-top: 1.8rem; border-top: 1px solid var(--vermilion); }
.product-section[data-material="carpet"] { grid-column: 2; grid-row: 2; margin: 0; padding: 0; border-top: 0; }
.product-section[data-material="carpet"] > .subsection-heading,
.product-section[data-material="carpet"] > .field-help { display: none; }
.product-section[data-material="carpet"] .field-grid { grid-template-columns: 1fr; margin-top: 0; }
.zones-section { margin-top: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--vermilion); }
.subsection-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.subsection-heading h3 { font-family: var(--display-font); font-size: 1.55rem; letter-spacing: -.02em; }
.conditional-tag { padding: .35rem .5rem; border: 1px solid var(--rule); border-radius: 3px; color: var(--vermilion-dark); background: var(--vermilion-soft); font-family: var(--label-font); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.field-grid label { font-size: .76rem; }
.field-grid input { min-height: 54px; }
.room-create-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start; margin-top: 1.2rem; }
.room-create-form label { font-size: .76rem; }
.room-create-form input { min-height: 58px; }
.add-zone-button { display: inline-flex; align-items: center; gap: .65rem; flex: 0 0 auto; margin-top: 1.55rem; }
.add-zone-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.zones { margin-top: 1.2rem; }
.rooms-empty, .parts-empty { margin: 0; padding: 1rem 0; color: var(--muted); font-size: .86rem; }
.area-tabs { display: flex; gap: .35rem; overflow-x: auto; border-bottom: 1px solid var(--vermilion); scrollbar-width: thin; }
.area-tab { position: relative; min-width: 170px; min-height: 62px; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: .55rem; padding: .65rem .8rem .75rem; border: 0; color: var(--muted); background: transparent; text-align: left; }
.area-tab::after { content: ""; position: absolute; left: .55rem; right: .55rem; bottom: 0; height: 3px; background: transparent; }
.area-tab:hover { color: var(--ink); background: rgba(207, 55, 47, .05); }
.area-tab[aria-selected="true"] { color: var(--ink); background: var(--paper); }
.area-tab[aria-selected="true"]::after { background: var(--gold); }
.area-tab.is-saved .area-tab-number { color: #fff; border-color: #246d32; background: #246d32; }
.area-tab.needs-save:not(.has-errors) .area-tab-number { border-style: dashed; }
.area-tab.has-errors .area-tab-number { color: #fff; background: var(--warning); }
.area-tab-number { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid currentColor; color: var(--vermilion-dark); font-family: var(--label-font); font-weight: 700; }
.area-tab-label { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.area-tab small { font-family: var(--label-font); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.area-panel { padding-top: 1.15rem; }
.area-name-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule); }
.area-name-row label { font-size: .76rem; }
.area-name-row input { min-height: 58px; }
.remove-area { min-height: 58px; padding: .65rem .85rem; border: 1px solid #c9837a; border-radius: 3px; color: var(--vermilion-dark); background: #fff7f4; font-family: var(--label-font); font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.parts-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0 .75rem; }
.parts-heading h4 { margin: 0; font-family: var(--display-font); font-size: 1.08rem; letter-spacing: -.01em; }
.parts-heading p { margin: .2rem 0 0; color: var(--muted); font-size: .75rem; }
.add-part-button { min-height: 48px; display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.add-part-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.area-parts { display: grid; gap: 1rem; }
.zone-row { display: grid; grid-template-columns: 1.12fr 1fr 1fr auto; gap: 1rem; align-items: end; padding-bottom: .6rem; border-bottom: 1px solid var(--rule); }
.zone-row-depth { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.zone-row-depth > div:first-child { grid-column: 1 / -1; }
.zone-row-depth .remove-zone { grid-column: 3; justify-self: end; }
.zone-row label { margin-bottom: .4rem; font-size: .76rem; }
.zone-row input, .zone-row select { min-height: 58px; }
.zone-surface { grid-column: 1 / -2; }
.remove-zone { min-height: 58px; padding: .65rem .75rem; border: 1px solid #c9837a; border-radius: 3px; color: var(--vermilion-dark); background: #fff7f4; font-family: var(--label-font); font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.area-save-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem 0 .15rem; border-top: 1px solid var(--vermilion); }
.area-save-status { max-width: 55ch; margin: 0; color: var(--vermilion-dark); font-size: .8rem; line-height: 1.45; }
.area-save-status.is-saved { color: #246d32; }
.save-area-button { min-width: 190px; flex: 0 0 auto; }

.secondary-button, .text-button, .primary-button { min-height: 52px; border-radius: 4px; font-weight: 800; }
.secondary-button { padding: .75rem 1rem; border: 1.5px solid var(--vermilion); color: var(--vermilion-dark); background: transparent; }
.secondary-button:hover:not(:disabled) { color: #fff; background: var(--vermilion-dark); }
.secondary-button:disabled { cursor: not-allowed; opacity: .46; }
.form-actions { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(330px, 1.25fr); gap: 1rem 1.4rem; align-items: center; margin-top: .8rem; padding-top: 1rem; border-top: 1px solid var(--vermilion); }
.action-copy > strong { margin-bottom: .45rem; }
.action-copy p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.primary-button { min-height: 76px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: .95rem 1.4rem; border: 0; color: #fff; background: var(--vermilion); box-shadow: 0 10px 22px rgba(151, 35, 38, .2); font-family: var(--label-font); font-size: 1.18rem; letter-spacing: .02em; text-align: left; }
.primary-button svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.calculator-icon { width: 28px; height: 28px; }
.arrow-icon { width: 26px; height: 26px; }
.primary-button:hover:not(:disabled) { background: var(--vermilion-dark); }
.primary-button:active:not(:disabled) { transform: translateY(1px); }
.primary-button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
.secondary-actions { grid-column: 2; display: flex; justify-content: flex-end; gap: .5rem; }
.text-button { padding: .7rem .9rem; border: 1px solid transparent; color: var(--muted); background: transparent; }
.text-button:hover { border-color: var(--rule); color: var(--ink); }
.form-status { min-height: 1.2rem; margin: .8rem 0 0; color: var(--vermilion-dark); font-size: .78rem; line-height: 1.5; }
.field-hint { margin: .35rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.field-error { min-height: 1.05rem; margin: .3rem 0 0; color: var(--warning); font-size: .75rem; font-weight: 650; line-height: 1.4; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--warning); background: #fff4f1; }

.estimate-result { margin-top: 1rem; padding: 1.2rem; border: 1px solid var(--vermilion); border-radius: 4px; background: var(--paper); box-shadow: var(--shadow); }
.result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--rule); }
.result-heading h3 { margin: 0; font-size: 1.15rem; }
.preliminary-badge { flex: 0 0 auto; padding: .42rem .55rem; border-radius: 3px; color: #fff; background: var(--warning); font-family: var(--label-font); font-size: .76rem; font-weight: 700; letter-spacing: .08em; }
.result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.result-grid > div { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.result-label { margin: 0; color: var(--muted); }
.result-grid strong { color: var(--ink); font-size: 1rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.result-grid small { color: var(--muted); font-size: .76rem; line-height: 1.4; }
.result-grid .result-range { grid-column: 1 / -1; padding-bottom: .9rem; border-bottom: 1px solid var(--rule); }
.result-grid .result-range strong { color: var(--vermilion-dark); font-size: 1.3rem; }
.result-subheading { margin: 1rem 0 .3rem; }
.result-copy { max-width: 78ch; margin: .2rem 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }

.footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 2rem; border-top: 1px solid var(--vermilion); color: var(--muted); background: var(--paper); font-size: .72rem; }
.footer strong { color: var(--warning); }
.is-hidden { display: none; }

@media (max-width: 1120px) {
  .workbench { grid-template-columns: minmax(330px, 36vw) minmax(0, 1fr); }
  .workspace { padding-inline: 2rem; }
  h1 { font-size: clamp(3rem, 5.8vw, 4.25rem); }
  .form-actions { grid-template-columns: 1fr; }
  .secondary-actions { grid-column: 1; }
}

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; }
  .brand-cluster { flex-wrap: wrap; }
  .workbench { grid-template-columns: 1fr; }
  .workspace { grid-row: 1; padding: 2rem clamp(1rem, 4vw, 2.5rem) 2.5rem; }
  .plan-panel { position: static; grid-row: 2; min-height: 0; padding: 2rem clamp(1rem, 4vw, 2.5rem); }
  .plan-grid { height: 330px; }
  .footer { flex-direction: column; }
}

@media (max-width: 640px) {
  .topbar { min-height: 64px; }
  .brand-cluster { gap: .35rem .8rem; }
  .section-nav { order: 3; width: 100%; min-height: 34px; }
  .section-nav a { padding-block: .3rem; font-size: .85rem; }
  .offline-pill, .draft-dot { display: none; }
  .draft-badge { padding: 0; font-size: .68rem; }
  .room-allowance { display: none; }
  .account-button { padding-inline: .65rem; }
  .account-button[data-guest-rooms]::after { content: " · " attr(data-guest-rooms); }
  .icon-button { padding-inline: .5rem; }
  .icon-button span { display: none; }
  h1 { font-size: clamp(2.75rem, 13vw, 4rem); }
  .intro { margin-bottom: 1.5rem; }
  .intro-copy { font-size: 1.1rem; }
  .stepper { margin-bottom: 2rem; padding-inline: 0; }
  .step { font-size: .67rem; letter-spacing: .08em; }
  .step span { width: 34px; height: 34px; }
  .step-line { margin-top: 17px; }
  .selector-grid, .field-grid, .result-grid { grid-template-columns: 1fr; }
  .unit-field { grid-column: auto; }
  .product-section[data-material="carpet"] { grid-column: auto; grid-row: auto; }
  .subsection-heading { flex-direction: column; }
  .room-create-form { grid-template-columns: 1fr; gap: 0; }
  .add-zone-button { width: 100%; justify-content: center; margin-top: .3rem; }
  .area-tab { min-width: 150px; }
  .area-name-row { grid-template-columns: 1fr; }
  .remove-area { justify-self: end; }
  .parts-heading { align-items: flex-start; }
  .zone-row { grid-template-columns: 1fr 1fr; }
  .zone-row-depth { grid-template-columns: 1fr 1fr; }
  .zone-row > div:first-child, .zone-surface { grid-column: 1 / -1; }
  .zone-row-depth > div:nth-child(4) { grid-column: 1 / -1; }
  .remove-zone { grid-column: 2; justify-self: end; }
  .zone-row-depth .remove-zone { grid-column: 2; }
  .area-save-row { align-items: stretch; flex-direction: column; }
  .save-area-button { width: 100%; }
  .primary-button { min-height: 68px; font-size: 1.05rem; }
  .secondary-actions { justify-content: stretch; }
  .secondary-actions > * { flex: 1; }
  .plan-grid { height: 285px; }
  .result-grid .result-range { grid-column: 1; }
  .account-dialog { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); }
  .account-frame { display: block; }
  .account-rail { min-height: 210px; padding: 1.25rem; }
  .account-rail h2 { max-width: 13ch; margin: 2rem 0 .6rem; font-size: 2.6rem; }
  .account-rail-status { margin-top: .75rem; }
  .account-rail .account-data-note { display: none; }
  .account-content { max-height: none; padding: 1.25rem; overflow: visible; }
  .account-form, .location-fields { grid-template-columns: 1fr; }
  .location-fields > * { grid-column: 1; }
}

@media (max-width: 410px) {
  .brand strong { font-size: 1.45rem; }
  .draft-badge { display: none; }
  .brand-cluster { width: 100%; justify-content: space-between; }
  .section-nav { order: 0; width: auto; gap: .7rem; }
  .topbar-actions { width: 100%; justify-content: flex-end; }
  .step strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .parts-heading { flex-direction: column; }
  .add-part-button { width: 100%; justify-content: center; }
  .zone-row { grid-template-columns: 1fr; }
  .zone-row > *, .remove-zone { grid-column: 1; }
  .zone-row-depth > div:nth-child(4), .zone-row-depth .remove-zone { grid-column: 1; }
  .secondary-actions { flex-direction: column; }
  .plan-grid { height: 235px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}