.rr-seo-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    :root {
      --primary-color: #07093e;
      --secondary-color: #07093e;
      --accent-color: #f1f2f2;
      --text-color: #333;
      --light-text: #fff;
    }
    html, body {
      height: 100%;
      margin: 0;
      overflow: hidden;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: var(--primary-color);
    }
    .rr-dev-banner { display: none !important;
    }
    .rr-dev-banner-removed {
      position: fixed;
      top: 60px;
      left: 0;
      right: 0;
      height: 36px;
      z-index: 9998;
      background: #0ac700;
      border-bottom: 1px solid #089e00;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      box-sizing: border-box;
      font-size: 13px;
      font-weight: 700;
    }
    .rr-dev-banner a {
      color: #fff;
      text-decoration: none;
    }
    .rr-dev-banner a:hover {
      text-decoration: underline;
    }
    @media (max-width: 700px) {
      .rr-dev-banner { font-size: 12px; }
    }
    #map {
      position: fixed;
      top: calc(60px + var(--rr-live-bar-h, 0px));
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
      z-index: 1;
      background: #0b0d1a;
    }
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      background-color: var(--primary-color);
      display: flex;
      align-items: center;
      padding: 0 16px; /* Added breathing room on the right */
      z-index: 9999;
      box-shadow: none;
    }
    .header-logo {
      margin-right: 10px;
    }
    /* Header logo links to the home page; the link is the flex item, the img keeps its sizing rules. */
    .header-logo-link { display: flex; align-items: center; flex: none; line-height: 0; text-decoration: none; }
    html.rr-mytrips-page .header-logo-picture {
      display: flex;
      align-items: center;
      margin-right: 10px;
      flex: none;
    }
    html.rr-mytrips-page img.header-logo {
      height: 52px;
      width: auto;
      max-width: min(260px, 58vw);
      object-fit: contain;
      margin-right: 0;
    }
    @media (min-width: 768px) {
      html.rr-mytrips-page img.header-logo {
        height: 48px;
        max-width: min(380px, 44vw);
      }
    }

    .header-center {
      position: static;
      left: auto;
      right: auto;
      transform: none;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin-left: auto;
      margin-right: 14px;
      min-width: 0;
      max-width: none;
      z-index: 10000;
    }
    .header-search-container {
      position: relative;
      width: 210px;
      max-width: 22vw;
      flex: 0 1 210px;
      display: flex;
      align-items: center;
      flex-shrink: 1;
    }
    .header-search-input {
      width: 100%;
      padding: 8px 12px;
      border: none;
      border-radius: 0;
      font-size: 14px;
      background-color: white;
      padding-right: 80px;
    }
    .header-search-results {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: #f4f6f9;
      border-radius: 0 0 8px 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.18);
      max-height: 400px;
      overflow-y: auto;
      z-index: 10000;
      display: none;
      border: 1px solid #dce1e8;
      border-top: none;
      padding: 8px;
    }
    .header-search-results.active {
      display: block;
    }
    .search-section-header {
      padding: 6px 8px 4px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #6b7785;
    }
    .search-result {
      background: white;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 8px;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      transition: box-shadow 0.15s ease, transform 0.15s ease;
      border: 1px solid #e6e9ef;
    }
    .search-result:last-child {
      margin-bottom: 0;
    }
    .search-result:hover {
      box-shadow: 0 3px 10px rgba(0,0,0,0.14);
    }
    .search-result-header {
      background: linear-gradient(145deg, #07093e 0%, #07093e 100%);
      color: white;
      padding: 9px 12px;
      font-size: 13.5px;
      line-height: 1.3;
      font-style: italic;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }
    .search-result-header .route {
      font-weight: 700;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .search-result-header .trip-num {
      font-weight: 700;
    }
    .search-result-header .to-label {
      font-weight: 500;
      opacity: 0.85;
    }
    .search-result-header .dest {
      font-weight: 700;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .search-result-body {
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .search-result-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
      gap: 4px 10px;
      font-size: 12.5px;
      color: #333;
      font-weight: 600;
    }
    .search-result-meta .label {
      font-size: 10px;
      color: #7f8c9a;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      margin-right: 3px;
    }
    .search-status-pill {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 0;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.2px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .search-status-pill.status-on-time { background: #d4edda; color: #155724; }
    .search-status-pill.status-delayed { background: #fff3cd; color: #856404; }
    .search-status-pill.status-very-delayed { background: #f8d7da; color: #721c24; }
    .search-status-pill.status-scheduled { background: #d1ecf1; color: #0c5460; }
    .search-station-result .search-result-header {
      background: linear-gradient(145deg, #07093e 0%, #07093e 100%);
    }
    .search-ask-card {
      background: #fff;
      border-bottom: 1px solid #e8ecf3;
      padding: 10px 12px 12px;
    }
    .search-ask-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      color: #07093e;
      margin-bottom: 6px;
    }
    .search-ask-label img {
      width: 14px;
      height: 14px;
      display: block;
      flex: 0 0 14px;
    }
    .search-ask-disclaimer {
      margin-top: 8px;
      font-size: 10px;
      line-height: 1.35;
      color: #7f8c9a;
      font-weight: 500;
    }
    .search-ask-answer {
      font-size: 13px;
      line-height: 1.4;
      color: #1a1f2e;
      white-space: pre-wrap;
    }
    .search-ask-card.loading .search-ask-answer { color: #7f8c9a; }
    .search-ask-trains {
      background: #f4f6fa;
      border-bottom: 1px solid #e8ecf3;
      padding: 0 8px 8px;
    }
    .search-ask-trains-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      color: #07093e;
      padding: 8px 4px 6px;
    }
    .search-ask-trains .search-result {
      margin-bottom: 6px;
    }
    .search-ask-trains .search-result:last-child {
      margin-bottom: 0;
    }
    .search-no-results {
      padding: 18px 12px;
      text-align: center;
      color: #7f8c9a;
      font-size: 13px;
      background: white;
      border-radius: 4px;
    }
    .search-type-menu {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      background: #f1f2f2;
      border: 1px solid #07093e;
      border-radius: 12px;
      font-size: 11px;
      padding: 2px 8px;
      color: #07093e;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }
    .search-type-menu:hover {
      background: #e0e0e0;
    }
    .search-type-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      background: white;
      border: 1px solid #07093e;
      border-radius: 0 0 8px 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      z-index: 10001;
      min-width: 110px;
      display: none;
    }
    .search-type-dropdown.show {
      display: block;
    }
    .search-type-option {
      padding: 8px 12px;
      font-size: 13px;
      cursor: pointer;
      transition: background 0.1s;
    }
    .search-type-option:hover {
      background: #f5f5f5;
    }
    .search-type-option.active {
      background: #07093e;
      color: white;
      font-weight: bold;
    }
    .menu-button {
      background: none;
      border: none;
      color: white;
      font-size: 28px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      margin-left: 0;
      margin-right: 0;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      transition: background-color 0.2s ease;
      flex-shrink: 0;
    }
    .menu-button:hover {
      background-color: rgba(255,255,255,0.15);
    }
    .menu-button-icon {
      width: 26px;
      height: 26px;
      display: block;
      object-fit: contain;
      pointer-events: none;
    }
    .control-panel {
      position: fixed;
      top: 70px;
      left: 50%;
      transform: translateX(-50%);
      width: 1100px;
      max-height: calc(100vh - 90px);
      background-color: white;
      z-index: 1000;
      box-shadow: 0 15px 40px rgba(0,0,0,0.25);
      border-radius: 0;
      padding: 25px 40px;
      box-sizing: border-box;
      overflow-y: auto;
      opacity: 0;
      visibility: hidden;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .control-panel.open {
      opacity: 1;
      visibility: visible;
    }
    .control-panel h2 {
      color: var(--primary-color);
      margin-top: 0;
      border-bottom: 2px solid var(--secondary-color);
      padding-bottom: 10px;
    }
    .control-panel h3 {
      color: var(--primary-color);
      margin-top: 0;
      margin-bottom: 10px;
    }
    .close-panel {
      position: absolute;
      top: 12px;
      right: 12px;
      background: none;
      border: none;
      font-size: 32px;
      cursor: pointer;
      color: var(--primary-color);
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }
    .train-icon {
      display: block;
      transform-origin: center center;
    }
    .train-popup {
      box-shadow: none;
      border: none;
      font-family: 'Segoe UI', system_ui, sans-serif;
    }
    /* ========== CLEAN + FULL-WIDTH TRAIN POPUP ========== */
    .mbta-heading-icon { height: 28px; width: 28px; object-fit: contain; display: inline-block; vertical-align: middle; flex: 0 0 28px; margin: 0 6px 0 0; }
    .train-label .mbta-heading-icon { height: 16px; width: 16px; flex-basis: 16px; }
    .train-popup-header {
      background: linear-gradient(145deg, #07093e 0%, #07093e 100%);
      color: white;
      letter-spacing: 0;
      word-spacing: -0.06em;
    }
    .train-popup-header span {
      letter-spacing: 0;
      word-spacing: -0.06em;
    }
    .train-popup-header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(to right, #27ae60, #f1c40f);
    }
    .mnr-marker {
      background: transparent !important;
      border: none !important;
    }
    .mnr-marker div {
      box-sizing: border-box;
    }
    .leaflet-marker-icon.mnr-nhv-icon {
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
    }
    .leaflet-marker-icon.mnr-default-icon {
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
    }
    .leaflet-marker-icon.lirr-icon {
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
    }
    .leaflet-marker-icon.metra-icon {
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
    }
    .leaflet-marker-icon.njt-icon {
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
    }
    .cape-badge {
      background: #e67e22;
      color: white;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 0;
      white-space: nowrap;
    }
    .alert-pill {
      background: #e74c3c;
      color: white;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 0;
      white-space: nowrap;
    }
    .status-pill {
      display: inline-flex;
      align-items: center;
      padding: 6px 14px;
      border-radius: 0;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.3px;
      opacity: 1;
      box-shadow: none;
    }
    .status-pill.status-on-time { background: #27ae60; color: #ffffff; }
    .status-pill.status-delayed { background: #f39c12; color: #ffffff; }
    .status-pill.status-very-delayed { background: #c0392b; color: #ffffff; }
    .status-pill.status-scheduled { background: #0c5460; color: #ffffff; }
    .status-pill.status-passed { background: #383d41; color: #ffffff; }
    .status-pill.status-alert { background: #e74c3c; color: #ffffff; }
    .status-pill.status-disruption { background: #ff0000; color: #ffffff; }
    .train-popup-body {
      background: #fff;
    }
    .quick-status {
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    .status-desc {
      margin: 0;
      font-size: 14px;
      color: #333;
      font-weight: 600;
      line-height: 1.3;
    }
    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .info-item {
      display: flex;
      flex-direction: column;
      padding-bottom: 6px;
      border-bottom: 1px solid #f0f2f5;
    }
    .info-item:last-child, .info-item:nth-child(3) {
      border-bottom: none;
    }
    .info-label {
      color: #7f8c9a;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }
    .info-value {
      color: #1a1f2e;
      font-weight: 700;
      word-break: break-all;
      hyphens: auto;
    }
    .alert-banner {
      background: #fff8e1;
      border-left: 4px solid #f39c12;
      padding: 9px 12px;
      margin-bottom: 12px;
      font-size: 13px;
      color: #8d6e00;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .meta-row {
      font-size: 11.5px;
      color: #7f8c9a;
      margin-bottom: 10px;
    }
    .loco-report-block {
      margin: 0 0 12px 0;
      padding: 10px 12px;
      background: #f4f6f9;
      border: 1px solid #e6e9ef;
      border-radius: 4px;
    }
    .loco-report-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: #5c6480;
      margin-bottom: 2px;
    }
    .loco-report-unit {
      font-size: 15px;
      font-weight: 700;
      color: #07093e;
      line-height: 1.3;
    }
    .loco-report-unit.is-empty { color: #6b7288; font-weight: 600; }
    .loco-report-meta {
      margin-top: 3px;
      font-size: 12px;
      font-weight: 500;
      color: #4b5568;
      line-height: 1.35;
    }
    .loco-report-text {
      font-size: 12.5px;
      color: #07093e;
      font-weight: 600;
      line-height: 1.35;
      margin-bottom: 8px;
    }
    .loco-report-last { font-style: italic; }
    .report-loco-row {
      margin: 10px 0 12px;
      padding: 10px 10px 8px;
      border: 1px solid #e2e5ef;
      border-radius: 8px;
      background: #fafbfe;
    }
    .report-loco-row-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .report-loco-row-title { font-size: 13px; font-weight: 600; color: #07093e; }
    .report-loco-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .report-loco-row-actions button {
      background: #fff;
      border: 1px solid #cfd3e0;
      border-radius: 6px;
      padding: 2px 8px;
      font-size: 12px;
      cursor: pointer;
      color: #07093e;
    }
    .report-loco-row-actions button:disabled { opacity: 0.35; cursor: default; }
    .report-loco-row-actions .report-loco-remove { color: #c0392b; border-color: #f0c2c2; }

    .update-pairing-btn {
      flex: none;
      width: 100%;
      background: #07093e;
      color: #fff;
      font-size: 12.5px;
      padding: 9px 12px;
    }
    .update-pairing-btn:hover {
      background: #12155a;
    }
    .loco-report-block.is-stale {
      border-color: #e0c36a;
      background: #fff8e8;
    }
    .loco-report-stale-ask {
      font-size: 12.5px;
      font-weight: 700;
      color: #5a4308;
      line-height: 1.4;
      margin: 0 0 8px;
    }
    .loco-report-actions {
      display: flex;
      gap: 8px;
    }
    .loco-report-actions .update-pairing-btn {
      flex: 1;
      width: auto;
    }
    .change-pairing-btn {
      background: #fff;
      color: #07093e;
    }
    .change-pairing-btn:hover {
      background: #eef0f6;
    }
    .train-popup-footer {
      background: #f4f6f9;
      border-top: 1px solid #e6e9ef;
    }
    .popup-action-btn {
      flex: 1;
      font-weight: 700;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .refresh-btn {
      background: #07093e;
      color: white;
    }
    .refresh-btn:hover {
      background: #07093e;
    }
    .share-btn {
      background: #fff;
      color: #07093e;
      border: 1px solid #07093e;
    }
    .share-btn:hover {
      background: #eef0f6;
    }
    /* Trip log from live */
    .log-trip-btn {
      background: #0a7a3e;
      color: #fff;
      border: 1px solid #0a7a3e;
    }
    .log-trip-btn:hover {
      background: #086533;
    }
    /* Trip schedule train pick */
    .trip-seg-train-pick-row {
      display: flex;
      gap: 8px;
      align-items: flex-end;
      margin: 0 0 8px;
      flex-wrap: wrap;
    }
    .trip-seg-train-pick-row > div {
      flex: 1;
      min-width: 140px;
    }
    .trip-seg-train-pick-row label {
      display: block;
      margin-bottom: 4px;
    }
    .trip-seg-extra-btn {
      flex-shrink: 0;
      min-height: 38px;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid #c5cad3;
      background: #f7f8fb;
      color: #07093e;
      font-weight: 700;
      font-size: 12px;
      font-family: inherit;
      cursor: pointer;
    }
    .trip-seg-extra-btn.active {
      background: #07093e;
      color: #fff;
      border-color: #07093e;
    }
    .trip-seg-train-hint {
      font-size: 11px;
      color: #5a6577;
      margin: -2px 0 8px;
      line-height: 1.35;
    }
    /* Trip live in-progress light */
    .trip-detail-live {
      font-weight: 700;
      letter-spacing: 0.01em;
      color: #07093e;
    }
    .trip-detail-live[data-live-state="on-time"] { color: #1a7f37; }
    .trip-detail-live[data-live-state="late"] { color: #b45309; }
    .trip-detail-live[data-live-state="very-late"] { color: #b00020; }
    .trip-detail-live[data-live-state="arriving"] { color: #1d4ed8; }
    .trip-detail-live[data-live-state="done"] { color: #5a6577; }
    .trip-detail-live[data-live-state="miss"] { color: #5a6577; font-weight: 600; }
    html.rr-mytrips-page .trip-detail-live { color: #07093e; }
    /* Trip live progress cards + post-trip enrich */
    .trip-log-row-live {
      margin: 6px 0 0;
      font-size: 12.5px;
      font-weight: 750;
      letter-spacing: 0.01em;
      color: #07093e;
      line-height: 1.35;
    }
    .trip-log-row-live[hidden] { display: none !important; }
    .trip-log-row-live[data-live-state="on-time"] { color: #1a7f37; }
    .trip-log-row-live[data-live-state="late"] { color: #b45309; }
    .trip-log-row-live[data-live-state="very-late"] { color: #b00020; }
    .trip-log-row-live[data-live-state="done"] { color: #5a6577; }
    .trip-log-row-live[data-live-state="miss"] { color: #5a6577; font-weight: 600; }
    /* Live status: left bar and two lines, no pill */
    .trip-log-row-live-late {
      display: block;
      font-style: normal;
      font-weight: 700;
      line-height: 1.25;
    }
    .trip-log-row-live-place {
      display: block;
      font-style: italic;
      font-weight: 500;
      opacity: 0.82;
      line-height: 1.3;
      margin-top: 1px;
    }
    .trip-log-row[data-rail-accent] .trip-log-row-live,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live {
      color: #fff;
      background: none;
      border: none;
      border-radius: 0;
      display: block;
      padding: 1px 0 1px 8px;
      margin-top: 8px;
      border-left: 3px solid rgba(255, 255, 255, 0.45);
    }
    .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="on-time"],
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="on-time"] {
      color: #fff; background: none; border: none; border-left: 3px solid #3ddc6a;
    }
    .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="late"],
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="late"] {
      color: #fff; background: none; border: none; border-left: 3px solid #f5b942;
    }
    .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="very-late"],
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="very-late"] {
      color: #fff; background: none; border: none; border-left: 3px solid #ff5a6a;
    }
    .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="miss"],
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="miss"],
    .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="done"],
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="done"] {
      color: rgba(255, 255, 255, 0.78);
      background: none;
      border: none;
      border-left: none;
      border-radius: 0;
      padding-left: 0;
      font-weight: 500;
      font-style: italic;
    }
    .trip-log-row-actual {
      margin: 2px 0 0;
      font-size: 11.5px;
      font-weight: 650;
      color: #5a6577;
      line-height: 1.35;
    }
    .trip-log-row[data-rail-accent] .trip-log-row-actual,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-actual {
      color: rgba(255, 255, 255, 0.78);
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-live,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-live {
      color: #fff;
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-live[data-live-state="on-time"],
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-live[data-live-state="on-time"] {
      color: #b8f5c8;
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-live[data-live-state="late"],
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-live[data-live-state="late"] {
      color: #ffd89a;
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-live[data-live-state="very-late"],
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-live[data-live-state="very-late"] {
      color: #ffb3bd;
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-live[data-live-state="arriving"],
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-live[data-live-state="arriving"] {
      color: #bfdbfe;
    }
    .trip-detail-actual {
      margin: 0 0 8px;
      font-size: 12.5px;
      font-weight: 650;
      color: #5a6577;
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-actual,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-actual {
      color: rgba(255, 255, 255, 0.82);
    }
    html.rr-train-page,
    html.rr-train-page body {
      overflow: auto;
      height: auto;
      min-height: 100%;
      background: #07093e;
    }
    html.rr-train-page #loading-screen {
      display: none !important;
    }
    html.rr-train-page .rr-dev-banner,
    html.rr-train-page #offline-banner,
    html.rr-train-page #rr-cookie-bar,
    html.rr-train-page .rr-cookie {
      display: none !important;
    }
    html.rr-train-page #rr-train-page-card .stop-mileage {
      color: #fff !important;
    }
    html.rr-train-page .header-search-container,
    html.rr-train-page #btn-report-train-header,
    html.rr-train-page #btn-specials-header,
    html.rr-train-page #btn-leaderboard-header,
    html.rr-train-page #header-auth,
    html.rr-train-page #menu-button,
    html.rr-train-page #btn-admin-header,
    html.rr-train-page #control-panel,
    html.rr-train-page #overlay,
    html.rr-train-page #signup-prompt-modal,
    html.rr-train-page .leaflet-popup,
    html.rr-train-page .footer,
    html.rr-train-page #rr-cookie-bar,
    html.rr-train-page #rr-cookie-modal,
    html.rr-train-page #rr-rail-picker {
      display: none !important;
    }
    html.rr-train-page .header-center {
      display: none;
    }
    #rr-cookie-bar {
      position: fixed;
      left: 8px;
      right: 8px;
      bottom: calc(var(--rr-footer-h, 0px) + 8px);
      z-index: 10080;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px 12px;
      padding: 10px 12px;
      background: #07093e;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 8px;
      box-shadow: 0 8px 28px rgba(0,0,0,0.35);
      box-sizing: border-box;
      max-width: 460px;
    }
    #rr-cookie-bar[hidden] { display: none !important; }
    #rr-cookie-bar p {
      margin: 0;
      flex: 1 1 240px;
      font-size: 12px;
      line-height: 1.4;
      color: #e8eaf2;
    }
    #rr-cookie-bar a { color: #8fd3ff; text-decoration: underline; }
    .rr-cookie-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }
    .rr-cookie-btn {
      border: 1px solid #fff;
      border-radius: 4px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      background: #fff;
      color: #07093e;
    }
    .rr-cookie-btn.secondary {
      background: transparent;
      color: #fff;
      border-color: rgba(255,255,255,0.45);
    }
    #rr-cookie-modal[hidden] { display: none !important; }
    #rr-cookie-modal {
      position: fixed;
      inset: 0;
      z-index: 10085;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 16px;
      box-sizing: border-box;
    }
    .rr-cookie-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.45);
    }
    .rr-cookie-modal-card {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 520px;
      max-height: min(80vh, 640px);
      overflow: auto;
      background: #07093e;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 10px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.45);
      padding: 18px 16px 16px;
      box-sizing: border-box;
    }
    .rr-cookie-modal-card h3 {
      margin: 0 0 8px;
      font-size: 17px;
      font-weight: 700;
    }
    .rr-cookie-modal-lead {
      margin: 0 0 14px;
      font-size: 13px;
      line-height: 1.45;
      color: #c5c9d8;
    }
    .rr-cookie-list {
      list-style: none;
      margin: 0 0 14px;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .rr-cookie-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
    }
    .rr-cookie-row-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .rr-cookie-row-text strong {
      font-size: 13px;
      font-weight: 700;
    }
    .rr-cookie-row-text span {
      font-size: 12px;
      line-height: 1.4;
      color: #c5c9d8;
    }
    .rr-cookie-switch {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      font-size: 11px;
      color: #c5c9d8;
      cursor: pointer;
    }
    .rr-cookie-switch input {
      width: 18px;
      height: 18px;
      accent-color: #2ecc71;
    }
    .rr-cookie-switch.is-locked {
      cursor: default;
      opacity: 0.85;
    }
    .rr-cookie-modal-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }
    /* Pre-load railroad picker (above loading-screen z-index 100000) */
    #rr-rail-picker {
      position: fixed;
      inset: 0;
      z-index: 100001;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      box-sizing: border-box;
      font-family: 'Segoe UI', sans-serif;
    }
    html.rr-train-page #rr-rail-picker {
      display: none !important;
    }
    .rr-rail-picker-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.35);
    }
    .rr-rail-picker-card {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 420px;
      max-height: min(88vh, 640px);
      background: #07093e;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 10px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.45);
      padding: 18px 16px 16px;
      box-sizing: border-box;
    }
    .rr-rail-picker-card h3 {
      margin: 0 0 6px;
      font-size: 17px;
      font-weight: 700;
    }
    .rr-rail-picker-lead {
      margin: 0 0 14px;
      font-size: 13px;
      line-height: 1.45;
      color: #c5c9d8;
    }
    .rr-rail-picker-list {
      list-style: none;
      margin: 0 0 14px;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: min(48vh, 360px);
    }
    .rr-rail-picker-list li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .rr-rail-picker-list li:hover,
    .rr-rail-picker-list li:focus-within {
      border-color: rgba(255,255,255,0.28);
      background: rgba(255,255,255,0.07);
    }
    .rr-rail-picker-list label {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      cursor: pointer;
    }
    .rr-rail-picker-list input {
      width: 18px;
      height: 18px;
      accent-color: #2ecc71;
      flex-shrink: 0;
    }
    .rr-rail-picker-list span {
      font-size: 14px;
      font-weight: 600;
    }
    .rr-rail-picker-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .rr-rail-picker-actions .rr-rail-picker-spacer {
      flex: 1 1 auto;
      min-width: 4px;
    }
    #rr-rail-picker-all,
    #rr-rail-picker-clear,
    #rr-rail-picker-go {
      border: none;
      border-radius: 4px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    #rr-rail-picker-all,
    #rr-rail-picker-clear {
      background: transparent;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.35);
    }
    #rr-rail-picker-go {
      background: #fff;
      color: #07093e;
    }
    #rr-rail-picker-go:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    #rr-change-railroads {
      display: inline-block;
      margin-top: 8px;
      font-size: 12px;
      color: #8ec8ff;
      cursor: pointer;
      text-decoration: underline;
      background: none;
      border: none;
      padding: 0;
      font-family: inherit;
    }
    #rr-train-page {
      display: none;
    }
    html.rr-train-page #rr-train-page {
      display: block;
      position: relative;
      z-index: 20;
      padding: 0 0 24px;
      max-width: none;
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      box-sizing: border-box;
      color: #fff;
    }
    .rr-train-page-toolbar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 16px;
    }
    #rr-train-page-status {
      display: none;
    }
    #rr-train-page-fullmap {
      flex: none;
      width: 100%;
      background: #fff;
      color: #07093e;
      border: none;
      border-radius: 4px;
      padding: 12px 16px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }
    html.rr-train-page #rr-train-page-card .train-popup {
      box-shadow: none;
      border: none;
      border-radius: 0;
      max-height: none;
      max-width: none !important;
      min-width: 0 !important;
      width: 100% !important;
      box-sizing: border-box;
      background: transparent;
    }
    html.rr-train-page,
    html.rr-train-page body {
      overflow-x: hidden;
    }
    html.rr-train-page,
    html.rr-train-page body {
      height: auto;
      min-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }
    html.rr-train-page #rr-train-page {
      margin-top: 60px;
      height: auto;
      min-height: calc(100dvh - 60px);
      padding: 0 0 calc(88px + env(safe-area-inset-bottom));
      display: block;
      overflow: visible;
    }
    html.rr-train-page #rr-train-page-card,
    html.rr-train-page #rr-train-page-card .train-popup,
    html.rr-train-page #rr-train-page-card .train-popup-body {
      display: block;
      height: auto;
      max-height: none;
      overflow: visible;
    }
    html.rr-train-page #rr-train-page-card .train-popup-header {
      flex: 0 0 auto;
      padding: 8px 12px 6px;
    }
    html.rr-train-page #rr-train-page-card .quick-status,
    html.rr-train-page #rr-train-page-card .info-grid {
      flex: 0 0 auto;
      margin-bottom: 6px;
    }
    html.rr-train-page #rr-train-page-map-slot {
      display: block;
      position: relative;
      flex: 0 0 148px;
      height: 148px;
      min-height: 148px;
      max-height: 148px;
      margin: 6px 12px;
      overflow: hidden;
      z-index: 1;
    }
    html.rr-train-page #rr-train-page-map-slot > #map {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: 148px !important;
    }
    html.rr-train-page #rr-train-page-card .stops-wrapper,
    html.rr-train-page #rr-train-page-card .upcoming-stops,
    html.rr-train-page #rr-train-page-card .stops-list {
      display: block;
      position: relative;
      width: 100%;
      margin: 0;
      padding-left: 0;
      padding-right: 0;
      border-left: none;
      border-right: none;
      border-radius: 0;
      box-sizing: border-box;
      max-height: none !important;
      min-height: 0 !important;
      height: auto !important;
      overflow: visible !important;
    }
    html.rr-train-page #rr-train-page-card .train-popup,
    html.rr-train-page #rr-train-page-card .train-popup-body {
      max-height: none !important;
    }
    html.rr-train-page #rr-train-page-actions {
      display: flex !important;
      position: fixed !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      z-index: 10020 !important;
      gap: 8px;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
      background: #07093e;
      border-top: 1px solid rgba(255,255,255,.16);
      box-sizing: border-box;
    }
    html.rr-train-page #rr-train-page-actions .train-popup-footer,
    html.rr-train-page #rr-train-page-actions .popup-action-btn {
      position: static !important;
      display: flex !important;
      flex: 1;
      margin: 0 !important;
    }
    html.rr-train-page #rr-train-page-card .train-popup-footer { display: none !important; }
    html.rr-train-page #rr-train-page-card .train-popup-body {
      max-height: none;
      overflow: visible;
      background: #07093e;
      color: #fff;
    }
    html.rr-train-page .header {
      height: 66px !important;
    }
    html.rr-train-page .header-logo {
      height: 42px !important;
    }
    html.rr-train-page #rr-train-page {
      margin-top: 66px;
      min-height: calc(100vh - 66px);
    }
    html.rr-train-page #rr-train-page-card .train-popup-header {
      background: #07093e;
      padding: 14px 16px 12px;
    }
    html.rr-train-page #rr-train-page-card .train-popup-header > div {
      flex-wrap: nowrap !important;
      white-space: nowrap;
      overflow: hidden;
      font-size: 22px;
      line-height: 1.2 !important;
      width: 100%;
    }
    html.rr-train-page #rr-train-page-card .train-popup-header span {
      font-size: inherit !important;
      line-height: 1.2 !important;
      white-space: nowrap;
    }
    html.rr-train-page #rr-train-page-card .cape-badge {
      font-size: 11px !important;
      padding: 3px 8px;
      flex-shrink: 0;
    }
    html.rr-train-page #rr-train-page-card .special-unit-badge {
      display: none;
    }
    html.rr-train-page #rr-train-page-card .status-pill {
      font-size: 14px;
      padding: 8px 16px;
    }
    html.rr-train-page #rr-train-page-card .status-desc,
    html.rr-train-page #rr-train-page-card .info-value,
    html.rr-train-page #rr-train-page-card .stop-name,
    html.rr-train-page #rr-train-page-card .stop-time,
    html.rr-train-page #rr-train-page-card .upcoming-stops h4,
    html.rr-train-page #rr-train-page-card .loco-report-text,
    html.rr-train-page #rr-train-page-card .report-loco-row-title,
    html.rr-train-page #rr-train-page-card .loco-report-comment,
    html.rr-train-page #rr-train-page-card .rr-board-note,
    html.rr-train-page #rr-train-page-card .rr-modal-hint {
      color: #fff;
    }
    html.rr-train-page #rr-train-page-card .info-label,
    html.rr-train-page #rr-train-page-card .meta-row,
    html.rr-train-page #rr-train-page-card .meta-row strong,
    html.rr-train-page #rr-train-page-card .stops-loading {
      color: #ffffff !important;
    }
    html.rr-train-page #rr-train-page-card .quick-status,
    html.rr-train-page #rr-train-page-card .info-item {
      border-bottom-color: rgba(255,255,255,0.12);
    }
    html.rr-train-page #rr-train-page-card .loco-report-block,
    html.rr-train-page #rr-train-page-card .report-loco-row {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.18);
    }
    html.rr-train-page #rr-train-page-card .loco-report-block.is-stale {
      background: rgba(243,156,18,0.18);
      border-color: #f39c12;
    }
    html.rr-train-page #rr-train-page-card .loco-report-stale-ask {
      color: #ffd27a;
    }
    html.rr-train-page #rr-train-page-card .report-loco-row-actions button {
      background: transparent;
      border-color: rgba(255,255,255,0.35);
      color: #fff;
    }
    html.rr-train-page #rr-train-page-card .update-pairing-btn {
      background: #fff;
      color: #07093e;
    }
    html.rr-train-page #rr-train-page-card .update-pairing-btn:hover {
      background: #eef0f6;
    }
    html.rr-train-page #rr-train-page-card .change-pairing-btn {
      background: transparent;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.4);
    }
    html.rr-train-page #rr-train-page-card .alert-banner {
      background: rgba(243,156,18,0.18);
      color: #ffe9a8;
    }
    html.rr-train-page #rr-train-page-card .stops-list,
    html.rr-train-page #rr-train-page-card .stops-wrapper {
      max-height: none;
      background: transparent;
      border-color: rgba(255,255,255,0.12);
    }
    html.rr-train-page #rr-train-page-card .stops-list {
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
    }
    html.rr-train-page #rr-train-page-card .stops-list li {
      border-bottom-color: rgba(255,255,255,0.1);
    }
    html.rr-train-page #rr-train-page-card .track-badge {
      background: rgba(255,255,255,0.18);
      color: #fff;
    }
    html.rr-train-page #rr-train-page-card .stop-status.status-on-time { background: #27ae60; color: #fff; }
    html.rr-train-page #rr-train-page-card .stop-status.status-delayed { background: #f39c12; color: #fff; }
    html.rr-train-page #rr-train-page-card .stop-status.status-very-delayed { background: #c0392b; color: #fff; }
    html.rr-train-page #rr-train-page-card .stop-status.status-scheduled { background: #1a8a9a; color: #fff; }
    html.rr-train-page #rr-train-page-card .stop-status.status-passed { background: #5a6070; color: #fff; }
    #rr-train-page-map-slot {
      display: none;
      position: relative;
      height: 38vh;
      min-height: 220px;
      margin: 12px 0;
      border-radius: 8px;
      overflow: hidden;
      border: none;
      background: #0b0d1a;
    }
    html.rr-train-page #rr-train-page-map-slot {
      display: none;
    }
    html.rr-train-page #rr-train-page-map-slot:has(#map) {
      display: block;
    }
    /* Hide full-viewport map until it lives inside the mini-map slot */
    html.rr-train-page #map {
      display: none !important;
    }
    html.rr-train-page #rr-train-page-map-slot > #map {
      display: block !important;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    html.rr-train-page #rr-train-page-card .rr-train-page-empty {
      padding: 28px 16px 8px;
      text-align: left;
      color: #c5c9d8;
      font-size: 15px;
      line-height: 1.45;
      max-width: 36em;
    }
    .stops-loading {
      text-align: center;
      padding: 12px;
      color: #7f8c9a;
      font-size: 13px;
    }
    .stops-list {
      border: 1px solid #e6e9ef;
      border-radius: 4px;
      background: #fff;
    }
    .stops-list li.completed {
      opacity: 0.7;
    }
    .stop-time {
      color: #07093e;
    }
    .stop-name {
      flex: 1;
      color: #2c3e50;
      line-height: 1.25;
      word-break: break-word;
    }
    .stop-status {
      font-weight: 700;
      border-radius: 0;
      white-space: nowrap;
      align-self: flex-start;
      margin-top: 2px;
      flex-shrink: 0;
      min-width: max-content;
    }
    .stop-status.status-on-time { background: #d4edda; color: #155724; }
    .stop-status.status-delayed { background: #fff3cd; color: #856404; }
    .stop-status.status-very-delayed { background: #f8d7da; color: #721c24; }
    .stop-status.status-scheduled { background: #d1ecf1; color: #0c5460; }
    .track-badge {
      background: #07093e;
      font-weight: 600;
    }
    /* Legacy support */
    .train-popup h3 { display: none; }
    .status-on-time {
      color: #2ecc71;
      font-weight: bold;
    }
    .status-delayed {
      color: #f39c12;
      font-weight: bold;
    }
    .status-very-delayed {
      color: #e74c3c;
      font-weight: bold;
    }
    .status-scheduled {
      color: #3498db;
      font-weight: bold;
    }
    .status-passed {
      color: #95a5a6;
      font-weight: bold;
    }
    .refresh-button {
      background-color: var(--secondary-color);
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 0;
      cursor: pointer;
      margin-top: 10px;
      font-weight: bold;
      transition: background-color 0.2s;
      width: 100%;
    }
    .refresh-button:hover {
      background-color: #07093e;
    }
    .last-updated {
      font-size: 12px;
      color: #666;
      margin-top: 8px;
      text-align: center;
    }
    .loading {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(0,0,0,0.1);
      border-top-color: var(--secondary-color);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-left: 8px;
      vertical-align: middle;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    /* Legacy search styles (panel) kept minimal */
    .station-toggle {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    .station-toggle input {
      margin-right: 8px;
    }
    .station-toggle label {
      cursor: pointer;
    }
    .station-icon {
      width: 18px;
      height: 18px;
      margin-right: 8px;
    }
    .toggle-section {
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #eee;
    }
    .toggle-section div {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    .toggle-section input {
      margin-right: 8px;
    }
    .toggle-section label {
      cursor: pointer;
    }
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.55);
      z-index: 999;
      display: none;
      transition: opacity 0.2s ease;
    }
    .overlay.open {
      display: block;
      opacity: 1;
    }
    .station-popup {
      overflow-x: hidden;
      color: #222;
      box-shadow: 0 10px 28px rgba(0,0,0,0.28);
      border: 1px solid #e6e9ef;
    }
    .station-popup h3 {
      border-bottom: 2px solid var(--secondary-color);
      padding-bottom: 8px;
      color: var(--primary-color);
      background: transparent;
    }
    .departures-list {
      list-style: none;
      margin: 0;
    }
    .departures-list li {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      align-items: center;
      word-wrap: break-word;
    }
    .departure-time {
      font-weight: bold;
      min-width: 60px;
    }
    .departure-destination {
      flex-grow: 1;
      margin: 0 10px;
      word-wrap: break-word;
    }
    .stops-list {
      list-style: none;
      margin: 0;
    }
    .stops-list li {
      border-bottom: 1px solid #eee;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .stops-list li:last-child {
      border-bottom: none;
    }
    .stop-time {
      font-weight: bold;
      flex-shrink: 0;
    }
    .stop-name {
      flex-grow: 1;
      margin: 0 6px;
      word-wrap: break-word;
    }
    .loading-departures {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .loading-spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid rgba(0,0,0,0.1);
      border-top-color: var(--secondary-color);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-right: 10px;
    }
    .no-departures {
      text-align: center;
      padding: 10px;
      color: #666;
      font-style: italic;
    }
    .live-train-icon {
      margin-right: 5px;
      vertical-align: middle;
    }
    .live-indicator {
      display: flex;
      align-items: center;
      margin-left: 5px;
    }
    .station-badge {
      display: inline-block;
      background-color: var(--primary-color);
      color: white;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 0;
      margin-left: 5px;
    }
    .track-badge {
      display: inline-block;
      background-color: #07093e;
      color: white;
      border-radius: 0;
      margin-left: 5px;
    }
    .track-badge.track-tbd {
      background-color: transparent;
      color: #5b6275;
      border: 1px dashed #8a90a2;
      font-weight: 600;
    }
    .disclaimer {
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #eee;
      font-size: 12px;
      color: #666;
      text-align: left;
    }
    @media (max-width: 1200px) {
      .control-panel {
        width: 96%;
        max-width: 1100px;
      }
    }
    /* Completely remove Leaflet's default popup background / chrome */
    .leaflet-popup-content-wrapper {
      border: none !important;
    }
    .leaflet-popup-content {
      max-width: 580px;
      width: max-content;
      overflow-x: hidden;
      overflow-y: hidden;
      max-height: min(520px, 75vh);
      word-wrap: break-word;
      background: transparent !important;
    }
    .leaflet-popup-tip-container {
      display: none !important;
    }
    .leaflet-popup-tip {
      display: none !important;
    }
    .leaflet-popup {
      margin-bottom: 0 !important;
    }
    .popup-report-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .popup-report-icon {
      width: 36px;
      height: 36px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .popup-report-wrap .update-pairing-btn { flex: 1; width: auto; }
    .loco-report-comment {
      margin-top: 8px;
      font-size: 13px;
      font-weight: 500;
      color: #222;
      line-height: 1.4;
    }
    .rr-board-note {
      margin-top: 6px;
      font-size: 12.5px;
      font-style: italic;
      color: #333;
      line-height: 1.35;
      text-align: left;
    }
    #report-comment {
      width: 100%;
      min-height: 64px;
      margin-top: 4px;
      padding: 8px;
      box-sizing: border-box;
      font: inherit;
    }
    .notify-subhead { margin: 12px 0 6px; font-size: 13px; font-weight: 700; }
    #notify-train-select { width: 100%; margin: 4px 0 0; padding: 8px; font: inherit; box-sizing: border-box; }
    .notify-rail-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px 10px;
    }
    .notify-rail-list label { display: block; margin: 4px 0; font-weight: 500; }
    .notify-loco-add {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-top: 4px;
    }
    .notify-loco-add select {
      width: 38%;
      padding: 8px;
      font: inherit;
      box-sizing: border-box;
    }
    .notify-loco-add input {
      flex: 1;
      min-width: 0;
      padding: 8px;
      font: inherit;
      box-sizing: border-box;
    }
    .notify-add-btn {
      background: #07093e;
      color: #fff;
      border: 1px solid #07093e;
      padding: 8px 12px;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }
    .notify-train-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 8px; }
    .notify-chip {
      display: inline-flex; align-items: center; gap: 6px;
      background: #eef1f8; border-radius: 999px; padding: 4px 8px 4px 10px;
      font-size: 12px; font-weight: 600;
    }
    .notify-chip button {
      border: 0; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
    }
    .notify-save-row {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }
    .notify-save-row > button {
      flex: 1;
      margin-top: 0;
    }
    .notify-confirm-btn {
      background: #27ae60;
      border: 1px solid #27ae60;
      color: #FFFFFF;
      text-transform: uppercase;
      font-size: 14px;
      font-weight: bold;
      padding: 12px;
      font-family: inherit;
      cursor: pointer;
      text-align: center;
    }
    .notify-confirm-btn:disabled {
      cursor: not-allowed;
    }
    @media (max-width: 700px) {
      .leaflet-popup-content {
        max-width: min(320px, calc(100vw - 40px)) !important;
        width: min(320px, calc(100vw - 40px)) !important;
        max-height: min(420px, 62vh);
      }
      .train-popup,
      .station-popup {
        max-width: min(320px, calc(100vw - 40px)) !important;
        width: min(320px, calc(100vw - 40px)) !important;
      }
    }
    .alert-icon {
      vertical-align: middle;
      width: 20px;
      height: 20px;
    }
    .train-label {
      background: linear-gradient(145deg, #07093e 0%, #0c1054 100%) !important;
      color: #ffffff !important;
      border: none !important;
      border-radius: 2px !important;
      padding: 5px 10px !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      font-style: italic !important;
      font-family: 'Segoe UI', system-ui, sans-serif !important;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
      letter-spacing: 0.15px;
      line-height: 1.25 !important;
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* No arrow / tip on train labels */
    .train-label::before,
    .leaflet-tooltip-bottom.train-label::before,
    .leaflet-tooltip-top.train-label::before,
    .leaflet-tooltip-left.train-label::before,
    .leaflet-tooltip-right.train-label::before {
      display: none !important;
      border: none !important;
    }
    .leaflet-tooltip.train-label {
      opacity: 1 !important;
    }
    .train-cluster-icon {
      background: #07093e;
      color: #fff;
      border: 2px solid #fff;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      font-family: 'Segoe UI', system-ui, sans-serif;
      box-shadow: 0 2px 8px rgba(0,0,0,0.35);
      line-height: 1;
    }
    .leaflet-marker-icon {
     max-width: 32px !important;
     max-height: 32px !important;
   }
   .leaflet-marker-icon.train-icon {
     max-width: 44px !important;
     max-height: 44px !important;
     width: 44px !important;
     height: 44px !important;
     object-fit: contain !important;
     filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
   }
   .leaflet-marker-icon.amtrak-nec-icon {
     max-width: 44px !important;
     max-height: 44px !important;
     width: 44px !important;
     height: 44px !important;
     object-fit: contain !important;
   }
   .leaflet-marker-icon.amtrak-acela-icon {
     filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
   }
   .leaflet-marker-icon.amtrak-default-icon {
     filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
   }
   .train-icon {
     width: 44px !important;
     height: 44px !important;
     object-fit: contain !important;
     filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
   }
   /* The main map shadows its marker layer as a whole. A shadow on each of its hundreds of
      train icons made panning and zooming slow. */
   #map .leaflet-marker-pane {
     filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
   }
   #map .leaflet-marker-icon {
     filter: none;
   }
   .live-train-icon {
     width: 16px !important;
     height: 16px !important;
   }
   @media (max-width: 700px) {
     .leaflet-marker-icon.train-icon,
     .leaflet-marker-icon.amtrak-nec-icon,
     .train-icon {
       max-width: 32px !important;
       max-height: 32px !important;
       width: 32px !important;
       height: 32px !important;
     }
     /* Leaflet sets the margins from the 44px icon's anchor, which leaves a 32px icon off center. */
     .leaflet-marker-icon.train-icon,
     .leaflet-marker-icon.amtrak-nec-icon {
       margin-left: -16px !important;
       margin-top: -16px !important;
     }
   }
   .header-logo {
     height: 40px !important;
   }
   .alert-signup-section {
     margin: 20px 0;
     padding: 15px;
     background: #f8f9fa;
     border-radius: 0;
     border: 1px solid #ddd;
   }
   .alert-signup-section h3 {
     margin-top: 0;
     color: var(--primary-color);
   }
   .alert-signup-section p {
     font-size: 13px;
     color: #555;
     margin: 8px 0 12px;
   }
   .alert-signup-section input[type="text"],
   .alert-signup-section input[type="tel"] {
     width: 100%;
     padding: 10px;
     margin: 8px 0;
     border: 1px solid var(--primary-color);
     border-radius: 0;
     box-sizing: border-box;
     font-size: 14px;
   }
   .alert-signup-section button {
     width: 100%;
     padding: 12px;
     margin: 10px 0 0;
     background: var(--primary-color);
     color: white;
     border: none;
     border-radius: 0;
     font-weight: bold;
     cursor: pointer;
   }
   .alert-signup-section button:hover {
     background: #07093e;
   }
   /* On mobile, Report a train, Specials, and Leaderboard also live in the settings panel */
   @media (max-width: 767px) {
     #btn-report-train-header { display: none !important; }
     #btn-report-train-panel, #btn-specials-panel, #btn-leaderboard-panel { display: block; }
   }
   @media (min-width: 768px) {
     #btn-report-train-panel, #btn-specials-panel, #btn-leaderboard-panel { display: none !important; }
   }
   .rr-board-toolbar {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     align-items: center;
     margin-bottom: 12px;
   }
   .rr-board-toolbar select,
   .rr-board-toolbar input[type="search"] {
     box-sizing: border-box;
     padding: 8px 10px;
     border: 1px solid #c5cad3;
     font-size: 13px;
     font-family: inherit;
     background: #fff;
     color: #07093e;
     min-width: 140px;
   }
   .rr-board-toolbar input[type="search"] { flex: 1; min-width: 160px; }
   .rr-board-list { display: flex; flex-direction: column; gap: 8px; }
   .rr-board-group {
     margin: 14px 0 6px;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     color: #5a6577;
   }
   .rr-board-card {
     background: #f4f6fa;
     border: 1px solid #e8eaef;
     border-radius: 8px;
     padding: 10px 12px;
     cursor: pointer;
     text-align: left;
   }
   .rr-board-card:hover { border-color: #07093e; background: #eef1f7; }
   .rr-board-card-top {
     display: flex;
     justify-content: space-between;
     gap: 8px;
     align-items: baseline;
     margin-bottom: 4px;
   }
   .rr-board-agency {
     font-size: 11px;
     font-weight: 700;
     color: #07093e;
     text-transform: uppercase;
     letter-spacing: 0.03em;
   }
   .rr-board-time { font-size: 11px; color: #5a6577; }
   .rr-board-title { font-size: 15px; font-weight: 700; color: #07093e; }
   .rr-board-meta { font-size: 12px; color: #2c3340; margin-top: 2px; line-height: 1.35; }
   .rr-board-empty { font-size: 13px; color: #5a6577; margin: 8px 0 0; }
   #specials-board-modal .rr-lightbox { width: min(720px, 100%); max-height: min(88vh, 820px); }
    .header-leaderboard-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
    .header-leaderboard-icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; align-items: center; justify-content: center; }
    .header-leaderboard-icon img { width: 18px; height: 18px; object-fit: contain; display: block; }
    #weekly-leaderboard-modal .rr-lightbox { width: min(1180px, 98vw); max-height: 96vh; height: 96vh; }
    @media (max-width: 767px) {
      #weekly-leaderboard-modal .rr-lightbox {
        width: min(100vw - 16px, 560px);
        height: auto;
        max-height: 72vh;
      }
    }
    .rr-lb-winner { display: flex; align-items: center; gap: 12px; background: #0b1048; color: #fff; border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; }
    .rr-lb-winner-trophy { width: 44px; height: 44px; flex-shrink: 0; }
    .rr-lb-winner-trophy img, .rr-lb-winner-trophy svg { width: 44px; height: 44px; object-fit: contain; display: block; }
    .rr-lb-winner-photo, .rr-lb-row-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #2c3e6b; flex-shrink: 0; border: 2px solid rgba(255,255,255,.35); }
    .rr-lb-winner-photo.placeholder, .rr-lb-row-photo.placeholder { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; }
    .rr-lb-winner-text { font-size: 15px; line-height: 1.35; font-weight: 650; }
    .rr-lb-winner-text strong { font-weight: 800; }
    .rr-lb-list { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
    .rr-lb-row { display: flex; align-items: center; gap: 12px; background: #f4f6f9; border-radius: 10px; padding: 10px 12px; }
    .rr-lb-rank { width: 28px; text-align: center; font-weight: 800; color: #07093e; flex-shrink: 0; }
    .rr-lb-name { flex: 1; font-weight: 750; color: #07093e; min-width: 0; }
    .rr-lb-meta { text-align: right; font-size: 13px; color: #2c3340; white-space: nowrap; }
    .rr-lb-meta strong { display: block; color: #07093e; font-size: 15px; }
    .rr-lb-empty { color: #5a6577; text-align: center; padding: 28px 12px; }
    .rr-lb-updated {
      margin: 14px 0 0;
      padding-top: 10px;
      border-top: 1px solid #e6e9ef;
      font-size: 12px;
      color: #5a6577;
      text-align: center;
    }
    .rr-lb-refresh {
      background: none;
      border: none;
      color: #1d4ed8;
      font: inherit;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
      text-decoration: underline;
    }
    @media (max-width: 640px) {
      .rr-lb-winner-text { font-size: 13px; }
    }
   /* Vehicle Alerts card (mobile-friendly) */
   .alerts-list {
     max-height: 420px;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 10px;
   }
   .alert-card {
     background: #fff;
     border: 1px solid #e0e4ea;
     border-radius: 4px;
     overflow: hidden;
   }
   .alert-card-header {
     background: #07093e;
     color: #fff;
     padding: 10px 14px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
   }
   .alert-card-title {
     font-size: 13.5px;
     font-weight: 700;
     line-height: 1.35;
     margin: 0;
     flex: 1;
   }
   .alert-badge {
     flex-shrink: 0;
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.3px;
     padding: 3px 8px;
     border-radius: 0;
     background: rgba(255,255,255,0.18);
     color: #fff;
   }
   .alert-badge.severe { background: #e74c3c; }
   .alert-badge.warning { background: #f39c12; }
   .alert-card-body {
     padding: 12px 14px;
     font-size: 13px;
     line-height: 1.45;
     color: #333;
   }
   .alert-card-body p {
     margin: 0 0 8px 0;
   }
   .alert-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-top: 8px;
   }
   .alert-meta span {
     font-size: 11px;
     font-weight: 600;
     background: #eef1f6;
     color: #07093e;
     padding: 3px 8px;
     border-radius: 3px;
   }
   .alert-link {
     display: inline-block;
     margin-top: 8px;
     font-size: 12px;
     font-weight: 600;
     color: #07093e;
     text-decoration: none;
   }
   .alert-link:hover { text-decoration: underline; }
   .alerts-empty {
     text-align: center;
     padding: 32px 16px;
     background: #f8f9fb;
     border: 1px solid #e0e4ea;
     border-radius: 4px;
     color: #5a6577;
     font-size: 13px;
   }
   .alerts-empty strong {
     display: block;
     color: #07093e;
     font-size: 14px;
     margin-bottom: 4px;
   }
   .alerts-count {
     font-size: 13px;
     color: #7f8c9a;
     margin: 0 0 10px 0;
     font-weight: 600;
   }
   .location-section {
     margin-top: 18px;
     padding-top: 15px;
     border-top: 1px solid #eee;
   }
   .location-section h3 {
     margin-top: 0;
   }
   .location-btn {
     width: 100%;
     padding: 11px 14px;
     background: #07093e;
     color: white;
     border: none;
     font-weight: 700;
     font-size: 14px;
     cursor: pointer;
     border-radius: 0;
     margin-bottom: 8px;
   }
   .location-btn:hover { background: #0a0c4a; }
   .location-btn:disabled {
     background: #999;
     cursor: not-allowed;
   }
   .location-status {
     font-size: 12.5px;
     color: #5a6577;
     margin-bottom: 10px;
     min-height: 18px;
   }
   .closest-trains-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   .closest-train-item {
     background: #f8f9fb;
     border: 1px solid #e0e4ea;
     border-left: 3px solid #07093e;
     padding: 10px 12px;
     cursor: pointer;
     font-size: 13px;
   }
   .closest-train-item:hover { background: #eef1f6; }
   .closest-train-item .ct-route {
     font-weight: 700;
     color: #07093e;
   }
   .closest-train-item .ct-meta {
     font-size: 12px;
     color: #5a6577;
     margin-top: 3px;
   }
   .closest-train-item .ct-dist {
     font-weight: 700;
     color: #07093e;
   }
   .cabcar-report-btn {
     margin-top: 16px;
     text-transform: uppercase;
     font-size: 14px;
     text-decoration: none;
     cursor: pointer;
     display: block;
     width: 100%;
     padding: 12px;
     font-family: inherit;
     text-shadow: none;
     user-select: none;
     transition: all 0.1s ease-in;
     background-color: #07093e;
     border: 1px solid #07093e;
     color: #FFFFFF;
     text-align: center;
     border-radius: 0;
     font-weight: bold;
   }
   .cabcar-report-btn:hover {
     background-color: #07093e;
     transform: translateY(-1px);
   }

   .special-unit-badge {
     background: #8e44ad;
     color: white;
     font-size: 10px;
     font-weight: 700;
     padding: 3px 8px;
     border-radius: 0;
     white-space: nowrap;
   }
   .rr-modal-backdrop {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(7,9,62,0.55);
     z-index: 100050;
     align-items: center;
     justify-content: center;
     padding: 16px;
   }
   .rr-modal-backdrop.open { display: flex; }
   .rr-modal {
     background: #fff;
     width: min(420px, 100%);
     max-height: 90vh;
     overflow: auto;
     border-radius: 0;
     box-shadow: 0 12px 40px rgba(0,0,0,0.35);
     font-family: 'Segoe UI', sans-serif;
   }
   .rr-modal-header {
     background: #07093e;
     color: #fff;
     padding: 14px 16px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-weight: 700;
     font-size: 16px;
   }
   .rr-modal-close {
     background: transparent;
     border: none;
     color: #fff;
     font-size: 22px;
     cursor: pointer;
     line-height: 1;
   }
   .rr-modal-body { padding: 16px; }
   .rr-modal-body label {
     display: block;
     font-size: 12px;
     font-weight: 700;
     color: #07093e;
     margin: 10px 0 4px;
   }
   .rr-modal-body select,
   .rr-modal-body input[type="text"],
   .rr-modal-body input[type="date"] {
     width: 100%;
     box-sizing: border-box;
     padding: 10px;
     border: 1px solid #c5cad3;
     font-size: 14px;
     font-family: inherit;
     min-height: 44px;
   }

    .rr-modal-body input[type="datetime-local"],
    .rr-lightbox-body input[type="datetime-local"],
    .rr-lightbox-body select,
    .rr-lightbox-body input[type="text"] {
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      border: 1px solid #c5cad3;
      font-size: 14px;
      font-family: inherit;
      min-height: 44px;
    }
    #trip-log-modal .rr-lightbox { width: min(560px, 100%); max-height: min(92vh, 900px); }
    /* Full-page Trip log (/mytrips) */
    html.rr-mytrips-page,
    html.rr-mytrips-page body {
      overflow: auto !important;
      height: auto !important;
      min-height: 100%;
      background: #fff !important;
      color: #1a2030;
    }
    /* The page (not body) scrolls, so the sticky header stays visible. */
    html.rr-mytrips-page body { overflow: visible !important; }
    html.rr-mytrips-page #map,
    html.rr-mytrips-page #rr-train-page,
    html.rr-mytrips-page #loading-screen,
    html.rr-mytrips-page #menu-button,
    html.rr-mytrips-page #control-panel,
    html.rr-mytrips-page #overlay,
    html.rr-mytrips-page #rr-rail-picker,
    html.rr-mytrips-page .rr-dev-banner,
    html.rr-mytrips-page #offline-banner,
    html.rr-mytrips-page .footer,
    html.rr-mytrips-page .header-search-container,
    html.rr-mytrips-page #btn-report-train-header,
    html.rr-mytrips-page #btn-specials-header,
    html.rr-mytrips-page #btn-leaderboard-header,
    html.rr-mytrips-page .leaflet-control-container {
      display: none !important;
    }
    /* Keep admin dashboard icon for admins (same gate as main map: .is-visible) */
    html.rr-mytrips-page #btn-admin-header.is-visible {
      display: inline-flex !important;
    }

    /* Trip mytrips clarity cookies */
    /* Keep Accept banner + cookie prefs on /mytrips (footer is hidden; Clarity still consent-gated) */
    html.rr-mytrips-page #rr-cookie-bar,
    html.rr-mytrips-page #rr-cookie-modal {
      display: flex !important;
    }
    html.rr-mytrips-page #rr-cookie-bar[hidden],
    html.rr-mytrips-page #rr-cookie-modal[hidden] {
      display: none !important;
    }
    html.rr-mytrips-page #rr-cookie-bar {
      z-index: 10080;
    }
    html.rr-mytrips-page #rr-cookie-modal {
      z-index: 10085;
    }
    html.rr-mytrips-page #rr-cookie-settings-mytrips {
      display: inline-flex;
      align-items: center;
      margin-right: 8px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 700;
      color: #07093e;
      background: #fff;
      border: 1px solid #d0d5e0;
      border-radius: 8px;
      cursor: pointer;
    }
    html.rr-mytrips-page #rr-cookie-settings-mytrips:hover,
    html.rr-mytrips-page #rr-cookie-settings-mytrips:focus-visible {
      background: #eef1f7;
      outline: 2px solid #07093e;
      outline-offset: 1px;
    }
    /* Hide mytrips-only cookie settings control on main map */
    #rr-cookie-settings-mytrips { display: none; }
    html.rr-mytrips-page .header {
      position: sticky;
      top: 0;
      z-index: 40;
      height: 66px !important;
    }
    html.rr-mytrips-page .header-logo {
      height: 42px !important;
      cursor: pointer;
    }
    html.rr-mytrips-page .header-center {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      min-width: 0;
    }
    html.rr-mytrips-page .rr-mytrips-page-title {
      color: #fff;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }

    html.rr-mytrips-page.rr-mytrips-guest #trip-log-modal {
      display: none !important;
    }
    html.rr-mytrips-page.rr-mytrips-guest,
    html.rr-mytrips-page.rr-mytrips-guest body,
    html.rr-mytrips-page .mytrips-guest {
      cursor: url('/assets/brand/mytrips-cursor.png') 16 16, auto;
    }
    html.rr-mytrips-page .mytrips-guest a,
    html.rr-mytrips-page .mytrips-guest button {
      cursor: url('/assets/brand/mytrips-cursor.png') 16 16, pointer;
    }
    html.rr-mytrips-page.rr-mytrips-guest,
    html.rr-mytrips-page.rr-mytrips-guest body {
      background: #07093e !important;
      background-color: #07093e !important;
      background-image:
        url('/assets/brand/tracks-right-top.png'),
        url('/assets/brand/tracks-left-bottom.png');
      background-position: top -40px right -60px, left -80px bottom -90px;
      background-repeat: no-repeat, no-repeat;
      background-size: min(480px, 60vw), min(720px, 88vw);
    }
    html.rr-mytrips-page .mytrips-guest {
      background-image:
        url('/assets/brand/tracks-right-top.png'),
        url('/assets/brand/tracks-left-bottom.png');
      background-position: top -40px right -60px, left -80px bottom -90px;
      background-repeat: no-repeat, no-repeat;
      background-size: min(480px, 60vw), min(720px, 88vw);
    }
    .mytrips-guest[hidden] { display: none !important; }
    html.rr-mytrips-page .mytrips-guest {
      min-height: calc(100vh - 64px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px 18px 48px;
      background-color: #07093e;
      color: #fff;
    }
    .mytrips-guest-inner {
      width: min(980px, 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 28px;
      text-align: center;
    }
    @media (min-width: 860px) {
      .mytrips-guest-inner {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
        align-items: center;
        gap: 40px;
      }
      .mytrips-guest-copy { flex: 1 1 48%; }
      .mytrips-guest-actions { align-items: flex-start; }
    }
    .mytrips-guest-logo {
      height: 56px; width: auto; max-width: min(320px, 80vw); object-fit: contain;
      
    }
    .mytrips-guest h1 { margin: 8px 0 10px; color: #fff; font-size: clamp(28px, 6vw, 40px); line-height: 1.15; }
    .mytrips-guest-lead { margin: 0 auto 18px; max-width: 36em; color: #c9d4ea; font-size: 16px; line-height: 1.5; }
    .mytrips-guest-points { list-style: none; margin: 0 auto 22px; padding: 0; width: min(420px, 100%); color: #fff; font-weight: 600; line-height: 1.55; text-align: left; }
    .mytrips-guest-points li { margin: 0 0 8px; padding-left: 18px; position: relative; }
    .mytrips-guest-points li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: #fff; border-radius: 50%; }
    .mytrips-guest-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
    .mytrips-guest-signin { background: #fff; color: #07093e; border: 0; padding: 14px 22px; font-size: 15px; font-weight: 800; cursor: pointer; }
    .mytrips-guest-phone-wrap { flex: 1 1 42%; display: flex; justify-content: center; }
    .mytrips-guest-phone { width: min(280px, 72vw); height: auto; display: block; filter: drop-shadow(0 18px 40px rgba(0,0,0,.35)); }
    @media (min-width: 860px) {
      .mytrips-guest-phone-wrap { justify-content: flex-end; padding-right: 2vw; }
      .mytrips-guest-phone { width: min(380px, 34vw); }
    }
    @media (min-width: 1200px) {
      .mytrips-guest-phone-wrap { padding-right: 4vw; }
      .mytrips-guest-phone { width: min(420px, 32vw); }
    }
    html.rr-mytrips-page #header-auth {
      display: flex !important;
    }
    html.rr-mytrips-page #trip-log-modal {
      position: relative !important;
      inset: auto !important;
      display: block !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      background: transparent !important;
      z-index: 1 !important;
      min-height: calc(100vh - 66px);
      max-width: none;
    }
    html.rr-mytrips-page #trip-log-modal .rr-lightbox {
      width: 100% !important;
      max-width: none !important;
      max-height: none !important;
      margin: 0;
      overflow: visible;
      color: #1a2030;
    }
    html.rr-mytrips-page #trip-log-modal .rr-lightbox-body {
      max-height: none !important;
      overflow: visible !important;
    }
    html.rr-mytrips-page .trip-log-row-actions button {
      cursor: pointer;
    }

    /* /mytrips white chrome (undo dark navy page background) */
    html.rr-mytrips-page #trip-log-modal .rr-modal-header {
      color: #07093e;
    }
    html.rr-mytrips-page #trip-log-modal .rr-modal-body,
    html.rr-mytrips-page #trip-log-modal .rr-lightbox-body {
      background: #fff;
      color: #1a2030;
    }
    html.rr-mytrips-page #trip-log-modal .rr-modal-body label,
    html.rr-mytrips-page #trip-log-modal .rr-lightbox-body label {
      color: #3a4250;
    }
    html.rr-mytrips-page #trip-log-modal .rr-modal-body select,
    html.rr-mytrips-page #trip-log-modal .rr-modal-body input[type="text"],
    html.rr-mytrips-page #trip-log-modal .rr-modal-body input[type="date"],
    html.rr-mytrips-page #trip-log-modal .rr-modal-body textarea,
    html.rr-mytrips-page #trip-log-modal .rr-lightbox-body select,
    html.rr-mytrips-page #trip-log-modal .rr-lightbox-body input[type="text"],
    html.rr-mytrips-page #trip-log-modal .rr-lightbox-body input[type="datetime-local"],
    html.rr-mytrips-page #trip-log-modal .rr-lightbox-body textarea {
      background: #fff;
      color: #07093e;
      border-color: #c5cad3;
    }
    html.rr-mytrips-page #trip-log-modal .rr-modal-hint,
    html.rr-mytrips-page .trip-log-approx-note,
    html.rr-mytrips-page .trip-log-empty,
    html.rr-mytrips-page .trip-log-status {
      color: #5a6270;
    }
    html.rr-mytrips-page #trip-log-modal .rr-modal-error {
      color: #b42318;
    }
    html.rr-mytrips-page .trip-log-stat {
      background: #f7f8fb;
      border-color: #e2e6ef;
    }
    html.rr-mytrips-page .trip-log-tab {
      border-color: #c5cad3;
    }
    html.rr-mytrips-page .trip-log-tab.active {
      border-color: #07093e;
    }
    html.rr-mytrips-page .trip-log-row {
      border-color: #e2e6ef;
    }
    html.rr-mytrips-page .trip-seg-chip {
      background: #f4f6fb;
      color: #1a2030;
      border-color: #e2e6ef;
    }
    html.rr-mytrips-page .trip-segment {
      background: #fff;
      border-color: #e2e6ef;
      color: #1a2030;
    }
    html.rr-mytrips-page #trip-log-modal .rr-btn.secondary {
      background: #f7f8fb;
      color: #07093e;
      border-color: #c5cad3;
    }
    html.rr-mytrips-page #trip-log-modal .rr-btn:not(.secondary):not(.danger) {
      background: #07093e;
      border-color: #07093e;
      color: #fff;
    }
    html.rr-mytrips-page #trip-log-modal .rr-btn.danger.secondary {
      background: #fff5f5;
      color: #b42318;
      border-color: #f0b4b4;
    }
    html.rr-mytrips-page .trip-detail-back:hover,
    html.rr-mytrips-page .trip-detail-back:focus-visible {
      background: #eef1f7;
      outline-color: #07093e;
    }
    html.rr-mytrips-page .trip-detail-miles-pill {
      color: #07093e;
      background: #f4f6fb;
      border-color: #e2e6ef;
    }
    html.rr-mytrips-page .trip-detail-relative {
      font-size: clamp(16px, 3.5vw, 20px);
    }
    html.rr-mytrips-page .trip-detail-meta-item {
      background: #f4f6fb;
      border-color: #e2e6ef;
    }
    html.rr-mytrips-page .trip-detail-meta-label { color: #5a6270; }
    html.rr-mytrips-page .trip-detail-meta-value { color: #07093e; }

    html.rr-mytrips-page .trip-detail-when { color: #07093e; }
    html.rr-mytrips-page .trip-detail-fact {
      background: #f4f6fb;
      border-color: #e2e6ef;
      color: #07093e;
    }
    html.rr-mytrips-page .trip-train-chip {
      color: #07093e;
      background: #e8ecf5;
      border-color: #d0d7e6;
    }
    html.rr-mytrips-page .trip-detail-notes {
      color: #3a4250;
      background: #fafbfe;
    }
    html.rr-mytrips-page .trip-detail-seg-title { color: #5a6270; }
    html.rr-mytrips-page .trip-detail-seg {
      background: #fff;
      border-color: #e2e6ef;
    }
    html.rr-mytrips-page .trip-detail-seg-od { color: #07093e; }
    html.rr-mytrips-page .trip-detail-seg-sub { color: #5a6270; }
    html.rr-mytrips-page #trip-log-close {
      display: none !important;
    }

    /* Trip visual polish: cards, header, detail, maps, empty/loading
       Trip amtrak-card-nofade: AMTRAK_TRIP_STATIONS + rail-colored cards + no map fade + rollingStock/notes */
    /* Trip cards wider + no outer frame */
    html.rr-mytrips-page #trip-log-modal {
      padding: 8px 16px 40px;
      max-width: min(1100px, 100%);
      width: 100%;
      margin: var(--rr-live-bar-h, 0px) auto 0;
      box-sizing: border-box;
    }
    @media (max-width: 700px) {
      html.rr-mytrips-page #trip-log-modal {
        padding: 8px 10px 32px;
        max-width: 100%;
      }
    }
    html.rr-mytrips-page #trip-log-modal .rr-lightbox {
      box-shadow: none !important;
      border: none !important;
      border-radius: 0 !important;
      background: transparent !important;
    }
    html.rr-mytrips-page #trip-log-modal .rr-lightbox-body {
      padding: 0 0 8px !important;
      background: transparent !important;
    }
    html.rr-mytrips-page #trip-log-modal .rr-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 6px 2px 14px;
      background: transparent !important;
      border-bottom: none !important;
    }
    html.rr-mytrips-page #trip-log-modal .rr-modal-header #trip-log-title {
      font-size: clamp(26px, 5vw, 34px);
      font-weight: 850;
      letter-spacing: -0.02em;
      color: #07093e;
      line-height: 1.15;
    }
    html.rr-mytrips-page .trip-log-page-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    html.rr-mytrips-page #trip-log-primary-log {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 8px 16px;
      border-radius: 10px;
      border: 1px solid #07093e;
      background: #07093e;
      color: #fff;
      font-weight: 750;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(7, 9, 62, 0.18);
    }
    html.rr-mytrips-page #trip-log-primary-log:hover,
    html.rr-mytrips-page #trip-log-primary-log:focus-visible {
      background: #12155a;
      outline: 2px solid #07093e;
      outline-offset: 2px;
    }
    /* Public profile + stats correctness */
    html.rr-mytrips-page #trip-log-public-profile,
    #trip-log-public-profile {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 8px 14px;
      border-radius: 10px;
      border: 1px solid #c5cad3;
      background: #fff;
      color: #07093e;
      font-weight: 750;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
    }
    html.rr-mytrips-page #trip-log-public-profile:hover,
    html.rr-mytrips-page #trip-log-public-profile:focus-visible {
      border-color: #07093e;
      outline: 2px solid #07093e;
      outline-offset: 2px;
    }
    .trip-public-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    .trip-public-wrap[hidden],
    #trip-log-public-profile[hidden],
    #trip-public-panel[hidden],
    #trip-public-link-row[hidden],
    #trip-log-stat-rails[hidden] { display: none !important; }
    .trip-public-panel {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 40;
      width: min(300px, calc(100vw - 32px));
      padding: 14px;
      border-radius: 14px;
      border: 1px solid #e2e6ef;
      background: #fff;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    }
    .trip-public-lead {
      margin: 0 0 10px;
      font-size: 13px;
      line-height: 1.4;
      color: #3a4250;
      font-weight: 600;
    }
    .trip-public-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 750;
      font-size: 14px;
      color: #07093e;
      cursor: pointer;
      margin: 0 0 8px;
    }
    .trip-notify-row {
      margin: 10px 0 12px;
      padding: 10px 12px;
      border: 1px solid #d8dce4;
      border-radius: 8px;
      background: #f7f8fb;
    }
    .trip-notify-row[hidden] { display: none !important; }
    .trip-notify-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 750;
      font-size: 14px;
      color: #07093e;
      cursor: pointer;
      margin: 0 0 4px;
    }
    .trip-notify-hint, .trip-notify-status {
      margin: 0;
      font-size: 12px;
      line-height: 1.4;
      color: #5a6270;
    }
    .trip-notify-status:empty { display: none; }
    .trip-notify-status { margin-top: 6px; color: #07093e; font-weight: 600; }
    .trip-public-hint {
      margin: 0 0 8px;
      font-size: 12px;
      color: #5a6270;
      line-height: 1.35;
    }
    .trip-public-link-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-top: 4px;
    }
    .trip-public-link {
      color: #07093e;
      font-weight: 750;
      font-size: 13px;
      text-decoration: none;
    }
    .trip-public-link:hover { text-decoration: underline; }
    .trip-public-copy {
      min-height: 32px !important;
      padding: 6px 10px !important;
      font-size: 12px !important;
    }
    .trip-public-status {
      margin: 8px 0 0;
      min-height: 16px;
      font-size: 12px;
      color: #2f6b3a;
      font-weight: 650;
    }
    html.rr-mytrips-page .trip-log-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      align-items: stretch;
      margin: 0 0 14px;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
    }
    html.rr-mytrips-page .trip-log-stat-main {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      padding: 12px 14px;
      background: #fff;
      border: 1px solid #e6eaf2;
      border-radius: 14px;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      text-align: left;
    }
    html.rr-mytrips-page .trip-log-stat-value {
      font-size: 22px;
      font-weight: 850;
      letter-spacing: -0.02em;
      color: #07093e;
      line-height: 1.15;
    }
    html.rr-mytrips-page .trip-log-stat-label {
      font-size: 12px;
      font-weight: 650;
      color: #5a6270;
      margin-top: 0;
      text-transform: none;
    }
    html.rr-mytrips-page .trip-log-stat-rails {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 2px;
    }
    .trip-log-rail-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 999px;
      background: #f4f6fb;
      border: 1px solid #e2e6ef;
      font-size: 12px;
      font-weight: 700;
      color: #07093e;
    }
    .trip-log-rail-chip-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    }
    .trip-log-rail-chip-meta {
      color: #5a6270; font-weight: 650;
    }
    @media (max-width: 560px) {
      html.rr-mytrips-page .trip-log-stats {
        grid-template-columns: 1fr;
      }
      html.rr-mytrips-page .trip-log-stat-main {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
      }
    }

    html.rr-mytrips-page .trip-nearby-banner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 12px;
      margin: 10px 0 4px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(7, 9, 62, 0.12);
      background: linear-gradient(180deg, #f7f9ff 0%, #eef3ff 100%);
      box-shadow: 0 1px 2px rgba(7, 9, 62, 0.06);
    }
    html.rr-mytrips-page .trip-nearby-banner[hidden] { display: none !important; }
    html.rr-mytrips-page .trip-nearby-banner-text {
      flex: 1 1 220px;
      margin: 0;
      font-size: 14px;
      line-height: 1.35;
      color: #07093e;
      font-weight: 600;
    }
    html.rr-mytrips-page .trip-nearby-banner-meta {
      display: block;
      margin-top: 2px;
      font-size: 12px;
      font-weight: 500;
      color: #5a6270;
    }
    html.rr-mytrips-page .trip-nearby-banner-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    html.rr-mytrips-page .trip-nearby-banner-actions .rr-btn {
      min-height: 36px;
      padding: 8px 14px;
      font-size: 13px;
    }
    html.rr-mytrips-page .trip-log-approx-note {
      display: none; /* quieter on page; form still shows miles preview */
    }
    html.rr-mytrips-page .trip-log-tabs {
      display: inline-flex;
      gap: 0;
      margin: 0 0 16px;
      padding: 3px;
      background: #eef1f7;
      border-radius: 10px;
      border: 1px solid #e2e6ef;
      width: auto;
      max-width: 100%;
    }
    html.rr-mytrips-page .trip-log-tab {
      flex: 0 1 auto;
      min-height: 34px;
      padding: 6px 14px;
      border: none;
      background: transparent;
      color: #3a4250;
      font-weight: 700;
      font-size: 13px;
      border-radius: 8px;
      box-shadow: none;
    }
    html.rr-mytrips-page .trip-log-tab.active {
      background: #fff;
      color: #07093e;
      border: none;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }
    html.rr-mytrips-page     .trip-log-section { margin: 0 0 24px; }
    .trip-log-section-title {
      margin: 4px 0 12px;
      color: #07093e;
      font-size: 16px;
      font-weight: 800;
    }
    html.rr-mytrips-page .trip-log-section-title { font-size: 18px; }
    html.rr-mytrips-page .trip-log-section-rows {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin: 0;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
    }
    html.rr-mytrips-page .trip-dash-bar {
      display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
      margin: 0 0 16px; padding: 12px 14px; background: #fff;
      border: 1px solid #e6eaf2; border-radius: 14px;
    }
    html.rr-mytrips-page .trip-dash-stat {
      font-size: 13px; font-weight: 750; color: #07093e;
      background: #eef1f8; border-radius: 999px; padding: 6px 12px;
    }
    html.rr-mytrips-page .trip-dash-filter {
      margin-left: auto; min-width: 160px; height: 36px;
      border: 1px solid #c5cad3; border-radius: 10px; padding: 0 10px; color: #07093e;
    }
    html.rr-mytrips-page .trip-soon-chip {
      display: inline-flex; margin-top: 8px; margin-right: 8px;
      background: #0b7a3b; color: #fff; font-size: 11px; font-weight: 800;
      border-radius: 999px; padding: 4px 10px;
    }
    html.rr-mytrips-page .trip-track-btn,
    html.rr-mytrips-page .trip-copy-btn,
    html.rr-mytrips-page .trip-hide-btn {
      border: 1px solid #c5cad3; background: #f7f8fb; color: #07093e;
      border-radius: 8px; font-size: 11px; font-weight: 750; padding: 4px 8px; cursor: pointer;
    }
    html.rr-mytrips-page .trip-log-upcoming-empty {
      color: #5a6270; font-size: 14px; padding: 8px 2px 16px;
    }
    html.rr-mytrips-page .trip-log-empty-cta {
       margin-top: 12px;  
    }
    html.rr-mytrips-page .trip-log-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    html.rr-mytrips-page .trip-log-row {
      background: #fff;
      border: 1px solid #e6eaf2;
      border-radius: 14px;
      padding: 14px 14px 12px;
      box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
      color: #1a2030;
      cursor: pointer;
      transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    }
    html.rr-mytrips-page .trip-log-row:hover,
    html.rr-mytrips-page .trip-log-row:focus-visible {
      border-color: #c9d0de;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
      outline: none;
      transform: translateY(-1px);
    }
    html.rr-mytrips-page .trip-log-row[data-rail-accent] {
      padding-left: 14px;
    }
    html.rr-mytrips-page .trip-log-row-route { color: #07093e; }
    html.rr-mytrips-page .trip-log-row-rail { color: #3a4250; }
    html.rr-mytrips-page .trip-rail-badge-train { color: #5a6270; }
    html.rr-mytrips-page .trip-log-row-miles { color: #8a93a3; }
    html.rr-mytrips-page .trip-log-row-meta { color: #7a8290; }
    html.rr-mytrips-page .trip-log-row-relative {
      display: inline-flex;
      align-items: center;
      margin-top: 8px;
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 750;
      color: #07093e;
      background: #eef1f8;
      border: 1px solid #d8dee9;
      line-height: 1.3;
    }
    html.rr-mytrips-page .trip-log-row-actions button {
      background: transparent;
      color: #9aa3b8;
      border-color: transparent;
      opacity: 0.75;
    }
    html.rr-mytrips-page .trip-log-row-actions button:hover,
    html.rr-mytrips-page .trip-log-row-actions button:focus-visible {
      background: #fff5f5;
      color: #b42318;
      border-color: #f0c2c2;
      opacity: 1;
    }
    html.rr-mytrips-page .trip-log-row-actions button.danger {
      color: #9aa3b8;
      border-color: transparent;
      background: transparent;
    }
    html.rr-mytrips-page .trip-log-row-map {
      border: none;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
      overflow: hidden;
    }
    html.rr-mytrips-page .trip-log-empty-card {
      text-align: center;
      padding: 36px 18px 32px;
      border: 1px dashed #d0d6e2;
      border-radius: 14px;
      background: #fafbfe;
    }
    html.rr-mytrips-page .trip-log-empty-title {
      margin: 0 0 6px;
      font-size: 18px;
      font-weight: 800;
      color: #07093e;
    }
    html.rr-mytrips-page .trip-log-empty-copy {
      margin: 0 0 16px;
      font-size: 14px;
      color: #5a6270;
      line-height: 1.45;
    }
    html.rr-mytrips-page .trip-log-empty-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 8px 18px;
      border-radius: 10px;
      border: 1px solid #07093e;
      background: #07093e;
      color: #fff;
      font-weight: 750;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
    }
    html.rr-mytrips-page .trip-log-skeletons {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 12px;
    }
    html.rr-mytrips-page .trip-log-skeleton {
      border: 1px solid #e6eaf2;
      border-radius: 14px;
      padding: 14px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    }
    html.rr-mytrips-page .trip-log-skel-line,
    html.rr-mytrips-page .trip-log-skel-map {
      border-radius: 8px;
      background: linear-gradient(90deg, #eef1f7 0%, #f7f8fb 45%, #eef1f7 90%);
      background-size: 200% 100%;
      animation: rrTripSkel 1.2s ease-in-out infinite;
    }
    html.rr-mytrips-page .trip-log-skel-line { height: 14px; margin-bottom: 10px; }
    html.rr-mytrips-page .trip-log-skel-line.lg { height: 20px; width: 72%; }
    html.rr-mytrips-page .trip-log-skel-line.sm { height: 12px; width: 44%; margin-bottom: 0; }
    html.rr-mytrips-page .trip-log-skel-map { height: 120px; margin-top: 12px; }
    @keyframes rrTripSkel {
      0% { background-position: 100% 0; }
      100% { background-position: -100% 0; }
    }
    html.rr-mytrips-page .trip-detail-overlay {
      background: #0b0d1a;
    }
    html.rr-mytrips-page .trip-detail-panel {
      background: #fff;
      color: #1a2030;
      box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.28);
    }
    html.rr-mytrips-page .trip-detail-relative {
      margin: 0 0 12px;
      font-size: clamp(16px, 3.5vw, 20px);
      font-weight: 800;
      color: #07093e;
      letter-spacing: -0.01em;
    }
    html.rr-mytrips-page .trip-detail-route { color: #07093e; }
    html.rr-mytrips-page .trip-detail-line { color: #3a4250; }
    html.rr-mytrips-page .trip-detail-back {
      background: #fff;
      color: #07093e;
      border-color: #d0d5e0;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    }

    /* Trip detail overlay (click a trip card) */
    .trip-detail-overlay {
      z-index: 10060;
      display: none;
      flex-direction: column;
      background: #0b0d1a;
      overscroll-behavior: contain;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.22s ease, transform 0.22s ease;
    }
    .trip-detail-overlay.open {
      opacity: 1;
      transform: translateY(0);
      animation: rrTripDetailIn 0.24s ease;
    }
    @keyframes rrTripDetailIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .trip-detail-map {
      width: 100%;
      flex-shrink: 0;
      position: relative;
      z-index: 0;
      margin: 0;
      border: none;
    }
    .trip-detail-map .leaflet-container {
      width: 100%;
      height: 100%;
      font: inherit;
    }
    .trip-detail-map.is-live-empty::after { content: 'Location shows here while sharing'; }
    .trip-detail-map.is-empty::after {
      content: 'Map unavailable';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      pointer-events: none;
      z-index: 1;
    }
    .trip-detail-map.is-loading::after {
      content: 'Loading map…';
    }
    html.rr-mytrips-page #trip-detail-map .leaflet-control-container {
      display: block !important;
    }
    .trip-detail-panel {
      background: #fff;
      position: relative;
      z-index: 2;
      box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.32);
      -webkit-overflow-scrolling: touch;
    }
    .trip-detail-accent {
      background: var(--rr-trip-rail, #07093e);
    }
    .trip-detail-toolbar {
      position: sticky;
      top: 0;
      z-index: 5;
      align-items: center;
      gap: 10px;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid #eef1f7;
    }
    .trip-detail-back {
      align-items: center;
      gap: 6px;
      min-height: 40px;
      padding: 8px 14px;
      border-radius: 8px;
      border: 1px solid #c5cad3;
      background: #f7f8fb;
      color: #07093e;
      font-weight: 700;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
    }
    .trip-detail-back:hover,
    .trip-detail-back:focus-visible {
      background: #eef1f7;
      outline: 2px solid #07093e;
      outline-offset: 1px;
    }
    .trip-detail-miles-pill {
      font-weight: 800;
      font-size: 13px;
      color: #07093e;
      background: #f4f6fb;
      border: 1px solid #e2e6ef;
      border-radius: 999px;
      padding: 6px 12px;
      white-space: nowrap;
    }
    .trip-detail-body {
      padding: 8px 18px 36px;
    }
    .trip-detail-badges {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    .trip-detail-route {
      font-size: clamp(24px, 5vw, 34px);
      font-weight: 850;
      color: #07093e;
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin: 0 0 8px;
    }
    .trip-detail-relative {
      font-size: clamp(16px, 3.5vw, 20px);
      font-weight: 800;
      color: #07093e;
      letter-spacing: -0.01em;
    }
    .trip-detail-line {
      font-weight: 650;
      color: #3a4250;
    }
    .trip-log-row-relative {
      display: inline-flex;
      align-items: center;
      margin-top: 8px;
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 750;
      color: #07093e;
      background: #eef1f8;
      border: 1px solid #d8dee9;
      line-height: 1.3;
    }
    .trip-detail-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 12px 0 16px;
    }
    .trip-detail-meta-item {
      background: #f4f6fb;
      border: 1px solid #e2e6ef;
      border-radius: 999px;
      padding: 8px 14px;
      min-width: 0;
    }
    /* Legacy labeled meta — superseded by .trip-detail-when + .trip-detail-facts */
    .trip-detail-meta-label {
      display: none;
    }
    .trip-detail-meta-value {
      display: inline;
      font-size: 13px;
      font-weight: 750;
      color: #07093e;
      line-height: 1.35;
    }
    .trip-detail-notes {
      color: #3a4250;
      background: #fafbfe;
      border-left: 3px solid var(--rr-trip-rail, #07093e);
      border-radius: 0 8px 8px 0;
    }
    .trip-detail-seg-title {
      font-size: 12px;
      font-weight: 800;
      color: #5a6270;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .trip-detail-segs {
      display: flex;
      flex-direction: column;
    }
    .trip-detail-seg {
      border: 1px solid #e2e6ef;
      border-radius: 10px;
      background: #fafbfe;
      border-left: 4px solid var(--rr-trip-rail, #07093e);
    }
    .trip-detail-seg-top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      margin-bottom: 4px;
    }
    .trip-detail-seg-od {
      font-size: 15px;
      font-weight: 800;
      color: #07093e;
    }
    .trip-detail-seg-sub {
      font-size: 12px;
      color: #5a6270;
      margin-top: 2px;
    }
    @media (max-width: 520px) {
      .trip-detail-map {
        height: min(48vh, 420px);
        min-height: 220px;
      }
      .trip-detail-body {
        padding: 6px 14px 28px;
      }
    }

    .trip-log-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 0 0 12px;
    }
    .trip-log-stat {
      background: #fff;
      border: 1px solid #e6eaf2;
      border-radius: 12px;
      padding: 12px 10px;
      text-align: left;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    .trip-log-stat-value {
      display: block;
      font-size: 20px;
      font-weight: 850;
      color: #07093e;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
    .trip-log-stat-label {
      display: block;
      font-size: 12px;
      color: #5a6270;
      margin-top: 2px;
      font-weight: 650;
    }
    .trip-log-stat-rails {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .trip-log-tabs {
      display: flex;
      gap: 6px;
      margin: 0 0 12px;
    }
    .trip-log-tab {
      flex: 1;
      min-height: 40px;
      border: 1px solid #c5cad3;
      background: #fff;
      color: #07093e;
      font-weight: 700;
      font-size: 13px;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
    }
    .trip-log-tab.active {
      background: #07093e;
      color: #fff;
      border-color: #07093e;
    }
    .trip-log-pane { display: none; }
    .trip-log-pane.active { display: block; }
    .trip-log-list { display: flex; flex-direction: column; gap: 12px; }
    .trip-log-row {
      position: relative;
      border: 1px solid #e2e6ef;
      border-radius: 14px;
      padding: 14px 14px 12px;
      background: #fff;
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    }
    .trip-log-row-top {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-right: 76px;
      gap: 8px;
      align-items: center;
      margin-bottom: 6px;
    }
    .trip-log-row-top .trip-log-row-rail { margin-top: 0; flex: 1 1 auto; min-width: 0; }
    .trip-log-row-top .trip-log-row-relative { margin-top: 0; flex-shrink: 0; }
    .trip-log-row-rail {
      font-weight: 700;
      color: #3a4250;
      font-size: 12px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
    }
    .trip-log-row[data-rail-accent] {
      padding-left: 14px;
    }
    .trip-rail-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.02em;
      color: #fff;
      background: var(--rr-trip-rail, #07093e);
      line-height: 1.4;
      white-space: nowrap;
    }
    .trip-rail-badge-train {
      font-weight: 650;
      color: #5a6270;
      font-size: 12px;
    }
    .trip-train-chip {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      font-weight: 850;
      color: #07093e;
      background: #e8ecf5;
      border: 1px solid #d0d7e6;
      line-height: 1.3;
      white-space: nowrap;
      letter-spacing: -0.01em;
    }
    .trip-train-chip.compact {
      font-size: 12px;
      padding: 2px 8px;
      font-weight: 800;
    }
    .trip-detail-when {
      font-weight: 750;
      color: #07093e;
      letter-spacing: -0.01em;
    }
    .trip-detail-facts {
      display: flex;
      flex-wrap: wrap;
      margin: 0 0 16px;
    }
    .trip-detail-fact {
      background: #f4f6fb;
      border: 1px solid #e2e6ef;
      border-radius: 999px;
      font-weight: 750;
      color: #07093e;
      line-height: 1.35;
    }
    .trip-log-row-facts {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
      font-size: 12px;
      color: #7a8290;
    }
    .trip-log-row-facts .trip-log-row-miles,
    .trip-log-row-facts .trip-log-row-stock {
      margin-top: 0;
    }
    .trip-log-seg-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
    }
    .trip-seg-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      padding: 4px 8px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 650;
      color: #1a1f2a;
      background: #f3f5f9;
      border: 1px solid #e2e6ef;
      border-left: 3px solid var(--rr-trip-rail, #07093e);
    }
    .trip-seg-chip .trip-rail-badge { font-size: 10px; padding: 1px 6px; }
    .trip-segment[data-rail-accent] {
      border-left: 4px solid var(--rr-trip-rail, #07093e);
    }
    .trip-segment-rail-chip {
      display: inline-flex;
      margin-left: 8px;
      vertical-align: middle;
    }
    .trip-log-row-miles {
      font-weight: 600;
      color: #8a93a3;
      font-size: 11px;
      white-space: nowrap;
      margin-top: 4px;
    }
    .trip-log-row-route {
      font-size: clamp(16px, 3.6vw, 19px);
      font-weight: 800;
      color: #07093e;
      line-height: 1.25;
      letter-spacing: -0.015em;
      margin: 0;
      padding-right: 36px;
    }
    .trip-log-row-meta {
      font-size: 12px;
      color: #7a8290;
      margin-top: 6px;
    }

    .trip-log-row-stock {
      font-size: 11px;
      font-weight: 650;
      color: #6a7384;
      margin-top: 4px;
      letter-spacing: 0.01em;
    }
    .trip-detail-stock {
      font-weight: 700;
      color: #3a4250;
    }
    #trip-log-notes {
      min-height: 72px;
      resize: vertical;
      width: 100%;
      box-sizing: border-box;
      font-family: inherit;
      font-size: 14px;
      line-height: 1.4;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #c5cad3;
    }
    #trip-log-rolling-stock {
      width: 100%;
      box-sizing: border-box;
    }

    /* offline buffer / reconnect flush / stale-tolerant markers */
    .trip-special-block {
      margin: 12px 0 4px;
      padding: 12px 12px 10px;
      border-radius: 12px;
      background: linear-gradient(180deg, #fff8ef 0%, #fff3e0 100%);
      border: 1px solid #f0d2a8;
    }
    .trip-special-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      color: #7a4a12;
      cursor: pointer;
      user-select: none;
    }
    .trip-special-toggle input { width: 18px; height: 18px; accent-color: #c47a1a; }
    .trip-special-hint {
      margin: 6px 0 0;
      font-size: 12.5px;
      line-height: 1.35;
      color: #8a5a28;
    }
    #trip-special-title-wrap { margin-top: 10px; }
    #trip-log-train-title {
      width: 100%;
      box-sizing: border-box;
      font-size: 14px;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #e0b87a;
      background: #fff;
    }
    .trip-special-block.is-on .trip-special-hint { margin-bottom: 0; }
    .trip-segment.trip-seg-special-mode .trip-seg-train-pick-row,
    .trip-segment.trip-seg-special-mode .trip-seg-train-hint { display: none !important; }
    .trip-segment.trip-seg-special-mode .trip-seg-train-optional-note {
      margin: 4px 0 0;
      font-size: 12px;
      color: #8a5a28;
    }
    .trip-special-badge {
      display: inline-block;
      margin-left: 6px;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: #7a4a12;
      background: #ffe2b8;
      border: 1px solid #f0c280;
      vertical-align: middle;
    }
    .trip-detail-special-share {
      margin: 10px 0 12px;
      padding: 12px;
      border-radius: 12px;
      background: #fff8ef;
      border: 1px solid #f0d2a8;
    }
    .trip-detail-special-share[hidden] { display: none !important; }
    .trip-detail-special-title {
      margin: 0 0 8px;
      font-size: 14px;
      font-weight: 800;
      color: #7a4a12;
    }
    .trip-detail-special-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 6px;
    }
    .trip-detail-share-status {
      margin: 4px 0 0;
      font-size: 12.5px;
      color: #6a5538;
      min-height: 1.2em;
    }
    .trip-detail-share-wake { display: block; margin-top: 2px; }
    .trip-detail-share-status.is-error {
      color: #9b1c1c;
      font-weight: 700;
      background: #ffe8e8;
      border: 1px solid #f0b4b4;
      border-radius: 8px;
      padding: 6px 8px;
    }
    .leaflet-marker-icon.rr-special-share-icon {
      background: transparent !important;
      border: none !important;
    }
    .rr-special-share-pin {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #ffd79a, #e89420 62%, #b86a0c 100%);
      border: 3px solid #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 2px rgba(232,148,32,0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 15px;
      line-height: 1;
    }
    .rr-special-share-pin::before {
      content: "✦";
      font-size: 14px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    }
    .rr-special-share-popup {
      min-width: 140px;
      font-size: 13px;
      line-height: 1.35;
      color: #1a2030;
    }
    .rr-special-share-popup strong {
      display: block;
      font-size: 14px;
      color: #7a4a12;
      margin-bottom: 2px;
    }
    .rr-special-share-popup .rr-ss-meta { color: #5a6577; font-size: 12px; }
    .trip-log-row-actions {
      position: absolute;
      top: 8px;
      right: 8px;
      margin-top: 0;
      display: flex;
      gap: 4px;
      z-index: 3;
    }
    .trip-log-row-actions button {
      font-size: 15px;
      font-weight: 700;
      width: 32px;
      height: 32px;
      padding: 0;
      border-radius: 8px;
      border: 1px solid transparent;
      background: transparent;
      color: #9aa3b8;
      cursor: pointer;
      font-family: inherit;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0.75;
    }
    .trip-log-row-actions button.danger {
      color: #9aa3b8;
      border-color: transparent;
      background: transparent;
    }
    .trip-log-empty, .trip-log-status {
      font-size: 13px;
      color: #5a6270;
      margin: 8px 0;
    }
    .trip-log-empty-card {
      text-align: center;
      padding: 28px 16px 24px;
      border: 1px dashed #d0d6e2;
      border-radius: 14px;
      background: #fafbfe;
      margin: 8px 0 12px;
    }
    .trip-log-empty-title {
      margin: 0 0 6px;
      font-size: 17px;
      font-weight: 800;
      color: #07093e;
    }
    .trip-log-empty-copy {
      margin: 0 0 14px;
      font-size: 13px;
      color: #5a6270;
      line-height: 1.45;
    }
    .trip-log-empty-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 8px 16px;
      border-radius: 10px;
      border: 1px solid #07093e;
      background: #07093e;
      color: #fff;
      font-weight: 750;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
    }
    .trip-log-skeletons {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 12px;
    }
    .trip-log-skeletons[hidden],
    .trip-log-empty-card[hidden],
    #trip-log-primary-log[hidden] {
      display: none !important;
    }
    .trip-log-skeleton {
      border: 1px solid #e6eaf2;
      border-radius: 14px;
      padding: 14px;
      background: #fff;
    }
    .trip-log-skel-line,
    .trip-log-skel-map {
      border-radius: 8px;
      background: linear-gradient(90deg, #eef1f7 0%, #f7f8fb 45%, #eef1f7 90%);
      background-size: 200% 100%;
      animation: rrTripSkel 1.2s ease-in-out infinite;
    }
    .trip-log-skel-line { height: 14px; margin-bottom: 10px; }
    .trip-log-skel-line.lg { height: 20px; width: 72%; }
    .trip-log-skel-line.sm { height: 12px; width: 44%; margin-bottom: 0; }
    .trip-log-skel-map { height: 120px; margin-top: 12px; }
    @keyframes rrTripSkel {
      0% { background-position: 100% 0; }
      100% { background-position: -100% 0; }
    }
    .trip-log-page-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .trip-log-approx-note {
      font-size: 11px;
      color: #7a8290;
      margin: 6px 0 0;
    }

    .trip-log-segments { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
    .trip-segment {
      border: 1px solid #e2e6ef;
      border-radius: 10px;
      padding: 10px;
      background: #fafbfe;
    }
    .trip-segment-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }
    .trip-segment-title { font-weight: 800; font-size: 13px; color: #07093e; }
    .trip-segment-remove {
      font-size: 12px;
      font-weight: 700;
      color: #b00020;
      background: #fff5f5;
      border: 1px solid #f0c2c2;
      border-radius: 6px;
      padding: 4px 8px;
      cursor: pointer;
      font-family: inherit;
    }
    .trip-segment label { margin-top: 6px; display: block; }
    .trip-segment-times {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .trip-segment-times label { margin-top: 6px; }
    #trip-log-add-segment { width: 100%; margin: 4px 0 10px; }
    .trip-log-row-segments {
      font-size: 12px;
      color: #3a4250;
      margin-top: 4px;
      white-space: pre-line;
    }
    .trip-log-row-map {
      margin-top: 10px;
      height: 148px;
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
      border: none;
      position: relative;
      z-index: 0;
      box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
    }
    .trip-log-row-map .leaflet-container {
      width: 100%;
      height: 100%;
      font: inherit;
    }
    /* Card train icons, scaled from the 44px main-map assets */
    .trip-log-row-map .leaflet-marker-icon.train-icon,
    .trip-log-row-map .leaflet-marker-icon.amtrak-nec-icon {
      width: 28px !important;
      height: 28px !important;
      max-width: 28px !important;
      max-height: 28px !important;
    }
    /* Trip mini-map fade removed (user: fade is bad) */
    .trip-log-row-map.is-empty::after {
      content: 'Map unavailable';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      pointer-events: none;
      z-index: 3;
    }
    .trip-log-row-map.is-loading::after {
      content: 'Loading map…';
    }
    html.rr-mytrips-page .trip-log-row-map .leaflet-control-container {
      display: none !important;
    }

    /* Trip cards easy-read: train chip + unlabeled when */
    /* Trip cards: railroad-color fill + light contrast (primary/first segment via --rr-trip-rail) */
    .trip-log-row[data-rail-accent],
    html.rr-mytrips-page .trip-log-row[data-rail-accent] {
      background: var(--rr-trip-rail, #07093e);
      color: #fff;
      border: none;
      border-left: none;
      box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
    }
    html.rr-mytrips-page .trip-log-row[data-rail-accent]:hover,
    html.rr-mytrips-page .trip-log-row[data-rail-accent]:focus-visible {
      border: none;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
      outline: none;
    }
    .trip-log-row[data-rail-accent] .trip-log-row-route,
    .trip-log-row[data-rail-accent] .trip-log-row-rail,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-route,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-rail {
      color: #fff;
    }
    /* High-contrast train chip on rail-colored cards (never muted white-on-color) */
    .trip-log-row[data-rail-accent] .trip-train-chip,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-train-chip {
      color: #07093e !important;
      background: #fff;
      border-color: rgba(255, 255, 255, 0.95);
      font-weight: 850;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    }
    .trip-log-row[data-rail-accent] .trip-log-row-facts,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-facts {
      color: rgba(255, 255, 255, 0.82);
    }
    .trip-log-row[data-rail-accent] .trip-log-row-miles,
    .trip-log-row[data-rail-accent] .trip-log-row-meta,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-miles,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-meta {
      color: rgba(255, 255, 255, 0.82);
    }
    .trip-log-row[data-rail-accent] .trip-rail-badge,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-rail-badge {
      background: rgba(255, 255, 255, 0.18) !important;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.28);
    }
    /* Trip countdown solid white */
    .trip-log-row[data-rail-accent] .trip-log-row-relative,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-relative {
      color: #07093e !important;
      background: #fff !important;
      border-color: #e2e6ef !important;
    }
    .trip-log-row[data-rail-accent] .trip-seg-chip,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-seg-chip {
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      border-color: rgba(255, 255, 255, 0.22);
      border-left-color: rgba(255, 255, 255, 0.55);
    }
    .trip-log-row[data-rail-accent] .trip-log-row-actions button,
    .trip-log-row[data-rail-accent] .trip-log-row-actions button.danger,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-actions button,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-actions button.danger {
      color: rgba(255, 255, 255, 0.85);
      background: transparent;
      border-color: transparent;
      opacity: 0.9;
    }
    .trip-log-row[data-rail-accent] .trip-log-row-actions button:hover,
    .trip-log-row[data-rail-accent] .trip-log-row-actions button:focus-visible,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-actions button:hover,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-actions button:focus-visible {
      background: rgba(255, 255, 255, 0.16);
      color: #fff;
      border-color: rgba(255, 255, 255, 0.28);
      opacity: 1;
    }
    .trip-log-row[data-rail-accent] .trip-log-row-stock {
      color: rgba(255, 255, 255, 0.78);
    }

    /* Trip detail rail bg */
    .trip-detail-overlay[data-rail-accent],
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] {
      background: var(--rr-trip-rail, #07093e);
    }
    html.rr-trip-detail-open,
    html.rr-trip-detail-open body {
      background: var(--rr-trip-rail, #07093e);
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-panel,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-panel {
      background: var(--rr-trip-rail, #07093e);
      color: #fff;
      box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.28);
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-accent {
      background: rgba(0, 0, 0, 0.18);
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-toolbar,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-toolbar {
      border-bottom-color: rgba(255, 255, 255, 0.16);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-back,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-back {
      background: #fff;
      color: #07093e;
      border-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-back:hover,
    .trip-detail-overlay[data-rail-accent] .trip-detail-back:focus-visible,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-back:hover,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-back:focus-visible {
      background: #fff;
      color: #07093e;
      outline: 2px solid #fff;
      outline-offset: 2px;
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-miles-pill,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-miles-pill {
      color: #fff;
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(255, 255, 255, 0.28);
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-route,
    .trip-detail-overlay[data-rail-accent] .trip-detail-relative,
    .trip-detail-overlay[data-rail-accent] .trip-detail-when,
    .trip-detail-overlay[data-rail-accent] .trip-detail-line,
    .trip-detail-overlay[data-rail-accent] .trip-detail-stock,
    .trip-detail-overlay[data-rail-accent] .trip-detail-seg-od,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-route,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-relative,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-when,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-line,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-stock,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-seg-od {
      color: #fff;
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-line,
    .trip-detail-overlay[data-rail-accent] .trip-detail-seg-title,
    .trip-detail-overlay[data-rail-accent] .trip-detail-seg-sub,
    .trip-detail-overlay[data-rail-accent] .trip-detail-stock,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-line,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-seg-title,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-seg-sub,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-stock {
      color: rgba(255, 255, 255, 0.82);
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-fact,
    .trip-detail-overlay[data-rail-accent] .trip-detail-meta-item,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-fact,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-meta-item {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(255, 255, 255, 0.28);
      color: #fff;
    }
    .trip-detail-overlay[data-rail-accent] .trip-train-chip,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-train-chip {
      color: #07093e !important;
      background: #fff;
      border-color: rgba(255, 255, 255, 0.95);
      font-weight: 850;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    }
    .trip-detail-overlay[data-rail-accent] .trip-rail-badge,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-rail-badge {
      background: rgba(255, 255, 255, 0.18) !important;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.28);
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-notes,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-notes {
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.12);
      border-left-color: rgba(255, 255, 255, 0.55);
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-seg,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-seg {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.22);
      border-left-color: rgba(255, 255, 255, 0.55);
      color: #fff;
    }
    /* Map stays Mapbox dark — do not paint rail color onto map chrome */

    /* Trip route to-word */
    .trip-route-to {
      font-weight: 600;
      font-size: 0.82em;
      opacity: 0.7;
      letter-spacing: 0;
      padding: 0 0.05em;
    }
    .trip-log-row[data-rail-accent] .trip-route-to,
    .trip-detail-overlay[data-rail-accent] .trip-route-to,
    .trip-seg-chip .trip-route-to,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-route-to,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-route-to {
      color: rgba(255, 255, 255, 0.78);
      opacity: 1;
    }
    .trip-log-row-route,
    .trip-detail-route,
    .trip-detail-seg-od {
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    /* Trip detail square corners */
    .trip-detail-overlay,
    .trip-detail-panel,
    .trip-detail-accent,
    .trip-detail-map,
    .trip-detail-map .leaflet-container,
    html.rr-mytrips-page .trip-detail-overlay,
    html.rr-mytrips-page .trip-detail-panel,
    html.rr-mytrips-page .trip-detail-map,
    html.rr-mytrips-page .trip-detail-map .leaflet-container {
      border-radius: 0;
    }
    .trip-detail-panel,
    html.rr-mytrips-page .trip-detail-panel {
      margin-top: 0;
    }

    /* Trip detail header route */
    .trip-detail-overlay {
      padding-top: env(safe-area-inset-top, 0px);
    }
    .trip-detail-toolbar {
      display: block;
      justify-content: flex-start;
    }
    .trip-detail-toolbar .trip-detail-route {
      font-size: clamp(20px, 4.6vw, 30px);
      font-weight: 850;
      letter-spacing: -0.02em;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .trip-detail-back,
    #trip-detail-back,
    .trip-detail-miles-pill,
    #trip-detail-miles {
      display: none !important;
    }
    .trip-detail-body .trip-detail-route {
      display: none;
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-toolbar,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-toolbar {
      background: rgba(0, 0, 0, 0.14);
    }
    .trip-detail-overlay[data-rail-accent] .trip-detail-toolbar .trip-detail-route,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-toolbar .trip-detail-route {
      color: #fff;
    }

    /* Trip detail fit viewport */
    /* Compact full-screen detail so a normal single-leg trip fits without scrolling.
       Map was ~58vh (biggest hog); shrink it and tighten gaps. Panel body scrolls only if content truly overflows. */
    .trip-detail-overlay {
      position: fixed !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      height: 100dvh !important;
      max-height: none !important;
      overflow: hidden;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: 0;
      box-sizing: border-box;
    }
    .trip-detail-overlay.open {
      display: flex !important;
    }
    .trip-detail-map {
      height: 42vh !important;
      min-height: 220px;
      max-height: none !important;
      flex: 1 1 42%;
    }
    html.rr-mytrips-page.rr-trip-detail-open,
    html.rr-mytrips-page.rr-trip-detail-open body {
      height: 100% !important;
      overflow: hidden !important;
    }
    .trip-detail-panel {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .trip-detail-accent {
      height: 4px;
      flex-shrink: 0;
      border-radius: 0;
    }
    .trip-detail-toolbar {
      flex-shrink: 0;
      padding: 8px 14px 6px;
      padding-top: 8px;
      border-bottom-width: 0;
    }
    .trip-detail-toolbar .trip-detail-route {
      font-size: clamp(17px, 4.2vw, 24px);
      line-height: 1.15;
      margin: 0;
    }
    .trip-detail-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 2px 14px max(10px, env(safe-area-inset-bottom, 0px));
    }
    .trip-detail-badges {
      gap: 5px;
      margin-bottom: 4px;
    }
    .trip-detail-relative {
      margin: 0 0 4px;
      font-size: clamp(14px, 3.2vw, 17px);
    }
    .trip-detail-live {
      margin: 0 0 4px;
      font-size: 12px;
    }
    .trip-detail-line {
      margin: 0 0 4px;
      font-size: 13px;
    }
    .trip-detail-when {
      margin: 0 0 6px;
      font-size: 13px;
      line-height: 1.3;
    }
    .trip-detail-notes {
      margin: 0 0 6px;
      padding: 6px 10px;
      font-size: 12px;
    }
    .trip-detail-seg-title {
      margin: 2px 0 4px;
    }
    .trip-detail-segs {
      gap: 6px;
      margin-bottom: 4px;
    }
    .trip-detail-seg {
      padding: 8px 10px;
    }
    .trip-detail-facts {
      margin-top: 6px;
      margin-bottom: 2px;
      padding-top: 0;
      gap: 6px;
    }
    .trip-detail-fact {
      padding: 5px 10px;
      font-size: 12px;
    }
    .trip-detail-stock {
      margin: 4px 0 0;
      font-size: 12px;
    }
    .trip-train-chip {
      padding: 4px 10px;
      font-size: 12px;
      min-height: 0;
    }
    /* Short phones (iPhone SE / small Android): even tighter map */
    @media (max-height: 700px) {
      .trip-detail-map {
        height: clamp(120px, 24vh, 168px);
        min-height: 120px;
        max-height: 168px;
      }
      .trip-detail-toolbar {
        padding: 6px 12px 4px;
      }
      .trip-detail-toolbar .trip-detail-route {
        font-size: clamp(16px, 4vw, 20px);
      }
      .trip-detail-body {
        padding: 0 12px max(8px, env(safe-area-inset-bottom, 0px));
      }
    }
    @media (max-height: 600px) {
      .trip-detail-map {
        height: 112px;
        min-height: 112px;
        max-height: 112px;
      }
    }


    /* Trip map main-style tiles */
    .trip-detail-map,
    .trip-detail-map .leaflet-container,
    .trip-log-row-map,
    .trip-log-row-map .leaflet-container,
    html.rr-mytrips-page .trip-detail-map,
    html.rr-mytrips-page .trip-detail-map .leaflet-container,
    html.rr-mytrips-page .trip-log-row-map,
    html.rr-mytrips-page .trip-log-row-map .leaflet-container,
    .trip-detail-overlay[data-rail-accent] .trip-detail-map,
    .trip-detail-overlay[data-rail-accent] .trip-detail-map .leaflet-container,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-map,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent] .trip-detail-map .leaflet-container {
      background: #e8ecf2;
    }
    .trip-detail-map.is-empty::after,
    .trip-log-row-map.is-empty::after,
    html.rr-mytrips-page .trip-detail-map.is-empty::after,
    html.rr-mytrips-page .trip-log-row-map.is-empty::after {
      color: #5a6577;
    }

    /* Trip detail less transparent */
    /* Detail-only: raise glass alpha on rail bg so pills/notes/segs read solid. List cards unchanged. */
    #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-detail-toolbar,
    html.rr-mytrips-page #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-detail-toolbar {
      background: rgba(0, 0, 0, 0.28);
      border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    }
    #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-detail-fact,
    #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-detail-meta-item,
    #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-detail-miles-pill,
    html.rr-mytrips-page #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-detail-fact,
    html.rr-mytrips-page #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-detail-meta-item,
    html.rr-mytrips-page #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-detail-miles-pill {
      background: rgba(255, 255, 255, 0.36);
      border-color: rgba(255, 255, 255, 0.48);
      color: #fff;
    }
    #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-detail-notes,
    html.rr-mytrips-page #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-detail-notes {
      background: rgba(255, 255, 255, 0.30);
      border-left-color: rgba(255, 255, 255, 0.7);
      color: #fff;
    }
    #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-detail-seg,
    html.rr-mytrips-page #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-detail-seg {
      background: rgba(255, 255, 255, 0.30);
      border-color: rgba(255, 255, 255, 0.40);
      border-left-color: rgba(255, 255, 255, 0.75);
      color: #fff;
    }

    /* Trip segment cards solid white */
    /* Multi-segment detail (and list seg chips): fully opaque white cards, dark text */
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg,
    #trip-detail-overlay[data-seg-count="4"] .trip-detail-seg,
    #trip-detail-overlay[data-seg-count="5"] .trip-detail-seg,
    #trip-detail-overlay[data-seg-count="6"] .trip-detail-seg,
    #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) .trip-detail-seg,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg,
    html.rr-mytrips-page #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) .trip-detail-seg {
      background: #fff !important;
      border: 1px solid #e2e6ef !important;
      border-left: 4px solid var(--rr-trip-rail, #07093e) !important;
      color: #07093e !important;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    }
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg-od,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg-od,
    #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) .trip-detail-seg-od,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg-od,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg-od {
      color: #07093e !important;
    }
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg-sub,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg-sub,
    #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) .trip-detail-seg-sub,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg-sub,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg-sub {
      color: #3a4250 !important;
    }
    .trip-log-row[data-rail-accent] .trip-log-seg-chips .trip-seg-chip,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-seg-chips .trip-seg-chip {
      background: #fff !important;
      border: 1px solid #e2e6ef !important;
      border-left: 3px solid var(--rr-trip-rail, #07093e) !important;
    }

    /* Trip route to visible on white segs */
    /* Comprehensive: beat ALL rail-accent white text inside solid-white multi-seg cards */
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg,
    #trip-detail-overlay[data-seg-count="4"] .trip-detail-seg,
    #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) .trip-detail-seg,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg,
    html.rr-mytrips-page #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) .trip-detail-seg {
      color: #07093e !important;
    }
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-detail-seg-od,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-detail-seg-od,
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-route-station,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-route-station,
    #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) .trip-detail-seg .trip-detail-seg-od,
    #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) .trip-detail-seg .trip-route-station,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-detail-seg-od,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-detail-seg-od,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-route-station,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-route-station {
      color: #07093e !important;
      opacity: 1 !important;
    }
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-route-to,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-route-to,
    #trip-detail-overlay[data-seg-count="4"] .trip-detail-seg .trip-route-to,
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-detail-seg-sub,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-detail-seg-sub,
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-detail-seg-title,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-detail-seg-title,
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-rail-badge-train,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-rail-badge-train,
    #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) .trip-detail-seg .trip-route-to,
    #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) .trip-detail-seg .trip-detail-seg-sub,
    #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) .trip-detail-seg .trip-rail-badge-train,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-route-to,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-route-to,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-detail-seg-sub,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-detail-seg-sub,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-rail-badge-train,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-rail-badge-train {
      color: #5a6577 !important;
      opacity: 1 !important;
    }
    /* Train chip: keep white/light pill + navy text on white card */
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-train-chip,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-train-chip,
    #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) .trip-detail-seg .trip-train-chip,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-train-chip,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-train-chip {
      color: #07093e !important;
      background: #eef1f8 !important;
      border-color: #d0d7e6 !important;
      box-shadow: none;
    }
    /* Rail badge inside white seg: solid rail fill + white label (not frosted white-on-white) */
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-rail-badge,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-rail-badge,
    #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) .trip-detail-seg .trip-rail-badge,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg .trip-rail-badge,
    html.rr-mytrips-page #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg .trip-rail-badge {
      color: #fff !important;
      background: var(--rr-trip-rail, #07093e) !important;
      border: 1px solid transparent !important;
    }
    /* List multi-seg chips: all child text dark */
    .trip-log-row[data-rail-accent] .trip-log-seg-chips .trip-seg-chip,
    .trip-log-row[data-rail-accent] .trip-log-seg-chips .trip-seg-chip .trip-route-station,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-seg-chips .trip-seg-chip,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-seg-chips .trip-seg-chip .trip-route-station {
      color: #07093e !important;
      opacity: 1 !important;
    }
    .trip-log-row[data-rail-accent] .trip-log-seg-chips .trip-seg-chip .trip-route-to,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-seg-chips .trip-seg-chip .trip-route-to {
      color: #5a6577 !important;
      opacity: 1 !important;
    }
    .trip-log-row[data-rail-accent] .trip-log-seg-chips .trip-seg-chip .trip-rail-badge,
    html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-seg-chips .trip-seg-chip .trip-rail-badge {
      color: #fff !important;
      background: var(--rr-trip-rail, #07093e) !important;
      border-color: transparent !important;
    }
    /* Top route heading stays on rail color — keep "to" clearly white */
    #trip-detail-overlay[data-rail-accent] .trip-detail-toolbar .trip-route-to,
    #trip-detail-overlay[data-rail-accent] #trip-detail-route .trip-route-to,
    html.rr-mytrips-page #trip-detail-overlay[data-rail-accent] .trip-detail-toolbar .trip-route-to,
    html.rr-mytrips-page #trip-detail-overlay[data-rail-accent] #trip-detail-route .trip-route-to {
      color: #fff !important;
      opacity: 0.92 !important;
    }
    #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-rail-badge,
    html.rr-mytrips-page #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-rail-badge {
      background: rgba(255, 255, 255, 0.36) !important;
      border-color: rgba(255, 255, 255, 0.48);
    }
    #trip-detail-overlay.trip-detail-overlay[data-rail-accent] .trip-detail-accent {
      background: rgba(0, 0, 0, 0.32);
    }

    /* Trip detail segment spacing */
    /* Loosen fit-viewport crush for readable multi-leg detail; single-leg still mostly one screen. */
    #trip-detail-overlay .trip-detail-toolbar {
      padding: 10px 14px 8px;
    }
    #trip-detail-overlay .trip-detail-body {
      padding: 6px 14px max(12px, env(safe-area-inset-bottom, 0px));
    }
    #trip-detail-overlay .trip-detail-badges {
      gap: 6px;
      margin-bottom: 8px;
    }
    #trip-detail-overlay .trip-detail-relative {
      margin: 0 0 6px;
    }
    #trip-detail-overlay .trip-detail-live {
      margin: 0 0 6px;
    }
    #trip-detail-overlay .trip-detail-line {
      margin: 0 0 6px;
    }
    #trip-detail-overlay .trip-detail-when {
      margin: 0 0 10px;
    }
    #trip-detail-overlay .trip-detail-notes {
      margin: 0 0 10px;
      padding: 8px 12px;
    }
    #trip-detail-overlay .trip-detail-seg-title {
      margin: 6px 0 8px;
    }
    #trip-detail-overlay .trip-detail-segs {
      gap: 12px;
      margin: 4px 0 8px;
    }
    #trip-detail-overlay .trip-detail-seg {
      padding: 12px 12px;
    }
    #trip-detail-overlay .trip-detail-seg-top {
      gap: 8px;
      margin-bottom: 8px;
    }
    #trip-detail-overlay .trip-detail-seg-od {
      line-height: 1.25;
    }
    #trip-detail-overlay .trip-detail-seg-sub {
      margin-top: 6px;
      line-height: 1.4;
    }
    #trip-detail-overlay .trip-detail-facts {
      margin-top: 12px;
      margin-bottom: 4px;
      gap: 8px;
    }
    /* 2+ segment legs: clearer separation (slight scroll OK) */
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-map,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-map,
    #trip-detail-overlay[data-seg-count="4"] .trip-detail-map,
    #trip-detail-overlay[data-seg-count="5"] .trip-detail-map,
    #trip-detail-overlay[data-seg-count="6"] .trip-detail-map {
      height: clamp(120px, 24vh, 180px);
      min-height: 120px;
      max-height: 180px;
    }
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-segs,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-segs,
    #trip-detail-overlay[data-seg-count="4"] .trip-detail-segs,
    #trip-detail-overlay[data-seg-count="5"] .trip-detail-segs,
    #trip-detail-overlay[data-seg-count="6"] .trip-detail-segs,
    #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) {
      gap: 14px;
      margin: 8px 0 12px;
    }
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-seg,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-seg,
    #trip-detail-overlay[data-seg-count="4"] .trip-detail-seg,
    #trip-detail-overlay[data-seg-count="5"] .trip-detail-seg,
    #trip-detail-overlay[data-seg-count="6"] .trip-detail-seg,
    #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) .trip-detail-seg {
      padding: 14px 12px;
    }
    #trip-detail-overlay[data-seg-count="2"] .trip-detail-facts,
    #trip-detail-overlay[data-seg-count="3"] .trip-detail-facts,
    #trip-detail-overlay[data-seg-count="4"] .trip-detail-facts,
    #trip-detail-overlay .trip-detail-segs:has(.trip-detail-seg:nth-child(2)) ~ .trip-detail-facts {
      margin-top: 14px;
    }

    /* Trip detail share png */
    /* Trip share btn bottom left */
    .trip-detail-share-btn {
      position: absolute;
      left: max(12px, env(safe-area-inset-left, 0px));
      bottom: max(12px, env(safe-area-inset-bottom, 0px));
      top: auto;
      right: auto;
      z-index: 9;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: 0;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.42);
      background: rgba(255, 255, 255, 0.42);
      color: #fff;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    }
    .trip-detail-share-btn:hover,
    .trip-detail-share-btn:focus-visible {
      background: rgba(255, 255, 255, 0.5);
      outline: 2px solid #fff;
      outline-offset: 2px;
    }
    .trip-detail-share-btn:disabled {
      opacity: 0.55;
      cursor: wait;
    }
    .trip-detail-share-btn svg {
      width: 18px;
      height: 18px;
      display: block;
    }
    /* Trip share header logo */
    /* Same full wordmark as site header; no plate — transparent around logo pixels only */
    .trip-detail-share-logo {
      display: none;
      position: absolute;
      right: 10px;
      bottom: max(8px, env(safe-area-inset-bottom, 0px));
      width: auto;
      height: 44px;
      max-width: 55%;
      object-fit: contain;
      object-position: right bottom;
      z-index: 8;
      pointer-events: none;
      background: transparent;
      border-radius: 0;
      padding: 0;
      box-sizing: border-box;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
    }
    #trip-detail-overlay.trip-detail-capturing {
      position: fixed !important;
      inset: auto !important;
      top: 0 !important;
      left: 0 !important;
      width: 360px !important;
      height: 640px !important;
      max-width: 360px !important;
      max-height: 640px !important;
      display: flex !important;
      flex-direction: column !important;
      background: #0b0d1a !important;
      overflow: hidden !important;
      transform: none !important;
      opacity: 1 !important;
    }
    #trip-detail-overlay.trip-detail-capturing .trip-detail-map {
      flex: 0 0 56% !important;
      height: 56% !important;
      min-height: 0 !important;
      max-height: none !important;
    }
    #trip-detail-overlay.trip-detail-capturing .trip-detail-panel {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }
    #trip-detail-overlay.trip-detail-capturing #trip-detail-save-bar {
      display: none !important;
    }
    #trip-detail-overlay.trip-detail-capturing .trip-detail-share-logo {
      display: none !important;
    }
    /* Hide download/share control entirely while rasterizing PNG */
    #trip-detail-overlay.trip-detail-capturing #trip-detail-share,
    #trip-detail-overlay.trip-detail-capturing .trip-detail-share-btn {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    #trip-detail-overlay .trip-detail-panel {
      position: relative;
    }
    #trip-log-add-segment:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    /* Trip dual-rail diagonal */
    /* 2+ distinct railroads → diagonal split of first two colors (135deg). Single-rail stays solid. */
    .trip-log-row[data-rail-accent][data-rail-dual],
    html.rr-mytrips-page .trip-log-row[data-rail-accent][data-rail-dual] {
      background: linear-gradient(
        135deg,
        var(--rr-trip-rail, #07093e) 0%,
        var(--rr-trip-rail, #07093e) 49.5%,
        var(--rr-trip-rail-2, #07093e) 50.5%,
        var(--rr-trip-rail-2, #07093e) 100%
      );
    }
    .trip-detail-overlay[data-rail-accent][data-rail-dual],
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent][data-rail-dual],
    .trip-detail-overlay[data-rail-accent][data-rail-dual] .trip-detail-panel,
    html.rr-mytrips-page .trip-detail-overlay[data-rail-accent][data-rail-dual] .trip-detail-panel {
      background: linear-gradient(
        135deg,
        var(--rr-trip-rail, #07093e) 0%,
        var(--rr-trip-rail, #07093e) 49.5%,
        var(--rr-trip-rail-2, #07093e) 50.5%,
        var(--rr-trip-rail-2, #07093e) 100%
      );
    }
    html.rr-trip-detail-open[data-rail-dual],
    html.rr-trip-detail-open[data-rail-dual] body {
      background: linear-gradient(
        135deg,
        var(--rr-trip-rail, #07093e) 0%,
        var(--rr-trip-rail, #07093e) 49.5%,
        var(--rr-trip-rail-2, #07093e) 50.5%,
        var(--rr-trip-rail-2, #07093e) 100%
      );
    }
    .trip-detail-overlay[data-rail-accent][data-rail-dual] .trip-detail-accent {
      background: linear-gradient(
        90deg,
        var(--rr-trip-rail, #07093e) 0 50%,
        var(--rr-trip-rail-2, #07093e) 50% 100%
      );
    }

    @media (max-width: 420px) {
      .trip-segment-times { grid-template-columns: 1fr; }
    }
    @media (max-width: 420px) {
      .trip-log-stats { grid-template-columns: 1fr; }
    }

   #report-train-pick-row {
     display: flex;
     gap: 8px;
     align-items: flex-end;
     margin-top: 0;
   }
   #report-train-select-wrap {
     flex: 1;
     min-width: 0;
   }
   #report-train-extra-btn {
     flex-shrink: 0;
     min-height: 44px;
     padding: 8px 12px;
     border: 1px solid #07093e;
     background: #fff;
     color: #07093e;
     font-size: 13px;
     font-family: inherit;
     font-weight: 600;
     cursor: pointer;
     white-space: nowrap;
   }
   #report-train-extra-btn.active {
     background: #07093e;
     color: #fff;
   }
   #report-train-select:disabled {
     opacity: 0.55;
   }
   .rr-modal-hint {
     font-size: 12px;
     color: #5a6577;
     margin-top: 8px;
   }
   .rr-modal-error {
     display: none;
     margin-top: 10px;
     padding: 10px;
     background: #fdecea;
     color: #c0392b;
     font-size: 13px;
   }

   .rr-modal-error.visible { display: block; }

   .rr-lightbox {
     background: #fff;
     width: min(900px, 100%);
     max-height: 90vh;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     border-radius: 0;
     box-shadow: 0 12px 40px rgba(0,0,0,0.35);
     font-family: 'Segoe UI', sans-serif;
   }
   .rr-lightbox .rr-modal-header { flex-shrink: 0; }
   .rr-lightbox-body {
     padding: 16px;
     overflow: auto;
     flex: 1;
     min-height: 0;
   }
   .rr-lightbox-section {
     margin-bottom: 18px;
     padding-bottom: 14px;
     border-bottom: 1px solid #e8eaef;
   }
   .rr-lightbox-section:last-child { border-bottom: none; margin-bottom: 0; }
   .rr-lightbox-section h3 {
     margin: 0 0 10px;
     font-size: 14px;
     color: #07093e;
     text-transform: uppercase;
     letter-spacing: 0.03em;
   }
   .rr-profile-row {
     display: flex;
     gap: 14px;
     align-items: center;
   }
   .rr-profile-avatar {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     object-fit: cover;
     background: #2c3e6b;
     flex-shrink: 0;
   }
   .rr-profile-meta { font-size: 14px; color: #1a1a2e; line-height: 1.45; }
   .rr-profile-meta .rr-muted { color: #5a6577; font-size: 13px; }
   .rr-report-stats {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
   }
   .rr-report-stat {
     background: #f4f6fa;
     border: 1px solid #e8eaef;
     border-radius: 8px;
     padding: 12px 14px;
   }
   .rr-report-stat-value {
     display: block;
     font-size: 22px;
     font-weight: 700;
     color: #07093e;
     line-height: 1.15;
     word-break: break-word;
   }
   .rr-report-stat-label {
     display: block;
     margin-top: 4px;
     font-size: 12px;
     color: #5a6577;
     font-weight: 600;
   }
   .rr-radio-row {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin: 8px 0;
   }
   .rr-radio-row label {
     display: flex;
     align-items: center;
     gap: 8px;
     font-weight: 500;
     font-size: 14px;
     color: #1a1a2e;
     margin: 0;
     cursor: pointer;
   }
   .rr-preview-box {
     margin-top: 10px;
     padding: 10px 12px;
     background: #f4f6fa;
     border: 1px solid #dfe3ea;
     font-size: 14px;
     color: #07093e;
   }
   .rr-preview-box strong { font-weight: 700; }
   .rr-lightbox-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-top: 8px;
   }
   .rr-btn {
     appearance: none;
     border: 1px solid #07093e;
     background: #07093e;
     color: #fff;
     font-family: inherit;
     font-size: 13px;
     font-weight: 700;
     padding: 10px 14px;
     cursor: pointer;
     text-transform: uppercase;
   }
   .rr-btn:hover { filter: brightness(1.08); }
   .rr-btn.secondary {
     background: #fff;
     color: #07093e;
   }
   .rr-btn.danger {
     background: #c0392b;
     border-color: #c0392b;
   }
   .rr-btn.danger.secondary {
     background: #fff;
     color: #c0392b;
     border-color: #c0392b;
   }
   .rr-btn:disabled { opacity: 0.55; cursor: not-allowed; }
   .rr-admin-tabs {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-bottom: 14px;
     border-bottom: 1px solid #e8eaef;
     padding-bottom: 10px;
   }
   .rr-admin-tab {
     appearance: none;
     border: 1px solid #c5cad3;
     background: #f4f6fa;
     color: #07093e;
     font-family: inherit;
     font-size: 13px;
     font-weight: 700;
     padding: 8px 12px;
     cursor: pointer;
   }
   .rr-admin-tab.active {
     background: #07093e;
     color: #fff;
     border-color: #07093e;
   }
   .rr-admin-pane { display: none; }
   .rr-admin-pane.active { display: block; }
   .rr-lightbox-body input[type="text"],
   .rr-lightbox-body input[type="email"],
   .rr-lightbox-body textarea {
     box-sizing: border-box;
     padding: 9px 10px;
     border: 1px solid #c5cad3;
     font-size: 14px;
     font-family: inherit;
     width: 100%;
   }

    .admin-badge-icon {
      width: 0.92em;
      height: 0.92em;
      object-fit: contain;
      vertical-align: -0.15em;
      margin-left: 0.35em;
      display: none;
    }
    .admin-badge-icon.is-visible { display: inline-block; }
    .admin-badge-icon.verified-badge-icon,
    .verified-badge-icon {
      width: 0.92em;
      height: 0.92em;
      vertical-align: -0.08em;
      margin-left: 0.22em;
    }
    .loco-report-last .admin-badge-icon.is-visible,
    .loco-report-text .admin-badge-icon.is-visible {
      width: 11px;
      height: 11px;
      vertical-align: middle;
      margin-left: 4px;
    }
    .loco-report-last .admin-badge-icon.verified-badge-icon.is-visible,
    .loco-report-text .admin-badge-icon.verified-badge-icon.is-visible,
    .loco-report-last .verified-badge-icon.is-visible,
    .loco-report-text .verified-badge-icon.is-visible {
      width: 11px;
      height: 11px;
      margin-left: 3px;
    }
    .signup-prompt-modal .rr-modal {
      width: min(440px, 100%);
    }
    .signup-prompt-modal .rr-modal-header {
      align-items: flex-start;
      gap: 10px;
    }
    .signup-prompt-modal #signup-prompt-title {
      flex: 1;
      line-height: 1.3;
      font-size: 16px;
    }
    .signup-prompt-sub {
      margin: 0 0 12px;
      font-size: 13px;
      line-height: 1.45;
      color: #2c3340;
    }
    .signup-prompt-sub strong {
      font-weight: 700;
    }
    .signup-prompt-note {
      margin: 0 0 16px;
      font-size: 12px;
      line-height: 1.5;
      color: #6b7785;
    }
    .signup-prompt-actions {
      justify-content: center;
    }
    .rr-interest-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 8px 0 14px;
    }
    .rr-interest-list label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: #222;
      cursor: pointer;
      padding: 6px 8px;
      border: 1px solid #e6e9ef;
      border-radius: 4px;
      background: #fff;
    }
    .rr-interest-list label:hover { background: #f4f6f9; }
    .rr-interest-dropdown { position: relative; }
    .rr-interest-toggle {
      width: 100%;
      text-align: left;
      padding: 8px 10px;
      border: 1px solid #cfd5de;
      background: #fff;
      font-size: 13px;
      cursor: pointer;
    }
    .rr-interest-menu {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 4px);
      z-index: 20;
      background: #fff;
      border: 1px solid #cfd5de;
      box-shadow: 0 8px 20px rgba(0,0,0,.12);
      padding: 8px;
      max-height: 240px;
      overflow: auto;
    }
    .rr-interest-menu[hidden] { display: none !important; }
    .rr-interest-summary {
      margin-top: 8px;
      font-size: 12px;
      color: #5a6577;
      line-height: 1.4;
    }
    body.rr-interest-locked #map,
    body.rr-interest-locked .header,
    body.rr-interest-locked .control-panel,
    body.rr-interest-locked .overlay,
    body.rr-interest-locked .footer,
    body.rr-interest-locked .leaflet-control-container {
      pointer-events: none;
      user-select: none;
    }
    body.rr-interest-locked #interest-railroads-modal {
      pointer-events: auto;
      z-index: 100080;
    }
    body.rr-legal-locked #map,
    body.rr-legal-locked .header,
    body.rr-legal-locked .control-panel,
    body.rr-legal-locked .overlay,
    body.rr-legal-locked .footer,
    body.rr-legal-locked .leaflet-control-container {
      pointer-events: none;
      user-select: none;
    }
    body.rr-legal-locked #legal-accept-modal {
      pointer-events: auto;
      z-index: 100081;
    }
    .signup-prompt-legal {
      margin: 10px 0 0;
      font-size: 12px;
      line-height: 1.45;
      color: #5a6577;
      text-align: center;
    }
    .signup-prompt-legal a {
      color: #1a4a8a;
      text-decoration: underline;
    }
    #btn-admin-header {
      display: none;
      margin-left: 0;
      padding: 8px;
      background: transparent;
      border: none;
      cursor: pointer;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      line-height: 0;
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }
    #btn-admin-header:hover { background-color: rgba(255,255,255,0.15); opacity: 1; }
    #btn-admin-header.is-visible { display: inline-flex !important; }
    #btn-admin-header img {
      width: 28px;
      height: 31px;
      display: block;
      object-fit: contain;
    }
    #settings-account-section .rr-modal-hint { font-size: 13px; color: #555; margin: 0; }
    /* .toggle-section div is a flex row; these blocks stack, and [hidden] has to win. */
    #settings-account-section > div { display: block; }
    #settings-account-section > div[hidden] { display: none; }
    #settings-account-section .cabcar-report-btn { margin-top: 12px; }
    .settings-account-name { margin: 0; font-weight: 700; }
    .settings-account-email { margin: 2px 0 0; font-size: 13px; color: #555; overflow-wrap: anywhere; }
    #settings-account-section .settings-account-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin: 12px 0 0;
    }
    #settings-account-section .settings-account-actions .cabcar-report-btn { margin-top: 0; }
    .rr-profile-name-row {
      display: flex;
      align-items: center;
      gap: 0.35em;
      flex-wrap: wrap;
      font-weight: 600;
      font-size: 18px;
      line-height: 1.2;
      color: #07093e;
    }
    #btn-account-settings {
      display: inline-flex;
      align-items: center;
      font-size: 16px;
      line-height: 1.2;
      font-weight: 700;
    }
    #btn-account-settings .header-account-name-text {
      font-size: 16px;
      line-height: 1.2;
      vertical-align: middle;
    }
    .header-report-points {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 8px;
      padding: 2px 8px;
      min-width: 1.75em;
      border-radius: 999px;
      background: rgba(255,255,255,0.16);
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: 0.02em;
      vertical-align: middle;
      white-space: nowrap;
    }
    .header-report-points[hidden] { display: none !important; }
    .header-report-points::after {
      content: ' pts';
      font-weight: 700;
      opacity: 0.9;
      font-size: 10px;
      margin-left: 2px;
    }

   #account-settings-modal.rr-modal-backdrop { z-index: 100060; }
   @media (max-width: 600px) {
     .rr-lightbox { width: 100%; max-height: 95vh; }
     .rr-profile-row { flex-direction: column; align-items: flex-start; }
   }


   .stops-list li.completed img.checkmark {
     width: 13px !important;
     height: 13px !important;
     vertical-align: middle;
     margin-left: 4px;
     flex-shrink: 0;
   }
   /* Footer Styles */
   .footer {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: #07093e;
     color: white;
     padding: 10px 20px;
     font-size: 13px;
     z-index: 999;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
   }
   .footer-left {
     display: flex;
     align-items: center;
     gap: 15px;
   }
   .footer a {
     color: #a8c0e0;
     text-decoration: none;
     transition: color 0.2s ease;
   }
   .footer a:hover {
     color: #ffffff;
     text-decoration: underline;
   }
   .footer .copyright {
     color: #a8c0e0;
   }
   .footer .footer-link {
     background: none;
     border: 0;
     padding: 0;
     font: inherit;
     color: #a8c0e0;
     cursor: pointer;
   }
   .footer .footer-link:hover {
     color: #ffffff;
     text-decoration: underline;
   }

    /* Header right cluster: auth + menu */
    .header-right {
      margin-left: auto;
      margin-right: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      position: relative;
      z-index: 10001;
    }
    .header-right .header-auth { flex-shrink: 0; margin-left: 8px; }
    .rr-mobile-nav{display:none;flex-direction:column;gap:4px}
    .rr-mobile-nav a{text-decoration:none}
    #btn-report-train-menu{display:none}
    @media (max-width: 980px){
      .rr-site-nav,#btn-report-train-header{display:none !important}
      .rr-mobile-nav{display:flex}
      #btn-report-train-menu{display:block}
      .header-right{margin-right:8px}
    }
    html.rr-report-in-menu #btn-report-train-header{display:none !important}
    html.rr-report-in-menu #btn-report-train-menu{display:block}
    html.rr-nav-in-menu .rr-site-nav{display:none !important}
    html.rr-nav-in-menu .rr-mobile-nav{display:flex}
    
    .header-auth {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      position: relative;
    }
    .header-auth-btn {
      background: #fff;
      color: #07093e;
      border: none;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      border-radius: 0;
      white-space: nowrap;
    }
    .header-auth-btn:hover { background: #e8eaf0; }
    .header-auth-btn.settings {
      background: transparent;
      color: #fff;
      border: none;
    }
    .header-auth-btn.settings:hover {
      background: transparent;
      opacity: 0.85;
      text-decoration: underline;
    }
    .header-auth-user {
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
    }
    .header-auth-user:hover .header-account-menu,
    .header-auth-user:focus-within .header-account-menu {
      display: block !important;
    }
    #btn-report-train-header {
      background: #fff;
      color: #07093e;
      border: none;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
    }
    #btn-report-train-header:hover { background: #e8eaf0; }
    .header-user-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255,255,255,0.85);
      background: #2c3e6b;
      flex-shrink: 0;
    }
    .header-user-avatar.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
    }
    .header-account-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 220px;
      width: max-content;
      max-width: min(340px, calc(100vw - 16px));
      background: #fff;
      color: #07093e;
      box-shadow: 0 8px 24px rgba(0,0,0,0.22);
      border: 1px solid #e5e7eb;
      z-index: 10002;
      padding: 8px 0;
    }
    /* Covers the gap above the menu so moving the pointer down to it keeps it open. */
    .header-account-menu::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: -10px;
      height: 10px;
    }
    .header-account-email {
      padding: 8px 12px 10px;
      font-size: 12px;
      color: #555;
      border-bottom: 1px solid #eee;
      overflow-wrap: anywhere;
    }
    .header-account-menu .header-auth-btn {
      display: block;
      width: 100%;
      text-align: left;
      background: transparent;
      color: #07093e;
      border: none;
      border-radius: 0;
      padding: 10px 12px;
    }
    .header-account-menu a.header-auth-btn { text-decoration: none; box-sizing: border-box; }
    .header-account-menu .header-auth-btn:hover { background: #f1f2f6; }
    .header-user-avatar {
      cursor: pointer;
    }
    .map-theme-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 8px;
      font-size: 13px;
    }
    .map-theme-label { font-weight: 700; color: #07093e; margin-right: 4px; }
    .map-theme-option { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 500; }

    /* Tablet / phone: stop absolute-center search from overlapping logo + auth */
    @media (max-width: 820px) {
      .header {
        padding: 0 8px;
        gap: 6px;
      }
      .header-logo {
        height: 30px !important;
        margin-right: 4px;
        flex-shrink: 0;
      }
      .header-center {
        position: static;
        left: auto;
        right: auto;
        transform: none;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        margin-left: auto;
        justify-content: flex-end;
        z-index: 1;
      }
      .rr-site-nav, #btn-report-train-header, .header-search-container {
        display: none !important;
      }
      .header-search-results,
      .search-type-dropdown {
        display: none !important;
      }
      .header-search-input {
        font-size: 13px;
        padding: 7px 8px;
        padding-right: 68px;
      }
      .search-type-menu {
        font-size: 11px;
        padding: 4px 6px;
        right: 4px;
      }
      .header-right {
        gap: 4px;
        flex-shrink: 0;
      }
      .menu-button {
        width: 40px;
        height: 40px;
        padding: 8px;
      }
      .header-auth-btn {
        padding: 6px 8px;
        font-size: 11px;
      }
      /* Google sign-in button goes icon-only on narrow screens (google-signin.css) */
      #btn-report-train-header { font-size: 11px; padding: 6px 8px; }
      .header-user-avatar {
        width: 32px;
        height: 32px;
      }
      /* Mobile: pfp + admin badge only (no name text) */
      #header-account-name-text {
        display: none !important;
      }
      /* Keep report points visible beside avatar/badges on narrow screens */
      #header-report-points:not([hidden]) {
        display: inline-flex !important;
        margin-left: 4px;
        padding: 2px 6px;
        font-size: 11px;
      }
      #btn-account-settings:has(#header-report-points:not([hidden])) {
        display: inline-flex !important;
        padding: 0 4px;
        min-width: 0;
        background: transparent !important;
        color: #fff;
        gap: 0;
      }
      #btn-account-settings {
        padding: 0;
        min-width: 0;
        background: transparent !important;
        color: #fff;
        gap: 0;
      }
      #btn-account-settings:not(.is-admin):not(.is-verified) {
        display: none !important;
      }
      #btn-account-settings .admin-badge-icon.is-visible {
        margin-left: 0;
        width: 14px;
        height: 14px;
      }
      #btn-account-settings .admin-badge-icon.verified-badge-icon.is-visible {
        width: 14px;
        height: 14px;
      }
      .header-account-menu {
        right: 0;
        min-width: 180px;
      }
    }
    @media (max-width: 420px) {
      .header {
        padding: 0 6px;
      }
      .header-logo {
        height: 26px !important;
        margin-right: 2px;
      }
      .header-search-input {
        font-size: 12px;
        padding-right: 58px;
      }
      .search-type-menu {
        font-size: 10px;
        padding: 3px 4px;
      }
      .menu-button {
        width: 36px;
        height: 36px;
        padding: 6px;
      }
      .menu-button svg,
      .menu-button-icon {
        width: 22px;
        height: 22px;
      }
    }

    #offline-banner.offline-banner { display: none; }
    #offline-banner.offline-banner.visible { display: block; }
    #map .leaflet-top { top: 0; }
    #map .leaflet-bottom { bottom: var(--rr-footer-h, 0px); }
    #loading-screen { z-index: 100000; }
    #rr-rail-picker.is-open { display: flex !important; z-index: 100002; }
  

    .leaflet-popup-content-wrapper,
    .leaflet-popup-content,
    .train-popup,
    .station-popup {
      width: min(350px, calc(100vw - 24px)) !important;
      min-width: 0 !important;
      max-width: min(350px, calc(100vw - 24px)) !important;
      box-sizing: border-box !important;
      transform: none !important;
    }
    .leaflet-popup-content-wrapper {
      overflow: hidden !important;
      border-radius: 8px !important;
      background: #fff !important;
      box-shadow: 0 10px 28px rgba(0,0,0,0.28) !important;
      padding: 0 !important;
    }
    .leaflet-popup-content {
      overflow: hidden !important;
      max-height: min(520px, 75vh) !important;
      margin: 0 !important;
      padding: 0 !important;
      width: min(350px, calc(100vw - 24px)) !important;
      max-width: min(350px, calc(100vw - 24px)) !important;
      display: flex !important;
      flex-direction: column !important;
    }
    .train-popup,
    .station-popup {
      font-size: 13px !important;
      line-height: 1.35 !important;
      overflow: hidden !important;
      border-radius: 8px !important;
      max-height: min(520px, 75vh) !important;
      display: flex !important;
      flex-direction: column !important;
      background: #fff !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    .train-popup-header,
    .train-popup-body,
    .train-popup-footer,
    .station-popup {
      padding: 10px 12px !important;
    }
    .train-popup-header {
      flex-shrink: 0 !important;
      border-radius: 8px 8px 0 0 !important;
      padding: 12px 14px !important;
      position: relative !important;
      z-index: 2 !important;
    }
    .train-popup-body {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-x: hidden !important;
      overflow-y: auto !important; /* 28e: scroll to stops; was overflow:hidden clipping list */
      display: flex !important;
      flex-direction: column !important;
      -webkit-overflow-scrolling: touch;
    }
    .train-popup-body > .quick-status,
    .train-popup-body > .info-grid,
    .train-popup-body > .meta-row,
    .train-popup-body > .alert-banner,
    .train-popup-body > .loco-report-block,
    .train-popup-body > .report-loco-row {
      flex-shrink: 0 !important;
    }
    .train-popup-footer {
      flex-shrink: 0 !important;
      display: flex !important;
      gap: 8px !important;
      align-items: stretch !important;
      padding: 10px 12px !important;
      border-radius: 0 0 8px 8px !important;
      position: relative !important;
      z-index: 2 !important;
    }
    .train-popup-header h2,
    .train-popup-header h3,
    .station-popup h3 {
      font-size: 15px !important;
      line-height: 1.25 !important;
      margin: 0 0 4px !important;
    }
    .train-popup-header img,
    .station-popup img {
      width: 26px !important;
      height: 26px !important;
    }
    .info-grid { gap: 8px 10px !important; margin-bottom: 10px !important; }
    .info-item, .info-label, .info-value, .quick-status { font-size: 12px !important; }
    .stops-wrapper {
      flex: 1 1 auto !important;
      flex-shrink: 0 !important; /* never collapse under alert/report */
      min-height: 150px !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      margin-top: 6px !important;
    }
    .upcoming-stops { flex: 1 1 auto; flex-shrink: 0; min-height: 150px; display: flex; flex-direction: column; overflow: hidden; }
    .upcoming-stops h4 { font-size: 11px !important; margin: 2px 0 4px !important; flex-shrink: 0; color: #07093e; font-weight: 700; }
    .stops-list, .departures-list {
      max-height: 200px !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      min-height: 150px !important;
      flex: 1 1 auto !important;
      flex-shrink: 0 !important;
      padding: 0 6px 4px 0 !important;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: rgba(7,9,62,0.35) transparent;
    }
    .stops-list::-webkit-scrollbar,
    .departures-list::-webkit-scrollbar { width: 6px; }
    .stops-list::-webkit-scrollbar-thumb,
    .departures-list::-webkit-scrollbar-thumb {
      background: rgba(7,9,62,0.35);
      border-radius: 6px;
    }
    .stops-list li, .departures-list li {
      padding: 3px 4px !important;
      font-size: 11px !important;
      gap: 4px !important;
      line-height: 1.2 !important;
    }
    .stop-time, .stop-name, .stop-status, .departure-time, .track-badge,
    .departure-destination, .departure-status {
      font-size: 11px !important;
    }
    .stop-time { min-width: 58px !important; font-size: 10.5px !important; }
    .stop-status { font-size: 10px !important; padding: 1px 4px !important; }
    .stop-mileage { font-size: 9.5px !important; }
    .checkmark { width: 10px !important; height: 10px !important; }
    .track-badge { padding: 1px 4px !important; font-size: 9.5px !important; }
    /* Readable Departed / passed badge (was pale grey + light text) */
    .stop-status.status-passed,
    .stops-list li .stop-status.status-passed {
      background: #3d4454 !important;
      color: #ffffff !important;
      border: none !important;
    }
    .train-popup button, .station-popup button, .popup-action-btn,
    .train-popup .rr-btn, .train-popup a.button {
      font-size: 12.5px !important;
      padding: 9px 10px !important;
      line-height: 1.2 !important;
      min-height: 38px !important;
      box-sizing: border-box !important;
    }
    .train-popup-footer .popup-action-btn,
    .train-popup-footer button {
      flex: 1 1 0 !important;
    }
    /* Station: Refresh stays below scrollable departures */
    .station-popup > h3,
    .station-popup > p {
      flex-shrink: 0 !important;
    }
    .station-popup > .refresh-button,
    .station-popup > button.refresh-button {
      flex-shrink: 0 !important;
      margin-top: 8px !important;
      margin-bottom: 0 !important;
      position: relative !important;
      z-index: 2 !important;
    }
    .station-popup .departures-list {
      margin-bottom: 0 !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
    }
    .station-popup .departure-status {
      flex-shrink: 0 !important;
      white-space: nowrap !important;
      margin-right: 2px !important;
    }
    /* Close × readable on navy popup headers */
    .leaflet-container a.leaflet-popup-close-button,
    .leaflet-popup-close-button {
      color: #fff !important;
      text-shadow: 0 1px 2px rgba(0,0,0,0.55);
      font-size: 20px !important;
      width: 28px !important;
      height: 28px !important;
      line-height: 24px !important;
      top: 6px !important;
      right: 6px !important;
      opacity: 1 !important;
      z-index: 5 !important;
    }
    .leaflet-container a.leaflet-popup-close-button:hover,
    .leaflet-popup-close-button:hover {
      color: #e8ecff !important;
      background: rgba(255,255,255,0.12);
      border-radius: 4px;
    }
    /* Station popups have light headers — dark × */
    .leaflet-popup:has(.station-popup) .leaflet-popup-close-button,
    .leaflet-popup:has(.station-popup) a.leaflet-popup-close-button {
      color: #07093e !important;
      text-shadow: none;
    }
    @media (max-width: 700px) {
      /* Mobile: healthier side margins + shorter card so map stays visible */
      .leaflet-popup-content-wrapper,
      .leaflet-popup-content,
      .train-popup,
      .station-popup {
        width: min(320px, calc(100vw - 40px)) !important;
        max-width: min(320px, calc(100vw - 40px)) !important;
        min-width: 0 !important;
      }
      .leaflet-popup-content,
      .train-popup,
      .station-popup {
        max-height: min(420px, 62vh) !important;
      }
      .train-popup-header { padding: 10px 12px !important; }
      .train-popup-body { padding: 8px 12px !important; }
      .train-popup-footer { padding: 8px 10px !important; gap: 6px !important; }
      .info-grid { gap: 6px 8px !important; margin-bottom: 8px !important; }
      /* 28e: body scrolls; keep stops block non-collapsing + visible min height */
      .train-popup-body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
      }
      .alert-banner {
        max-height: 72px !important;
        overflow: hidden !important;
      }
      .loco-report-block {
        max-height: none !important;
        overflow: visible !important;
      }
      .loco-report-actions {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
      }
      .loco-report-actions .update-pairing-btn {
        flex: 1 1 120px;
        min-height: 36px;
      }
      .stops-wrapper,
      .upcoming-stops {
        min-height: 130px !important;
        flex: 1 1 auto !important;
        flex-shrink: 0 !important;
      }
      .stops-list, .departures-list {
        min-height: 130px !important;
        max-height: min(200px, 38vh) !important;
        flex: 1 1 auto !important;
        flex-shrink: 0 !important;
        overflow-y: auto !important;
      }
      .stops-list li, .departures-list li {
        padding: 2px 3px !important;
        font-size: 10.5px !important;
        gap: 3px !important;
      }
      .stop-time, .stop-name, .stop-status, .departure-time, .track-badge,
      .departure-destination, .departure-status {
        font-size: 10.5px !important;
      }
      .stop-time { min-width: 52px !important; font-size: 10px !important; }
      .stop-status { font-size: 9.5px !important; padding: 1px 3px !important; }
      .stop-mileage { font-size: 9px !important; }
      .track-badge { padding: 0 3px !important; font-size: 9px !important; }
      .train-popup button, .station-popup button, .popup-action-btn,
      .train-popup .rr-btn, .train-popup a.button {
        min-height: 40px !important;
        padding: 9px 8px !important;
        font-size: 12px !important;
      }
    }
    @media (max-width: 700px) and (max-height: 700px) {
      .leaflet-popup-content,
      .train-popup,
      .station-popup {
        max-height: min(380px, 58vh) !important;
      }
    }
  

    /* White/light × on dark navy headers (Settings, Alerts-related modals, etc.) */
    .rr-modal-header .rr-modal-close,
    .rr-lightbox .rr-modal-header .rr-modal-close,
    #account-settings-modal .rr-modal-close,
    #report-train-modal .rr-modal-close,
    #specials-board-modal .rr-modal-close,
    #weekly-leaderboard-modal .rr-modal-close,
    #signup-prompt-modal .rr-modal-close {
      color: #fff !important;
      opacity: 1 !important;
      text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    }
    .rr-modal-header .rr-modal-close:hover {
      color: #e8ecff !important;
    }
    /* Light-grey buttons must not use white text */
    .notify-confirm-btn:disabled,
    button.notify-confirm-btn:disabled {
      background: #d5dbe6 !important;
      border-color: #b7bfd0 !important;
      color: #07093e !important;
    }
    /* Railroad picker: keep corner radius; scroll the list, not the card */
    .rr-rail-picker-card {
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
    }
    .rr-rail-picker-list {
      overflow-y: auto !important;
      max-height: min(48vh, 360px) !important;
      margin-bottom: 12px !important;
      padding-right: 4px;
      scrollbar-width: thin;
    }
    .rr-rail-picker-actions { flex-shrink: 0 !important; }
  

    .stops-list li {
      display: grid !important;
      grid-template-columns: 58px minmax(0, 1fr) max-content;
      column-gap: 4px;
      align-items: start;
      overflow: visible !important;
    }
    .stops-list li .stop-name {
      min-width: 0;
      overflow: visible !important;
    }
    .stops-list li .stop-status {
      white-space: nowrap !important;
      overflow: visible !important;
      min-width: max-content !important;
      justify-self: end;
    }
    .stop-status.status-passed {
      background: #3d4454 !important;
      color: #ffffff !important;
    }
  

    html.rr-banned .header { display:flex !important; z-index:100000 !important; }
    html.rr-banned .header > :not(.header-logo):not(.header-logo-link) { display:none !important; }
    html.rr-banned #rr-banned-screen { top:60px !important; z-index:9000 !important; }
  

.trip-route-optional { margin: 8px 0; } .trip-route-optional summary { cursor: pointer; font-weight: 700; color: #07093e; }

    body.trip-form-special #trip-log-segments,
    body.trip-form-special #trip-log-add-segment,
    body.trip-form-special #trip-log-miles-preview { display: none !important; }
    .trip-special-loc { margin: 6px 0 0; font-size: 13px; color: #3a4250; }

    html.rr-mytrips-page #trip-log-live { display: inline-flex; align-items: center; min-height: 36px; }
    .trip-log-empty-live { margin-left: 8px; background: #fff !important; color: #07093e !important; border: 1px solid #07093e !important; }

#trip-log-go-live{background:#b00020;color:#fff;border:0;font-weight:800;letter-spacing:.04em}#trip-log-go-live[hidden]{display:none!important}body.trip-form-special:not(.trip-form-editing) #trip-log-save{display:none!important}body.trip-form-special:not(.trip-form-editing) #trip-log-go-live{display:inline-flex!important}
  

    /* ===== Header search bar (Oct 17): 32px controls, 4px radius, one font ===== */
    :root { --rr-hdr-font: "Google Sans", Roboto, Arial, sans-serif; }
    .header-right > .header-auth-btn,
    .header-right #btn-header-tools,
    #btn-header-search {
      height: 32px;
      box-sizing: border-box;
      padding: 0 12px;
      border-radius: 4px;
      font-family: var(--rr-hdr-font);
      font-size: 13px;
      font-weight: 500;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .header-search-container {
      width: auto;
      flex: 1 1 260px;
      min-width: 200px;
      max-width: min(300px, 28vw);
      height: 32px;
    }
    .header-search-input {
      height: 32px;
      box-sizing: border-box;
      border: 1px solid transparent;
      border-radius: 4px;
      padding: 0 74px 0 32px;
      font-family: var(--rr-hdr-font);
      font-size: 13px;
      color: #1f1f1f;
      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 10px center / 16px 16px;
      outline: none;
      text-overflow: ellipsis;
    }
    .header-search-input::placeholder { color: #5f6368; opacity: 1; }
    .header-search-input:focus,
    .header-search-input:focus-visible {
      outline: none;
      border-color: #8fd3ff;
      box-shadow: 0 0 0 2px #8fd3ff;
    }
    .search-type-menu {
      top: 1px;
      bottom: 1px;
      right: 1px;
      transform: none;
      height: auto;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 0 8px 0 10px;
      background: transparent;
      border: none;
      border-left: 1px solid #dadce0;
      border-radius: 0 3px 3px 0;
      font-family: var(--rr-hdr-font);
      font-size: 12px;
      font-weight: 500;
      color: #3c4043;
    }
    .search-type-menu::after {
      content: "";
      width: 12px;
      height: 12px;
      flex: 0 0 12px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%233c4043' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
    }
    .search-type-menu:hover { background: #f1f3f4; }
    .search-type-dropdown {
      top: calc(100% + 4px);
      border: 1px solid #dadce0;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 6px 18px rgba(0,0,0,0.18);
      font-family: var(--rr-hdr-font);
      min-width: 170px;
    }
    .search-type-option { font-size: 13px; }
    .header-search-results {
      top: calc(100% + 6px);
      left: auto;
      right: 0;
      width: max(100%, 380px);
      max-width: calc(100vw - 16px);
      box-sizing: border-box;
      max-height: min(70vh, 560px);
      background: #fff;
      border: 1px solid #dadce0;
      border-radius: 4px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.22);
      padding: 6px;
      font-family: var(--rr-hdr-font);
    }
    .header-search-results .search-section-header { padding: 4px 6px 4px; }
    .header-search-results .search-result { margin-bottom: 6px; }
    .header-search-results .search-result-header { padding: 6px 10px; font-size: 13px; gap: 4px 6px; }
    .header-search-results .search-result-header .route,
    .header-search-results .search-result-header .dest {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
    .header-search-results .search-result-body { padding: 5px 10px; gap: 6px 10px; }
    .header-search-results .search-result-meta { font-size: 12px; gap: 2px 10px; }
    .header-search-results .search-status-pill { padding: 3px 8px; font-size: 11px; border-radius: 4px; }
    .header-right #btn-header-search { display: none; }
    #btn-header-search svg { width: 18px; height: 18px; display: block; }
    html.rr-train-page #btn-header-search,
    html.rr-mytrips-page #btn-header-search { display: none !important; }
    @media (max-width: 820px) {
      .header-right > .header-auth-btn,
      .header-right #btn-header-tools { height: 32px; padding: 0 10px; font-size: 13px; }
      .header-right #btn-header-search { display: inline-flex; width: 32px; padding: 0; }
      html.rr-search-open #btn-header-search { box-shadow: 0 0 0 2px #8fd3ff; }
      html.rr-search-open .header-search-container {
        display: flex !important;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        min-width: 0;
        height: auto;
        padding: 8px;
        box-sizing: border-box;
        background: #07093e;
        border-top: 1px solid rgba(255,255,255,0.12);
        z-index: 10003;
      }
      html.rr-search-open .header-search-input { font-size: 16px; height: 36px; padding: 0 84px 0 34px; }
      html.rr-search-open .search-type-menu { right: 9px; top: 9px; bottom: 9px; font-size: 13px; }
      html.rr-search-open .search-type-dropdown.show { display: block !important; right: 8px; top: calc(100% - 4px); }
      html.rr-search-open .header-search-results.active {
        display: block !important;
        position: fixed;
        top: 112px;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        max-height: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: #f4f6f9;
        padding: 8px;
        overscroll-behavior: contain;
      }
    }

    /* Desktop: search box centered in the header (left/width set by rrLayoutHeaderSearch) */
    @media (min-width: 821px) {
      .header-search-container {
        position: absolute;
        top: 14px;
        left: 50%;
        width: 440px;
        max-width: none;
        min-width: 0;
        flex: none;
        z-index: 10002;
      }
      .header-right { margin-left: auto; }
      .header-search-results {
        left: 0;
        right: auto;
        width: max(100%, 380px);
      }
    }

/* ===== MyTrips redesign (Oct 17): light theme (default) =====
   One font (header stack), 13px base, 4px corners on every button/field, pills only for status chips,
   36px main / 32px small buttons, navy filled + outlined, white cards with a rail-color left bar. */
html.rr-mytrips-page {
  --mt-navy: #07093e;
  --mt-ink: #1a1f2e;
  --mt-muted: #5f6673;
  --mt-faint: #8a919c;
  --mt-line: #e3e6eb;
  --mt-field: #c5cad3;
  --mt-bg: #f5f6f8;
  --mt-font: "Google Sans", Roboto, Arial, sans-serif;
}
html.rr-mytrips-page body { background: var(--mt-bg) !important; }
html.rr-mytrips-page #trip-log-modal,
html.rr-mytrips-page #trip-log-modal * { font-family: var(--mt-font) !important; letter-spacing: 0 !important; }
html.rr-mytrips-page #trip-log-modal { background: var(--mt-bg) !important; }
html.rr-mytrips-page #trip-log-modal .rr-modal {
  background: transparent !important; box-shadow: none !important; border: none !important;
  max-width: 960px !important; width: 100% !important; margin: 0 auto !important; padding: 0 20px 40px !important;
  box-sizing: border-box; color: var(--mt-ink); font-size: 13px;
}
/* ---------- page header ---------- */
html.rr-mytrips-page #trip-log-modal .rr-modal-header {
  display: flex !important; align-items: center !important; justify-content: space-between; gap: 12px;
  padding: 22px 0 16px !important; border: none !important; background: transparent !important; flex-wrap: wrap;
}
html.rr-mytrips-page #trip-log-title { font-size: 24px !important; font-weight: 700 !important; color: var(--mt-navy) !important; }
html.rr-mytrips-page .trip-log-page-actions { display: flex !important; gap: 8px !important; align-items: center; flex-wrap: wrap; }
/* ---------- buttons: one system ---------- */
html.rr-mytrips-page #trip-log-modal .rr-btn,
html.rr-mytrips-page #trip-log-modal #trip-log-public-profile,
html.rr-mytrips-page #trip-log-modal .trip-log-empty-cta,
html.rr-mytrips-page #trip-log-modal #trip-log-primary-log {
  height: 36px !important; min-height: 36px !important; padding: 0 14px !important; box-sizing: border-box !important;
  border-radius: 4px !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important;
  text-transform: none !important; display: inline-flex !important; align-items: center; justify-content: center;
  border: 1px solid var(--mt-navy) !important; background: var(--mt-navy) !important; color: #fff !important;
  box-shadow: none !important; transform: none !important; white-space: nowrap; cursor: pointer;
}
html.rr-mytrips-page #trip-log-modal .rr-btn.secondary,
html.rr-mytrips-page #trip-log-modal #trip-log-public-profile,
html.rr-mytrips-page #trip-log-modal .trip-log-empty-cta.trip-log-empty-live {
  background: #fff !important; color: var(--mt-navy) !important;
}
html.rr-mytrips-page #trip-log-modal .rr-btn:hover { filter: none !important; background: #1b1f5c !important; }
html.rr-mytrips-page #trip-log-modal .rr-btn.secondary:hover,
html.rr-mytrips-page #trip-log-modal #trip-log-public-profile:hover { background: #eef0f6 !important; }
html.rr-mytrips-page #trip-log-modal .rr-btn:focus-visible,
html.rr-mytrips-page #trip-log-modal button:focus-visible,
html.rr-mytrips-page #trip-log-modal a:focus-visible { outline: 2px solid #8fd3ff !important; outline-offset: 1px; }
html.rr-mytrips-page #trip-log-modal .trip-public-copy { height: 32px !important; min-height: 32px !important; font-size: 12px !important; padding: 0 10px !important; }
html.rr-mytrips-page .trip-public-panel { border-radius: 4px !important; border: 1px solid var(--mt-line) !important; box-shadow: 0 8px 24px rgba(15,23,42,.14) !important; }
/* ---------- stats ---------- */
html.rr-mytrips-page #trip-log-modal .rr-lightbox-body { padding: 0 !important; background: transparent !important; }
html.rr-mytrips-page #trip-log-modal .rr-lightbox-section { padding: 0 !important; border: none !important; margin: 0 !important; }
html.rr-mytrips-page .trip-log-stats {
  display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0 !important;
  background: #fff; border: 1px solid var(--mt-line); border-radius: 4px; padding: 0 !important; margin: 0 0 12px !important;
}
html.rr-mytrips-page .trip-log-stat {
  background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 14px 16px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  border-left: 1px solid var(--mt-line) !important; min-height: 0 !important;
}
html.rr-mytrips-page .trip-log-stat:first-child { border-left: none !important; }
html.rr-mytrips-page .trip-log-stat-value { font-size: 22px !important; font-weight: 700 !important; color: var(--mt-navy); line-height: 1.15 !important; order: 0; }
html.rr-mytrips-page .trip-log-stat-label { font-size: 12px !important; font-weight: 500 !important; color: var(--mt-muted) !important; text-transform: none !important; margin-top: 2px; order: 1; }
html.rr-mytrips-page .trip-log-stat-rails {
  grid-column: 1 / -1; display: flex !important; gap: 6px !important; flex-wrap: wrap;
  padding: 10px 16px !important; border-top: 1px solid var(--mt-line); margin: 0 !important;
}
html.rr-mytrips-page .trip-log-rail-chip {
  border-radius: 4px !important; background: var(--mt-bg) !important; border: 1px solid var(--mt-line) !important;
  padding: 3px 8px !important; font-size: 12px !important; font-weight: 600 !important; color: var(--mt-ink) !important; gap: 6px !important;
}
html.rr-mytrips-page .trip-log-rail-chip-meta { color: var(--mt-muted) !important; font-weight: 500 !important; }
/* ---------- boarding alerts ---------- */
html.rr-mytrips-page .trip-notify-row {
  background: #fff !important; border: 1px solid var(--mt-line) !important; border-radius: 4px !important;
  padding: 10px 14px !important; margin: 0 0 12px !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
}
html.rr-mytrips-page .trip-notify-toggle { font-size: 13px !important; font-weight: 600 !important; color: var(--mt-ink) !important; display: inline-flex !important; gap: 8px; align-items: center; }
html.rr-mytrips-page .trip-notify-toggle input { width: 16px; height: 16px; accent-color: var(--mt-navy); margin: 0; }
html.rr-mytrips-page .trip-notify-hint { font-size: 12px !important; color: var(--mt-muted) !important; margin: 0 !important; flex: 1 1 320px; line-height: 1.4; }
html.rr-mytrips-page .trip-nearby-banner { border-radius: 4px !important; }
/* ---------- tabs: segmented control ---------- */
html.rr-mytrips-page .trip-log-tabs {
  display: inline-flex !important; gap: 0 !important; padding: 0 !important; margin: 4px 0 14px !important;
  background: #fff !important; border: 1px solid var(--mt-field) !important; border-radius: 4px !important; overflow: hidden; box-shadow: none !important;
}
html.rr-mytrips-page .trip-log-tab {
  height: 34px !important; padding: 0 16px !important; border: none !important; border-radius: 0 !important;
  background: transparent !important; color: var(--mt-navy) !important; font-size: 13px !important; font-weight: 600 !important; box-shadow: none !important;
}
html.rr-mytrips-page .trip-log-tab + .trip-log-tab { border-left: 1px solid var(--mt-field) !important; }
html.rr-mytrips-page .trip-log-tab.active { background: var(--mt-navy) !important; color: #fff !important; }
html.rr-mytrips-page #trip-log-modal hr, html.rr-mytrips-page .trip-log-divider { display: none !important; }
/* ---------- dashboard strip ---------- */
html.rr-mytrips-page .trip-dash-bar {
  display: flex !important; align-items: center; gap: 4px 16px !important; flex-wrap: wrap;
  background: transparent !important; border: none !important; padding: 0 !important; margin: 0 0 6px !important; box-shadow: none !important;
}
html.rr-mytrips-page .trip-dash-stat {
  background: none !important; border: none !important; padding: 0 !important; border-radius: 0 !important;
  font-size: 12px !important; font-weight: 500 !important; color: var(--mt-muted) !important;
}
html.rr-mytrips-page .trip-dash-filter { margin-left: auto !important; width: auto !important; min-width: 150px; height: 32px !important; }
/* ---------- fields ---------- */
html.rr-mytrips-page #trip-log-modal select,
html.rr-mytrips-page #trip-log-modal input[type="text"],
html.rr-mytrips-page #trip-log-modal input[type="datetime-local"],
html.rr-mytrips-page #trip-log-modal textarea {
  height: 36px; min-height: 36px; box-sizing: border-box !important; border: 1px solid var(--mt-field) !important; border-radius: 4px !important;
  background-color: #fff !important; color: var(--mt-ink) !important; font-size: 13px !important; padding: 0 10px !important; box-shadow: none !important; width: 100%;
}
html.rr-mytrips-page #trip-log-modal textarea { height: auto; padding: 8px 10px !important; }
html.rr-mytrips-page #trip-log-modal select:focus,
html.rr-mytrips-page #trip-log-modal input:focus,
html.rr-mytrips-page #trip-log-modal textarea:focus { outline: none !important; border-color: var(--mt-navy) !important; box-shadow: 0 0 0 2px #8fd3ff !important; }
html.rr-mytrips-page #trip-log-modal label { font-size: 12px !important; font-weight: 600 !important; color: var(--mt-muted) !important; text-transform: none !important; margin: 0 0 4px !important; display: block; }
/* ---------- sections ---------- */
html.rr-mytrips-page .trip-log-section { margin: 18px 0 0 !important; }
html.rr-mytrips-page .trip-log-section-title {
  font-size: 15px !important; font-weight: 700 !important; color: var(--mt-navy) !important; margin: 0 0 8px !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
html.rr-mytrips-page .trip-log-section-rows { display: flex !important; flex-direction: column; gap: 10px !important; }
/* ---------- trip cards ---------- */
html.rr-mytrips-page .trip-log-row,
html.rr-mytrips-page .trip-log-row[data-rail-accent] {
  position: relative; display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: "top map" "route map" "meta map" "facts map" "live map" "actual map" "actions map";
  grid-template-rows: auto auto auto auto auto auto 1fr;
  column-gap: 16px; align-items: start;
  background: #fff !important; color: var(--mt-ink) !important;
  border: 1px solid var(--mt-line) !important; border-left: 4px solid var(--rr-trip-rail, var(--mt-navy)) !important;
  border-radius: 4px !important; padding: 12px 12px 12px 14px !important; margin: 0 !important;
  box-shadow: none !important; transform: none !important;
}
html.rr-mytrips-page .trip-log-row:hover,
html.rr-mytrips-page .trip-log-row[data-rail-accent]:hover { border-color: #c9ced8 !important; border-left-color: var(--rr-trip-rail, var(--mt-navy)) !important; box-shadow: 0 2px 8px rgba(15,23,42,.08) !important; transform: none !important; }
html.rr-mytrips-page .trip-log-row-top { grid-area: top; display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 !important; padding: 0 !important; }
html.rr-mytrips-page .trip-log-row-rail { display: inline-flex !important; gap: 6px; align-items: center; color: var(--mt-ink) !important; margin: 0 !important; }
html.rr-mytrips-page .trip-rail-badge {
  border-radius: 4px !important; height: 22px; display: inline-flex !important; align-items: center; padding: 0 7px !important;
  font-size: 11px !important; font-weight: 700 !important; color: #fff !important; border: none !important; box-shadow: none !important; font-style: normal !important;
}
html.rr-mytrips-page .trip-log-row .trip-train-chip,
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-train-chip {
  border-radius: 4px !important; height: 22px; display: inline-flex !important; align-items: center; padding: 0 7px !important;
  background: #fff !important; color: var(--mt-navy) !important; border: 1px solid var(--mt-field) !important;
  font-size: 12px !important; font-weight: 600 !important; box-shadow: none !important;
}
html.rr-mytrips-page .trip-log-row-relative,
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-relative {
  margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; border-radius: 0 !important;
  font-size: 12px !important; font-weight: 500 !important; color: var(--mt-muted) !important; box-shadow: none !important;
}
html.rr-mytrips-page .trip-soon-chip {
  border-radius: 999px !important; background: #e6f4ea !important; color: #146c2e !important; border: 1px solid #b7dfc2 !important;
  font-size: 11px !important; font-weight: 600 !important; padding: 2px 8px !important; height: auto !important; margin: 0 !important; box-shadow: none !important;
}
html.rr-mytrips-page .trip-log-row-route,
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-route {
  grid-area: route; margin: 8px 0 2px !important; font-size: 17px !important; font-weight: 700 !important; color: var(--mt-navy) !important; line-height: 1.25 !important;
}
html.rr-mytrips-page .trip-log-row .trip-route-to { color: var(--mt-faint) !important; font-weight: 500 !important; font-size: 14px !important; }
html.rr-mytrips-page .trip-log-row .trip-route-station { color: var(--mt-navy) !important; }
html.rr-mytrips-page .trip-log-row-meta,
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-meta { grid-area: meta; margin: 0 !important; font-size: 12px !important; color: var(--mt-muted) !important; font-weight: 500 !important; }
html.rr-mytrips-page .trip-log-row-facts { grid-area: facts; display: flex; gap: 10px; margin: 2px 0 0 !important; }
html.rr-mytrips-page .trip-log-row-miles,
html.rr-mytrips-page .trip-log-row-stock,
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-miles,
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-stock { font-size: 12px !important; color: var(--mt-faint) !important; font-weight: 500 !important; }
/* live status keeps the left lateness bar */
html.rr-mytrips-page .trip-log-row .trip-log-row-live,
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live {
  grid-area: live; margin: 8px 0 0 !important; padding: 2px 0 2px 8px !important; background: none !important;
  border: none !important; border-left: 3px solid #c5cad3 !important; border-radius: 0 !important;
  color: var(--mt-ink) !important; font-size: 13px !important; font-style: normal !important;
}
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="on-time"] { border-left-color: #1a7f37 !important; }
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="late"] { border-left-color: #e8a317 !important; }
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="very-late"] { border-left-color: #d93025 !important; }
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="miss"],
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="done"] { border-left: none !important; padding-left: 0 !important; color: var(--mt-muted) !important; font-weight: 500 !important; font-style: italic !important; }
html.rr-mytrips-page .trip-log-row-live-late { font-weight: 600 !important; }
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="late"] .trip-log-row-live-late { color: #b06000 !important; }
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="very-late"] .trip-log-row-live-late { color: #b3261e !important; }
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="on-time"] .trip-log-row-live-late { color: #146c2e !important; }
html.rr-mytrips-page .trip-log-row-live-place { color: var(--mt-muted) !important; font-size: 12px !important; font-style: normal !important; opacity: 1 !important; }
html.rr-mytrips-page .trip-log-row-actual { grid-area: actual; font-size: 12px !important; color: var(--mt-muted) !important; }
/* map: right column on desktop */
html.rr-mytrips-page .trip-log-row-map {
  grid-area: map; height: 100% !important; min-height: 150px; max-height: 190px; width: 100% !important; margin: 0 !important;
  border-radius: 4px !important; border: 1px solid var(--mt-line) !important; box-shadow: none !important; background: #eef0f3 !important;
}
/* actions: one quiet row at the bottom of the text column */
html.rr-mytrips-page .trip-log-row-actions {
  grid-area: actions; position: static !important; display: flex !important; align-items: center; gap: 4px !important;
  margin: 12px 0 0 !important; padding: 0 !important; align-self: end; flex-wrap: wrap;
}
html.rr-mytrips-page .trip-log-row-actions > * {
  height: 32px !important; min-height: 32px !important; box-sizing: border-box !important; border-radius: 4px !important;
  font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center; justify-content: center; padding: 0 10px !important; width: auto !important;
  background: #fff !important; color: var(--mt-navy) !important; border: 1px solid var(--mt-field) !important; box-shadow: none !important;
  text-decoration: none !important; white-space: nowrap; margin: 0 !important; opacity: 1 !important; font-style: normal !important;
}
html.rr-mytrips-page .trip-log-row-actions > .trip-track-btn { background: var(--mt-navy) !important; border-color: var(--mt-navy) !important; color: #fff !important; }
html.rr-mytrips-page .trip-log-row-actions > .trip-edit-btn,
html.rr-mytrips-page .trip-log-row-actions > .danger { width: 32px !important; padding: 0 !important; color: var(--mt-muted) !important; }
html.rr-mytrips-page .trip-log-row-actions > .trip-edit-btn { margin-left: auto !important; }
html.rr-mytrips-page .trip-log-row-actions > .danger:hover { color: #b3261e !important; border-color: #e7b4b0 !important; background: #fdf1f0 !important; }
html.rr-mytrips-page .trip-log-row-actions > :not(.trip-track-btn):hover { background: #eef0f6 !important; }
html.rr-mytrips-page .trip-log-row-actions svg { width: 15px; height: 15px; }
/* empty + footer */
html.rr-mytrips-page .trip-log-empty-card { background: #fff !important; border: 1px dashed var(--mt-field) !important; border-radius: 4px !important; }
html.rr-mytrips-page #trip-log-modal .rr-lightbox-actions { display: flex !important; gap: 8px !important; flex-wrap: wrap; margin-top: 14px !important; padding: 0 !important; border: none !important; }
html.rr-mytrips-page .trip-log-status { font-size: 12px !important; color: var(--mt-muted) !important; }
/* ---------- log form ---------- */
html.rr-mytrips-page #trip-pane-log > .rr-lightbox-section {
  background: #fff !important; border: 1px solid var(--mt-line) !important; border-radius: 4px !important; padding: 16px !important;
}
html.rr-mytrips-page .trip-special-block { border-radius: 4px !important; border: 1px solid var(--mt-line) !important; background: var(--mt-bg) !important; padding: 10px 12px !important; margin: 0 0 12px !important; }
html.rr-mytrips-page .trip-special-toggle { font-size: 13px !important; font-weight: 600 !important; color: var(--mt-ink) !important; text-transform: none !important; display: inline-flex !important; gap: 8px; align-items: center; margin: 0 !important; }
html.rr-mytrips-page .trip-special-toggle input { width: 16px !important; height: 16px !important; accent-color: var(--mt-navy) !important; }
html.rr-mytrips-page .trip-special-hint { font-size: 12px !important; color: var(--mt-muted) !important; }
html.rr-mytrips-page .trip-segment,
html.rr-mytrips-page .trip-segment[data-rail-accent] {
  background: #fff !important; border: 1px solid var(--mt-line) !important; border-left: 4px solid var(--rr-trip-rail, var(--mt-navy)) !important;
  border-radius: 4px !important; padding: 12px 14px !important; box-shadow: none !important; margin: 0 0 10px !important;
}
html.rr-mytrips-page .trip-segment-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px !important; }
html.rr-mytrips-page .trip-segment-title { font-size: 14px !important; font-weight: 700 !important; color: var(--mt-navy) !important; text-transform: none !important; }
html.rr-mytrips-page .trip-seg-grid, html.rr-mytrips-page .trip-segment-times { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px 12px !important; margin: 0 0 10px !important; }
html.rr-mytrips-page .trip-seg-train-pick-row { display: grid !important; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin: 0 0 4px !important; }
html.rr-mytrips-page .trip-seg-extra-btn,
html.rr-mytrips-page .trip-segment-remove {
  height: 36px !important; border-radius: 4px !important; padding: 0 12px !important; font-size: 13px !important; font-weight: 600 !important;
  background: #fff !important; color: var(--mt-navy) !important; border: 1px solid var(--mt-navy) !important; text-transform: none !important; box-shadow: none !important;
}
html.rr-mytrips-page .trip-seg-extra-btn.active { background: var(--mt-navy) !important; color: #fff !important; }
html.rr-mytrips-page .trip-segment-remove { height: 32px !important; font-size: 12px !important; color: #b3261e !important; border-color: #e7b4b0 !important; }
html.rr-mytrips-page .trip-seg-train-hint { font-size: 12px !important; color: var(--mt-faint) !important; margin: 0 0 10px !important; }
html.rr-mytrips-page .trip-form-more { border: 1px solid var(--mt-line) !important; border-radius: 4px !important; padding: 0 12px !important; margin: 10px 0 0 !important; background: #fff !important; }
html.rr-mytrips-page .trip-form-more > summary { height: 36px; display: flex; align-items: center; font-size: 13px !important; font-weight: 600 !important; color: var(--mt-navy) !important; cursor: pointer; }
html.rr-mytrips-page .trip-form-more[open] { padding-bottom: 12px !important; }
html.rr-mytrips-page #trip-log-miles-preview { font-size: 12px !important; color: var(--mt-muted) !important; }
html.rr-mytrips-page #trip-log-add-segment { margin-top: 2px !important; }
/* ---------- phone ---------- */
@media (max-width: 640px) {
  html.rr-mytrips-page #trip-log-modal .rr-modal { padding: 0 12px 28px !important; }
  html.rr-mytrips-page #trip-log-modal .rr-modal-header { padding: 14px 0 12px !important; }
  html.rr-mytrips-page #trip-log-title { font-size: 20px !important; }
  html.rr-mytrips-page .trip-log-page-actions { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; }
  html.rr-mytrips-page .trip-public-wrap { grid-column: 1 / -1; }
  html.rr-mytrips-page .trip-public-wrap > #trip-log-public-profile { width: 100% !important; }
  html.rr-mytrips-page .trip-log-stat { padding: 10px 12px !important; }
  html.rr-mytrips-page .trip-log-stat-value { font-size: 18px !important; }
  html.rr-mytrips-page .trip-log-stat-rails { padding: 8px 12px !important; }
  html.rr-mytrips-page .trip-notify-hint { flex-basis: 100%; }
  html.rr-mytrips-page .trip-log-tabs { display: flex !important; width: 100%; }
  html.rr-mytrips-page .trip-log-tab { flex: 1; }
  html.rr-mytrips-page .trip-dash-filter { margin-left: 0 !important; width: 100% !important; }
  html.rr-mytrips-page .trip-log-row,
  html.rr-mytrips-page .trip-log-row[data-rail-accent] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "route" "meta" "facts" "live" "actual" "map" "actions";
    grid-template-rows: none;
    padding: 10px 10px 10px 12px !important;
  }
  html.rr-mytrips-page .trip-log-row-route,
  html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-log-row-route { font-size: 16px !important; margin-top: 6px !important; }
  html.rr-mytrips-page .trip-log-row-map { height: 92px !important; min-height: 0; margin-top: 8px !important; }
  html.rr-mytrips-page .trip-log-row-actions { margin-top: 8px !important; }
  html.rr-mytrips-page .trip-log-row-actions > * { padding: 0 8px !important; }
  html.rr-mytrips-page .trip-seg-grid, html.rr-mytrips-page .trip-segment-times { grid-template-columns: 1fr; }
  html.rr-mytrips-page #trip-pane-log > .rr-lightbox-section { padding: 12px !important; }
}
html.rr-mytrips-page .trip-log-row[data-rail-accent] .trip-rail-badge { background: var(--rr-trip-rail, var(--mt-navy)) !important; border: none !important; }
/* the display rules above must not reveal hidden elements */
html.rr-mytrips-page #trip-log-modal [hidden] { display: none !important; }
html.rr-mytrips-page #trip-log-modal #trip-log-primary-log[hidden],
html.rr-mytrips-page #trip-log-modal .rr-btn[hidden] { display: none !important; }
/* parity with today: Create live trip stays visible on the Log tab */
html.rr-mytrips-page #trip-log-modal #trip-log-live[hidden] { display: inline-flex !important; }

/* ===== MyTrips redesign (Oct 17): dark theme, html.rr-theme-dark (Menu > Theme), My Trips only ===== */
html.rr-mytrips-page.rr-theme-dark {
  color-scheme: dark;
  --mt-bg: #0b0b3b;          /* page */
  --mt-surface: #151a52;     /* cards */
  --mt-surface-2: #0f1446;   /* fields, inset rows */
  --mt-hover: #1d2362;
  --mt-line: #2a3172;        /* card borders */
  --mt-field: #646cb5;       /* field / outline borders, >=3:1 on surface */
  --mt-ink: #eef0fa;         /* primary text */
  --mt-muted: #aab0d4;       /* secondary text */
  --mt-faint: #8a90bd;       /* tertiary text */
  --mt-light: #ffffff;       /* light primary button */
  --mt-focus: #8fd3ff;
}

/* rail colours: lighter tints from TRIP_LOG_RAIL_COLORS_DARK (app-main sets --rr-trip-rail-dk) */
html.rr-mytrips-page.rr-theme-dark [data-rail-accent],
html.rr-mytrips-page.rr-theme-dark .trip-segment,
html.rr-mytrips-page.rr-theme-dark .trip-detail-seg,
html.rr-mytrips-page.rr-theme-dark .trip-seg-chip { --mt-rail: var(--rr-trip-rail-dk, #aab0d4); }
html.rr-mytrips-page.rr-theme-dark .trip-rail-badge { background: var(--rr-trip-rail-dk, #aab0d4) !important; color: #0b0b3b !important; border: none !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-rail-chip-dot { background: var(--rr-trip-rail-dk, #aab0d4) !important; }
html.rr-mytrips-page.rr-theme-dark #trip-log-stat-top { color: var(--mt-ink); }
html.rr-mytrips-page.rr-theme-dark #trip-log-stat-top[style*="--rr-trip-rail-dk"] { color: var(--rr-trip-rail-dk) !important; }

html.rr-mytrips-page.rr-theme-dark body,
html.rr-mytrips-page.rr-theme-dark #trip-log-modal { background: var(--mt-bg) !important; }
html.rr-mytrips-page.rr-theme-dark #trip-log-modal .rr-modal { color: var(--mt-ink) !important; }
html.rr-mytrips-page.rr-theme-dark #trip-log-title,
html.rr-mytrips-page.rr-theme-dark .trip-log-section-title,
html.rr-mytrips-page.rr-theme-dark .trip-log-stat-value:not(#trip-log-stat-top),
html.rr-mytrips-page.rr-theme-dark .trip-segment-title { color: var(--mt-ink) !important; }

/* ---------- buttons: light style on dark ---------- */
html.rr-mytrips-page.rr-theme-dark #trip-log-modal .rr-btn,
html.rr-mytrips-page.rr-theme-dark #trip-log-modal #trip-log-primary-log,
html.rr-mytrips-page.rr-theme-dark #trip-log-modal .trip-log-empty-cta {
  background: var(--mt-light) !important; border-color: var(--mt-light) !important; color: #07093e !important;
}
html.rr-mytrips-page.rr-theme-dark #trip-log-modal .rr-btn:hover,
html.rr-mytrips-page.rr-theme-dark #trip-log-modal #trip-log-primary-log:hover { background: #dfe3f7 !important; border-color: #dfe3f7 !important; }
html.rr-mytrips-page.rr-theme-dark #trip-log-modal .rr-btn.secondary,
html.rr-mytrips-page.rr-theme-dark #trip-log-modal #trip-log-public-profile,
html.rr-mytrips-page.rr-theme-dark #trip-log-modal .trip-log-empty-cta.trip-log-empty-live {
  background: transparent !important; border-color: rgba(255,255,255,.7) !important; color: #fff !important;
}
html.rr-mytrips-page.rr-theme-dark #trip-log-modal .rr-btn.secondary:hover,
html.rr-mytrips-page.rr-theme-dark #trip-log-modal #trip-log-public-profile:hover { background: rgba(255,255,255,.08) !important; border-color: #fff !important; }
html.rr-mytrips-page.rr-theme-dark .trip-public-panel { background: var(--mt-surface) !important; color: var(--mt-ink) !important; border-color: var(--mt-field) !important; box-shadow: 0 8px 24px rgba(0,0,0,.45) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-public-panel * { color: inherit; }
html.rr-mytrips-page.rr-theme-dark .trip-public-hint, html.rr-mytrips-page.rr-theme-dark .trip-public-lead { color: var(--mt-muted) !important; }


/* ---------- surfaces ---------- */
html.rr-mytrips-page.rr-theme-dark .trip-log-stats,
html.rr-mytrips-page.rr-theme-dark .trip-notify-row,
html.rr-mytrips-page.rr-theme-dark #trip-pane-log > .rr-lightbox-section,
html.rr-mytrips-page.rr-theme-dark .trip-form-more,
html.rr-mytrips-page.rr-theme-dark .trip-log-empty-card,
html.rr-mytrips-page.rr-theme-dark .trip-log-skeleton { background: var(--mt-surface) !important; border-color: var(--mt-line) !important; color: var(--mt-ink) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-stat { border-left-color: var(--mt-line) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-stat-rails { border-top-color: var(--mt-line) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-rail-chip { background: var(--mt-surface-2) !important; border-color: var(--mt-line) !important; color: var(--mt-ink) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-rail-chip-meta { color: var(--mt-muted) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-notify-toggle, html.rr-mytrips-page.rr-theme-dark .trip-special-toggle { color: var(--mt-ink) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-notify-toggle input,
html.rr-mytrips-page.rr-theme-dark .trip-special-toggle input { accent-color: var(--mt-focus) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-special-block { background: var(--mt-surface-2) !important; border-color: var(--mt-line) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-nearby-banner { background: var(--mt-surface) !important; color: var(--mt-ink) !important; border-color: var(--mt-line) !important; }

/* ---------- tabs ---------- */
html.rr-mytrips-page.rr-theme-dark .trip-log-tabs { background: transparent !important; border-color: var(--mt-field) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-tab { color: var(--mt-ink) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-tab + .trip-log-tab { border-left-color: var(--mt-field) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-tab.active { background: var(--mt-light) !important; color: #07093e !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-tab:not(.active):hover { background: rgba(255,255,255,.06) !important; }

/* ---------- fields ---------- */
html.rr-mytrips-page.rr-theme-dark #trip-log-modal select,
html.rr-mytrips-page.rr-theme-dark #trip-log-modal input[type="text"],
html.rr-mytrips-page.rr-theme-dark #trip-log-modal input[type="number"],
html.rr-mytrips-page.rr-theme-dark #trip-log-modal input[type="datetime-local"],
html.rr-mytrips-page.rr-theme-dark #trip-log-modal textarea {
  background-color: var(--mt-surface-2) !important; color: var(--mt-ink) !important; border-color: var(--mt-field) !important; color-scheme: dark;
}
html.rr-mytrips-page.rr-theme-dark #trip-log-modal select option { background: #0f1446; color: #eef0fa; }
html.rr-mytrips-page.rr-theme-dark #trip-log-modal ::placeholder { color: var(--mt-faint) !important; opacity: 1; }
html.rr-mytrips-page.rr-theme-dark #trip-log-modal select:disabled,
html.rr-mytrips-page.rr-theme-dark #trip-log-modal input:disabled { color: var(--mt-faint) !important; opacity: 1 !important; }
html.rr-mytrips-page.rr-theme-dark #trip-log-modal select:focus,
html.rr-mytrips-page.rr-theme-dark #trip-log-modal input:focus,
html.rr-mytrips-page.rr-theme-dark #trip-log-modal textarea:focus { border-color: var(--mt-focus) !important; box-shadow: 0 0 0 2px rgba(143,211,255,.35) !important; }
html.rr-mytrips-page.rr-theme-dark #trip-log-modal label { color: var(--mt-muted) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-form-more > summary { color: var(--mt-ink) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-seg-extra-btn { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.7) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-seg-extra-btn.active { background: #fff !important; color: #07093e !important; }
html.rr-mytrips-page.rr-theme-dark .trip-segment-remove { background: transparent !important; color: #ff8a80 !important; border-color: #8a3a3a !important; }

/* ---------- trip cards ---------- */
html.rr-mytrips-page.rr-theme-dark .trip-log-row,
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] {
  background: var(--mt-surface) !important; color: var(--mt-ink) !important;
  border-color: var(--mt-line) !important; border-left-color: var(--mt-rail, var(--mt-faint)) !important;
}
html.rr-mytrips-page.rr-theme-dark .trip-log-row:hover,
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent]:hover { border-color: var(--mt-field) !important; border-left-color: var(--mt-rail, var(--mt-faint)) !important; box-shadow: 0 2px 10px rgba(0,0,0,.35) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-segment,
html.rr-mytrips-page.rr-theme-dark .trip-segment[data-rail-accent] { background: var(--mt-surface) !important; border-color: var(--mt-line) !important; border-left-color: var(--mt-rail, var(--mt-faint)) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row .trip-rail-badge,
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-rail-badge { background: var(--rr-trip-rail-dk, #aab0d4) !important; color: #0b0b3b !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row .trip-train-chip,
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-train-chip { background: transparent !important; color: var(--mt-ink) !important; border-color: var(--mt-field) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row-route,
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-log-row-route,
html.rr-mytrips-page.rr-theme-dark .trip-log-row .trip-route-station { color: var(--mt-ink) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row .trip-route-to { color: var(--mt-faint) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row-relative,
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-log-row-relative,
html.rr-mytrips-page.rr-theme-dark .trip-log-row-meta,
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-log-row-meta { color: var(--mt-muted) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-log-row-miles,
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-log-row-stock,
html.rr-mytrips-page.rr-theme-dark .trip-log-row-miles, html.rr-mytrips-page.rr-theme-dark .trip-log-row-stock { color: var(--mt-faint) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-soon-chip { background: rgba(70,200,120,.16) !important; color: #7fe3a5 !important; border-color: rgba(127,227,165,.45) !important; }
/* live status bar */
html.rr-mytrips-page.rr-theme-dark .trip-log-row .trip-log-row-live,
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-log-row-live { color: var(--mt-ink) !important; border-left-color: var(--mt-field) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="on-time"] { border-left-color: #5fd38d !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="late"] { border-left-color: #ffb547 !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="very-late"] { border-left-color: #ff6b5e !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="late"] .trip-log-row-live-late { color: #ffc266 !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="very-late"] .trip-log-row-live-late { color: #ff8a80 !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="on-time"] .trip-log-row-live-late { color: #7fe3a5 !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="miss"],
html.rr-mytrips-page.rr-theme-dark .trip-log-row[data-rail-accent] .trip-log-row-live[data-live-state="done"],
html.rr-mytrips-page.rr-theme-dark .trip-log-row-live-place, html.rr-mytrips-page.rr-theme-dark .trip-log-row-actual { color: var(--mt-muted) !important; }
/* map */
html.rr-mytrips-page.rr-theme-dark .trip-log-row-map { border-color: var(--mt-line) !important; background: var(--mt-surface-2) !important; color: var(--mt-muted) !important; }
/* card actions */
html.rr-mytrips-page.rr-theme-dark .trip-log-row-actions > * { background: transparent !important; color: var(--mt-ink) !important; border-color: var(--mt-field) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row-actions > .trip-track-btn { background: var(--mt-light) !important; border-color: var(--mt-light) !important; color: #07093e !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row-actions > .trip-edit-btn,
html.rr-mytrips-page.rr-theme-dark .trip-log-row-actions > .danger { color: var(--mt-muted) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row-actions > :not(.trip-track-btn):hover { background: var(--mt-hover) !important; color: #fff !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-row-actions > .danger:hover { color: #ff8a80 !important; border-color: #8a3a3a !important; background: rgba(255,107,94,.1) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-status, html.rr-mytrips-page.rr-theme-dark #trip-log-miles-preview,
html.rr-mytrips-page.rr-theme-dark .trip-seg-train-hint, html.rr-mytrips-page.rr-theme-dark .trip-special-hint, html.rr-mytrips-page.rr-theme-dark .trip-special-loc,
html.rr-mytrips-page.rr-theme-dark .trip-dash-stat, html.rr-mytrips-page.rr-theme-dark .trip-notify-hint { color: var(--mt-muted) !important; }
html.rr-mytrips-page.rr-theme-dark #trip-log-modal a:not(.rr-btn) { color: #8fd3ff; }

/* MyTrips redesign: empty state + loading placeholders (light) */
html.rr-mytrips-page .trip-log-skeleton { border-radius: 4px !important; box-shadow: none !important; border-color: var(--mt-line) !important; }
html.rr-mytrips-page .trip-log-skel-line, html.rr-mytrips-page .trip-log-skel-map { border-radius: 4px !important; }
html.rr-mytrips-page .trip-log-empty-title { font-size: 15px !important; font-weight: 700 !important; color: var(--mt-navy) !important; }
html.rr-mytrips-page .trip-log-empty-copy { font-size: 13px !important; color: var(--mt-muted) !important; }
html.rr-mytrips-page .trip-log-empty-live { margin-left: 8px !important; }

/* MyTrips dark: empty state, loading placeholders, trip detail popup */
html.rr-mytrips-page.rr-theme-dark .trip-log-empty-title { color: var(--mt-ink) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-empty-copy { color: var(--mt-muted) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-log-skel-line,
html.rr-mytrips-page.rr-theme-dark .trip-log-skel-map { background: linear-gradient(90deg, #1d2362 0%, #262d72 45%, #1d2362 90%) !important; background-size: 200% 100% !important; }
html.rr-mytrips-page.rr-theme-dark.rr-trip-detail-open,
html.rr-mytrips-page.rr-theme-dark.rr-trip-detail-open body,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay[data-rail-accent],
html.rr-mytrips-page.rr-theme-dark .trip-detail-panel,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay[data-rail-accent] .trip-detail-panel { background: var(--mt-surface) !important; color: var(--mt-ink) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-panel { box-shadow: 0 -12px 40px rgba(0,0,0,.45) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-accent { background: var(--rr-trip-rail-dk, #aab0d4) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-toolbar { background: rgba(21,26,82,.96) !important; border-bottom-color: var(--mt-line) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-route,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-relative,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-when,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-seg-od,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-meta-value,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-live { color: var(--mt-ink) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-line,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-actual,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-stock,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-seg-title,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-seg-sub,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-meta-label,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-share-status,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-route-to { color: var(--mt-muted) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-live[data-live-state="on-time"] { color: #7fe3a5 !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-live[data-live-state="late"] { color: #ffc266 !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-live[data-live-state="very-late"] { color: #ff8a80 !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-live[data-live-state="arriving"] { color: #8fd3ff !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-fact,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-meta-item,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-miles-pill { background: var(--mt-surface-2) !important; border: 1px solid var(--mt-line) !important; color: var(--mt-ink) !important; border-radius: 4px !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-train-chip { background: transparent !important; color: var(--mt-ink) !important; border: 1px solid var(--mt-field) !important; box-shadow: none !important; border-radius: 4px !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-rail-badge { border-radius: 4px !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-notes { background: var(--mt-surface-2) !important; color: var(--mt-ink) !important; border-left-color: var(--mt-field) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-seg { background: var(--mt-surface-2) !important; border-color: var(--mt-line) !important; border-left: 4px solid var(--rr-trip-rail-dk, #aab0d4) !important; color: var(--mt-ink) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-back,
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-share-btn { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.7) !important; box-shadow: none !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .rr-btn { background: #fff !important; color: #07093e !important; border: 1px solid #fff !important; border-radius: 4px !important; text-transform: none !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .rr-btn.secondary { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.7) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-special-share { background: var(--mt-surface-2) !important; border-color: var(--mt-line) !important; color: var(--mt-ink) !important; }
html.rr-mytrips-page.rr-theme-dark .trip-detail-overlay .trip-detail-special-title { color: var(--mt-ink) !important; }