/* 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; }
/* The page title: ONE rule for every contractor screen, list or detail (Issue
   25/10/2026, Karan: "It should all follow the size of quotes"). The screen's h1
   carries class="ct4-page-title" and nothing else; its count/subtitle is the
   .page-sub beside it. Scoped to the contractor body, so ASP's shared views
   (Projects, Clients, Settings … carry the class too) keep .page-h h1. */
body.tpl-contractor .ct4-page-title { margin: 0; font-size: var(--text-h1); font-weight: var(--weight-medium); letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); }
body.tpl-contractor .ct4-page-title + .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; }
.ex4-head { margin-bottom: 22px; } /* Expenses is a block page: the Quotes gap, title to controls */
.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(--tint-blue); 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(--blue-tint); 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(--ink); }
.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(--tint-blue); box-shadow: inset 3px 0 0 var(--ink); 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(--primary); 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(--attn-ink); }
.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); }
[data-theme="dark"] .tr-page.ct4 .tr-invite .tr-av { color: var(--ink-2); }   /* .tr-page.ct4 .tr-av outranked it: link on sunk, 4.48:1 */
.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(--ink); padding: 13px; background: var(--tint-blue); }
.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-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(--ink); }
.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(--ink-fill); 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-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(--blue-tint); 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(--blue-tint); }
.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); }
/* --primary/--primary-ink are a pair that flips together in dark mode; navy + primary-ink went dark-on-dark (Issue report 25/10). */
.ct4-chip.on { background: var(--primary); border-color: var(--primary); 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); }
/* v4.22.3: "quote dated 07/05/2026 · possibly stale" under the date, on the item's cost, and a price's own facts in its history. */
.ct4-agesub { font-size: 12px; margin-top: 2px; }
.ct4-agesub.stale, .ct-figsub.stale { color: var(--attn-ink); }
.ct-figsub { font-size: 12px; color: var(--ink-3); max-width: 32ch; }
.ct-hfacts { margin: -2px 0 6px; font-size: 12px; overflow-wrap: anywhere; }
.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(12px + 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: 4px; margin-top: -8px; }
.ctm-eb { font-size: 13px; color: var(--m-ink3); }
/* v4.1.0: one title size on every phone screen, ASP and contractor alike (28 / 500 / −0.02em). */
.ctm-title { margin: 0; font-size: 28px; font-weight: var(--weight-medium); letter-spacing: -0.02em; line-height: 1.15; color: var(--m-ink); }
/* The shared header (mobile/head.js) inside a padded contractor page: the page already has the gutter. */
.m-app .ctm-page > .p4-apphead { padding: 0; margin-right: -8px; }
.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); font-weight: var(--weight-medium); 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-row.ctm-day { min-height: 52px; }   /* v4.1.0: the week reads as a compact list */
.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; font-weight: var(--weight-medium); 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); }

/* ── v4.0.1 · New task for the team (views/site-task-new.js) ─────────────── */
.stn-people { display: flex; flex-wrap: wrap; gap: 8px; }
.stn-person { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 6px 14px;
  border-radius: var(--radius-12); border: 1px solid var(--hair); background: var(--surface); color: var(--ink);
  font: var(--weight-medium) var(--text-body) var(--font-sans); cursor: pointer; text-align: left; }
.stn-person .stn-role { font-size: var(--text-meta-r); color: var(--ink-3); font-weight: var(--weight-regular); }
.stn-person.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.stn-person.on .stn-role { color: var(--primary-ink); opacity: .8; }
.stn-person:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.stn-revrow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.stn-mini { display: flex; flex-direction: column; gap: 6px; }
.stn-mini.grow { flex: 1 1 220px; }
.stn-n { width: 88px; }
.stn-sel { min-height: 44px; }
.stn-who-err:empty, .stn-rev-err:empty { display: none; }
.stn-who-err, .stn-rev-err { color: var(--status-overdue-ink); }

/* ── v4.0.1 · Team: people with no sign-in yet (views/team-reviewers.js) ──── */
.tr-tag-soon { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill);
  background: var(--surface-sunk); color: var(--ink-2); font-size: var(--text-meta-r); margin-left: 8px; white-space: nowrap; }
.tr-invite-btn { margin-left: 8px; }
.qt-newq { white-space: nowrap; }
.tdy-sec-h .tdy-newtask { margin-left: auto; align-self: center; }
.ps-taskhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.iv-fixed { font: var(--weight-medium) var(--text-body) var(--font-sans); color: var(--ink); }

/* ── Starting a catalogue (v4.4.0): the starter offer, labour rates, price-list import ── */
.cs-noprice { color: var(--status-overdue-ink); font-family: var(--font-sans); font-size: 12.5px; white-space: nowrap; }
.cs-unpriced { align-items: center; flex-wrap: wrap; }
.cs-offer { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.cs-offer-h { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-medium); letter-spacing: -0.01em; color: var(--ink); }
.cs-offer-p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 72ch; }
.cs-offer-list { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-width: 72ch; }
.cs-offer-list li + li { margin-top: 4px; }
.cs-starter-note { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); max-width: 80ch; }
.cs-fixbtn { display: block; margin-top: 4px; font-size: 12px; }
.cs-page { gap: 20px; }
.cs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: start; }
.cs-aside { display: flex; flex-direction: column; gap: 16px; }
.cs-lede { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-width: 80ch; }
.cs-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); max-width: 80ch; }
.cs-ok { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--status-ok); }
.cs-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cs-sec { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 12px; cursor: pointer; background: var(--surface); }
.cs-sec.on { border-color: var(--link); background: var(--tint-blue); }  /* --tint-blue flips; --brand-blue-25 stayed pale in dark (25/10/2026) */
.cs-sec input { grid-row: span 2; width: 16px; height: 16px; margin: 0; accent-color: var(--link); }
.cs-sec-t { font-size: 14px; color: var(--ink); }
.cs-sec-n { font-size: 12px; color: var(--ink-3); }
.cs-pickall { margin-top: 12px; }
.cs-counts { display: flex; flex-direction: column; }
.cs-count { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair-soft); font-size: 13.5px; color: var(--ink); }
.cs-count-sub { display: block; font-size: 12px; color: var(--ink-3); }
.cs-count.total { font-weight: var(--weight-medium); border-bottom: 0; padding-top: 12px; }
.cs-count.muted { color: var(--ink-3); border-bottom: 0; font-size: 12.5px; }
.cs-go { width: 100%; margin-top: 14px; justify-content: center; }
.cs-done { max-width: 760px; }
.ct-table.cs-rates { min-width: 0; }
.cs-rates td { vertical-align: middle; }
.cs-rate { width: 110px; text-align: right; }
.cs-mk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ct-name-s { font-size: 14px; color: var(--ink); }
.cs-steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.cs-steps li { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 6px; border-radius: var(--radius-pill); font-size: 13px; color: var(--ink-3); background: var(--surface-sunk); }
.cs-steps li .mono { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); font-size: 11.5px; }
.cs-steps li.on { color: var(--link); background: var(--tint-blue); }
.cs-narrow { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.cs-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 14px; }
.cs-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; margin-bottom: 16px; }
.cs-sample td { font-size: 13px; }
.cs-foot { margin-top: 16px; justify-content: flex-end; }
.cs-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cs-sum-c { display: flex; flex-direction: column; gap: 4px; }
.cs-big { font-size: var(--text-h3); color: var(--ink); }
.cs-up { color: var(--status-overdue-ink); }
.cs-warn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-orange-050); color: var(--status-overdue-ink); font-size: 11px; cursor: help; }
.cs-link { min-width: 200px; max-width: 280px; height: 34px; font-size: 13px; }
@media (max-width: 1100px) { .cs-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .cs-mk { grid-template-columns: minmax(0, 1fr); } .cs-rate { width: 90px; } }

