/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text-base)/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; margin: 0 0 var(--space-2); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }
a { color: var(--oxblood); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--oxblood-deep); text-decoration-thickness: 2px; }
.muted { color: var(--muted); }
::selection { background: var(--oxblood); color: #fff; }

:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; border-radius: 2px; }

/* ---------- Frame ---------- */
.app { min-height: 100dvh; padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom)); }
.main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: max(var(--space-5), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) var(--space-6) max(var(--space-4), env(safe-area-inset-left));
}

/* Signed-out pages: light throughout. The logo (made for a light ground) sits centred on the
   paper as the focal point, a slim oxblood line in the star's gradient runs across the very top,
   and the card rests below the logo. Content is top-aligned with fixed padding. */
.bare {
  --bare-top: 56px;
  min-height: 100dvh;
  padding: calc(var(--bare-top) + env(safe-area-inset-top)) var(--space-4) var(--space-6);
  background:
    linear-gradient(90deg, var(--brand-star-deep), var(--brand-star) 50%, var(--brand-star-deep)) top / 100% calc(3px + env(safe-area-inset-top)) no-repeat,
    var(--paper);
}
.bare > div { width: min(420px, 100%); margin: 0 auto; }
.bare .bare-logo { display: block; width: 264px; max-width: 100%; margin: 0 auto var(--space-6); }
.bare .bare-logo img { display: block; width: 100%; height: auto; }

/* ---------- Navigation: tab bar on phones, sidebar from 900 px ---------- */
.nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  background: var(--charcoal);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  border-top: 1px solid rgb(255 255 255 / 8%);
}
.nav .brand, .nav .nav-foot { display: none; }
.nav ul { display: flex; margin: 0; padding: 0; list-style: none; height: var(--tabbar-height); }
.nav li { flex: 1 1 0; min-width: 0; }
.nav li a {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  min-width: 44px;
  padding: 0 var(--space-1);
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  transition: color 120ms var(--ease);
}
.nav li a::before {
  /* The active marker is the brand's thin white rule. */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 28px;
  height: 2px;
  background: #fff;
  transform: translateX(-50%) scaleX(0);
  transition: transform 160ms var(--ease);
}
.nav li a:hover { color: #fff; }
.nav li a[aria-current="page"] { color: #fff; }
.nav li a[aria-current="page"]::before { transform: translateX(-50%) scaleX(1); }
.nav :focus-visible { outline-color: #fff; outline-offset: -4px; border-radius: var(--radius-sm); }

/* ---------- Layout helpers ---------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.page-header h1 { margin: 0 0 var(--space-1); }
.page-header p { margin: 0; }
.stack > * { margin-top: 0; margin-bottom: 0; }
.stack > * + * { margin-top: var(--gap); }
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* ---------- Surfaces ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5) var(--space-4);
}
.card > h2:first-child, .card > h3:first-child { margin-bottom: var(--space-3); }

.auth-card {
  width: 100%;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: var(--space-6) var(--space-5);
}
.auth-card h1 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.auth-card h1 + p { color: var(--muted); }
.auth-card form { margin-top: var(--space-5); }
.auth-card form + p {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  text-align: center;
}
.auth-card .btn-primary { width: 100%; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--oxblood); color: #fff; }
.btn-primary:hover { background: var(--oxblood-deep); color: #fff; }
.btn-primary:active { background: #3d0d07; }
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover { background: var(--paper-2); color: var(--ink); border-color: #b9ae9f; }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }

/* ---------- Form fields ---------- */
.field label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field input, .field select, .field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-base); /* 16 px: stops iOS zooming on focus */
  color: var(--ink);
  background: var(--surface);
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.field textarea { min-height: 112px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8a8279; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #b9ae9f; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--oxblood); box-shadow: var(--ring); }
.field input[type="checkbox"], .field input[type="radio"] { display: inline-block; width: 20px; min-height: 20px; height: 20px; padding: 0; accent-color: var(--oxblood); vertical-align: middle; }
.field-error input, .field-error select, .field-error textarea { border-color: var(--danger); }
.field-error input:focus, .field-error select:focus, .field-error textarea:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgb(161 42 28 / 20%); }
.hint { color: var(--muted); font-size: var(--text-sm); margin: 6px 0 0; }
.error { color: var(--danger); font-size: var(--text-sm); font-weight: 500; margin: 6px 0 0; }

/* ---------- Alerts ---------- */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  border-left-width: 3px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9375rem;
  margin: 0 0 var(--gap);
}
.alert-error { border-color: var(--danger); background: var(--danger-tint); color: var(--danger); }
.alert-success { border-color: var(--ok); background: var(--ok-tint); color: var(--ok); }

/* ---------- Tables ---------- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.table th, .table td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { background: var(--paper-2); font-size: 0.8125rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.table tbody tr { transition: background-color 120ms var(--ease); }
.table tbody tr:hover { background: #fcfaf7; }
.table tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
  background: var(--paper-2);
  color: var(--ink);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-ok { color: var(--ok); background: var(--ok-tint); }
.badge-warn { color: var(--warn); background: var(--warn-tint); }
.badge-muted { color: var(--muted); background: var(--paper-2); }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  h1 { font-size: 2rem; }
  .app { padding-bottom: 0; padding-left: var(--nav-width); }
  .main { padding: var(--space-7) var(--space-7) var(--space-7); }
  .card { padding: var(--space-5); }
  .table th, .table td { padding: 14px var(--space-4); }
  .auth-card { padding: 40px; }
  .bare { --bare-top: 96px; }
  .bare .bare-logo { width: 344px; margin-bottom: var(--space-7); }

  .nav {
    inset: 0 auto 0 0;
    width: var(--nav-width);
    display: flex;
    flex-direction: column;
    padding: var(--space-6) var(--space-4) var(--space-5);
    border-top: 0;
    border-right: 1px solid rgb(255 255 255 / 6%);
  }
  .nav .brand {
    display: block;
    margin: 0 var(--space-2) var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgb(255 255 255 / 70%);
    color: #fff;
    font: 700 1.25rem/1.15 var(--font-display);
    letter-spacing: var(--tracking-brand);
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  .nav .brand:focus-visible { outline-offset: 4px; }
  .nav ul { flex-direction: column; height: auto; gap: 2px; }
  .nav li { flex: none; }
  .nav li a {
    place-items: center start;
    height: 44px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--on-dark);
    transition: background-color 120ms var(--ease), color 120ms var(--ease);
  }
  .nav li a::before { display: none; }
  .nav li a:hover { background: var(--charcoal-2); color: #fff; }
  .nav li a[aria-current="page"] { background: var(--oxblood); color: #fff; font-weight: 600; }
  .nav .nav-foot {
    display: block;
    margin-top: auto;
    padding: var(--space-4) var(--space-2) 0;
    border-top: 1px solid rgb(255 255 255 / 10%);
    color: var(--on-dark-muted);
    font-size: var(--text-sm);
    line-height: 1.4;
  }
  .nav .nav-foot form { margin-top: var(--space-3); }
  .nav .nav-foot .btn { width: 100%; background: transparent; color: #fff; border-color: rgb(255 255 255 / 28%); }
  .nav .nav-foot .btn:hover { background: var(--charcoal-2); border-color: rgb(255 255 255 / 50%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.dl { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px 16px; margin: 0; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; }
.stat { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; margin: 0; white-space: nowrap; }
.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.field input[type="checkbox"] { width: 22px; min-height: 22px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: var(--gap); overflow-x: auto; }
.tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--oxblood); box-shadow: inset 0 -3px 0 var(--oxblood); }

fieldset { margin: 0; min-width: 0; }
fieldset legend { padding: 0 6px; }
fieldset legend h2 { margin: 0; }


/* ---------- Home: brand banner with the Nomad 1809 logo ---------- */
/* A white panel with a slim oxblood top edge; the logo, a hairline, then the portal name. */
.brand-banner {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "logo action" "text text";
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, var(--brand-star-deep), var(--brand-star)) top / 100% 3px no-repeat,
    var(--surface);
  box-shadow: var(--shadow-panel);
}
.brand-banner-logo { grid-area: logo; display: block; width: 120px; }
.brand-banner-logo img { display: block; width: 100%; height: auto; }
.brand-banner-text { grid-area: text; min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.brand-banner-text h1 { margin: 0 0 var(--space-1); overflow-wrap: anywhere; }
.brand-banner-text p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.brand-banner-action { grid-area: action; justify-self: end; }
@media (min-width: 900px) {
  .brand-banner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo text action";
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6);
  }
  .brand-banner-logo { width: 155px; }
  .brand-banner-text { padding: 6px 0 6px var(--space-6); border-top: 0; border-left: 1px solid var(--line); }
}

/* ======================================================================
   Dashboard: key figures, the building section, attention lists
   ====================================================================== */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.empty { margin: 0; color: var(--muted); font-size: var(--text-sm); }

/* Key figures: one panel split into four cells by hairlines (2 x 2 on a phone). */
.kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.kpi {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-4);
  border-color: var(--line);
  border-style: solid;
  border-width: 0;
}
.kpi:nth-child(odd) { border-right-width: 1px; }
.kpi:nth-child(-n+2) { border-bottom-width: 1px; }
.kpi-label {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font: 600 0.6875rem/1.3 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.kpi-figure {
  margin: 0;
  color: var(--ink);
  font: 600 1.75rem/1 var(--font-display);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kpi-figure-money { font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.015em; }
.kpi-figure-alert { color: var(--oxblood); }
.kpi-note { margin: var(--space-2) 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.35; }
.kpi-note span { white-space: nowrap; }
/* Meters sit on the cell's floor, so they line up across a row however the notes wrap. */
.kpi .meter { margin-top: auto; }
.kpi .kpi-note:has(+ .meter) { margin-bottom: var(--space-3); }
.meter {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--paper-2);
  overflow: hidden;
}
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--charcoal); }

/* Layout: the building beside the attention lists from 1100 px. */
.dashboard { display: grid; gap: var(--space-5); align-items: start; }
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.panel-head h2 { margin: 0; font-size: var(--text-lg); letter-spacing: -0.01em; }
#building { padding: var(--space-4); }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--text-xs); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; border: 1px solid; }
.legend-occupied::before { background: var(--ok-tint); border-color: var(--ok) !important; }
.legend-notice::before { background: var(--warn-tint); border-color: var(--warn) !important; }
.legend-vacant::before { background: var(--paper); border-color: var(--line-strong) !important; }

/* The building, drawn as a section: roof slab on top, floors as hairline-separated
   storeys, a ground line with a fine oxblood rule beneath. */
