/* Manors Bid portal.css: Customer portal screens (property managers): My jobs, a portal job, proposal, change orders, invoices, messages, account.
   Also the crew and phone-link pages (crew day, crew job, problem report, site capture, closed link),
   which link this file from their own head because they do not extend base.html.
   Loaded after app.css (the field-ledger design base: tokens and shared
   components). Put ONLY this screen group's styles here and build on the
   app.css tokens (var(--band), var(--action), var(--attention), ...)
   and components (.btn, .card, .unit-tag, .list-row, .menu-row,
   .page-band, .callout-attention). Boards: PortalHome, Proposal,
   ProposalSigned, PortalJob, PortalChange, PortalInvoice, PortalMessages,
   AcceptInvite, CrewDay, CrewJob, CrewProblem (2026-10-20). */

/* ---------- shared bits ---------- */
.pt-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pt-stack { display: flex; flex-direction: column; gap: 14px; }
.pt-stack > * { margin-top: 0; margin-bottom: 0; }
.pt-kicker { font-size: 13px; color: var(--ink-soft); }
.pt-h2 { margin: 6px 0 0; font-size: 17px; }

/* White strip under the graphite header: back link and the screen's name. */
.pt-top {
  margin: -20px -16px 16px; padding: 6px 16px; min-height: 56px; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.pt-top .pt-back {
  min-height: var(--tap); display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; text-decoration: none;
}
.pt-top strong { font-size: 16px; }
@media (min-width: 900px) { .pt-top { border-radius: 0 0 var(--radius) var(--radius); } }

/* The contractor's name block at the top of a proposal or invoice. */
.pt-biz { display: flex; flex-direction: column; gap: 2px; }
.pt-biz strong { font-size: 17px; }

/* "Needs you": an action card with a blue border and one blue go button. */
.pt-act {
  background: var(--card); border: 1px solid var(--action); border-radius: var(--radius);
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
  color: var(--ink); text-decoration: none;
}
a.pt-act:hover { color: var(--ink); text-decoration: none; background: #FBFCFE; }
.pt-act .muted { font-size: 15px; }
.pt-go {
  display: inline-flex; align-self: flex-start; align-items: center; min-height: var(--tap);
  padding: 0 16px; border-radius: var(--radius-input); background: var(--action); color: #fff; font-weight: 700;
}
a.pt-act:hover .pt-go { background: var(--action-hover); }

/* Status banners on the proposal. */
.pt-waiting {
  padding: 12px 14px; background: var(--action-soft); border: 1px solid var(--action);
  border-radius: var(--radius); font-weight: 600;
}
.pt-signed {
  padding: 12px 14px; background: var(--card); border: 2px solid var(--done); border-radius: 2px;
  display: flex; gap: 10px; align-items: center; font-weight: 600;
}
.pt-signed svg { flex: 0 0 auto; }
.pt-signed .muted { display: block; font-weight: 400; }

/* ---------- proposal sheet (Proposal board) ---------- */
.pt-proposal-title { margin: 0; font-size: 24px; }
.pt-proposal-meta { color: var(--ink-soft); margin-top: 4px; }
.pt-sheet { background: var(--card); border: 1px solid var(--line); border-radius: 2px; }
.pt-sheet-head { padding: 12px 14px; font-weight: 700; border-bottom: 1px solid var(--line-soft); margin: 0; font-size: 15px; }
.pt-lines { width: 100%; border-collapse: collapse; }
.pt-lines td { padding: 10px 14px; vertical-align: top; border-top: 1px solid var(--line-soft); }
.pt-lines tbody tr:first-child td { border-top: 0; }
.pt-lines .pt-line-name { font-weight: 600; }
.pt-lines .pt-line-name .muted { display: block; font-weight: 400; }
.pt-lines .pt-line-details { color: var(--ink-soft); font-size: 14px; }
.pt-lines .pt-line-amount { text-align: right; white-space: nowrap; font-weight: 600; }
/* On a phone each line reads: name and price on top, the plain details under the name. */
@media (max-width: 640px) {
  .pt-lines, .pt-lines tbody { display: block; }
  .pt-lines tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px;
    padding: 10px 14px; border-top: 1px solid var(--line-soft);
  }
  .pt-lines tbody tr:first-child { border-top: 0; }
  .pt-lines td { padding: 0; border: 0; }
  .pt-lines .pt-line-name { grid-column: 1; grid-row: 1; }
  .pt-lines .pt-line-amount { grid-column: 2; grid-row: 1; }
  .pt-lines .pt-line-details { grid-column: 1; grid-row: 2; margin-top: 2px; }
}
.pt-sum { border-top: 2px solid var(--ink); }
.pt-sum-line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; }
.pt-sum-line.pt-total { font-weight: 700; font-size: 18px; padding: 12px 14px; }
.pt-sum-line + .pt-sum-line { border-top: 1px solid var(--line-soft); }
.pt-excl-head { padding: 12px 14px 0; font-weight: 700; border-top: 1px solid var(--line-soft); margin: 0; font-size: 15px; }
.pt-excl { margin: 0; padding: 4px 14px 12px 32px; color: var(--ink-soft); }
.pt-terms { color: var(--ink-soft); line-height: 1.45; margin: 0; }

