:root{
  /* Legacy variables remapped onto the Propterra design tokens (--pt-*, defined in
     propterra-theme.css). Existing components that use these keep working but pick up
     the new brand palette automatically. Hardcoded colors get swept in phase D2. */
  --bg:var(--pt-mist,#F7F8F6); --fg:var(--pt-charcoal,#151A18); --muted:var(--pt-slate,#59645E); --border:#E7E4DC;
  --accent:var(--pt-green,#1F7A4D); --accent-hover:var(--pt-deep-forest,#0F2D22); --error:var(--pt-danger,#B84A3A);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--fg);background:var(--bg);line-height:1.5}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:#fff;border-bottom:1px solid var(--border)}
.brand{font-weight:600;color:var(--fg);text-decoration:none;font-size:18px}
.nav{display:flex;gap:18px;align-items:center;font-size:14px}
.nav a{color:var(--accent);text-decoration:none}
main{max-width:1100px;margin:32px auto;padding:0 24px}
.container{}
.card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:28px;margin:0 auto;max-width:560px}
.card.narrow{max-width:420px}
h1{margin-top:0;font-size:24px}
.muted{color:var(--muted)}
.error{color:var(--error)}
form label{display:block;margin:14px 0;font-size:14px;color:var(--muted)}
form label input,form label textarea,form label select{display:block;width:100%;padding:10px 12px;margin-top:6px;border:1px solid var(--border);border-radius:6px;font-size:15px;background:#fff;color:var(--fg)}
fieldset{margin:14px 0;padding:14px;border:1px solid var(--border);border-radius:6px}
legend{padding:0 6px;color:var(--muted);font-size:13px}
.radio{display:flex;align-items:center;gap:8px;margin:6px 0}
.radio input{width:auto;margin:0}
button{margin-top:18px;padding:10px 18px;background:var(--accent);color:#fff;border:0;border-radius:6px;font-size:15px;cursor:pointer}
button:hover{background:var(--accent-hover)}
.empty{padding:32px;text-align:center;background:#fff;border:1px dashed var(--border);border-radius:8px;margin-top:24px}
table.data{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:24px}
table.data th,table.data td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:14px}
table.data th{background:#fafaf8;font-weight:600;color:var(--muted)}
.footer{padding:24px;text-align:center;color:var(--muted)}
code{background:#f0f0ec;padding:2px 6px;border-radius:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}

/* dashboard thumbnails */
.thumb{width:72px}
.thumb img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--border);display:block}
.thumb-empty{width:64px;height:64px;border-radius:6px;border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px}

/* request detail page */
.detail-header{margin-bottom:24px}
.detail-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:32px}
@media(max-width:820px){.detail-grid{grid-template-columns:1fr}}
.detail-left h3,.detail-right h3{margin-top:24px;font-size:14px;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted)}
.detail-left h3:first-child,.detail-right h3:first-child{margin-top:0}
.detail-left blockquote{border-left:3px solid var(--accent);background:#fff;margin:6px 0;padding:10px 14px;color:var(--fg)}
.satellite{width:100%;max-width:640px;border-radius:8px;border:1px solid var(--border);display:block}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:8px}
.photo-grid img{width:100%;height:140px;object-fit:cover;border-radius:6px;border:1px solid var(--border);display:block}
.photo-grid a:hover img{outline:2px solid var(--accent)}

/* lead score badges */
.lead-badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:13px;font-weight:600;line-height:1.2;color:#fff;border:0;cursor:default}
.lead-badge.lead-green{background:#2d6a4f}
.lead-badge.lead-yellow{background:#d4a017;color:#1f1f1f}
.lead-badge.lead-red{background:#b00020}

/* margin display */
.margin{font-weight:600;color:var(--accent)}

/* quote card on request detail */
.quote-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:24px;margin:24px 0}
.quote-card.pending{background:#fdfaf3}
.quote-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:16px}
.quote-card h2{margin-top:0}
.quote-card h3{font-size:13px;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);margin-top:24px}
.quote-range{text-align:right}
.quote-range-amount{font-size:28px;font-weight:600;color:var(--accent)}
.quote-range-sub{font-size:12px;color:var(--muted);margin-top:4px}

.quote-metrics{display:flex;gap:24px;flex-wrap:wrap;margin:8px 0 16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.metric{display:flex;flex-direction:column;gap:4px}
.metric-label{font-size:11px;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted)}
.metric-value{font-weight:600}

.line-items th,.line-items td{font-size:13px}
.line-items .subtotal-row{background:#fafaf8}

.analysis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin:8px 0}
.analysis-grid > div{font-size:13px}

.why{margin-top:16px;padding:8px 12px;background:#fafaf8;border-radius:6px;font-size:13px}
.why summary{cursor:pointer;color:var(--muted)}
.why ul{margin:8px 0 0;padding-left:18px}

button.secondary{background:#fff;color:var(--accent);border:1px solid var(--accent);margin-top:16px}
button.secondary:hover{background:var(--accent);color:#fff}
/* Anchors styled as secondary buttons (Share Kit yard sign, Book filters) */
a.secondary{display:inline-block;background:#fff;color:var(--accent);border:1px solid var(--accent);text-decoration:none;line-height:1.2}
a.secondary:hover{background:var(--accent);color:#fff}
form.inline{display:inline}

/* enhancement suggestions gallery (contractor detail view) */
.enhancement-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin:12px 0 24px}
.enhancement-card{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff}
.enhancement-card img{width:100%;height:140px;object-fit:cover;display:block}
.enhancement-placeholder{width:100%;height:140px;background:#f0f4f1;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--muted)}
.enhancement-meta{padding:10px 12px;font-size:13px}
.enhancement-meta strong{display:block;margin-bottom:4px}
.enhancement-meta p{color:var(--muted);margin:0 0 6px;font-size:12px}
.enhancement-meta span{font-weight:600;color:var(--accent)}

/* grand total row below grouped line-item tables */
.grand-total-row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--accent);color:#fff;border-radius:6px;margin:8px 0 24px;font-size:16px;font-weight:600}

/* quote actions row */
.quote-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
button.primary{background:var(--accent);color:#fff;font-weight:600}
button.primary:hover{background:var(--accent-hover)}

/* condition badges (excellent / good / fair / poor / none) */
.cond-badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600;margin-left:6px;text-transform:uppercase;letter-spacing:0.5px}
.cond-excellent{background:#d1f0d8;color:#1b5e20}
.cond-good{background:#dcebd6;color:#33691e}
.cond-fair{background:#fff3cd;color:#7c4d00}
.cond-poor{background:#fde0dc;color:#b00020}
.cond-none{background:#eee;color:#666}

/* ============================================================
   D2 — Propterra design-system component layer
   Elevates the existing classes onto the brand tokens (--pt-*).
   Declared last so it refines the base rules above. No markup changes.
   ============================================================ */

/* Top bar — light, slightly elevated, sticky-feeling */
.topbar{padding:16px 28px;background:rgba(255,255,255,0.92);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid rgba(15,45,34,0.08)}
.nav a{font-weight:600}
.nav a:hover{color:var(--pt-deep-forest,#0F2D22)}

/* Display headings — Inter weight + tight tracking */
h1{font-weight:800;letter-spacing:-0.02em;color:var(--pt-deep-forest,#0F2D22)}
h2{font-weight:700;letter-spacing:-0.01em}

/* Cards — rounded, soft shadow */
.card,.quote-card,.enhancement-card{border:1px solid rgba(15,45,34,0.08);border-radius:var(--pt-radius-lg,20px);box-shadow:var(--pt-shadow-card,0 10px 30px rgba(15,45,34,0.08))}
.card{padding:32px}
.quote-card{padding:28px}
.quote-card.pending{background:linear-gradient(180deg,#fff,var(--pt-warm-sand,#F6F1E8))}
.enhancement-placeholder{background:var(--pt-soft-green,#EAF5EF)}

/* Buttons — pill, soft green shadow, subtle lift */
button,button.primary{border-radius:var(--pt-radius-pill,999px);background:var(--pt-green,#1F7A4D);box-shadow:var(--pt-shadow-button,0 10px 24px rgba(31,122,77,0.22));font-weight:700;padding:11px 22px;transition:transform 150ms ease,box-shadow 150ms ease,background 150ms ease}
button:hover,button.primary:hover{background:var(--pt-deep-forest,#0F2D22);transform:translateY(-1px)}
button.secondary,a.secondary{background:#fff;color:var(--pt-deep-forest,#0F2D22);border:1px solid rgba(15,45,34,0.16);box-shadow:none;border-radius:var(--pt-radius-pill,999px)}
button.secondary:hover,a.secondary:hover{background:var(--pt-soft-green,#EAF5EF);color:var(--pt-deep-forest,#0F2D22);transform:translateY(-1px)}

/* Tables — rounded container, mist header */
table.data{border:1px solid rgba(15,45,34,0.08);border-radius:var(--pt-radius-md,14px);box-shadow:var(--pt-shadow-card,0 10px 30px rgba(15,45,34,0.08))}
table.data th{background:var(--pt-mist,#F7F8F6);color:var(--pt-slate,#59645E);text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.line-items .subtotal-row{background:var(--pt-soft-green,#EAF5EF)}

/* Inputs — soft radius + green focus ring */
form label input,form label textarea,form label select{border:1px solid var(--pt-stone,#E7E4DC);border-radius:var(--pt-radius-sm,10px);transition:border-color 150ms ease,box-shadow 150ms ease}
form label input:focus,form label textarea:focus,form label select:focus{outline:none;border-color:var(--pt-green,#1F7A4D);box-shadow:0 0 0 3px rgba(31,122,77,0.15)}

/* Empty state — gentle gradient */
.empty{border-radius:var(--pt-radius-lg,20px);background:linear-gradient(180deg,#fff,var(--pt-mint,#F3FBF6));border:1px dashed rgba(31,122,77,0.25)}

/* Roll-up + emphasis */
.grand-total-row{border-radius:var(--pt-radius-md,14px);box-shadow:var(--pt-shadow-button,0 10px 24px rgba(31,122,77,0.22))}
.quote-range-amount{color:var(--pt-green,#1F7A4D);font-weight:800;letter-spacing:-0.02em}

/* Sweep remaining hardcoded old-green / neutrals */
.lead-badge.lead-green{background:var(--pt-green,#1F7A4D)}
.margin{color:var(--pt-green,#1F7A4D)}
code{background:var(--pt-stone,#E7E4DC)}

/* Kicker label utility (eyebrow text above headings) */
.kicker{color:var(--pt-green,#1F7A4D);text-transform:uppercase;letter-spacing:.11em;font-size:.76rem;font-weight:800}

/* ============================================================
   D3 — Business-owner UI pass (operational / structured feel)
   ============================================================ */

/* Complete the status pill (theme.css left padding to Tailwind) */
.pt-status-pill{display:inline-block;padding:4px 12px;line-height:1.4}

/* Section labels become green "kicker" eyebrows — Palantir-style structure */
.detail-left h3,.detail-right h3,.quote-card h3,.metric-label{
  color:var(--pt-green,#1F7A4D);text-transform:uppercase;letter-spacing:.1em;font-weight:800
}

/* Quote panel is the hero of the request — soft gradient + larger radius */
.quote-card{background:linear-gradient(180deg,#fff,var(--pt-mint,#F3FBF6));border-radius:var(--pt-radius-xl,28px)}
.quote-card.pending{background:linear-gradient(180deg,#fff,var(--pt-warm-sand,#F6F1E8))}
.quote-card-head h2{color:var(--pt-deep-forest,#0F2D22)}

/* Metrics row reads like an operational scorecard */
.quote-metrics{gap:32px}
.metric-value{font-weight:800;color:var(--pt-deep-forest,#0F2D22)}