.building + .building { margin-top: var(--space-6); }
.building-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.building-name { margin: 0; font-size: var(--text-base); font-weight: 650; letter-spacing: -0.005em; }
.building-place { margin: 0; color: var(--muted); font-size: var(--text-xs); }
.building-section {
  margin-top: var(--space-3);
  border-top: 3px solid var(--charcoal);
  border-bottom: 2px solid var(--charcoal);
  box-shadow: 0 3px 0 -1px var(--oxblood-line);
}
.floor { padding: var(--space-3) 0; }
.floor + .floor { border-top: 1px solid var(--line); }
.floor-other { background: repeating-linear-gradient(-45deg, transparent 0 6px, rgb(207 198 185 / 18%) 6px 7px); }
.floor-name {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.floor-units {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.unit-tile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "number" "tenant" "flag";
  align-content: center;
  column-gap: 6px;
  min-height: 60px; /* room for a third line (the notice flag) on a phone, so every storey is one height */
  height: 100%;
  padding: 7px 8px 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.25;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.unit-tile::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--line-strong);
}
.unit-tile:hover { color: var(--ink); border-color: var(--line-strong); box-shadow: 0 4px 12px -6px rgb(26 26 26 / 25%); }
.unit-tile-number { grid-area: number; font-weight: 650; font-size: 0.8125rem; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.unit-tile-tenant, .unit-tile-flag {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.6875rem;
}
.unit-tile-tenant { grid-area: tenant; color: var(--ink); }
.unit-tile-first { grid-area: tenant; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.6875rem; color: var(--ink); }
.unit-tile-full { display: none; } /* phone: the first name stands in for the full name */
.unit-tile-flag { grid-area: flag; color: var(--warn); font-weight: 700; }
.unit-tile[data-state="occupied"] { background: var(--ok-tint); border-color: rgb(31 107 69 / 22%); }
.unit-tile[data-state="occupied"]::before { background: var(--ok); }
.unit-tile[data-state="notice"] { background: var(--warn-tint); border-color: rgb(154 91 0 / 28%); }
.unit-tile[data-state="notice"]::before { background: var(--warn); }
.unit-tile[data-state="vacant"] { background: var(--paper); }
.unit-tile[data-state="vacant"] .unit-tile-tenant { color: var(--muted); }
.unit-tile[data-state="vacant"]::before { display: none; }

/* Attention lists */
.attention { padding: var(--space-4); }
.attention > section + section { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.attention-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-base); letter-spacing: -0.005em; }
.attention-title .count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.attention-list { margin: 0; padding: 0; list-style: none; }
.attention-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "pill name" "pill date";
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-2) 0;
  min-height: 52px;
}
.attention-list li + li { border-top: 1px solid var(--line); }
.attention-list-names li { grid-template-areas: "pill name"; min-height: 44px; }
.attention-list a { grid-area: name; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; color: var(--ink); text-decoration: none; }
.attention-list a:hover { color: var(--oxblood); text-decoration: underline; }
.attention-date { grid-area: date; color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.unit-pill {
  grid-area: pill;
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi { padding: var(--space-5); border-width: 0; }
  .kpi:nth-child(odd), .kpi:nth-child(-n+2) { border-width: 0; }
  .kpi + .kpi { border-left-width: 1px; }
  .kpi-figure { font-size: 2.25rem; }
  .kpi-figure-money { font-size: 1.625rem; line-height: 1.385; }
  #building, .attention { padding: var(--space-5); }
  .floor { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--space-4); }
  .floor-name { margin: 0; }
  .unit-tile { min-height: 58px; padding: 9px 10px 9px 12px; }
  .unit-tile-number { font-size: var(--text-sm); }
  .unit-tile-tenant { font-size: var(--text-xs); }
  .unit-tile { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "number flag" "tenant tenant"; }
  .unit-tile-first { display: none; }
  .unit-tile-full { display: block; }
  .attention > section + section { margin-top: var(--space-5); padding-top: var(--space-5); }
  .unit-tile-flag { align-self: center; justify-self: end; max-width: 100%; font-size: 0.6875rem; }
}
@media (min-width: 1100px) {
  .dashboard { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ======================================================================
   Units: status chips and a list grouped by floor
   ====================================================================== */
/* Phone: one segmented bar of four equal parts, count above label, so all four fit on one line. */
.chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 var(--space-5);
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}
.chip {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 52px;
  padding: 4px 2px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
.chip:hover { color: var(--ink); background: var(--paper-2); text-decoration: none; }
.chip-count { color: var(--ink); font-size: var(--text-lg); font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.chip[aria-current="page"], .chip[aria-current="page"]:hover { background: var(--oxblood); color: rgb(255 255 255 / 82%); }
.chip[aria-current="page"] .chip-count { color: #fff; }
.chip:focus-visible { outline-offset: -2px; }

.unit-cols { display: none; }
.unit-property + .unit-property { margin-top: var(--space-7); }
.property-heading { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
/* Phone: each floor is a collapsible row (bold name and summary left, chevron right, bottom
   border). The script under the list collapses them on load unless a status filter is on. */
.floor-tools { display: flex; align-items: center; justify-content: space-between; margin: calc(var(--space-3) * -1) 0 0; padding: 0 var(--space-1); color: var(--muted); font-size: var(--text-sm); }
.floor-toggle-all {
  min-height: 44px;
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--oxblood);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.floor-toggle-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.floor-toggle-all[hidden] { display: none; }
.unit-floor { border-bottom: 1px solid var(--line); }
.unit-property > .unit-floor:first-of-type, .unit-groups > .unit-property:first-of-type .unit-floor:first-of-type { border-top: 1px solid var(--line); }
.floor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-2) var(--space-1);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.floor-heading::-webkit-details-marker { display: none; }
.floor-heading:focus-visible { outline-offset: -2px; border-radius: var(--radius-sm); }
.floor-title { display: flex; flex-direction: column; min-width: 0; }
.floor-name-text { color: var(--ink); font-weight: 700; font-size: var(--text-base); line-height: 1.3; }
.floor-summary { color: var(--muted); font-size: 0.8125rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.floor-chevron { flex: none; color: var(--muted); transition: transform 180ms var(--ease); }
.unit-floor[open] > .floor-heading .floor-chevron { transform: rotate(180deg); }
.unit-floor[open] > .unit-rows { margin-bottom: var(--space-4); }
.unit-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
/* Phone: a compact three-line card. Line 1 unit and status; line 2 tenant; line 3 type and rent. */
.unit-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "number status" "tenant tenant" "type rent";
  align-items: center;
  gap: 2px var(--space-3);
  padding: var(--space-3) var(--space-4);
  transition: background-color 120ms var(--ease);
}
.unit-row + .unit-row { border-top: 1px solid var(--line); }
.unit-row:hover { background: #fcfaf7; }
.unit-row:focus-within { background: #fcfaf7; }
.unit-row-number {
  grid-area: number;
  color: var(--ink);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
/* The unit link covers the whole row, so the row is one tap target. */
.unit-row-number::after { content: ""; position: absolute; inset: 0; }
.unit-row-number:hover { color: var(--ink); text-decoration: none; }
.unit-row-number:focus-visible { outline: none; }
.unit-row-number:focus-visible::after { outline: 2px solid var(--oxblood); outline-offset: -3px; border-radius: inherit; }
.unit-row-status { grid-area: status; justify-self: end; }
.unit-row-tenant { grid-area: tenant; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
/* Not clipped: the action's enlarged hit area must reach past the line box. */
.unit-row-vacant { display: flex; align-items: center; gap: 0.3em; overflow: visible; color: var(--muted); font-weight: 400; }
.unit-row-action {
  position: relative; /* above the row link */
  z-index: 1;
  display: inline-block;
  padding: 12px 4px;
  margin: -12px -4px;
  font-weight: 600;
  text-decoration: none;
}
.unit-row-action:hover { text-decoration: underline; }
.unit-row-type { grid-area: type; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: var(--text-sm); }
.unit-row-rent { grid-area: rent; justify-self: end; font-size: var(--text-sm); font-weight: 600; }

.empty-state { padding: var(--space-6) var(--space-5); text-align: center; }
.empty-state-title { margin: 0 0 var(--space-2); font-weight: 650; font-size: var(--text-lg); color: var(--ink); }
.empty-state p { color: var(--muted); }
.empty-state .btn { margin-top: var(--space-3); }

/* Desktop: columns aligned across every row and floor. */
@media (min-width: 900px) {
  .chips { display: flex; gap: var(--space-2); padding: 0; border: 0; background: none; }
  .chip {
    flex-direction: row;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-2) 0 var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-sm);
  }
  .chip:hover { border-color: #b9ae9f; }
  .chip-count {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--paper-2);
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1;
  }
  .chip[aria-current="page"], .chip[aria-current="page"]:hover { border-color: var(--oxblood); color: #fff; }
  .chip[aria-current="page"] .chip-count { background: rgb(255 255 255 / 18%); }
  .chip:focus-visible { outline-offset: 2px; }
  .unit-groups { --unit-cols: minmax(150px, 1.1fr) minmax(0, 2fr) 140px 120px; }
  .unit-cols {
    display: grid;
    grid-template-columns: var(--unit-cols);
    column-gap: var(--space-5);
    margin-bottom: var(--space-3);
    padding: 0 var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .unit-cols .num { text-align: right; }
  /* Desktop: floors are always open; the heading is a quiet section label, not a control. */
  .floor-tools, .floor-chevron { display: none; }
  .unit-floor, .unit-property > .unit-floor:first-of-type, .unit-groups > .unit-property:first-of-type .unit-floor:first-of-type { border: 0; }
  .unit-floor + .unit-floor { margin-top: var(--space-5); }
  .unit-floor > .unit-rows { margin-bottom: 0; }
  .floor-heading {
    min-height: 0;
    padding: 0 var(--space-5) var(--space-2);
    cursor: default;
    pointer-events: none;
  }
  .floor-title { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--space-3); width: 100%; }
  .floor-name-text { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
  .floor-summary { font-size: var(--text-xs); }
  .unit-row {
    grid-template-columns: var(--unit-cols);
    grid-template-areas: "number tenant rent status" "type tenant rent status";
    column-gap: var(--space-5);
    row-gap: 0;
    min-height: 64px;
    padding: var(--space-3) var(--space-5);
  }
  .unit-row-status { justify-self: start; }
  .unit-row-rent { font-size: var(--text-base); }
  .unit-row-type { font-size: 0.8125rem; }
}

/* ======================================================================
   Tenant profile: header, key facts, tabs, sections, leases, documents
   ====================================================================== */
/* Phone: avatar and Edit on one line, the name full width beneath, contact actions last.
   Desktop: the avatar holds the left column; name, standing and actions stack beside it. */
.profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "avatar edit" "identity identity" "contact contact";
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}
.profile-avatar {
  grid-area: avatar;
  align-self: start;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--oxblood);
  color: #fff;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px rgb(111 26 15 / 30%);
  font: 650 1.25rem/1 var(--font-display);
  letter-spacing: 0.04em;
  user-select: none;
}
.profile-identity { grid-area: identity; min-width: 0; }
.profile-identity h1 { margin: 0 0 var(--space-2); font-size: 1.5rem; overflow-wrap: anywhere; }
.profile-standing { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.profile-edit { grid-area: edit; align-self: start; justify-self: end; padding: 0 var(--space-3); }
.profile-edit svg { color: var(--muted); }

.profile-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.profile-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.profile-status-current { color: var(--ok); background: var(--ok-tint); }
.profile-status-notice { color: var(--warn); background: var(--warn-tint); }
.profile-status-former { color: var(--muted); background: var(--paper-2); }

.profile-unit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: 0 12px 0 4px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.8125rem;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease);
}
/* A 44 px tall hit area around the slim pill. */
.profile-unit::after { content: ""; position: absolute; inset: -8px -2px; }
.profile-unit:hover { color: var(--ink); border-color: var(--oxblood); background: var(--oxblood-tint); text-decoration: none; }
.profile-unit-number {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--charcoal);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.profile-unit-place { color: var(--muted); }
.profile-unit-flag { color: var(--warn); font-weight: 650; }
.profile-unit-none { color: var(--muted); font-size: var(--text-sm); }

/* Contact actions: icon-over-label tiles on a phone, a row of buttons from 600 px. */
.profile-contact {
  grid-area: contact;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.profile-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 6px 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease);
}
.profile-action svg { flex: none; color: var(--oxblood); }
.profile-action:hover { color: var(--ink); background: var(--paper-2); border-color: #b9ae9f; text-decoration: none; }
.profile-action-detail { display: none; color: var(--muted); font-weight: 500; }

.profile-note {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--oxblood);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--text-sm);
}

/* Key facts: label small and uppercase, figure large and tabular, in hairline-split cells.
   The grid sits 1 px wider and taller than its clipped frame, so the outer cells' right and
   bottom hairlines fall outside it: any number of facts tiles cleanly. */
.facts {
  margin-bottom: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 -1px -1px 0;
}
.facts-cell {
  min-width: 0;
  padding: var(--space-4);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.facts-label {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font: 600 0.6875rem/1.3 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.facts-figure {
  margin: 0;
  color: var(--ink);
  font: 600 1.25rem/1.3 var(--font-display);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.facts-note { margin: var(--space-1) 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.35; }
.facts-note-soon { color: var(--warn); font-weight: 600; }
.facts-note-alert { color: var(--oxblood); font-weight: 650; }

/* Tabs: the bar scrolls sideways within itself when the tabs outgrow it. On a phone a soft
   fade at the right edge hints at more; the trailing padding lets the last tab clear it. */
.profile-tabs {
  gap: 0;
  margin-bottom: var(--space-5);
  padding-right: var(--space-4);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--space-4)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--space-4)), transparent);
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tabs a { flex: none; gap: var(--space-2); padding: 0 var(--space-3); scroll-snap-align: start; }
.profile-tabs a:first-child { padding-left: var(--space-1); }
.profile-tabs a:hover { color: var(--ink); }
.profile-tabs a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--oxblood); }
.profile-tabs a:focus-visible { outline-offset: -4px; }
.tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}
.profile-tabs a[aria-current="page"] .tab-count { background: var(--oxblood-tint); color: var(--oxblood); }

/* Overview: grouped sections; rows read label left, value right. */
.profile-sections { display: grid; gap: var(--space-4); }
.profile-section {
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}
.profile-section-title {
  margin: 0 0 var(--space-1);
  color: var(--muted);
  font: 600 0.6875rem/1.3 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.profile-fields { margin: 0; }
.profile-fields > div {
  display: grid;
  grid-template-columns: minmax(92px, 30%) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.profile-fields > div + div { border-top: 1px solid var(--line); }
.profile-fields > div:last-child { padding-bottom: 0; }
.profile-fields dt { color: var(--muted); font-size: 0.8125rem; line-height: 1.35; }
.profile-fields dd { margin: 0; font-weight: 500; overflow-wrap: break-word; min-width: 0; }
.profile-fields dd a { font-weight: 600; text-decoration: none; }
.profile-fields dd a:hover { text-decoration: underline; }
.profile-notes { margin: var(--space-3) 0 0; max-width: 70ch; }
.profile-section .not-given { color: var(--muted); font-weight: 400; font-style: italic; }
.profile-section .section-empty { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--text-sm); }

/* Leases */
.lease-list { display: grid; gap: var(--space-4); }
.lease-card {
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}
.lease-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title badge" "action action";
  align-items: start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.lease-title { grid-area: title; min-width: 0; }
.lease-title h2 { margin: 0; font-size: var(--text-xl); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
/* The unit link keeps its look but gets a 44 px tall hit area. */
.lease-unit { position: relative; display: inline-block; color: var(--ink); text-decoration: none; }
.lease-unit::after { content: ""; position: absolute; inset: -10px -6px; }
.lease-unit:hover { color: var(--oxblood); text-decoration: underline; }
.lease-place { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.lease-head .badge { grid-area: badge; margin-top: 4px; }
.lease-action { grid-area: action; width: 100%; }
.badge-void { color: var(--danger); background: var(--danger-tint); }
.lease-void-note {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--danger);
  background: var(--danger-tint);
  color: var(--ink);
  font-size: var(--text-sm);
}
.lease-card .facts { margin-bottom: var(--space-4); box-shadow: none; border-radius: var(--radius); }
.lease-terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-5);
}
.lease-terms dt { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.lease-terms dd { margin: 2px 0 0; font-weight: 600; }
.lease-review-note { color: var(--warn); font-size: 0.8125rem; }
.lease-review-note.is-overdue { color: var(--oxblood); }
/* Ended and voided leases step back: no lift, paper ground. */
.lease-card-ended, .lease-card-void { background: var(--paper); box-shadow: none; }
.lease-card-void { border-style: dashed; border-color: var(--line-strong); }
.lease-card-ended .lease-title h2, .lease-card-void .lease-title h2 { font-size: var(--text-lg); }
.lease-card-ended .lease-unit, .lease-card-void .lease-unit { color: var(--muted); }

/* Rent history: a timeline, a fine spine with a node per change of terms. */
.history { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.history-title {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font: 600 0.6875rem/1.3 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.history-cols { display: none; }
.history-list { margin: 0; padding: 0; list-style: none; }
.history-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "date mark" "rent rent" "sc sc";
  gap: 2px var(--space-3);
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
}
.history-row + .history-row { border-top: 1px solid var(--line); }
.history-row::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.history-row:first-child::before { top: 24px; }
.history-row:last-child::before { bottom: calc(100% - 24px); }
.history-row:only-child::before { display: none; }
.history-row::after { content: ""; position: absolute; left: 0; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); }
.history-row.is-current::after { background: var(--oxblood); border-color: var(--oxblood); }
.history-row.is-future::after { border-color: var(--oxblood); }
.history-date { grid-area: date; font-weight: 650; }
.history-rent { grid-area: rent; font-size: var(--text-sm); }
.history-sc { grid-area: sc; font-size: var(--text-sm); }
.history-key { color: var(--muted); }
.history-mark { grid-area: mark; justify-self: end; }
.history-row.is-past { color: var(--muted); }
.history-row.is-past .history-date { font-weight: 500; }
.mark { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: 650; white-space: nowrap; }
.mark-current { background: var(--oxblood); color: #fff; }
.mark-future { border: 1px solid var(--oxblood); color: var(--oxblood); }

/* Documents */
.doc-layout { display: grid; gap: var(--space-4); align-items: start; }
.doc-panel, .doc-upload { padding: var(--space-4); }
.doc-panel-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.doc-panel-head h2, .doc-upload h2 { margin: 0; font-size: var(--text-lg); letter-spacing: -0.01em; }
.doc-panel-head .count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}
.doc-list { margin: 0; padding: 0; list-style: none; }
.doc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.doc-row + .doc-row { border-top: 1px solid var(--line); }
.doc-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--oxblood-tint); color: var(--oxblood); }
.doc-main { min-width: 0; }
.doc-main p { margin: 0; }
.doc-name { font-weight: 650; overflow-wrap: anywhere; }
/* The type is a small tag, so the meta line wraps cleanly on a phone. */
.doc-main .doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); margin-top: 4px; font-size: 0.8125rem; }
.doc-kind { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-size: var(--text-xs); font-weight: 600; }
.doc-scope { color: var(--muted); }
.doc-main .doc-added { margin-top: 2px; color: var(--muted); font-size: 0.8125rem; }
.doc-download { width: 44px; padding: 0; }
.doc-download svg { color: var(--oxblood); }
.doc-download-text { display: none; }
.doc-empty { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-sm); }
.doc-upload h2 { margin-bottom: var(--space-4); }
.doc-upload-fields { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.doc-upload input[type="file"] { padding: 6px; cursor: pointer; font-size: var(--text-sm); }
.doc-upload input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: var(--space-3);
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.doc-upload .btn-primary { width: 100%; }

@media (min-width: 600px) {
  .facts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-contact { display: flex; flex-wrap: wrap; }
  .profile-action { flex-direction: row; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); font-size: 0.9375rem; }
  .profile-action-detail { display: inline; }
  .profile-tabs { padding-right: 0; -webkit-mask-image: none; mask-image: none; }
  .profile-tabs a { padding: 0 var(--space-4); }
  .profile-tabs a:first-child { padding-left: var(--space-1); }
  .doc-download { width: auto; padding: 0 var(--space-4); }
  .doc-download-text { display: inline; }
  .lease-terms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .profile-hero {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "avatar identity edit" "avatar contact contact";
    gap: var(--space-4) var(--space-5);
    padding: var(--space-5) var(--space-6) var(--space-5) var(--space-5);
  }
  .profile-avatar { width: 80px; height: 80px; font-size: 1.75rem; }
  .profile-identity h1 { font-size: 2rem; }
  .profile-contact { margin-top: 0; }
  .facts-cell { padding: var(--space-4) var(--space-5); }
  .facts-figure { font-size: 1.5rem; }
  /* Two balanced columns of cards sized to their content; the notes run across both. */
  .profile-sections { display: block; columns: 2; column-gap: var(--space-5); }
  .profile-section { padding: var(--space-5); margin-bottom: var(--space-5); break-inside: avoid; }
  .profile-section-wide { column-span: all; margin: var(--space-5) 0 0; }
  .profile-fields > div { grid-template-columns: minmax(120px, 36%) minmax(0, 1fr); gap: var(--space-4); }
  .lease-list { gap: var(--space-5); }
  .lease-card { padding: var(--space-5) var(--space-6); }
  .lease-head { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title badge action"; align-items: center; gap: var(--space-4); }
  .lease-head .badge { margin-top: 0; }
  .lease-action { width: auto; }
  .lease-terms { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .history { --history-cols: 140px 140px 160px minmax(0, 1fr); }
  .history-cols {
    display: grid;
    grid-template-columns: var(--history-cols);
    gap: var(--space-4);
    padding: 0 0 var(--space-2) var(--space-5);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .history-cols .num { text-align: right; }
  .history-row { grid-template-columns: var(--history-cols); grid-template-areas: "date rent sc mark"; align-items: center; gap: var(--space-4); min-height: 48px; padding-left: var(--space-5); }
  .history-rent, .history-sc { text-align: right; font-size: var(--text-base); }
  .history-key { display: none; }
  .history-mark { justify-self: start; }
  .history-row::after { top: 50%; margin-top: -4px; }
  .history-row:first-child::before { top: 50%; }
  .history-row:last-child::before { bottom: 50%; }
  .doc-panel, .doc-upload { padding: var(--space-5); }
  .doc-upload-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
  .doc-upload .btn-primary { width: auto; }
}
@media (min-width: 1200px) {
  .doc-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); }
  .doc-upload-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
   Forms: money inputs, required marks, the error summary (shared)
   ====================================================================== */
.req { margin-left: 2px; color: var(--oxblood); font-weight: 700; }
.opt { color: var(--muted); font-weight: 400; }
/* Money: a "KES" prefix inside the field; figures in tabular numerals. */
.money-input { position: relative; display: block; }
.money-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  pointer-events: none;
}
.field .money-input input { padding-left: 50px; font-variant-numeric: tabular-nums; font-weight: 500; }

.form-errors {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid rgb(161 42 28 / 30%);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-tint);
}
.form-errors-title { margin: 0 0 var(--space-2); color: var(--danger); font-weight: 700; }
.form-errors ul { margin: 0; padding-left: 1.1em; color: var(--ink); font-size: var(--text-sm); }
.form-errors li + li { margin-top: var(--space-1); }
.form-errors a { color: var(--danger); font-weight: 600; }

/* ======================================================================
   New tenant: three steps, unit tiles, the move-in summary
   ====================================================================== */
.ob { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.ob-steps { display: grid; gap: var(--space-5); min-width: 0; }
.ob-step {
  min-width: 0;
  padding: var(--space-5) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  scroll-margin-top: var(--space-4);
}
.ob-step-head { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.ob-step-head h2 { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-1); font-size: var(--text-lg); letter-spacing: -0.01em; }
.ob-step-head p { margin: 0; padding-left: 40px; color: var(--muted); font-size: var(--text-sm); }
.ob-step-num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--charcoal);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.ob-step > * + * { margin-top: var(--space-5); }
.ob-step > .ob-step-head + * { margin-top: 0; }

