/* PMT Maintenance Portal. The look is the admin portal's (admin.propertymanagementto.com), so
   anyone who can run a rent collection there already knows how to find their way round here:
   charcoal bar, warm grey page, white cards, navy headings, one gold button for the next move. */
:root {
  --charcoal: #303233; --gold: #ccaf6d; --gold-deep: #9c7d34; --gold-soft: #f6eeda; --navy: #13283e;
  --ink: #1e2126; --bg: #f4f2ec; --card: #ffffff; --line: #e7e2d8; --line-soft: #f1ece2;
  --muted: #6f6a61; --faint: #a49d92; --amber: #b06a2c; --amber-soft: #f6ead9;
  --red: #be4141; --red-soft: #f8e8e6; --green: #3f7d54; --green-soft: #e8f1ea;
  --blue: #2c5a86; --blue-soft: #eaf1f8;
  --shadow: 0 1px 2px rgba(40,35,20,.05), 0 6px 18px rgba(40,35,20,.06); --r: 14px;
  --font: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--navy); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { color: var(--navy); letter-spacing: -.01em; margin: 0; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 13px; font-weight: 400; }
[hidden] { display: none !important; }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.topbar { background: var(--charcoal); border-bottom: 2px solid var(--gold); position: sticky; top: 0; z-index: 40; }
.topbar .inner { max-width: 1000px; margin: 0 auto; padding: 15px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.topbar .brand img { height: 42px; width: auto; display: block; }
.topbar nav { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: #c8c1b4; flex-wrap: wrap; justify-content: flex-end; }
.topbar nav a { color: #c8c1b4; } .topbar nav a:hover { color: #fff; text-decoration: none; }
.topbar nav .sep { color: #5a5b5c; }
.topbar .me { color: #8d877c; }
.topbar .me:empty, .topbar .me:empty + .who:empty { display: none; }
.who { display: flex; align-items: center; gap: 10px; }
.who:empty { display: none; }
.who img { width: 22px; height: 22px; border-radius: 50%; }
.who span { color: #8d877c; }
.who a { color: #c8c1b4; }

/* ── page ────────────────────────────────────────────────────────────────── */
.wrap { max-width: 1000px; margin: 0 auto; padding: 30px 22px 76px; }
.wrap:has(.qsplit.split) { max-width: 1320px; }
.pagetitle { font-size: 24px; font-weight: 750; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card h2 { font-size: 17px; font-weight: 750; }
.head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.head .hint { flex: 1 1 200px; min-width: 0; }

/* ── the three modules ───────────────────────────────────────────────────── */
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0 22px; }
.module { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; }
.module.soon { background: #faf8f3; box-shadow: none; }
.module-head { display: flex; gap: 14px; align-items: flex-start; }
.module h3 { font-size: 17px; font-weight: 750; margin: 1px 0 3px; }
.module .one { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.module-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 43px; }
.module-foot .badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.module-foot .btn { margin-left: auto; flex: none; }
.ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--navy); color: var(--gold); }
.ico svg { width: 21px; height: 21px; stroke-width: 1.85; }
.module.soon .ico { background: #e9e3d6; color: #b3a279; }

/* status badges, in the admin portal's colours */
.badge { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 5px 11px; border-radius: 999px; white-space: nowrap; display: inline-block; border: 1px solid transparent; }
.badge.live { background: var(--gold-soft); color: var(--gold-deep); }
.badge.need { background: var(--amber-soft); color: var(--amber); }
.badge.done { background: var(--green-soft); color: var(--green); }
.badge.warn { background: var(--red-soft); color: var(--red); }
.badge.soon { background: transparent; color: var(--faint); border-color: var(--line); }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; transition: filter .15s, background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s; -webkit-tap-highlight-color: transparent; }
.btn:hover { text-decoration: none; border-color: #d9d1c1; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:active { transform: none; }
.btn:disabled:hover { filter: none; }
.btn:not(.gold):not(.danger):not(.text):disabled:hover { border-color: var(--line); }
.btn:focus-visible, .rowmore > summary:focus-visible, a:focus-visible, .wo:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #303233; }
.btn.gold:hover { filter: brightness(1.04); }
.btn.ghost { background: #fff; }
.btn.big { padding: 13px 26px; font-size: 15px; }
.btn.sm { padding: 6px 12px; font-size: 12.5px; }
.btn.text { background: none; border-color: transparent; padding: 6px 4px; color: var(--navy); font-weight: 600; font-size: 13.5px; }
.btn.text:hover { text-decoration: underline; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.text.danger { background: none; border-color: transparent; color: var(--red); padding: 6px 4px; }
.btn.text.danger:hover { filter: none; text-decoration: underline; }

/* ── forms ───────────────────────────────────────────────────────────────── */
input[type=text], input[type=number], input[type=search], input[type=email], textarea, select {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s; width: 100%; }
select { width: auto; padding: 9px 10px; }
input:focus, textarea:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(204,175,109,.22); }
textarea { resize: vertical; line-height: 1.5; }
input[type=checkbox] { accent-color: var(--navy); width: 15px; height: 15px; }
.field { margin-top: 18px; }
.field .lab { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 7px; }
.field .lab .hint { font-weight: 400; margin-left: 6px; }
label.inline { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; }
.k { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* ── a flow, one card: back link, title, stepper, the step, and the buttons ─ */
/* The stepper's grid runs past the card on purpose so its end nodes sit on the card's edges.
   Clip it here (clip, not hidden, so the sticky footer still sticks): between about 900px and
   1076px wide it pushed the whole page sideways. */
.flow { padding: 22px 26px 0; overflow-x: clip; }
.flowtop { display: flex; justify-content: space-between; align-items: center; min-height: 20px; }
.back { font-size: 13px; font-weight: 700; color: var(--muted); }
.back:hover { color: var(--navy); text-decoration: none; }
.saved { font-size: 12px; color: var(--faint); white-space: nowrap; }
.saved.on { color: var(--gold-deep); }
.flowtitle { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.flowtitle h1 { font-size: 21px; font-weight: 750; }

/* the stepper, as on the admin portal's runs */
.pstep { list-style: none; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  --ps-a: 15.5px; --ps-b: 15.5px; --ps-k: calc(var(--n, 5) - 1); --ps-s: calc(100% - var(--ps-a) - var(--ps-b));
  margin: 22px calc(100% - var(--ps-a) - var(--ps-s) * (2 * var(--n, 5) - 1) / (2 * var(--ps-k))) 34px calc(var(--ps-a) - var(--ps-s) / (2 * var(--ps-k))); }
.pstep-i { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.pstep-i:not(:first-child)::before { content: ""; position: absolute; top: 14.5px; right: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.pstep-i.past:not(:first-child)::before, .pstep-i.on:not(:first-child)::before { background: var(--gold); }
.pstep-i:first-child .pstep-lab, .pstep-i:last-child .pstep-lab { position: absolute; top: 39px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.pstep-node { position: relative; z-index: 1; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--card); border: 2px solid var(--line); color: var(--faint); }
.pstep-i.past .pstep-node { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
.pstep-i.on .pstep-node { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 0 0 4px rgba(19,40,62,.12); }
.pstep-node svg { width: 15px; height: 15px; stroke-width: 2.4; }
.pstep-lab { font-size: 11.5px; font-weight: 650; color: var(--faint); line-height: 1.25; max-width: min(16ch, 100%); }
.pstep-i.past .pstep-lab { color: var(--muted); }
.pstep-i.on .pstep-lab { color: var(--navy); font-weight: 750; }
.pstep-i.go { cursor: pointer; }
.pstep-i.go:hover .pstep-node { filter: brightness(1.05); }
.pstep-i.go:hover .pstep-lab { color: var(--navy); }

.step { padding-bottom: 22px; }
.stephead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.stephead h2 { font-size: 17px; font-weight: 750; }
.stephead .hint { margin: 0; flex: 1 1 220px; }
.stephead p.hint { flex-basis: 100%; }

.flowfoot { position: sticky; bottom: 0; z-index: 20; margin: 0 -26px; padding: 14px 26px; background: rgba(255,255,255,.97);
  border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 18px; min-height: 86px;
  backdrop-filter: blur(6px); }
.flowbtns { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.flowbtns .ready { flex: 0 1 auto; max-width: 230px; line-height: 1.3; }
.stephint { font-size: 12.5px; color: var(--amber); max-width: 230px; text-align: right; line-height: 1.3; }
.stephint.ok { color: var(--green); }
.totals { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; font-variant-numeric: tabular-nums; font-size: 13px; }
.totals .k { display: inline; font-size: 12px; font-weight: 600; color: var(--muted); }
.totals .v { font-weight: 600; color: var(--ink); }
.totals .big { font-size: 19px; font-weight: 750; color: var(--navy); }
.totals .disc { color: var(--gold-deep); }
.totals .warn { color: var(--red); font-size: 12px; font-weight: 600; }
.totals .k.opt { color: var(--gold-deep); }

/* ── step 1: property and work orders ────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  cursor: pointer; transition: border-color .15s, background .15s; user-select: none; font: inherit; text-align: left; appearance: none; }
.chip:hover { border-color: #d9d1c1; }
.chip img, .chip .ph { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--gold-soft); display: grid; place-items: center; font-weight: 700; color: var(--gold-deep); font-size: 12px; }
.chip .n { font-weight: 650; font-size: 14px; color: var(--ink); }
.chip .s { font-size: 12px; color: var(--muted); }
.chip.on { border-color: var(--navy); background: var(--navy); }
.chip.on .n { color: #fff; } .chip.on .s { color: #c9d2dc; }
.chip.rate { padding: 0 16px; height: 42px; justify-content: center; gap: 0; }
.chip.rate .n small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.chip.rate.on .n small { color: #c9d2dc; }
.rate input { height: 42px; }
.chip.rate .n { font-size: 15px; font-weight: 750; }
.chip:focus-visible, .opt-tabs .tab:focus-visible, .srctabs .tab:focus-visible, .rv-grid .t:focus-visible, .pstep-i:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.search { position: relative; display: grid; grid-template-columns: 1fr 190px; gap: 10px; }
.search #q { font-size: 16px; padding: 12px 14px; }
.dd { position: absolute; left: 0; right: 200px; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(40,35,20,.14); z-index: 25; overflow: hidden; }
.dd .it { padding: 11px 14px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line-soft); }
.dd .it:last-child { border-bottom: 0; }
.dd .it:hover, .dd .it.sel { background: var(--gold-soft); }
.dd .it b { font-weight: 650; color: var(--ink); } .dd .it span { color: var(--muted); font-size: 13px; }
.dd .it.wo { border-left: 3px solid var(--gold); }
.dd .empty { padding: 12px 14px; color: var(--muted); font-size: 13px; }

.wos { margin-top: 14px; display: grid; gap: 8px; }
.wos .k { font-size: 13px; font-weight: 700; color: var(--navy); margin: 4px 0 0; }
.wo { display: grid; grid-template-columns: 22px 96px 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.wo:hover { border-color: #d9d1c1; }
.wo.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(204,175,109,.2); }
.wo input { margin: 3px 0 0; }
.wo .num { font-weight: 750; color: var(--navy); font-variant-numeric: tabular-nums; }
.wo .num small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.wo .desc { font-size: 13.5px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wo .meta { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.wo .meta a { display: block; }
.wo .busy { color: var(--muted); font-size: 12px; }
.tenant { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--gold); background: #fbf9f4; border-radius: 0 10px 10px 0; font-size: 13.5px; white-space: pre-wrap; max-height: 240px; overflow: auto; overscroll-behavior: contain; }
.tenant b { display: block; font-size: 12px; font-weight: 700; color: var(--gold-deep); margin-bottom: 4px; }
.addr { display: flex; gap: 8px; flex-wrap: wrap; }
.addr .grow { flex: 2 1 220px; } .addr .md { flex: 1 1 130px; } .addr .sm { flex: 0 1 110px; } .addr .xs { flex: 0 0 64px; }
.addrfrom { margin-top: 12px; padding: 10px 12px; border: 1px solid #d5e5d9; background: #f5faf6; border-radius: 10px; font-size: 13px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.addrfrom span { flex: 1 1 260px; }
.addrfrom.warn { border-color: #eadfc3; background: #fcf8ee; }

/* ── step 2: the quote ───────────────────────────────────────────────────── */
.drop { display: flex; align-items: center; justify-content: center; min-height: 110px; border: 1.5px dashed #d8ccae; border-radius: 12px; padding: 20px; text-align: center; background: #fcfaf5; cursor: pointer; color: var(--muted); transition: border-color .15s, background .15s; }
.drop.slim { min-height: 70px; padding: 14px; }
.drop:hover, .drop.over { border-color: var(--gold); background: #fff; }
.drop strong { color: var(--navy); }
.drop input { display: none; }
.ornote { margin: 8px 0 0; }
.notefields { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.noterow { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.noterow .k { min-width: 220px; }
.noterow .inline { padding-bottom: 10px; }
.qtools { display: flex; gap: 6px 16px; align-items: center; margin: 12px 0 2px; flex-wrap: wrap; }
.qtools .btn.text { font-size: 13px; }

.linespane { margin-top: 14px; }
.opt-tabs { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; align-items: center; }
.opt-tabs .tab { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 13px; font-weight: 650; font-family: inherit; appearance: none; }
.opt-tabs .tab { transition: border-color .15s, background-color .15s, color .15s; }
.opt-tabs .tab:not(.on):hover { border-color: #d9d1c1; background: #fcfbf8; }
.opt-tabs .tab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.opt-tabs .tab .tamt { font-weight: 650; opacity: .6; font-variant-numeric: tabular-nums; }
.opt-tabs .tab.on .tamt { opacity: .85; }
.opt-tabs .k.inline { flex-direction: row; align-items: center; gap: 8px; margin-left: 4px; }
.opt-tabs input { width: 220px; padding: 7px 10px; }
.tablewrap { overflow-x: auto; }
table.lines { width: 100%; border-collapse: collapse; }
table.lines th { text-align: left; font-size: 12px; font-weight: 650; color: var(--muted); padding: 0 6px 8px; border-bottom: 1px solid var(--line); }
table.lines th.num, table.lines th.pct { text-align: right; }
table.lines td { padding: 8px 4px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.lines td input, table.lines td textarea { padding: 8px 10px; }
table.lines td.num { width: 116px; } table.lines td.num input { text-align: right; font-variant-numeric: tabular-nums; }
table.lines td.pct { width: 84px; } table.lines td.pct input { text-align: right; }
table.lines td.pct input::placeholder { color: #b9b4a8; }
table.lines td.x { width: 30px; text-align: center; padding-top: 12px; }
table.lines .del { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 18px; line-height: 1; }
table.lines .del:hover { color: var(--red); }
input.over { border-color: var(--gold); background: #fffcf3; }
input.over.cap { border-color: var(--red); background: #fff7f6; }
table.lines td.num { position: relative; }
.lines td .flag { position: absolute; top: -2px; left: 10px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; cursor: help; line-height: 1.3; animation: fadeIn .2s ease-out; }
.lines td .flag.high { background: var(--red-soft); color: var(--red); }
.lines td .flag.above_card { background: var(--amber-soft); color: var(--amber); }
.flag.above_card_unknown, .flag.unclassified, .flag.not_comparable, .flag.no_history { background: #f2f0eb; color: var(--muted); }
.tools { display: flex; gap: 4px 14px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
details.raw { margin-left: auto; font-size: 13px; color: var(--muted); }
details.raw summary { cursor: pointer; }
details.raw pre { max-height: 240px; overflow: auto; font-size: 11.5px; background: #fbf9f4; border: 1px solid var(--line); border-radius: 8px; padding: 10px; white-space: pre-wrap; margin-top: 8px; }

.rate { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rate .xs { width: 80px; } .rate .grow { flex: 1 1 260px; }
.rate.needs #rateReason { border-color: var(--red); }
.disc { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.disc-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.disc .xs { width: 96px; } .disc .md { width: 230px; }
.pricecheck { padding-top: 16px; border-top: 1px solid var(--line-soft); }
.tradebar { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.tradebar .hint { padding-bottom: 10px; }

/* the vendor's own page beside what we read off it */
.qsplit.split { display: grid; grid-template-columns: minmax(320px, 44%) 1fr; gap: 16px; align-items: start; }
.srcpane { position: sticky; top: 90px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fbf9f4; margin-top: 14px; }
.srctabs { display: flex; gap: 4px; align-items: center; padding: 7px 9px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.srctabs .tab { font-size: 11.5px; padding: 3px 9px; border-radius: 99px; cursor: pointer; color: var(--muted); background: none; border: 1px solid transparent; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; }
.srctabs .tab:not(.on):hover { border-color: var(--line); color: var(--ink); }
.srctabs .tab.on { background: var(--gold); color: var(--charcoal); font-weight: 650; }
.srctabs .tab.used { border-color: var(--gold); }
.srctabs .tab .badge { font-size: 9px; padding: 0; background: none; }
.srctabs [data-srcdel] { margin-left: auto; }
.srcnote { padding: 4px 10px; font-size: 11.5px; color: var(--gold-deep); }
.srcnote:empty { display: none; }
.srcframe { width: 100%; height: 720px; border: 0; display: block; background: #fff; }
.srcpane.note .srcframe { height: 300px; background: #fbf9f4; }
.qsplit.split .lines { table-layout: fixed; font-size: 12.5px; }
.qsplit.split .lines th:nth-child(4), .qsplit.split .lines th:nth-child(5),
.qsplit.split .lines td:nth-child(4), .qsplit.split .lines td:nth-child(5) { display: none; }
.qsplit.split .lines th:nth-child(1) { width: 29% !important; }
.qsplit.split .lines th:nth-child(3) { width: 21%; }
.qsplit.split .lines th:nth-child(6) { width: 6%; }
.qsplit.split .lines textarea { min-height: 62px; }
@media (max-width: 1200px) {
  .qsplit.split { grid-template-columns: 1fr; }
  .srcpane { position: static; }
  .srcframe { height: 440px; }
  .qsplit.split .lines { table-layout: auto; font-size: 13px; }
  .qsplit.split .lines th:nth-child(4), .qsplit.split .lines th:nth-child(5),
  .qsplit.split .lines td:nth-child(4), .qsplit.split .lines td:nth-child(5) { display: table-cell; }
  .qsplit.split .lines th:nth-child(1) { width: 23% !important; }
}

/* notices inside a step: the owner ledger, the price check, gaps, warnings */
.owner, .bench, .scope, .notice { margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: #fcfbf8; font-size: 13.5px; }
.owner { display: grid; gap: 9px; }
.owner .row, .bench .row, .scope .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.owner .msg, .bench .msg, .scope .msg { font-weight: 650; color: var(--ink); flex: 1 1 280px; }
.owner .stat { display: flex; gap: 6px 18px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.owner .stat b { color: var(--ink); font-weight: 650; }
.owner .pfnote { font-size: 12.5px; color: var(--muted); }
.owner .pfnote b { color: var(--ink); }
.owner label { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.owner.ok { border-color: #cfe3d5; background: var(--green-soft); }
.owner.slow { border-color: #ecd9bd; background: #fcf6ec; }
.owner.negative { border-color: #efcdc9; background: var(--red-soft); }
.owner.negative .msg { color: var(--red); }
.bench { border-left: 3px solid var(--gold); }
.bench.clean { border-left-color: var(--green); }
.bench.unknown { border-left-color: var(--faint); }
.bench ul { margin: 10px 0 0; padding: 0; list-style: none; }
.bench li { padding: 8px 11px; margin-bottom: 6px; background: #fff; border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; font-size: 13px; }
.bench li.high { border-left-color: var(--red); }
.bench li.above_card { border-left-color: var(--amber); }
.bench li.unknown, .bench li.above_card_unknown { border-left-color: var(--faint); }
.bench li b { display: block; }
.bench li .why { color: var(--muted); font-size: 12px; display: block; margin-top: 2px; }
.bench .built { font-size: 11.5px; color: var(--faint); }
.bench textarea { margin-top: 10px; }
.bench .gate { color: var(--red); font-weight: 650; }
.scope { border-left: 3px solid var(--gold); }
.scope.ok { border-left-color: var(--green); }
.scope.failed { border-left-color: var(--red); background: #fdf7f6; }
.scope ul.gaps { margin: 8px 0 0; padding-left: 18px; }
.scope ul.gaps li { margin-bottom: 5px; font-size: 13px; }
.scope .why { color: var(--muted); }
.scope .sub { margin-top: 8px; font-size: 12px; color: var(--muted); }
.scope .sub ul { margin: 4px 0 0; padding-left: 18px; }
.warnrow { color: var(--amber); }
.okrow { color: var(--green); }
.errsum { margin: 12px 0; padding: 11px 13px; border: 1px solid #efcdc9; background: var(--red-soft); border-radius: 10px; font-size: 13px; color: #8a2b2b; }
.errsum ul { margin: 6px 0 0; padding-left: 18px; }
.errsum a { color: #8a2b2b; cursor: pointer; text-decoration: underline; }
.unresolved { margin: 12px 0; padding: 11px 13px; border: 1px solid #e6c98a; background: #fdf8ec; border-radius: 10px; font-size: 13px; }
.notyours { margin: 12px 0; padding: 11px 13px; border: 1px solid #eadfc3; background: #fcf8ee; border-radius: 10px; font-size: 13px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.notyours .who { font-weight: 650; }

/* ── step 3: photos ──────────────────────────────────────────────────────── */
.rv { margin-bottom: 14px; }
.rv-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.rv-grid { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.rv-grid .t { position: relative; flex: 0 0 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #eee; padding: 0; appearance: none; }
.rv-grid .t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-grid .t.added { border-color: var(--gold); }
.rv-grid .t.added::after { content: "\2713"; position: absolute; right: 6px; top: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: var(--charcoal); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.rv-grid .t.busy { opacity: .5; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.photos:empty { display: none; }
.photo { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; position: relative; }
.photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.photo input { border: 0; border-top: 1px solid var(--line); border-radius: 0; font-size: 12px; padding: 8px; }
.photo .rm { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(30,33,38,.72); color: #fff; cursor: pointer; font-size: 13px; line-height: 1; }
.photo .src { position: absolute; left: 6px; top: 6px; font-size: 10px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--gold-deep); font-weight: 700; }

/* ── step 4: review ──────────────────────────────────────────────────────── */
.review { display: grid; gap: 14px; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.facts > div { padding: 12px 14px; border-right: 1px solid var(--line-soft); min-width: 0; }
.facts > div:last-child { border-right: 0; }
.facts span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.facts b { display: block; font-weight: 650; overflow-wrap: anywhere; }
.optsum { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.optsum .o { display: grid; grid-template-columns: 1fr auto auto auto; gap: 18px; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.optsum .o:last-child { border-bottom: 0; }
.optsum .o .l { font-weight: 650; }
.optsum .o .l small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.optsum .o span { color: var(--muted); font-size: 13px; }
.optsum .o .t { color: var(--navy); font-weight: 750; font-size: 16px; }
.optsum .head2 { padding: 9px 16px; background: #fbf9f4; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line-soft); }
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; }
.checks li { display: flex; gap: 8px; align-items: baseline; }
.checks li::before { content: "\2713"; color: var(--green); font-weight: 800; }
.checks li.no::before { content: "!"; color: var(--amber); }
.readyrow { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.ready { font-size: 13px; color: var(--amber); text-align: right; flex: 1 1 260px; }
.ready.ok { color: var(--green); font-weight: 650; }

/* ── step 5: done ────────────────────────────────────────────────────────── */
.banner { padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 650; display: flex; gap: 10px; align-items: baseline; margin-bottom: 14px; }
.banner.ok { background: var(--green-soft); color: var(--green); border: 1px solid #cfe3d5; }
.banner.ok::before { content: "\2713"; font-weight: 800; }
#resultFiles { display: grid; gap: 8px; margin-bottom: 12px; }
.file { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.file b { display: block; font-size: 14px; color: var(--navy); overflow-wrap: anywhere; }
.file small { color: var(--muted); display: block; font-size: 12.5px; overflow-wrap: anywhere; }
iframe.preview { width: 100%; height: 760px; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-top: 12px; }
.doneacts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.versions { margin: 4px 0 8px; }
.vrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0; font-size: 13px; }
.vrow b { font-size: 12.5px; color: var(--muted); font-weight: 650; }
.vlog { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.vlog summary { cursor: pointer; }
.vlog ul { margin: 6px 0 0 16px; } .vlog li { margin: 2px 0; }
.vlog .when { font-variant-numeric: tabular-nums; }
.approval { margin: 10px 0 0; }
.approval .bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; background: #fbf9f4; border: 1px solid var(--line); border-radius: 12px; }
.approval .bar .hint { flex: 1 1 200px; }
.approval form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.approval form input[type=text] { flex: 1 1 200px; width: auto; }
.approval .ev { font-size: 12px; color: var(--muted); }
.record { margin: 10px 0 12px; display: grid; gap: 8px; }
.record .r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 13.5px; }
.record .r.ok { border-color: #cfe3d5; } .record .r.bad { border-color: #efcdc9; }
.record .r b { font-weight: 650; } .record .r small { color: var(--muted); display: block; }
.record .cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 15px; border-radius: 12px; background: var(--gold-soft); border: 1px solid #eadfc3; }
.record .cta .hint { flex: 1 1 260px; }
.pick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
/* An option's full name and price is longer than a phone is wide. */
.pick .btn { white-space: normal; text-align: left; max-width: 100%; }
.record, .approval { min-width: 0; }

/* status words, as dots in a list and as pills elsewhere */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--faint); }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.st.generated { color: var(--muted); }
.st.shared { color: var(--blue); }
.st.approved, .st.recorded { color: var(--green); }
.st.declined { color: var(--red); }
.st.expired, .st.progress { color: var(--amber); }
.st.superseded { color: var(--faint); text-decoration: line-through; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--gold-soft); color: var(--gold-deep); vertical-align: middle; }
.pill.ok { background: var(--green-soft); color: var(--green); }
.pill.warn, .pill.bad { background: var(--red-soft); color: var(--red); }

/* ── recent work: one row per document, as on the admin portal ───────────── */
.list { padding: 0; overflow: visible; }
.listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filters input[type=search] { width: 290px; padding: 0 12px; height: 40px; }
.filters select { padding: 0 10px; height: 40px; }
.prow { display: grid; grid-template-columns: 36px minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, 1.1fr) 124px 204px; gap: 16px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--line-soft); transition: background-color .12s; }
.prow[data-row] { cursor: pointer; }
.prow:last-child { border-bottom: 0; }
.prow:hover { background: #fcfbf8; }
.prow .pico { width: 36px; height: 36px; border-radius: 9px; background: var(--navy); color: #fff; display: grid; place-items: center; }
.prow .pico svg { width: 18px; height: 18px; stroke-width: 1.9; }
.prow .pico.draft { background: var(--gold-soft); color: var(--gold-deep); }
.prow b { display: block; font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .amt b { font-variant-numeric: tabular-nums; }
.prow .acts { display: flex; align-items: center; gap: 0; justify-content: flex-end; }
.prow .acts > .btn { border-radius: 999px 0 0 999px; padding: 0 14px; height: 36px; font-size: 13px; }
.prow .acts > .btn.solo { border-radius: 999px; }
.prow .acts .rowmore > summary { border: 1px solid var(--line); border-left: 0; border-radius: 0 999px 999px 0; padding: 0 10px; height: 36px; display: grid; place-items: center; color: var(--muted); }
.prow .acts .rowmore { display: block; }
.prow .acts .btn.gold + .rowmore > summary { border-color: var(--gold); background: var(--gold); color: #303233; border-left: 1px solid rgba(48,50,51,.18); }
.listempty { padding: 26px 22px; color: var(--muted); font-size: 14px; }
.listmore { padding: 12px 22px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line-soft); }
.rowmore { position: relative; display: inline-block; }
.rowmore > summary { list-style: none; cursor: pointer; transition: background-color .15s, color .15s; }
.prow .acts .rowmore > summary:hover { background: var(--gold-soft); color: var(--gold-deep); }
.prow .acts .btn.gold + .rowmore > summary:hover { filter: brightness(1.04); background: var(--gold); color: #303233; }
.rowmore > summary::-webkit-details-marker { display: none; }
.rowmore > summary svg { width: 14px; height: 14px; }
.rowmore .moremenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 14px 34px rgba(40,35,20,.14); display: flex; flex-direction: column; align-items: stretch; }
.rowmore .moremenu .btn { justify-content: flex-start; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.rowmore .moremenu .btn:hover { background: var(--gold-soft); text-decoration: none; }
.rowmore .moremenu .btn.danger { color: var(--red); background: none; }

/* ── invoice ─────────────────────────────────────────────────────────────── */
.invq { margin-bottom: 12px; }
#invPick { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 22px; }
#invPick .prow { grid-template-columns: 36px minmax(0, 1.8fr) minmax(0, 1fr) 150px 164px; padding: 12px 16px; }
#cardInvoice { padding-bottom: 22px; }
.inv { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 12px; }
.inv.unread { border-left: 3px solid var(--red); }
.invhead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.invnums { display: flex; gap: 24px; flex-wrap: wrap; padding: 12px 14px; background: #fbf9f4; border-radius: 10px; }
.invnums div { display: flex; flex-direction: column; }
.invnums span { font-size: 12px; font-weight: 600; color: var(--muted); }
.invnums b { font-size: 15px; font-variant-numeric: tabular-nums; }
.invnums .up b { color: var(--red); } .invnums .down b { color: var(--green); }
.invnums.sub { opacity: .85; font-size: 12px; }
ul.finds { margin: 10px 0 0; padding: 0; list-style: none; }
ul.finds li { padding: 7px 11px; border-left: 3px solid var(--line); margin-bottom: 5px; font-size: 13px; background: #fbf9f4; border-radius: 0 8px 8px 0; }
ul.finds li.negative { border-left-color: var(--red); } ul.finds li.warn { border-left-color: var(--amber); }
ul.finds .amt { display: inline-block; min-width: 90px; font-weight: 650; }
.invact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.handoff { margin-top: 10px; padding: 12px; background: #fbf9f4; border-radius: 10px; font-size: 12.5px; white-space: pre-wrap; max-height: 320px; overflow: auto; }
.invedit { margin: 10px 0; padding: 12px; background: #fbf9f4; border-radius: 10px; }
.invedit .lines.slim td, .invedit .lines.slim th { padding: 3px 4px; font-size: 12.5px; }
.invedit .edrow { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }

/* ── comparison ──────────────────────────────────────────────────────────── */
table.cmp { width: 100%; border-collapse: collapse; font-size: 13px; }
table.cmp th, table.cmp td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
table.cmp th.num, table.cmp td.num { text-align: right; white-space: nowrap; }
table.cmp thead th { font-size: 12px; color: var(--muted); font-weight: 650; }
table.cmp .best { background: #f5faf6; }
table.cmp tfoot th { font-weight: 750; border-top: 2px solid var(--line); border-bottom: 0; }
table.cmp .gap { color: var(--muted); font-style: italic; }
table.cmp .loose { color: var(--amber); }
table.cmp .only { font-weight: 650; }
table.cmp tr.extra td { background: #fcfaf4; }
.sub2 { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.cmpnote { font-size: 13px; color: var(--muted); margin: 10px 2px 0; }

/* ── settings and the inspection preview ─────────────────────────────────── */
table.plain { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.plain td { padding: 9px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
#sessRows .cur { color: var(--gold-deep); font-weight: 650; }
#sessRows .ua { color: var(--muted); font-size: 11.5px; display: block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sessfoot { display: flex; gap: 8px; align-items: center; padding: 12px 0 22px; flex-wrap: wrap; }
.sessfoot input { flex: 1 1 260px; width: auto; }
#authNote { margin: 16px 0; }
#cardSessions { padding-bottom: 4px; }
.soonbody { padding: 0 0 26px; max-width: 640px; }
.soonbody p { margin: 0 0 10px; }

/* ── the page's own dialog, toast and spinner ────────────────────────────── */
.askwrap { position: fixed; inset: 0; z-index: 60; background: rgba(30,33,38,.45); display: grid; place-items: center; padding: 24px; }
.askbox { background: #fff; border-radius: 14px; padding: 22px 24px; width: min(520px, 100%); box-shadow: 0 24px 60px rgba(0,0,0,.28); max-height: 86vh; overflow: auto; }
.askbox h3 { font-size: 18px; font-weight: 750; margin: 0 0 8px; }
.askbox .askbody { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.askdetail { background: #fbf9f4; border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; max-height: 190px; overflow: auto; }
.askbox .k { margin-bottom: 14px; }
.askbox .k input, .askbox .k textarea { margin-top: 2px; }
.askreq { font-size: 12px; font-weight: 400; color: var(--muted); }
.askreq.bad { color: var(--red); font-weight: 650; }
.askbox .k input.bad, .askbox .k textarea.bad { border-color: var(--red); }
.askacts { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--charcoal); color: #fff; padding: 11px 18px; border-radius: 999px; box-shadow: var(--shadow); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 70; max-width: 90vw; }
.toast.show { opacity: 1; } .toast.err { background: var(--red); }
.spin { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(0,0,0,.18); border-top-color: currentColor; border-radius: 50%; animation: sp .7s linear infinite; vertical-align: -2px; }
@keyframes sp { to { transform: rotate(360deg); } }

/* The estimate's Back and Continue stay in one place from step to step. The card reaches the
   bottom of the window even on a short step, so the footer is always at the bottom, and the main
   button is always as wide as "Generate estimate", so Back does not slide sideways. */
#viewEstimate .flow { min-height: calc(100vh - 104px); min-height: calc(100dvh - 104px); display: flex; flex-direction: column; }
#viewEstimate .flow > .flowfoot { margin-top: auto; }
#stepNext, #generate { min-width: 164px; }

/* ── the door's history (Property Brain) ─────────────────────────────────── */
.brain { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--navy); border-radius: 0 12px 12px 0; background: #fbfaf7; font-size: 13.5px; animation: fadeUp .2s ease-out; }
.brain .hint { margin: 0; }
.brain .bhead { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.brain .bhead b { color: var(--navy); }
.brain .batt { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.brain .batt li { padding-left: 15px; position: relative; line-height: 1.45; }
.brain .batt li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.brain .batt li.high::before { background: var(--red); }
.brain .batt li.more { color: var(--muted); }
.brain .bahead { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.brain .bahead > b { color: var(--navy); font-size: 12.5px; }
.brain .bahead .batt { margin-top: 6px; }
.brain .bahead .batt li::before { background: var(--navy); }
.brain .bahead .batt li.high::before { background: var(--red); }
.brain .bstale { margin-left: auto; color: var(--red); font-size: 12px; }
/* Which unit: a house split into apartments is several doors. */
.unitpick { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.unitpick .lab { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.unitpick.need .lab { color: var(--red); }
.unitpick .chips, .brain .bunits { display: flex; flex-wrap: wrap; gap: 8px; }
.uchip { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .15s, background .15s, color .15s; }
.uchip:hover { border-color: #d9d1c1; }
.uchip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.uchip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.uchip small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.uchip.on small { color: #c9d2dc; }
.brain .bunits { margin-top: 10px; }
.brain .bbld { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.brain .bbld .bhead b { color: var(--muted); font-size: 12.5px; }
.brain .bbld .batt li::before { background: var(--faint); }
.brain .batt li.more::before { display: none; }
.brain .bwar { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 12.5px; }
.brain .bwar b { color: var(--green); }
.brain .bwar small { color: var(--faint); margin-left: 3px; }
.brain .brecent { margin-top: 10px; }
.brain .brecent summary { cursor: pointer; color: var(--navy); font-weight: 600; font-size: 12.5px; }
.brain .bj { display: grid; grid-template-columns: 92px minmax(0, 1.2fr) minmax(0, 1fr) 84px; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.brain .bj span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brain .bj span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.brainq { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--amber-soft); color: #5a3a17; font-size: 13.5px; line-height: 1.45; animation: fadeUp .2s ease-out; }
.brainq.stop { background: var(--red-soft); color: #6b1f1f; }
.brainq p { margin: 0; }
.brainq p + p { margin-top: 6px; }
table.lines td:first-child { position: relative; }
table.lines td .bflag { position: absolute; top: -2px; left: 10px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--amber-soft); color: var(--amber); line-height: 1.3; cursor: help; animation: fadeIn .2s ease-out; }
table.lines td .bflag.stop { background: var(--red-soft); color: var(--red); }

/* ── motion and small mercies ──────────────────────────────────────────── */
/* Placeholders read as examples, not as something already typed. */
::placeholder { color: var(--faint); opacity: 1; }
/* No spinner arrows: they crowd the amount columns and nobody prices a job one cent at a time. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* A new screen or step fades in rather than snapping, and menus open with a short drop. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.view:not([hidden]) { animation: fadeIn .16s ease-out; }
.step:not([hidden]) { animation: fadeUp .2s ease-out; }
.rowmore[open] > .moremenu, .dd { animation: menuIn .14s ease-out; }
.tenant, .banner { animation: fadeUp .2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── phones ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .modules { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(2) { border-right: 0; }
  .facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .prow { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .prow .when, .prow .stcell { display: none; }
  .prow .amt { grid-column: 2; }
  .prow .acts { grid-column: 3; grid-row: 1 / span 2; }
  #invPick .prow { grid-template-columns: 36px minmax(0, 1fr) auto; }
}
@media (max-width: 640px) {
  .topbar .inner { padding: 12px 16px; }
  .topbar .brand img { height: 34px; }
  .wrap { padding: 20px 16px 60px; }
  .flow { padding: 18px 16px 0; }
  .flowfoot { margin: 0 -16px; padding: 12px 16px; grid-template-columns: minmax(0, 1fr); }
  .flowbtns { flex-wrap: wrap; }
  .search { grid-template-columns: 1fr; }
  .dd { right: 0; }
  .wo { grid-template-columns: 22px 1fr; }
  .wo .meta { grid-column: 2; text-align: left; }
  .pstep-lab { display: none; }
  .pstep-i.on .pstep-lab { display: block; position: absolute; top: 39px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .optsum .o { grid-template-columns: 1fr auto; }
  .optsum .o span { display: none; }
  .filters input[type=search] { width: 100%; }
  .stephint { display: none; }
  #viewEstimate .flow { min-height: calc(100dvh - 78px); }
  .brain .bj { grid-template-columns: 80px minmax(0, 1fr) 72px; }
  .brain .bj span:nth-child(3) { display: none; }
  /* A phone has no room for the address and a button side by side: the button gets its own line. */
  .prow, #invPick .prow { grid-template-columns: 36px minmax(0, 1fr); row-gap: 10px; padding: 14px 16px; }
  .prow .amt { grid-column: 2; }
  .prow .acts { grid-column: 1 / -1; grid-row: auto; justify-content: flex-end; }
}