:root {
  /* Primary Brand Colors - Teal (for primary actions only) */
  --background-primary: #7facca;
  --background-primary-hover: #99bcd5;
  --background-primary-active: #4c8ab5;

  /* Secondary Brand Colors - Blue-grey (for headers, navigation, secondary actions) */
  --background-secondary: #009688;
  --background-secondary-hover: #B8E0D4;
  --background-secondary-active: #809BCE;

  /* Accent Colors */
  --background-highlight: #FFEB3B;
  --accent-warm: #FF9800;

  /* Text Colors */
  --text-primary-color: #222222;
  --text-secondary-color: #6b7280;
  --text-heading-color: #1f2937;
  --text-dark: #111827;
  --text-medium: #374151;
  --text-disabled: #9ca3af;
  --text-white: #ffffff;

  /* Background & Surface Colors */
  --surface-white: #ffffff;
  --surface-lightest: #f9fafb;
  --surface-light: #f5f5f5;
  --surface-medium: #f3f4f6;
  --surface-dark: #333;

  /* Border & Divider Colors */
  --border-light: #e5e7eb;
  --border-medium: #d1d5db;
  --border-dark: #6b7280;

  /* State Colors */
  --state-success: #4caf50;
  --state-error: #f44336;
  --state-warning: #ff9800;
  --state-info: #2196f3;

  /* Shadow & Overlay Colors */
  --shadow-sm: rgba(0, 0, 0, 0.06);
  --shadow-md: rgba(0, 0, 0, 0.1);
  --shadow-lg: rgba(0, 0, 0, 0.15);
  --shadow-xl: rgba(0, 0, 0, 0.2);
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-light: rgba(255, 255, 255, 0.12);
  --overlay-lighter: rgba(255, 255, 255, 0.08);

  /* Primary Color Overlays (for hover/focus states) */
  --primary-overlay-light: rgba(0, 150, 136, 0.08);
  --primary-overlay-medium: rgba(0, 150, 136, 0.12);

  /* Legacy MD3 Colors (to be phased out) */
  --md3-surface-variant: #e7e0ec;
  --md3-primary: #6750a4;
  --md3-on-surface: #1c1b1f;
  --md3-disabled: #757575;
}

/* Base Material Design 3 Typography */
body {
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Material Design 3 Heading Typography */
h5 {
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  margin: 16px 0 8px 0;
  color: var(--text-heading-color);
}

/*
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
*/

/* Modern Grid System - Replacement for MDL Grid */
.app-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Grid cell base class */
.app-cell {
  grid-column: span 12; /* default to full width */
}

/* Desktop column spans */
.app-cell--1 { grid-column: span 1; }
.app-cell--2 { grid-column: span 2; }
.app-cell--3 { grid-column: span 3; }
.app-cell--4 { grid-column: span 4; }
.app-cell--5 { grid-column: span 5; }
.app-cell--6 { grid-column: span 6; }
.app-cell--7 { grid-column: span 7; }
.app-cell--8 { grid-column: span 8; }
.app-cell--9 { grid-column: span 9; }
.app-cell--10 { grid-column: span 10; }
.app-cell--11 { grid-column: span 11; }
.app-cell--12 { grid-column: span 12; }

/* Column offsets */
.app-cell--1-offset { grid-column-start: 2; }
.app-cell--2-offset { grid-column-start: 3; }
.app-cell--3-offset { grid-column-start: 4; }

/* Responsive Layout Breakpoints */

/* Large screens (1920x1080+): Use more width, widen controls */
@media (min-width: 1441px) {
  .app-grid {
    max-width: 1600px;
  }

  /* Experiment tab: Better distribution for wide screens */
  #column-1 { grid-column: span 3; }
  #column-2 { grid-column: span 3; }
  #chart-column { grid-column: span 6; }

  /* What If tab: Similar adjustment */
  #what-if-column-1 { grid-column: span 3; }
  #what-if-chart-column { grid-column: span 9; }

  /* Read tab: Use full width on large screens */
  #st1-grid {
    grid-column: 1 / -1; /* Full width */
  }
}

/* Medium-large screens (1025-1440): Widen controls from default */
@media (min-width: 1025px) and (max-width: 1440px) {
  /* Experiment tab: Widen column-2 controls */
  #column-1 { grid-column: span 3; }
  #column-2 { grid-column: span 3; }
  #chart-column { grid-column: span 6; }

  /* What If tab: Adjust accordingly */
  #what-if-column-1 { grid-column: span 3; }
  #what-if-chart-column { grid-column: span 9; }

  /* Read tab: Full width for medium-large screens */
  #st1-grid {
    grid-column: 1 / -1; /* Full width */
  }
}

/* Tablet landscape (841-1024): Stack text, side-by-side controls + chart */
@media (min-width: 841px) and (max-width: 1024px) {
  /* Experiment tab: Text stacks, controls + chart side-by-side */
  #column-1 { grid-column: span 12; }
  #column-2 { grid-column: span 4; }
  #chart-column { grid-column: span 8; }

  /* What If tab: Text stacks, chart takes remaining space */
  #what-if-column-1 { grid-column: span 12; }
  #what-if-chart-column { grid-column: span 12; }

  /* Read tab: Full width on tablet landscape */
  #st1-grid { grid-column: span 12; }
}

/* Tablet portrait and mobile (≤840px) */
@media (max-width: 840px) {
  .app-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 12px;
  }

  .app-cell--desktop-only {
    display: none;
  }

  /* All columns full width */
  #column-1,
  #column-2,
  #chart-column,
  #what-if-column-1,
  #what-if-chart-column,
  #st1-grid {
    width: 100%;
  }

  /* Mobile layout order: Chart first, controls second, text last */
  #chart-column {
    order: 1;
  }

  #column-2 {
    order: 2;
  }

  #column-1 {
    order: 3;
  }

  /* What If tab: Chart first */
  #what-if-chart-column {
    order: 1;
  }

  #what-if-column-1 {
    order: 2;
  }
}

