html, body { background:#ECEAE3; font-family:Inter, system-ui, sans-serif; color:#0F0F10; }

/* Mobile-mockup convention: scroll still works, just no visible scrollbar.
   Applies to the document itself and to .screen (where actual scrolling lives). */
html, body, .screen { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.screen::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Phone frame */
.phone {
  width:390px; height:844px;
  background:#fff; border-radius:48px;
  box-shadow:0 30px 80px rgba(0,0,0,.30), 0 0 0 12px #1a1a1a, 0 0 0 14px #2a2a2a;
  overflow:hidden; position:relative; flex:none;
}
.notch {
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:110px; height:28px; background:#1a1a1a; border-radius:0 0 16px 16px; z-index:80;
}
.status-bar {
  position:relative; z-index:70;
  height:44px; padding:14px 28px 6px;
  display:flex; justify-content:space-between; align-items:flex-end;
  font-size:13px; font-weight:600;
}
.status-bar .right { display:flex; gap:6px; align-items:center; }

.screen-host { position:absolute; inset:44px 0 0 0; overflow:hidden; }
.screen { position:absolute; inset:0; overflow-y:auto; display:none; padding-bottom:96px; background:#fff; }
.screen.active { display:block; }
.screen.tabbed { padding-bottom:96px; }
.screen.notabbar { padding-bottom:24px; }
.anim-in { animation:fadein .25s ease-out; }
@keyframes fadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* Top bars
   Grid with three equal-weight columns so the title sits dead-center regardless
   of whether a back button is present on the left (or an action on the right). */
.topbar {
  padding:10px 16px 12px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;
  background:#fff; border-bottom:1px solid #F3F2EC; position:sticky; top:0; z-index:30;
}
.topbar .backbtn { justify-self:start; grid-column:1; }
.topbar .title { grid-column:2; font-weight:700; font-size:16px; text-align:center; }
.iconbtn { width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#0F0F10; }
.iconbtn:hover { background:#F6F4ED; }
/* Labeled back button — keeps "Back" affordance visible instead of a bare chevron. */
.backbtn {
  display:flex; align-items:center; gap:2px;
  padding:6px 10px 6px 4px; border-radius:10px;
  font-size:14px; font-weight:600; color:#0F0F10;
  background:transparent; border:0; cursor:pointer;
}
.backbtn:hover { background:#F6F4ED; }
.backbtn svg { flex:none; }

/* Tab bar */
.tabbar {
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  border-top:1px solid #EFEDE6;
  display:grid; grid-template-columns:repeat(4, 1fr);
  padding:10px 0 22px; z-index:40;
}
.tab { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; color:#9CA0A6; cursor:pointer; user-select:none; }
.tab.active { color:#0E5FA8; }
.tab svg { width:22px; height:22px; }

/* Cards & buttons */
.card { background:#fff; border:1px solid #F3F2EC; border-radius:16px; padding:16px; }
.surface { background:#FAFAF7; border-radius:16px; padding:16px; }
.btn-primary {
  background:#0E5FA8; color:#fff; padding:14px 18px; border-radius:14px;
  font-weight:600; width:100%; text-align:center; cursor:pointer; font-size:15px;
  transition:transform .05s; user-select:none;
}
.btn-primary:active { transform:scale(.98); }
.btn-primary:disabled, .btn-primary[disabled] { background:#C9C5BA; cursor:not-allowed; }
.btn-secondary {
  background:#fff; color:#0E5FA8; border:1.5px solid #0E5FA8; padding:13px 18px;
  border-radius:14px; font-weight:600; width:100%; text-align:center; cursor:pointer; font-size:15px;
}
.btn-ghost { color:#374151; padding:12px; cursor:pointer; font-weight:500; font-size:14px; }
.btn-danger { color:#DC2626; padding:14px 18px; font-weight:600; cursor:pointer; }

/* Chips & badges */
.chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; }
.chip-success { background:#D1FAE5; color:#065F46; }
.chip-warn    { background:#FEF3C7; color:#92400E; }
.chip-info    { background:#DBEAFE; color:#1E40AF; }
.chip-brand   { background:#DCEBF8; color:#0E5FA8; }
.chip-gold    { background:#FFF6DA; color:#7A5A0E; }
.chip-muted   { background:#F3F2EC; color:#6B7280; }

/* Input */
.input { width:100%; border:1.5px solid #E5E2D8; border-radius:12px; padding:14px; font-size:15px; background:#fff; }
.input:focus { border-color:#0E5FA8; outline:none; box-shadow:0 0 0 4px rgba(14,95,168,.08); }
.label { font-size:13px; font-weight:600; color:#374151; margin-bottom:6px; display:block; }
.help { font-size:12px; color:#6B7280; margin-top:6px; }
.err  { font-size:12px; color:#DC2626; margin-top:6px; }

/* Stepper */
.stepper { display:flex; gap:6px; padding:12px 16px 0; align-items:center; }
.stepper > div { flex:1; height:5px; background:#E9E6DB; border-radius:3px; }
.stepper > div.done   { background:#0E5FA8; }
.stepper > div.active { background:#0E5FA8; opacity:.55; }
.step-meta { padding:4px 16px 8px; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#6B7280; }

/* Pill radio */
.pill { border:1.5px solid #E5E2D8; border-radius:14px; padding:14px; cursor:pointer; background:#fff; transition:all .12s; }
.pill.selected { border-color:#0E5FA8; background:#EFF6FC; box-shadow:0 0 0 4px rgba(14,95,168,.06); }
.pill .dot { width:18px; height:18px; border-radius:999px; border:2px solid #C9C5BA; }
.pill.selected .dot { border-color:#0E5FA8; background:radial-gradient(circle, #0E5FA8 50%, #fff 52%); }

/* Toggle */
.toggle { width:44px; height:26px; background:#D6D2C5; border-radius:999px; position:relative; cursor:pointer; transition:background .15s; }
.toggle::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; background:white; border-radius:999px; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.toggle.on { background:#0E5FA8; }
.toggle.on::after { transform:translateX(18px); }

/* Sheet */
.sheet-bg { position:absolute; inset:0; background:rgba(15,15,16,.4); z-index:50; opacity:0; pointer-events:none; transition:opacity .2s; }
.sheet-bg.show { opacity:1; pointer-events:auto; }
.sheet {
  position:absolute; left:0; right:0; bottom:0; background:#fff;
  border-radius:24px 24px 0 0; padding:12px 16px 28px; max-height:85%;
  transform:translateY(100%); transition:transform .25s ease-out; z-index:55;
  overflow-y:auto;
}
.sheet.show { transform:translateY(0); }
.sheet-handle { width:40px; height:4px; background:#D6D2C5; border-radius:2px; margin:4px auto 16px; }
.sheet-row { padding:14px 8px; border-bottom:1px solid #F3F2EC; display:flex; align-items:center; gap:12px; cursor:pointer; }
.sheet-row:hover { background:#FAFAF7; }

/* Misc */
.divider { height:1px; background:#F3F2EC; margin:16px 0; }
.skeleton { background:linear-gradient(90deg, #f3f2ec 25%, #fafaf7 50%, #f3f2ec 75%); background-size:200% 100%; animation:sk 1.4s infinite; border-radius:8px; }
@keyframes sk { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* Coverage row */
.cov-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed #F3F2EC; }
.cov-row:last-child { border-bottom:none; }
.cov-row .ico { width:32px; height:32px; border-radius:8px; background:#EFF6FC; color:#0E5FA8; display:flex; align-items:center; justify-content:center; flex:none; }

/* Doc tile */
.doctile { border:1.5px dashed #D6D2C5; border-radius:14px; padding:14px; display:flex; gap:12px; align-items:center; cursor:pointer; background:#FAFAF7; }
.doctile.done { border-style:solid; border-color:#10B981; background:#ECFDF5; }
.doctile .thumb { width:48px; height:48px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; color:#0E5FA8; flex:none; border:1px solid #F3F2EC; }

/* Sticky bottom CTA */
.sticky-cta { position:sticky; bottom:0; left:0; right:0; background:linear-gradient(to top, #fff 70%, transparent); padding:12px 16px 20px; z-index:20; }

/* Disclosure */
.disclose { background:#fff; border:1px solid #F3F2EC; border-radius:14px; overflow:hidden; }
.disclose + .disclose { margin-top:10px; }
.disclose > summary { list-style:none; cursor:pointer; padding:14px 16px; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; }
.disclose > summary::-webkit-details-marker { display:none; }
.disclose > summary .chev { margin-left:auto; transition:transform .2s; color:#9CA0A6; }
.disclose[open] > summary .chev { transform:rotate(180deg); }
.disclose[open] > summary { border-bottom:1px solid #F3F2EC; }
.disclose .body { padding:14px 16px; }
.disclose .badge-mini { font-size:11px; color:#6B7280; font-weight:500; }
.disclose.complete > summary .status { color:#059669; font-size:12px; font-weight:600; }
.disclose.todo > summary .status { color:#0E5FA8; font-size:12px; font-weight:600; }

/* Wizard step indicator — icon dots connected by lines, like a progress tracker.
   Lines fill from left to right as the user progresses (a segmented progress bar). */
.wiz-crumbs {
  display:flex; align-items:center;
  padding:12px 16px; background:#fff; border-bottom:1px solid #F3F2EC;
  position:sticky; top:53px; z-index:25; /* sits just under .topbar */
  /* Allow horizontal scroll so post-quote steps (Documents/Inspection/Payment)
     can be panned into view via centerCurrentCrumb. Scrollbar hidden so the
     stepper looks like a clean tracker rather than a scrollable list. */
  overflow-x:auto; scrollbar-width:none;
}
.wiz-crumbs::-webkit-scrollbar { display:none; }
.wiz-crumbs .crumb-dot {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex:none;
  border:2px solid #E5E0D5; background:#fff; color:#C7C2B5; padding:0;
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.wiz-crumbs .crumb-dot svg { width:14px; height:14px; }
.wiz-crumbs .crumb-dot.done {
  background:#0E5FA8; border-color:#0E5FA8; color:#fff; cursor:pointer;
}
.wiz-crumbs .crumb-dot.done:hover { background:#0A4D8A; border-color:#0A4D8A; }
.wiz-crumbs .crumb-dot.current {
  background:#fff; border-color:#0E5FA8; color:#0E5FA8;
  box-shadow:0 0 0 4px #DCEBF8;
}
.wiz-crumbs .crumb-line {
  flex:1; height:2px; background:#E5E0D5; min-width:8px;
  transition:background .15s;
}
.wiz-crumbs .crumb-line.filled { background:#0E5FA8; }

/* Quote progress bar (under topbar) */
.qprogress { height:3px; background:#F3F2EC; position:relative; overflow:hidden; }
.qprogress-bar { height:100%; background:#0E5FA8; transition:width .3s ease; }
.qprogress-meta { display:flex; justify-content:space-between; font-size:10px; color:#6B7280; padding-top:6px; padding-bottom:2px; font-weight:500; }
.qprogress-meta span:last-child { color:#0E5FA8; font-weight:700; }

/* Quote-row state machine */
.qrow { background:#fff; border:1px solid #F3F2EC; border-radius:14px; overflow:hidden; transition:opacity .2s, border-color .2s; }
.qrow + .qrow { margin-top:8px; }
.qrow > .qrow-summary { display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; user-select:none; }
.qrow > .qrow-summary .qrow-icon { width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:none; }
.qrow > .qrow-summary .qrow-title { font-size:14px; font-weight:600; }
.qrow > .qrow-summary .qrow-summary-text { font-size:11px; color:#6B7280; line-height:1.3; }
.qrow > .qrow-summary .qrow-pill { margin-left:auto; font-size:11px; font-weight:600; padding:4px 8px; border-radius:999px; flex:none; }

/* Compact done rows: single-line, smaller padding, inline summary, hide pill */
.qrow.done + .qrow.done { margin-top:4px; }
.qrow.done > .qrow-summary { padding:8px 14px; gap:8px; }
.qrow.done > .qrow-summary .qrow-icon { width:20px; height:20px; font-size:11px; }
.qrow.done > .qrow-summary .qrow-title { font-size:13px; font-weight:600; }
.qrow.done > .qrow-summary .qrow-summary-text { font-size:11px; color:#6B7280; margin-left:6px; display:inline; }
.qrow.done > .qrow-summary > .flex-1 { display:flex; align-items:baseline; flex-wrap:nowrap; min-width:0; overflow:hidden; }
.qrow.done > .qrow-summary > .flex-1 > .qrow-title { white-space:nowrap; flex:none; }
.qrow.done > .qrow-summary > .flex-1 > .qrow-summary-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qrow.done > .qrow-summary .qrow-pill { display:none; }
.qrow > .qrow-body { padding:0 16px 16px; border-top:1px solid #F3F2EC; padding-top:14px; display:none; }
.qrow.open > .qrow-body { display:block; }

/* Per-state look */
.qrow.locked { display:none; }

.qrow.active { border-color:#0E5FA8; box-shadow:0 0 0 4px rgba(14,95,168,.06); }
.qrow.active .qrow-icon { background:#EFF6FC; color:#0E5FA8; }
.qrow.active .qrow-pill { background:#EFF6FC; color:#0E5FA8; }

.qrow.done .qrow-icon { background:#ECFDF5; color:#059669; }
.qrow.done .qrow-pill { background:#ECFDF5; color:#059669; }

.qrow.edit { border-color:#D97706; box-shadow:0 0 0 4px rgba(217,119,6,.08); }
.qrow.edit .qrow-icon { background:#FEF3C7; color:#92400E; }
.qrow.edit .qrow-pill { background:#FEF3C7; color:#92400E; }

.qrow.error .qrow-icon { background:#FEE2E2; color:#B91C1C; }
.qrow.error .qrow-pill { background:#FEE2E2; color:#B91C1C; }

/* When any row is in edit, freeze all other rows from being clickable */
.qrows.editing .qrow:not(.edit) > .qrow-summary { pointer-events:none; }

/* Sticky CTA inside the quote screen has a price chip on the right */
/* Screens that contain a .qcta become flex columns, so margin-top:auto on
   .qcta pushes the CTA to the bottom even when content is short.
   When content overflows, position:sticky keeps it pinned during scroll. */
.screen.active:has(.qcta) { display:flex; flex-direction:column; }
.qcta { margin-top:auto; position:sticky; bottom:0; background:linear-gradient(to top, #fff 70%, transparent); padding:12px 16px 20px; z-index:20; display:flex; gap:10px; align-items:stretch; }
.qcta .qcta-btn { flex:1; }
/* Stack variant — two CTAs on top of each other (primary + skip).
   Used by wiz-ai-inspect (Start inspection / Skip). */
.qcta.qcta-stack { flex-direction:column; gap:8px; }
.qcta .qcta-price { background:#fff; border:1px solid #F3F2EC; border-radius:12px; padding:6px 10px; display:flex; flex-direction:column; justify-content:center; align-items:flex-end; min-width:84px; }
.qcta .qcta-price .lbl { font-size:9px; color:#6B7280; text-transform:uppercase; letter-spacing:.05em; }
.qcta .qcta-price .val { font-size:13px; font-weight:700; color:#0E5FA8; }

/* Cover card */
.cover-card { border:2px solid #EFEDE6; border-radius:18px; padding:18px; background:#fff; cursor:pointer; transition:all .15s; position:relative; }
.cover-card.selected { border-color:#0E5FA8; box-shadow:0 0 0 6px rgba(14,95,168,.06); }
.cover-card .ribbon { position:absolute; top:-10px; right:14px; padding:3px 10px; border-radius:999px; font-size:10px; font-weight:700; }