/* ============================================================
   RENTEROO — Shared Design System
   CSS path: renteroo.css
   To rehost: update the href in each HTML file's <link> tag.
   All screens reference this single file.
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600;1,8..60,700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');


/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; }
button { font-family: inherit; }
a { color: inherit; }


/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {

  /* ── Colour — Brand ── */
  --color-green:        #2B6A3A;
  --color-green-dark:   #1E4D2A;
  --color-green-mid:    #3A8A4F;
  --color-green-light:  #E8F4ED;
  --color-green-faint:  #F2FAF4;

  --color-gold:         #F4A62A;
  --color-gold-dark:    #C07A10;
  --color-gold-light:   #FEF6E4;
  --color-gold-faint:   #FFFBF0;

  /* ── Colour — Neutrals ── */
  --color-bg:           #FAFAF7;
  --color-bg-warm:      #FEF9F2;
  --color-surface:      #FFFFFF;
  --color-surface-raised: #FFFFFF;

  --color-text:         #111827;
  --color-text-muted:   #6B7280;
  --color-text-light:   #9CA3AF;
  --color-text-inverse: #FFFFFF;

  --color-border:       #E5E0D8;
  --color-border-light: #F0EBE3;
  --color-border-focus: #2B6A3A;

  /* ── Colour — Semantic ── */
  --color-star:         #F59E0B;

  --color-error-bg:     #FEF2F2;
  --color-error-text:   #991B1B;
  --color-error-border: #FCA5A5;

  --color-amber-bg:     #FFFBEB;
  --color-amber-text:   #92400E;
  --color-amber-border: #FCD34D;

  --color-info-bg:      #EBF5FF;
  --color-info-text:    #1D6FAE;
  --color-info-border:  #BFDBFE;

  --color-success-bg:   #F0FDF4;
  --color-success-text: #166534;

  /* ── Typography ── */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  42px;
  --text-4xl:  56px;
  --text-5xl:  72px;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-ui:     1.4;

  /* ── Spacing (4px base unit) ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ── Border radius ── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-pill: 100px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.10);

  /* ── Focus ring ── */
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #2B6A3A;

  /* ── Read mode density ── */
  --read-section-pad:  96px 0;
  --read-section-pad-sm: 64px 0;
  --read-card-pad:     28px;
  --read-content-max:  1200px;
  --read-content-pad:  0 32px;

  /* ── Write mode density ── */
  --write-form-pad:      48px 0 88px;
  --write-card-pad:      32px;
  --write-content-max:   680px;
  --write-content-pad:   0 24px;

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-enter:  280ms ease-out;
}


/* ============================================================
   ACCESSIBILITY UTILITIES
   ============================================================ */

/* Screen-reader only — visually hidden but available to assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--color-green);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 var(--r-sm) 0;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 0;
}

/* Focus ring — applied to all interactive elements */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  max-width: var(--read-content-max);
  margin: 0 auto;
  padding: var(--read-content-pad);
}

.container--write {
  max-width: var(--write-content-max);
  margin: 0 auto;
  padding: var(--write-content-pad);
}

.container--narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--read-content-pad);
}


/* ============================================================
   NAVIGATION — READ MODE
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 247, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: var(--read-content-max);
  margin: 0 auto;
  padding: 0 32px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-wordmark {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.3px;
  line-height: 1;
}

.nav-logo-wordmark span { color: var(--color-green); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav-link:hover { color: var(--color-text); }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--r-xs);
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-mobile-menu {
  display: none;
  flex-direction: column;
  padding: var(--space-4) 32px var(--space-5);
  border-top: 1px solid var(--color-border);
  gap: var(--space-4);
}

.nav-mobile-menu.is-open { display: flex; }
.nav-mobile-menu .nav-link { font-size: var(--text-base); padding: var(--space-2) 0; }


/* ── Navigation — Write mode ── */
.nav--write {
  background: var(--color-surface);
}

.nav--write .nav-inner {
  height: 60px;
}

.nav-write-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}


/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: var(--r-pill);
  min-height: 44px;
  padding: 12px 22px;
  transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base), color var(--transition-fast), border-color var(--transition-fast);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.btn-primary {
  background: var(--color-green);
  color: var(--color-text-inverse);
  padding: 13px 24px;
}

.btn-primary:hover {
  background: var(--color-green-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(43, 106, 58, 0.28);
}

.btn-primary:active { transform: translateY(0); }

/* Primary large */
.btn-primary-lg {
  font-size: var(--text-md);
  padding: 16px 30px;
}

/* Secondary */
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  padding: 12px 22px;
}

