/* ============================================================
   Pipezoom - css/route.css, the Routes page's stylesheet.

   The week strip of 7 day cards; the map beside the stop list from
   1000 px (the map at 60 percent, held in view while the list scrolls)
   and over it below that (the map 50vh high); the numbered pins, the
   line and the stop rows in the route board's role colors (css/board.css),
   light by default and stepped for the dark themes.
   Defines the --rt- tokens and the classes under .rtx.
   Notes: docs/notes/app.pipezoom.com/css/route.css.md
   ============================================================ */

.rtx{
  --rt-door:#2A5A82;
  --rt-prio:#4B3A76;
  --rt-call:#1A2130;
  --rt-maybe:#DCE3EB;
  --rt-maybe-ink:#394353;
  --rt-cluster:#2F6B5E;
  --rt-backup:#8E3A4E;
  --rt-appt:#0F5C6B;
  --rt-on:#FFFFFF;
  --rt-c:var(--rt-door);
  --rt-c-ink:var(--rt-on);
  display:flex;flex-direction:column;gap:16px;
}
/* The dark theme is the html tag with no data-theme, and black is dark with a black page. */
html:not([data-theme]) .rtx,
html[data-theme="dark"] .rtx,
html[data-theme="black"] .rtx{
  --rt-door:#3D7BAC;
  --rt-prio:#6B57A0;
  --rt-call:#080C14;
  --rt-maybe:#26314A;
  --rt-maybe-ink:#CCD6E4;
  --rt-cluster:#3C8A78;
  --rt-backup:#B85B71;
  --rt-appt:#2A8E9F;
}
.rtx .rtx-r-door,.rtx .cal-pin-door{--rt-c:var(--rt-door)}
.rtx .rtx-r-prio,.rtx .cal-pin-prio{--rt-c:var(--rt-prio)}
.rtx .rtx-r-call,.rtx .cal-pin-call{--rt-c:var(--rt-call)}
.rtx .rtx-r-cluster,.rtx .cal-pin-cluster{--rt-c:var(--rt-cluster)}
.rtx .rtx-r-backup,.rtx .cal-pin-backup{--rt-c:var(--rt-backup)}
.rtx .rtx-r-appt,.rtx .cal-pin-appt{--rt-c:var(--rt-appt)}
.rtx .rtx-r-maybe,.rtx .cal-pin-maybe{--rt-c:var(--rt-maybe);--rt-c-ink:var(--rt-maybe-ink)}

/* The page head's day, and Today beside it. */
.rtx-dateline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.rtx-today{
  padding:1px 9px;border-radius:var(--radius-pill);
  background:var(--accent-strong);color:var(--ink-inverse);
  font-size:.72rem;font-weight:700;
}

/* The week strip */
.rtx-week{display:flex;align-items:stretch;gap:8px;}
.rtx-step{flex:none;display:flex;align-items:center;gap:6px;}
.rtx-days{position:relative;flex:1;min-width:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
.rtx-card{
  display:flex;flex-direction:column;gap:1px;min-width:0;
  padding:7px 10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink-soft);
  text-decoration:none;
}
.rtx-card:hover{background:var(--surface-hover);color:var(--ink);text-decoration:none;}
.rtx-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring-soft);}
.rtx-card-d{font-size:.8rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rtx-card-t{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.rtx-card-n{font-size:.78rem;font-weight:600;}
.rtx-card-m{font-size:.72rem;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rtx-card-on,.rtx-card-on:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.rtx-card-on .rtx-card-d,.rtx-card-on .rtx-card-m{color:var(--ink-inverse);}

/* The map and the list */
.rtx-main{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;}
.rtx-mapbox{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.rtx-canvas{height:50vh;min-height:260px;}
.rtx-nomap{margin:0;padding:22px 16px;color:var(--ink-soft);font-size:.9rem;}
.rtx-maperr{margin:0;padding:8px 12px;font-size:.8rem;color:var(--ink);background:var(--danger-wash);}
.rtx .leaflet-container{background:var(--surface-sunken);font:inherit;}
.rtx .leaflet-popup-content-wrapper,.rtx .leaflet-popup-tip{background:var(--surface-high);color:var(--ink);}
.rtx .leaflet-popup-content a{color:var(--accent);}
@media (min-width:1000px){
  .rtx-main{grid-template-columns:minmax(0,3fr) minmax(0,2fr);}
  .rtx-mapbox{position:sticky;top:calc(var(--topbar-h) + 52px);}
  .rtx-canvas{height:calc(100vh - var(--topbar-h) - 76px);min-height:420px;}
}

/* Pins: the start point in ink, each stop a round head in its role's color with its number inside. */
.rtx .cal-pin-start{color:var(--ink);}
.rtx .cal-pin.cal-pin-n{display:block;font-size:12px;line-height:1;}
.rtx .cal-pin-n > span{
  position:absolute;left:1px;top:1px;width:28px;height:28px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--rt-c);border:2px solid var(--rt-on);
  box-shadow:0 1px 4px #0000004D;
}
.rtx .cal-pin-n b{transform:rotate(45deg);color:var(--rt-c-ink);font-weight:700;}
.rtx .rtx-line{stroke:var(--accent-strong);stroke-width:4;stroke-opacity:.85;fill:none;}
.rtx .rtx-line-in{stroke-width:3;stroke-dasharray:4 8;}
.rtx-pop{display:flex;flex-direction:column;gap:3px;min-width:180px;font-size:.85rem;}
.rtx-pop-do{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px;}

/* The list column */
.rtx-side{display:flex;flex-direction:column;gap:10px;min-width:0;}
.rtx-tools{display:flex;flex-direction:column;gap:8px;}
.rtx-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.rtx-gm{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.rtx-gm-l{font-size:.8rem;font-weight:600;color:var(--ink-soft);}
.rtx-sum{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0;font-size:.92rem;color:var(--ink);}
.rtx-sum span{color:var(--ink-soft);}
.rtx-note{margin:0;font-size:.75rem;line-height:1.45;color:var(--ink-faint);}
.rtx-empty{margin:4px 0 0;font-size:.9rem;color:var(--ink-soft);}
.rtx-h{margin:10px 0 0;font-size:.88rem;font-weight:700;color:var(--ink);}
.rtx-busy .rtx-side{opacity:.6;pointer-events:none;}

.rtx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.rtx-stop{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 6px 9px 10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.rtx-n{
  flex:none;width:28px;height:28px;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--rt-c);color:var(--rt-c-ink);
  font-size:.8rem;font-weight:700;
}
.rtx-n-off{background:var(--surface-high);color:var(--ink-faint);}
.rtx-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.rtx-name{margin:0;font-size:.92rem;font-weight:600;color:var(--ink);}
.rtx-addr{margin:0;font-size:.8rem;color:var(--ink-soft);overflow-wrap:anywhere;}
.rtx-zip{margin-left:4px;font-size:.72rem;color:var(--ink-faint);}
.rtx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:3px 0 0;font-size:.76rem;}
.rtx-time{font-weight:600;color:var(--ink);}
.rtx-role{
  padding:1px 8px;border-radius:var(--radius-pill);
  background:var(--rt-c);color:var(--rt-c-ink);
  font-size:.7rem;font-weight:600;
}
.rtx-flag{padding:1px 8px;border-radius:var(--radius-pill);background:var(--surface-high);color:var(--ink);font-size:.7rem;font-weight:600;}
.rtx-do{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;}
.rtx-done{opacity:.6;}
.rtx-done .rtx-name{text-decoration:line-through;}
.rtx-grip,.rtx-lock{
  flex:none;align-self:stretch;width:32px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:var(--radius-sm);
  color:var(--ink-faint);font-size:1rem;
}
.rtx-grip{cursor:grab;touch-action:none;}
.rtx-grip:hover{background:var(--surface-hover);color:var(--ink);}
.rtx-grip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring-soft);}
.rtx-lock{font-size:.8rem;}
.rtx-lift{position:fixed;z-index:60;margin:0;box-shadow:var(--shadow-overlay);pointer-events:none;}
.rtx-hold{border:1px dashed var(--line-strong);border-radius:var(--radius);}

@media (max-width:699px){
  .rtx-week{flex-wrap:wrap;}
  .rtx-step{flex:1;justify-content:center;}
  .rtx-days{order:3;flex-basis:100%;display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;}
  .rtx-card{flex:0 0 31%;scroll-snap-align:start;}
}