frontend/css/merlx.css

/* ============================================================
   MERLx Design System — CSS Tokens & Component Styles
   Aperture
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* --- Design Tokens --- */
:root {
  /* Core Palette */
  --shell:           #F5F3EE;
  --shell-warm:      #EDE9E1;
  --shell-cool:      #F9F8F5;
  --ink:             #111111;
  --ink-light:       #2A2A2A;
  --ink-muted:       #6B6B6B;
  --ink-faint:       #9E9E9E;
  --surface:         #FFFFFF;
  --border:          #D5D0C7;
  --border-light:    #E5E1DA;

  /* Accent Palette */
  --sand:            #E8D4C0;
  --sand-light:      #F0E2D4;
  --sand-dark:       #C4A98A;
  --iris:            #8071BC;
  --iris-light:      #A498D0;
  --iris-dark:       #635499;
  --deep-teal:       #1A3A34;
  --deep-teal-light: #2A5249;
  --deep-iris:       #4A3F6B;
  --deep-iris-light: #5E5280;
  --ember:           #CA5D0F;
  --ember-light:     #E07B33;
  --ember-dark:      #A84B0C;

  /* Dim Variants */
  --sand-dim:        rgba(232, 212, 192, 0.25);
  --iris-dim:        rgba(128, 113, 188, 0.12);
  --deep-teal-dim:   rgba(26, 58, 52, 0.10);
  --deep-iris-dim:   rgba(74, 63, 107, 0.10);
  --ember-dim:       rgba(202, 93, 15, 0.10);

  /* Status Colors */
  --success:         #3BAA7F;
  --error:           #B83A2A;
  --error-light:     #D05454;

  /* Typography */
  --font-ui:         'Inter', system-ui, sans-serif;
  --font-display:    'DM Serif Display', Georgia, serif;
  --font-data:       'IBM Plex Mono', 'JetBrains Mono', monospace;

  /* Font Sizes */
  --text-xl:         16px;
  --text-lg:         15px;
  --text-base:       13px;
  --text-sm:         12px;
  --text-xs:         11px;
  --text-xxs:        10px;
  --text-micro:      9px;

  /* Spacing */
  --space-1:         2px;
  --space-2:         4px;
  --space-3:         6px;
  --space-4:         8px;
  --space-5:         10px;
  --space-6:         12px;
  --space-7:         14px;
  --space-8:         16px;
  --space-10:        20px;
  --space-12:        24px;

  /* Border Radius */
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --radius-xl:       16px;
  --radius-pill:     100px;

  /* Motion */
  --motion-fast:     100ms;
  --motion-default:  200ms;
  --motion-slow:     300ms;
  --ease-default:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--ink);
  background-color: var(--shell);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* --- Typography Helpers --- */
.font-display {
  font-family: var(--font-display);
}

.font-data {
  font-family: var(--font-data);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.2;
  color: var(--ink);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 34px;
  padding: 0 var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--motion-default) var(--ease-default),
              border-color var(--motion-default) var(--ease-default),
              color var(--motion-default) var(--ease-default),
              opacity var(--motion-default) var(--ease-default);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--iris);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--deep-teal);
  color: var(--surface);
  border-color: var(--deep-teal);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--deep-teal-light);
  border-color: var(--deep-teal-light);
}

.btn-secondary {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--border);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--shell-warm);
}

.btn-lg {
  height: 42px;
  padding: 0 var(--space-12);
  font-size: var(--text-base);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Cards --- */
.card {
  background-color: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.card-selectable {
  cursor: pointer;
  transition: border-color var(--motion-default) var(--ease-default),
              background-color var(--motion-default) var(--ease-default);
}

.card-selectable:hover:not(.card-selected) {
  border-color: var(--border);
  background-color: var(--shell-cool);
}

.card-selected {
  border-color: var(--deep-teal);
  background-color: var(--deep-teal-dim);
}

.card-selected:hover {
  border-color: var(--deep-teal-light);
}

/* --- Inputs --- */
.input {
  display: block;
  width: 100%;
  height: 34px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-default) var(--ease-default);
  outline: none;
}

.input::placeholder {
  color: var(--ink-faint);
}

.input:focus {
  border-color: var(--iris);
  outline: none;
}

.input:focus-visible {
  outline: 2px solid var(--iris);
  outline-offset: 0;
}

/* --- Labels --- */
.label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-muted);
  margin-bottom: var(--space-3);
  letter-spacing: 0.04em;
}

/* --- Badges / Pills --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xxs);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.badge-queued, .badge-waiting {
  background-color: var(--shell-warm);
  color: var(--ink-muted);
}

.badge-processing {
  background-color: var(--iris-dim);
  color: var(--iris-dark);
}

.badge-complete {
  background-color: rgba(59, 170, 127, 0.12);
  color: var(--success);
}

.badge-failed {
  background-color: rgba(184, 58, 42, 0.10);
  color: var(--error);
}

.badge-green {
  background-color: rgba(59, 170, 127, 0.12);
  color: var(--success);
}

.badge-amber {
  background-color: var(--ember-dim);
  color: var(--ember-dark);
}

.badge-red {
  background-color: rgba(184, 58, 42, 0.10);
  color: var(--error);
}

.badge-placeholder {
  background-color: rgba(202, 93, 15, 0.10);
  color: var(--ember-dark);
  font-size: var(--text-xxs);
  display: block;
  width: fit-content;
  margin-bottom: var(--space-2);
}

/* --- Status Dots --- */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot-queued     { background-color: var(--ink-faint); }
.status-dot-waiting    { background-color: var(--ink-faint); }
.status-dot-processing { background-color: var(--iris); }
.status-dot-complete   { background-color: var(--success); }
.status-dot-failed     { background-color: var(--error); }

/* --- Form Groups --- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-group + .form-group {
  margin-top: var(--space-6);
}

/* --- Dividers --- */
.divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: var(--space-8) 0;
}

/* --- Steps Indicator --- */
.steps {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--border);
  transition: background-color var(--motion-default) var(--ease-default);
}

.step-dot.active {
  background-color: var(--iris);
}

.step-dot.done {
  background-color: var(--deep-teal);
}

.step-connector {
  flex: 1;
  height: 1px;
  background-color: var(--border-light);
  max-width: 40px;
}

/* --- Page Shell --- */
.page {
  display: none;
  min-height: 100vh;
  flex-direction: column;
}

.page.active {
  display: flex;
}

/* --- Top Bar --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-12);
  border-bottom: 1px solid var(--border-light);
  background-color: var(--surface);
  flex-shrink: 0;
}

.logo {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.3px;
  text-decoration: none;
}

.logo .x {
  color: var(--iris);
}

/* --- Landing Page --- */
#page-landing {
  align-items: center;
  justify-content: center;
  background-color: var(--shell);
}

.landing-hero {
  text-align: center;
  max-width: 560px;
  padding: var(--space-12);
}

.landing-logo {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: var(--space-8);
  letter-spacing: -0.5px;
}

.landing-headline {
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  color: var(--ink-light);
  margin-bottom: var(--space-12);
  line-height: 1.3;
}

.landing-sub {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-bottom: var(--space-10);
  line-height: 1.6;
}

/* --- Login Page --- */
#page-login {
  align-items: center;
  justify-content: center;
  background-color: var(--shell);
}

.login-card {
  background-color: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  width: 100%;
  max-width: 380px;
}

.login-logo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-align: center;
  margin-bottom: var(--space-2);
}

.login-heading {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-8);
  letter-spacing: -0.2px;
}

.login-helper {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-align: center;
  margin-top: var(--space-5);
}

.login-back-link {
  display: block;
  text-align: center;
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  text-decoration: none;
}

.login-back-link:hover {
  color: var(--iris-dark);
  text-decoration: underline;
}

/* --- Map Page --- */
#page-define-area {
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
}

