@charset "UTF-8";
/*!
 * Gnowise Appraisal Portal — design system
 * ---------------------------------------------------------------------------
 * The same visual language as the Gnowise Property Journey: one ink surface,
 * Inter Variable, cyan data accents, pink scope cues, hairline rules.
 *
 * This file is the LAST stylesheet on the page. It restyles only; it adds no
 * behaviour and changes no markup, ids, names or scripts. Every rule is scoped
 * to [data-gn-theme] so "Legacy" renders exactly as the portal did before.
 *
 * Token values are the Property Journey's own: the base colours are copied from
 * its palette, and the derived tokens (--gn-rule, --gn-panel, ...) use the same
 * mixes, so a value here resolves identically to the same token there.
 */

/* ===========================================================================
   1. Type
   ======================================================================== */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-variable-latin.woff2') format('woff2');
  /* Latin + Latin-1 + Latin Ext-A, enough for both English and French copy. */
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F,
    U+2074, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================================================================
   2. Tokens
   Base colours are the Journey's; the derived ones use its exact mixes.
   ======================================================================== */

[data-gn-theme] {
  /* surfaces */
  --gn-bg: #07131b;
  --gn-glow: #1a2f3a;
  --gn-mid: #102029;
  --gn-panel: #0c1b23;
  --gn-panel-2: #1a3036;
  --gn-bg-rgb: 7, 19, 27;

  /* text */
  --gn-text: #f3f6f7;
  --gn-soft: #ced6da;
  --gn-muted: #a9b6be;
  /* --gn-dim is the Journey's quiet tone raised to >=4.5:1. The Journey uses it
     for decoration over a cinematic scene; here it labels real fields, so it has
     to be readable. Every other token is the Journey's value unchanged. */
  --gn-dim: #89959d;

  /* lines */
  --gn-rule: #3b474f;
  --gn-line: #58646c;
  --gn-track: #1e2a32;

  /* data */
  --gn-accent: #8ee5df;
  --gn-accent-rgb: 142, 229, 223;
  --gn-outline: #d3edf1;
  --gn-pink: #ff7a98;
  --gn-gold: #eccb92;
  --gn-violet: #bdc8ff;

  /* action */
  --gn-button: #e8174a;
  --gn-button-text: #ffffff;

  /* the top bar is the journey's ink in every theme, so a logo made for a dark
     header keeps working and each theme still reads as the same product */
  --gn-bar: #07131b;
  --gn-bar-text: #f3f6f7;
  --gn-bar-muted: #a9b6be;
  --gn-bar-rule: #22333c;
  --gn-bar-hover: #13262f;

  /* status, tuned per theme for contrast on that theme's background */
  --gn-ok: #67dba5;
  --gn-warn: #eccb92;
  --gn-bad: #ff7a98;
  --gn-info: #8ee5df;

  /* shape and motion */
  --gn-r-sm: 4px;
  --gn-r: 8px;
  --gn-r-lg: 12px;
  --gn-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.28);
  --gn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --gn-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gn-t: 0.18s var(--gn-ease);

  --gn-font: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI',
    Roboto, Arial, sans-serif;

  /* chrome heights, kept in sync with the admin settings by the layout */
  /* The Header height setting still drives the bar, but never below 64px: at
     the stored 50px a 28px logo sits with 11px of air above it and the bar
     reads as crowded against the browser chrome. The setting can still make it
     taller for a tall logo. */
  --gn-bar-h: max(64px, var(--portal-header-height, 64px));
}

[data-gn-theme='night'] {
  --gn-glow: #17323c;
  --gn-mid: #0e212a;
  --gn-text: #edf4f3;
  --gn-soft: #c8d3d7;
  --gn-muted: #a3b2bb;
  --gn-dim: #84929b;
  --gn-rule: #39464e;
  --gn-line: #55626b;
  --gn-track: #1d2931;
  --gn-outline: #ceecf0;
  --gn-pink: #f29ab5;
  --gn-gold: #e4c99a;
  --gn-violet: #bacbf5;
  --gn-button: #8ee5df;
  --gn-button-text: #07131b;
  --gn-bad: #f29ab5;
}

[data-gn-theme='blueprint'] {
  --gn-bg: #061529;
  --gn-glow: #14385c;
  --gn-mid: #0c2540;
  --gn-panel: #0b1c32;
  --gn-panel-2: #172e47;
  --gn-bg-rgb: 6, 21, 41;
  --gn-text: #eef4fb;
  --gn-soft: #cbd6e3;
  --gn-muted: #a8b8cb;
  --gn-dim: #8897ab;
  --gn-rule: #3a495d;
  --gn-line: #57667a;
  --gn-track: #1d2c40;
  --gn-accent: #7cc4ff;
  --gn-accent-rgb: 124, 196, 255;
  --gn-outline: #d6ebff;
  --gn-pink: #ff9fbc;
  --gn-gold: #f1cf8e;
  --gn-violet: #c5b8ff;
  --gn-button: #7cc4ff;
  --gn-button-text: #061529;
  --gn-bar: #061529;
  --gn-bar-rule: #1d3450;
  --gn-bar-hover: #11273f;
  --gn-info: #7cc4ff;
  --gn-bad: #ff9fbc;
}

[data-gn-theme='graphite'] {
  --gn-bg: #111214;
  --gn-glow: #2b2b2a;
  --gn-mid: #1d1d1e;
  --gn-panel: #191918;
  --gn-panel-2: #2d2923;
  --gn-bg-rgb: 17, 18, 20;
  --gn-text: #f3efe7;
  --gn-soft: #d3cec5;
  --gn-muted: #b3ada3;
  --gn-dim: #938e86;
  --gn-rule: #454442;
  --gn-line: #62605c;
  --gn-track: #282828;
  --gn-accent: #d8b77c;
  --gn-accent-rgb: 216, 183, 124;
  --gn-outline: #efe2c6;
  --gn-pink: #f2a5a0;
  --gn-gold: #93d3c4;
  --gn-violet: #aab9f0;
  --gn-button: #d8b77c;
  --gn-button-text: #111214;
  --gn-bar: #111214;
  --gn-bar-rule: #2f2e2c;
  --gn-bar-hover: #1e1e1d;
  --gn-ok: #93d3c4;
  --gn-warn: #d8b77c;
  --gn-bad: #f2a5a0;
  --gn-info: #d8b77c;
}

/* Light. The canvas turns to warm paper; the bar stays ink. */
[data-gn-theme='paper'] {
  --gn-bg: #f5f2ec;
  --gn-glow: #ffffff;
  --gn-mid: #faf8f5;
  --gn-panel: #ffffff;
  --gn-panel-2: #efece5;
  --gn-bg-rgb: 245, 242, 236;
  --gn-text: #13202a;
  --gn-soft: #303d46;
  --gn-muted: #4c5a63;
  --gn-dim: #606c73;
  --gn-rule: #dcd8d0;
  --gn-line: #c7c3bb;
  --gn-track: #e4e0d8;
  --gn-accent: #0b6e77;
  --gn-accent-rgb: 11, 110, 119;
  --gn-outline: #1d3944;
  --gn-pink: #c42f5d;
  --gn-gold: #875a0b;
  --gn-violet: #4a57cf;
  --gn-button: #0b6e77;
  --gn-button-text: #ffffff;
  --gn-shadow: 0 1px 2px rgba(19, 32, 42, 0.07), 0 10px 28px rgba(19, 32, 42, 0.08);
  --gn-shadow-sm: 0 1px 2px rgba(19, 32, 42, 0.08);
  --gn-ok: #10725a;
  --gn-warn: #875a0b;
  --gn-bad: #c42f5d;
  --gn-info: #0b6e77;
}

/* ===========================================================================
   3. Page
   ======================================================================== */

[data-gn-theme] body.portal,
body.portal[data-gn-theme] {
  background-color: var(--gn-bg);
  color: var(--gn-text);
  font-family: var(--gn-font);
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  margin-top: calc(var(--gn-bar-h) + 0px);
}

[data-gn-theme] body.portal::before {
  /* the journey's radial glow, so the canvas is not a flat fill */
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 70% at 72% 0%,
    var(--gn-glow) 0,
    var(--gn-mid) 38%,
    var(--gn-bg) 72%
  );
  opacity: 0.85;
}

[data-gn-theme='paper'] body.portal::before { opacity: 1; }

/* short pages (login, 404, feedback) should still put the footer on the floor
   rather than leaving it stranded mid-screen */
[data-gn-theme] body.portal {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
[data-gn-theme] body.portal > header { flex: none; }
[data-gn-theme] body.portal > footer { flex: none; margin-top: auto; }
[data-gn-theme] .portal-body,
[data-gn-theme] .body-content {
  background: transparent;
  padding-left: 28px;
  padding-right: 28px;
  min-height: 0 !important;
  flex: 1 0 auto;
  width: 100%;
}

[data-gn-theme] .portal-page { padding: 26px 0 56px; }

[data-gn-theme] ::selection {
  background: rgba(var(--gn-accent-rgb), 0.3);
  color: var(--gn-text);
}

/* Scrollbars, so a dark page does not get a bright gutter. */
[data-gn-theme] * { scrollbar-color: var(--gn-line) transparent; scrollbar-width: thin; }
[data-gn-theme] ::-webkit-scrollbar { width: 11px; height: 11px; }
[data-gn-theme] ::-webkit-scrollbar-track { background: transparent; }
[data-gn-theme] ::-webkit-scrollbar-thumb {
  background: var(--gn-rule);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
[data-gn-theme] ::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--gn-line); }

/* ===========================================================================
   4. Typography
   ======================================================================== */

[data-gn-theme] h1, [data-gn-theme] h2, [data-gn-theme] h3,
[data-gn-theme] h4, [data-gn-theme] h5, [data-gn-theme] h6 {
  font-family: inherit;
  color: var(--gn-text);
  letter-spacing: -0.028em;
  text-wrap: balance;
}

[data-gn-theme] h2 {
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 440;
  line-height: 1.14;
  letter-spacing: -0.035em;
  margin: 0 0 6px;
}
/* The pages set the first word in <strong>; the journey's headline does the
   same thing with weight rather than size. */
[data-gn-theme] h2 strong { font-weight: 640; }

[data-gn-theme] h3 { font-size: 21px; font-weight: 500; }
[data-gn-theme] h4 { font-size: 16.5px; font-weight: 540; }

[data-gn-theme] h5 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gn-dim);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* The help icon belongs to its heading, so it sits right after the words
   instead of floating to the far edge of a 600px column. */
[data-gn-theme] h5 > .fa { float: none !important; margin-left: 2px; }
/* The condition heading is a label plus a help icon that explains it. The app
   hides the label in the result state with jQuery `.hide()`, which left the
   icon stranded on a line of its own once the theme started drawing these
   icons in CSS. jQuery writes exactly `display: none`, so the icon can be
   matched to its own label's state and go with it. */
[data-gn-theme] h5 > .data_area[style*='display: none'] + .data-question,
[data-gn-theme] h5 > .data_area[style*='display:none'] + .data-question { display: none !important; }

[data-gn-theme] hr {
  border: 0;
  border-top: 1px solid var(--gn-rule);
  margin: 16px 0 26px;
}

[data-gn-theme] a,
[data-gn-theme] a:visited { color: var(--gn-accent); text-decoration: none; }
[data-gn-theme] a:hover,
[data-gn-theme] a:focus { color: var(--gn-accent); text-decoration: underline; text-underline-offset: 3px; }

[data-gn-theme] .text-muted { color: var(--gn-dim) !important; }
[data-gn-theme] .text-info { color: var(--gn-accent) !important; }
[data-gn-theme] .text-danger { color: var(--gn-bad) !important; }
[data-gn-theme] .text-center small,
[data-gn-theme] .help-block { color: var(--gn-dim); font-size: 12.5px; line-height: 1.5; }

[data-gn-theme] b, [data-gn-theme] strong { font-weight: 600; }
[data-gn-theme] label { font-weight: 500; color: var(--gn-soft); }

/* Numbers are compared down a column everywhere in this product. */
[data-gn-theme] .estimated_value,
[data-gn-theme] .value-dollars,
[data-gn-theme] .usage-value,
[data-gn-theme] td,
[data-gn-theme] .priceyear,
[data-gn-theme] .yeargrowth { font-variant-numeric: tabular-nums; }

/* ===========================================================================
   5. Focus — one ring everywhere, visible on every surface
   ======================================================================== */

[data-gn-theme] a:focus-visible,
[data-gn-theme] button:focus-visible,
[data-gn-theme] input:focus-visible,
[data-gn-theme] select:focus-visible,
[data-gn-theme] textarea:focus-visible,
[data-gn-theme] [tabindex]:focus-visible,
[data-gn-theme] .btn:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 2px;
  border-radius: var(--gn-r-sm);
}
[data-gn-theme] .btn:focus,
[data-gn-theme] a:focus { outline-color: var(--gn-accent); }

/* ===========================================================================
   6. Top bar
   ======================================================================== */

[data-gn-theme] .navbar.navbar-fixed-top,
[data-gn-theme] .navbar-inverse {
  background: var(--gn-bar);
  background-image: none;
  border: 0;
  border-radius: 0;
  /* the rule is drawn inside the box, so the bar is exactly --gn-bar-h tall and
     the page offset below can match it to the pixel */
  box-shadow: inset 0 -1px 0 var(--gn-bar-rule);
  min-height: var(--gn-bar-h);
  margin-bottom: 0;
}

