/* Calendar rides: the pick-up over the drop-off, joined by a short line. An open circle
   and a filled dot, or a plane at the airport end. Month cells keep one line per ride. */
.stops{display:flex;flex-direction:column;gap:3px;min-width:0}
.stop{display:flex;align-items:center;gap:7px;min-width:0}
.stop>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stop i{position:relative;flex:none;align-self:stretch;display:flex;align-items:center;justify-content:center;width:16px;min-height:1.2em;color:var(--green)}
.stop i::before{content:'';box-sizing:border-box;border-radius:50%}
.stop.from i::before{width:9px;height:9px;border:2px solid var(--green)}
.stop.to i::before{width:9px;height:9px;background:var(--green)}
.stop.plane i::before{display:none}
.stop i svg{width:16px;height:16px}
.stop.from i::after,.stop.via i::after{content:'';position:absolute;left:7px;top:calc(50% + 6px);width:2px;height:calc(100% - 9px);background:var(--green)}
.stop.via i::before{width:7px;height:7px;border:1.5px solid var(--green);background:#fff}
.staff .pr-m .stops{margin-top:3px}
.week-jobs .cal-job .stops,.pc-list .cal-job .stops{margin:3px 0;font-size:13px}
.day-dialog .cal-job .stops{margin:4px 0;font-size:15px}
.staff .calendar .cal-job .stops{display:none}
.staff .calendar .cal-job.attention b{color:var(--warm)}
/* Phone day: the driver menu (or Needs Review) sits beside the client's name. */
.staff .pr{position:relative}
.staff .pr-side .pr-m>b{padding-right:118px}
.staff .pr-side>.pr-drv,.staff .pr-side>.pr-driver,.staff .pr-side>.pr-review{position:absolute;top:10px;right:14px;margin:0;max-width:124px}
/* Month cells: the time and the client's name on one line. */
.staff .calendar .cal-job .cal-kind{display:none}
.staff .calendar .cal-job b{display:inline;margin-left:3px}
/* Week cards: the car icon inside the driver menu, as on the phone. */
.staff .ride-drv{position:relative;display:block;color:var(--green)}
.staff .ride-drv.none{color:var(--warm)}
.staff .ride-drv>svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:1}
.staff .ride-drv .ride-driver{padding-left:30px;font-weight:600;color:inherit}
/* What a ride still needs, under its stops; a request gets a Review button that opens its trip. */
.cal-job .cal-why{display:block;color:var(--warm);font-weight:600}
.week-jobs .cal-job .cal-why{font-size:12px}
.day-dialog .cal-job .cal-why{font-size:14px}
.staff .pr-review,.ride-review{min-height:34px;margin:0;padding:0 14px;border:1.5px solid var(--green);border-radius:10px;background:#fff;color:var(--green);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.ride-review{width:100%;font-size:13px}
.day-dialog .ride-review{font-size:15px;min-height:40px}
.staff .pr-review:hover,.ride-review:hover{background:var(--soft)}
/* Every day number opens that day's rides; a red one marks a day that still needs something. */
.staff .calendar .day-heading button.date-number{margin:0;border:0;min-height:0;height:24px;font:inherit;font-weight:800;line-height:1;cursor:pointer}
.staff .calendar .day-heading button.date-number:hover{text-decoration:underline}
.staff .calendar .day-cell:not(.attention) .day-heading button.date-number{padding:0 4px;background:none;color:var(--muted);font-weight:400}
.staff .calendar .day-cell.today:not(.attention) .day-heading button.date-number{color:var(--green);font-weight:700}
.day-dialog .day-empty{margin:18px 0 0;font-size:17px}