:root {
  /* Shared content width: the header row, the page grid, and the
     full-bleed top-controls bar all align to this so their left/right
     edges can never drift apart. */
  --content-max-width: 1200px;

  /* 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;
  --text-manuscript: #3c2e1e;   /* warm ink brown for parchment text columns */

  /* 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;
}

/* Large screens: widen the shared content column (header row, page grid,
   top-controls bar all read this one value - see :root above). */
@media (min-width: 1441px) {
  :root {
    --content-max-width: 1600px;
  }
}

/* Base Material Design 3 Typography */
html,
body {
  /* App-shell: fill the viewport and let scrolling happen inside tab panels,
     not on the body. */
  height: 100%;
  overflow: hidden;
}

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: var(--content-max-width);
  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 and .app-header-row both read var(--content-max-width),
     which is widened above - no per-element override needed here, so
     their edges can't drift apart. Hand the reclaimed width to the
     simulation title rather than stretching everything proportionally
     (flex-grow is set on the base .sim-title-container rule). */
  .sim-title-container {
    max-width: 640px;
  }

  .sim-title-input {
    max-width: 620px;
  }

  /* 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-2 {
  padding-right: 8px;
}

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

/* Manuscript / document treatment for the text columns */
#column-1,
#what-if-column-1 {
  background: linear-gradient(160deg, #fefdfa 0%, #fbf8f1 100%);
  border: 1px solid rgba(195, 168, 112, 0.2);
  border-radius: 6px;
  box-shadow:
    0 2px 12px rgba(100, 70, 20, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  padding: 6px 16px;
}

/* Serif headings code the column as editorial, not interface */
#column-1 h5,
#what-if-column-1 h5 {
  /* font-family: Georgia, 'Palatino Linotype', Palatino, serif; */
  color: var(--text-manuscript);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Body text: warmer ink tone, slightly more generous leading */
#column-1 p,
#column-1 li,
#what-if-column-1 p,
#what-if-column-1 li {
  color: var(--text-manuscript);
  line-height: 1.65;
}

/* 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;
  /* Cap the shell to the viewport so the body no longer scrolls; scrolling
     happens inside each tab's panel (and, on the experiment tab's wide layout,
     inside the individual columns). */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  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: baseline; /* Align text baselines instead of centering */
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 8px 16px 4px 16px; /* Add more top padding for better spacing */
  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: 20px; /* Match tabs/nav line-height for baseline alignment */
  letter-spacing: 0px;
  margin: 0;
  margin-right: 20px;
  padding-right: 20px;
  padding-top: 10px; /* Align baseline with 40px tab height */
  padding-bottom: 10px;
  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: 10px 8px 10px 0; /* Match parent class padding for baseline alignment */
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px; /* Match parent class line-height */
}

/* Package version, nested inline inside #app-title right after the brand
   name (combined into one header element to reclaim the divider/margin
   that used to separate them as two flex items). */
.package-version {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 6px;
  white-space: nowrap;
}

/* Simulation title: click-to-edit document name, parallels the static
   "Ridehail Laboratory" branding but identifies the current scenario. */
