/* ============================================================
   JAG design system — the look from the Stitch redesign (Nov 2026), applied INSIDE THE APP only
   (jag-track.js adds html:root and loads this file when a page runs in the JAG Homes app).
   The public website keeps its current look until this is approved there too.

   Tokens: red #C8102E (pressed #A50D25, tint #FCE7EB), ink #17161C, body #52505B, lines #E5E7EB,
   canvas #F8F9FA, cards white + hairline + soft shadow, emerald #047857 on #ECFDF5 for money/trust.
   Shapes: buttons 14px, cards 16px, inputs 8px, chips and badges pill. Font: Plus Jakarta Sans.
   Every page names its colours a little differently (--buy, --red, --accent…): all are mapped here.
   ============================================================ */

html:root{
  --ds-red:#C8102E; --ds-red-d:#A50D25; --ds-red-t:#FCE7EB; --ds-red-t2:#FDF2F4;
  --ds-ink:#17161C; --ds-body:#52505B; --ds-line:#E5E7EB; --ds-line2:#F0F1F3; --ds-canvas:#F8F9FA;
  --ds-ok:#047857; --ds-ok-t:#ECFDF5; --ds-ok-solid:#10B981;
  --ds-sh1:0 2px 8px rgba(23,22,28,.04); --ds-sh2:0 4px 16px rgba(23,22,28,.08); --ds-sh3:0 -8px 24px rgba(23,22,28,.12);
  /* the pages' own names → the system */
  --ink:#17161C; --muted:#52505B; --line:#E5E7EB;  /* --card / --soft stay the page's own: some pages use them for grey text */
  --buy:#C8102E; --buy-d:#A50D25; --red:#C8102E; --red-d:#A50D25; --red-t:#FCE7EB;
  --accent:#C8102E; --accent-d:#A50D25; --accent-t:#FCE7EB;
  --ok:#047857; --ok-t:#ECFDF5; --ok-bg:#ECFDF5; --green:#047857; --green-t:#ECFDF5;
}
html:root body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}  /* text colour stays the page's own: Reels is white on dark */

/* ---------- top bar: one white bar with a soft shadow (level 2) ---------- */
html:root body>header,html:root header.bar{background:#fff!important;border-bottom:0!important;box-shadow:var(--ds-sh2);position:relative;z-index:50}

/* ---------- buttons ---------- */
/* primary: red, 14px corners, 48px tall */
html:root .bigbtn,html:root .next,html:root button.cta:not(.ghost),html:root a.cta:not(.ghost),html:root button.go,html:root a.go:not(.reel-go),html:root .ja-btn,html:root .jq-go,
html:root .evalbtn,html:root .jp-b.go,html:root .account .btn:not(.ghost),html:root .btn:not(.ghost):not(.sec):not(.out){
  border-radius:14px!important;min-height:48px;font-weight:700;letter-spacing:0;box-shadow:none}
html:root .bigbtn,html:root .ja-btn,html:root .jq-go,html:root .evalbtn,html:root .jp-b.go{background:var(--ds-red)!important;color:#fff!important}
html:root .bigbtn:active,html:root .ja-btn:active,html:root .jq-go:active,html:root .next:active,html:root button.cta:active,html:root button.go:active{background:var(--ds-red-d)!important}
/* secondary: white with a red outline */
html:root .outbtn,html:root .ghost,html:root .jp-b:not(.go){border-radius:14px!important;min-height:48px;font-weight:700}
html:root .outbtn,html:root .jp-b:not(.go){background:#fff!important}
html:root .ghost{border:1px solid var(--ds-line)!important}
html:root .outbtn{border:1.5px solid var(--ds-red)!important;color:var(--ds-red)!important}
html:root .outbtn:active{background:var(--ds-red-t2)!important}

/* ---------- chips (filters, quick picks): white pills; on = red tint ---------- */
html:root .chip2{height:36px;border:1px solid var(--ds-line)!important;background:#fff!important;color:var(--ds-body)!important;font-weight:600!important;box-shadow:var(--ds-sh1)}
html:root .chip2.on,html:root .chip2[aria-pressed="true"],html:root .chip2:not(.qk)[data-k]{background:var(--ds-red-t)!important;border-color:var(--ds-red)!important;color:var(--ds-red)!important}
html:root .chip2 svg{stroke:currentColor}
html:root .jq-ch button{border-width:1px;border-color:var(--ds-line);font-weight:600}
html:root .jq-ch button[aria-pressed="true"]{background:var(--ds-red-t);border-color:var(--ds-red);color:var(--ds-red)}
html:root .jq-ch button.big{border-radius:16px}

/* ---------- search box ---------- */
html:root .q{background:var(--ds-canvas)!important;border:1px solid var(--ds-line)!important;border-radius:14px!important;height:48px}

/* ---------- listing cards (search, saved): white, hairline, soft shadow, 16px ---------- */
html:root .c{border-radius:16px!important;border:1px solid var(--ds-line)!important;box-shadow:var(--ds-sh1)!important;background:#fff}
html:root .c .pr{color:var(--ds-ink)}
/* the monthly estimate as the emerald money badge */
html:root .c .pm{display:inline-block!important;background:var(--ds-ok-t);color:var(--ds-ok)!important;border-radius:99px;padding:3px 9px!important;font-size:12.5px!important;font-weight:700!important;vertical-align:middle}
/* Reels: the same money badge, solid emerald so it reads on top of the photo */
html:root .reel .info .pm{background:var(--ds-ok)!important;color:#fff!important;border-radius:99px!important;padding:3px 10px!important}
html:root .c .sp,html:root .c .ad{color:var(--ds-body)}
html:root .tag{border-radius:99px!important}

/* ---------- property page ---------- */
html:root .stg-card{border-radius:24px 24px 0 0;box-shadow:var(--ds-sh3)}
html:root .stg-est span,html:root .stg-est b{color:var(--ds-ok)}
html:root .stg-est{display:inline-flex;align-self:flex-start;gap:4px;background:var(--ds-ok-t);color:var(--ds-ok);border-radius:99px;padding:5px 11px;font-weight:600}
html:root .chips div{background:#fff!important;border:1px solid var(--ds-line)!important;border-radius:12px!important;box-shadow:var(--ds-sh1)}
html:root .box,html:root .payr,html:root .evalbox{border-radius:16px!important;border:1px solid var(--ds-line)!important;box-shadow:var(--ds-sh1)!important}
html:root .mbar{box-shadow:var(--ds-sh2);border-top:0!important}

/* ---------- form fields: canvas fill, hairline, 8px; red outline on focus ---------- */
html:root input[type="text"],html:root input[type="email"],html:root input[type="tel"],html:root input[type="number"],
html:root input[type="search"],html:root input[type="password"],html:root input:not([type]),html:root select,html:root textarea{
  background-color:var(--ds-canvas);border-color:var(--ds-line)}
html:root input:focus,html:root select:focus,html:root textarea:focus{outline:none;border-color:var(--ds-red)!important;box-shadow:0 0 0 .5px var(--ds-red)}
html:root .q input{background:transparent!important;box-shadow:none!important}

/* ---------- reassurance / money notes in emerald ---------- */
html:root .badge-ok,html:root .nocheck,html:root .nc{background:var(--ds-ok-t)!important;color:var(--ds-ok)!important}