/* ============================================================
   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;
}
@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; }
.wordmark { font:400 28px/1 var(--serif); color:var(--brand); text-decoration:none; letter-spacing:.01em; display:inline-flex; align-items:center; min-height:44px; }
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; }
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 ---------- */
.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.editable { background:var(--brand-tint); color:var(--brand-deep); }
.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 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.editable { background:var(--brand-tint); border-color:var(--brand-tint); color:var(--brand-deep); }
.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; }
.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 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; }

/* ---------- 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-card .wordmark { 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; }
.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; }

/* ---------- 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; } }

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