.mode-panel { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: 1.25rem; }
.condition-section { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: 1rem; }
.condition-heading { align-items: flex-start; display: flex; gap: .75rem; }
.step-number { align-items: center; background: var(--ojt-accent, #0d6efd); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 1.75rem; font-weight: 700; height: 1.75rem; justify-content: center; }
.route-fields { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.route-split-fields { grid-template-columns: 1fr; }
.route-summary { background: var(--bs-primary-bg-subtle); border-radius: .5rem; color: var(--bs-primary-text-emphasis); padding: .75rem 1rem; }
.delay-grid { border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; }
.delay-row { align-items: center; display: grid; gap: .75rem; grid-template-columns: minmax(9rem, 1fr) minmax(6rem, .6fr) minmax(9rem, .9fr); padding: .75rem; }
.delay-row + .delay-row { border-top: 1px solid var(--bs-border-color); }
.delay-head { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: .8rem; font-weight: 700; padding-block: .5rem; text-transform: uppercase; }
.delay-label { font-weight: 600; }
.trip-time-comparison { display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #cfe2ff; border: 1px solid #cfe2ff; border-radius: .75rem; overflow: hidden; }
.trip-time-comparison > div { background: #fff; padding: 1rem; }
.trip-time-comparison strong { display: block; font-size: 1.5rem; }
.result-explanation { background: #fff; border-left: .3rem solid var(--ojt-accent, #0d6efd); padding: .85rem 1rem; }
.result-explanation strong, .result-explanation span { display: block; }
.result-explanation span { color: var(--bs-secondary-color); margin-top: .25rem; }
.breakdown-list dt, .breakdown-list dd { padding-block: .45rem; margin-bottom: 0; border-bottom: 1px solid var(--bs-border-color); }
.breakdown-list dt:last-of-type, .breakdown-list dd:last-of-type { border-bottom: 0; }
.comparison-word { color: var(--ojt-accent, #0d6efd); }
@media (max-width: 575.98px) {
  .mode-panel { padding: .75rem; }
  .route-fields, .trip-time-comparison { grid-template-columns: 1fr; }
  .delay-head { display: none; }
  .delay-row { align-items: end; grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 1.2fr); }
  .delay-label { grid-column: 1 / -1; }
  .delay-row > div:first-of-type::before { color: var(--bs-secondary-color); content: "How many?"; display: block; font-size: .8rem; margin-bottom: .25rem; }
  .delay-row > div:last-of-type::before { color: var(--bs-secondary-color); content: "Average each"; display: block; font-size: .8rem; margin-bottom: .25rem; }
  .breakdown-list dt { border-bottom: 0; padding-bottom: 0; }
  .breakdown-list dd { padding-top: 0; }
}