/* RentLedger tenant portal (docs/redesign-spec.md §5). Original work, written from
   scratch for RentLedger. Colours, type, space and radii come only from the tokens
   in rl-tokens.css. Light theme only in this drop: the portal never sets
   html.rl-shell, and this file defines no dark rules.
   Loaded after styles.css and the page's own <style>, so these rules win where
   they overlap with the legacy portal styles. */

/* ---- page frame ---------------------------------------------------------- */
body.rl-portal { background: var(--rl-bg); color: var(--rl-ink); font-family: var(--rl-font-ui); font-size: var(--rl-fs-md); line-height: var(--rl-lh); }
.rl-portal h1, .rl-portal h2, .rl-portal h3 { font-family: var(--rl-font-display); color: var(--rl-ink); line-height: var(--rl-lh-tight); }
.rl-portal h2 { font-size: var(--rl-fs-xl); font-weight: 600; margin: 0 0 var(--rl-s-3); }
.rl-portal h3 { font-size: var(--rl-fs-lg); font-weight: 600; margin: var(--rl-s-4) 0 var(--rl-s-2); }
.rl-portal .header { box-shadow: var(--rl-e1); }
.rl-portal .contact-section { padding: var(--rl-s-4) 0 var(--rl-s-8); }
.rl-portal .rep-wrap { max-width: 760px; }
.rl-portal .contact-form-wrapper {
  background: var(--rl-surface); border: 1px solid var(--rl-border); border-radius: var(--rl-r-md);
  box-shadow: var(--rl-e1); padding: var(--rl-s-4); margin-bottom: var(--rl-s-4);
}
@media (min-width: 1100px) { .rl-portal .contact-form-wrapper { padding: var(--rl-s-5); } }
.rl-portal .hint, .rl-portal .muted { color: var(--rl-ink-3); }
.rl-portal a { color: var(--rl-link); }
.rl-portal :focus-visible { outline: 2px solid var(--rl-focus); outline-offset: 2px; }
.rl-portal .btn-primary { background-color: var(--rl-brand); color: var(--rl-brand-ink); border-radius: var(--rl-r-sm); letter-spacing: 0; padding: 0.8rem 1.6rem; }
.rl-portal .btn-primary:hover { background-color: var(--rl-brand-hover); }
.rl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Compact "{companyName} · Tenant portal" bar (replaces the marketing page header). */
.rl-portal-bar { background: var(--rl-rail-bg); color: var(--rl-rail-ink); font-size: var(--rl-fs-sm); }
.rl-portal-bar__inner { max-width: 760px; margin: 0 auto; padding: var(--rl-s-2) 20px; display: flex; align-items: center; gap: var(--rl-s-2); min-width: 0; }
.rl-portal-bar__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rl-portal-bar__label { color: var(--rl-rail-ink-2); white-space: nowrap; }
body.rl-portal-in .rl-portal-promo { display: none; }
.rl-portal-promo { background: var(--rl-surface-2); border-bottom: 1px solid var(--rl-border); padding: var(--rl-s-4) 0; text-align: center; }
.rl-portal-promo p { margin: 0 0 var(--rl-s-2); }
.rl-portal-promo img { height: 44px; border: 0; }

/* Signed-in user line */
.rl-portal .user-bar { background: var(--rl-surface); border: 1px solid var(--rl-border); border-radius: var(--rl-r-md); color: var(--rl-ink-2); font-size: var(--rl-fs-sm); gap: var(--rl-s-2); flex-wrap: wrap; }
.rl-portal .user-bar button { border-color: var(--rl-border-strong); border-radius: var(--rl-r-sm); color: var(--rl-ink); min-height: 36px; background: var(--rl-surface); }

