/* v4 refresh — contractor screens. Tokens only (tokens/*.css): no bare hex, weights 400/500. */
/* Design export p63–p76 (22/10/2026); spec docs/ui-refresh/05-contractor.md.
   Everything is scoped to body.tpl-contractor or to a contractor-only class, so
   ASP's screens never see it. */

/* ── p63 · the contractor rail (laptop ≥ 1280; the iPad icon rail is untouched) ── */
@media (min-width: 1280px) {
  body.tpl-contractor .rail { width: 232px; flex-basis: 232px; padding-left: 12px; padding-right: 12px; }
  body.tpl-contractor .rail-nav { margin-top: 22px; flex: 1 1 auto; }
  body.tpl-contractor .nav-group + .nav-group { margin-top: 12px; }
  body.tpl-contractor .nav-group-label { padding: 0 10px 6px; font-size: var(--text-label); color: var(--ink-3); }
  body.tpl-contractor .nav-item { min-height: 36px; margin-bottom: 2px; font-size: 13.5px; }
  body.tpl-contractor .nav-item .ri-ic { display: block; flex: none; width: 16px; height: 16px; stroke-width: 1.6; color: var(--ink-2); }
  body.tpl-contractor .nav-item.active { border-color: transparent; box-shadow: 0 0 0 1px var(--hair); }
  body.tpl-contractor .nav-item.active .ri-ic { color: var(--ink); }
  body.tpl-contractor .nav-item .nav-count:not([hidden]) { margin-left: auto; min-width: 28px; height: 18px; background: var(--surface-sunk); color: var(--ink-2); font-weight: var(--weight-regular); font-size: 11px; }
  /* Settings and Help: one unlabelled two-item block, pushed to the foot. */
  body.tpl-contractor .nav-group:has(> .nav-item[data-id="settings"]) { margin-top: auto; padding-top: 24px; }
  body.tpl-contractor .nav-group:has(> .nav-item[data-id="settings"]) + .nav-group-foot { margin-top: 0; padding-top: 0; }
  body.tpl-contractor .nav-group-foot .nav-group-label { display: none; }
  /* The foot: "Figures hidden" as one phrase, then a navy avatar, the name and the role. */
  body.tpl-contractor .rail-foot { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 14px 10px 0; }
  body.tpl-contractor #fig-toggle-slot { grid-column: 1 / -1; margin-bottom: 12px !important; }
  body.tpl-contractor .fig-toggle { min-height: 32px; padding: 0 10px; border-radius: var(--radius-md); color: var(--ink-2); font-size: 12.5px; gap: 6px; }
  body.tpl-contractor .fig-toggle .fig-state { text-transform: lowercase; font-weight: var(--weight-regular); margin-left: -2px; }
  body.tpl-contractor .rail-avatar { display: flex; grid-column: 1; grid-row: 2 / span 2; width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    align-items: center; justify-content: center; background: var(--ink-fill); color: var(--ink-fill-ink); font-family: var(--font-sans); font-size: 11px; font-weight: var(--weight-medium); }
  body.tpl-contractor .rail-avatar[hidden] { display: none; }
  /* The v4 user block (Your menu) carries the avatar, name and role at laptop width; the icon-rail avatar is the iPad's. */
  body.tpl-contractor .rail-foot > .user-block { grid-column: 1 / -1; margin: 0; }
  body.tpl-contractor .rail-foot > .rail-avatar { display: none; }
  body.tpl-contractor .user-name { grid-column: 2; grid-row: 2; font-size: 13px; }
  body.tpl-contractor .user-name.viewas-trigger::after { content: none; }
  body.tpl-contractor .user-title { grid-column: 2; grid-row: 3; font-size: 11.5px; margin-top: 0; }
  body.tpl-contractor #signout-btn { display: none; }
}

/* ── Shared on every contractor laptop screen (§0.3) ──────────────────────── */
.ct4 { gap: 24px; }
.ct4 .page-h h1 { font-size: var(--text-h1); letter-spacing: -0.03em; }
.ct4 .page-h .page-sub { font-size: 13.5px; color: var(--ink-2); }
.ct4-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ct4-head > .page-h { flex: 1 1 auto; min-width: 0; }
.ct4-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct4 .seg button { font-size: 13px; }
.ct4 .btn { font-size: 13px; }
.ct4 .btn.ok, .ct4 .btn.ok:hover { background: var(--status-ok); border-color: transparent; color: var(--primary-ink); }
.ct4 .btn.ok:disabled { background: var(--btn-disabled); }
.ct4-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ct4-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.ct4-st.attn { color: var(--status-overdue-ink); }
.ct4-st.attn .ct4-dot { background: var(--brand-orange); }
.ct4-st.ok { color: var(--status-ok); }
.ct4-st.hold { color: var(--status-hold-ink); }
.ct4-st.hold .ct4-dot { background: var(--status-hold); }
.ct4-st.muted { color: var(--ink-3); }
.ct4-st.faint { color: var(--ink-3); }
.ct4-st.faint .ct4-dot { background: var(--hair-strong); }
.ct4-st.link { color: var(--link); }
.ct4-card { background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; padding: 20px 22px; }
.ct4-card-h { margin: 0 0 12px; font-size: 16.5px; font-weight: var(--weight-medium); color: var(--ink); letter-spacing: -0.01em; }
.ct4-info { background: var(--surface-tint); border-radius: 16px; padding: 20px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.ct4-info h3 { margin: 0 0 6px; font-size: 16px; font-weight: var(--weight-medium); color: var(--ink); }
.ct4 table th { border-bottom: 1.5px solid var(--border-strong); }
.ct4-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 12px; background: var(--surface-sunk); color: var(--ink-2); white-space: nowrap; }
.ct4-pill.blue { background: var(--brand-blue-25); color: var(--link); }
.ct4-pill.ok { background: var(--ok-tint); color: var(--status-ok); }
.ct4-pill.late { background: var(--status-overdue-bg); color: var(--status-overdue-ink); }
.ct4 .mono, .ct4-mono { font-family: var(--font-technical); font-variant-numeric: tabular-nums; }

/* ── p64 · Time, the week ─────────────────────────────────────────────────── */
.tw-page.ct4 .tw-lock { gap: 14px; }
.tw-page.ct4 .tw-status { font-size: 13px; }
.tw-page.ct4 .tw-status.fix .tw-dot { background: var(--brand-orange); }
.tw-navrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: -4px; }
.tw-page.ct4 .tw-weeknav { display: flex; align-items: center; gap: 10px; }
.tw-page.ct4 .tw-weeknav .btn.icon { width: 36px; color: var(--ink); font-size: 18px; }
.tw-range { font-size: 17px; font-weight: var(--weight-medium); color: var(--ink); }
.tw-this { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--surface-sunk); color: var(--ink); font: inherit; font-size: 12.5px; }
button.tw-this { cursor: pointer; }
button.tw-this:hover { background: var(--hair); }
.tw-page.ct4 .tw-body { gap: 32px; }
.tw-page.ct4 .tw-gridwrap { flex: 1 1 620px; }
.tw-page.ct4 .tw-grid th { font-size: 10px; padding: 0 6px 10px; border-bottom: 1.5px solid var(--border-strong); }
.tw-page.ct4 .tw-grid th:first-child { padding-left: 0; }
.tw-page.ct4 .tw-grid td { border-bottom: 1px solid var(--hair-soft); padding: 9px 6px; }
.tw-page.ct4 .tw-grid td:first-child { padding-left: 0; }
.tw-page.ct4 .tw-grid tbody tr { height: 72px; }
.tw-page.ct4 .tw-grid tfoot td { border-top: 1px solid var(--hair); border-bottom: 0; padding-top: 14px; }
.tw-person { display: flex; align-items: center; gap: 12px; }
.tw-page.ct4 .tw-av { width: 32px; height: 32px; font-size: 11px; background: var(--brand-blue-50); color: var(--link); }
.tw-page.ct4 .tw-name { font-size: 14px; }
.tw-page.ct4 .tw-role { font-size: 12px; }
.tw-page.ct4 .tw-total { font-size: 15px; }
.tw-page.ct4 .tw-foot-l { font-size: 14px; color: var(--ink-2); }
.tw-page.ct4 .tw-cell { max-width: 86px; min-height: 52px; margin: 0 auto; justify-content: center; font-size: 15px; gap: 1px; }
.tw-page.ct4 .tw-cell .tw-sub { font-size: 11.5px; }
.tw-page.ct4 .tw-cell.running .tw-sub { color: var(--link); }
.tw-page.ct4 .tw-cell.auto { color: var(--ink); box-shadow: none; }
.tw-page.ct4 .tw-cell.outside:not(.auto) { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--link); }
.tw-page.ct4 .tw-cell.empty { min-height: 52px; color: var(--hair-strong); }
.tw-page.ct4 .tw-cell.on { box-shadow: inset 0 0 0 2px var(--brand-navy); }
.tw-page.ct4 .tw-legend { padding-top: 16px; font-size: 12.5px; }
.tw-page.ct4 .tw-key.auto { box-shadow: none; }
.tw-page.ct4 .tw-key.outside { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--link); }
.tw-footnote { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.tw-page.ct4 .tw-panel { flex: 0 1 390px; min-width: min(100%, 340px); padding: 22px; gap: 0; }
.tw-phead { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--hair-soft); }
.tw-ptitle { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-medium); color: var(--ink); letter-spacing: -0.01em; }
.tw-pdate { font-size: 13px; color: var(--ink-3); }
.tw-page.ct4 .tw-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 0; flex-wrap: nowrap; }
.tw-page.ct4 .tw-span { font-size: 15px; font-weight: var(--weight-medium); }
.tw-page.ct4 .tw-proj { font-size: 14px; color: var(--ink); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tw-page.ct4 .tw-note { font-size: 13px; line-height: 1.45; }
.tw-page.ct4 .tw-note.muted { color: var(--ink-2); }
.tw-page.ct4 .tw-fix { margin-top: 14px; padding: 16px; gap: 12px; }
.tw-page.ct4 .tw-fix-text { font-size: 14px; font-weight: var(--weight-medium); line-height: 1.45; }
.tw-page.ct4 .tw-fix-grid { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; }
.tw-page.ct4 .tw-fix .f-label { display: block; font-size: 12.5px; margin-bottom: 6px; }
.tw-page.ct4 .tw-fix .f-input { width: 100%; box-sizing: border-box; background: var(--surface); }
.tw-page.ct4 .tw-foot { margin-top: 14px; font-size: 12.5px; }
@media (max-width: 1279px) {
  .tw-page.ct4 .tw-panel { flex: 1 1 100%; }
}

/* ── p65 · Task review ────────────────────────────────────────────────────── */
.trv-page.ct4 .trv-body { flex-wrap: nowrap; gap: 32px; }
.trv-page.ct4 .trv-queue { flex: 0 0 370px; max-width: 370px; gap: 0; }
.trv-page.ct4 .trv-q { padding: 14px 16px; border-radius: 12px; border-bottom: 1px solid var(--hair-soft); gap: 5px; position: relative; }
.trv-page.ct4 .trv-q:hover { background: var(--row-hover); }
.trv-page.ct4 .trv-q.on { background: var(--brand-blue-25); box-shadow: inset 3px 0 0 var(--brand-navy); border-radius: 4px 12px 12px 4px; }
.trv-page.ct4 .trv-qmeta { gap: 8px; font-size: 13px; color: var(--ink-3); }
.trv-page.ct4 .trv-qmeta .ct4-st { margin-left: auto; }
.trv-page.ct4 .trv-qtitle { font-size: 15px; }
.trv-page.ct4 .trv-qline { font-size: 13px; }
.trv-page.ct4 .trv-detail { flex: 1 1 auto; border-radius: 16px; padding: 28px; gap: 18px; }
.trv-page.ct4 .trv-dmeta { font-size: 13px; color: var(--ink-2); }
.trv-page.ct4 .trv-dtitle { font-size: 30px; letter-spacing: -0.03em; line-height: 1.15; }
.trv-page.ct4 .trv-dby { font-size: 13px; }
.trv-page.ct4 .trv-note { background: var(--surface-tint); border-radius: 10px; padding: 14px 16px; font-size: 15px; color: var(--ink); }
.trv-page.ct4 .trv-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trv-page.ct4 .trv-ph { border-radius: 10px; background: repeating-linear-gradient(135deg, var(--hair-soft) 0 8px, var(--surface-tint) 8px 16px); }
.trv-page.ct4 .trv-pm, .ct4-chip-time { background: var(--brand-navy); opacity: 1; color: var(--primary-ink); font-family: var(--font-technical); font-size: 11.5px; padding: 3px 8px; border-radius: var(--radius-pill); }
.trv-page.ct4 .trv-ev { font-size: 12.5px; margin-top: -4px; }
.trv-page.ct4 .trv-ev.warn { color: var(--status-overdue-ink); }
.trv-page.ct4 .trv-ev.warn .trv-dot { color: var(--brand-orange); }
.trv-page.ct4 .trv-hist .ct4-card-h { margin-bottom: 4px; }
.trv-page.ct4 .trv-round { padding: 12px 0; border-top: 1px solid var(--hair-soft); border-bottom: 0; font-size: 14px; color: var(--ink); }
.trv-page.ct4 .trv-when { flex: 0 0 110px; font-size: 13px; }
.trv-cml { font-size: 13px; color: var(--ink-3); }
.trv-cml b { font-weight: var(--weight-medium); color: var(--ink); }
.trv-page.ct4 .trv-cm { width: 100%; box-sizing: border-box; border-radius: 10px; min-height: 64px; font: inherit; font-size: 14px; }
.trv-page.ct4 .trv-cm.bad { border-color: var(--status-error); box-shadow: 0 0 0 3px var(--status-overdue-bg); }
.trv-page.ct4 .trv-btns { align-items: center; gap: 8px; margin-top: 8px; }
.trv-page.ct4 .trv-accept { min-width: 122px; }
.trv-hint { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.trv-page.ct4 .trv-own { border-radius: 12px; padding: 14px 16px; font-size: 14px; }
.trv-page.ct4 .trv-done { border-radius: 12px; font-size: 14px; }
@media (max-width: 1279px) {
  .trv-page.ct4 .trv-body { flex-wrap: wrap; }
  .trv-page.ct4 .trv-queue { flex: 1 1 100%; max-width: none; }
}

/* ── p66 · Team ───────────────────────────────────────────────────────────── */
.tr-page.ct4 { gap: 20px; }
.tr-lede { margin: -10px 0 0; font-size: 13.5px; color: var(--ink-2); }
.tr-page.ct4 .tr-table th { font-size: 10px; padding: 0 12px 10px; border-bottom: 1.5px solid var(--border-strong); }
.tr-page.ct4 .tr-table th.r, .tr-page.ct4 .tr-table td.r { text-align: right; }
.tr-page.ct4 .tr-table td { padding: 13px 12px; border-bottom: 1px solid var(--hair-soft); font-size: 14px; height: 36px; }
.tr-page.ct4 .tr-av { color: var(--link); font-size: 11px; }
.tr-page.ct4 .tr-role { color: var(--ink); }
.tr-page.ct4 .tr-since { color: var(--ink-3); }
.tr-page.ct4 .tr-rate { font-weight: var(--weight-medium); }
.tr-page.ct4 .st-tag { font-size: 13px; }
.tr-page.ct4 .st-sw.fixed.on { opacity: 0.4; }
.tr-page.ct4 .tr-scope { width: 204px; min-height: 36px; font-size: 13.5px; color: var(--ink); background: var(--surface); }
.tr-page.ct4 .tr-scope:disabled { opacity: 1; background: var(--surface-tint); color: var(--ink-3); border-color: var(--hair-soft); }
.tr-page.ct4 .tr-scope.fixed:disabled { background: var(--surface); color: var(--ink); border-color: var(--hair); }
.tr-page.ct4 .st-narrow { width: 96px; }
.tr-page.ct4 .tr-invites { border: 0; padding: 0; background: none; gap: 10px; }
.tr-invite { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface); }
.tr-invite .tr-av { background: var(--surface-sunk); color: var(--ink-2); }
.tr-invite-text { flex: 1 1 320px; min-width: 0; font-size: 13px; color: var(--ink-2); }
.tr-invite-text b { font-size: 14px; font-weight: var(--weight-medium); color: var(--ink); }
.tr-page.ct4 .tr-cards { gap: 16px; }
.tr-page.ct4 .ct4-info p { margin: 0; }

/* ── p67 · Add a person (the dialog) ──────────────────────────────────────── */
.iv4-card .tf-head { padding-bottom: 6px; }
.iv4-card .tf-title { font-size: 24px; }
.iv4-card .tf-subtitle { font-size: 13.5px; color: var(--ink-2); }
.iv4-card .tf-foot { border-top: 1px solid var(--hair); display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: center; gap: 8px; }
.iv4-card .tf-foot .iv-qrlink { margin-right: auto; order: 9; }
.iv4-card .tf-foot .tf-spacer { display: none; }
.iv4-card .tf-foot { flex-wrap: wrap; }
.iv4-card .tf-foot .tf-note { order: 10; flex: 0 0 100%; text-align: right; }
.iv4-card .tf-foot .tf-note:empty { display: none; }
.iv4 { gap: 18px; }
.iv4 .iv-label { font-size: 13px; font-weight: var(--weight-medium); color: var(--ink); }
.iv4 .f-input { width: 100%; box-sizing: border-box; }
.iv4 .iv-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.iv4 .st-opt { border-radius: 12px; padding: 14px; }
.iv4 .st-opt-name { font-size: 15px; }
.iv4 .st-opt-desc { font-size: 12.5px; }
.iv4 .st-opt.on { border: 2px solid var(--brand-navy); padding: 13px; background: var(--brand-blue-25); }
.iv4 .iv-seg { padding: 3px; border-radius: 10px; }
.iv4 .iv-seg-i { min-height: 36px; border-radius: 8px; font-size: 13.5px; }
.iv4 .iv-seg-i:disabled { color: var(--ink-3); cursor: not-allowed; }
.iv-soon { color: var(--ink-3); font-size: 12px; }
.iv4 .iv-preview { background: var(--surface-tint); border-radius: 12px; }
.iv-preview-h { font-size: 13px; font-weight: var(--weight-medium); color: var(--ink); }
.iv-link { padding: 14px 16px; border-radius: 12px; background: var(--surface-tint); font-size: 13px; word-break: break-all; user-select: all; }
@media (max-width: 600px) { .iv4 .iv-roles { grid-template-columns: 1fr; } }
.iv4-card { width: 555px !important; max-width: calc(100vw - 32px); max-height: min(860px, 100dvh - 48px) !important; }
.iv4-card .tf-btn { height: 36px; padding: 0 16px; font-size: 13.5px; border-radius: var(--radius-md); }
.iv4-card .tf-btn-primary { background: var(--primary); color: var(--primary-ink); }
.iv4-card .tf-btn-primary:hover { background: var(--primary-hover); }
.iv4-card .tf-btn-cancel { border: 1px solid var(--hair); background: var(--surface); color: var(--ink); }
.iv4-card .iv-qrlink { font-size: 13px; white-space: nowrap; }
.iv4-card .iv4 { gap: 14px; }

/* ── p68 · Project, costs ─────────────────────────────────────────────────── */
.pc-page.ct4 { display: flex; flex-direction: column; gap: 22px; }
.pc-page.ct4 .crumbs { margin-bottom: -14px; }
.pc-top { align-items: center; }
.pc-titles { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pc-title { margin: 0; font-size: 36px; font-weight: var(--weight-medium); letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); }
.pc-no { color: var(--link); margin-right: 6px; }
.pc-page.ct4 .pc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
.pc-page.ct4 .pc-meta .linkbtn { font-size: 13.5px; min-height: 0; padding: 0; }
.pc-chip { gap: 6px; font-size: 12.5px; }
.pc-chip .ct4-dot { width: 6px; height: 6px; }
.pc-sep { color: var(--ink-3); }
.pc-page.ct4 .pc-tabs { margin-top: 6px; }
.pc-page.ct4 .pc-tabs .tab.active { border-bottom-color: var(--brand-navy); }
.pc-page.ct4 .pc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.pc-page.ct4 .pc-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 16px; }
.pc-label { font-size: 13px; color: var(--ink-2); }
.pc-page.ct4 .pc-fig { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pc-page.ct4 .pc-big { font-size: 32px; font-weight: var(--weight-medium); color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.pc-page.ct4 .pc-of { font-size: 13px; color: var(--ink-3); }
.pc-page.ct4 .pc-bar { position: relative; height: 4px; border-radius: 2px; background: var(--hair-soft); margin: 10px 0 4px; overflow: visible; }
.pc-page.ct4 .pc-fill { height: 100%; border-radius: 2px; background: var(--link); }
.pc-page.ct4 .pc-fill.attn { background: var(--brand-orange); }
.pc-page.ct4 .pc-fill.hold { background: var(--status-hold); }
.pc-page.ct4 .pc-fill.ok { background: var(--status-ok); }
.pc-page.ct4 .pc-mark { position: absolute; top: -5px; width: 2px; height: 14px; margin-left: -1px; background: var(--brand-navy); border-radius: 1px; }
.pc-page.ct4 .pc-note { font-size: 12.5px; white-space: normal; }
.pc-page.ct4 .pc-legend { margin-top: -8px; font-size: 12px; color: var(--ink-3); }
.pc-body { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 32px; align-items: start; }
.pc-page.ct4 .pc-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.pc-page.ct4 .pc-table th { text-align: left; font-size: 10px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--ink-3); padding: 0 10px 10px; white-space: nowrap; }
.pc-page.ct4 .pc-table th:first-child, .pc-page.ct4 .pc-table td:first-child { padding-left: 0; }
.pc-page.ct4 .pc-table td { padding: 14px 10px; border-bottom: 1px solid var(--hair-soft); font-size: 14px; }
.pc-page.ct4 .pc-table .r { text-align: right; }
.pc-stage { font-weight: var(--weight-medium); }
.pc-aside { display: flex; flex-direction: column; gap: 16px; }
.pc-page.ct4 .pc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); font-size: 14px; }
.pc-hm { font-weight: var(--weight-medium); }
.pc-wait { justify-content: flex-start; }
.pc-wtext { flex: 1; min-width: 0; }
.pc-wait .linkbtn { font-size: 13px; min-height: 0; }
.pc-foot { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.pc-foot.attn { color: var(--status-overdue-ink); }
@media (max-width: 1279px) { .pc-body { grid-template-columns: 1fr; } }
.pc-page.ct4 .pc-chip { border: 0; padding: 0 10px; height: 24px; }
.pc-page.ct4 .pc-wait { justify-content: flex-start; }
.pc-page.ct4 .pc-wait > .ct4-st { flex: none; }
.pc-page.ct4 .pc-big { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.pc-page.ct4 .pc-tabs .tab { font-size: 14px; }
.ct4 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Lists on contractor laptop screens (Quotes, Catalogue): the navy head rule, soft row rules. */
.ct4 .ct4-list th { font-size: 10px; border-bottom: 1.5px solid var(--border-strong); padding: 0 12px 10px; }
.ct4 .ct4-list td { border-bottom: 1px solid var(--hair-soft); padding: 13px 12px; font-size: 14px; }
.ct4 .ct4-list th:first-child, .ct4 .ct4-list td:first-child { padding-left: 0; }

/* ── p69 · Quote builder ──────────────────────────────────────────────────── */
.qt-page.ct4 { display: flex; flex-direction: column; gap: 22px; }
.qt-page.ct4 .crumbs { margin-bottom: -14px; }
.qt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 32px; align-items: end; }
.qt-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.qt-top .qt-titles { flex: 1 1 560px; }
.qt-top .pc-title { font-size: 34px; }
.qt-grid.qt-body { align-items: start; margin-top: -8px; }
.qt-titles { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qt-pill { vertical-align: middle; position: relative; top: -6px; margin-left: 4px; letter-spacing: 0; font-weight: var(--weight-regular); }
.qt-page.ct4 .qt-meta { font-size: 13.5px; color: var(--ink-2); }
.qt-acts { justify-content: flex-end; }
.qt-tdot { width: 6px; height: 6px; color: var(--ink-3); }
.qt-page.ct4 .qt-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; }
.qt-page.ct4 .qt-table th { text-align: left; font-size: 10px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--ink-3);
  padding: 0 10px 10px; border-bottom: 1.5px solid var(--border-strong); vertical-align: bottom; line-height: 1.5; }