/* Mobile (≤480px) */
@media (max-width: 480px) {
  .app-grid {
    gap: 12px;
    padding: 0 8px;
  }

  .app-cell,
  #st1-grid {
    width: 100%;
  }
}

/* Mobile: Collapsible text sections */
@media (max-width: 840px) {
  /* Hide most of the introductory text on mobile by default */
  #column-1 {
    max-height: 200px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
  }

  #column-1.expanded {
    max-height: none;
  }

  /* Add "Read more" indicator */
  #column-1::after {
    content: "▼ Tap to read more";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 0 10px;
    background: linear-gradient(to bottom, transparent 0%, var(--surface-white) 50%);
    text-align: center;
    font-size: 13px;
    color: var(--background-primary);
    font-weight: 500;
    pointer-events: none;
  }

  #column-1.expanded::after {
    content: "▲ Tap to collapse";
    position: static;
    background: none;
    padding: 10px 0;
    display: block;
  }

  /* Make the text column tappable */
  #column-1 {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 150, 136, 0.1);
  }

  /* Reduce text size on mobile for compactness */
  #column-1 p,
  #column-1 li {
    font-size: 14px;
    line-height: 1.5;
  }

  #column-1 h5 {
    font-size: 16px;
    margin: 12px 0 8px;
  }
}

/* Grid Migration Fixes */
/* Ensure top controls maintain proper spacing */
.app-cell .top-controls {
  margin-bottom: 16px;
  /* Note: width and box-sizing handled by top-controls class itself */
}

/* Read Tab Typography and Layout */
#st1-grid {
  padding: 20px 40px;
}

#st1-grid h4 {
  margin-top: 24px;
  margin-bottom: 16px;
}

#st1-grid h5 {
  margin-top: 20px;
  margin-bottom: 12px;
}

#st1-grid p {
  line-height: 1.6;
  margin-bottom: 16px;
}

#st1-grid ul, #st1-grid ol {
  margin-bottom: 16px;
  line-height: 1.6;
}

/* Adjust padding for smaller screens */
@media (max-width: 840px) {
  #st1-grid {
    padding: 16px 20px;
  }
}

@media (max-width: 480px) {
  #st1-grid {
    padding: 12px 16px;
  }
}

/* Fix for chart column spacing */
.chart-column {
  min-height: 400px;
  position: relative;
}

/* Maintain App Layout compatibility */
.app-grid .app-content {
  display: flex;
  flex-direction: column;
}

/* Fix any remaining margin/padding issues */
.app-cell > *:first-child {
  margin-top: 0;
}

.app-cell > *:last-child {
  margin-bottom: 0;
}

/* Specific fixes for control panels */
#column-1, #column-2 {
  padding-right: 8px;
}

#what-if-column-1 {
  padding-right: 8px;
}

/* Ensure consistent spacing between grid sections */
.app-grid + .app-grid {
  margin-top: 24px;
}

/* Fix table alignment in What If tab */
.what-if-table {
  width: 100%;
  margin: 0;
  font-size: 13px; /* More compact */
}

/* More compact What If table styling */
.what-if-table th {
  padding: 10px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.what-if-table td {
  padding: 8px 12px;
  font-size: 13px;
}

/* Highlight differences in comparison column */
.what-if-table tbody tr:hover {
  background: var(--surface-lightest);
  transition: background 0.15s ease;
}

/* Add subtle striping for better readability */
.what-if-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

.what-if-table tbody tr:nth-child(even):hover {
  background: var(--surface-lightest);
}

/* Material Design 3 Slider Components */
.app-slider-container {
  width: 100%;
  margin: 16px 0;
}

.app-slider-label {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #1c1b1f; /* MD3 on-surface */
  margin-bottom: 8px;
}

.app-slider-value {
  font-weight: 600;
  color: #6750a4; /* MD3 primary */
}

.app-slider-help {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.4px;
  color: #49454f; /* MD3 on-surface-variant */
  margin: 4px 0 8px 0;
}

/* MD3 Slider Input Styling */
.app-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: #e7e0ec; /* MD3 surface-variant */
  border-radius: 2px;
  outline: none;
  margin: 8px 0;
  cursor: pointer;
  position: relative;
}

/* MD3 Slider Track (WebKit) */
.app-slider::-webkit-slider-track {
  width: 100%;
  height: 4px;
  background: #e7e0ec; /* MD3 surface-variant */
  border-radius: 2px;
  border: none;
}

/* MD3 Slider Track (Firefox) */
.app-slider::-moz-range-track {
  width: 100%;
  height: 4px;
  background: #e7e0ec; /* MD3 surface-variant */
  border-radius: 2px;
  border: none;
}

/* MD3 Slider Thumb (WebKit) */
.app-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #6750a4; /* MD3 primary */
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);
  border: none;
}

/* MD3 Slider Thumb (Firefox) */
.app-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #6750a4; /* MD3 primary */
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);
  border: none;
}

/* MD3 Slider Hover States */
.app-slider:hover::-webkit-slider-thumb {
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  transform: scale(1.1);
}

.app-slider:hover::-moz-range-thumb {
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  transform: scale(1.1);
}

/* MD3 Slider Focus States */
.app-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 8px rgba(103, 80, 164, 0.12), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  outline: none;
}

.app-slider:focus::-moz-range-thumb {
  box-shadow: 0 0 0 8px rgba(103, 80, 164, 0.12), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  outline: none;
}

/* MD3 Slider Active States */
.app-slider:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 12px rgba(103, 80, 164, 0.12), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  transform: scale(1.2);
}

.app-slider:active::-moz-range-thumb {
  box-shadow: 0 0 0 12px rgba(103, 80, 164, 0.12), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  transform: scale(1.2);
}

/* MD3 Slider Disabled States */
.app-slider:disabled {
  background: #e6e1e5; /* MD3 on-surface disabled */
  cursor: not-allowed;
}

.app-slider:disabled::-webkit-slider-thumb {
  background: #1c1b1f38; /* MD3 on-surface disabled */
  box-shadow: none;
  cursor: not-allowed;
}

