/* ============================================================
   DrivewayQuote application styles.
   Every colour, radius and duration comes from assets/brand/tokens.css.
   No raw hex values below this line - that rule is verified in the README.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  background: var(--dq-bg);
  color: var(--dq-text);
  font-family: var(--dq-font-body);
  font-size: var(--dq-text-base);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

[hidden] { display: none !important; }

/* ---------------------------------------------------------- buttons */

.dq-btn {
  font: 600 var(--dq-text-sm)/1 var(--dq-font-body);
  padding: 0.75rem 1.15rem;
  border-radius: var(--dq-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dq-motion-fast), border-color var(--dq-motion-fast), transform var(--dq-motion-fast);
  white-space: nowrap;
}
.dq-btn:active { transform: translateY(1px); }
.dq-btn:disabled { opacity: 0.5; cursor: default; }

.dq-btn-primary {
  background: var(--dq-accent);
  color: var(--dq-on-accent);
  box-shadow: var(--dq-shadow-amber);
}
.dq-btn-primary:hover:not(:disabled) { background: var(--dq-accent-hover); }

.dq-btn-ghost {
  background: transparent;
  border-color: var(--dq-border);
  color: var(--dq-text);
}
.dq-btn-ghost:hover { background: var(--dq-panel-raised); }

.dq-btn-danger-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--dq-danger);
}
.dq-btn-danger-ghost:hover { background: color-mix(in srgb, var(--dq-danger) 12%, transparent); }

.dq-icon-btn {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--dq-radius-md);
  border: 1px solid var(--dq-border);
  background: transparent;
  color: var(--dq-text-muted);
  cursor: pointer;
  transition: color var(--dq-motion-fast), background var(--dq-motion-fast);
}
.dq-icon-btn:hover { color: var(--dq-text-strong); background: var(--dq-panel-raised); }

/* ---------------------------------------------------------- landing */

#landing {
  position: fixed; inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: var(--dq-asphalt);
  overflow-y: auto;
  isolation: isolate;
}

/* The animated survey grid sits behind everything. */
#landing-backdrop {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Keeps the grid from competing with the headline: darkest where the copy is,
   letting the motion read at the edges. Without it the parcels drawing
   themselves fight the type. */
.dq-landing-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Vertical, not radial: the headline band needs protecting, the lower half
     is where the map is meant to be seen. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--dq-asphalt) 40%, transparent) 0%,
      color-mix(in srgb, var(--dq-asphalt) 82%, transparent) 20%,
      color-mix(in srgb, var(--dq-asphalt) 74%, transparent) 40%,
      color-mix(in srgb, var(--dq-asphalt) 28%, transparent) 66%,
      color-mix(in srgb, var(--dq-asphalt) 12%, transparent) 100%),
    radial-gradient(120% 80% at 50% 0%,
      color-mix(in srgb, var(--dq-amber-500) 9%, transparent), transparent 60%);
}

.dq-landing-inner { position: relative; z-index: 2; width: min(680px, 100%); text-align: center; }
.dq-landing-inner h1 {
  font: 700 clamp(2.2rem, 6vw, var(--dq-text-5xl))/1.03 var(--dq-font-display);
  letter-spacing: -0.03em;
  color: var(--dq-text-strong);
  margin: 1.75rem 0 0.85rem;
}
.dq-landing-inner h1 em { font-style: normal; color: var(--dq-accent); }
.dq-landing-lede {
  font-size: var(--dq-text-lg);
  color: var(--dq-text-muted);
  margin: 0 auto 2rem;
  max-width: 46ch;
  line-height: 1.55;
}
/* ---------------------------------------------------------- steps */

.dq-landing-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
  margin: 2.5rem 0 0; padding: 1.75rem 0 0;
  border-top: 1px solid var(--dq-border);
  list-style: none;
}
.dq-step {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 1rem 0.75rem;
  background: color-mix(in srgb, var(--dq-panel) 82%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-lg);
  text-align: center;
  transition: border-color var(--dq-motion-base), transform var(--dq-motion-base);
}
.dq-step:hover { border-color: color-mix(in srgb, var(--dq-accent) 45%, transparent); transform: translateY(-2px); }

/* Icon in an amber-tinted disc, with the step number pinned to its corner so
   the sequence is readable without relying on reading order alone. */
.dq-step-badge {
  position: relative;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dq-accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--dq-accent) 35%, transparent);
  color: var(--dq-accent);
  margin-bottom: 0.35rem;
}
.dq-step-badge em {
  position: absolute; right: -4px; bottom: -4px;
  display: grid; place-items: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--dq-accent);
  color: var(--dq-on-accent);
  font: 700 11px/1 var(--dq-font-body); font-style: normal;
}
.dq-step b {
  color: var(--dq-text-strong); font-weight: 600; font-size: var(--dq-text-sm);
}
.dq-step > span:last-child {
  font-size: var(--dq-text-xs); color: var(--dq-text-muted); line-height: 1.5;
}

@media (max-width: 640px) {
  .dq-landing-steps { grid-template-columns: 1fr; }
  .dq-step { flex-direction: row; text-align: left; align-items: center; gap: 0.85rem; }
  .dq-step-badge { margin-bottom: 0; flex: none; }
  .dq-step > b, .dq-step > span:last-child { flex: 1 1 100%; }
}

/* ---------------------------------------------------------- address search */

.dq-address { position: relative; text-align: left; }
.dq-address-field {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--dq-panel);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-xl);
  padding: 0.55rem 0.55rem 0.55rem 1.1rem;
  color: var(--dq-text-muted);
  transition: border-color var(--dq-motion-fast);
}
.dq-address-field:focus-within { border-color: var(--dq-accent); }
.dq-address-input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--dq-text-strong);
  font: 400 var(--dq-text-lg)/1 var(--dq-font-body);
  padding: 0.7rem 0;
}
.dq-address-input::placeholder { color: var(--dq-text-disabled); }