/* site.css gives .navbar-text 20px of vertical margin, which silently makes the
   fixed bar taller than its own setting and hides content under it */
[data-gn-theme] .navbar .navbar-text,
[data-gn-theme] .navbar-nav.navbar-title .navbar-text { margin-top: 0; margin-bottom: 0; }
[data-gn-theme] .navbar .navbar-nav { margin-top: 0; margin-bottom: 0; }

/* This Bootstrap build floats the navbar at 992px, not the usual 768px, so the
   bar is in its collapsed form right up to 991px. Matching that breakpoint is
   what stops the menu being forced open on top of the logo on a tablet. */
@media (min-width: 992px) {
  [data-gn-theme] .navbar.navbar-fixed-top { height: var(--gn-bar-h); }
  [data-gn-theme] .navbar.navbar-fixed-top > .container-fluid { height: 100%; display: flex; align-items: stretch; }
  [data-gn-theme] .navbar.navbar-fixed-top > .container-fluid > .navbar-collapse { flex: 1; display: flex !important; align-items: stretch; padding: 0 15px 0 0; }
  [data-gn-theme] .navbar.navbar-fixed-top .navbar-nav { display: flex; align-items: stretch; }
  [data-gn-theme] .navbar.navbar-fixed-top .navbar-nav.navbar-right { margin-left: auto; }
}

[data-gn-theme] .navbar-fixed-top { backdrop-filter: saturate(1.2) blur(8px); }

/* Every column in the bar is as tall as the bar and centres its own contents.
   Without this the pieces settle at four different heights: the brand image
   top-aligns in its link, the language pill top-aligns in its list item, and
   the account menu keeps Bootstrap's 20px of vertical padding, which makes it
   taller than the bar and pushes its text below everything else. */
[data-gn-theme] .navbar .navbar-header,
[data-gn-theme] .navbar .navbar-header > a,
[data-gn-theme] .navbar-nav.navbar-title,
[data-gn-theme] .navbar-nav.navbar-title > li,
[data-gn-theme] .navbar-nav.navbar-title .navbar-text,
[data-gn-theme] .navbar-title-text { min-height: var(--gn-bar-h); }

/* The logo lives in an unclassed <a> inside .navbar-header, so it needs the
   link centred as well as the header — at every width, not only on the wide
   bar, or the logo top-aligns once the menu collapses. */
[data-gn-theme] .navbar .navbar-header,
[data-gn-theme] .navbar .navbar-header > a {
  display: flex;
  align-items: center;
}

@media (min-width: 992px) {
  [data-gn-theme] .navbar .navbar-header,
  [data-gn-theme] .navbar .navbar-header > a,
  [data-gn-theme] .navbar-nav.navbar-title,
  [data-gn-theme] .navbar-nav.navbar-title > li,
  [data-gn-theme] .navbar-nav.navbar-title .navbar-text,
  [data-gn-theme] .navbar-nav.navbar-right > li,
  [data-gn-theme] .navbar-nav > li.gn-portal-lang-switcher {
    display: flex;
    align-items: center;
    height: var(--gn-bar-h);
    padding-top: 0;
    padding-bottom: 0;
  }
}

[data-gn-theme] .navbar .navbar-brand-image {
  /* bootstrap.css gives the mark a 20px left margin, which left it sitting 8px
     inside the page gutter; it now starts on the same vertical line as every
     section label, card and field below it. */
  margin-left: 28px;
  height: min(var(--portal-header-logo-height, 26px), calc(var(--gn-bar-h) - 18px));
  max-height: calc(var(--gn-bar-h) - 18px);
  width: auto;
  object-fit: contain;
}

[data-gn-theme] .navbar-nav.navbar-title { margin-left: 18px; position: relative; }
[data-gn-theme] .navbar-nav.navbar-title::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: var(--gn-bar-rule);
}

[data-gn-theme] .navbar-inverse .navbar-nav.navbar-title .navbar-text,
[data-gn-theme] .navbar-inverse .navbar-nav.navbar-title .navbar-text:visited,
[data-gn-theme] .navbar-inverse .navbar-nav.navbar-title .navbar-title-text,
[data-gn-theme] .navbar-title-text {
  color: var(--gn-bar-text);
  font-size: 14.5px;
  font-weight: 520;
  letter-spacing: -0.012em;
}

[data-gn-theme] .navbar-inverse .navbar-nav > li > a,
[data-gn-theme] .navbar-inverse .navbar-nav > li > a:visited {
  color: var(--gn-bar-muted);
  font-size: 13.5px;
  font-weight: 500;
  min-height: var(--gn-bar-h);
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color var(--gn-t), background var(--gn-t);
}
@media (min-width: 992px) {
  /* Bootstrap gives these 20px top and bottom above the float breakpoint, so
     the account menu measured 60px inside a 50px bar and its label sat lower
     than everything else. The link now fills the bar and centres its text. */
  [data-gn-theme] .navbar-inverse .navbar-nav > li > a,
  [data-gn-theme] .navbar-inverse .navbar-nav > li > a:visited {
    height: var(--gn-bar-h);
    padding-top: 0;
    padding-bottom: 0;
  }
}

[data-gn-theme] .navbar-inverse .navbar-nav > li > a:hover,
[data-gn-theme] .navbar-inverse .navbar-nav > li > a:focus,
[data-gn-theme] .navbar-inverse .navbar-nav > .open > a,
[data-gn-theme] .navbar-inverse .navbar-nav > .open > a:hover,
[data-gn-theme] .navbar-inverse .navbar-nav > .open > a:focus {
  background: var(--gn-bar-hover);
  color: var(--gn-bar-text);
}

[data-gn-theme] .navbar .caret { border-top-color: currentColor; opacity: 0.7; margin-left: 6px; }

[data-gn-theme] .navbar-toggle {
  border: 1px solid var(--gn-bar-rule);
  border-radius: var(--gn-r-sm);
  margin-top: calc((var(--gn-bar-h) - 34px) / 2);
  margin-bottom: calc((var(--gn-bar-h) - 34px) / 2);
}
[data-gn-theme] .navbar-inverse .navbar-toggle:hover,
[data-gn-theme] .navbar-inverse .navbar-toggle:focus { background: var(--gn-bar-hover); }
[data-gn-theme] .navbar-inverse .navbar-toggle .icon-bar { background: var(--gn-bar-text); }
[data-gn-theme] .navbar-inverse .navbar-collapse,
[data-gn-theme] .navbar-inverse .navbar-form { border-color: var(--gn-bar-rule); }

/* language pill */
[data-gn-theme] .gn-portal-lang-switcher { min-height: var(--gn-bar-h); }
[data-gn-theme] .gn-portal-lang-switcher .gn-portal-lang-pill {
  gap: 2px;
  padding: 3px;
  border-radius: 99px;
  border: 1px solid var(--gn-bar-rule);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  font-weight: 600;
}
[data-gn-theme] .gn-portal-lang-switcher a,
[data-gn-theme] .gn-portal-lang-switcher a:visited,
[data-gn-theme] .gn-portal-lang-switcher a:hover,
[data-gn-theme] .gn-portal-lang-switcher a:focus {
  color: var(--gn-bar-muted);
  opacity: 1;
  padding: 4px 9px;
  border-radius: 99px;
  text-decoration: none;
  transition: color var(--gn-t), background var(--gn-t);
}
[data-gn-theme] .gn-portal-lang-switcher a:hover { color: var(--gn-bar-text); }
[data-gn-theme] .gn-portal-lang-switcher a.is-active {
  background: var(--gn-bar-text);
  color: var(--gn-bar);
  font-weight: 700;
}

/* account menu */
[data-gn-theme] .dropdown-menu {
  background: var(--gn-panel-2);
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-r);
  box-shadow: var(--gn-shadow);
  padding: 6px;
  margin-top: 6px;
  min-width: 210px;
}
[data-gn-theme] .navbar-nav .dropdown-menu > li > a,
[data-gn-theme] .dropdown-menu > li > a {
  color: var(--gn-text);
  font-size: 13.5px;
  padding: 9px 12px;
  border-radius: var(--gn-r-sm);
  min-height: 0;
  display: block;
}
[data-gn-theme] .dropdown-menu > li > a:hover,
[data-gn-theme] .dropdown-menu > li > a:focus {
  background: rgba(var(--gn-accent-rgb), 0.14);
  color: var(--gn-text);
  text-decoration: none;
}
[data-gn-theme] .dropdown-menu .divider { background: var(--gn-rule); }

/* ===========================================================================
   7. Footer
   ======================================================================== */

[data-gn-theme] .portal-footer.navbar-inverse,
[data-gn-theme] footer .navbar {
  background: var(--gn-bar);
  border: 0;
  border-top: 1px solid var(--gn-bar-rule);
  border-radius: 0;
  margin: 48px 0 0;
}
[data-gn-theme] .portal-footer .footer_text {
  color: var(--gn-bar-muted) !important;
  font-size: 12.5px;
  /* The footer's container carries no padding of its own, so the copyright
     line began at the very edge of the window while everything above it
     started at the page gutter. It now shares that gutter. */
  padding: 22px 28px;
}
[data-gn-theme] .portal-footer .footer_text a,
[data-gn-theme] .portal-footer .footer_text a:link,
[data-gn-theme] .portal-footer .footer_text a:visited { color: var(--gn-bar-text) !important; }
[data-gn-theme] .portal-footer .footer_text a:hover,
[data-gn-theme] .portal-footer .footer_text a:focus { color: var(--gn-accent) !important; text-decoration: underline; }

/* ===========================================================================
   8. Surfaces
   ======================================================================== */

[data-gn-theme] .property_box,
[data-gn-theme] .panel,
[data-gn-theme] .well,
[data-gn-theme] .card-box,
[data-gn-theme] .usage-card,
[data-gn-theme] .manage-logo-preview,
[data-gn-theme] .forecast_area,
[data-gn-theme] #highchart-risk-body.property_box {
  background: var(--gn-panel);
  border: 1px solid var(--gn-rule);
  border-radius: var(--gn-r-lg);
  box-shadow: none;
  color: var(--gn-text);
}

[data-gn-theme] .property_box { padding: 18px; }
[data-gn-theme] #highchart-risk-body.property_box { padding: 16px 18px; }
[data-gn-theme] .address_box { min-height: 118px; padding: 20px; display: flex; flex-direction: column; justify-content: center; }
[data-gn-theme] .address_box h3 { font-size: 19px; font-weight: 560; margin: 0 0 4px; letter-spacing: -0.03em; }
[data-gn-theme] .address_box p { margin: 0; color: var(--gn-muted); font-size: 13.5px; }

[data-gn-theme] .panel { margin-bottom: 20px; }
[data-gn-theme] .panel-default { border-color: var(--gn-rule); }
[data-gn-theme] .panel-heading {
  background: transparent;
  border-bottom: 1px solid var(--gn-rule);
  color: var(--gn-text);
  font-weight: 560;
  font-size: 14px;
  padding: 14px 18px;
  border-radius: var(--gn-r-lg) var(--gn-r-lg) 0 0;
}
[data-gn-theme] .panel-body { padding: 18px; }
[data-gn-theme] .well { padding: 16px 18px; }

/* one vertical rhythm for every block on the appraisal screen */
[data-gn-theme] .property_area { margin-bottom: 26px; }

/* ===========================================================================
   9. Forms
   ======================================================================== */

[data-gn-theme] .form-control,
[data-gn-theme] input[type='text'],
[data-gn-theme] input[type='email'],
[data-gn-theme] input[type='password'],
[data-gn-theme] input[type='number'],
[data-gn-theme] input[type='date'],
[data-gn-theme] input[type='time'],
[data-gn-theme] input[type='address'],
[data-gn-theme] select,
[data-gn-theme] textarea {
  background: var(--gn-mid);
  background-image: none;
  border: 1px solid var(--gn-rule);
  border-radius: var(--gn-r);
  color: var(--gn-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  height: auto;
  min-height: 40px;
  padding: 9px 12px;
  box-shadow: none;
  transition: border-color var(--gn-t), box-shadow var(--gn-t), background var(--gn-t);
  -webkit-appearance: none;
  appearance: none;
}

[data-gn-theme] textarea.form-control { min-height: 92px; }

[data-gn-theme] .form-control:hover { border-color: var(--gn-line); }

[data-gn-theme] .form-control:focus,
[data-gn-theme] select:focus,
[data-gn-theme] textarea:focus {
  border-color: var(--gn-accent);
  box-shadow: 0 0 0 3px rgba(var(--gn-accent-rgb), 0.2);
  outline: none;
  background: var(--gn-mid);
}

[data-gn-theme] .form-control::placeholder { color: var(--gn-dim); opacity: 1; }
[data-gn-theme] .form-control[disabled],
[data-gn-theme] .form-control[readonly],
[data-gn-theme] select[disabled],
[data-gn-theme] fieldset[disabled] .form-control {
  background: var(--gn-track);
  color: var(--gn-muted);
  border-color: var(--gn-rule);
  opacity: 1;
  cursor: not-allowed;
}

[data-gn-theme] .input-lg { min-height: 44px; font-size: 14.5px; padding: 11px 13px; border-radius: var(--gn-r); }
[data-gn-theme] .input-sm { min-height: 34px; font-size: 13px; padding: 6px 10px; }

/* native select arrow, drawn so it matches on every platform */
[data-gn-theme] select.form-control,
[data-gn-theme] select {
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--gn-text);
}
[data-gn-theme] select option { background: var(--gn-panel-2); color: var(--gn-text); }