.app-slider:disabled::-moz-range-thumb {
  background: #1c1b1f38; /* MD3 on-surface disabled */
  box-shadow: none;
  cursor: not-allowed;
}

/* Modern Layout System - Replacement for MDL Layout */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

/* Material Design 3 Header */
.app-header {
  background-color: var(--background-secondary); /* Peaceful blue-grey */
  color: var(--text-white);
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12); /* MD3 elevation 2 */
  position: sticky;
  top: 0;
  z-index: 100;
  font-family: 'Roboto', sans-serif;
}

/* Hide header only when zoom mode is active (hidden class added) */
.app-header.ui-zoom-hide.hidden {
  display: none;
}

.app-header-row {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: 64px;
  width: 100%;
  box-sizing: border-box;
  gap: 0; /* Remove gap, use explicit spacing on elements */
  flex-wrap: nowrap; /* Prevent wrapping on desktop */
}

.app-layout-title {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 500; /* MD3 title medium */
  line-height: 28px;
  letter-spacing: 0px;
  margin: 0;
  margin-right: 20px;
  padding-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 1; /* Allow title to shrink if needed */
  min-width: 0; /* Allow text to truncate if necessary */
  color: var(--text-white);
}

/* Reset h1 styles when used as title */
h1.app-layout-title {
  margin: 0;
  margin-right: 8px;
  padding: 0;
  padding-right: 8px;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 16px;
  font-weight: 500;
}

/* Package version display next to title */
.package-version {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 20px;
  white-space: nowrap;
}

.app-layout-spacer {
  flex-grow: 1;
}

/* Material Design 3 Navigation */
.app-navigation {
  display: flex;
  align-items: center;
  gap: 4px; /* Compact spacing */
  flex-shrink: 1; /* Allow navigation to compress */
}

.app-navigation__link {
  color: var(--text-white);
  text-decoration: none;
  padding: 10px 12px; /* Reduced horizontal padding */
  border-radius: 20px; /* MD3 pill-shaped buttons */
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500; /* MD3 label medium */
  line-height: 20px;
  letter-spacing: 0.1px;
  transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1); /* MD3 motion */
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 1; /* Allow links to compress slightly */
}

/* MD3 Navigation Link States */
.app-navigation__link:hover {
  background-color: rgba(255, 255, 255, 0.08); /* MD3 hover state */
}

.app-navigation__link:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.12); /* MD3 focus state */
}

.app-navigation__link:active {
  background-color: rgba(255, 255, 255, 0.12); /* MD3 pressed state */
}

/* MD3 Navigation Ripple Effect */
.app-navigation__link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  transition: width 0.3s, height 0.3s;
  pointer-events: none;
  z-index: 0;
}

.app-navigation__link:active::before {
  width: 100px;
  height: 100px;
}

/* Ensure link text is above ripple */
.app-navigation__link > * {
  position: relative;
  z-index: 1;
}

/* Large screen only navigation */
.app-navigation--large-screen-only {
  display: none;
}

@media (min-width: 1024px) {
  .app-navigation--large-screen-only {
    display: flex;
  }
}

/* Medium screens - compact spacing */
@media (min-width: 840px) and (max-width: 1200px) {
  .app-layout-title {
    font-size: 20px;
  }

  .app-navigation__link {
    padding: 10px 10px;
    font-size: 13px;
  }

  .app-tab {
    padding: 0 12px;
    font-size: 13px;
  }
}

/* Mobile responsive layout */
@media (max-width: 840px) {
  .app-header-row {
    flex-wrap: wrap;
    min-height: auto;
    padding: 8px 16px;
  }

  .app-layout-title {
    font-size: 18px;
    width: 100%;
    order: 1;
    margin-bottom: 8px;
  }

  .app-tab-bar {
    order: 2;
    width: 100%;
    border-left: none;
    margin-left: 0;
    padding-left: 0;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }

  .app-tab-bar::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

  .app-tab {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  .app-layout-spacer {
    display: none;
  }

  .app-navigation {
    order: 3;
    width: 100%;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .app-navigation__link {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* Material Design 3 Tab Bar - Integrated into header row */
.app-tab-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 1; /* Allow tabs to shrink if needed */
}

/* MD3 Tab Styling - Compact inline version */
.app-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 20px;
  border-radius: 20px; /* Pill shape for inline tabs */
  transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* MD3 Tab Hover State */
.app-tab:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

/* MD3 Tab Focus State */
.app-tab:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.12);
}

/* MD3 Active Tab - Solid background for inline style */
.app-tab.is-active {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.16);
}

/* Remove bottom indicator for inline tabs */
.app-tab::after {
  display: none;
}

/* MD3 Ripple Effect */
.app-tab::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  transition: width 0.3s, height 0.3s;
  pointer-events: none;
  z-index: 0;
}

.app-tab:active::before {
  width: 120px;
  height: 120px;
}

/* Ensure tab text is above ripple */
.app-tab > * {
  position: relative;
  z-index: 1;
}

/* Main content */
.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Tab panels */
.app-tab-panel {
  display: none;
  flex: 1;
  width: 100%;
}

.app-tab-panel.is-active {
  display: block;
}
/* Removed duplicate - now handled in Grid Migration Fixes section above */

#tab-toronto .to-chart {
  border-color: lightgrey;
  border-style: dotted;
  border-width: 1px;
}

.ui-mode-advanced {
  display: none;
}

.ui-mode-equilibrate {
  display: none;
}

.ui-zoom-hide {
  display: block;
}

.mdl-spinner {
  height: 84px;
  margin: auto;
  width: 84px;
}

.mdl-spinner__circle {
  border-width: 9px;
}

p {
  line-height: 1.5;
  color: var(--text-primary-color);
}

.lab-canvas-parent {
  flex: 0 0 calc(25% - 12px);
  height: 50vh;
  min-height: 250px;
  max-height: 600px;
  position: relative;
}

.lab-map-canvas-parent {
  flex: 1 1 100%;
  height: auto;
  min-height: 600px;
  max-height: calc(100vh - 200px);
  position: relative;
}