.map-sidebar {
  width: 320px;
  background-color: var(--surface);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.map-sidebar-header {
  padding: var(--space-8) var(--space-10);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.map-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.map-sidebar-footer {
  padding: var(--space-8) var(--space-10);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

.map-container {
  flex: 1;
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
}

/* AOI size toggle buttons */
.size-toggles {
  display: flex;
  gap: var(--space-2);
}

.size-toggle-btn {
  flex: 1;
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--ink-muted);
  font-family: var(--font-data);
  font-weight: 500;
  transition: all var(--motion-default) var(--ease-default);
}

.size-toggle-btn:hover {
  background-color: var(--shell-warm);
  color: var(--ink);
}

.size-toggle-btn.active {
  background-color: var(--iris-dim);
  border-color: var(--iris);
  color: var(--iris-dark);
  font-weight: 600;
}

/* AOI area display */
.aoi-area-display {
  margin-top: var(--space-3);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

/* AOI Advisor card */
.aoi-advisor {
  background: var(--shell-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  margin-top: var(--space-3);
}

.aoi-advisor-loading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.aoi-advisor-heading {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.aoi-advisor-text {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 var(--space-3) 0;
}

.aoi-advisor-meta {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin: 0 0 var(--space-2) 0;
}

.aoi-advisor-priorities {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.aoi-advisor-pill {
  font-family: var(--font-data);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--iris-dim);
  color: var(--iris-dark);
  border: 1px solid var(--iris);
}

/* Basemap layer toggle */
.basemap-toggle button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  transition: color var(--motion-default) var(--ease-default),
              background-color var(--motion-default) var(--ease-default);
}

.basemap-toggle button:hover {
  color: var(--ink);
  background-color: var(--shell-warm);
}

.basemap-toggle button:focus-visible {
  outline: 2px solid var(--iris);
  outline-offset: -2px;
}


/* Date pickers row */
.date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* --- Indicators Page --- */
#page-indicators {
  flex-direction: column;
}

.indicators-topbar {
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--border-light);
  background-color: var(--surface);
  flex-shrink: 0;
}

.indicators-grid {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-12);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  align-content: start;
}

.indicator-card {
  background-color: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  cursor: pointer;
  transition: border-color var(--motion-default) var(--ease-default),
              background-color var(--motion-default) var(--ease-default);
}

.indicator-card:hover:not(.selected) {
  border-color: var(--border);
  background-color: var(--shell-cool);
}

.indicator-card.selected {
  border-color: var(--deep-teal);
  background-color: var(--deep-teal-dim);
}

.indicator-card-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-3);
  letter-spacing: -0.1px;
}

.indicator-card-question {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: var(--space-5);
}

.indicator-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.indicator-card-category {
  font-size: var(--text-xxs);
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.indicator-card-time {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

/* Sticky summary bar */
.indicators-summary-bar {
  position: sticky;
  bottom: 0;
  background-color: var(--surface);
  border-top: 1px solid var(--border-light);
  padding: var(--space-5) var(--space-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 10;
}

.summary-text {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.summary-text strong {
  color: var(--ink);
  font-weight: 600;
}

/* --- Confirm Page --- */
#page-confirm {
  align-items: center;
  justify-content: center;
}

.confirm-card {
  background-color: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  width: 100%;
  max-width: 480px;
}

.confirm-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-8);
  letter-spacing: -0.2px;
}

.confirm-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
  padding: var(--space-8);
  background-color: var(--shell);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.confirm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.confirm-row-label {
  color: var(--ink-muted);
}

.confirm-row-value {
  font-weight: 500;
  color: var(--ink);
  font-family: var(--font-data);
  font-size: var(--text-xs);
}

/* --- Status Page --- */
#page-status {
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
}

.status-card {
  background-color: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  width: 100%;
  max-width: 480px;
}

.status-header {
  margin-bottom: var(--space-10);
}

.status-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-3);
  letter-spacing: -0.2px;
}

.status-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.status-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.status-item {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-sm);
  background-color: var(--shell);
}

.status-item-name {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--ink);
}

/* --- History Page --- */
#page-history {
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.history-topbar {
  padding: var(--space-5) var(--space-12);
  border-bottom: 1px solid var(--border-light);
  background-color: var(--surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-12);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
  align-content: start;
}

.history-card {
  background-color: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  cursor: pointer;
  transition: border-color var(--motion-default) var(--ease-default),
              background-color var(--motion-default) var(--ease-default);
}

.history-card:hover {
  border-color: var(--border);
  background-color: var(--shell-cool);
}