/* ---- tabs: Home · Repairs · Pay · Documents · Account ---------------------- */
.rl-portal .tabs.rl-ptabs {
  display: flex; gap: var(--rl-s-1); margin: 0 0 var(--rl-s-4); padding: var(--rl-s-1);
  background: var(--rl-surface); border: 1px solid var(--rl-border); border-radius: var(--rl-r-md); box-shadow: var(--rl-e1);
}
.rl-ptabs .tab {
  flex: 1 1 0; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--rl-s-2) var(--rl-s-1); border: 0; border-radius: var(--rl-r-sm); background: transparent;
  color: var(--rl-ink-2); font: 600 var(--rl-fs-sm)/1.2 var(--rl-font-ui); cursor: pointer;
}
.rl-ptabs .tab:hover { background: var(--rl-hover); }
.rl-ptabs .tab.active { background: var(--rl-brand-soft); color: var(--rl-brand-soft-ink); }
.rl-ptabs .tab svg { width: 20px; height: 20px; flex: 0 0 auto; }
.rl-ptabs .tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
@media (min-width: 768px) {
  .rl-ptabs .tab { flex-direction: row; gap: var(--rl-s-2); }
}
@media (max-width: 767px) {
  .rl-portal .tabs.rl-ptabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; margin: 0;
    border-radius: 0; border-width: 1px 0 0; box-shadow: var(--rl-e2);
    padding: var(--rl-s-1) var(--rl-s-1) calc(var(--rl-s-1) + env(safe-area-inset-bottom));
  }
  .rl-ptabs .tab { min-height: 48px; font-size: 11px; }
  body.rl-portal-in { padding-bottom: calc(var(--rl-bottombar-h) + env(safe-area-inset-bottom)); }
  html.rl-portal-viewas .rl-portal .tabs.rl-ptabs { bottom: var(--rl-viewas-h, 3.2rem); }
  html.rl-portal-viewas body.rl-portal-in { padding-bottom: calc(var(--rl-bottombar-h) + var(--rl-viewas-h, 3.2rem) + env(safe-area-inset-bottom)); }
  /* the signing "Next" button sits above the tab bar */
  body.rl-portal-in .init-fab { bottom: calc(var(--rl-bottombar-h) + var(--rl-s-3) + env(safe-area-inset-bottom)); }
}
html.rl-portal-viewas body { padding-bottom: var(--rl-viewas-h, 3.2rem); }

/* ---- cards, chips, buttons, banners --------------------------------------- */
.rl-pcard { background: var(--rl-surface); border: 1px solid var(--rl-border); border-radius: var(--rl-r-md); box-shadow: var(--rl-e1); padding: var(--rl-s-4); margin: 0 0 var(--rl-s-4); }
@media (min-width: 1100px) { .rl-pcard { padding: var(--rl-s-5); } }
.rl-pcard--attn { border-left: 4px solid var(--rl-warn); }
.rl-pcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rl-s-2); flex-wrap: wrap; margin-bottom: var(--rl-s-2); }
.rl-pcard__title { font: 600 var(--rl-fs-lg)/var(--rl-lh-tight) var(--rl-font-ui); color: var(--rl-ink); margin: 0; }
.rl-pcard__sub { color: var(--rl-ink-3); font-size: var(--rl-fs-sm); margin: var(--rl-s-1) 0 0; }
.rl-pcard p { margin: var(--rl-s-2) 0; }
.rl-pbig { font-size: var(--rl-fs-2xl); font-weight: 700; line-height: var(--rl-lh-tight); font-variant-numeric: tabular-nums; margin: var(--rl-s-1) 0; color: var(--rl-ink); }
.rl-pnum { font-variant-numeric: tabular-nums; }

.rl-pchip { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--rl-r-pill); padding: 2px 8px; font: 600 var(--rl-fs-xs)/1.4 var(--rl-font-ui); white-space: nowrap; }
.rl-pchip--ok { background: var(--rl-ok-bg); color: var(--rl-ok); }
.rl-pchip--warn { background: var(--rl-warn-bg); color: var(--rl-warn); }
.rl-pchip--bad { background: var(--rl-bad-bg); color: var(--rl-bad); }
.rl-pchip--info { background: var(--rl-info-bg); color: var(--rl-info); }
.rl-pchip--neutral { background: var(--rl-neutral-bg); color: var(--rl-neutral); }
.rl-pchip--brand { background: var(--rl-brand-soft); color: var(--rl-brand-soft-ink); }
.rl-pchips { display: flex; gap: var(--rl-s-1); flex-wrap: wrap; align-items: center; }