.what-if-canvas-parent {
  flex: 1;
  height: 400px;
  position: relative;
  width: 15%;
}

.lab-chart-canvas,
.what-if-chart-canvas {
  border: lightgrey 0.5pt solid;
  position: absolute;
  height: 100%;
  width: 100%;
}

#lab-map-chart-canvas {
  box-shadow: 10px 5px 5px lightgrey;
}

/*
#chart-column,
#what-if-chart-column {
  border: 1px dotted black;
}
*/

.what-if-table,
.what-if-table th {
  /*
  table-layout: fixed;
  */
  width: 90%;
}

.what-if-table td,
.what-if-table th {
  /*
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  */
  width: 90%;
}

.lab-stats-description {
  flex: 1;
  width: 100%;
}

.chart-column {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-content: flex-start;
}

.lab-stats-descriptions {
  width: 100%;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

.top-controls {
  background: linear-gradient(to bottom, #ffffff 0%, #e2e8ee 100%);
  /* Break out of grid container to span full width */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  padding: 10px 0;
  position: relative;
}

/* Inner container to match grid layout */
.top-controls-inner {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Match grid max-width on large screens */
@media (min-width: 1441px) {
  .top-controls-inner {
    max-width: 1600px;
  }
}

/* Mobile: Wrap controls into multiple rows and reorder for better accessibility */
@media (max-width: 840px) {
  .top-controls-inner {
    flex-wrap: wrap;
    gap: 12px 8px;
    padding: 8px 12px;
  }

  .top-control {
    flex: 1 1 auto;
    min-width: fit-content;
    border-left: none;
    padding-left: 0;
    padding-right: 12px;
  }

  /* Other controls (Scale, Chart type, Mode) - appear first (top of bar) */
  .top-control:nth-child(n+3):not(:last-child) {
    order: 1;
  }

  /* Hide Configuration (upload/download) on mobile - not useful on mobile devices */
  .top-control:last-child {
    display: none;
  }

  /* Frame count - share row with Controls */
  .top-control:nth-child(2) {
    order: 2;
    flex: 0 1 auto;
    text-align: center;
  }

  /* Controls (Run/Pause/Step buttons) - share row with Frame, closest to chart below */
  .top-control:first-child {
    order: 2;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .timeline-controls {
    margin: 0;
  }
}

.timeline-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
  margin-right: 20px;
}

.top-control {
  border-left: 0.5px solid grey;
  flex-grow: 1;
  padding-left: 20px;
}

.top-control .value {
  font-size: 24px;
  font-weight: 300;
  margin: 0;
}

.what-if-comparison-value {
  border-radius: 4px;
  padding: 6px;
}

/* ========================================
 * Modern Compact Stepper Controls (What If Tab)
 * ======================================== */

.app-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  background: var(--surface-white);
  padding: 2px;
}

.app-stepper__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--background-secondary);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
  padding: 0;
  line-height: 1;
}

.app-stepper__button:hover:not(:disabled) {
  background: rgba(96, 125, 139, 0.08);
}

.app-stepper__button:active:not(:disabled) {
  background: rgba(96, 125, 139, 0.15);
}

.app-stepper__button:disabled {
  color: #d1d5db;
  cursor: not-allowed;
}

.app-stepper__value {
  min-width: 48px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-medium);
  padding: 0 8px;
}

.ui-ridehail-settings {
  border-bottom-color: lightgrey;
  border-bottom-style: dotted;
  border-bottom-width: 1px;
  color: var(--surface-dark);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.38em;
  margin: 0;
  padding-bottom: 10px;
  padding-top: 10px;
}

/*
.ui-ridehail-settings p {
  color: #777;
  font-size: 12px;
  padding-bottom: 0;
}
*/

.ui-ridehail-settings input {
  margin: 0;
  padding-top: 0;
}

.mdl-radio,
.mdl-checkbox__label {
  font-size: 14px;
  font-weight: 300;
  padding-right: 20px;
}

.drop-zone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: 1px dashed var(--border-medium)
  border-radius: 6px;
  padding: 0 12px;
  background-color: var(--surface-white);
  transition: all 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
  cursor: pointer;
  margin-left: 8px;
}

.drop-zone:hover {
  border-color: var(--background-primary);
  background-color: rgba(127, 172, 202, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.drop-zone.drag-over {
  border-color: var(--background-primary);
  background-color: rgba(127, 172, 202, 0.12);
  border-style: solid;
  box-shadow: 0 2px 4px rgba(127, 172, 202, 0.2);
}

.drop-zone-content {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  white-space: nowrap;
}

.drop-zone-icon {
  color: var(--background-primary);
  font-size: 20px;
}

.drop-zone-text {
  font-size: 12px;
  color: var(--text-secondary-color);
  font-weight: 400;
}

.hidden { display: none; }

/* Tab visibility - hide tab when keyboard shortcut inactive */
.app-tab.tab-hidden {
  display: none;
}

/* ================================
   Material Design 3 Slider Styles
   ================================ */

.app-slider-container {
  position: relative;
  width: 100%;
  height: 28px; /* Reduced from 32px - still provides 24px+ touch target */
  display: flex;
  align-items: center;
  padding: 0 12px;
  box-sizing: border-box;
  margin: 6px 0; /* Reduced from implicit spacing */
}

.app-slider {
  width: 100%;
  height: 4px;
  background: transparent;
  outline: none;
  appearance: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.app-slider-track {
  position: absolute;
  top: 50%;
  left: 12px;
  right: 12px;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--background-primary) 0%,
    var(--background-primary) var(--fill-percentage, 50%),
    #e0e0e0 var(--fill-percentage, 50%),
    #e0e0e0 100%);
  pointer-events: none;
}


/* Webkit browsers (Chrome, Safari, Edge) */
.app-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--background-primary);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.app-slider::-webkit-slider-track {
  appearance: none;
  height: 4px;
  background: transparent;
  border-radius: 2px;
}

/* Firefox */
.app-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--background-primary);
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Mobile: Larger slider thumbs for easier touch */
@media (max-width: 840px) {
  .app-slider-container {
    height: 44px; /* Reduced from 48px - meets WCAG AAA (44×44px) */
  }

  .app-slider::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }

  .app-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  .app-slider::-webkit-slider-track {
    height: 6px;
  }

  .app-slider::-moz-range-track {
    height: 6px;
  }

  .app-slider-track {
    height: 6px;
  }
}

