/* CoatCraft prototype styles. Mobile first; wider screens get a centred column. */
:root {
  /* colour */
  --ink: #1C211F;
  --ink-soft: #57605B;
  --ink-faint: #8A918C;
  --paper: #F5F3EE;
  --card: #FFFFFF;
  --line: #E2DED5;
  --line-soft: #EFECE5;
  --brand: #1F2A26;
  --accent: #2C5E4F;
  --accent-soft: #E3EEE9;
  --accent-ink: #FFFFFF;
  --focus: #C8873A;
  --error: #A3322B;
  --error-soft: #FBECEA;
  --warn-bg: #FFF4DA;
  --warn-line: #E2BE6A;
  /* spacing scale (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  /* shape */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(28, 33, 31, 0.06), 0 4px 14px rgba(28, 33, 31, 0.05);
  --shadow-lift: 0 2px 4px rgba(28, 33, 31, 0.08), 0 8px 24px rgba(28, 33, 31, 0.08);
  --tap: 52px;
  --tabbar-h: 64px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }
/* Keep scrolled-to content clear of the sticky header (top) and sticky action bar / tab bar (bottom). */
html { scroll-padding-top: 80px; scroll-padding-bottom: 104px; }
/* Screens with the tab bar can also have a sticky Save bar above it: keep content clear of both. */
html:has(body.has-tabbar) { scroll-padding-bottom: calc(var(--tabbar-h) + 104px + env(safe-area-inset-bottom)); }
body { margin: 0; min-height: 100dvh; line-height: 1.5; font-size: 16px; }
img { max-width: 100%; display: block; }
p { margin: 0; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + var(--s3)) var(--s5) var(--s3);
  background: var(--brand); color: #fff;
}
.brand { display: inline-flex; align-items: center; gap: var(--s2); color: #fff; text-decoration: none; font-weight: 750; font-size: 1.12rem; letter-spacing: -0.01em; }
.brand img { border-radius: 7px; }
.badge { font-size: 0.72rem; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,0.13); letter-spacing: 0.02em; }

/* ---------- Screen ---------- */
.screen { max-width: 560px; margin: 0 auto; padding: var(--s4) var(--s5) calc(env(safe-area-inset-bottom) + var(--s7)); outline: none; display: flex; flex-direction: column; gap: var(--s4); }
.has-tabbar .screen { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s7)); }
h1 { font-size: 1.65rem; line-height: 1.15; letter-spacing: -0.02em; margin: var(--s2) 0 0; outline: none; }
h2 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 var(--s3); letter-spacing: -0.005em; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.lead { color: var(--ink-soft); font-size: 1.02rem; margin-top: calc(var(--s3) * -1); }
.note { color: var(--ink-soft); font-size: 0.9rem; }
.hint { color: var(--ink-soft); font-size: 0.86rem; }
.error { color: var(--error); font-weight: 600; font-size: 0.9rem; margin-top: var(--s1); }
.error:empty { display: none; }
.fine-print { color: var(--ink-faint); font-size: 0.82rem; text-align: center; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.section-head h1, .section-head h2 { margin: 0; }

/* ---------- Icons ---------- */
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 18px; height: 18px; }
.icon-xs { width: 14px; height: 14px; stroke-width: 2.6; }

