/* =========================================================
   Zeal Portal — transport runs (transport runs arc, 2026-07-26)
   /css/system/components/transport-runs.css

   Styles for the one combine module (transport-runs.js) and the run
   rows on its two hosts: the master planner's transport view and the
   transport dashboard. Tokens only; radii from --r-1 (act-on
   controls) and --r-soft (labels, chips, cards); structural lines via
   var(--rule-structural, soft default) so both registers work.
   ========================================================= */

/* ── row selection ─────────────────────────────────────── */
.runsel {
  appearance: none; width: 15px; height: 15px; flex: none;
  border: 1px solid var(--rule-3); border-radius: var(--r-1);
  background: var(--paper); color: transparent; cursor: pointer;
  font-size: 9px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 3px;
}
.runsel:hover { border-color: var(--ink); }
.runsel.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ── the combine bar ───────────────────────────────────── */
.runbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-soft); padding: 10px 14px; margin: 0 0 12px;
}
.runbar__n { font-family: var(--font-ex); font-weight: var(--w-bold); font-size: 13px; }
.runbar__s { font-family: var(--font-cd); font-size: 11px; letter-spacing: 0.05em; opacity: 0.65; }
.runbar__sp { flex: 1; }
.runbar__btn {
  appearance: none; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--r-1);
  background: none; color: var(--paper); cursor: pointer;
  font-family: var(--font-cd); font-size: 11.5px; letter-spacing: 0.05em; padding: 6px 13px;
}
.runbar__btn:hover { border-color: var(--paper); }
.runbar__btn--go { background: var(--accent); border-color: var(--accent); }
.runbar__btn[disabled] { opacity: 0.45; cursor: default; }

/* ── the align affordance (snag 2, Aug 2026) ──────────────────
   Only rendered when the selection spans more than one date, which is
   the only time it is the thing standing between you and a run. It sits
   BEFORE clear/combine because it is what you do first. */
.runbar__align { display: flex; align-items: center; gap: 8px; }
.runbar__lab {
  font-family: var(--font-cd); font-size: 11px; letter-spacing: 0.05em; opacity: 0.65;
}
.runbar__sel {
  appearance: none; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--r-1);
  background: none; color: var(--paper); cursor: pointer;
  font-family: var(--font-cd); font-size: 11.5px; letter-spacing: 0.05em; padding: 5px 10px;
}
/* the option list renders in the OS palette, not the bar's inverted one:
   white-on-white options are invisible in every browser that respects
   the parent colour */
.runbar__sel option { color: var(--ink); background: var(--paper); }

/* the run tick, inside the dispatcher's facts cell */
.wm-runsel { display: inline-flex; margin-left: 10px; vertical-align: middle; }

