/* ═══════════════════════════════════════════════════════════════════
   THALIA — Masterplanning Studio
   Emerra Design System (M3) — tokens are the single source of truth
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --md-sys-color-primary:               #2c5f4a;
  --md-sys-color-on-primary:            #ffffff;
  --md-sys-color-primary-container:     #e8f0ec;
  --md-sys-color-on-primary-container:  #1a3d2e;
  --md-sys-color-secondary:             #4a6358;
  --md-sys-color-on-secondary:          #ffffff;
  --md-sys-color-secondary-container:   #e0e9e3;
  --md-sys-color-on-secondary-container:#2d3f36;
  --md-sys-color-tertiary:              #6b5c3e;
  --md-sys-color-on-tertiary:           #ffffff;
  --md-sys-color-tertiary-container:    #f0e8d8;
  --md-sys-color-on-tertiary-container: #4a3f2a;
  --md-sys-color-error:                 #ba1a1a;
  --md-sys-color-on-error:              #ffffff;
  --md-sys-color-error-container:       #ffdad6;
  --md-sys-color-on-error-container:    #410002;
  --md-sys-color-warning:               #7c5800;
  --md-sys-color-on-warning:            #ffffff;
  --md-sys-color-warning-container:     #ffdfa0;
  --md-sys-color-on-warning-container:  #261a00;
  --md-sys-color-success:               #1a6b40;
  --md-sys-color-on-success:            #ffffff;
  --md-sys-color-success-container:     #d6f0e2;
  --md-sys-color-on-success-container:  #0a3d22;
  --md-sys-color-surface:               #faf9f6;
  --md-sys-color-on-surface:            #1a1a18;
  --md-sys-color-on-surface-variant:    #6b6b63;
  --md-sys-color-surface-variant:       #f4f1eb;
  --md-sys-color-surface-container-lowest:  #ffffff;
  --md-sys-color-surface-container-low:     #faf9f6;
  --md-sys-color-surface-container:         #f4f1eb;
  --md-sys-color-surface-container-high:    #eeebe4;
  --md-sys-color-surface-container-highest: #e8e5dd;
  --md-sys-color-outline:               #9e9e94;
  --md-sys-color-outline-variant:       #d6d3cb;
  --md-sys-color-inverse-surface:       #1a1a18;
  --md-sys-color-inverse-on-surface:    #f4f1eb;
  --md-sys-color-inverse-primary:       #7bc4a4;
  --md-sys-color-scrim:                 rgba(0,0,0,0.32);
  --md-sys-color-shadow:                #000000;

  --md-sys-typescale-display-font:      'Instrument Serif', Georgia, serif;
  --md-sys-typescale-headline-font:     'Instrument Serif', Georgia, serif;
  --md-sys-typescale-title-font:        'DM Sans', -apple-system, sans-serif;
  --md-sys-typescale-body-font:         'DM Sans', -apple-system, sans-serif;
  --md-sys-typescale-label-font:        'JetBrains Mono', monospace;

  --md-sys-elevation-0:   none;
  --md-sys-elevation-1:   0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --md-sys-elevation-2:   0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  --md-sys-elevation-3:   0 2px 6px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.04);
  --md-sys-elevation-4:   0 4px 8px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.05);
  --md-sys-elevation-5:   0 6px 12px rgba(0,0,0,0.07), 0 16px 40px rgba(0,0,0,0.06);

  --md-sys-shape-corner-none:          0px;
  --md-sys-shape-corner-extra-small:   4px;
  --md-sys-shape-corner-small:         6px;
  --md-sys-shape-corner-medium:        10px;
  --md-sys-shape-corner-large:         14px;
  --md-sys-shape-corner-extra-large:   20px;
  --md-sys-shape-corner-full:          9999px;

  --md-sys-spacing-xs:  4px;  --md-sys-spacing-sm:  8px;  --md-sys-spacing-md: 16px;
  --md-sys-spacing-lg: 24px;  --md-sys-spacing-xl: 32px;  --md-sys-spacing-2xl: 48px;
  --md-sys-spacing-3xl: 64px; --md-sys-spacing-4xl: 80px;

  --md-sys-motion-duration-short:      150ms;
  --md-sys-motion-duration-medium:     250ms;
  --md-sys-motion-duration-long:       400ms;
  --md-sys-motion-duration-extra-long: 600ms;
  --md-sys-motion-easing-standard:     cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized:   cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-decelerate:   cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-accelerate:   cubic-bezier(0.3, 0, 1, 1);

  --md-sys-state-hover-opacity:   0.08;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-focused-opacity: 0.12;
  --md-sys-state-dragged-opacity: 0.16;

  /* Land-use palette — dataviz-validated categorical order:
     residential, business, commercial, industrial, green */
  --lu-residential: #eda100;
  --lu-business:    #2a78d6;
  --lu-commercial:  #eb6834;
  --lu-industrial:  #4a3aa7;
  --lu-green:       #008300;
  --lu-road:        #8a8a80;
  --viz-surface:    #fcfcfb;
}

