/* money-flow diagram: investor -> house <- tenant */
.flow { display:grid; grid-template-columns: minmax(0,1.2fr) minmax(92px,.4fr) minmax(0,1fr) minmax(92px,.4fr) minmax(0,1fr); gap: 8px; align-items: stretch; }
.flow h3 { font-size: 0.98rem; font-weight: 700; }
.flow .sub-copy { color: var(--ink-2); font-size: 0.8rem; margin: 2px 0 12px; }

.flow-party, .flow-house { text-align: center; }
.flow-party, .flow-house { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 14px 14px; }
.flow-house { display:flex; flex-direction: column; }
.flow-party { display:flex; flex-direction: column; }
/* controls and results sit at the bottom of each card so the three cards line up */
.flow-party .input-grid.compact { margin-top: auto; }
.flow-house .net { padding-top: 12px; }
.flow-party.out { --flow: var(--critical); }
.flow-party.in  { --flow: var(--good); }
.flow-house .net { margin-block: auto; font-size: 0.8rem; color: var(--ink-2); }
.flow-house .net strong { display:block; font-size: 1.15rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.flow-house .net.good strong { color: var(--good); }
.flow-house .net.critical strong { color: var(--critical); }

.input-grid.compact { grid-template-columns: repeat(2, 1fr); text-align: left; }
.flow-party.in .input-grid.compact { grid-template-columns: 1fr; }

.flow-arrow { display:grid; grid-template-rows: 1fr auto 1fr; justify-items: center; align-self: stretch; row-gap: 10px; min-width: 0; }
.flow-arrow .entries { align-self: end; display:flex; flex-direction: column; align-items:center; gap: 8px; }
.flow-arrow svg.track { grid-row: 2; }
.flow-arrow .amt { font-size: 0.88rem; font-weight: 700; }
.flow-arrow .entry { display:flex; flex-direction: column; align-items:center; text-align:center; gap: 1px; }
.flow-arrow .entry.loss .amt { color: var(--critical); font-weight: 600; font-size: 0.8rem; }
.flow-arrow .cap { font-size: 0.72rem; color: var(--ink-muted); }
.flow-arrow svg { width: 100%; max-width: 110px; height: 28px; overflow: visible; }
.flow-party .figure { color: var(--flow); width: 96px; height: 80px; margin: 0 auto 8px; display:block; }
.flow-house .figure { color: var(--accent-property); width: 140px; height: 121px; margin: 0 auto 6px; display:block; }
.flow-arrow.out { color: var(--critical); }
.flow-arrow.in  { color: var(--good); }

.mkt-row { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--grid); }
.mkt-row .group-label { font-family: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 12px; }
.mkt-row .input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 480px; }

@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: 6px; }
  .flow-arrow { display:flex; flex-direction: row; justify-content: center; align-items: center; align-self: auto; gap: 10px; padding: 4px 0; }
  .flow-arrow .entries { flex-direction: row; align-self: auto; gap: 10px; }
  .flow-arrow svg { width: 70px; max-width: 70px; transform: rotate(90deg); margin-block: 21px; }   /* the rotated arrow is 70px tall but laid out 28px tall */

}
@media (max-width: 460px) { .mkt-row .input-grid { grid-template-columns: 1fr; } }

/* illustrated figure supplied as a transparent image file (instead of the inline SVG drawings) */
.flow-party .figure.photo, .flow-house .figure.photo { width: 100%; max-width: 340px; height: 165px; object-fit: contain; margin: 0 auto 8px; display: block; }

/* the tenant's single rent input floats in the middle of the free space under the caption */
.flow-party.in .input-grid.compact { margin-block: auto; }

/* the card title doubles as the property's name: it looks like a heading until you hover or click it */
.house-name { position: relative; display:flex; align-items:center; justify-content:center; margin: 0 auto; max-width: 100%; }
.house-name textarea {
  width: 100%; text-align: center; background: transparent; border: none; border-bottom: 1px dotted var(--baseline); border-radius: 0; padding: 2px 18px;
  font: inherit; font-size: 0.98rem; font-weight: 700; line-height: 1.3; color: var(--ink); resize: none; overflow: hidden; display: block;
}
.house-name textarea::placeholder { color: var(--ink); opacity: 1; }
.house-name svg { position: absolute; right: 2px; width: 14px; height: 14px; fill: none; stroke: var(--ink-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .5; transition: opacity .12s; pointer-events: none; }
.house-name:hover svg, .house-name:focus-within svg { opacity: 1; }
.house-name:hover textarea { border-bottom: 1px dashed var(--ink-muted); }
.house-name textarea:focus { outline: none; border-bottom: 1px solid var(--accent-property); }
.house-name textarea:focus::placeholder { color: var(--ink-muted); }