.dq-suggestions {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 0.5rem);
  margin: 0; padding: 0.35rem; list-style: none;
  background: var(--dq-panel);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-lg);
  box-shadow: var(--dq-shadow-float);
  max-height: 320px; overflow-y: auto;
}
.dq-suggestion {
  padding: 0.7rem 0.85rem; border-radius: var(--dq-radius-sm); cursor: pointer;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.dq-suggestion:hover, .dq-suggestion.active { background: var(--dq-panel-raised); }
.dq-suggestion-main { color: var(--dq-text-strong); font-weight: 500; }
.dq-suggestion-sub { font-size: var(--dq-text-sm); color: var(--dq-text-muted); }

/* ---------------------------------------------------------- workspace */

#workspace { position: fixed; inset: 0; display: flex; flex-direction: column; }

.dq-topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--dq-border);
  background: var(--dq-asphalt);
  z-index: 20;
}
.dq-topbar-address { font-weight: 500; color: var(--dq-text-strong); }
.dq-topbar-spacer { flex: 1; }

.dq-stage { position: relative; flex: 1; min-height: 0; }
#stage-2d, #stage-3d { position: absolute; inset: 0; }
#canvas { width: 100%; height: 100%; display: block; touch-action: none; }

/* Floating panels sit OVER the imagery, never crop it - the map is the hero.
   The rail, toolbar and estimate bar are built in JS and share this treatment;
   listing them here rather than adding .dq-float in three components keeps the
   positioning contract in one place. */
.dq-float,
.dq-rail,
.dq-estimate {
  position: absolute; z-index: 10;
  background: color-mix(in srgb, var(--dq-panel) 92%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-lg);
  box-shadow: var(--dq-shadow-panel);
}

/* ---------------------------------------------------------- rail */

.dq-rail {
  top: 1rem; left: 1rem; width: 288px;
  max-height: calc(100% - 2rem);
  overflow-y: auto;
  padding: 0.85rem;
}
.dq-rail-title {
  font: 600 var(--dq-text-sm)/1 var(--dq-font-body);
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--dq-text-muted);
  margin: 0.2rem 0 0.75rem 0.35rem;
}
.dq-rail-empty { padding: 0.6rem 0.5rem; color: var(--dq-text-muted); font-size: var(--dq-text-sm); }
.dq-rail-empty p:first-child { color: var(--dq-text-strong); font-size: var(--dq-text-lg); margin: 0 0 0.35rem; }
.dq-rail-empty p { margin: 0; line-height: 1.5; }

.dq-surface-row {
  display: flex; align-items: flex-start; gap: 0.65rem;
  padding: 0.65rem; margin-bottom: 0.3rem;
  border-radius: var(--dq-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dq-motion-fast), border-color var(--dq-motion-fast);
}
.dq-surface-row:hover { background: var(--dq-panel-raised); }
.dq-surface-row.selected { border-color: var(--dq-accent); background: var(--dq-panel-raised); }

.dq-swatch {
  width: 15px; height: 15px; flex: none; margin-top: 2px;
  border-radius: 4px;
  background: var(--sw);
  border: 1px solid color-mix(in srgb, var(--dq-white) 22%, transparent);
}
.dq-surface-meta { flex: 1; min-width: 0; }
.dq-surface-name {
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--dq-text-strong); font-weight: 500; font-size: var(--dq-text-sm);
}
.dq-surface-spec { font-size: var(--dq-text-xs); color: var(--dq-text-muted); margin-top: 0.15rem; }
.dq-row-del { width: 30px; height: 30px; border-color: transparent; }
.dq-surface-row:not(:hover) .dq-row-del { opacity: 0; }

.dq-badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.12rem 0.35rem; border-radius: var(--dq-radius-sm);
  background: color-mix(in srgb, var(--dq-accent) 20%, transparent);
  color: var(--dq-amber-200);
}
.dq-warn { color: var(--dq-danger); font-size: var(--dq-text-xs); margin: 0.25rem 0 0; }

/* ---------------------------------------------------------- toolbar */

/* The bottom stack: context bar above, toolbar below, never overlapping.
   Positioning each separately meant guessing the other's height - and the
   toolbar's height changes when labels like "Ribbon drive" wrap to two lines,
   which is exactly how the context bar ended up hidden behind it. */
.dq-bottom-dock {
  position: absolute; z-index: 11;
  left: 50%; transform: translateX(-50%);
  bottom: 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  max-width: calc(100% - 2rem);
  /* The gap between them must not swallow clicks meant for the map. */
  pointer-events: none;
}
.dq-bottom-dock > * { pointer-events: auto; max-width: 100%; }

.dq-toolbar {
  position: relative;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem;
  background: color-mix(in srgb, var(--dq-panel) 92%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-lg);
  box-shadow: var(--dq-shadow-panel);
}
.dq-toolbar-scroll {
  display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: thin;
  padding-right: 0.5rem; border-right: 1px solid var(--dq-border);
}
.dq-tool {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  min-width: 74px; padding: 0.6rem 0.5rem;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--dq-radius-md);
  color: var(--dq-text-muted);
  font: 500 var(--dq-text-xs)/1 var(--dq-font-body);
  cursor: pointer;
  transition: color var(--dq-motion-fast), background var(--dq-motion-fast);
}
.dq-tool:hover { color: var(--dq-text-strong); background: var(--dq-panel-raised); }
.dq-tool.active {
  color: var(--dq-on-accent); background: var(--dq-accent); border-color: var(--dq-accent);
}
.dq-toolbar-actions { display: flex; align-items: center; gap: 0.35rem; }
.dq-3d-toggle { display: flex; align-items: center; gap: 0.45rem; }

/* ---------------------------------------------------------- estimate */

.dq-estimate { top: 1rem; right: 1rem; width: 292px; padding: 1rem; }
.dq-estimate-hint { margin: 0; font-size: var(--dq-text-sm); color: var(--dq-text-muted); line-height: 1.5; }
.dq-total { margin-bottom: 0.6rem; }
.dq-total-num { display: block; font-size: var(--dq-text-3xl); color: var(--dq-amber-200); line-height: 1.05; }
.dq-total-unit { font-size: var(--dq-text-xs); color: var(--dq-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.dq-total-breakdown {
  list-style: none; margin: 0.85rem 0 0; padding: 0.75rem 0 0;
  border-top: 1px solid var(--dq-border);
  font-size: var(--dq-text-sm);
}
.dq-total-breakdown li { display: flex; justify-content: space-between; padding: 0.22rem 0; }
.dq-total-breakdown li span:last-child { color: var(--dq-text-strong); }
.dq-estimate-actions { margin-top: 1rem; }
.dq-fineprint { font-size: var(--dq-text-xs); color: var(--dq-text-muted); line-height: 1.45; margin: 0 0 0.75rem; }
.dq-estimate-buttons { display: flex; gap: 0.5rem; }
.dq-estimate-buttons .dq-btn { flex: 1; }

/* ---------------------------------------------------------- live readouts */

#live-measure {
  left: 50%; transform: translateX(-50%); top: 1rem;
  padding: 0.55rem 1rem; display: flex; align-items: baseline; gap: 0.55rem;
}
#live-measure.invalid { border-color: var(--dq-danger); }
.dq-live-num { font-size: var(--dq-text-xl); color: var(--dq-amber-200); }
.dq-live-sub { font-size: var(--dq-text-xs); color: var(--dq-text-muted); }

/* Inside the dock, above the context bar. Positioning these against a fixed
   offset meant guessing the bar's height, and the bar grew a second row of
   chips - at which point the hint sat behind it. */
#hint, #toast {
  padding: 0.55rem 1rem;
  font-size: var(--dq-text-sm);
  max-width: min(560px, 100%);
  text-align: center;
  background: color-mix(in srgb, var(--dq-panel) 94%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-md);
  box-shadow: var(--dq-shadow-panel);
}
#toast { border-color: var(--dq-danger); color: var(--dq-text-strong); }

#busy {
  inset: 0; position: absolute; z-index: 15;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--dq-asphalt) 76%, transparent);
  backdrop-filter: blur(3px);
}
#busy span { font-size: var(--dq-text-sm); color: var(--dq-text-muted); }

#detect-chip {
  position: absolute; z-index: 10; left: 1rem; bottom: 1rem;
  padding: 0.4rem 0.75rem; border-radius: var(--dq-radius-pill);
  background: color-mix(in srgb, var(--dq-panel) 92%, transparent);
  border: 1px solid var(--dq-border);
  font-size: var(--dq-text-xs); color: var(--dq-text-muted);
}
#detect-chip[data-state="ready"] { color: var(--dq-confirm); border-color: color-mix(in srgb, var(--dq-confirm) 40%, transparent); }
#detect-chip[data-state="unavailable"] { color: var(--dq-text-disabled); }

#attribution {
  position: absolute; z-index: 10; right: 0.6rem; bottom: 0.5rem;
  font-size: 10px; color: var(--dq-text-muted);
  text-shadow: 0 1px 3px var(--dq-asphalt);
  pointer-events: none;
}

#demo-banner {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.75rem; border-radius: var(--dq-radius-pill);
  background: color-mix(in srgb, var(--dq-accent) 16%, transparent);
  color: var(--dq-amber-200); font-size: var(--dq-text-xs);
}

/* ---------------------------------------------------------- modals */

.dq-modal-scrim {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 1.5rem;
  background: color-mix(in srgb, var(--dq-asphalt) 72%, transparent);
  backdrop-filter: blur(6px);
  animation: dq-fade var(--dq-motion-fast) both;
}
@keyframes dq-fade { from { opacity: 0; } }

.dq-modal {
  width: 100%; max-height: 88vh; display: flex; flex-direction: column;
  background: var(--dq-panel);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-xl);
  box-shadow: var(--dq-shadow-float);
  animation: dq-rise var(--dq-motion-base) both;
}
@keyframes dq-rise { from { transform: translateY(12px); opacity: 0; } }
.dq-modal-sm { max-width: 420px; }
.dq-modal-md { max-width: 560px; }
.dq-modal-lg { max-width: 780px; }

.dq-modal-head {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.25rem 0.9rem;
  border-bottom: 1px solid var(--dq-border);
}
.dq-modal-head h2 { margin: 0; font-size: var(--dq-text-2xl); color: var(--dq-text-strong); }
.dq-modal-sub { margin: 0.25rem 0 0; font-size: var(--dq-text-sm); color: var(--dq-text-muted); }
.dq-modal-head > div { flex: 1; }
.dq-modal-body { padding: 1.25rem; overflow-y: auto; }
.dq-modal-foot { padding: 1rem 1.25rem; border-top: 1px solid var(--dq-border); }
.dq-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
.dq-modal-actions .dq-btn-danger-ghost { margin-right: auto; }

/* ---------------------------------------------------------- cost dots */

.dq-cost { display: inline-flex; gap: 3px; align-items: center; }
.dq-cost i { width: 5px; height: 5px; border-radius: 50%; background: var(--dq-slate-600); }
.dq-cost i.on { background: var(--dq-accent); }

/* ---------------------------------------------------------- configure */

.dq-config-measure { text-align: center; padding-bottom: 1rem; border-bottom: 1px solid var(--dq-border); }
.dq-config-num { font-size: var(--dq-text-4xl); color: var(--dq-amber-200); line-height: 1; }
.dq-config-unit { display: block; font-size: var(--dq-text-xs); color: var(--dq-text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 0.3rem; }
.dq-config-measure .dq-fineprint { margin: 0.6rem 0 0; }
.dq-config-detail {
  margin: 1rem 0 0; padding: 0.75rem 0.9rem;
  background: var(--dq-slate-900); border-radius: var(--dq-radius-md);
  font-size: var(--dq-text-sm); color: var(--dq-text-muted); line-height: 1.5;
}
.dq-config-section { margin-top: 1.5rem; }
.dq-config-section h3 {
  margin: 0 0 0.75rem; font: 600 var(--dq-text-base)/1.2 var(--dq-font-body); color: var(--dq-text-strong);
}
.dq-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 0.55rem; }
.dq-choice-grid-tight { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.dq-choice {
  text-align: left; padding: 0.85rem;
  background: var(--dq-slate-900);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-md);
  cursor: pointer; color: inherit; font-family: inherit;
  transition: border-color var(--dq-motion-fast), background var(--dq-motion-fast);
}
.dq-choice:hover { border-color: var(--dq-slate-400); }
.dq-choice.selected { border-color: var(--dq-accent); background: var(--dq-panel-raised); }
.dq-choice-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.dq-choice-title { flex: 1; font-weight: 600; font-size: var(--dq-text-sm); color: var(--dq-text-strong); }
.dq-choice-blurb { margin: 0; font-size: var(--dq-text-xs); color: var(--dq-text-muted); line-height: 1.5; }
.dq-choice-foot { margin: 0.45rem 0 0; font-size: var(--dq-text-xs); color: var(--dq-text-disabled); }

.dq-thickness { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.dq-thick {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 0.85rem 0.4rem;
  background: var(--dq-slate-900);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-md);
  cursor: pointer; color: inherit; font-family: inherit;
  transition: border-color var(--dq-motion-fast), background var(--dq-motion-fast);
}
.dq-thick:hover { border-color: var(--dq-slate-400); }
.dq-thick.selected { border-color: var(--dq-accent); background: var(--dq-panel-raised); }
.dq-thick-num { font-size: var(--dq-text-xl); color: var(--dq-text-strong); }
.dq-thick-tier { font-size: var(--dq-text-xs); color: var(--dq-text-muted); }
.dq-thick-rec {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--dq-confirm);
}
.dq-thick-life { font-size: var(--dq-text-xs); color: var(--dq-amber-200); }
.dq-thick-note {
  margin-top: 0.85rem; padding: 0.8rem 0.9rem;
  background: var(--dq-slate-900); border-radius: var(--dq-radius-md);
  font-size: var(--dq-text-sm); line-height: 1.5;
}
.dq-thick-note p { margin: 0; }
.dq-thick-note p + p { margin-top: 0.45rem; }

@media (max-width: 620px) {
  .dq-thickness { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------- scope sheet */

.dq-scope { background: var(--dq-bg); color: var(--dq-text); border-radius: var(--dq-radius-lg); padding: 1.5rem; }
.dq-scope-head { border-bottom: 2px solid var(--dq-text-strong); padding-bottom: 0.85rem; margin-bottom: 1rem; }
.dq-scope-head h3 { margin: 0; font-size: var(--dq-text-xl); color: var(--dq-text-strong); }
.dq-scope-head p { margin: 0.25rem 0 0; font-size: var(--dq-text-sm); color: var(--dq-text-muted); }
.dq-scope-table { width: 100%; border-collapse: collapse; font-size: var(--dq-text-sm); }
.dq-scope-table th {
  text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--dq-border);
  font-size: var(--dq-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--dq-text-muted);
}
.dq-scope-table td { padding: 0.65rem 0.4rem; border-bottom: 1px solid var(--dq-border); vertical-align: top; }
.dq-scope-table .num { text-align: right; white-space: nowrap; }
.dq-scope-table tfoot td { font-weight: 700; color: var(--dq-text-strong); border-bottom: 0; padding-top: 0.85rem; }
.dq-scope-table .dq-badge { margin-left: 0.35rem; }
.dq-scope-note { font-size: var(--dq-text-xs); color: var(--dq-text-muted); margin: 1rem 0 0; line-height: 1.5; }

/* ---------------------------------------------------------- lead */

.dq-lead-summary {
  padding: 1rem; margin-bottom: 1.25rem;
  background: var(--dq-slate-900); border-radius: var(--dq-radius-md);
}
.dq-lead-summary h3 { margin: 0 0 0.6rem; font-size: var(--dq-text-sm); color: var(--dq-text-strong); }
.dq-lead-summary ul { list-style: none; margin: 0 0 0.85rem; padding: 0; font-size: var(--dq-text-sm); }
.dq-lead-summary li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.22rem 0; }
.dq-lead-summary li span:first-child { color: var(--dq-text-muted); }
.dq-lead-summary li span:last-child { color: var(--dq-text-strong); text-align: right; }
.dq-lead-summary .dq-fineprint { margin: 0; }

.dq-field { display: block; margin-bottom: 0.85rem; }
.dq-field > span { display: block; font-size: var(--dq-text-sm); color: var(--dq-text-muted); margin-bottom: 0.35rem; }
.dq-input {
  width: 100%; padding: 0.7rem 0.85rem;
  background: var(--dq-slate-900);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-md);
  color: var(--dq-text-strong);
  font: 400 var(--dq-text-base)/1.2 var(--dq-font-body);
}
.dq-input:focus { outline: 0; border-color: var(--dq-accent); }
.dq-input.invalid { border-color: var(--dq-danger); }

.dq-lead-status { min-height: 1.2em; margin: 0.35rem 0 0; font-size: var(--dq-text-sm); color: var(--dq-text-muted); }
.dq-lead-status.ok { color: var(--dq-confirm); }
.dq-lead-status.err { color: var(--dq-danger); }

.dq-detect-help ul { margin: 0 0 0.9rem; padding-left: 1.15rem; font-size: var(--dq-text-sm); line-height: 1.7; }

/* ---------------------------------------------------------- responsive */



/* Decorative planting reads as green and secondary - it is never quoted. */
.dq-tool-divider {
  width: 1px; align-self: stretch; margin: 0.35rem 0.3rem;
  background: var(--dq-border); flex: none;
}
.dq-tool-plant.active {
  background: var(--dq-confirm);
  border-color: var(--dq-confirm);
  color: var(--dq-asphalt);
}

/* The basemap fills the stage; the drawing canvas is a transparent layer on
   top of it. The canvas must stay above so it receives drawing gestures - it
   forwards pans and zooms to the map itself. */
#map { position: absolute; inset: 0; background: var(--dq-asphalt); }
#canvas { position: absolute; inset: 0; z-index: 2; }
/* Google injects its own attribution and logo into the map; keep them legible
   and out from under the toolbar. */
#map .gm-style-cc, #map .gmnoprint { z-index: 3 !important; }

/* ---------------------------------------------------------- topbar nav */

.dq-home {
  display: flex; align-items: center;
  height: 38px; padding: 0 0.5rem;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--dq-radius-md);
  cursor: pointer;
  transition: background var(--dq-motion-fast);
}
.dq-home:hover { background: var(--dq-panel-raised); }
/* Full lockup where there is room, the mark alone where there is not. */
.dq-topbar-logo { display: block; }
.dq-topbar-mark { display: none; }
@media (max-width: 760px) {
  .dq-topbar-logo { display: none; }
  .dq-topbar-mark { display: block; }
}


/* The address doubles as the way to change it - the most likely reason
   someone looks at it is that it is wrong. */
.dq-address-chip {
  display: flex; align-items: center; gap: 0.45rem;
  flex-direction: row-reverse;
  padding: 0.4rem 0.7rem;
  background: transparent;
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-pill);
  color: var(--dq-text-muted);
  font: inherit;
  cursor: pointer;
  max-width: min(48vw, 520px);
  transition: border-color var(--dq-motion-fast), color var(--dq-motion-fast);
}
.dq-address-chip:hover { border-color: var(--dq-slate-400); color: var(--dq-text-strong); }
.dq-address-chip .dq-topbar-address {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dq-tool-select.active { background: var(--dq-slate-200); border-color: var(--dq-slate-200); color: var(--dq-asphalt); }

/* Auto-detect is a mode, so it reads as a switch rather than a tool. */
.dq-tool-auto.active {
  background: var(--dq-confirm);
  border-color: var(--dq-confirm);
  color: var(--dq-asphalt);
}
.dq-tool-auto.unavailable { opacity: 0.4; cursor: not-allowed; }

.dq-part-note { font-size: var(--dq-text-xs); color: var(--dq-text-muted); margin-top: 0.15rem; }

/* ---------------------------------------------------------- context bar */

/* Sits directly above the toolbar. Holds the things that had no visible home:
   which shape to draw with, and how to edit the surface you have selected. */
.dq-context {
  position: relative;
  background: color-mix(in srgb, var(--dq-panel) 94%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-lg);
  box-shadow: var(--dq-shadow-panel);
  padding: 0.4rem 0.5rem;
}
.dq-context-row { display: flex; align-items: center; gap: 0.3rem; flex-wrap: nowrap; overflow-x: auto; }
.dq-context-label {
  font-size: var(--dq-text-xs); font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--dq-text-muted);
  padding: 0 0.5rem; white-space: nowrap;
}
.dq-context-hint { font-size: var(--dq-text-xs); color: var(--dq-text-muted); padding: 0 0.5rem; white-space: nowrap; }
.dq-ctx-sep { width: 1px; align-self: stretch; background: var(--dq-border); margin: 0.2rem 0.35rem; flex: none; }
.dq-ctx-spacer { flex: 1; min-width: 0.5rem; }

.dq-shape, .dq-ctx-btn {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.45rem 0.6rem;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--dq-radius-sm);
  color: var(--dq-text-muted);
  font: 500 var(--dq-text-xs)/1 var(--dq-font-body);
  cursor: pointer; white-space: nowrap;
  transition: color var(--dq-motion-fast), background var(--dq-motion-fast);
}
.dq-shape:hover, .dq-ctx-btn:hover:not(:disabled) { color: var(--dq-text-strong); background: var(--dq-panel-raised); }
.dq-shape.active { background: var(--dq-accent); border-color: var(--dq-accent); color: var(--dq-on-accent); }
.dq-ctx-btn:disabled { opacity: 0.4; cursor: default; }
.dq-ctx-danger { color: var(--dq-danger); }
.dq-ctx-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--dq-danger) 14%, transparent); color: var(--dq-danger); }



/* Attaching to an existing surface is a distinct mode; colour says which. */
.dq-context-label.dq-attach { color: var(--dq-amber-200); text-transform: none; letter-spacing: 0; font-size: var(--dq-text-sm); }
.dq-context-label.dq-attach-cut { color: var(--dq-alert-500); }

/* ---------------------------------------------------------- quick chips */

/* Second row of the context bar: the edits people actually repeat - swapping
   material, switching scope - without the wizard taking over the screen. */
.dq-context-chips {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--dq-border);
  gap: 0.6rem;
}
.dq-chip-group { display: flex; align-items: center; gap: 0.25rem; }
.dq-chip-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dq-text-disabled); margin-right: 0.15rem; white-space: nowrap;
}
.dq-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.32rem 0.55rem;
  background: var(--dq-slate-900);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-pill);
  color: var(--dq-text-muted);
  font: 500 var(--dq-text-xs)/1 var(--dq-font-body);
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--dq-motion-fast), color var(--dq-motion-fast), background var(--dq-motion-fast);
}
.dq-chip:hover { color: var(--dq-text-strong); border-color: var(--dq-slate-400); }
.dq-chip.selected {
  background: var(--dq-panel-raised);
  border-color: var(--dq-accent);
  color: var(--dq-text-strong);
}
.dq-chip-mono { font-family: var(--dq-font-mono); }
.dq-chip-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sw);
  border: 1px solid color-mix(in srgb, var(--dq-white) 25%, transparent);
}

/* ---------------------------------------------------------- address menu */

.dq-address-menu-wrap { position: relative; display: flex; min-width: 0; }

.dq-address-menu {
  /* Opens leftwards. The address chip now sits at the right end of the header,
     so anchoring the menu's LEFT edge to it pushed the menu off the side of the
     window - the delete buttons ended up at x=1497 in a 1440px viewport. */
  position: absolute; z-index: 40; top: calc(100% + 0.5rem); right: 0;
  min-width: 320px; max-width: min(460px, 90vw);
  padding: 0.35rem;
  background: var(--dq-panel);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-lg);
  box-shadow: var(--dq-shadow-float);
  max-height: 60vh; overflow-y: auto;
}
.dq-menu-head {
  font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--dq-text-disabled); padding: 0.6rem 0.6rem 0.35rem;
}
.dq-menu-empty {
  font-size: var(--dq-text-xs); color: var(--dq-text-muted);
  padding: 0.5rem 0.6rem 0.65rem; line-height: 1.5;
}
.dq-menu-row { display: flex; align-items: stretch; gap: 0.2rem; border-radius: var(--dq-radius-sm); }
.dq-menu-row:hover { background: var(--dq-panel-raised); }
.dq-menu-row.current { background: color-mix(in srgb, var(--dq-accent) 12%, transparent); }