.qt-page.ct4 .qt-table th:nth-child(3) { max-width: 150px; white-space: normal; }
.qt-page.ct4 .qt-table th:first-child, .qt-page.ct4 .qt-table td:first-child { padding-left: 0; }
.qt-page.ct4 .qt-table td { padding: 14px 10px; border-bottom: 1px solid var(--hair-soft); font-size: 14px; vertical-align: middle; }
.qt-page.ct4 .qt-table .r { text-align: right; }
.qt-page.ct4 .qt-table .nowrap { white-space: nowrap; }
.qt-page.ct4 .qt-grp td { padding: 20px 0 6px; font-size: 13px; color: var(--ink-2); background: none; font-weight: var(--weight-regular); border-bottom: 0; letter-spacing: 0; text-transform: none; }
.qt-item { display: flex; flex-direction: column; gap: 2px; max-width: 220px; }
.qt-iname { font-size: 14px; font-weight: var(--weight-medium); color: var(--ink); }
.qt-isub { font-size: 12.5px; color: var(--ink-2); }
.qt-ibad { font-size: 13px; font-weight: var(--weight-medium); color: var(--status-overdue-ink); margin-top: 2px; }
.qt-tot { font-weight: var(--weight-medium); }
.qt-page.ct4 .qt-table td.int { color: var(--ink-3); }
/* The invalid line: an inset orange tint, rounded, not a row stripe. */
.qt-page.ct4 .qt-table tr.bad td { background: var(--status-overdue-bg); border-bottom-color: transparent; }
.qt-page.ct4 .qt-table tr.bad td:first-child { border-radius: 12px 0 0 12px; padding-left: 12px; }
.qt-page.ct4 .qt-table tr.bad td:last-child { border-radius: 0 12px 12px 0; }
.qt-src4 { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); font: inherit; font-size: 12.5px; font-style: normal; white-space: nowrap; cursor: pointer;
  background: var(--surface-sunk); color: var(--ink-2); }