.rl-pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rl-s-2); min-height: 44px;
  padding: 10px 16px; border: 1px solid transparent; border-radius: var(--rl-r-sm);
  font: 600 var(--rl-fs-md)/1.2 var(--rl-font-ui); text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color var(--rl-dur) var(--rl-ease);
}
.rl-portal a.rl-pbtn { text-decoration: none; }
.rl-pbtn--primary, .rl-portal a.rl-pbtn--primary { background: var(--rl-brand); color: var(--rl-brand-ink); }
.rl-pbtn--primary:hover { background: var(--rl-brand-hover); }
.rl-pbtn--secondary, .rl-portal a.rl-pbtn--secondary { background: var(--rl-surface); color: var(--rl-brand-text); border-color: var(--rl-border-strong); }
.rl-pbtn--secondary:hover { background: var(--rl-selected); }
.rl-pbtn--ghost, .rl-portal a.rl-pbtn--ghost { background: transparent; color: var(--rl-brand-text); }
.rl-pbtn--ghost:hover { background: var(--rl-hover); }
.rl-pbtn--danger { background: var(--rl-bad-bg); color: var(--rl-bad); }
.rl-pbtn--sm { min-height: 36px; padding: 6px 12px; font-size: var(--rl-fs-sm); }
.rl-pbtn[disabled], .rl-pbtn[aria-disabled="true"] { color: var(--rl-disabled-ink); background: var(--rl-sunken); border-color: var(--rl-border); cursor: not-allowed; }
.rl-pbtn[aria-busy="true"] { cursor: progress; }
.rl-pbtn[aria-busy="true"]::after {
  content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: rl-pspin .8s linear infinite;
}
@keyframes rl-pspin { to { transform: rotate(360deg); } }
.rl-pbtns { display: flex; gap: var(--rl-s-2); flex-wrap: wrap; margin: var(--rl-s-3) 0 0; }
.rl-pbtns--split > * { flex: 1 1 160px; }
.rl-pback { margin: 0 0 var(--rl-s-2) calc(-1 * var(--rl-s-2)); padding-left: var(--rl-s-2); }
.rl-pback svg { width: 18px; height: 18px; }

.rl-pbanner { border: 1px solid transparent; border-radius: var(--rl-r-sm); padding: 10px 12px; font-size: var(--rl-fs-sm); margin: var(--rl-s-2) 0; }
.rl-pbanner--warn { background: var(--rl-warn-bg); color: var(--rl-warn); }
.rl-pbanner--bad { background: var(--rl-bad-bg); color: var(--rl-bad); font-weight: 600; }
.rl-pbanner--info { background: var(--rl-info-bg); color: var(--rl-info); }
.rl-pbanner--ok { background: var(--rl-ok-bg); color: var(--rl-ok); }
.rl-pbanner--neutral { background: var(--rl-neutral-bg); color: var(--rl-neutral); }
.rl-pbanner__actions { display: flex; gap: var(--rl-s-2); flex-wrap: wrap; margin-top: var(--rl-s-2); }

.rl-pmsg-line { font-size: var(--rl-fs-sm); color: var(--rl-ink-2); margin: var(--rl-s-2) 0 0; min-height: 1em; }
.rl-pmsg-line.is-bad { color: var(--rl-bad); }
.rl-pmsg-line.is-ok { color: var(--rl-ok); }

/* ---- lists ------------------------------------------------------------- */
.rl-plist { list-style: none; margin: 0; padding: 0; }
.rl-prow { display: flex; align-items: center; gap: var(--rl-s-3); min-height: 44px; padding: var(--rl-s-3) 0; border-top: 1px solid var(--rl-border); color: inherit; }
.rl-portal a.rl-prow { color: inherit; text-decoration: none; }
.rl-plist > li:first-child > .rl-prow { border-top: 0; }
a.rl-prow:hover .rl-prow__title { text-decoration: underline; }
.rl-prow__main { flex: 1 1 auto; min-width: 0; }
.rl-prow__title { font-weight: 600; color: var(--rl-ink); overflow-wrap: anywhere; }
.rl-prow__sub { font-size: var(--rl-fs-sm); color: var(--rl-ink-3); }
.rl-prow__meta { display: flex; gap: var(--rl-s-1); flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; }
.rl-prow__go { color: var(--rl-ink-3); flex: 0 0 auto; }
.rl-prow__go svg { width: 18px; height: 18px; display: block; }
@media (max-width: 480px) {
  .rl-prow { flex-wrap: wrap; }
  .rl-prow__meta { justify-content: flex-start; }
}