/* ── Settings › Company, live, and where it prints (go-live A, design TrSetCompany 26/10/2026) ── */
.st-company { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: start; }
.st-company > .st-panel { display: flex; flex-direction: column; gap: 14px; }
.st-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.st-label-sub { font-weight: var(--weight-regular); color: var(--ink-3); }
.st-field-note { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.st-bank { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: var(--radius-10); background: var(--surface); }
.st-bank-text { font-size: var(--text-body); color: var(--ink); }
.st-where { display: flex; flex-direction: column; gap: 10px; }
.st-where-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.st-doc { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--hair); border-radius: var(--radius-12); background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.st-doc .dc-head { font-size: 11.5px; }
.st-doc .dc-tile, .st-doc .dc-logo { width: 36px; height: 36px; font-size: 12px; }
.st-doc-title { font-size: 15px; font-weight: var(--weight-medium); color: var(--ink); margin-top: 4px; }
.st-doc-bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-sunk); }
.st-doc-bar.w1 { width: 80%; } .st-doc-bar.w2 { width: 62%; } .st-doc-bar.w3 { width: 72%; }
.st-doc .dc-footer { font-size: 11px; border-top: 1px solid var(--hair); padding-top: 10px; margin-top: 4px; }
.st-doc .dc-pay { display: block; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-10); background: var(--surface-sunk); }
.dc-mark { background: color-mix(in srgb, var(--status-warn) 22%, var(--surface)); color: inherit; border-radius: 3px; padding: 0 2px; }
.st-opt.st-notlive { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 1100px) { .st-company { grid-template-columns: minmax(0, 1fr); } }

/* The company block on a document (doc-company.js): shared by the preview and the printed sheet. */
.dc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dc-tile { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; background: var(--primary); color: var(--primary-ink); font-weight: var(--weight-medium); font-size: 15px; flex: 0 0 auto; }
.dc-logo { width: 64px; height: 48px; object-fit: contain; object-position: left top; flex: 0 0 auto; }
.dc-who { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; min-width: 0; }
.dc-name { font-weight: var(--weight-medium); color: var(--ink); }
.dc-line { color: var(--ink-2); }
.dc-missing { color: var(--ink-3); font-style: italic; }
.dc-footer { display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); }

/* A document as it goes out (views/doc-print.js): full-screen overlay (W4), the sheet caps its own measure (W3). */
.doc-overlay { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--surface-sunk); }
.doc-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--hair); }
.doc-bar-title { font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--ink); }
.doc-bar-warn { font-size: 12.5px; color: var(--attn-ink); }
.doc-bar-acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.doc-bar-acts .btn { white-space: nowrap; }
.doc-scroll { flex: 1; overflow: auto; padding: 24px 16px; }
.doc-sheet { margin: 0 auto; width: 100%; max-width: 794px; min-height: 60vh; padding: 40px 44px; background: var(--surface); color: var(--ink); border: 1px solid var(--hair); border-radius: 6px; font-size: 13px; line-height: 1.5; }
.doc-h1 { margin: 28px 0 8px; font-size: var(--text-section); font-weight: var(--weight-medium); letter-spacing: -0.01em; }
.doc-meta { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; color: var(--ink-2); }
.doc-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.doc-table th, .doc-table td { padding: 7px 8px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.doc-table th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--weight-medium); }
.doc-table .r { text-align: right; }
.doc-table .doc-grp td { padding-top: 12px; font-weight: var(--weight-medium); color: var(--ink); border-bottom-color: var(--ink-3); }
.doc-table .mono, .doc-totals .mono { font-family: var(--font-technical); font-variant-numeric: tabular-nums; }
.doc-totals { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; margin: 8px 0 12px auto; max-width: 320px; }
.doc-totals .big { font-size: 15px; font-weight: var(--weight-medium); color: var(--ink); }
.doc-note { margin: 12px 0; color: var(--ink-2); }
.doc-sheet .dc-footer { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 11.5px; }
.doc-sheet .dc-pay { font-weight: var(--weight-medium); color: var(--ink); }
/* The invoice, credit note and PO (v4.15.1, doc-template.js): A4 pages drawn as SVG, the same
   primitives as the server PDF. Paper stays paper in dark mode. Never tabular figures on documents. */
.doc-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.doc-page { display: block; width: 100%; max-width: 794px; height: auto; background: var(--paper, #FFFFFF); border: 1px solid var(--hair); border-radius: 4px; font-variant-numeric: normal; }
@media (max-width: 760px) { .doc-sheet { padding: 24px 16px; } .doc-scroll { padding: 12px 0; } }
@media print {
  body.doc-printing .doc-pages { gap: 0; }
  body.doc-printing .doc-page { page: doc-a4; max-width: none; width: 210mm; height: 297mm; border: 0; border-radius: 0; break-after: page; }
  body.doc-printing > :not(.doc-overlay) { display: none !important; }
  body.doc-printing .doc-overlay { position: static; background: none; }
  body.doc-printing .doc-bar { display: none; }
  body.doc-printing .doc-scroll { overflow: visible; padding: 0; }
  body.doc-printing .doc-sheet { border: 0; border-radius: 0; max-width: none; padding: 0; min-height: 0; }
}
@page doc-a4 { size: A4; margin: 0; }
/* ── v4.10.0 · Labour rates in the units trades price by (views/catalogue-rates.js; design TrRates) ── */
.trr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.trr-from { display: flex; align-items: center; gap: 10px; }
.trr-fromlabel { font-size: 13px; color: var(--ink-2); }
.trr-from .st-input { width: 150px; min-height: 36px; }
.trr-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); }
.trr-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; }
.trr-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 8px 10px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.trr-table th.r, .trr-table td.r { text-align: right; }
.trr-table th.c, .trr-table td.c { text-align: center; }
.trr-table td { padding: 6px 8px; font-size: 14px; vertical-align: middle; border-bottom: 0; }
.trr-table th:first-child, .trr-table td:first-child { padding-left: 0; }
.trr-trade td { padding: 22px 0 8px; font-size: 13.5px; color: var(--ink-2); }
.trr-trade:first-child td { padding-top: 14px; }
.trr-name { border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: var(--weight-medium); color: var(--ink); cursor: pointer; }
.trr-name:hover { color: var(--link); }
.trr-hint { font-size: 12.5px; color: var(--ink-3); }
.trr-editgang { margin-left: 10px; font-size: 12.5px; min-height: 0; }
.trr-unit { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface); font-size: 13.5px; color: var(--ink); white-space: nowrap; cursor: default; }
.trr-unit.static { border-color: transparent; padding-left: 0; }
.trr-pick { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.trr-unitsel { min-height: 34px; width: auto; padding: 0 28px 0 10px; font-size: 13.5px; }
.trr-unitlabel { min-height: 34px; width: 130px; font-size: 13.5px; }
.trr-cost { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface); }
.trr-cost:focus-within { border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.trr-cost.changed { border-color: var(--link); }
.trr-cost.changed input { color: var(--link); }
.trr-pound { font-size: 12.5px; color: var(--ink-3); }
.trr-cost input { width: 72px; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; text-align: right; color: var(--ink); padding: 0; font-variant-numeric: tabular-nums; }
.trr-cost input::placeholder { color: var(--ink-3); font-family: var(--font-sans); font-size: 12.5px; }
.trr-sell { font-weight: var(--weight-medium); color: var(--ink); }
.trr-star { border: 0; background: none; padding: 0 6px; min-height: 34px; font-size: 15px; color: var(--hair-strong); cursor: pointer; line-height: 1; }
.trr-star:hover { color: var(--attn-ink); }
.trr-star.on { color: var(--attn-ink); }
.trr-star.static { cursor: default; }
.trr-age { font-size: 12.5px; white-space: nowrap; }
.ct4-st.blue .ct4-dot { background: var(--link); }
.ct4-st.blue { color: var(--link); }
.ct4-st.attn.trr-age { color: var(--status-overdue-ink); }
.trr-xcol { width: 28px; padding-right: 0; }
.trr-x { border: 0; background: none; padding: 0 6px; min-height: 34px; font: inherit; font-size: 15px; color: var(--ink-3); cursor: pointer; line-height: 1; border-radius: 6px; }
.trr-x:hover { color: var(--ink); background: var(--row-hover); }
.trr-x.armed { font-size: 12px; color: var(--late); white-space: nowrap; }
.trr-x.faint { color: var(--hair-strong); cursor: not-allowed; }
.trr-x:disabled { color: var(--hair-strong); cursor: not-allowed; }
.trr-add td { padding: 4px 0 14px; border-bottom: 1px solid var(--hair-soft); }
.trr-add .linkbtn { font-size: 13px; min-height: 0; }
.trr-rate.draft td { background: var(--tint-blue); }
.trr-rate.draft td:first-child { border-radius: 10px 0 0 10px; padding-left: 8px; }
.trr-rate.draft td:last-child { border-radius: 0 10px 10px 0; }
.trr-draftacts { font-size: 13px; white-space: nowrap; }
.trr-draftacts .linkbtn { min-height: 0; font-size: 13px; }
.trr-draftacts .linkbtn.muted { color: var(--ink-3); }
.trr-gang td { background: var(--surface-sunk); }
.trr-gang td, .trr-gangrate td { padding-left: 10px; }
.trr-gang td:first-child { border-radius: 12px 12px 0 0; padding-top: 14px; }
.trr-gangrate td { background: var(--surface-sunk); padding-bottom: 12px; }
.trr-gangrate td:first-child { border-radius: 0 0 0 12px; }
.trr-gangrate td:last-child { border-radius: 0 0 12px 0; }
.trr-gangs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.trr-gangs .linkbtn { font-size: 13.5px; min-height: 0; }
.trr-gangnote { font-size: 12.5px; color: var(--ink-3); }
.trr-mk { display: flex; flex-direction: column; }
.trr-mkrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair-soft); font-size: 13.5px; color: var(--ink-2); }
.trr-mkrow:last-child { border-bottom: 0; }
.trr-pct { display: inline-flex; align-items: center; gap: 4px; }
.trr-pct .st-input { width: 64px; min-height: 32px; text-align: right; color: var(--link); }
.trr-how { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.trr-how li + li { margin-top: 6px; }
.trr-how .linkbtn { min-height: 0; font-size: 13px; }
.trr-migrate { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair-soft); display: flex; flex-direction: column; gap: 8px; }
.trr-migrate-h { font-size: 13px; font-weight: var(--weight-medium); color: var(--ink); }
.trr-migrate .cs-note { margin: 0; }
.trr-migrate .btn.sm { align-self: flex-start; min-height: 32px; }
.trr-samples { margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.trr-samples li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--hair-soft); }
/* The gang dialog's members */
.trr-memberwrap { margin-top: 18px; }
.trr-members { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.trr-members th { text-align: left; font-size: 10px; letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--ink-3); font-weight: var(--weight-medium); padding: 0 6px 8px; }
.trr-members th.r, .trr-members td.r { text-align: right; }
.trr-members td { padding: 4px 6px; vertical-align: middle; }
.trr-members td:first-child, .trr-members th:first-child { padding-left: 0; }
.trr-members .tf-box { height: 40px; }
.trr-mqty { width: 80px; text-align: right; }
.trr-gangtotal { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 1100px) { .trr-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .trr-from { width: 100%; flex-wrap: wrap; }
  .trr-table { min-width: 560px; }
  .trr-cost input { width: 64px; }
  .trr-x, .trr-star, .trr-name, .trr-add .linkbtn, .trr-gangs .linkbtn, .trr-how .linkbtn, .trr-draftacts .linkbtn { min-height: 44px; }
}

