/* ============================================================
   Origin Maint — maint.originprg.com
   The maintenance manager's site, phone first (iPhone Safari is the target). The tokens are
   the tenant site's and the investor site's (evergreen on paper-white, serif wordmark,
   tabular figures); nothing new is invented here. One column, 44px touch targets, 16px or
   larger in every input (a smaller one makes iOS zoom the page), nothing a person reads under
   14px (Marco 9/21/26: no tiny text). 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;
  --on-brand:#FFFFFF;
  --shadow:0 1px 2px rgba(30,41,38,.06), 0 6px 14px -12px rgba(30,41,38,.26);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,"Segoe UI",system-ui,Roboto,"Helvetica Neue",sans-serif;
}
/* ⛔ THE DARK --ink-faint STAYS #8C9892, NOT THE TENANT SITE'S #748079 (Maint ledger round 9/28/26,
   §12 E1, weighed and left): on this site --ink-faint prints the 14px table heads and month subheads
   people read, and #748079 on the dark card is about 4.0:1 against #8C9892's 5.4:1 — under the 4.5:1
   a 14px word needs. The site's legibility floor wins over matching the tenant's token. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#101715; --card:#182220; --ink:#E8ECE9; --ink-soft:#A9B5AF; --ink-faint:#8C9892;
    --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 6px 14px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --paper:#101715; --card:#182220; --ink:#E8ECE9; --ink-soft:#A9B5AF; --ink-faint:#8C9892;
  --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 6px 14px -12px rgba(0,0,0,.7);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink); font:17px/1.55 var(--sans);
  padding-top:env(safe-area-inset-top);
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  padding-bottom:0;
  overflow-x:hidden;
}
a { color:var(--brand); }
[hidden] { display:none !important; }
.wrap { max-width:640px; margin:0 auto; }
button, input, select, textarea { font:inherit; color:inherit; }
.offscreen { position:fixed; left:-10000px; top:0; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.vis-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- chrome ---------- */
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0 10px; }
/* The house logo (9/25/26): the tenant site's pair of transparent PNGs, one shown per theme, with
   "Maint" beside it in the serif. */
.wordmark { display:inline-flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; }
.wordmark .brand-logo { height:22px; width:auto; }
.wordmark .wm-label { font:400 22px/1 var(--serif); color:var(--brand); letter-spacing:.01em; }
.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; }
button.linkish { background:none; border:0; padding:0 4px; min-height:44px; min-width:44px; font-size:16px; color:var(--ink-soft); text-decoration:underline; cursor:pointer; }
button.linkish:focus-visible, .wordmark:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
.topacts { display:flex; align-items:center; gap:10px; }
main:focus { outline:none; }
.foot { margin-top:40px; padding:14px 0 calc(24px + env(safe-area-inset-bottom)); border-top:1px solid var(--line-soft); font-size:15px; color:var(--ink-soft); }
.foot:empty { display:none; }

h1 { font:400 26px/1.25 var(--serif); margin:10px 0 6px; text-wrap:balance; }
h2 { font:400 20px/1.3 var(--serif); margin:28px 0 12px; }
.sub { color:var(--ink-soft); font-size:16px; margin:0 0 6px; }
.back { display:inline-flex; align-items:center; min-height:44px; font-size:16px; text-decoration:none; }
.back:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 20px; font-size:17px; line-height:1.2;
  border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.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); }