[data-gn-theme] .control-label,
[data-gn-theme] .col-form-label {
  color: var(--gn-soft);
  font-weight: 500;
  font-size: 13.5px;
  padding-top: 10px;
}
[data-gn-theme] .form-group { margin-bottom: 16px; }

[data-gn-theme] .checkbox label,
[data-gn-theme] .form-check label { color: var(--gn-soft); font-weight: 450; }

/* Native controls render as light boxes on a dark canvas, so they are drawn
   here instead. Only the appearance changes: these are still real inputs. */
[data-gn-theme] input[type='checkbox'],
[data-gn-theme] input[type='radio'] {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  margin: 0 6px 0 0;
  padding: 0;
  flex: none;
  vertical-align: -3px;
  background: var(--gn-mid);
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-r-sm);
  cursor: pointer;
  position: relative;
  transition: background var(--gn-t), border-color var(--gn-t);
}
[data-gn-theme] input[type='radio'] { border-radius: 50%; }
[data-gn-theme] input[type='checkbox']:hover,
[data-gn-theme] input[type='radio']:hover { border-color: var(--gn-accent); }
[data-gn-theme] input[type='checkbox']:checked,
[data-gn-theme] input[type='radio']:checked {
  background: var(--gn-accent);
  border-color: var(--gn-accent);
}
[data-gn-theme] input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4px;
  height: 9px;
  border: solid var(--gn-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
[data-gn-theme] input[type='radio']:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--gn-bg);
}
[data-gn-theme] input[type='checkbox']:disabled,
[data-gn-theme] input[type='radio']:disabled { opacity: 0.45; cursor: not-allowed; }
[data-gn-theme] .checkbox label,
[data-gn-theme] .form-check label { display: inline-flex; align-items: center; }
[data-gn-theme] .checkbox input[type='checkbox'] { position: static; margin-left: 0; }

/* file picker */
[data-gn-theme] input[type='file'] {
  background: var(--gn-mid);
  border: 1px solid var(--gn-rule);
  border-radius: var(--gn-r);
  color: var(--gn-muted);
  font-size: 13px;
  padding: 7px 10px;
  min-height: 40px;
}
[data-gn-theme] input[type='file']::file-selector-button {
  font: inherit;
  font-weight: 560;
  background: transparent;
  color: var(--gn-text);
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-r-sm);
  padding: 6px 12px;
  margin-right: 12px;
  cursor: pointer;
  transition: background var(--gn-t);
}
[data-gn-theme] input[type='file']::file-selector-button:hover { background: var(--gn-panel-2); }

[data-gn-theme] .input-group-addon {
  background: var(--gn-panel-2);
  border: 1px solid var(--gn-rule);
  color: var(--gn-muted);
  border-radius: var(--gn-r) 0 0 var(--gn-r);
  font-size: 13px;
  padding: 9px 12px;
}
/* Keyed on the group's own children rather than on `.form-control:last-child`.
   An input group often ends in a button wrapper, so the field is neither first
   nor last and Bootstrap's own radius was showing through on one corner. This
   squares every seam and rounds only the two outer ends, whatever the group is
   made of. */
[data-gn-theme] .input-group > .form-control,
[data-gn-theme] .input-group > .input-group-addon,
[data-gn-theme] .input-group > .input-group-btn > .btn { border-radius: 0; }
[data-gn-theme] .input-group > .form-control:first-child,
[data-gn-theme] .input-group > .input-group-addon:first-child,
[data-gn-theme] .input-group > .input-group-btn:first-child > .btn {
  border-top-left-radius: var(--gn-r);
  border-bottom-left-radius: var(--gn-r);
}
[data-gn-theme] .input-group > .form-control:last-child,
[data-gn-theme] .input-group > .input-group-addon:last-child,
[data-gn-theme] .input-group > .input-group-btn:last-child > .btn {
  border-top-right-radius: var(--gn-r);
  border-bottom-right-radius: var(--gn-r);
}

/* validation */
[data-gn-theme] .error_validate,
[data-gn-theme] .form-control.error_validate,
[data-gn-theme] table .form-control.error_validate {
  border: 1px solid var(--gn-bad) !important;
  box-shadow: 0 0 0 3px rgba(255, 122, 152, 0.16);
}
[data-gn-theme] .field-validation-valid,
[data-gn-theme] .portal-validation-summary { color: var(--gn-bad); font-size: 13px; }

/* ===========================================================================
   10. Buttons
   ======================================================================== */

[data-gn-theme] .btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 560;
  letter-spacing: -0.006em;
  line-height: 1.2;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: var(--gn-r);
  border: 1px solid transparent;
  box-shadow: none;
  text-shadow: none;
  background-image: none;
  transition: filter var(--gn-t), background var(--gn-t), border-color var(--gn-t),
    color var(--gn-t), transform var(--gn-t);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
[data-gn-theme] .btn:active { transform: translateY(1px); }
[data-gn-theme] .btn-lg { min-height: 44px; font-size: 14.5px; padding: 11px 20px; border-radius: var(--gn-r); }
[data-gn-theme] .btn-sm { min-height: 32px; font-size: 13px; padding: 6px 12px; }
[data-gn-theme] .btn-xs { min-height: 28px; font-size: 12px; padding: 4px 10px; }
[data-gn-theme] .btn-block { width: 100%; }

/* primary action — the journey's call-to-action colour */
[data-gn-theme] .btn-primary,
[data-gn-theme] .btn-success,
[data-gn-theme] .btn-danger {
  background: var(--gn-button);
  border-color: var(--gn-button);
  color: var(--gn-button-text);
}
[data-gn-theme] .btn-primary:hover, [data-gn-theme] .btn-primary:focus, [data-gn-theme] .btn-primary:active,
[data-gn-theme] .btn-success:hover, [data-gn-theme] .btn-success:focus, [data-gn-theme] .btn-success:active,
[data-gn-theme] .btn-danger:hover, [data-gn-theme] .btn-danger:focus, [data-gn-theme] .btn-danger:active {
  background: var(--gn-button);
  border-color: var(--gn-button);
  color: var(--gn-button-text);
  filter: brightness(1.1);
}

/* secondary action — quiet, outlined */
[data-gn-theme] .btn-default,
[data-gn-theme] .btn-warning,
[data-gn-theme] .btn-info {
  background: transparent;
  border-color: var(--gn-line);
  color: var(--gn-text);
}
[data-gn-theme] .btn-default:hover, [data-gn-theme] .btn-default:focus, [data-gn-theme] .btn-default:active,
[data-gn-theme] .btn-warning:hover, [data-gn-theme] .btn-warning:focus, [data-gn-theme] .btn-warning:active,
[data-gn-theme] .btn-info:hover, [data-gn-theme] .btn-info:focus, [data-gn-theme] .btn-info:active {
  background: var(--gn-panel-2);
  border-color: var(--gn-line);
  color: var(--gn-text);
  filter: none;
}

[data-gn-theme] .btn-link,
[data-gn-theme] .btn-link:hover,
[data-gn-theme] .btn-link:focus {
  color: var(--gn-accent);
  background: transparent;
  border-color: transparent;
  font-weight: 500;
  padding-left: 12px;
  padding-right: 12px;
}

/* A disabled action reads as "not yet", not as an error, so it goes neutral
   rather than a dimmed red. */
[data-gn-theme] .btn.disabled,
[data-gn-theme] .btn[disabled],
[data-gn-theme] fieldset[disabled] .btn,
[data-gn-theme] .btn-primary.disabled,
[data-gn-theme] .btn-primary[disabled],
[data-gn-theme] .btn-success.disabled,
[data-gn-theme] .btn-success[disabled],
[data-gn-theme] .btn-danger.disabled,
[data-gn-theme] .btn-danger[disabled] {
  background: var(--gn-track);
  border-color: var(--gn-rule);
  color: var(--gn-muted);
  opacity: 1;
  filter: none;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* the Calculate button is the one decisive action on the appraisal screen */
[data-gn-theme] #calculate {
  margin-top: 28px;
  letter-spacing: 0.01em;
  font-weight: 600;
}
[data-gn-theme] #calculate:not(.disabled):not([disabled]) {
  box-shadow: 0 0 0 0 rgba(var(--gn-accent-rgb), 0.5);
}

[data-gn-theme] input[type='submit'].btn,
[data-gn-theme] input[type='button'].btn { display: inline-block; }

/* ===========================================================================
   11. Tables
   ======================================================================== */

[data-gn-theme] .table,
[data-gn-theme] .portal-table {
  background: transparent;
  color: var(--gn-text);
  border: 1px solid var(--gn-rule);
  border-radius: var(--gn-r-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 13.5px;
}
[data-gn-theme] .table > thead > tr > th,
[data-gn-theme] .portal-table thead th {
  background: var(--gn-panel-2);
  color: var(--gn-soft);
  border: 0;
  border-bottom: 1px solid var(--gn-rule);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 14px;
  white-space: nowrap;
}
[data-gn-theme] .table > tbody > tr > td,
[data-gn-theme] .portal-table td {
  border: 0;
  border-top: 1px solid var(--gn-rule);
  padding: 12px 14px;
  vertical-align: middle;
  color: var(--gn-text);
}
[data-gn-theme] .table > tbody > tr:first-child > td { border-top: 0; }
[data-gn-theme] .table-striped > tbody > tr:nth-of-type(odd),
[data-gn-theme] .portal-table tbody tr:nth-child(odd) { background: transparent; }
[data-gn-theme] .table-striped > tbody > tr:nth-of-type(even),
[data-gn-theme] .portal-table tbody tr:nth-child(even) { background: rgba(var(--gn-accent-rgb), 0.035); }
[data-gn-theme] .table > tbody > tr:hover,
[data-gn-theme] .portal-table tbody tr:hover { background: rgba(var(--gn-accent-rgb), 0.08); }
[data-gn-theme] .table-responsive { border: 0; }

/* The attribute table is a form, not a data grid — but it is still a panel, so
   it reads as one card alongside Property Insights instead of floating rows. */
[data-gn-theme] #propertydetails_form {
  background: var(--gn-panel);
  border: 1px solid var(--gn-rule);
  border-radius: var(--gn-r-lg);
  padding: 2px 18px;
}
[data-gn-theme] #propertydetails_form .table,
[data-gn-theme] .adjust_field_area.table {
  border: 0;
  background: transparent;
  margin: 0;
}
[data-gn-theme] #property_detail_table > tr > td,
[data-gn-theme] #propertydetails_form .table > tbody > tr > td {
  border-top: 1px solid var(--gn-rule);
  padding: 7px 0;
  background: transparent;
}
[data-gn-theme] #propertydetails_form .table > tbody > tr:first-child > td { border-top: 0; }
[data-gn-theme] #propertydetails_form .table > tbody > tr:hover { background: transparent; }
[data-gn-theme] #propertydetails_form .table > tbody > tr > td:first-child { width: 48%; padding-right: 12px; }
[data-gn-theme] #property_detail_table label.form-control,
[data-gn-theme] #propertydetails_form label.form-control {
  background: transparent;
  border: 0 !important;
  padding: 9px 0;
  color: var(--gn-muted);
  font-size: 13px;
  font-weight: 450;
  min-height: 0;
  box-shadow: none;
}
[data-gn-theme] .property_detail_input,
[data-gn-theme] table .form-control {
  color: var(--gn-text) !important;
  border: 1px solid var(--gn-rule) !important;
  background: var(--gn-mid);
}
[data-gn-theme] .property_detail_input:focus { border-color: var(--gn-accent) !important; }

/* "Adjust attributes" mode: the whole block is marked, not each cell */
[data-gn-theme] .adjust_field_area.active {
  border: 1px solid var(--gn-accent);
  box-shadow: 0 0 0 3px rgba(var(--gn-accent-rgb), 0.14);
  border-radius: var(--gn-r-lg);
}
[data-gn-theme] .adjust_field_area.active tbody tr td input,
[data-gn-theme] .adjust_field_area.active tbody tr td select { color: var(--gn-text) !important; }
[data-gn-theme] #adjusted_title {
  background: rgba(var(--gn-accent-rgb), 0.14);
  border: 1px solid rgba(var(--gn-accent-rgb), 0.4);
  border-radius: var(--gn-r);
  color: var(--gn-accent);
  padding: 9px 14px;
  margin-bottom: 14px;
}
[data-gn-theme] #adjusted_title h4 { margin: 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: inherit; }

/* ===========================================================================
   12. Tabs
   ======================================================================== */

[data-gn-theme] .nav.nav-tabs {
  border-bottom: 1px solid var(--gn-rule) !important;
  margin-bottom: 26px;
  /* the markup puts the tab row in a col-md-7, so its rule stopped at 58% of
     the page; a divider that spans the content reads as one deliberate line */
  width: 100%;
  padding: 0;
  /* No `display` here either: this <ul> also carries .result_area, so it has to
     stay a block the app can hide. Its items keep Bootstrap's floats. */
}
[data-gn-theme] .nav.nav-tabs::after { content: ''; display: table; clear: both; }
[data-gn-theme] .nav-item,
[data-gn-theme] .nav.nav-tabs > li { border: 0; float: left; margin-right: 2px; }
[data-gn-theme] .nav.nav-tabs > li > a,
[data-gn-theme] .nav-tabs > li > a {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--gn-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px 16px;
  margin: 0 0 -1px;
  transition: color var(--gn-t), border-color var(--gn-t);
}
[data-gn-theme] .nav.nav-tabs > li > a:hover,
[data-gn-theme] .nav.nav-tabs > li > a:focus {
  background: transparent;
  border-bottom-color: var(--gn-line);
  color: var(--gn-text);
  text-decoration: none;
}
[data-gn-theme] .nav.nav-tabs > li.active > a,
[data-gn-theme] .nav.nav-tabs > li.active > a:hover,
[data-gn-theme] .nav.nav-tabs > li.active > a:focus {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--gn-accent);
  color: var(--gn-text);
  font-weight: 700;
}
[data-gn-theme] .nav-link { color: var(--gn-dim); }
/* the PDF action sits at the far end of the tab row (it used float before) */
[data-gn-theme] .nav.nav-tabs > li.pull-right,
[data-gn-theme] .nav.nav-tabs > #clientInfo_nav { float: right !important; margin-right: 0; }
[data-gn-theme] #clientInfo_nav .nav-link { padding: 11px 14px; color: var(--gn-muted); cursor: pointer; }
[data-gn-theme] #clientInfo_nav .nav-link:hover { color: var(--gn-accent); }

/* ===========================================================================
   13. Alerts
   ======================================================================== */

/* The status colours are light — they are picked to be read as text on a dark
   surface — so mixing one into the near-black panel lifts the red channel far
   more than the others and the panel loses its cool cast: --gn-panel #0c1b23
   tinted 9% with --gn-bad #ff7a98 came out rgb(34,36,46), a warm grey that
   belongs to no part of this palette.
   The body of the banner is therefore the same --gn-panel as every other
   surface in the product, and the status colour arrives as a short wash out of
   the left edge, tying the 3px bar to the panel instead of staining all of it.
   Each variant only names its colour; the treatment is defined once. */
[data-gn-theme] .alert {
  --gn-alert: var(--gn-rule);
  border-radius: var(--gn-r);
  border: 1px solid var(--gn-rule);
  border-left: 3px solid var(--gn-alert);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--gn-alert) 10%, transparent) 0,
      color-mix(in srgb, var(--gn-alert) 1%, transparent) 120px
    ),
    var(--gn-panel);
  color: var(--gn-text);
  font-size: 13.5px;
  padding: 13px 16px;
  box-shadow: none;
  text-shadow: none;
}
[data-gn-theme] .alert a { font-weight: 600; }
[data-gn-theme] .alert-success { --gn-alert: var(--gn-ok); }
[data-gn-theme] .alert-danger { --gn-alert: var(--gn-bad); }
[data-gn-theme] .alert-warning { --gn-alert: var(--gn-warn); }
[data-gn-theme] .alert-info { --gn-alert: var(--gn-info); }
[data-gn-theme] .credit-limit-alert { margin: 0 0 16px; }

/* ===========================================================================
   14. Modals
   ======================================================================== */

[data-gn-theme] .modal { padding-right: 0 !important; }
[data-gn-theme] .modal-backdrop,
[data-gn-theme] .modal-backdrop.in { background: #03090e; opacity: 0.68; }
[data-gn-theme] .modal-content {
  background: var(--gn-panel);
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-r-lg);
  box-shadow: var(--gn-shadow);
  color: var(--gn-text);
  top: 0;
  overflow: hidden;
}
[data-gn-theme] .modal-header {
  border-bottom: 1px solid var(--gn-rule);
  padding: 18px 22px;
  background: transparent;
}
[data-gn-theme] .modal-header.btn-success { background: transparent; border-bottom-color: var(--gn-rule); }
[data-gn-theme] .modal-title { font-size: 17px; font-weight: 580; letter-spacing: -0.02em; color: var(--gn-text); }
[data-gn-theme] .modal-body { background: transparent; color: var(--gn-text); padding: 22px; }
[data-gn-theme] .modal-footer {
  border-top: 1px solid var(--gn-rule);
  padding: 16px 22px;
  background: transparent;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
[data-gn-theme] .modal-footer .form-group,
[data-gn-theme] .modal-footer .text-center { margin: 0; width: 100%; }
[data-gn-theme] .modal .close {
  color: var(--gn-muted);
  opacity: 1;
  text-shadow: none;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  transition: color var(--gn-t);
}
[data-gn-theme] .modal .close:hover { color: var(--gn-text); }
[data-gn-theme] .modal-body-report { height: auto; min-height: 0; }
[data-gn-theme] .modal-body-propertylist { max-height: 62vh; }
[data-gn-theme] .what-want-on-report {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gn-dim);
  font-weight: 600;
  margin-bottom: 14px;
}

/* the PDF options modal reads as a checklist */
[data-gn-theme] #ClientInfo .modal-body .form-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid var(--gn-rule);
}
[data-gn-theme] #ClientInfo .modal-body .form-group:first-of-type { border-top: 0; }
[data-gn-theme] #ClientInfo .modal-body .form-group .control-label {
  float: none;
  width: auto;
  padding: 0;
  text-align: left;
  font-size: 13.5px;
}
[data-gn-theme] #ClientInfo .modal-body .form-group .form-check-input { margin: 0; }
[data-gn-theme] #ClientInfo .modal-header img { max-height: 34px; width: auto; }
[data-gn-theme] #ClientInfo .modal-header h3 { font-size: 17px; font-weight: 580; margin: 10px 0 0; }

/* ===========================================================================
   15. Pagination
   ======================================================================== */

[data-gn-theme] .pagination { border-radius: var(--gn-r); display: inline-flex; gap: 3px; }
[data-gn-theme] .pagination > li > a,
[data-gn-theme] .pagination > li > span,
[data-gn-theme] #manage-account .pagination > li > a {
  background: transparent;
  border: 1px solid var(--gn-rule);
  border-radius: var(--gn-r-sm) !important;
  color: var(--gn-text) !important;
  font-size: 13px;
  padding: 7px 12px;
  margin: 0;
  transition: background var(--gn-t), border-color var(--gn-t);
}
[data-gn-theme] .pagination > li > a:hover { background: var(--gn-panel-2); border-color: var(--gn-line); }
[data-gn-theme] .pagination > li.active > a,
[data-gn-theme] .pagination > li.active > a:hover,
[data-gn-theme] .pagination > li.active > a:focus,
[data-gn-theme] #manage-account .pagination > li.active > a {
  background: var(--gn-accent);
  border-color: var(--gn-accent);
  color: var(--gn-bg) !important;
  font-weight: 600;
}
[data-gn-theme] .pagination > li.disabled > a,
[data-gn-theme] #manage-account .pagination > li.disabled > a {
  color: var(--gn-dim) !important;
  opacity: 1;
  background: transparent;
  border-color: var(--gn-rule);
}

/* ===========================================================================
   16. Appraisal workspace
   ======================================================================== */

/* the search bar is the one piece of chrome under the top bar */
[data-gn-theme] #map-search-overlay.data_area {
  background: var(--gn-panel);
  border: 0;
  border-bottom: 1px solid var(--gn-rule);
  padding: 14px 28px 20px;
  margin: 0 -28px 24px;
  min-height: 0;
  backdrop-filter: none;
}
[data-gn-theme] #map-search-overlay.credit-blocked { opacity: 0.45; }
[data-gn-theme] #map-search-overlay.credit-blocked .form-control { background: var(--gn-track); }

/* the info icon sits clear of the select's own arrow */
[data-gn-theme] .property-type-select .form-control { padding-right: 58px; }
[data-gn-theme] .property-type-select .property-type-info { right: 34px; }
[data-gn-theme] .property-type-select .property-type-info,
[data-gn-theme] .eval-date-info { color: var(--gn-dim); transition: color var(--gn-t); }
[data-gn-theme] .property-type-select .property-type-info:hover,
[data-gn-theme] .eval-date-info:hover { color: var(--gn-accent); }

/* result header: the numbers that matter, on one rule */
[data-gn-theme] .result-summary.property_box {
  background: var(--gn-panel);
  border: 0;
  border-bottom: 1px solid var(--gn-rule);
  border-radius: 0;
  margin: 0 -28px 28px;
  width: calc(100% + 56px);
  /* the figures need room to breathe under the fixed bar */
  padding: 30px 28px 26px;
  /* No `display` here on purpose. The app shows and hides this block with the
     .result_area class, which site.css implements as display:none — setting a
     display on it would out-specify that and leave the empty header on screen.
     The two Bootstrap columns inside already sit side by side as floats. */
}
[data-gn-theme] .result-summary.property_box::after { content: ''; display: table; clear: both; }
/* One row, columns stretched to equal height. That is what lines the labels up
   on one line and the figures on another: centring each column independently
   put them at four different heights. The rules between columns are real
   borders, so they are always full height whatever a column contains. */
[data-gn-theme] .result-summary.property_box > .col-md-10 {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  padding: 0;
}
[data-gn-theme] .result-summary.property_box > .col-md-10 > div {
  float: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  text-align: left;
  padding: 0 22px;
}
/* The address column keeps the markup's own `.text-center`, so the property
   sits in the middle of its cell exactly as it did in the Property Address
   card it replaces, and is centred down the band rather than pinned to the
   top. The metric cells either side stay left-aligned against their rules. */
[data-gn-theme] .result-summary.property_box > .col-md-10 > div:first-child {
  /* a little wider than the metrics so the address keeps the same measure it
     had in the search card and does not wrap at 19px */
  flex: 0 1 26%;
  padding-left: 0;
  text-align: center;
  align-items: center;
  justify-content: center;
}
[data-gn-theme] .result-summary .result-metric {
  flex: 1 1 0;
  margin-left: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--gn-rule) !important;
}
[data-gn-theme] .result-summary .result-metric h4,
[data-gn-theme] .result_area h4 {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gn-dim);
  margin: 0 0 10px;
  white-space: nowrap;
  /* site.css centres this flex row; the column reads left-aligned now */
  justify-content: flex-start;
  min-height: 15px;
}
[data-gn-theme] .result-summary .result-metric h4 b { font-weight: 600; }
/* the figure sits on one line across every column, and the action under it is
   pushed to the bottom so the columns end together */
[data-gn-theme] .result-summary .result-metric > p:not(.property_control) { margin: 0; }
[data-gn-theme] .result-summary .result-metric .property_control { margin-top: auto; padding-top: 10px; }
[data-gn-theme] .result-summary .estimated_value,
[data-gn-theme] #estimated_value,
[data-gn-theme] #estimated_rent,
[data-gn-theme] #estimated_rent_adjusted {
  font-size: clamp(21px, 1.7vw, 27px);
  font-weight: 460;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0;
  color: var(--gn-text);
}
/* the valuation is the headline figure */
[data-gn-theme] #estimated_head .estimated_value { color: var(--gn-accent); }
/* The link sits in a <p class="property_control"> wrapping a <u>. Only the <u>
   is underlined: giving the paragraph a border too drew a second, column-wide
   rule under every figure. */
[data-gn-theme] .result-summary .property_control {
  margin: 10px 0 0;
  border: 0;
  line-height: 1;
}
[data-gn-theme] .result-summary .property_control u,
[data-gn-theme] .result-summary .property_control a {
  display: inline-block;
  font-size: 12px;
  color: var(--gn-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--gn-accent-rgb), 0.35);
  padding-bottom: 1px;
  cursor: pointer;
  transition: border-color var(--gn-t), color var(--gn-t);
}
[data-gn-theme] .result-summary .property_control u:hover { border-bottom-color: var(--gn-accent); }
[data-gn-theme] .result-summary .result-metric .fa-question-circle-o { font-size: 13px; color: var(--gn-dim); }
/* The property identity is set once and keeps its measure. These are the same
   values as `.address_box` in the search state, so the address does not appear
   to shrink when the valuation returns and the card is replaced by the result
   band. It cannot keep its position — the app swaps the whole top of the page
   — but it keeps its type, its colour and its vertical centring. */
[data-gn-theme] #result_street_name,
[data-gn-theme] .result-summary h4 b#result_street_name {
  font-size: 19px;
  font-weight: 560;
  letter-spacing: -0.03em;
  color: var(--gn-text);
  text-transform: none;
  white-space: normal;
}
[data-gn-theme] .result-summary .col-md-3 h4 {
  font-size: 19px;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--gn-text);
  margin: 0 0 4px;
  white-space: normal;
  min-height: 0;
  line-height: 1.25;
}
[data-gn-theme] #result_address_name { color: var(--gn-muted); font-size: 13.5px; margin: 0; line-height: 1.4; }
/* site.css sizes this heading by id, which outranks the theme's h4 rule; the
   theme states its own size here so the link inside is the only thing setting
   the measure. */
[data-gn-theme] #new_lookup_text { margin: 0; font-size: 12px; }
[data-gn-theme] #new_lookup_text a,
[data-gn-theme] #new_lookup_text a.text-muted {
  color: var(--gn-muted) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-gn-theme] #new_lookup_text a:hover { color: var(--gn-text) !important; }

/* ---------------------------------------------------------------------------
   Adjust-mode ribbon
   `#adjusted_title` is in the markup with an "Adjust Mode" heading, and
   app.js reveals it by removing `.hidden` when Adjust Attributes is clicked.
   It has never appeared, in this build or the previous one: calculate.js hides
   it with jQuery `.hide()`, which writes an inline `display: none` that
   `removeClass('hidden')` cannot undo. An `!important` display beats a
   non-important inline style, so the band is restored here without touching a
   line of script.

   Both of the app's own markers have to agree before it shows: the element
   must not carry `.hidden`, and some field must actually be in the active
   adjust state. `recalc_field_fields()` clears both together, so leaving
   adjust mode hides it again. On a browser without `:has()` the rule is
   dropped and the ribbon simply stays hidden, as it is today.
   ------------------------------------------------------------------------ */
[data-gn-theme] body:has(.adjust_field_area.active) #adjusted_title:not(.hidden) {
  display: block !important;
}
[data-gn-theme] #adjusted_title {
  background: rgba(var(--gn-accent-rgb), 0.1);
  border: 1px solid rgba(var(--gn-accent-rgb), 0.34);
  border-radius: var(--gn-r);
  padding: 9px 14px;
  margin: 0 0 18px;
  /* It is a col-md-12 among floated columns. Un-floated it would stack under
     the result header instead of after it, so it clears the row first. */
  float: none;
  clear: both;
  width: 100%;
}
[data-gn-theme] #adjusted_title h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gn-accent);
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1.2;
}
[data-gn-theme] #adjusted_title h4::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gn-accent);
  box-shadow: 0 0 0 3px rgba(var(--gn-accent-rgb), 0.22);
  flex: none;
  animation: gnPulseDot 2s var(--gn-ease) infinite;
}
@keyframes gnPulseDot {
  0%, 100% { box-shadow: 0 0 0 2px rgba(var(--gn-accent-rgb), 0.3); }
  50% { box-shadow: 0 0 0 5px rgba(var(--gn-accent-rgb), 0.12); }
}
@media (prefers-reduced-motion: reduce) {
  [data-gn-theme] #adjusted_title h4::before { animation: none; }
}
[data-gn-theme] .gn-result-actions { gap: 10px; }

/* value / rent ranges */
[data-gn-theme] #highchart-risk-body > div > p,
[data-gn-theme] #highchart-risk-body .rof-label p {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gn-dim);
  margin: 0 0 8px;
}
[data-gn-theme] #highchart-risk-body > div > p b,
[data-gn-theme] #highchart-risk-body .rof-label p b { font-weight: 600; }
[data-gn-theme] .highest-risk-text { padding: 0; font-size: 13.5px; color: var(--gn-muted); }
[data-gn-theme] .highest-risk-text b { color: var(--gn-text); font-weight: 580; }
[data-gn-theme] #low-high,
[data-gn-theme] #highchart-risk-data {
  border-bottom: 1px solid var(--gn-rule) !important;
  padding-bottom: 14px;
  margin-bottom: 14px;
}
[data-gn-theme] #highchart-risk-body .rof-label { margin-top: 0; }
[data-gn-theme] #highchart-risk-box { min-height: 0; }

/* risk-of-decline wording is written inline by the app; keep the meaning,
   restate the colour on this theme's scale */
[data-gn-theme] .v_l_risk_decline,
[data-gn-theme] .v_l_risk_decline span { color: var(--gn-ok) !important; }
[data-gn-theme] .l_risk_decline,
[data-gn-theme] .l_risk_decline span { color: var(--gn-ok) !important; filter: saturate(0.85); }
[data-gn-theme] .m_risk_decline,
[data-gn-theme] .m_risk_decline span { color: var(--gn-warn) !important; }
[data-gn-theme] .h_risk_decline,
[data-gn-theme] .h_risk_decline span { color: var(--gn-bad) !important; filter: saturate(0.85); }
[data-gn-theme] .v_h_risk_decline,
[data-gn-theme] .v_h_risk_decline span { color: var(--gn-bad) !important; }
[data-gn-theme] #risk_of_decline_text p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
}
[data-gn-theme] #request_appraisal-div { margin-top: 12px; }

/* condition slider */
[data-gn-theme] #property_condition.property_box { padding: 20px 22px 14px; }
[data-gn-theme] #property_condition label[for='condition_range'],
[data-gn-theme] .project > label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gn-dim);
  margin-bottom: 14px;
}
[data-gn-theme] .slider.slider-horizontal { width: 100% !important; height: 20px; }
[data-gn-theme] .slider-track,
[data-gn-theme] .slider.slider-horizontal .slider-track {
  background: var(--gn-track) !important;
  box-shadow: none;
  border-radius: 99px;
  height: 4px;
}
[data-gn-theme] .slider-selection,
[data-gn-theme] .slider .slider-selection {
  background: var(--gn-accent) !important;
  background-image: none !important;
  box-shadow: none;
  border-radius: 99px;
}
[data-gn-theme] .slider-track-low,
[data-gn-theme] .slider-track-high { background: transparent; box-shadow: none; }
[data-gn-theme] .slider-handle,
[data-gn-theme] .slider .slider-handle,
[data-gn-theme] .min-slider-handle,
[data-gn-theme] .max-slider-handle {
  background: var(--gn-accent) !important;
  background-image: none !important;
  border: 2px solid var(--gn-bg);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  width: 18px;
  height: 18px;
  margin-top: -1px;
  opacity: 1;
}
/* The plugin draws ticks at the same 20px as the handle, so a slider read as
   three handles. Scaled about their own centre they become dots and the handle
   is the only thing that looks draggable; no position or margin is touched. */
[data-gn-theme] .slider-tick {
  background: var(--gn-rule);
  background-image: none;
  box-shadow: none;
  transform: scale(0.34);
}
[data-gn-theme] .slider-tick.in-selection { background: var(--gn-accent); background-image: none; }
[data-gn-theme] .slider-tick-label { color: var(--gn-dim); font-size: 12px; }

/* bootstrap-slider.css ships its own risk and condition palette — #4caf50,
   #cc0, #e69500, #e30030, #c4002a — on selectors like
   `.slider.low-risk .slider-tick.in-selection`, which carry four classes and so
   outrank the rules above; that is where the olive ring around the risk handle
   came from. Each level is restated here on the same five-step scale the
   condition labels use, so one ramp now runs through the whole product. The
   app's own meaning is kept exactly: the `-condition` classes are applied
   inverted by PropertyAnalytics.js (value 5, the best condition, adds
   `very-low-condition`), so each one lines up with the risk level of the same
   rank. `very-high-condition` is included with the spelling the script
   actually adds; the stylesheet's `very-high-condtion` is a typo that has
   never matched anything, and is listed too so either spelling resolves. */
[data-gn-theme] .slider.very-low-risk .slider-tick.in-selection,
[data-gn-theme] .slider.very-low-risk .slider-selection.tick-slider-selection,
[data-gn-theme] .slider.very-low-risk .slider-handle,
[data-gn-theme] .slider.very-low-condition .slider-tick.in-selection,
[data-gn-theme] .slider.very-low-condition .slider-selection.tick-slider-selection,
[data-gn-theme] .slider.very-low-condition .slider-handle { background-color: var(--gn-ok) !important; }

[data-gn-theme] .slider.low-risk .slider-tick.in-selection,
[data-gn-theme] .slider.low-risk .slider-selection.tick-slider-selection,
[data-gn-theme] .slider.low-risk .slider-handle,
[data-gn-theme] .slider.low-condition .slider-tick.in-selection,
[data-gn-theme] .slider.low-condition .slider-selection.tick-slider-selection,
[data-gn-theme] .slider.low-condition .slider-handle { background-color: color-mix(in srgb, var(--gn-warn) 45%, var(--gn-ok)) !important; }

[data-gn-theme] .slider.medium-risk .slider-tick.in-selection,
[data-gn-theme] .slider.medium-risk .slider-selection.tick-slider-selection,
[data-gn-theme] .slider.medium-risk .slider-handle,
[data-gn-theme] .slider.medium-condition .slider-tick.in-selection,
[data-gn-theme] .slider.medium-condition .slider-selection.tick-slider-selection,
[data-gn-theme] .slider.medium-condition .slider-handle { background-color: var(--gn-warn) !important; }

[data-gn-theme] .slider.high-risk .slider-tick.in-selection,
[data-gn-theme] .slider.high-risk .slider-selection.tick-slider-selection,
[data-gn-theme] .slider.high-risk .slider-handle,
[data-gn-theme] .slider.high-condition .slider-tick.in-selection,
[data-gn-theme] .slider.high-condition .slider-selection.tick-slider-selection,
[data-gn-theme] .slider.high-condition .slider-handle { background-color: color-mix(in srgb, var(--gn-bad) 55%, var(--gn-warn)) !important; }

[data-gn-theme] .slider.very-high-risk .slider-tick.in-selection,
[data-gn-theme] .slider.very-high-risk .slider-selection.tick-slider-selection,
[data-gn-theme] .slider.very-high-risk .slider-handle,
[data-gn-theme] .slider.very-high-condition .slider-tick.in-selection,
[data-gn-theme] .slider.very-high-condition .slider-selection.tick-slider-selection,
[data-gn-theme] .slider.very-high-condition .slider-handle,
[data-gn-theme] .slider.very-high-condtion .slider-tick.in-selection,
[data-gn-theme] .slider.very-high-condtion .slider-selection.tick-slider-selection,
[data-gn-theme] .slider.very-high-condtion .slider-handle { background-color: var(--gn-bad) !important; }

/* The condition slider is colour-coded: the app paints the track fill and the
   handle with the same five poor-to-excellent values it gives the step label
   below. Left as accent, the control said one thing and its own label said
   another. These restate the app's five colours on this theme's scale — the
   same mapping the labels use further down — so the handle, the fill and the
   wording always agree. Each selector adds an attribute to the base rule above,
   so it out-specifies it; none of them touches the app's own value. */
[data-gn-theme] .slider-selection[style*='rgb(254, 0, 0)'],
[data-gn-theme] .slider .slider-handle[style*='rgb(254, 0, 0)'] { background: var(--gn-bad) !important; }
[data-gn-theme] .slider-selection[style*='rgb(238, 125, 57)'],
[data-gn-theme] .slider .slider-handle[style*='rgb(238, 125, 57)'] { background: color-mix(in srgb, var(--gn-bad) 55%, var(--gn-warn)) !important; }
[data-gn-theme] .slider-selection[style*='rgb(243, 189, 65)'],
[data-gn-theme] .slider .slider-handle[style*='rgb(243, 189, 65)'] { background: var(--gn-warn) !important; }
[data-gn-theme] .slider-selection[style*='rgb(214, 243, 73)'],
[data-gn-theme] .slider .slider-handle[style*='rgb(214, 243, 73)'] { background: color-mix(in srgb, var(--gn-warn) 45%, var(--gn-ok)) !important; }
[data-gn-theme] .slider-selection[style*='rgb(42, 217, 2)'],
[data-gn-theme] .slider .slider-handle[style*='rgb(42, 217, 2)'] { background: var(--gn-ok) !important; }
[data-gn-theme] .tooltip-main,
[data-gn-theme] .tooltip-min,
[data-gn-theme] .tooltip-max { display: none !important; }
/* The unselected steps carry an inline `color: unset` from the app, which
   resolves to `inherit` and pulls them up to full body brightness — five
   labels all shouting at once. !important puts them back to the quiet tone so
   the selected one reads as the selection. The selected step is restated just
   below with an attribute selector, which out-specifies this and wins. */
[data-gn-theme] .step_label {
  font-size: 12px;
  color: var(--gn-dim) !important;
  line-height: 1.35;
  display: block;
  transition: color var(--gn-t);
}
/* The selected condition is marked by an inline colour the app writes from
   JavaScript, on a poor-to-excellent scale chosen years ago for a white panel.
   The five values are restated here on this theme's own scale, the same way the
   risk-of-decline wording is: the step still reads poor -> excellent, and every
   step now passes contrast on every theme. Nothing in the app changes. */
[data-gn-theme] .step_label[style*='rgb(254, 0, 0)'] { color: var(--gn-bad) !important; }
[data-gn-theme] .step_label[style*='rgb(238, 125, 57)'] { color: color-mix(in srgb, var(--gn-bad) 55%, var(--gn-warn)) !important; }
[data-gn-theme] .step_label[style*='rgb(243, 189, 65)'] { color: var(--gn-warn) !important; }
[data-gn-theme] .step_label[style*='rgb(214, 243, 73)'] { color: color-mix(in srgb, var(--gn-warn) 45%, var(--gn-ok)) !important; }
[data-gn-theme] .step_label[style*='rgb(42, 217, 2)'] { color: var(--gn-ok) !important; }
[data-gn-theme] .step_label[style*='rgb('] { font-weight: 600; }
[data-gn-theme] #property_condition .row.text-center { margin-top: 14px; }

/* forecast */
[data-gn-theme] #value_forecast_section { margin-top: 26px; }
[data-gn-theme] #map_group h5,
[data-gn-theme] #verifyPropertyDetails h5,
[data-gn-theme] #highchart-risk-box h5 { margin-bottom: 12px; }
/* The condition panel's heading is input-mode only, so in the result state it
   empties out and that column used to start a line higher than its neighbours.
   Reserving the line keeps the three columns starting together. */
[data-gn-theme] .overview-panels h5 { min-height: 19px; }
[data-gn-theme] #value_forecast_section .property_box,
[data-gn-theme] #highchart-forecast-body {
  background: var(--gn-panel);
  border: 1px solid var(--gn-rule);
  border-radius: var(--gn-r-lg);
  overflow: hidden;
}
[data-gn-theme] .forecast_area {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--gn-rule);
  border-radius: 0;
  padding: 16px 20px;
  height: auto;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
}
[data-gn-theme] .forecast_area .priceyear { padding: 0 !important; }
[data-gn-theme] .forecast_area label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gn-dim);
  font-weight: 600;
  margin: 0;
  display: block;
}
[data-gn-theme] .forecast_area label b,
[data-gn-theme] .forecast_area > div > div > b {
  display: block;
  font-size: 19px;
  font-weight: 460;
  letter-spacing: -0.03em;
  color: var(--gn-text);
  text-transform: none;
  margin-top: 4px;
}
[data-gn-theme] .yeargrowth { font-size: 12.5px; color: var(--gn-muted); margin-top: 3px; }