/* ── v4.10.0 · A trade's page (design TrTrade) ─────────────────────────────── */
.trd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.trd-figs { gap: 28px; }
.trd-fig { font-size: 20px; font-weight: var(--weight-medium); color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; }
.trd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: start; }
.trd-main, .trd-aside { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.trd-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.trd-cardhead .ct4-card-h { margin: 0; }
.trd-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 0; }
.trd-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 8px 10px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.trd-table td { padding: 12px 8px; font-size: 14px; border-bottom: 1px solid var(--hair-soft); vertical-align: middle; }
.trd-table th:first-child, .trd-table td:first-child { padding-left: 0; }
.trd-table th:last-child, .trd-table td:last-child { padding-right: 0; }
.trd-table th.r, .trd-table td.r { text-align: right; }
.trd-table .strong { font-weight: var(--weight-medium); }
.trd-table tr.muted td { color: var(--ink-3); }
.trd-table .linkbtn { min-height: 0; font-size: 13.5px; }
.trd-def { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 8px; border-radius: var(--radius-pill); background: var(--surface-sunk); color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.trd-mkdef { margin-left: 8px; font-size: 12px; color: var(--ink-3); }
.trd-formrow td { background: var(--tint-blue); border-radius: 10px; }
.trd-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 6px 4px; }
.trd-form .st-field { margin: 0; }
.trd-form .st-input { min-height: 36px; width: 150px; }
.trd-addform { margin-top: 14px; padding: 12px; background: var(--tint-blue); border-radius: 12px; }
.trd-histtable td { font-size: 13.5px; }
.trd-used, .trd-about { display: flex; flex-direction: column; }
.trd-usedrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair-soft); font-size: 13.5px; color: var(--ink); }
.trd-usedrow:last-child { border-bottom: 0; }
.trd-usedrow .linkbtn { min-height: 0; font-size: 13.5px; }
.trd-usedrow .mono { font-size: 13px; text-align: right; }
.trd-own { color: var(--status-overdue-ink); }
@media (max-width: 1100px) { .trd-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .trd-figs { gap: 18px; } .trd-form .st-input { width: 100%; } .trd-form .st-field { flex: 1 1 140px; } .trd-table .linkbtn, .trd-usedrow .linkbtn { min-height: 44px; } }