[data-theme="dark"] {
  --md-sys-color-primary:               #7bc4a4;
  --md-sys-color-on-primary:            #0d3324;
  --md-sys-color-primary-container:     #1e4a38;
  --md-sys-color-on-primary-container:  #a8e0c4;
  --md-sys-color-secondary:             #b0ccbe;
  --md-sys-color-on-secondary:          #1c352a;
  --md-sys-color-secondary-container:   #334b40;
  --md-sys-color-on-secondary-container:#cce8d9;
  --md-sys-color-tertiary:              #d4c4a0;
  --md-sys-color-on-tertiary:           #383018;
  --md-sys-color-tertiary-container:    #50462c;
  --md-sys-color-on-tertiary-container: #f0e0ba;
  --md-sys-color-warning:               #f0c04d;
  --md-sys-color-on-warning:            #3a2a00;
  --md-sys-color-warning-container:     #5a4300;
  --md-sys-color-on-warning-container:  #ffdfa0;
  --md-sys-color-success:               #86d6a8;
  --md-sys-color-on-success:            #00391d;
  --md-sys-color-success-container:     #0f5231;
  --md-sys-color-on-success-container:  #d6f0e2;
  --md-sys-color-error:                 #ffb4ab;
  --md-sys-color-on-error:              #690005;
  --md-sys-color-error-container:       #93000a;
  --md-sys-color-on-error-container:    #ffdad6;
  --md-sys-color-surface:               #121210;
  --md-sys-color-on-surface:            #e4e2dc;
  --md-sys-color-on-surface-variant:    #c6c5bc;
  --md-sys-color-surface-variant:       #1e1e1c;
  --md-sys-color-surface-container-lowest:  #0c0c0a;
  --md-sys-color-surface-container-low:     #1a1a18;
  --md-sys-color-surface-container:         #1e1e1c;
  --md-sys-color-surface-container-high:    #282826;
  --md-sys-color-surface-container-highest: #333330;
  --md-sys-color-outline:               #8e8e86;
  --md-sys-color-outline-variant:       #444440;
  --md-sys-color-inverse-surface:       #e4e2dc;
  --md-sys-color-inverse-on-surface:    #1a1a18;
  --md-sys-color-inverse-primary:       #2c5f4a;
  --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14);
  --md-sys-elevation-2: 0 1px 5px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.14);
  --md-sys-elevation-3: 0 2px 8px rgba(0,0,0,0.22), 0 8px 24px rgba(0,0,0,0.18);
  --md-sys-elevation-4: 0 4px 10px rgba(0,0,0,0.24), 0 12px 32px rgba(0,0,0,0.2);
  --md-sys-elevation-5: 0 6px 14px rgba(0,0,0,0.26), 0 16px 40px rgba(0,0,0,0.22);

  --lu-residential: #c98500;
  --lu-business:    #3987e5;
  --lu-commercial:  #d95926;
  --lu-industrial:  #9085e9;
  --lu-green:       #008300;
  --lu-road:        #6b6b63;
  --viz-surface:    #1a1a19;
}