.history-card-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.history-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
}

.history-card-date {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.history-card-indicators {
  font-size: var(--text-xxs);
  color: var(--ink-faint);
}

.history-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.topbar-link {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 500;
}

.topbar-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* --- Results Page --- */
#page-results {
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.results-topbar {
  padding: var(--space-5) var(--space-12);
  border-bottom: 1px solid var(--border-light);
  background-color: var(--surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.results-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.results-map {
  flex: 0 0 65%;
  position: relative;
}

#results-map {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Map legend panel — floating bottom-right over the results map */
.map-legend {
  position: absolute;
  bottom: 20px;
  right: 20px;
  max-width: 260px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  box-shadow: 0 6px 20px rgba(17, 17, 17, 0.08);
  pointer-events: none;
  z-index: 2;
  font-family: var(--font-ui);
}

.map-legend-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.map-legend-bar {
  height: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  margin-bottom: var(--space-2);
}

.map-legend-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-data);
  font-size: var(--text-micro);
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}

.map-legend-hint {
  font-size: var(--text-micro);
  color: var(--ink-muted);
  line-height: 1.45;
}

.map-legend-unavailable {
  font-size: var(--text-micro);
  color: var(--ember);
  line-height: 1.45;
  background: var(--ember-dim);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}

.results-panel {
  flex: 0 0 35%;
  background-color: var(--surface);
  border-left: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.results-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-12);
}

.results-panel-footer {
  padding: var(--space-8) var(--space-10);
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex-shrink: 0;
}

.result-card {
  background-color: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  cursor: pointer;
  transition: border-color var(--motion-default) var(--ease-default),
              background-color var(--motion-default) var(--ease-default);
}

.result-card:hover:not(.active) {
  border-color: var(--border);
  background-color: var(--shell-cool);
}

.result-card.active {
  border-color: var(--deep-teal);
  background-color: var(--deep-teal-dim);
}

.result-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.result-card-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.1px;
}

.result-card-headline {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.result-card-trend {
  font-family: var(--font-data);
  font-size: var(--text-xxs);
  color: var(--ink-faint);
}

/* ============================================================
   Rich Results Dashboard — overview header, cards, sparklines,
   confidence bars. All components follow MERLx tokens.
   ============================================================ */

.results-overview {
  background: var(--shell-cool);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  margin-bottom: var(--space-8);
}

.results-overview-loading {
  font-family: var(--font-data);
}

.overview-header-label {
  font-family: var(--font-data);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: var(--space-5);
}

.overview-score-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.overview-score-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--surface);
}

.status-ring-green  { border-color: var(--success); }
.status-ring-amber  { border-color: var(--ember); }
.status-ring-red    { border-color: var(--error); }

.overview-score-value {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}

.overview-score-unit {
  font-family: var(--font-data);
  font-size: 8px;
  color: var(--ink-faint);
  margin-top: 1px;
  letter-spacing: 0.05em;
}

.overview-score-copy {
  flex: 1;
  min-width: 0;
}

.overview-score-status {
  font-family: var(--font-data);
  font-size: var(--text-xxs);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.status-text-green  { color: var(--success); }
.status-text-amber  { color: var(--ember); }
.status-text-red    { color: var(--error); }

.overview-score-headline {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--ink);
}

.overview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.overview-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--motion-default) var(--ease-default),
              background-color var(--motion-default) var(--ease-default);
  font-family: var(--font-ui);
}

.overview-chip:hover {
  border-color: var(--border);
  background: var(--shell-warm);
}

.overview-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.chip-green .overview-chip-dot { background: var(--success); }
.chip-amber .overview-chip-dot { background: var(--ember); }
.chip-red   .overview-chip-dot { background: var(--error); }

.overview-chip-label {
  font-size: var(--text-xs);
}

.overview-signals {
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-5);
  margin-top: var(--space-3);
}

.overview-signals-label {
  font-family: var(--font-data);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}

.overview-signal-item {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
}

.overview-signal-item:last-child {
  margin-bottom: 0;
}

.overview-signal-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink);
  margin-right: var(--space-3);
}

