/* RadarČeska — Autobusy public map v1.0 */

.bus-view-nav .bus-tab-symbol{
  color:#267f8f
}

.bus-view-nav .bus-tab[data-bus-filter="linkove"] .bus-tab-symbol{
  color:#b87835
}

.bus-view-nav .bus-tab-count{
  min-width:28px
}

.bus-overview-row{
  appearance:none;
  width:100%;
  border:0;
  border-top:1px solid rgba(29,70,73,.055);
  background:#fff;
  color:#19383d;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:9px 4px;
  text-align:left;
  cursor:pointer
}

.bus-overview-row:first-child{
  border-top:0
}

.bus-overview-row:hover{
  background:#f7faf9
}

.bus-overview-line{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  min-height:29px;
  padding:0 6px;
  border-radius:9px;
  background:#edf5f4;
  border:1px solid rgba(25,102,95,.10);
  color:#205e59;
  font-size:11px;
  font-weight:900
}

.bus-overview-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:2px
}

.bus-overview-copy b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px
}

.bus-overview-copy small{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  color:#718083
}

.bus-overview-row>em{
  font-style:normal;
  font-size:8.5px;
  font-weight:750;
  color:#738488;
  white-space:nowrap
}

.bus-detail-card .bus-detail-kicker{
  color:#267f8f
}

.bus-detail-card .bus-detail-live{
  display:inline-flex;
  align-items:center;
  min-height:23px;
  padding:0 8px;
  border-radius:999px;
  background:#eef8f5;
  color:#13725f;
  font-size:9px;
  font-weight:850
}

.bus-detail-destination{
  margin:2px 0 10px;
  color:#587074;
  font-size:12px;
  line-height:1.35
}

.bus-mobile-nav .mobile-train-btn{
  min-width:0
}

.bus-mobile-nav .mobile-train-btn small{
  display:block;
  margin-top:1px;
  font-size:7px;
  font-weight:800;
  opacity:.62
}

@media (max-width:700px){
  .bus-overview-row{
    grid-template-columns:41px minmax(0,1fr) auto;
    padding:8px 2px
  }

  .bus-overview-copy b{
    font-size:10.5px
  }

  .bus-overview-row>em{
    font-size:8px
  }
}


/* ==================================================================
   RADARCESKA-BUSES-UI-OWNERSHIP-v1.1.1
   Bus controls belong exclusively to data-mode="buses".
   ================================================================== */

/*
 * Some shared train navigation styles set display:flex/block and can
 * override the browser's default [hidden] rendering. Bus UI therefore
 * owns an explicit hidden contract.
 */
#busViewNav[hidden],
#mobileBusNav[hidden],
#busOverview[hidden],
#busDetailCard[hidden] {
  display: none;
}

/*
 * Hard mode ownership.
 *
 * Even if a stale JS state or shared train CSS tries to expose one of
 * these nodes, no bus-specific UI may leak into Weather, Traffic,
 * Trains or Water.
 */
.app-shell:not([data-mode="buses"]) #busViewNav,
.app-shell:not([data-mode="buses"]) #mobileBusNav,
.app-shell:not([data-mode="buses"]) #busOverview,
.app-shell:not([data-mode="buses"]) #busDetailCard {
  display: none;
}


/* ==================================================================
   RADARCESKA-BUSES-UX-POLISH-v1.3.0
   Premium light bus identity
   ================================================================== */

.app-shell[data-mode="buses"] {
  --bus-ink: #26383b;
  --bus-copy: #4d6265;
  --bus-muted: #7d8c8e;

  --bus-surface: rgba(249, 251, 251, .955);
  --bus-surface-solid: #f9fbfb;
  --bus-surface-soft: #f1f5f4;
  --bus-surface-hover: #edf3f2;

  --bus-border: rgba(47, 72, 75, .095);
  --bus-border-strong: rgba(47, 72, 75, .14);

  --bus-mhd: #277d83;
  --bus-mhd-soft: #e7f2f2;

  --bus-link: #b97835;
  --bus-link-soft: #f8efe5;

  --bus-live: #16826d;

  --bus-shadow:
    0 18px 45px rgba(31, 49, 52, .12),
    0 2px 8px rgba(31, 49, 52, .055);
}