/* comparables */
[data-gn-theme] #comp_properties_lists { display: flex; flex-wrap: wrap; margin: 0 -8px; }
[data-gn-theme] #comp_properties_lists .card {
  margin: 0 0 16px;
  padding: 0 8px;
}
[data-gn-theme] #comp_properties_lists .card > .comp-streetview-wrap,
[data-gn-theme] #comp_properties_lists .card > .card-body { border-color: var(--gn-rule); }
[data-gn-theme] .comp-streetview-wrap {
  background: var(--gn-track);
  min-height: 150px;
  border-radius: var(--gn-r) var(--gn-r) 0 0;
  overflow: hidden;
  border: 1px solid var(--gn-rule);
  border-bottom: 0;
}
[data-gn-theme] .card-img-top { height: 150px; object-fit: cover; border-radius: 0; }
[data-gn-theme] .streetview-unavailable {
  background: transparent;
  color: var(--gn-dim);
  font-weight: 500;
  font-size: 12.5px;
  padding: 20px;
}
[data-gn-theme] .card-body {
  background: var(--gn-panel);
  color: var(--gn-text);
  border: 1px solid var(--gn-rule);
  border-top: 0;
  border-radius: 0 0 var(--gn-r) var(--gn-r);
  padding: 14px 16px;
}
[data-gn-theme] .card-body .card-title { color: var(--gn-text); font-size: 13.5px; font-weight: 560; margin: 0 0 3px; }
[data-gn-theme] .card-body .card-title small { color: var(--gn-muted); font-weight: 450; }
[data-gn-theme] .card-body h5.card-title {
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: 15px;
  color: var(--gn-text);
  margin: 10px 0 8px;
}
[data-gn-theme] .card-body h5.card-title strong { font-weight: 560; }
[data-gn-theme] .re_calculate,
[data-gn-theme] .card-body .text-danger.re_calculate {
  color: var(--gn-accent) !important;
  font-size: 12.5px;
  font-weight: 560;
  cursor: pointer;
  border-bottom: 1px solid rgba(var(--gn-accent-rgb), 0.4);
}

/* Maps keep their own imagery; only the frame is themed.
   The three panes carry inline height:50%, which needs an explicit height on
   #map_group to resolve. Rather than depend on that, each pane is given a real
   height here (with !important, to beat the inline value), and the group is
   free to size to its content. */
[data-gn-theme] #map_group { height: auto; overflow: hidden; }
[data-gn-theme] #normal_map,
[data-gn-theme] #street_map,
[data-gn-theme] #pano,
[data-gn-theme] #map,
[data-gn-theme] #result-map-container,
[data-gn-theme] #result-street-view {
  overflow: hidden;
  background: var(--gn-track);
}
[data-gn-theme] #map_group #normal_map {
  width: 100% !important;
  height: 304px !important;
  float: none !important;
  border-radius: var(--gn-r-lg) var(--gn-r-lg) 0 0;
}
[data-gn-theme] #map_group #street_map {
  width: calc(50% - 1px) !important;
  height: 192px !important;
  float: left !important;
  margin-top: 2px;
  border-radius: 0 0 0 var(--gn-r-lg);
}
[data-gn-theme] #map_group #pano {
  width: calc(50% - 1px) !important;
  height: 192px !important;
  float: right !important;
  margin-top: 2px;
  border-radius: 0 0 var(--gn-r-lg) 0;
}
[data-gn-theme] #map,
[data-gn-theme] #result-map-container,
[data-gn-theme] #result-street-view { border-radius: var(--gn-r-lg); }
[data-gn-theme] #map { height: 560px; }

/* Google Places suggestions, so the one floating panel matches */
[data-gn-theme] .pac-container,
.pac-container.gn-themed {
  background: var(--gn-panel-2);
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-r);
  box-shadow: var(--gn-shadow);
  margin-top: 4px;
  padding: 4px;
  font-family: var(--gn-font);
  z-index: 2000;
}
[data-gn-theme] .pac-container::after { display: none; }
[data-gn-theme] .pac-item {
  border: 0;
  border-radius: var(--gn-r-sm);
  color: var(--gn-muted);
  font-size: 13px;
  padding: 8px 10px;
  line-height: 1.35;
}
[data-gn-theme] .pac-item:hover,
[data-gn-theme] .pac-item-selected { background: rgba(var(--gn-accent-rgb), 0.14); }
[data-gn-theme] .pac-item-query,
[data-gn-theme] .pac-matched { color: var(--gn-text); font-size: 13.5px; }
[data-gn-theme] .pac-icon { filter: grayscale(1) brightness(1.6); opacity: 0.65; }

/* eval-date panel (markup from the appraisal template) */
[data-gn-theme] .gn-eval-date-panel {
  margin-top: 8px;
  padding: 14px;
  background: var(--gn-panel-2);
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-r);
  box-shadow: var(--gn-shadow);
  position: relative;
  z-index: 20;
}
[data-gn-theme] .gn-eval-date-panel .form-control { margin-bottom: 10px; font-size: 14px; }
[data-gn-theme] .gn-eval-date-label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gn-dim);
}
[data-gn-theme] .gn-eval-date-note { color: var(--gn-dim); font-size: 12px; margin-top: 4px; display: block; }
/* The "more accurate for the last 36 months" hint sits beside Clear and says
   nothing the date picker does not already imply, so it is hidden. The markup
   and its translation stay in place; only the display is suppressed. */
[data-gn-theme] .gn-eval-date-guidance { display: none; }
[data-gn-theme] .gn-eval-date-selected { color: var(--gn-accent); font-weight: 600; font-size: 12px; margin-top: 6px; display: block; }
[data-gn-theme] #eval_date_toggle { text-align: left; white-space: normal; padding-right: 38px; justify-content: flex-start; }
[data-gn-theme] #eval_date_toggle.btn-info { border-color: var(--gn-accent); color: var(--gn-accent); background: rgba(var(--gn-accent-rgb), 0.1); }
[data-gn-theme] .eval-date-result-label,
[data-gn-theme] .eval-date-result-label span,
[data-gn-theme] .eval-date-result-label u { color: var(--gn-muted) !important; font-size: 12px; text-decoration: none !important; }

/* guided-flow highlight */
/* No border-radius here on purpose: the highlight is applied to whatever the
   guided flow points at next — a card, a select, a text field — and each of
   those already carries the right radius. Setting one would square off a card
   the moment it was highlighted. */
[data-gn-theme] .guided-highlight {
  border: 1px solid var(--gn-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--gn-accent-rgb), 0.22) !important;
  animation: gnPulse 2s var(--gn-ease) infinite;
}
@keyframes gnPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--gn-accent-rgb), 0.3); }
  70% { box-shadow: 0 0 0 8px rgba(var(--gn-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--gn-accent-rgb), 0); }
}

/* ===========================================================================
   17. Valuation evidence panel
   ======================================================================== */

[data-gn-theme] .gn-evidence-panel {
  margin: 0 0 24px;
  padding: 20px 22px;
  border: 1px solid var(--gn-rule);
  border-radius: var(--gn-r-lg);
  background: var(--gn-panel);
  box-shadow: none;
}
[data-gn-theme] .gn-evidence-heading { margin-bottom: 18px; gap: 16px; }
[data-gn-theme] .gn-evidence-heading strong { font-size: 17px; font-weight: 580; letter-spacing: -0.02em; color: var(--gn-text); }
[data-gn-theme] .gn-evidence-heading span { color: var(--gn-dim); font-size: 12.5px; margin-top: 3px; }
[data-gn-theme] .gn-evidence-score {
  font-weight: 650;
  font-size: 13px;
  background: rgba(var(--gn-accent-rgb), 0.12);
  border: 1px solid rgba(var(--gn-accent-rgb), 0.4);
  color: var(--gn-accent);
  border-radius: 99px;
  padding: 7px 14px;
  font-variant-numeric: tabular-nums;
}
[data-gn-theme] .gn-evidence-item {
  padding: 12px 14px;
  border-radius: var(--gn-r);
  background: transparent;
  border: 1px solid var(--gn-rule);
}
[data-gn-theme] .gn-evidence-item span {
  color: var(--gn-dim);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}
[data-gn-theme] .gn-evidence-item strong { color: var(--gn-text); font-size: 14px; font-weight: 540; }
[data-gn-theme] .gn-evidence-warnings {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: var(--gn-r);
  background: color-mix(in srgb, var(--gn-warn) 9%, var(--gn-panel));
  border: 1px solid var(--gn-rule);
  border-left: 3px solid var(--gn-warn);
  color: var(--gn-soft);
  font-size: 13px;
}
[data-gn-theme] .gn-evidence-warnings strong { color: var(--gn-text); }

/* ===========================================================================
   18. Charts (CSS only, and scoped away from the PDF export sandbox)
   ======================================================================== */

/* Scoped to .body-content on purpose: chart.getSVG(), which the PDF export uses,
   renders into a sandbox div appended straight to <body>. Keeping these rules
   inside the page content means the exported SVG keeps Highcharts' own metrics
   and colours, so the generated PDF is byte-for-byte what it was before. */
/* This one rule is deliberately NOT scoped to .body-content. Highcharts
   measures every axis label in a sandbox <div> it appends straight to <body>,
   and writes the pixel positions it measured into the SVG it serialises for the
   PDF. body's tightened letter-spacing inherits into that sandbox, so the
   exported plot came out a pixel narrower than the previous build's. Resetting
   the tracking wherever Highcharts renders — in the page and in the sandbox
   alike — makes the exported chart identical to the one 0.2.1 produced. At the
   11px of an axis label the change is about 0.07px per character on screen. */
[data-gn-theme] .highcharts-root { letter-spacing: normal; }

[data-gn-theme] .body-content .highcharts-container,
[data-gn-theme] .body-content .highcharts-root { font-family: var(--gn-font) !important; }
[data-gn-theme] .body-content .highcharts-background { fill: transparent; }
[data-gn-theme] .body-content .highcharts-plot-background,
[data-gn-theme] .body-content .highcharts-plot-border { fill: transparent; stroke: none; }
[data-gn-theme] .body-content .highcharts-grid-line { stroke: var(--gn-rule); stroke-dasharray: 1 5; opacity: 0.55; }
[data-gn-theme] .body-content .highcharts-axis-line,
[data-gn-theme] .body-content .highcharts-tick { stroke: var(--gn-rule); }
[data-gn-theme] .body-content .highcharts-axis-labels text,
[data-gn-theme] .body-content .highcharts-axis-labels tspan {
  fill: var(--gn-dim) !important;
  font-size: 11px !important;
}
[data-gn-theme] .body-content .highcharts-axis-title text,
[data-gn-theme] .body-content .highcharts-axis-title tspan {
  fill: var(--gn-dim) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-gn-theme] .body-content .highcharts-title text { fill: var(--gn-text) !important; }
[data-gn-theme] .body-content .highcharts-credits { display: none; }

/* forecast line in the accent, area fading into the surface */
[data-gn-theme] .body-content .highcharts-series-group .highcharts-areaspline-series .highcharts-graph { stroke: var(--gn-accent); stroke-width: 2; }
[data-gn-theme] .body-content .highcharts-series-group .highcharts-areaspline-series .highcharts-area {
  fill: var(--gn-accent);
  fill-opacity: 0.1;
}
[data-gn-theme] .body-content .highcharts-series-group .highcharts-areaspline-series .highcharts-point {
  fill: var(--gn-panel);
  stroke: var(--gn-accent);
  stroke-width: 1.5;
}
[data-gn-theme] .body-content .highcharts-tooltip-box {
  fill: var(--gn-panel-2);
  stroke: var(--gn-line);
  fill-opacity: 1;
}
[data-gn-theme] .body-content .highcharts-tooltip text,
[data-gn-theme] .body-content .highcharts-tooltip tspan { fill: var(--gn-text) !important; }
[data-gn-theme] .body-content .highcharts-legend-item text { fill: var(--gn-muted) !important; }
[data-gn-theme] .body-content .highcharts-data-labels text,
[data-gn-theme] .body-content .highcharts-data-label text,
[data-gn-theme] .body-content .highcharts-data-label tspan { fill: var(--gn-text) !important; }
/* the risk gauge keeps its own green-to-red band: that scale carries meaning */
[data-gn-theme] .body-content #highchart-risk .highcharts-plot-band { opacity: 0.92; }
[data-gn-theme] .body-content #highchart-risk .highcharts-axis-labels text { fill: var(--gn-dim) !important; }

/* Highcharts draws six vertical grid lines, one horizontal grid line and six
   tick marks straight across this gradient, from a configuration written for a
   white panel. On this surface they chop the band into segments and read as the
   stray rules they are. Hidden here; the bands, the pointer, the value bar and
   the Low/High labels all stay, and no chart option is touched. */
[data-gn-theme] .body-content #highchart-risk .highcharts-grid-line,
[data-gn-theme] .body-content #highchart-risk .highcharts-tick,
[data-gn-theme] .body-content #highchart-risk .highcharts-axis-line { display: none; }

/* The pointer is an unclassed <path> drawn straight into the <svg>, and the
   value bar is the series rect above the gradient. Both arrive #000000 from the
   chart config, which was black-on-white. Both are selected by that fill so the
   rule holds wherever Highcharts puts them in the tree. */