.qt-src4.drawing { background: var(--brand-blue-50); color: var(--link); }
.qt-src4.site { background: var(--ok-tint); color: var(--status-ok); }
.qt-src4.input { background: var(--surface-sunk); color: var(--ink-2); }
.qt-pill-in { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 12px; border: 1px solid var(--hair); border-radius: var(--radius-pill); background: var(--surface); margin: 0; }
.qt-pill-in .qt-qty { border: 0; outline: 0; background: none; font: inherit; font-size: 12.5px; width: 140px; padding: 0; color: var(--ink); text-overflow: ellipsis; }
.qt-pill-in .qt-qty::placeholder { color: var(--ink-3); }
.qt-pill-in:focus-within { border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.qt-pill-in .qt-measure { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--link); cursor: pointer; padding: 0; }
.qt-pill-in .qt-measure:hover { background: var(--brand-blue-50); }
.qt-page.ct4 .qt-qtybtn { border: 0; background: none; font: inherit; padding: 2px 4px; border-radius: 6px; cursor: text; color: var(--ink); }
.qt-page.ct4 .qt-qtybtn:hover { background: var(--row-hover); }
.qt-page.ct4 .qt-qty.f-input { width: 72px; text-align: right; }
.qt-page.ct4 .qt-table .qt-xcol { width: 24px; padding-left: 0; padding-right: 0; }
.qt-page.ct4 .qt-table td { padding-left: 8px; padding-right: 8px; }
.qt-page.ct4 .qt-table th { padding-left: 8px; padding-right: 8px; }
.qt-page.ct4 .qt-table th:nth-child(3) { white-space: normal; width: 1%; min-width: 120px; }
.qt-page.ct4 .qt-table td:first-child { position: relative; }
.qt-remove { position: absolute; top: 8px; right: 0; border: 0; background: var(--surface); font: inherit; font-size: 14px; line-height: 20px; color: var(--ink-3); cursor: pointer; opacity: 0; min-height: 0; padding: 0 6px; border-radius: 6px; }
.qt-table tr.bad .qt-remove { background: var(--status-overdue-bg); }
.qt-table tr:hover .qt-remove, .qt-remove:focus-visible, .qt-remove.armed { opacity: 1; }
.qt-remove.armed { color: var(--late); font-size: 12px; white-space: nowrap; }
.qt-page.ct4 .qt-key { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 16px; font-size: 12.5px; color: var(--ink-2); }
.qt-page.ct4 .qt-key span { display: inline-flex; align-items: center; gap: 8px; }
.qt-page.ct4 .qt-key .qt-src4 { cursor: default; height: 24px; }
.qt-aside { display: flex; flex-direction: column; gap: 16px; }
.qt-page.ct4 .qt-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); font-size: 14px; color: var(--ink); }
.qt-page.ct4 .qt-row.muted { color: var(--ink-3); }
.qt-page.ct4 .qt-row.strong { font-weight: var(--weight-medium); }
.qt-page.ct4 .qt-row.big { border-bottom: 0; padding-top: 14px; font-size: 15px; font-weight: var(--weight-medium); }
.qt-page.ct4 .qt-row.big .mono { font-size: 28px; font-weight: var(--weight-medium); font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.qt-page.ct4 .qt-row.plain { border-bottom: 0; }
.qt-valid { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); }
.qt-days { width: 72px; text-align: right; }
.qt-page.ct4 .qt-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.qt-errs { margin: 10px 0 0; font-size: 12.5px; font-weight: var(--weight-medium); color: var(--status-overdue-ink); line-height: 1.5; }
.qt-issue { width: 100%; margin-top: 14px; }
.qt-expired { align-items: center; }
@media (max-width: 1279px) { .qt-grid { grid-template-columns: 1fr; align-items: start; } .qt-acts { justify-content: flex-start; } }

/* ── p70 · Catalogue ──────────────────────────────────────────────────────── */
.ct-page.ct4 { display: flex; flex-direction: column; gap: 20px; }
.ct4-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct4-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--hair); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.ct4-chip:hover { border-color: var(--hair-strong); }
.ct4-chip .ct4-n { color: var(--ink-3); }
.ct4-chip.on { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--primary-ink); }
.ct4-chip.on .ct4-n { color: var(--primary-ink); opacity: 0.7; }
.ct4-search { width: min(266px, 100%); min-height: 36px; font-size: 13.5px; }
.ct4 .ct4-cat { min-width: 1000px; }
.ct4 .ct4-cat tbody tr { cursor: pointer; }
.ct4 .ct4-cat tbody tr:hover td { background: var(--nav-hover); }
.ct4 .ct4-cat .ct-name { font-size: 14px; font-weight: var(--weight-medium); color: var(--ink); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: inherit; }
.ct4 .ct4-cat .ct-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.ct4 .ct4-cat .muted { color: var(--ink-3); }
.ct4 .ct4-cat .strong { font-weight: var(--weight-medium); }
.ct4-sup { max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct4-age { font-size: 13px; }
.ct4-age .ink { color: var(--ink); }
.ct4-st.ok .ct4-dot { background: var(--status-ok); }
.ct4-foot { margin: -8px 0 0; font-size: 12px; color: var(--ink-3); }

/* ══ The contractor phone (p71–p76): ctm-* from mobile/screens/traverse-ui.js ══ */
.ctm-page { padding: calc(8px + env(safe-area-inset-top, 0px)) 20px 130px; display: flex; flex-direction: column; gap: 18px; color: var(--m-ink); }
.ctm-page.ctm-pad-bottom { padding-bottom: 180px; }
.ctm-mono { font-family: var(--font-technical); font-variant-numeric: tabular-nums; }
.ctm-mono.ink { color: var(--m-ink); }
.ctm-mono.accent { color: var(--m-accent); }
.ctm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding-top: 6px; }
.ctm-co { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ctm-mark { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 7px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--brand-blue-50); color: var(--m-accent); font-size: 11px; font-weight: var(--weight-medium); }
.ctm-mark img { width: 100%; height: 100%; object-fit: contain; }
.ctm-coname { font-size: 16px; font-weight: var(--weight-medium); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctm-topr { display: flex; align-items: center; gap: 8px; flex: none; }
.ctm-av { width: 44px; height: 44px; margin-right: -4px; border: 0; padding: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ctm-av > span { width: 36px; height: 36px; border-radius: 50%; background: var(--m-toast-bg); color: var(--m-toast-ink); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 12px; font-weight: var(--weight-medium); }
.ctm-titles { display: flex; flex-direction: column; gap: 2px; margin-top: -6px; }
.ctm-eb { font-size: 13px; color: var(--m-ink2); }
.ctm-title { margin: 0; font-size: var(--text-screen-title-lg); font-weight: var(--weight-medium); letter-spacing: -0.03em; line-height: 1.1; color: var(--m-ink); }
.ctm-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--m-hair2); }
.ctm-dot.ok { background: var(--m-ok); }
.ctm-dot.attn { background: var(--m-attention); }
.ctm-st { display: inline-flex; align-items: center; gap: 7px; }
.ctm-st.ok .ctm-dot { background: var(--m-ok); }
.ctm-st.attn .ctm-dot { background: var(--m-attention); }
.ctm-st.attn.words { color: var(--status-overdue-ink); }
.ctm-st.accent .ctm-dot { background: var(--m-accent); }
.ctm-st.muted .ctm-dot { background: var(--m-hair2); }

/* The navy card (On site since / Not checked in). */
.ctm-live { background: var(--m-toast-bg); color: var(--m-toast-ink); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.ctm-live-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--brand-on-ink-2); }
.ctm-live-no { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--brand-on-ink-1); }
.ctm-clock { font-family: var(--font-technical); font-size: var(--text-clock-site); letter-spacing: -0.02em; line-height: 1; }
.ctm-live-name { font-size: 21px; font-weight: var(--weight-medium); letter-spacing: -0.02em; line-height: 1.2; }
.ctm-live-where { font-size: 14px; color: var(--brand-on-ink-1); }
.ctm-live .ctm-btn { margin-top: 6px; height: 50px; }

/* Buttons: navy, 52 tall, radius 12 (white on the navy card; grey when it can't go yet). */
.ctm-btn { width: 100%; height: 52px; border: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  background: var(--m-toast-bg); color: var(--m-toast-ink); font-family: var(--font-sans); font-size: 16px; font-weight: var(--weight-medium); }
.ctm-btn.white { background: var(--m-card); color: var(--m-ink); }
.ctm-btn:disabled, .ctm-btn.off { background: var(--m-chip); color: var(--m-ink3); cursor: default; }
.ctm-btn.sent { background: var(--brand-blue-25); color: var(--m-ok); }
.ctm-dock { position: fixed; left: 16px; right: 16px; bottom: calc(34px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 6px; z-index: 8; }
.ctm-dock-note { text-align: center; font-size: 12.5px; color: var(--m-ink2); }
.ctm-textbtn { height: 44px; border: 0; background: none; font-family: var(--font-sans); font-size: 15px; font-weight: var(--weight-medium); color: var(--m-accent); cursor: pointer; }

/* A section with a count, over a 1.5px ink rule; rows run edge to edge. */
.ctm-list { display: flex; flex-direction: column; margin: 0 -20px; }
.ctm-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 20px 8px; border-bottom: 1.5px solid var(--m-ink); }
.ctm-sec-t { font-size: 13px; font-weight: var(--weight-medium); color: var(--m-ink); }
.ctm-sec-r { font-size: 14px; color: var(--m-ink3); }
.ctm-sec-r .ctm-mono { color: var(--m-ink2); }
.ctm-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 20px; box-sizing: border-box; border-bottom: 1px solid var(--m-hair); }
.ctm-row[data-act] { cursor: pointer; }
.ctm-row-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ctm-row-time { flex: 0 0 46px; font-size: 15px; color: var(--m-ink3); }
.ctm-row-title { font-size: 15.5px; font-weight: var(--weight-medium); line-height: 1.3; }
.ctm-row-sub { font-size: 13.5px; color: var(--m-ink2); }
.ctm-chev { color: var(--m-hair2); display: flex; }
.ctm-none { padding: 18px 20px; font-size: 15px; color: var(--m-ink2); }
.ctm-row [data-tick] { flex-basis: 26px !important; width: 26px !important; height: 26px !important; }

