/* v51 — one landscape-oriented, scroll-free route summary for every mode.
   Operational information lives in an optional modal, not inside the map card. */
.map-shell > #selectedRoutePanel.route-focus-compact {
  width: min(360px, calc(100% - 112px));
  max-height: none;
  overflow: visible;
  padding: 11px 12px 10px;
  border-radius: 16px;
  border-left: 3px solid var(--route-accent, #146c57);
  box-shadow: 0 12px 38px #172e3040;
}
.route-focus-compact .route-compact-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 30px 32px;
  align-items: start;
  gap: 7px;
}
.route-focus-compact .route-focus-code {
  display: grid;
  place-items: center;
  min-width: 36px;
  max-width: 56px;
  min-height: 34px;
  height: auto;
  padding: 4px 5px;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.05;
  overflow-wrap: anywhere;
  box-shadow: inset 0 -2px 0 #0000001c;
}
.route-focus-compact .route-compact-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.route-focus-compact .route-focus-category {
  color: var(--st-ui-muted, #587269);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.route-focus-compact .route-focus-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--st-ui-text, #213b35);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.22;
  letter-spacing: -.2px;
  overflow-wrap: anywhere;
}
.route-focus-compact .route-focus-operator {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--st-ui-muted, #647d73);
  font-size: 9px;
  line-height: 1.3;
}
.route-focus-compact .route-compact-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--route-accent, #146c57);
  background: color-mix(in srgb, var(--route-accent, #146c57) 10%, var(--st-ui-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--route-accent, #146c57) 25%, transparent);
  border-radius: 9px;
}
.route-focus-compact .route-focus-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 9px;
  font-size: 19px;
  line-height: 1;
}
.route-focus-compact .route-compact-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--st-ui-border, #e4ebe8);
}
.route-focus-compact .route-compact-metric {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 3px;
  color: var(--st-ui-text, #315348);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.route-focus-compact .route-compact-metric > span {font-size: 13px;color: var(--route-accent, #146c57)}
.route-focus-compact .route-compact-metric strong {font-size: 10.5px;font-weight: 850}
.route-focus-compact .route-compact-state {
  margin-left: auto;
  padding: 4px 6px;
  border: 1px solid #eedcaf;
  border-radius: 999px;
  background: #fff5df;
  color: #805b16;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
.route-focus-compact .route-compact-state[data-tone="closed"] {color: #a02d37;background: #fff0f1;border-color: #f0c6cb}
.route-focus-compact .route-compact-state[data-tone="warning"] {color: #8b5912;background: #fff4d9;border-color: #f0d59d}
.route-focus-compact .route-compact-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
}
.route-focus-compact .route-compact-source {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--st-ui-muted, #687a71);
  font-size: 9px;
  line-height: 1.3;
}
.route-focus-compact .route-compact-actions {display: flex; flex: none; align-items: center; gap: 5px}
.route-focus-compact .route-compact-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 32px;
  min-height: 32px;
  padding: 0 8px;
  color: var(--route-accent, #146c57);
  border: 1px solid var(--st-ui-border, #d2e0d8);
  background: var(--st-ui-surface, #fff);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.route-focus-compact .route-focus-center {width: 32px;padding: 0;font-size: 18px}
.route-focus-compact .route-compact-back {display: none}
.route-focus-compact .route-compact-actions button:hover {background: color-mix(in srgb,var(--route-accent,#146c57) 9%,var(--st-ui-surface,#fff))}
.route-focus-details-dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: min(76dvh, 700px);
  padding: 0;
  overflow-y: auto;
  border: 1px solid var(--st-ui-border, #dbe6e0);
  border-radius: 19px;
  background: var(--st-ui-surface, #fff);
  color: var(--st-ui-text, #273d32);
  box-shadow: 0 24px 70px #081c204d;
}
.route-focus-details-dialog::backdrop {background: #0b20358c;backdrop-filter: blur(3px)}
.route-details-head {display: flex;align-items: start;justify-content: space-between;gap: 12px;padding: 17px 18px 13px;border-bottom: 1px solid var(--st-ui-border,#e4eae7)}
.route-details-head span {color: var(--st-ui-muted,#5d796b);font-size: 9px;font-weight: 850;letter-spacing: .1em}
.route-details-head h2 {margin: 4px 0 0;font-size: 16px;line-height: 1.3;overflow-wrap: anywhere}
.route-details-head button {width: 36px;height: 36px;border: 1px solid var(--st-ui-border,#e0e6e4);border-radius: 10px;background: var(--st-ui-surface,#fff);color: var(--st-ui-text,#375248);font-size: 23px;cursor: pointer}
.route-details-content {padding: 10px 18px 18px}
.route-details-list {margin: 0}
.route-details-list > div {display: flex;justify-content: space-between;gap: 12px;padding: 11px 0;border-bottom: 1px solid var(--st-ui-border,#e6ede9)}
.route-details-list dt {flex: 0 0 42%;color: var(--st-ui-muted,#677a70);font-size: 11px}
.route-details-list dd {margin: 0;text-align: right;font-size: 11px;font-weight: 750;overflow-wrap: anywhere}
.route-details-warning {margin: 13px 0;padding: 10px;border-radius: 9px;background: #fff3df;color: #865914;font-size: 10px;line-height: 1.5}
.route-details-note h3 {font-size: 12px;margin: 15px 0 6px}
.route-details-note p {font-size: 11px;line-height: 1.55;color: var(--st-ui-muted,#52695f);overflow-wrap: anywhere}
.route-trip-basis {margin: 12px 0;color:var(--st-ui-muted,#52695f);font-size: 10px;line-height: 1.5}
.route-stop-sequence {margin: 10px 0;padding: 10px 12px;border: 1px solid var(--st-ui-border,#dbe6e0);border-radius: 11px}
.route-stop-sequence summary {color:var(--st-ui-text,#284f41);font-size:11px;font-weight:800;cursor:pointer}
.route-stop-sequence ol {margin: 9px 0 0;padding: 0 0 0 22px;columns:2;column-gap:20px}
.route-stop-sequence li {break-inside:avoid;padding: 2px 0;color:var(--st-ui-muted,#52695f);font-size:10px;line-height:1.35;overflow-wrap:anywhere}
:root[data-theme="dark"] .route-focus-compact .route-compact-state {background:#49381e;color:#ffda94;border-color:#856739}
:root[data-theme="dark"] .route-focus-compact .route-compact-state[data-tone="closed"] {background:#542b35;color:#ffc6cf;border-color:#7f4650}
:root[data-theme="dark"] .route-details-warning {background: #49371c;color: #ffe1a3}
@media (max-width: 820px) {
  .map-shell > #selectedRoutePanel.route-focus-compact {
    left: 12px;
    top: 65px;
    width: min(330px, calc(100vw - 83px));
    padding: 10px 10px 9px;
    border-radius: 14px;
  }
  .route-focus-compact .route-compact-header {gap: 5px;grid-template-columns: auto minmax(0,1fr) 27px 30px}
  .route-focus-compact .route-compact-icon {width: 27px;height: 27px}
  .route-focus-compact .route-compact-icon svg {width: 20px;height: 20px}
  .route-focus-compact .route-focus-close {width: 30px;height: 30px;min-width: 30px;min-height: 30px}
  .route-focus-compact .route-focus-title {font-size: 12px}
  .route-focus-compact .route-compact-metrics {column-gap: 8px}
  .route-focus-compact .route-compact-back {display: inline-flex;min-width: 32px;width: 32px;padding: 0;font-size: 17px}
}
@media (max-width: 350px) {
  .map-shell > #selectedRoutePanel.route-focus-compact {width: calc(100vw - 72px)}
  .route-focus-compact .route-compact-header {grid-template-columns: 32px minmax(0,1fr) 25px 29px}
  .route-focus-compact .route-focus-code {min-width:32px;font-size:9px}
  .route-focus-compact .route-compact-metrics {column-gap:6px}
  .route-focus-compact .route-compact-state {margin-left:0}
}
@media (prefers-reduced-motion: reduce) {
  .route-focus-details-dialog::backdrop {backdrop-filter:none}
}