.rl-pempty { text-align: center; padding: var(--rl-s-6) var(--rl-s-4); }
.rl-pempty__title { font-weight: 600; margin: 0 0 var(--rl-s-3); }

/* ---- skeleton ------------------------------------------------------------ */
.rl-pskel { display: grid; gap: var(--rl-s-2); }
.rl-pskel__line, .rl-pskel__block {
  border-radius: var(--rl-r-sm); background: linear-gradient(90deg, var(--rl-skel-base) 25%, var(--rl-skel-shine) 50%, var(--rl-skel-base) 75%);
  background-size: 200% 100%; animation: rl-pshine 1.4s ease-in-out infinite;
}
.rl-pskel__line { height: 14px; }
.rl-pskel__line--short { width: 55%; }
.rl-pskel__block { height: 96px; }
@keyframes rl-pshine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rl-pskel__line, .rl-pskel__block, .rl-pbtn[aria-busy="true"]::after { animation: none; } }

/* ---- Home ---------------------------------------------------------------- */
.rl-home-moves { margin: var(--rl-s-2) 0; }
.rl-home-moves .rl-prow { padding: var(--rl-s-2) 0; }
.rl-home-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.rl-pemergency { display: flex; gap: var(--rl-s-2); align-items: flex-start; background: var(--rl-surface-2); border: 1px solid var(--rl-border); border-radius: var(--rl-r-md); padding: var(--rl-s-3) var(--rl-s-4); margin: 0 0 var(--rl-s-4); font-size: var(--rl-fs-sm); color: var(--rl-ink-2); }
.rl-pemergency svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--rl-bad); margin-top: 1px; }
.rl-pemergency a { font-weight: 600; white-space: nowrap; }
.rl-home-actions { margin: 0 0 var(--rl-s-4); }

/* ---- Repairs: list, new form, detail -------------------------------------- */
.rl-portal .ticket-card { border-color: var(--rl-border); border-radius: var(--rl-r-sm); background: var(--rl-surface); }
.rl-prepair-guide { background: var(--rl-surface-2); border: 1px solid var(--rl-border); border-radius: var(--rl-r-md); padding: var(--rl-s-3) var(--rl-s-4); margin: 0 0 var(--rl-s-4); font-size: var(--rl-fs-sm); color: var(--rl-ink-2); }
.rl-prepair-guide ul { margin: var(--rl-s-1) 0 0; padding-left: 1.1rem; }
.rl-prepair-guide li { margin: 2px 0; }
.rl-prepair-head { display: flex; align-items: center; justify-content: space-between; gap: var(--rl-s-2); flex-wrap: wrap; margin: 0 0 var(--rl-s-2); }
.rl-prepair-head h3 { margin: 0; }

.rl-pstepper { list-style: none; margin: var(--rl-s-3) 0; padding: 0; display: flex; flex-direction: column; }
.rl-pstep { position: relative; padding: 0 0 var(--rl-s-4) 30px; min-height: 36px; }
.rl-pstep::before {
  content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--rl-border-strong); background: var(--rl-surface);
}
.rl-pstep::after { content: ''; position: absolute; left: 10px; top: 22px; bottom: 2px; width: 2px; background: var(--rl-border); }
.rl-pstep:last-child { padding-bottom: 0; }
.rl-pstep:last-child::after { display: none; }
.rl-pstep--done::before { background: var(--rl-ok); border-color: var(--rl-ok); }
.rl-pstep--done::after { background: var(--rl-green-300); }
.rl-pstep--current::before { background: var(--rl-brand); border-color: var(--rl-brand); box-shadow: 0 0 0 4px var(--rl-brand-soft); }
.rl-pstep--skipped::before { border-style: dashed; }
.rl-pstep__label { display: block; font-weight: 600; font-size: var(--rl-fs-sm); color: var(--rl-ink); }
.rl-pstep--todo .rl-pstep__label, .rl-pstep--skipped .rl-pstep__label { color: var(--rl-ink-3); font-weight: 500; }
.rl-pstep__date { display: block; font-size: var(--rl-fs-xs); color: var(--rl-ink-3); }
@media (min-width: 768px) {
  .rl-pstepper { flex-direction: row; }
  .rl-pstep { flex: 1 1 0; padding: 26px var(--rl-s-2) 0 0; min-height: 0; }
  .rl-pstep::before { left: 0; top: 0; }
  .rl-pstep::after { left: 20px; right: 4px; top: 7px; bottom: auto; width: auto; height: 2px; }
  .rl-pstep:last-child::after { display: none; }
}

