/* Wild Fox Estimates — "Wild Fox Estimator" cream/clay design system (from the handoff). */
:root{
  --page:#f3efe8; --card:#fffdf9; --card2:#fcf9f4; --line:#ece5da; --line2:#e6ded2;
  --ink:#26211c; --muted:#9a9082; --muted2:#6f675d; --muted3:#8a8175;
  --clay:#c2402f; --clay-d:#a83526; --clay-soft:#fbeae6;
  --chrome:#221f1c; --chrome2:#2b2722; --fill:#f4efe7;
  --warn-bg:#fbeecf; --warn:#9a6a25; --good:#3f7d52;
  --r-card:16px; --r-ctrl:12px; --r-pill:7px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--page); color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3,.sg{ font-family:'Space Grotesk',sans-serif; letter-spacing:-0.01em; }
a{ color:inherit; text-decoration:none; }
.num{ font-family:'Space Grotesk',sans-serif; font-weight:600; }
.muted{ color:var(--muted); } .muted2{ color:var(--muted2); }
.small{ font-size:13px; } .tiny{ font-size:11px; }
.eyebrow{ font-size:12px; font-weight:700; color:var(--muted3); text-transform:uppercase; letter-spacing:.06em; }

/* ---- top chrome / nav ---- */
.topbar{ background:var(--chrome); color:#fff; position:sticky; top:0; z-index:40; }
.topbar .inner{ max-width:1180px; margin:0 auto; padding:0 18px; height:60px; display:flex; align-items:center; gap:14px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .mono{ width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,#e8893a,var(--clay)); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff; font-size:19px; }
.brand .t{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; }
.nav{ display:flex; align-items:stretch; gap:22px; margin-left:10px; height:60px; }
.nav a{ display:flex; align-items:center; color:#cdc6bd; font-size:15px; font-weight:600; border-bottom:2px solid transparent; }
.nav a.on{ color:#fff; border-bottom-color:var(--clay); }
.spacer{ flex:1; }
.viewtoggle{ display:flex; gap:3px; background:var(--chrome2); padding:4px; border-radius:11px; }
.viewtoggle button{ background:transparent; border:none; color:#bdb3a6; font-size:13px; font-weight:700; padding:7px 13px; border-radius:8px; cursor:pointer; }
.viewtoggle button.on{ background:var(--clay); color:#fff; }
.gear{ width:38px; height:38px; border-radius:10px; background:var(--chrome2); border:none; color:#cdc6bd; font-size:17px; cursor:pointer; }

/* ---- layout ---- */
.wrap{ max-width:880px; margin:0 auto; padding:26px 18px 130px; }
.wrap.narrow{ max-width:680px; } .wrap.wide{ max-width:1180px; }
.pagehead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
h1{ font-size:30px; font-weight:600; margin:0; } h2{ font-size:22px; font-weight:600; margin:0; }
.subtitle{ font-size:14px; color:var(--muted); margin-top:6px; line-height:1.5; }
.back{ background:transparent; border:none; color:var(--muted); font-size:14px; font-weight:600; cursor:pointer; padding:0; margin-bottom:14px; display:inline-block; }

/* ---- cards / buttons ---- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:18px; }
.card + .card, .stack > * + *{ margin-top:12px; }
.row{ display:flex; align-items:center; gap:12px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line2); background:var(--card); color:var(--ink); border-radius:var(--r-ctrl); padding:12px 18px; font-size:15px; font-weight:700; cursor:pointer; font-family:'Hanken Grotesk',sans-serif; }
.btn:hover{ border-color:var(--clay); }
.btn-primary{ background:var(--clay); border-color:var(--clay); color:#fff; box-shadow:0 2px 8px rgba(194,64,47,.25); }
.btn-primary:hover{ background:var(--clay-d); border-color:var(--clay-d); }
.btn-dark{ background:var(--chrome); border-color:var(--chrome); color:#fff; }
.btn-ghost{ background:transparent; }
.btn-sm{ padding:9px 13px; font-size:14px; }
.btn-block{ width:100%; }
.btn-danger{ background:transparent; border:none; color:var(--clay); font-weight:600; }
.btn-link{ background:transparent; border:none; color:var(--clay); font-weight:600; cursor:pointer; }
form.inline{ margin:0; display:inline; }

/* ---- list rows ---- */
.listrow{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:15px 16px; cursor:pointer; }
.listrow:hover{ border-color:var(--clay); }
.avatar{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; flex:none; background:var(--clay-soft); color:var(--clay); }
.grow{ flex:1; min-width:0; }
.chev{ color:#c8bfb0; font-size:20px; }
.badge{ font-size:12px; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); background:var(--fill); color:var(--muted2); }
.badge.opt{ background:var(--warn-bg); color:var(--warn); }
.searchbar{ width:100%; padding:14px 16px; border:1px solid #e3dacd; border-radius:14px; background:var(--card); font-size:16px; font-family:inherit; outline:none; color:var(--ink); margin-bottom:18px; }
.empty{ background:var(--card); border:1px dashed #ddd3c4; border-radius:18px; padding:40px 22px; text-align:center; color:var(--muted); }

/* ---- inputs / segmented / tabs / stepper ---- */
.fld{ width:100%; padding:13px 15px; border:1px solid #e3dacd; border-radius:var(--r-ctrl); background:var(--card); font-size:16px; font-family:inherit; color:var(--ink); outline:none; }
label.lbl{ display:block; font-size:12px; font-weight:700; color:var(--muted3); text-transform:uppercase; letter-spacing:.05em; margin:0 0 7px; }
.seg{ display:inline-flex; gap:5px; background:#ece5db; padding:5px; border-radius:13px; flex-wrap:wrap; }
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg label{ padding:9px 16px; border-radius:9px; font-size:14px; font-weight:700; color:var(--muted2); cursor:pointer; }
.seg input:checked + label{ background:var(--clay); color:#fff; }
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.tabs a{ padding:9px 15px; border-radius:11px; font-size:14px; font-weight:700; color:var(--muted2); background:var(--card); border:1px solid var(--line); }
.tabs a.on{ background:var(--clay); color:#fff; border-color:var(--clay); }
/* Fixed width so every builder stepper (hrs / gal / qty) is identical and the −/+ line up
   vertically row-to-row. Buttons are fixed; the value area flexes to fill. */
.stepper{ display:inline-flex; align-items:stretch; width:130px; height:48px; flex:none; background:var(--fill); border:1px solid var(--line2); border-radius:var(--r-ctrl); overflow:hidden; }
.stepper button{ width:40px; flex:none; border:0; background:transparent; font-size:21px; line-height:1; color:#7a7165; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.stepper button:active{ background:rgba(0,0,0,.05); }
/* the number is vertically centered (on the same line as −/+); the unit tucks underneath as a
   small label, absolutely positioned so it never pushes the digit off-center. */
.stepper .val{ position:relative; flex:1; min-width:0; display:flex; align-items:center; justify-content:center; }
.stepper .val .n, .stepper input{ font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:600; line-height:1; color:var(--ink); }
.stepper input{ width:100%; height:auto; padding:0; margin:0; text-align:center; border:0; background:transparent; }
.stepper .u{ position:absolute; left:0; right:0; bottom:4px; text-align:center; font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; line-height:1; pointer-events:none; }
/* our −/+ buttons replace the browser's number spinners */
.stepper input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.stepper input[type=number]::-webkit-outer-spin-button,
.stepper input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
/* small steppers (the Add-rooms sheet) — narrower, standalone, don't need to align with the builder */
.stepper-sm{ width:108px; height:42px; } .stepper-sm button{ width:32px; font-size:18px; } .stepper-sm input{ width:100%; font-size:16px; }
.swatch{ width:20px; height:20px; border-radius:6px; border:1px solid rgba(0,0,0,.12); flex:none; }
.paintbtn{ display:flex; align-items:center; gap:10px; background:#fbf8f3; border:1px solid var(--line2); border-radius:11px; padding:9px 13px; cursor:pointer; text-align:left; }
.paintbtn:hover{ border-color:var(--clay); }

/* ---- tile (template/avatar squares) ---- */
.tile{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:600; color:#fff; background:linear-gradient(135deg,#e8893a,var(--clay)); flex:none; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.tcard{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.tcard .body{ display:flex; flex-direction:column; gap:9px; padding:18px 18px 14px; cursor:pointer; }
.tcard .foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 18px; border-top:1px solid #f0e9df; background:var(--card2); }
.dashcard{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:150px; border:1.5px dashed #d6ccbd; border-radius:16px; background:transparent; color:var(--muted3); font-size:15px; font-weight:700; cursor:pointer; }

/* ---- price banner ---- */
.banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--chrome); color:#fff; border-radius:var(--r-card); padding:18px 22px; }
.banner .big{ font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:600; }
.banner .lbl{ font-size:13px; color:#cfc6ba; } .banner .sub{ font-size:12px; color:#8f867a; margin-top:3px; }

/* ---- builder ---- */
.context-bar{ background:var(--chrome2); color:#fff; }
.context-bar .inner{ max-width:1180px; margin:0 auto; padding:13px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.context-bar .job{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; }
.context-bar .sub{ color:#aeb9c7; font-size:13px; }
.builder{ max-width:1180px; margin:0 auto; padding:18px; display:grid; gap:16px; grid-template-columns:1fr; padding-bottom:130px; }
@media(min-width:900px){ .builder{ grid-template-columns:320px 1fr; align-items:start; } .builder .rail{ position:sticky; top:80px; } }
.rail .railhead{ font-size:12px; font-weight:700; color:var(--muted3); text-transform:uppercase; letter-spacing:.06em; margin:4px 2px 10px; }
.roomcard{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; cursor:pointer; margin-bottom:9px; }
.roomcard.on{ border-color:var(--clay); box-shadow:0 1px 3px rgba(0,0,0,.06); }
.room-hidden{ display:none; }
.editor{ display:flex; flex-direction:column; gap:16px; }
.optadd{ background:var(--card2); border:1px dashed var(--line2); }
.optrow{ display:flex; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line); cursor:pointer; }
.optrow:first-of-type{ border-top:0; }
.optrow input[type=checkbox]{ width:18px; height:18px; accent-color:var(--clay); cursor:pointer; flex:none; }
.optrow:has(.opt-toggle:checked){ color:var(--ink); }
.optrow:has(.opt-toggle:checked) .num{ color:var(--clay); font-weight:700; }
.roomname{ font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; color:var(--ink); background:transparent; border:1px solid transparent; border-radius:8px; padding:2px 8px; margin:-2px -8px; max-width:100%; width:auto; min-width:0; flex:1; }
.roomname:hover{ border-color:var(--line2); }
.roomname:focus{ outline:none; border-color:var(--clay); background:var(--card2); }
/* Compact single-row line item: [✓ name + inline stats] [Remove when off] [stepper] */
.line-row{ display:flex; align-items:center; gap:10px; padding:4px 0; }
.surface-toggle{ flex:1; min-width:0; display:flex; align-items:center; gap:9px; min-height:44px; padding:.35rem .7rem; border:1.5px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; user-select:none; }
.surface-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.surface-toggle .chk{ width:20px; height:20px; border-radius:5px; border:1.5px solid var(--line2); display:flex; align-items:center; justify-content:center; color:transparent; font-size:13px; font-weight:800; flex:none; }
.surface-toggle .lname{ font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
/* selected = red BORDER only (white background, filled check) */
.line-row.on .surface-toggle{ border-color:var(--clay); }
.line-row.on .surface-toggle .chk{ background:var(--clay); border-color:var(--clay); color:#fff; }
.opt{ color:var(--muted); font-weight:700; font-size:10px; margin-left:6px; }
/* stats live inside the toggle, right-aligned; only when the line is included */
.line-stats{ margin-left:auto; display:flex; align-items:center; gap:14px; font-size:12px; color:var(--muted); white-space:nowrap; flex:none; padding-left:14px; }
.line-stats b{ color:var(--muted2); font-weight:700; } .line-stats b.good{ color:var(--good); }
.line-row:not(.on) .line-stats{ display:none; }
/* Remove appears only when the line is de-selected */
.line-remove{ display:none; flex:none; background:transparent; border:none; color:var(--clay); font-weight:600; font-size:13px; cursor:pointer; padding:0 6px; }
.line-row:not(.on) .line-remove{ display:inline-flex; }
.line-row .stepper{ height:44px; }

/* ---- bottom bar ---- */
.bottombar{ position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--chrome); color:#fff; display:flex; align-items:center; gap:14px; padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); box-shadow:0 -6px 18px rgba(0,0,0,.18); }
.bottombar .t{ font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:800; }
.bottombar .m{ font-size:13px; color:#cfc6ba; }
.bottombar .margin.good{ color:#6ee7a0; } .bottombar .margin.warn{ color:#fbbf24; }
.bottombar .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }

/* ---- sheet / modal ---- */
.scrim{ position:fixed; inset:0; background:rgba(38,33,28,.45); z-index:50; display:none; }
.scrim.open{ display:block; }
.sheet{ position:fixed; left:0; right:0; bottom:0; z-index:51; background:var(--page); border-radius:18px 18px 0 0; max-height:80vh; overflow:auto; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); display:none; }
.sheet.open{ display:block; animation:up .2s ease; }
@keyframes up{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
@media(min-width:680px){ .sheet{ left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-50%); width:560px; border-radius:18px; } .sheet.open{ animation:none; } }

/* ---- flash / misc ---- */
.flash{ max-width:880px; margin:12px auto; padding:12px 16px; border-radius:12px; font-weight:600; }
.flash.ok{ background:#e8f3ec; color:var(--good); } .flash.err{ background:#fbe7e3; color:var(--clay); }
.pill{ display:inline-block; padding:3px 9px; border-radius:var(--r-pill); font-size:11px; font-weight:700; }
.pill.upgrade{ background:#e9eef3; color:#3a5a78; } .pill.add-on{ background:var(--warn-bg); color:var(--warn); } .pill.warranty{ background:#e8f3ec; color:var(--good); }
.note{ background:var(--warn-bg); color:var(--warn); border-radius:12px; padding:12px 16px; font-size:14px; font-weight:600; }
.d-none{ display:none; }

/* ---------- Responsive: prevent overflow + collapse the nav on mobile/tablet ---------- */
html, body{ overflow-x:hidden; }
.builder, .builder > *, .card{ min-width:0; }
.surface-toggle{ min-width:0; } .surface-toggle .grow{ min-width:0; overflow-wrap:anywhere; }
.roomcard .grow{ min-width:0; } .roomcard .grow > div{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media(max-width:760px){
  /* Topbar: brand + view toggle + gear on row 1; nav links become a scrollable strip on row 2 */
  .topbar .inner{ flex-wrap:wrap; height:auto; min-height:56px; padding:8px 14px; gap:6px 10px; }
  .brand .t{ font-size:16px; }
  .nav{ order:5; width:100%; height:auto; gap:18px; margin-left:0; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .nav a{ height:auto; white-space:nowrap; padding-bottom:3px; border-bottom-width:2px; }
  .viewtoggle button{ padding:6px 10px; font-size:12px; }
  .gear{ width:34px; height:34px; font-size:16px; }

  .context-bar .inner{ padding:11px 14px; gap:10px; }
  .builder{ padding:14px; gap:14px; }
  .wrap{ padding:20px 14px 130px; }

  /* Bottom action bar stays on one row */
  .bottombar{ padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); gap:10px; }
  .bottombar .t{ font-size:20px; } .bottombar .m{ font-size:12px; }
  .bottombar .btn{ padding:10px 13px; font-size:14px; }

  /* Tighter controls so rows never overflow a phone */
  .seg label{ padding:8px 13px; font-size:13px; }
  /* On a phone the inline stats wrap to a 2nd line inside the toggle (tight gap to the title) */
  .surface-toggle{ flex-wrap:wrap; gap:3px 9px; }
  .line-stats{ width:100%; margin-left:29px; padding-left:0; gap:4px 12px; flex-wrap:wrap; }
  .stepper{ width:112px; } .stepper button{ width:34px; }
  .stepper-sm{ width:100px; }
}

/* ---------- Customer proposal (Review, customer view) ---------- */
.proposal-intro{ font-size:15px; color:var(--muted2); line-height:1.65; background:var(--card2); border:1px solid var(--line); border-radius:var(--r-card); padding:16px 18px; }
.roomcard-cust{ box-shadow:0 1px 2px rgba(0,0,0,.03); }
.svc-list{ margin-top:12px; display:grid; gap:9px; }
.svc{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--muted2); }
.svc .tick{ width:20px; height:20px; flex:none; border-radius:50%; background:var(--clay-soft); color:var(--clay); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }