/* ============================================================
   Vaastu Solutions — Report intake wizard styles.
   Layers on top of css/styles.css and reuses its .tool-* pattern
   and design tokens. Only adds the few pieces the wizard needs.
   ============================================================ */

.intake-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.intake-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }

.intake-detect-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
  margin-top: var(--space-2, 8px);
}
.intake-detect-row .tool-hint { margin-top: 0; }

.tool-hint {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: var(--space-2);
}

.tool-error {
  font-size: var(--text-sm);
  color: var(--agni);
  margin-top: var(--space-2);
  font-weight: 500;
}

/* Layout rows: room type + zone + remove */
.intake-layout-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}
.intake-remove {
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--muted);
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  transition: all var(--duration-fast, 200ms) var(--ease-out, ease);
}
.intake-remove:hover { color: var(--agni); border-color: var(--agni); }

.intake-add { margin: var(--space-2) 0 var(--space-5); }

/* Review step */
.intake-review { margin-bottom: var(--space-5); }
.intake-review h3 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  margin-bottom: var(--space-3);
}
.intake-review__list { list-style: none; padding: 0; margin: 0; }
.intake-review__list li {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.intake-review__list li span { color: var(--muted); }
.intake-review__list li strong { text-align: right; }

/* ============================================================
   Step 2 — interactive compass grid (tap-to-place + drag)
   ============================================================ */

.layout-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.layout-toolbar .tool-hint { margin-top: 0; flex: 1; }
.layout-viewtoggle {
  flex: none;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  min-height: 40px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast, 200ms), color var(--duration-fast, 200ms);
}
.layout-viewtoggle:hover { border-color: var(--jal); color: var(--jal); }

/* --- the rotatable 16-zone compass --- */
/* Bulletproof responsive square: a viewBox-only <svg> with height:auto (or
   even aspect-ratio) collapses to 0 height on some mobile engines. Instead we
   make the WRAPPER a square via the padding-top:100% hack and let the SVG fill
   it absolutely — this holds on every engine, old Safari/WebView included. */
.compass-stage {
  position: relative;
  width: 100%;
  max-width: 400px;
  min-width: 0;
  margin: 0 auto var(--space-2);
}
.compass-stage::before { content: ""; display: block; padding-top: 100%; }
.compass-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: manipulation;
}

