/* rent.css — layout for the rent portal only, on top of the house style
   (https://design.codebase.fyi/v2/house.css, DESIGN.md). Tokens only: no colours, font sizes,
   font families or radii of its own, and no prefers-color-scheme. How things look is house.css. */

.hidden { display: none !important; }

/* tabs sit under the header */
#tabbar { margin-top: var(--sp-1); }

/* month title with previous / next */
.monthhd { margin-top: var(--sp-5); }
.lease { margin: calc(-1 * var(--sp-1)) 2px var(--sp-3); }
.lease .bar { max-width: 240px; margin-top: var(--sp-1); }

/* your share: one row under the statement */
.you { margin-top: var(--sp-3); }

/* avatar: a roommate's photo, or the first letter of the name */
.avatar { width: var(--ib); height: var(--ib); flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--fill); color: var(--ink-2); font: 600 var(--fs-3)/1 var(--font-display); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.list.people .rm { position: relative; }
.list.people .rm + .rm::before { content: ""; position: absolute; left: 62px; right: 0; top: 0; border-top: 1px solid var(--line); }
.list.people .row-end { gap: 3px; }
.rm .row > .chev { transition: transform .15s; }
.rm.open .row > .chev { transform: rotate(90deg); }
.rm-body { display: none; padding: 0 var(--sp-4) var(--sp-4) 62px; }
.rm.open .rm-body { display: block; }
.rm-note { margin: var(--sp-2) 0 0; }
.rm-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.rm-acts .btn { flex: 1 1 0; }

/* bills */
.bills .row { align-items: flex-start; }
.bills .row > .icon { margin-top: 2px; color: var(--ink-2); }
.bill-acts { display: flex; gap: var(--sp-3); font-size: var(--fs-2); margin-top: 2px; }

/* forms */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.fgrid .full { grid-column: 1 / -1; }
.fgrid > .field, .fgrid .field > input { min-width: 0; }   /* date and month inputs would push past their column (and widen the sheet) */
.panel form > .btn, .panel > .btn, .formbtn { width: 100%; margin-top: var(--sp-4); }
.sheet .fgrid .field + .field { margin-top: 0; }
.sheet .field .link { justify-self: start; }

/* pay */
.note { margin: 0 0 var(--sp-3); color: var(--ink-2); font-size: var(--fs-3); }
.panel > .note:last-child { margin-bottom: 0; }
.zelle .row-main b { word-break: break-all; }
.panel .disclose { margin-top: var(--sp-3); }
.panel .disclose p { margin: var(--sp-2) 0 0; color: var(--ink-2); font-size: var(--fs-3); }
#qrWrap { text-align: center; margin-top: var(--sp-3); }
#qrWrap img { max-width: 220px; border-radius: var(--r); }

/* settings */
.shares .setting-ctl .field { width: 120px; min-width: 0; }
.shares .setting-ctl input { text-align: right; }
.sumrow .setting-ctl { font-weight: 600; }
.shares .sumrow::before { content: ""; position: absolute; left: var(--sp-4); right: 0; top: 0; border-top: 1px solid var(--line); }

/* who-are-you sheet */
.picker .row { gap: var(--sp-2); padding-top: var(--sp-2); padding-bottom: var(--sp-2); min-height: 52px; }
.picker .pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); text-align: left; font-weight: 500; min-height: var(--tap); }
.picker .pick .icon { color: var(--ink-2); margin: 0 7px; }

.wide-only { display: none; }
@media (min-width: 1100px) { .wide-only { display: flex; } }

/* loading */
.loading { padding: var(--sp-6) 0; }

/* lock screen */
.lock-err { margin: 0; font-size: var(--fs-2); color: var(--bad); }
.lock-err:empty { display: none; }

/* desktop: home and utilities side by side from 1100px (the Utilities tab hides there) */
@media (min-width: 900px) {
  .list.people .rm + .rm::before { left: 66px; }
  .rm-body { padding: 0 20px 20px 66px; }
  .shares .sumrow::before { left: 20px; }
}
@media (min-width: 1100px) {
  #panels { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-5); align-items: start; }
  #tab-pay, #tab-history, #tab-settings { grid-column: 1 / -1; max-width: 720px; margin: 0 auto; width: 100%; }
  #tabbar [data-tab="utils"] { display: none; }
  #tab-utils .narrow-only { display: none; }   /* the home month title drives both panels */
}