.dq-menu-item {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
  padding: 0.55rem 0.6rem;
  background: transparent; border: 0; border-radius: var(--dq-radius-sm);
  color: var(--dq-text); font: inherit; text-align: left; cursor: pointer;
}
.dq-menu-primary {
  flex-direction: row; align-items: center; gap: 0.5rem;
  color: var(--dq-text-strong); font-weight: 500; font-size: var(--dq-text-sm);
}
.dq-menu-primary:hover { background: var(--dq-panel-raised); }
.dq-menu-addr {
  font-size: var(--dq-text-sm); color: var(--dq-text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.dq-menu-meta { font-size: var(--dq-text-xs); color: var(--dq-text-muted); }
.dq-menu-del {
  display: grid; place-items: center; width: 34px; flex: none;
  background: transparent; border: 0; border-radius: var(--dq-radius-sm);
  color: var(--dq-text-disabled); cursor: pointer;
}
.dq-menu-del:hover { color: var(--dq-danger); background: color-mix(in srgb, var(--dq-danger) 14%, transparent); }

/* Quietly confirms that work is being kept, without making a feature of it. */
#save-state {
  font-size: var(--dq-text-xs); color: var(--dq-text-disabled);
  white-space: nowrap; transition: opacity var(--dq-motion-base);
}

/* ---------------------------------------------------------- saved on landing */

#landing-saved { margin-top: 1.5rem; text-align: left; }
.dq-saved-title {
  font: 600 var(--dq-text-xs)/1 var(--dq-font-body);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--dq-text-muted); margin: 0 0 0.6rem 0.2rem;
}
.dq-saved-list { display: flex; flex-direction: column; gap: 0.35rem; }
.dq-saved-row {
  display: flex; align-items: stretch; gap: 0.25rem;
  background: color-mix(in srgb, var(--dq-panel) 70%, transparent);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-md);
  transition: border-color var(--dq-motion-fast);
}
.dq-saved-row:hover { border-color: var(--dq-slate-400); }
.dq-saved-item {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.7rem 0.85rem;
  background: transparent; border: 0; border-radius: var(--dq-radius-md);
  font: inherit; text-align: left; cursor: pointer; color: var(--dq-text);
}
.dq-saved-addr { color: var(--dq-text-strong); font-weight: 500; font-size: var(--dq-text-sm); }
.dq-saved-meta { font-size: var(--dq-text-xs); color: var(--dq-text-muted); }
.dq-saved-del {
  display: grid; place-items: center; width: 40px; flex: none;
  background: transparent; border: 0; border-radius: var(--dq-radius-md);
  color: var(--dq-text-disabled); cursor: pointer;
}
.dq-saved-del:hover { color: var(--dq-danger); background: color-mix(in srgb, var(--dq-danger) 14%, transparent); }

/* ---------------------------------------------------------- confirm dialog */

.dq-confirm { text-align: center; padding: 0.25rem 0 0.5rem; }
.dq-confirm-mark {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: 0 auto 1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dq-slate-400) 18%, transparent);
  color: var(--dq-text-muted);
}
.dq-confirm-mark.danger {
  background: color-mix(in srgb, var(--dq-danger) 16%, transparent);
  color: var(--dq-danger);
}
.dq-confirm-msg { margin: 0; font-size: var(--dq-text-base); color: var(--dq-text-strong); line-height: 1.5; }
.dq-confirm-detail { margin: 0.5rem 0 0; font-size: var(--dq-text-sm); color: var(--dq-text-muted); line-height: 1.5; }

.dq-btn-danger {
  background: var(--dq-danger);
  color: var(--dq-asphalt);
  border-color: var(--dq-danger);
}
.dq-btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--dq-danger) 82%, var(--dq-white)); }

/* ---------------------------------------------------------- nested parts */

/* Indented under their surface. A cut-out is a thing the homeowner edits, so it
   needs to be reachable from the rail and not only by clicking the map. */
.dq-part-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.2rem 1.35rem;
  padding: 0.4rem 0.5rem;
  border-left: 2px solid var(--dq-border);
  border-radius: 0 var(--dq-radius-sm) var(--dq-radius-sm) 0;
  cursor: pointer;
  transition: background var(--dq-motion-fast), border-color var(--dq-motion-fast);
}
.dq-part-row:hover { background: var(--dq-panel-raised); }
.dq-part-row.picked { background: var(--dq-panel-raised); border-left-color: var(--dq-accent); }
.dq-part-row.cut.picked { border-left-color: var(--dq-danger); }
.dq-part-mark {
  width: 14px; text-align: center; flex: none;
  font: 600 var(--dq-text-sm)/1 var(--dq-font-mono);
  color: var(--dq-confirm);
}
.dq-part-row.cut .dq-part-mark { color: var(--dq-danger); }
.dq-part-name { flex: 1; min-width: 0; font-size: var(--dq-text-xs); color: var(--dq-text); }
.dq-part-size { font-size: var(--dq-text-xs); color: var(--dq-text-muted); }
.dq-part-del { width: 26px; height: 26px; border-color: transparent; }
.dq-part-row:not(:hover) .dq-part-del { opacity: 0; }

/* ---------------------------------------------------------- material thumbs */

.dq-choice-thumb {
  display: block; margin: -0.2rem -0.2rem 0.6rem;
  border-radius: var(--dq-radius-sm);
  overflow: hidden;
  line-height: 0;
  border: 1px solid color-mix(in srgb, var(--dq-white) 10%, transparent);
}
.dq-swatch-img { display: block; width: 100%; height: 40px; }

/* "More options" - a finish is a refinement of the material, not a choice on
   the same level, so it is folded away until asked for. */
.dq-more { margin-top: 1.25rem; }
.dq-more > summary {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--dq-slate-900);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-md);
  cursor: pointer;
  font: 600 var(--dq-text-sm)/1.2 var(--dq-font-body);
  color: var(--dq-text-strong);
  list-style: none;
}
.dq-more > summary::-webkit-details-marker { display: none; }
.dq-more > summary::after {
  content: '';
  margin-left: auto;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--dq-text-muted);
  border-bottom: 1.5px solid var(--dq-text-muted);
  transform: rotate(45deg);
  transition: transform var(--dq-motion-fast);
}
.dq-more[open] > summary::after { transform: rotate(-135deg); }
.dq-more > summary:hover { border-color: var(--dq-slate-400); }
.dq-more-hint { font-weight: 400; font-size: var(--dq-text-xs); color: var(--dq-text-muted); }
.dq-more .dq-choice-grid { margin-top: 0.6rem; }

/* ---------------------------------------------------------- scope snapshot */

.dq-scope-shot { margin: 0 0 1.25rem; }
.dq-scope-shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--dq-radius-md);
  border: 1px solid var(--dq-border);
}
.dq-scope-shot figcaption {
  margin-top: 0.4rem;
  font-size: var(--dq-text-xs);
  color: var(--dq-text-muted);
}

/* ---------------------------------------------------------- header fit */

/* Flex children default to min-width:auto, so a long address refuses to shrink
   and pushes the whole row wider than the window - taking its dropdown off
   screen with it. */
.dq-topbar > * { min-width: 0; }
.dq-address-menu-wrap { flex: 0 1 auto; }

@media (max-width: 900px) {
  #demo-banner { display: none; }
  #save-state { display: none; }
  .dq-address-chip { max-width: 60vw; }
  .dq-address-menu { min-width: 0; width: min(360px, calc(100vw - 1.5rem)); }
}

