/* BullionOS 3.0 Route Explorer repaint
   Contract: vertical architecture map, no side navigation, touch-safe drill-downs. */
.route-explorer-note,
.route-explorer-summary,
.route-explorer-filters,
.route-explorer-grid {
  width: min(100%, 1180px);
  margin-inline: auto;
  box-sizing: border-box;
}

.route-explorer-note {
  max-width: none;
  margin-block: 0 var(--space-3);
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.route-explorer-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 0 var(--space-4);
  padding-inline: 2px;
}

.route-explorer-summary-item {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised, #171717);
}

.route-explorer-summary-item strong {
  color: var(--accent-gold, #f1cc63);
  font-size: 1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.route-explorer-summary-item span {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.route-explorer-filters {
  display: grid;
  gap: 16px;
  margin-block: 0 var(--space-4);
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.route-explorer-filter-heading {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.route-explorer-filter-heading > .ui-icon { width: 22px; height: 22px; margin-top: 3px; color: var(--gold); }
.route-explorer-filter-heading > div { display: grid; gap: 4px; }
.route-explorer-filter-heading h2 { margin: 0; color: var(--text); font-size: 1.12rem; }
.route-explorer-filter-heading p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.45; }
.route-explorer-filter-controls { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(170px, 0.65fr) minmax(210px, 0.8fr) auto; align-items: end; gap: 12px; }
.route-explorer-filter-controls .platform-field { margin: 0; }
.route-explorer-filter-controls > button { min-height: 48px; }
.route-explorer-results { margin: 0; color: var(--muted); font-size: 1rem; }

.route-explorer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  min-width: 0;
}

.route-explorer-panel {
  min-width: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.route-explorer-panel .platform-panel-heading {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  justify-content: initial;
  min-height: 78px;
  gap: 12px;
  padding: 16px 20px;
  background: var(--surface-control);
}

.route-explorer-panel .platform-panel-heading > .panel-heading-icon {
  width: 24px;
  height: 24px;
  color: var(--accent-gold, #f1cc63);
}

.route-explorer-panel .platform-heading-copy {
  gap: 4px;
}

.route-explorer-panel .platform-heading-copy h2 {
  font-size: 1.05rem;
  line-height: 1.2;
}

.route-explorer-panel .platform-heading-copy p {
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.45;
}

.route-explorer-group-count {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid var(--gold-solid);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--accent-gold, #f1cc63);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
}

.route-explorer-list {
  display: grid;
  min-width: 0;
}

.route-explorer-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(180px, 0.42fr) 24px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  gap: 16px;
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px solid var(--border-divider);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  text-align: left;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.route-explorer-item:last-child { border-bottom: 0; }
.route-explorer-item:hover { background: var(--surface-hover); }
.route-explorer-item:focus-visible {
  z-index: 1;
  outline: 3px solid rgba(241, 204, 99, 0.55);
  outline-offset: -3px;
}
.route-explorer-item.is-current {
  box-shadow: inset 3px 0 0 var(--gold);
  background: var(--surface-hover);
}

.route-explorer-item-icon {
  width: 22px;
  height: 22px;
  color: var(--accent-gold, #f1cc63);
}

.route-explorer-item-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.route-explorer-item-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-explorer-item-copy small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-explorer-item code {
  justify-self: end;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-control);
  color: var(--silver, #9aa4b1);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.2;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-explorer-open-icon {
  width: 19px;
  height: 19px;
  color: var(--accent-gold, #f1cc63);
}

@media (max-width: 820px) {
  .route-explorer-grid { grid-template-columns: minmax(0, 1fr); }
  .route-explorer-note,
  .route-explorer-summary,
  .route-explorer-filters,
  .route-explorer-grid {
    width: 100%;
  }

  .route-explorer-panel .platform-panel-heading {
    padding-inline: 16px;
  }

  .route-explorer-filter-controls { grid-template-columns: minmax(0, 1fr); }
  .route-explorer-filter-controls > button { width: 100%; }

  .route-explorer-item {
    grid-template-columns: 24px minmax(0, 1fr) 22px;
    min-height: 76px;
    gap: 12px;
    padding: 14px 16px;
  }

  .route-explorer-item code {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    max-width: 100%;
    text-align: left;
  }

  .route-explorer-open-icon {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

}

@media (max-width: 480px) {
  .route-explorer-panel .platform-panel-heading {
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
  }

  .route-explorer-group-count {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-top: 4px;
  }

  .route-explorer-panel .platform-heading-copy p {
    max-width: none;
  }

  .route-explorer-summary-item {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    text-align: center;
  }

  .route-explorer-summary-item span { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }

}

/*
  Route Explorer contract correction (PR #137 follow-up)
  Keep the map legible for senior operators while preserving 48px controls.
  Route paths stay on the same row at phone widths so cards do not become
  unnecessarily tall or push the fixed quick-task footer into content.
*/
.route-explorer-note {
  padding: 12px 16px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.route-explorer-summary-item strong { font-size: 0.9375rem; }
.route-explorer-summary-item span { font-size: 0.75rem; }

.route-explorer-filter-heading h2 { font-size: 1rem; }
.route-explorer-filter-heading p,
.route-explorer-results { font-size: 0.875rem; }

.route-explorer-panel .platform-heading-copy h2 { font-size: 1rem; }

.route-explorer-panel .platform-heading-copy p { font-size: 0.875rem; }

.route-explorer-group-count { font-size: 0.8125rem; }

.route-explorer-item {
  grid-template-columns: 28px minmax(0, 1fr) minmax(150px, 0.38fr) 24px;
  min-height: 68px;
  gap: 12px;
  padding: 12px 16px;
}

.route-explorer-item-copy strong {
  font-size: 0.9375rem;
  line-height: 1.3;
  overflow-wrap: normal;
  word-break: normal;
}

.route-explorer-item-copy small {
  font-size: 0.8125rem;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}

.route-explorer-item code {
  padding: 4px 7px;
  font-size: 0.8125rem;
}

@media (max-width: 820px) {
  .route-explorer-note { padding: 12px 16px; }
  .route-explorer-filters { padding: 16px; }

  .route-explorer-item {
    grid-template-columns: 24px minmax(0, 1fr) minmax(0, 34%) 22px;
    min-height: 72px;
    gap: 8px;
    padding: 12px;
  }

  .route-explorer-item-copy { gap: 3px; }

  .route-explorer-item code {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 100%;
    max-width: 100%;
    text-align: right;
  }

  .route-explorer-open-icon {
    grid-column: 4;
    grid-row: 1;
  }
}

@media (max-width: 480px) {
  #route-explorer-page .platform-page-heading > button { display: none; }
  #route-explorer-page .platform-page-heading .eyebrow { display: none; }

  .route-explorer-note,
  .route-explorer-summary,
  .route-explorer-filter-heading { display: none; }
  .route-explorer-panel .platform-heading-copy p { display: none; }

  .route-explorer-filters { padding: 12px; }

  .route-explorer-filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .route-explorer-filter-controls > .platform-field:first-child,
  .route-explorer-filter-controls > button { grid-column: 1 / -1; }
  .route-explorer-filter-controls > button { min-height: 44px; }
  .route-explorer-results {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .route-explorer-item {
    grid-template-columns: 22px minmax(0, 1fr) minmax(0, 32%) 20px;
    min-height: 72px;
    padding: 12px 10px;
  }

  .route-explorer-item-copy strong { font-size: 0.875rem; }
  .route-explorer-item-copy small { font-size: 0.8125rem; }
  .route-explorer-item code { font-size: 0.75rem; }
}

/* The light canvas needs a darker count accent; the default gold is reserved
   for dark surfaces and falls below readable contrast on ivory. */
:root[data-theme="light"] .route-explorer-group-count { color: var(--gold-readable); }