/* ------------------------------------------------------------------
   TOP AUTOBUSY CHIP
   ------------------------------------------------------------------ */

.app-shell[data-mode="buses"] .layer-chip[data-layer="buses"] {
  background: #eef5f4;
  border-color: rgba(39, 125, 131, .16);
  color: #245f64;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .58),
    0 3px 11px rgba(35, 80, 82, .07);
}

.app-shell[data-mode="buses"] .layer-chip[data-layer="buses"] .chip-icon {
  color: var(--bus-mhd);
}


/* ------------------------------------------------------------------
   DESKTOP FILTER BAR
   ------------------------------------------------------------------ */

.app-shell[data-mode="buses"] #busViewNav {
  padding: 5px;
  gap: 4px;

  border: 1px solid var(--bus-border);
  border-radius: 17px;

  background: rgba(246, 249, 249, .93);

  box-shadow:
    0 10px 30px rgba(31, 50, 53, .095),
    inset 0 0 0 1px rgba(255, 255, 255, .72);

  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.app-shell[data-mode="buses"] #busViewNav .bus-tab {
  position: relative;

  min-height: 47px;
  padding: 7px 10px;

  border: 0;
  border-radius: 13px;

  background: transparent;
  box-shadow: none;

  transition:
    background .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.app-shell[data-mode="buses"] #busViewNav .bus-tab:hover {
  background: rgba(255, 255, 255, .66);
}

.app-shell[data-mode="buses"] #busViewNav .bus-tab:active {
  transform: scale(.985);
}

.app-shell[data-mode="buses"] #busViewNav .bus-tab.is-active {
  background: rgba(255, 255, 255, .98);

  box-shadow:
    0 3px 10px rgba(34, 53, 56, .085),
    inset 0 0 0 1px rgba(53, 76, 79, .065);
}

.app-shell[data-mode="buses"] #busViewNav .train-tab-copy b {
  color: var(--bus-ink);
  font-size: 11.5px;
  font-weight: 830;
  letter-spacing: -.015em;
}

.app-shell[data-mode="buses"] #busViewNav .train-tab-copy small {
  color: var(--bus-muted);
  font-size: 8.2px;
  font-weight: 650;
}

.app-shell[data-mode="buses"] #busViewNav .bus-tab-symbol {
  display: grid;
  place-items: center;

  width: 28px;
  height: 28px;

  border-radius: 9px;

  background: var(--bus-mhd-soft);

  font-size: 13px;
}

.app-shell[data-mode="buses"] #busViewNav [data-bus-filter="linkove"] .bus-tab-symbol {
  color: var(--bus-link);
  background: var(--bus-link-soft);
}

.app-shell[data-mode="buses"] #busViewNav .bus-tab-count {
  min-width: 31px;
  padding: 4px 7px;

  border-radius: 999px;

  background: #eef2f2;
  color: #627375;

  font-size: 8.5px;
  font-style: normal;
  font-weight: 850;
}


/* ------------------------------------------------------------------
   OVERVIEW + DETAIL — OWN BUS PRODUCT LOOK
   ------------------------------------------------------------------ */

.app-shell[data-mode="buses"] #busOverview,
.app-shell[data-mode="buses"] #busDetailCard {
  width: min(374px, calc(100vw - 28px));

  border: 1px solid var(--bus-border);
  border-radius: 23px;

  background: var(--bus-surface);

  color: var(--bus-ink);

  box-shadow: var(--bus-shadow);

  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
}


/* tiny top accent instead of a heavy colored header */

.app-shell[data-mode="buses"] #busOverview::before,
.app-shell[data-mode="buses"] #busDetailCard::before {
  content: "";

  position: absolute;
  top: 0;
  left: 21px;
  right: 21px;

  height: 2px;

  border-radius: 0 0 5px 5px;

  background:
    linear-gradient(
      90deg,
      rgba(39, 125, 131, .72),
      rgba(185, 120, 53, .55)
    );
}


/* ------------------------------------------------------------------
   OVERVIEW HEADER
   ------------------------------------------------------------------ */

.app-shell[data-mode="buses"] #busOverview .train-overview-head {
  align-items: flex-start;
  padding-bottom: 10px;
}

.app-shell[data-mode="buses"] #busOverview .overview-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin-bottom: 3px;

  color: var(--bus-live);

  font-size: 8px;
  font-weight: 900;
  letter-spacing: .075em;
}

.app-shell[data-mode="buses"] #busOverview .overview-kicker::before {
  content: "";

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--bus-live);

  box-shadow: 0 0 0 4px rgba(22, 130, 109, .09);
}

.app-shell[data-mode="buses"] #busOverview .overview-title-block > strong {
  color: var(--bus-ink);

  font-size: 21px;
  font-weight: 870;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.app-shell[data-mode="buses"] #busOverviewSubline {
  margin-top: 4px;

  color: var(--bus-muted);

  font-size: 9.5px;
  font-weight: 650;
}

.app-shell[data-mode="buses"] #busOverview .overview-live-state {
  min-height: 25px;
  padding: 0 9px;

  border: 1px solid rgba(22, 130, 109, .10);
  border-radius: 999px;

  background: #eef8f5;
  color: #17725f;

  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
}

.app-shell[data-mode="buses"] #busOverview .overview-live-state i {
  width: 6px;
  height: 6px;

  background: #28a083;

  box-shadow: 0 0 0 3px rgba(40, 160, 131, .10);
}

.app-shell[data-mode="buses"] #busOverviewRefresh {
  width: 29px;
  height: 29px;

  border: 1px solid var(--bus-border);
  border-radius: 10px;

  background: rgba(255, 255, 255, .8);
  color: #607477;

  transition:
    background .15s ease,
    transform .15s ease;
}

.app-shell[data-mode="buses"] #busOverviewRefresh:hover {
  background: #fff;
}

.app-shell[data-mode="buses"] #busOverviewRefresh:active {
  transform: rotate(20deg) scale(.94);
}

.app-shell[data-mode="buses"] #busOverviewText {
  margin: 0 0 11px;

  color: var(--bus-copy);

  font-size: 10.5px;
  line-height: 1.45;
}


/* ------------------------------------------------------------------
   STAT CARDS
   ------------------------------------------------------------------ */

.app-shell[data-mode="buses"] #busOverview .train-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 6px;

  margin: 0 0 11px;
}

.app-shell[data-mode="buses"] #busOverview .train-stat {
  min-width: 0;
  padding: 8px 7px 7px;

  border: 1px solid rgba(48, 73, 75, .065);
  border-radius: 12px;

  background: rgba(241, 245, 244, .72);

  text-align: left;
}

.app-shell[data-mode="buses"] #busOverview .train-stat span {
  display: block;

  margin-bottom: 3px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #829092;

  font-size: 7.5px;
  font-weight: 770;
  letter-spacing: .025em;
}

.app-shell[data-mode="buses"] #busOverview .train-stat strong {
  color: #314649;

  font-size: 15px;
  font-weight: 880;
  letter-spacing: -.035em;
}


/* distinguish MHD / linkové very subtly */

.app-shell[data-mode="buses"] #busCountMhd {
  color: var(--bus-mhd);
}

.app-shell[data-mode="buses"] #busCountLink {
  color: var(--bus-link);
}


/* ------------------------------------------------------------------
   LIVE BUS LIST
   ------------------------------------------------------------------ */

.app-shell[data-mode="buses"] #busOverviewList {
  overflow: hidden;

  border: 1px solid rgba(48, 73, 75, .065);
  border-radius: 15px;

  background: rgba(255, 255, 255, .72);
}

.app-shell[data-mode="buses"] .bus-overview-row {
  min-height: 53px;

  grid-template-columns: 43px minmax(0, 1fr) auto;

  gap: 9px;

  padding: 7px 9px;

  border-top-color: rgba(48, 73, 75, .055);

  background: transparent;

  transition:
    background .14s ease,
    transform .14s ease;
}

.app-shell[data-mode="buses"] .bus-overview-row:hover {
  background: var(--bus-surface-hover);
}

.app-shell[data-mode="buses"] .bus-overview-row:active {
  transform: scale(.992);
}

.app-shell[data-mode="buses"] .bus-overview-line {
  min-width: 38px;
  min-height: 29px;

  padding: 0 6px;

  border: 1px solid rgba(39, 125, 131, .10);
  border-radius: 9px;

  background: var(--bus-mhd-soft);
  color: #28676b;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .4);

  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: -.015em;
}

.app-shell[data-mode="buses"] .bus-overview-copy b {
  color: #304548;

  font-size: 10.7px;
  font-weight: 820;
}

.app-shell[data-mode="buses"] .bus-overview-copy small {
  margin-top: 1px;

  color: #839092;

  font-size: 8px;
  font-weight: 650;
}

.app-shell[data-mode="buses"] .bus-overview-row > em {
  padding-left: 4px;

  color: #829092;

  font-size: 7.8px;
  font-weight: 760;
}


/* ------------------------------------------------------------------
   OVERVIEW FOOTER
   ------------------------------------------------------------------ */

.app-shell[data-mode="buses"] #busOverview .train-overview-foot {
  margin-top: 8px;
  padding: 0 2px;

  color: #899698;

  font-size: 7.7px;
  font-weight: 670;
}


/* ------------------------------------------------------------------
   BUS DETAIL
   ------------------------------------------------------------------ */

.app-shell[data-mode="buses"] #busDetailCard {
  overflow: hidden;
}

.app-shell[data-mode="buses"] #busDetailCard .train-detail-topline {
  margin-bottom: 7px;
}

.app-shell[data-mode="buses"] #busDetailCard .bus-detail-kicker {
  color: var(--bus-mhd);

  font-size: 8px;
  font-weight: 900;
  letter-spacing: .055em;
}

.app-shell[data-mode="buses"] #busDetailCard .train-detail-glyph {
  display: inline-grid;
  place-items: center;

  width: 25px;
  height: 25px;

  margin-right: 6px;

  border-radius: 8px;

  background: var(--bus-mhd-soft);
  color: var(--bus-mhd);

  font-size: 12px;
}

.app-shell[data-mode="buses"] #busDetailCard .bus-detail-live {
  min-height: 24px;
  padding: 0 8px;

  border: 1px solid rgba(22, 130, 109, .10);
  border-radius: 999px;

  background: #eef8f5;
  color: #16715e;

  font-size: 8px;
  font-weight: 870;
}

.app-shell[data-mode="buses"] #busDetailTitle {
  margin: 0;

  color: var(--bus-ink);

  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.05;
}

.app-shell[data-mode="buses"] #busDetailDestination {
  margin: 5px 0 13px;

  color: #66797b;

  font-size: 11px;
  font-weight: 640;
  line-height: 1.4;
}

.app-shell[data-mode="buses"] #busDetailCard .train-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 6px;
}

.app-shell[data-mode="buses"] #busDetailCard .train-detail-meta {
  min-width: 0;
  padding: 9px 10px;

  border: 1px solid rgba(48, 73, 75, .065);
  border-radius: 12px;

  background: rgba(241, 245, 244, .7);
}

.app-shell[data-mode="buses"] #busDetailCard .train-detail-meta span {
  display: block;

  margin-bottom: 3px;

  color: #899597;

  font-size: 7.5px;
  font-weight: 720;
}

.app-shell[data-mode="buses"] #busDetailCard .train-detail-meta strong {
  display: block;

  overflow: hidden;
  text-overflow: ellipsis;

  color: #34494c;

  font-size: 10.3px;
  font-weight: 800;
  line-height: 1.25;
}

.app-shell[data-mode="buses"] #busDetailClose {
  top: 10px;
  right: 10px;

  width: 30px;
  height: 30px;

  border: 1px solid var(--bus-border);
  border-radius: 10px;

  background: rgba(247, 250, 250, .9);
  color: #6c7d7f;

  box-shadow: 0 3px 10px rgba(36, 55, 58, .06);
}

.app-shell[data-mode="buses"] #busDetailCard .train-detail-foot {
  margin-top: 10px;
  padding-top: 9px;

  border-top: 1px solid rgba(48, 73, 75, .06);

  color: #899597;

  font-size: 7.5px;
}


/* ------------------------------------------------------------------
   MOBILE BUS FILTERS
   ------------------------------------------------------------------ */

.app-shell[data-mode="buses"] #mobileBusNav {
  gap: 5px;

  padding: 5px;

  border: 1px solid var(--bus-border);
  border-radius: 16px;

  background: rgba(247, 250, 250, .95);

  box-shadow:
    0 9px 28px rgba(31, 49, 52, .11),
    inset 0 0 0 1px rgba(255, 255, 255, .65);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.app-shell[data-mode="buses"] #mobileBusNav .mobile-train-btn {
  min-height: 43px;

  padding: 6px 7px;

  border: 0;
  border-radius: 12px;

  background: transparent;

  color: #637578;

  box-shadow: none;
}

.app-shell[data-mode="buses"] #mobileBusNav .mobile-train-btn.is-active {
  background: #fff;
  color: #30484b;

  box-shadow:
    0 3px 11px rgba(34, 53, 56, .085),
    inset 0 0 0 1px rgba(45, 71, 73, .055);
}

.app-shell[data-mode="buses"] #mobileBusNav .mobile-train-btn b {
  font-size: 9.5px;
  font-weight: 840;
}

.app-shell[data-mode="buses"] #mobileBusNav .mobile-train-btn small {
  color: #8a9698;
  font-size: 7px;
  font-weight: 760;
}


/* ------------------------------------------------------------------
   MOBILE SHEETS
   ------------------------------------------------------------------ */

@media (max-width: 700px) {

  .app-shell[data-mode="buses"] #busOverview,
  .app-shell[data-mode="buses"] #busDetailCard {
    width: calc(100vw - 16px);

    border-radius: 21px 21px 17px 17px;

    background: rgba(249, 251, 251, .975);

    box-shadow:
      0 -8px 35px rgba(29, 47, 49, .12),
      0 8px 25px rgba(29, 47, 49, .08);
  }

  .app-shell[data-mode="buses"] #busOverview::before,
  .app-shell[data-mode="buses"] #busDetailCard::before {
    left: 46px;
    right: 46px;
  }

  .app-shell[data-mode="buses"] #busOverview .train-overview-grid {
    gap: 5px;
  }

  .app-shell[data-mode="buses"] #busOverview .train-stat {
    padding: 7px 6px 6px;
  }

  .app-shell[data-mode="buses"] #busOverview .train-stat strong {
    font-size: 14px;
  }

  .app-shell[data-mode="buses"] .bus-overview-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;

    min-height: 50px;

    padding: 7px 8px;
  }

  .app-shell[data-mode="buses"] #busDetailTitle {
    font-size: 22px;
  }

  .app-shell[data-mode="buses"] #busDetailCard .train-detail-meta-grid {
    gap: 5px;
  }

  .app-shell[data-mode="buses"] #busDetailCard .train-detail-meta {
    padding: 8px 9px;
  }
}


/* ------------------------------------------------------------------
   VERY SMALL PHONES
   ------------------------------------------------------------------ */

@media (max-width: 390px) {

  .app-shell[data-mode="buses"] #busOverview .train-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell[data-mode="buses"] #busOverview .train-stat {
    min-height: 48px;
  }

  .app-shell[data-mode="buses"] #busDetailCard .train-detail-meta-grid {
    grid-template-columns: 1fr 1fr;
  }

  .app-shell[data-mode="buses"] .bus-overview-row > em {
    display: none;
  }

  .app-shell[data-mode="buses"] .bus-overview-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }
}


/* ------------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .app-shell[data-mode="buses"] #busViewNav .bus-tab,
  .app-shell[data-mode="buses"] .bus-overview-row,
  .app-shell[data-mode="buses"] #busOverviewRefresh {
    transition: none;
  }
}


/* ==================================================================
   RADARCESKA-BUSES-JOURNEY-v1.4.1
   ================================================================== */

.app-shell[data-mode="buses"] .bus-journey[hidden],
.app-shell[data-mode="buses"] .bus-journey-timeline[hidden],
.app-shell[data-mode="buses"] .bus-journey-toggle[hidden],
.app-shell[data-mode="buses"] .bus-journey-delay[hidden] {
  display: none;
}

.app-shell[data-mode="buses"] .bus-journey {
  margin: 12px 0 10px;
  padding: 12px;

  border: 1px solid rgba(47,72,75,.075);
  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      rgba(248,251,250,.97),
      rgba(242,247,246,.94)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75);
}

.app-shell[data-mode="buses"] .bus-journey-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;

  margin-bottom: 10px;
}

.app-shell[data-mode="buses"] .bus-journey-eyebrow {
  display: block;

  margin-bottom: 2px;

  color: #899596;

  font-size: 7px;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.app-shell[data-mode="buses"] #busJourneyStatus {
  display: block;

  color: #3d5154;

  font-size: 10px;
  font-weight: 820;
}

.app-shell[data-mode="buses"] .bus-journey-delay {
  flex: 0 0 auto;

  padding: 5px 9px;

  border-radius: 999px;

  background: #edf2f1;
  color: #647577;

  font-size: 8px;
  font-weight: 900;
}

.app-shell[data-mode="buses"] .bus-journey-delay[data-tone="ok"] {
  background: #e8f6f1;
  color: #18705f;
}

.app-shell[data-mode="buses"] .bus-journey-delay[data-tone="late"] {
  background: #fff0e4;
  color: #a85f21;
}

.app-shell[data-mode="buses"] .bus-journey-delay[data-tone="early"] {
  background: #edf3fa;
  color: #496b91;
}

.app-shell[data-mode="buses"] .bus-journey-summary {
  display: grid;
  gap: 5px;

  margin-bottom: 9px;
}

.app-shell[data-mode="buses"] .bus-journey-summary-item {
  position: relative;

  display: grid;
  grid-template-columns: 84px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;

  min-height: 42px;
  padding: 7px 9px;

  border: 1px solid rgba(49,72,75,.06);
  border-radius: 11px;

  background: rgba(255,255,255,.66);
}

.app-shell[data-mode="buses"] .bus-journey-summary-item > span {
  color: #879496;

  font-size: 7.4px;
  font-weight: 780;
}

.app-shell[data-mode="buses"] .bus-journey-summary-item > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #35494c;

  font-size: 10.2px;
  font-weight: 840;
}

.app-shell[data-mode="buses"] .bus-journey-summary-item > small {
  color: #647679;

  font-size: 9px;
  font-weight: 850;
}

.app-shell[data-mode="buses"] .bus-journey-summary-item.is-next {
  border-color: rgba(39,125,131,.14);

  background:
    linear-gradient(
      90deg,
      rgba(229,242,241,.95),
      rgba(250,252,252,.8)
    );
}

.app-shell[data-mode="buses"] .bus-journey-summary-item.is-next::before {
  content: "";

  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;

  width: 2px;

  border-radius: 0 3px 3px 0;

  background: #277d83;
}

.app-shell[data-mode="buses"] .bus-journey-nearby,
.app-shell[data-mode="buses"] .bus-journey-timeline {
  overflow: hidden;

  border: 1px solid rgba(49,72,75,.06);
  border-radius: 13px;

  background: rgba(255,255,255,.65);
}

.app-shell[data-mode="buses"] .bus-journey-timeline {
  max-height: min(46vh,420px);

  margin-top: 6px;

  overflow-y: auto;
  overscroll-behavior: contain;
}

.app-shell[data-mode="buses"] .bus-journey-stop {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr) auto;
  align-items: stretch;
  gap: 7px;

  min-height: 38px;
  padding: 0 9px 0 5px;

  border-top: 1px solid rgba(49,72,75,.045);
}

.app-shell[data-mode="buses"] .bus-journey-stop:first-child {
  border-top: 0;
}

