/* Mission Hired · live layer adjustments (keeps the prototype design; only guards real-data edge cases). */
#content > *, .grid > *, .span-4, .span-5, .span-6, .span-7, .span-8, .span-12 { min-width: 0; }
.mod { flex-wrap: wrap; row-gap: 8px; }
.drawer-foot .btn-block { min-width: 0; }
.tbl td .pill { white-space: nowrap; }
@media (max-width: 560px) {
  .kpis[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .page-head .actions { flex-wrap: wrap; }
  .filters .input-wrap { min-width: 0 !important; width: 100%; }
  .drawer-foot { flex-wrap: wrap; }
}
.nav { align-content: start; }               /* short role menus stay grouped at the top */
.tbl .ready-bar { width: 64px; }
.tbl .who b { white-space: nowrap; }

/* ---------- manual payments (D17 / transfer / cash) ---------- */
.pay-methods { gap: 8px; }
.pay-method { width: 100%; text-align: start; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px 16px; cursor: pointer; color: inherit; font: inherit; transition: border-color .2s, background-color .2s; }
.pay-method:hover, .pay-method:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.pay-method .grow { display: grid; gap: 2px; min-width: 0; }
.pay-method .grow span { font-size: var(--fs-xs); color: var(--ink-3); }
.pay-sum { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 16px; border-radius: 16px; background: var(--surface-2); }
.pay-sum > div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.pay-sum b.num { font-family: var(--f-display); font-size: var(--fs-xl); letter-spacing: -.02em; }
.pay-steps { margin: 8px 0 10px; padding-inline-start: 20px; display: grid; gap: 6px; font-size: var(--fs-sm); line-height: 1.5; }
.pay-kv { padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); gap: 12px; }
.pay-kv > span:first-child { flex: none; }
.pv-proof { display: block; max-width: 100%; max-height: 420px; margin: 0 auto; border-radius: 12px; object-fit: contain; background: var(--surface-2); }
.pv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; font-size: var(--fs-sm); }
.pv-grid > div { display: grid; gap: 2px; min-width: 0; }
.pv-grid span { font-size: var(--fs-xs); color: var(--ink-3); }
.pv-grid b { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .pay-sum { grid-template-columns: 1fr; }
  #pay-form .modal-foot { flex-wrap: wrap; }
  #pay-form .modal-foot .btn { flex: 1 1 auto; justify-content: center; }
  .pv-grid { grid-template-columns: 1fr; }
}
.alert-card.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.alert-card.info .ai { color: var(--info); }

/* ---------- administration · integrations ---------- */
.ig-card { align-content: start; }
.ig-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ig-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ig-copy { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.ig-copy code { flex: 1; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.ig-src { font-size: 11px; flex: none; }
button.ig-src.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; }
#ig-form .drawer-foot { flex-wrap: wrap; }
@media (max-width: 560px) { #ig-form .drawer-foot .btn { flex: 1 1 auto; justify-content: center; } }