.sim-title-container {
  display: flex;
  align-items: center;
  /* Claims most of the row's leftover space (vs. the spacer's flex-grow: 1
     right after it, in the HTML), so long titles actually get visible room
     instead of just opening an empty gap before the tabs. */
  flex-grow: 8;
  flex-shrink: 1;
  min-width: 0;
  max-width: 420px;
  margin-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Pale-teal "chip" treatment: this is the one piece of header text that is
   actual data (vs. the white static brand/tab labels), so it gets its own
   color identity - teal-on-pale, echoing the header's own teal but inverted
   like a badge, so it reads as content rather than chrome. */
.sim-title-display {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: none;
  border-radius: 14px; /* pill shape, distinct from the square tabs/menu */
  margin: 0;
  padding: 4px 14px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
  cursor: text;
  background-color: #e0f2f1; /* pale teal chip */
  color: #00695c; /* deep teal text, readable on the pale chip */
}

/* The unconditional `display: block` above has the same specificity as the
   UA stylesheet's `[hidden] { display: none }` rule, and author rules always
   win that tie - so without this, setting the `hidden` attribute via JS
   (sim-title.js) didn't actually hide the button, and the edit-mode input
   appeared as a second lozenge next to it instead of replacing it. */
.sim-title-display[hidden] {
  display: none;
}

/* Blank/placeholder state: a faint outline-only chip rather than a filled
   one, so "no title yet" doesn't read as if it has real content. */
.sim-title-display.is-untitled {
  font-weight: 400;
  background-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
}

.sim-title-display:hover,
.sim-title-display:focus {
  background-color: #ffffff;
  outline: none;
}

.sim-title-display.is-untitled:hover,
.sim-title-display.is-untitled:focus {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Unsaved-changes indicator: shown once a saved configuration has been
   loaded/saved and settings have since diverged from it (see
   saved-configs.js). Deliberately quiet - a small dot rather than an
   asterisk in the text itself - echoing the macOS/VS Code "modified"
   convention instead of competing visually with the title. */
.sim-title-display.is-dirty::after {
  content: " \25CF"; /* ● */
  font-size: 8px;
  vertical-align: middle;
  margin-left: 6px;
  color: #00695c;
  opacity: 0.55;
}

.sim-title-input {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  padding: 4px 14px;
  border-radius: 14px;
  border: 1px solid #00695c;
  background-color: #e0f2f1;
  color: #00695c;
}

.sim-title-input:focus {
  outline: none;
  background-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(0, 105, 92, 0.3);
}

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

/* External links menu (Home/About/Essays/In Progress/GitHub/License),
   collapsed into a single hamburger menu via <details>/<summary> so they
   don't compete with the simulation title for header width. */
.app-nav-menu {
  position: relative;
  flex-shrink: 0;
}

.app-nav-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-white);
  cursor: pointer;
  list-style: none; /* hide default disclosure triangle (Firefox) */
}

.app-nav-menu__trigger::-webkit-details-marker {
  display: none; /* hide default disclosure triangle (Chrome/Safari) */
}

.app-nav-menu__trigger:hover,
.app-nav-menu__trigger:focus {
  background-color: rgba(255, 255, 255, 0.08);
  outline: none;
}

.app-nav-menu[open] .app-nav-menu__trigger {
  background-color: rgba(255, 255, 255, 0.12);
}

.app-nav-menu__trigger .material-icons {
  font-size: 22px;
}

.app-nav-menu__panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 8px 0;
  background-color: var(--background-secondary);
  border-radius: 8px;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.2);
}

.app-nav-menu__link {
  padding: 10px 16px;
  color: var(--text-white);
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.app-nav-menu__link:hover,
.app-nav-menu__link:focus {
  background-color: rgba(255, 255, 255, 0.08);
  outline: none;
}

.app-nav-menu__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 6px 0;
}

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

  .sim-title-container {
    max-width: 240px;
  }

  .sim-title-input {
    max-width: 220px;
  }

  .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;
  }

  .sim-title-container {
    order: 1;
    width: 100%;
    max-width: none;
    margin: 0 0 8px 0;
    padding: 0;
  }

  .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-nav-menu {
    order: 3;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Anchor the panel to the trigger's left edge instead of its right edge,
     since the trigger sits near the left edge of a narrow viewport here. */
  .app-nav-menu__panel {
    left: 0;
    right: auto;
  }
}

/* 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%;
  /* Allow the panel below to shrink and own the scroll instead of the body. */
  min-height: 0;
  /* Direction A (cartographic): warm off-white field behind the controls, map,
     and surrounding viewport, replacing the plain white. Kept low-saturation so
     the vehicle phase colours stay the most vivid elements on screen. */
  background: linear-gradient(to bottom, #faf7f0 0%, #f3ece0 100%);
}

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

/* The active panel is the scroll region: it fills the content area and scrolls
   its own overflow (replacing whole-page/body scrolling). The experiment tab's
   wide layout overrides this so its columns scroll instead (see below). */
.app-tab-panel.is-active {
  display: block;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Experiment tab, wide layout only (all three columns side-by-side): the panel
   itself does not scroll; instead the text column (#column-1) and the controls
   column (#column-2) each scroll independently under the pointer/touch, while the
   top-controls bar (grid row 1) stays pinned and the chart column stays fixed. */
@media (min-width: 1025px) {
  #scroll-tab-1.app-tab-panel.is-active {
    overflow: hidden;
  }

  #scroll-tab-1 .page-content {
    height: 100%;
    min-height: 0;
  }

  #scroll-tab-1 .app-grid {
    height: 100%;
    min-height: 0;
    /* Row 1 = top-controls bar (auto, pinned); row 2 = columns (fills the rest). */
    grid-template-rows: auto minmax(0, 1fr);
  }

  #column-1,
  #column-2 {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Chart column stays fixed (no internal scroll). */
  #chart-column {
    min-height: 0;
  }
}

/* Scrollbar styling for the app-shell scroll regions (tab panels and the
   experiment columns): a light grey thumb on a transparent track, blending with
   the pale controls/chart instead of the browser-default dark grey. Matches the
   existing chip-group scrollbar (thumb = --border-medium). */
#column-1,
#column-2,
.app-tab-panel.is-active {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--border-medium) transparent; /* thumb / track (Firefox) */
}

#column-1::-webkit-scrollbar,
#column-2::-webkit-scrollbar,
.app-tab-panel.is-active::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#column-1::-webkit-scrollbar-track,
#column-2::-webkit-scrollbar-track,
.app-tab-panel.is-active::-webkit-scrollbar-track {
  background: transparent;
}

#column-1::-webkit-scrollbar-thumb,
#column-2::-webkit-scrollbar-thumb,
.app-tab-panel.is-active::-webkit-scrollbar-thumb {
  background: var(--border-medium); /* #d1d5db light grey */
  border-radius: 4px;
}

#column-1::-webkit-scrollbar-thumb:hover,
#column-2::-webkit-scrollbar-thumb:hover,
.app-tab-panel.is-active::-webkit-scrollbar-thumb:hover {
  background: var(--border-dark); /* #6b7280 on hover */
}
/* 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;
}

.what-if-set-equilibrate {
  display: none;
}

.what-if-set-non-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 {
  /* Override .lab-canvas-parent stats-chart sizing. The square is sized in JS
     (fitMapToViewport): side = min(chart-column width, height) - padding, then
     applied as explicit width/height. This fills the limiting viewport
     dimension across all zoom levels. The values below are a pre-JS fallback. */
  flex: 0 0 auto; /* don't stretch; JS sets explicit dimensions */
  margin: 0 auto; /* centre in leftover horizontal space */
  min-height: 0; /* Remove inherited min-height */
  max-height: none; /* Remove inherited max-height */

  /* Square aspect ratio (fallback before JS sizing runs) */
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  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;
}

/* ── Zoomed states (body.zoomed) ──────────────────────────────────────────── */

/* When zoomed, the text column (#column-1 / #what-if-column-1) is hidden, so the
   chart column should reclaim that freed grid space. The responsive layout above
   pins #chart-column via ID selectors (specificity 1,0,0), so the .app-cell--*
   classes toggled in JS (0,1,0) can't override them — these ID-level rules can.
   Experiment: #column-2 (sliders) stays span-3, so chart takes the other 9.
   What-If: the text column is gone entirely, so the chart spans the full row. */
@media (min-width: 1025px) {
  body.zoomed #chart-column {
    grid-column: span 9;
  }
  body.zoomed #what-if-chart-column {
    grid-column: 1 / -1;
  }
}

/* ── Max-zoom state (body.zoom-max, Experiment tab only) ──────────────────── */

/* Map sizing is handled in JS (fitMapToViewport), so no max-height/max-width
   constraint is needed here for the map itself. */

/* Stats charts: use the freed vertical space for taller, more readable charts */
body.zoom-max .lab-canvas-parent:not(.lab-map-canvas-parent) {
  height: 70vh;
  max-height: 70vh;
}

/* ─────────────────────────────────────────────────────────────────────────── */

.map-metrics-overlay {
  position: absolute;
  /* canvas now fills the square container; sit just inside its bottom edge */
  bottom: 6px;
  left: 6px;
  /* Frosted-glass panel: translucent + blurred so the map dynamics show faintly
     behind the plot, without the flat opacity that also dimmed the text. */
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(120, 100, 70, 0.35);
  border-radius: 5px;
  padding: 6px 8px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}

.map-metrics-overlay[hidden] {
  display: none;
}
.map-metrics-overlay:hover {
  border-color: rgba(120, 100, 70, 0.5);
}

#map-sparkline {
  display: block;
  border-radius: 3px;
}

.map-metrics-phases {
  display: flex;
  flex-wrap: wrap;   /* Wait wraps to its own line in compact mode */
  gap: 7px;
  font-size: 16px;
  font-family: monospace;
  line-height: 1;
}

#map-metric-p1 { color: rgb(100, 149, 237); }
#map-metric-p2 { color: rgb(215, 142, 0); }
#map-metric-p3 { color: rgb(60, 179, 113); }
#map-metric-wait {
  color: rgb(210, 60, 60);
  flex-basis: 100%;  /* forces Wait to a new line in compact mode */
}

/* Expanded: the phase labels move onto the chart (drawn at the right end of each
   line), so the HTML legend row is hidden to free vertical space for the plot. */
.map-metrics-overlay.expanded .map-metrics-phases {
  display: none;
}

/*
#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 {
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.lab-stats-descriptions {
  margin-top: 16px;
  position: relative;
  width: 100%;
  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%);
  padding: 10px 0;
  position: relative;
  width: 100vw;
}

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

/* 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 {
    border-left: none;
    flex: 1 1 auto;
    min-width: fit-content;
    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;
  padding-right: 4px;
}

.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;
}

.app-stepper__input {
  box-sizing: border-box;
  width: 64px;
  border: none;
  background: transparent;
  font-family: inherit;
  border-radius: 4px;
  outline: none;
}

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

.app-stepper__input:focus {
  background: var(--surface-white);
  box-shadow: 0 0 0 2px rgba(96, 125, 139, 0.35);
}

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

.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                   var(--limit-percentage, 100%),
    #f0d0d0                   var(--limit-percentage, 100%),
    #f0d0d0                   100%);
  pointer-events: none;
}

.app-slider-limit-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  pointer-events: auto;
  cursor: help;
}


/* 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);
}

/* Animation-speed cycle button (Control bar). A purely graphical chevron label
 * (› / ›› / ››› / ››››) that conveys the speed level without words, so it reads
 * as one of the transport controls rather than a text button. Fixed width (not
 * min-width) so cycling between chevron counts never reflows the bar; centred.
 * Height and colour match the Reset/Step icon buttons (.app-button--toolbar-icon). */
.app-button--toolbar-speed {
  width: 64px;
  min-width: 64px;
  height: 36px;
  padding: 0;
  justify-content: center;
  color: var(--background-primary);
}

.app-button--toolbar-speed .app-button__text {
  /* Monospace + bold so every chevron is the same width and the glyphs look
   * deliberate rather than like stray text. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  /* Nudge right by half the letter-spacing to offset the trailing gap so the
   * chevrons sit optically centred. */
  margin-left: 1px;
}

/* 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) */
.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;
}

/* Green action variant (used for the What If "Comparison" step). Built
   from the same P3 / "With Rider" green used in the Vehicle Phases chart
   (js/constants.js: rgba(60, 179, 113, *)) at chart-strength opacity, so
   the button reads as a soft, already-familiar color rather than a bold
   new accent. Text/border use a deeper shade of the same hue for contrast
   against the pale fill. */
.app-button--toolbar-green {
  background: rgba(60, 179, 113, 0.5); /* matches the chart's own P3 fill */
  border-color: rgba(60, 179, 113, 0.7);
  color: #1b5e3f;
}

.app-button--toolbar-green:hover:not(:disabled) {
  background: rgba(60, 179, 113, 0.3); /* a step paler than the chart fill */
  border-color: rgba(60, 179, 113, 0.5);
  color: #1b5e3f;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.app-button--toolbar-green:active:not(:disabled) {
  background: rgba(60, 179, 113, 0.65);
  border-color: rgba(60, 179, 113, 0.8);
}

/* Disabled state shared by all toolbar text buttons: a flat, muted
   treatment so an unavailable step reads as clearly "not now" against
   the saturated color of whichever step is currently actionable. */
.app-button--toolbar-primary:disabled,
.app-button--toolbar-secondary:disabled,
.app-button--toolbar-green: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:disabled {
  background: var(--surface-lightest);
  border-color: var(--border-medium);
  color: var(--text-disabled);
  opacity: 0.6;
  cursor: not-allowed;
}

.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);
}

/* Allow the info popover panel to extend beyond the card boundary when open */
.app-settings-card:has(.app-settings-card__info[open]) {
  overflow: visible;
}

.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;
}

/* Slider value direct-edit: click the displayed number to type an exact value */
.app-settings-card .value.slider-value-editable {
  cursor: text;
}

.app-settings-card .value.slider-value-editable:hover {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.slider-value-input {
  width: 3.5em;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--background-primary);
  background: white;
  border: 1px solid var(--background-primary);
  border-radius: 3px;
  padding: 0 3px;
  margin-left: 8px;
  text-align: right;
  line-height: 1;
}

.slider-value-input:focus {
  outline: 2px solid var(--background-primary);
  outline-offset: 1px;
}

/* Remove number-spinner arrows */
.slider-value-input::-webkit-outer-spin-button,
.slider-value-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.slider-value-input[type="number"] {
  -moz-appearance: textfield;
}


/* Section dividers: thin rules between logical groups in column-2 */
.ui-section-divider {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  margin: 5px 0;
}

/* ========================================
 * More Settings disclosure (collapsible)
 * ======================================== */
.app-settings-disclosure {
  margin-bottom: 4px;
}

.app-settings-disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 6px 10px 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: 6px;
  border: 1px solid var(--border-medium);
  background: var(--surface-medium);
  list-style: none;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease;
  margin-bottom: 0;
}

.app-settings-disclosure__summary::-webkit-details-marker {
  display: none;
}

.app-settings-disclosure__summary:hover {
  background: var(--border-light);
  border-color: var(--border-dark);
}

.app-settings-disclosure__chevron {
  font-size: 18px;
  color: var(--text-secondary-color);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.app-settings-disclosure[open] .app-settings-disclosure__summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
  margin-bottom: 0;
}

.app-settings-disclosure[open] .app-settings-disclosure__chevron {
  transform: rotate(180deg);
}

/* The content area that appears when open */
.app-settings-disclosure[open] > :not(summary) {
  /* subtle left+right+bottom border to frame the open panel */
}

/* Group labels within the disclosure */
.app-settings-disclosure__group-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 8px 4px 3px;
  margin-top: 2px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 2px;
}

.app-settings-disclosure__group-label:first-of-type {
  margin-top: 6px;
}

/* ========================================
 * 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;
}

/* Horizontal layout shared by the preset "load" buttons (.app-preset-group)
   and the radio-chip control groups such as Display and Mode (.app-chip-group) */
.app-preset-group,
.app-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

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

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

  .app-preset-group::-webkit-scrollbar-track,
  .app-chip-group::-webkit-scrollbar-track {
    background: transparent;
  }

  .app-preset-group::-webkit-scrollbar-thumb,
  .app-chip-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);
}

/* Preset chips are momentary "load" buttons: they load a set of starting
   values on click but never hold a selected state (a chip is not "current"
   once the user edits any control). Visually they match an unselected radio
   chip and briefly fill while pressed to confirm the load. */
.app-preset-chip {
  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;
  font-family: inherit;
  line-height: normal;
  transition: all 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
  cursor: pointer;
  white-space: nowrap;
}

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

/* Momentary press feedback: fill the chip while it is being activated */
.app-preset-chip:active:not(:disabled) {
  background: var(--background-primary);
  border-color: var(--background-primary);
  color: var(--text-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.app-preset-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 150, 136, 0.12);
}

.app-preset-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-medium);
  border-color: var(--border-medium);
  color: var(--text-disabled);
}

/* ------------------------------------------------------------------ *
 * Reset behaviour (Model B): staged structural changes & run lock
 * ------------------------------------------------------------------ */

/* A structural ("reset-on-change") setting changed while a run is in progress
   is staged: its value is stored but not applied until Reset. Flag the card
   with a small rotate/refresh marker so the user can see which controls now
   differ from the running simulation. Cleared on Reset. */
.app-settings-card.is-pending .app-settings-card__label-text::after {
  content: "\21bb"; /* ↻ */
  margin-left: 6px;
  color: var(--background-primary);
  font-weight: 700;
  font-size: 1.05em;
}

/* The Reset button carries the commit affordance while changes are staged: a
   soft teal accent (chart-opacity, matching the chip hover tint) plus a small
   dot badge. Deliberately quiet - no animation - so it signals without
   nagging. */