/* ── v4.10.0 · A quote line picks its rate (design TrQuoteRate) ───────────── */
.qt-page.ct4 .qt-ratebtn { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font-family: inherit; }
.qt-page.ct4 .qt-ratebtn:hover, .qt-page.ct4 .qt-ratebtn.open { color: var(--link); }
.qt-page.ct4 .qt-table tr.qt-open td { background: var(--surface-sunk); border-bottom-color: transparent; }
.qt-page.ct4 .qt-table tr.qt-open td:first-child { border-radius: 12px 0 0 0; padding-left: 12px; }
.qt-page.ct4 .qt-table tr.qt-open td:last-child { border-radius: 0 12px 0 0; }
.qt-page.ct4 .qt-table .qt-panelrow td { padding: 0 0 18px; border-bottom: 1px solid var(--hair-soft); }
.qt-page.ct4 .qt-ownrate { color: var(--status-overdue-ink); }
.qt-ratepanel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 16px; padding: 16px; border: 1px solid var(--ink); border-radius: 14px; background: var(--surface); }
.qt-which { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qt-which-h { font-size: 13px; font-weight: var(--weight-medium); color: var(--ink); }
.qt-choices { display: flex; flex-direction: column; gap: 4px; }
.qt-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.qt-choice:hover { background: var(--row-hover); }
.qt-choice.on { background: var(--surface-sunk); }
.qt-choice input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.qt-choice .mono { font-weight: var(--weight-medium); }
.qt-prov { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.qt-conv { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.qt-conv .f-input { width: 72px; min-height: 32px; padding: 4px 8px; text-align: right; }
.qt-conv .btn.sm { min-height: 32px; }
.qt-own { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.qt-ownhead { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: var(--weight-medium); color: var(--ink); cursor: pointer; }
.qt-switchin { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qt-switch { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--hair-strong); flex: none; transition: background 120ms ease; }
.qt-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: left 120ms ease; }
.qt-switchin:checked + .qt-switch { background: var(--status-ok); }
.qt-switchin:checked + .qt-switch::after { left: 16px; }
.qt-switchin:focus-visible + .qt-switch { outline: 2px solid var(--link); outline-offset: 2px; }
.qt-switchin:disabled + .qt-switch { opacity: 0.5; }
.qt-owngrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.qt-owngrid > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qt-ownwhy { grid-column: 1 / -1; }
.qt-ownlabel { font-size: 12.5px; color: var(--ink-2); }
.qt-own .trr-cost { min-height: 38px; }
.qt-own .trr-cost input { width: 70px; color: var(--link); }
.qt-ownunit { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.qt-catrate { display: inline-flex; align-items: center; min-height: 38px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface-sunk); color: var(--ink-2); font-size: 13.5px; white-space: nowrap; }
.qt-ownwhy .f-input { min-height: 38px; }
.qt-ownacts { display: flex; gap: 8px; flex-wrap: wrap; }
.qt-ownacts .btn.sm { min-height: 34px; }
.qt-page.ct4 .qt-own .qt-note { margin: 0; }
.qt-ownrates .qt-row span:first-child { font-size: 13.5px; }
@media (max-width: 1100px) { .qt-ratepanel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .qt-owngrid { grid-template-columns: minmax(0, 1fr); } .qt-choice { min-height: 44px; } .qt-conv .btn.sm, .qt-ownacts .btn.sm { min-height: 44px; } }
/* The own-rate box is narrow: the sell input fills it, the unit words wrap, the catalogue chip too. */
.qt-own .trr-cost { width: 100%; box-sizing: border-box; }
.qt-own .trr-cost input { flex: 1 1 60px; min-width: 0; }
.qt-ownunit { white-space: normal; max-width: 50%; line-height: 1.2; }
.qt-catrate { white-space: normal; line-height: 1.25; padding: 6px 10px; }
.qt-conv { display: grid; grid-template-columns: auto auto auto auto auto auto; align-items: center; }
@media (max-width: 1100px) { .qt-conv { display: flex; } }
/* W2: the rates table scrolls inside its column on a narrow window; the column never widens the page. */
.trr-main { min-width: 0; }
.trr-main .tr-scroll { overflow-x: auto; max-width: 100%; }

/* ── Bring in a project · Import projects · a brought-in project (go-live D, 26/10/2026) ── */
.bi-page { gap: 20px; }
.bi-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.bi-form { display: flex; flex-direction: column; gap: 14px; }
.bi-form .st-caps { margin: 0; padding-bottom: 0; }
.bi-caps2 { margin-top: 10px !important; }
.bi-grid { display: grid; gap: 14px 16px; }
.bi-grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.bi-grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.bi-grid.costs { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); align-items: end; }
.bi-field .st-input { width: 100%; box-sizing: border-box; }
.bi-hint { font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.bi-note { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.bi-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; background: var(--surface); }
.bi-pick.bi-empty .bi-pick-name { color: var(--ink-3); }
.bi-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-money { position: relative; }
.bi-money .bi-pound { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-family: var(--font-technical); color: var(--link); font-size: var(--text-body-bm); pointer-events: none; }
.bi-money .st-input { padding-left: 26px; text-align: right; color: var(--link); }
.bi-money .st-input::placeholder { color: var(--ink-3); text-align: right; }
.bi-err[hidden] { display: none; }
.bi-aside { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.bi-how { display: flex; flex-direction: column; }
.bi-card { border: 1px solid var(--hair); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.bi-card.held { border-color: var(--brand-orange); background: var(--status-overdue-bg); }
.bi-card-t { font-size: 15px; font-weight: var(--weight-medium); color: var(--ink); }
.bi-card-t .mono { margin-right: 6px; }
.bi-card-m { font-size: 12.5px; color: var(--ink-2); }
.bi-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.bi-held { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bi-bullets { margin: 12px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.bi-next { margin-top: 10px; }
.bi-acts { justify-content: flex-end; }
.bi-acts .btn { min-height: 40px; }
.bi-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border: 1px solid var(--tint-blue); border-radius: var(--radius-10); background: var(--tint-blue); font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.bi-banner b { font-weight: var(--weight-medium); }
.bi-tick { color: var(--status-ok); font-weight: var(--weight-medium); margin-top: 1px; }
.bi-check { min-width: 860px; }
.bi-check tr.held td { background: var(--status-overdue-bg); cursor: pointer; }
.bi-check tr.held:focus-visible td { outline: 2px solid var(--link); outline-offset: -2px; }
.bi-why { font-size: 12px; color: var(--ink-2); margin-top: 2px; white-space: normal; }
.bi-why.muted { color: var(--ink-3); }
.bi-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 18px; }
.bi-foot-t { font-size: 13.5px; color: var(--ink-2); }
.bi-foot-t b { color: var(--ink); font-weight: var(--weight-medium); }
/* The brought-in costs board (page TrBroughtIn) */
.pb-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border: 1px solid var(--tint-blue); border-radius: var(--radius-10); background: var(--tint-blue); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.pb-banner b { color: var(--ink); font-weight: var(--weight-medium); }
.pb-banner .pb-text { flex: 1 1 420px; min-width: 0; }
.pb-banner .btn { background: var(--surface); }
.pb-sub { font-size: 12px; color: var(--ink-3); }
.pb-of { font-size: var(--text-small); color: var(--ink-3); }
.pb-list { display: flex; flex-direction: column; }
.pb-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair-soft); font-size: var(--text-body-bm); }
.pb-row:last-child { border-bottom: 0; }
.pb-when { color: var(--ink-3); font-size: 12.5px; }
.pb-what { color: var(--ink); font-weight: var(--weight-medium); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-amt { color: var(--ink-2); white-space: nowrap; }
@media (max-width: 1100px) { .bi-layout { grid-template-columns: minmax(0, 1fr); } .bi-aside { position: static; } }
@media (max-width: 760px) {
  .bi-grid.costs { grid-template-columns: minmax(0, 1fr); }
  .pb-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pb-row .pb-when { grid-column: 1 / -1; }
  .pb-row .pb-what { white-space: normal; }
}

/* ── Import prices from PDFs and photos (v4.12.0, go-live C; TrImportDrop, TrImportCheck) ── */
.pi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.pi-head .page-h { flex: 1 1 360px; min-width: 0; }
.pi-steps li.done { color: var(--status-ok); background: color-mix(in srgb, var(--status-ok) 10%, var(--surface)); }
.pi-err { flex-basis: auto; font-size: 13px; }
.pi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); gap: 20px; align-items: start; }
.pi-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pi-aside { display: flex; flex-direction: column; gap: 16px; }
.pi-drop { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border: 1.5px dashed var(--hair-strong); border-radius: 16px; background: var(--surface); cursor: pointer; position: relative; }
.pi-drop:hover, .pi-drop.over { border-color: var(--link); background: var(--tint-blue); }
.pi-drop:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.pi-drop.full { opacity: 0.6; cursor: not-allowed; }
.pi-drop-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--hair); background: var(--surface-sunk); color: var(--ink-2); flex: 0 0 auto; }
.pi-drop-t { display: flex; flex-direction: column; gap: 3px; flex: 1 1 200px; min-width: 0; }
.pi-drop-h { display: block; font-size: 15px; font-weight: var(--weight-medium); color: var(--ink); }
.pi-drop-hint { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.pi-drop .btn { flex: 0 0 auto; }
.pi-aioff { margin: 0; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface-sunk); font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 88ch; }
.pi-aioff strong { color: var(--ink); font-weight: var(--weight-medium); }
.pi-files { min-width: 560px; table-layout: fixed; }
.pi-files .pi-col-dated { width: 230px; }
.pi-files .pi-col-read { width: 190px; }
.pi-files th { padding-left: 14px; padding-right: 14px; }
.pi-files td { vertical-align: top; }
.pi-file { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.pi-fileic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--hair); color: var(--ink-3); flex: 0 0 auto; }
.pi-filetxt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pi-fname { display: block; max-width: 100%; overflow-wrap: anywhere; font-weight: var(--weight-medium); line-height: 1.35; }
.pi-fmeta { display: block; font-size: 12.5px; color: var(--ink-3); }
.pi-filerr { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--status-overdue-ink); max-width: 72ch; }
.pi-fileacts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pi-fileacts .btn.sm { min-height: 32px; }
.pi-rowerr td { background: color-mix(in srgb, var(--brand-orange) 5%, var(--surface)); }
.pi-dated { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.pi-dated .linkbtn { font-size: 13px; }
.pi-tradechg { font-size: 12.5px; }
.pi-saveas .pi-skip { margin-left: auto; }
.pi-datein { height: 34px; font-size: 13px; width: 160px; }
.pi-supin { display: block; margin-top: 6px; height: 34px; font-size: 13px; max-width: 240px; }
.pi-readcell { white-space: nowrap; }
.pi-readcell .pi-pill, .pi-readcell .pi-reading { vertical-align: middle; }
.pi-pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12.5px; white-space: nowrap; }
.pi-pill.ok { background: color-mix(in srgb, var(--status-ok) 12%, var(--surface)); color: var(--status-ok); }
.pi-pill.warn { background: color-mix(in srgb, var(--brand-orange) 12%, var(--surface)); color: var(--attn-ink); }
.pi-pill.bad { background: color-mix(in srgb, var(--status-error) 10%, var(--surface)); color: var(--status-error); }
.pi-reading { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.pi-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hair-strong); border-top-color: var(--link); animation: pi-spin 900ms linear infinite; }
@keyframes pi-spin { to { transform: rotate(360deg); } }
.pi-x { appearance: none; border: 0; background: none; color: var(--ink-3); font-size: 16px; margin-left: 8px; min-width: 28px; min-height: 28px; border-radius: 6px; cursor: pointer; }
.pi-x:hover { background: var(--surface-sunk); color: var(--ink); }
.pi-what { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.pi-what li + li { margin-top: 6px; }
.pi-counts { display: flex; flex-direction: column; }
.pi-counts .cs-count { font-size: 14px; }
.pi-warnink { color: var(--attn-ink); }
.pi-checkbtn { margin-top: 14px; width: 100%; justify-content: center; }
.pi-empty { margin: 0; }
/* Check */
.pi-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pi-chip-check:not(.on) { color: var(--attn-ink); border-color: color-mix(in srgb, var(--brand-orange) 50%, var(--hair)); }
.pi-from { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-size: 13px; color: var(--ink-2); }
.pi-from .st-input { height: 36px; font-size: 13px; width: auto; min-width: 190px; }
.pi-checkgrid { display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); gap: 20px; align-items: start; }
.pi-docpanel { padding: 16px; background: var(--surface-sunk); position: sticky; top: 12px; }
.pi-doctitle { font-size: 14px; font-weight: var(--weight-medium); color: var(--ink); margin-bottom: 10px; overflow-wrap: anywhere; }
.pi-docpage { display: flex; flex-direction: column; gap: 10px; }
.pi-docimg img { display: block; width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface); }
.pi-doctext { margin: 0; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface); font-family: var(--font-technical); font-size: 11.5px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; }
.pi-doctext span { display: block; cursor: pointer; margin: 0 -6px; padding: 0 6px; border-radius: 4px; }
.pi-doctext span:hover { background: var(--nav-hover); }
.pi-doctext span.on { background: color-mix(in srgb, var(--brand-orange) 18%, var(--surface)); color: var(--ink); }
.pi-table-wrap { min-width: 0; }
.pi-table { min-width: 760px; }
.pi-table td { vertical-align: top; }
.pi-asread { font-size: 12.5px; color: var(--ink-2); min-width: 120px; max-width: 220px; overflow-wrap: anywhere; }
.pi-goes { min-width: 200px; }
.pi-row { cursor: pointer; }
.pi-row.held td { background: color-mix(in srgb, var(--brand-orange) 6%, var(--surface)); border-bottom-color: transparent; }
.pi-row.skipped td { color: var(--ink-3); }
.pi-row.skipped .ct-name-s { color: var(--ink-3); }
.pi-row.on td:first-child { box-shadow: inset 3px 0 0 var(--link); }
.pi-detail td { padding-top: 0; }
.pi-detail.held td { background: color-mix(in srgb, var(--brand-orange) 6%, var(--surface)); }
.pi-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; margin-right: 6px; vertical-align: 1px; }
.pi-tag.new { background: color-mix(in srgb, var(--status-ok) 12%, var(--surface)); color: var(--status-ok); }
.pi-tag.rate { background: var(--tint-blue); color: var(--link); }
.pi-q { color: var(--attn-ink); }
.pi-chg { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-family: var(--font-technical); font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; }
.pi-chg.up { background: var(--tint-blue); color: var(--link); }
.pi-chg.down { background: color-mix(in srgb, var(--status-ok) 12%, var(--surface)); color: var(--status-ok); }
.pi-chg.new { background: color-mix(in srgb, var(--status-ok) 12%, var(--surface)); color: var(--status-ok); }
.pi-chg.same { background: var(--surface-sunk); color: var(--ink-3); }
.pi-chg.held, .pi-chg.check { background: color-mix(in srgb, var(--brand-orange) 14%, var(--surface)); color: var(--attn-ink); }
.pi-chg.skipped { background: var(--surface-sunk); color: var(--ink-3); }
.pi-problem { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink); margin-bottom: 8px; }
.pi-problem strong { font-weight: var(--weight-medium); }
.pi-warn { color: var(--attn-ink); }
.pi-fixes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pi-fixes .btn.sm, .pi-saveas .btn.sm { min-height: 32px; }
.pi-typein { display: inline-flex; align-items: center; gap: 6px; }
.pi-typein .st-input { height: 32px; width: 130px; font-size: 13px; }
.pi-saveas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.pi-trade { display: inline-flex; align-items: center; gap: 8px; }
.pi-trade .st-input { height: 32px; font-size: 13px; width: auto; }
.pi-decided { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.pi-newform { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: 6px; }
.pi-newform .st-input { height: 30px; font-size: 12.5px; width: auto; max-width: 180px; }
.pi-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; position: sticky; bottom: 12px; box-shadow: var(--shadow-card, 0 6px 24px rgba(0, 0, 0, 0.08)); }
.pi-foottext { font-size: 13.5px; color: var(--ink-2); flex: 1 1 320px; }
.pi-foottext strong { color: var(--ink); font-weight: var(--weight-medium); }
/* v4.22.3: the footer says how much the catalogue grows; a low match (under 70%) reads differently and offers the items it might be. */
.pi-footsub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.pi-tag.low { background: color-mix(in srgb, var(--brand-orange) 14%, var(--surface)); color: var(--attn-ink); }
.pi-row.low td { background: color-mix(in srgb, var(--brand-orange) 4%, var(--surface)); }
.pi-row.low td:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand-orange) 70%, var(--surface)); }
.pi-row.low.on td:first-child { box-shadow: inset 3px 0 0 var(--link); }
.pi-alts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pi-alts-h { font-size: 12.5px; color: var(--ink-2); margin-right: 2px; }
.pi-alts .btn.sm { min-height: 32px; font-size: 12.5px; }
.pi-alts .btn .mono { color: var(--ink-3); margin-left: 4px; }
.pi-facts { color: var(--ink-3); overflow-wrap: anywhere; }
.pi-pack { white-space: normal; font-size: 12px; }
/* v4.23.3: the quantity as read with the sums tick, the line total under the unit price, the quote's unit beside the item's, sizes ruled out. */
.pi-qtycell { white-space: nowrap; }
.pi-qunit { color: var(--ink-3); font-size: 12px; }
.pi-tick { color: var(--status-ok); }
.pi-linetotal { font-weight: var(--weight-regular); color: var(--ink-3); white-space: nowrap; }
.pi-quoteunit { font-size: 12px; }
.pi-unitnote { color: var(--ink-2); }
.pi-ruledout { color: var(--ink-3); overflow-wrap: anywhere; }
.pi-unit { min-width: 84px; }
@media (max-width: 1100px) {
  .pi-grid, .pi-checkgrid { grid-template-columns: minmax(0, 1fr); }
  .pi-docpanel { position: static; }
  .pi-doctext { max-height: 220px; }
}
@media (max-width: 760px) {
  .pi-drop { flex-wrap: wrap; padding: 16px; }
  .pi-from { margin-left: 0; }
  .pi-files { min-width: 0; }
  .pi-foot { position: static; }
  .pi-foot .ct4-acts { width: 100%; }
  .pi-foot .ct4-acts .btn { flex: 1 1 auto; justify-content: center; }
  .pi-alts .btn.sm { min-height: 44px; }
  /* The files table stacks on a phone: the file on its own line, then its date and what was read. */
  .ct-table.pi-files { min-width: 0; table-layout: auto; }
  .pi-files, .pi-files tbody { display: block; width: 100%; }
  .pi-files colgroup, .pi-files thead { display: none; }
  .pi-files tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; box-sizing: border-box; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--hair); }
  .pi-files td { display: block; min-width: 0; padding: 0; border-bottom: 0; }
  .pi-files td.pi-filecell { grid-column: 1 / -1; }
  .pi-files td.pi-datedcell { padding: 8px 0 0 48px; }
  .pi-files td.pi-readcell { padding-top: 8px; }
  .pi-files td.pi-datedcell:has(> .muted:only-child) { visibility: hidden; }
  .pi-rowerr td { background: none; }
  .pi-files tr.pi-rowerr { background: color-mix(in srgb, var(--brand-orange) 5%, var(--surface)); padding: 12px 10px; border-radius: 10px; }
}