.app-slider::-moz-range-track {
  height: 4px;
  background: transparent;
  border-radius: 2px;
  border: none;
}

/* Hover states */
.app-slider:hover::-webkit-slider-thumb,
.app-slider:hover::-moz-range-thumb {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transform: scale(1.1);
}

/* Focus states */
.app-slider:focus::-webkit-slider-thumb,
.app-slider:focus::-moz-range-thumb {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23), 0 0 0 8px rgba(0, 150, 136, 0.12);
}

/* Active states */
.app-slider:active::-webkit-slider-thumb,
.app-slider:active::-moz-range-thumb {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transform: scale(1.2);
}

/* Disabled states */
.app-slider:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.app-slider:disabled .app-slider-track {
  background: linear-gradient(to right,
    #757575 0%,
    #757575 var(--fill-percentage, 50%),
    var(--surface-light) var(--fill-percentage, 50%),
    var(--surface-light) 100%);
  opacity: 0.38;
}

.app-slider:disabled::-webkit-slider-thumb,
.app-slider:disabled::-moz-range-thumb {
  background: #757575;
  box-shadow: none;
  opacity: 0.38;
}

/* ========================================
 * Material Design 3 Button System
 * ======================================== */

/* Base button reset and common styles */
.app-button {
  /* Reset default button styles */
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  outline: none;
  text-decoration: none;

  /* Common button properties */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  border-radius: 20px;
  transition: all 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* Prevent text selection and touch highlights */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  touch-action: manipulation;
}

/* Focus ring */
.app-button:focus-visible {
  outline: 2px solid var(--background-primary);
  outline-offset: 2px;
}

/* ========================================
 * Toolbar Control Buttons (Modern Text-Based)
 * ======================================== */

.app-button--toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  background: var(--surface-white);
  border: 1px solid var(--border-medium);
  color: var(--text-medium);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
  white-space: nowrap;
  min-width: 80px;
}

