/* Roof Estimate page — new page, own stylesheet. Reuses tokens.css variables + shared .btn /
   .form-row / .honeypot-field / .preview-note classes from style.css; nothing here overrides
   the shared site styles. */

.roof-app {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.roof-step {
  border: 2px solid var(--color-cyan);
  border-radius: var(--radius-box);
  padding: var(--space-3);
  background: var(--color-surface);
}
.roof-step:nth-of-type(3n+2) { border-color: var(--color-magenta); }
.roof-step:nth-of-type(3n+3) { border-color: var(--color-green); }
.roof-step h2 { margin-top: 0; color: var(--color-white); font-size: 1.3rem; }
.roof-step-label { color: var(--color-cyan-bright); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.35em; }

/* Phone-width compaction (Tyler: page felt oversized on his phone). Cards keep their border but
   lose about a third of their padding, headings/body drop a step, the map is capped short enough
   that the address box + map + instructions fit one screen, and the material grid goes 2-up with
   smaller swatches. Inputs stay >=16px so iOS Safari doesn't auto-zoom on focus, and every tap
   target (remove/submit/material-card/pin-remove) stays >=44px tall. */
@media (max-width: 480px) {
  .roof-app { gap: var(--space-2); }
  .roof-step { padding: var(--space-2); }
  .roof-step h2 { font-size: 1.05rem; margin-bottom: 0.3em; }
  .roof-step p { font-size: 0.92rem; margin-bottom: 0.6em; }
  .roof-step-label { font-size: 0.72rem; }
}

/* Address search */
.roof-address-row { display: flex; gap: var(--space-1); flex-wrap: wrap; }
#roof-address-input {
  flex: 1 1 240px;
  padding: 0.85em 1em;
  font-size: 1rem; /* keep >=16px even when the page's base font shrinks on mobile — iOS Safari
                       zooms the viewport on focus for any input font-size under 16px */
  border-radius: var(--radius-box);
  border: 1px solid var(--color-text-muted); /* was --color-border (#232336): too low-contrast
                       against the dark card background to clear WCAG's 3:1 non-text minimum */
  background: #0a0a14;
  color: var(--color-white);
}
#roof-address-input:focus { border-color: var(--color-cyan); outline: 2px solid var(--color-cyan); outline-offset: 1px; }

/* Map */
.roof-map-wrap { position: relative; margin-top: var(--space-2); }
#roof-map {
  width: 100%;
  height: 360px;
  border-radius: var(--radius-box);
  border: 1px solid var(--color-border);
  background: #111;
}
@media (min-width: 640px) { #roof-map { height: 460px; } }
.roof-map-hint {
  margin-top: var(--space-1);
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.roof-alt-access {
  margin: 0.4em 0 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.roof-alt-access a { font-weight: 700; }
/* Overlay (not display:none) so the underlying google.maps.Map keeps a real, sized container to
   initialize into — it's only ever visually covered, never hidden, so no manual resize/re-center
   is needed when it's revealed after an address is picked. */
.roof-map-empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border-radius: var(--radius-box);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-2);
}

@media (max-width: 480px) {
  /* Instructions read before the map (DOM order moved in roof-estimate.js) and the map itself is
     capped short enough that address box + map + "tap the roof" line fit one screen without
     scrolling, per Tyler's phone screenshot. */
  #roof-address-input { padding: 0.7em 0.85em; }
  .roof-map-wrap { margin-top: var(--space-1); }
  #roof-map, .roof-map-empty { height: 46vh; min-height: 200px; max-height: 340px; }
  .roof-map-hint { margin: 0 0 var(--space-1); font-size: 0.85rem; }
  .roof-alt-access { font-size: 0.82rem; }
}

/* Pin list */
.roof-pin-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.roof-pin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.65em 0.9em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-box);
  background: rgba(255,255,255,0.03);
}
.roof-pin-row.is-duplicate { border-color: var(--color-magenta); opacity: 0.75; }
.roof-pin-row-label { font-weight: 700; color: var(--color-white); }
.roof-pin-row-meta { font-size: 0.85rem; color: var(--color-text-muted); }
.roof-pin-remove {
  background: none;
  border: 1px solid var(--color-magenta);
  color: var(--color-magenta-bright);
  border-radius: var(--radius-box);
  padding: 0.35em 0.7em;
  cursor: pointer;
  font-size: 0.85rem;
  min-height: 44px;
  min-width: 44px;
}
.roof-pin-remove:hover { background: var(--color-magenta); color: var(--color-white); }

/* Results */
.roof-results-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin-top: var(--space-2); }
@media (min-width: 720px) { .roof-results-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.roof-result-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-box);
  padding: var(--space-2);
  background: rgba(255,255,255,0.03);
}
.roof-result-card h3 { margin: 0 0 0.5em; color: var(--color-cyan-bright); font-size: 1.05rem; }
.roof-result-stat { display: flex; justify-content: space-between; padding: 0.25em 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.95rem; }
.roof-result-stat:last-child { border-bottom: none; }
.roof-result-stat dt { color: var(--color-text-muted); }
.roof-result-stat dd { margin: 0; font-weight: 700; color: var(--color-white); }
.roof-complex-note {
  margin-top: var(--space-1);
  font-size: 0.85rem;
  color: var(--color-magenta-bright);
}
.roof-total-summary { font-size: 1.15rem; font-weight: 700; color: var(--color-white); margin-top: var(--space-2); }
.roof-total-summary span { color: var(--color-green); }