/* ── Base ─────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--md-sys-typescale-body-font);
  font-size: 14px; line-height: 1.6;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-primary); }
:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }

.interactive { position: relative; isolation: isolate; }
.interactive::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.interactive:hover::before  { opacity: var(--md-sys-state-hover-opacity); }
.interactive:active::before { opacity: var(--md-sys-state-pressed-opacity); }

/* ── App shell ────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100%; }

.topbar {
  display: flex; align-items: center; gap: var(--md-sys-spacing-md);
  height: 60px; padding: 0 var(--md-sys-spacing-lg);
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  flex-shrink: 0; z-index: 30;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-name {
  font-family: var(--md-sys-typescale-display-font);
  font-size: 26px; letter-spacing: 0.5px; color: var(--md-sys-color-on-surface);
}
.brand-name em { font-style: italic; color: var(--md-sys-color-primary); }
.brand-tag {
  font-family: var(--md-sys-typescale-label-font);
  font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--md-sys-color-primary);
}
.project-name {
  border: 1px solid transparent; border-radius: var(--md-sys-shape-corner-small);
  background: transparent; padding: 6px 10px; min-width: 180px;
  font-weight: 500; color: var(--md-sys-color-on-surface);
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.project-name:hover  { background: var(--md-sys-color-surface-container); }
.project-name:focus  { border-color: var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-lowest); outline: none; }
.topbar-spacer { flex: 1; }

.main { display: flex; flex: 1; min-height: 0; }

/* ── Stepper rail ─────────────────────────────────── */
.rail {
  width: 224px; flex-shrink: 0; padding: var(--md-sys-spacing-md) var(--md-sys-spacing-sm);
  display: flex; flex-direction: column; gap: 2px;
  background: var(--md-sys-color-surface);
  border-right: 1px solid var(--md-sys-color-outline-variant);
  overflow-y: auto;
}
.step {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; text-align: left; width: 100%;
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-surface-variant);
  transition: background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.step .step-num {
  font-family: var(--md-sys-typescale-label-font); font-size: 12px; font-weight: 500;
  width: 26px; height: 26px; border-radius: var(--md-sys-shape-corner-full);
  display: grid; place-items: center; flex-shrink: 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
}
.step .step-label { font-size: 14px; font-weight: 500; line-height: 1.3; }
.step .step-sub { font-size: 11px; color: var(--md-sys-color-on-surface-variant); display: block; font-weight: 400; }
.step.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.step.active .step-num { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-color: var(--md-sys-color-primary); }
.step.done .step-num { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-color: transparent; }
.step:disabled { opacity: 0.45; cursor: not-allowed; }
.rail-footer { margin-top: auto; padding: 12px; font-size: 11px; color: var(--md-sys-color-on-surface-variant); }
.rail-footer a { color: var(--md-sys-color-primary); text-decoration: none; }

/* ── Map stage ────────────────────────────────────── */
.stage { position: relative; flex: 1; min-width: 0; }
#map { position: absolute; inset: 0; background: var(--md-sys-color-surface-variant); }
#map .maplibregl-ctrl-attrib { font-size: 10px; }

.hud {
  position: absolute; left: var(--md-sys-spacing-md); bottom: 28px; z-index: 10;
  display: flex; gap: var(--md-sys-spacing-sm); flex-wrap: wrap; max-width: 70%;
}
.hud-tile {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-2);
  padding: 8px 14px; min-width: 96px;
}
.hud-tile .k {
  font-family: var(--md-sys-typescale-label-font); font-size: 10.5px;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
.hud-tile .v { font-size: 17px; font-weight: 600; color: var(--md-sys-color-on-surface); line-height: 1.3; }
.hud-tile .v small { font-size: 11px; font-weight: 400; color: var(--md-sys-color-on-surface-variant); }

.map-tools {
  position: absolute; top: var(--md-sys-spacing-md); left: var(--md-sys-spacing-md); z-index: 10;
  display: flex; flex-direction: column; gap: var(--md-sys-spacing-sm);
}
.tool-group {
  display: flex; flex-direction: column;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-2); overflow: hidden;
}
.tool-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--md-sys-color-on-surface-variant);
}
.tool-btn + .tool-btn { border-top: 1px solid var(--md-sys-color-outline-variant); }
.tool-btn.on { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.tool-btn svg { width: 20px; height: 20px; }

.map-note {
  position: absolute; top: var(--md-sys-spacing-md); left: 50%; transform: translateX(-50%);
  z-index: 10; padding: 8px 16px; max-width: 60%;
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--md-sys-shape-corner-full); font-size: 13px;
  box-shadow: var(--md-sys-elevation-3); pointer-events: none;
  opacity: 0; transition: opacity var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}
.map-note.show { opacity: 1; }