/* ── Contractor go-live F (26/10/2026): Project › Photos (TrPhotos), Project › Files (TrFiles), a variation (TrVariation) ── */
.pc-page.ct4 .pc-tabs .tab .n { margin-left: 5px; font-size: 12px; }
.pc-upl { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.pc-upl svg { color: var(--ink-2); }
.pc-varh { margin-top: 22px; }
.pc-ver { color: var(--ink-3); font-size: 13px; }
.pc-page.ct4 .pc-row > .mono.up { color: var(--status-ok); }
.pc-page.ct4 .pc-row > .mono.down { color: var(--status-overdue-ink); }
.pc-vpill { margin-left: 6px; height: 18px; font-size: 11px; vertical-align: middle; }
.pc-page.ct4 .pc-row .linkbtn { min-height: 0; font-size: 13px; }
/* Photos */
.pp-tab { display: flex; flex-direction: column; gap: 22px; }
.pp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pp-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-sel { width: auto; min-width: 140px; padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
.pp-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.pp-days { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pp-dayh { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 13px; }
.pp-dayh b { font-weight: var(--weight-medium); color: var(--ink); }
.pp-dayh .muted { color: var(--ink-3); font-size: 12.5px; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 14px 16px; }
.pp-tile { display: flex; flex-direction: column; gap: 5px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--ink); min-width: 0; border-radius: 12px; }
.pp-tile:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.pp-img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: repeating-linear-gradient(135deg, var(--hair-soft) 0 8px, var(--surface-tint) 8px 16px); }
.pp-tile.on .pp-img { border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.pp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-st { position: absolute; top: 6px; right: 6px; font-size: 11px; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-2); }
.pp-st.blue { color: var(--link); } .pp-st.ok { color: var(--status-ok); } .pp-st.late { color: var(--status-overdue-ink); }
.pp-cap { font-size: 12.5px; font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-sub { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-pin { color: var(--ink-3); } .pp-pin.off { color: var(--status-overdue-ink); }
.pp-aside { position: sticky; top: 12px; }
.pp-detail { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; }
.pp-big { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: repeating-linear-gradient(135deg, var(--hair-soft) 0 8px, var(--surface-tint) 8px 16px); }
.pp-big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-dtitle { margin: 6px 0 0; font-size: 14.5px; font-weight: var(--weight-medium); }
.pp-dmeta { font-size: 12.5px; color: var(--ink-2); margin-top: -6px; }
.pp-rows { display: flex; flex-direction: column; margin-top: 6px; }
.pp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair-soft); font-size: 13px; }
.pp-row > span:first-child { color: var(--ink-2); }
.pp-row > span:last-child { text-align: right; }
.pp-row .linkbtn { min-height: 0; padding: 0; font-size: 13px; }
.pp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pp-btns .btn { min-height: 40px; }
.pp-cm { margin-top: 4px; }
.pp-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.pp-note.ok { color: var(--status-ok); }
.pp-note.trv-own { color: var(--ink-2); }
@media (max-width: 1100px) { .pp-body { grid-template-columns: 1fr; } .pp-aside { position: static; } }
@media (max-width: 760px) { .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-sel { flex: 1 1 140px; } .pp-bar .seg { width: 100%; overflow-x: auto; } }
/* Files */
.pf-tab { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.pf-folders { display: flex; flex-direction: column; gap: 2px; }
.pf-folder { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; color: var(--ink); text-align: left; cursor: pointer; min-height: 36px; }
.pf-folder:hover { background: var(--nav-hover); }
.pf-folder.on { background: var(--surface-sunk); font-weight: var(--weight-medium); }
.pf-folder:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.pf-fico { color: var(--ink-3); flex: none; }
.pf-fname { flex: 1; min-width: 0; }
.pf-fn { font-size: 12px; color: var(--ink-3); }
.pf-fnote { margin: 12px 10px 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.pf-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pf-drop { display: flex; align-items: center; justify-content: flex-start; padding: 14px 18px; border: 1px dashed var(--hair-strong); border-radius: var(--radius-10); background: var(--surface-tint); color: var(--ink-2); font-size: 13px; cursor: pointer; }
.pf-drop:hover, .pf-drop.over { border-color: var(--link); background: var(--tint-blue); color: var(--link); }
.pf-drop:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.pf-dtext { display: inline-flex; align-items: center; gap: 10px; }
.pf-ok { margin: 0; font-size: 12.5px; color: var(--status-ok); }
.pf-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.pf-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; border-bottom: 1.5px solid var(--border-strong); }
.pf-table td { padding: 12px 10px; border-bottom: 1px solid var(--hair-soft); font-size: 13.5px; vertical-align: middle; }
.pf-table th:first-child, .pf-table td:first-child { padding-left: 0; }
.pf-table .r { text-align: right; }
.pf-name { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: var(--weight-medium); color: var(--ink); cursor: pointer; padding: 0; text-align: left; min-height: 0; }
.pf-name:hover span { text-decoration: underline; }
.pf-ico { color: var(--ink-3); flex: none; }
.pf-rev, .pf-by, .pf-date { color: var(--ink-2); white-space: nowrap; }
.pf-size { color: var(--ink-2); white-space: nowrap; }
.pf-revbtn { min-height: 0; padding: 0; font-size: 13.5px; }
.pf-earlier td { background: var(--surface-tint); font-size: 13px; }
.pf-earlier .pf-name { font-weight: var(--weight-regular); padding-left: 22px; color: var(--ink-2); }
.pf-rec .pf-ico { color: var(--link); }
@media (max-width: 1100px) { .pf-tab { grid-template-columns: 1fr; } .pf-folders { flex-direction: row; flex-wrap: wrap; } .pf-folder { width: auto; } .pf-fnote { flex-basis: 100%; margin: 4px 0 0; } }
/* A variation */
.vr-page { display: flex; flex-direction: column; gap: 22px; }
.vr-page .crumbs { margin-bottom: -14px; }
.vr-page .crumbs button { min-height: 0; }
.vr-top { align-items: flex-start; }
.vr-meta { font-size: 13.5px; color: var(--ink-2); }
.vr-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.vr-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.vr-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; border-bottom: 1.5px solid var(--border-strong); }
.vr-table td { padding: 14px 10px; border-bottom: 1px solid var(--hair-soft); font-size: 14px; vertical-align: middle; position: relative; }
.vr-table th:first-child, .vr-table td:first-child { padding-left: 0; }
.vr-table .r { text-align: right; }
.vr-table .nowrap { white-space: nowrap; }
.vr-table .int { color: var(--ink-3); }
.vr-kind { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: var(--weight-medium); background: var(--surface-sunk); color: var(--ink-2); white-space: nowrap; }
.vr-kind.added { background: var(--ok-tint); color: var(--status-ok); }
.vr-kind.changed { background: var(--tint-blue); color: var(--link); }
.vr-kind.omitted { background: var(--status-overdue-bg); color: var(--status-overdue-ink); }
.vr-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vr-iname { font-weight: var(--weight-medium); color: var(--ink); }
.vr-isub { font-size: 12.5px; color: var(--ink-3); }
.vr-sell { font-weight: var(--weight-medium); }
.vr-sell.up, .vr-page .mono.up { color: var(--status-ok); }
.vr-sell.down, .vr-page .mono.down { color: var(--status-overdue-ink); }
.vr-table .qt-remove { top: 50%; transform: translateY(-50%); right: 6px; }
.vr-foot { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.vr-aside { display: flex; flex-direction: column; gap: 16px; }
.vr-card { display: flex; flex-direction: column; padding: 18px 20px; border-radius: 14px; }
.vr-card .qt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair-soft); font-size: 14px; }
.vr-card .qt-row.muted { color: var(--ink-3); }
.vr-card .qt-row.strong { font-weight: var(--weight-medium); }
.vr-card .qt-row.big { border-bottom: 0; padding-top: 12px; font-size: 15px; }
.vr-card .qt-row.big .mono { font-size: 26px; font-weight: var(--weight-medium); font-family: var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.vr-card .qt-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.vr-card .qt-note.vr-wait { color: var(--ink-3); }
.vr-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.vr-acts .btn { min-height: 40px; }
.vr-acts2 { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.vr-acts2 .linkbtn { min-height: 0; font-size: 13px; }
.vr-acts2 .linkbtn.muted { color: var(--ink-3); }
@media (max-width: 1100px) { .vr-body { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .vr-acts { grid-template-columns: 1fr; } .pp-btns { grid-template-columns: 1fr; } }
.qt-carried { font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); margin-left: 4px; }
.qt-locked { font-size: 12.5px; color: var(--ink-3); align-self: center; }
.qt-versions { margin-top: 8px; }