.btn.block { display:flex; width:100%; }
.btn.big { min-height:56px; font-size:18px; }
.btn.quiet { border-color:transparent; background:none; color:var(--brand); padding-inline:8px; }
.btn.danger { color:var(--warn); }
.btn[disabled] { opacity:.5; cursor:default; }
.btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* ---------- home: the report list ---------- */
/* the list's Building / Unit pull-downs (9/27/26) */
.rfilter { display:flex; gap:10px; }
.rfilter .field { flex:1 1 0; min-width:0; margin:0 0 12px; }
.rlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rcard {
  display:block; padding:14px 16px; min-height:44px; background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); text-decoration:none;
}
.rcard:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.rcard .rtop { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.rcard .bld { font-weight:600; font-size:17px; min-width:0; overflow-wrap:anywhere; }
.rcard .when { font-size:15px; color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums; }
.rcard .rmid { display:block; font-size:16px; color:var(--ink-soft); margin:2px 0 8px; overflow-wrap:anywhere; }
.empty { padding:24px 16px; text-align:center; color:var(--ink-soft); font-size:16px; background:var(--card); border:1px dashed var(--line); border-radius:10px; }

.chip { display:inline-block; font-size:14px; line-height:1.3; padding:4px 10px; border-radius:999px; border:1px solid transparent; }
.chip.draft { background:var(--pending); color:var(--ink-soft); border-color:var(--line); }
.chip.locked { background:var(--pending); color:var(--ink); border-color:var(--line); }
.chip.invoiced { background:var(--brand-tint); color:var(--pos); font-weight:600; }
/* The Tenant ledger state word (9/28/26): amber when somebody at Origin should look, quiet otherwise
   (the server's `ledger_status.tone`). */
.chip.warn { background:var(--warn-tint); color:var(--warn); border-color:var(--warn-tint); font-weight:600; }
.chip.quiet { background:var(--pending); color:var(--ink-soft); border-color:var(--line); }
.chip.lstate { white-space:nowrap; }

/* ---------- the report form ---------- */
.field { margin:0 0 16px; }
.field label, .flabel { display:block; font-size:15px; color:var(--ink-soft); margin:0 0 6px; }
.inp, select.inp, textarea.inp {
  display:block; width:100%; min-height:48px; font-size:17px; padding:11px 12px;
  border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink);
  -webkit-appearance:none; appearance:none;
}
select.inp {
  padding-right:40px;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
textarea.inp { min-height:120px; resize:vertical; line-height:1.45; }
.inp:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
.inp[disabled], .inp[readonly] { background:var(--pending); color:var(--ink); opacity:1; -webkit-text-fill-color:var(--ink); }
.inp.bad { border-color:var(--warn); }
.inp.amt { text-align:right; font-variant-numeric:tabular-nums; }

.statebar { margin:12px 0 18px; padding:12px 14px; border-radius:8px; font-size:16px; border:1px solid var(--line); background:var(--pending); color:var(--ink); }
.statebar.invoiced { background:var(--brand-tint); border-color:var(--brand-tint); color:var(--pos); font-weight:600; }
.hint { font-size:15px; color:var(--ink-soft); margin:0 0 12px; }
/* After a send (9/25/26): New report under the Sent bar; a correction is a new report. */
.sentnext { margin:0 0 22px; }
.sentnext .hint { margin:10px 0 0; text-align:center; }
.merr { font-size:15px; color:var(--warn); margin:8px 0 12px; }
.merr:empty { display:none; }

/* photos and videos */
.pickrow { display:grid; grid-template-columns:1fr; gap:10px; margin:0 0 14px; }
@media (min-width:460px) { .pickrow { grid-template-columns:1fr 1fr; } }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; }
.tiles:empty { display:none; }
.tile { position:relative; aspect-ratio:1 / 1; border-radius:8px; overflow:hidden; background:var(--pending); border:1px solid var(--line); }
.tile img { display:block; width:100%; height:100%; object-fit:cover; }
/* The plain card (a HEIC the browser cannot draw, or a preview still coming): the file's name
   sits at the foot, clear of the remove button in the top corner. */
