/* ============================================================================
 * SGS Prism — shared design system (tokens + canonical components)
 * Loaded on every Prism surface (hub, /prism/sfr, /prism/mf) and consumed by the
 * shared shell (js/prism-nav.js) and the neighborhood module (js/neighborhood.js).
 *
 * Purpose: ONE source of truth for palette, type scale, spacing, and component
 * styling so every result block — and the 7 Prism cards still to come — inherits the
 * same look automatically instead of re-inventing its own. Presentation only.
 *
 * Everything is namespaced --sgs-* / .sgs-* to avoid colliding with page-local CSS.
 * ========================================================================== */

:root {
  /* ---- palette (extracted from the existing brand, not a redesign) ---- */
  --sgs-bg:            rgb(20, 40, 36);      /* page background */
  --sgs-bg-nav:        rgba(15, 25, 30, 0.96);
  --sgs-surface:       rgba(255, 255, 255, 0.04);  /* card fill */
  --sgs-surface-2:     rgba(255, 255, 255, 0.06);  /* input / raised fill */
  --sgs-border:        rgba(255, 255, 255, 0.10);
  --sgs-border-2:      rgba(255, 255, 255, 0.18);  /* stronger (inputs) */
  --sgs-accent:        rgb(140, 200, 180);   /* mint — the one brand accent */
  --sgs-accent-2:      rgb(160, 215, 195);   /* hover */
  --sgs-accent-ink:    rgb(15, 30, 28);      /* text on an accent fill */
  --sgs-accent-line:   rgba(140, 200, 180, 0.40);
  --sgs-accent-soft:   rgba(140, 200, 180, 0.08);
  --sgs-ink:           #ffffff;              /* primary text / values */
  --sgs-ink-1:         rgba(232, 232, 232, 0.85);
  --sgs-ink-2:         rgba(232, 232, 232, 0.60);  /* labels */
  --sgs-ink-3:         rgba(232, 232, 232, 0.45);  /* captions / baselines */
  --sgs-up:            rgb(150, 205, 185);   /* above-baseline / positive */
  --sgs-down:          rgb(220, 170, 150);   /* below-baseline */
  --sgs-warn:          rgb(230, 200, 120);
  --sgs-danger:        rgb(233, 150, 150);

  /* ---- typography ---- */
  --sgs-font-display: 'Playfair Display', Georgia, serif;
  --sgs-font-body:    'Inter', system-ui, sans-serif;
  --sgs-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* type scale — 8 named roles, used everywhere (see PR notes) */
  --sgs-fs-hero:    60px;   /* the single estimate number (mono) */
  --sgs-fs-h1:      28px;   /* page title (display) */
  --sgs-fs-h2:      20px;   /* section heading: Estimated value / Submarket / Neighborhood (display) */
  --sgs-fs-metric:  22px;   /* primary metric value (mono) */
  --sgs-fs-body:    14px;   /* narrative / secondary copy */
  --sgs-fs-sm:      13px;   /* dense metric rows */
  --sgs-fs-label:   11px;   /* metric label / card kicker (mono, UPPERCASE, tracked) */
  --sgs-fs-caption: 11.5px; /* comparison / baseline ("vs county") */

  --sgs-lh-tight: 1.1;
  --sgs-lh-body:  1.55;
  --sgs-track-label: 1px;   /* letter-spacing for mono labels */

  /* ---- spacing (4px base) ---- */
  --sgs-space-1: 4px;  --sgs-space-2: 8px;  --sgs-space-3: 12px; --sgs-space-4: 16px;
  --sgs-space-5: 20px; --sgs-space-6: 24px; --sgs-space-8: 32px; --sgs-space-10: 40px;

  --sgs-radius:    6px;
  --sgs-radius-sm: 3px;
  --sgs-gutter:    24px;    /* page + nav horizontal gutter (kept in sync) */
  --sgs-shadow:    0 24px 60px rgba(0, 0, 0, 0.5);
}