#reset-button.has-pending {
  position: relative;
  border-color: var(--background-primary);
  background: rgba(0, 150, 136, 0.12);
  color: var(--background-primary);
}
#reset-button.has-pending::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--background-primary);
}

/* While a run is in progress the scenario-level control bar is locked. The
   <select> and chip inputs disable (and grey) natively via :disabled; the
   upload control is a <label> whose hidden input can be disabled but which the
   browser will not dim on its own, so grey it (and the drop zone) here. */
.top-controls.is-run-locked label[for="upload-config"],
.top-controls.is-run-locked .drop-zone {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

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

/* Native <select> styled to match the toolbar icon buttons next to it
   (e.g. the saved-configurations dropdown). */
.app-select {
  height: 36px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--surface-white);
  border: 1px solid var(--border-medium);
  color: var(--text-medium);
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  max-width: 150px;
}

.app-select:hover {
  border-color: var(--background-primary);
}

.app-select:focus-visible {
  outline: 2px solid var(--background-primary);
  outline-offset: 1px;
}

.saved-configs-group {
  align-items: center;
}

/* ========================================
 * Info Popover (e.g. saved-configuration storage caveats)
 * ======================================== */

.app-info-popover {
  position: relative;
  display: inline-block;
}

.app-info-popover__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #9ca3af;
  cursor: pointer;
  list-style: none;
}

.app-info-popover__trigger::-webkit-details-marker {
  display: none; /* hide default disclosure triangle (Chrome/Safari) */
}

.app-info-popover__trigger:hover,
.app-info-popover__trigger:focus {
  color: var(--background-primary);
  outline: none;
}

.app-info-popover__trigger .material-icons {
  font-size: 16px;
}

.app-info-popover__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  width: 240px;
  padding: 12px 14px;
  background: var(--surface-white);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
  color: var(--text-medium);
  white-space: normal;
}

/* Slider card info popovers: right-align so the panel stays within the narrow sidebar column */
.app-settings-card__info .app-info-popover__panel {
  left: auto;
  right: 0;
  width: 260px;
}

/* Keep the info icon compact within the label's flex row */
.app-settings-card__label .app-settings-card__info {
  flex-shrink: 0;
  align-self: center;
  margin: 0 4px;
}

/* No paragraph margin inside slider help popovers (single-paragraph content) */
.app-settings-card__info .app-info-popover__panel p {
  margin: 0;
}

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

  .app-preset-group,
  .app-chip-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;
  }
}

/* ==========================================================================
   PHONE SHOWCASE TIER  (≤600px)

   A curated, touch-first presentation of the Experiment tab. Everything here
   is gated on both the media query AND the body.is-phone class (set by
   js/phone.js) so it can NEVER affect the desktop or tablet layouts. The
   simulation itself is untouched: the bottom bar and sheet proxy onto the real
   controls, and the two "key" setting cards are relocated (real nodes) into
   #phone-sheet-body. See js/phone.js and the phone chrome markup in index.html.
   ========================================================================== */

/* Phone chrome is hidden everywhere by default; the tier re-shows it. */
#phone-bar,
#phone-sheet,
#phone-hint,
#phone-speed-hint {
  display: none;
}