.compass-frame { fill: #fff; stroke: var(--hairline); stroke-width: 1.5; }
.compass-ringbg { fill: #FCFAF5; stroke: rgba(184,134,11,0.25); stroke-width: 1; }

.compass-wheel { transform-box: view-box; transform-origin: 200px 200px; }
.compass-wheel.is-animating { transition: transform 0.28s var(--ease-out, ease); }

/* wedges (interactive zones) */
.wedge {
  fill: #FCFAF5;
  stroke: rgba(184,134,11,0.35);
  stroke-width: 1;
  cursor: pointer;
  transition: fill var(--duration-fast, 200ms);
}
/* never draw the UA rectangular bounding-box outline on tap/focus — the
   highlight is painted on the wedge <path> itself (below) so it follows the
   wedge shape, never a black box. */
.wedge { outline: none; }
.wedge:focus { outline: none; }
.wedge:hover { fill: rgba(184,134,11,0.10); }
/* keyboard-only focus: a soft gold ring that traces the wedge outline */
.wedge:focus-visible {
  outline: none;
  fill: rgba(184,134,11,0.16);
  stroke: var(--gold, #B8860B);
  stroke-width: 2.5;
  stroke-linejoin: round;
  paint-order: stroke;
}
/* filled zone (has rooms): blue wash — distinct from the gold selection */
.wedge.is-occupied { fill: rgba(29,111,176,0.12); stroke: rgba(29,111,176,0.5); stroke-linejoin: round; }
.wedge.is-occupied:focus-visible { fill: rgba(184,134,11,0.22); stroke: var(--gold, #B8860B); }
.wedge.is-dragover { fill: rgba(184,134,11,0.22); stroke: var(--gold, #B8860B); stroke-width: 2.5; stroke-linejoin: round; }
/* arming: gently pulse the zones so it's clear a tap is expected */
.compass-stage.is-arming .wedge { stroke: rgba(29,111,176,0.55); animation: wedgePulse 1.5s ease-in-out infinite; }
@keyframes wedgePulse { 0%,100% { fill: #FCFAF5; } 50% { fill: rgba(29,111,176,0.10); } }
.compass-stage.is-arming .wedge.is-occupied { animation: none; }

/* decorative layers never intercept taps */
.rose, .tick, .deg, .needle, .hub, .hub-inner, .hub-label,
.zlabel, .zbadge, .refmark, .refmark-label, .compass-frame, .compass-ringbg { pointer-events: none; }

.rose { stroke: rgba(184,134,11,0.18); }
.rose--card { stroke: rgba(184,134,11,0.30); stroke-width: 1; }
.rose--inter { stroke: rgba(184,134,11,0.20); stroke-width: 0.8; }
.rose--sec { stroke: rgba(184,134,11,0.12); stroke-width: 0.6; }

.tick { stroke: var(--muted); stroke-width: 1; opacity: 0.5; }
.tick--major { stroke: var(--charcoal); stroke-width: 1.6; opacity: 0.55; }
.deg { fill: var(--muted); font-family: var(--font-body); font-size: 8px; text-anchor: middle; dominant-baseline: middle; opacity: 0.7; }

.needle { fill: #E63329; }

.hub { fill: #fff; stroke: rgba(184,134,11,0.45); stroke-width: 1.5; }
.hub-inner { fill: #FCF6E9; stroke: rgba(184,134,11,0.35); stroke-width: 1; }
.hub-label { fill: #8a660c; font-family: var(--font-display); font-weight: 700; font-size: 8px; text-anchor: middle; dominant-baseline: middle; }

/* upright zone labels — 3-tier hierarchy */
.zlabel { font-family: var(--font-display); text-anchor: middle; dominant-baseline: middle; fill: var(--charcoal); }
.zlabel.t1 { font-size: 19px; font-weight: 700; }
.zlabel.t2 { font-size: 14px; font-weight: 600; fill: #4a453f; }
.zlabel.t3 { font-size: 9px; font-weight: 600; fill: var(--muted); }
.zlabel--north { fill: #E63329; }

.zbadge circle { fill: #1D6FB0; }
.zbadge-num { fill: #fff; font-family: var(--font-body); font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }

/* fixed reference marker at 12 o'clock */
.refmark { fill: #E63329; }
.refmark-label { fill: #E63329; font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-anchor: middle; }

/* rotation drag ring */
.compass-rotator { cursor: grab; touch-action: none; pointer-events: stroke; }
.compass-rotator:active { cursor: grabbing; }

/* rotation controls */
.compass-controls {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--space-2); margin-bottom: var(--space-4);
}
.compass-rotbtn {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  border: 1px solid var(--hairline); background: #fff; color: var(--charcoal);
  font-size: 0.8rem; cursor: pointer; line-height: 1;
  transition: border-color var(--duration-fast, 200ms), color var(--duration-fast, 200ms);
}
.compass-rotbtn:hover { border-color: var(--jal); color: var(--jal); }
.compass-rotstatus { font-size: var(--text-sm); font-weight: 600; color: var(--charcoal); min-width: 180px; text-align: center; }
.compass-resetbtn {
  border: 1px solid var(--hairline); background: #fff; color: var(--muted);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  padding: 0.45rem 0.8rem; min-height: 40px; border-radius: var(--radius-md); cursor: pointer;
}
.compass-resetbtn:hover { border-color: var(--jal); color: var(--jal); }

/* placed-rooms list, grouped by zone */
.placed-list { margin-top: var(--space-5); }
.placed-empty { font-size: var(--text-sm); color: var(--muted); }
.placed-group { padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); border-radius: var(--radius-md); transition: background-color 0.3s; }
.placed-group.is-flash { background: rgba(29,111,176,0.10); }
.placed-group__zone { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; color: var(--charcoal); margin: 0 0 var(--space-2); }
.placed-group__list { list-style: none; margin: 0; padding: 0; }
.placed-item { display: flex; align-items: center; gap: var(--space-2); padding: 6px 0; }
.placed-item__dot { width: 10px; height: 10px; border-radius: var(--radius-full); flex: none; }
.placed-item__name { flex: 1; font-size: var(--text-sm); font-weight: 600; color: var(--charcoal); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.placed-item__actions { display: flex; gap: 6px; flex: none; }
.placed-item__btn {
  min-height: 32px; padding: 4px 10px; border-radius: var(--radius-md);
  border: 1px solid var(--hairline); background: #fff; color: var(--charcoal);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; cursor: pointer;
}
.placed-item__btn:hover { border-color: var(--jal); color: var(--jal); }
.placed-item__btn--danger:hover { border-color: var(--agni); color: var(--agni); }

.cgrid-count { font-size: var(--text-sm); font-weight: 600; color: var(--charcoal); margin: var(--space-3) 0 var(--space-2); text-align: center; }

/* --- room chips --- */
.rchip {
  --rc: #6B7280;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  padding: 5px 9px;
  border: 1.5px solid var(--hairline);
  border: 1.5px solid color-mix(in srgb, var(--rc) 45%, #fff);
  border-radius: var(--radius-full);
  background: #fff;
  background: color-mix(in srgb, var(--rc) 12%, #fff);
  color: var(--charcoal);
  color: color-mix(in srgb, var(--rc) 78%, #000);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  transition: transform var(--duration-fast, 200ms) var(--ease-out, ease), box-shadow var(--duration-fast, 200ms), filter var(--duration-fast, 200ms);
}
.rchip__ico { display: inline-flex; flex: none; color: var(--rc); }
.rchip__ico svg { width: 15px; height: 15px; }
.rchip__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rchip--tray { min-height: 40px; padding: 8px 12px; font-size: 0.82rem; }
.rchip--tray:hover { filter: brightness(0.97); box-shadow: 0 2px 8px rgba(33,30,30,0.08); }
.rchip--tray.is-selected { background: var(--rc); color: #fff; border-color: var(--rc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 25%, transparent); transform: translateY(-1px); }
.rchip--tray.is-selected .rchip__ico { color: #fff; }
.rchip--tray.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* --- tray + custom --- */
.cgrid-tray-label { font-size: var(--text-sm); color: var(--muted); margin: var(--space-4) 0 var(--space-2); font-weight: 600; }
.room-tray { display: flex; flex-wrap: wrap; gap: 8px; }
.room-custom { margin-top: var(--space-3); }
.room-custom__toggle {
  background: none; border: none; padding: 4px 0;
  color: var(--jal); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.room-custom__form { display: flex; gap: var(--space-2); margin-top: var(--space-2); align-items: center; }
.room-custom__form .tool-input { max-width: 260px; }

/* --- Next button disabled state --- */
#btn-next-2[disabled] { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.3); }

/* --- review mini-compass --- */
.compass-stage--review { max-width: 260px; margin-bottom: 0; }

/* --- list-view rows: full-width stacked fields so labels never truncate --- */
.intake-layout-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-3);
  align-items: end;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--hairline);
}
.ilr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ilr-field label { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.ilr-field .tool-select, .ilr-field .tool-input { width: 100%; }

@media (max-width: 560px) {
  .intake-row2, .intake-row3 { grid-template-columns: 1fr; }
  .intake-layout-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .intake-layout-row .intake-remove { justify-self: end; margin-top: -2px; }
}

/* keep the sticky mobile contact bar from covering the Back/Next buttons */
@media (max-width: 768px) {
  .tool-page { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .rchip, .compass-stage.is-arming .wedge, .wedge, .compass-wheel.is-animating,
  .placed-group { animation: none !important; transition: none !important; }
}