/* ============================================================
   GP Team Hub - route.css

   The week strip, one day's stops, and the panel of figures a build is
   worked out from. Anchors read heavier than the doors around them by
   weight and by a filled marker, never by a colored edge.

   Doc: docs/notes/new/css/route.css.md
   ============================================================ */

.rtw{display:flex;flex-direction:column;gap:14px;}
.rtw-busy{opacity:.6;pointer-events:none;}

/* ---- The bar over the week ---- */
.rtw-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;}
.rtw-nav{display:flex;gap:6px;}
.rtw-acts{display:flex;flex-wrap:wrap;gap:8px;}

/* ---- The days across the top ---- */
.rtw-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:8px;
}
.rtw-day{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 11px;text-align:left;cursor:pointer;
  background:var(--shell-card-mid);
  border:1px solid var(--shell-card-mid-line);
  border-radius:var(--radius);
  color:var(--ink-soft);
  font:inherit;
}
.rtw-day:hover{background:var(--shell-card-mid-hover);color:var(--ink);}
.rtw-day:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.rtw-day-on{background:var(--accent);border-color:var(--accent);color:var(--ink-inverse);}
.rtw-day-on .rtw-day-c,.rtw-day-on .rtw-day-m,.rtw-day-on .rtw-day-d{color:var(--ink-inverse);}
.rtw-day-today .rtw-day-n::after{content:"Today";margin-left:6px;font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;}
.rtw-day-n{font-weight:700;font-size:.82rem;color:inherit;}
.rtw-day-d{font-size:.72rem;color:var(--ink-faint);}
.rtw-day-c{font-size:.75rem;font-weight:600;}
.rtw-day-m{font-size:.7rem;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rtw-day-none{color:var(--ink-faint);font-weight:400;}
/* Doors that agreed to send evidence and have not. This is the number
   standing between a walked day and the payout, so it reads on the card. */
.rtw-day-owed{font-size:.72rem;font-weight:700;color:var(--ink);}
.rtw-day-on .rtw-day-owed{color:var(--ink-inverse);}

/* ---- One day ---- */
.rtw-one-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:4px 0 10px;}
.rtw-one-n{margin:0;font-size:.85rem;font-weight:600;color:var(--ink-soft);}
.rtw-empty{margin:18px 0;color:var(--ink-faint);font-size:.9rem;}

.rtw-list{list-style:none;margin:0;padding:0;counter-reset:rtw;display:flex;flex-direction:column;gap:6px;}
.rtw-stop{
  counter-increment:rtw;
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 12px;
  background:var(--shell-card-mid);
  border:1px solid var(--shell-card-mid-line);
  border-radius:var(--radius);
}
.rtw-stop-anchor{background:var(--shell-card);border-color:var(--shell-card-line);}
.rtw-stop-done{opacity:.55;}
.rtw-stop-done .rtw-name{text-decoration:line-through;}

.rtw-tick{
  flex:none;width:30px;height:30px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:var(--radius-pill);
  color:var(--ink-faint);font-size:1.05rem;
}
.rtw-tick:hover{color:var(--ink);}
.rtw-tick[aria-pressed="true"]{color:var(--accent);}
.rtw-tick:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring-soft);}

.rtw-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.rtw-name{margin:0;font-size:.9rem;font-weight:600;color:var(--ink);}
.rtw-stop-anchor .rtw-name{font-weight:700;}
.rtw-name::before{content:counter(rtw) ". ";color:var(--ink-faint);font-weight:400;}

.rtw-tag{
  display:inline-block;margin-left:4px;padding:1px 7px;
  background:var(--accent);color:var(--ink-inverse);
  border-radius:var(--radius-pill);
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  vertical-align:middle;
}
.rtw-rev{margin-left:5px;font-size:.78rem;font-weight:700;color:var(--ink-soft);}
.rtw-addr{margin:0;font-size:.82rem;color:var(--ink-soft);}
.rtw-addr a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);}
.rtw-addr a:hover{color:var(--ink);}
.rtw-miles{margin-left:6px;font-size:.74rem;color:var(--ink-faint);}
/* The system a merchant runs, and the line a drive carries onto every
   anchor. The line is white on the accent, never accent text on a tint. */
.rtw-pos{margin:0;font-size:.79rem;color:var(--ink-soft);}
.rtw-pos i{color:var(--ink-faint);}
.rtw-note{
  display:inline-block;margin-left:6px;padding:1px 8px;
  background:var(--accent);color:var(--ink-inverse);
  border-radius:var(--radius-pill);
  font-size:.7rem;font-weight:600;
}
/* The figure off the statement, and the offer it lands on. */
.rtw-proc{display:flex;align-items:center;gap:7px;margin-top:4px;}
.rtw-proc-l{font-size:.72rem;color:var(--ink-faint);white-space:nowrap;}
.rtw-proc .form-input{width:120px;padding:3px 8px;font-size:.79rem;}
.rtw-offer{
  display:inline-block;margin-top:4px;padding:2px 9px;
  background:var(--shell-high);color:var(--ink);
  border-radius:var(--radius-pill);
  font-size:.74rem;font-weight:600;
}
.rtw-tel{margin:0;font-size:.8rem;}
.rtw-tel a{color:var(--ink-soft);text-decoration:none;}
.rtw-tel a:hover{color:var(--ink);}
.rtw-out{margin-top:4px;}
.rtw-out .sel-sm .sel-in{font-size:.78rem;padding:4px 26px 4px 9px;}

.rtw-late{margin:16px 0 8px;font-size:.8rem;color:var(--ink-faint);}
.rtw-list-late{margin-bottom:0;}

/* ---- Looking before building ---- */
.rtw-plan{
  padding:12px 14px;
  background:var(--shell-raised);
  border:1px solid var(--shell-line);
  border-radius:var(--radius);
}
.rtw-plan-h{margin:0 0 8px;font-size:.85rem;font-weight:600;color:var(--ink);}
.rtw-plan-t{width:100%;border-collapse:collapse;font-size:.82rem;}
.rtw-plan-t th,.rtw-plan-t td{padding:5px 8px;text-align:left;border-bottom:1px solid var(--line);}
.rtw-plan-t th{color:var(--ink-faint);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;}
.rtw-plan-t td{color:var(--ink-soft);}
.rtw-r{text-align:right;}
.rtw-plan-n{margin:8px 0 0;font-size:.8rem;color:var(--ink-faint);}

/* ---- The figures a build reads ---- */
.rtw-set{
  padding:12px 14px;
  background:var(--shell-raised);
  border:1px solid var(--shell-line);
  border-radius:var(--radius);
}
.rtw-set-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;}
.rtw-set-f{display:flex;flex-direction:column;gap:4px;min-width:120px;}
.rtw-set-wide{min-width:220px;flex:1;}
.rtw-set-lines{font-family:inherit;line-height:1.45;resize:vertical;min-height:62px;}
.rtw-set-f .form-input{width:100%;}
.rtw-set-say{font-size:.8rem;color:var(--ink-soft);}
.rtw-set-sub{margin:12px 0 8px;}
.rtw-mk{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;}
.rtw-mk-one{
  display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:center;
  padding:9px 11px;cursor:pointer;
  background:var(--shell-card-mid);
  border:1px solid var(--shell-card-mid-line);
  border-radius:var(--radius);
}
.rtw-mk-one:hover{background:var(--shell-card-mid-hover);}
.rtw-mk-one input{grid-row:1 / span 3;}
.rtw-mk-n{font-size:.85rem;font-weight:600;color:var(--ink);}
.rtw-mk-c{grid-column:2;font-size:.75rem;color:var(--ink-soft);}
.rtw-mk-p{grid-column:2;font-size:.72rem;color:var(--ink-faint);}

@media (max-width:640px){
  .rtw-strip{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));}
  .rtw-set-row{flex-direction:column;align-items:stretch;}
  .rtw-set-f{min-width:0;}
}