/* The fees drawing (fee-flow.js): one arrow per trip of the money, person ↔ the PM's bank.
   Gold = paid to the PM by tenants, owners and vendors. Navy = paid by the PM to RentWiseAI.
   Loaded by the portal (Banks page) and the platform page; it needs nothing else. */
.rw-ff{
  --ff-ink: #0f1b2d;
  --ff-mute: #5f6b7b;
  --ff-line: #e4dfd5;
  --ff-navy: #102d4e;
  --ff-pm-bg: #fbf1dc;
  --ff-pm-ink: #7a4b05;
  --ff-pm-line: #ecd5a6;
  --ff-rw-bg: #e8edf7;
  --ff-rw-ink: #102d4e;
  --ff-rw-line: #c9d3e8;
  max-width: 1040px;
  margin: 3em 0 calc(24px + 1.5em);
  padding: 0;
  color: var(--ff-ink);
}

.rw-ff__caption{ margin: 0 0 12px; color: var(--ff-mute); font-size: 0.86rem; line-height: 1.7; }
.rw-ff__title{ display: block; color: var(--ff-ink); font-size: 1rem; }
.rw-ff__key{ padding: 1px 7px; border: 1px solid; border-radius: 6px; font-weight: 600; white-space: nowrap; }

/* Three columns on every trip: the person, the arrow with its fees, the bank. */
.rw-ff__heads,
.rw-ff__trip{
  display: grid;
  grid-template-columns: minmax(96px, 0.4fr) minmax(0, 3.2fr) minmax(96px, 0.4fr);
  column-gap: 14px;
}
.rw-ff__heads p{
  margin: 0 0 7px;
  color: var(--ff-mute);
  font-size: 0.69rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.rw-ff__trips{ display: grid; gap: 10px; }
.rw-ff__trip{
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--ff-line);
  border-radius: 14px;
  background: #fbfaf7;
}

.rw-ff__node{
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--ff-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04);
}
.rw-ff__node strong{ font-size: 0.86rem; font-weight: 650; }
.rw-ff__node span{ color: var(--ff-mute); font-size: 0.76rem; }
.rw-ff__node--bank{ background: #fffaf0; border-color: #eee2c9; }

/* The arrow: its verb, a line with a head (pointing at the bank, or back at the person), then the fees. */
.rw-ff__arrow{ position: relative; padding: 26px 0 0; color: var(--ff-navy); }
.rw-ff__arrow::before{ content: ""; position: absolute; left: 0; right: 8px; top: 15px; height: 2px; border-radius: 2px; background: currentColor; }
.rw-ff__arrow::after{
  content: "";
  position: absolute;
  right: 0;
  top: 10px;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.rw-ff__trip--back .rw-ff__arrow::before{ left: 8px; right: 0; }
.rw-ff__trip--back .rw-ff__arrow::after{ right: auto; left: 0; transform: scaleX(-1); }
.rw-ff__verb{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 6px;
  background: #fbfaf7;
  color: var(--ff-mute);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rw-ff__fees{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.rw-ff__fee{ display: grid; gap: 2px; align-content: start; padding: 6px 9px; border: 1px solid; border-radius: 8px; font-size: 0.74rem; line-height: 1.4; }
.rw-ff__fee b{ font-size: 0.64rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.85; }
.rw-ff__part i{ font-style: normal; font-weight: 600; }
.rw-ff__part i::after{ content: ":"; }
.rw-ff__sum{ margin-top: 2px; font-weight: 700; }
.rw-ff__fee--pm, .rw-ff__key--pm{ background: var(--ff-pm-bg); border-color: var(--ff-pm-line); color: var(--ff-pm-ink); }
.rw-ff__fee--rw, .rw-ff__key--rw{ background: var(--ff-rw-bg); border-color: var(--ff-rw-line); color: var(--ff-rw-ink); }

.rw-ff__notes{ display: grid; gap: 4px; margin: 12px 0 0; padding-left: 18px; color: var(--ff-mute); font-size: 0.76rem; line-height: 1.5; }

/* Phone: person, fees, bank stacked in each trip. */
@media (max-width: 640px){
  .rw-ff__heads{ display: none; }
  .rw-ff__trip{ grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .rw-ff__fees{ grid-template-columns: minmax(0, 1fr); }
}

/* A worked example: the total, then how it adds up. */
.rw-ff__sum small{ display: block; font-size: 0.68rem; font-weight: 500; opacity: 0.85; }

/* The PM's net on each trip: green when the PM earns, red when it pays RentWiseAI more than it
   charges, black when even. The trip's left edge takes the color of its lowest net. */
.rw-ff__net{ display: block; margin-top: 4px; padding-top: 4px; border-top: 1px dashed currentColor; color: var(--ff-ink); font-weight: 700; }
.rw-ff__net.is-plus{ color: #15803d; }
.rw-ff__net.is-minus{ color: #b91c1c; }
.rw-ff__trip{ border-left-width: 4px; border-left-color: var(--ff-ink); }
.rw-ff__trip.is-plus{ border-left-color: #16a34a; }
.rw-ff__trip.is-minus{ border-left-color: #dc2626; }

/* Fields on the drawing: the PM's fees (gold) and, on the platform, RentWiseAI's (navy). */
.rw-ff__edit{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rw-ff__edit select,
.rw-ff__edit input,
.rw-ff__bands input{
  min-height: 28px;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: #fff;
  color: var(--ff-ink);
  font: inherit;
  font-size: 0.78rem;
}
.rw-ff__edit input,
.rw-ff__bands input{ width: 64px; text-align: right; }
.rw-ff__bands{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--ff-rw-line);
  border-radius: 10px;
  background: var(--ff-rw-bg);
  color: var(--ff-rw-ink);
  font-size: 0.78rem;
}
.rw-ff__bands b{ flex: 1 0 100%; font-size: 0.7rem; letter-spacing: 0.03em; text-transform: uppercase; }
.rw-ff__save{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }
.rw-ff__save small{ color: var(--ff-mute); font-size: 0.76rem; }
.rw-ff__status{ color: var(--ff-mute); font-size: 0.8rem; }
.rw-ff__status.is-error{ color: #b91c1c; }

/* The whole drawing 20% smaller (user, v864). */
.rw-ff{ zoom: 0.8; }

/* Stripe's part: what Stripe takes from tenant payments (the PM pays it), and on /platform what Stripe charges RentWiseAI. */
.rw-ff__fee--stripe, .rw-ff__key--stripe{ background: #f1f0ff; border-color: #d4d1fb; color: #3b3486; }

/* Banks page: in the "Banks fees" box (styled like Banks setup above it, the same width), the
   same 16px on each side, fonts a bit bigger (user, v883). The box waits for the drawing. */
#rwBankFeeFlow{ padding: 14px 16px 18px; }
/* Two empty rows between the Banks setup box and this one (on the setup box: its margin would
   otherwise collapse into a top margin here). */
#rwBankCollection.ra-bank-setup{ margin-bottom: calc(24px + 3em); }
.ra-bank-fees:has(#rwBankFeeFlow:empty){ display: none; }
#rwBankFeeFlow .rw-ff{ zoom: 0.9; max-width: none; margin: 0; }
/* The person and the bank keep their narrow boxes; every extra pixel goes to the fees in the middle. */
#rwBankFeeFlow :is(.rw-ff__heads, .rw-ff__trip){ grid-template-columns: 96px minmax(0, 1fr) 96px; }

/* The fees → Operating trip (user, v899; one way since v900): no person, the fees take both left
   columns; Trust: Rent sits above Operating with a U-turn between them, its head at Operating. */
.rw-ff__trip--uturn .rw-ff__arrow{ grid-column: 1 / 3; padding: 0; }
.rw-ff__trip--uturn .rw-ff__arrow::before,
.rw-ff__trip--uturn .rw-ff__arrow::after{ content: none; }
.rw-ff__uturn{ position: relative; display: grid; grid-auto-rows: 1fr; gap: 14px; padding-left: 20px; color: var(--ff-navy); }
.rw-ff__uturn::before{
  content: "";
  position: absolute;
  left: 2px;
  width: 14px;
  top: calc((100% - 14px) / 4);
  bottom: calc((100% - 14px) / 4);
  border: 2px solid currentColor;
  border-right: 0;
  border-radius: 10px 0 0 10px;
}
.rw-ff__uturn .rw-ff__node{ position: relative; align-content: center; }
.rw-ff__uturn .rw-ff__node + .rw-ff__node::before{
  content: "";
  position: absolute;
  left: -6px;
  top: calc(50% - 6px);
  border-left: 7px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  color: var(--ff-navy);
}
@media (max-width: 640px){
  .rw-ff__trip--uturn .rw-ff__arrow{ grid-column: auto; }
}