/* PropertyMetrics NZ — analysis page styles.
   Extracted from analysis.html (P2 monolith split); source order preserved. */


    /* =============================================
       COLOUR SYSTEM — matched to PMNZ logo
       Logo bg: #1b4332 (dark forest green)
       Logo mark: #ffffff (white)
       Site: warm off-white base, logo green accent
    ============================================= */
    :root {
      /* Backgrounds */
      --bg:          #fdfcf9;
      --bg-soft:     #f4f1ec;
      --bg-card:     #ffffff;
      --bg-dark:     #1b4332;   /* exact logo green */

      /* Borders */
      --border:        #e4dfd7;
      --border-strong: #cdc7bc;

      /* Text */
      --text:        #1a1916;
      --text-muted:  #4a4540;
      --text-faint:  #9c9589;
      --text-white:  #ffffff;

      /* Accent — forest green from logo */
      --green:        #1b4332;
      --green-mid:    #2d6a4f;
      --green-light:  #52b788;
      --green-soft:   rgba(27,67,50,0.07);
      --green-border: rgba(27,67,50,0.18);

      /* Amber for Pro badges */
      --amber:        #b45309;
      --amber-soft:   rgba(180,83,9,0.07);
      --amber-border: rgba(180,83,9,0.18);

      /* Danger */
      --red: #b91c1c;

      /* Shadows — warm toned */
      --shadow-sm: 0 1px 3px rgba(26,25,22,0.07), 0 1px 2px rgba(26,25,22,0.04);
      --shadow-md: 0 4px 8px rgba(26,25,22,0.08), 0 2px 4px rgba(26,25,22,0.05);
      --shadow-lg: 0 12px 28px rgba(26,25,22,0.10), 0 4px 8px rgba(26,25,22,0.06);
      --shadow-xl: 0 24px 48px rgba(26,25,22,0.12), 0 8px 16px rgba(26,25,22,0.06);

      /* Radii */
      --r:     10px;
      --r-lg:  16px;
      --r-xl:  20px;
      --r-full: 999px;

      /* Instrument-layer aliases (new chrome uses these; both themes map them) */
      --an-bg:      var(--bg);
      --an-surface: var(--bg-card);
      --an-line:    var(--border);
      --an-accent:  var(--green-mid);
    }

    /* ── Dark instrument theme (Field & Ledger ink green) ──
       The legacy vars are semantic, so re-pointing them themes every
       component below without touching its rules. Tier tokens in
       feas-tokens.css are legal language and stay untouched. */
    html[data-pm-theme="dark"] {
      --bg:          #0f271e;
      --bg-soft:     #163327;
      --bg-card:     #143024;
      --bg-dark:     #0c1f18;

      --border:        rgba(255,255,255,0.10);
      --border-strong: rgba(255,255,255,0.22);

      --text:        #f2f0ea;
      --text-muted:  #c3cdc2;
      --text-faint:  #93a29a;

      --green:        #2d6a4f;
      --green-mid:    #52b788;
      --green-light:  #74c69d;
      --green-soft:   rgba(82,183,136,0.12);
      --green-border: rgba(82,183,136,0.32);

      --amber:        #fbbf24;
      --amber-soft:   rgba(251,191,36,0.10);
      --amber-border: rgba(251,191,36,0.30);

      --red: #f87171;

      --shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
      --shadow-md: 0 4px 10px rgba(0,0,0,0.35);
      --shadow-lg: 0 12px 28px rgba(0,0,0,0.45);
      --shadow-xl: 0 24px 48px rgba(0,0,0,0.55);

      --an-bg:      #0f271e;
      --an-surface: #143024;
      --an-line:    rgba(255,255,255,0.10);
      --an-accent:  #52b788;

      color-scheme: dark;
    }

    /* Print is always the paper theme, whatever the screen shows. */
    @media print {
      html[data-pm-theme="dark"] {
        --bg: #fdfcf9; --bg-soft: #f4f1ec; --bg-card: #ffffff; --bg-dark: #1b4332;
        --border: #e4dfd7; --border-strong: #cdc7bc;
        --text: #1a1916; --text-muted: #4a4540; --text-faint: #9c9589;
        --green: #1b4332; --green-mid: #2d6a4f; --green-light: #52b788;
        --green-soft: rgba(27,67,50,0.07); --green-border: rgba(27,67,50,0.18);
        --amber: #b45309; --amber-soft: rgba(180,83,9,0.07); --amber-border: rgba(180,83,9,0.18);
        --red: #b91c1c;
        color-scheme: light;
      }
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: none; scroll-behavior: smooth; }
    /* Split-pane pages don't scroll the window — the report panel scrolls.
       Embeds and print restore normal document flow. */
    html:not([data-an-embed]) { height: 100%; overflow: hidden; }
    html:not([data-an-embed]) body { height: 100%; overflow: hidden; }
    @media print {
      html:not([data-an-embed]), html:not([data-an-embed]) body {
        height: auto !important; overflow: visible !important;
      }
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; }

    /* =============================================
       NAVBAR
    ============================================= */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 200;
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background 0.35s ease, border-color 0.35s ease;
    }
    .nav.scrolled {
      background: rgba(253,252,249,0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
    }
    /* Nav items white when over photo */
    .nav:not(.scrolled) .brand-property { color: #fff; }
    .nav:not(.scrolled) .brand-metrics   { color: rgba(255,255,255,0.75); }
    .nav:not(.scrolled) .nav-links a     { color: rgba(255,255,255,0.8); }
    .nav:not(.scrolled) .nav-links a:hover { color: #fff; }
    .nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 0;
      font-weight: 800;
      font-size: 22px;
      letter-spacing: -0.03em;
      flex-shrink: 0;
    }
    .brand-logo {
      width: 40px;
      height: 40px;
      border-radius: 9px;
      object-fit: contain;
      display: block;
      box-shadow: var(--shadow-sm);
    }
    .brand-property { color: var(--text); }
    .brand-metrics   { color: var(--green); }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 24px;
      font-size: 14px;
      font-weight: 500;
    }
    .nav-links a { color: var(--text-muted); transition: color 0.15s; }
    .nav-links a:hover { color: var(--text); }

    .btn-ghost {
      padding: 8px 17px;
      border-radius: var(--r-full);
      border: 1.5px solid var(--border-strong);
      background: transparent;
      color: var(--text);
      font-size: 14px;
      font-weight: 500;
      transition: all 0.15s;
    }
    .btn-ghost:hover { background: var(--bg-soft); border-color: var(--green-border); }

    .btn-primary {
      padding: 8px 18px;
      border-radius: var(--r-full);
      border: none;
      background: var(--green);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      transition: all 0.15s;
    }
    .btn-primary:hover { background: var(--green-mid); box-shadow: 0 4px 14px rgba(27,67,50,0.28); }

    /* =============================================
       HERO
    ============================================= */
    #hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100px 24px 80px;
      text-align: center;
      position: relative;
      background:
        linear-gradient(
          to bottom,
          rgba(27,67,50,0.78) 0%,
          rgba(27,67,50,0.52) 45%,
          rgba(27,67,50,0.60) 80%,
          rgba(253,252,249,1.00) 100%
        ),
        url('https://images.unsplash.com/photo-1512017615494-fdf6146235ff?auto=format&fit=crop&w=1920&q=85') center 35% / cover no-repeat;
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 14px;
      border-radius: var(--r-full);
      border: 1px solid var(--green-border);
      background: var(--green-soft);
      color: var(--green);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 30px;
    }
    .kicker-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--green);
      animation: dot-pulse 2.2s ease-in-out infinite;
    }
    @keyframes dot-pulse {
      0%,100% { opacity:1; transform:scale(1); }
      50% { opacity:0.5; transform:scale(0.8); }
    }

    .hero-headline {
      font-size: clamp(40px, 6.5vw, 70px);
      font-weight: 800;
      letter-spacing: -0.035em;
      line-height: 1.07;
      color: #ffffff;
      margin-bottom: 20px;
      max-width: 740px;
      text-shadow: 0 2px 24px rgba(10,30,20,0.35);
    }
    .hero-headline em {
      color: #ffffff;
      font-style: normal;
      position: relative;
    }
    .hero-headline em::after { display: none; }

    .hero-sub {
      font-size: 17px;
      color: rgba(255,255,255,0.82);
      line-height: 1.68;
      margin-bottom: 32px;
      max-width: 460px;
      text-shadow: 0 1px 12px rgba(10,30,20,0.3);
    }

    /* Search */
    .search-wrap {
      width: 100%;
      max-width: 640px;
      position: relative;
      margin-bottom: 14px;
    }
    .search-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--bg-card);
      border: 1.5px solid var(--border-strong);
      border-radius: var(--r-full);
      padding: 7px 7px 7px 22px;
      box-shadow: var(--shadow-lg);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .search-bar:focus-within {
      border-color: var(--green);
      box-shadow: 0 0 0 4px rgba(27,67,50,0.1), var(--shadow-lg);
    }
    .search-icon { color: var(--text-faint); flex-shrink: 0; }
    #addressInput {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-size: 16px;
      color: var(--text);
      padding: 9px 4px;
      min-width: 0;
    }
    #addressInput::placeholder { color: var(--text-faint); }

    .btn-analyse {
      flex-shrink: 0;
      padding: 11px 26px;
      border-radius: var(--r-full);
      border: none;
      background: var(--green);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      transition: background 0.15s, opacity 0.15s;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }
    .btn-analyse:hover:not(:disabled) { background: var(--green-mid); }
    .btn-analyse:disabled { opacity: 0.7; cursor: not-allowed; }

    /* Searching row inside dropdown */
    @keyframes sugspin { to { transform: rotate(360deg); } }
    .sug-searching {
      padding: 12px 18px;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text-muted);
    }
    .sug-spin {
      width: 14px; height: 14px;
      border: 2px solid var(--border);
      border-top-color: var(--green);
      border-radius: 50%;
      animation: sugsin 0.55s linear infinite;
      flex-shrink: 0;
    }
    @keyframes sugsin { to { transform: rotate(360deg); } }

    /* Button spinner (for Analyse button) */
    @keyframes bspin { to { transform: rotate(360deg); } }
    .btn-spinner {
      width: 14px; height: 14px;
      border: 2px solid rgba(255,255,255,0.4);
      border-top-color: #fff;
      border-radius: 50%;
      animation: bspin 0.55s linear infinite;
      flex-shrink: 0;
    }

    /* Autocomplete */
    .suggestions-list {
      position: absolute;
      top: calc(100% + 6px);
      left: 0; right: 0;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-xl);
      z-index: 300;
      overflow: hidden;
      display: none;
    }
    .suggestions-list.open { display: block; }
    .suggestion-item {
      padding: 12px 18px;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      transition: background 0.1s;
      border-bottom: 1px solid var(--border);
    }
    .suggestion-item:last-child { border-bottom: none; }
    .suggestion-item:hover { background: var(--bg-soft); }
    .sug-pin { color: var(--text-faint); flex-shrink: 0; }

    .search-hint { font-size: 13px; color: var(--text-muted); }
    .search-hint strong { color: var(--text); font-weight: 500; }

    /* Scroll cue */
    .scroll-cue {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      color: #000;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      animation: cue-float 2.8s ease-in-out infinite;
    }
    @keyframes cue-float {
      0%,100% { transform:translateX(-50%) translateY(0); opacity:0.55; }
      50% { transform:translateX(-50%) translateY(6px); opacity:0.9; }
    }

    /* =============================================
       SCROLL ANIMATIONS
    ============================================= */
    .fade-up {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .fade-up.in { opacity: 1; transform: translateY(0); }
    .fade-up.d1 { transition-delay: 0.08s; }
    .fade-up.d2 { transition-delay: 0.18s; }
    .fade-up.d3 { transition-delay: 0.28s; }

    /* =============================================
       TRUST STRIP
    ============================================= */
    .trust-strip {
      background: var(--bg-dark);
      padding: 15px 24px;
    }
    .trust-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
    }
    .trust-item {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      color: rgba(255,255,255,0.75);
      font-weight: 500;
      white-space: nowrap;
    }
    .trust-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--green-light);
      flex-shrink: 0;
    }

    /* =============================================
       SECTIONS
    ============================================= */
    .section {
      max-width: 1200px;
      margin: 0 auto;
      padding: 88px 24px;
    }
    .section-center { text-align: center; }
    .section-center .section-sub { margin: 0 auto; }
    .section-kicker {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 12px;
    }
    .section-title {
      font-size: clamp(34px, 4.2vw, 54px);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.08;
      color: var(--text);
      margin-bottom: 16px;
    }
    .section-sub {
      font-size: 16px;
      color: var(--text-muted);
      line-height: 1.68;
      max-width: 500px;
    }
    .section-divider {
      height: 1px;
      background: var(--border);
      max-width: 1200px;
      margin: 0 auto;
    }

    /* HOW IT WORKS */
    .steps {
      margin-top: 48px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .step {
      position: relative;
      background: var(--bg-card);
      border: 1.5px solid var(--green-border);
      border-radius: 18px;
      padding: 34px 28px 30px;
      box-shadow: 0 2px 12px rgba(27,67,50,0.06);
      transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
      cursor: default;
    }
    .step:hover {
      transform: translateY(-7px);
      box-shadow: 0 18px 44px rgba(27,67,50,0.13);
      border-color: var(--green-light);
    }
    .step-num {
      width: 40px; height: 40px;
      border-radius: 11px;
      background: var(--bg-soft);
      border: 1.5px solid var(--green-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      color: var(--green);
      margin-bottom: 20px;
      transition: background 0.26s ease, color 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
    }
    .step:hover .step-num {
      background: var(--green);
      color: #fff;
      border-color: var(--green);
      box-shadow: 0 4px 14px rgba(27,67,50,0.28);
    }
    .step-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
    .step-text { font-size: 14px; color: var(--text-muted); line-height: 1.68; }

    /* FEATURES */
    .features-grid {
      margin-top: 54px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .feature-card {
      background: var(--bg-card);
      border: 1.5px solid var(--green-border);
      border-radius: 18px;
      padding: 32px 28px 28px;
      box-shadow: 0 2px 12px rgba(27,67,50,0.06);
      transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
      cursor: default;
    }
    .feature-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 18px 44px rgba(27,67,50,0.13);
      border-color: var(--green-light);
    }
    .feature-icon-wrap {
      width: 48px; height: 48px;
      border-radius: 12px;
      background: var(--green-soft);
      border: 1.5px solid var(--green-border);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      color: var(--green);
      transition: background 0.26s ease, border-color 0.26s ease, color 0.26s ease, box-shadow 0.26s ease;
    }
    .feature-card:hover .feature-icon-wrap {
      background: var(--green);
      border-color: var(--green);
      color: #fff;
      box-shadow: 0 4px 14px rgba(27,67,50,0.28);
    }
    .feature-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
    .feature-text { font-size: 14px; color: var(--text-muted); line-height: 1.68; }

    /* =============================================
       PRICING
    ============================================= */
    .pricing-grid {
      margin-top: 54px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      align-items: start;
    }
    .pricing-card {
      background: var(--bg-card);
      border: 1.5px solid var(--border);
      border-radius: var(--r-xl);
      padding: 28px;
      box-shadow: var(--shadow-sm);
      position: relative;
    }
    .pricing-card.featured {
      border-color: var(--green);
      box-shadow: 0 0 0 1px var(--green), var(--shadow-lg);
      background: #fff;
    }
    .pricing-pop {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--green);
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 4px 14px;
      border-radius: var(--r-full);
      white-space: nowrap;
    }
    .pricing-tier { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 10px; }
    .pricing-price {
      font-size: 46px;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--text);
      margin-bottom: 4px;
    }
    .pricing-price sup { font-size: 20px; font-weight: 700; vertical-align: super; letter-spacing: 0; }
    .pricing-price sub { font-size: 15px; font-weight: 500; color: var(--text-muted); vertical-align: baseline; }
    .pricing-period { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
    .pricing-hr { height: 1px; background: var(--border); margin-bottom: 18px; }
    .pricing-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-bottom: 22px;
    }
    .pricing-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
    .pl-y { color: var(--green); font-weight: 700; flex-shrink: 0; }
    .pl-n { color: var(--text-faint); flex-shrink: 0; }
    .btn-plan {
      width: 100%;
      padding: 11px;
      border-radius: var(--r-full);
      font-size: 14px;
      font-weight: 600;
      transition: all 0.15s;
      border: 1.5px solid var(--border-strong);
      background: transparent;
      color: var(--text);
    }
    .btn-plan.featured { background: var(--green); border-color: var(--green); color: #fff; }
    .btn-plan:hover { opacity: 0.85; }

    /* =============================================
       FOOTER
    ============================================= */
    .footer, .results-footer {
      background: var(--bg-dark);
      padding: 56px 24px 32px;
    }
    /* In results view, footer matches the report canvas — no seam */
    .results-footer {
      background: #1b4332;
    }
    .footer {
      border-top: 1px solid rgba(255,255,255,0.45);
    }
    .footer-inner { max-width: 1200px; margin: 0 auto; }
    .footer-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 56px;
      margin-bottom: 44px;
      flex-wrap: wrap;
    }
    .footer-brand { max-width: 270px; }
    .footer-brand-logo {
      width: 100px; height: 100px;
      border-radius: 4px;
      object-fit: contain;
      margin-bottom: 16px;
      margin-left: 0;
      display: block;
    }
    .footer-brand p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.65; }
    .footer-cols { display: flex; gap: 52px; flex-wrap: wrap; }
    .footer-col-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.9); margin: 0 0 14px; }
    .footer-col-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-col-links a { font-size: 13px; color: rgba(255,255,255,0.5); transition: color 0.15s; }
    .footer-col-links a:hover { color: rgba(255,255,255,0.9); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 12px;
      color: rgba(255,255,255,0.35);
    }
    .footer-version { color: rgba(255,255,255,0.3); font-size: 11px; text-decoration: none; letter-spacing: 0.05em; transition: color 0.15s; font-family: monospace; }
    .footer-version:hover { color: #52b788; }

    /* =============================================
       RESULTS VIEW
    ============================================= */
    #results { display: none; }
    #results.active { display: block; }

    /* Nav results mode — transparent overlay, 3-column grid */
    .nav.results-mode {
      background: transparent;
      backdrop-filter: none; -webkit-backdrop-filter: none;
      border-bottom: none;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }
    .nav.results-mode .brand,
    .nav.results-mode .nav-addr-center,
    .nav.results-mode .widget-btn,
    .nav.results-mode .menu-btn { pointer-events: auto; }
    .nav.results-mode.nav-hidden { opacity: 0; pointer-events: none; }
    /* ── Results mode: solid white SaaS top app bar ── */
    .nav.results-mode {
      background: #ffffff;
      border-bottom: 1px solid var(--border);
      box-shadow: 0 4px 16px -10px rgba(0,0,0,0.18);
      /* Opaque bar now — re-enable clicks across the whole nav (the old transparent
         nav used pointer-events:none so map clicks passed through it). Without this
         the address search pill isn't clickable. */
      pointer-events: auto;
    }
    .nav.results-mode .nav-inner { pointer-events: auto; }
    .nav.results-mode .nav-inner {
      max-width: none;
      padding: 0 18px;
      height: 64px;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .nav.results-mode .nav-links      { display: none; }
    .nav.results-mode .brand          { flex-shrink: 0; }
    .nav.results-mode .brand-property { color: var(--green); text-shadow: none; }
    .nav.results-mode .brand-metrics  { color: var(--text-muted); text-shadow: none; }
    .nav.results-mode .menu-btn       { color: var(--text); }

    /* Center: address search pill */
    /* The address pill IS the new-search trigger (a button that opens the modal) */
    .nav-search {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      max-width: 560px;
      margin: 0 auto;
      min-width: 0;
      background: var(--bg-soft);
      border: 1px solid var(--border);
      border-radius: var(--r-full);
      padding: 7px 8px 7px 14px;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      transition: background .15s, border-color .15s, box-shadow .15s;
    }
    .nav-search:hover {
      background: #fff;
      border-color: var(--border-strong);
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }
    .nav-search-pin { display: flex; flex-shrink: 0; color: var(--green); }
    .nav-search-addr {
      flex: 1;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      min-width: 0;
    }
    /* Right-side search icon — visual cue only; clicks fall through to the pill */
    .nav-search-clear {
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      width: 26px; height: 26px;
      border-radius: 50%;
      background: rgba(0,0,0,0.05); color: var(--text-muted);
      pointer-events: none;
      transition: background .15s, color .15s;
    }
    .nav-search:hover .nav-search-clear { background: var(--green); color: #fff; }

    /* Right: action buttons */
    .nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .nav-act-btn {
      display: flex; align-items: center; gap: 7px;
      font-family: inherit; font-size: 13px; font-weight: 600;
      color: var(--text); background: #fff;
      border: 1px solid var(--border-strong);
      border-radius: 11px; padding: 8px 13px;
      cursor: pointer; white-space: nowrap;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: background .15s, border-color .15s, box-shadow .15s;
    }
    .nav-act-btn svg { color: var(--green); flex-shrink: 0; }
    button.nav-act-btn:hover { background: var(--bg-soft); box-shadow: 0 2px 7px rgba(0,0,0,0.08); }
    /* LINZ is an attribution tag, not a button — flat pill, no shadow, no hover */
    .nav-act-linz {
      cursor: default;
      background: var(--green-soft);
      border: 1px solid var(--green-border);
      color: var(--green);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 5px 11px;
      border-radius: 999px;
      box-shadow: none;
    }

    /* Desktop split layout only: the right "Quick Stats" panel is 380px wide, so the
       map's right edge sits at (viewport − 380px). Right-align the search pill to that
       edge by making the actions block fill the 380px right strip (minus nav padding). */
    @media (min-width: 901px) {
      .nav.results-mode .nav-search  { margin-left: auto; margin-right: 0; }
      /* 380px panel − 18px nav padding − 16px flex gap = 346px so the pill's right
         edge lands exactly on the map/panel boundary. */
      .nav.results-mode .nav-actions { width: 346px; justify-content: flex-end; }
    }


    /* ── Instrument split: persistent map pane + scrolling report panel ── */
    .an-split {
      position: relative;
      margin-top: 64px;                 /* clear the fixed app bar */
      height: calc(100dvh - 64px);
      display: flex;
      overflow: hidden;
      background: var(--bg);
    }
    .an-map-pane {
      flex: 1;
      position: relative;
      min-width: 0;
      background: #0c1a12;              /* ink under the aerial while tiles load */
    }
    .an-panel {
      width: min(560px, 46vw);
      min-width: 480px;
      flex-shrink: 0;
      height: 100%;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--bg);
      border-left: 1px solid var(--border);
      display: flex;
      flex-direction: column;
    }
    .an-panel > * { flex-shrink: 0; }
    #map { background: #ddd9d0; position: absolute; inset: 0; }

    .map-loader {
      position: absolute; inset: 0; z-index: 10;
      background: #0c1a12;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 14px;
      opacity: 1; transition: opacity 0.6s ease;
      pointer-events: none;
    }
    .map-loader.hidden { opacity: 0; }
    .map-loader-ring {
      width: 38px; height: 38px;
      border: 3px solid rgba(82,183,136,0.2);
      border-top-color: #52b788;
      border-radius: 50%;
      animation: map-spin 0.8s linear infinite;
    }
    @keyframes map-spin { to { transform: rotate(360deg); } }
    .map-loader-text { color: #74c69d; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; }

    /* Widget toggle button — hidden in split layout */
    .widget-btn { display: none; }

    /* Mega menu */
    .menu-btn { width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,0.3); border:1.5px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; padding:0; color:#fff; transition:background 0.2s; }
    .menu-btn:hover { background:rgba(0,0,0,0.45); }
    .menu-btn .icon-bars { display:block; }
    .menu-btn .icon-x   { display:none; }
    .menu-btn.open .icon-bars { display:none; }
    .menu-btn.open .icon-x   { display:block; }
    .mega-overlay { position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000; background:rgba(0,0,0,0.35); opacity:0; pointer-events:none; transition:opacity 0.25s; }
    .mega-overlay.open { opacity:1; pointer-events:all; }
    .mega-panel { position:fixed; top:14px; right:clamp(12px,2.5vw,28px); width:min(500px,calc(100vw - 24px)); z-index:2001; background:#ffffff; border-radius:20px; border:1px solid rgba(0,0,0,0.08); box-shadow:0 12px 48px rgba(0,0,0,0.14),0 2px 8px rgba(0,0,0,0.06); overflow:hidden; opacity:0; transform:translateY(-12px); pointer-events:none; transition:opacity 0.25s cubic-bezier(0.22,1,0.36,1),transform 0.25s cubic-bezier(0.22,1,0.36,1); }
    .mega-panel.open { opacity:1; transform:translateY(0); pointer-events:all; }
    .mega-scroll { max-height:calc(100vh - 30px); overflow-y:auto; }
    .mega-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:16px 16px 8px; }
    .mega-grid-item { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 8px; border-radius:12px; text-decoration:none; transition:background 0.15s; }
    .mega-grid-item:hover { background:#f5f5f4; }
    .mega-grid-icon { width:52px; height:52px; border-radius:13px; background:#f2f2f0; display:flex; align-items:center; justify-content:center; }
    .mega-grid-item:hover .mega-grid-icon { background:#e8e8e6; }
    .mega-grid-name { font-size:13px; font-weight:600; text-align:center; line-height:1.3; color:#1a1a1a; }
    .mega-bottom { margin:4px 16px 16px; background:#f0f9f4; border-radius:14px; padding:18px 20px; display:flex; align-items:center; gap:14px; }
    .mega-bottom-icon { width:44px; height:44px; border-radius:50%; background:#d8f0e3; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .mega-bottom-text { flex:1; }
    .mega-bottom-title { font-size:15px; font-weight:700; color:#1a1a1a; margin-bottom:3px; }
    .mega-bottom-sub { font-size:13px; color:#6b7280; }
    .mega-bottom-btn { display:inline-flex; align-items:center; gap:5px; padding:10px 18px; border-radius:999px; background:#1b4332; color:#fff; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; flex-shrink:0; transition:background 0.15s; }
    .mega-bottom-btn:hover { background:#2d6a4f; }
    .mega-calc-row { margin:0 16px 8px; border:1px solid #ece8e3; border-radius:12px; overflow:hidden; }
    .mega-calc-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; padding:11px 16px; background:none; border:none; cursor:pointer; font-size:13px; font-weight:600; color:#1a1a1a; text-align:left; font-family:inherit; }
    .mega-calc-toggle:hover { background:#f8f7f5; }
    .mega-calc-chevron { flex-shrink:0; transition:transform 0.22s ease; }
    .mega-calc-row.open .mega-calc-chevron { transform:rotate(180deg); }
    .mega-calc-links { display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:0 8px; max-height:0; overflow:hidden; transition:max-height 0.25s ease, padding 0.22s ease; }
    .mega-calc-row.open .mega-calc-links { max-height:200px; padding-bottom:8px; }
    .mega-calc-link { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; font-size:12px; font-weight:500; color:#4a4540; text-decoration:none; transition:background 0.12s; }
    .mega-calc-link:hover { background:#f0f0ee; color:#1a1a1a; }
    @media (max-width:540px) { .mega-panel { right:10px; border-radius:16px; } .mega-grid-icon { width:44px; height:44px; border-radius:10px; } .mega-grid-name { font-size:12px; } .mega-bottom { flex-wrap:wrap; } .mega-bottom-btn { width:100%; justify-content:center; } }

    /* Panel header — the old quick-stats drawer, now the instrument head
       at the top of the report panel (same element, same ids). */
    .an-panel-head {
      position: relative;
      background: var(--bg-card);
      border-bottom: 1px solid var(--border);
      display: flex; flex-direction: column;
    }
    .an-panel-head.open { right: auto; }
    .drawer-header {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 14px 10px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .drawer-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); flex: 1; }
    .drawer-close {
      width: 26px; height: 26px;
      border: none; background: var(--bg-soft); border-radius: 50%;
      cursor: pointer; display: none; align-items: center; justify-content: center;
      color: var(--text-muted); transition: all 0.15s;
    }
    .drawer-close:hover { background: var(--border); color: var(--text); }
    .drawer-stats {
      padding: 14px 18px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .drawer-stat {
      background: var(--bg-soft); border: 1px solid var(--border);
      border-radius: var(--r); padding: 11px 12px;
      transition: border-color 0.15s, background 0.15s;
    }
    .drawer-stat:hover { background: #fff; border-color: var(--green-border); }
    .ds-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 4px; }
    .ds-value { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1; }
    .ds-value.pos  { color: var(--green); }
    .ds-value.warn { color: #b45309; }
    .ds-value.load { color: var(--text-faint); font-size: 12px; font-weight: 600; }
    .ds-sub { font-size: 10px; color: var(--text-faint); margin-top: 3px; }
    .drawer-nav { padding: 10px 18px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
    .drawer-link {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 12px; border-radius: var(--r);
      font-size: 13px; font-weight: 600; color: var(--text);
      cursor: pointer; transition: all 0.15s;
      border: none; background: none; width: 100%; text-align: left;
    }
    .drawer-link:hover { background: var(--bg-soft); color: var(--green); }
    .drawer-link svg { flex-shrink: 0; opacity: 0.35; }
    /* leading icon chip on each quick-link */
    .drawer-link { justify-content: flex-start; gap: 11px; }
    .drawer-link > svg:last-child { margin-left: auto; }
    .dl-ic {
      width: 27px; height: 27px; border-radius: 8px; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--green-soft); color: var(--green);
      transition: background 0.15s, color 0.15s;
    }
    .dl-ic svg { width: 15px; height: 15px; opacity: 1 !important; }
    .drawer-link:hover .dl-ic { background: var(--green); color: #fff; }
    .drawer-link.portfolio-link .dl-ic { background: var(--green); color: #fff; }
    .drawer-nav-sep { height: 1px; background: var(--border); margin: 6px 0; }

    .drawer-link.portfolio-link { color: var(--green); font-weight: 700; }
    .drawer-link.portfolio-link:hover { background: var(--green-soft); }
    .drawer-link.portfolio-link svg { opacity: 0.7; }
    /* Report trigger bar */
    @keyframes bar-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }
    .report-bar {
      display: none;                    /* retired: the panel always shows the report */
      height: 48px;
      background: #1b4332;
      color: rgba(255,255,255,0.92);
      align-items: center;
      justify-content: center;
      padding: 0 28px;
      font-size: 13px; font-weight: 700;
      cursor: pointer; z-index: 10;
      transition: background 0.2s;
      user-select: none;
      flex-shrink: 0;
      border-top: 1px solid rgba(82,183,136,0.35);
    }
    .report-bar:hover { background: #2d6a4f; }
    /* page-level scroll toggle removed on analysis — the report bar does this job */
    #scrollFab { display: none !important; }
    .report-bar-left {
      display: flex; align-items: center; gap: 9px;
      letter-spacing: 0.06em; text-transform: uppercase;
    }
    .report-bar-left svg { animation: bar-bounce 2.2s ease-in-out infinite; }
    .report-bar-addr {
      font-size: 13px; font-weight: 600;
      color: rgba(255,255,255,0.65);
      letter-spacing: 0;
      text-transform: none;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      max-width: 55%;
    }

    /* ── Bedroom breakdown ───────────────────────────────────── */
    .br-section-label {
      font-size: 9px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.14em; color: #555; margin: 28px 0 10px;
      display: flex; align-items: center; gap: 8px;
    }
    .bedrooms-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border: 1.5px solid #000;
      border-radius: 0;
      overflow: hidden;
      margin-bottom: 24px;
    }
    .br-cell {
      background: #ffffff;
      border: none;
      border-right: 1px solid #000;
      border-radius: 0;
      padding: 18px 16px 16px;
      text-align: center;
      box-shadow: none;
    }
    .br-cell:nth-child(even) { background: #f9f7f4; }
    .br-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #555; margin-bottom: 10px; }
    .br-value { font-size: 19px; font-weight: 800; color: #111; letter-spacing: -0.025em; }

    /* ── Full report ─────────────────────────────────────────── */
    .full-report { background: #1b4332; overflow: hidden; padding: 0 24px 56px; }

    @keyframes save-pop { 0%{transform:scale(1)} 40%{transform:scale(1.12)} 100%{transform:scale(1)} }

    /* ── Drawer save button ──────────────────────────────────── */
    .drawer-save-btn {
      display: flex; align-items: center; gap: 5px;
      padding: 5px 13px;
      border-radius: var(--r-full);
      border: 1.5px solid var(--green-border);
      background: var(--green-soft);
      color: var(--green);
      font-size: 12px; font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .drawer-save-btn:hover { background: var(--green); color: #fff; border-color: var(--green); }
    .drawer-save-btn.saved { background: var(--green); color: #fff; border-color: var(--green); }
    .drawer-save-btn.saved:hover { background: var(--green-mid); border-color: var(--green-mid); }

    /* ── Report document — all sections form one white document ── */
    .report-section {
      max-width: 1100px; margin: 0 auto;
      padding: 36px 52px 32px;
      background: #ffffff;
      border-radius: 0;
      box-shadow: none;
      border-left: 1.5px solid #000;
      border-right: 1.5px solid #000;
      border-bottom: 1px solid #000;
      border-top: none;
      color: #000;
    }
    /* First section: top border opens the document */
    section.report-section:first-of-type {
      border-top: 1.5px solid #000;
      border-radius: 0;
      margin-top: 28px;
    }
    /* Last section: bottom border closes the document */
    section.report-section:last-of-type {
      border-bottom: 1.5px solid #000;
      border-radius: 0;
    }

    /* Chapter heading */
    .report-section-title {
      font-size: 10px; font-weight: 800; letter-spacing: 0.18em;
      text-transform: uppercase; color: #222;
      margin-bottom: 24px;
      padding-bottom: 11px;
      border-bottom: 2px solid #1b4332;
      display: flex; align-items: center; gap: 10px;
    }
    .report-section-title::before { display: none; }

    /* ── Metric table grid — internal borders, no card chrome ── */
    .report-metrics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 0;
      border: 1.5px solid #000;
      border-radius: 0;
      overflow: hidden;
      margin-bottom: 24px;
    }

    /* Top controls — nav controls on top-left; strip is top-right.
       Vertical stack pinned to the very top-left corner of the map. */
    .maplibregl-ctrl-top-left  { top: 12px !important; display: flex; flex-direction: column; align-items: flex-start; }
    .maplibregl-ctrl-top-right { top: 76px !important; }

    /* Bottom controls */
    .maplibregl-ctrl-bottom-right { bottom: 10px !important; }
    .maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin-bottom: 0 !important; margin-right: 10px !important; }
    /* gap between the fullscreen button and the © LINZ attribution below it */
    .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { margin-bottom: 8px !important; }
    .maplibregl-ctrl-bottom-left  { bottom: 10px !important; }
    .maplibregl-ctrl-bottom-left  .maplibregl-ctrl { margin-bottom: 0 !important; }

    /* Hide built-in attribution (shown in custom strip instead) */
    /* Compact map attribution (ⓘ that expands) — required to credit the LINZ basemaps */
    .maplibregl-ctrl-attrib {
      background: rgba(255,255,255,0.88) !important;
      backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
      border: 1px solid rgba(27,67,50,0.10) !important;
      border-radius: 9px !important;
      box-shadow: 0 1px 4px rgba(0,0,0,0.10) !important;
    }
    .maplibregl-ctrl-attrib-inner { font-size: 10px !important; color: #555 !important; }
    .maplibregl-ctrl-attrib-inner a { color: #1b4332 !important; }
    .maplibregl-ctrl-attrib-button { background-color: transparent !important; }

    /* Hide zoom buttons — scroll/pinch to zoom */
    .maplibregl-ctrl-zoom-in,
    .maplibregl-ctrl-zoom-out { display: none !important; }

    /* ── Frosted-glass map controls (premium look over default MapLibre chrome) ── */
    .maplibregl-ctrl-group {
      background: rgba(255,255,255,0.9) !important;
      backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
      border: 1px solid rgba(27,67,50,0.10) !important;
      border-radius: 14px !important;
      box-shadow: 0 10px 28px -10px rgba(15,40,29,0.35), 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.7) !important;
      overflow: hidden;
    }
    .maplibregl-ctrl-group button {
      width: 42px !important;
      height: 42px !important;
      color: var(--green) !important;
      background: transparent !important;
      transition: background 0.15s;
    }
    .maplibregl-ctrl-group button + button { border-top: 1px solid rgba(27,67,50,0.08) !important; }
    .maplibregl-ctrl-group button:hover { background: rgba(27,67,50,0.08) !important; }
    .maplibregl-ctrl-group button:active svg { transform: scale(0.88); }
    .maplibregl-ctrl-group button svg { width: 18px; height: 18px; transition: transform 0.15s cubic-bezier(0.22,1,0.36,1); }
    .maplibregl-ctrl-top-left .maplibregl-ctrl,
    .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 0 0 10px 10px !important; }

    /* ── Map top-right strip: Address pill | New search | LINZ ── */
    .map-top-strip {
      position: absolute;
      top: 0;
      right: 10px;
      height: 66px;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .map-tpill {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,0.88);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      border: none;
      border-radius: var(--r-full);
      box-shadow: 0 1px 6px rgba(0,0,0,0.18);
      white-space: nowrap;
      font-family: inherit;
      color: var(--text);
    }
    .map-tpill-addr {
      padding: 6px 13px 6px 10px;
      font-size: 12px;
      font-weight: 600;
      max-width: 260px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .map-tpill-addr svg { flex-shrink: 0; color: var(--green); }
    .map-tpill-newsearch {
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
    }
    .map-tpill-newsearch:hover { background: rgba(255,255,255,1); }
    .map-tpill-linz {
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
    }

    /* Rotate 360° hint pill — sits clear above the fullscreen + attribution stack
       (attribution ~24px + fullscreen 44px from bottom:10 puts that stack's top
        at ~78px, so the pill starts at 86px for an even gap) */
    .map-rotate-pill {
      position: absolute;
      bottom: 86px;
      right: 10px;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
      border: 1px solid rgba(27,67,50,0.10);
      border-radius: var(--r-full);
      padding: 6px 13px 6px 10px;
      box-shadow: 0 10px 28px -10px rgba(15,40,29,0.35), 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
      font-size: 12px;
      font-weight: 700;
      color: var(--green);
      cursor: pointer;
      user-select: none;
      transition: background 0.15s, transform 0.2s cubic-bezier(0.22,1,0.36,1);
    }
    .map-rotate-pill:hover { background: rgba(255,255,255,1); transform: translateY(-1px); }
    .map-rotate-pill:active { transform: translateY(0) scale(0.97); }
    .map-rotate-pill svg { flex-shrink: 0; }

    /* Mobile-only search button — hidden on desktop */
    .map-search-mobile { display: none; }

    /* Surrounding parcels — floating bottom-left card */
    .parcel-controls {
      position: absolute;
      bottom: 14px;
      left: 14px;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 16px;
      padding: 12px 14px;
      box-shadow: 0 10px 26px -10px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.10);
      border: 1px solid rgba(0,0,0,0.06);
    }
    .parcel-toggle-btn {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      white-space: nowrap;
    }
    .parcel-toggle-btn svg { color: var(--text-muted); transition: color 0.15s; flex-shrink: 0; }
    .parcel-toggle-btn.active svg { color: var(--green); }
    /* on/off switch (track = ::after, knob = ::before) */
    .parcel-toggle-btn::after {
      content: '';
      margin-left: auto;
      width: 34px; height: 20px;
      border-radius: 999px;
      background: var(--border-strong);
      transition: background 0.18s;
      flex-shrink: 0;
    }
    .parcel-toggle-btn::before {
      content: '';
      position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
      width: 16px; height: 16px; border-radius: 50%;
      background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.28);
      transition: right 0.18s;
      z-index: 1;
    }
    .parcel-toggle-btn.active::after  { background: var(--green); }
    .parcel-toggle-btn.active::before { right: 2px; }
    .parcel-radii {
      display: none;
      align-items: center;
      gap: 6px;
    }
    .parcel-radii.visible { display: flex; }
    .radius-pill {
      flex: 1;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 10px;
      border: 1px solid var(--border-strong);
      background: #fff;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s;
    }
    .radius-pill:hover { border-color: var(--green-border); color: var(--text); }
    .radius-pill.active { background: var(--green); color: #fff; border-color: var(--green); }

    /* Radius ring label (HTML Marker — no glyph needed) */
    .radius-label-badge {
      background: rgba(253,252,249,0.93);
      border: 1.5px solid var(--green-light);
      border-radius: 5px;
      padding: 2px 8px;
      font-size: 11px;
      font-weight: 700;
      color: var(--green);
      pointer-events: none;
      white-space: nowrap;
      box-shadow: 0 1px 4px rgba(0,0,0,0.15);
      margin-bottom: 4px;
    }

    /* ── Metric cards ────────────────────────────────────────── */
    .metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
    .metric {
      background: #ffffff;
      border: none;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      border-radius: 0;
      padding: 20px 22px 18px;
      position: relative;
      overflow: visible;
      box-shadow: none;
      transition: background 0.12s;
    }
    .metric:nth-child(even) { background: #f9f7f4; }
    .metric:hover { background: #f2efe9; }
    .metric-label {
      font-size: 9px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.12em; color: #555; margin-bottom: 8px;
    }
    .metric-value { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: #111; }
    .metric-sub { font-size: 11px; color: #666; margin-top: 6px; }
    .metric-value.pos { color: #1a7a4a; }
    .metric-value.neg { color: var(--red); }
    .metric-value.load { color: var(--text-faint); font-size: 15px; font-weight: 600; animation: pmLoadPulse 1.15s ease-in-out infinite; }
    @keyframes pmLoadPulse { 0%,100% { opacity: 0.45; } 50% { opacity: 0.9; } }
    /* shared inline spinner */
    .pm-spin { display:inline-block; width:13px; height:13px; border:2px solid rgba(27,67,50,0.18); border-top-color:#1b4332; border-radius:50%; animation:pm-spin .7s linear infinite; vertical-align:-2px; }
    @keyframes pm-spin { to { transform: rotate(360deg); } }
    .rent-trend-loading { display:flex; align-items:center; gap:10px; height:56px; font-size:12px; font-weight:600; color:#9c9589; }

    /* ── Score bars ──────────────────────────────────────────── */
    .tab-intro { font-size: 14px; color: #333; margin-bottom: 24px; line-height: 1.6; }
    .score-row {
      margin-bottom: 0;
      background: #ffffff;
      border: none;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      border-radius: 0;
      padding: 18px 4px;
    }
    .score-row:last-of-type { border-bottom: none; padding-bottom: 4px; }
    .score-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .score-lbl { font-size: 14px; font-weight: 600; color: #222; }
    .score-val {
      font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
      color: #111;
      background: #f0ece5;
      padding: 2px 14px;
      border-radius: var(--r-full);
      min-width: 56px;
      text-align: center;
    }
    .score-val.amb-val { color: #111; background: #f0ece5; }
    .score-track {
      height: 8px; background: #ede9e2;
      border-radius: var(--r-full); overflow: hidden;
    }
    .score-fill {
      height: 100%; border-radius: var(--r-full);
      background: linear-gradient(90deg, var(--green), #52b788);
      transition: width 1.1s cubic-bezier(0.4,0,0.2,1); width: 0%;
    }
    .score-fill.amb { background: linear-gradient(90deg, #d97706, #f59e0b); }
    .score-fill.seismic-high { background: linear-gradient(90deg, #1a7a4a, #52b788); }
    .score-fill.seismic-med  { background: linear-gradient(90deg, #d97706, #f59e0b); }
    .score-fill.seismic-low  { background: linear-gradient(90deg, #b91c1c, #ef4444); }

    /* ── Nearby Amenities grid ───────────────────────────────── */
    .amenity-grid {
      display: flex; flex-direction: column;
      gap: 8px; margin-bottom: 12px;
    }
    .amenity-col { width: 100%; display: flex; flex-direction: column; gap: 8px; }
    .amenity-item-wrap { display: flex; flex-direction: column; }
    .amenity-item {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 13px; background: #f7f5f1;
      border: 1.5px solid #e8e4dc; border-radius: 8px;
      transition: border-radius 0.15s;
    }
    .amenity-item-wrap.has-drop .amenity-item { cursor: pointer; }
    .amenity-item-wrap.has-drop.open .amenity-item {
      border-radius: 8px 8px 0 0; border-bottom-color: #ede9e2;
    }
    .amenity-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
    .amenity-details { flex: 1; min-width: 0; }
    .amenity-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #555; }
    .amenity-count { font-size: 13px; font-weight: 600; color: #111; margin-top: 2px; }
    .amenity-count.none { color: #aaa; font-weight: 500; }
    .amenity-tick { font-size: 14px; font-weight: 800; flex-shrink: 0; color: #1b4332; }
    .amenity-tick.absent { color: #ccc; }
    .amenity-chevron {
      font-size: 11px; color: #888; flex-shrink: 0;
      transition: transform 0.2s ease; user-select: none;
    }
    .amenity-item-wrap.open .amenity-chevron { transform: rotate(180deg); }
    .amenity-drop {
      display: none; background: #fff;
      border: 1.5px solid #e8e4dc; border-top: none;
      border-radius: 0 0 8px 8px; padding: 6px 0 8px;
    }
    .amenity-item-wrap.open .amenity-drop { display: block; }
    .amenity-drop-item { font-size: 12px; color: #333; padding: 3px 13px; line-height: 1.45; }
    .amenity-drop-more  { font-size: 11px; color: #777; padding: 2px 13px; font-style: italic; }
    .amenity-drop-unnamed { font-size: 11px; color: #aaa; padding: 2px 13px; font-style: italic; }
    .amenity-msg { font-size: 13px; color: #888; padding: 12px 4px; grid-column: 1 / -1; }
    .amenity-names-print { display: none; }

    /* ── Info note ───────────────────────────────────────────── */
    .info-note {
      font-size: 11px; color: #555; line-height: 1.7;
      padding: 12px 0 0;
      background: transparent;
      border-radius: 0;
      border-left: none;
      border-top: 1px solid rgba(0,0,0,0.15);
      margin-top: 20px;
    }

    /* Info tooltip */
    /* Info icon */
    .tip-wrap   { display: inline-flex; align-items: center; gap: 4px; }
    .tip-anchor { position: absolute; top: 10px; right: 10px; }
    .tip-icon   { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--text-faint); color: #fff; font-size: 8px; font-weight: 800; font-style: normal; line-height: 1; cursor: default; flex-shrink: 0; transition: background 0.15s; }
    .tip-icon:hover { background: var(--green); }

    /* Global tooltip — fixed to viewport, never clipped */
    #globalTip {
      position: fixed;
      z-index: 99999;
      width: 230px;
      background: #1a1a1a;
      color: #f5f5f5;
      font-size: 11.5px;
      font-weight: 400;
      line-height: 1.6;
      padding: 10px 13px;
      border-radius: 8px;
      pointer-events: none;
      display: none;
      box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    }
    #globalTip::before {
      content: '';
      position: absolute;
      bottom: 100%;
      left: var(--arrow-left, 12px);
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-bottom-color: #1a1a1a;
    }

    /* Save to portfolio (sidebar version — kept for widget drawer) */
    .save-section { display: flex; align-items: center; gap: 10px; }

    /* ── Input fields (yield calculator) ────────────────────── */
    .input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
    .input-group { display: flex; flex-direction: column; gap: 7px; }
    .input-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #444; }

    /* Input validation warning */
    .calc-warning {
      display: none;
      background: rgba(185,28,28,0.06);
      border: 1.5px solid rgba(185,28,28,0.28);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 12px; font-weight: 600; color: #b91c1c;
      margin-bottom: 14px; line-height: 1.55;
    }

    /* Expenses assumption row */
    .yield-assump-row {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; padding: 12px 16px;
      background: #f7f5f1; border: 1.5px solid #ddd8d0; border-radius: 8px;
      margin-bottom: 20px;
    }
    .yield-assump-lbl {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.11em; color: #444;
      display: flex; align-items: center; gap: 6px;
    }
    .yield-assump-ctrl { display: flex; align-items: center; gap: 8px; }
    .yield-exp-input {
      width: 68px !important; padding: 7px 10px !important;
      text-align: center; font-size: 15px !important; font-weight: 700 !important;
    }
    .yield-assump-unit { font-size: 11px; color: #444; font-weight: 600; white-space: nowrap; }
    .exp-customise-btn {
      background: none; border: 1.5px solid #ccc; border-radius: 6px;
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.08em; color: #666; padding: 4px 10px;
      cursor: pointer; transition: border-color 0.15s, color 0.15s; white-space: nowrap;
      font-family: inherit;
    }
    .exp-customise-btn:hover, .exp-customise-btn.active {
      border-color: var(--green); color: var(--green);
    }
    .exp-customise-btn.active { background: rgba(27,67,50,0.06); }
    .yield-assump-row.breakdown-open {
      border-radius: 8px 8px 0 0; border-bottom: none; margin-bottom: 0;
    }
    .yield-exp-input[readonly] { background: #ede9e4; color: #666; cursor: default; }
    .exp-breakdown-panel {
      display: none; background: #f7f5f1;
      border: 1.5px solid #ddd8d0; border-top: none;
      border-radius: 0 0 8px 8px; padding: 14px 16px 12px;
      margin-bottom: 20px;
    }
    .exp-breakdown-panel.open { display: block; }
    .exp-breakdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 8px; }
    .exp-breakdown-field { display: flex; flex-direction: column; gap: 4px; }
    .exp-breakdown-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #555; }
    .exp-breakdown-ctrl { display: flex; align-items: center; gap: 5px; }
    .exp-breakdown-prefix { font-size: 13px; font-weight: 600; color: #555; line-height: 1; }
    .exp-breakdown-input { padding: 7px 9px !important; font-size: 13px !important; font-weight: 500 !important; }
    .exp-breakdown-unit { font-size: 11px; color: #666; font-weight: 600; white-space: nowrap; }
    .exp-breakdown-hint { font-size: 10px; color: #999; margin-top: 2px; }

    .input-field {
      padding: 13px 16px;
      border: 1.5px solid var(--border);
      border-radius: var(--r);
      font-size: 15px; font-weight: 500;
      color: var(--text);
      background: #fafaf9;
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
      width: 100%;
    }
    .input-field:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(27,67,50,0.09); background: #fff; }
    .input-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
    .repay-toggle-wrap { display: flex; gap: 0; border: 1.5px solid var(--border); border-radius: var(--r); overflow: hidden; height: 100%; min-height: 50px; }
    .repay-toggle { flex: 1; border: none; background: #fafaf9; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s; padding: 0 8px; }
    .repay-toggle.active { background: var(--green); color: #fff; }
    .repay-toggle:not(.active):hover { background: var(--green-soft); color: var(--green); }

    /* ── Affiliate next-steps ────────────────────────────────── */
    .affiliate-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); margin-bottom: 12px; }
    .affiliate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
    .affiliate-card {
      position: relative;
      display: flex; align-items: center; gap: 12px;
      padding: 18px 20px;
      border-radius: 12px;
      background: #ffffff;
      font-size: 13px; font-weight: 600;
      color: #111;
      cursor: pointer;
      text-decoration: none;
      border: 2px solid transparent;
      box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    }
    .aff-icon { width: 20px; height: 20px; flex-shrink: 0; color: #111; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
    .affiliate-card > div > div:last-child { color: #666; }

    /* ── Desktop: animated gradient border + badge ── */
    @property --aff-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    @keyframes aff-spin { to { --aff-angle: 360deg; } }
    @keyframes aff-shimmer {
      0%   { transform: translateX(-100%) skewX(-15deg); }
      60%  { transform: translateX(300%) skewX(-15deg); }
      100% { transform: translateX(300%) skewX(-15deg); }
    }

    @media (max-width: 600px) {
      .affiliate-grid { grid-template-columns: 1fr; gap: 10px; }
      .affiliate-card {
        border-left: 4px solid var(--green) !important;
        border-radius: 10px;
        padding: 16px 16px 16px 14px;
        box-shadow: 0 2px 12px rgba(27,67,50,0.10);
        overflow: hidden;
      }
      /* Shimmer sweep every 3s */
      .affiliate-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 40%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
        animation: aff-shimmer 3.5s ease-in-out infinite;
        pointer-events: none;
      }
      /* Arrow indicator */
      .affiliate-card::after {
        content: '→';
        position: absolute;
        right: 14px;
        font-size: 16px;
        font-weight: 700;
        color: var(--green);
        opacity: 0.7;
      }
      /* Tap feedback */
      .affiliate-card:active { transform: scale(0.97); box-shadow: 0 1px 4px rgba(27,67,50,0.08); }
    }

    @media (min-width: 601px) {
      .affiliate-card {
        --aff-angle: 0deg;
        border: 2px solid transparent;
        background:
          linear-gradient(#fff, #fff) padding-box,
          conic-gradient(from var(--aff-angle),
            #1b4332 0%, #52b788 25%, #c8a951 50%, #52b788 75%, #1b4332 100%
          ) border-box;
        animation: aff-spin 5s linear infinite;
        transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
      }
      .affiliate-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px rgba(27,67,50,0.18);
        color: var(--green);
      }
      .affiliate-card:hover > div > div:last-child { color: var(--green); }
      .affiliate-card:hover .aff-icon { transform: scale(1.25); color: var(--green); }
    }

    /* ── Inline partner cards ───────────────────────────────── */
    .partner-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .partner-card { background: #fff; border: 1.5px solid #e4dfd7; border-radius: 16px; padding: 20px 22px; cursor: pointer; display: flex; align-items: flex-start; gap: 14px; transition: border-color .18s, box-shadow .18s; text-align: left; width: 100%; font-family: inherit; }
    .partner-card:hover { border-color: #1b4332; box-shadow: 0 4px 24px rgba(27,67,50,.1); }
    .partner-card-icon { width: 44px; height: 44px; background: linear-gradient(135deg,#1b4332,#2d6a4f); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; font-size: 16px; font-weight: 800; }
    .partner-card-body { flex: 1; min-width: 0; }
    .partner-card-type { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #1b4332; margin-bottom: 4px; }
    .partner-card-name { font-size: 15px; font-weight: 700; color: #1a1916; line-height: 1.3; }
    .partner-card-sub { font-size: 12px; color: #9c9589; margin-top: 3px; line-height: 1.4; }
    .partner-card-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #1b4332; margin-top: 12px; }
    .partner-card-cta svg { transition: transform .15s; }
    .partner-card:hover .partner-card-cta svg { transform: translateX(3px); }
    @media (max-width: 600px) { .partner-cards { grid-template-columns: 1fr; } }

    /* ── Finance lead capture modal ──────────────────────────── */
    .finance-lead-overlay {
      position: fixed;
      inset: 0;
      background: rgba(26,25,22,0.55);
      backdrop-filter: blur(3px);
      z-index: 5000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 20px;
      overflow-y: auto;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    .finance-lead-overlay.active { opacity: 1; pointer-events: auto; }
    .finance-lead-card {
      background: #fff;
      border-radius: 20px;
      width: 100%;
      max-width: 440px;
      margin: auto;
      box-shadow: 0 24px 80px rgba(0,0,0,0.22);
      overflow: hidden;
      transform: translateY(16px) scale(0.97);
      transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
    }
    .finance-lead-overlay.active .finance-lead-card { transform: translateY(0) scale(1); }
    .finance-lead-header {
      background: linear-gradient(135deg, #1b4332, #2d6a4f);
      padding: 20px 22px 18px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .finance-lead-header-text h3 { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.01em; margin-bottom: 2px; }
    .finance-lead-header-text p { font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.4; }
    .finance-lead-close { background: rgba(255,255,255,0.15); border: none; color: #fff; width: 28px; height: 28px; border-radius: 999px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; }
    .finance-lead-close:hover { background: rgba(255,255,255,0.28); }
    .finance-lead-body { padding: 22px 22px 24px; }
    .finance-lead-adviser {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: #f4f1ec;
      border-radius: 10px;
      margin-bottom: 18px;
    }
    .finance-lead-adviser-avatar {
      width: 40px; height: 40px; border-radius: 999px;
      background: #1b4332;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 800; color: #fff; flex-shrink: 0;
    }
    .finance-lead-adviser-name { font-size: 13px; font-weight: 700; color: #1a1916; }
    .finance-lead-adviser-title { font-size: 11px; color: #9c9589; margin-top: 1px; }
    .finance-lead-field { margin-bottom: 12px; }
    .finance-lead-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin-bottom: 5px; }
    .finance-lead-input {
      width: 100%;
      padding: 10px 14px;
      border: 1.5px solid #e4dfd7;
      border-radius: 8px;
      font-size: 14px;
      color: #1a1916;
      font-family: inherit;
      background: #fff;
      transition: border-color 0.15s;
      outline: none;
    }
    .finance-lead-input:focus { border-color: #1b4332; }
    .finance-lead-interests { margin: 12px 0 4px; }
    .finance-lead-interests-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin-bottom: 8px; }
    .finance-lead-check { display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; }
    .finance-lead-check input[type=checkbox] { width: 16px; height: 16px; accent-color: #1b4332; cursor: pointer; flex-shrink: 0; }
    .finance-lead-check span { font-size: 13px; color: #1a1916; line-height: 1.3; }
    .finance-lead-consent { font-size: 11px; color: #9c9589; line-height: 1.5; margin: 14px 0 16px; }
    .finance-lead-consent a { color: #1b4332; text-decoration: underline; }
    .finance-lead-submit {
      width: 100%;
      background: #1b4332;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      padding: 13px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.15s;
    }
    .finance-lead-submit:hover { background: #2d6a4f; }
    .finance-lead-submit:disabled { background: #9ca3af; cursor: default; }
    .finance-lead-success { text-align: center; padding: 8px 0 4px; }
    .finance-lead-success-icon { font-size: 36px; margin-bottom: 10px; }
    .finance-lead-success h4 { font-size: 17px; font-weight: 800; color: #1b4332; margin-bottom: 6px; }
    .finance-lead-success p { font-size: 13px; color: #6b7280; line-height: 1.5; }

    /* ── Affiliate coming-soon modal ─────────────────────────── */
    .aff-modal-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 4000;
      background: rgba(10,10,15,0.55);
      backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
      overflow-y: auto;
    }
    .aff-modal-overlay.active { opacity: 1; pointer-events: auto; }
    .aff-modal-card {
      background: var(--bg-card);
      border-radius: var(--r-xl);
      box-shadow: 0 24px 60px rgba(0,0,0,0.28);
      width: 100%; max-width: 440px;
      max-height: calc(100vh - 40px);
      overflow: hidden;
      margin: auto;
      transform: translateY(18px) scale(0.96);
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    .aff-modal-overlay.active .aff-modal-card { transform: translateY(0) scale(1); }
    .aff-modal-header {
      background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%);
      padding: 22px 24px 18px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .aff-modal-title { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
    .aff-modal-close {
      background: rgba(255,255,255,0.14); border: none; border-radius: 50%;
      width: 32px; height: 32px; color: #fff; font-size: 20px; line-height: 1;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: background 0.15s;
    }
    .aff-modal-close:hover { background: rgba(255,255,255,0.28); }
    .aff-modal-body { padding: 24px 24px 28px; }
    .aff-modal-icon-wrap {
      width: 48px; height: 48px; border-radius: 4px;
      background: var(--green-soft); border: 1.5px solid var(--green-border);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 14px; color: var(--green);
    }
    .aff-modal-body h3 {
      font-size: 18px; font-weight: 800; color: var(--text); margin: 0 0 6px; letter-spacing: -0.02em;
    }
    .aff-modal-body p {
      font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0 0 18px;
    }
    .aff-coming-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--amber-soft); border: 1.5px solid var(--amber-border);
      color: var(--amber); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      padding: 8px 14px; border-radius: 999px;
    }
    .aff-coming-badge::before {
      content: '';
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--amber);
      animation: aff-pulse 1.4s ease-in-out infinite;
    }
    @keyframes aff-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.7); }
    }
    .aff-modal-note {
      margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
      font-size: 12px; color: var(--text-faint); line-height: 1.5;
    }

    /* ── Email gate ──────────────────────────────────────────── */
    .email-gate {
      background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%);
      border-radius: 18px;
      padding: 36px 40px;
    }
    .email-gate-title { font-size: 20px; font-weight: 800; color: #ffffff; margin-bottom: 6px; letter-spacing: -0.02em; }
    .email-gate-sub { font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 24px; line-height: 1.5; }
    .email-row { display: flex; gap: 10px; }
    .email-input {
      flex: 1;
      padding: 12px 18px;
      border: 1.5px solid rgba(255,255,255,0.25);
      border-radius: var(--r-full);
      font-size: 14px;
      color: #ffffff;
      background: rgba(255,255,255,0.14);
      outline: none;
      transition: border-color 0.15s, background 0.15s;
      min-width: 0;
    }
    .email-input::placeholder { color: rgba(255,255,255,0.45); }
    .email-input:focus { border-color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.2); }
    .btn-report {
      padding: 12px 22px;
      border-radius: var(--r-full);
      border: none;
      background: #ffffff;
      color: var(--green);
      font-size: 14px; font-weight: 700;
      white-space: nowrap;
      transition: all 0.15s;
    }
    .btn-report:hover { background: #52b788; color: #fff; }

    /* ── Scroll reveal ───────────────────────────────────────── */
    .scroll-reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .scroll-reveal.revealed {
      opacity: 1;
      transform: none;
    }

    /* Skeleton loader */
    @keyframes shimmer { 0%{ background-position:-400px 0 } 100%{ background-position:400px 0 } }
    .skeleton {
      background: linear-gradient(90deg, var(--bg-soft) 25%, var(--border) 50%, var(--bg-soft) 75%);
      background-size: 800px 100%;
      animation: shimmer 1.6s infinite linear;
      border-radius: var(--r);
      color: transparent !important;
    }

    /* =============================================
       MOBILE
    ============================================= */
    @media (max-width: 900px) {
      .nav-links { display: none; }
      .nav.results-mode .nav-inner { grid-template-columns: auto 1fr; }
      .nav-addr-center { display: none !important; }
      .steps { grid-template-columns: 1fr; gap: 16px; }
      .features-grid { grid-template-columns: 1fr; }
      .pricing-grid { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }
      /* Stack the split on tablet/mobile: map on top, panel scroll below */
      .an-split { flex-direction: column; }
      .an-map-pane { flex: none; height: 46vh; min-height: 300px; overflow: hidden; }
      .an-panel { width: auto; min-width: 0; flex: 1; border-left: none; border-top: 1px solid var(--border); }
      .widget-btn { display: none; }
      .drawer-close { display: none; }
      .report-header { flex-direction: column; gap: 16px; }
      .report-metrics-grid { grid-template-columns: 1fr 1fr; }
      .footer-top { flex-direction: column; gap: 36px; }
      .footer-cols { gap: 32px; }
    }
    @media (max-width: 600px) {
      .hero-headline { font-size: 36px; }
      .trust-inner { gap: 18px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
      .input-grid { grid-template-columns: 1fr; }
      .metrics-grid { grid-template-columns: 1fr; }
      .pricing-grid { max-width: 100%; }
      .report-section { padding: 28px 20px; }
      .full-report { padding: 0 12px 40px; }
      .report-header { padding: 32px 20px 28px; }
      .email-gate { padding: 28px 24px; }
      .report-metrics-grid { grid-template-columns: 1fr; }
      .bedrooms-grid { grid-template-columns: 1fr 1fr; } /* 4 cells → 2×2 on mobile */
      .drawer-stats { grid-template-columns: 1fr; }
      .yield-assump-row { flex-wrap: wrap; gap: 8px; }
      .yield-assump-ctrl { width: 100%; }
    }
    /* ── New-search modal ───────────────────────────────────────── */
    .search-modal-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 3000;
      background: rgba(0,0,0,0.52);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .search-modal-overlay.open { display: flex !important; animation: smc-overlay-in 0.28s ease both; }
    @keyframes smc-overlay-in { from { opacity: 0; } to { opacity: 1; } }
    .search-modal-card {
      background: var(--bg-card);
      border-radius: 22px;
      box-shadow: 0 32px 80px -12px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.18);
      width: 100%;
      max-width: 540px;
      overflow: hidden;
      animation: smc-in 0.42s cubic-bezier(0.22,1,0.36,1) both;
    }
    @keyframes smc-in {
      from { opacity: 0; transform: translateY(22px) scale(0.94); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .smc-header {
      background: var(--bg-dark);
      padding: 16px 20px 14px;
      border-radius: var(--r-xl) var(--r-xl) 0 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .smc-close {
      background: rgba(255,255,255,0.14);
      border: none;
      border-radius: 50%;
      width: 30px; height: 30px;
      color: #fff;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s;
    }
    .smc-close:hover { background: rgba(255,255,255,0.28); }
    .smc-body { padding: 22px 24px 26px; }
    .smc-title {
      font-size: 19px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text);
      margin: 0 0 4px;
    }
    .smc-subtitle {
      font-size: 13.5px;
      color: var(--text-muted);
      margin: 0 0 16px;
    }
    .smc-search-row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    .smc-search-wrap {
      position: relative;
      flex: 1;
      min-width: 0;
    }
    .smc-input-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--bg-card);
      border: 1.5px solid var(--border-strong);
      border-radius: var(--r-full);
      padding: 7px 18px 7px 18px;
      box-shadow: var(--shadow-lg);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .smc-input-bar:focus-within {
      border-color: var(--green);
      box-shadow: 0 0 0 4px rgba(27,67,50,0.1), var(--shadow-lg);
    }
    #modalAddrInput {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-size: 15px;
      color: var(--text);
      padding: 6px 0;
      min-width: 0;
      font-family: inherit;
    }
    #modalAddrInput::placeholder { color: var(--text-faint); }
    /* ── Stacked modal layout: full-width input → in-flow suggestions → full-width CTA ── */
    .smc-search-wrap { width: 100%; }
    .smc-input-bar { padding: 9px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
    .smc-search-wrap .suggestions-list {
      position: static;
      top: auto;
      margin-top: 8px;
      max-height: min(296px, 42vh);
      overflow-y: auto;
      box-shadow: none;
      border: 1px solid var(--border);
      border-radius: 14px;
    }
    .smc-search-wrap .suggestion-item { padding: 12px 16px; }
    .smc-search-wrap .suggestion-item:hover { background: rgba(27,67,50,0.06); }
    .smc-search-wrap .sug-pin { color: var(--green); }
    .smc-search-row .btn-analyse {
      width: 100%;
      justify-content: center;
      padding: 13px 26px;
      box-shadow: 0 6px 18px -6px rgba(27,67,50,0.5);
    }

    /* Parcel bottom-sheet panel — hidden on desktop */
    #parcel-panel { display: none; }

    /* Surrounding parcel popup card */
    .maplibregl-popup-content {
      padding: 0 !important;
      border-radius: 18px !important;
      box-shadow: 0 18px 44px -12px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.14) !important;
      overflow: hidden;
      min-width: 244px;
      max-width: 300px;
    }
    .maplibregl-popup-tip { border-top-color: #fff !important; }
    .parcel-popup {
      background: #fff;
      border-radius: 18px;
      overflow: hidden;
    }
    .pp-header {
      background: #1b4332;
      color: #fff;
      padding: 13px 15px 12px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }
    .pp-addr {
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
      flex: 1;
      word-break: break-word;
    }
    .pp-close {
      background: rgba(255,255,255,0.18);
      border: none;
      border-radius: 50%;
      width: 22px; height: 22px;
      color: #fff;
      font-size: 14px;
      line-height: 22px;
      cursor: pointer;
      flex-shrink: 0;
      text-align: center;
      padding: 0;
      margin-top: -1px;
    }
    .pp-close:hover { background: rgba(255,255,255,0.32); }
    .pp-body { padding: 10px 12px 12px; }
    .pp-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 10px;
    }
    .pp-stat { }
    .pp-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #6b7280;
      margin-bottom: 2px;
    }
    .pp-val {
      font-size: 13px;
      font-weight: 600;
      color: #111827;
    }
    @keyframes pp-spin { to { transform: rotate(360deg); } }
    .pp-loading {
      display: inline-block;
      width: 12px; height: 12px;
      border: 2px solid var(--border);
      border-top-color: var(--green);
      border-radius: 50%;
      animation: pp-spin 0.6s linear infinite;
      vertical-align: middle;
    }
    .pp-type-badge {
      display: inline-block;
      background: #ecfdf5;
      color: #065f46;
      font-size: 10px;
      font-weight: 600;
      border-radius: 4px;
      padding: 2px 6px;
      margin-top: 8px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    /* ── Mobile Save to Portfolio button ─────────────────────── */
    .btn-mobile-save { display: none; }

    /* ── Mobile My Portfolio link ─────────────────────────────── */
    .mobile-portfolio-link { display: none; }

    /* ── PDF download button (on-screen) ─────────────────────── */
    .report-actions-bar {
      max-width: 1100px; margin: 0 auto;
      display: flex; justify-content: flex-end; align-items: center;
      padding: 14px 52px 2px;
    }
    .btn-dl-pdf {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 16px; border-radius: var(--r-full);
      border: none;
      background: var(--green);
      color: #fff; font-size: 12px; font-weight: 700;
      cursor: pointer; transition: all 0.15s; font-family: inherit; letter-spacing: 0.03em;
      box-shadow: 0 2px 8px rgba(27,67,50,0.22);
    }
    .btn-dl-pdf:hover { background: var(--green-mid); box-shadow: 0 4px 14px rgba(27,67,50,0.3); transform: translateY(-1px); }

    /* ── Print cover (hidden on screen) ──────────────────────── */
    #print-cover { display: none; }
    #print-disclaimer { display: none; }
    .pcover-header {
      background: #1b4332; padding: 16px 24px;
      display: flex; align-items: center; justify-content: space-between;
      -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .pcover-brand { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
    .pcover-brand-prop { color: #fff; }
    .pcover-brand-met  { color: #52b788; }
    .pcover-meta { text-align: right; }
    .pcover-type { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
    .pcover-date { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 3px; }
    .pcover-addr-row {
      padding: 18px 24px 14px; border-bottom: 2.5px solid #1b4332; margin-bottom: 10px;
    }
    .pcover-address { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #1a1916; line-height: 1.2; }
    .pcover-sub { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #4a4540; margin-top: 6px; }
    /* ── PROFESSIONAL PRINT STYLES ─────────────────────────── */
    @media print {
      @page { size: A4 portrait; margin: 6mm 8mm 6mm 8mm; }

      * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
      .scroll-reveal, .scroll-reveal.revealed { opacity: 1 !important; transform: none !important; }

      body { background: #fff !important; margin: 0 !important; color: #1a1916 !important; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important; font-size: 8pt !important; line-height: 1.3 !important; }
      body::before, body::after { display: none !important; }

      /* ── Hidden elements ── */
      .nav, .search-modal-overlay, .widget-btn, .map-wrap, .an-map-pane, #map,
      .maplibregl-canvas-container, .maplibregl-canvas, .maplibregl-map,
      .report-bar, .report-actions-bar, .an-panel-head,
      .affiliate-grid, .email-gate, .btn-dl-pdf, .aff-modal-overlay,
      .exp-customise-btn, .exp-breakdown-panel,
      .footer, .results-footer, #site-footer, #site-footer *,
      #scrollFab, #saveCalcBtn, .yield-repay-toggle,
      .finance-lead-overlay { display: none !important; }

      #fullReport, #fullReport > section { display: block !important; }
      #print-cover { display: block !important; }
      /* Linearize the split pane: the report flows as a normal document */
      .an-split { display: block !important; height: auto !important; margin-top: 0 !important; overflow: visible !important; background: #fff !important; }
      .an-panel { display: block !important; width: auto !important; min-width: 0 !important; height: auto !important; overflow: visible !important; border: none !important; }
      #print-disclaimer {
        display: block !important;
        font-size: 7px !important; color: #888 !important; line-height: 1.5 !important;
        margin-top: 8px !important; padding-top: 5px !important;
        border-top: 0.5pt solid #ddd !important;
      }
      #body-legal, #body-rental, #body-yield, #body-location, #body-insights, #body-schools, #body-flood, #body-liq, #body-elev, #body-zoning { display: block !important; }
      .full-report { background: #fff !important; padding: 0 !important; max-width: 100% !important; }

      /* ── Compact header ── */
      #print-cover {
        break-after: avoid !important; page-break-after: avoid !important;
        padding: 0 0 3px 0 !important; margin-bottom: 4px !important;
        border-bottom: 2px solid #1b4332 !important;
      }
      .pcover-header { background: none !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 2px !important; }
      .pcover-brand { font-size: 16px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; }
      .pcover-brand-prop { color: #1b4332 !important; }
      .pcover-brand-met  { color: #52b788 !important; }
      .pcover-meta { text-align: right !important; }
      .pcover-type { font-size: 7px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #9c9589 !important; }
      .pcover-date { font-size: 7px !important; color: #9c9589 !important; margin-top: 1px !important; }
      .pcover-addr-row { padding: 0 !important; border-bottom: none !important; margin-bottom: 0 !important; }
      .pcover-address { font-size: 12px !important; font-weight: 700 !important; color: #1a1916 !important; line-height: 1.2 !important; }
      .pcover-sub { font-size: 7px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: #4a4540 !important; margin-top: 1px !important; }

      /* ── Report sections ── */
      .report-section {
        background: #fff !important; border: none !important;
        border-bottom: 0.5px solid #e5e5e5 !important; border-radius: 0 !important;
        box-shadow: none !important; padding: 3px 0 2px !important;
        margin: 0 !important; max-width: 100% !important;
        break-inside: auto !important; page-break-inside: auto !important;
      }
      #fullReport > #report-nextsteps,
      #fullReport > #report-partners,
      #fullReport > .report-section:has(.email-gate) { display: none !important; }
      #report-location { break-before: auto !important; page-break-before: auto !important; }

      .report-section-title {
        font-size: 8px !important; font-weight: 700 !important;
        text-transform: uppercase !important; letter-spacing: 0.1em !important;
        color: #1e293b !important; border: none !important;
        border-bottom: 1px solid #1e293b !important;
        padding: 0 0 2px 0 !important; margin: 0 0 3px 0 !important; background: none !important;
      }
      .report-section-title svg { display: none !important; }
      .report-section-title span[style] {
        font-size: 7px !important; font-weight: 600 !important;
        background: #1e293b !important; color: #fff !important;
        padding: 1px 5px !important; border-radius: 3px !important;
        vertical-align: middle !important; margin-left: 6px !important;
      }

      /* ── Metric grids ── */
      .report-metrics-grid, .bedrooms-grid, .input-grid {
        display: grid !important; gap: 3px !important;
        border: none !important; margin-bottom: 0 !important; margin-top: 0 !important;
      }
      #report-legal .report-metrics-grid  { grid-template-columns: repeat(3, 1fr) !important; }
      #report-rental .report-metrics-grid { grid-template-columns: repeat(3, 1fr) !important; }
      #report-yield .report-metrics-grid  { grid-template-columns: repeat(4, 1fr) !important; }

      .metric {
        background: #f8f7f5 !important; border: none !important;
        border-radius: 4px !important; box-shadow: none !important;
        padding: 4px 6px !important; break-inside: auto !important;
      }
      .metric-label {
        font-size: 6.5px !important; font-weight: 700 !important; color: #6b7280 !important;
        text-transform: uppercase !important; letter-spacing: 0.05em !important;
        margin-bottom: 2px !important; line-height: 1.2 !important;
      }
      .metric-value {
        font-size: 11px !important; font-weight: 800 !important;
        color: #1a1916 !important; line-height: 1.1 !important; margin-bottom: 1px !important;
      }
      .metric-value.pos { color: #065f46 !important; }
      .metric-value.neg { color: #b91c1c !important; }
      .metric-value.load { color: #9ca3af !important; font-weight: 600 !important; }
      .metric-sub { font-size: 6.5px !important; color: #9ca3af !important; line-height: 1.2 !important; }
      .metric-badge, .tip-anchor, .tip-icon, .tip-wrap { display: none !important; }

      /* ── Bedroom breakdown ── */
      .br-section-label {
        font-size: 7px !important; font-weight: 700 !important; color: #1e293b !important;
        text-transform: uppercase !important; letter-spacing: 0.06em !important;
        margin: 3px 0 2px !important;
      }
      .bedrooms-grid {
        display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
        gap: 3px !important; border: none !important; margin-top: 0 !important;
      }
      .br-cell {
        background: #f8f7f5 !important; border: none !important; border-radius: 4px !important;
        padding: 3px 4px !important; text-align: center !important;
      }
      .br-label { font-size: 6.5px !important; font-weight: 700 !important; color: #6b7280 !important; text-transform: uppercase !important; margin-bottom: 2px !important; }
      .br-value { font-size: 11px !important; font-weight: 800 !important; color: #1a1916 !important; }

      /* ── Yield calculator ── */
      .input-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 3px !important; margin-bottom: 3px !important;
      }
      .input-group {
        background: #f8f7f5 !important; border: none !important;
        border-radius: 4px !important; padding: 4px 6px !important;
      }
      .input-label {
        display: block !important; font-size: 6.5px !important; font-weight: 700 !important;
        color: #6b7280 !important; text-transform: uppercase !important;
        letter-spacing: 0.05em !important; margin-bottom: 2px !important;
      }
      .input-field {
        font-size: 11px !important; font-weight: 700 !important; color: #1a1916 !important;
        background: transparent !important; border: none !important;
        border-bottom: 1px dashed #c4bfc7 !important;
        padding: 1px 0 !important; width: 100% !important;
        appearance: none !important; -webkit-appearance: none !important;
      }
      .yield-assump-row {
        display: flex !important; align-items: center !important; gap: 6px !important;
        padding: 2px 0 !important; border-bottom: 0.5px solid #e8e8e8 !important;
        margin-bottom: 2px !important;
      }
      .yield-assump-lbl {
        font-size: 7px !important; font-weight: 600 !important; color: #4a4540 !important;
        text-transform: uppercase !important; letter-spacing: 0.04em !important;
      }
      .yield-assump-ctrl { display: flex !important; align-items: center !important; gap: 3px !important; }
      .yield-exp-input {
        font-size: 11px !important; font-weight: 700 !important; width: 28px !important;
        text-align: center !important; background: transparent !important;
        border: none !important; border-bottom: 1px dashed #c4bfc7 !important; padding: 1px 0 !important;
      }
      .yield-assump-unit { font-size: 7px !important; color: #9ca3af !important; }

      /* ── Nearby amenities — compact 2-col grid ── */
      .amenity-grid { display: block !important; margin-bottom: 3px !important; }
      .amenity-col { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0 8px !important; }
      .amenity-item-wrap {
        display: flex !important; flex-direction: column !important;
        padding: 1px 0 !important; border-bottom: 0.5px solid #ece9e3 !important;
        break-inside: avoid !important;
      }
      .amenity-item { display: flex !important; align-items: center !important; gap: 3px !important; background: none !important; border: none !important; padding: 0 !important; }
      .amenity-icon { font-size: 9px !important; flex-shrink: 0 !important; }
      .amenity-details { display: flex !important; align-items: baseline !important; gap: 3px !important; flex: 1 !important; }
      .amenity-label { font-size: 6.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: #444 !important; }
      .amenity-count { font-size: 7px !important; font-weight: 500 !important; color: #666 !important; margin-top: 0 !important; }
      .amenity-count.none { color: #aaa !important; }
      .amenity-tick { display: none !important; }
      .amenity-chevron { display: none !important; }
      .amenity-drop { display: none !important; }
      .amenity-names-print {
        display: block !important; font-size: 6.5px !important; color: #777 !important;
        line-height: 1.2 !important; white-space: nowrap !important;
        overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important;
      }

      /* ── Location scores + Market Signals side by side ── */
      #report-location .score-row, #report-insights { break-inside: avoid !important; }
      .score-track {
        display: block !important; height: 2px !important; background: #ede9e2 !important;
        border-radius: 999px !important; overflow: hidden !important; margin-top: 2px !important;
      }
      .score-fill { height: 100% !important; border-radius: 999px !important; background: linear-gradient(90deg, #1a7a4a, #52b788) !important; }
      .score-fill.seismic-high { background: linear-gradient(90deg, #1a7a4a, #52b788) !important; }
      .score-fill.seismic-med  { background: linear-gradient(90deg, #d97706, #f59e0b) !important; }
      .score-fill.seismic-low  { background: linear-gradient(90deg, #b91c1c, #ef4444) !important; }
      .score-row { padding: 1px 0 2px !important; border-bottom: 0.5px solid #e8e8e8 !important; }
      .score-row:last-of-type { border-bottom: none !important; }
      .score-hdr { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin-bottom: 1px !important; }
      .score-lbl { font-size: 8px !important; font-weight: 600 !important; color: #374151 !important; }
      .score-val { font-size: 10px !important; font-weight: 800 !important; color: #065f46 !important; min-width: 30px !important; text-align: right !important; background: #f8f7f5 !important; padding: 1px 6px !important; border-radius: 999px !important; }
      .score-row > div[style], #quakeNote { font-size: 6.5px !important; color: #9ca3af !important; margin-top: 1px !important; line-height: 1.2 !important; }

      /* Market Signals — 2 columns side by side */
      #body-insights {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 12px !important;
        align-items: start !important;
      }
      #body-insights > div { break-inside: avoid !important; margin-bottom: 0 !important; }
      #body-insights > div:first-child { border-right: 0.5px solid #e5e5e5 !important; padding-right: 12px !important; }
      #body-insights > div:nth-child(2) { border: none !important; padding: 0 !important; }
      #body-insights > div:last-child {
        grid-column: 1 / -1 !important; font-size: 6.5px !important; color: #aaa !important;
        padding-top: 3px !important; border-top: 0.5px solid #e5e5e5 !important; margin-top: 2px !important;
      }
      #insightDemandScore { font-size: 13px !important; min-width: 32px !important; font-weight: 800 !important; }
      #insightDemandNote { font-size: 7px !important; margin-top: 2px !important; line-height: 1.3 !important; }
      #insightSupplyBadge { font-size: 7.5px !important; font-weight: 700 !important; padding: 1px 5px !important; border-radius: 3px !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      #insightSupplyNum { font-size: 7px !important; color: #444 !important; line-height: 1.3 !important; }

      .info-note { display: none !important; }
    }

    /* ── Page transitions ── */
    @keyframes pg-in  { from { opacity:0; } to { opacity:1; } }
    @keyframes pg-out { from { opacity:1; } to { opacity:0; } }
    body { animation: pg-in 0.32s cubic-bezier(0.4,0,0.2,1) both; }
    body.leaving { animation: pg-out 0.24s cubic-bezier(0.4,0,0.2,1) forwards !important; }

    /* ── Save toast ── */
    .save-toast {
      position: fixed; bottom: 28px; left: 50%;
      transform: translateX(-50%) translateY(10px);
      background: #1b4332; color: #fff;
      padding: 10px 22px; border-radius: 10px;
      font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
      box-shadow: 0 4px 20px rgba(0,0,0,0.2);
      z-index: 9999; opacity: 0;
      transition: opacity 0.18s ease, transform 0.18s ease;
      pointer-events: none; white-space: nowrap;
    }
    .save-toast.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
    .save-toast.toast-err  { background: #b91c1c; }
  
    /* ── Mobile hamburger navigation ──────────────────────── */
    .hamburger-btn {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      background: none;
      border: none;
      padding: 6px 4px;
      cursor: pointer;
      color: var(--text);
      flex-shrink: 0;
    }
    .hamburger-btn span {
      display: block;
      width: 22px;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
    }
    .nav:not(.scrolled) .hamburger-btn { color: #fff; }
    .nav:not(.scrolled) .nav-links.open a { color: var(--text-muted); }
    @media (max-width: 900px) {
      .hamburger-btn { display: flex; }
      .nav-links {
        display: none;
        position: absolute;
        top: 66px; left: 0; right: 0;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
        flex-direction: column;
        padding: 8px 0;
        gap: 0;
        z-index: 199;
      }
      .nav-links.open { display: flex; }
      .nav-links a {
        padding: 13px 24px;
        font-size: 15px;
        border-bottom: 1px solid var(--border);
        display: block;
      }
      .nav-links a:last-child { border-bottom: none; }
    }
    @media (max-width: 600px) {
      .footer-top { gap: 24px; align-items: center; text-align: center; }
      .footer-brand { text-align: center; max-width: 100%; }
      .footer-brand-logo { width: 80px; height: 80px; margin: 0 auto; display: block; }
      .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 8px; width: 100%; }
      .footer-col-title { text-align: center; }
      .footer-col-links { align-items: center; }
      .footer-col-links a { font-size: 11px; }
      .footer-col-title { font-size: 10px; letter-spacing: 0.06em; }
      .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
    }
    /* ── Analysis page mobile fixes ───────────────────────── */
    @media (max-width: 900px) {
      /* Move widget-btn left — map-top-strip occupies top-right */
      .widget-btn { left: 10px; right: auto; }
      .map-tpill-addr { max-width: 150px; }
    }
    @media (max-width: 600px) {
      /* Hide widget-btn — report-bar at bottom serves same purpose */
      .widget-btn { display: none !important; }

      /* Top vignette so PropertyMetrics brand text is always readable */
      .an-map-pane::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 100px;
        background: linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, transparent 100%);
        pointer-events: none;
        z-index: 5;
      }

      /* Hide the desktop address/new-search/LINZ strip on mobile */
      .map-top-strip { display: none; }

      /* Magnifying glass new-search button — top-left of map, below nav */
      .map-search-mobile {
        display: flex;
        position: absolute;
        top: 76px;
        left: 10px;
        right: auto;
        z-index: 20;
        width: 38px; height: 38px;
        border-radius: 8px;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.18);
        align-items: center; justify-content: center;
        cursor: pointer;
        color: var(--text);
        transition: background 0.15s;
      }
      .map-search-mobile:hover { background: rgba(255,255,255,1); }

      /* White app-bar on mobile: keep brand + search pill + menu; drop text buttons
         (the pill's ✕ starts a new search). Hide the redundant magnifier too. */
      .nav.results-mode .nav-inner { padding: 0 12px; gap: 10px; }
      .nav.results-mode .nav-act-btn { display: none; }
      .nav-search { max-width: none; padding: 6px 6px 6px 12px; }
      .map-search-mobile { display: none !important; }
      /* brand is now dark-on-white — drop the readability vignette under the bar */
      .an-map-pane::before { display: none; }

      /* Gradient vignette at map bottom for control contrast */
      .an-map-pane::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 90px;
        background: linear-gradient(to top, rgba(0,0,0,0.28) 0%, transparent 100%);
        pointer-events: none;
        z-index: 5;
      }

      /* Hide 360° rotate pill on mobile */
      .map-rotate-pill { display: none !important; }
      /* Hide zoom +/- buttons — pinch to zoom on mobile */
      .maplibregl-ctrl-zoom-in,
      .maplibregl-ctrl-zoom-out { display: none !important; }
      /* Map controls: left side, below the 66px transparent nav; search button stays top-right */
      .maplibregl-ctrl-top-left  { top: 76px !important; left: 0 !important; right: auto !important; }
      .maplibregl-ctrl-top-right { top: 76px !important; right: 14px !important; }


      /* Parcel bottom-sheet panel */
      #parcel-panel {
        display: block;
        position: absolute;
        bottom: 0; left: 0; right: 0;
        background: #fff;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 28px rgba(0,0,0,0.22);
        z-index: 30;
        transform: translateY(100%);
        transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
        pointer-events: none;
      }
      #parcel-panel.pp-open {
        transform: translateY(0);
        pointer-events: auto;
      }
      .pp-panel-header {
        background: #1b4332;
        color: #fff;
        padding: 12px 14px 11px;
        display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
        border-radius: 0;
      }
      .pp-panel-addr {
        font-size: 13px; font-weight: 700; line-height: 1.35; flex: 1; word-break: break-word;
      }
      .pp-panel-close {
        background: rgba(255,255,255,0.18);
        border: none; border-radius: 50%;
        width: 26px; height: 26px;
        color: #fff; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; padding: 0; margin-top: -1px;
      }
      .pp-panel-close:hover { background: rgba(255,255,255,0.3); }
      .pp-panel-body {
        padding: 14px 16px 20px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
      }

      /* My Portfolio quick link */
      .mobile-portfolio-link {
        display: flex; align-items: center; gap: 10px;
        padding: 13px 16px;
        background: var(--bg-card);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        font-size: 14px; font-weight: 600;
        color: var(--text);
        text-decoration: none;
        transition: background 0.15s;
      }
      .mobile-portfolio-link:active { background: var(--bg-soft); }
      /* Report bar */
      .report-bar { padding: 0 16px; }
      .report-bar-addr { max-width: 45%; font-size: 12px; }
      /* Save as PDF + Save to Portfolio — full width stack */
      .report-actions-bar { padding: 12px 0 4px; justify-content: center; flex-direction: column; gap: 8px; }
      .btn-dl-pdf { width: 100%; justify-content: center; padding: 13px 16px; font-size: 14px; border-radius: var(--r-full); }
      .btn-mobile-save {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        width: 100%; padding: 13px 16px; border-radius: 8px;
        border: 1.5px solid rgba(200,200,200,0.5);
        background: rgba(220,220,220,0.18);
        color: rgba(255,255,255,0.65); font-size: 14px; font-weight: 600;
        cursor: pointer; font-family: inherit; letter-spacing: 0.03em;
        transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
      }
      .btn-mobile-save.saved {
        background: var(--green);
        border-color: var(--green);
        color: #fff;
      }

      /* Expense layout */
      .yield-assump-row { flex-wrap: wrap; gap: 8px 12px; }
      .yield-assump-lbl { width: 100%; }
      .exp-breakdown-grid { grid-template-columns: 1fr; }
    }
  
    /* Hide scrollbar visually, keep scroll functional */
    ::-webkit-scrollbar { display: none; }
    html { scrollbar-width: none; -ms-overflow-style: none; }
  

/* ── Landing state — "start an analysis" overlay ──
   (The old rules were trapped in a JS string during the P2 extraction and
   never parsed; rebuilt here as real, themed CSS.) */
#pmStart {
  position: fixed; inset: 0; padding-top: 66px; z-index: 150;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460' viewBox='0 0 460 460' fill='none' stroke='%231b4332' stroke-opacity='0.05' stroke-width='1.2'%3E%3Cpath d='M205 212c14-16 44-18 64-6s26 34 10 50-48 18-66 4-22-32-8-48Z'/%3E%3Cpath d='M178 192c22-28 76-34 110-14s42 56 16 84-84 30-114 6-34-48-12-76Z'/%3E%3Cpath d='M150 170c30-42 110-52 160-24s58 84 20 122-120 44-164 8-44-64-16-106Z'/%3E%3Cpath d='M-10 60c70-26 150-34 240-22M-10 396c90 26 200 28 310 2'/%3E%3C/svg%3E");
  display: flex; align-items: center; justify-content: center;
  padding-left: 24px; padding-right: 24px; text-align: center;
}
html[data-pm-theme="dark"] #pmStart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460' viewBox='0 0 460 460' fill='none' stroke='%2352b788' stroke-opacity='0.07' stroke-width='1.2'%3E%3Cpath d='M205 212c14-16 44-18 64-6s26 34 10 50-48 18-66 4-22-32-8-48Z'/%3E%3Cpath d='M178 192c22-28 76-34 110-14s42 56 16 84-84 30-114 6-34-48-12-76Z'/%3E%3Cpath d='M150 170c30-42 110-52 160-24s58 84 20 122-120 44-164 8-44-64-16-106Z'/%3E%3Cpath d='M-10 60c70-26 150-34 240-22M-10 396c90 26 200 28 310 2'/%3E%3C/svg%3E");
}
#pmStart .ps-in { max-width: 560px; }
#pmStart .ps-pin { position: relative; width: 74px; height: 74px; margin: 0 auto 26px; }
#pmStart .ps-pin svg { position: relative; z-index: 2; animation: psBob 2.6s ease-in-out infinite; }
#pmStart .ps-ring {
  position: absolute; left: 50%; top: 58%; width: 54px; height: 20px;
  transform: translate(-50%,-50%); border-radius: 50%;
  border: 2px solid var(--green-border);
  animation: psRing 2.6s ease-out infinite;
}
#pmStart .ps-ring.r2 { animation-delay: 1.3s; }
@keyframes psBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes psRing { 0% { transform: translate(-50%,-50%) scale(.5); opacity: .7; } 100% { transform: translate(-50%,-50%) scale(1.9); opacity: 0; } }
#pmStart h2 { font-family: "Fraunces", Georgia, serif; font-size: clamp(26px,4vw,38px); font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 0 0 12px; }
#pmStart p { font-size: 15px; color: var(--text-muted); line-height: 1.7; margin: 0 0 24px; }
#pmStart .ps-search {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1.5px solid var(--border-strong);
  border-radius: 999px; padding: 7px 7px 7px 20px;
  box-shadow: var(--shadow-lg);
  max-width: 480px; margin: 0 auto; text-align: left;
  transition: border-color .2s, box-shadow .2s;
}
#pmStart .ps-search:focus-within { border-color: var(--green-mid); box-shadow: 0 0 0 4px var(--green-soft), var(--shadow-lg); }
#pmStart .ps-search > svg { flex-shrink: 0; color: var(--text-faint); }
#pmStart #psInput { flex: 1; border: none; outline: none; background: transparent; font-size: 15.5px; color: var(--text); font-family: inherit; min-width: 0; padding: 8px 2px; }
#pmStart .ps-go { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
#pmStart .ps-go:hover { background: var(--green-mid); }
#pmStart .ps-sugs { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-xl); overflow: hidden; display: none; z-index: 5; text-align: left; }
#pmStart .ps-sugs.open { display: block; }
#pmStart .ps-sug { display: flex; align-items: center; gap: 9px; padding: 11px 16px; font-size: 13.5px; font-weight: 500; color: var(--text); cursor: pointer; border-bottom: 1px solid var(--bg-soft); }
#pmStart .ps-sug:last-child { border-bottom: none; }
#pmStart .ps-sug:hover { background: var(--green-soft); }
#pmStart .ps-sug svg { flex-shrink: 0; }
#pmStart .ps-sug-loading { display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-size: 13.5px; font-weight: 500; color: var(--text-faint); }
#pmStart .ps-spin { width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--green-mid); border-radius: 50%; animation: ps-spin .7s linear infinite; flex-shrink: 0; }
@keyframes ps-spin { to { transform: rotate(360deg); } }
#pmStart .ps-sug-empty { padding: 13px 16px; font-size: 13px; color: var(--text-faint); }
@media (prefers-reduced-motion: reduce) {
  #pmStart .ps-pin svg, #pmStart .ps-ring { animation: none; }
  #pmStart .ps-ring { opacity: .4; }
}

/* ── next extracted block ── */


#scrollFab{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;background:#1b4332;border:1.5px solid rgba(255,255,255,0.14);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,0.22);opacity:0;transform:scale(0.72);transition:opacity 0.3s,transform 0.3s cubic-bezier(0.22,1,0.36,1),background 0.15s;z-index:9000;padding:0;outline:none}
#scrollFab:hover{background:#2d6a4f;box-shadow:0 6px 28px rgba(0,0,0,0.3)}
#scrollFab svg{width:18px;height:18px;display:block;transition:transform 0.38s cubic-bezier(0.22,1,0.36,1)}
#scrollFab.fab-show{opacity:1;transform:scale(1)}
#scrollFab.fab-up svg{transform:rotate(180deg)}


/* ── next extracted block ── */


/* ── P2: report chapter rail ── */
#pmRail {
  position: fixed; left: 14px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: none; flex-direction: column; gap: 2px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.09); border-radius: 12px; padding: 10px 8px;
  box-shadow: 0 8px 26px rgba(18,47,36,0.10); max-height: 76vh; overflow-y: auto;
}
@media (min-width: 1400px) { #pmRail { display: flex; } }
#pmRail a {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; color: #777; text-decoration: none;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  transition: color 0.25s ease, background 0.25s ease;
}
#pmRail a:hover { background: #e7f0eb; color: #1b4332; }
#pmRail .pm-rail-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: transparent; border: 1.5px solid rgba(27,67,50,0.3);
  transition: background 0.25s ease, border-color 0.25s ease;
}
#pmRail a.seen .pm-rail-dot { background: #2d6a4f; border-color: #2d6a4f; }
#pmRail a.on { color: #122f24; background: #e7f0eb; }
#pmRail a.on .pm-rail-dot { background: #1b4332; border-color: #1b4332; box-shadow: 0 0 0 3px rgba(27,67,50,0.15); }
@media print { #pmRail { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════
   INSTRUMENT CHROME — Phase 2 of the analysis revamp.
   Overrides the legacy hardcoded whites with themed vars and gives
   the app bar, panel head, rail and map controls the Field & Ledger
   instrument treatment. Later in the cascade by design.
   ═══════════════════════════════════════════════════════════════ */

/* ── App bar ── */
.nav.results-mode { background: var(--bg-card); border-bottom: 1px solid var(--border); }
html[data-pm-theme="dark"] .nav.results-mode { box-shadow: 0 4px 18px -10px rgba(0,0,0,0.6); }
.nav.results-mode .brand-property { color: var(--green-mid); }
.nav.results-mode .brand-metrics  { color: var(--text-muted); }
.nav-search:hover { background: var(--bg-card); }
.nav-search-clear { background: var(--green-soft); color: var(--text-muted); }
.nav-act-btn { background: var(--bg-card); color: var(--text); border-color: var(--border-strong); }
button.nav-act-btn:hover { background: var(--bg-soft); }
.menu-btn { background: var(--bg-soft); border-color: var(--border-strong); color: var(--text); }
.menu-btn:hover { background: var(--border); }
/* wider report panel: right-align the pill to the new panel edge */
@media (min-width: 901px) {
  .nav.results-mode .nav-actions { width: calc(clamp(480px, 46vw, 560px) - 34px); justify-content: flex-end; }
}

/* Theme toggle */
.theme-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--bg-card);
  color: var(--text-muted); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.theme-btn:hover { background: var(--bg-soft); color: var(--text); }
.theme-btn .th-sun  { display: none; }
.theme-btn .th-moon { display: block; }
html[data-pm-theme="dark"] .theme-btn .th-sun  { display: block; }
html[data-pm-theme="dark"] .theme-btn .th-moon { display: none; }

/* ── Panel head: quick stats as instrument tiles ── */
.an-panel-head { background: var(--bg-card); }
.drawer-title { font-family: "Fraunces", Georgia, serif; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0.01em; color: var(--text); }
.drawer-stat { background: var(--bg-soft); border-color: var(--border); }
.drawer-stat:hover { background: var(--bg-card); border-color: var(--green-border); }
.ds-value { font-variant-numeric: tabular-nums; }
/* chapter links become a chip row instead of a vertical list */
.drawer-nav { flex-direction: row; flex-wrap: wrap; gap: 7px; padding: 12px 18px 16px; }
.drawer-link {
  width: auto; flex: 0 0 auto; gap: 7px;
  padding: 6px 12px 6px 6px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 12px; background: var(--bg-soft); color: var(--text-muted);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.18s;
}
.drawer-link:hover {
  background: var(--green-soft); border-color: var(--green-border); color: var(--green-mid);
  transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(18,47,36,0.28);
}
/* hide only the trailing arrow; the leading icon chip stays (it was display:none
   on ALL svg before, which left every pill with an empty square) */
.drawer-link > svg:last-child { display: none; }
.drawer-link .dl-ic {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-soft); color: var(--green-mid);
}
.drawer-link .dl-ic svg { display: block; width: 12px; height: 12px; }
.drawer-link:hover .dl-ic { background: var(--green); color: #fff; }
.drawer-nav-sep { display: none; }
.drawer-link.portfolio-link { color: var(--green-mid); border-color: var(--green-border); background: var(--green-soft); padding: 6px 12px; }
.drawer-link.portfolio-link .dl-ic { background: var(--green); color: #fff; }

/* the coffee pill uses nowrap for its marquee shine — inside the panel it must
   shrink and wrap rather than run off the card edge */
#coffee-slot { max-width: 100%; overflow: hidden; }
#coffee-slot .pm-coffee { padding: 26px 4px; }
#coffee-slot .pm-coffee a { white-space: normal; max-width: 100%; min-width: 0; }

/* wordmark carries the brand's serif voice (matches index + the footer):
   Property upright, Metrics italic in the brand green */
.brand-property, .brand-metrics { font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.01em; }
.brand-property { font-weight: 600; }
.brand-metrics { font-style: italic; font-weight: 500; }

/* ── Chapter rail: a toggle side-panel that reads as an extension of the
   Quick Stats report panel — it docks flush to the panel's left edge (rounded
   on the map side only) and slides back into it when collapsed. The spine tab
   lives on the rail's own left edge, so it travels with the panel. ── */
#pmRail {
  left: auto; right: calc(clamp(480px, 46vw, 560px) - 1px);  /* tuck 1px under the panel — no seam */
  top: 50%; transform: translateY(-50%);
  background: var(--bg-card); border: 1px solid var(--border); border-right: none;
  border-radius: 14px 0 0 14px;
  /* shadow only on the map side (left) so the right edge merges into the panel */
  box-shadow: -16px 0 36px -20px rgba(18,47,36,0.40);
  padding: 12px 10px;
  max-height: 78vh; overflow: visible;
  transition: transform 0.34s cubic-bezier(0.22,1,0.36,1);
}
/* collapsed: the whole panel slides right into the report panel; only the tab
   on its left spine stays out at the panel edge to pull it back. Clearing the
   inherited backdrop blur is essential — otherwise the "hidden" panel keeps
   frosting the report content behind it. */
#pmRail.collapsed {
  transform: translate(100%, -50%); background: transparent; border-color: transparent;
  box-shadow: none; pointer-events: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
#pmRail.collapsed > a { opacity: 0; pointer-events: none; transition: opacity 0.18s ease; }

/* spine tab fixed to the rail's LEFT edge (child of the rail, so it moves with it) */
#pmRailTab {
  position: absolute; left: -23px; top: 50%; transform: translateY(-50%);
  width: 23px; height: 62px; padding: 0; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card); color: var(--green-mid);
  border: 1px solid var(--border); border-right: none; border-radius: 11px 0 0 11px;
  box-shadow: -6px 0 16px -9px rgba(18,47,36,0.28);
  cursor: pointer; transition: color 0.15s, background 0.15s;
}
#pmRailTab:hover { background: var(--green-soft); color: var(--green); }
#pmRailTab svg { width: 13px; height: 13px; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
#pmRailTab.closed svg { transform: rotate(180deg); }
@media print { #pmRail, #pmRailTab { display: none !important; } }
#pmRail a { color: var(--text-muted); }
#pmRail a:hover { background: var(--green-soft); color: var(--green-mid); }
#pmRail a.on { color: var(--text); background: var(--green-soft); }
#pmRail .pm-rail-dot { border-color: var(--border-strong); background: transparent; }
#pmRail a.seen .pm-rail-dot { background: var(--green-mid); border-color: var(--green-mid); }
#pmRail a.on .pm-rail-dot { background: var(--green-mid); border-color: var(--green-mid); box-shadow: 0 0 0 3px var(--green-soft); }

/* ── Map controls on the dark instrument ── */
html[data-pm-theme="dark"] .maplibregl-ctrl-group { background: #143024; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
html[data-pm-theme="dark"] .maplibregl-ctrl-group button { background-color: #143024; color: #d7e4da; }
html[data-pm-theme="dark"] .maplibregl-ctrl-group button + button { border-top-color: rgba(255,255,255,0.10); }
html[data-pm-theme="dark"] .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(0.9) hue-rotate(180deg) saturate(0); }
html[data-pm-theme="dark"] .maplibregl-ctrl-attrib { background: rgba(15,39,30,0.78); }
html[data-pm-theme="dark"] .maplibregl-ctrl-attrib, html[data-pm-theme="dark"] .maplibregl-ctrl-attrib a { color: #a9b8ac; }

/* ── Modals + mega menu pick up the theme ── */
.search-modal-card { background: var(--bg-card); }
.mega-panel { background: var(--bg-card); border-color: var(--border); }
.mega-grid-item:hover { background: var(--bg-soft); }
.mega-grid-icon { background: var(--bg-soft); }
.mega-grid-item:hover .mega-grid-icon { background: var(--border); }
.mega-grid-name { color: var(--text); }
.mega-bottom { background: var(--green-soft); }
.mega-bottom-icon { background: var(--green-soft); }
.mega-bottom-title { color: var(--text); }
.mega-bottom-sub { color: var(--text-muted); }
.mega-calc-row { border-color: var(--border); }
.mega-calc-toggle { color: var(--text); }
.mega-calc-toggle:hover { background: var(--bg-soft); }
.mega-calc-link { color: var(--text-muted); }
.mega-calc-link:hover { background: var(--bg-soft); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   CHAPTERED INSTRUMENT READOUT — Phase 3 of the analysis revamp.
   The report stops being a white ledger document on green and
   becomes numbered instrument chapters on the themed canvas.
   Print keeps its own rules (that block wins via !important).
   ═══════════════════════════════════════════════════════════════ */

.full-report {
  background: var(--bg);
  padding: 0 22px 56px;
  counter-reset: anChapter;
}
html[data-pm-theme="dark"] .full-report {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 460 460' fill='none' stroke='%2352b788' stroke-opacity='0.045' stroke-width='1.1'%3E%3Cpath d='M205 212c14-16 44-18 64-6s26 34 10 50-48 18-66 4-22-32-8-48Z'/%3E%3Cpath d='M178 192c22-28 76-34 110-14s42 56 16 84-84 30-114 6-34-48-12-76Z'/%3E%3Cpath d='M150 170c30-42 110-52 160-24s58 84 20 122-120 44-164 8-44-64-16-106Z'/%3E%3C/svg%3E");
}

/* Chapter cards */
.report-section,
section.report-section:first-of-type,
section.report-section:last-of-type {
  max-width: none;
  margin: 14px 0 0;
  padding: 26px 26px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
}
.report-section { counter-increment: anChapter; }

/* Chapter heading: Fraunces numeral + title, green accent hairline */
.report-section-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--text);
  margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.report-section-title::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 44px; height: 2px; background: var(--green-mid);
}
.report-section-title::before {
  display: inline-block;
  content: counter(anChapter, decimal-leading-zero);
  font-family: "Fraunces", Georgia, serif;
  font-size: 13px; font-weight: 600;
  color: var(--green-mid);
  min-width: 26px;
  font-variant-numeric: tabular-nums;
}

/* Metric tiles */
.report-metrics-grid { border: 1px solid var(--border); border-radius: 10px; }
.metric { background: var(--bg-card); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.metric:nth-child(even) { background: var(--bg-soft); }
.metric:hover { background: var(--green-soft); }
.metric-label { color: var(--text-faint); }
.metric-value { color: var(--text); font-variant-numeric: tabular-nums; }
.metric-value.pos { color: var(--green-mid); }
.metric-sub { color: var(--text-muted); }

/* Bedroom breakdown */
.bedrooms-grid { border: 1px solid var(--border); border-radius: 10px; }
.br-cell { background: var(--bg-card); border-right: 1px solid var(--border); }
.br-cell:nth-child(even) { background: var(--bg-soft); }
.br-label { color: var(--text-faint); }
.br-value { color: var(--text); font-variant-numeric: tabular-nums; }
.br-section-label { color: var(--text-muted); }

/* Score rows */
.tab-intro { color: var(--text-muted); }
.score-row { background: transparent; border-bottom-color: var(--border); }
.score-lbl { color: var(--text); }
.score-val, .score-val.amb-val { color: var(--text); background: var(--bg-soft); font-variant-numeric: tabular-nums; }
.score-track { background: var(--bg-soft); }
html[data-pm-theme="dark"] .score-track { background: rgba(255,255,255,0.08); }

/* Amenities */
.amenity-item { background: var(--bg-soft); border-color: var(--border); }
.amenity-item-wrap.has-drop.open .amenity-item { border-bottom-color: var(--border); }
.amenity-label { color: var(--text-faint); }
.amenity-count { color: var(--text); }
.amenity-count.none { color: var(--text-faint); }
.amenity-tick { color: var(--green-mid); }
.amenity-tick.absent { color: var(--border-strong); }
.amenity-chevron { color: var(--text-faint); }
.amenity-drop { background: var(--bg-card); border-color: var(--border); }
.amenity-drop-item { color: var(--text-muted); }
.amenity-drop-more, .amenity-drop-unnamed { color: var(--text-faint); }
.amenity-msg { color: var(--text-faint); }

/* Notes, loaders, tooltips */
.info-note { color: var(--text-muted); border-top-color: var(--border); }
.rent-trend-loading { color: var(--text-faint); }
.pm-spin { border-color: var(--green-soft); border-top-color: var(--green-mid); }

/* Affiliate cards + tooltip on theme */
.affiliate-card { background: var(--bg-card); color: var(--text); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.affiliate-card > div > div:last-child { color: var(--text-muted); }
.aff-icon { color: var(--green-mid); }
html[data-pm-theme="dark"] #globalTip { background: #f2f0ea; color: #1a1916; }
html[data-pm-theme="dark"] #globalTip::before { border-bottom-color: #f2f0ea; }

/* Section toggle chevrons sit beside the Fraunces titles */
.report-section-title svg { color: var(--text-faint); }
.report-section-title:hover svg { color: var(--green-mid); }

/* ═══════════════════════════════════════════════════════════════
   CALCULATOR + CHARTS — Phase 4 of the analysis revamp.
   Yield calculator inputs become instrument controls; the rent
   trend line draws itself in. Reduced motion turns draw-ins off.
   ═══════════════════════════════════════════════════════════════ */

/* Inputs */
.input-label { color: var(--text-muted); }
.input-field { background: var(--bg-soft); border-color: var(--border-strong); font-variant-numeric: tabular-nums; }
.input-field:focus { background: var(--bg-card); border-color: var(--green-mid); box-shadow: 0 0 0 3px var(--green-soft); }
.input-field::placeholder { color: var(--text-faint); }
html[data-pm-theme="dark"] .input-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c3cdc2' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.repay-toggle { background: var(--bg-soft); color: var(--text-muted); }
.repay-toggle.active { background: var(--green); color: #fff; }
.repay-toggle:not(.active):hover { background: var(--green-soft); color: var(--green-mid); }
.repay-toggle-wrap { border-color: var(--border-strong); }

/* Assumption row + expense breakdown */
.yield-assump-row { background: var(--bg-soft); border-color: var(--border); }
.yield-assump-lbl, .yield-assump-unit { color: var(--text-muted); }
.exp-customise-btn { border-color: var(--border-strong); color: var(--text-muted); }
.exp-customise-btn:hover, .exp-customise-btn.active { border-color: var(--green-mid); color: var(--green-mid); }
.exp-customise-btn.active { background: var(--green-soft); }
.yield-exp-input[readonly] { background: var(--bg-soft); color: var(--text-muted); }
.exp-breakdown-panel { background: var(--bg-soft); border-color: var(--border); }
.exp-breakdown-lbl, .exp-breakdown-prefix { color: var(--text-muted); }
.exp-breakdown-unit { color: var(--text-muted); }
.exp-breakdown-hint { color: var(--text-faint); }
.calc-warning { color: var(--red); }

/* Rent trend: stroke draw-in; dot rims match the card, not white paper */
#rentTrendWrap circle { stroke: var(--bg-card); }
#rentTrendWrap path[stroke] {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: anTrendDraw 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}
@keyframes anTrendDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  #rentTrendWrap path[stroke] { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE + PRINT POLISH — Phase 5 of the analysis revamp.
   ═══════════════════════════════════════════════════════════════ */

/* Mobile: report tail clears the bottom dock; themed parcel sheet */
@media (max-width: 980px) {
  .an-panel { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
#parcel-panel { background: var(--bg-card); color: var(--text); }
.pp-panel-header { border-color: var(--border); }
.pp-panel-addr { color: var(--text); }

/* Print: chapters are dense captions — no screen numerals or accents */
@media print {
  .report-section-title::before,
  .report-section-title::after { display: none !important; content: none !important; }
  .full-report { background-image: none !important; }
  #pmStart { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPACT INSTRUMENT FOOTER — analysis only.
   The shared footer.js block is a full paper-white marketing footer;
   inside the narrow instrument panel it needs its own tighter, themed
   treatment. Scoped to .an-panel .footer (analysis-only) and placed at
   the end of the cascade so it beats the injected #pm-footer-canonical
   styles. Content + links + live-rent ledger stay identical to the rest
   of the site — only the layout and palette change.
   ═══════════════════════════════════════════════════════════════ */
.an-panel .footer { background: var(--bg-card); border-top: 1px solid var(--border); }

/* Zone A — slim the live-rent ticker */
.an-panel .footer .footer-ledger-rail { height: 38px; padding: 0 20px; gap: 16px; }
.an-panel .footer .footer-ledger-src { display: none; }

/* Zone B — identity + links stack tightly, themed to the instrument */
.an-panel .footer .footer-min-inner {
  flex-direction: column; align-items: flex-start; gap: 15px;
  max-width: none; padding: 22px 22px 16px;
}
.an-panel .footer .footer-wordmark { font-size: 18px; color: var(--text); }
.an-panel .footer .footer-wordmark span { color: var(--green-mid); }
.an-panel .footer .footer-min-id { max-width: none; }
.an-panel .footer .footer-min-id p { font-size: 12px; line-height: 1.55; color: var(--text-faint); margin: 6px 0 0; }
.an-panel .footer .footer-min-links {
  justify-content: flex-start; max-width: none; gap: 9px 16px;
  padding-top: 14px; border-top: 1px solid var(--border); width: 100%;
}
.an-panel .footer .footer-min-links a { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.an-panel .footer .footer-min-links a:hover { color: var(--green-mid); }

/* Zone C — compact bottom bar */
.an-panel .footer .footer-min-bottom {
  padding: 13px 22px 20px; border-top: 1px solid var(--border);
  color: var(--text-faint); font-size: 11.5px; gap: 10px;
}
.an-panel .footer .footer-version { color: var(--text-faint); }
.an-panel .footer .footer-version:hover { color: var(--green-mid); }

/* ── Save / Save-to-Home-Search / Save-as-PDF as one equal pill row ──
   On desktop the three pills sit in the drawer row (green / white / green),
   so the report-actions-bar (which only shows the PDF button on desktop) is
   hidden there to avoid a duplicate. Mobile is unchanged: it keeps the
   report-actions-bar and hides the drawer's PDF pill. */
@media (min-width: 901px) { .report-actions-bar { display: none !important; } }
@media (max-width: 900px)  { #drawerPdfBtn { display: none; } }

/* ═══ Analysis v3 · P0: the verdict strip ═══════════════════════════════
   Six instrument tiles at the top of the report — the one-screen answer.
   Tiles sit dimmed at "—" and light up as each section's data lands
   (pmVerdict in analysis.html). Appended at the END of this file on
   purpose: the canonical blocks above must not override it. */
.pm-verdict {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 2px 0 22px;
}
.pmv-tile {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 14px 10px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  transition: border-color 0.25s ease;
}
.pmv-k {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-3, #8aa39a);
}
.pmv-v {
  font-family: "Fraunces", Georgia, serif; font-size: 21px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.15; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0.32; transition: opacity 0.3s ease;
}
.pmv-tile.on .pmv-v { opacity: 1; }
.pmv-s {
  font-size: 10px; color: var(--text-3, #7c8f88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pmv-tile.warn { border-color: rgba(217, 119, 6, 0.55); }
.pmv-tile.warn .pmv-v { color: #d97706; }
@media (max-width: 640px) { .pm-verdict { grid-template-columns: repeat(2, 1fr); } }

/* the passport micro-model crowning the Quick Stats drawer — only present
   when the 3D module initialises; without it the drawer is exactly as before */
.an-passport {
  position: relative; height: 148px; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(120% 130% at 24% 0%, #16382c, #0b1e17 70%);
}
.an-passport canvas { display: block; width: 100%; height: 100%; }
.an-passport-cap {
  position: absolute; left: 14px; bottom: 10px; font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #74c69d;
  display: inline-flex; align-items: center; gap: 6px; pointer-events: none;
}
.an-passport-cap::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #52b788;
  animation: pmvPulse 2s infinite;
}
@keyframes pmvPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(82, 183, 136, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(82, 183, 136, 0); }
}
@media print { .an-passport { display: none; } }

/* ═══ Analysis v3 · P1b: chapter tabs ═══════════════════════════════════
   The report as a dossier: Overview keeps the full scroll; a chapter tab
   marks everything else .chapter-off. Sticky inside the panel so the tabs
   travel with the reader. beforeprint restores Overview in JS, so print
   never sees .chapter-off — no !important fight with the data-hidden
   sections' inline display:none. */
.an-chapters {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 0 12px; margin: 0 0 14px;
  background: linear-gradient(var(--bg) 82%, transparent);
}
.an-ch {
  appearance: none; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text-2, var(--text));
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  padding: 6px 13px; cursor: pointer; white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.an-ch:hover { border-color: var(--green-mid, #2d6a4f); }
.an-ch.on {
  background: var(--green, #15803d); border-color: var(--green, #15803d); color: #fff;
}
.report-section.chapter-off { display: none; }
.an-ch-empty {
  border: 1px dashed var(--border); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 16px;
  font-size: 12.5px; line-height: 1.6; color: var(--text-3, #7c8f88);
}
@media print { .an-chapters, .an-ch-empty { display: none !important; } }

/* ═══ Analysis v3 · P2: terrain & water scenario ═══════════════════════
   The instrument screen is dark in both themes (screens are dark); the
   copy around it stays themed. Interactive-only, so print drops it. */
.terrain-host {
  position: relative; height: 280px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 130% at 26% 0%, #14352a, #0a1c15 72%);
  cursor: grab;
}
.terrain-host:active { cursor: grabbing; }
.terrain-host canvas { display: block; width: 100%; height: 100%; }
.terrain-ctl {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
}
.terrain-ctl label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3, #7c8f88); white-space: nowrap;
}
.terrain-ctl input[type=range] { flex: 1; accent-color: #0e7490; }
.terrain-ctl b {
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text);
  min-width: 58px; text-align: right;
}
.terrain-read {
  margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--green, #15803d);
}
.terrain-read.warn { color: #b91c1c; }
.terrain-note {
  margin-top: 9px; font-size: 10.5px; line-height: 1.6; color: var(--text-3, #888);
}
@media print { #report-terrain { display: none !important; } }

/* ═══ Analysis v3 · P3: the rent ribbon + development pulse ════════════
   The real 8-quarter MBIE series as a glowing instrument screen. The line
   is always emerald (it is the instrument's light); the direction of
   travel lives in the change chip. */
.rent-ribbon {
  position: relative; border-radius: 14px; overflow: hidden;
  padding: 16px 14px 8px;
  background: radial-gradient(130% 140% at 22% 0%, #14352a, #0a1c15 74%);
}
.rr-chips { position: absolute; top: 12px; right: 16px; text-align: right; pointer-events: none; }
.rr-cur {
  font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em; color: #eafff5; line-height: 1.1;
}
.rr-chg { font-size: 11px; font-weight: 600; margin-top: 2px; }
.rr-draw {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: rrDraw 1.4s cubic-bezier(0.3, 0, 0.2, 1) 0.15s forwards;
}
@keyframes rrDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .rr-draw { animation: none; stroke-dashoffset: 0; } }
.rr-pulse {
  margin-top: 10px; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 11.5px; line-height: 1.55; color: var(--text-2, var(--text));
  background: var(--bg-card);
}
.rr-pulse b { color: var(--green, #15803d); }
@media print {
  .rent-ribbon { background: #fff; border: 1px solid #ddd; }
  .rr-cur { color: #111; }
}

/* ═══ Analysis v3 · P4: the site risk register ═════════════════════════ */
.rrg { width: 100%; border-collapse: collapse; font-size: 12px; }
.rrg th {
  text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3, #7c8f88);
  padding: 0 10px 7px 0; border-bottom: 1px solid var(--border);
}
.rrg td {
  padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border);
  vertical-align: top; line-height: 1.5; color: var(--text-2, var(--text));
}
.rrg tr:last-child td { border-bottom: none; }
.rrg td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }
.rrg td:last-child { font-size: 10.5px; color: var(--text-3, #8aa39a); }
.rrg-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.rrg-chip.bad { background: rgba(217, 119, 6, 0.14); color: #b45309; border: 1px solid rgba(217, 119, 6, 0.4); }
.rrg-chip.ok  { background: rgba(13, 148, 136, 0.10); color: #0f766e; border: 1px solid rgba(13, 148, 136, 0.3); }
.rrg-chip.val { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }

/* ═══ Analysis v3 · the chapter spine ══════════════════════════════════
   Ground-up replacement for the collapsing rail: always present, resting
   as a slim column of icons docked at the panel's edge, breathing open to
   labels on hover. No toggle, no slide-away — nothing to animate badly.
   The old #pmRail/#pmRailTab are retired for good. */
#pmRail, #pmRailTab { display: none !important; }
#pmSpine {
  position: fixed; top: 50%; transform: translateY(-50%);
  right: calc(clamp(480px, 46vw, 560px) + 18px); z-index: 60;
  display: flex; flex-direction: column; gap: 3px;
  width: 46px; padding: 7px; overflow: hidden; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-card);
  box-shadow: 0 18px 44px -18px rgba(8, 24, 18, 0.45);
  transition: width 0.26s cubic-bezier(0.32, 0.72, 0.35, 1);
}
#pmSpine:hover, #pmSpine:focus-within { width: 196px; }
.pm-sp-item {
  display: flex; align-items: center; gap: 11px; height: 34px;
  padding: 0 8px; border-radius: 9px; flex-shrink: 0;
  color: var(--text-3, #7c8f88); text-decoration: none;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.pm-sp-item svg { width: 16px; height: 16px; flex: 0 0 16px; }
.pm-sp-item span {
  opacity: 0; transform: translateX(6px);
  transition: opacity 0.18s ease 0.06s, transform 0.18s ease 0.06s;
}
#pmSpine:hover .pm-sp-item span, #pmSpine:focus-within .pm-sp-item span { opacity: 1; transform: none; }
.pm-sp-item:hover { background: var(--bg-soft, rgba(82, 183, 136, 0.08)); color: var(--text); }
.pm-sp-item.on { background: var(--green, #15803d); color: #fff; }
@media (max-width: 1400px) { #pmSpine { display: none; } }
@media (prefers-reduced-motion: reduce) {
  #pmSpine, .pm-sp-item span { transition: none; }
}
@media print { #pmSpine { display: none !important; } }

/* the 3D rent ribbon rides the same card; the SVG underneath stays as the
   no-WebGL fallback and the print rendition */
.rent-ribbon { min-height: 150px; }
.rent-ribbon canvas.rr-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rent-ribbon.three-rib #rentTrendSvg { visibility: hidden; }
@media print {
  .rent-ribbon canvas.rr-3d { display: none !important; }
  .rent-ribbon.three-rib #rentTrendSvg { visibility: visible; }
}