@media (max-width: 600px) {
  body.is-phone {
    --phone-header-h: 48px;
    --phone-bar-h: 56px;
    --phone-sheet-peek: 112px;
  }

  /* Use the dynamic viewport height so the mobile browser's collapsing URL bar
     doesn't leave the fixed bar floating or clipped. */
  body.is-phone .app-layout {
    height: 100dvh;
    overflow: hidden;
  }

  /* --- Thin header: brand + sim title + menu, on a single row ------------
     These undo the ≤840 tablet block (which stacks each item onto its own
     full-width row and hides the spacer). */
  body.is-phone .app-header-row {
    flex-wrap: nowrap;
    min-height: var(--phone-header-h);
    padding: calc(4px + env(safe-area-inset-top)) 8px 4px;
    gap: 8px;
  }
  body.is-phone .app-tab-bar,
  body.is-phone .package-version {
    display: none;
  }
  body.is-phone .app-layout-title {
    font-size: 15px;
    width: auto;
    order: 0;
    margin: 0;
    padding-right: 0;
    border-right: none;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.is-phone .app-layout-spacer {
    display: block;
    flex: 1 1 auto;
  }
  /* No save/restore of named configs on phone, so the editable simulation
     title carries no useful meaning here — hide it. */
  body.is-phone .sim-title-container {
    display: none;
  }
  body.is-phone .app-nav-menu {
    order: 0;
    margin: 0;
    padding-top: 0;
    border-top: none;
  }

  /* --- Maximize the canvas: drop the in-flow controls/text --------------- */
  body.is-phone #top-controls,
  body.is-phone #column-1,
  body.is-phone #column-2,
  body.is-phone .lab-stats-descriptions {
    display: none !important;
  }
  /* The 12-col wrapper cell that only holds #top-controls would otherwise keep
     its padding as an empty strip. */
  body.is-phone #scroll-tab-1 .app-cell:has(#top-controls) {
    display: none;
  }

  body.is-phone .app-content {
    overflow: hidden;
  }
  body.is-phone .app-tab-panel.is-active {
    overflow: hidden;
    height: 100%;
    padding: 0;
  }
  body.is-phone #scroll-tab-1 .page-content {
    height: 100%;
    padding: 0;
  }
  body.is-phone #scroll-tab-1 .app-grid {
    height: 100%;
    margin: 0;
    gap: 0;
  }
  body.is-phone #chart-column {
    order: 1;
    width: 100%;
    /* Leave room for the bottom bar and the peeking sheet so the map is never
       hidden behind them. fitMapToViewport() squares the map to this box. The
       100vh line is a fallback for engines without dvh (the dvh line wins where
       supported); otherwise the calc would be dropped and the column would
       collapse, letting the map overflow off-screen. */
    height: calc(
      100vh - var(--phone-header-h) - var(--phone-bar-h) -
        var(--phone-sheet-peek)
    );
    height: calc(
      100dvh - var(--phone-header-h) - var(--phone-bar-h) -
        var(--phone-sheet-peek) - env(safe-area-inset-top) -
        env(safe-area-inset-bottom)
    );
    min-height: 0;
    padding: 8px;
    /* .app-cell is content-box, so without this the 8px padding would push the
       border-box past width:100% and overflow the viewport to the right. */
    box-sizing: border-box;
    /* Single column, centred both axes. nowrap + align-content keep a lone
       flex item from being pushed to a corner by the base .chart-column
       (flex-wrap: wrap; align-content: flex-start). */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    overflow: hidden;
  }
  /* Stats view: the four charts are simple 2-bar charts, so tile them 2×2 to
     fill the box and be readable together instead of stacking/scrolling.
     align-items/justify-items must be stretch here because the map-mode rule
     above sets align-items:center, which in a grid would collapse each chart. */
  body.is-phone #chart-column:has(.lab-canvas-parent:not([hidden]):not(.lab-map-canvas-parent)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    align-items: stretch;
    justify-items: stretch;
    gap: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.is-phone #chart-column .lab-canvas-parent:not(.lab-map-canvas-parent) {
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  /* --- Pre-run hint over the map (a real, tappable play button) ---------- */
  body.is-phone.phone-prerun #phone-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    padding: 16px 24px;
    border: none;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    border-radius: 12px;
    font: 500 14px Roboto, sans-serif;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    z-index: 280;
  }
  body.is-phone.phone-prerun #phone-hint:active {
    background: rgba(0, 0, 0, 0.78);
  }
  body.is-phone.phone-prerun #phone-hint .material-icons {
    font-size: 40px;
  }

  /* --- Swipe-for-speed: map is the gesture surface + discoverability glyph -- */
  /* Let single-finger vertical drags on the map be the speed gesture instead of
     the browser trying to scroll/zoom. Set on the canvas too, since the touch
     starts there and the starting element's touch-action is what governs. */
  body.is-phone .lab-map-canvas-parent,
  body.is-phone .lab-map-canvas-parent .lab-chart-canvas {
    touch-action: none;
  }
  /* Small glyph, map view only, non-interactive so it never eats a swipe. */
  body.is-phone.phone-map-mode #phone-speed-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    position: fixed;
    right: 10px;
    top: calc(var(--phone-header-h) + env(safe-area-inset-top) + 10px);
    padding: 5px 7px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    pointer-events: none;
    z-index: 285;
  }
  body.is-phone.phone-map-mode #phone-speed-hint .material-icons {
    font-size: 22px;
  }
  body.is-phone.phone-map-mode #phone-speed-hint span {
    font: 500 9px Roboto, sans-serif;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    opacity: 0.9;
  }

  /* Metrics thumbnail: portrait phones have slack below the square map, so move
     the panel from over the map's corner to a strip beneath it. Scoped with `>`
     to the map parent so the fullscreen-relocated copy (moved into the
     fullscreen wrapper) keeps its default corner placement. */
  body.is-phone .lab-map-canvas-parent > .map-metrics-overlay {
    top: calc(100% + 8px);
    bottom: auto;
    left: 0;
    right: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  body.is-phone .lab-map-canvas-parent > .map-metrics-overlay .map-metrics-phases {
    flex-wrap: nowrap;
  }
  body.is-phone .lab-map-canvas-parent > .map-metrics-overlay #map-metric-wait {
    flex-basis: auto; /* keep Wait on the same row in the horizontal strip */
  }

  /* --- Bottom action bar (thumb zone) ------------------------------------ */
  body.is-phone #phone-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--phone-bar-h) + env(safe-area-inset-bottom));
    padding: 0 6px env(safe-area-inset-bottom);
    align-items: center;
    justify-content: space-around;
    gap: 6px;
    background: var(--surface-white);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -2px 8px var(--shadow-md);
    z-index: 300;
  }
  /* The keyboard-shortcuts modal is meaningless without a keyboard, so hide the
     Help trigger on phone. (Kept in the DOM/desktop; just not shown here.) */
  body.is-phone #phone-help {
    display: none;
  }
  .phone-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-medium);
    cursor: pointer;
    flex: 0 0 auto;
  }
  .phone-bar__btn--primary {
    background: var(--background-primary);
    color: #fff;
  }
  .phone-bar__btn:disabled {
    opacity: 0.4;
    cursor: default;
  }
  .phone-bar__btn .material-icons {
    font-size: 26px;
  }
  .phone-bar__segmented {
    display: inline-flex;
    border: 1px solid var(--border-medium);
    border-radius: 999px;
    overflow: hidden;
  }
  .phone-seg {
    border: none;
    background: transparent;
    font: 500 13px Roboto, sans-serif;
    padding: 8px 12px;
    min-height: 40px;
    color: var(--text-medium);
    cursor: pointer;
  }
  .phone-seg.is-active {
    background: var(--background-secondary);
    color: #fff;
  }

  /* --- Draggable bottom sheet -------------------------------------------- */
  body.is-phone #phone-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--phone-bar-h) + env(safe-area-inset-bottom));
    max-height: 78dvh;
    background: var(--surface-white);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 16px var(--shadow-lg);
    z-index: 290;
    transition: transform 0.28s ease;
    transform: translateY(calc(100% - var(--phone-sheet-peek)));
  }
  body.is-phone #phone-sheet.is-full {
    transform: translateY(0);
  }
  body.is-phone #phone-sheet.is-peek {
    transform: translateY(calc(100% - var(--phone-sheet-peek)));
  }
  body.is-phone #phone-sheet.is-dragging {
    transition: none;
  }
  .phone-sheet__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    flex: 0 0 auto;
    border: none;
    background: transparent;
    cursor: grab;
    touch-action: none;
  }
  .phone-sheet__grip {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-medium);
  }
  .phone-sheet__scroll {
    /* flex + min-height:0 bound the scroll area to the sheet's max-height so it
       scrolls internally instead of overflowing (which clipped the nudge). */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 24px;
  }
  .phone-sheet__presets {
    display: flex;
    gap: 8px;
    padding: 4px 0 12px;
  }
  .phone-preset-chip {
    flex: 1;
    min-height: 40px;
    border: 1px solid var(--border-medium);
    border-radius: 999px;
    background: var(--surface-lightest);
    font: 500 14px Roboto, sans-serif;
    color: var(--text-medium);
    cursor: pointer;
  }
  .phone-preset-chip:active {
    background: var(--primary-overlay-light);
  }
  .phone-sheet__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  /* Relocated cards are real .app-settings-card nodes; keep them full-width. */
  body.is-phone .phone-sheet__body .app-settings-card {
    margin: 0;
    width: 100%;
  }
  .phone-sheet__nudge {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary-color);
  }
}