/* Unit tiles: real radio inputs inside labels, grouped by floor as on the Units page. */
.ob-units { margin: 0; padding: 0; border: 0; min-width: 0; }
.ob-label { display: block; margin-bottom: var(--space-3); padding: 0; font-size: var(--text-sm); font-weight: 600; }
.ob-property + .ob-property { margin-top: var(--space-5); }
.ob-property-name { margin: 0 0 var(--space-3); font-weight: 650; }
.ob-floor + .ob-floor { margin-top: var(--space-4); }
.ob-floor-name { margin: 0 0 var(--space-2); color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.ob-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr)); gap: var(--space-2); }
.ob-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.ob-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ob-tile:hover { border-color: #b9ae9f; box-shadow: 0 4px 12px -8px rgb(26 26 26 / 30%); }
.ob-tile-number { font-weight: 700; font-size: var(--text-base); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.ob-tile-type { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: var(--text-xs); line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ob-tile-rent { margin-top: auto; padding-top: var(--space-1); font-size: 0.8125rem; font-weight: 600; }
/* Chosen: oxblood edge, tinted ground and a tick, so the choice never rests on colour alone. */
.ob-tile:has(input:checked) { border-color: var(--oxblood); background: var(--oxblood-tint); box-shadow: inset 0 0 0 1px var(--oxblood); }
.ob-tile:has(input:checked)::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--oxblood) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.ob-tile:has(input:focus-visible) { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.ob-units-error .ob-tile { border-color: rgb(161 42 28 / 55%); }

/* Move-in date with its quick choices. */
.ob-date-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ob-date-row > input { flex: 1 1 180px; width: auto; min-width: 0; }
.ob-quick { display: flex; gap: var(--space-2); flex: 1 1 220px; }
.ob-quick[hidden] { display: none; }
.ob-quick-btn {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease);
}
.ob-quick-btn:hover { background: var(--paper-2); border-color: #b9ae9f; }
.ob-quick-btn:active { border-color: var(--oxblood); }

/* Tenant groups: a quiet label, then the fields; two columns where there is room. */
.ob-group + .ob-group { padding-top: var(--space-5); border-top: 1px solid var(--line); }
.ob-group-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.ob-optional { padding: 1px 8px; border-radius: 999px; background: var(--paper-2); color: var(--muted); font-size: 0.6875rem; letter-spacing: 0.02em; text-transform: none; font-weight: 600; }
.ob-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-4); }
.ob-prorata strong { color: var(--ink); font-weight: 650; }

/* The move-in summary: on a phone, a card above the submit button. */
.ob-summary {
  min-width: 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background:
    linear-gradient(90deg, var(--brand-star-deep), var(--brand-star)) top / 100% 3px no-repeat,
    var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  font-size: var(--text-sm);
}
.ob-summary[hidden] { display: none; }
.ob-summary-title { margin: 0 0 var(--space-3); color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.ob-summary dl { margin: 0; }
.ob-summary dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 6px 0; }
.ob-summary dt { color: var(--muted); }
.ob-summary dd { margin: 0; text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ob-summary .ob-summary-what { padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.ob-summary-what dd { color: var(--ink); }
.ob-total { margin: var(--space-3) 0; padding: var(--space-4) 0; border-top: 2px solid var(--charcoal); border-bottom: 1px solid var(--line); }
.ob-total-label { margin: 0 0 var(--space-1); color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.ob-total-figure { margin: 0; color: var(--ink); font: 650 2rem/1.1 var(--font-display); letter-spacing: -0.025em; }
.ob-summary-terms dd { font-weight: 500; }
.ob-summary-note { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }

.ob-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ob-actions .btn-primary { flex: 1 1 220px; min-height: 52px; font-size: var(--text-base); }
.ob-actions .btn-quiet { flex: 0 1 auto; min-height: 52px; }

@media (min-width: 700px) {
  .ob-step { padding: var(--space-6); }
  .ob-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
  .field-wide { grid-column: 1 / -1; }
  .ob-tiles { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .ob-floor { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: var(--space-4); }
  .ob-floor + .ob-floor { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); }
  .ob-floor-name { margin: 0; padding-top: 12px; }
  .ob-actions .btn-primary { flex: 0 0 auto; }
}
@media (min-width: 1100px) {
  .ob {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas: "steps summary" "actions summary";
    column-gap: var(--space-6);
    align-items: start;
  }
  .ob > .ob-steps { grid-area: steps; }
  .ob > .ob-actions { grid-area: actions; }
  .ob-summary { grid-area: summary; position: sticky; top: var(--space-6); padding: var(--space-5); }
}

/* ======================================================================
   Tenants list: search, people as cards (phone) and aligned rows (desktop)
   ====================================================================== */
.search { position: relative; margin: 0 0 var(--space-5); }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px 10px 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-base);
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.search-input::placeholder { color: var(--placeholder); }
.search-input:hover { border-color: #b9ae9f; }
.search-input:focus { outline: none; border-color: var(--oxblood); box-shadow: var(--ring); }
.results-note { margin: calc(var(--space-2) * -1) 0 var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.results-note a { font-weight: 600; }

.people-cols { display: none; }
.people {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
/* Phone: avatar left; name and status on line 1, units and rent on line 2, phone on line 3. */
.person {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "avatar name status" "avatar units rent" "avatar phone phone";
  align-items: center;
  gap: 4px var(--space-3);
  padding: var(--space-3) var(--space-4);
  transition: background-color 120ms var(--ease);
}
.person + .person { border-top: 1px solid var(--line); }
.person:hover, .person:focus-within { background: #fcfaf7; }
.person-avatar {
  grid-area: avatar;
  align-self: start;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink);
  font: 650 0.875rem/1 var(--font-display);
  letter-spacing: 0.04em;
}
.person[data-status="former"] .person-avatar { background: var(--surface); border: 1px dashed var(--line-strong); color: var(--muted); }
.person-name { grid-area: name; min-width: 0; overflow: hidden; color: var(--ink); font-weight: 650; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
/* The name link covers the whole row, so the row is one tap target. */
.person-name::after { content: ""; position: absolute; inset: 0; }
.person-name:hover { color: var(--ink); text-decoration: none; }
.person-name:focus-visible { outline: none; }
.person-name:focus-visible::after { outline: 2px solid var(--oxblood); outline-offset: -3px; }
.person-units { grid-area: units; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.person-units .unit-pill { min-width: 48px; height: 24px; }
.person-none { color: var(--muted); font-size: var(--text-sm); }
.person-phone { grid-area: phone; color: var(--muted); font-size: var(--text-sm); }
.person-rent { grid-area: rent; justify-self: end; font-size: var(--text-sm); font-weight: 600; }
.person-status { grid-area: status; justify-self: end; }

@media (min-width: 900px) {
  #tenant-results { --people-cols: minmax(0, 2fr) minmax(0, 1fr) 150px 130px 130px; }
  .people-cols {
    display: grid;
    grid-template-columns: 40px var(--people-cols);
    column-gap: var(--space-4);
    margin-bottom: var(--space-3);
    padding: 0 var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .people-cols span:first-child { grid-column: 1 / 3; }
  .people-cols .num { text-align: right; }
  .person {
    grid-template-columns: 40px var(--people-cols);
    grid-template-areas: "avatar name units phone rent status";
    column-gap: var(--space-4);
    min-height: 68px;
    padding: var(--space-3) var(--space-5);
  }
  .person-avatar { align-self: center; }
  .person-phone { color: var(--ink); font-size: var(--text-base); }
  .person-rent { font-size: var(--text-base); }
  .person-status { justify-self: start; }
}

/* ======================================================================
   Unit detail: hero, key facts (reuses .facts), lease history
   ====================================================================== */
.unit-hero { grid-template-areas: "avatar actions" "identity identity"; }
.unit-mark {
  grid-area: avatar;
  align-self: start;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  color: var(--ink);
}
.unit-hero-meta { margin: 0 0 var(--space-3); color: var(--muted); }
.unit-hero-actions { grid-area: actions; align-self: start; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.unit-hero-actions .btn { padding: 0 var(--space-4); }
.unit-hero-actions svg { color: var(--muted); }
.facts-figure-name { font-size: var(--text-lg); overflow-wrap: anywhere; }
.facts-figure-name a { color: var(--ink); text-decoration-color: var(--oxblood-line); }
.facts-figure-name a:hover { color: var(--oxblood); }
.facts-figure-word { font-size: var(--text-lg); }
.profile-status-void { color: var(--danger); background: var(--danger-tint); }

.unit-history { padding: var(--space-4); }
.unit-history .doc-panel-head h2 { margin: 0; font-size: var(--text-lg); letter-spacing: -0.01em; }
.tenancies { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.tenancy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main status" "main rent";
  align-items: center;
  gap: 4px var(--space-3);
  padding: var(--space-3) 0;
}
.tenancy + .tenancy { border-top: 1px solid var(--line); }
.tenancy-main { grid-area: main; min-width: 0; }
.tenancy-name { font-weight: 650; color: var(--ink); text-decoration: none; }
.tenancy-name:hover { color: var(--oxblood); text-decoration: underline; }
.tenancy-dates { margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); }
.tenancy-rent { grid-area: rent; justify-self: end; font-size: var(--text-sm); font-weight: 600; }
.tenancy-rent-unit { color: var(--muted); font-weight: 400; }
.tenancy-status { grid-area: status; justify-self: end; }
.tenancy-ended .tenancy-name { color: var(--muted); }
.tenancy-void .tenancy-name, .tenancy-void .tenancy-dates { color: var(--muted); text-decoration: line-through; text-decoration-color: rgb(107 100 93 / 50%); }

@media (min-width: 900px) {
  .unit-hero { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "avatar identity actions"; }
  .unit-mark { width: 80px; height: 80px; }
  .unit-mark svg { width: 34px; height: 34px; }
  .unit-hero .profile-identity h1 { font-size: 2rem; }
  .unit-history { padding: var(--space-5); }
  .tenancy { grid-template-columns: minmax(0, 1fr) 180px 150px; grid-template-areas: "main rent status"; min-height: 64px; }
  .tenancy-rent { font-size: var(--text-base); }
  .tenancy-status { justify-self: start; }
}
.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  cursor: pointer;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='%236b645d' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
/* Empty states: the title reads in ink (the paragraph rule above made it muted). */
.empty-state .empty-state-title { color: var(--ink); }

/* ======================================================================
   Form pages (edit tenant, unit, renewal, invite): the New Tenant page's
   panels, groups and field styling, plus choice cards and checkboxes
   ====================================================================== */
.form-page { display: grid; gap: var(--space-5); max-width: 820px; }
.form-page > .ob-step > * + * { margin-top: var(--space-5); }
.ob-step-head-plain p { padding-left: 0; }
.ob-step-head-plain h2 { font-size: var(--text-lg); }
.unit-pill-inline { display: inline-grid; height: 24px; min-width: 48px; margin-right: 6px; color: var(--ink); vertical-align: 1px; }

/* Choice cards: real radio inputs; the whole card is the target. */
.choice-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice-set > legend { display: block; width: 100%; float: left; padding: 0 0 var(--space-4); }
.choice-set > legend + * { clear: both; }
.choice-legend { display: block; margin: 0 0 var(--space-1); color: var(--ink); font: 700 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.01em; }
.choice-legend-note { display: block; color: var(--muted); font-size: var(--text-sm); font-weight: 400; }
.choices { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.choice {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-areas: "dot title" "dot text";
  column-gap: var(--space-3);
  row-gap: 2px;
  padding: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  align-content: start;
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.choice input { grid-area: dot; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--oxblood); cursor: pointer; }
.choice-title { grid-area: title; font-weight: 650; }
.choice-text { grid-area: text; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
.choice:hover { border-color: #b9ae9f; }
.choice:has(input:checked) { border-color: var(--oxblood); background: var(--oxblood-tint); box-shadow: inset 0 0 0 1px var(--oxblood); }
.choice:has(input:checked) .choice-text { color: var(--ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.choice input:focus-visible { outline: none; } /* the card carries the focus ring */
.choice-error .choice { border-color: rgb(161 42 28 / 55%); }
.choice-set > .error { margin-top: var(--space-3); }

/* Checkboxes: box left, label and hint right, a 44 px row. */
.check-list { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--space-3); align-items: start; min-height: 44px; padding: var(--space-2) 0; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--oxblood); cursor: pointer; }
.check label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.check-label { font-weight: 600; }
.check-hint { color: var(--muted); font-size: var(--text-sm); }
.check .error { grid-column: 2; }

@media (min-width: 700px) {
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Selects get the same quiet chevron everywhere; disabled fields read as fixed. */
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%236b645d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 20px no-repeat;
}
.field input:disabled, .field select:disabled, .field textarea:disabled { background-color: var(--paper-2); color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.form-facts { max-width: 820px; }

/* ======================================================================
   Team: members as a refined list
   ====================================================================== */
.btn-small { min-height: 44px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.team-cols { display: none; }
.member {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "avatar who who" "avatar role status" "avatar action action";
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
}
.member + .member { border-top: 1px solid var(--line); }
.member .person-avatar { grid-area: avatar; align-self: start; }
.member-who { grid-area: who; min-width: 0; }
.member-who p { margin: 0; }
.member-name { font-weight: 650; overflow-wrap: anywhere; }
.member-you { margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--paper-2); color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.member-email { color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.member-role { grid-area: role; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); }
.member-landlord { color: var(--muted); font-size: 0.8125rem; }
.member-status { grid-area: status; justify-self: end; }
.member-action { grid-area: action; }
.member-action:empty { display: none; }
.member-action .btn { width: 100%; }
.member-off .member-name, .member-off .member-email { color: var(--muted); }
.member-off .person-avatar { background: var(--surface); border: 1px dashed var(--line-strong); color: var(--muted); }
.role-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.02em;
}
.role-pill-admin { border-color: var(--charcoal); background: var(--charcoal); color: #fff; }

@media (min-width: 900px) {
  .team-cols, .member { --team-cols: 40px minmax(0, 2fr) minmax(0, 1.4fr) 150px 160px; }
  .team-cols {
    display: grid;
    grid-template-columns: var(--team-cols);
    column-gap: var(--space-4);
    margin-bottom: var(--space-3);
    padding: 0 var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .team-cols span:first-child { grid-column: 1 / 3; }
  .member {
    grid-template-columns: var(--team-cols);
    grid-template-areas: "avatar who role status action";
    column-gap: var(--space-4);
    min-height: 72px;
    padding: var(--space-3) var(--space-5);
  }
  .member .person-avatar { align-self: center; }
  .member-status { justify-self: start; align-self: center; }
  .member-action { display: flex; justify-content: flex-end; }
  .member-action:empty { display: block; }
  .member-action .btn { width: auto; }
}

/* ======================================================================
   Activity: a timeline grouped by day; each change as "old → new"
   ====================================================================== */
.activity-day + .activity-day { margin-top: var(--space-6); }
.activity-date { margin: 0 0 var(--space-3); color: var(--ink); font-size: var(--text-sm); font-weight: 650; letter-spacing: 0; }
.activity-date .muted { font-weight: 400; }
.activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}
.event { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
.event + .event { border-top: 1px solid var(--line); }
.event-avatar { grid-area: auto; align-self: start; width: 36px; height: 36px; font-size: 0.8125rem; }
.event-main { min-width: 0; }
.event-main p { margin: 0; }
.event-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); }
.event-title { font-weight: 650; }
.event-record { color: var(--ink); font-size: var(--text-sm); overflow-wrap: anywhere; }
.event-main .event-meta { margin-top: 2px; color: var(--muted); font-size: 0.8125rem; }
.event-changes {
  display: grid;
  gap: 6px;
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: var(--text-sm);
}
.event-changes > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.event-changes dt { color: var(--muted); font-size: 0.8125rem; }
.event-changes dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.event-old { color: var(--muted); }
.event-arrow { color: var(--muted); padding: 0 2px; }
.event-new { color: var(--ink); font-weight: 600; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.pager > :last-child { justify-self: end; }
.pager-where { color: var(--muted); font-size: var(--text-sm); }

@media (min-width: 700px) {
  .event-changes > div { grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
}
@media (min-width: 900px) {
  .event { padding: var(--space-4) var(--space-5); }
  .event-avatar { width: 40px; height: 40px; }
}

/* ======================================================================
   Signed-out cards, state pages, error pages, flash messages
   ====================================================================== */
.auth-card h1 + p { margin-bottom: 0; font-size: 0.9375rem; }
.auth-card .field label { font-size: var(--text-sm); }
.auth-card .btn-primary { min-height: 48px; }
.auth-card-state { text-align: center; }
.auth-card-state h1 + p { margin-bottom: var(--space-5); }
.auth-card-state .btn { min-width: 200px; }
.auth-card-state form { margin-top: 0; }
.auth-card .auth-foot { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--text-sm); }
.auth-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--oxblood-tint);
  color: var(--oxblood);
}
.password-input { position: relative; display: block; }
.field .password-input input { padding-right: 76px; }
.password-toggle {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  min-width: 64px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: transparent;
  color: var(--oxblood);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.password-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.password-toggle:focus-visible { outline-offset: -3px; }

.error-state { max-width: 560px; margin: var(--space-6) auto 0; padding: var(--space-6) var(--space-5); text-align: center; }
.error-state h1 { margin-bottom: var(--space-2); }
.error-state p { color: var(--muted); }
.error-state .btn { margin-top: var(--space-3); }
.error-code { margin: 0 0 var(--space-2); color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.auth-card .error-code + h1 { margin-top: 0; }

.flashes { margin-bottom: var(--space-5); }
.flashes .alert:last-child { margin-bottom: 0; }
.alert-icon { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 500; }
.alert-icon svg { flex: none; margin-top: 1px; }
.alert-info { border-color: var(--line-strong); border-left-color: var(--charcoal); background: var(--surface); color: var(--ink); }

/* Placeholders at 5:1 (the earlier #8a8279 was 3.8:1 on white). */
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.hint-list { margin: 6px 0 0; padding-left: 1.1em; }
.hint-list li + li { margin-top: 2px; }

/* ---------- New tenant: service charge start and months already invoiced (Task 9) ---------- */
.ob-note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--charcoal);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.ob-summary-sub { display: block; color: var(--muted); font-size: var(--text-xs); font-weight: 500; }

/* ======================================================================
   Payments (Task 11): record payment, its preview, the receipt page, the list
   ====================================================================== */
/* Team is an occasional Admin task: sidebar only, so the phone tab bar keeps five items. */
@media (max-width: 899.98px) {
  .nav li.nav-sidebar-only { display: none; }
}

/* Home: the day's main action sits just above the figures. */
.home-actions { display: flex; justify-content: flex-end; margin: calc(var(--space-2) * -1) 0 var(--space-4); }
.home-actions .btn { width: 100%; min-height: 48px; }
.btn svg { flex: none; }

/* Tenant profile: Record payment gets its own row on a phone, beside Edit on a desktop. */
.profile-hero:has(> .profile-pay) { grid-template-areas: "avatar edit" "identity identity" "pay pay" "contact contact"; }
.profile-pay { grid-area: pay; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.profile-pay .btn { flex: 1 1 auto; min-height: 48px; }
.profile-pay-unit { font-weight: 500; opacity: 0.85; }

/* The form: one card with the fields, the preview card beneath it, then the button. */
.pay { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); max-width: 1040px; }
.pay-main { min-width: 0; }
.pay-card > * + * { margin-top: var(--space-5); }
.pay-card > .sr-only + * { margin-top: 0; }

.pay-who {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "label label label" "pill name change";
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--oxblood);
  border-radius: var(--radius);
  background: var(--paper);
}
.pay-who-label { grid-area: label; color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.pay-who .unit-pill { grid-area: pill; background: var(--surface); }
.pay-who-name { grid-area: name; min-width: 0; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.pay-who-place { display: block; color: var(--muted); font-size: var(--text-sm); font-weight: 400; }
.pay-who-change { grid-area: change; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-1); font-weight: 600; font-size: var(--text-sm); }

.pay-picker { padding: 0; border: 0; min-width: 0; }
.pay-search { margin: 0 0 var(--space-3); }
.pay-leases { display: grid; gap: var(--space-2); }
.pay-lease {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "pill name" "pill place";
  align-items: center;
  column-gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease);
}
.pay-lease input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pay-lease .unit-pill { grid-area: pill; }
.pay-lease-name { grid-area: name; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 650; }
.pay-lease-place { grid-area: place; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 0.8125rem; }
.pay-lease:hover { border-color: #b9ae9f; }
/* Chosen: oxblood edge, tinted ground and a tick, never colour alone. */
.pay-lease:has(input:checked) { border-color: var(--oxblood); background: var(--oxblood-tint); box-shadow: inset 0 0 0 1px var(--oxblood); padding-right: 44px; }
.pay-lease:has(input:checked)::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 13px;
  margin-top: -9px;
  border: solid var(--oxblood);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.pay-lease:has(input:focus-visible) { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.pay-picker-error .pay-lease { border-color: rgb(161 42 28 / 55%); }
.pay-leases-more, .pay-leases-empty { margin: var(--space-1) 0 0; }

/* The amount: the figure the whole form is about, set large. */
.pay-amount .money-input input { min-height: 56px; font-size: 1.375rem; font-weight: 650; letter-spacing: -0.01em; padding-left: 58px; }
.pay-amount .money-prefix { left: 16px; font-size: var(--text-sm); }

/* Paid by: a three-way segmented choice. */
.pay-method { padding: 0; border: 0; min-width: 0; }
.pay-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); }
.pay-method-option { position: relative; display: grid; place-items: center; min-height: 46px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; font-size: 0.9375rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pay-method-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pay-method-option:hover { background: var(--paper-2); }
.pay-method-option:has(input:checked) { background: var(--charcoal); color: #fff; box-shadow: 0 1px 2px rgb(26 26 26 / 20%); }
.pay-method-option:has(input:checked) span::before { content: "✓ "; font-weight: 700; }
.pay-method-option:has(input:focus-visible) { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.pay-method.choice-error .pay-methods { border-color: var(--danger); }
.pay-reference input { text-transform: uppercase; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.pay-reference input::placeholder { text-transform: none; letter-spacing: 0; }
.pay-reference[hidden], .pay-cash-note[hidden] { display: none; }
.pay-cash-note { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-left: 3px solid var(--charcoal); border-radius: var(--radius-sm); background: var(--paper-2); font-size: var(--text-sm); }

/* The preview card, and the allocation lines it shares with the receipt. */
.pay-preview { min-width: 0; }
.pay-preview-card {
  padding: var(--space-5) var(--space-4) var(--space-4);
  background:
    linear-gradient(90deg, var(--brand-star-deep), var(--brand-star)) top / 100% 3px no-repeat,
    var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}
.pay-preview-title { margin: 0 0 var(--space-3); color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.pay-preview-empty { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.pay-preview-error { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid rgb(161 42 28 / 30%); border-left: 3px solid var(--danger); border-radius: var(--radius-sm); background: var(--danger-tint); color: var(--danger); font-size: var(--text-sm); font-weight: 500; }
.pay-preview-error svg { flex: none; margin-top: 1px; }
.pay-preview-note { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.pay-lines { margin: 0; padding: 0; list-style: none; }
.pay-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label amount" "mark amount";
  align-items: center;
  column-gap: var(--space-3);
  padding: 10px 0;
  font-size: 0.9375rem;
}
.pay-line + .pay-line { border-top: 1px solid var(--line); }
.pay-line-label { grid-area: label; min-width: 0; }
.pay-line .mark { grid-area: mark; justify-self: start; margin-top: 4px; }
.pay-line-amount { grid-area: amount; font-weight: 600; text-align: right; }
.mark-ahead { border: 1px solid var(--charcoal); color: var(--ink); background: var(--paper); }
.mark-ahead::before { content: "→"; margin-right: 4px; font-weight: 700; }
.mark-plain { min-height: 20px; border: 1px solid var(--line-strong); color: var(--ink); font-weight: 600; }
.pay-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-top: var(--space-1); padding-top: var(--space-3); border-top: 2px solid var(--charcoal); font-weight: 700; }
.pay-total .num { font: 650 1.375rem/1.2 var(--font-display); letter-spacing: -0.015em; }

.pay-actions .btn-primary { min-height: 52px; }

@media (min-width: 700px) {
  .pay-card { padding: var(--space-6); }
  .pay-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-leases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-actions .btn { width: auto; }
}
@media (min-width: 900px) {
  .home-actions { margin-top: 0; }
  .profile-hero:has(> .profile-pay) {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "avatar identity pay edit" "avatar contact contact contact";
  }
  .profile-pay { align-self: start; }
  .profile-pay .btn { flex: none; min-height: 44px; }
}
@media (min-width: 1100px) {
  .pay {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "main preview" "actions preview";
    column-gap: var(--space-6);
    align-items: start;
  }
  .pay > .pay-main { grid-area: main; }
  .pay > .pay-preview { grid-area: preview; position: sticky; top: var(--space-6); }
  .pay > .pay-actions { grid-area: actions; }
  .pay-preview-card { padding: var(--space-5); }
}

/* The receipt page. */
.rcpt-head h1 { letter-spacing: 0.01em; }
.rcpt-eyebrow { margin: 0 0 var(--space-1); color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.rcpt-tenant { position: relative; color: var(--ink); font-weight: 600; text-decoration-color: var(--oxblood-line); }
/* A 44 px tall hit area around the name. */
.rcpt-tenant::after { content: ""; position: absolute; inset: -13px -4px; }
.rcpt-pdf { width: 100%; }
.rcpt-layout { display: grid; gap: var(--space-5); align-items: start; }
.rcpt { padding: var(--space-5) var(--space-4); }
.rcpt-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.rcpt-label { margin: 0 0 var(--space-1); color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.rcpt-figure { margin: 0; color: var(--ink); font: 650 2.25rem/1.1 var(--font-display); letter-spacing: -0.025em; }
.rcpt-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.rcpt-state-text { color: var(--muted); }
.rcpt-state-text a { font-weight: 600; }
.rcpt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 var(--space-5); }
.rcpt-facts dt { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.rcpt-facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.rcpt-facts-wide { grid-column: 1 / -1; }
.rcpt-facts-wide dd { font-weight: 400; }
.rcpt-code { letter-spacing: 0.04em; }
.rcpt-when { display: block; color: var(--muted); font-size: var(--text-xs); font-weight: 400; }
.rcpt-lines-title { margin: 0 0 var(--space-1); color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.rcpt-owed { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--paper-2); font-size: var(--text-sm); }
.rcpt-owed strong { font-size: var(--text-base); }
.rcpt-side { display: grid; gap: var(--space-4); }
.rcpt-email, .rcpt-reverse { padding: var(--space-4); }
.rcpt-email h2, .rcpt-reverse h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); letter-spacing: -0.01em; }
.rcpt-email-state { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.rcpt-email-state svg { flex: none; margin-top: 1px; }
.rcpt-email-state strong { display: block; font-size: var(--text-base); }
.rcpt-email-detail { display: block; color: var(--muted); overflow-wrap: anywhere; }
.rcpt-email-sent svg { color: var(--ok); }
.rcpt-email-failed, .rcpt-email-failed svg { color: var(--danger); }
.rcpt-email-no_address svg, .rcpt-email-not_configured svg { color: var(--warn); }
.rcpt-email .hint { margin: 0 0 var(--space-3); }
.rcpt-email .btn, .rcpt-reverse .btn, .rcpt-next { width: 100%; }
.rcpt-reverse p { color: var(--muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }

.rcpt-confirm { max-width: 640px; padding: var(--space-5) var(--space-4); border-left: 3px solid var(--oxblood); }
.rcpt-confirm-q { margin: 0 0 var(--space-4); font-size: var(--text-lg); line-height: 1.35; }
.rcpt-confirm-reason { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--paper-2); }
.rcpt-confirm-reason dt { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.rcpt-confirm-reason dd { margin: 2px 0 0; font-weight: 500; }
.rcpt-confirm > p { font-size: var(--text-sm); }
.rcpt-confirm .ob-actions { margin-top: var(--space-5); }

@media (min-width: 600px) {
  .rcpt-pdf { width: auto; }
  .rcpt-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .rcpt { padding: var(--space-6); }
  .rcpt-figure { font-size: 2.75rem; }
  .rcpt-email, .rcpt-reverse { padding: var(--space-5); }
  .rcpt-confirm { padding: var(--space-6); }
}
@media (min-width: 1100px) {
  .rcpt-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); }
  .rcpt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .rcpt-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The list of this period's payments. */
.paylist-facts { max-width: none; }
.paylist-facts .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.paylist-cols { display: none; }
.paylist {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.paylist-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "who amount" "number date" "meta meta";
  align-items: center;
  gap: 2px var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.paylist-row + .paylist-row { border-top: 1px solid var(--line); }
.paylist-row:hover, .paylist-row:focus-within { background: #fcfaf7; }
.paylist-number { grid-area: number; color: var(--muted); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
/* The receipt link covers the whole row: one tap target. */
.paylist-number::after { content: ""; position: absolute; inset: 0; }
.paylist-number:focus-visible { outline: none; }
.paylist-number:focus-visible::after { outline: 2px solid var(--oxblood); outline-offset: -3px; }
.paylist-who { grid-area: who; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.paylist-who .unit-pill { flex: none; min-width: 48px; height: 24px; }
.paylist-name { min-width: 0; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.paylist-meta { grid-area: meta; min-width: 0; color: var(--muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.paylist-date { grid-area: date; justify-self: end; color: var(--muted); font-size: var(--text-sm); }
.paylist-amount { grid-area: amount; justify-self: end; font-weight: 650; }
.paylist-row.is-reversed .paylist-amount { color: var(--muted); text-decoration: line-through; text-decoration-color: rgb(107 100 93 / 60%); }
.paylist-row.is-reversal .paylist-amount { color: var(--muted); }

@media (min-width: 900px) {
  .paylist-cols, .paylist-row { --paylist-cols: 120px minmax(0, 1.4fr) minmax(0, 1fr) 80px 130px; }
  .paylist-cols {
    display: grid;
    grid-template-columns: var(--paylist-cols);
    column-gap: var(--space-4);
    margin-bottom: var(--space-3);
    padding: 0 var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .paylist-cols span:nth-child(2) { grid-column: 2 / 4; }
  .paylist-cols .num { grid-column: 5; text-align: right; }
  .paylist-row {
    grid-template-columns: var(--paylist-cols);
    grid-template-areas: "number who meta date amount";
    column-gap: var(--space-4);
    min-height: 60px;
    padding: var(--space-3) var(--space-5);
  }
  .paylist-number { color: var(--ink); font-size: var(--text-base); }
  .paylist-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .paylist-date { justify-self: start; color: var(--ink); }
}

/* ======================================================================
   Invoices (Task 12): the readings sheet, the review, issuing, delivery
   ====================================================================== */
.home-actions { gap: var(--space-2); }

.iv-crumb { margin: -10px 0 0; color: var(--muted); font-size: var(--text-sm); }
.iv-crumb a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.rd-step-head { margin: 0 0 var(--space-3); }
.rd-step-head h2, .rv-issue-title { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--text-lg); letter-spacing: -0.01em; }
.rd-step-head p { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.rd-step-num { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--charcoal); color: #fff; font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }

/* The summary stays in view at the top while the agent works down the building. */
.rd-summary {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 calc(var(--space-2) * -1) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--oxblood);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}
.rd-summary.is-ready { border-left-color: var(--ok); }
.rd-summary-main { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-2); }
.rd-summary-main strong { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-base); }
.rd-summary.is-ready .rd-summary-main strong { color: var(--ok); }
.rd-summary-main strong svg { align-self: center; }
.rd-summary-count { color: var(--muted); font-size: var(--text-sm); }
.rd-summary.is-ready .meter > span { background: var(--ok); }
.rd-summary-warn { margin: var(--space-2) 0 0; color: var(--warn); font-size: var(--text-sm); font-weight: 600; }
.rd-summary-warn::before { content: "! "; font-weight: 800; }

.rd-cols { display: none; }
.rd-floor + .rd-floor { margin-top: var(--space-5); }
.rd-floor-name { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-2); padding: 0 var(--space-1); color: var(--ink); font: 700 var(--text-sm)/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.rd-floor-count { color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.rd-rows { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }

.rd-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "unit who who" "label label state" "input input input" "foot foot foot";
  align-items: start;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}
.rd-row + .rd-row { border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
.rd-row:has(+ .rd-row) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rd-row.rd-row-error { box-shadow: inset 3px 0 0 var(--danger); }
.rd-unit { grid-area: unit; margin-top: 1px; }
.rd-who { grid-area: who; display: flex; flex-direction: column; min-width: 0; margin: 0; line-height: 1.3; }
.rd-tenant { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 650; }
.rd-last { color: var(--muted); font-size: 0.8125rem; }
.rd-state { grid-area: state; display: inline-flex; align-items: center; gap: 5px; margin: 0; min-height: 28px; padding: 0 10px 0 7px; border-radius: 999px; font-size: 0.8125rem; font-weight: 650; white-space: nowrap; }
.rd-state svg { flex: none; }
.rd-state-saved { color: var(--ok); background: var(--ok-tint); }
.rd-state-error { color: var(--danger); background: var(--danger-tint); }
.rd-state-adjust { color: var(--warn); background: var(--warn-tint); }
.rd-state-unread { color: var(--muted); background: var(--paper-2); }

.rd-input { grid-area: input; min-width: 0; }
.rd-label { grid-area: label; align-self: end; color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.rd-row .rd-state { margin-top: var(--space-1); }
.field.rd-input input { min-height: 56px; padding: 8px 16px; font-size: 1.5rem; font-weight: 650; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.rd-input .error { font-size: var(--text-sm); }

.rd-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-3); min-width: 0; }
.rd-result { margin: 0; min-width: 0; font-size: 0.9375rem; }
.rd-result strong { font-weight: 650; }
.rd-result-none { color: var(--muted); font-size: var(--text-sm); }
.rd-result-adjusted { display: inline-flex; align-items: center; min-height: 22px; margin-right: 4px; padding: 0 8px; border: 1px solid var(--charcoal); border-radius: 999px; font-size: var(--text-xs); font-weight: 650; }
.rd-result-why { display: block; color: var(--muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.rd-adjust { min-width: 0; }
.rd-adjust > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--space-1);
  color: var(--oxblood);
  font-size: var(--text-sm);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rd-adjust > summary::-webkit-details-marker { display: none; }
.rd-adjust > summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); transition: transform 160ms var(--ease); }
.rd-adjust[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.rd-adjust > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.rd-adjust[open] { flex-basis: 100%; }
.rd-adjust-body { display: grid; gap: var(--space-3); margin-top: var(--space-1); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.rd-adjust-note { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.rd-adjust-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rd-row.is-fresh { animation: rd-saved 1.6s var(--ease); }
@keyframes rd-saved { from { background: var(--ok-tint); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .rd-row.is-fresh { animation: none; } }

/* The review: one line per tenant; the four figures beneath the name on a phone. */
.rv { margin-top: var(--space-6); }
.rv .rd-step-head { margin-bottom: var(--space-3); }
.rv-cols { display: none; }
.rv-list { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-panel); }
.rv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "who due" "figs figs";
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.rv-list .rv-row + .rv-row { border-top: 1px solid var(--line); }
.rv-who { grid-area: who; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.rv-who .unit-pill { flex: none; min-width: 48px; height: 24px; }
.rv-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 650; }
.rv-figs { grid-area: figs; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2px var(--space-4); }
.rv-fig { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); }
.rv-k { color: var(--muted); }
.rv-pending { color: var(--muted); font-style: italic; }
.rv-due { grid-area: due; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rv-due .rv-k { display: none; }
.rv-list .rv-due { max-width: 8rem; }
.rv-due strong { font-weight: 700; }
.rv-note { color: var(--muted); font-size: var(--text-xs); }
.rv-total { border: 1px solid var(--line); border-top: 2px solid var(--charcoal); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--paper-2); }
.rv-total-label { font-weight: 700; }
.rv-total-count { color: var(--muted); font-size: var(--text-sm); }
.rv-total .rv-due strong { font: 650 1.25rem/1.2 var(--font-display); letter-spacing: -0.015em; }

.rv-issue { display: grid; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-5) var(--space-4); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-panel); }
.rv-issue.is-ready { border-left-color: var(--oxblood); }
.rv-issue-text { margin: 0; color: var(--muted); }
.rv-issue.is-ready .rv-issue-text { color: var(--ink); }
.rv-issue-btn { width: 100%; min-height: 52px; }
/* Not yet: a neutral button, its reason in words beside it. */
.rv-issue-btn:disabled { opacity: 1; background: var(--paper-2); border-color: var(--line-strong); color: var(--muted); }

.iv-confirm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--paper-2); }
.iv-confirm-facts dt, .ih-label { color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.iv-confirm-facts dd { margin: 2px 0 0; font-weight: 650; }

/* Delivery of an issued month. */
.dv-resend { width: 100%; }
.dv-resend .btn { width: 100%; }
.dv-resend-count { font-weight: 500; opacity: 0.85; }
.dv-facts { max-width: none; }
.dv-facts-delivery { grid-column: 1 / -1; }
.dv-counts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.dv-count strong { font-size: var(--text-lg); font-weight: 650; }
.dv-count-failed strong { color: var(--danger); }
.dv-cols { display: none; }
.dv-list { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.dv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "who amount" "number number" "state state" "actions actions";
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4);
}
.dv-row + .dv-row { border-top: 1px solid var(--line); }
.dv-who { grid-area: who; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.dv-who .unit-pill { flex: none; min-width: 48px; height: 24px; }
.dv-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 650; }
.dv-number { grid-area: number; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0; font-size: var(--text-sm); font-weight: 600; }
.dv-amount { grid-area: amount; justify-self: end; font-weight: 650; }
.dv-state { grid-area: state; display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.dv-state svg { flex: none; margin-top: 1px; }
.dv-state-words { font-weight: 650; overflow-wrap: break-word; word-break: break-word; }
.dv-state-detail { display: block; color: var(--muted); overflow-wrap: anywhere; }
.dv-state-sent svg, .dv-state-hand svg { color: var(--ok); }
.dv-state-failed, .dv-state-failed svg { color: var(--danger); }
.dv-state-no_address svg, .dv-state-not_configured svg { color: var(--warn); }
.dv-state-pending svg { color: var(--muted); }
.dv-actions { grid-area: actions; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.dv-actions form { display: contents; }
.dv-actions .btn { width: 100%; padding: 0 6px; font-size: 0.8125rem; white-space: normal; text-align: center; }
.dv-next { margin: var(--space-5) 0 0; }
.dv-next .btn { width: 100%; }

/* One invoice. */
.iv-line-detail { display: block; color: var(--muted); font-size: 0.8125rem; }
.pay-line.is-cancelled .pay-line-amount { color: var(--muted); text-decoration: line-through; }
.iv-sums { margin: var(--space-3) 0 0; }
.iv-sums > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 0; font-size: var(--text-sm); }
.iv-sums dt { color: var(--muted); }
.iv-sums dd { margin: 0; font-weight: 600; }
.iv-sums .iv-sums-due { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--paper-2); font-size: var(--text-base); }
.iv-sums .iv-sums-due dt { color: var(--ink); font-weight: 650; }
.iv-sums .iv-sums-due dd { font-weight: 700; }
.iv-email-actions { display: grid; gap: var(--space-2); }
.iv-email-actions .btn { width: 100%; }

/* The invoices home. */
.ih { padding: var(--space-5) var(--space-4); }
.ih + .ih { margin-top: var(--space-5); }
.ih-head h2 { margin: 0; font-size: var(--text-xl); }
.ih-head p { margin: 2px 0 0; font-size: var(--text-sm); }
.ih-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin: var(--space-4) 0 var(--space-5); padding: var(--space-4); border: 1px solid var(--line); border-left: 3px solid var(--oxblood); border-radius: var(--radius); background: var(--paper); }
.ih-next p { margin: 0; }
.ih-next-month { margin-top: 2px; font: 650 var(--text-xl)/1.2 var(--font-display); letter-spacing: -0.015em; }
.ih-next-btn { width: 100%; min-height: 48px; }
.ih-months-title { margin: 0 0 var(--space-2); }
.ih-months { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ih-month {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name total" "count count" "delivery delivery";
  gap: 2px var(--space-3);
  padding: var(--space-3) var(--space-1);
  border-bottom: 1px solid var(--line);
}
.ih-month:hover, .ih-month:focus-within { background: #fcfaf7; }
.ih-month-name { grid-area: name; color: var(--ink); font-weight: 650; text-decoration: none; }
.ih-month-name::after { content: ""; position: absolute; inset: 0; }
.ih-month-name:focus-visible { outline: none; }
.ih-month-name:focus-visible::after { outline: 2px solid var(--oxblood); outline-offset: -3px; }
.ih-month-count { grid-area: count; color: var(--muted); font-size: var(--text-sm); }
.ih-month-total { grid-area: total; justify-self: end; font-weight: 650; }
.ih-month-delivery { grid-area: delivery; display: flex; flex-wrap: wrap; gap: 0 var(--space-3); color: var(--muted); font-size: 0.8125rem; }
.ih-flag { color: var(--danger); font-weight: 650; }

@media (min-width: 600px) {
  .dv-resend, .dv-resend .btn, .dv-next .btn, .ih-next-btn { width: auto; }
  .rv-issue { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .rv-issue-title { grid-column: 1 / -1; }
  .rv-issue-btn { width: auto; min-width: 200px; }
}
@media (min-width: 900px) {
  .rd-summary { margin-left: 0; margin-right: 0; }
  .rd-cols, .rd-row { --rd-cols: 72px minmax(0, 1.2fr) 240px minmax(0, 1fr) 150px; }
  .rd-cols {
    display: grid;
    grid-template-columns: var(--rd-cols);
    column-gap: var(--space-4);
    margin: 0 0 var(--space-2);
    padding: 0 var(--space-5) var(--space-2);
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .rd-row {
    grid-template-columns: var(--rd-cols);
    grid-template-areas: "unit who input foot state";
    align-items: center;
    column-gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
  }
  .rd-state { justify-self: start; }
  .rd-row .rd-state { margin-top: 0; }
  .rd-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .field.rd-input input { min-height: 48px; font-size: 1.25rem; }
  .rd-foot { align-self: center; }
  .rd-floor-name { padding: 0 var(--space-5); }

  .rv-cols, .rv-row { --rv-cols: minmax(0, 2.2fr) repeat(4, minmax(0, 0.9fr)) minmax(0, 1.2fr); }
  .rv-cols {
    display: grid;
    grid-template-columns: var(--rv-cols);
    column-gap: var(--space-4);
    margin-bottom: var(--space-2);
    padding: 0 var(--space-5) var(--space-2);
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .rv-cols span:not(:first-child) { text-align: right; }
  .rv-row { grid-template-columns: var(--rv-cols); grid-template-areas: none; column-gap: var(--space-4); padding: var(--space-3) var(--space-5); }
  .rv-who, .rv-due { grid-area: auto; }
  .rv-figs { display: contents; }
  .rv-fig { justify-content: flex-end; font-size: 0.9375rem; }
  .rv-fig .rv-k { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rv-issue { padding: var(--space-5) var(--space-6); }

  .dv-facts .facts-grid { grid-template-columns: 1fr 1fr 2fr; }
  .dv-facts-delivery { grid-column: auto; }
  .dv-cols, .dv-row { --dv-cols: minmax(0, 1.2fr) 104px minmax(0, 1.6fr) 120px; }
  .dv-cols {
    display: grid;
    grid-template-columns: var(--dv-cols);
    column-gap: var(--space-4);
    margin-bottom: var(--space-2);
    padding: 0 var(--space-5) var(--space-2);
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .dv-cols span:nth-child(4) { text-align: right; }
  /* The three actions sit on a second line under the delivery and the amount. */
  .dv-row { grid-template-columns: var(--dv-cols); grid-template-areas: "who number state amount" "who number actions actions"; align-items: start; column-gap: var(--space-4); row-gap: var(--space-2); padding: var(--space-4) var(--space-5); }
  .dv-who, .dv-amount { min-height: 28px; align-self: start; }
  .dv-number { margin: -8px 0; }
  .dv-actions { display: flex; justify-content: flex-end; margin-top: 0; }
  .dv-actions .btn { width: auto; padding: 0 var(--space-4); white-space: nowrap; }

  .ih { padding: var(--space-6); }
  .ih-month { grid-template-columns: 180px 120px 150px minmax(0, 1fr); grid-template-areas: "name count total delivery"; align-items: center; min-height: 52px; padding: var(--space-2) var(--space-3); }
  .ih-month-total { justify-self: end; }
}

/* ======================================================================
   Statements, arrears and collection (Task 13)
   ====================================================================== */
/* The tenant's statement: one panel per lease. */
.st-list { display: grid; gap: var(--space-5); }
.st { padding: 0; overflow: hidden; }
.st-head { padding: var(--space-4) var(--space-4) var(--space-3); }
.st-head h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-lg); }
.st-head h2 .unit-pill { flex: none; }
.st-head p { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.st-cols { display: none; }
.st-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.st-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* Phone: the balance ends the date line (inside .st-meta), so the amount column stays narrow. */
  grid-template-areas: "what amount" "meta meta";
  align-items: baseline;
  gap: 2px var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.st-row + .st-row { border-top: 1px solid var(--line); }
.st-what { grid-area: what; min-width: 0; }
.st-label { font-weight: 600; overflow-wrap: anywhere; }
.st-what .mark { margin-left: 2px; vertical-align: 1px; }
.st-detail { display: block; color: var(--muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.st-debit, .st-credit { grid-area: amount; justify-self: end; font-weight: 650; }
.st-debit:empty, .st-credit:empty { display: none; }
.st-sign { color: var(--muted); font-weight: 500; }
.st-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); color: var(--muted); font-size: var(--text-sm); }
.st-doc a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; font-weight: 600; }
.st-balance { grid-area: balance; justify-self: end; color: var(--muted); font-size: var(--text-sm); }
.st-k { font-size: var(--text-xs); }
.st-row.is-reversed .st-debit, .st-row.is-reversed .st-credit { color: var(--muted); text-decoration: line-through; text-decoration-color: rgb(107 100 93 / 60%); }
.st-row.is-reversal .st-label { color: var(--muted); }
.st-row.is-ahead { background: var(--paper); }
.st-sums { margin: 0; padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--line); }
.st-sums-note { display: block; font-size: var(--text-xs); }
.st-empty { padding: 0 var(--space-4) var(--space-4); }
.lease-held-of { color: var(--muted); font-weight: 500; }

/* The email log on the tenant's Emails tab. */
.em-cols { display: none; }
.em-list { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.em-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "doc" "when" "to" "state";
  gap: 2px;
  padding: var(--space-3) var(--space-4);
}
.em-row + .em-row { border-top: 1px solid var(--line); }
.em-doc { grid-area: doc; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); }
.em-kind { font-weight: 650; }
.em-doc a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; font-weight: 600; }
.em-doc .unit-pill { min-width: 44px; height: 22px; }
.em-when { grid-area: when; color: var(--muted); font-size: var(--text-sm); }
.em-to { grid-area: to; min-width: 0; color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.em-state { grid-area: state; margin-top: var(--space-1); }

/* The arrears list. */
.ar-facts { max-width: none; }
.ar-facts .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ar-cols { display: none; }
.ar-list { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.ar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "who amount" "since since" "pay pay";
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4);
}
.ar-row + .ar-row { border-top: 1px solid var(--line); }
.ar-who { grid-area: who; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ar-who .unit-pill { flex: none; min-width: 48px; height: 24px; }
.ar-name { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; min-width: 0; overflow: hidden; color: var(--ink); font-weight: 650; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.ar-name:hover { color: var(--oxblood); text-decoration: underline; }
.ar-amount { grid-area: amount; justify-self: end; font-weight: 700; }
.ar-since { grid-area: since; color: var(--muted); font-size: var(--text-sm); }
.ar-days { color: var(--ink); font-weight: 650; }
.ar-pay { grid-area: pay; width: 100%; margin-top: var(--space-2); }

/* Home: a fifth key figure, the period's collection; arrears among the attention lists. */
.attention-total { margin-left: auto; font-size: var(--text-sm); font-weight: 650; }
.attention-more { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.attention-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* The collection runs the full width under the four figures: a money figure and a sentence
   need more room than a fifth of the row, and the meter reads better long. */
.kpis .kpi-collected { grid-column: 1 / -1; border-width: 1px 0 0; }
.kpi-collected-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.kpi-collected .kpi-note { margin: 0; }
.kpi-collected .kpi-meter { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.kpi-collected .meter { flex: 1; margin-top: 0; }
.kpi-pct { color: var(--ink); font-size: var(--text-sm); font-weight: 650; }

@media (min-width: 900px) {
  .st-head { padding: var(--space-5) var(--space-5) var(--space-4); }
  .st-cols, .st-row { --st-cols: 112px minmax(0, 1fr) 104px 112px 112px 128px; }
  .st-cols {
    display: grid;
    grid-template-columns: var(--st-cols);
    column-gap: var(--space-4);
    padding: var(--space-2) var(--space-5);
    border-top: 1px solid var(--line);
    background: var(--paper);
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .st-cols .num { text-align: right; }
  .st-rows { border-top: 1px solid var(--line); }
  .st-row {
    grid-template-columns: var(--st-cols);
    grid-template-areas: "date what doc debit credit balance";
    column-gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
  }
  .st-meta { display: contents; }
  .st-date { grid-area: date; color: var(--ink); }
  .st-due { color: var(--muted); }
  .st-doc { grid-area: doc; }
  .st-debit { grid-area: debit; }
  .st-credit { grid-area: credit; }
  .st-debit:empty, .st-credit:empty { display: block; }
  .st-sign, .st-k { display: none; }
  .st-balance { color: var(--ink); font-size: var(--text-base); font-weight: 600; }
  .st-sums { display: grid; justify-content: end; padding: var(--space-4) var(--space-5) var(--space-5); }
  .st-sums > div { min-width: 360px; }

  .em-cols, .em-row { --em-cols: 150px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .em-cols {
    display: grid;
    grid-template-columns: var(--em-cols);
    column-gap: var(--space-4);
    padding: 0 var(--space-5) var(--space-2);
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .em-row { grid-template-columns: var(--em-cols); grid-template-areas: "when doc to state"; align-items: start; column-gap: var(--space-4); padding: var(--space-3) var(--space-5); }
  .em-when { color: var(--ink); padding-top: 1px; }
  .em-state { margin-top: 0; }
  .em-doc a { margin: -12px 0; }

  .ar-cols, .ar-row { --ar-cols: minmax(0, 1.3fr) minmax(0, 1.3fr) 150px 170px; }
  .ar-cols {
    display: grid;
    grid-template-columns: var(--ar-cols);
    column-gap: var(--space-4);
    margin-bottom: var(--space-2);
    padding: 0 var(--space-5) var(--space-2);
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .ar-cols .num { text-align: right; }
  .ar-row { grid-template-columns: var(--ar-cols); grid-template-areas: "who since amount pay"; column-gap: var(--space-4); min-height: 64px; padding: var(--space-2) var(--space-5); }
  .ar-k { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ar-pay { width: auto; margin-top: 0; justify-self: end; }

  .kpis .kpi-collected { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-6); padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .kpi-collected .kpi-label { grid-column: 1 / -1; }
  .kpi-collected .kpi-meter { margin-top: 0; }
}
.st-in-credit { font-size: var(--text-xs); font-weight: 650; }
.st-meta .st-balance { margin-left: auto; }
@media (min-width: 900px) {
  .st-balance { text-align: right; }
  .st-in-credit { display: block; color: var(--muted); }
  .st-meta .st-balance { margin-left: 0; }
}

/* ---------- Task 14: removing a future change, cancelling a lease entered in error ---------- */
/* A quiet destructive action: no fill, the danger colour only in its words. */
.btn-quiet-danger { background: transparent; color: var(--danger); border-color: var(--line-strong); }
.btn-quiet-danger:hover { background: var(--danger-tint); color: var(--danger); border-color: var(--danger); }
.history-mark { display: flex; align-items: center; gap: var(--space-2); }
.history-remove {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -10px 0;
  padding: 0 var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.history-remove:hover { color: var(--danger); text-decoration-color: currentColor; }
.lease-foot {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.lease-foot-note { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.lease-cancel { width: 100%; }
.term-remove-facts { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); }
.term-remove-facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-3); }
.term-remove-facts dt { color: var(--muted); font-size: var(--text-sm); }
.term-remove-facts dd { margin: 0; font-weight: 600; }
.term-remove-back { display: block; color: var(--muted); font-size: var(--text-sm); font-weight: 500; }
.rcpt-confirm-danger { border-left-color: var(--danger); }
.cancel-effects { margin: 0 0 var(--space-4); padding-left: 1.2em; font-size: var(--text-sm); }
.cancel-effects li + li { margin-top: var(--space-1); }
@media (min-width: 900px) {
  .history-mark { justify-self: stretch; }
  .history-remove { margin-left: auto; }
  .lease-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .lease-cancel { width: auto; }
}

/* ---------- Task 15: charges added by hand, reversed and raised again ---------- */
.st-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.st-add { gap: 6px; }
/* A row with an action gains a line beneath it for the action. */
.st-row.has-act { grid-template-areas: "what amount" "meta meta" "act act"; }
.st-act { grid-area: act; min-width: 0; }
.st-act-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -6px 0 -8px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}
.st-act-link:hover { color: var(--oxblood); text-decoration-color: currentColor; }
.st-reverse > summary { list-style: none; }
.st-reverse > summary::-webkit-details-marker { display: none; }
.st-reverse > summary:hover { color: var(--danger); }
.st-reverse[open] > summary { color: var(--ink); text-decoration: none; }
.st-reverse-form { display: grid; gap: var(--space-2); max-width: 520px; margin: var(--space-2) 0 var(--space-2); }
.st-reverse-form label { font-size: var(--text-sm); font-weight: 600; }
.st-reverse-form textarea, .st-confirm textarea {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-base); /* 16 px: stops iOS zooming on focus */
  resize: vertical;
}
.st-reverse-form textarea:focus, .st-confirm textarea:focus { outline: none; border-color: var(--oxblood); box-shadow: var(--ring); }
.st-reverse-form .hint { margin: 0; }
.st-reverse-form .btn { justify-self: start; }
.st-act-note { margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); }
/* The confirmation sits under its row, inside the statement. */
.st-confirm { max-width: 640px; margin: var(--space-2) 0 var(--space-1); background: var(--surface); box-shadow: none; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: var(--radius-sm); }
.st-row.has-act:has(.st-confirm) { background: var(--paper); }
.st-confirm .rcpt-confirm-q { font-size: var(--text-base); }
.st-confirm .field { margin-bottom: var(--space-4); }
.iv-note { margin: 2px 0 0; color: var(--oxblood); font-weight: 650; }
.reraise-was { max-width: 640px; margin-bottom: var(--space-4); padding: var(--space-4); }
.reraise-was-title { margin: 0 0 var(--space-3); color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.reraise-was .term-remove-facts { margin: 0; }
@media (min-width: 900px) {
  .st-row.has-act { grid-template-areas: "date what doc debit credit balance" ". act act act act act"; }
  .st-confirm { padding: var(--space-5); }
  .reraise-was { padding: var(--space-5); }
}

/* ======================================================================
   Settings (Admin): each property's billing settings, and the form that changes them
   ====================================================================== */
.settings-card { max-width: 820px; padding: var(--space-4); }
.settings-card + .settings-card { margin-top: var(--space-5); }
.settings-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.settings-card-title { min-width: 0; }
.settings-card-title h2 { margin: 0; font-size: var(--text-lg); letter-spacing: -0.01em; }
.settings-card-title p { margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); }
.settings-card-head .btn { min-height: 44px; }
.settings-label { margin: 0 0 var(--space-2); color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.settings-list { display: grid; gap: var(--space-4); margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.settings-list dd { margin: 0; }
.settings-value { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.settings-text { font-weight: 500; line-height: 1.5; }
.settings-unset { color: var(--muted); font-weight: 500; }
.settings-note { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.4; }
.settings-fixed-label { margin: 0 0 6px; font-size: var(--text-sm); font-weight: 600; }
.settings-fixed .settings-value { padding: 10px 0 0; }

/* Water rates, newest first: the date, the price, and its standing in words. */
.rates { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); }
.rate { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "from state" "figure state"; align-items: center; gap: 2px var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-4); }
.rate + .rate { border-top: 1px solid var(--line); }
.rate-from { grid-area: from; color: var(--muted); font-size: var(--text-sm); }
.rate-figure { grid-area: figure; color: var(--ink); font-weight: 650; font-size: var(--text-base); }
.rate-per { color: var(--muted); font-weight: 500; font-size: var(--text-sm); }
.rate-state { grid-area: state; justify-self: end; }
.rate-earlier .rate-figure { color: var(--muted); font-weight: 500; }
.rate-earlier-word { color: var(--muted); font-size: var(--text-sm); }
.rates-empty { padding: var(--space-3) var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.rate-add { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.rate-add .ob-actions { margin-top: var(--space-2); }
@media (min-width: 700px) {
  .settings-card { padding: var(--space-6); }
  .settings-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
  .settings-list > :last-child { grid-column: 1 / -1; }
  .rate { grid-template-columns: 160px minmax(0, 1fr) auto; grid-template-areas: "from figure state"; }
}

/* ---------- Whole-branch fix: the invoice page's hero is what is owed now ---------- */
.iv-owed-note { max-width: 36ch; margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-sm); }

/* ---------- Phase 3: expenses and advances ---------- */
.xp-header { align-items: flex-start; }
.xp-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.xp-header-actions .btn { min-height: 44px; }
.period-pick select { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; }
.xp-pending { padding: var(--space-4); border-left: 3px solid var(--warn); }
.xp-pending h2 { margin: 0 0 var(--space-1); font-size: var(--text-base); }
.xp-pending p { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.xp { padding: var(--space-4); }
.xp + .xp { margin-top: var(--space-5); }
.xp-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.xp-head h2 { margin: 0; font-size: var(--text-xl); }
.xp-head p { margin: 2px 0 0; font-size: var(--text-sm); }
.xp-total { display: grid; margin: 0; text-align: right; font-weight: 700; font-size: var(--text-lg); }
.xp-total-label { color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.xp-group + .xp-group { margin-top: var(--space-5); }
.xp-group-title { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-2); color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.xp-group-total { color: var(--ink); font-size: var(--text-sm); letter-spacing: 0; text-transform: none; }
.xp-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); }
.xp-list-plain { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.xp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what amount" "state state" "actions actions"; align-items: start; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); }
.xp-row + .xp-row { border-top: 1px solid var(--line); }
.xp-what { grid-area: what; display: grid; gap: 2px; min-width: 0; }
.xp-item { font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.xp-item .unit-pill { vertical-align: 1px; margin-left: 4px; }
.xp-meta { color: var(--muted); font-size: var(--text-sm); }
.xp-amount { grid-area: amount; justify-self: end; font-weight: 700; white-space: nowrap; }
.xp-state { grid-area: state; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.xp-note { color: var(--muted); font-size: var(--text-sm); }
.xp-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.xp-actions form { display: contents; }
.xp-reverse { display: inline-flex; align-items: center; min-height: 36px; color: var(--muted); font-size: var(--text-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.xp-reverse:hover { color: var(--oxblood); }
.xp-row.is-rejected .xp-amount, .xp-row.is-withdrawn .xp-amount, .xp-row.is-reversed .xp-amount { color: var(--muted); text-decoration: line-through; }
.xp-row.is-reversal .xp-amount { color: var(--muted); }
.xp-row.is-rejected .xp-item, .xp-row.is-withdrawn .xp-item { color: var(--muted); }
.xp-empty { padding: var(--space-3) var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.choices-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice-compact { flex: 1 1 120px; }
.choice-set-compact .choice-legend { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
@media (min-width: 900px) {
  .xp { padding: var(--space-6); }
  .xp-row { grid-template-columns: minmax(0, 1fr) 150px 140px auto; grid-template-areas: "what state amount actions"; align-items: center; }
  .xp-actions { margin-top: 0; justify-content: flex-end; }
  .xp-state { justify-content: flex-start; }
}

/* ---------- Phase 3: statements and the month close ---------- */
.sm { padding: var(--space-4); }
.sm + .sm { margin-top: var(--space-5); }
.sm-head { margin-bottom: var(--space-3); }
.sm-head h2 { margin: 0; font-size: var(--text-xl); }
.sm-head p { margin: 2px 0 0; font-size: var(--text-sm); }
.sm-months { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); }
.sm-month { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name net" "dates net" "state state"; gap: 2px var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); }
.sm-month + .sm-month { border-top: 1px solid var(--line); }
.sm-month-name { grid-area: name; display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); font-weight: 650; text-decoration: none; }
.sm-month-name:hover { color: var(--oxblood); text-decoration: underline; }
.sm-month-dates { grid-area: dates; color: var(--muted); font-size: var(--text-sm); }
.sm-month-state { grid-area: state; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sm-number { color: var(--muted); font-size: var(--text-sm); }
.sm-month-net { grid-area: net; justify-self: end; font-weight: 700; white-space: nowrap; }
.sm-k { color: var(--muted); font-weight: 500; font-size: var(--text-sm); }
.sd-number { color: var(--muted); font-weight: 500; font-size: var(--text-lg); }
.sd-returned { padding: var(--space-4); border-left: 3px solid var(--warn); }
.sd-returned h2 { margin: 0 0 var(--space-1); font-size: var(--text-base); }
.sd-returned p { margin: 0; line-height: 1.5; }
.sd-returned p + p { margin-top: var(--space-1); font-size: var(--text-sm); }
.sd-layout { display: grid; gap: var(--space-5); }
.sd-main { display: grid; gap: var(--space-5); min-width: 0; }
.sd-hero { padding: var(--space-5) var(--space-4); }
.sd-hero .rcpt-figure { margin: var(--space-1) 0; }
.sd-hero .muted { margin: 0; font-size: var(--text-sm); }
.sd-sums { display: grid; gap: var(--space-5); }
.sd-table { padding: var(--space-4); }
.sd-table h2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.sd-link { font-size: var(--text-sm); font-weight: 600; }
.sd-lines > div dt { max-width: 60%; }
.sd-adjust dt, .sd-adjust dd { color: var(--muted); font-size: var(--text-sm); }
.sd-cols { display: none; }
.sd-rows { margin: 0; padding: 0; list-style: none; }
.sd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who total" "cells cells"; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.sd-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.sd-who a { color: var(--ink); font-weight: 650; text-decoration: none; }
.sd-who a:hover { color: var(--oxblood); text-decoration: underline; }
.sd-months { flex-basis: 100%; color: var(--muted); font-size: var(--text-xs); }
.sd-cell { font-size: var(--text-sm); }
.sd-row > .sd-cell:nth-of-type(2) { grid-area: cells; }
.sd-row .sd-cell { display: inline; }
.sd-row .sd-cell + .sd-cell::before { content: " · "; color: var(--muted); }
.sd-k { color: var(--muted); }
.sd-total { grid-area: total; justify-self: end; text-align: right; font-weight: 700; white-space: nowrap; }
.sd-total .sd-months { display: block; font-weight: 500; }
.sd-row-expense { grid-template-areas: "who total"; }
.sd-row.is-reversal .sd-total { color: var(--muted); }
.sd-side { display: grid; gap: var(--space-5); align-content: start; }
.sd-check { padding: var(--space-4); }
.sd-check h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.sd-check p { line-height: 1.5; }
.sd-checks { margin: 0 0 var(--space-4); padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.sd-checkrow { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); }
.sd-check-mark { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 700; font-size: var(--text-xs); }
.is-ok .sd-check-mark { color: var(--ok); background: var(--ok-tint); }
.is-blocked .sd-check-mark { color: var(--danger); background: var(--danger-tint); }
.is-warn .sd-check-mark { color: var(--warn); background: var(--warn-tint); }
.sd-check-label { display: block; font-weight: 600; color: var(--ink); }
.sd-check-detail { display: block; color: var(--muted); }
.sd-submit, .sd-decide { display: grid; gap: var(--space-3); }
.sd-submit .btn, .sd-decide .btn { width: 100%; min-height: 48px; }
.sd-submit-note { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.sd-submit .check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); }
.sd-return { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.sd-return label { font-size: var(--text-sm); font-weight: 600; }
.sd-return textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; }
@media (min-width: 700px) {
  .sm-month { grid-template-columns: 150px minmax(0, 1fr) auto auto; grid-template-areas: "name dates state net"; }
  .sd-sums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-cols, .sd-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px 100px 100px 120px; grid-template-areas: "who c1 c2 c3 total"; gap: var(--space-3); align-items: center; }
  .sd-cols { padding: 0 0 var(--space-2); color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
  .sd-row > .sd-cell { display: block; text-align: right; }
  .sd-row > .sd-cell:nth-of-type(2) { grid-area: c1; }
  .sd-row > .sd-cell:nth-of-type(3) { grid-area: c2; }
  .sd-row > .sd-cell:nth-of-type(4) { grid-area: c3; }
  .sd-row .sd-cell + .sd-cell::before { content: none; }
  .sd-k { display: none; }
  .sd-row-expense { grid-template-columns: minmax(0, 1fr) 120px; grid-template-areas: "who total"; }
}
@media (min-width: 1100px) {
  .sd-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .sd-table, .sd-check { padding: var(--space-5); }
}
.settings-items { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.settings-items-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.settings-items-head .settings-label { margin: 0; }
.items .rate-state { display: flex; align-items: center; gap: var(--space-2); }

/* ---------- Phase 4: the move-out screens ---------- */
/* The marks: each says its state in words; the colour only repeats it. */
.mo-mark-short { border: 1px solid var(--warn); color: var(--warn); background: var(--warn-tint); }
.mo-status-open, .mo-status-proposed, .mo-status-refund { color: var(--warn); background: var(--warn-tint); }
.mo-status-settled, .mo-status-nothing { color: var(--ok); background: var(--ok-tint); }
.mo-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.mo-head-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2) !important; font-size: var(--text-sm); }

/* One page for the whole move-out: the work in the main column, the settlement beside it on a
   wide screen. On a phone the settlement comes first once it has been proposed (the landlord
   reads it there); before that the work comes first (the agent stands in the empty unit). */
.mo-layout { display: grid; gap: var(--space-4); align-items: start; }
.mo-main { display: grid; gap: var(--space-4); min-width: 0; }
.mo-side { min-width: 0; }
.mo-section { padding: var(--space-4); }
.mo-section h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); letter-spacing: -0.01em; }
.mo-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.mo-section-head h2 { margin: 0; }
.mo-section-total { margin: 0; font-weight: 650; }
.mo-number { margin-left: var(--space-1); color: var(--muted); font-size: var(--text-base); font-weight: 600; }
.mo-lead { margin: 0 0 var(--space-4); color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.mo-note { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--charcoal); border-radius: var(--radius-sm); background: var(--paper-2); font-size: var(--text-sm); }
.mo-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0; }
.mo-facts dt { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.mo-facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.mo-facts-wide { grid-column: 1 / -1; }
.mo-facts-wide dd { font-weight: 450; }
.mo-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }

/* Recording the move-out: big inputs, the water bill worked out under the reading. */
.mo-form { display: grid; gap: var(--space-5); }
.mo-fields { display: grid; gap: var(--space-4); }
.mo-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mo-reading input { font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.mo-water { margin-top: var(--space-2); }
.mo-water-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--paper-2); font-size: var(--text-sm); }
.mo-water-line strong { font-size: var(--text-lg); }
.mo-water-line.is-error { border-left: 3px solid var(--danger); color: var(--danger); background: var(--danger-tint); font-weight: 500; }
.mo-water .hint { margin-top: var(--space-2); }

/* The deductions: what, how much, and the photos as thumbnails. */
.mo-item-list { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.mo-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main edit" "thumbs thumbs" "photos photos";
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0;
}
.mo-item + .mo-item { border-top: 1px solid var(--line); }
.mo-item-main { grid-area: main; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind amount" "what amount"; column-gap: var(--space-3); min-width: 0; }
.mo-item-kind { grid-area: kind; margin: 0; color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.mo-item-what { grid-area: what; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.mo-item-amount { grid-area: amount; align-self: center; margin: 0; font-weight: 650; }
.mo-item-edit { grid-area: edit; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); font-weight: 600; }
.mo-item-charged { grid-area: edit; margin: 0; align-self: center; color: var(--muted); font-size: var(--text-xs); }
.mo-thumbs { grid-area: thumbs; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mo-thumbs a { display: block; border-radius: var(--radius-sm); }
.mo-thumbs img { display: block; width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-2); }
.mo-item-photos { grid-area: photos; margin: 0; color: var(--muted); font-size: var(--text-xs); }
.mo-add { width: 100%; min-height: 48px; }

/* The settlement block: the answer first, then the lines. */
.mo-settle { padding: var(--space-4); }
.mo-when { margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--text-sm); }
.mo-fig-hero { margin-bottom: var(--space-4); padding: var(--space-4); border-radius: var(--radius); background: var(--paper-2); border-left: 3px solid var(--charcoal); }
.mo-fig-hero.is-owed { border-left-color: var(--warn); background: var(--warn-tint); }
.mo-fig-figure { margin: 0; color: var(--ink); font: 650 2.25rem/1.1 var(--font-display); letter-spacing: -0.025em; }
.mo-fig-note { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-sm); }
.mo-fig-lines { margin: 0; }
.mo-fig-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.mo-fig-lines dd { margin: 0; white-space: nowrap; }
.mo-fig-row { padding: var(--space-2) 0; }
.mo-fig-row.is-head { margin-top: var(--space-2); border-top: 1px solid var(--line); font-weight: 650; }
.mo-fig-row.is-head:first-child { margin-top: 0; border-top: 0; }
.mo-fig-sub { padding: 2px 0 2px var(--space-3); color: var(--muted); font-size: var(--text-sm); }
.mo-fig-sub dt { min-width: 0; overflow-wrap: anywhere; }
.mo-fig-photos { display: inline-block; color: var(--muted); font-size: var(--text-xs); }
.mo-fig-how { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 2px solid var(--charcoal); }
.mo-fig-how .mo-fig-row { padding: 6px 0; font-size: var(--text-sm); }
.mo-fig-how .is-total { margin-top: var(--space-1); border-top: 1px solid var(--line); font-size: var(--text-base); font-weight: 700; }
.mo-actions { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.mo-actions > .btn { width: 100%; min-height: 52px; }
.mo-actions .hint { margin: 0; }
.mo-refusal { margin: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--warn); border-radius: var(--radius-sm); background: var(--warn-tint); font-size: var(--text-sm); }
.mo-return { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.mo-return label { font-size: var(--text-sm); font-weight: 600; }
.mo-return textarea { width: 100%; min-height: 88px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-base); }
.mo-return textarea:focus { outline: none; border-color: var(--oxblood); box-shadow: var(--ring); }
.mo-return .btn { width: 100%; min-height: 48px; }
.mo-returned { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--warn); border-radius: var(--radius-sm); background: var(--warn-tint); font-size: var(--text-sm); }
.mo-returned p { margin: 0; }
.mo-returned p + p { margin-top: var(--space-1); }
.mo-returned-title { font-weight: 650; }
.mo-refund { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--ok); border-radius: var(--radius-sm); background: var(--ok-tint); font-size: var(--text-sm); }
.mo-refund p { margin: 0; }
.mo-refund-title { font-weight: 700; }
.mo-refund-reverse { display: inline-flex; align-items: center; min-height: 44px; color: var(--danger); font-weight: 600; }
.mo-doc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.mo-doc .btn, .mo-doc form .btn { width: 100%; }
.mo-history { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--text-sm); }
.mo-history summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.mo-history ul { margin: 0; padding-left: 1.2em; color: var(--muted); }

/* Giving notice: the short-notice block shows when the dates make it short. */
.mo-notice-dates { display: grid; gap: var(--space-4); }
.mo-short { padding: var(--space-4); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--radius); background: var(--warn-tint); }
.mo-short-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-base); }
.mo-short-text { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.mo-short-fields { display: grid; gap: var(--space-3); }
.mo-short [hidden] { display: none; }

/* An item's photos: a large tap target that opens the camera or the library. */
.mo-photo-field { position: relative; }
.mo-photo-field input[type="file"] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; }
.mo-photo-pick { display: flex !important; align-items: center; justify-content: center; gap: var(--space-2); min-height: 56px; margin: 0 !important; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: var(--text-base) !important; cursor: pointer; }
.mo-photo-pick:hover { border-color: #b9ae9f; background: var(--paper-2); }
.mo-photo-field:focus-within .mo-photo-pick { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.mo-photo-field.field-error .mo-photo-pick { border-color: var(--danger); }
.mo-photo-chosen { margin: var(--space-2) 0 0; font-weight: 600; font-size: var(--text-sm); }
.mo-photo-chosen[hidden] { display: none; }
.mo-photo-list { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.mo-photo-list li { display: grid; gap: 4px; justify-items: center; }
.mo-photo-list img { display: block; width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mo-photo-remove { min-height: 44px; padding: 0 var(--space-3); border: 0; background: none; color: var(--danger); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.mo-item-remove { margin: 0; }
.mo-item-remove a { display: inline-flex; align-items: center; min-height: 44px; color: var(--danger); font-weight: 600; }
.mo-refund-sum { padding: var(--space-4); }
.mo-refund-sum .muted { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.mo-confirm-layout { display: grid; gap: var(--space-4); align-items: start; }

/* The lease card: what the lease's state allows. */
.lease-moveout { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3); border-radius: var(--radius); background: var(--paper-2); }
.lease-moveout-state { margin: 0; font-weight: 650; }
.lease-moveout-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lease-moveout-actions .btn-primary { flex: 1 1 100%; }
.lease-moveout.is-ended { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; color: var(--ink); font-weight: 600; text-decoration: none; }
.lease-moveout.is-ended:hover { color: var(--oxblood); }
.lease-moveout.is-ended svg { flex: none; }
.lease-moveout:not(.is-notice):not(.is-ended) { background: none; padding: 0; }

/* The Move-outs list. */
.mol { padding: var(--space-4); }
.mol + .mol { margin-top: var(--space-4); }
.mol-property { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.mol-group { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-1); color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.mol-group .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--paper-2); color: var(--ink); letter-spacing: 0; }
.mol-rows { margin: 0; padding: 0; list-style: none; }
.mol-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pill who" "pill act"; align-items: center; column-gap: var(--space-3); padding: var(--space-2) 0; }
.mol-row + .mol-row { border-top: 1px solid var(--line); }
.mol-who { grid-area: who; display: grid; min-width: 0; }
.mol-who a { font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mol-who a:hover { color: var(--oxblood); text-decoration: underline; }
.mol-detail { color: var(--muted); font-size: 0.8125rem; }
.mol-act, .mol-done { grid-area: act; justify-self: start; }
.mol-act { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: var(--text-sm); }
.person-settle { margin-left: 4px; }

@media (min-width: 700px) {
  .mo-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mo-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mo-fields > .mo-reading, .mo-fields > .field:last-child { grid-column: 1 / -1; }
  .mo-add { width: auto; }
  .mol-row { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "pill who act"; }
  .mol-act, .mol-done { justify-self: end; }
  .lease-moveout-actions .btn-primary { flex: 0 1 auto; }
}
@media (min-width: 900px) {
  .mo-section, .mo-settle, .mol { padding: var(--space-5); }
  .mo-fig-figure { font-size: 2.5rem; }
}
@media (min-width: 1100px) {
  .mo-layout { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "main side"; gap: var(--space-5); }
  .mo-layout > .mo-main { grid-area: main; }
  .mo-layout > .mo-side { grid-area: side; position: sticky; top: var(--space-5); }
  .mo-confirm-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.mo-notice-live { display: grid; gap: var(--space-5); }
.mo-item-charged { grid-area: auto; grid-column: 1 / -1; }
.mol-who a { position: relative; }
.mol-who a::after { content: ""; position: absolute; inset: -10px -4px; }

/* Phase 4 sweep: Home's action row wraps on a phone (each button a full-width row) instead of
   scrolling sideways. */
.home-actions { flex-wrap: wrap; }

/* ======================================================================
   Phase 5: letters (Write a letter, the letter page, Letters, Send reminders,
   the Communications tab, the notice letters on the lease card and move-out page)
   ====================================================================== */
/* Write a letter: the kinds as cards; a kind the lease does not allow is greyed with the reason. */
.lt-card > * + * { margin-top: var(--space-5); }
.lt-kinds { grid-template-columns: minmax(0, 1fr); }
.choice.is-disabled { background: var(--paper-2); border-style: dashed; cursor: not-allowed; }
.choice.is-disabled input { cursor: not-allowed; }
.choice.is-disabled .choice-title { color: var(--muted); }
.choice.is-disabled .choice-text { color: var(--muted); }
.choice.is-disabled .choice-text::before { content: "Not available: "; font-weight: 650; }
.choice.is-disabled:hover { border-color: var(--line-strong); }
[data-pay-by][hidden] { display: none; }
.lt-actions .btn { flex: 1 1 220px; }
.lt-actions-note { flex: 1 1 100%; margin: 0; }

/* The letter as it reads: the preview card on the form, the body of the letter page. */
.lt-sheet {
  padding: var(--space-5) var(--space-4) var(--space-4);
  background:
    linear-gradient(90deg, var(--brand-star-deep), var(--brand-star)) top / 100% 3px no-repeat,
    var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}
.lt-letter .lt-sheet { padding: var(--space-4) 0 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.lt-eyebrow { margin: 0 0 var(--space-3); color: var(--muted); font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.lt-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.lt-meta > div:first-child { grid-column: 1 / -1; }
.lt-meta dt { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.lt-meta dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.lt-meta-sub { display: block; color: var(--muted); font-size: var(--text-sm); font-weight: 400; }
.lt-subject { margin: 0 0 var(--space-3); font: 650 1.25rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.lt-p { margin: 0 0 var(--space-3); max-width: 66ch; line-height: 1.6; overflow-wrap: break-word; }
.lt-charges { margin-top: var(--space-2); }
.lt-due { display: block; color: var(--muted); font-size: var(--text-xs); }
.lt-close { margin-top: var(--space-5); }
.lt-close p { margin: 0; }
.lt-sign { margin-top: var(--space-4) !important; font-weight: 650; }
.lt-sign span { display: block; color: var(--muted); font-weight: 400; }
.lt-sheet.is-cancelled .lt-subject { text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* The letter page. */
.lt-cancelled { margin: 0 0 var(--space-5); padding: var(--space-4); border-left: 3px solid var(--danger); }
.lt-cancelled h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.lt-cancelled p { margin: 0; }
.lt-cancelled p + p { margin-top: var(--space-1); font-size: var(--text-sm); }
.lt-figure-date { font-size: 1.75rem; }
.lt-batch { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--text-sm); }
.lt-history { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3) 0 0; border-top: 1px solid var(--line); list-style: none; }
.lt-history-row { grid-area: auto; margin: 0; }
.lt-signed { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 -12px; font-weight: 600; }
.dv-state-whatsapp svg { color: var(--ok); }
.dv-state-none svg, .dv-state-cancelled svg { color: var(--muted); }
.lt-delivery-actions { margin-top: var(--space-1); }

/* Letters: the kind filter, one row per letter. */
.lt-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); }
.lt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.lt-chip:hover { background: var(--paper-2); text-decoration: none; }
.lt-chip-count { font-weight: 700; }
.lt-chip[aria-current="page"], .lt-chip[aria-current="page"]:hover { background: var(--oxblood); border-color: var(--oxblood); color: #fff; }
.lt-property + .lt-property, .lt-results + .lt-results { margin-top: var(--space-6); }
.lt-list { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.lt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "doc" "who" "when" "figure" "state";
  gap: 2px;
  padding: var(--space-3) var(--space-4);
}
.lt-row + .lt-row, .lt-tick-row + .lt-tick-row { border-top: 1px solid var(--line); }
.lt-row-doc { grid-area: doc; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); }
.lt-row-number { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; font-weight: 650; }
.lt-row-kind { font-weight: 600; }
.lt-row-who { grid-area: who; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.lt-row-who .unit-pill { flex: none; min-width: 44px; height: 22px; }
.lt-row-who a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }
.lt-row-when { grid-area: when; color: var(--muted); font-size: var(--text-sm); }
.lt-row-figure { grid-area: figure; font-size: var(--text-sm); }
.lt-row-state { grid-area: state; margin-top: var(--space-1); }
.lt-done { margin-top: var(--space-6); }

/* Send reminders: every tenant in arrears, ticked. */
.ar-remind { flex: 0 0 auto; }
.lt-tick { margin: 0; padding: 0; border: 0; min-width: 0; }
.lt-tick > legend { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); width: 100%; float: left; }
.lt-tick > legend + * { clear: both; }
.lt-tick-count { color: var(--muted); font-weight: 500; }
.lt-tick-row { margin: 0; }
.lt-tick-label {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  grid-template-areas: "box who amount" "box detail detail";
  align-items: center;
  gap: 2px var(--space-3);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
}
.lt-tick-label:hover { background: var(--paper); }
.lt-tick-label input { grid-area: box; width: 22px; height: 22px; margin: 0; accent-color: var(--oxblood); cursor: pointer; }
.lt-tick-who { grid-area: who; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.lt-tick-who .unit-pill { flex: none; min-width: 44px; height: 22px; }
.lt-tick-name { min-width: 0; overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.lt-tick-amount { grid-area: amount; font-weight: 700; }
.lt-tick-detail { grid-area: detail; color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.lt-tick-detail strong { color: var(--ink); }
.lt-no-email { color: var(--warn); font-weight: 600; }

/* The Communications tab: the letters, then the email log. */
.comm-section + .comm-section { margin-top: var(--space-6); }
.comm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.comm-title { margin: 0; font-size: var(--text-lg); }
.comm-write { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.comm-write .btn { min-height: 44px; }

/* The notice letters on the lease card and the move-out page. */
.lt-notice-letter { margin: 0; }
.lt-notice-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--ink); font-weight: 600; text-decoration-color: var(--oxblood-line); }
.lt-notice-link svg { flex: none; color: var(--oxblood); }
.lt-notice-link:hover { color: var(--oxblood); }
.mo-letters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }

@media (min-width: 700px) {
  .lt-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-card { padding: var(--space-6); }
  .lt-actions .btn { flex: 0 1 auto; }
}
@media (min-width: 900px) {
  .lt-row {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-areas: "doc who figure state" "when when when state";
    column-gap: var(--space-4);
    align-items: center;
  }
  .lt-list-plain .lt-row, .comm-section .lt-row { grid-template-areas: "doc figure figure state" "when when when state"; }
  .lt-row-state { margin-top: 0; }
  .lt-sheet { padding: var(--space-6); }
  .lt-letter .lt-sheet { padding: var(--space-5) 0 0; }
}
@media (min-width: 1100px) {
  .lt-form { max-width: 1180px; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
}

/* Settings: the landlord's details per property (Phase 5, Task 3). */
.settings-landlord-list { display: grid; gap: var(--space-3); margin: 0; }
.settings-landlord-list > div { min-width: 0; }
.settings-landlord-list dt { margin: 0 0 2px; color: var(--muted); font-size: var(--text-sm); }
.settings-landlord-list dd { margin: 0; }
.settings-landlord-list .settings-unset { font-size: var(--text-sm); line-height: 1.4; }
.settings-phone { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 700px) {
  .settings-landlord-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-5); }
}

/* Statements: the months grouped by year, and the imported month's page (Phase 5, Task 4) */
.sm-year + .sm-year { margin-top: var(--space-3); }
.sm-year-name { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-1); font-weight: 700; color: var(--ink); cursor: pointer; }
.sm-year > .sm-months { margin-top: var(--space-1); }
.sd-imported-note { color: var(--muted); font-size: var(--text-sm); }

/* Home's landlord figures: a second row of key figures, above the agent's for an Admin and
   below them for an Agent (Phase 5, Task 5). */
.kpis + .kpis { margin-top: calc(-1 * var(--space-2)); }
.kpis-3 .kpi:last-child { grid-column: 1 / -1; border-right-width: 0; }
.kpi-link { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.kpi-link:hover { color: var(--oxblood); text-decoration: underline; }
.kpi-ratio { margin-top: var(--space-1); }
.kpis-money .kpi-note span { white-space: normal; }
@media (min-width: 900px) {
  .kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis-3 .kpi:last-child { grid-column: auto; }
}

/* A loaded lease's words on the lease card, and the unit's Meter block (Phase 6, Task 3). */
.lease-held-note { color: var(--muted); font-size: var(--text-sm); font-weight: 500; white-space: normal; }
.unit-meter .btn { margin-top: var(--space-3); }
.lease-terms dd, .lease-terms dd .num, .lease-terms .lease-held-of { white-space: normal; }
.unit-meter { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.unit-meter .doc-panel-head { padding: 0; margin-bottom: var(--space-3); }
.unit-meter .lease-terms { margin: 0; }

/* The Reports page and the report tables (Phase 5, Task 6). */
.rp-chooser { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); }
.rp-chooser label { font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
.rp-chooser select { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius); background: var(--surface); font: inherit; }
.rp-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
.rp-card { padding: var(--space-4) var(--space-5); }
.rp-card h2 { margin: 0 0 var(--space-1); font-size: var(--text-xl); }
.rp-card p { margin: 0 0 var(--space-3); }
.rp-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rp-table { padding: var(--space-4); margin-bottom: var(--space-5); }
.rp-table h2 { margin: 0 0 var(--space-3); font-size: var(--text-xl); }
.rp-table .table tfoot th { background: var(--paper-2); font-weight: 700; border-top: 2px solid var(--ink); }
.rp-table .table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-note { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
@media (min-width: 900px) { .rp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-chooser input[type="date"], .rp-chooser input[type="month"] { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius); background: var(--surface); font: inherit; }
.rp-table .table th, .rp-table .table td { white-space: nowrap; }
.rp-table .table th, .rp-table .table td { padding: var(--space-2) var(--space-2); font-size: var(--text-sm); }
.rp-table .table th:first-child, .rp-table .table td:first-child { padding-left: var(--space-3); }
.rp-table .table th:last-child, .rp-table .table td:last-child { padding-right: var(--space-3); }
.rp-table { padding: var(--space-3) var(--space-2); }
.rp-table .table th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.rp-links { list-style: none; margin: 0; padding: 0; }
.rp-links li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.rp-links li:last-child { border-bottom: 0; }
/* Six tabs on a phone (Home, Units, Tenants, Payments, Reports, Activity): tighter labels so none is cut off. */
@media (max-width: 599px) { .nav li a { letter-spacing: 0; padding: 0 2px; font-size: 0.6875rem; text-overflow: clip; } }
/* The Reports list: grouped rows; a row opens to show its choices and View, Excel and PDF. */
.rl { display: grid; gap: var(--space-5); max-width: 880px; }
.rl-group-title { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rl-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 2px rgb(23 25 26 / 4%); }
.rl-item + .rl-item { border-top: 1px solid var(--line); }
.rl-summary { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; transition: background-color 120ms var(--ease); }
.rl-summary::-webkit-details-marker { display: none; }
.rl-summary:hover { background: #fcfaf7; }
.rl-summary:focus-visible { outline: 2px solid var(--oxblood); outline-offset: -2px; }
.rl-text { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rl-name { font-weight: 650; color: var(--ink); }
.rl-desc { font-size: var(--text-sm); color: var(--muted); line-height: 1.4; }
.rl-tag { display: inline-block; margin-left: var(--space-2); padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--text-xs); font-weight: 600; color: var(--muted); vertical-align: 2px; }
.rl-chevron { flex: none; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 160ms var(--ease); margin-right: 4px; }
.rl-item[open] > .rl-summary { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--oxblood); }
.rl-item[open] > .rl-summary .rl-chevron { transform: rotate(45deg); border-color: var(--oxblood); }
.rl-item[open] > .rl-summary .rl-name { color: var(--oxblood); }
.rl-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); padding: var(--space-4); background: var(--paper-2); box-shadow: inset 3px 0 0 var(--oxblood); border-top: 1px solid var(--line); }
.rl-field { display: grid; gap: 4px; }
.rl-field label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.rl-field select { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font: inherit; }
.rl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rl-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); color: var(--oxblood); font-weight: 600; }

/* Dry-run fix D-M7: a unit let from a later date. Paper like a vacant tile with a dashed
   charcoal edge, and the words "Leased from <date>": not by colour alone. */
.legend-leased::before { background: var(--paper); border-style: dashed !important; border-color: var(--charcoal) !important; }
.unit-tile[data-state="leased"] { background: var(--paper); border-style: dashed; border-color: var(--line-strong); }
.unit-tile[data-state="leased"]::before { display: none; }
.unit-tile[data-state="leased"] .unit-tile-from { color: var(--muted); font-weight: 600; }
/* The Units list's status column fits "Leased from 14 Oct 2026" on the desktop layout. */
@media (min-width: 900px) {
  .unit-groups { --unit-cols: minmax(150px, 1.1fr) minmax(0, 2fr) 140px 190px; }
}
/* Dry-run fix D-I2: the tick that keeps a first amount sits inside its field; keep the
   checkbox row's own grid over the field's label rule. */
.field .check { display: grid; margin-top: var(--space-2); font-weight: 400; }
/* Dry-run fix D-I4: the collection card's two figures, received and the month's invoices paid;
   the meter (the invoices' share) keeps a usable width beside them on wide screens. */
.kpi-received { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); color: var(--ink); }
.kpi-collected-body .kpi-invoices-paid { flex-basis: 100%; color: var(--ink); }
@media (min-width: 900px) {
  .kpis .kpi-collected { grid-template-columns: minmax(0, 1fr) minmax(180px, 280px); }
}
/* Dry-run fix (Group B review): the collection card's meter is the invoices' share, so it sits
   on the "<Month> invoices paid" line, not beside the received figure; it wraps under the line
   on a phone. */
.kpis .kpi-collected { display: block; }
.kpi-collected-body .kpi-invoices-row { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); }
.kpi-invoices-row .kpi-invoices-paid { flex: 1 1 auto; flex-basis: auto; margin: 0; }
.kpi-invoices-row .kpi-meter { flex: 1 1 200px; max-width: 320px; margin-top: 0; }
/* Dry-run fix D-I5: a month or settlement returned to the Agent, with the landlord's note. */
.attention-returned { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
/* Dry-run fix D-M19: the final statement's and the refund's emails, one labelled line each. */
.mo-emails { margin: 0; display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-sm); }
.mo-emails div { display: block; }
.mo-emails dt { display: inline; font-weight: 600; color: var(--ink); }
.mo-emails dd { display: inline; margin: 0; }
.attention-list li.attention-no-pill { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "date"; }
/* Dry-run fix D-M11: "Remove" on a photo is a link to the confirmation, shaped as before. */
a.mo-photo-remove { display: inline-flex; align-items: center; text-decoration: none; }
a.mo-photo-remove:hover { text-decoration: underline; }
/* Dry-run fix D-M1: the sidebar fits a short window. The nav list takes the room left between
   the brand and the user block and scrolls within itself when it must, so the user's name and
   "Sign out" stay inside the charcoal column at 1280x800 and 1280x700. */
@media (min-width: 900px) {
  .nav ul { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 28%) transparent; }
  .nav .nav-foot { flex: none; }
}
@media (min-width: 900px) and (max-height: 860px) {
  .nav { padding-top: var(--space-5); padding-bottom: var(--space-4); }
  .nav .brand { margin-bottom: var(--space-4); padding-bottom: var(--space-3); }
  .nav .nav-foot { padding-top: var(--space-3); }
  .nav .nav-foot form { margin-top: var(--space-2); }
}
/* Dry-run fix D-M17: on a phone the rent roll is a two-line card per unit (unit and tenant;
   status and rent) with the rent total under it; the full table stays from 700 px. */
.rp-cards, .rp-cards-total { display: none; }
@media (max-width: 699.98px) {
  .rp-table-carded .table-wrap { display: none; }
  .rp-table-carded .rp-cards { display: block; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
  .rp-card { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .rp-card-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); min-width: 0; }
  .rp-card-line + .rp-card-line { justify-content: space-between; }
  .rp-card-tenant { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
  .rp-card-status { color: var(--muted); font-size: var(--text-sm); }
  .rp-table-carded .rp-cards-total { display: flex; justify-content: space-between; margin: 0; padding-top: var(--space-3); font-weight: 700; }
}
/* Dry-run fix (Group D review): the sidebar's nav list shows that more is below while it
   scrolls. A soft light fade sits at its bottom edge (and at its top once scrolled), painted
   behind the links; charcoal covers that scroll with the list hide each band at its end, so
   nothing shows when the list fits. Paint only, no motion; the phone tab bar is untouched. */
@media (min-width: 900px) {
  .nav ul {
    background:
      linear-gradient(var(--charcoal) 40%, rgb(26 26 26 / 0%)) center top / 100% 36px no-repeat local,
      linear-gradient(rgb(26 26 26 / 0%), var(--charcoal) 60%) center bottom / 100% 36px no-repeat local,
      linear-gradient(rgb(255 255 255 / 12%), rgb(255 255 255 / 0%)) center top / 100% 16px no-repeat scroll,
      linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 14%)) center bottom / 100% 24px no-repeat scroll;
    background-color: var(--charcoal);
  }
}
/* ======================================================================
   Sidebar in three groups: Home, then Tenancy, Money and Office under folding headers (bold
   label left, chevron right that turns, a rule below), a line icon on each link, counts on
   Arrears and Move-outs, a footer with initials, name, role and Sign out as an icon, and an
   icon rail of 68 px. Below 900 px none of it shows: the tab bar is exactly as before.
   ====================================================================== */
@media (max-width: 899.98px) {
  .nav-top, .nav-group-toggle, .nav-icon, .nav-count, .nav-tip { display: none; }
  /* The groups dissolve, so the tab bar's links stay one row in their old order. */
  .nav .nav-group, .nav .nav-group-body, .nav .nav-group-body > ul, .nav .nav-label { display: contents; }
}
.nav-mark { display: none; }
.nav-tip { position: fixed; top: 0; left: 0; z-index: 30; transform: translateY(-50%); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--ink); color: #fff; font: 600 0.8125rem/1.2 var(--font-body); white-space: nowrap; box-shadow: 0 6px 18px rgb(0 0 0 / 25%); opacity: 0; pointer-events: none; transition: opacity 120ms var(--ease); }
.nav-tip.is-shown { opacity: 1; }
@media (min-width: 900px) {
  .nav { --nav-alert: #e0a46a; padding: 0; transition: width 180ms var(--ease); }
  .app { transition: padding-left 180ms var(--ease); }
  .nav-top { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-4) var(--space-2) var(--space-3) var(--space-4); border-bottom: 1px solid rgb(255 255 255 / 8%); }
  .nav .nav-top .brand { display: flex; align-items: center; min-width: 0; min-height: 44px; margin: 0; padding: 0 var(--space-1); border: 0; font: 700 1.0625rem/1.2 var(--font-display); letter-spacing: var(--tracking-brand); white-space: nowrap; }
  .nav-brand-name { overflow: hidden; text-overflow: ellipsis; }
  .nav-mark { place-items: center; width: 32px; height: 32px; border-radius: var(--radius); background: var(--oxblood); color: #fff; font-size: 0.875rem; letter-spacing: 0; }
  .nav-icon-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--on-dark-muted); cursor: pointer; transition: background-color 120ms var(--ease), color 120ms var(--ease); }
  .nav-icon-btn:hover { background: var(--charcoal-2); color: #fff; }
  .nav-icon-btn svg { transition: transform 180ms var(--ease); }

  .nav .nav-list { padding: var(--space-2) var(--space-3) var(--space-3); }
  .nav .nav-list a { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); }
  .nav-icon { flex: none; color: var(--on-dark-muted); transition: color 120ms var(--ease); }
  .nav .nav-list a:hover .nav-icon, .nav .nav-list a[aria-current="page"] .nav-icon { color: #fff; }
  .nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-count { display: grid; place-items: center; flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgb(224 164 106 / 18%); color: var(--nav-alert); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .nav .nav-list a[aria-current="page"] .nav-count { background: rgb(255 255 255 / 20%); color: #fff; }

  /* A group: its header folds and unfolds the links below it. */
  .nav-group { margin-top: var(--space-2); }
  .nav-group-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: 44px; padding: 0 var(--space-3); border: 0; border-bottom: 1px solid rgb(255 255 255 / 9%); border-radius: 0; background: none; color: var(--on-dark-muted); font: 700 0.71875rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: color 120ms var(--ease); }
  .nav-group-toggle:hover { color: #fff; }
  .nav-group-meta { display: flex; align-items: center; gap: var(--space-2); }
  .nav-chevron { transform: rotate(90deg); transition: transform 180ms var(--ease); }
  .nav-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--nav-alert); }
  .nav-group.is-folded .nav-dot { display: block; }
  .nav-group.is-folded .nav-chevron { transform: rotate(0deg); }
  .nav-group-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 200ms var(--ease), visibility 0s linear 0s; }
  .nav-group.is-folded .nav-group-body { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 200ms var(--ease), visibility 0s linear 200ms; }
  .nav .nav-group-body > ul { display: flex; flex: none; flex-direction: column; gap: 2px; min-height: 0; height: auto; padding-top: 6px; overflow: hidden; background: none; transition: padding-top 200ms var(--ease); }
  .nav-group.is-folded .nav-group-body > ul { padding-top: 0; }

  /* The footer: initials, name and role, and Sign out as an icon. */
  .nav .nav-foot { display: flex; flex: none; align-items: center; gap: 10px; margin: 0; padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4); border-top: 1px solid rgb(255 255 255 / 8%); }
  .nav .nav-foot form { margin: 0; }
  .nav-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #302d2b; color: #fff; font-size: 0.78125rem; font-weight: 700; letter-spacing: 0.02em; }
  .nav-who { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
  .nav-who b { display: block; overflow: hidden; color: #fff; font-size: 0.84375rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .nav-who span { color: var(--on-dark-muted); font-size: 0.75rem; }

  /* The icon rail: 68 px of icons, a hairline between the groups, names as tooltips. */
  :root[data-nav-rail] .app { padding-left: 68px; }
  :root[data-nav-rail] .nav { width: 68px; }
  :root[data-nav-rail] .nav-top { flex-direction: column; justify-content: center; gap: var(--space-1); padding: var(--space-3) 0 var(--space-2); }
  :root[data-nav-rail] .nav .nav-top .brand { justify-content: center; padding: 0; }
  :root[data-nav-rail] .nav-mark { display: grid; }
  :root[data-nav-rail] .nav-brand-name, :root[data-nav-rail] .nav-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :root[data-nav-rail] .nav-rail-toggle svg { transform: rotate(180deg); }
  :root[data-nav-rail] .nav .nav-list { padding: var(--space-2) var(--space-3); scrollbar-width: none; }
  :root[data-nav-rail] .nav .nav-list a { justify-content: center; width: 44px; padding: 0; }
  :root[data-nav-rail] .nav-count { position: absolute; top: 8px; right: 7px; min-width: 0; width: 8px; height: 8px; padding: 0; overflow: hidden; background: var(--nav-alert); color: transparent; font-size: 0; box-shadow: 0 0 0 2px var(--charcoal); }
  :root[data-nav-rail] .nav-group { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid rgb(255 255 255 / 9%); }
  :root[data-nav-rail] .nav-group-toggle { display: none; }
  :root[data-nav-rail] .nav-group.is-folded .nav-group-body { grid-template-rows: 1fr; visibility: visible; }
  :root[data-nav-rail] .nav .nav-group-body > ul { padding-top: 0; }
  :root[data-nav-rail] .nav .nav-foot { flex-direction: column; gap: var(--space-1); padding: var(--space-3) 0; }
  :root[data-nav-rail] .nav-who { display: none; }
}
/* The sidebar's groups fit an Agent's whole list in a 1280x800 window: a tighter brand row,
   group spacing and footer (every target stays 44 px). */
@media (min-width: 900px) {
  .nav-top { padding: 10px var(--space-2) 10px var(--space-4); }
  .nav .nav-list { padding-top: 6px; }
  .nav-group { margin-top: 4px; }
  .nav .nav-group-body > ul { gap: 0; padding-top: 4px; }
  .nav .nav-foot { padding-top: 10px; padding-bottom: 10px; }
}
/* ======================================================================
   The Reports flow: the Reports page is one linked row per report (icon, name, a hint of what it
   asks for, an arrow); a report opens on its own page with its choices and Run report, Excel and
   PDF waiting; once run the choices fold into a summary line and the downloads go live. The
   report's own tables (.rp-*) are untouched.
   ====================================================================== */
.rh { max-width: none; }
@media (min-width: 1100px) { .rh { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-5) var(--space-5); } }
.rh-row { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-4); color: var(--ink); text-decoration: none; transition: background-color 120ms var(--ease); }
.rh-row + .rh-row { border-top: 1px solid var(--line); }
a.rh-row:hover { background: #fcfaf7; color: var(--ink); text-decoration: none; }
a.rh-row:focus-visible { outline: 2px solid var(--oxblood); outline-offset: -2px; }
.rh-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--paper-2); color: var(--oxblood); }
.rh-name { flex: 1 1 auto; min-width: 0; font-weight: 650; }
.rh-hint { flex: none; font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.rh-go { display: grid; flex: none; color: #b3a79a; transition: transform 120ms var(--ease), color 120ms var(--ease); }
a.rh-row:hover .rh-go { color: var(--oxblood); transform: translateX(2px); }
.rh-row-export { flex-wrap: wrap; }
.rh-exports { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 599.98px) { .rh-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .rh-row, .rh-go { transition: none; } }

.rr-download { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rr-download-label { margin-right: 2px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rr-download .btn svg { flex: none; }
.rr-panel { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.rr-panel h2 { margin: 0; font-size: 0.9375rem; }
.rr-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.rr-field { display: grid; gap: 6px; min-width: 180px; }
.rr-field label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.rr-field select, .rr-field input { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; }
.rr-waiting { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-5); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--muted); }
.rr-waiting b { color: var(--ink); }
.rr-cols { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-col { padding: 3px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-size: var(--text-sm); }
.rr-ran { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-5); padding: var(--space-2) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.rr-chips { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.rr-chip { padding: 5px 12px; border-radius: 999px; background: var(--paper-2); font-size: var(--text-sm); }
.rr-chip b { font-weight: 600; }
.rr-ranat { font-size: var(--text-sm); color: var(--muted); }
.rr-change { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-1); color: var(--oxblood); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599.98px) {
  .rr-field { flex: 1 1 100%; min-width: 0; }
  .rr-fields .btn-primary { flex: 1 1 100%; }
}
/* The summary line keeps one height with or without its Change link. */
.rr-ran { min-height: 62px; }