[data-gn-theme] .body-content #highchart-risk svg > path,
[data-gn-theme] .body-content #highchart-risk path[fill='#000000'],
[data-gn-theme] .body-content #highchart-risk rect.highcharts-point {
  fill: var(--gn-text);
  stroke: none;
}

/* ===========================================================================
   19. Overlays: spinner, toast, tour, popovers
   ======================================================================== */

[data-gn-theme] .overlay { background: rgba(var(--gn-bg-rgb), 0.72); backdrop-filter: blur(2px); }
[data-gn-theme] .overlay.show { opacity: 1; }
/* The stock loader is a 70px ring with a 16px border and a 15em top margin,
   which reads as a heavy donut parked below centre. This is a thin track with
   a comet sweeping it: the conic gradient runs from a solid head through a
   tail to nothing, the radial mask cuts the disc down to a 2.5px ring, and the
   flat background shows through the empty part as the track. Rather more than
   half the ring is left as bare track on purpose — an arc that nearly closes
   the circle has no edge to follow, so it reads as a static ring however fast
   it turns. */
[data-gn-theme] .spanner .loader,
[data-gn-theme] .loader {
  width: 40px;
  height: 40px;
  border: 0;
  margin: 0 auto;
  border-radius: 50%;
  background-color: rgba(var(--gn-accent-rgb), 0.18);
  background-image: conic-gradient(
    from 0deg,
    var(--gn-accent) 0deg,
    var(--gn-accent) 65deg,
    rgba(var(--gn-accent-rgb), 0.45) 150deg,
    rgba(var(--gn-accent-rgb), 0) 215deg,
    rgba(var(--gn-accent-rgb), 0) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  animation: gnLoaderSpin 0.8s linear infinite;
}
/* Both ends are stated as rotate(). site.css already gives .loader a
   `transform: translateZ(0)`, so a keyframe list with only a `to` would start
   from that instead: the two transform function lists do not match, the
   browser falls back to interpolating matrices, and a full turn resolves to
   the identity matrix — the animation runs and nothing moves. */
@keyframes gnLoaderSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  [data-gn-theme] .spanner .loader,
  [data-gn-theme] .loader {
    animation: gnLoaderPulse 1.4s var(--gn-ease) infinite;
    background-image: none;
    background-color: var(--gn-accent);
  }
  @keyframes gnLoaderPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
}

[data-gn-theme] .jq-toast-single,
.jq-toast-wrap .jq-toast-single {
  font-family: var(--gn-font);
  border-radius: var(--gn-r);
  box-shadow: var(--gn-shadow);
  font-size: 13.5px;
  padding: 14px 16px;
  border: 1px solid;
}
.jq-toast-wrap .jq-toast-single h2,
.jq-toast-wrap .jq-toast-single h4 { font-family: var(--gn-font); }
.jq-icon-warning { background-color: #3a2f12; border-color: #7a6425; color: #f6e4b4; }
.jq-icon-error { background-color: #3a1620; border-color: #7d2b41; color: #ffd4de; }
.jq-icon-success { background-color: #10301f; border-color: #2a6a46; color: #c8f0db; }
.jq-icon-info { background-color: #0f2b31; border-color: #2a6168; color: #c8edf0; }

[data-gn-theme] .popover,
.popover.gn-themed {
  background: var(--gn-panel-2);
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-r);
  box-shadow: var(--gn-shadow);
  font-family: var(--gn-font);
  font-size: 13px;
  color: var(--gn-text);
  padding: 0;
  max-width: 300px;
}
[data-gn-theme] .popover-title,
[data-gn-theme] .popover .popover-title {
  background: transparent !important;
  border-bottom: 1px solid var(--gn-rule);
  color: var(--gn-text);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--gn-r) var(--gn-r) 0 0;
  padding: 10px 14px;
}
[data-gn-theme] .popover-title:empty { display: none; }
[data-gn-theme] .popover-content,
[data-gn-theme] .popover .popover-content { color: var(--gn-muted); padding: 11px 14px; line-height: 1.5; }
[data-gn-theme] .popover.top > .arrow::after { border-top-color: var(--gn-panel-2); }
[data-gn-theme] .popover.bottom > .arrow::after { border-bottom-color: var(--gn-panel-2); }
[data-gn-theme] .popover.left > .arrow::after { border-left-color: var(--gn-panel-2); }
[data-gn-theme] .popover.right > .arrow::after { border-right-color: var(--gn-panel-2); }
[data-gn-theme] .popover.top > .arrow { border-top-color: var(--gn-line); }
[data-gn-theme] .popover.bottom > .arrow { border-bottom-color: var(--gn-line); }
[data-gn-theme] .popover.left > .arrow { border-left-color: var(--gn-line); }
[data-gn-theme] .popover.right > .arrow { border-right-color: var(--gn-line); }
[data-gn-theme] .property-type-popover { z-index: 99999; }

[data-gn-theme] .tooltip-inner {
  background: var(--gn-panel-2);
  border: 1px solid var(--gn-line);
  color: var(--gn-text);
  border-radius: var(--gn-r-sm);
  font-family: var(--gn-font);
  font-size: 12.5px;
  padding: 7px 10px;
}
[data-gn-theme] .tooltip.top .tooltip-arrow { border-top-color: var(--gn-line); }
[data-gn-theme] .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--gn-line); }

/* guided tour */
[data-gn-theme] .tour.tour-tour,
.tour.tour-tour.gn-themed {
  background: var(--gn-panel-2);
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-r);
  box-shadow: var(--gn-shadow);
  color: var(--gn-text);
  font-family: var(--gn-font);
}
[data-gn-theme] .tour.tour-tour .popover-title {
  background: transparent !important;
  border-bottom: 1px solid var(--gn-rule);
  color: var(--gn-text);
}
[data-gn-theme] .tour-backdrop { background: #03090e; opacity: 0.68; }
[data-gn-theme] .tour-step-background { border-radius: var(--gn-r); }

/* ===========================================================================
   20. Auth pages — the one marketing-weight screen in the portal
   ======================================================================== */

[data-gn-theme] body.view-account .body-content {
  max-width: 1060px;
  margin: 0 auto;
  padding-top: 54px;
}
[data-gn-theme] body.view-account .row > [class*='col-md-offset'] {
  margin-left: 0;
  width: 100%;
  max-width: 460px;
  float: none;
  margin-right: auto;
  margin-left: auto;
}
[data-gn-theme] body.view-account h2 {
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -0.042em;
  margin-bottom: 6px;
}
[data-gn-theme] body.view-account h2 strong { font-weight: 620; }
[data-gn-theme] body.view-account hr {
  border-top-color: var(--gn-rule);
  margin: 20px 0 28px;
  max-width: 460px;
}
[data-gn-theme] body.view-account .form-horizontal .form-group {
  margin: 0 0 16px;
  display: block;
}
[data-gn-theme] body.view-account .form-horizontal .control-label {
  float: none;
  width: 100%;
  text-align: left;
  padding: 0 0 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gn-dim);
}
[data-gn-theme] body.view-account .form-horizontal [class*='col-md-'],
[data-gn-theme] body.view-account .form-horizontal [class*='col-sm-'] {
  width: 100%;
  float: none;
  padding: 0;
  margin: 0;
}
[data-gn-theme] body.view-account .form-horizontal .col-md-offset-3 { margin-left: 0; }
[data-gn-theme] body.view-account .form-control { min-height: 44px; }
[data-gn-theme] body.view-account input[type='submit'].btn {
  width: 100%;
  margin-bottom: 10px;
}
[data-gn-theme] body.view-account .btn-link { display: block; text-align: center; width: 100%; }
[data-gn-theme] body.view-account .checkbox { margin: 4px 0 18px; }
[data-gn-theme] body.view-account .text-muted { font-size: 12.5px; margin-top: 18px; }
[data-gn-theme] body.view-account .alert { margin-bottom: 20px; }
[data-gn-theme] body.view-account-mfa-setup img { border-radius: var(--gn-r); background: #fff; padding: 10px; }
[data-gn-theme] body.view-account p { color: var(--gn-muted); }

/* ===========================================================================
   21. Manage, reports, analytics, off-market, feedback, 404
   ======================================================================== */

[data-gn-theme] #manage-account .form-horizontal .control-label { text-align: left; font-weight: 500; }
[data-gn-theme] #manage-account .form-horizontal .form-group { margin-bottom: 16px; }
[data-gn-theme] .manage-logo-preview { padding: 18px; }
[data-gn-theme] .manage-logo-preview h4 { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gn-dim); margin: 0 0 14px; }
[data-gn-theme] .manage-logo-preview img { max-height: 120px; background: transparent; }
[data-gn-theme] .manage-logo-preview .logo-filename { font-size: 12.5px; color: var(--gn-muted); font-weight: 450; }

[data-gn-theme] .usage-card { max-width: 560px; padding: 20px; margin-top: 16px; }
[data-gn-theme] .usage-title {
  color: var(--gn-dim);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
[data-gn-theme] .usage-value {
  font-size: 34px;
  font-weight: 420;
  letter-spacing: -0.04em;
  color: var(--gn-text);
  margin-bottom: 14px;
  line-height: 1;
}
[data-gn-theme] .usage-value.usage-value--low { color: var(--gn-bad); }
[data-gn-theme] .usage-bar { background: var(--gn-track); border-radius: 99px; height: 8px; overflow: hidden; }
[data-gn-theme] .usage-bar span { border-radius: 99px; background: var(--gn-accent) !important; }
[data-gn-theme] .usage-meta { color: var(--gn-dim); font-size: 12.5px; margin-top: 12px; }

[data-gn-theme] #subscriptonInfo dt { color: var(--gn-dim); }
[data-gn-theme] #subscription-section p strong { color: var(--gn-soft); }

/* reports and analytics: each chart in its own panel */
[data-gn-theme] #reports-results .section,
[data-gn-theme] #analysis-results .row > [class*='col-md-offset'] { margin-bottom: 8px; }
[data-gn-theme] #reports-results .section .container > .row > [class*='col-md-offset'] > h2 {
  font-size: 18px;
  font-weight: 540;
  letter-spacing: -0.02em;
  margin: 28px 0 12px;
}
[data-gn-theme] #reports-results [id^='highchart-'] {
  background: var(--gn-panel);
  border: 1px solid var(--gn-rule);
  border-radius: var(--gn-r-lg);
  padding: 14px 10px 6px;
}
[data-gn-theme] #reports-results h2 span { color: var(--gn-accent); font-weight: 460; }
/* Bootstrap pins these three cards to a flat 175px, which clips them as soon
   as a neighbourhood name wraps. `height: auto` lets them grow; the min-height
   keeps the row level when the content is short, so they read as one band
   rather than three ragged boxes. */
[data-gn-theme] .result-box {
  background: var(--gn-panel);
  border: 1px solid var(--gn-rule);
  border-radius: var(--gn-r-lg);
  padding: 18px;
  height: auto !important;
  min-height: 168px;
  color: var(--gn-text) !important;
}
[data-gn-theme] .result-forecast,
[data-gn-theme] .forecast-header-box,
[data-gn-theme] .result-forecast.result-box { background: var(--gn-panel) !important; color: var(--gn-text) !important; }
[data-gn-theme] .result-box h3,
[data-gn-theme] .nabe-header,
[data-gn-theme] .value-header,
[data-gn-theme] .forecast-header,
[data-gn-theme] .risk-title {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gn-dim);
  font-weight: 600;
  margin: 0 0 10px;
}
[data-gn-theme] .value-dollars { font-size: 26px; font-weight: 440; letter-spacing: -0.035em; color: var(--gn-accent); }
[data-gn-theme] .value-roi,
[data-gn-theme] .value-accuracy,
[data-gn-theme] .forecast-buy,
[data-gn-theme] .forecast-sell,
[data-gn-theme] .nabe-name { color: var(--gn-muted); font-size: 13.5px; margin: 4px 0 0; }
[data-gn-theme] #map-neighbourhood-overlay {
  background: var(--gn-panel-2);
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-r);
  color: var(--gn-text);
  padding: 10px 14px;
}
[data-gn-theme] #map-section #map-search-overlay {
  background: var(--gn-panel-2) !important;
  color: var(--gn-text) !important;
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-r);
  opacity: 1;
  padding: 8px;
  margin: 0 auto;
  width: auto;
  max-width: 420px;
}

/* ---------------------------------------------------------------------------
   bootstrap.css ships two blocks of page-scoped rules — one for
   `body.view-analytics-index`, one for `body.view-propertyanalytics-calculate`
   — that paint ids and so out-specify the class selectors above: a white
   results panel, black body text, dark-red links, and #222328 / #2c2f36 /
   #ff2c59 cards. Every one of them is restated here against the exact same
   selector plus `[data-gn-theme]`, which adds one attribute and therefore wins
   outright; the themed value goes in, the hard-coded colour comes out, and no
   other property of those rules (position, size, spacing) is touched.
   `.gmnoprint div` is deliberately left alone: it belongs to the Google Maps
   controls, not to the portal.
   ------------------------------------------------------------------------ */