/* Guarded approval: name, tick, approve. */
.pt-sign { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.pt-sign h2, .pt-sign h3 { margin: 0; }
.pt-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; margin: 0; }
.pt-field input, .pt-field textarea, .pt-field select {
  font: inherit; font-weight: 400; padding: 11px 12px; min-height: 48px; box-sizing: border-box;
  border: 1px solid var(--input-line); border-radius: var(--radius-input); background: var(--card); width: 100%;
}
.pt-field input[readonly] { background: #F2F0EA; }
.pt-tick { display: flex; gap: 10px; align-items: center; min-height: var(--tap); cursor: pointer; margin: 0; }
.pt-tick input { width: 20px; height: 20px; min-height: 0; margin: 0; flex: 0 0 auto; }
.pt-sign .btn-primary, .pt-wide { width: 100%; justify-content: center; min-height: 52px; font-weight: 700; }
.pt-sign .btn:not(.btn-primary) { width: 100%; justify-content: center; min-height: 48px; font-weight: 600; }
.pt-link-center {
  min-height: var(--tap); display: flex; align-items: center; justify-content: center; font-weight: 600;
}
.pt-note { color: var(--ink-soft); font-size: 14px; text-align: center; margin: 0; }

/* ---------- job progress (PortalJob board) ---------- */
.pt-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; display: flex; flex-direction: column; gap: 10px; margin: 0;
}
.pt-card > * { margin: 0; }
.pt-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pt-steps li { display: flex; gap: 10px; align-items: center; }
.pt-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #fff; box-sizing: border-box;
  border: 3px solid var(--done); flex: 0 0 auto;
}
.pt-dot.off { border: 2px solid var(--input-line); }

/* Change order (PortalChange board). */
.pt-change-why { line-height: 1.5; margin: 0; }
.pt-rows { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.pt-row { padding: 10px 14px; display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line-soft); }
.pt-row:first-child { border-top: 0; }
.pt-row.pt-row-total { border-top: 2px solid var(--ink); font-weight: 700; }