.btn-secondary:hover {
  border-color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.02);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-weight: 500;
  min-height: 36px;
}

.btn-ghost:hover { color: var(--color-text); background: rgba(0,0,0,0.04); }

/* Outline (write mode cancel) */
.btn-outline {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  min-height: 36px;
}

.btn-outline:hover { border-color: var(--color-text-muted); }

/* White (on dark backgrounds) */
.btn-white {
  background: var(--color-surface);
  color: var(--color-green-dark);
  padding: 16px 30px;
  font-size: var(--text-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

/* Full-width (write mode submit) */
.btn-full { width: 100%; border-radius: var(--r-sm); }


/* ============================================================
   TAGS & BADGES
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.tag--positive { background: var(--color-green-light); color: var(--color-green-dark); }
.tag--flag     { background: #F3F4F6; color: #374151; }
.tag--amber    { background: var(--color-amber-bg); color: var(--color-amber-text); }
.tag--info     { background: var(--color-info-bg); color: var(--color-info-text); }
.tag--error    { background: var(--color-error-bg); color: var(--color-error-text); }


/* Tag chips (interactive, Write mode Step 3) */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  min-height: 36px;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  user-select: none;
}

.chip:hover {
  border-color: var(--color-green);
  color: var(--color-green);
}

.chip[aria-pressed="true"].chip--positive {
  border-color: var(--color-green);
  background: var(--color-green-light);
  color: var(--color-green-dark);
}

.chip[aria-pressed="true"].chip--flag {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
  color: var(--color-error-text);
}


/* Verified Renter badge */
.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-info-bg);
  color: var(--color-info-text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  line-height: 1;
}


/* Section eyebrow label */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-green);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: var(--space-3);
}