.app-button--toolbar:hover:not(:disabled) {
  background: var(--surface-lightest);
  border-color: var(--background-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.app-button--toolbar:active:not(:disabled) {
  background: var(--surface-medium);
  transform: scale(0.98);
}

/* Primary action variant (Run/Pause button) */
.app-button--toolbar-primary {
  background: var(--background-primary);
  border-color: var(--background-primary);
  color: var(--text-white);
}

.app-button--toolbar-primary:hover:not(:disabled) {
  background: var(--background-primary-hover);
  border-color: var(--background-primary-hover);
  box-shadow: 0 2px 4px rgba(0, 150, 136, 0.3);
}

.app-button--toolbar-primary:active:not(:disabled) {
  background: var(--background-primary-active);
}

/* Secondary action variant (Outlined style for comparison button) */
.app-button--toolbar-secondary {
  background: var(--surface-white);
  border-color: var(--background-primary);
  color: var(--background-primary);
}

.app-button--toolbar-secondary:hover:not(:disabled) {
  background: #e0f2f1;
  border-color: var(--background-primary-hover);
  color: var(--background-primary-active);
}

.app-button--toolbar-secondary:active:not(:disabled) {
  background: #b2dfdb;
}

.app-button--toolbar-secondary:disabled {
  background: var(--surface-lightest);
  border-color: var(--border-medium);
  color: var(--text-disabled);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Icon within toolbar button */
.app-button--toolbar .material-icons {
  font-size: 18px;
}

/* Button group container */
.app-button-group {
  display: inline-flex;
  gap: 4px;
}

/* ========================================
 * Toast Notification Styles
 * ======================================== */

.app-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.app-toast {
  background: var(--surface-dark);
  color: var(--text-white);
  padding: 12px 20px;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 400px;
  pointer-events: auto;
}

.app-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.app-toast--success {
  background: #4caf50;
}

.app-toast--error {
  background: #f44336;
}

.app-toast--warning {
  background: #ff9800;
}

.app-toast--info {
  background: #2196f3;
}

/* ========================================
 * Modal Dialog Styles
 * ======================================== */

.app-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-dialog[hidden] {
  display: none;
}

.app-dialog__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.app-dialog__content {
  position: relative;
  background: var(--surface-white);
  border-radius: 8px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.app-dialog__content h3 {
  margin: 0 0 16px 0;
  color: var(--surface-dark);
  font-size: 20px;
  font-weight: 500;
}

.app-dialog__summary {
  margin: 16px 0;
  padding: 12px;
  background: var(--surface-light);
  border-radius: 4px;
  font-size: 14px;
}

.app-dialog__summary dt {
  font-weight: 500;
  color: #666;
  margin-top: 8px;
}

.app-dialog__summary dt:first-child {
  margin-top: 0;
}

.app-dialog__summary dd {
  margin: 4px 0 0 0;
  color: var(--surface-dark);
}

.app-dialog__warnings {
  margin: 16px 0;
  padding: 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  font-size: 14px;
  color: #856404;
}

.app-dialog__warnings:empty {
  display: none;
}

.app-dialog__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* Keyboard Shortcuts List */
.keyboard-shortcuts-list {
  margin: 16px 0;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.8;
}

.keyboard-shortcut-item {
  padding: 8px 12px;
  margin: 4px 0;
  background: var(--surface-light);
  border-radius: 4px;
  transition: background 0.2s;
  line-height: 1.8;
}

.keyboard-shortcut-item:hover {
  background: #e8f0f7;
}

.keyboard-shortcut-keys {
  display: inline-block;
  font-weight: 600;
  color: var(--background-primary);
  background: var(--surface-white);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  min-width: 80px;
  text-align: center;
  white-space: nowrap;
}

.keyboard-shortcut-description {
  display: inline;
  color: var(--text-dark);
  margin-left: 8px;
}

/* Toolbar Icon Button (for Reset/Step) */
.app-button--toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  background: var(--surface-white);
  border: 1px solid var(--border-medium);
  color: var(--background-primary);
  transition: all 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
}

/* Mobile: Larger touch targets (44x44 minimum per Apple HIG) */
@media (max-width: 840px) {
  .app-button--toolbar-icon {
    width: 44px;
    height: 44px;
  }

  .app-button--toolbar {
    padding: 10px 18px;
    min-height: 44px;
  }
}

.app-button--toolbar-icon:hover:not(:disabled) {
  background: rgba(127, 172, 202, 0.08);
  border-color: var(--background-primary);
  color: var(--background-primary-hover);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.app-button--toolbar-icon:active:not(:disabled) {
  background: rgba(127, 172, 202, 0.12);
  transform: scale(0.95);
}

.app-button--toolbar-icon .material-icons {
  font-size: 20px;
  color: inherit;
}

/* ========================================
 * FAB (Floating Action Button) Styles - Legacy for What If Tab
 * ======================================== */

.app-button--fab {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
  background: #ffab40;
  color: #ffffff;
}

.app-button--fab:hover:not(:disabled) {
  box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.app-button--fab:active:not(:disabled) {
  box-shadow: 0 7px 8px -4px rgba(0,0,0,0.2), 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12);
  transform: translateY(0);
}

/* Mini FAB variant */
.app-button--mini-fab {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
  background: #ff5722;
  color: #ffffff;
}

.app-button--mini-fab:hover:not(:disabled) {
  box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.app-button--mini-fab:active:not(:disabled) {
  box-shadow: 0 7px 8px -4px rgba(0,0,0,0.2), 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12);
  transform: translateY(0);
}

/* ========================================
 * Icon Button Styles
 * ======================================== */

.app-button--icon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: transparent;
  color: var(--background-primary);
  position: relative;
}

/* Icon button state layer */
.app-button--icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
}

.app-button--icon:hover:not(:disabled)::before {
  opacity: 0.02;
}

.app-button--icon:focus-visible:not(:disabled)::before {
  opacity: 0.04;
}

.app-button--icon:active:not(:disabled)::before {
  opacity: 0.06;
}

/* Even more subtle hover for colored icon buttons (What If +/- buttons) */
.app-button--icon.app-button--colored:hover:not(:disabled)::before {
  opacity: 0.01;
}

.app-button--icon.app-button--colored:focus-visible:not(:disabled)::before {
  opacity: 0.02;
}

.app-button--icon.app-button--colored:active:not(:disabled)::before {
  opacity: 0.03;
}

/* ========================================
 * Button Icon Styles
 * ======================================== */

.app-button .material-icons {
  font-size: 24px;
  position: relative;
  z-index: 1;
}

.app-button--mini-fab .material-icons {
  font-size: 20px;
}

/* ========================================
 * Disabled States
 * ======================================== */

.app-button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.app-button--fab:disabled,
.app-button--mini-fab:disabled {
  background: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.38);
  box-shadow: 0 0 0 0 rgba(0,0,0,0.2), 0 0 0 0 rgba(0,0,0,0.14), 0 0 0 0 rgba(0,0,0,0.12);
}

.app-button--icon:disabled {
  color: rgba(0, 0, 0, 0.38);
}

.app-button--icon:disabled::before {
  display: none;
}

/* ========================================
 * Colored Variants (for What If buttons)
 * ======================================== */

.app-button--colored {
  background: var(--background-primary);
  color: #ffffff;
}

.app-button--colored:hover:not(:disabled) {
  background: var(--background-primary-hover);
}

.app-button--colored:active:not(:disabled) {
  background: #00695c;
}

.app-button--icon.app-button--colored {
  background: transparent;
  color: var(--background-primary);
}

/* ========================================
 * Animation and Transitions
 * ======================================== */

.app-button {
  transform: translateY(0);
  transition:
    background-color 0.2s cubic-bezier(0.3, 0, 0.8, 0.15),
    box-shadow 0.2s cubic-bezier(0.3, 0, 0.8, 0.15),
    transform 0.2s cubic-bezier(0.3, 0, 0.8, 0.15),
    color 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
}

/* Ripple effect placeholder - can be enhanced with JS later */
.app-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  pointer-events: none;
}

/* ========================================
 * Material Design 3 Card System
 * ======================================== */

/* Base card styling */
.app-card {
  background: var(--surface-white);
  border-radius: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: box-shadow 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
}

/* Card variants */
.app-card--elevated {
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.app-card--outlined {
  border: 1px solid var(--border-light);
  box-shadow: none;
}

/* Card content areas */
.app-card__content {
  padding: 16px;
}

.app-card__header {
  padding: 16px 16px 0 16px;
}

.app-card__actions {
  padding: 8px 16px 16px 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ========================================
 * Data Table Cards
 * ======================================== */

.app-table-card {
  background: var(--surface-white);
  border-radius: 12px;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: box-shadow 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
}

.app-table-card:hover {
  box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.1), 0 4px 8px -1px rgba(0, 0, 0, 0.06);
}

.app-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Roboto', sans-serif;
}

.app-table thead {
  background: #f8fafc;
  border-bottom: 2px solid var(--border-light);
}

.app-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-medium);
  border: none;
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 10;
}

.app-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-dark);
  border: none;
  border-bottom: 1px solid var(--border-light);
}

.app-table tbody tr:last-child td {
  border-bottom: none;
}

.app-table tbody tr:hover {
  background: var(--surface-lightest);
  transition: background 0.15s ease;
}

.app-table tbody tr {
  transition: background 0.15s ease;
}

/* ========================================
 * Settings Panel Cards
 * ======================================== */