/* ============================================================
   RESPONSIVE
   Two breakpoints, two different jobs.

   TABLET is a small desktop: there is room for the floating panels, they just
   need to be narrower and to stop fighting each other.

   PHONE is not a small desktop. The map is the screen, and anything permanently
   sitting on it is stealing the thing the homeowner came to use. Everything
   collapses into one sheet that appears on request - see src/ui/MobileShell.js.
   ============================================================ */

/* ---------------------------------------------------------- tablet */

:root[data-device="tablet"] .dq-rail { width: 240px; }
:root[data-device="tablet"] .dq-estimate { width: 250px; padding: 0.85rem; }
:root[data-device="tablet"] .dq-total-num { font-size: var(--dq-text-2xl); }
:root[data-device="tablet"] .dq-tool { min-width: 66px; padding: 0.5rem 0.4rem; }
:root[data-device="tablet"] .dq-context { max-width: calc(100vw - 1.5rem); }

/* Portrait tablets are narrow enough that a full-height rail crowds the map. */
:root[data-device="tablet"][data-orientation="portrait"] .dq-rail { max-height: 38vh; }

/* The palette does not fit on one line in portrait, and a horizontal scroll
   with no affordance just hides the last two tools. There is vertical room
   here, so it wraps instead. */
:root[data-device="tablet"][data-orientation="portrait"] .dq-toolbar { flex-wrap: wrap; }
:root[data-device="tablet"][data-orientation="portrait"] .dq-toolbar-scroll {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 0.3rem; overflow: visible; border-right: 0; padding-right: 0; width: 100%;
}
:root[data-device="tablet"][data-orientation="portrait"] .dq-toolbar-actions {
  width: 100%; justify-content: flex-end;
  padding-top: 0.4rem; border-top: 1px solid var(--dq-border);
}

/* At tablet widths the toolbar reaches both bottom corners. The status chip
   moves out of the way; the attribution cannot - Google requires it visible on
   the imagery - so the dock lifts to leave its strip clear. */
:root[data-device="tablet"] #detect-chip { bottom: auto; top: 0.75rem; left: 0.75rem; }
:root[data-device="tablet"] .dq-bottom-dock { bottom: 1.75rem; }

/* ---------------------------------------------------------- phone */

/* Inside the sheet, or inside the phone's pinned stack, these are plain blocks
   - the floating-card treatment belongs to whatever is holding them now. */
:root[data-device="phone"] .dq-rail,
:root[data-device="phone"] .dq-estimate,
:root[data-device="phone"] .dq-bottom-dock {
  position: static;
  width: auto;
  max-width: none;
  max-height: none;
  transform: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}

/* The one thing pinned over the map. */
.dq-mobile {
  position: absolute; z-index: 20; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  pointer-events: none;
}
.dq-mobile > *, .dq-mobile-main > * { pointer-events: auto; }
.dq-mobile-main { display: flex; flex-direction: column; min-height: 0; pointer-events: none; }

.dq-mobilebar {
  display: flex; align-items: stretch; gap: 0.25rem;
  padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--dq-panel) 96%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--dq-border);
}
.dq-mtab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  position: relative;
  padding: 0.45rem 0.2rem;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--dq-radius-md);
  color: var(--dq-text-muted);
  font: 500 10px/1 var(--dq-font-body);
  cursor: pointer;
}
.dq-mtab.active { background: var(--dq-panel-raised); color: var(--dq-text-strong); }
.dq-mbadge {
  position: absolute; top: 2px; right: 50%; transform: translateX(180%);
  min-width: 15px; height: 15px; padding: 0 3px;
  display: grid; place-items: center;
  border-radius: var(--dq-radius-pill);
  background: var(--dq-accent); color: var(--dq-on-accent);
  font: 700 9px/1 var(--dq-font-body);
}
.dq-mquote {
  flex: 1.4 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  padding: 0.4rem 0.5rem;
}
.dq-mquote-num { font-size: var(--dq-text-base); line-height: 1; }
.dq-mquote-label { font-size: 9px; opacity: 0.8; }
.dq-mhint {
  flex: 1.4 1 0; display: grid; place-items: center;
  font-size: var(--dq-text-xs); color: var(--dq-text-muted); text-align: center;
}

/* The sheet: only ever as tall as it needs to be, never more than half the
   screen, so the property stays visible while choosing. */