.overview-signal-conf {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-family: var(--font-data);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.overview-signal-conf.chip-green { background: rgba(59,170,127,0.12); color: var(--success); }
.overview-signal-conf.chip-amber { background: var(--ember-dim); color: var(--ember); }
.overview-signal-conf.chip-red   { background: rgba(184,58,42,0.12); color: var(--error); }

.overview-signal-desc {
  margin-top: var(--space-2);
  font-size: var(--text-xxs);
  color: var(--ink-muted);
  line-height: 1.4;
}

/* ─── Indicator cards ──────────────────────────────────── */

.results-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.result-card {
  padding: var(--space-8);
}

.result-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-3);
}

.result-card-title {
  flex: 1;
  min-width: 0;
}

.result-card-question {
  font-family: var(--font-data);
  font-size: var(--text-micro);
  color: var(--ink-faint);
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.result-card-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.result-card-trend-glyph {
  font-family: var(--font-data);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1;
}

.confidence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.confidence-high     { background: var(--success); }
.confidence-moderate { background: var(--ember); }
.confidence-low      { background: var(--error); }

.result-card-headline {
  font-size: var(--text-xs);
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: var(--space-5);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Sparkline */
.result-card-spark {
  background: var(--shell-cool);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4) var(--space-2);
  margin-bottom: var(--space-5);
}

.spark-svg {
  width: 100%;
  height: 84px;
  display: block;
}

.spark-envelope {
  fill: var(--deep-teal-dim);
  stroke: none;
}

.spark-mean {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.spark-current {
  fill: none;
  stroke: var(--deep-teal);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.spark-anomaly {
  fill: var(--error);
  stroke: var(--surface);
  stroke-width: 1;
}

.spark-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-2);
  font-size: var(--text-micro);
  color: var(--ink-faint);
}

.spark-caption-label {
  color: var(--ink-muted);
}

.spark-caption-dates {
  font-family: var(--font-data);
  letter-spacing: 0.03em;
}

/* Metrics row */
.result-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.metric {
  background: var(--shell-cool);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  border: 1px solid transparent;
}

.metric-value {
  font-family: var(--font-data);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.metric-label {
  font-family: var(--font-data);
  font-size: var(--text-micro);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.metric-green .metric-value { color: var(--success); }
.metric-amber .metric-value { color: var(--ember); }
.metric-red   .metric-value { color: var(--error); }

.result-card-color-hint {
  font-family: var(--font-data);
  font-size: var(--text-micro);
  color: var(--ink-muted);
  line-height: 1.5;
  padding: var(--space-3) var(--space-4);
  background: var(--shell-warm);
  border-left: 2px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
}

/* Before/after bar pair (used for two-point series like built-up) */
.before-after {
  padding: var(--space-4) var(--space-5);
}

.before-after-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.before-after-row:last-of-type {
  margin-bottom: var(--space-3);
}

.ba-label {
  font-family: var(--font-data);
  font-size: var(--text-micro);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ba-bar-track {
  background: var(--shell-warm);
  border-radius: var(--radius-sm);
  height: 12px;
  position: relative;
  overflow: hidden;
}

.ba-bar {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width var(--motion-slow) var(--ease-default);
}

.bar-baseline { background: var(--ink-faint); }
.bar-green    { background: var(--success); }
.bar-amber    { background: var(--ember); }
.bar-red      { background: var(--error); }

.ba-value {
  font-size: var(--text-xxs);
  color: var(--ink);
  min-width: 40px;
  text-align: right;
}

.before-after-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
  margin-top: var(--space-2);
  font-size: var(--text-micro);
}

.ba-delta {
  font-weight: 600;
  font-family: var(--font-data);
}

.delta-green { color: var(--success); }
.delta-amber { color: var(--ember); }
.delta-red   { color: var(--error); }

.result-card-summary {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  line-height: 1.55;
  margin-bottom: var(--space-5);
}

/* Confidence bars */
.result-confidence {
  margin-bottom: var(--space-5);
}

.result-confidence-label {
  font-family: var(--font-data);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}

.conf-bar {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.conf-bar-label {
  font-family: var(--font-data);
  font-size: var(--text-micro);
  color: var(--ink-muted);
}

.conf-bar-track {
  background: var(--shell-warm);
  border-radius: var(--radius-pill);
  height: 4px;
  overflow: hidden;
}

.conf-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--motion-slow) var(--ease-default);
}

.conf-green { background: var(--success); }
.conf-amber { background: var(--ember); }
.conf-red   { background: var(--error); }

/* Collapsible details */
.result-card-details {
  margin-top: var(--space-3);
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-4);
}

.result-card-details + .result-card-details {
  padding-top: var(--space-3);
}

.result-card-details summary {
  font-family: var(--font-data);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
  user-select: none;
}

.result-card-details summary::-webkit-details-marker { display: none; }

.result-card-details summary::before {
  content: '▸ ';
  color: var(--ink-faint);
}

.result-card-details[open] summary::before { content: '▾ '; }

.result-card-limits {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}

.result-card-limits li {
  font-size: var(--text-xxs);
  color: var(--ink-muted);
  line-height: 1.5;
  padding-left: var(--space-4);
  position: relative;
  margin-bottom: var(--space-2);
}

.result-card-limits li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ink-faint);
}

.result-card-methodology {
  font-size: var(--text-xxs);
  color: var(--ink-muted);
  line-height: 1.55;
  margin-top: var(--space-3);
}

/* --- Download links --- */
.download-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--deep-teal);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--motion-default) var(--ease-default);
}

.download-link:hover {
  color: var(--deep-teal-light);
  text-decoration: underline;
}

/* --- Scroll customization --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--border);
}

/* --- Utility Classes --- */
.text-muted  { color: var(--ink-muted); }
.text-faint  { color: var(--ink-faint); }
.text-mono   { font-family: var(--font-data); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.text-xxs    { font-size: var(--text-xxs); }
.fw-600      { font-weight: 600; }
.mt-4        { margin-top: var(--space-4); }
.mt-8        { margin-top: var(--space-8); }

/* --- Mobile Responsive --- */
@media (max-width: 768px) {

  /* Allow scroll on stacked layouts */
  body {
    overflow: auto !important;
    height: auto !important;
  }

  /* Centered pages: add horizontal padding */
  #page-landing,
  #page-login,
  #page-confirm,
  #page-status {
    padding: var(--space-8);
    min-height: 100vh;
    height: auto;
  }

  .landing-hero {
    padding: var(--space-8);
  }

  .landing-headline {
    font-size: 22px;
  }

  .login-card,
  .confirm-card,
  .status-card {
    max-width: 100%;
  }

  /* Define Area: stack sidebar + map vertically */
  #page-define-area {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh;
    overflow: auto !important;
  }

  .map-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    max-height: none;
    overflow: visible;
  }

  .map-container {
    height: 50vh;
    min-height: 300px;
  }

  /* Indicators: allow scroll */
  #page-indicators {
    height: auto !important;
    min-height: 100vh;
    overflow: auto !important;
  }

  .indicators-topbar {
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
  }

  .indicators-grid {
    padding: var(--space-6);
    grid-template-columns: 1fr;
  }

  .indicators-summary-bar {
    padding: var(--space-5) var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  /* History: allow scroll */
  #page-history {
    height: auto !important;
    min-height: 100vh;
    overflow: auto !important;
  }

  .history-topbar {
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
  }

  .history-list {
    padding: var(--space-6);
    grid-template-columns: 1fr;
  }

  /* Results: stack panel above map */
  #page-results {
    height: auto !important;
    min-height: 100vh;
    overflow: auto !important;
  }

  .results-topbar {
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
  }

  .results-body {
    flex-direction: column-reverse;
    overflow: auto;
  }

  .results-map {
    flex: none;
    height: 40vh;
    min-height: 250px;
  }

  .results-panel {
    flex: none;
    border-left: none;
    border-bottom: 1px solid var(--border-light);
    max-height: none;
    overflow: visible;
  }

  .results-panel-body {
    max-height: none;
    overflow: visible;
  }

  /* Topbar links: smaller on mobile */
  .topbar-link {
    font-size: var(--text-xxs);
  }

  /* Steps: tighten */
  .step-connector {
    max-width: 20px;
  }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}