/* ---------- Cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow); }
.form-card { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5) var(--s4); }
.form-card > h2 { margin-bottom: 0; }
.card-title { font-weight: 700; }
.card-text { color: var(--ink-soft); font-size: 0.88rem; }
.card-actions { display: flex; gap: var(--s2); justify-content: flex-end; margin-top: var(--s3); flex-wrap: wrap; }
.pill { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); letter-spacing: 0.01em; }

/* ---------- Home ---------- */
.hero { background: linear-gradient(160deg, #24342E 0%, #2C5E4F 100%); color: #fff; border-radius: 20px; box-shadow: var(--shadow-lift); display: flex; flex-direction: column; margin-top: var(--s2); overflow: hidden; }
.hero-body { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5) var(--s5) var(--s6); }
.hero h1 { margin: 0; color: #fff; font-size: 1.5rem; }
.hero-kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #CFE0D9; }
.hero-text { color: #DCE9E3; font-size: 0.95rem; }
.hero .btn-hero { background: #fff; color: var(--brand); min-height: 56px; font-size: 1.05rem; margin-top: var(--s2); }
/* Decorative hero picture: the same house, old paint on the left, fresh on the right, joined by a brush-edged seam. */
.hero-art { position: relative; aspect-ratio: 360 / 220; background: #A9D0E6; overflow: hidden; }
.hero-art-before, .hero-art-after { position: absolute; inset: 0; }
.hero-art img { width: 100%; height: 100%; }
.hero-art-after { clip-path: polygon(51% 0, 49.2% 14%, 51.4% 30%, 49% 47%, 51.2% 63%, 49.4% 80%, 50.8% 100%, 100% 100%, 100% 0); }
.hero-roller { position: absolute; left: 50%; top: 40%; width: 18%; transform: translateX(-27%); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); }
.hero-tag { position: absolute; top: var(--s3); padding: 3px 10px; border-radius: 999px; background: rgba(28,33,31,0.72); color: #fff; font-size: 0.76rem; font-weight: 700; }
.hero-tag-before { left: var(--s3); }
.hero-tag-after { right: var(--s3); }
/* A gentle roll up and down the seam, twice (3.6 s in all), then still. Off with reduced motion. */
.hero-roller { animation: roller-roll 1.8s ease-in-out 0.4s 2; }
@keyframes roller-roll { 0%, 100% { transform: translateX(-27%) translateY(0); } 50% { transform: translateX(-27%) translateY(-22%); } }

/* ---------- Opening splash (decorative, never blocks: taps pass straight through) ---------- */
.splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s6); background: linear-gradient(160deg, #24342E 0%, #2C5E4F 100%); color: #fff; pointer-events: none; animation: splash-out 0.35s ease-in 1.55s forwards; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; }
.splash-icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); animation: splash-pop 0.4s ease-out both; }
.splash-name { font-size: 1.7rem; font-weight: 780; letter-spacing: -0.02em; }
.splash-tagline { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #CFE0D9; }
.splash-art { position: relative; width: min(280px, 72vw); aspect-ratio: 240 / 150; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); margin: var(--s2) 0; }
.splash-before, .splash-after { position: absolute; inset: 0; }
.splash-art img { width: 100%; height: 100%; }
.splash-after { clip-path: inset(0 100% 0 0); animation: splash-reveal 1s ease-in-out 0.3s forwards; }
.splash-roller { position: absolute; top: 6%; left: 0; height: 78%; aspect-ratio: 70 / 120; transform: translateX(-27%); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3)); animation: splash-roll 1s ease-in-out 0.3s forwards; }
@keyframes splash-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes splash-reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes splash-roll { to { left: 100%; } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }
.hero .btn-hero:hover { filter: brightness(0.97); }
.callout-card { display: flex; gap: var(--s3); align-items: flex-start; border-color: var(--warn-line); background: var(--warn-bg); }
.callout-card .card-text { margin: 2px 0 var(--s2); }
.callout-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: #8A6516; flex: none; }

/* ---------- Lists ---------- */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.list-item {
  width: 100%; display: flex; align-items: center; gap: var(--s3); text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s3) var(--s3) var(--s4); box-shadow: var(--shadow);
  min-height: 72px;
}
.list-item:hover { box-shadow: var(--shadow-lift); }
.list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list-title { font-weight: 700; }
.list-sub, .list-meta { color: var(--ink-soft); font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-meta { color: var(--ink-faint); font-size: 0.8rem; }
.customer-card .list-sub { white-space: pre-line; }
.list-amount { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list-chevron { color: var(--ink-faint); }
.list-item .chip-list { width: 36px; height: 36px; aspect-ratio: auto; border-radius: 10px; flex: none; box-shadow: none; }
.chip-empty { background: repeating-linear-gradient(45deg, #EEE 0 6px, #F7F7F7 6px 12px); }
.filter-pill { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); background: var(--accent-soft); border-radius: 999px; padding: var(--s1) var(--s2) var(--s1) var(--s4); font-weight: 600; color: var(--accent); }

/* ---------- Empty states ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); padding: var(--s5) var(--s3); }
.art { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.empty-art { width: 180px; max-width: 70%; margin-bottom: var(--s1); }
.empty-art-wide { width: 260px; max-width: 80%; }
.page-art { margin: var(--s2) auto calc(-1 * var(--s2)); width: 100%; max-width: 340px; }
.quote-art { width: 200px; max-width: 70%; margin: 0 auto var(--s4); border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.22); }
.empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); margin-bottom: var(--s1); }
.empty-icon .icon { width: 28px; height: 28px; }
.empty-title { font-weight: 750; font-size: 1.05rem; }
.empty-text { color: var(--ink-soft); font-size: 0.92rem; max-width: 34ch; }
.empty .btn { margin-top: var(--s3); }

/* ---------- Tab bar ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(255,255,255,0.96); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); backdrop-filter: blur(8px); }
.tabbar[hidden] { display: none; }
.tabbar ul { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 560px; }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: var(--tabbar-h); color: var(--ink-faint); text-decoration: none; font-size: 0.74rem; font-weight: 650; }
.tab.is-active { color: var(--accent); }
.tab.is-active .icon { stroke-width: 2.2; }

/* ---------- Flow header and steps ---------- */
.flow-head { display: flex; flex-direction: column; gap: var(--s2); }
.flow-exit { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 0.9rem; align-self: flex-start; padding: var(--s1) 0; }
.steps { list-style: none; display: flex; gap: 5px; padding: 0; margin: 0; }
.step { flex: 1; }
.step a, .step span {
  display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 8px;
  font-size: 0.8rem; font-weight: 700; text-decoration: none; color: var(--ink-faint); background: #E8E5DE;
}
.step.is-done a, .step.is-done span { background: var(--accent-soft); color: var(--accent); }
.step.is-active span { background: var(--accent); color: var(--accent-ink); }
.step-caption { font-size: 0.8rem; color: var(--ink-soft); }

/* ---------- Fields ---------- */
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field > label, .search-label { font-weight: 650; }
input[type="text"], input[type="search"], textarea, select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: 13px 14px; min-height: var(--tap);
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--card);
  transition: border-color 0.15s;
}
input[type="search"] { -webkit-appearance: none; appearance: none; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
input:hover, textarea:hover, select:hover { border-color: #CFCAC0; }
textarea { resize: vertical; }
.has-error input, .has-error textarea, .has-error select { border-color: var(--error); background: var(--error-soft); }
.input-group { display: flex; align-items: stretch; }
.input-group input { border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 0; }
.input-group .unit { display: flex; align-items: center; padding: 0 12px; border: 1.5px solid var(--line); border-left: 0; border-radius: 0 12px 12px 0; background: #F3F1EC; color: var(--ink-soft); font-size: 0.85rem; white-space: nowrap; }
.input-group input:only-child { border-radius: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

/* toggle switch */
.toggle { display: flex; align-items: center; gap: var(--s3); cursor: pointer; min-height: var(--tap); }
.switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { width: 50px; height: 30px; border-radius: 999px; background: #CBC7BE; position: relative; flex: none; transition: background 0.15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.15s; }
.switch-input:checked + .switch { background: var(--accent); }
.switch-input:checked + .switch::after { transform: translateX(20px); }
.switch-input:focus-visible + .switch { outline: 3px solid var(--focus); outline-offset: 2px; }
.toggle-text { display: flex; flex-direction: column; }
.toggle-label { font-weight: 650; }

/* segmented control */
.segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #ECE9E2; border-radius: 12px; padding: 3px; gap: 3px; }
.segmented label { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 var(--s4); border-radius: 9px; font-weight: 650; font-size: 0.9rem; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.segmented input:checked + label { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.segmented input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 1px; }
.segmented-field { display: flex; flex-direction: column; gap: var(--s2); }
.segmented-field legend { font-weight: 650; margin-bottom: var(--s2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 var(--s5); border-radius: 12px; border: 1.5px solid transparent;
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none; transition: filter 0.15s, box-shadow 0.15s;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: #CFCAC0; }
.btn-danger-ghost { background: transparent; color: var(--error); border-color: #E7C3BF; }
.btn-danger-ghost.is-confirming { background: var(--error); color: #fff; border-color: var(--error); }
.btn:disabled { background: #D3D7D3; color: #616863; cursor: not-allowed; filter: none; box-shadow: none; border-color: transparent; }
.btn-block { width: 100%; }
.btn-small { min-height: 40px; padding: 0 var(--s3); font-size: 0.9rem; border-radius: 10px; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; flex: none; }
.icon-btn:hover { background: #F0EDE7; color: var(--error); }
.link { background: none; border: 0; padding: var(--s1); font: inherit; color: var(--accent); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Headings get focus after each screen change (for screen readers); no ring needed there. */
h1[tabindex="-1"]:focus { outline: none; }

.actions {
  display: flex; gap: var(--s3); justify-content: space-between; margin-top: var(--s2);
  position: sticky; bottom: 0; z-index: 5; padding: var(--s3) 0 calc(env(safe-area-inset-bottom) + var(--s2));
  background: linear-gradient(to top, var(--paper) 78%, rgba(245,243,238,0));
}
.has-tabbar .actions { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: var(--s3); }
.actions .btn-primary { flex: 1; }
.actions:not(:has(.btn-ghost)) { justify-content: flex-end; }
/* Summary screen: the bar sits after the content so it can never cover the price list or Send. */
.actions-static { position: static; background: none; padding-bottom: calc(env(safe-area-inset-bottom) + 6px); }

/* ---------- Callouts and toast ---------- */
.callout { display: flex; gap: var(--s2); align-items: flex-start; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius-sm); padding: var(--s3); font-size: 0.92rem; }
.callout .icon { margin-top: 2px; color: #8A6516; }
.callout-error { background: var(--error-soft); border-color: #E7C3BF; color: var(--error); font-weight: 600; }
.callout-error .icon { color: var(--error); }
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s4)); z-index: 20;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
  background: var(--brand); color: #fff; padding: var(--s3) var(--s4); border-radius: 12px; font-weight: 600; font-size: 0.92rem; box-shadow: var(--shadow-lift); max-width: calc(100vw - 32px);
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Samples and swatches ---------- */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 650; margin: 0 0 var(--s3); padding: 0; }
.samples { display: grid; gap: var(--s3); }
.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.card.sample-card, .card.swatch { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); border-width: 2px; cursor: pointer; min-height: var(--tap); }
.card img { border-radius: 10px; aspect-ratio: 4 / 3; width: 100%; height: auto; }
/* Illustrations keep their own shape (the photo rule above is for house photos). */
.card img.art { aspect-ratio: auto; border-radius: 0; }
.card img.quote-art { border-radius: 14px; }
.card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px #CFE0D9, var(--shadow); }
input:focus-visible + .card { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; border: 1px solid rgba(0,0,0,0.1); font-size: 1.4rem; font-weight: 800;
  box-shadow: inset 0 -12px 18px -12px rgba(0,0,0,0.15);
}
.chip-small { width: 22px; height: 22px; aspect-ratio: auto; border-radius: 6px; flex: none; box-shadow: none; }
.chosen-colour { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* colour search */
.search { display: flex; flex-direction: column; gap: var(--s1); }
.search-status { min-height: 1.3em; margin: var(--s1) 0; }
.search-results-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

/* ---------- Upload ---------- */
.upload { display: flex; flex-direction: column; gap: var(--s2); }
.chosen-photo { margin: 0; }
.chosen-photo img { border-radius: var(--radius); max-height: 320px; width: 100%; object-fit: cover; }
.chosen-photo figcaption { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font-size: 0.9rem; margin-top: var(--s2); overflow-wrap: anywhere; }

/* ---------- Before / after slider ---------- */
.compare { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: #ddd; user-select: none; touch-action: pan-y; box-shadow: var(--shadow-lift); }
.compare-before, .compare-after { position: absolute; inset: 0; }
.compare img { width: 100%; height: 100%; object-fit: cover; }
.compare-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare-divider { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,0.35); pointer-events: none; }
.compare-handle { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.compare-handle::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: var(--brand); }
.compare-tag { position: absolute; top: var(--s3); padding: 3px 10px; border-radius: 999px; background: rgba(28,33,31,0.72); color: #fff; font-size: 0.76rem; font-weight: 700; pointer-events: none; }
.compare-tag-before { left: var(--s3); }
.compare-tag-after { right: var(--s3); }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:has(.compare-range:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.placeholder-after { position: absolute; inset: 0; }
.placeholder-after img { filter: grayscale(1) brightness(0.55); }
.placeholder-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 18px 18px 40%; color: #fff; text-align: center; font-size: 0.9rem; }

/* ---------- Measurements ---------- */
.wall-card { display: flex; flex-direction: column; gap: var(--s3); }
.wall-card.has-error { border-color: #E7C3BF; }
.wall-head { display: flex; align-items: center; gap: var(--s2); }
input.wall-name { font-weight: 700; font-size: 1.05rem; border-color: transparent; background: transparent; padding-left: var(--s1); min-height: 44px; }
input.wall-name:hover, input.wall-name:focus { border-color: var(--line); background: var(--card); }
.openings { display: flex; flex-direction: column; gap: var(--s2); border-top: 1px dashed var(--line); padding-top: var(--s3); }
.openings-title { font-weight: 650; font-size: 0.92rem; }
.opening-row { display: grid; grid-template-columns: 1fr 1fr 0.8fr 44px; gap: var(--s2); align-items: end; }
.opening-row .field > label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.opening-row .input-group .unit { padding: 0 8px; }
.opening-row .icon-btn { margin-bottom: 4px; }
.openings .btn { align-self: flex-start; }
.wall-area { font-size: 0.92rem; color: var(--ink-soft); background: #F6F4EF; border-radius: var(--radius-sm); padding: var(--s2) var(--s3); }
.wall-area.is-ok { color: var(--accent); background: var(--accent-soft); font-weight: 650; }
.wall-area.is-problem { color: var(--error); background: var(--error-soft); font-weight: 600; }
.add-wall { border-style: dashed; }
.total-line { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s3) var(--s4); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
.total-line strong { font-size: 1.15rem; }

/* ---------- Quote ---------- */
.price-card { background: linear-gradient(160deg, #24342E 0%, #2C5E4F 100%); color: #fff; border: 0; text-align: center; padding: var(--s6) var(--s4); box-shadow: var(--shadow-lift); }
.price-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #CFE0D9; }
.price-big { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: var(--s1) 0; }
.price-sub { color: #E3EEE9; font-variant-numeric: tabular-nums; }
.price-meta { color: #B9D0C7; font-size: 0.86rem; margin-top: var(--s3); }
.details { margin: 0; }
.details .row { display: grid; grid-template-columns: 110px 1fr; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line-soft); }
.details .row:first-child { border-top: 0; padding-top: 0; }
.details dt { color: var(--ink-soft); }
.details dd { margin: 0; display: flex; align-items: center; gap: var(--s2); overflow-wrap: anywhere; white-space: pre-line; }
.money { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: var(--s3); }
.money th { text-align: left; font-weight: 500; padding: var(--s2) var(--s2) var(--s2) 0; vertical-align: top; }
.money td { text-align: right; padding: var(--s2) 0; vertical-align: top; white-space: nowrap; }
.money .sub { display: block; color: var(--ink-soft); font-size: 0.8rem; font-weight: 400; }
.money .subtotal th, .money .subtotal td { border-top: 1px solid var(--line); }
.money .total th, .money .total td { border-top: 2px solid var(--ink); font-weight: 800; font-size: 1.1rem; padding-top: var(--s3); }
.send { display: flex; flex-direction: column; gap: var(--s2); }
.send .hint { text-align: center; }

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

@media (min-width: 640px) {
  .samples { grid-template-columns: repeat(3, 1fr); }
  .swatches, .search-results-list { grid-template-columns: repeat(4, 1fr); }
  h1 { font-size: 1.9rem; }
  .screen { padding-top: var(--s6); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }