/* Runner wind-down (opt-in key `runnerWindDown`). New-UI sheet for the owner + calm banner for the runner. */
.wd-modal { position: relative; width: min(940px, 94vw); max-width: 940px; padding: 30px 34px 26px; border-radius: 20px; }
.wd-x { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; min-height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--off-white); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.wd-x:hover { color: var(--white); background: var(--bg-hover, rgba(0,0,0,.05)); }
.wd-x svg { width: 20px; height: 20px; }
.wd-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--off-white); margin-bottom: 6px; }
.wd-title { font-family: var(--font-body); font-size: 30px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.15; color: var(--white); padding-right: 48px; }
.wd-sub { font-size: 14px; color: var(--off-white); margin: 8px 0 20px; line-height: 1.45; max-width: 62ch; }
.wd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.wd-kpi { --tone: var(--blue, var(--gold)); display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent); background: color-mix(in srgb, var(--tone) 7%, var(--bg-raised)); min-width: 0; }
.wd-kpi[data-tone="amber"] { --tone: var(--amber, var(--gold)); }
.wd-kpi[data-tone="green"] { --tone: var(--green); }
.wd-kpi[data-tone="red"] { --tone: var(--red, #c0504d); }
.wd-kpi-ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--tone); }
.wd-kpi-ic svg { width: 18px; height: 18px; }
.wd-kpi-l { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: color-mix(in srgb, var(--tone) 75%, var(--white)); }
.wd-kpi-v { font-size: 20px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.wd-col { display: grid; gap: 18px; min-width: 0; }
.wd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wd-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid transparent; }
.wd-step.is-now { background: var(--bg-raised); border-color: var(--border); }
.wd-step-n { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--off-white); border: 1.5px solid var(--border); }
.wd-step.is-now .wd-step-n { color: #fff; background: var(--blue, var(--gold)); border-color: transparent; }
.wd-step-t { font-size: 14.5px; font-weight: 600; color: var(--white); }
.wd-step-when { font-weight: 500; color: var(--off-white); font-size: 13px; margin-left: 4px; }
.wd-step-x { font-size: 13px; color: var(--off-white); margin-top: 3px; line-height: 1.45; }
.wd-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--white); margin-bottom: 8px; }
.wd-seg.inv-kind-switch { display: flex; width: 100%; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 999px; padding: 4px; flex-wrap: nowrap; overflow: visible; }
.wd-seg .inv-kind-tab { flex: 1 1 0; min-width: 0; min-height: 42px; justify-content: center; border-radius: 999px; font-weight: 600; font-size: 13.5px; padding: 0 6px; }
.wd-seg .inv-kind-tab:disabled:not(.active) { opacity: .4; cursor: not-allowed; }
.wd-seg .inv-kind-tab.active:disabled { cursor: default; }
.wd-date { font-size: 15px; font-weight: 600; color: var(--white); margin-top: 8px; }
.wd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.wd-foot-l, .wd-foot-r { display: flex; gap: 10px; flex-wrap: wrap; }
.wd-foot .btn { min-height: 46px; padding: 0 22px; border-radius: 12px; font-weight: 600; white-space: nowrap; }
.wd-foot .btn-gold, .wd-save { background: var(--blue, var(--gold)) !important; border-color: var(--blue, var(--gold)) !important; color: #fff !important; }
.wd-danger-ghost { color: var(--red, #c0504d) !important; }
.wd-danger { background: var(--red, #c0504d) !important; border-color: var(--red, #c0504d) !important; color: #fff !important; }
.wd-confirm { margin-top: 22px; padding: 18px 20px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--red, #c0504d) 35%, transparent); background: color-mix(in srgb, var(--red, #c0504d) 7%, var(--bg-raised)); }
.wd-confirm-t { font-size: 16px; font-weight: 700; color: var(--white); }
.wd-confirm-x { font-size: 13.5px; color: var(--off-white); margin-top: 6px; line-height: 1.5; }
.wd-confirm .wd-foot { border-top: 0; margin-top: 14px; padding-top: 0; justify-content: flex-end; }
/* roster chip */
.wd-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--amber, var(--gold)); background: color-mix(in srgb, var(--amber, var(--gold)) 11%, transparent); max-width: 100%; }
.wd-chip svg { width: 13px; height: 13px; flex: 0 0 13px; }
.wd-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-chip.is-ended { color: var(--red, #c0504d); background: color-mix(in srgb, var(--red, #c0504d) 10%, transparent); }
/* runner banner */
.wd-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 16px 16px; padding: 12px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--amber, var(--gold)) 30%, transparent); background: color-mix(in srgb, var(--amber, var(--gold)) 8%, var(--bg-raised)); }
.wd-b-ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--amber, var(--gold)); }
.wd-b-ic svg { width: 18px; height: 18px; }
.wd-b-txt { flex: 1 1 280px; min-width: 0; }
.wd-b-t { font-size: 14.5px; font-weight: 700; color: var(--white); }
.wd-b-x { font-size: 13px; color: var(--off-white); margin-top: 2px; line-height: 1.4; }
.wd-b-dates { display: flex; gap: 8px; flex-wrap: wrap; }
.wd-b-pill { font-size: 12.5px; color: var(--white); padding: 6px 12px; border-radius: 999px; background: var(--bg-raised); border: 1px solid var(--border); white-space: nowrap; }
.wd-b-pill b { font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--off-white); margin-right: 6px; }
@media (max-width: 768px) {
  .modal-overlay:has(> .wd-modal) { align-items: flex-end; }
  .wd-modal { width: 100%; max-width: 100%; padding: 22px 18px 18px; border-radius: 20px 20px 0 0; max-height: 92vh; overflow-y: auto; }
  .wd-title { font-size: 24px; }
  .wd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wd-kpi:last-child { grid-column: 1 / -1; }
  .wd-kpi { padding: 10px 12px; gap: 10px; }
  .wd-kpi-v { font-size: 17px; }
  .wd-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wd-col-ctl { order: -1; }
  .wd-step:not(.is-now) .wd-step-x { display: none; }
  .wd-step { padding: 10px 12px; gap: 12px; }
  .wd-foot { position: sticky; bottom: -18px; background: var(--bg-panel, #fff); margin: 18px -18px -18px; padding: 14px 18px 18px; z-index: 2; flex-direction: column-reverse; align-items: stretch; }
  .wd-foot-l, .wd-foot-r { width: 100%; }
  .wd-foot .btn { flex: 1 1 0; }
  .wd-banner { margin: 10px 12px 14px; padding: 12px; }
}
@media (max-width: 768px) {
  .wd-confirm .wd-foot { position: static; background: none; margin: 14px 0 0; padding: 0; }
}

/* Look-only runner (html.wf-wd-readonly, set from currentUser.windDown): no add / edit control is shown anywhere.
   The server answers every write with 403 RUNNER_READ_ONLY regardless. */
html.wf-wd-readonly :is(.jj-topbar-add, .mobile-fab, .unified-fab, #unified-fab, .qa-fab,
  [onclick*="startAddInventory"], [onclick*="startSimpleInventoryAdd"], [onclick*="openTripModal"], [onclick*="runnerAddExpense"], [onclick*="fabAction"],
  [onclick*="openInvSectionEdit"], [onclick*="addNote("], [onclick*="openMoneyPricingEditor"], [onclick*="inv-attach-"], [onclick*="invOpenAttachPhoneLink"],
  [onclick*="openAccessoryModal"], [onclick*="toggleQiDatepicker"], #inv-attach-add-btns, .edit-pencil, .inv-pricing-vendor-pencil) { display: none !important; }
html.wf-wd-readonly [onclick*="wfSpecEdit"] { pointer-events: none; cursor: default; }

html.wf-wd-readonly .wf-spec-add, html.wf-wd-readonly .inv-section-edit-btn, html.wf-wd-readonly [class*="section-edit"] { display: none !important; }
/* the same list once more behind the page ids, to beat id-level display rules */
html.wf-wd-readonly :is(#page-inventory, #page-inventory-detail, #page-runner-trips, #page-runner-money) :is(.jj-topbar-add, .mobile-fab, .unified-fab, #unified-fab, .qa-fab,
  [onclick*="startAddInventory"], [onclick*="startSimpleInventoryAdd"], [onclick*="openTripModal"], [onclick*="runnerAddExpense"], [onclick*="fabAction"],
  [onclick*="openInvSectionEdit"], [onclick*="addNote("], [onclick*="openMoneyPricingEditor"], [onclick*="inv-attach-"], [onclick*="invOpenAttachPhoneLink"],
  [onclick*="openAccessoryModal"], [onclick*="toggleQiDatepicker"], #inv-attach-add-btns, .edit-pencil, .inv-pricing-vendor-pencil) { display: none !important; }
html.wf-wd-readonly :is(#page-inventory, #page-inventory-detail, #page-runner-trips, #page-runner-money) :is(.inv-section-edit-btn, .wf-spec-add, [class*="section-edit"]) { display: none !important; }
/* the watch page layers its rules with two ids of weight: match it */
html.wf-wd-readonly body #page-inventory-detail#page-inventory-detail#page-inventory-detail#page-inventory-detail.page :is(.jj-topbar-add, .mobile-fab, .unified-fab, #unified-fab, .qa-fab,
  [onclick*="startAddInventory"], [onclick*="startSimpleInventoryAdd"], [onclick*="openTripModal"], [onclick*="runnerAddExpense"], [onclick*="fabAction"],
  [onclick*="openInvSectionEdit"], [onclick*="addNote("], [onclick*="openMoneyPricingEditor"], [onclick*="inv-attach-"], [onclick*="invOpenAttachPhoneLink"],
  [onclick*="openAccessoryModal"], [onclick*="toggleQiDatepicker"], #inv-attach-add-btns, .edit-pencil, .inv-pricing-vendor-pencil, .inv-section-edit-btn, .inv-pricing-adjust, .wfwd-adjust, .wf-spec-add, #inv-attach-add-btn) { display: none !important; }
/* Titles: bold sans like .rm2-title (a body-font title has no 700 weight and renders thin). */
.wd-modal .wd-title, .wd-modal .wd-confirm-t, .wd-banner .wd-b-t, .wd-modal .wd-step-t, .wd-modal .wd-eyebrow, .wd-modal .wd-field label {
  font-family: var(--font-body) !important; font-weight: 700 !important; }
.wd-modal .wd-title { letter-spacing: -0.4px; }
.wd-modal .wd-eyebrow { letter-spacing: 2.2px; }