/* ── Right panel ──────────────────────────────────── */
.panel {
  width: 396px; flex-shrink: 0; overflow-y: auto;
  background: var(--md-sys-color-surface);
  border-left: 1px solid var(--md-sys-color-outline-variant);
  padding: var(--md-sys-spacing-lg);
  display: flex; flex-direction: column; gap: var(--md-sys-spacing-md);
}
.panel-overline {
  font-family: var(--md-sys-typescale-label-font); font-size: 10.5px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--md-sys-color-primary);
}
.panel-title {
  font-family: var(--md-sys-typescale-headline-font);
  font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: 0;
  margin-top: -6px;
}
.panel-desc { font-size: 13.5px; color: var(--md-sys-color-on-surface-variant); }

.card {
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--md-sys-spacing-md);
  box-shadow: var(--md-sys-elevation-1);
}
.card + .card { margin-top: 0; }
.card-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.card-title .chip { margin-left: auto; }

/* ── Buttons ──────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: var(--md-sys-shape-corner-small);
  font-size: 14px; font-weight: 500; letter-spacing: 0.1px; white-space: nowrap;
  transition: box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}
.btn svg { width: 18px; height: 18px; }
.btn-filled  { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.btn-filled:hover { box-shadow: var(--md-sys-elevation-2); }
.btn-tonal   { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn-outline { border: 1px solid var(--md-sys-color-outline); color: var(--md-sys-color-primary); background: transparent; }
.btn-text    { color: var(--md-sys-color-primary); padding: 0 12px; }
.btn-danger  { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--md-sys-shape-corner-full);
  display: grid; place-items: center; color: var(--md-sys-color-on-surface-variant);
}
.icon-btn svg { width: 20px; height: 20px; }

/* ── Chips / badges ───────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--md-sys-shape-corner-extra-small);
  font-family: var(--md-sys-typescale-label-font); font-size: 11px; font-weight: 500;
  letter-spacing: 0.3px;
  background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.chip-primary { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-color: transparent; }
.chip-warn    { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); border-color: transparent; }
.chip-ok      { background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); border-color: transparent; }
.chip-err     { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); border-color: transparent; }
.dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ── Fields ───────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
  font-size: 12px; font-weight: 500; color: var(--md-sys-color-on-surface-variant);
  display: flex; justify-content: space-between; align-items: baseline;
}
.field label .val { font-family: var(--md-sys-typescale-label-font); font-size: 11.5px; color: var(--md-sys-color-on-surface); }
.input, select.input {
  height: 40px; padding: 0 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  width: 100%;
}
.input:focus { border-color: var(--md-sys-color-primary); outline: none; }
.input-sm { height: 32px; font-size: 13px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

input[type="range"].slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest); outline: none; cursor: pointer;
}
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--md-sys-color-primary); border: 2px solid var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-1);
}
input[type="range"].slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--md-sys-color-primary); border: 2px solid var(--md-sys-color-surface-container-lowest);
}

/* ── Search results list ──────────────────────────── */
.results { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.result-item {
  text-align: left; padding: 10px 12px; border-radius: var(--md-sys-shape-corner-small);
  font-size: 13px; line-height: 1.4; width: 100%;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
}
.result-item small { color: var(--md-sys-color-on-surface-variant); display: block; }

/* ── Constraint cards ─────────────────────────────── */
.constraint {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.constraint-head { display: flex; align-items: center; gap: 8px; }
.constraint-head .name { font-weight: 600; font-size: 13.5px; flex: 1; }
.constraint .src {
  font-family: var(--md-sys-typescale-label-font); font-size: 10.5px;
  color: var(--md-sys-color-on-surface-variant);
}

/* ── Tables ───────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th {
  font-family: var(--md-sys-typescale-label-font); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.5px; text-transform: uppercase; text-align: left;
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container);
  padding: 8px 10px; border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.tbl tr:last-child td { border-bottom: none; }
.tbl td.num, .tbl th.num { text-align: right; font-family: var(--md-sys-typescale-label-font); font-size: 11.5px; }
.tbl tfoot td { font-weight: 600; background: var(--md-sys-color-surface-container); }
.tbl input { width: 76px; text-align: right; }

/* ── Stat tiles / charts ──────────────────────────── */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat {
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium); padding: 12px 14px;
}
.stat .k {
  font-family: var(--md-sys-typescale-label-font); font-size: 10.5px;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant);
}
.stat .v { font-size: 21px; font-weight: 600; line-height: 1.35; }
.stat .v small { font-size: 12px; font-weight: 400; color: var(--md-sys-color-on-surface-variant); }
.stat.hero { grid-column: 1 / -1; }
.stat.hero .v { font-size: 30px; font-family: var(--md-sys-typescale-display-font); font-weight: 400; }
.stat .sub { font-size: 11.5px; color: var(--md-sys-color-on-surface-variant); }
.stat .pos { color: var(--md-sys-color-success); }
.stat .neg { color: var(--md-sys-color-error); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

.viz-tip {
  position: fixed; z-index: 100; pointer-events: none;
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 6px 10px; font-size: 12px; line-height: 1.5;
  box-shadow: var(--md-sys-elevation-3); opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  max-width: 260px;
}
.viz-tip.show { opacity: 1; }
.viz-tip .t-title { font-weight: 600; }

/* ── Snackbar ─────────────────────────────────────── */
.snackbar {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 80px);
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  padding: 12px 20px; border-radius: var(--md-sys-shape-corner-small);
  box-shadow: var(--md-sys-elevation-4); font-size: 13.5px; z-index: 200;
  transition: transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
  max-width: 480px;
}
.snackbar.show { transform: translate(-50%, 0); }