/* Typographic elements */
.display-heading {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.display-heading em {
  font-style: italic;
  color: var(--color-green);
}

.section-headline {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.section-subhead {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}


/* ============================================================
   STAR RATING — Display
   ============================================================ */
.stars {
  display: inline-flex;
  gap: 1px;
  line-height: 1;
}

.star-filled { color: var(--color-star); }
.star-empty  { color: #D1D5DB; }

.stars--sm .star-filled,
.stars--sm .star-empty { font-size: 12px; }

.stars--md .star-filled,
.stars--md .star-empty { font-size: 16px; }

.stars--lg .star-filled,
.stars--lg .star-empty { font-size: 20px; }


/* ── Star Rating — Interactive (Write mode Step 3) ── */
.star-rating {
  display: inline-flex;
  gap: var(--space-1);
}

.star-rating input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.star-rating label {
  font-size: 28px;
  color: #D1D5DB;
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
  padding: 0 2px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.star-rating label:hover,
.star-rating label:hover ~ label { color: var(--color-star); }

.star-rating input:checked ~ label { color: #D1D5DB; }
.star-rating input:checked + label,
.star-rating input:checked ~ label:not(input:checked ~ label ~ label) { color: var(--color-star); }

/* Simpler JS-driven approach — active class */
.star-rating label.is-active { color: var(--color-star); }
.star-rating label:hover { transform: scale(1.1); }

.star-rating:focus-within {
  outline: none;
}

.star-rating input:focus-visible + label {
  box-shadow: var(--focus-ring);
  border-radius: var(--r-xs);
}


/* ============================================================
   DIMENSION SCORE BAR
   ============================================================ */
.dim-row {
  display: grid;
  grid-template-columns: 140px 1fr 36px;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.dim-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-ui);
}

.dim-track {
  height: 5px;
  background: #F3F4F6;
  border-radius: var(--r-pill);
  overflow: hidden;
}

.dim-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--color-green);
  transition: width var(--transition-enter);
}

.dim-fill--gold { background: var(--color-gold); }

.dim-score {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  text-align: right;
}


/* ============================================================
   BUILDING CARD
   ============================================================ */
.building-card {
  background: var(--color-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.building-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Card header band */
.bcard-header {
  background: linear-gradient(145deg, #1A4228 0%, #2B6A3A 55%, #3A8A4F 100%);
  padding: var(--read-card-pad);
  padding-bottom: var(--space-5);
  position: relative;
  overflow: hidden;
}

.bcard-header::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 160px; height: 160px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  pointer-events: none;
}

.bcard-header::after {
  content: '';
  position: absolute;
  bottom: -50px; left: -20px;
  width: 180px; height: 180px;
  background: rgba(244,166,42,0.08);
  border-radius: 50%;
  pointer-events: none;
}

.bcard-address {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-inverse);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
}

.bcard-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.bcard-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.9);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

/* Card body */
.bcard-body {
  padding: var(--space-5) var(--read-card-pad) var(--space-6);
}

.bcard-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.bcard-score-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.bcard-score-num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.bcard-score-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bcard-score-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bcard-review-count {
  background: var(--color-green-light);
  color: var(--color-green-dark);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--r-pill);
}

.bcard-dimensions {
  margin-bottom: var(--space-4);
}

.bcard-snippet {
  background: var(--color-bg);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.bcard-snippet-text {
  font-size: var(--text-sm);
  font-style: italic;
  line-height: var(--leading-normal);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.bcard-snippet-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bcard-tags {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}


/* ============================================================
   STEP INDICATOR (Write mode)
   ============================================================ */
.step-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 32px;
}

.step-bar-inner {
  max-width: var(--write-content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.step-circle--done   { background: var(--color-green); color: var(--color-text-inverse); }
.step-circle--active { background: var(--color-green); color: var(--color-text-inverse); box-shadow: 0 0 0 3px rgba(43,106,58,0.2); }
.step-circle--pending { background: #E5E7EB; color: var(--color-text-light); }

.step-label {
  font-size: var(--text-sm);
}

.step-label--done,
.step-label--active { font-weight: 600; color: var(--color-text); }
.step-label--pending { color: var(--color-text-light); }

.step-connector {
  width: 48px;
  height: 1px;
  margin: 0 var(--space-1);
  flex-shrink: 0;
}

.step-connector--done    { background: var(--color-green); }
.step-connector--pending { background: var(--color-border); }

/* Progress strip */
.progress-strip {
  height: 3px;
  background: var(--color-border-light);
}

.progress-fill {
  height: 100%;
  background: var(--color-green);
  transition: width var(--transition-enter);
}


/* ============================================================
   BUILDING BANNER (Write mode — persists across steps)
   ============================================================ */
.building-banner {
  background: var(--color-green-dark);
  padding: var(--space-3) 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.banner-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.banner-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.banner-name {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-inverse);
  margin-bottom: 2px;
}

.banner-address {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.65);
}

.banner-change {
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--r-sm);
  background: none;
  color: rgba(255,255,255,0.8);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  min-height: 36px;
}

.banner-change:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }


/* ============================================================
   FORM COMPONENTS (Write mode)
   ============================================================ */

/* Form card container */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--write-card-pad);
}

/* Field group */
.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: var(--leading-ui);
}

.field-prompt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-ui);
}

.field-prompt--green { color: var(--color-green); }

/* Input */
.field-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-xs);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  min-height: 44px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  line-height: var(--leading-ui);
}

.field-input:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(43,106,58,0.12);
}

.field-input.is-error { border-color: var(--color-error-border); }
.field-input.is-valid  { border-color: var(--color-green-mid); }

/* Textarea */
textarea.field-input {
  resize: vertical;
  min-height: 130px;
  line-height: var(--leading-normal);
}

/* Character counter */
.field-counter {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  text-align: right;
}

/* Helper text */
.field-helper {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-ui);
}

.field-helper--error { color: var(--color-error-text); }

/* Divider */
.form-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) 0;
}

/* Select */
.field-select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-xs);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  min-height: 44px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.field-select:focus { border-color: var(--color-green); box-shadow: 0 0 0 3px rgba(43,106,58,0.12); }

/* Radio button group */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.radio-btn {
  position: relative;
}

.radio-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}

.radio-btn-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  min-height: 44px;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.radio-btn input:checked + .radio-btn-label {
  border-color: var(--color-green);
  background: var(--color-green-light);
  color: var(--color-green-dark);
  font-weight: 600;
}

.radio-btn input:focus-visible + .radio-btn-label {
  box-shadow: var(--focus-ring);
}

/* Checkbox */
.checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.checkbox-input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 2px solid var(--color-border);
  border-radius: var(--r-xs);
  cursor: pointer;
  accent-color: var(--color-green);
  transition: border-color var(--transition-fast);
}

.checkbox-input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.checkbox-label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-normal);
}


/* ============================================================
   ATTESTATION BLOCK
   ============================================================ */
.attestation-block {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--space-5) var(--space-6);
}

.attestation-heading {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.attestation-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
}

.attestation-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.attestation-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-green);
  cursor: pointer;
}

.attestation-check input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.attestation-check-label {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-normal);
  cursor: pointer;
}


/* ============================================================
   INLINE ALERTS
   ============================================================ */
.alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-sm);
  border-width: 1px;
  border-style: solid;
}

.alert-icon { flex-shrink: 0; font-size: 15px; margin-top: 1px; }
.alert-text { font-size: var(--text-sm); line-height: var(--leading-normal); }
.alert-text strong { font-weight: 600; }

.alert--amber {
  background: var(--color-amber-bg);
  border-color: var(--color-amber-border);
}
.alert--amber .alert-text { color: var(--color-amber-text); }

.alert--error {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
}
.alert--error .alert-text { color: var(--color-error-text); }

.alert--info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
}
.alert--info .alert-text { color: var(--color-info-text); }

.alert--success {
  background: var(--color-success-bg);
  border-color: #86EFAC;
}
.alert--success .alert-text { color: var(--color-success-text); }


/* ============================================================
   SEARCH INPUT (Read mode)
   ============================================================ */
.search-wrap {
  position: relative;
  width: 100%;
}

.search-wrap svg.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-light);
}

.search-input {
  width: 100%;
  padding: 14px 16px 14px 48px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  min-height: 52px;
  outline: none;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-input:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(43,106,58,0.12), var(--shadow-xs);
}

.search-input::placeholder { color: var(--color-text-light); }

/* Autocomplete dropdown */
.autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  z-index: 50;
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--transition-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
}

.autocomplete-item:hover,
.autocomplete-item:focus { background: var(--color-bg); outline: none; }

.autocomplete-item-name {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
}

.autocomplete-item-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 1px;
}

/* Confirmed building card */
.building-confirmed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--color-green);
  border-radius: var(--r-sm);
  background: var(--color-green-faint);
  gap: var(--space-3);
}

.building-confirmed-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.building-confirmed-check {
  width: 32px;
  height: 32px;
  background: var(--color-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.building-confirmed-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}

.building-confirmed-address {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.building-confirmed-change {
  font-size: var(--text-sm);
  color: var(--color-green);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
  white-space: nowrap;
}


/* ============================================================
   BOTTOM NAV (Write mode sticky footer)
   ============================================================ */
.bottom-nav {
  position: sticky;
  bottom: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
}

.bottom-nav-left { display: flex; align-items: center; gap: var(--space-3); }
.bottom-nav-right { display: flex; align-items: center; gap: var(--space-3); }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 11px 20px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.btn-back:hover { border-color: var(--color-text-muted); color: var(--color-text); }


/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-16) var(--space-8);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-5);
  color: var(--color-text-light);
}

.empty-state-heading {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.empty-state-body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 380px;
  line-height: var(--leading-normal);
  margin-bottom: var(--space-5);
}


/* ============================================================
   DIMENSION RATING BLOCK (Write mode Step 3)
   ============================================================ */
.dim-rating-block {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.dim-rating-block:last-child { border-bottom: none; }

.dim-rating-name {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.dim-rating-prompt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  line-height: var(--leading-ui);
}

.dim-rating-value {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  min-height: 18px;
}

.dim-rating-value.is-selected { color: var(--color-green); font-weight: 600; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --read-content-pad: 0 24px;
  }
}

@media (max-width: 768px) {
  :root {
    --read-content-pad:  0 20px;
    --write-content-pad: 0 16px;
    --read-section-pad:  64px 0;
    --read-section-pad-sm: 48px 0;
    --read-card-pad: 20px;
  }

  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  .step-label { display: none; }
  .step-label--active { display: block; }

  .dim-row {
    grid-template-columns: 110px 1fr 30px;
  }

  .building-banner {
    padding: var(--space-3) 20px;
  }

  .bottom-nav {
    padding: var(--space-3) 20px;
  }

  .step-bar {
    padding: var(--space-4) 20px;
  }
}

@media (max-width: 480px) {
  .radio-group { gap: var(--space-2); }
  .radio-btn-label { padding: 10px 14px; }

  .step-connector { width: 24px; }

  .bcard-score-num { font-size: 32px; }
}

/* ============================================================
   REDUCED MOTION
   Disables all transitions and animations for users who have
   requested reduced motion in their system preferences.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Preserve focus ring visibility — don't remove outline transitions */
  :focus-visible {
    transition: none !important;
  }
}