/* StratMap UI v3 (26/10/2026). One look for the tracker, the reports and the research pages.
   James, 25/10/2026: "the controls, whenever you go on the suburb reports, the LGA reports, all the valuation reports, or the navigation, are back in
   the old-school screen ... bring it all up to scratch and all in line."

   How it works. The research and report pages were built in two families with two palettes and no dark mode on half of them (the compare page ignored
   dark entirely, so it was a white page inside a dark product). The chrome script (apply_stratmap_chrome.py) loads this file and puts a class on <html>:
     sm-ui     every page that carries the chrome
     sm-fam1   pages whose body is painted with --bg2 (the Emerald family: compare, areas, area pages, report, my reports)
     sm-fam2   pages whose body is painted with --bg  (report-lga, the previews, find-areas, the screens)
   The family only decides which of the page's old tokens is the page and which is the card; every colour then comes from the --ui-* tokens below, the same
   ones the redesigned appraisal report uses, in light and in dark. Pages keep their own layout; they just stop disagreeing about colour. */
html.sm-ui{
  --ui-page:#f1f3ef;--ui-card:#ffffff;--ui-sunk:#e8ebe6;--ui-ink:#14201b;--ui-ink2:#56645d;--ui-ink3:#8a968f;
  --ui-line:rgba(20,32,27,.09);--ui-line2:rgba(20,32,27,.16);--ui-accent:#1D9E75;--ui-accent-ink:#085041;--ui-accent-bg:#E1F5EE;
  --ui-blue:#2f7ad4;--ui-blue-ink:#0C447C;--ui-blue-bg:#E6F1FB;--ui-amber:#BA7517;--ui-amber-ink:#633806;--ui-amber-bg:#FAEEDA;--ui-red:#E24B4A;--ui-red-bg:#fbe3e3;--ui-red-ink:#7a1f1f;
  --ui-shadow:0 1px 2px rgba(10,30,22,.05),0 10px 30px rgba(10,30,22,.07);--ui-r:14px;--ui-r2:10px;color-scheme:light;
}
@media(prefers-color-scheme:dark){html.sm-ui{
  --ui-page:#0d1411;--ui-card:#16201b;--ui-sunk:#1d2a24;--ui-ink:#eef3f0;--ui-ink2:#a6b5ad;--ui-ink3:#6f7f77;
  --ui-line:rgba(255,255,255,.09);--ui-line2:rgba(255,255,255,.18);--ui-accent:#2bb98a;--ui-accent-ink:#7fd7b6;--ui-accent-bg:#0d2b21;
  --ui-blue:#6aa9f0;--ui-blue-ink:#8ec4f5;--ui-blue-bg:#0e2237;--ui-amber:#e3b268;--ui-amber-ink:#e3b268;--ui-amber-bg:#2e2210;--ui-red:#f07070;--ui-red-bg:#3a1717;--ui-red-ink:#f4a3a3;
  --ui-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.28);color-scheme:dark;
}}

/* The page's old tokens, pointed at the one palette. */
html.sm-ui{
  --text:var(--ui-ink);--text2:var(--ui-ink2);--text3:var(--ui-ink3);--border:var(--ui-line);--border2:var(--ui-line2);
  --green:var(--ui-accent);--green-bg:var(--ui-accent-bg);--green-text:var(--ui-accent-ink);
  --blue:var(--ui-blue);--blue-bg:var(--ui-blue-bg);--blue-text:var(--ui-blue-ink);
  --amber:var(--ui-amber);--amber-bg:var(--ui-amber-bg);--amber-text:var(--ui-amber-ink);
  --red:var(--ui-red);--red-bg:var(--ui-red-bg);--red-text:var(--ui-red-ink);
  --rl:var(--ui-r);--r:var(--ui-r2);
}
html.sm-fam1{--bg:var(--ui-card);--bg2:var(--ui-page);--bg3:var(--ui-sunk)}
html.sm-fam2{--bg:var(--ui-page);--bg2:var(--ui-card);--bg3:var(--ui-sunk)}

/* Typography and the small things every page shares. */
html.sm-ui body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.sm-ui h1,html.sm-ui h2{letter-spacing:-.022em}
html.sm-ui ::selection{background:var(--ui-accent-bg);color:var(--ui-accent-ink)}
html.sm-ui :focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px;border-radius:6px}
html.sm-ui input[type=search],html.sm-ui input[type=text],html.sm-ui input[type=number],html.sm-ui input[type=email],html.sm-ui select,html.sm-ui textarea{
  background:var(--ui-card);color:var(--ui-ink);border-color:var(--ui-line2);border-radius:var(--ui-r2)}
html.sm-ui input::placeholder{color:var(--ui-ink3)}
html.sm-ui table{border-color:var(--ui-line)}
html.sm-ui img{max-width:100%}

/* Scrollbars that belong to the product. */
html.sm-ui *{scrollbar-width:thin;scrollbar-color:var(--ui-line2) transparent}

/* Pages that are built for a wide screen say so on a phone (the compare pages), and point at what still reads well. */
.sm-deskonly{display:none}
body.sm-phone-deskonly>*:not(.sm-topnav):not(.sm-deskonly):not(script):not(style):not(link):not(#area-fav-toast){display:none!important}
body.sm-phone-deskonly .sm-deskonly{display:block;max-width:520px;margin:28px auto;padding:0 16px;text-align:center}
.sm-deskonly .ic{width:56px;height:56px;border-radius:16px;background:var(--ui-sunk,#e8ebe6);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--ui-ink2,#56645d)}
.sm-deskonly h1{font-size:20px;line-height:1.25;margin:0 0 8px;color:var(--ui-ink,#14201b)}
.sm-deskonly p{font-size:13.5px;line-height:1.6;margin:0 0 16px;color:var(--ui-ink2,#56645d)}
.sm-deskonly .a{display:flex;flex-direction:column;gap:8px}
.sm-deskonly .a a,.sm-deskonly .a button{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid var(--ui-line2,rgba(20,32,27,.16));background:var(--ui-card,#fff);color:var(--ui-ink,#14201b)}
.sm-deskonly .a a.pri{background:var(--ui-accent,#1D9E75);border-color:transparent;color:#fff}