/* Property Valuation theme layer — sits on top of the original app CSS.
   Colours: harbour navy, signal yellow, and an eight-colour chart palette. */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0000-00A2,U+00A4-FFFF}
@font-face{font-family:"Public Sans";src:url("fonts/public-sans.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("fonts/public-sans-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

html:root{
  --ps-navy:#0E1F3B;
  --ps-navy-2:#16294A;
  --ps-navy-3:#22365C;
  --ps-yellow:#FFC233;
  --ps-blue:#2563EB;
  --ps-green:#0F9F6E;
  --ps-rose:#E23D5B;
  --ps-violet:#7B61FF;
  --ps-amber:#E8930C;
  --ps-cyan:#0EA5C6;
  --ps-display:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;
  --font-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
html:root[data-color-scheme=light],html:root:not([data-color-scheme]){
  --background:#FFFFFF;
  --dashboard-background:#F3F5F9;
  --surface:#F7F8FB;
  --surface-raised:#FFFFFF;
  --muted:#EEF1F6;
  --control:#FFFFFF;
  --control-hover:#EEF1F6;
  --text:#14213A;
  --secondary:#56627A;
  --border:#DDE2EC;
  --border-strong:#C5CDDB;
  --accent:#2563EB;
  --positive:#0B8A5F;
  --negative:#D12F4E;
  --card-surface:#FFFFFF;
  --data-card-background:#FFFFFF;
  --card-shadow:0 1px 2px rgba(14,31,59,.06),0 6px 18px -10px rgba(14,31,59,.18);
  --chart-1:#2563EB;--chart-2:#E8930C;--chart-3:#0F9F6E;--chart-4:#7B61FF;
  --chart-5:#E23D5B;--chart-6:#0EA5C6;--chart-7:#C2418F;--chart-8:#6B7A90;
  --chart-neutral-fill:#CBD3E1;
  --ps-page:#F3F5F9;
}
html:root[data-color-scheme=dark]{
  --background:#13223D;
  --dashboard-background:#0B1528;
  --surface:#172947;
  --surface-raised:#1B2E50;
  --muted:#1D3053;
  --control:#172947;
  --control-hover:#22365C;
  --text:#EAF0FA;
  --secondary:#A6B3CA;
  --border:#2A3F66;
  --border-strong:#3A5180;
  --accent:#7DA6FF;
  --positive:#3FD19B;
  --negative:#FF7D93;
  --card-surface:#13223D;
  --data-card-background:#13223D;
  --card-shadow:0 1px 2px rgba(0,0,0,.3);
  --chart-1:#6E9BFF;--chart-2:#FFB547;--chart-3:#3FD19B;--chart-4:#A895FF;
  --chart-5:#FF7D93;--chart-6:#4FD0EA;--chart-7:#E77CC0;--chart-8:#97A6BF;
  --chart-neutral-fill:#3A5180;
  --ps-page:#0B1528;
}
/* Before the app starts there is no data-color-scheme yet: follow the system setting */
@media (prefers-color-scheme:dark){html:root:not([data-color-scheme]){
  --background:#13223D;
  --dashboard-background:#0B1528;
  --surface:#172947;
  --surface-raised:#1B2E50;
  --muted:#1D3053;
  --control:#172947;
  --control-hover:#22365C;
  --text:#EAF0FA;
  --secondary:#A6B3CA;
  --border:#2A3F66;
  --border-strong:#3A5180;
  --accent:#7DA6FF;
  --positive:#3FD19B;
  --negative:#FF7D93;
  --card-surface:#13223D;
  --data-card-background:#13223D;
  --card-shadow:0 1px 2px rgba(0,0,0,.3);
  --chart-1:#6E9BFF;--chart-2:#FFB547;--chart-3:#3FD19B;--chart-4:#A895FF;
  --chart-5:#FF7D93;--chart-6:#4FD0EA;--chart-7:#E77CC0;--chart-8:#97A6BF;
  --chart-neutral-fill:#3A5180;
  --ps-page:#0B1528;
}}


html,body{background:var(--ps-page)}
body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
.dashboard-root,.page{background:var(--ps-page)}

/* ---------- Top bar: navy, logo, tabs ---------- */
.dashboard-topbar{background:var(--ps-navy)!important;color:#fff;border-bottom:0!important;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.dashboard-topbar::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--ps-blue) 0 25%,var(--ps-yellow) 25% 50%,var(--ps-green) 50% 75%,var(--ps-rose) 75% 100%)}
.dashboard-topbar-actions,.theme-drawer,.dashboard-refresh-trigger-chevron{display:none!important}
.dashboard-topbar-title{font-size:0!important;display:inline-flex;align-items:center;gap:10px;color:#fff;white-space:nowrap;transition:opacity .25s ease}
.dashboard-topbar-title::before{content:"";width:30px;height:30px;flex:none;background:url("brand/mark.svg") center/contain no-repeat}
.dashboard-topbar-title::after{content:"Property Valuation";font:700 19px/1 var(--ps-display);letter-spacing:-.4px;color:#fff}
.dashboard-refresh-trigger,.dashboard-topbar-copy .freshness{display:none!important}
/* Wide screens: logo and tabs share one bar */
@media (min-width:1300px){
  .dashboard-topbar{display:flex!important;align-items:stretch;gap:32px;padding:0 32px!important}
  .dashboard-topbar-inner{flex:none;padding:0!important;margin:0!important;height:64px!important;min-height:0!important;width:auto!important}
  .dashboard-tabs-collapse{flex:1 1 auto;min-width:0;display:flex!important;align-items:flex-end;height:64px!important}
  .dashboard-tabs-collapse-inner,.dashboard-tabs-row{width:100%;min-width:0}
  .dashboard-tabs-inner{padding:0!important;margin:0!important;max-width:none!important}
  .dashboard-tabs{justify-content:flex-end}
}
.dashboard-refresh-trigger{pointer-events:none;color:rgba(255,255,255,.62)!important;background:transparent!important}
.dashboard-refresh-trigger .dashboard-icon{color:var(--ps-yellow)}
.dashboard-tab{color:rgba(255,255,255,.66)!important;font-weight:500}
.dashboard-tab:hover{color:#fff!important}
.dashboard-tab[aria-selected=true]{color:#fff!important;font-weight:600}
.tab-active-indicator{background:var(--ps-yellow)!important;height:3px!important;border-radius:3px 3px 0 0}
.dashboard-tabs-row,.dashboard-tabs-collapse{background:transparent!important;border:0!important}
.dashboard-tab:focus-visible{outline:2px solid var(--ps-yellow);outline-offset:2px;border-radius:6px}

/* ---------- Type ---------- */
.data-section-title{font-family:var(--ps-display)!important;font-weight:700!important;letter-spacing:-.6px!important;font-size:clamp(24px,2.4vw,30px)!important;color:var(--text)}
.component-title{font-family:var(--ps-display)!important;font-weight:650!important;letter-spacing:-.2px!important;font-size:17px!important}
.keyday h3{font-family:var(--ps-display);letter-spacing:-.2px}
.keyday .kd-metric-value,.keyday .kd-big,.keyday .kd-calc-result,.keyday .kd-index-facts dd{font-family:var(--ps-display);font-variant-numeric:tabular-nums}
.keyday .kd-metric-value{font-weight:700;letter-spacing:-1.2px;font-size:36px}
.keyday .kd-big{font-weight:800;letter-spacing:-2.5px}
.keyday .kd-note,.keyday .kd-figure-note{max-width:78ch}

/* ---------- Cards ---------- */
.dashboard-component{border-radius:18px}
.keyday .kd-metrics .sortable-item{--ps-c:var(--chart-1)}
.keyday .kd-metrics .sortable-item:nth-child(2){--ps-c:var(--chart-3)}
.keyday .kd-metrics .sortable-item:nth-child(3){--ps-c:var(--chart-4)}
.keyday .kd-metrics .sortable-item:nth-child(4){--ps-c:var(--chart-2)}
.keyday .kd-metrics .dashboard-component{position:relative}
.keyday .kd-metrics .dashboard-component::before{content:"";position:absolute;z-index:2;left:22px;top:0;width:44px;height:5px;border-radius:0 0 5px 5px;background:var(--ps-c)}
.keyday .kd-metrics .kd-metric-value{color:var(--text)}
.keyday .kd-positive{color:var(--positive)}
.keyday .kd-negative{color:var(--negative)}

/* Context band: navy panel */
.keyday .kd-band{background:var(--ps-navy);border:0;border-radius:18px;color:#fff;position:relative;overflow:hidden}
.keyday .kd-band::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(var(--ps-yellow),var(--ps-blue))}
.keyday .kd-band h3{color:#fff}
.keyday .kd-band h3,.keyday .kd-band strong{font-family:var(--ps-display)}
.keyday .kd-band p{color:rgba(234,240,250,.78)}
.keyday .kd-band > div:not(:first-child) h3{color:var(--ps-yellow);font-size:22px;letter-spacing:-.4px}

.keyday .kd-big{color:var(--chart-1)}
.keyday .kd-formula{background:color-mix(in srgb,var(--chart-1) 8%,var(--background));border-left:4px solid var(--chart-1)}
.keyday .kd-scope-tag{background:color-mix(in srgb,var(--ps-yellow) 30%,var(--background));border-color:transparent;color:var(--text)}
.keyday .kd-simulation{background:var(--background)}
.keyday .kd-live{background:var(--ps-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--ps-green) 25%,transparent)}
.keyday .kd-waiting,.keyday .kd-method-box{border-radius:14px}

/* Buttons and links */
.keyday .kd-button{background:var(--ps-blue)!important;color:#fff!important;border-radius:999px!important;font-weight:600;border:0}
.keyday .kd-button:hover{background:#1D4FCC!important}
.keyday .kd-button:focus-visible,.keyday a:focus-visible{outline:2px solid var(--ps-yellow);outline-offset:2px}
.keyday a,.keyday .kd-link{color:var(--accent)}

/* Footer */
.keyday .kd-footer{background:var(--ps-navy);color:rgba(234,240,250,.75);border:0!important;border-radius:20px;padding:28px 30px!important;margin-top:48px}
.keyday .kd-footer .kd-brand-word{display:inline-flex;align-items:center;gap:9px;color:#fff;font:700 19px/1.2 var(--ps-display);letter-spacing:-.3px;margin-bottom:6px}
.keyday .kd-footer .kd-brand-word::before{content:"";width:26px;height:26px;background:url("brand/mark.svg") center/contain no-repeat}

/* ---------- Masthead (Market tab, placed under the top bar by hero.js) ---------- */
.ps-hero{display:none;background:var(--ps-navy);color:#fff;position:relative;overflow:hidden}
.ps-show-hero .ps-hero{display:block}
.ps-hero__inner{max-width:var(--dashboard-content-max-width,1504px);margin:0 auto;padding:44px 32px 38px}
.ps-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.ps-hero h1{margin:0;font:800 clamp(34px,4.4vw,58px)/1.02 var(--ps-display);letter-spacing:-.035em;max-width:15ch;text-wrap:balance}
.ps-hero__lede{margin:18px 0 0;max-width:52ch;font-size:16px;line-height:1.6;color:rgba(234,240,250,.8)}
.ps-hero__data{min-width:0;display:flex;flex-direction:column;gap:20px}
.ps-spark{position:relative;height:150px}
.ps-spark__plot{position:relative;height:100%}
.ps-spark svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ps-spark__label{position:absolute;bottom:0;font-size:12px;line-height:1.3;color:rgba(234,240,250,.62);font-variant-numeric:tabular-nums}
.ps-spark__label--start{left:0}
.ps-spark__label--end{right:0;text-align:right;color:#fff}
.ps-spark__label--end strong{color:var(--ps-yellow);font-weight:600}
.ps-readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.16)}
.ps-readout div{padding:16px 16px 0 0}
.ps-readout div + div{padding-left:16px;border-left:1px solid rgba(255,255,255,.16)}
.ps-readout b{display:block;font:800 clamp(24px,2.5vw,34px)/1.05 var(--ps-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ps-readout div:nth-child(1) b{color:#fff}
.ps-readout div:nth-child(2) b{color:#5FE0AE}
.ps-readout div:nth-child(3) b{color:var(--ps-yellow)}
.ps-readout small{display:block;margin-top:7px;font-size:12.5px;line-height:1.45;color:rgba(234,240,250,.7)}
.ps-beacon{transform-box:fill-box;transform-origin:center;animation:ps-pulse 2.4s ease-out 3}
@keyframes ps-pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
@media (prefers-reduced-motion:reduce){.ps-beacon{animation:none;opacity:0}}
@media (max-width:980px){
  .ps-hero__inner{padding:28px 16px 26px}
  .ps-hero__grid{grid-template-columns:1fr;gap:24px}
  .ps-spark{height:120px}
  .ps-readout b{font-size:24px}
  .ps-readout div{padding-right:10px}.ps-readout div + div{padding-left:10px}
  .dashboard-topbar-title::after{font-size:17px}
}
@media (max-width:420px){
  .ps-readout{grid-template-columns:1fr 1fr}
  .ps-readout div:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.16);margin-top:14px}
}
@media (max-width:600px){
  .keyday .kd-metrics .kd-metric-value{font-size:25px;letter-spacing:-.6px}
  .keyday .kd-metrics .component-title{font-size:15px!important}
  .keyday .kd-big{font-size:48px}
}

/* ---------- Pre-rendered page content (shown until the app starts) ---------- */
a.dashboard-tab{text-decoration:none;display:inline-flex;align-items:center}
.dashboard-component:not(:has(> svg.smooth-card-surface)){background:var(--data-card-background);border:1px solid var(--border);border-radius:20px}
.ps-prerender .dashboard-topbar{position:sticky;top:0;z-index:30}

/* ---------- Section links (plain links on every page) ---------- */
.ps-sitenav{background:var(--ps-page);padding:0 32px 40px}
.ps-sitenav__inner{max-width:var(--dashboard-content-max-width,1504px);margin:0 auto;border-top:1px solid var(--border);padding-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px}
.ps-sitenav__label{font:700 15px/1.3 var(--ps-display);color:var(--text);margin-right:6px}
.ps-sitenav a{color:var(--secondary);text-decoration:none;font-size:14px}
.ps-sitenav a:hover{color:var(--accent);text-decoration:underline}
.ps-sitenav a[aria-current=page]{color:var(--text);font-weight:600}
.ps-sitenav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
@media (max-width:600px){.ps-sitenav{padding:0 16px 32px}}