[data-gn-theme] body.view-analytics-index #map-neighbourhood-overlay,
[data-gn-theme] body.view-propertyanalytics-calculate #map-neighbourhood-overlay {
  color: var(--gn-text);
  text-shadow: none;
}
[data-gn-theme] body.view-analytics-index #map-search-overlay .input-group-addon,
[data-gn-theme] body.view-propertyanalytics-calculate #map-search-overlay .input-group-addon {
  border-top-left-radius: var(--gn-r);
  border-bottom-left-radius: var(--gn-r);
}
[data-gn-theme] body.view-analytics-index #map-search-overlay .form-control,
[data-gn-theme] body.view-propertyanalytics-calculate #map-search-overlay .form-control {
  border-top-right-radius: var(--gn-r);
  border-bottom-right-radius: var(--gn-r);
}
[data-gn-theme] body.view-analytics-index section#market-analysis,
[data-gn-theme] body.view-propertyanalytics-calculate section#market-analysis {
  color: var(--gn-text);
}
[data-gn-theme] body.view-analytics-index section#analysis-results,
[data-gn-theme] body.view-propertyanalytics-calculate section#analysis-results {
  background-color: transparent;
  color: var(--gn-text);
}
[data-gn-theme] body.view-analytics-index #analysis-results a:not(.btn),
[data-gn-theme] body.view-propertyanalytics-calculate #analysis-results a:not(.btn) {
  color: var(--gn-accent);
}
[data-gn-theme] body.view-analytics-index #analysis-results a:not(.btn):hover,
[data-gn-theme] body.view-propertyanalytics-calculate #analysis-results a:not(.btn):hover {
  color: color-mix(in srgb, var(--gn-accent) 72%, var(--gn-text));
}
[data-gn-theme] body.view-analytics-index #analysis-results div.result-nabe-building,
[data-gn-theme] body.view-analytics-index #analysis-results div.result-value,
[data-gn-theme] body.view-analytics-index #analysis-results div.result-forecast,
[data-gn-theme] body.view-analytics-index #analysis-results div.result-high-chart,
[data-gn-theme] body.view-propertyanalytics-calculate #analysis-results div.result-nabe-building,
[data-gn-theme] body.view-propertyanalytics-calculate #analysis-results div.result-value,
[data-gn-theme] body.view-propertyanalytics-calculate #analysis-results div.result-forecast,
[data-gn-theme] body.view-propertyanalytics-calculate #analysis-results div.result-high-chart {
  background-color: var(--gn-panel);
  color: var(--gn-text);
}
/* the same two blocks also size the text inside those cards */
[data-gn-theme] body.view-analytics-index #analysis-results div.result-nabe-building p.nabe-name,
[data-gn-theme] body.view-analytics-index #analysis-results div.result-nabe-building p.building-address,
[data-gn-theme] body.view-propertyanalytics-calculate #analysis-results div.result-nabe-building p.nabe-name,
[data-gn-theme] body.view-propertyanalytics-calculate #analysis-results div.result-nabe-building p.building-address {
  font-size: 13.5px;
}
[data-gn-theme] body.view-analytics-index #analysis-results div.result-value p.value-dollars,
[data-gn-theme] body.view-propertyanalytics-calculate #analysis-results div.result-value p.value-dollars {
  font-size: 26px;
}

/* Bootstrap drops the top border of a table's first header row. The theme
   wants the same thing — the header sits flush inside a card that already has
   a border — so it says so itself rather than inheriting the result. */
[data-gn-theme] .table > thead:first-child > tr:first-child > th,
[data-gn-theme] .table > caption + thead > tr:first-child > th,
[data-gn-theme] .table > colgroup + thead > tr:first-child > th {
  border-top: 0;
}

[data-gn-theme] #feecback_block {
  border: 1px solid var(--gn-rule) !important;
  border-radius: var(--gn-r-lg);
  background: #fff;
  min-height: 70vh;
}
[data-gn-theme] #feedback-section h2 { margin-bottom: 20px; }

[data-gn-theme] body.notfound .body-content { padding-top: 60px; text-align: center; }
[data-gn-theme] body.notfound h2 { font-size: 34px; }

/* the property-analytics screen keeps its own inline <style>; these win on
   specificity so its hard-coded greys do not punch holes in the theme */
[data-gn-theme] .image-background,
[data-gn-theme] .top-middle-box,
[data-gn-theme] .result-map-box,
[data-gn-theme] .forecast-header-box2 {
  background: var(--gn-panel) !important;
  color: var(--gn-text) !important;
  border: 1px solid var(--gn-rule);
  border-radius: var(--gn-r-lg);
  overflow: hidden;
}
[data-gn-theme] .modal-content { background-color: var(--gn-panel) !important; color: var(--gn-text) !important; }
[data-gn-theme] .modal-body { background-color: transparent !important; }
[data-gn-theme] .dropdown-section .btn.dropdown-toggle { color: var(--gn-text); }
[data-gn-theme] #map-section #map { height: 560px; }

/* off-market placeholder page */
[data-gn-theme] #OffMarketLow,
[data-gn-theme] #OffMarketMid,
[data-gn-theme] #OffMarketHigh { color: var(--gn-accent); font-weight: 560; }

/* ===========================================================================
   22. Utilities the templates rely on
   ======================================================================== */

[data-gn-theme] .lg_no_padding { padding: 0 !important; }
[data-gn-theme] .mt-10 { margin-top: 10px; }
[data-gn-theme] .overview-panels { display: block; }
[data-gn-theme] .fa-question-circle-o,
[data-gn-theme] .fa-info-circle { font-size: 15px; color: var(--gn-dim); }
[data-gn-theme] .option_area { background: var(--gn-panel-2); }
[data-gn-theme] .optional_details { background: var(--gn-panel-2); border-radius: var(--gn-r); cursor: pointer; }
[data-gn-theme] .nav-item { border: 0; }
[data-gn-theme] svg > image { opacity: 1; }

/* Glyphicons and Font Awesome are not both loaded here; draw the handful of
   icons the templates actually use so none of them render as a blank box. */
[data-gn-theme] .fa {
  display: inline-block;
  font-style: normal;
  font-family: var(--gn-font);
  line-height: 1;
  text-align: center;
  width: 1em;
}
[data-gn-theme] .fa-question-circle-o::before { content: '?'; font-weight: 600; font-size: 0.82em; display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; border: 1.3px solid currentColor; border-radius: 50%; }
[data-gn-theme] .fa-info-circle::before { content: 'i'; font-weight: 700; font-size: 0.82em; display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; border: 1.3px solid currentColor; border-radius: 50%; }
[data-gn-theme] .fa-file-pdf-o::before { content: '⤓'; font-size: 1.05em; }
[data-gn-theme] .fa-times::before { content: '×'; font-size: 1.3em; }
[data-gn-theme] .fa-home::before { content: '⌂'; font-size: 1.1em; }
[data-gn-theme] .fa-bed::before { content: '◴'; }
[data-gn-theme] .fa-bath::before { content: '◵'; }
[data-gn-theme] .fa-minus::before { content: '–'; }
[data-gn-theme] .fa-lg { font-size: 1.2em; }

/* ===========================================================================
   23. Responsive
   ======================================================================== */

@media (max-width: 1199px) {
  [data-gn-theme] .result-summary .result-metric h4 { white-space: normal; }
}

/* the bar in its collapsed form: the menu opens underneath it */
@media (max-width: 991px) {
  /* site.css makes .navbar-header a flex row, which cancels the toggle's
     float: right, and only puts the toggle back on the right below 768px — but
     this build collapses at 991px, so between 768 and 991 the toggle came
     first in the DOM and sat flush against the left edge, outside the gutter.
     The header keeps the container's padding and lays itself out explicitly:
     logo left, toggle right, both centred. */
  [data-gn-theme] .navbar-header {
    float: none;
    height: var(--gn-bar-h);
    justify-content: space-between;
    margin-left: 0;
    margin-right: 0;
  }
  [data-gn-theme] .navbar .navbar-header > a { order: 1; }
  [data-gn-theme] .navbar .navbar-toggle {
    order: 2;
    float: none;
    /* mirrors the logo's inset, which is the page gutter */
    margin: 0 28px 0 auto;
    align-self: center;
  }
  [data-gn-theme] .navbar-nav { float: none; margin: 0; }
  [data-gn-theme] .navbar-nav > li { float: none; }
  [data-gn-theme] .navbar-nav > li.gn-portal-lang-switcher { display: block; min-height: 0; padding: 4px 15px; }
  [data-gn-theme] .gn-portal-lang-switcher .gn-portal-lang-pill { margin: 8px 0; }
  [data-gn-theme] .navbar-inverse .navbar-nav > li > a,
  [data-gn-theme] .navbar-inverse .navbar-nav > li > a:visited { min-height: 0; height: auto; display: block; padding: 11px 15px; }
  [data-gn-theme] .navbar-collapse {
    background: var(--gn-bar);
    border-top: 1px solid var(--gn-bar-rule);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
    max-height: calc(100vh - var(--gn-bar-h));
  }
  [data-gn-theme] .navbar-nav .open .dropdown-menu {
    background: var(--gn-bar-hover);
    border: 0;
    box-shadow: none;
    margin: 0 8px 8px;
    border-radius: var(--gn-r);
  }
  [data-gn-theme] .navbar-nav .open .dropdown-menu > li > a { color: var(--gn-bar-text); }
}

/* Below 992px Bootstrap stops floating col-md-*, so the header's single row of
   figures has to become a grid: address across the top, figures two-up, actions
   on their own line. Each figure keeps a rule above it to mark its cell. */
@media (max-width: 991px) {
  [data-gn-theme] .result-summary.property_box { padding: 24px 28px 20px; }
  [data-gn-theme] .result-summary.property_box > .col-md-10 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    row-gap: 20px;
  }
  [data-gn-theme] .result-summary.property_box > .col-md-10 > div { padding: 0; }
  [data-gn-theme] .result-summary.property_box > .col-md-10 > div:first-child {
    grid-column: 1 / -1;
    flex: none;
    padding: 0;
    /* across the full width of a phone a centred address would drift away
       from the figures below it, so it goes back to the gutter here */
    text-align: left;
    align-items: flex-start;
  }
  [data-gn-theme] .result-summary .result-metric {
    border-left: 0 !important;
    border-top: 1px solid var(--gn-rule) !important;
    padding-top: 14px !important;
  }
  [data-gn-theme] .result-summary .result-metric h4 { white-space: normal; }
  [data-gn-theme] .result-summary .result-metric .property_control { margin-top: 8px; padding-top: 0; }
  [data-gn-theme] .gn-result-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 0;
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid var(--gn-rule);
  }
  [data-gn-theme] #new_lookup_text { text-align: right; }
}

@media (max-width: 767px) {
  [data-gn-theme] body.portal { font-size: 15px; }
  [data-gn-theme] .portal-body,
  [data-gn-theme] .body-content { padding-left: 16px; padding-right: 16px; }
  [data-gn-theme] #map-search-overlay.data_area { margin-left: -16px; margin-right: -16px; padding: 12px 16px 18px; }
  [data-gn-theme] .result-summary.property_box {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    padding: 20px 16px 18px;
  }
  [data-gn-theme] .result-summary.property_box > .col-md-10 { column-gap: 16px; row-gap: 18px; }
  /* all three tabs on one line at phone width */
  [data-gn-theme] .nav.nav-tabs > li > a { font-size: 11px; padding: 10px 11px; letter-spacing: 0.07em; }
  [data-gn-theme] .nav.nav-tabs > li:first-child > a { padding-left: 0; }
  [data-gn-theme] #clientInfo_nav .nav-link { padding: 10px 0 10px 10px; }
  /* a wide wordmark set for a desktop bar would otherwise fill a phone screen */
  /* the page gutter narrows below 768px, and the bar and footer follow it */
  [data-gn-theme] .navbar .navbar-brand-image { max-width: 46vw; margin-left: 16px; }
  [data-gn-theme] .navbar .navbar-toggle { margin-right: 16px; }
  [data-gn-theme] .portal-footer .footer_text { padding-left: 16px; padding-right: 16px; }
  [data-gn-theme] #map_group { height: auto; }
  /* these must out-specify the desktop "#map_group #pane" rules above, or the
     side-by-side panes would survive into the phone layout */
  [data-gn-theme] #map_group #normal_map,
  [data-gn-theme] #map_group #street_map,
  [data-gn-theme] #map_group #pano {
    width: 100% !important;
    height: 240px !important;
    float: none !important;
    margin: 0 0 8px !important;
    border-radius: var(--gn-r-lg);
  }
  [data-gn-theme] #map { height: 360px; }
  [data-gn-theme] .modal-dialog { margin: 12px; }
  [data-gn-theme] .table { font-size: 13px; }
  [data-gn-theme] .table > thead > tr > th,
  [data-gn-theme] .table > tbody > tr > td { padding: 10px; }
  [data-gn-theme] h2 { font-size: 24px; }
  [data-gn-theme] .portal-page { padding: 18px 0 40px; }
  [data-gn-theme] #comp_properties_lists .card { width: 100%; }
}

/* ===========================================================================
   24. Motion and print
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  [data-gn-theme] *,
  [data-gn-theme] *::before,
  [data-gn-theme] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  [data-gn-theme] body.portal { background: #fff; color: #000; margin-top: 0; }
  [data-gn-theme] body.portal::before { display: none; }
  [data-gn-theme] .navbar,
  [data-gn-theme] footer,
  [data-gn-theme] .overlay,
  [data-gn-theme] .spanner,
  [data-gn-theme] .gn-result-actions { display: none !important; }
  [data-gn-theme] .property_box,
  [data-gn-theme] .panel,
  [data-gn-theme] .card-body { border-color: #ccc; background: #fff; color: #000; }
}