.app-shell[data-mode="buses"] .bus-journey-stop-rail {
  position: relative;

  display: flex;
  justify-content: center;
}

.app-shell[data-mode="buses"] .bus-journey-stop-rail::before {
  content: "";

  position: absolute;
  inset-block: 0;

  width: 1px;

  background: #ccd8d7;
}

.app-shell[data-mode="buses"] .bus-journey-stop-rail i {
  position: relative;
  z-index: 1;

  width: 7px;
  height: 7px;

  margin-top: 15px;

  border: 2px solid #a9b8b8;
  border-radius: 50%;

  background: #f8faf9;
}

.app-shell[data-mode="buses"] .bus-journey-stop-copy {
  align-self: center;
  min-width: 0;

  padding: 7px 0;
}

.app-shell[data-mode="buses"] .bus-journey-stop-copy b {
  display: block;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #465a5d;

  font-size: 9.3px;
  font-weight: 760;
}

.app-shell[data-mode="buses"] .bus-journey-stop-copy small {
  display: block;

  color: #98a3a4;

  font-size: 7px;
}

.app-shell[data-mode="buses"] .bus-journey-stop time {
  align-self: center;

  color: #687a7c;

  font-size: 8.5px;
  font-weight: 820;
}

.app-shell[data-mode="buses"] .bus-journey-stop.is-past {
  opacity: .5;
}

.app-shell[data-mode="buses"] .bus-journey-stop.is-current,
.app-shell[data-mode="buses"] .bus-journey-stop.is-next {
  background:
    linear-gradient(
      90deg,
      rgba(229,242,241,.78),
      rgba(255,255,255,.58)
    );
}

.app-shell[data-mode="buses"] .bus-journey-stop.is-current .bus-journey-stop-rail i {
  width: 9px;
  height: 9px;

  margin-top: 14px;

  border-color: #277d83;
  background: #277d83;

  box-shadow:
    0 0 0 4px rgba(39,125,131,.10);
}

.app-shell[data-mode="buses"] .bus-journey-stop.is-next .bus-journey-stop-rail i {
  width: 9px;
  height: 9px;

  margin-top: 14px;

  border-color: #277d83;
  background: #fff;

  box-shadow:
    0 0 0 3px rgba(39,125,131,.10);
}

.app-shell[data-mode="buses"] .bus-journey-stop.is-next .bus-journey-stop-copy b {
  color: #28676b;
  font-weight: 880;
}

.app-shell[data-mode="buses"] .bus-journey-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  margin-top: 6px;
  padding: 9px 11px;

  border: 1px solid rgba(39,125,131,.10);
  border-radius: 11px;

  background: rgba(234,244,243,.76);
  color: #32686c;

  font-size: 8.5px;
  font-weight: 850;

  cursor: pointer;
}

.app-shell[data-mode="buses"] .bus-journey-toggle b {
  display: grid;
  place-items: center;

  min-width: 24px;
  height: 20px;
  padding-inline: 5px;

  border-radius: 999px;

  background: rgba(39,125,131,.09);

  font-size: 7.5px;
}

.app-shell[data-mode="buses"] .bus-journey-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;

  margin-top: 8px;
}

.app-shell[data-mode="buses"] .bus-journey-amenities span {
  padding: 5px 7px;

  border: 1px solid rgba(49,72,75,.06);
  border-radius: 999px;

  background: rgba(255,255,255,.68);
  color: #708083;

  font-size: 7.5px;
  font-weight: 730;
}

.app-shell[data-mode="buses"] .bus-journey-amenities span.is-yes {
  border-color: rgba(39,125,131,.10);

  background: #eaf4f3;
  color: #376f73;
}

@media (max-width:700px) {

  .app-shell[data-mode="buses"] .bus-journey {
    padding: 10px;
  }

  .app-shell[data-mode="buses"] .bus-journey-summary-item {
    grid-template-columns: 76px minmax(0,1fr) auto;
  }

  .app-shell[data-mode="buses"] .bus-journey-timeline {
    max-height: 40vh;
  }
}