/* "Owed to runners" strip on Payments -> Payables (opt-in team feature `runnerOwedStrip`, public/js/runner-owed-strip.js).
   Hidden unless that file un-hides #ap-runner-strip-wrap. The row is the shared wf-kpi-rail (scroll-snap, one line, never
   wraps; it is in index.html's RAILS list); these rules only dress the cards. Theme tokens only, the app font. */
#ap-runner-strip-wrap { margin: 0 0 18px; font-family: var(--font-body); min-width: 0; max-width: 100%; }
#ap-runner-strip-wrap[hidden] { display: none !important; }
.ros-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--off-white); margin: 0 0 8px; }
#ap-runner-strip.wf-kpi-rail { display: flex; --wf-kpi-basis: min(max(240px, 15rem), 100%); --wf-kpi-cap: min(max(300px, 18.75rem), 100%); --wf-kpi-gap: 12px; margin-bottom: 0; }
@media (max-width: 639.98px) { #ap-runner-strip.wf-kpi-rail { --wf-kpi-basis: min(78vw, 300px); --wf-kpi-cap: min(78vw, 300px); } }
#ap-runner-strip > .ros-card { display: flex; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; text-align: left !important; gap: 8px; min-height: 0 !important; padding: 14px 16px !important; margin: 0;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px; box-shadow: none; cursor: pointer;
  font-family: var(--font-body); transition: border-color .15s, background-color .15s; }
#ap-runner-strip > .ros-card:hover { border-color: var(--blue, var(--gold)); }
#ap-runner-strip > .ros-card:focus-visible { outline: 2px solid var(--blue, var(--gold)); outline-offset: 2px; }
#ap-runner-strip > .ros-card.is-active { border-color: var(--blue, var(--gold)); background: color-mix(in srgb, var(--blue, var(--gold)) 6%, var(--bg-raised)); box-shadow: inset 0 0 0 1px var(--blue, var(--gold)); }
.ros-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ros-av { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
  color: var(--blue, var(--gold)); background: color-mix(in srgb, var(--blue, var(--gold)) 11%, transparent); }
.ros-av-all { border-radius: 10px; color: var(--amber, var(--gold)); background: color-mix(in srgb, var(--amber, var(--gold)) 12%, transparent); }
.ros-av svg { width: 18px; height: 18px; }
.ros-id { min-width: 0; }
.ros-name { font-size: 14px; font-weight: 600; color: var(--white); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ros-items { font-size: 12px; color: var(--off-white); line-height: 1.3; white-space: nowrap; }
#ap-runner-strip .ros-total { font-size: 24px; line-height: 1.1; font-weight: 700; color: var(--white); margin: 0; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; white-space: nowrap; }
.ros-lines { display: grid; gap: 3px; padding-top: 8px; border-top: 1px solid var(--border); }
.ros-all .ros-lines { display: none; }
.ros-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; line-height: 1.35; }
.ros-k { color: var(--off-white); white-space: nowrap; }
.ros-v { color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }