.payout-policy-settings { margin-bottom:24px; }
.payout-policy-settings .payout-policy-open { display:flex; align-items:center; gap:16px; width:100%; padding:6px 0; border:0; background:transparent; color:#075b72; font:inherit; text-align:left; cursor:pointer; }
.payout-policy-open > :first-child { flex:1; }
.payout-policy-value { font-weight:600; white-space:nowrap; }
.payout-policy-open:focus-visible { outline:2px solid #075b72; outline-offset:4px; }
.payout-policy-open:disabled { color:#808080; cursor:default; }
.payout-policy-dialog .dialog-body { padding:18px; }
.payout-policy-dialog .payout-policy-setting { display:grid; grid-template-columns:minmax(0, 1fr) 124px; gap:16px; align-items:center; margin:0; }
.payout-policy-percent { width:100%; box-sizing:border-box; padding:10px; border:1px solid #cbd5e1; border-radius:8px; font:inherit; }
.payout-policy-example { margin-top:16px; padding:16px; border:1px solid #dbe3e8; border-radius:10px; background:#fff; }
.payout-policy-example h3 { margin:0 0 18px; font-size:15px; line-height:1.5; }
.payout-policy-example-bonus { white-space:nowrap; }
.payout-policy-dialog .payout-policy-client-label { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:10px; margin:0; font-weight:600; }
.payout-policy-client-value { font-variant-numeric:tabular-nums; }
.payout-policy-dialog .payout-policy-client-percent { grid-column:1 / -1; width:100%; min-width:0; height:24px; margin:0; padding:0; border:0; border-radius:0; cursor:pointer; appearance:none; background:transparent; }
.payout-policy-client-percent::-webkit-slider-runnable-track { height:8px; border-radius:8px; background:linear-gradient(to right, #075b72 var(--payout-policy-client-paid, 80%), #d1d5db var(--payout-policy-client-paid, 80%)); }
.payout-policy-client-percent::-moz-range-track { height:8px; border-radius:8px; background:linear-gradient(to right, #075b72 var(--payout-policy-client-paid, 80%), #d1d5db var(--payout-policy-client-paid, 80%)); }
.payout-policy-client-percent::-webkit-slider-thumb { width:22px; height:22px; margin-top:-7px; border:2px solid #fff; border-radius:50%; background:#075b72; box-shadow:0 1px 4px rgb(0 0 0 / 25%); appearance:none; }
.payout-policy-client-percent::-moz-range-thumb { width:18px; height:18px; border:2px solid #fff; border-radius:50%; background:#075b72; box-shadow:0 1px 4px rgb(0 0 0 / 25%); }
.payout-policy-client-percent:focus-visible { outline:2px solid #075b72; outline-offset:3px; border-radius:4px; }
.payout-policy-client-percent:disabled { opacity:.55; cursor:default; }
.payout-policy-range-scale { display:flex; justify-content:space-between; color:#667085; font-size:12px; }
.payout-policy-bar { display:flex; width:100%; height:32px; margin:18px 0 14px; border-radius:6px; overflow:hidden; }
.payout-policy-segment { display:flex; align-items:center; justify-content:center; flex:0 0 auto; min-width:0; overflow:hidden; font-size:12px; font-weight:600; }
.payout-policy-segment > span { flex:0 0 auto; white-space:nowrap; visibility:hidden; }
.payout-policy-segment--available, .payout-policy-swatch--available { background:#0f7c90; color:#fff; }
.payout-policy-segment--reserve, .payout-policy-swatch--reserve { background:#ffdb86; color:#1d1d1f; }
.payout-policy-segment--unpaid, .payout-policy-swatch--unpaid { background:#d1d5db; color:#1d1d1f; }
.payout-policy-legend { display:grid; gap:10px; margin:0; font-size:13px; line-height:1.5; }
.payout-policy-legend-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:start; gap:12px; }
.payout-policy-legend dt { display:flex; align-items:flex-start; gap:10px; min-width:0; }
.payout-policy-legend dd { margin:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.payout-policy-example-available { font-weight:600; }
.payout-policy-swatch { flex:0 0 18px; height:18px; margin-top:1px; border-radius:4px; }
.payout-policy-dialog .payout-policy-note { margin:14px 0 0; color:#667085; line-height:1.5; }
.payout-policy-error, .payout-policy-input-error, .payout-policy-load-error { color:#b91c1c; }
.payout-policy-input-error:not(:empty), .payout-policy-error:not(:empty) { margin-top:8px; }
.payout-policy-load-error:empty, .payout-policy-input-error:empty, .payout-policy-error:empty { display:none; }
@media (max-width:420px) {
  .payout-policy-dialog .payout-policy-setting { grid-template-columns:minmax(0, 1fr) 90px; gap:10px; }
  .payout-policy-dialog .dialog-body { padding:14px; }
  .payout-policy-example { padding:12px; }
  .payout-policy-legend-row { gap:8px; }
  .payout-policy-legend dt { gap:8px; }
  .payout-policy-swatch { flex-basis:14px; height:14px; margin-top:3px; }
}
.participant-calc-layout { display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); align-items:start; gap:12px; }
.participant-calc-fields, .participant-calc-result { min-width:0; }
.participant-calc-fields > .card-person-fields { margin:0; }
.participant-calc-fields > .factor-fieldset { margin-top:12px; }
.participant-calc-fields > .card-person-fields > label:last-child { grid-column:auto; }
.participant-calc-layout--single { grid-template-columns:minmax(0, 1fr); }
.payout-calculation { display:grid; align-content:start; gap:5px; width:100%; min-width:0; container-type:inline-size; container-name:payout-calculation; color:#1d1d1f; line-height:1.4; }
.payout-calculation__card { min-width:0; padding:7px 10px; border:1px solid #dbe3e8; border-radius:14px; background:#fff; }
.payout-calculation__head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 10px; margin-bottom:4px; }
.payout-calculation__head h3 { flex:1 1 160px; margin:0; font-size:14px; line-height:1.4; font-weight:600; }
.payout-calculation__total { color:#075b72; font-size:18px; font-weight:600; text-align:right; }
.payout-calculation strong { min-width:0; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.payout-calculation__formula { display:grid; grid-template-columns:minmax(0, 1.55fr) 10px minmax(0, 1fr) 10px minmax(0, .7fr); align-items:stretch; gap:6px; }
.payout-calculation__term { display:flex; flex-direction:column; justify-content:space-between; gap:2px; min-width:0; padding:6px 8px; border-radius:8px; background:#eaf4ff; }
.payout-calculation__term > span { color:#667085; font-size:11px; overflow-wrap:anywhere; }
.payout-calculation__term > strong { font-size:13px; font-weight:600; }
.payout-calculation__operator { align-self:center; justify-self:center; color:#667085; font-size:16px; }
.payout-calculation__comparison { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px; }
.payout-calculation__source { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:minmax(32px, 1fr) auto; align-items:baseline; gap:2px 6px; min-height:70px; min-width:0; box-sizing:border-box; padding:6px 8px; border-radius:9px; }
.payout-calculation__source > span { grid-column:1 / -1; align-self:start; font-size:12px; overflow-wrap:anywhere; }
.payout-calculation__source > strong { font-size:16px; line-height:1.4; font-weight:600; }
.payout-calculation__source > small { color:#667085; font-size:11px; text-align:right; }
.payout-calculation__source--client { background:#eaf4ff; }
.payout-calculation__source--limit { background:#eeebfb; }
.payout-calculation__source--limit > small { color:#51428e; }
.payout-calculation__source--released { background:#f0f1f4; }
.payout-calculation__source > .payout-calculation__limit-status { justify-self:start; padding:2px 10px; border:1px solid #075b72; border-radius:6px; color:#075b72; font-size:13px; }
.payout-calculation__connections { position:relative; height:16px; }
.payout-calculation__connections svg { display:block; width:100%; height:100%; overflow:visible; }
.payout-calculation__connections path { fill:none; stroke:#98a2b3; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.payout-calculation__connections > span { position:absolute; left:50%; bottom:4px; width:7px; height:7px; box-sizing:border-box; border-right:1.5px solid #98a2b3; border-bottom:1.5px solid #98a2b3; transform:translateX(-50%) rotate(45deg); }
.payout-calculation__basis { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:10px; padding:5px 8px; border-radius:8px; background:#f0f1f4; font-size:12px; }
.payout-calculation__basis > strong { font-size:15px; text-align:right; }
.payout-calculation__deductions { display:grid; gap:3px; margin:4px 0; padding:4px 0; border-top:1px solid #e1e5e9; font-size:12px; }
.payout-calculation__deductions > div { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; gap:12px; }
.payout-calculation__deductions dt { display:flex; gap:10px; min-width:0; }
.payout-calculation__deductions dt > span { color:#667085; font-size:15px; line-height:1; }
.payout-calculation__deductions dd, .payout-calculation__legend dd { min-width:0; margin:0; text-align:right; }
.payout-calculation__result { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:8px; padding:6px 8px; border-radius:9px; background:#e8f5f6; font-size:12px; font-weight:600; }
.payout-calculation__result > div { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:4px 8px; min-width:0; text-align:right; }
.payout-calculation__result strong { color:#075b72; font-size:18px; line-height:1.3; }
.payout-calculation__result-state { order:-1; padding:2px 6px; border-radius:5px; background:#eeebfb; color:#51428e; font-size:11px; font-weight:400; }
.payout-calculation__bar { display:flex; height:14px; margin:0 0 6px; overflow:hidden; border-radius:6px; }
.payout-calculation__segment { flex:0 0 auto; min-width:0; }
.payout-calculation__segment--available { background:#0f7c90; }
.payout-calculation__segment--reserve { background:#ffdb86; }
.payout-calculation__segment--in-process { background:#98c7ee; }
.payout-calculation__segment--unpaid { background:#d1d5db; }
.payout-calculation__legend { display:grid; gap:4px; margin:0; font-size:12px; }
.payout-calculation__legend > div { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:start; gap:10px; }
.payout-calculation__legend dt { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.payout-calculation__swatch { flex:0 0 12px; height:12px; margin-top:2px; border-radius:3px; }
.payout-calculation__remaining--overpaid .payout-calculation__total { color:#b42318; }
.payout-calculation__commitment-warning { margin:0; color:#9a5b00; font-size:12px; }
.payout-calculation :is([data-calculation-amount], .payout-calculation__margin > strong, .payout-calculation__legend strong),
#card-dialog .card-metrics strong, #bonus-details-dialog .apple-metric__value {
  font-family:inherit; font-size:16px; font-weight:600; line-height:22px;
  font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:normal;
}
.payout-calculation__deductions, .payout-calculation__legend,
.payout-calculation__card > .payout-calculation__head { padding-left:8px; padding-right:8px; }
.payout-calculation__basis, .payout-calculation__deductions > div,
.payout-calculation__result, .payout-calculation__legend > div { grid-template-columns:minmax(0, 1fr) 100px; gap:12px; }
@container payout-calculation (max-width:420px) {
  .payout-calculation__card { padding:7px 8px; }
  .payout-calculation__head h3 { font-size:13px; }
  .payout-calculation__total { font-size:16px; }
  .payout-calculation__comparison { gap:8px; }
  .payout-calculation__source { grid-template-columns:minmax(0, 1fr); grid-template-rows:minmax(32px, 1fr) auto auto; padding:6px; }
  .payout-calculation__source > small { text-align:left; }
  .payout-calculation__source > strong { font-size:15px; }
  .payout-calculation__basis, .payout-calculation__deductions > div, .payout-calculation__result, .payout-calculation__legend > div { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
}
@container payout-calculation (max-width:340px) {
  .payout-calculation__formula { grid-template-columns:minmax(0, 1fr); gap:4px; }
  .payout-calculation__term { flex-direction:row; align-items:baseline; gap:12px; }
  .payout-calculation__term > span { flex:1; }
  .payout-calculation__term > strong { flex:1; text-align:right; }
  .payout-calculation__operator { font-size:12px; line-height:1; }
}
@media (max-width:900px) {
  .participant-calc-layout { grid-template-columns:minmax(0, 1fr); }
}
@media (min-width:1051px) {
  #bonus-details-dialog .apple-pane:has(#detail-role-select) { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start; gap:0 10px; }
  #bonus-details-dialog .apple-pane:has(#detail-role-select) > :not(.form-field) { grid-column:1 / -1; }
}
/* Use desktop width when the card is short; keep every value and control visible. */
@media (min-width:1051px) and (max-height:740px) {
  .payout-calculation { gap:4px; }
  .payout-calculation__card { padding:5px 8px; }
  .payout-calculation__head { margin-bottom:3px; }
  .payout-calculation__payment > .payout-calculation__head { position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); }
  .payout-calculation__term { padding:4px 8px; }
  .payout-calculation__source { min-height:66px; padding:4px 8px; }
  .payout-calculation__deductions { gap:2px; margin:3px 0; padding:2px 8px; }
  .payout-calculation__result { padding:5px 8px; }
  .payout-calculation__bar { height:12px; margin-bottom:4px; }
  .payout-calculation__legend { gap:2px; }
  #bonus-details-dialog .apple-metric { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:3px 6px; min-height:40px; padding:6px 9px; }
  #bonus-details-dialog .apple-metric__label { margin-bottom:0; }
  #bonus-details-dialog .ktu-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0; }
  #bonus-details-dialog .ktu-factor { line-height:18px; }
  #bonus-details-dialog .ktu-total { grid-column:1 / -1; min-height:34px; }
}