/* ================= INDUSTRY — blueprint wireframe, steel-blue on technical ground =================
   Shared base: everything BOTH shells need. index.html (the full app, session-only) and
   login.html (the unauthenticated login page) each <link> this file, so the design tokens, the
   blueprint frame, the buttons and the form controls have exactly ONE definition. Split out of
   index.html's inline <style> when the login screen became its own page -- duplicating the
   :root ramp into a second file is precisely how a re-skin ends up applied to the app but not
   to the login screen a dealer sees first.

   This file is PUBLIC (an unauthenticated visitor must be able to paint the login page), so it
   holds no app structure and no logic -- only tokens and primitives. Anything that describes
   the appraisal UI (layout, results, report tables, print rules) stays inline in index.html,
   which is served only to a live session.

   The dealer theme token sits at the very end on purpose (and is spelled out only there, never
   in this comment -- _brand substitutes every occurrence, prose included): same-specificity
   custom properties are decided by source order, so a dealer's accent override has to come
   AFTER the base :root blocks to win without !important. index.html's own inline style loads
   after this file and deliberately never redefines --color-accent*; its print block does, with
   !important, which wins regardless of order. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');

:root{
  color-scheme:light;
  --color-bg:#f2f2f3; --color-surface:#e9e9ea; --color-text:#1d1f20;
  --color-accent:#5980a6; --color-accent-2:var(--color-accent);
  --color-divider:rgba(29,31,32,.17);
  --color-accent-100:#eef6ff; --color-accent-200:#d6ebff; --color-accent-300:#b5d9fd;
  --color-accent-600:#597ea3; --color-accent-700:#416180; --color-accent-800:#2c455d; --color-accent-900:#1d2d3d;
  --color-accent-2-100:var(--color-accent-100); --color-accent-2-800:var(--color-accent-800);
  --color-neutral-100:#f5f5f8; --color-neutral-800:#424244;
  --tsr-panel:#fbfbfc; --tsr-r:0px;
  --tsr-good:#3f7d54; --tsr-warn:#9a6b22; --tsr-bad:#a8443a;

  --font-heading:"Barlow Condensed",system-ui,sans-serif; --font-heading-weight:600;
  --font-body:"Barlow",system-ui,sans-serif;
  --tsr-disp:var(--font-heading); --tsr-body:var(--font-body); --tsr-num:var(--font-heading);

  --space-1:3.4px; --space-2:6.8px; --space-3:10.2px; --space-4:13.6px; --space-6:20.4px; --space-8:27.2px;
  --radius-sm:2px; --radius-md:4px; --radius-lg:7px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --color-bg:#12161a; --color-surface:#1a1f25; --color-text:#e4e8eb;
  --color-accent:#8cb2d6;
  --color-divider:rgba(228,232,235,.17);
  --color-accent-100:#25313d; --color-accent-200:#2e3d4c; --color-accent-300:#3d5165;
  --color-accent-600:#a3c3e0; --color-accent-700:#bcd4e9; --color-accent-800:#d3e3f1; --color-accent-900:#e8f1f8;
  --color-neutral-100:#242a31; --color-neutral-800:#c8ccd0;
  --tsr-panel:#191e24;
  --tsr-good:#6fbf8d; --tsr-warn:#d3a457; --tsr-bad:#e08074;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;}
body{min-height:100dvh; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading); font-weight:var(--font-heading-weight); line-height:1.12; letter-spacing:-.015em; margin:0 0 var(--space-2);}
h1{font-size:42px;} h2{font-size:32px;} h3{font-size:25px;} h4{font-size:20px;} h5{font-size:16px;}
h6{font-size:13px; letter-spacing:.08em; text-transform:uppercase;}
p{margin:0 0 var(--space-3);}
a{color:var(--color-accent); text-underline-offset:3px;} a:hover{color:var(--color-accent-700);}
img{display:block; max-width:100%;}
:focus{outline:none;}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px;}
::selection{background:color-mix(in srgb, var(--color-accent) 30%, transparent);}

.hidden{display:none!important;}

/* — blueprint frame — */
.blueprint{position:relative; border:1px solid var(--color-divider); border-radius:0;}
.blueprint > .corner{position:absolute; width:11px; height:11px; color:color-mix(in srgb, var(--color-text) 55%, transparent);}
.blueprint > .corner::before, .blueprint > .corner::after{content:""; position:absolute; background:currentColor;}
.blueprint > .corner::before{left:5px; top:0; width:1px; height:100%;}
.blueprint > .corner::after{top:5px; left:0; width:100%; height:1px;}
.blueprint > .corner.tl{top:-6px; left:-6px;} .blueprint > .corner.tr{top:-6px; right:-6px;}
.blueprint > .corner.bl{bottom:-6px; left:-6px;} .blueprint > .corner.br{bottom:-6px; right:-6px;}

/* — buttons — */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; text-decoration:none;
  font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:14px; line-height:1.2;
  color:var(--color-text); background:transparent; border:1px solid var(--color-divider);
  padding:var(--space-2) calc(var(--space-3) * 1.2); border-radius:0;}
.btn svg{display:block;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn-primary{background:var(--color-accent); color:var(--color-bg); border-color:var(--color-accent);}
.btn-primary:hover{background:var(--color-accent-600);}
.btn-primary:active{background:var(--color-accent-700);}
.btn-secondary:hover{background:color-mix(in srgb, var(--color-text) 7%, transparent);}
.btn-secondary:active{background:color-mix(in srgb, var(--color-text) 14%, transparent);}
.btn-ghost{color:var(--color-accent); border-color:transparent; padding-inline:var(--space-1);}
.btn-ghost:hover{background:color-mix(in srgb, var(--color-accent) 10%, transparent);}
.btn-ghost:active{background:color-mix(in srgb, var(--color-accent) 18%, transparent);}
.btn-icon{width:36px; height:36px; padding:0;}

/* — forms — */
.field > label{display:block; font-size:12px; margin-bottom:5px; color:color-mix(in srgb, var(--color-text) 70%, transparent);}
.input{width:100%; min-height:36px; padding:6px 10px; font:inherit; font-size:14px; color:var(--color-text);
  caret-color:var(--color-accent); background:var(--color-surface); border:1px solid var(--color-divider); border-radius:0;}
.input:hover{border-color:color-mix(in srgb, var(--color-text) 45%, transparent);}
.input:focus-visible{border-color:var(--color-accent); outline-offset:0;}
.input:disabled{opacity:.45;}
/* — email domain-hint ghost overlay — real box/border live on the ghost (bottom layer);
   the actual <input> sits on top, fully transparent, so its border/focus-visible CSS above
   never paints (it would sit on top of and hide the ghost's suggestion text). Hover/focus
   are mirrored onto the ghost via the wrapper instead — see .email-wrap rules below. */
.email-wrap{position:relative;}
.email-wrap > input.input{position:relative; z-index:1; background:transparent; border-color:transparent;}
.email-wrap > .email-ghost{position:absolute; inset:0; z-index:0; pointer-events:none;
  display:flex; align-items:center; overflow:hidden; white-space:pre;}
.email-wrap:hover > .email-ghost{border-color:color-mix(in srgb, var(--color-text) 45%, transparent);}
.email-wrap:focus-within > .email-ghost{border-color:var(--color-accent);}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;}
}
:root{
  --color-accent:#AB9569; --color-accent-2:var(--color-accent);
  --color-accent-100:color-mix(in srgb, var(--color-accent) 14%, white);
  --color-accent-200:color-mix(in srgb, var(--color-accent) 28%, white);
  --color-accent-300:color-mix(in srgb, var(--color-accent) 48%, white);
  --color-accent-600:color-mix(in srgb, var(--color-accent) 82%, black);
  --color-accent-700:color-mix(in srgb, var(--color-accent) 64%, black);
  --color-accent-800:color-mix(in srgb, var(--color-accent) 46%, black);
  --color-accent-900:color-mix(in srgb, var(--color-accent) 28%, black);
}
:root[data-theme="dark"]{
  --color-accent:#d9c396;
  --color-accent-100:color-mix(in srgb, var(--color-accent) 18%, black);
  --color-accent-200:color-mix(in srgb, var(--color-accent) 30%, black);
  --color-accent-300:color-mix(in srgb, var(--color-accent) 45%, black);
  --color-accent-600:color-mix(in srgb, var(--color-accent) 80%, white);
  --color-accent-700:color-mix(in srgb, var(--color-accent) 62%, white);
  --color-accent-800:color-mix(in srgb, var(--color-accent) 44%, white);
  --color-accent-900:color-mix(in srgb, var(--color-accent) 26%, white);
}