/* Invoice (PortalInvoice board). */
.pt-inv-to { color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.pt-inv-status { font-weight: 600; }
.pt-inv-status.is-paid { color: var(--done); }
.pt-inv-status.is-void { color: var(--attention); }
.pt-pay { display: flex; flex-direction: column; gap: 4px; }
.pt-pay ul { margin: 0; padding-left: 18px; color: var(--ink-soft); }

/* ---------- messages (PortalMessages board) ---------- */
.pt-thread { display: flex; flex-direction: column; gap: 10px; }
.pt-msg {
  max-width: 84%; padding: 10px 12px; border-radius: 10px; line-height: 1.4;
  white-space: pre-wrap; word-break: break-word; box-sizing: border-box;
}
.pt-msg .pt-msg-meta { font-size: 12px; margin-top: 4px; white-space: normal; }
.pt-msg .pt-msg-subject { display: block; font-weight: 700; white-space: normal; }
.pt-msg.me { align-self: flex-end; background: var(--action); color: #fff; border-bottom-right-radius: 3px; }
.pt-msg.me .pt-msg-meta { color: #DCE6F7; }
.pt-msg.them { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.pt-msg.them .pt-msg-meta { color: var(--ink-soft); }
.pt-compose {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 12px 14px; margin: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.pt-compose label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; min-width: 0; }
.pt-compose textarea {
  font: inherit; font-weight: 400; font-size: 15px; padding: 10px 12px; width: 100%; box-sizing: border-box;
  border: 1px solid var(--input-line); border-radius: var(--radius-input); resize: vertical; min-height: 48px;
}
.pt-compose .btn-primary { min-height: 48px; }
.pt-compose .form-error { flex-basis: 100%; margin: 0; }

/* ---------- account ---------- */
.pt-kv { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.pt-kv:first-child { border-top: 0; padding-top: 0; }
.pt-kv .muted { min-width: 120px; }
.pt-danger { border-color: var(--attention); }
.pt-danger h2 { color: var(--attention); }
.btn.pt-btn-danger { background: var(--attention); border-color: var(--attention); color: #fff; }
.btn.pt-btn-danger:hover { background: #8E2E08; border-color: #8E2E08; color: #fff; }

/* ---------- accept the invite (AcceptInvite board) ---------- */
.pt-invite { max-width: 440px; margin: 0 auto; }
.pt-invite-band {
  margin: -20px -16px 0; padding: 20px 24px; background: var(--band); color: var(--band-ink);
  display: flex; flex-direction: column; gap: 2px;
}
.pt-invite-band strong { font-size: 20px; }
.pt-invite-band span { font-size: 14px; color: var(--band-muted); }
.pt-invite-body { padding: 24px 8px 32px; display: flex; flex-direction: column; gap: 20px; }
.pt-invite-body h1 { margin: 0; }
.pt-invite-body p { margin: 0; line-height: 1.5; }
.pt-invite form { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .pt-invite-band { margin: 0; border-radius: var(--radius); } }

/* =====================================================================
   Crew and phone-link pages (CrewDay, CrewJob, CrewProblem boards).
   Body font is 16 px; every target is at least 48 px; Start and Finish
   are 56 px.
   ===================================================================== */
.phone-page { font-size: 16px; }
.phone-page .phone-wrap { padding: 0 16px 32px; }
.cw-band {
  margin: 0 -16px; padding: 14px 16px; min-height: 56px; box-sizing: border-box;
  background: var(--band); color: var(--band-ink);
}
.cw-band h1 { margin: 2px 0 0; color: var(--band-ink); font-size: 24px; }
.cw-band .phone-brand, .cw-band .cw-kicker { color: var(--band-muted); font-size: 14px; }
.cw-band .phone-brand .company-name { color: var(--band-ink); font-weight: 600; font-size: 15px; }
.cw-band .phone-brand .product-name { color: var(--band-muted); }
.cw-top {
  margin: 0 -16px 14px; padding: 6px 16px; min-height: 56px; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border-top: 3px solid var(--band); border-bottom: 1px solid var(--line);
}
.cw-top .phone-back {
  margin: 0; min-height: var(--tap); display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; font-size: 16px; text-decoration: none;
}
.cw-top strong { font-size: 16px; }
.cw-brand-line { font-size: 13px; color: var(--ink-soft); margin: 0 0 6px; }
.cw-section-head { margin: 18px 0 8px; font-size: 17px; }
.cw-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px;
}
.cw-card > * { margin: 0; }
.cw-card h2 { font-size: 17px; margin: 0; }
.cw-label { color: var(--ink-soft); font-size: 14px; }
.cw-job-name { font-weight: 700; font-size: 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cw-meta { color: var(--ink-soft); }
.cw-note { color: var(--ink-soft); font-size: 14px; }
.cw-running { color: var(--done); font-weight: 600; }
.cw-card form { margin: 0; }
.btn.cw-big, .cw-big {
  width: 100%; justify-content: center; min-height: 56px; font-size: 18px; font-weight: 700;
}
.cw-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cw-two .btn { min-height: 52px; justify-content: center; font-weight: 600; text-align: center; }
.cw-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 12px; }
.cw-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  min-height: 56px; padding: 8px 14px; border-top: 1px solid var(--line-soft);
  color: var(--ink); text-decoration: none;
}
.cw-list a:first-child { border-top: 0; }
.cw-list a:hover { background: rgba(42, 93, 176, .04); color: var(--ink); text-decoration: none; }
.cw-list strong { display: block; }
.cw-list .cw-open { color: var(--action); font-weight: 600; white-space: nowrap; }
.cw-foot { color: var(--ink-soft); font-size: 13px; margin-top: 16px; }

/* timer strip on the job screen */
.cw-timer { display: flex; flex-direction: column; gap: 10px; }
.cw-timer .muted { font-size: 14px; }

/* the work checklist: big tick boxes, 48 px rows */
.phone-page .crew-step button { min-height: 48px; padding: 12px 0; font-size: 16px; align-items: center; }
.phone-page .crew-box { flex-basis: 26px; height: 26px; }
.cw-steps-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

/* photos and the problem report */
.phone-page .phone-camera { min-height: 56px; font-size: 18px; font-weight: 700; }
.phone-page .crew-photo-fields input, .phone-page .crew-photo-fields select,
.cw-card input[type=text], .cw-card textarea, .cw-card select {
  font: inherit; padding: 11px 12px; min-height: 48px; box-sizing: border-box; width: 100%;
  border: 1px solid var(--input-line); border-radius: var(--radius-input); background: var(--card);
}
.cw-kinds { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cw-kinds legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.cw-kind {
  display: flex; gap: 12px; align-items: center; min-height: 52px; padding: 0 14px;
  border: 1px solid var(--input-line); border-radius: var(--radius); background: var(--card); cursor: pointer;
}
.cw-kind input { width: 22px; height: 22px; min-height: 0; margin: 0; flex: 0 0 auto; }
.cw-kind:has(input:checked) { border: 2px solid var(--action); background: var(--action-soft); }
.cw-add {
  display: flex; align-items: center; justify-content: center; min-height: 52px; width: 100%;
  border: 1px dashed var(--input-line); border-radius: var(--radius); background: var(--card);
  color: var(--action); font: inherit; font-weight: 600; cursor: pointer; box-sizing: border-box;
}
.cw-add:hover { border-color: var(--action); }
.cw-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.cw-field textarea, .cw-field input, .cw-field select { font-weight: 400; }
.phone-page .crew-flag { min-height: 56px; font-size: 18px; font-weight: 700; margin-top: 0; }
.cw-problems { list-style: none; margin: 0; padding: 0; }
.cw-problems li { padding: 10px 12px; margin-top: 6px; background: var(--attention-soft); border: 1px solid var(--attention); border-radius: var(--radius); }
.phone-page .phone-ok { border: 1px solid var(--done); background: var(--done-soft); color: var(--done); font-weight: 600; padding: 12px 14px; border-radius: var(--radius); }
.phone-page .form-error { border-radius: var(--radius); }

/* ---------- page width: the portal reads as a phone column, centred on wide screens ---------- */
.pt-page { max-width: 560px; margin: 0 auto; }

.pt-page > .callout, .pt-page > .callout-attention { margin: 0 0 14px; }
.pt-page.pt-stack > .callout, .pt-page.pt-stack > .callout-attention { margin: 0; }
.pt-proposal .proposal-sheet { background: transparent; border: 0; padding: 0; border-radius: 0; display: flex; flex-direction: column; gap: 14px; }
.cw-timer { align-items: stretch; }
.cw-band .product-name, .cw-brand-line .product-name { border-left: 0; padding-left: 0; margin-left: 0; }
.phone-page .phone-camera:not(.btn-primary), .phone-page .crew-flag { color: var(--action); border-color: var(--action); }