/* ============================================================
   Origin Tenant Portal — tenants.originprg.com
   The look is the approved mock (Marco 9/19/26: "stripe site is great"): one 640px
   column, 17px base, serif headings and figures, a hero card, a quiet facts table.
   Tokens are the investor site's; nothing new is invented here.
   No build step, no framework, no external font.
   ============================================================ */

:root {
  --paper:#FAFAF8; --card:#FFFFFF; --ink:#1E2926; --ink-soft:#55645F; --ink-faint:#8A968F;
  --line:#E3E7E2; --line-soft:#EEF1EC; --brand:#14544A; --brand-deep:#0E3F38; --brand-tint:#EAF2EF;
  --pos:#1B7A4E; --warn:#9A6B12; --warn-tint:#FBF3E3; --pending:#F3F5F2;
  /* WHAT READS ON THE BRAND FILL. A hardcoded white on `.btn.primary` was the one colour on
     this page that did not come from a token, and in dark mode the fill is a LIGHT mint
     (#5FB39F) — white on it is a contrast ratio of about 2:1, on the button a tenant presses
     to pay their rent. It is a token like every other colour here, redefined per theme. */
  --on-brand:#FFFFFF;
  --shadow:0 1px 2px rgba(30,41,38,.06), 0 8px 24px rgba(30,41,38,.06);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,"Segoe UI",system-ui,Roboto,"Helvetica Neue",sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#101715; --card:#182220; --ink:#E8ECE9; --ink-soft:#A9B5AF; --ink-faint:#748079;
    --line:#2A3632; --line-soft:#212C28; --brand:#5FB39F; --brand-deep:#7FC7B5; --brand-tint:#1B2E29;
    --pos:#6FC49A; --warn:#D9A84B; --warn-tint:#2E2716; --pending:#1D2724;
    --on-brand:#0E1B18;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"] {
  --paper:#101715; --card:#182220; --ink:#E8ECE9; --ink-soft:#A9B5AF; --ink-faint:#748079;
  --line:#2A3632; --line-soft:#212C28; --brand:#5FB39F; --brand-deep:#7FC7B5; --brand-tint:#1B2E29;
  --pos:#6FC49A; --warn:#D9A84B; --warn-tint:#2E2716; --pending:#1D2724;
  --on-brand:#0E1B18;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}

* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.55 var(--sans); padding-block:0 48px; padding-inline:16px; }
a { color:var(--brand); }
[hidden] { display:none !important; }
.wrap { max-width:640px; margin:0 auto; }

/* Brand logo pair: the markup carries both transparent PNGs, one visible per theme. */
.logo-dark { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display:none; }
  :root:not([data-theme="light"]) .logo-dark { display:inline-block; }
}
:root[data-theme="dark"] .logo-light { display:none; }
:root[data-theme="dark"] .logo-dark { display:inline-block; }

/* ---------- chrome ---------- */
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0 18px; }
.wordmark { display:inline-flex; align-items:center; text-decoration:none; line-height:0; }
.wordmark .brand-logo { height:22px; width:auto; }
.who { font-size:14px; color:var(--ink-soft); display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.who a, .who button.linkish { color:var(--ink-soft); }
button.linkish { background:none; border:0; padding:0; font:inherit; font-size:14px; color:var(--ink-soft); text-decoration:underline; cursor:pointer; }
button.linkish:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:3px; }

.switchrow { margin:4px 0 0; font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.switchrow select { font:inherit; font-size:15px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); max-width:100%; }
.switchrow select:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }

.lease-title { margin:18px 0 6px; }
.lease-title h1 { font:400 26px/1.25 var(--serif); margin:0; text-wrap:balance; }
.lease-title .sub { color:var(--ink-soft); font-size:15px; margin-top:4px; }

.tabs { display:flex; gap:22px; border-bottom:1px solid var(--line); margin:18px 0 22px; }
.tabs button { background:none; border:0; padding:10px 0 12px; font:inherit; font-size:15px; color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs button.on { color:var(--ink); border-bottom-color:var(--brand); font-weight:600; }
.tabs button:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:3px; }
main:focus { outline:none; }