/* ── Proposal overlay ─────────────────────────────── */
.proposal-overlay {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto;
  background: var(--md-sys-color-scrim); display: none;
}
.proposal-overlay.open { display: block; }
.proposal-actions {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 24px;
  background: color-mix(in srgb, var(--md-sys-color-surface) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.doc {
  max-width: 880px; margin: 24px auto 80px; padding: 64px 72px;
  background: #ffffff; color: #1a1a18;
  border-radius: var(--md-sys-shape-corner-medium); box-shadow: var(--md-sys-elevation-5);
}
.doc h1 { font-family: var(--md-sys-typescale-display-font); font-size: 44px; font-weight: 400; line-height: 1.15; margin: 8px 0 4px; }
.doc h2 {
  font-family: var(--md-sys-typescale-display-font); font-size: 27px; font-weight: 400;
  margin: 40px 0 12px; padding-bottom: 8px; border-bottom: 1px solid #d6d3cb;
}
.doc h3 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; }
.doc p  { font-size: 14px; line-height: 1.7; margin: 8px 0; max-width: 640px; }
.doc .overline {
  font-family: var(--md-sys-typescale-label-font); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: #2c5f4a;
}
.doc .doc-meta { font-family: var(--md-sys-typescale-label-font); font-size: 11.5px; color: #6b6b63; margin-top: 12px; }
.doc table.tbl { font-size: 12.5px; }
.doc .tbl th { background: #f4f1eb; color: #6b6b63; }
.doc .tbl td { border-color: #e8e5dd; }
.doc img.plan-shot { width: 100%; border-radius: 8px; border: 1px solid #d6d3cb; margin: 12px 0; }
.doc .stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.doc .stat-strip .s { border: 1px solid #d6d3cb; border-radius: 8px; padding: 10px 12px; }
.doc .stat-strip .k { font-family: var(--md-sys-typescale-label-font); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: #6b6b63; }
.doc .stat-strip .v { font-size: 19px; font-weight: 600; }

@media print {
  body { overflow: visible; }
  #app, .snackbar, .viz-tip, .proposal-actions { display: none !important; }
  .proposal-overlay { position: static; background: none; overflow: visible; }
  .doc { box-shadow: none; margin: 0; max-width: none; border-radius: 0; padding: 24px 8px; }
}

/* ── Empty state ──────────────────────────────────── */
.empty {
  border: 1px dashed var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 28px 20px; text-align: center;
  color: var(--md-sys-color-on-surface-variant); font-size: 13px;
}
.empty .big { font-family: var(--md-sys-typescale-headline-font); font-size: 19px; color: var(--md-sys-color-on-surface); margin-bottom: 4px; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1080px) {
  .rail { width: 64px; }
  .rail .step-label, .rail .step-sub, .rail-footer { display: none; }
  .step { justify-content: center; padding: 10px 0; }
  .panel { width: 340px; }
}
@media (max-width: 768px) {
  .main { flex-direction: column; }
  .rail { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid var(--md-sys-color-outline-variant); overflow-x: auto; padding: 6px; }
  .stage { min-height: 42vh; }
  .panel { width: 100%; border-left: none; border-top: 1px solid var(--md-sys-color-outline-variant); }
  .brand-tag { display: none; }
}