/* ===========================================================================
 * Canonical components — the 7 building blocks every card reuses.
 * =========================================================================== */

/* section heading — "Estimated value", "Submarket intelligence", "Neighborhood" */
.sgs-h2 {
  font-family: var(--sgs-font-display); font-weight: 400;
  font-size: var(--sgs-fs-h2); line-height: 1.2; color: var(--sgs-ink); margin: 0;
}

/* kicker / card label — the small tracked mono label above a metric group or card */
.sgs-kicker {
  font-family: var(--sgs-font-mono); font-weight: 500;
  font-size: var(--sgs-fs-label); letter-spacing: var(--sgs-track-label);
  text-transform: uppercase; color: var(--sgs-accent);
}

/* metric label / value / baseline — ONE treatment, used by submarket + neighborhood + future cards */
.sgs-metric-label { font-size: var(--sgs-fs-sm); color: var(--sgs-ink-2); }
.sgs-metric-value { font-family: var(--sgs-font-mono); color: var(--sgs-ink); }
.sgs-metric-big   { font-family: var(--sgs-font-mono); font-size: var(--sgs-fs-metric); color: var(--sgs-ink); font-weight: 500; line-height: var(--sgs-lh-tight); }
.sgs-vs           { font-size: var(--sgs-fs-caption); color: var(--sgs-ink-3); margin-top: 3px; }
.sgs-vs .up { color: var(--sgs-up); }
.sgs-vs .dn { color: var(--sgs-down); }

/* a label↔value row (dense) */
.sgs-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sgs-space-3);
  padding: var(--sgs-space-2) 0; font-size: var(--sgs-fs-sm);
}
.sgs-row .sgs-k { color: var(--sgs-ink-2); }
.sgs-row .sgs-v { color: var(--sgs-ink); font-family: var(--sgs-font-mono); font-weight: 500; }
.sgs-row .sgs-c { font-size: var(--sgs-fs-label); color: var(--sgs-ink-3); }

/* card + surface */
.sgs-card {
  background: var(--sgs-surface); border: 1px solid var(--sgs-border);
  border-radius: var(--sgs-radius); padding: var(--sgs-space-4);
}

/* button — canonical (ghost) + accent variant */
.sgs-btn {
  cursor: pointer; font-family: var(--sgs-font-body); font-size: var(--sgs-fs-sm);
  line-height: 1; padding: 8px 14px; border-radius: var(--sgs-radius-sm);
  background: none; border: 1px solid var(--sgs-border-2); color: var(--sgs-ink-1);
  transition: border-color .18s, color .18s, background .18s;
}
.sgs-btn:hover { border-color: var(--sgs-accent-line); color: var(--sgs-ink); }
.sgs-btn--accent {
  background: var(--sgs-accent); border-color: var(--sgs-accent); color: var(--sgs-accent-ink); font-weight: 500;
}
.sgs-btn--accent:hover { background: var(--sgs-accent-2); border-color: var(--sgs-accent-2); color: var(--sgs-accent-ink); }
.sgs-btn:disabled { opacity: .5; cursor: default; }

/* pill / badge */
.sgs-pill {
  display: inline-block; font-family: var(--sgs-font-mono); font-size: var(--sgs-fs-label);
  letter-spacing: .5px; text-transform: uppercase; color: var(--sgs-accent);
  border: 1px solid var(--sgs-accent-line); border-radius: var(--sgs-radius-sm); padding: 3px 9px;
}

/* input */
.sgs-input {
  width: 100%; box-sizing: border-box; font-family: var(--sgs-font-body); font-size: var(--sgs-fs-body);
  background: var(--sgs-surface-2); border: 1px solid var(--sgs-border-2); color: var(--sgs-ink);
  padding: 9px 11px; border-radius: var(--sgs-radius-sm); outline: none; transition: border-color .18s;
}
.sgs-input:focus { border-color: var(--sgs-accent-line); }
.sgs-input::placeholder { color: var(--sgs-ink-3); }