/* ---------- the hero ---------- */
.hero { background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:28px 28px 24px; }
.hero .k { font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.hero .amt { font:400 46px/1.1 var(--serif); font-variant-numeric:tabular-nums; margin:6px 0 4px; }
.hero .due { color:var(--ink-soft); font-size:15px; }
.hero .due.past { color:var(--warn); }
.hero .settled { font-size:17px; color:var(--ink-soft); margin-top:10px; }
.acts { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; align-items:center; }
.btn { font:inherit; font-size:16px; padding:12px 22px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.btn.primary { background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:600; }
.btn.primary:hover { background:var(--brand-deep); border-color:var(--brand-deep); color:var(--on-brand); }
.btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.btn.quiet { border-color:transparent; color:var(--brand); padding-inline:8px; }
.btn[disabled] { opacity:.55; cursor:default; }
.fine { font-size:14px; color:var(--ink-faint); margin-top:14px; }
.autopay-on { font-size:15px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

.pending { margin-top:14px; background:var(--pending); border:1px dashed var(--line); border-radius:8px; padding:12px 16px; font-size:15px; color:var(--ink-soft); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pending b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

.notice { margin-top:14px; border:1px solid var(--line); border-radius:8px; padding:12px 16px; font-size:15px; color:var(--ink-soft); background:var(--card); }
.notice.warn { background:var(--warn-tint); border-color:var(--warn); color:var(--ink); }

.facts { margin-top:22px; border-top:1px solid var(--line); }
.facts .row { display:grid; grid-template-columns:1fr auto; gap:16px; padding:13px 0; border-bottom:1px solid var(--line-soft); font-size:15px; }
.facts .row .k { color:var(--ink-soft); }
.facts .row .v { text-align:right; font-variant-numeric:tabular-nums; }
.facts .row .v small { display:block; color:var(--ink-faint); font-size:13px; font-variant-numeric:normal; }

/* ---------- tables ---------- */
.section-h { font:400 20px/1.3 var(--serif); margin:30px 0 10px; }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--card); }
table { width:100%; border-collapse:collapse; font-size:15px; }
th { text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--card); }
td { padding:12px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
tr:last-child td { border-bottom:0; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* A date is one word. Without this a 400px column breaks "Aug 1, 2025" over three lines and
   the ledger stops looking like a ledger; the wrapper scrolls if that costs width. */
td.nw, th.nw { white-space:nowrap; }
td .memo { display:block; color:var(--ink-faint); font-size:13px; margin-top:2px; }
tr.pend td { background:var(--pending); color:var(--ink-soft); }
tr.pend td .memo { color:var(--ink-faint); }
.neg { color:var(--ink-soft); }
.more { display:block; width:100%; text-align:center; padding:12px; font-size:14px; background:none; border:0; border-top:1px solid var(--line-soft); color:var(--brand); font-family:inherit; cursor:pointer; }
.more:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.tag { display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:var(--brand-tint); color:var(--brand-deep); letter-spacing:.02em; }
.empty { padding:28px 16px; text-align:center; color:var(--ink-faint); font-size:15px; }
.foot { margin-top:40px; font-size:13px; color:var(--ink-faint); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---------- loading and failure ---------- */
.skel { background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:28px; }
.skel .bar { height:14px; border-radius:7px; background:var(--line-soft); margin-bottom:14px; }
.skel .bar.wide { width:70%; } .skel .bar.tall { height:38px; width:45%; } .skel .bar.short { width:35%; }
.loading { padding:28px 16px; text-align:center; color:var(--ink-faint); font-size:15px; }
.failed { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:24px; font-size:15px; color:var(--ink-soft); }
.failed h2 { font:400 20px/1.3 var(--serif); margin:0 0 8px; color:var(--ink); }
.failed .btn { margin-top:16px; }

/* ---------- sign in / check email / redeem ---------- */
.login-wrap { min-height:70vh; display:flex; align-items:center; justify-content:center; padding:32px 0; }
.login-card { background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:32px 30px; width:100%; max-width:440px; }
.login-card .wordmark { margin-bottom:26px; }
.login-card h1 { font:400 26px/1.25 var(--serif); margin:0 0 10px; }
.login-card .lede { color:var(--ink-soft); font-size:15px; margin:0 0 20px; }
.login-card .field { margin-bottom:18px; }
.login-card label { display:block; font-size:14px; color:var(--ink-soft); margin-bottom:6px; }
.login-card input { display:block; width:100%; font:inherit; font-size:17px; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); }
.login-card input:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
.login-card .btn { width:100%; }
.login-hint { font-size:13px; color:var(--ink-faint); margin:16px 0 0; }
.login-foot { font-size:13px; color:var(--ink-faint); margin:14px 0 0; }
.sentto { display:block; font-size:17px; font-variant-numeric:tabular-nums; margin:2px 0 14px; }
.au-note { background:var(--warn-tint); border:1px solid var(--warn); color:var(--ink); border-radius:8px; padding:10px 12px; font-size:14px; margin-bottom:16px; }
.au-back { display:inline-block; margin-top:16px; font-size:14px; }

/* ---------- modal ---------- */
.overlay { position:fixed; inset:0; background:rgba(16,23,21,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:10; overflow-y:auto; }
.modal { background:var(--card); color:var(--ink); border-radius:12px; max-width:460px; width:100%; padding:24px; box-shadow:var(--shadow); }
.modal h2 { font:400 22px/1.3 var(--serif); margin:0 0 14px; }
.modal p { font-size:15px; color:var(--ink-soft); margin:0 0 14px; }
.fld { display:block; margin-bottom:14px; font-size:14px; color:var(--ink-soft); }
.fld input { display:block; width:100%; margin-top:6px; font:inherit; font-size:18px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); font-variant-numeric:tabular-nums; }
.fld input:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
.from { font-size:15px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); }
.legal { font-size:13px; color:var(--ink-faint); margin:14px 0 18px; line-height:1.5; }
.legal.mandate { max-height:34vh; overflow-y:auto; border:1px solid var(--line); border-radius:8px; padding:12px 14px; background:var(--paper); }
.mfoot { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.merr { font-size:14px; color:var(--warn); margin:0 0 12px; }

@media (max-width:480px) {
  .hero { padding:22px 18px; }
  .hero .amt { font-size:40px; }
  .top { padding-top:16px; }
  .acts .btn { width:100%; }
  .mfoot .btn { flex:1 1 auto; }
  /* Four columns in a 368px column: the running balance is the reason the page exists, so
     the padding gives way before the table starts scrolling sideways and hides it. */
  table { font-size:14px; }
  th, td { padding:10px 8px; }
  td .memo { font-size:12px; }
}
@media (prefers-reduced-motion: no-preference) { .btn { transition:background .15s, border-color .15s; } }