.rl-pconfirm { background: var(--rl-warn-bg); border-radius: var(--rl-r-md); padding: var(--rl-s-4); margin: var(--rl-s-3) 0 0; }
.rl-pconfirm__q { font-weight: 700; color: var(--rl-ink); margin: 0; }
.rl-pconfirm .rl-pfield { margin-top: var(--rl-s-3); }

.rl-pdesc { white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--rl-s-2) 0; }
.rl-pphotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--rl-s-2); margin: var(--rl-s-3) 0 0; }
.rl-pphoto { display: block; aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--rl-border); border-radius: var(--rl-r-sm); overflow: hidden; background: var(--rl-sunken); cursor: zoom-in; }
.rl-pphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-pphoto--file { display: flex; align-items: center; justify-content: center; font-size: var(--rl-fs-xs); color: var(--rl-ink-2); text-decoration: none; cursor: pointer; padding: var(--rl-s-2); text-align: center; }
.rl-pviewer { position: fixed; inset: 0; z-index: 2147482000; background: var(--rl-n-900); display: flex; align-items: center; justify-content: center; padding: var(--rl-s-12) var(--rl-s-4) var(--rl-s-4); }
.rl-pviewer img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--rl-r-sm); }
.rl-pviewer__close { position: absolute; top: var(--rl-s-3); right: var(--rl-s-3); width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--rl-n-800); color: var(--rl-n-0); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rl-pviewer__close svg { width: 22px; height: 22px; }
.rl-pviewer__open { position: absolute; top: var(--rl-s-4); left: var(--rl-s-4); color: var(--rl-n-100); font-size: var(--rl-fs-sm); }

.rl-pthread { display: flex; flex-direction: column; gap: var(--rl-s-2); margin: var(--rl-s-3) 0; }
.rl-pmsg { max-width: 85%; align-self: flex-start; padding: var(--rl-s-2) var(--rl-s-3); border: 1px solid var(--rl-border); border-radius: var(--rl-r-md); background: var(--rl-surface-2); overflow-wrap: anywhere; }
.rl-pmsg--out { align-self: flex-end; background: var(--rl-brand-soft); border-color: transparent; }
.rl-pmsg__head { font-size: var(--rl-fs-xs); color: var(--rl-ink-3); margin-bottom: 2px; }
.rl-pmsg__body { white-space: pre-wrap; }
.rl-pmeta { align-self: center; text-align: center; font-size: var(--rl-fs-xs); color: var(--rl-ink-3); max-width: 92%; }
.rl-pmeta strong { color: var(--rl-ink-2); font-weight: 600; }

/* ---- forms --------------------------------------------------------------- */
.rl-pfield { margin: 0 0 var(--rl-s-4); }
.rl-pfield__label, .rl-pfieldset > legend { display: block; font-weight: 600; font-size: var(--rl-fs-sm); color: var(--rl-ink); margin: 0 0 var(--rl-s-1); padding: 0; }
.rl-pfield__hint { font-size: var(--rl-fs-xs); color: var(--rl-ink-3); margin: var(--rl-s-1) 0 0; }
/* 16px minimum: iOS Safari zooms the page into any field smaller than that. */
.rl-pinput, .rl-ptextarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rl-border-strong); border-radius: var(--rl-r-sm);
  background: var(--rl-surface); color: var(--rl-ink); font: inherit; font-size: 16px;
}
.rl-portal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.rl-portal select, .rl-portal textarea { font-size: max(16px, 1em); }
.rl-ptextarea { resize: vertical; min-height: 72px; }
.rl-pinput[aria-invalid="true"], .rl-ptextarea[aria-invalid="true"] { border-color: var(--rl-bad); }
.rl-pinput:disabled, .rl-ptextarea:disabled { background: var(--rl-sunken); color: var(--rl-disabled-ink); }
.rl-pfieldset { border: 0; padding: 0; margin: 0 0 var(--rl-s-4); min-width: 0; }
.rl-pcheck { display: flex; gap: var(--rl-s-2); align-items: flex-start; font-size: var(--rl-fs-sm); color: var(--rl-ink); cursor: pointer; margin: var(--rl-s-2) 0; min-height: 28px; }
.rl-portal .rl-pcheck input { width: auto; flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--rl-brand); }
.rl-pform-facts { font-size: var(--rl-fs-sm); color: var(--rl-ink-2); margin: var(--rl-s-2) 0; }