.app-settings-card {
  background: linear-gradient(to bottom, #ffffff 0%, #f2f8fe 100%);
  border-radius: 8px;
  border: 1px solid var(--border-medium);
  margin-bottom: 6px; /* Reduced from 8px */
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
}

.app-settings-card:hover {
  border-color: var(--border-dark);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.app-settings-card__content {
  padding: 8px 12px; /* Reduced from 10px vertical padding */
}

.app-settings-card__label {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-dark);
  margin-bottom: 4px; /* Reduced from 6px */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-settings-card__label-text {
  flex: 1;
}

.app-settings-card__description {
  color: var(--text-primary-color);
  font-size: 11px; /* Reduced from 12px for compactness */
  margin: 0;
  margin-top: 4px; /* Add small gap above description */
  line-height: 1.25; /* Tighter from 1.3 */
}

/* Hide descriptions on smaller screens for even more compactness */
@media (max-width: 1024px) {
  .app-settings-card__description {
    display: none;
  }
}

.app-settings-card .value {
  color: var(--background-primary);
  font-weight: 600;
  font-size: 13px;
  margin-left: 8px;
  white-space: nowrap;
}

/* ========================================
 * Control Panel Card
 * ======================================== */

.app-control-panel {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid #cbd5e1;
  transition: box-shadow 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
  position: relative;
}

.app-control-panel:hover {
  box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.1), 0 4px 8px -1px rgba(0, 0, 0, 0.06);
}

/* Add a subtle separator line at the bottom */
.app-control-panel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #94a3b8 50%, transparent 100%);
  opacity: 0.5;
}

/* ========================================
 * Spinner Overlay Styling
 * ======================================== */

.spinner-container {
  position: relative;
  display: inline-block;
  min-height: 40px; /* Match spinner height to prevent layout shift */
}

.spinner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: var(--text-medium);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  z-index: 10;
  background: transparent;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* ========================================
 * Material Design 3 Form Controls
 * ======================================== */

/* Radio Button Styling - Vertical Style (kept for compatibility) */
.app-radio {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 4px;
  transition: all 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
}

.app-radio__input {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-dark);
  border-radius: 50%;
  margin-right: 12px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
  cursor: pointer;
}

.app-radio__input:checked {
  border-color: var(--background-primary);
  background: var(--background-primary);
}

.app-radio__input:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-white);
}

.app-radio__input:hover:not(:disabled) {
  border-color: var(--background-primary);
  box-shadow: 0 0 0 8px rgba(0, 150, 136, 0.08);
}

.app-radio__input:focus {
  outline: none;
  box-shadow: 0 0 0 8px rgba(0, 150, 136, 0.12);
}

/* Remove any background color changes from radio button hover/focus states */
.app-radio:hover,
.app-radio:focus,
.app-radio:active {
  background: transparent !important;
}

/* Ensure radio button labels always have transparent background */
.app-radio {
  background: transparent !important;
}

.app-radio__label {
  background: transparent !important;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dark);
  cursor: pointer;
  user-select: none;
}

.app-radio__input:disabled {
  border-color: var(--border-medium);
  background: var(--surface-medium);
  cursor: not-allowed;
}

.app-radio__input:disabled:checked {
  border-color: var(--border-medium);
  background: #d1d5db;
}

.app-radio__input:disabled:checked::before {
  background: #9ca3af;
}

.app-radio__input:disabled + .app-radio__label {
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* Chip-Style Radio Buttons - Horizontal Layout */
.app-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Mobile: Horizontal scrolling for radio chips */
@media (max-width: 840px) {
  .app-radio-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
    gap: 6px;
  }

  /* Hide scrollbar but keep functionality */
  .app-radio-group::-webkit-scrollbar {
    height: 3px;
  }

  .app-radio-group::-webkit-scrollbar-track {
    background: transparent;
  }

  .app-radio-group::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 2px;
  }
}

.app-radio-chip {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.app-radio-chip__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.app-radio-chip__label {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid #6b7280;
  border-radius: 16px;
  background: transparent;
  color: var(--text-medium);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
  cursor: pointer;
  white-space: nowrap;
}

/* Checked state - filled chip */
.app-radio-chip__input:checked + .app-radio-chip__label {
  background: var(--background-primary);
  border-color: var(--background-primary);
  color: var(--text-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Hover state */
.app-radio-chip:hover .app-radio-chip__label {
  border-color: var(--background-primary);
  box-shadow: 0 0 0 4px rgba(0, 150, 136, 0.08);
}

.app-radio-chip__input:checked + .app-radio-chip__label:hover {
  background: var(--background-primary-hover);
  border-color: var(--background-primary-hover);
}

/* Focus state */
.app-radio-chip__input:focus + .app-radio-chip__label {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 150, 136, 0.12);
}

/* Disabled state */
.app-radio-chip__input:disabled + .app-radio-chip__label {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-medium);
  border-color: var(--border-medium);
  color: var(--text-disabled);
}

/* Top control label styling */
.top-control__label {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* Responsive chip layout for mobile */
@media (max-width: 600px) {
  .app-radio-chip__label {
    padding: 5px 12px;
    font-size: 12px;
  }

  .app-radio-group {
    gap: 6px;
  }
}

/* Checkbox Styling - Legacy (kept for compatibility) */
.app-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
}

.app-checkbox__input {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-dark);
  border-radius: 4px;
  margin-right: 12px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
  cursor: pointer;
}

.app-checkbox__input:checked {
  border-color: var(--background-primary);
  background: var(--background-primary);
}

.app-checkbox__input:checked::before {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

.app-checkbox__input:hover:not(:disabled) {
  border-color: var(--background-primary);
  box-shadow: 0 0 0 8px rgba(0, 150, 136, 0.08);
}

.app-checkbox__input:focus {
  outline: none;
  box-shadow: 0 0 0 8px rgba(0, 150, 136, 0.12);
}

.app-checkbox__label {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dark);
  cursor: pointer;
  user-select: none;
}

/* Modern Toggle Switch */
.app-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 12px;
}

.app-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.app-toggle__track {
  position: relative;
  width: 44px;
  height: 24px;
  background: #e5e7eb;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  cursor: pointer;
  flex-shrink: 0;
}

.app-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--surface-white);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Checked state */
.app-toggle__input:checked + .app-toggle__track {
  background: var(--background-primary);
}

.app-toggle__input:checked + .app-toggle__track .app-toggle__thumb {
  transform: translateX(20px);
  box-shadow: 0 2px 4px rgba(0, 150, 136, 0.4);
}

/* Hover state */
.app-toggle:hover .app-toggle__track {
  box-shadow: 0 0 0 8px rgba(0, 150, 136, 0.08);
}

.app-toggle__input:checked + .app-toggle__track:hover {
  background: var(--background-primary-hover);
}

/* Focus state */
.app-toggle__input:focus + .app-toggle__track {
  box-shadow: 0 0 0 8px rgba(0, 150, 136, 0.12);
  outline: none;
}

/* Disabled state */
.app-toggle__input:disabled + .app-toggle__track {
  background: var(--surface-medium);
  cursor: not-allowed;
  opacity: 0.5;
}

.app-toggle__input:disabled + .app-toggle__track .app-toggle__thumb {
  background: #d1d5db;
}

.app-toggle__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
  user-select: none;
  flex: 1;
}

.app-toggle__input:disabled ~ .app-toggle__label {
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* ========================================
 * Material Design 3 Spinner
 * ======================================== */

.app-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid var(--background-primary);
  border-radius: 50%;
  animation: app-spinner-spin 1s linear infinite;
  display: inline-block;
}

.app-spinner--small {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

.app-spinner--large {
  width: 56px;
  height: 56px;
  border-width: 5px;
}

@keyframes app-spinner-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Hide spinner when not active */
.app-spinner:not(.is-active) {
  display: none;
}

/* Spinner text styling */
.spinner-text {
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #424242;
  margin: 8px 0 0 0;
  text-align: center;
  line-height: 1.3;
}

/* ========================================
 * Full-Screen Loading Overlay
 * ======================================== */

/* Spinner animation keyframes */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease-out;
  /* Prevent scrolling issues on mobile */
  overflow: hidden;
}

.loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-content {
  text-align: center;
  max-width: 600px;
  width: 100%;
  padding: 40px 20px;
  box-sizing: border-box;
}

.loading-title {
  font-family: 'Roboto', sans-serif;
  font-size: 32px;
  font-weight: 300;
  color: var(--text-heading-color);
  margin: 0 0 40px 0;
  letter-spacing: 0.5px;
}

.loading-spinner {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border: 4px solid var(--border-light);
  border-top-color: var(--background-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-message {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary-color);
  margin: 0 0 16px 0;
}

.loading-tip {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-secondary-color);
  margin: 0;
  min-height: 40px;
  line-height: 1.5;
  font-style: italic;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Mobile responsive adjustments */
@media (max-width: 840px) {
  .loading-title {
    font-size: 24px;
    margin: 0 0 32px 0;
  }

  .loading-spinner {
    width: 48px;
    height: 48px;
    border-width: 3px;
  }

  .loading-message {
    font-size: 14px;
  }

  .loading-tip {
    font-size: 13px;
    min-height: 60px;
  }

  .loading-content {
    padding: 24px 16px;
  }
}

/* ========================================
   Full-Screen Overlay
   ======================================== */

.fullscreen-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.fullscreen-overlay.active {
  display: flex;
  opacity: 1;
}

.fullscreen-container {
  position: relative;
  width: 95vw;
  height: 95vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreen-canvas-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreen-canvas-wrapper canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  background-color: #f0f3f3; /* Match the normal canvas background */
}

/* Full-screen chart column container (for statistics mode) */
.fullscreen-canvas-wrapper .chart-column {
  width: 95vw;
  height: 95vh;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background-color: #f0f3f3;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}

/* Chart row - single row of 4 charts */
.fullscreen-canvas-wrapper .chart-column .lab-canvas-parent {
  flex: 0 0 auto;
  width: calc(25% - 12px);
  height: 60vh;
  min-width: 200px;
  display: inline-flex;
  flex-direction: column;
}

/* Wrap the charts in a row */
.fullscreen-canvas-wrapper .chart-column {
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
}

.fullscreen-canvas-wrapper .lab-canvas-parent canvas {
  box-shadow: none; /* Remove individual shadows in container view */
  flex: 1;
}

/* Stats descriptions below charts */
.fullscreen-canvas-wrapper .lab-stats-descriptions {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 16px;
}

/* What If chart column in full-screen - single horizontal row */
.fullscreen-canvas-wrapper #what-if-chart-column {
  width: 95vw;
  height: 95vh;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 16px;
  background-color: #f0f3f3;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
}

/* What If charts - equal width in horizontal row */
.fullscreen-canvas-wrapper .what-if-canvas-parent {
  flex: 1 1 0;
  min-width: 150px;
  height: auto;
  display: flex;
  flex-direction: column;
}

.fullscreen-canvas-wrapper .what-if-canvas-parent canvas {
  box-shadow: none;
  flex: 1;
}

/* Full-screen controls overlay */
.fullscreen-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  z-index: 10001;
}

.fullscreen-controls.fade-out {
  opacity: 0;
}

.fullscreen-controls button {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.fullscreen-controls button:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.fullscreen-controls button i {
  font-size: 20px;
}

/* Full-screen hint indicator (bottom right of canvas) */
.fullscreen-hint {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1;
}

.lab-canvas-parent:hover .fullscreen-hint,
.lab-map-canvas-parent:hover .fullscreen-hint,
.what-if-canvas-parent:hover .fullscreen-hint {
  opacity: 1;
}

/* Mobile responsive adjustments */
@media (max-width: 840px) {
  .fullscreen-container {
    width: 100vw;
    height: 100vh;
  }

  .fullscreen-controls {
    top: 12px;
    right: 12px;
  }

  .fullscreen-controls button {
    width: 44px;
    height: 44px;
  }

  .fullscreen-hint {
    font-size: 10px;
    padding: 3px 6px;
  }
}