/* Time: the week's rows. */
.ctm-day-d { flex: 0 0 46px; font-size: 15px; color: var(--m-ink3); }
.ctm-day-l { font-size: 15.5px; color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctm-day-l.none { color: var(--m-ink3); }
.ctm-day-v { font-size: 15px; color: var(--m-ink); }
.ctm-day.accent .ctm-day-d { color: var(--m-accent); font-weight: var(--weight-medium); }
.ctm-day.accent .ctm-day-v { color: var(--m-accent); }
.ctm-day.attn .ctm-day-d, .ctm-day.attn .ctm-day-v { color: var(--status-overdue-ink); }
.ctm-banner { display: flex; align-items: center; gap: 10px; background: var(--status-overdue-bg); border-radius: 14px; padding: 4px 6px 4px 16px; min-height: 52px; }
.ctm-banner-t { flex: 1; font-size: 14px; color: var(--status-overdue-ink); padding: 10px 0; }
.ctm-banner-a { min-width: 44px; min-height: 44px; border: 0; background: none; font-family: var(--font-sans); font-size: 15px; font-weight: var(--weight-medium); color: var(--m-ink); cursor: pointer; }

/* Check in: the project card and the fine print. */
.ctm-card { background: var(--m-card); border: 1px solid var(--m-hair); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.ctm-no { font-size: 13px; color: var(--m-accent); }
.ctm-card-name { font-size: 19px; font-weight: var(--weight-medium); letter-spacing: -0.02em; }
.ctm-card-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; font-size: 14.5px; color: var(--m-ink2); }
.ctm-line { display: flex; align-items: center; gap: 8px; }
.ctm-fine { margin: 0; font-size: 13px; line-height: 1.45; color: var(--m-ink3); }
.ctm-err { font-size: 14px; color: var(--status-error); }
.ctm-lede { font-size: 15px; line-height: 1.45; color: var(--m-ink2); }
.ctm-field { display: flex; flex-direction: column; gap: 6px; }
.ctm-label { font-size: 13px; font-weight: var(--weight-medium); color: var(--m-ink); }
.ctm-input { height: 52px; border-radius: 14px; border: 0; box-shadow: inset 0 0 0 1px var(--m-hair); background: var(--m-card); padding: 0 16px; font-size: 17px; color: var(--m-ink); width: 100%; box-sizing: border-box; font-family: var(--font-sans); }
.ctm-input.ctm-mono { font-family: var(--font-technical); }
.ctm-textarea { height: 112px; padding: 14px 16px; resize: none; line-height: 1.4; }
/* Submit for review (p74), the review screen and Approvals (p75). */
.ctm-eb3 { color: var(--m-ink3); }
.ctm-sub { font-size: 14px; color: var(--m-ink2); margin-top: 2px; }
.ctm-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ctm-addph { aspect-ratio: 1 / 1; border-radius: 12px; border: 1px dashed var(--m-hair2); background: var(--m-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--m-accent); font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-medium); cursor: pointer; }
.ctm-addph svg { width: 22px; height: 22px; }
.ctm-count { font-size: 13.5px; font-weight: var(--weight-medium); }
.ctm-count.attn { color: var(--status-overdue-ink); }
.ctm-count.ok { color: var(--m-ok); }
.ctm-pin { display: flex; align-items: center; gap: 8px; }
.ctm-hist { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--m-hair); font-size: 15px; }
.ctm-hist .ctm-mono { flex: 0 0 64px; color: var(--m-ink3); }
.ctm-sentback { background: var(--status-overdue-bg); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.ctm-sentback-h { font-size: 13px; font-weight: var(--weight-medium); color: var(--status-overdue-ink); }
.ctm-sentback-q { font-size: 16px; line-height: 1.45; }
.ctm-sentback-w { font-size: 13.5px; color: var(--m-ink2); }
.ctm-btn.okfill { background: var(--m-ok); color: var(--m-on-accent); }
.ctm-btn.ctm-hairline { box-shadow: inset 0 0 0 1px var(--m-hair); }
.ctm-btn:disabled.okfill, .ctm-btn:disabled.white { opacity: 0.45; }
.ctm-seg { margin-top: -4px; }
.ctm-aplist { margin-top: -6px; }
.ctm-aprow { display: flex; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--m-hair); }
.ctm-thumb { flex: 0 0 64px; height: 64px; border-radius: 12px; background: repeating-linear-gradient(135deg, var(--hair-soft) 0 8px, var(--surface-tint) 8px 16px); }
.ctm-aprow .ctm-row-title { cursor: pointer; }
.ctm-evid { font-size: 13px; color: var(--m-ink2); }
.ctm-apbtns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.ctm-pbtn { height: 36px; padding: 0 16px; border-radius: 10px; border: 0; box-shadow: inset 0 0 0 1px var(--m-hair); background: var(--m-card); color: var(--m-ink);
  font-family: var(--font-sans); font-size: 14px; font-weight: var(--weight-medium); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ctm-pbtn.fill { background: var(--m-toast-bg); color: var(--m-toast-ink); box-shadow: none; }
.ctm-pbtn.done { background: none; box-shadow: none; color: var(--m-ok); padding: 0; cursor: default; }
.ctm-pbtn.done svg { width: 18px; height: 18px; }
.ctm-apnote { font-size: 14px; color: var(--m-ink2); }
/* Log a receipt (p76). */
.ctm-receipt { display: flex; gap: 16px; align-items: center; }
.ctm-rthumb { flex: 0 0 86px; height: 110px; border-radius: 12px; border: 0; padding: 0; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: repeating-linear-gradient(135deg, var(--hair-soft) 0 8px, var(--surface-tint) 8px 16px); color: var(--m-accent); font-family: var(--font-sans); font-size: 12.5px; font-weight: var(--weight-medium); }
.ctm-rthumb img { width: 100%; height: 100%; object-fit: cover; }
.ctm-rtotal { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ctm-amt { border: 0; background: none; padding: 0; font-size: 34px; font-weight: var(--weight-medium); color: var(--m-ink); width: 100%; outline: 0; }
.ctm-amt::placeholder { color: var(--m-ink3); }
.ctm-fields { border-top: 1px solid var(--m-hair); }
.ctm-frow { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 0 20px; border-bottom: 1px solid var(--m-hair); box-sizing: border-box; }
.ctm-flabel { flex: 0 0 88px; font-size: 14px; color: var(--m-ink2); }
.ctm-fval { flex: 1; min-width: 0; height: 44px; border: 0; background: none; padding: 0; font-family: var(--font-sans); font-size: 15.5px; font-weight: var(--weight-medium); color: var(--m-ink); outline: 0; }
.ctm-fval.ctm-mono { font-family: var(--font-technical); }
.ctm-fval::placeholder { color: var(--m-ink3); font-weight: var(--weight-regular); }
.ctm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ctm-chip { height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 0; box-shadow: inset 0 0 0 1px var(--m-hair); background: var(--m-card); color: var(--m-ink); font-family: var(--font-sans); font-size: 14px; cursor: pointer; }
.ctm-chip.on { background: var(--m-toast-bg); color: var(--m-toast-ink); box-shadow: none; }

/* ── Contractor Today on a laptop / iPad (wave 1, 23/10/2026), in v4's look ──
   No laptop board exists: built from the phone's Today (p71) on Home's frame
   (p03 — date, greeting, search) with v4's section heads and rows. */
.tdy-page { display: flex; flex-direction: column; gap: 32px; }
.tdy-head { margin-bottom: 0; }
.tdy-sec { display: flex; flex-direction: column; gap: 12px; }
.tdy-sec-h { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-head); }
.tdy-n { font-size: var(--text-meta-r); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tdy-empty { margin: 0; padding: 4px 0; font-size: var(--text-meta-r); color: var(--ink-3); }
.tdy-site { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 10px; }
.tdy-site-row { appearance: none; border: 0; font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 12px 16px; border-radius: var(--radius-12); background: var(--m-toast-bg); color: var(--m-toast-ink); }
.tdy-site-row .tdy-av { width: 32px; height: 32px; font-size: var(--text-label); font-weight: var(--weight-medium); background: var(--brand-on-ink-3, var(--hair)); color: var(--m-toast-ink); }
.tdy-site-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tdy-site-who b { font-weight: var(--weight-medium); font-size: var(--text-body); }
.tdy-site-who > span { font-size: var(--text-meta-r); color: var(--brand-on-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdy-since { display: flex; align-items: center; gap: 6px; font-size: var(--text-meta-r); color: var(--brand-on-ink-2); white-space: nowrap; }
.tdy-dur { color: var(--m-toast-ink); font-size: var(--text-body); margin-left: 6px; }
.tdy-live { width: 7px; height: 7px; border-radius: 50%; background: var(--status-ok-ui); }
.tdy-flag { font-size: var(--text-label); padding: 3px 8px; border-radius: var(--radius-pill); background: var(--status-overdue-bg); color: var(--status-overdue-ink); white-space: nowrap; }
.tdy-wait { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.tdy-tile { appearance: none; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px; border-radius: var(--radius-12); background: var(--surface); border: 1px solid var(--hair); color: var(--ink); min-height: 44px; }
.tdy-tile:hover { border-color: var(--hair-strong); background: var(--row-hover); }
.tdy-count { font-size: var(--text-figure); font-weight: var(--weight-regular); letter-spacing: var(--tracking-title); line-height: 1.05; color: var(--link); }
.tdy-flagged .tdy-count, .tdy-fixes .tdy-count { color: var(--status-overdue-ink); }
.tdy-tile-l { font-weight: var(--weight-medium); font-size: var(--text-body); margin-top: 6px; }
.tdy-tile-s { font-size: var(--text-meta-r); color: var(--ink-3); }
.tdy-lock { appearance: none; border: 0; background: none; font: inherit; cursor: pointer; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0; font-size: var(--text-body); color: var(--status-overdue-ink); }
.tdy-lock.ready { color: var(--link); }
.tdy-lock.locked { color: var(--status-ok); }
.tdy-lock .tdy-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tdy-lock-wk { color: var(--ink-3); font-size: var(--text-meta-r); margin-left: 6px; }
.tdy-group { display: flex; flex-direction: column; }
.tdy-group + .tdy-group { margin-top: 16px; }
.tdy-group-h { appearance: none; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; display: flex; align-items: baseline; gap: 8px;
  min-height: 36px; padding: 6px 0; font-size: var(--text-row); font-weight: var(--weight-medium); color: var(--ink); }
.tdy-group-h:hover { color: var(--link); }
.tdy-task { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
button.tdy-task { appearance: none; border: 0; border-bottom: 1px solid var(--hair); background: none; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }
button.tdy-task:hover { background: var(--row-hover); }
.tdy-time { color: var(--ink-3); font-size: var(--text-body); }
.tdy-task-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tdy-task-t b { font-weight: var(--weight-medium); font-size: var(--text-body); }
.tdy-task-t > span { display: flex; align-items: center; gap: 7px; font-size: var(--text-meta-r); color: var(--ink-2); }
.tdy-task.done .tdy-task-t b { color: var(--ink-3); text-decoration: line-through; }
.tdy-task-who { font-size: var(--text-meta-r); color: var(--ink-3); white-space: nowrap; }
.tdy-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--hair-strong); }
.tdy-dot.waiting { background: var(--link); }
.tdy-dot.back, .tdy-dot.progress { background: var(--status-overdue-ink); }
.tdy-dot.ok { background: var(--status-ok); }
.tdy-page .mono { font-family: var(--font-technical); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .tdy-since .tdy-dur { display: none; } .tdy-task-who { display: none; } .tdy-task { grid-template-columns: 52px minmax(0, 1fr); } }
/* Settings not live yet (23/10/2026): on screen, greyed, never "Saved". */
.st-notlive { opacity: 0.5; }
.st-notlive [disabled], [disabled].st-notlive { cursor: not-allowed; }

/* ── Settings (contractor Owner), in v4's look: no board exists, so it follows
   the Team page (p66) — page title + subtitle, rail-style section list, hairline panels. */
.st-page .st-head { align-items: baseline; }
.st-page .st-sec { font-size: var(--text-body); border-radius: var(--radius-10); min-height: 36px; padding: 8px 12px; }
.st-page .st-sec.on { background: var(--surface); box-shadow: 0 0 0 1px var(--hair); color: var(--ink); }
.st-page .st-h2 { font-size: var(--text-section); letter-spacing: -0.01em; }
.st-page .st-panel { border-radius: var(--radius-12); }
.st-page .st-caps { font-size: var(--text-table-head); letter-spacing: var(--tracking-table, 0.08em); }
.st-page .st-row-label { font-size: var(--text-body); }
.st-page .st-sw.on { background: var(--status-ok-ui); }