/* Account: property shown as text for active tenants */
.rl-pprop { background: var(--rl-surface-2); border: 1px solid var(--rl-border); border-radius: var(--rl-r-sm); padding: var(--rl-s-3); margin: 0 0 var(--rl-s-4); font-size: var(--rl-fs-sm); color: var(--rl-ink-2); }
.rl-pprop strong { color: var(--rl-ink); }

/* Moving out */
.rl-pnotice { border: 1px solid var(--rl-border); border-radius: var(--rl-r-sm); padding: var(--rl-s-3); margin: var(--rl-s-2) 0; background: var(--rl-surface-2); }
.rl-pnotice p { margin: var(--rl-s-1) 0; font-size: var(--rl-fs-sm); }
.rl-pnotice__addr { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- Pay chooser ----------------------------------------------------------- */
.rl-pstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rl-s-2); margin: var(--rl-s-3) 0; }
.rl-pstat { background: var(--rl-surface-2); border: 1px solid var(--rl-border); border-radius: var(--rl-r-sm); padding: var(--rl-s-3) var(--rl-s-2); text-align: center; min-width: 0; }
.rl-pstat__value { font-size: var(--rl-fs-xl); font-weight: 700; color: var(--rl-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rl-pstat__value.is-owed { color: var(--rl-bad); }
.rl-pstat__value.is-clear { color: var(--rl-ok); }
.rl-pstat__label { font-size: var(--rl-fs-xs); color: var(--rl-ink-3); }
@media (max-width: 420px) { .rl-pstat__value { font-size: var(--rl-fs-lg); } }
.rl-pay-primary { border: 1px solid var(--rl-border); border-radius: var(--rl-r-md); background: var(--rl-surface-2); padding: var(--rl-s-4); margin: var(--rl-s-3) 0; }
.rl-pay-primary__title { font-weight: 700; margin: 0 0 var(--rl-s-1); }
.rl-pay-primary .rl-pbtn { width: 100%; }
@media (min-width: 768px) { .rl-pay-primary .rl-pbtn { width: auto; min-width: 220px; } }
.rl-pay-flags { display: flex; gap: var(--rl-s-1); flex-wrap: wrap; margin: var(--rl-s-2) 0 0; }
.rl-pay-other { border: 1px solid var(--rl-border); border-radius: var(--rl-r-md); background: var(--rl-surface); margin: var(--rl-s-3) 0; }
.rl-pay-other > summary { padding: var(--rl-s-3) var(--rl-s-4); min-height: 44px; font-weight: 600; cursor: pointer; color: var(--rl-ink); }
.rl-pay-method { padding: var(--rl-s-3) var(--rl-s-4); border-top: 1px solid var(--rl-border); }
.rl-pay-method__title { font-weight: 600; margin: 0 0 var(--rl-s-1); color: var(--rl-ink); }
.rl-pay-method p { margin: var(--rl-s-1) 0; font-size: var(--rl-fs-sm); }
.rl-pay-zelle p:first-child { margin-top: 0; }
.rl-pay-handle { font-size: var(--rl-fs-lg); font-weight: 700; overflow-wrap: anywhere; }
.rl-pay-pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--rl-sunken); border: 1px solid var(--rl-border); border-radius: var(--rl-r-sm); padding: var(--rl-s-2) var(--rl-s-3); margin: var(--rl-s-2) 0 0; font: var(--rl-fs-sm)/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rl-pay-secure { font-size: var(--rl-fs-xs); color: var(--rl-ink-3); margin: var(--rl-s-2) 0 0; }

/* Statement */
.rl-ptable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rl-border); border-radius: var(--rl-r-md); background: var(--rl-surface); }
.rl-ptable { width: 100%; border-collapse: collapse; font-size: var(--rl-fs-sm); }
.rl-ptable th { text-align: left; font-size: var(--rl-fs-xs); font-weight: 600; color: var(--rl-ink-3); padding: var(--rl-s-2) var(--rl-s-3); border-bottom: 1px solid var(--rl-border); white-space: nowrap; }
.rl-ptable td { padding: var(--rl-s-2) var(--rl-s-3); border-bottom: 1px solid var(--rl-border); vertical-align: top; }
.rl-ptable tr:last-child td { border-bottom: 0; }
.rl-ptable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl-ptable .is-credit { color: var(--rl-ok); }
.rl-ptable .is-held td { color: var(--rl-ink-3); font-style: italic; }
.rl-ptable .is-bal { font-weight: 600; }