.tile .fname { position:absolute; inset:0; display:flex; align-items:flex-end; padding:44px 8px 8px; font-size:14px; line-height:1.3; color:var(--ink-soft); overflow:hidden; overflow-wrap:anywhere; }
.tile .kind { position:absolute; left:6px; top:8px; font-size:14px; line-height:1.2; padding:2px 8px; border-radius:999px; background:rgba(16,23,21,.72); color:#FFFFFF; }
.tile .x {
  position:absolute; top:0; right:0; width:44px; height:44px; padding:0; border:0; background:none;
  cursor:pointer; display:flex; align-items:flex-start; justify-content:flex-end;
}
.tile .x span { display:flex; align-items:center; justify-content:center; width:28px; height:28px; margin:6px 6px 0 0; border-radius:50%; background:rgba(16,23,21,.72); color:#FFFFFF; font-size:20px; line-height:1; }
.tile .x:focus-visible span { outline:2px solid var(--brand); outline-offset:1px; }
.tile .veil { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:rgba(250,250,248,.62); text-align:center; padding:6px; }
.tile .veil .vw { font-size:14px; line-height:1.25; color:var(--ink); font-weight:600; }
.tile.failed .veil { background:rgba(251,243,227,.9); }
.tile.failed .veil .vw { color:var(--warn); }
.tile .retry { min-height:40px; padding:6px 12px; font-size:15px; }
.ring { width:44px; height:44px; transform:rotate(-90deg); }
.ring circle { fill:none; stroke-width:4; }
.ring .rb { stroke:var(--line); }
.ring .rf { stroke:var(--brand); stroke-linecap:round; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tile .veil { background:rgba(16,23,21,.66); }
  :root:not([data-theme="light"]) .tile.failed .veil { background:rgba(46,39,22,.92); }
}
:root[data-theme="dark"] .tile .veil { background:rgba(16,23,21,.66); }
:root[data-theme="dark"] .tile.failed .veil { background:rgba(46,39,22,.92); }

/* damages */
.fold { display:flex; width:100%; justify-content:space-between; align-items:center; min-height:48px; padding:12px 14px; font-size:17px; background:var(--card); border:1px solid var(--line); border-radius:8px; color:var(--brand); cursor:pointer; text-align:left; }
.fold:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.fold .caret { color:var(--ink-soft); }
.dlines { margin:12px 0 0; }
.dline { display:grid; grid-template-columns:1fr 8.5rem 44px; gap:8px; align-items:start; margin:0 0 10px; }
.dline .dx { width:44px; height:48px; padding:0; border:0; background:none; font-size:24px; line-height:1; color:var(--ink-soft); cursor:pointer; border-radius:8px; }
.dline .dx:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
@media (max-width:440px) {
  .dline { grid-template-columns:1fr 44px; padding-bottom:10px; border-bottom:1px solid var(--line-soft); }
  .dline .ddesc { grid-column:1; grid-row:1; }
  .dline .dx { grid-column:2; grid-row:1; }
  .dline .damt { grid-column:1; grid-row:2; }
}
.dtotal { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 2px 4px; border-top:1px solid var(--line); margin-top:4px; }
.dtotal .k { font-size:16px; color:var(--ink-soft); }
.dtotal .v { font:400 24px/1.2 var(--serif); font-variant-numeric:tabular-nums; }
.ro-lines { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.ro-lines li { display:flex; justify-content:space-between; gap:12px; padding:12px 2px; border-bottom:1px solid var(--line-soft); font-size:16px; }
.ro-lines li .a { font-variant-numeric:tabular-nums; white-space:nowrap; }
.ro-text { white-space:pre-wrap; overflow-wrap:anywhere; font-size:17px; margin:0; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:8px; }

/* the report type pull-down, just above the send bar (9/27/26; the turnover tick before) */
.typefield { margin:24px 0 0; }
.field[hidden] { display:none; }
.ro-fact { font-size:17px; margin:24px 0 0; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:8px; }

/* the submit bar: sticky at the bottom of a phone's screen */
.submitbar {
  position:sticky; bottom:0; z-index:5; margin:28px -16px 0; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--paper); border-top:1px solid var(--line);
}
.submitbar .saved { font-size:15px; color:var(--ink-soft); margin:0 0 8px; min-height:1.4em; }
.submitbar .saved.bad { color:var(--warn); }
.submitbar .merr { margin:0 0 10px; }
.after { margin-top:16px; text-align:center; }

/* ---------- meter photos (#meters, v2 9/28/26; design/maint-meter-photos-v2-2026-09-28.md section 4) ----------
   The home screen's two buttons stack. The screen itself is the report's: the Building field,
   .pickrow, the .tiles grid, the note and the .submitbar; only the sent list's photo strip and
   the not-turned-on card are its own. Nothing under 14px. */
.homeacts { display:grid; gap:10px; }
.homeacts > div:empty { display:none; }
.mp-off p { margin:0 0 14px; }
/* The Meter photos button's place, held unseen until /site/me says whether he has it (9/28/26). */
.mp-hold { visibility:hidden; }
/* A first photo that could not start its draft: the error and Try again under the buttons. */
.mpend .merr { margin:10px 0 8px; }
.mpend .btn { margin:0 0 12px; }
#m-older { margin:10px 0 0; }
.mp-thumbs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 8px; }
.mp-thumbs img { width:44px; height:44px; object-fit:cover; border-radius:6px; border:1px solid var(--line); display:block; }
.submitbar .hint { margin:0 0 8px; }
.submitbar .hint:empty { display:none; }

/* ---------- loading and failure ---------- */
.loading { padding:28px 16px; text-align:center; color:var(--ink-soft); font-size:16px; }
.failed { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:22px; font-size:16px; color:var(--ink-soft); }
.failed h2 { margin:0 0 8px; color:var(--ink); }
.failed .btn { margin-top:16px; }

/* ---------- sign in ---------- */
.login-wrap { min-height:80vh; display:flex; align-items:center; justify-content:center; padding:24px 0; }
.login-card { background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:28px 22px; width:100%; max-width:440px; }
.login-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.login-card h1 { margin:0 0 10px; }
.login-card .lede { color:var(--ink-soft); font-size:16px; margin:0 0 18px; }
.login-card .btn { width:100%; }
.login-hint { font-size:15px; color:var(--ink-soft); margin:16px 0 0; }
/* The tenant site's closing lines on a sign-in card (9/28/26), lifted to this site's floor. */
.login-foot { font-size:15px; color:var(--ink-soft); margin:14px 0 0; }
.login-foot a { color:inherit; }
.sentto { display:block; font-size:17px; margin:2px 0 14px; overflow-wrap:anywhere; }
.au-note { background:var(--warn-tint); border:1px solid var(--warn); color:var(--ink); border-radius:8px; padding:10px 12px; font-size:15px; margin-bottom:16px; }
.au-back { display:inline-flex; align-items:center; min-height:44px; margin-top:8px; font-size:16px; }
/* The six-digit code box on the check-email card (9/25/26): large, spaced, tabular, centred. */
.inp.code { font-size:24px; letter-spacing:.2em; text-align:center; font-variant-numeric:tabular-nums; }
.login-card .btn.resend { margin-top:12px; }

/* "Add Maint to your home screen" (9/25/26): one quiet line under the header, closable. */
.a2hs { display:flex; align-items:flex-start; gap:8px; background:var(--brand-tint); border:1px solid var(--line);
  border-radius:8px; padding:10px 6px 10px 12px; margin:0 0 12px; }
.a2hs[hidden] { display:none; }
.a2hs-text { margin:0; flex:1 1 auto; font-size:16px; color:var(--ink); }
.a2hs-x { flex:0 0 auto; background:none; border:0; min-width:44px; min-height:44px; margin:-10px 0;
  font-size:24px; line-height:1; color:var(--ink-soft); cursor:pointer; }
.a2hs-x:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }

/* ---------- modal ---------- */
.overlay { position:fixed; inset:0; background:rgba(16,23,21,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:20; overflow-y:auto; }
.modal { background:var(--card); color:var(--ink); border-radius:12px; max-width:440px; width:100%; padding:22px; box-shadow:var(--shadow); }
.modal h2 { margin:0 0 12px; }
.modal p { font-size:16px; color:var(--ink-soft); margin:0 0 16px; }
.mfoot { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
@media (max-width:480px) { .mfoot .btn { flex:1 1 auto; } }
.modal .merr { margin:0 0 12px; font-size:15px; color:var(--warn); }
.modal textarea.inp { min-height:96px; }
/* The library's per-line ledger dialog (9/28/26): wide enough for Description · Proposed · Amount. */
.modal.wide { max-width:600px; }
.modal .ldtable { box-shadow:none; margin:0 0 18px; }
.ldtable .vtable td { vertical-align:middle; }
.ldtable .ld-amt { width:8.5rem; }
.ldtable .inp.amt { min-height:44px; padding:8px 10px; }
.ldtable .vtable th { overflow-wrap:normal; }
/* A refused line's sentence: its own row under the line, right-aligned across the table
   (9/28/26 live walk, §0 rule 11). The zero width with a full min-width keeps the sentence out
   of the table's sizing, so no column moves when it appears. */
.ldtable .vtable tr:has(+ tr.ld-err) td { border-bottom:0; }
.ldtable .vtable tr.ld-err td { padding:0 0 12px; }
.modal .ldtable .ld-errtext { width:0; min-width:100%; margin:0; text-align:right; }
/* On a phone each line's words take the full width, its two figures under them. */
@media (max-width:480px) {
  .modal .ldtable { padding:0 12px; overflow-x:visible; }
  .ldtable .vtable, .ldtable thead, .ldtable tbody, .ldtable tfoot { display:block; width:100%; }
  .ldtable thead tr, .ldtable tbody tr, .ldtable tfoot tr { display:grid; grid-template-columns:minmax(0, 1fr) auto 6.75rem; align-items:center; column-gap:10px; }
  .ldtable tbody tr { border-bottom:1px solid var(--line-soft); }
  .ldtable thead tr { border-bottom:1px solid var(--line); }
  .ldtable thead th, .ldtable tbody td { border-bottom:0; }
  .ldtable thead th:first-child, .ldtable tbody td:first-child { grid-column:1 / -1; padding-bottom:0; }
  .ldtable thead th:nth-child(2), .ldtable tbody td:nth-child(2) { grid-column:2; }
  .ldtable thead th:nth-child(3), .ldtable tbody td:nth-child(3) { grid-column:3; }
  .ldtable .vtable .a { padding-left:0; }
  .ldtable .vtable td.ld-amt { width:auto; }
  .ldtable tfoot tr { border-top:1px solid var(--line); }
  .ldtable .vtable tfoot td { border-top:0; }
  .ldtable tbody tr:has(+ tr.ld-err) { border-bottom:0; }
}

/* ---------- the damage report page (/view/ and /pm/, one renderer: /shared/report.js) ----------
   9/25/26, rebuilt 9/26/26 (design/maint-pm-library-2026-09-26.md section 6). The tenant site's
   genres (`frontend-tenant/styles.css` .card, .tablewrap, the month subhead, .more) and the
   investor site's filter row, ported BY VALUE — this site shares no stylesheet with either — and
   lifted to this site's 14px floor. */
.wrap.wide { max-width:880px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:22px 24px; }
.vh1 { margin-top:6px; }
.vsub { font-size:17px; }
.vfacts { margin:16px 0 0; padding:0 16px; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }
.vfacts div { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:16px; }
.vfacts div:last-child { border-bottom:0; }
.vfacts dt { color:var(--ink-soft); margin:0; }
.vfacts dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.vtablewrap { background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:0 16px; overflow-x:auto; }
.vtable { width:100%; border-collapse:collapse; font-size:16px; }
.vtable th, .vtable td { padding:12px 0; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.vtable th { font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); border-bottom:1px solid var(--line); }
.vtable .a { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; padding-left:12px; }
.vtable tfoot td { border-top:1px solid var(--line); border-bottom:0; font-weight:600; }
.vtable tfoot .a { font:400 22px/1.2 var(--serif); }
.vnone { font-size:16px; color:var(--ink-soft); margin:0; }
.vmedia-head { display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; margin:28px 0 14px; }
.vmedia-head h2 { margin:0; }
.vzipbox { display:flex; flex-direction:column; align-items:flex-end; }
.vzip-err { margin:8px 0 0; text-align:right; }
.vgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.vcell { display:flex; flex-direction:column; gap:2px; min-width:0; }
.vtile {
  position:relative; display:block; width:100%; aspect-ratio:1 / 1; padding:0; margin:0;
  border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--pending);
  cursor:zoom-in; -webkit-tap-highlight-color:transparent;
}
.vtile:hover { border-color:var(--brand); }
.vtile:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.vtile img { display:block; width:100%; height:100%; object-fit:cover; }
.vph { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:15px; font-weight:600; color:var(--ink-soft); }
/* The play mark on a video tile (the office's .mgal-play, by value). */
.vplay { position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:rgba(16,23,21,.62); pointer-events:none; }
.vplay::after { content:""; position:absolute; left:17px; top:13px; border-style:solid; border-width:9px 0 9px 14px; border-color:transparent transparent transparent #FFFFFF; }
.vplay.sm { width:28px; height:28px; margin:-14px 0 0 -14px; }
.vplay.sm::after { left:11px; top:8px; border-width:6px 0 6px 9px; }
.vdl { display:inline-flex; align-items:center; min-height:44px; font-size:16px; overflow-wrap:anywhere; }
.vdl:focus-visible, .vlib:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.vfoot { margin-top:32px; font-size:16px; color:var(--ink-soft); }
.vfoot p { margin:0 0 6px; }
.vlib { display:inline-flex; align-items:center; min-height:44px; }
/* The footer (9/28/26, §12 E11): the tenant site's — the firm and a person to ask left, Confidential
   right — at this site's size. The photo link's one-line footer lays out the same. */
.pmfoot { display:flex; align-items:flex-start; justify-content:space-between; gap:6px 16px; flex-wrap:wrap; }
.pmfoot .foot-who { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pmfoot a { color:inherit; }
@media (max-width:520px) {
  .card { padding:20px 18px; }
  .vzipbox { width:100%; align-items:stretch; }
  .vzipbox .btn { width:100%; }
  .vzip-err { text-align:left; }
}

/* ---------- the managers' library (/pm/, 9/26/26) ---------- */
/* The staff preview banner (9/28/26) — ONE rule for both pages of this site: the managers'
   library (`/pm/`) and, since the Maint person preview the same day, Weber's own site (`/`).
   ⛔ THE INVESTOR AND TENANT SITES' BAR, TO THE PIXEL (access-model.md: "change one bar, change
   both") — same words, size, padding and colours as `frontend/styles.css .previewbar` and
   `frontend-tenant/styles.css .previewbar`; change one, change them all. The one difference is
   the side margins, which carry it across THIS body's gutter (16px, or the phone's safe area when
   that is wider) so it spans the screen as the other two do. Painted only over a preview
   payload. */
.previewbar {
  display:flex; align-items:center; justify-content:center; gap:14px 28px; flex-wrap:wrap;
  margin-left:calc(-1 * max(16px, env(safe-area-inset-left)));
  margin-right:calc(-1 * max(16px, env(safe-area-inset-right)));
  padding:11px 26px; font-size:14px; line-height:1.55; color:var(--ink);
  background:var(--brand-tint); border-bottom:1px solid var(--line);
}
.pv-text strong { font-weight:600; }
@media print { .previewbar { display:none !important; } }
.pmtop { flex-wrap:wrap; }
.pmwho { display:flex; align-items:center; gap:4px 12px; flex-wrap:wrap; justify-content:flex-end; margin-left:auto; min-width:0; }
.pmwho-email { font-size:14px; color:var(--ink-soft); overflow-wrap:anywhere; }
.pmco { margin:0 0 18px; }
.pmco:empty { display:none; }
.pmco-name { font:400 20px/1.3 var(--serif); margin:0; color:var(--ink); }
.pmco .inp { max-width:420px; }
.pmco .merr { margin:8px 0 0; }
.pmfilters { display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; padding:18px 20px; }
.pmfilters.one { grid-template-columns:minmax(0, 1fr); }
.pmfilters.one .pmf { max-width:420px; }
/* The pull-down at the top: Damage reports · Meter photos (9/28/26). */
.pmview { margin:0 0 18px; }
.pmview:empty { display:none; }
.pmview .inp { max-width:320px; font-weight:600; }
.pmf { min-width:0; }
@media (max-width:600px) { .pmfilters { grid-template-columns:1fr; } }
.pmcount { font-size:16px; color:var(--ink-soft); margin:18px 2px 10px; }

/* The unit box: one text box over a listbox (the investor site's filter select, grown into a
   type-to-filter list because one building has 85 units). */
.combo { position:relative; }
.combo .combo-inp { padding-right:48px; }
.combo-x { position:absolute; top:0; right:0; width:48px; height:48px; padding:0; border:0; background:none; font-size:24px; line-height:1; color:var(--ink-soft); cursor:pointer; border-radius:8px; }
.combo-x:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.combo-list {
  position:absolute; left:0; right:0; top:100%; z-index:10; margin:4px 0 0; padding:4px 0; list-style:none;
  max-height:320px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 28px -12px rgba(16,23,21,.45);
}
.combo-opt { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px; padding:10px 14px; font-size:16px; cursor:pointer; }
.combo-opt.active { background:var(--brand-tint); }
.combo-opt.current .combo-l { font-weight:600; }
.combo-n { color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.combo-none { padding:12px 14px; font-size:16px; color:var(--ink-soft); }

/* The report list: the tenant ledger's card, its quiet month subhead, and whole-row links. */
.pmrows { background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); overflow:hidden; }
.mhead { margin:0; padding:16px 16px 6px; font:700 14px/1.3 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.rrows { list-style:none; margin:0; padding:0; }
.rrows li { border-bottom:1px solid var(--line-soft); }
.rrows li:last-child { border-bottom:0; }
.rrows + .mhead { border-top:1px solid var(--line); }
.rrow {
  display:grid; grid-template-columns:64px minmax(0, 1fr) auto 12px; grid-template-areas:"thumb main amt chev";
  align-items:center; gap:4px 14px; padding:12px 16px; min-height:88px; color:var(--ink); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.rrow:hover { background:var(--pending); }
.rrow:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.rthumb { grid-area:thumb; position:relative; width:64px; height:64px; border-radius:8px; overflow:hidden; background:var(--pending); border:1px solid var(--line); }
.rthumb img { display:block; width:100%; height:100%; object-fit:cover; }
.rmain { grid-area:main; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rtitle { font-size:17px; overflow-wrap:anywhere; }
.rtitle strong { font-weight:600; }
.rbld { color:var(--ink-soft); }
.rsub { font-size:15px; color:var(--ink-soft); overflow-wrap:anywhere; }
.ramt { grid-area:amt; display:flex; flex-direction:column; align-items:flex-end; gap:6px; font-size:17px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ramt.zero { font-size:15px; color:var(--ink-soft); }
.chev { grid-area:chev; width:12px; height:12px; }
.chev::after { content:""; display:block; width:8px; height:8px; border-right:2px solid var(--ink-faint); border-top:2px solid var(--ink-faint); transform:rotate(45deg); }
@media (max-width:520px) {
  .rrow { grid-template-columns:64px minmax(0, 1fr) 12px; grid-template-areas:"thumb main chev" "thumb amt chev"; padding:12px 14px; align-items:start; }
  .rrow .chev { align-self:center; }
  .ramt { text-align:left; font-size:16px; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 10px; }
}
.more { display:block; width:100%; min-height:48px; text-align:center; padding:12px; font-size:16px; background:none; border:0; border-top:1px solid var(--line-soft); color:var(--brand); font-family:inherit; cursor:pointer; }
.more:hover { background:var(--pending); }
.more:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.more[disabled] { color:var(--ink-soft); cursor:default; }
.pmmore-err { margin:0; padding:0 16px; }
.pmmore-err:not(:empty) { padding:0 16px 12px; }
.pmreport { padding-bottom:8px; }
/* The Tenant ledger card under the Damages (9/28/26): the state word, the decision line with Undo
   beside it, or the two acts — Won't charge left, the one commit right. */
.pmledger { padding:18px 20px; }
.pmledger:focus { outline:none; }
.pml-state { margin:0 0 8px; }
.pml-dec { display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; }
.pml-line { margin:0; flex:1 1 16em; min-width:0; font-size:16px; overflow-wrap:anywhere; }
.pml-msg { margin:10px 0 0; }
.pml-acts { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:14px; }
@media (max-width:520px) { .pml-acts .btn { flex:1 1 100%; } }
/* A meter set's row: the next photos in small under the count. */
.msthumbs { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.msthumbs img { width:40px; height:40px; object-fit:cover; border-radius:6px; border:1px solid var(--line); display:block; }
.wrap.wide .failed p { margin:0; }

/* ---------- the lightbox (the office's .mlbx, by value; design-system section 4.26) ---------- */
html.lbx-open, html.lbx-open body { overflow:hidden; }
.mlbx { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; background:rgba(10,16,14,.95); color:#FFFFFF; padding-top:env(safe-area-inset-top); }
.mlbx-bar { display:flex; align-items:center; gap:10px 14px; padding:10px 16px; font-size:15px; }
.mlbx-cap { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mlbx-n { white-space:nowrap; opacity:.85; font-variant-numeric:tabular-nums; }
.mlbx-acts { display:flex; align-items:center; gap:8px; }
.mlbx-dl { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; font-size:15px; color:#FFFFFF; text-decoration:none; border:1px solid rgba(255,255,255,.32); border-radius:8px; }
.mlbx-x, .mlbx-nav { display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; color:#FFFFFF; border:1px solid rgba(255,255,255,.32); background:rgba(16,23,21,.6); border-radius:50%; font-family:var(--sans); line-height:1; }
.mlbx-x { width:44px; height:44px; font-size:26px; }
.mlbx-nav { position:absolute; top:50%; margin-top:-24px; width:48px; height:48px; font-size:30px; }
.mlbx-nav.prev { left:14px; }
.mlbx-nav.next { right:14px; }
.mlbx-dl:hover, .mlbx-x:hover, .mlbx-nav:hover { border-color:#FFFFFF; }
.mlbx-dl:focus-visible, .mlbx-x:focus-visible, .mlbx-nav:focus-visible { outline:2px solid #FFFFFF; outline-offset:2px; }
.mlbx-stage { flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding:0 76px 24px; }
.mlbx-stage img, .mlbx-stage video { display:block; max-width:100%; max-height:100%; object-fit:contain; background:#000; }
.mlbx-fail { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; font-size:16px; }
.mlbx-fail p { margin:0; }
@media (max-width:700px) {
  .mlbx-bar { flex-wrap:wrap; padding:8px 12px; }
  .mlbx-stage { padding:0 8px calc(84px + env(safe-area-inset-bottom)); }
  .mlbx-nav { top:auto; bottom:calc(16px + env(safe-area-inset-bottom)); margin-top:0; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn { transition:background .15s, border-color .15s; }
  .ring .rf { transition:stroke-dashoffset .2s linear; }
}