@import url('./tokens.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--me-font-sans);
  font-size: var(--me-body-size);
  color: var(--me-text-primary);
  background: var(--me-bg-primary);
  -webkit-font-smoothing: antialiased;
}

#app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--me-toolbar-height) 1fr;
  overflow: hidden;
}

/* ============== TOOLBAR ============== */
.toolbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px;
  background: var(--me-bg-secondary);
  border-bottom: 1px solid var(--me-border);
  z-index: 500;
  height: var(--me-toolbar-height);
  min-width: 0;
}
.tb-logo {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.tb-logo img {
  width: 28px;
  height: 28px;
  display: block;
  content: url('./logo-mark-dark.svg');
}
:root[data-theme="light"] .tb-logo img { content: url('./logo-mark-light.svg'); }
:root[data-theme="dark"] .tb-logo img { content: url('./logo-mark-dark.svg'); }
.tb-logo-title {
  font-size: 16px; font-weight: 700;
  background: var(--me-accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}
.tb-logo-sub { font-size: 11px; color: var(--me-text-muted); }

.tb-region {
  display: flex; background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-md);
  padding: 3px;
  gap: 2px;
}
.tb-region-btn {
  padding: 6px 12px;
  background: transparent; border: none; cursor: pointer;
  color: var(--me-text-secondary);
  font-size: 13px; font-weight: 500;
  border-radius: 8px;
  font-family: inherit;
  transition: var(--me-transition-fast);
}
.tb-region-btn:hover { color: var(--me-text-primary); }
.tb-region-btn.active {
  background: var(--me-accent-gradient);
  color: var(--me-on-accent);
  font-weight: 600;
}

.tb-spacer { flex: 1; }

.tb-tool {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--me-text-secondary);
  border-radius: var(--me-radius-sm); cursor: pointer;
  transition: var(--me-transition-fast);
}
.tb-tool:hover {
  background: var(--me-bg-tertiary);
  color: var(--me-text-primary);
  border-color: var(--me-border);
}
.theme-toggle {
  background: var(--me-bg-tertiary);
  border-color: var(--me-border);
}
.theme-toggle:hover {
  color: var(--me-accent-primary);
  border-color: var(--me-border-hover);
}

/* ============== MAIN LAYOUT ============== */
.main {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  position: relative;
}

/* ============== LEFT PANEL (controls) ============== */
.panel {
  background: var(--me-bg-secondary);
  border-right: 1px solid var(--me-border);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  /* Always overlay above the map so the sidebar sits on top.
     z-index 1200 keeps it above map controls (400), HUD (400),
     train sheet (410), and the toolbar (500). */
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: var(--me-panel-width);
  z-index: 1200;
  box-shadow: var(--me-shadow-lg);
  transition: transform var(--me-transition-smooth);
}
.panel::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

.panel-section {
  padding: 16px;
  border-bottom: 1px solid var(--me-border);
}
.panel-section:last-child { border-bottom: none; }
.ps-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ps-title {
  font-size: var(--me-h4-size); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  color: var(--me-text-primary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ps-title svg { color: var(--me-accent-primary); }
.ps-count {
  font-size: 11px; font-weight: 500;
  color: var(--me-text-muted);
  letter-spacing: 0;
  text-transform: none;
  margin-left: 2px;
}
.ps-header-toggle {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.ps-header-toggle:hover .ps-title { color: var(--me-accent-primary); }
.ps-header-toggle:focus-visible {
  outline: 2px solid var(--me-accent-primary);
  outline-offset: 2px;
  border-radius: var(--me-radius-sm);
}
.ps-header-toggle > svg { color: var(--me-text-muted); transition: transform 0.15s ease; }

/* ============== SEARCH ============== */
.search-wrap { position: relative; }
.search-input {
  width: 100%;
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-md);
  padding: 10px 36px 10px 36px;
  color: var(--me-text-primary);
  font-size: 14px; font-family: inherit;
  transition: var(--me-transition-fast);
}
.search-input:focus {
  outline: none; border-color: var(--me-accent-secondary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.search-input::placeholder { color: var(--me-text-muted); }
.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--me-text-muted); pointer-events: none;
}
.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 13px;
  background: transparent; border: none; cursor: pointer;
  color: var(--me-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.search-clear:hover { background: var(--me-hover-wash); color: var(--me-text-primary); }

.search-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-md);
  box-shadow: var(--me-shadow-lg);
  max-height: 260px; overflow-y: auto;
  z-index: 50;
}
.search-item {
  padding: 10px 12px;
  display: flex; gap: 10px; align-items: center;
  cursor: pointer; border-bottom: 1px solid var(--me-border);
  transition: var(--me-transition-fast);
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: var(--me-bg-glass-hover); }
.search-item-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  background: rgba(110,231,183,0.1);
  color: var(--me-accent-primary);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.search-item-main { flex: 1; min-width: 0; }
.search-item-name {
  font-size: 13px; color: var(--me-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-item-sub {
  font-size: 11px; color: var(--me-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-loading {
  padding: 12px;
  text-align: center;
  color: var(--me-text-muted);
  font-size: 12px;
}
.search-error {
  padding: 12px;
  text-align: left;
  color: var(--me-warning, #fbbf24);
  font-size: 12px;
  line-height: 1.5;
}

.search-actions { display: flex; gap: 8px; margin-top: 8px; }
.btn-soft {
  flex: 1;
  padding: 8px 10px;
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  color: var(--me-text-secondary);
  border-radius: var(--me-radius-sm);
  font-size: 12px; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: var(--me-transition-fast);
}
.btn-soft:hover {
  background: var(--me-bg-glass-hover);
  color: var(--me-text-primary);
  border-color: var(--me-border-hover);
}
.btn-soft.accent {
  background: var(--me-accent-gradient-subtle);
  color: var(--me-accent-primary);
  border-color: rgba(110,231,183,0.25);
}
.btn-soft.accent:hover { color: var(--me-text-primary); }

/* ============== TIME CONTROL ============== */
/* "Now" reference row — displays the live wall clock above the predict-time inputs. */
.now-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: var(--me-bg-tertiary);
  border: 1px dashed var(--me-border);
  border-radius: var(--me-radius-md);
  font-size: 12px;
}
.now-row-label {
  font-size: 10px; color: var(--me-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  flex-shrink: 0;
}
.now-row-date {
  font-family: var(--me-font-mono);
  color: var(--me-text-secondary);
  font-size: 11px;
}
.now-row-time {
  font-family: var(--me-font-mono);
  color: var(--me-text-primary);
  font-size: 13px; font-weight: 600;
  margin-left: auto;
}
.now-row-sync {
  background: transparent;
  border: 1px solid var(--me-border);
  color: var(--me-text-secondary);
  font: inherit; font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--me-transition-fast);
}
.now-row-sync:hover:not(:disabled) {
  border-color: var(--me-accent-secondary);
  color: var(--me-text-primary);
}
.now-row-sync:disabled { opacity: 0.4; cursor: default; }

/* Flash highlight when the panel section is targeted from the map HUD. */
@keyframes panelFlash {
  0%   { box-shadow: inset 0 0 0 2px transparent; background: transparent; }
  20%  { box-shadow: inset 0 0 0 2px var(--me-accent-secondary); background: rgba(59,130,246,0.10); }
  100% { box-shadow: inset 0 0 0 2px transparent; background: transparent; }
}
.panel-section.flash {
  animation: panelFlash 1.2s ease-out;
  border-radius: var(--me-radius-md);
}

.time-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 10px;
}
.time-field {
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-md);
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
  cursor: text;
  transition: var(--me-transition-fast);
}
.time-field:focus-within {
  border-color: var(--me-accent-secondary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.time-field-label {
  font-size: 10px; color: var(--me-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.time-field input {
  background: transparent; border: none;
  color: var(--me-text-primary);
  font-family: var(--me-font-mono);
  font-size: 15px; font-weight: 500;
  padding: 0; outline: none;
  color-scheme: var(--me-color-scheme);
  width: 100%;
}

.time-quick {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px; margin-bottom: 10px;
}
.time-quick button {
  padding: 6px 4px;
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  color: var(--me-text-secondary);
  border-radius: 8px;
  font-size: 11px; font-family: inherit; cursor: pointer;
  transition: var(--me-transition-fast);
}
.time-quick button:hover {
  color: var(--me-text-primary);
  border-color: var(--me-border-hover);
}
.time-quick button.active {
  background: rgba(110,231,183,0.12);
  color: var(--me-accent-primary);
  border-color: rgba(110,231,183,0.3);
}

.time-slider {
  position: relative;
  margin-top: 8px;
}
.time-slider-track {
  height: 6px;
  background: var(--me-bg-tertiary);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.time-slider-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--me-accent-gradient);
  border-radius: 3px;
}
.time-slider input[type="range"] {
  position: absolute; inset: -6px 0; width: 100%;
  opacity: 0; cursor: pointer;
  margin: 0;
}
.time-slider-thumb {
  position: absolute; top: 50%;
  width: 16px; height: 16px;
  background: var(--me-bg-secondary);
  border: 3px solid var(--me-accent-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  pointer-events: none;
}
.time-slider-ticks {
  margin-top: 6px;
  display: flex; justify-content: space-between;
  font-family: var(--me-font-mono);
  font-size: 10px; color: var(--me-text-muted);
}

/* ============== NEAREST RAIL CARD ============== */
.nearest-card {
  background: linear-gradient(135deg, rgba(110,231,183,0.08), rgba(59,130,246,0.08));
  border: 1px solid rgba(110,231,183,0.22);
  border-radius: var(--me-radius-md);
  padding: 12px;
}
.nearest-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.nearest-label {
  font-size: 10px; color: var(--me-accent-primary);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.nearest-line {
  font-size: 11px; color: var(--me-text-secondary);
  font-family: var(--me-font-mono);
}
.nearest-row {
  display: flex; align-items: baseline; gap: 10px;
}
.nearest-dist {
  font-size: 28px; font-weight: 700;
  background: var(--me-accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.nearest-unit { font-size: 14px; color: var(--me-text-secondary); }
.nearest-detail {
  margin-top: 8px;
  font-size: 12px; color: var(--me-text-secondary);
  display: flex; gap: 12px;
}
.nearest-detail .sep { opacity: 0.4; }
.nearest-empty {
  padding: 14px; text-align: center;
  font-size: 12px; color: var(--me-text-muted);
}
.nearest-empty-title {
  color: var(--me-text-primary);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.nearest-empty-detail {
  font-size: 11px;
  color: var(--me-text-muted);
  line-height: 1.5;
}

/* ============== FILTER PILLS ============== */
.pill-group {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pill {
  padding: 5px 10px;
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  color: var(--me-text-secondary);
  border-radius: 999px;
  font-size: 12px; cursor: pointer; font-family: inherit;
  transition: var(--me-transition-fast);
  display: inline-flex; align-items: center; gap: 5px;
}
.pill:hover { color: var(--me-text-primary); border-color: var(--me-border-hover); }
.pill.active {
  background: rgba(110,231,183,0.12);
  color: var(--me-accent-primary);
  border-color: rgba(110,231,183,0.3);
}

.rail-type-section .pill {
  padding: 6px 11px;
  font-size: var(--me-sm-size);
  font-weight: 500;
  line-height: var(--me-body-lh);
}

.rail-type-section .pill-check {
  font-size: var(--me-xxs-size) !important;
}

.rail-grade-legend {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--me-text-secondary);
  font-family: var(--me-font-sans);
  font-size: var(--me-sm-size);
  font-weight: 500;
  line-height: var(--me-body-lh);
}
.pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block;
}

/* ============== FAVORITES ============== */
.fav-list { display: flex; flex-direction: column; gap: 4px; }
.fav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-sm);
  cursor: pointer;
  transition: var(--me-transition-fast);
}
.fav-item:hover {
  border-color: var(--me-border-hover);
  background: var(--me-bg-glass-hover);
}
.fav-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  background: rgba(59,130,246,0.15);
  color: var(--me-info);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.fav-name {
  flex: 1; min-width: 0;
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.fav-name-track { display: inline-block; will-change: transform; }
.fav-name-overflow {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.fav-item:hover .fav-name-overflow .fav-name-track,
.fav-item:focus-within .fav-name-overflow .fav-name-track {
  animation: fav-name-marquee 9s linear infinite;
}
@keyframes fav-name-marquee {
  0%, 12%   { transform: translateX(0); }
  88%, 100% { transform: translateX(calc(-1 * var(--fav-scroll, 0px))); }
}
@media (prefers-reduced-motion: reduce) {
  .fav-item:hover .fav-name-overflow .fav-name-track,
  .fav-item:focus-within .fav-name-overflow .fav-name-track {
    animation: none;
  }
}
.fav-actions {
  display: flex; justify-content: flex-end;
  margin-bottom: 8px;
}
.fav-detailed-switch {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 6px;
  font-size: 11px;
  background: transparent;
  color: var(--me-text-muted);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--me-transition-fast);
}
.fav-detailed-switch:hover { color: var(--me-text-primary); }
.fav-detailed-switch:focus-visible {
  outline: 2px solid var(--me-accent-primary);
  outline-offset: 2px;
}
.fav-detailed-track {
  position: relative;
  width: 28px; height: 16px;
  border-radius: 999px;
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  transition: var(--me-transition-fast);
  flex-shrink: 0;
}
.fav-detailed-thumb {
  position: absolute;
  top: 1px; left: 1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--me-text-muted);
  transition: transform 0.18s ease, background 0.18s ease;
}
.fav-detailed-switch.on .fav-detailed-track {
  background: rgba(59,130,246,0.25);
  border-color: var(--me-info);
}
.fav-detailed-switch.on .fav-detailed-thumb {
  transform: translateX(12px);
  background: var(--me-info);
}
.fav-detailed-switch.on .fav-detailed-label {
  color: var(--me-info);
}
.fav-remove {
  width: 24px; height: 24px; border-radius: 4px;
  background: transparent; border: none; cursor: pointer;
  color: var(--me-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--me-transition-fast);
}
.fav-remove:hover { color: var(--me-danger); background: rgba(248,113,113,0.1); }
.fav-copy {
  width: 24px; height: 24px; border-radius: 4px;
  background: transparent; border: none; cursor: pointer;
  color: var(--me-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--me-transition-fast);
}
.fav-copy:hover { color: var(--me-info); background: rgba(59,130,246,0.10); }
.fav-copy.copied { color: var(--me-success, #22c55e); background: rgba(34,197,94,0.12); }
.fav-copy.failed { color: var(--me-danger); background: rgba(248,113,113,0.12); }
.fav-edit {
  width: 24px; height: 24px; border-radius: 4px;
  background: transparent; border: none; cursor: pointer;
  color: var(--me-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--me-transition-fast);
}
.fav-edit:hover { color: var(--me-info); background: rgba(59,130,246,0.10); }
.fav-item.editing { cursor: default; border-color: var(--me-border-hover); }
.fav-name-input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 13px;
  background: var(--me-bg-secondary, var(--me-bg-tertiary));
  color: var(--me-text);
  border: 1px solid var(--me-border-hover);
  border-radius: 4px;
  padding: 4px 6px;
  outline: none;
}
.fav-name-input:focus { border-color: var(--me-info); }
.fav-empty {
  padding: 12px;
  border: 1px dashed var(--me-border);
  border-radius: var(--me-radius-sm);
  text-align: center;
  font-size: 12px; color: var(--me-text-muted);
}

/* ============== FAVORITE LIMIT MODAL ============== */
.fav-modal-backdrop {
  position: fixed; inset: 0;
  background: var(--me-backdrop);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 4000;
  padding: 16px;
}
.fav-modal {
  width: min(420px, 100%);
  max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--me-bg-secondary);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  overflow: hidden;
}
.fav-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--me-border);
}
.fav-modal-title {
  font-size: 14px; font-weight: 600; color: var(--me-text-primary);
}
.fav-modal-close {
  width: 28px; height: 28px;
  background: transparent; border: none; border-radius: 6px;
  color: var(--me-text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.fav-modal-close:hover { background: var(--me-bg-glass-hover); color: var(--me-text-primary); }
.fav-modal-body {
  padding: 12px 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.fav-modal-hint {
  font-size: 12px; color: var(--me-text-muted);
}
.fav-modal-pending {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(59,130,246,0.10);
  border: 1px solid rgba(59,130,246,0.28);
  border-radius: var(--me-radius-sm);
  font-size: 13px; color: var(--me-text-primary);
}
.fav-modal-list {
  display: flex; flex-direction: column; gap: 6px;
}
.fav-modal-item {
  text-align: left;
  padding: 8px 10px;
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-sm);
  cursor: pointer;
  transition: var(--me-transition-fast);
  color: var(--me-text-primary);
}
.fav-modal-item:hover {
  border-color: var(--me-info);
  background: var(--me-bg-glass-hover);
}
.fav-modal-item-name { font-size: 13px; }
.fav-modal-item-sub {
  margin-top: 2px;
  font-family: var(--me-font-mono); font-size: 11px;
  color: var(--me-text-muted);
}
.fav-modal-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--me-border);
  display: flex; justify-content: flex-end;
}

/* ============== MAP AREA ============== */
.map-area {
  position: relative;
  min-height: 0;
  min-width: 0;
  background: var(--me-bg-primary);
  transition: background-color var(--me-transition-normal);
}
#map {
  position: absolute; inset: 0;
  background: var(--me-map-bg);
}
.leaflet-container {
  background: var(--me-map-bg) !important;
  font-family: var(--me-font-sans) !important;
}
.leaflet-control-attribution {
  background: var(--me-bg-glass) !important;
  color: var(--me-text-muted) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--me-text-secondary) !important; }
.leaflet-control-zoom a {
  background: var(--me-bg-glass) !important;
  color: var(--me-text-primary) !important;
  border: 1px solid var(--me-border) !important;
  backdrop-filter: blur(10px);
}
.leaflet-control-zoom a:hover {
  background: var(--me-bg-glass-hover) !important;
}
.map-tiles {
  transition: filter var(--me-transition-normal), opacity var(--me-transition-normal);
}
.map-tiles-dark {
  filter: invert(0.72) hue-rotate(200deg) brightness(1.20) contrast(1.86) saturate(0.88);
}
.map-tiles-light {
  filter: brightness(0.84) contrast(1.26) saturate(0.86);
}
.map-tiles-streets-dark {
  filter: invert(0.72) hue-rotate(200deg) brightness(1.20) contrast(1.86) saturate(0.88);
}
.map-tiles-streets-light {
  filter: brightness(0.84) contrast(1.26) saturate(0.86);
}
.map-tiles-terrain-dark {
  filter: invert(0.73) hue-rotate(185deg) brightness(1.12) contrast(1.62) saturate(1.08);
}
.map-tiles-terrain-light {
  filter: brightness(0.89) contrast(1.18) saturate(0.96);
}
.map-tiles-satellite-dark {
  filter: brightness(0.68) contrast(1.24) saturate(0.95);
}
.map-tiles-satellite-light {
  filter: brightness(0.88) contrast(1.12) saturate(1.02);
}

/* User pin */
.user-pin {
  width: 22px; height: 22px;
  background: var(--me-accent-gradient);
  border: 3px solid var(--me-pin-border);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(110,231,183,0.25), 0 2px 8px rgba(0,0,0,0.5);
  position: relative;
}
.user-pin::after {
  content: ''; position: absolute; inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(110,231,183,0.4);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Nearest-rail highlight pin */
.rail-pin {
  width: 18px; height: 18px;
  background: var(--me-pin-fill);
  border: 3px solid var(--me-warning);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(251,191,36,0.3), 0 2px 8px rgba(0,0,0,0.6);
  animation: railBreath 2.2s ease-in-out infinite;
}
@keyframes railBreath {
  0%,100% { box-shadow: 0 0 0 4px rgba(251,191,36,0.3), 0 2px 8px rgba(0,0,0,0.6); }
  50%     { box-shadow: 0 0 0 10px rgba(251,191,36,0.0), 0 2px 8px rgba(0,0,0,0.6); }
}

/* Train marker — top-down silhouette + non-rotating label.
   The marker is anchored at lat/lng (0,0); the icon and label are absolutely
   positioned so the lat/lng falls at the centre of the train body. */
.train-marker-v2 {
  position: relative;
  width: 0; height: 0;
  pointer-events: auto;
}
.train-marker-v2 .train-icon {
  position: absolute;
  /* width/height/left/top set inline per kind in buildTrainMarkerHtml */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
  transform: rotate(var(--rot, 0deg));
  transform-origin: 50% 50%;
  transition: transform 0.6s linear;
}
.train-marker-v2 .train-icon img {
  width: 100%; height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.train-marker-v2 .train-icon-fallback {
  width: 60%; height: 60%;
  margin: 20%;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.9);
}
.train-marker-v2 .train-marker-label {
  position: absolute;
  left: 50%;
  /* top set inline per kind */
  transform: translateX(-50%);
  padding: 1px 6px;
  background: var(--me-bg-glass);
  backdrop-filter: blur(8px);
  border: 1px solid var(--me-border-hover);
  border-radius: 999px;
  box-shadow: var(--me-shadow-sm, 0 1px 4px rgba(0,0,0,0.3));
  font-family: var(--me-font-mono);
  font-size: 10px; font-weight: 600;
  color: var(--col, var(--me-text-primary));
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: opacity var(--me-transition-fast), visibility var(--me-transition-fast);
}
.train-marker-v2.labels-hidden .train-marker-label {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.train-marker-v2.dwelling .train-icon { opacity: 0.7; }

/* Floating map widgets */
.map-hud {
  position: absolute; top: 12px; right: 12px;
  z-index: 400;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 240px;
  /* Recede so it doesn't fight the zoom controls; brighten on hover. */
  opacity: 0.55;
  transition: opacity var(--me-transition-fast);
  pointer-events: auto;
}
.map-hud:hover, .map-hud:focus-within { opacity: 1; }
.map-layer-switch {
  position: absolute;
  top: 10px;
  left: 52px;
  z-index: 400;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--me-bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-sm);
  box-shadow: var(--me-shadow-md);
}
.map-layer-btn {
  min-width: 58px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--me-text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  transition: var(--me-transition-fast);
}
.map-layer-btn:hover {
  color: var(--me-text-primary);
  background: var(--me-hover-wash);
}
.map-layer-btn.active {
  color: var(--me-on-accent);
  background: var(--me-accent-gradient);
  border-color: transparent;
}
.map-hud-card {
  background: var(--me-bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-md);
  padding: 10px 12px;
  color: var(--me-text-primary);
  box-shadow: var(--me-shadow-md);
  font-size: 12px;
}
.map-hud-card .label {
  font-size: 10px; color: var(--me-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px;
}
/* Clickable HUD clock — tabs (now/predict) + stacked date/time. */
.map-hud-clock {
  padding: 0;
  min-width: 132px;
  overflow: hidden;
}
.map-hud-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--me-tab-surface);
  border-bottom: 1px solid var(--me-border);
}
.map-hud-tab {
  appearance: none;
  font: inherit;
  background: transparent;
  border: none;
  color: var(--me-text-muted);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 5px 0;
  cursor: pointer;
  transition: var(--me-transition-fast);
}
.map-hud-tab:hover { color: var(--me-text-secondary); }
.map-hud-tab.active {
  color: var(--me-text-primary);
  background: rgba(59,130,246,0.18);
  box-shadow: inset 0 -2px 0 var(--me-accent-secondary);
}
.map-hud-clock-body {
  appearance: none;
  font: inherit;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 8px 12px 10px;
  color: inherit;
  transition: background var(--me-transition-fast);
}
.map-hud-clock-body:hover { background: var(--me-hover-wash); }
.map-hud-clock-body:active { background: var(--me-hover-wash); }
.map-hud-clock-date {
  font-family: var(--me-font-mono);
  font-size: 11px;
  color: var(--me-text-secondary);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.map-hud-clock-time {
  font-family: var(--me-font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--me-text-primary);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-top: 2px;
}

/* ============== BOTTOM SHEET (trains) ============== */
.sheet {
  --sheet-height: var(--sheet-user-height, 55%);
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--me-bg-secondary);
  border-top: 1px solid var(--me-border);
  z-index: 410;
  height: var(--sheet-height);
  max-height: 85%;
  min-height: 120px;
  display: flex; flex-direction: column;
  transition: transform var(--me-transition-smooth);
  box-shadow: var(--me-shadow-lg);
}
.sheet.collapsed { transform: translateY(calc(100% - 64px)); }
.sheet.resizing { transition: none; }

.sheet-handle {
  position: relative;
  display: flex; justify-content: center;
  padding: 8px 0 4px;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}
.sheet-handle::before {
  content: ''; width: 40px; height: 4px;
  background: var(--me-border-hover);
  border-radius: 2px;
  transition: background var(--me-transition-fast), width var(--me-transition-fast), height var(--me-transition-fast);
}
.sheet-handle:hover::before,
.sheet-handle.dragging::before {
  background: var(--me-accent-primary, #6ee7b7);
  width: 56px;
}
body.sheet-resizing {
  cursor: ns-resize !important;
  user-select: none;
}
body.sheet-resizing .leaflet-container { pointer-events: none; }

.sheet-head {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px 10px;
  border-bottom: 1px solid var(--me-border);
}
.sheet-title {
  font-size: 14px; font-weight: 600;
  color: var(--me-text-primary);
  display: flex; align-items: center; gap: 8px;
}
.sheet-count {
  font-family: var(--me-font-mono);
  font-size: 12px; color: var(--me-accent-primary);
  background: rgba(110,231,183,0.12);
  border: 1px solid rgba(110,231,183,0.25);
  padding: 2px 8px;
  border-radius: 999px;
}
.sheet-sub {
  font-size: 11px; color: var(--me-text-muted);
  margin-left: auto;
  font-family: var(--me-font-mono);
  display: flex; align-items: center; gap: 10px;
}
.sheet-live {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--me-text-secondary);
  font-family: var(--me-font-mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--me-bg-glass);
  border: 1px solid var(--me-border);
}
.sheet-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--me-success, #34d399);
  box-shadow: 0 0 0 0 currentColor;
  animation: sheet-live-pulse 1.6s ease-out infinite;
}
@keyframes sheet-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.sheet-filters {
  display: flex; gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--me-border);
}
.sheet-filters::-webkit-scrollbar { display: none; }
.sheet-filters .pill { flex-shrink: 0; }

.train-list {
  flex: 1; overflow-y: auto;
  padding: 8px 16px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.train-list::-webkit-scrollbar { width: 8px; }
.train-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

.train-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-md);
  cursor: pointer;
  transition: var(--me-transition-fast);
}
.train-card:hover {
  border-color: var(--me-border-hover);
  background: var(--me-bg-glass-hover);
  transform: translateY(-1px);
}
.train-card.passing {
  border-color: rgba(110,231,183,0.4);
  background: linear-gradient(135deg, rgba(110,231,183,0.06), rgba(59,130,246,0.04));
  box-shadow: 0 0 0 1px rgba(110,231,183,0.2), var(--me-shadow-glow);
}

.tc-countdown {
  text-align: center;
  min-width: 66px;
  padding: 8px 6px;
  background: var(--me-bg-secondary);
  border-radius: var(--me-radius-sm);
  border: 1px solid var(--me-border);
}
.tc-countdown-value {
  font-family: var(--me-font-mono);
  font-size: 22px; font-weight: 700;
  color: var(--me-text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tc-countdown-value.imminent {
  background: var(--me-accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tc-countdown-value.past {
  color: var(--me-text-muted);
}
.tc-countdown-unit {
  font-size: 10px;
  color: var(--me-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 3px;
}

.tc-main { min-width: 0; }
.tc-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.tc-badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  font-family: var(--me-font-sans);
}
.tc-number {
  font-family: var(--me-font-mono);
  font-size: 15px; font-weight: 700;
  color: var(--me-text-primary);
  letter-spacing: 0.02em;
}
.tc-route {
  font-size: 12px; color: var(--me-text-secondary);
  display: flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-arrow { color: var(--me-text-muted); }

.tc-right { text-align: right; }
.tc-time {
  font-family: var(--me-font-mono);
  font-size: 16px; font-weight: 600;
  color: var(--me-text-primary);
  font-variant-numeric: tabular-nums;
}
.tc-dir {
  font-size: 11px;
  margin-top: 2px;
  display: inline-flex; align-items: center; gap: 4px;
}
.tc-dir.northbound { color: var(--me-info); }
.tc-dir.southbound { color: var(--me-warning); }

.train-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--me-text-muted);
  font-size: 13px;
}
.train-empty svg { opacity: 0.4; margin-bottom: 10px; }
.train-empty-title {
  color: var(--me-text-primary);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.train-empty-detail {
  font-size: 12px;
  color: var(--me-text-muted);
  line-height: 1.5;
  max-width: 320px;
  margin: 0 auto;
}

/* ============== TRAIN DETAIL MODAL ============== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--me-backdrop);
  backdrop-filter: blur(4px);
  z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--me-bg-secondary);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-lg);
  box-shadow: var(--me-shadow-lg);
  max-width: 520px; width: 100%;
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.25s cubic-bezier(0.4,0,0.2,1);
}
@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--me-border);
  display: flex; align-items: center; gap: 12px;
}
.modal-close {
  margin-left: auto;
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  color: var(--me-text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--me-bg-tertiary); color: var(--me-text-primary); }

.modal-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-sm);
  color: var(--me-text-primary);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.modal-action:hover {
  background: var(--me-accent-primary);
  border-color: var(--me-accent-primary);
  color: #fff;
}

.modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
}
.modal-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 16px;
}
.modal-stat {
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-sm);
  padding: 10px;
}
.modal-stat-label {
  font-size: 10px; color: var(--me-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.modal-stat-value {
  font-size: 16px; font-weight: 600;
  font-family: var(--me-font-mono);
  color: var(--me-text-primary);
}

.timetable {
  position: relative;
  padding: 8px 0 8px 24px;
}
.timetable::before {
  content: ''; position: absolute;
  left: 10px; top: 16px; bottom: 16px;
  width: 2px;
  background: linear-gradient(180deg, var(--me-accent-primary), var(--me-accent-secondary));
  border-radius: 1px;
}
.tt-stop {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 8px 0;
  position: relative;
}
.tt-stop::before {
  content: ''; position: absolute;
  left: -20px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--me-bg-secondary);
  border: 2px solid var(--me-text-muted);
}
.tt-stop.highlight::before {
  border-color: var(--me-warning);
  background: var(--me-warning);
  box-shadow: 0 0 0 4px rgba(251,191,36,0.25);
}
.tt-stop.past::before { border-color: var(--me-text-muted); background: var(--me-text-muted); opacity: 0.5; }
.tt-name { font-size: 14px; color: var(--me-text-primary); }
.tt-stop.past .tt-name { color: var(--me-text-muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.1); }
.tt-stop.highlight .tt-name { color: var(--me-warning); font-weight: 600; }
.tt-dist { font-size: 11px; color: var(--me-text-muted); font-family: var(--me-font-mono); }
.tt-time {
  font-family: var(--me-font-mono);
  font-size: 14px;
  color: var(--me-text-secondary);
  font-variant-numeric: tabular-nums;
}
.tt-stop.highlight .tt-time { color: var(--me-warning); font-weight: 700; }

/* Region dropdown */
.tb-region-select {
  position: relative;
  display: inline-flex; align-items: center;
  min-width: 0;
}
.tb-region-select select {
  appearance: none; -webkit-appearance: none;
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  color: var(--me-text-primary);
  padding: 8px 30px 8px 12px;
  border-radius: var(--me-radius-md);
  font-size: 13px; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: var(--me-transition-fast);
  max-width: 100%;
}
.tb-region-select select:hover { border-color: var(--me-border-hover); }
.tb-region-select select:focus {
  outline: none; border-color: var(--me-accent-secondary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.tb-region-select svg {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--me-text-muted); pointer-events: none;
}

.tb-menu-btn.active {
  background: var(--me-accent-secondary);
  color: #fff;
}

/* Nearest card Google links */
.nearest-links {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--me-border);
}
.nearest-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 8px;
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-sm);
  color: var(--me-text-primary);
  font-size: 12px; text-decoration: none;
  transition: var(--me-transition-fast);
}
.nearest-link:hover {
  background: rgba(110,231,183,0.1);
  border-color: rgba(110,231,183,0.3);
  color: var(--me-accent-primary);
}
.nl-icon { font-size: 13px; }

/* Panel collapse (desktop) — push the map/sheet right while open, collapse the
   column to 0 while hidden so map-area expands smoothly. */
@media (min-width: 901px) {
  .main {
    grid-template-columns: var(--me-panel-width) 1fr;
    transition: grid-template-columns var(--me-transition-smooth);
  }
  .main.panel-hidden {
    grid-template-columns: 0 1fr;
  }
  .panel {
    position: relative;
    top: auto; bottom: auto; left: auto;
    width: 100%;
    z-index: auto;
    box-shadow: none;
    transform: none;
    transition: none;
  }
  .main.panel-hidden .panel {
    overflow: hidden;
    border-right: none;
  }
  .sheet {
    left: var(--me-panel-width);
    transition: left var(--me-transition-smooth), transform var(--me-transition-smooth);
  }
  .main.panel-hidden .sheet {
    left: 0;
  }
}

/* ============== MOBILE ============== */
.mobile-menu-btn { display: none; }
.panel-backdrop { display: none; }

@media (max-width: 900px) {
  .main { grid-template-columns: 1fr; }
  .toolbar > .tb-tool:last-child { display: none; }
  .tb-region-select { flex: 1 1 auto; }
  .tb-region-select select { width: 100%; }
  .panel {
    width: min(88vw, 360px);
    z-index: 1200; /* above all map controls + FABs */
    transform: translateX(-100%);
    touch-action: pan-y;
  }
  .panel.open { transform: translateX(0); }
  .panel.collapsed { transform: translateX(-100%); }
  .panel-backdrop {
    display: block;
    position: absolute; inset: 0;
    background: var(--me-backdrop);
    backdrop-filter: blur(2px);
    z-index: 1100; /* below panel, above all map controls */
    opacity: 0; pointer-events: none;
    transition: opacity var(--me-transition-normal);
  }
  .panel-backdrop.show { opacity: 1; pointer-events: auto; }
  .tb-menu-btn { display: inline-flex; }
  .tb-logo-sub { display: none; }
  .tb-collapse-btn { display: none; }
  .tb-region-select select { padding: 6px 26px 6px 8px; font-size: 12px; }
  .map-hud { top: 12px; right: 12px; max-width: 180px; }
  .map-hud .label { font-size: 9px; }
  .sheet { max-height: 85%; }
  .sheet:not([data-user-sized]) { height: 55%; }
  .sheet.collapsed { transform: translateY(calc(100% - 56px)); }
  .modal-stats { grid-template-columns: repeat(3, 1fr); }
  .tc-countdown { min-width: 58px; }
  .tc-countdown-value { font-size: 20px; }
  .train-card { grid-template-columns: auto 1fr auto; gap: 10px; padding: 10px 12px; }
}
@media (min-width: 901px) {
  .tb-menu-btn { display: none; }
}

@media (max-width: 480px) {
  .toolbar { padding: 0 10px; gap: 10px; }
  .tb-logo-title { font-size: 14px; }
  .tb-region-btn { padding: 5px 8px; font-size: 11px; }
  .map-layer-btn {
    min-width: 32px;
    width: 32px;
    padding: 0;
  }
  .map-layer-label { display: none; }
  .tc-route { font-size: 11px; }
  .tc-time { font-size: 14px; }
  .modal-stats { grid-template-columns: repeat(2, 1fr); }
}

/* small utility */
.row { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }

/* Train card adjacent-stop segment */
.tc-route-mini {
  font-size: 11px;
  color: var(--me-text-muted);
  margin-left: 4px;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tc-segment {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
  padding: 5px 8px;
  background: rgba(110,231,183,0.06);
  border: 1px solid rgba(110,231,183,0.15);
  border-radius: var(--me-radius-sm);
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
}
.tc-seg-stop {
  display: inline-flex; align-items: baseline; gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.tc-seg-stop-end { justify-content: flex-end; }
.tc-seg-time {
  font-family: var(--me-font-mono);
  font-weight: 600;
  color: var(--me-accent-primary);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  flex-shrink: 0;
}
/* Long station names (e.g. 南港展覽館) used to break the row. Now: nowrap +
   trailing fade-mask, with a CSS marquee that only auto-runs on the actively
   "passing" card or on hover. The min(0px, …) clamp keeps short names still. */
.tc-seg-name {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: var(--me-text-primary); font-weight: 500;
  /* Establish a containment context so the inner span's marquee can read
     this element's width (100cqw) and slide by the exact overflow amount. */
  container-type: inline-size;
  /* Soft trailing fade — small enough that the last character is still
     readable when the marquee has slid the text fully into view. */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 6px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 6px), transparent 100%);
}
.tc-seg-name-inner {
  display: inline-block;
  will-change: transform;
  /* Always-on slow marquee so long names like 南港展覽館 reveal themselves
     over time. The min(0px, …) clamp resolves to 0 for names that fit, so
     short-named cards stay perfectly still — only overflowing text moves.
     `100cqw` is the actual width of .tc-seg-name, so the slide ends with
     the text's right edge aligned to the container's right edge. */
  animation: tc-name-marquee 12s ease-in-out infinite;
}
.train-card.passing .tc-seg-name-inner {
  animation-duration: 8s;
}
@keyframes tc-name-marquee {
  0%, 10%, 100% { transform: translateX(0); }
  55%, 80%      { transform: translateX(min(0px, calc(100cqw - 100% - 6px))); }
}
@media (prefers-reduced-motion: reduce) {
  .tc-seg-name-inner { animation: none; }
}
.tc-seg-arrow {
  color: var(--me-text-muted);
  font-size: 10px;
  letter-spacing: -1px;
  flex-shrink: 0;
}

/* Modal timetable name column — single-line ellipsis so a long station
   doesn't push the km/time columns off-screen on narrow phones. */
.tt-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hide { display: none !important; }

/* Map FAB — floating action button (locate me), positioned under Leaflet zoom controls */
.map-fab-stack {
  position: absolute;
  left: 10px;
  top: 84px; /* below default zoom in/out (zoom buttons end ~78px from top) */
  z-index: 400;
  display: flex; flex-direction: column; gap: 6px;
}
.map-fab {
  width: 30px; height: 30px;
  border-radius: 4px;
  background: var(--me-bg-glass);
  border: 2px solid var(--me-border-hover);
  color: var(--me-text-primary);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--me-shadow-sm);
  transition: var(--me-transition-fast);
}
.map-fab:hover {
  background: var(--me-bg-glass-hover);
  color: var(--me-accent-secondary);
}
.map-fab:active { transform: translateY(0); }
@media (max-width: 900px) {
  .map-fab-stack { top: 84px; left: 10px; bottom: auto; right: auto; }
}

/* ============== ABOUT ME ============== */
.about-me .about-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--me-text-primary);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.about-me .about-quote {
  margin: 0 0 12px 0;
  padding: 10px 12px;
  background: var(--me-bg-tertiary);
  border-left: 3px solid var(--me-accent-primary);
  border-radius: var(--me-radius-sm);
  font-style: italic;
  color: var(--me-text-primary);
}
.about-me .about-quote-zh {
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 4px;
}
.about-me .about-quote-en {
  font-size: 12px;
  line-height: 1.5;
  color: var(--me-text-secondary);
  margin-bottom: 6px;
}
.about-me .about-quote-cite {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--me-text-muted);
}
.about-me .about-quote-work { font-style: italic; }
.about-me .about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.about-me .about-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--me-bg-tertiary);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-sm);
  color: var(--me-text-primary);
  text-decoration: none;
  font-size: 12px;
  transition: var(--me-transition-fast);
}
.about-me .about-link:hover {
  border-color: var(--me-accent-secondary);
  color: var(--me-accent-secondary);
  transform: translateY(-1px);
}
.about-me .about-favicon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.about-me .about-favicon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--me-text-primary);
  background: var(--me-accent-primary);
  letter-spacing: 0;
}

/* ============== NOTICE STACK ============== */
/* Top-centre transient banners — geolocation/tile/search failures.
   Sits above the toolbar but below modals. Each notice carries its own
   level-coloured accent. */
.notice-stack {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: min(560px, calc(100vw - 24px));
}
.notice {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  border-radius: var(--me-radius-md);
  background: var(--me-bg-glass);
  border: 1px solid var(--me-border);
  box-shadow: var(--me-shadow-lg);
  color: var(--me-text-primary);
  backdrop-filter: blur(8px);
}
.notice-text { flex: 1; min-width: 0; }
.notice-error {
  border-color: rgba(239,68,68,0.45);
  box-shadow: 0 4px 16px rgba(239,68,68,0.20);
}
.notice-error svg:first-of-type { color: #ef4444; }
.notice-warn {
  border-color: rgba(251,191,36,0.45);
  box-shadow: 0 4px 16px rgba(251,191,36,0.20);
}
.notice-warn svg:first-of-type { color: var(--me-warning, #fbbf24); }
.notice-info svg:first-of-type { color: var(--me-info, #60a5fa); }
.notice-dismiss {
  background: transparent;
  border: none;
  color: var(--me-text-muted);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  transition: var(--me-transition-fast);
}
.notice-dismiss:hover { color: var(--me-text-primary); background: var(--me-hover-wash); }
.notice-action {
  flex: none;
  background: rgba(96,165,250,0.15);
  border: 1px solid rgba(96,165,250,0.45);
  color: var(--me-text-primary);
  cursor: pointer;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  transition: var(--me-transition-fast);
}
.notice-action:hover { background: rgba(96,165,250,0.28); }