.dq-sheet {
  display: flex; flex-direction: column;
  max-height: min(52vh, calc(var(--dq-vh, 100vh) * 0.52));
  background: color-mix(in srgb, var(--dq-panel) 97%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-xl) var(--dq-radius-xl) 0 0;
  box-shadow: var(--dq-shadow-float);
  animation: dq-sheet-up var(--dq-motion-base) both;
}
@keyframes dq-sheet-up { from { transform: translateY(12px); opacity: 0; } }
.dq-sheet-grabber {
  flex: none; height: 22px; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.dq-sheet-grabber::before {
  content: ''; width: 38px; height: 4px; border-radius: 999px;
  background: var(--dq-slate-600);
}
.dq-sheet-body { overflow-y: auto; padding: 0 0.65rem 0.8rem; }

/* Panels inside the sheet lay out as blocks, not as floating cards. */
.dq-sheet .dq-toolbar { flex-wrap: wrap; gap: 0.3rem; }
.dq-sheet .dq-toolbar-scroll {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 0.3rem; overflow: visible; border-right: 0; padding-right: 0; width: 100%;
}
.dq-sheet .dq-toolbar-actions { width: 100%; justify-content: space-between; padding-top: 0.4rem; border-top: 1px solid var(--dq-border); }
.dq-sheet .dq-tool { min-width: 0; }
.dq-sheet .dq-rail-title { display: none; }
.dq-sheet .dq-estimate-buttons { flex-direction: column; }

/* The dock rides above the sheet in the pinned stack, so the context bar's
   mid-draw actions stay reachable with a shape half drawn. */
.dq-mobile-dock {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem;
  padding-bottom: 0.35rem;
}
.dq-mobile-dock:empty { display: none; }
:root[data-device="phone"] .dq-bottom-dock { display: flex; flex-direction: column; gap: 0.35rem; align-items: stretch; }

/* Context bar sits directly above the pinned bar and scrolls sideways. */
:root[data-device="phone"] .dq-context {
  margin: 0 0.5rem 0.35rem;
  padding: 0.35rem 0.4rem;
  background: color-mix(in srgb, var(--dq-panel) 94%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-lg);
  box-shadow: var(--dq-shadow-panel);
}
:root[data-device="phone"] .dq-context-chips { gap: 0.4rem; }
:root[data-device="phone"] .dq-context-row {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
:root[data-device="phone"] .dq-context-row::-webkit-scrollbar { display: none; }
:root[data-device="phone"] .dq-context-row > * { flex: none; }
/* The context bar is where a half-drawn shape gets finished, so everything the
   live readout already says yields to keep Undo and Finish on screen without a
   sideways scroll: the hint, the point count, and Cancel's word. */
:root[data-device="phone"] .dq-context-hint,
:root[data-device="phone"] .dq-context-count,
:root[data-device="phone"] .dq-ctx-spacer,
:root[data-device="phone"] .dq-ctx-btn-quiet .dq-ctx-word { display: none; }
:root[data-device="phone"] .dq-context-label {
  max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:root[data-device="phone"] #hint,
:root[data-device="phone"] #toast { margin: 0 0.5rem 0.35rem; font-size: var(--dq-text-xs); }
/* The three map overlays all want the same corner once the bottom of the screen
   belongs to the sheet, so they get an explicit two-row stack instead: status
   and attribution share the top line, the live readout sits under them. */
:root[data-device="phone"] #detect-chip {
  bottom: auto; top: 0.45rem; left: 0.5rem;
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:root[data-device="phone"] #attribution {
  bottom: auto; top: 0.55rem; right: 0.5rem;
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:root[data-device="phone"] #live-measure {
  top: 2.6rem; padding: 0.4rem 0.75rem; gap: 0.4rem;
  max-width: calc(100vw - 1rem);
}
:root[data-device="phone"] .dq-live-num { font-size: var(--dq-text-base); }

/* Header: mark only, and the address gets whatever is left. */
:root[data-device="phone"] .dq-topbar { padding: 0.5rem 0.6rem; gap: 0.5rem; }
:root[data-device="phone"] .dq-address-chip { max-width: 62vw; padding: 0.35rem 0.6rem; font-size: var(--dq-text-sm); }
:root[data-device="phone"] .dq-address-menu { width: calc(100vw - 1.2rem); max-width: none; }

/* Modals become full-height sheets - a centred dialog on a phone is a postage
   stamp with the keyboard over it. */
:root[data-device="phone"] .dq-modal-scrim { padding: 0; align-items: flex-end; }
:root[data-device="phone"] .dq-modal {
  max-width: none; max-height: 92vh; width: 100%;
  border-radius: var(--dq-radius-xl) var(--dq-radius-xl) 0 0;
}
:root[data-device="phone"] .dq-modal-actions { flex-wrap: wrap; }
:root[data-device="phone"] .dq-modal-actions .dq-btn { flex: 1 1 auto; }
:root[data-device="phone"] .dq-choice-grid { grid-template-columns: 1fr 1fr; }
:root[data-device="phone"] .dq-thickness { grid-template-columns: repeat(2, 1fr); }

/* Landscape phone: height is the scarce dimension, so the sheet becomes a side
   drawer and the pinned bar a narrow column. */
/* Landscape: the sheet and the bar become a right-hand column pair, and the
   dock keeps its own full-width row underneath rather than being squeezed in
   beside them - as a sibling it pushed the bar clean off the screen. */
:root[data-device="phone"][data-orientation="landscape"] .dq-mobile { top: 0; }
:root[data-device="phone"][data-orientation="landscape"] .dq-mobile-main {
  flex: 1; flex-direction: row-reverse; justify-content: flex-start;
  align-items: stretch; min-height: 0;
}
:root[data-device="phone"][data-orientation="landscape"] .dq-mobile-dock {
  order: 2; align-items: flex-start; padding: 0 0.5rem 0.35rem;
  max-width: 100%;
}
:root[data-device="phone"][data-orientation="landscape"] .dq-mobilebar {
  flex-direction: column; width: 68px;
  padding: 0.35rem 0.35rem 0.35rem 0.3rem;
  border-top: 0; border-left: 1px solid var(--dq-border);
}
:root[data-device="phone"][data-orientation="landscape"] .dq-sheet {
  max-height: none; width: min(42vw, 290px);
  border-radius: var(--dq-radius-xl) 0 0 var(--dq-radius-xl);
  border-top: 0; border-left: 1px solid var(--dq-border);
}
:root[data-device="phone"][data-orientation="landscape"] .dq-sheet-grabber { display: none; }
:root[data-device="phone"][data-orientation="landscape"] .dq-mquote { flex: none; }

/* Landscape leaves no room for the landing page's steps or backdrop parcels. */
:root[data-device="phone"][data-orientation="landscape"] .dq-landing-steps { display: none; }
:root[data-device="phone"] .dq-landing-inner h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
:root[data-device="phone"] .dq-landing-lede { font-size: var(--dq-text-base); }
:root[data-device="phone"] .dq-address-field { border-radius: var(--dq-radius-lg); }
:root[data-device="phone"] .dq-address-go { padding: 0.7rem 0.85rem; font-size: var(--dq-text-xs); }

:root[data-device="phone"][data-orientation="landscape"] .dq-sheet .dq-toolbar-scroll {
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
}
:root[data-device="phone"][data-orientation="landscape"] .dq-sheet .dq-tool { font-size: 10px; padding: 0.4rem 0.2rem; }
:root[data-device="phone"][data-orientation="landscape"] #live-measure { top: 0.5rem; }
:root[data-device="phone"][data-orientation="landscape"] #attribution { max-width: 32vw; }
/* The column bar has no width for a sentence of guidance. */
:root[data-device="phone"][data-orientation="landscape"] .dq-mhint { display: none; }

/* The one affirmative action in the context bar: closing the shape you are
   part-way through drawing. */
.dq-ctx-btn-go { border-color: color-mix(in srgb, var(--dq-accent) 55%, transparent); color: var(--dq-amber-200); }
.dq-ctx-btn-go:not(:disabled):hover { background: color-mix(in srgb, var(--dq-accent) 18%, transparent); }

/* Point count while a shape is part-drawn, beside the heading. */
.dq-context-count {
  font: 500 var(--dq-text-xs)/1 var(--dq-font-mono, var(--dq-font-body));
  color: var(--dq-amber-200); white-space: nowrap;
}