/* Shared styles for the route lab + view pages (served at /app.css). */
:root{--bg:#0f1720;--panel:#182635;--line:#26384c;--fg:#e6edf3;--mut:#93a4b8;--accent:#4c9be8;}

.diffpill{padding:1px 7px;border-radius:10px;font-weight:700;font-size:11px;color:#04121f}

/* trail-mix bar + legend */
.mixbar{display:flex;height:14px;border-radius:4px;overflow:hidden;margin:8px 0 4px}
.mixleg{display:flex;flex-wrap:wrap;gap:3px 10px;font-size:11px;color:var(--mut)}
.mixleg span{display:flex;align-items:center;gap:4px}
.dot{width:9px;height:9px;border-radius:2px;display:inline-block}

/* map overlays */
.kmmark{background:#0f1720dd;color:#fff;border:1px solid var(--accent);border-radius:12px;
  font:600 11px system-ui;min-width:20px;height:18px;line-height:16px;text-align:center;padding:0 4px;box-shadow:0 1px 3px #0007}
.arrowmark{color:#fff;font-size:15px;line-height:15px;text-shadow:0 0 2px #000,0 0 3px #000,0 0 4px #000}
.arrowmark.seg{color:#111a26;font-size:17px;text-shadow:0 0 2px #fde047,0 0 3px #fff,0 0 4px #fff}

/* trail-by-trail scrollable list (used on both pages) */
.rtbox{background:#0e1a26;border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin:8px 0;font-size:12.5px}
.tllist{overflow-y:auto;border:1px solid var(--line);border-radius:6px}
.trow{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--line);cursor:pointer}
.trow:last-child{border-bottom:0}
.trow:hover{background:#1c2c3f}
.trow.on{background:#fde047;color:#04121f}
.tinfo{min-width:0;display:flex;flex-direction:column;gap:1px}
.tlabel{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmeta{font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.trow.on .tmeta{color:#0f2233}
.trow .tp{margin-left:auto;flex:0 0 auto}
.typechip{padding:2px 8px;border-radius:10px;font-weight:700;font-size:11px;color:#04121f;white-space:nowrap}

/* scored variations list */
.vrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.vrow:last-child{border-bottom:0}
.vrow:hover{background:#1c2c3f} .vrow.on{background:#22364a;box-shadow:inset 3px 0 0 var(--accent)}
.vscore{flex:0 0 auto;min-width:32px;text-align:center;color:#04121f;font-weight:800;border-radius:6px;padding:4px 6px;font-size:14px}
.vinfo{min-width:0;flex:1} .vname{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vmeta{font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.vpill{flex:0 0 auto}

/* tabbed deck */
.tabs{display:flex}
.tabs button{flex:1;background:none;border:0;color:var(--mut);padding:9px 4px;font:inherit;
  font-weight:600;cursor:pointer;border-bottom:2px solid var(--line);margin:0;border-radius:0;width:auto}
.tabs button.on{color:var(--fg);border-bottom-color:var(--accent)}

.spin{display:inline-block;width:12px;height:12px;border:2px solid #ffffff40;border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}

/* "out scouting the trails" state — fills the space the stale routes used to occupy */
.searching{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:48px 20px;text-align:center;min-height:220px}
.searching .hiker{font-size:52px;line-height:1;animation:hike 1.1s ease-in-out infinite}
@keyframes hike{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12px) rotate(6deg)}}
.searching .searchmsg{font-size:15px;font-weight:600;color:var(--fg);opacity:.9;
  animation:quipfade 1.5s ease-in-out infinite;max-width:280px}
@keyframes quipfade{0%,100%{opacity:.45}50%{opacity:1}}
.searching .searchbar{width:180px;max-width:70%;height:4px;border-radius:3px;overflow:hidden;
  background:#ffffff1f}
.searching .searchbar i{display:block;height:100%;width:40%;border-radius:3px;background:var(--accent);
  animation:trek 1.3s ease-in-out infinite}
@keyframes trek{0%{margin-left:-40%}100%{margin-left:100%}}