/* ---- fixes on top of the legacy portal styles ------------------------------- */
/* Card titles use the UI font; Montserrat stays for page titles only (§2.3). */
.rl-portal .rl-pcard__title { font-family: var(--rl-font-ui); font-size: var(--rl-fs-lg); margin: 0; }
.rl-pcard__head > div { min-width: 0; }
/* styles.css removes the focus outline on form inputs; put a visible one back. */
.rl-portal .form-group input:focus-visible, .rl-portal .form-group textarea:focus-visible,
.rl-portal .select-input:focus-visible, .rl-pinput:focus-visible, .rl-ptextarea:focus-visible {
  outline: 2px solid var(--rl-focus); outline-offset: 2px;
}
/* Legacy notices and the status line, on our tokens. */
.rl-portal .notice { border-radius: var(--rl-r-sm); font-size: var(--rl-fs-sm); }
.rl-portal .notice.info { background: var(--rl-info-bg); color: var(--rl-info); border-color: transparent; }
.rl-portal .notice.warn { background: var(--rl-warn-bg); color: var(--rl-warn); border-color: transparent; }
.rl-portal .notice.ok { background: var(--rl-ok-bg); color: var(--rl-ok); border-color: transparent; }
.rl-portal .rep-wrap > [id$="Panel"] h2, .rl-portal #tenantApp h2 { font-size: var(--rl-fs-xl); }
.rl-portal #tenantApp > div > h2:first-child, .rl-portal .rl-pcard > h2:first-child { margin-top: 0; }
.rl-portal #myTickets { padding-top: var(--rl-s-1); padding-bottom: var(--rl-s-1); }
.rl-portal #tkFileList { margin: var(--rl-s-2) 0 0; }
.rl-portal #tkStatus { border-radius: var(--rl-r-sm); }
.rl-portal .progress > div { background: var(--rl-bar); }
.rl-portal .progress { background: var(--rl-bar-track); }
.rl-portal #heldNote { margin: 0 0 var(--rl-s-2); }
.rl-portal #payReceipts h3 { margin-top: var(--rl-s-6); }
.rl-portal .rl-pay-method .hint { font-size: var(--rl-fs-xs); }
.rl-portal .rl-pay-other > summary::marker { color: var(--rl-ink-3); }
/* Phones: 16px gutters and no sideways scroll. */
@media (max-width: 767px) {
  .rl-portal .container { padding: 0 var(--rl-gutter); }
  .rl-portal .contact-form-wrapper { padding: var(--rl-s-4); }
  .rl-portal-bar__inner { padding-left: var(--rl-gutter); padding-right: var(--rl-gutter); }
  .rl-portal .logo { font-size: var(--rl-fs-lg); }
  .rl-portal .logo img { width: 40px; height: 40px; }
}
/* setLandlordBrand() puts the platform credit in a <small> under the name. */
.rl-portal .logo span { line-height: 1.15; }
.rl-portal .logo span small { display: block; font-weight: 400; font-size: var(--rl-fs-xs); color: var(--rl-ink-3); letter-spacing: 0; }
.rl-portal .rl-pviewer__open { color: var(--rl-n-100); }
.rl-pviewer__close:focus-visible { outline: 2px solid var(--rl-n-0); outline-offset: 2px; }
.rl-portal h2.rl-pcard__title { font-size: var(--rl-fs-xl); }