:root {
  --bg: #f7f7f8;
  --surface: #ffffff;
  --ink: #15171a;
  --muted: #6c727a;
  --line: #dfe2e6;
  --line-dark: #c9cdd2;
  --soft: #f0f1f2;
  --blue: #1769e0;
}

html { scroll-behavior: smooth; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app-shell { max-width: 1500px; }
.app-header {
  position: sticky;
  top: 0;
  z-index: 1040;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
}
.header-inner { min-height: 54px; }
.navbar-brand {
  margin: 0;
  color: #101214;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.025em;
}
.main-nav { gap: .15rem; }
.main-nav .nav-link {
  padding: .95rem .72rem;
  color: #656b72;
  font-size: .9rem;
}
.main-nav .nav-link:hover { color: #111; }
.main-nav .nav-link.active { color: #111; font-weight: 650; }
.app-main { min-height: calc(100vh - 55px); }

.page-frame { padding-top: 54px; padding-bottom: 72px; }
.overview-page { max-width: 1200px; }
.overview-head {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-dark);
}
.overview-head h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.045em;
  font-weight: 650;
}
.stage-list { border-bottom: 1px solid var(--line-dark); }
.stage-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 32px;
  align-items: center;
  min-height: 104px;
  gap: 1rem;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.stage-row:last-child { border-bottom: 0; }
.stage-row:hover .stage-main strong { text-decoration: underline; text-underline-offset: 4px; }
.stage-number { color: #8a9097; font-size: .82rem; font-variant-numeric: tabular-nums; }
.stage-main { display: flex; align-items: baseline; gap: 1.2rem; min-width: 0; }
.stage-main strong { font-size: 1.35rem; font-weight: 620; letter-spacing: -.02em; }
.stage-main span { color: var(--muted); font-size: .9rem; }
.stage-arrow { justify-self: end; color: #474c52; font-size: 1.35rem; }

.placeholder-page { max-width: 1200px; }
.section-number { margin-bottom: 8px; color: #858b92; font-size: .8rem; font-variant-numeric: tabular-nums; }
.placeholder-page h1,
.demo-head h1 { margin: 0; font-size: 2rem; font-weight: 640; letter-spacing: -.035em; }
.placeholder-page p { margin-top: 18px; color: var(--muted); }

.demonstration-page { padding-top: 34px; padding-bottom: 90px; }
.demo-head { padding-bottom: 20px; }
.demo-local-nav {
  position: sticky;
  top: 55px;
  z-index: 1025;
  display: flex;
  gap: 1.6rem;
  padding: 10px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(247,247,248,.97);
}
.demo-local-nav a {
  color: #555b62;
  font-size: .9rem;
  text-decoration: none;
}
.demo-local-nav a:hover { color: #111; }
.demo-section {
  scroll-margin-top: 104px;
  padding: 44px 0 52px;
  border-bottom: 1px solid var(--line-dark);
}
.demo-section:last-child { border-bottom: 0; }
.section-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 18px;
}
.section-heading-row h2 { margin: 0; font-size: 1.5rem; font-weight: 640; letter-spacing: -.025em; }
.text-action { color: #3f464d; font-size: .83rem; text-decoration: none; }
.text-action:hover { color: #111; text-decoration: underline; text-underline-offset: 3px; }
.research-notice {
  margin-top: 32px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
}

/* Workflow */
.workflow-controls {
  display: grid;
  grid-template-columns: minmax(270px, 2.3fr) minmax(150px, 1.1fr) 105px 115px 115px 150px;
  gap: 10px;
  align-items: end;
  padding: 0 0 16px;
}
.field { min-width: 0; }
.field > span,
.history-time-control > span {
  display: block;
  margin-bottom: 5px;
  color: #767c83;
  font-size: .68rem;
  font-weight: 650;
}
.form-control,
.form-select,
.input-group-text {
  border-color: #d8dce0;
  border-radius: 6px;
  box-shadow: none !important;
}
.form-control:focus,
.form-select:focus { border-color: #9da5ad; }
.input-group-text { background: #f3f4f5; color: #6b7178; }
.workflow-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.workflow-calc-group { display: flex; align-items: center; gap: .75rem; }
.routing-inline-status {
  display: none;
  color: #687079;
  font-size: .76rem;
}
.routing-inline-status.visible { display: inline; }
.routing-inline-status.routing-warning { color: #9b5f12; }
.btn { border-radius: 6px; }
.btn-primary { background: var(--blue); border-color: var(--blue); }

.workflow-workspace {
  display: grid;
  grid-template-columns: minmax(430px, 40%) minmax(620px, 60%);
  height: 690px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: var(--surface);
}
.route-editor-pane {
  min-width: 0;
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.route-editor-scroll { height: 100%; overflow: auto; padding: 12px; }
.routes-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.map-pane { min-width: 0; overflow: hidden; }
.workflow-map { width: 100%; height: 100%; background: #e9ecef; }
.route-col {
  min-width: 0;
  padding: 8px;
  border: 1px solid #dfe2e6;
  border-radius: 7px;
  background: #fff;
}
.route-col.unassigned { background: #fbf7e9; }
.route-col.selecting { border-color: #7ea8e6; box-shadow: inset 0 0 0 1px #7ea8e6; }
.route-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-bottom: 3px;
  font-weight: 650;
}
.route-head .left, .route-head .right { display: flex; align-items: center; gap: 6px; }
.route-head .left { min-width: 0; flex: 1 1 auto; }
.route-head .right { flex: 0 1 auto; justify-content: flex-end; }
.color-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; }
.route-name { font-size: .85rem; }
.route-count {
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 10px;
  background: #f0f1f2;
  color: #737980;
  font-size: .65rem;
  text-align: center;
}
.select-map-btn { padding: .22rem .45rem; font-size: .66rem; white-space: nowrap; }
.select-map-btn.active { color: #fff; background: var(--blue); border-color: var(--blue); }
.route-trash { width: 27px; padding: .18rem .3rem; }
.route-list { min-height: 50px; margin: 0; padding: 6px 2px; list-style: none; border-radius: 5px; }
.workflow-route-item {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  padding: 7px 8px;
  border: 1px solid #e7e9ec;
  border-radius: 6px;
  background: #fff;
}
.workflow-route-item:last-child { margin-bottom: 0; }
.idx-badge {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 750;
}
.route-item-copy { min-width: 0; flex: 1 1 auto; line-height: 1.15; }
.route-item-copy strong { display: block; font-size: .78rem; }
.route-item-copy small { display: none; }
.route-move-out { padding: .08rem .32rem; font-size: .68rem; }
.drag-handle { color: #969ca3; cursor: grab; user-select: none; font-weight: 700; letter-spacing: -2px; }
.sortable-chosen { opacity: .85; }
.sortable-ghost { opacity: .5; }
.sortable-fallback { opacity: .82; }
.workflow-route-metrics {
  min-height: 28px;
  padding: 7px 2px 1px;
  border-top: 1px solid #eef0f2;
  color: var(--muted);
  font-size: .69rem;
}
.route-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.workflow-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.route-metric-grid b, .route-metric-grid small { display: block; }
.route-metric-grid b { color: var(--ink); font-size: .8rem; }
.route-metric-grid small { color: var(--muted); font-size: .63rem; }
.route-etas { margin-top: 5px; line-height: 1.45; }
.workflow-preference-warning {
  margin-top: 5px;
  padding: 4px 5px;
  border-left: 2px solid #c08a35;
  color: #7f5a1c;
  font-size: .65rem;
}
.routing-error { color: #963e31; }
.workflow-marker-shell { background: transparent; border: 0; }
.workflow-map-marker {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--marker-color);
  box-shadow: 0 1px 4px rgba(0,0,0,.38);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}


.history-marker-shell { background: transparent; border: 0; }
.history-map-marker {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--marker-color);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

/* History browser */
.history-heading-row { margin-bottom: 12px; }
.history-counts { color: var(--muted); font-size: .78rem; }
.history-browser-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--line-dark);
}
.history-filter-group { display: flex; gap: 16px; }
.history-filter-button {
  appearance: none;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: #737980;
  font-size: .8rem;
}
.history-filter-button.active { border-bottom-color: #1a1d20; color: #111; }
.history-time-control { display: flex; align-items: center; gap: 7px; }
.history-time-control > span { margin: 0; }
.history-time-control .form-select { width: 100px; }
.history-browser {
  display: grid;
  grid-template-columns: minmax(510px, 42%) minmax(620px, 58%);
  height: 720px;
  border-bottom: 1px solid var(--line-dark);
  background: var(--surface);
}
.history-table-pane { min-width: 0; overflow: hidden; border-right: 1px solid var(--line); }
.history-table-scroll { height: 100%; overflow: auto; }
.history-browser-table { font-size: .78rem; }
.history-browser-table thead { position: sticky; top: 0; z-index: 3; background: #f8f8f9; }
.history-browser-table th {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-dark);
  color: #747a81;
  font-size: .64rem;
  font-weight: 650;
  text-transform: none;
  white-space: nowrap;
}
.history-browser-table td { padding: 9px 10px; border-bottom: 1px solid #eceef0; white-space: nowrap; }
.history-browser-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.history-case-row { cursor: pointer; }
.history-case-row:hover td { background: #f7f8f9; }
.history-case-row.selected td { background: #eef3fa; }
.history-case-row.hidden, .history-case-row[hidden] { display: none; }
.history-status.complete { color: #2f6a40; }
.history-status.partial { color: #95631e; }
.history-preview-pane { min-width: 0; display: grid; grid-template-rows: 42px minmax(380px, 1fr) minmax(150px, auto); overflow: hidden; }
.history-preview-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--line);
}
.history-case-title { font-size: .82rem; font-weight: 650; }
.history-preview-actions { display: flex; align-items: center; gap: .8rem; }
.history-browser-map { width: 100%; height: 100%; background: #e9ecef; }
.history-browser-routes { overflow: auto; border-top: 1px solid var(--line); }
.history-route-row {
  display: grid;
  grid-template-columns: 180px minmax(220px, 1.3fr) minmax(330px, 1.8fr);
  gap: 12px;
  align-items: start;
  padding: 9px 12px;
  border-bottom: 1px solid #eceef0;
  font-size: .72rem;
  cursor: pointer;
}
.history-route-row:hover { background: #fafafa; }
.history-route-name { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.history-route-name strong { font-size: .76rem; }
.history-route-name > span:last-child { color: var(--muted); }
.route-swatch { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; }
.history-route-sequence { color: #555c63; line-height: 1.45; }
.history-route-metrics { display: flex; flex-wrap: wrap; gap: 5px 13px; color: #70767d; line-height: 1.4; }
.history-route-metrics b { color: #24282c; font-weight: 650; }
.history-route-etas { flex-basis: 100%; }
.history-unassigned-row { cursor: default; background: #fafafa; }

/* Demonstration workspace tabs */
.demonstration-page { padding-top: 22px; padding-bottom: 32px; }
.demo-head { padding-bottom: 14px; }
.demo-local-nav {
  position: static;
  gap: 1.8rem;
  padding: 0;
  border-top: 0;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
}
.demo-local-nav .demo-tab {
  position: relative;
  padding: 11px 0 10px;
  color: #666d74;
}
.demo-local-nav .demo-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}
.demo-local-nav .demo-tab.active { color: #111; font-weight: 650; }
.demo-local-nav .demo-tab.active::after { background: #111; }
.demo-stage { min-height: 0; }
.demo-view { padding: 24px 0 0; }
.demo-view[hidden] { display: none !important; }
.demo-view .section-heading-row { margin-bottom: 14px; }
.demo-view .section-heading-row h2 { font-size: 1.32rem; }
.workflow-workspace { height: clamp(520px, calc(100vh - 335px), 720px); }
.history-browser { height: clamp(540px, calc(100vh - 255px), 740px); }

/* Old solutions */
.old-solutions-section { min-height: clamp(420px, calc(100vh - 220px), 690px); }
.simple-list { border-top: 1px solid var(--line-dark); }
.simple-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 0 2px;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.simple-list-row span:last-child { color: #9a9fa5; }

/* Direct historical case view kept for shareable/debug links. */
.history-detail-page { padding-top: 34px; padding-bottom: 60px; }
.history-detail-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 14px; }
.hero-kicker, .workspace-label { margin-bottom: 4px; color: var(--muted); font-size: .67rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.status-pill { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 10px; font-size: .7rem; font-weight: 650; }
.status-complete { background: #e8f3eb; color: #2b693d; }
.status-partial { background: #f5eee1; color: #805a16; }
.history-detail-layout { display: grid; grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.55fr); gap: 12px; min-height: 690px; }
.workspace-panel { overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.workspace-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.history-routes-panel { overflow: auto; max-height: 690px; }
.history-map { width: 100%; height: 620px; background: #e9ecef; }
.history-route-list { padding: 8px; }
.history-route-card { margin-bottom: 7px; padding: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.history-route-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.route-stop-sequence { display: flex; flex-wrap: wrap; gap: 4px; color: #4e545b; font-size: .78rem; }
.route-arrow { color: #9fa4aa; }
.route-metrics { margin-top: 8px; color: var(--muted); font-size: .74rem; }
.privacy-note { padding: 8px 0; color: var(--muted); font-size: .72rem; }
.legacy-metric { display: block; margin-top: 3px; color: var(--muted); }
.unassigned-card { background: #f7f7f8; cursor: default; }
.workflow-status { color: var(--muted); font-size: .75rem; }
.status-dot { display: none; }
.empty-workspace { min-height: 280px; display: grid; place-items: center; color: var(--muted); text-align: center; }

@media (max-width: 1250px) {
  .workflow-controls { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .field-case { grid-column: span 2; }
  .workflow-workspace { grid-template-columns: minmax(420px, 44%) minmax(500px, 56%); }
  .history-browser { grid-template-columns: minmax(480px, 46%) minmax(540px, 54%); }
  .history-route-row { grid-template-columns: 150px 1fr; }
  .history-route-metrics { grid-column: 1 / -1; }
}

@media (max-width: 991.98px) {
  .main-nav .nav-link { padding: .6rem 0; }
  .demo-local-nav { top: 55px; overflow-x: auto; }
  .workflow-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-case { grid-column: 1 / -1; }
  .workflow-workspace { grid-template-columns: 1fr; height: auto; }
  .route-editor-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .route-editor-scroll { max-height: 620px; }
  .workflow-map { height: 520px; }
  .history-browser { grid-template-columns: 1fr; height: auto; }
  .history-table-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .history-table-scroll { max-height: 420px; }
  .history-preview-pane { grid-template-rows: 42px 520px auto; }
  .history-detail-layout { grid-template-columns: 1fr; }
  .history-routes-panel { max-height: none; }
  .history-map { height: 520px; }
}

@media (max-width: 575.98px) {
  .page-frame { padding-top: 34px; }
  .stage-row { grid-template-columns: 44px minmax(0,1fr) 24px; min-height: 88px; }
  .stage-main { display: block; }
  .stage-main span { display: block; margin-top: 4px; }
  .workflow-controls { grid-template-columns: 1fr; }
  .field-case { grid-column: auto; }
  .routes-editor { grid-template-columns: 1fr; }
  .workflow-actions { align-items: stretch; flex-direction: column; }
  .workflow-calc-group { justify-content: space-between; }
  .workflow-map { height: 440px; }
  .history-browser-toolbar { align-items: flex-start; flex-direction: column; }
  .history-time-control { width: 100%; justify-content: space-between; }
  .history-browser-table th:nth-child(3), .history-browser-table td:nth-child(3) { display: none; }
  .history-preview-pane { grid-template-rows: 48px 440px auto; }
  .history-route-row { grid-template-columns: 1fr; }
  .history-route-metrics { grid-column: auto; }
  .history-detail-head { align-items: flex-start; flex-direction: column; }
}

/* Old solution implementations */
.old-solution-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-dark);
}
.old-solution-tab {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 0 9px;
  background: transparent;
  color: #6e747a;
  font-size: .82rem;
}
.old-solution-tab.active { color: #111; border-bottom-color: #111; font-weight: 650; }
.old-solution-view[hidden] { display: none !important; }
.google-legacy-intro {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
  font-size: .78rem;
}
.google-legacy-intro strong { color: #17191c; white-space: nowrap; }
.google-legacy-intro span { color: var(--muted); }
.google-config-status {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  margin-bottom: 10px;
  border-left: 2px solid #a1a6ab;
  background: #f6f7f8;
  color: #646a70;
  font-size: .72rem;
}
.google-config-status.ready { border-left-color: #3f8051; color: #326843; }
.google-config-status.warning { border-left-color: #b17b2a; color: #845c1f; }
.google-config-status.disabled { border-left-color: #8f959b; }
.google-controls {
  display: grid;
  grid-template-columns: minmax(330px, 2fr) repeat(5, minmax(105px, .7fr));
  gap: 8px;
  padding-bottom: 10px;
}
.google-rule-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.google-rule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #4d5359;
  font-size: .73rem;
  white-space: nowrap;
}
.google-rule input[type="checkbox"] { margin: 0; }
.google-rule .form-control[type="time"] { width: 96px; }
.google-small-number { width: 66px; }
.google-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 50px;
}
.google-actions-left { display: flex; align-items: center; gap: 8px; }
.google-run-status { color: var(--muted); font-size: .72rem; }
.google-saved-select { display: flex; align-items: center; gap: 7px; margin: 0; }
.google-saved-select > span { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.google-saved-select .form-select { width: 310px; }
.google-result-workspace {
  display: grid;
  grid-template-columns: minmax(440px, 38%) minmax(620px, 62%);
  height: clamp(500px, calc(100vh - 430px), 650px);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: #fff;
}
.google-result-panel { min-width: 0; overflow: auto; border-right: 1px solid var(--line); }
.google-map-panel { min-width: 0; overflow: hidden; }
.google-solution-map { width: 100%; height: 100%; background: #e9ecef; }
.google-solution-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.google-solution-summary:empty { display: none; }
.google-solution-summary > div { padding: 9px 10px; border-right: 1px solid #eceef0; }
.google-solution-summary b, .google-solution-summary span { display: block; }
.google-solution-summary b { color: #1f2327; font-size: .78rem; }
.google-solution-summary span { color: var(--muted); font-size: .62rem; margin-top: 1px; }
.google-route-row { padding: 10px 12px; border-bottom: 1px solid #eceef0; }
.google-route-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: .74rem; }
.google-route-head > span:last-child { color: var(--muted); }
.google-route-sequence { color: #4f565d; font-size: .72rem; line-height: 1.45; }
.google-route-metrics { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; color: #72787e; font-size: .68rem; }
.google-route-metrics b { color: #24282c; font-weight: 650; }
.google-route-etas { flex-basis: 100%; }
.google-result-warning { padding: 8px 12px; border-left: 2px solid #b17b2a; color: #815b20; font-size: .69rem; }
.google-raw-details { border-top: 1px solid var(--line); }
.google-raw-details summary { cursor: pointer; padding: 9px 12px; color: #60666d; font-size: .7rem; }
.google-raw-details pre { max-height: 320px; overflow: auto; margin: 0; padding: 10px 12px; background: #f7f8f9; font-size: .64rem; white-space: pre-wrap; }

@media (max-width: 1400px) {
  .google-controls { grid-template-columns: minmax(280px, 2fr) repeat(3, minmax(110px, 1fr)); }
  .google-case-field { grid-column: span 2; }
  .google-result-workspace { grid-template-columns: minmax(420px, 42%) minmax(560px, 58%); }
}
.google-force-run { display: inline-flex; align-items: center; gap: 5px; margin: 0 2px 0 4px; color: #737980; font-size: .68rem; white-space: nowrap; }
.google-force-run input { margin: 0; }

/* Old-solution comparison */
.comparison-toolbar {
  display: grid;
  grid-template-columns: 220px minmax(340px, 1fr) auto minmax(180px, auto);
  gap: 10px;
  align-items: end;
  padding: 2px 0 12px;
  border-bottom: 1px solid var(--line-dark);
}
.comparison-view-control { display: flex; align-items: center; gap: 2px; padding-bottom: 1px; }
.comparison-view-button {
  appearance: none;
  border: 1px solid var(--line-dark);
  padding: 6px 10px;
  background: #fff;
  color: #666d74;
  font-size: .72rem;
}
.comparison-view-button + .comparison-view-button { margin-left: -1px; }
.comparison-view-button.active { position: relative; z-index: 1; border-color: #22272b; color: #111; font-weight: 650; }
.comparison-run-meta { padding-bottom: 7px; color: var(--muted); font-size: .69rem; text-align: right; white-space: nowrap; }
.comparison-empty { padding: 28px 2px; color: var(--muted); font-size: .8rem; }
.comparison-summary {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) repeat(2, minmax(160px, 1fr));
  margin-top: 10px;
  border-bottom: 1px solid var(--line-dark);
  font-size: .72rem;
}
.comparison-summary-head, .comparison-summary-row, .comparison-summary-foot { display: contents; }
.comparison-summary > div > *, .comparison-summary > span, .comparison-summary > b { min-width: 0; }
.comparison-summary-head > * { padding: 7px 9px; border-bottom: 1px solid var(--line); color: #454b51; }
.comparison-summary-row > *, .comparison-summary-foot > * { padding: 6px 9px; border-bottom: 1px solid #eceef0; }
.comparison-summary-row > span, .comparison-summary-foot > span { color: var(--muted); }
.comparison-summary-row > b, .comparison-summary-foot > b { color: #202428; font-weight: 650; }
.comparison-layout { margin-top: 10px; }
.comparison-layout[hidden] { display: none !important; }
.comparison-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.comparison-side { min-width: 0; border: 1px solid var(--line-dark); background: #fff; }
.comparison-side-head {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  font-size: .76rem;
}
.comparison-side-head span { color: var(--muted); font-size: .66rem; }
.comparison-map { width: 100%; height: clamp(330px, calc(100vh - 535px), 440px); background: #e9ecef; }
.comparison-route-list { max-height: 220px; overflow: auto; border-top: 1px solid var(--line); }
.comparison-route-row { padding: 8px 10px; border-bottom: 1px solid #eceef0; }
.comparison-route-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: .7rem; }
.comparison-route-head > span:last-child { color: var(--muted); }
.comparison-route-sequence { color: #50575e; font-size: .68rem; line-height: 1.4; }
.comparison-route-metrics { display: flex; flex-wrap: wrap; gap: 4px 11px; margin-top: 5px; color: #72787e; font-size: .64rem; line-height: 1.4; }
.comparison-route-metrics b { color: #24282c; font-weight: 650; }
.comparison-route-etas { flex-basis: 100%; }
.comparison-merged-head { display: flex; justify-content: flex-end; gap: 18px; min-height: 30px; align-items: center; color: #555c63; font-size: .68rem; }
.comparison-merged-head span { display: inline-flex; align-items: center; gap: 6px; }
.comparison-legend-line { display: inline-block; width: 22px; border-top: 3px solid #2463eb; }
.comparison-legend-line.expert { border-top: 2px dashed #252a2f; }
.comparison-merged-map { height: clamp(390px, calc(100vh - 505px), 500px); border: 1px solid var(--line-dark); }
.comparison-merged-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.comparison-merged-details > div { min-width: 0; border: 1px solid var(--line); background: #fff; }
.comparison-detail-title { padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: .7rem; font-weight: 650; }
.comparison-map-marker.expert {
  transform: translate(8px, -8px);
  border-color: #22272b;
  background: #fff !important;
  color: #22272b;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
@media (max-width: 1250px) {
  .comparison-toolbar { grid-template-columns: 180px minmax(290px, 1fr) auto; }
  .comparison-run-meta { grid-column: 1 / -1; text-align: left; padding: 0; }
}

/* Legacy OR-Tools reconstruction */
.ortools-controls {
  display: grid;
  grid-template-columns: minmax(340px, 2.2fr) repeat(4, minmax(120px, .8fr));
  gap: 8px;
  padding-bottom: 10px;
}
.ortools-case-field { min-width: 0; }
.input-suffix { display: flex; align-items: stretch; }
.input-suffix .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-suffix > span {
  display: flex;
  align-items: center;
  padding: 0 7px;
  border: 1px solid #ced2d6;
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background: #f4f5f6;
  color: #747a80;
  font-size: .68rem;
  white-space: nowrap;
}
.legacy-google-attribution {
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  color: #777d83;
  font-size: .64rem;
}
@media (max-width: 1400px) {
  .ortools-controls { grid-template-columns: minmax(280px, 2fr) repeat(2, minmax(120px, 1fr)); }
  .ortools-case-field { grid-column: span 2; }
}

/* Authentication and user administration */
.account-nav {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--line);
  font-size: .78rem;
  white-space: nowrap;
}
.account-nav a,
.account-nav button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #676d74;
  text-decoration: none;
}
.account-nav a:hover,
.account-nav button:hover { color: #111; text-decoration: underline; text-underline-offset: 3px; }
.account-nav form { margin: 0; }

.flash-stack { padding-top: 10px; }
.flash-message {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: #4d535a;
  font-size: .82rem;
}
.flash-message.error { color: #9b2c20; }
.flash-message.success { color: #16734a; }

.auth-page {
  min-height: calc(100vh - 55px);
  display: grid;
  place-items: center;
  padding: 32px 20px 80px;
}
.auth-panel {
  width: min(360px, 100%);
  display: grid;
  gap: 16px;
}
.auth-panel-wide { width: min(430px, 100%); }
.auth-panel h1,
.account-page h1,
.users-page h1,
.user-form-page h1 {
  margin: 0 0 8px;
  font-size: 1.55rem;
  font-weight: 650;
  letter-spacing: -.03em;
}
.auth-field { display: grid; gap: 5px; }
.auth-field > span,
.section-access-fieldset legend {
  color: #70767d;
  font-size: .72rem;
  font-weight: 650;
}
.auth-note { margin: 0; color: var(--muted); font-size: .86rem; }
.settings-form {
  width: min(520px, 100%);
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
.section-access-fieldset {
  display: grid;
  gap: 8px;
  margin: 2px 0;
  padding: 14px 0 4px;
  border: 0;
  border-top: 1px solid var(--line);
}
.section-access-fieldset legend { float: none; width: auto; margin: 0 0 5px; }
.user-active-check { margin: 2px 0; }
.form-actions { display: flex; gap: 8px; padding-top: 4px; }
.users-page,
.user-form-page,
.account-page { max-width: 1100px; }
.users-table-wrap { margin-top: 18px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.users-table { font-size: .82rem; }
.users-table th { color: #737980; font-size: .7rem; font-weight: 650; }
.users-table td, .users-table th { padding: 11px 8px; vertical-align: middle; }
.users-table a { color: #333940; text-decoration: none; }
.users-table a:hover { text-decoration: underline; text-underline-offset: 3px; }
.documentation-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-dark);
  color: inherit;
  text-decoration: none;
}
.documentation-row:hover strong { text-decoration: underline; text-underline-offset: 4px; }