/* ── the dialog ────────────────────────────────────────── */
.runmodal {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(0, 0, 0, 0.42);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px; overflow: auto;
}
.runmodal__card {
  width: 100%; max-width: 580px;
  background: var(--paper); border: 1px solid var(--rule-2);
  border-radius: var(--r-soft); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.runmodal__head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--rule-structural, var(--ink)); padding: 12px 15px;
}
.runmodal__title {
  font-family: var(--font-ex); font-weight: var(--w-bold); font-size: 14.5px;
  text-transform: lowercase; letter-spacing: -0.01em;
}
.runmodal__ctx { font-family: var(--font-cd); font-size: 10.5px; letter-spacing: 0.05em; color: var(--ink-4); }
.runmodal__body { padding: 15px; }
.runmodal__warn {
  background: var(--amber-soft, #FBF1DC); color: var(--amber, #A66F0F);
  border-radius: var(--r-soft); padding: 8px 11px; margin-bottom: 12px;
  font-family: var(--font-cd); font-size: 11px; letter-spacing: 0.04em;
}
.runmodal__lab {
  display: block; font-family: var(--font-cd); font-size: 11px; letter-spacing: 0.05em;
  color: var(--ink-3); margin: 14px 0 5px;
}
.runmodal__lab:first-child { margin-top: 0; }
.runmodal__inp {
  width: 100%; border: 1px solid var(--rule-2); border-radius: var(--r-1);
  padding: 8px 10px; font-family: var(--font-body); font-size: 13px; background: var(--paper);
}
/* the booking toggle, matching every other booking control in the
   portal (Aug 2026). `.seg` comes from segmented.css, which every host
   that mounts this dialog already loads; this only gives it the same
   block spacing the inputs above it have. */
.runmodal__seg { display: inline-flex; }

/* The dialog holds three segmented controls and two of them say
   "pencilled" — one is planner_assignment.status, the other is
   booking_status. They look identical on purpose (one control
   register) and must be SELECTABLE apart, which is what these
   modifiers are for. No styling of their own by design. */
.runmodal__seg--mode,
.runmodal__seg--status,
.runmodal__seg--booking { }

.runlegs { border: 1px solid var(--rule-2); border-radius: var(--r-soft); overflow: hidden; }
.runleg {
  display: grid; grid-template-columns: 24px 1fr auto auto; gap: 0 10px;
  align-items: center; padding: 9px 10px; border-bottom: 1px solid var(--rule);
}
.runleg:last-child { border-bottom: 0; }
.runleg__n {
  width: 19px; height: 19px; border-radius: 50%; background: var(--ink); color: var(--paper);
  font-family: var(--font-cd); font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.runleg__t { min-width: 0; font-size: 13px; }
.runleg__t b { font-weight: var(--w-medium); display: block; }
.runleg__t small {
  display: block; font-family: var(--font-cd); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-3); margin-top: 1px;
}
.runleg__pc { font-family: var(--font-cd); font-size: 10px; letter-spacing: 0.05em; color: var(--ink-4); }
.runleg__pc--none { color: var(--ink-5); font-style: italic; }
.runleg__acts { display: inline-flex; gap: 4px; }
.runleg__mv {
  appearance: none; border: 1px solid var(--rule-2); border-radius: var(--r-1);
  background: var(--paper); color: var(--ink-3); cursor: pointer;
  font-size: 11px; line-height: 1; padding: 4px 7px;
}
.runleg__mv:hover { border-color: var(--ink); color: var(--ink); }
.runleg__mv[disabled] { opacity: 0.35; cursor: default; }
.runleg__mv--x:hover { border-color: var(--red-status, #E24B4A); color: var(--red-status, #E24B4A); }
.runmodal__hint {
  font-family: var(--font-cd); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-4); margin: 10px 0 0;
}
.runmodal__acts {
  display: flex; align-items: center; gap: 9px;
  margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 13px;
}
.runmodal__btn {
  appearance: none; border: 1px solid var(--rule-2); border-radius: var(--r-1);
  background: var(--paper); color: var(--ink-2); cursor: pointer;
  font-family: var(--font-cd); font-size: 11.5px; letter-spacing: 0.05em; padding: 7px 14px;
}
.runmodal__btn--go { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.runmodal__btn--danger:hover { border-color: var(--red-status, #E24B4A); color: var(--red-status, #E24B4A); }
.runmodal__btn[disabled] { opacity: 0.5; cursor: default; }

/* ── run rows on the transport dashboard ───────────────── */
.kindchip--run i { background: var(--accent); }
.tr-row--run { border-left-color: var(--accent); }
.run-drops { margin-top: 9px; border-left: 1px solid var(--rule-2); padding-left: 12px; }
.run-drop { display: flex; align-items: baseline; gap: 9px; padding: 4px 0; font-size: 12.5px; }
.run-drop__n {
  font-family: var(--font-cd); font-size: 9.5px; color: var(--ink-4);
  border: 1px solid var(--rule-2); border-radius: 50%;
  width: 16px; height: 16px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.run-drop__k {
  font-family: var(--font-cd); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-4); width: 46px; flex: none;
}
.run-drop b { font-weight: var(--w-medium); }
.run-drop__kit { font-family: var(--font-cd); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); }
.run-edit {
  appearance: none; border: 1px solid var(--rule-2); border-radius: var(--r-1);
  background: var(--paper); color: var(--ink-3); cursor: pointer;
  font-family: var(--font-cd); font-size: 10.5px; letter-spacing: 0.05em; padding: 4px 10px;
}
.run-edit:hover { border-color: var(--ink); color: var(--ink); }

/* ── run rows and members on the planner ───────────────── */
.pl-row--run > .pl-line__label { border-left: 3px solid var(--accent); }
.pl-row--onrun > .pl-line__label { padding-left: 22px; background: var(--surface); }
.pl-line__label .runsel { float: left; margin: 2px 6px 0 0; }
.runchip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--warm); border-radius: var(--r-soft); padding: 1px 7px;
  font-family: var(--font-cd); font-size: 10px; letter-spacing: 0.05em; color: var(--ink-2);
  margin-top: 3px;
}
.runchip::before { content: "⇄"; color: var(--accent); font-weight: var(--w-bold); }
/* member date drift: shown on the run, never auto-fixed */
.runchip--warn { background: var(--amber-soft, #FBF1DC); color: var(--amber, #A66F0F); }
.runchip--warn::before { content: "!"; color: var(--amber, #A66F0F); }
.run-drift {
  font-family: var(--font-cd); font-size: 11px; letter-spacing: 0.04em;
  color: var(--amber, #A66F0F);
}