@font-face { font-family: Archivo; src: url('assets/fonts/Archivo.ttf') format('truetype'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: Bricolage; src: url('assets/fonts/BricolageGrotesque.ttf') format('truetype'); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: Fraunces; src: url('assets/fonts/Fraunces.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
body { font-family: Archivo, sans-serif; background: #e6e4df; }
.review-head h1 { font-family: Bricolage, sans-serif; font-weight: 750; font-size: 36px; }
.review-head a { color: #273c85; text-underline-offset: 3px; }
.options { grid-template-columns: repeat(3, var(--screen-w)); gap: 32px 26px; }
.screen { font-family: Archivo, sans-serif; font-optical-sizing: auto; }
.screen .brand { font-size: 14px; font-weight: 500; }
.screen .brand svg { display: none; }
.screen .brand b { font-weight: 800; }
.screen .estimate { min-height: 44px; }
.screen .icon-button { border: none; background: transparent; }
.screen .route-toggle { border: none; background: transparent; padding: 0; gap: 8px; margin: 16px 0 24px; }
.screen .route-toggle button { border: 1px solid var(--rule); border-radius: 99px; min-height: 44px; }
.screen .route-toggle button[aria-pressed="true"] { border-color: transparent; }
.screen .stop-choice select { font-size: 24px; font-weight: 650; min-height: 44px; }
.screen .stop-choice option { background: var(--ground); color: var(--ink); }
.screen .stop-choice option:disabled { color: var(--ink-2); }
.screen .arrival-group { margin: 20px 0 12px; align-items: flex-end; }
.screen .arrival-display { margin: 2px 0 0; gap: 8px; }
.screen .arrival-label { font-size: 12px; }
.screen .eta { font-size: 96px; font-weight: 800; line-height: .96; letter-spacing: -.03em; }
.screen .arrival-clock { padding-top: 0; padding-bottom: 5px; }
.screen .arrival-time { font-size: 20px; font-weight: 600; }
.screen .bus-status-panel { font-size: 14px; margin: 0 0 24px; background: transparent; color: var(--ink-2); border: none; }
.screen .bus-status { font-size: 14px; font-weight: 500; }
.screen .bus-detail { font-size: 14px; }
.screen .campus-map { height: 350px; flex: none; padding: 0; }
.screen .campus-map svg { height: 100%; }
.screen .map-labels text { font-size: 14px; font-weight: 500; }
.screen .bottom-nav { border: none; min-height: 62px; }
.screen .bottom-nav .active { color: var(--route-ink); }
.screen .bottom-nav span { font-size: 12px; }
.cobalt[data-theme="light"], .cobalt[data-theme="light"][data-route="red"] {
  --ground: #244dcf; --ink: #fffaf0; --ink-2: #dce6ff; --rule: #a8baf1;
  --raised: #244dcf; --route-ink: #e6ef78; --route-solid: #e6ef78; --route-tint: #2c50bb; --on-route: #172e68;
  --map-ground: #1c3dab; --map-road: #4262b2; --map-park: #385bb9; --map-building: #6c86ce; --map-ink: #f3f6ff; --map-inactive: #95a9df;
}
.cobalt[data-theme="dark"], .cobalt[data-theme="dark"][data-route="red"] {
  --ground: #101d48; --ink: #f3f6ff; --ink-2: #b6c6ee; --rule: #7488b7;
  --raised: #101d48; --route-ink: #e6ef78; --route-solid: #e6ef78; --route-tint: #17275a; --on-route: #172e68;
  --map-ground: #152652; --map-road: #344a7f; --map-park: #223a69; --map-building: #5872a0; --map-ink: #e0e8fb; --map-inactive: #7b8bb3;
}
.cobalt .eta { font-family: Archivo, sans-serif; font-stretch: 70%; font-variation-settings: 'wdth' 70; font-size: 112px; color: var(--ink); }
.cobalt .stop-choice select { font-stretch: 90%; }
.cobalt .campus-map { margin: 0 -24px; border-radius: 0; width: calc(100% + 48px); height: 345px; padding: 0 22px; background: var(--map-ground); }
.cobalt .roads { stroke-width: 11px; }
.cobalt .route-line.selected-route { stroke-width: 4.5px; }
.cobalt .bottom-nav .active { border-bottom: 2px solid var(--route-ink); padding-bottom: 10px; }
.coral[data-theme="light"], .coral[data-theme="light"][data-route="red"] {
  --ground: #fff7e8; --ink: #42271e; --ink-2: #6e5043; --rule: #b98b7b;
  --raised: #fff7e8; --route-ink: #be3527; --route-solid: #be3527; --route-tint: #f6ded0; --on-route: #fff7e8;
  --map-ground: #fff7e8; --map-road: #efdeca; --map-park: #eee3ce; --map-building: #ccbca4; --map-ink: #593c2d; --map-inactive: #a59183;
}
.coral[data-theme="dark"], .coral[data-theme="dark"][data-route="red"] {
  --ground: #321e1c; --ink: #fcece0; --ink-2: #dcc0b1; --rule: #af8378;
  --raised: #321e1c; --route-ink: #ffb29b; --route-solid: #ffb29b; --route-tint: #4b2d28; --on-route: #321e1c;
  --map-ground: #321e1c; --map-road: #54362f; --map-park: #4d342f; --map-building: #78584b; --map-ink: #f1d9c9; --map-inactive: #aa8a7d;
}
.coral .eta { font-family: Bricolage, sans-serif; font-variation-settings: 'opsz' 72, 'wdth' 100; font-size: 96px; color: var(--route-ink); letter-spacing: -.035em; }
.coral .brand, .coral .stop-choice select { font-family: Bricolage, sans-serif; }
.coral .stop-choice select { font-weight: 700; }
.coral .campus-map { background: transparent; border-radius: 0; height: 340px; }
.coral .roads { stroke-width: 9px; }
.coral .route-line.selected-route { stroke-width: 4px; }
.coral .bottom-nav { border-top: 1px solid var(--rule); }
.atlas[data-theme="dark"], .atlas[data-theme="dark"][data-route="red"] {
  --ground: #211e19; --ink: #f6e6c8; --ink-2: #d1bb97; --rule: #887657;
  --raised: #211e19; --route-ink: #efbc64; --route-solid: #efbc64; --route-tint: #3c3222; --on-route: #211e19;
  --map-ground: #2b261e; --map-road: #524936; --map-park: #453e2e; --map-building: #756950; --map-ink: #efdfbd; --map-inactive: #a49370;
}
.atlas[data-theme="light"], .atlas[data-theme="light"][data-route="red"] {
  --ground: #f4dfb5; --ink: #392b1c; --ink-2: #645035; --rule: #9f8054;
  --raised: #f4dfb5; --route-ink: #855019; --route-solid: #855019; --route-tint: #e4c992; --on-route: #fff7e5;
  --map-ground: #ecd5aa; --map-road: #cbb58d; --map-park: #dbc6a0; --map-building: #baa17a; --map-ink: #4d3b24; --map-inactive: #9c855f;
}
.atlas .eta { font-family: Fraunces, serif; font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96; font-weight: 500; font-size: 104px; color: var(--route-ink); }
.atlas .brand { font-family: Fraunces, serif; font-size: 16px; }
.atlas .route-toggle button { border-radius: 6px; }
.atlas .arrival-group { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }
.atlas .campus-map { height: 315px; border-radius: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.atlas .roads { stroke-width: 7px; }
.atlas .route-line.selected-route { stroke-width: 3px; }
.atlas .bottom-nav { border-top: 1px solid var(--rule); }
@container (max-height: 760px) {
  .screen .route-toggle { margin: 12px 0 16px; }
  .screen .arrival-group { margin-top: 16px; }
  .screen .campus-map { height: 310px; }
  .screen .bus-status-panel { margin-bottom: 16px; }
}
@media (max-width: 1350px) { .options { grid-template-columns: repeat(3, 402px); overflow-x: auto; justify-content: start; padding-bottom: 16px; } }
@media (max-width: 700px) { .options { display: flex; overflow: visible; } .option { order: unset !important; } }