/* Material picker: brand first, then that brand's colors (Tyler, 2026-09-24). */
.roof-material-picker { margin-top: var(--space-2); }

.roof-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-1); }
.roof-brand-card {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-box);
  padding: var(--space-2) var(--space-1);
  cursor: pointer;
  background: rgba(255,255,255,0.03);
  text-align: center;
  min-height: 44px;
}
.roof-brand-card:hover { border-color: var(--color-cyan); }
.roof-brand-swatch-row { display: flex; justify-content: center; gap: 0.3em; margin-bottom: 0.5em; }
.roof-brand-mini-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.4); display: inline-block; }
.roof-brand-name { font-weight: 700; color: var(--color-white); font-size: 0.95rem; }

.roof-brand-back {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--color-cyan-bright);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.5em 0;
  margin-bottom: 0.5em;
  min-height: 44px;
}
.roof-brand-back:hover { text-decoration: underline; }

.roof-material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-1); margin-top: var(--space-2); }
.roof-material-card {
  position: relative;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-box);
  padding: var(--space-1);
  cursor: pointer;
  background: rgba(255,255,255,0.03);
  text-align: left;
  min-height: 44px; /* tap target */
}
.roof-material-card:hover { border-color: var(--color-cyan); }
.roof-material-card.is-selected { border-color: var(--color-green); background: rgba(53, 234, 10, 0.08); }
.roof-material-swatch { width: 100%; aspect-ratio: 4/3; border-radius: 4px; border: 1px solid rgba(0,0,0,0.4); margin-bottom: 0.4em; }
.roof-material-name { font-weight: 700; font-size: 0.88rem; color: var(--color-white); display: block; }
.roof-material-brand { font-size: 0.78rem; color: var(--color-text-muted); display: block; }
.roof-material-tier { font-size: 0.78rem; color: var(--color-green); display: block; margin-top: 0.2em; }

@media (max-width: 480px) {
  .roof-brand-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5em; }
  .roof-brand-card { padding: 0.6em 0.4em; }
  .roof-brand-name { font-size: 0.85rem; }
  .roof-material-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5em; margin-top: var(--space-1); }
  .roof-material-card { padding: 0.5em; }
  .roof-material-name { font-size: 0.8rem; }
  .roof-material-brand, .roof-material-tier { font-size: 0.7rem; }
  .roof-results-grid { gap: var(--space-1); margin-top: var(--space-1); }
  .roof-result-card { padding: var(--space-1); }
}

/* Price range */
.roof-price-range { font-size: 1.6rem; font-weight: 800; color: var(--color-green); margin: 0.3em 0; }
.roof-price-locked {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-box);
  padding: var(--space-2);
  text-align: center;
  color: var(--color-text-muted);
}

/* Disclaimer */
.roof-disclaimer {
  border: 2px solid var(--color-magenta);
  border-radius: var(--radius-box);
  padding: var(--space-2);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  background: rgba(222, 14, 224, 0.06);
}
.roof-disclaimer strong { color: var(--color-white); }

/* Lead form (extends shared .form-row) */
.roof-lead-form .form-grid { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-2); }
@media (min-width: 640px) { .roof-lead-form .form-grid { grid-template-columns: 1fr 1fr; } }
.roof-consent-row { display: flex; align-items: flex-start; gap: 0.6em; margin: var(--space-2) 0; font-size: 0.9rem; }
.roof-consent-row input { margin-top: 0.25em; }
.roof-fallback-note {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-cyan);
  border-radius: var(--radius-box);
  background: rgba(20, 200, 245, 0.06);
  font-size: 0.9rem;
}

.roof-measurement-note { font-size: 0.82rem; color: var(--color-text-muted); margin: 0.5em 0 0; }
.roof-privacy-note { font-size: 0.82rem; color: var(--color-text-muted); margin: 0.5em 0 var(--space-1); }

/* Form control border contrast: the shared .form-row input/select/textarea border
   (--color-border, #232336) is well under WCAG's 3:1 non-text contrast minimum against this
   page's dark card backgrounds — override with a lighter, already-in-palette gray. */
.roof-lead-form .form-row input,
.roof-lead-form .form-row select,
.roof-lead-form .form-row textarea {
  border-color: var(--color-text-muted);
  font-size: 1rem; /* >=16px: avoid iOS auto-zoom on focus */
}

.roof-status-line { font-size: 0.9rem; color: var(--color-text-muted); min-height: 1.4em; }
.roof-status-line.is-error { color: var(--color-magenta-bright); }

.roof-step[hidden] { display: none; }