:root {
  --navy: #0b3d91;
  --navy-dark: #082a66;
  --slate: #4a5568;
  --slate-light: #586473;
  /* v1.2.5: softer, darker page for night work (not a dark mode): grey page, light-grey cards,
     fields a shade lighter than the card so they stand out. Text stays dark for contrast. */
  --paper: #c3cad4;
  --card: #e6e9ee;
  --field: #f2f4f7;
  --sub: #dce0e6;
  --line: #c6cdd7;
  --ink: #1a2332;
  --white: #ffffff;
  --danger: #b3261e;
  --warn: #b7791f;
  --ok: #1f7a3d;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

#app { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 250px;
  flex-shrink: 0;
  /* v1.2.6: the sidebar stays put and scrolls on its own, so a short screen never makes the whole
     page scroll just because the menu is long. */
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--navy-dark);
  color: #dfe7f5;
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
}
.brand-word { font-size: 30px; font-weight: 800; letter-spacing: 1px; color: #fff; }
.brand-word span { color: #7fa3e0; }
.brand { background: #fff; border-radius: 10px; padding: 14px 16px; display: inline-block; }
.brand-logo { max-width: 100%; max-height: 92px; width: auto; height: auto; display: block; margin: 0 auto; }
.brand-sub { font-size: 14px; color: #b9c8e2; margin: 14px 0 28px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.12); }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-btn {
  text-align: left;
  background: none;
  border: none;
  color: #c3d1e8;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}
.nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
.nav-btn.active { background: rgba(255,255,255,0.14); color: #fff; font-weight: 600; }
.nav-btn:disabled { color: #5c6d8a; cursor: default; }

.sidebar-project { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.12); }
.sp-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #8ca0c4; }
.sp-name { font-size: 16px; font-weight: 600; margin: 4px 0 8px; color: #fff; }
.sp-switch { background: none; border: 1px solid rgba(255,255,255,0.25); color: #c3d1e8; font-size: 12.5px; padding: 5px 10px; border-radius: 5px; cursor: pointer; }
.sp-switch:hover { background: rgba(255,255,255,0.08); }

.sidebar-foot { margin-top: auto; font-size: 12px; color: #6d80a3; }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; padding: 30px 36px; overflow-y: auto; }
.main[hidden] { display: none !important; }

.topbar { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 20px; gap: 12px 16px; flex-wrap: wrap; }
.topbar h1 { font-size: 24px; margin: 0; color: var(--navy); flex: 0 1 auto; max-width: 600px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .btn-delete { margin-left: 22px; }
.send-hint { font-size: 13px; color: var(--warn); font-weight: 600; }
.send-hint[hidden] { display: none; }
.topbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: 8px; }

.btn {
  font-size: 15px;
  padding: 9px 16px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
}
.btn[hidden] { display: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--navy-dark); }
.btn.subtle { background: var(--field); color: var(--navy); border-color: var(--navy); }
.btn.subtle:hover { background: #eef2fb; }
.btn.small { padding: 6px 12px; font-size: 14.5px; }
.btn.danger { color: var(--danger); border-color: var(--danger); background: var(--field); }

select, input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], input[type=email], textarea {
  font-family: inherit;
  font-size: 15.5px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
}
input[type=file] { font-size: 14.5px; color: var(--slate); max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-size: 14.5px; font-weight: 600; padding: 6px 12px; margin-right: 10px; border-radius: 6px; border: 1px solid var(--navy); background: var(--field); color: var(--navy); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: #eef2fb; }
select:focus, input:focus, textarea:focus { outline: 2px solid #b9cdf0; border-color: var(--navy); }

/* ---------- Tables ---------- */
/* Lists shrink to their content: a 5-column list is as wide as its 5 columns, never the page. */
.table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; width: fit-content; max-width: 100%; }
.table-wrap .empty-state { min-width: 460px; }
table { width: auto; border-collapse: collapse; font-size: 15px; }
thead th { white-space: nowrap; text-align: left; background: var(--sub); color: var(--slate); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.4px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody td .badge, tbody td .btn { white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #d9e0ea; }
tbody tr.clickable { cursor: pointer; }
.empty-state { padding: 40px; text-align: center; color: var(--slate-light); font-size: 15.5px; }

/* status badges */
.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.badge-draft { background:#eceff3; color:#5b6577; }
.badge-submitted { background:#e5eefc; color:#0b3d91; }
.badge-inreview { background:#fff2d9; color:#8a5a00; }
.badge-approved { background:#e3f6e9; color:#1f7a3d; }
.badge-approvedasnoted { background:#e3f6e9; color:#1f7a3d; }
.badge-revise, .badge-reviseandresubmit { background:#fdeadb; color:#a34c00; }
.badge-rejected { background:#fbe2e1; color:#b3261e; }
.badge-void { background:#eceff3; color:#8a93a3; }
.badge-closed { background:#e6e9ef; color:#4a5568; }
.badge-open { background:#e5eefc; color:#0b3d91; }
.badge-answered { background:#e3f6e9; color:#1f7a3d; }
.overdue-flag { color: var(--danger); font-weight: 700; font-size: 12.5px; margin-left: 6px; }

.log-summary { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.summary-chip { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; font-size: 14.5px; color: var(--slate); }
.summary-chip b { color: var(--navy); font-size: 16px; }

/* ---------- Editor layout ----------
   RULE: no box or field spans the page. Cards have fixed widths (sm/md/lg/xl) and sit side by side,
   wrapping as the screen narrows. Fields have widths that fit what goes in them (fw-*). Only a
   wide table may make its card wider (w-fit). */
.editor-grid { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.editor-stack { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.editor-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px 20px; width: 600px; max-width: 100%; flex: 0 0 auto; }
.editor-card.w-sm { width: 400px; }
.editor-card.w-md { width: 600px; }
.editor-card.w-lg { width: 820px; }
.editor-card.w-xl { width: 1100px; }
.editor-card.w-fit { width: fit-content; }
.editor-card[hidden] { display: none; }
.editor-card h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--navy); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.editor-card > .hint:first-of-type { margin-top: -4px; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

.field-grid { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; }
.field-grid > label, .field-grid > .field { display: block; font-size: 14px; color: var(--slate); font-weight: 600; width: 240px; max-width: 100%; flex: 0 0 auto; line-height: 1.35; }
.field-grid > label > input, .field-grid > label > select, .field-grid > label > textarea { display: block; margin-top: 5px; }
.field-grid > label > .checkbox-grid { display: grid; margin-top: 5px; }
.field-grid > .fw-xs { width: 90px; }
.field-grid > .fw-s { width: 160px; }
.field-grid > .fw-m { width: 240px; }
.field-grid > .fw-l { width: 360px; }
.field-grid > .fw-xl { width: 540px; }
.field-grid > .span2, .field-grid > .span-full, .field-grid > .fw-full { width: 100%; }
.field-grid > .fg-title { width: 100%; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-light); margin: 6px 0 -4px; }
.field-grid > .fg-title:first-child { margin-top: 0; }
.field-grid > .field-grid { width: 100%; }
/* A row that holds one sized field on its own line (e.g. address lines), so the next field starts below it. */
.field-grid > .fg-row { width: 100%; display: flex; }
.fg-row > label { display: block; font-size: 14px; color: var(--slate); font-weight: 600; width: 240px; max-width: 100%; line-height: 1.35; }
.fg-row > label.fw-l { width: 360px; }
.fg-row > label input { display: block; margin-top: 5px; width: 100%; font-weight: normal; color: var(--ink); }
.editor-card.w-fit > p { max-width: 640px; }
.data-table td { white-space: nowrap; }
.field-grid label[hidden], .field-grid .field[hidden] { display: none; }
.field-grid[hidden] { display: none; }
.field-grid > label:has(> input[type=checkbox]) { display: flex; flex-direction: row; align-items: center; gap: 7px; width: auto; }
.field-grid > label > input[type=checkbox] { display: inline-block; margin: 0; }
.field-grid label input, .field-grid label select, .field-grid label textarea { width: 100%; font-weight: normal; color: var(--ink); }
.field-grid label input[type=checkbox] { width: auto; }
.field-grid input, .field-grid select, .field-grid textarea { font-weight: normal; color: var(--ink); }
.inline-pair { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; width: 100%; }
.field-grid input:disabled { background: #f4f6fa; color: var(--slate-light); }
.field-grid input[type=color] { padding: 3px; height: 40px; width: 80px; cursor: pointer; }
input.auto-date { background: #f4f6fa; }
.field-grid > label .hint { font-weight: normal; }

.hint { font-weight: normal; color: var(--slate-light); font-size: 12.5px; text-transform: none; letter-spacing: 0; }

.checkbox-grid { display: grid; grid-template-columns: repeat(3, max-content); gap: 7px 18px; padding: 4px 0; }
.checkbox-grid .chk-item { white-space: nowrap; }
.chk-item { display: flex; align-items: center; gap: 6px; font-weight: normal; font-size: 15px; color: var(--ink); cursor: pointer; }
.chk-item input { margin: 0; cursor: pointer; }

.spec-suggest { position: absolute; z-index: 100; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(20,30,50,0.18); max-height: 320px; overflow-y: auto; padding: 6px; }
.spec-suggest-hdr { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-light); padding: 6px 8px 4px; }
.spec-suggest-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 15px; }
.spec-suggest-row:hover { background: #f0f4fb; }
.spec-suggest-code { font-weight: 700; color: var(--navy); white-space: nowrap; }
.spec-suggest-title { color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.spec-suggest-empty { padding: 10px 8px; font-size: 14.5px; color: var(--slate-light); }
.spec-fav-star { background: none; border: none; cursor: pointer; font-size: 17.5px; color: #d8b400; padding: 0; line-height: 1; flex-shrink: 0; }
.spec-fav-star:not(.is-fav) { color: #c7cedb; }

.items-table-wrap { overflow-x: auto; }
.reorder-col { display: grid; grid-template-columns: repeat(3, 22px); gap: 2px; align-content: center; }
.reorder-col > * { width: 22px; height: 20px; padding: 0; text-align: center; }
.row-move, .row-ins { background: none; border: 1px solid var(--line); border-radius: 4px; color: var(--navy); font-size: 12.5px; cursor: pointer; padding: 2px 4px; }
.reorder-col > .row-move, .reorder-col > .row-ins { padding: 0; }
.row-move:disabled { opacity: 0.3; cursor: default; }

.attach-item.is-signed { border-color: var(--ok); background: #eef8f0; }
.signed-badge { background: var(--ok); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 12px; white-space: nowrap; }

/* Transmittal status block (inside submittal editor) */
.transmittal-status-block { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ts-line { margin: 0; font-size: 15.5px; color: var(--ink); }

/* Submittal picker modal */
.picker-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 16px; }
.picker-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 15px; cursor: pointer; }
.picker-row:last-child { border-bottom: none; }
.picker-row:hover { background: var(--sub); }
.picker-spec { color: var(--slate-light); font-size: 13px; margin-left: 6px; }


.items-table { width: auto; border-collapse: collapse; margin-bottom: 10px; }
.items-table th { text-align: left; font-size: 12.5px; color: var(--slate-light); text-transform: uppercase; padding: 6px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.items-table td { padding: 4px 3px; }
.items-table input { padding: 6px 8px; font-size: 15px; }
.items-table input[data-f=manufacturer] { width: 138px; }
.items-table input[data-f=model_number] { width: 150px; }
.items-table input[data-f=description] { width: 96px; }
.items-table input[data-f=item_description] { width: 200px; }
.items-table input[data-f=color] { width: 92px; }
.items-table input[data-f=location] { width: 126px; }
.items-table input[data-f=qty] { width: 60px; text-align: right; }
.items-table input[data-f=notes] { width: 150px; }
.row-remove { background:none; border:none; color: var(--danger); font-size: 18.5px; cursor: pointer; padding: 0 6px; }

.cutsheet-col { min-width: 130px; }
.cutsheet-chip { display: flex; align-items: center; gap: 4px; font-size: 13px; margin-bottom: 3px; }
.cutsheet-chip a { color: var(--navy); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.cutsheet-rm { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 15px; padding: 0 2px; }
.missing-cutsheet-tag { color: var(--warn); font-size: 12.5px; font-weight: 600; display: block; margin-bottom: 3px; }
.cutsheet-status { font-size: 13px; font-weight: 600; text-decoration: none; }
.cutsheet-status.done { color: #1f7a3d; }
.cutsheet-status.needs-work { color: #c62828; display: block; margin-bottom: 3px; }
.cutsheet-attach-btn { display: inline-block; margin: 0 3px 2px 0; background: var(--field); font-size: 12.5px; color: var(--navy); border: 1px dashed var(--navy); border-radius: 4px; padding: 2px 6px; cursor: pointer; }
.cutsheet-attach-btn:hover { background: #eef2fb; }

.cc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cc-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap: 8px; align-items: center; }
.cc-row input { font-size: 14.5px; padding: 6px 8px; }

#reviewBlock input { width: 220px; margin-right: 8px; }

.om-entries-list { display: flex; flex-direction: column; gap: 12px; }
.om-entry-card { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; background: var(--sub); }
.om-entry-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.om-entry-hdr .om-entry-title { font-weight: 700; font-size: 16px; color: var(--ink); }
.om-entry-hdr .om-entry-source { font-size: 12.5px; color: var(--slate-light); font-weight: normal; margin-left: 8px; }
.om-entry-actions { display: flex; gap: 8px; align-items: center; }
.om-entry-body { display: none; margin-top: 10px; }
.om-entry-card.expanded .om-entry-body { display: block; }
.om-entry-attach { margin-top: 10px; }
.om-search-link { font-size: 13px; color: var(--navy); text-decoration: none; }
.om-field-grid { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 14px; }
.om-field-grid > .fg-title { width: 100%; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-light); margin: 4px 0 -4px; }
.om-field-grid label { display: block; font-size: 13px; color: var(--slate); font-weight: 600; width: 170px; max-width: 100%; line-height: 1.35; }
.om-field-grid label > input, .om-field-grid label > select, .om-field-grid label > textarea { display: block; margin-top: 4px; }
.om-field-grid label input, .om-field-grid label select, .om-field-grid label textarea { width: 100%; font-weight: normal; color: var(--ink); padding: 6px 8px; font-size: 14.5px; }
.om-field-grid label.fw-xs { width: 70px; }
.om-field-grid label.fw-s { width: 156px; }
.om-field-grid label.fw-l { width: 236px; }
.om-field-grid label.fw-xl { width: 360px; }
.om-field-grid label.span2, .om-field-grid label.span4 { width: 100%; }
.om-doc-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.om-doc-group { border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: var(--field); }
.om-doc-actions { display: flex; gap: 6px; margin-top: 6px; }
.file-btn { cursor: pointer; }
.om-add-doc-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.om-add-doc-row input[type=text] { flex: 1 1 100%; min-width: 0; padding: 8px 10px; font-size: 15px; border: 1px solid var(--line); border-radius: 6px; }
.ext-link-note { color: var(--slate-light); font-size: 12px; font-style: italic; }
.attach-list-inline { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.attach-list-inline .attach-item { padding: 6px 10px; font-size: 14px; }
.rfi-questions-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.rfi-question-row { display: flex; align-items: center; gap: 8px; }
.rfi-question-row .q-num { font-weight: 700; color: var(--navy); font-size: 15px; min-width: 18px; }
.rfi-question-row input { flex: 1; }

.attach-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.attach-item { display: flex; justify-content: space-between; align-items: center; background: var(--sub); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; font-size: 14.5px; }
.attach-item a { color: var(--navy); text-decoration: none; font-weight: 600; }
.attach-item .rm { color: var(--danger); background: none; border: none; cursor: pointer; font-size: 17.5px; }

.revisions-list { display: flex; flex-direction: column; gap: 8px; }
.revision-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--sub); border: 1px solid var(--line); border-radius: 6px; font-size: 15px; }
.revision-row.current { border-color: var(--navy); background: #eef2fb; }

/* ---------- Modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(10,20,40,0.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-bg[hidden] { display: none !important; }
.modal { background: var(--card); border-radius: 12px; padding: 24px 26px; width: 600px; max-width: 94vw; max-height: 90vh; overflow-y: auto; }
.modal.modal-narrow { width: 460px; }
.modal.modal-wide { width: 640px; }
/* v1.2.8: the email send screen */
.modal.modal-xl { width: 900px; }
.cm-email { margin-bottom: 16px; }
.cm-email + .cm-email { padding-top: 14px; border-top: 1px solid var(--line); }
.cm-head { font-weight: 700; font-size: 14px; color: var(--navy); margin-bottom: 6px; }
.cm-row { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; }
.cm-lab { flex: 0 0 64px; font-size: 14px; font-weight: 700; color: #5b6577; padding-top: 5px; }
.cm-field { flex: 1; min-width: 0; font-size: 15px; padding-top: 4px; }
.cm-subject { font-weight: 600; }
.cm-chips { display: inline; }
.cm-chip { display: inline-flex; align-items: center; gap: 4px; background: #e8eefb; border: 1px solid #c9d6f2; border-radius: 12px; padding: 2px 8px; margin: 0 6px 6px 0; font-size: 14px; max-width: 100%; overflow-wrap: anywhere; }
.cm-chip.cm-fixed { background: #eef1f5; border-color: #d5dbe4; color: #4a5568; }
.cm-chip em { font-style: normal; font-size: 12px; color: #7d8a9c; }
.cm-x { border: none; background: none; cursor: pointer; font-size: 17.5px; line-height: 1; color: #5b6577; padding: 0 0 0 2px; }
.cm-add { display: flex; gap: 6px; margin-top: 2px; }
.cm-add input { flex: 1; min-width: 0; font-size: 14.5px; padding: 5px 8px; }
.cm-file { display: inline-block; margin-right: 10px; font-size: 14.5px; }
.cm-preview { width: 100%; height: 300px; border: 1px solid var(--line); border-radius: 6px; background: #fff; margin-top: 8px; }
/* v1.3.2 (transmittals): the subject in a box he can change; "Leave out spec sheets" beside the attachment */
.cm-subject-input { width: 100%; font-size: 15px; font-weight: 600; padding: 5px 8px; }
.cm-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; margin-left: 4px; cursor: pointer; white-space: nowrap; }
.cm-opt input { width: 17px; height: 17px; margin: 0; }
.modal h2 { margin: 0 0 16px; font-size: 19.5px; color: var(--navy); }
.modal .field-grid { margin-bottom: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 1500px) {
  .sidebar { width: 216px; padding: 18px 10px; }
  .main { padding: 24px 28px; }
  .topbar h1 { max-width: 506px; }
}
/* Bigger text (v1.3.0): the narrower sidebar keeps "Companies & Contacts" on one line. */
@media (min-width: 901px) and (max-width: 1500px) { .nav-btn { padding-left: 9px; padding-right: 9px; } }
/* The phone menu button and top-bar title only exist below 900px (see the phone section at the end). */
.menu-btn, .m-where { display: none; }
.sidebar-menu { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* ---------- Submittal header + tabs (tabs: Settings) ---------- */
.lock-badge[hidden] { display: none; }
.lock-badge { align-self: flex-end; background: #fff4e0; border: 1px solid #e0a83a; color: #8a5a00; font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 6px; white-space: nowrap; }
.sh-meta-row { display: flex; gap: 28px; margin: 14px 0 2px; font-size: 15px; flex-wrap: wrap; padding: 10px 12px; background: var(--sub); border-radius: 8px; }
.sh-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-light); margin-bottom: 2px; }

.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 18px; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.tabs .tab-btn { white-space: nowrap; }
.tab-btn { background: none; border: none; padding: 10px 18px; font-size: 15.5px; font-weight: 600; color: var(--slate-light); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab-btn:hover { color: var(--navy); }
.tab-btn.active { color: var(--navy); border-bottom-color: var(--navy); }
.tab-panel[hidden] { display: none; }

/* ---------- signed-in user (sidebar) ---------- */
.sidebar-user { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 14px; font-size: 14px; }
.sidebar-user .su-name { color: #fff; font-weight: 600; font-size: 15px; }
.sidebar-user .su-role { color: #9fb2d3; margin: 2px 0 8px; text-transform: capitalize; }
.sidebar-user .su-signout { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #dfe7f5; border-radius: 6px; padding: 5px 10px; font-size: 14px; cursor: pointer; }
.sidebar-user .su-signout:hover { background: rgba(255,255,255,0.08); }
#usersCard[hidden], #updateCard[hidden] { display: none !important; }
.user-inactive td { color: var(--slate-light); }

/* ---------- two-step sign-in (shared by the sign-in page and Settings) ---------- */
.sub-h { font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-light); margin: 22px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.tfa-status { display: block; font-size: 14.5px; margin: 0 0 10px; color: var(--slate); }
.tfa-status.warn { color: var(--danger); }
.tfa-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.policy-check { width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink); margin: 0 0 12px; font-weight: 600; }
.policy-check input { width: 16px; height: 16px; }
.code-input { font-size: 25.5px !important; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.qr-box { align-self: center; width: 200px; height: 200px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; margin: 0 auto; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.manual { font-size: 14.5px; color: var(--slate); }
.manual summary { cursor: pointer; color: var(--navy); }
.manual code { font-size: 15px; word-break: break-all; background: #f3f5f9; padding: 2px 4px; border-radius: 4px; }
.rc-list { margin: 0; padding: 12px 12px 12px 34px; columns: 2; column-gap: 24px; font-family: Consolas, 'Courier New', monospace; font-size: 16.5px; line-height: 1.8; background: #f6f8fb; border: 1px solid var(--line); border-radius: 8px; }
.rc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-actions .btn { padding: 7px 11px; font-size: 14.5px; margin: 0; }
/* v1.4.0 chat 24: Settings > File Storage, the Recovery Key card and the key shown once (app/screens/recovery-key.js) */
.rk-line { margin: 6px 0; }
.rk-key { margin: 6px 0 10px; padding: 12px 14px; font-family: Consolas, 'Courier New', monospace; font-size: 17px; line-height: 1.7; letter-spacing: 0.5px; word-break: break-all; background: #f6f8fb; border: 1px solid var(--line); border-radius: 8px; user-select: all; }
.tfa-modal-body { display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--slate); line-height: 1.45; }
.tfa-modal-body[hidden] { display: none; }
.tfa-modal-body label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; color: var(--slate); }
.tfa-modal-body label[hidden] { display: none; }
.tfa-modal-body input[type=text], .tfa-modal-body input[type=password] { padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 16px; }
.tfa-modal-body .link-btn { background: none; border: 0; padding: 0; color: var(--navy); font-size: 14.5px; cursor: pointer; text-decoration: underline; align-self: flex-start; }
.user-2fa-off { color: var(--danger); font-weight: 600; }

/* ---- v1.2.3 RFIs ---- */
.rfi-toolbar { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.rfi-toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--slate-light); text-transform: uppercase; letter-spacing: .03em; }
.rfi-toolbar select { width: 254px; }
.rfi-toolbar .hint[hidden] { display: none; }
.col-check { width: 28px; text-align: center; }
#rfisTable tr.group-row td { background: #f1f4f8; font-weight: 700; color: var(--brand, #0455cf); white-space: normal; }
#rfisTable td.cell-wrap { white-space: normal; min-width: 220px; max-width: 360px; }
.block-hint { display: block; margin-bottom: 8px; }
.block-hint[hidden], .rfi-lock-note[hidden], .change-notice[hidden] { display: none; }
/* v1.2.8: a note with its own button, kept apart from the Save row (Create Submittal, newer revision). */
.note-bar[hidden] { display: none; }
/* v1.2.8: the Register's Create Submittal has its own column, well away from Items / Edit Info / remove. */
td.reg-create { padding-left: 36px; border-left: 1px solid #e2e6ec; white-space: nowrap; }
td.reg-actions { white-space: nowrap; }
.note-bar { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: 1100px; margin: 0 0 12px; padding: 10px 14px; background: #fff8e6; border: 1px solid #f1d58a; border-radius: 6px; color: #6b5200; font-size: 14px; }
.note-bar p { margin: 0; flex: 1; }
.note-bar .btn { flex: none; }
.rfi-lock-note { display: block; max-width: 1100px; margin: 0 0 12px; padding: 8px 12px; background: #fff8e6; border: 1px solid #f1d58a; border-radius: 6px; color: #6b5200; font-size: 14px; }
.change-notice { display: block; flex-basis: 100%; color: #a34c00; font-weight: 600; }
.topbar #rfiStatusBadge { margin-right: auto; }
.rfi-question-row { align-items: flex-start; margin-bottom: 6px; }
.rfi-question-row .q-num { padding-top: 7px; }
.rfi-question-row textarea { flex: 1; min-height: 44px; font-size: 15px; }
.cc-list-stacked .cc-row { grid-template-columns: 1fr 1fr auto; }
.cc-list-stacked .cc-row input[data-f="email"] { grid-column: 1 / 3; }
.cc-list-stacked .cc-row .row-remove { grid-row: 1 / 3; grid-column: 3; }
.send-group { padding: 8px 10px; border: 1px solid var(--line, #e2e6ec); border-radius: 6px; margin-bottom: 8px; font-size: 15px; }
.send-problems { padding: 8px 10px; margin-bottom: 8px; border-radius: 6px; background: #fbe2e1; color: #8a1c15; font-size: 14.5px; }
.rfi-sends { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.rfi-send { font-size: 14px; padding: 6px 8px; border-left: 3px solid var(--ok, #1f7a3d); background: #f6f9f7; }
.rfi-send.is-failed { border-left-color: var(--danger, #b3261e); background: #fdf3f2; }
/* v1.3.2: a transmittal's emails (on its screen, under Internal Review) */
.tr-send-log { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.tx-send { font-size: 14px; padding: 6px 8px; border-left: 3px solid var(--ok, #1f7a3d); background: #f6f9f7; overflow-wrap: anywhere; }
.tx-send.is-failed { border-left-color: var(--danger, #b3261e); background: #fdf3f2; }
.tx-send a { font-weight: 600; }
.rfi-events { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }

/* ---------- v1.2.4: Home, Companies & Contacts, Project Overview & Team ---------- */
.nav-project { margin: 6px 0 10px; }
.nav-project .nav-btn { padding: 8px 12px; font-size: 15.5px; }
.sidebar-project[hidden] { display: none; }
.home-date { font-size: 14.5px; }
.home-row { margin-bottom: 18px; }
.table-in-card { border-radius: 8px; }
.table-in-card .empty-state { min-width: 0; padding: 22px 30px; }
.editor-card .table-wrap .empty-state { min-width: 360px; }
.card-toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.card-toolbar input[type=text] { width: 300px; }
.card-toolbar .tabs { margin-bottom: 0; }
.inline-label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--slate-light); text-transform: uppercase; letter-spacing: .03em; }
.inline-label select { width: 160px; }
.card-add { margin-top: 10px; }
#homeTodayTable td.cell-wrap, #dirTable td.cell-wrap, #projectsTable td.cell-wrap, #projSpecTable td.cell-wrap { white-space: normal; min-width: 140px; max-width: 300px; }
#homeTodayTable td { vertical-align: top; }
.when { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.when-overdue { background: #fbe2e1; color: #a1241b; }
.when-today { background: #fff2d9; color: #8a5a00; }
.when-soon { background: #e5eefc; color: #0b3d91; }
.when-todo { background: #eceff3; color: #4a5568; }
.home-waiting { display: flex; flex-direction: column; gap: 6px; }
.wait-row { font-size: 14.5px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); }
.wait-row.clickable { cursor: pointer; }
.wait-row.clickable:hover { border-color: var(--navy); }
.badge-active { background: #e3f6e9; color: #1f7a3d; }
.badge-onhold { background: #fff2d9; color: #8a5a00; }
.badge-complete { background: #eceff3; color: #5b6577; }
.modal-sub { margin: 4px 0 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.fg-title-plain { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-light); margin-bottom: 6px; }
.mini-row { font-size: 14.5px; padding: 3px 0; }
.mini-row a { color: var(--navy); font-weight: 600; text-decoration: none; }
.cc-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cc-add-row select { width: 276px; font-size: 14.5px; padding: 6px 8px; }
#sgCc + .cc-add-row { margin-bottom: 4px; }

/* RFI editor: spec-section rows and per-question blocks */
.rfi-spec-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rfi-spec-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rfi-spec-row select { flex: 1 1 300px; width: auto; min-width: 0; max-width: 360px; }
.rfi-spec-row input { width: 161px; }
.rfi-qblock { padding: 10px 10px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--sub); margin-bottom: 4px; }
.rfi-qblock .rfi-question-row { margin-bottom: 6px; }
.q-sub { display: block; margin: 0 26px 8px 26px; font-size: 13px; font-weight: 600; color: var(--slate); }
.q-sub textarea { display: block; width: 100%; margin-top: 4px; font-size: 15px; min-height: 40px; }
.q-resp { color: var(--navy); }
.q-resp textarea { border-color: #b9cdf0; background: var(--field); }
@media (max-width: 1500px) {
  #homeTodayCard { width: 680px; }
  #homeWaitingCard { width: 360px; }
  #homeTodayTable td.cell-wrap { max-width: 220px; }
}

/* ---------- v1.2.5 ---------- */
/* Saved / unsaved note next to every Save button */
.save-state { display: inline-block; margin-left: 10px; font-size: 14.5px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.save-state[hidden] { display: none; }
.save-state.ss-dirty { color: #a35a00; }
.save-state.ss-saved { color: var(--ok); }
.modal-actions .modal-save-state { margin: 0 auto 0 0; align-self: center; }
.save-state.ss-flash { animation: ssflash 0.9s ease 2; }
@keyframes ssflash { 50% { background: #ffe2a8; border-radius: 4px; } }
/* A label beside its field on one line (RFI Subject) */
.field-grid > label.inline-field { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.field-grid > label.inline-field > input { margin-top: 0; flex: 1 1 auto; width: auto; min-width: 0; }
#stabCompany .editor-card.w-md { width: 640px; }
.field-grid > label:has(> #setShortName) { width: 200px; }
.field-grid > label:has(> #gType) { width: 262px; } /* Register window: "Manufacturer's Field Reports" */
/* RFI Tracking row: "Response Needed By (optional)" on one line, the three boxes level (146 + 210 + 160 + 2 x 16 = 548) */
.field-grid > label:has(> #rGcNumber) { width: 146px; }
.field-grid > label:has(> #rDateNeededBy) { width: 210px; }
/* Waiting on Others: sent date and a remove button per row */
.wait-row { display: flex; align-items: flex-start; gap: 8px; }
.wait-row .wait-main { flex: 1 1 auto; min-width: 0; }
.wait-row .wait-sent { font-size: 14px; color: var(--ink); margin-top: 2px; }
.wait-row .wait-dismiss { flex: 0 0 auto; }
#homeWaitingHiddenBtn { margin-top: 10px; }
#homeWaitingHidden { margin-top: 8px; opacity: 0.8; }
/* Product Library */
tr.row-selected td { background: #cfdcf3; }
#productSearch { width: 368px; }
/* Email templates */
.code-area { font-family: Consolas, 'Courier New', monospace; font-size: 14.5px; line-height: 1.45; }
.tpl-preview { margin-top: 12px; }
.tpl-preview iframe { display: block; width: 100%; height: 340px; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tpl-ph { margin-top: 12px; font-size: 14.5px; }
.tpl-ph summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.ph-table { border-collapse: collapse; margin-top: 6px; }
.ph-table td { padding: 3px 10px 3px 0; vertical-align: top; }
.ph-table code { background: var(--sub); padding: 1px 5px; border-radius: 4px; }

/* ---------- Handoff (v1.2.6) ---------- */
.ho-pin-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.ho-pin-value { font-family: Consolas, 'Courier New', monospace; font-size: 25.5px; letter-spacing: 4px; font-weight: 700; color: var(--ink); min-width: 120px; }
.ho-check { display: flex; align-items: center; gap: 7px; font-size: 15px; margin-top: 12px; cursor: pointer; }
.ho-check input { margin: 0; }
.ho-lock { margin-top: 12px; padding: 8px 10px; border-radius: 6px; background: #fbe2e1; color: var(--danger); font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ho-lock[hidden] { display: none; }
.ho-pairs { display: flex; flex-direction: column; gap: 6px; }
.ho-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ho-pair .ho-pair-label { width: 200px; font-weight: 600; }
.ho-pair .ho-pair-value { width: 250px; }
.ho-pair-hint { width: 100%; margin: -2px 0 2px 206px; }
.ho-mini { background: var(--field); border: 1px solid var(--line); border-radius: 5px; width: 26px; height: 28px; cursor: pointer; color: var(--navy); font-size: 15px; padding: 0; }
.ho-mini:disabled { opacity: .35; cursor: default; }
.ho-qr svg { width: 170px; height: 170px; display: block; margin: 0 auto 6px; }
.ho-qr-off { padding: 26px 10px; text-align: center; }
.ho-link { font-size: 13px; color: var(--slate); overflow-wrap: anywhere; text-align: center; margin-bottom: 4px; }
#hoQrCard .card-actions { justify-content: center; }
#hoViews { text-align: center; margin: 8px 0 0; }
/* Non-payment cover (v1.4.0 item 15): the Covered notes (as wide as their text), the QR Link badge and the card. */
.ho-covered-note { width: fit-content; max-width: 100%; margin: 0 0 18px; padding: 9px 14px; border-radius: 6px; background: #fbe2e1; border: 1px solid #f0b8b4; color: var(--danger); font-size: 16px; font-weight: 600; }
.badge-covered { background: #fbe2e1; color: #b3261e; }
.ho-cover-state { margin: 0 0 12px; font-size: 15.5px; color: var(--ink); }
.ho-cover-state.on { color: var(--danger); font-weight: 600; }
.ho-drop { border: 2px dashed var(--line); border-radius: 8px; padding: 16px 12px; text-align: center; font-size: 14.5px; color: var(--slate); background: var(--field); display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.ho-drop.over { border-color: var(--navy); background: #e5eefc; }
.ho-drop .file-btn:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.ho-cover-picture { margin-bottom: 10px; text-align: center; }
.ho-cover-picture img { max-width: 100%; max-height: 150px; border: 1px solid var(--line); background: #fff; }
.ho-cover-remove { display: block; margin: 0 auto 12px; }
.ho-cover-msg { font-size: 14.5px; color: var(--ink); }
.ho-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.ho-sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.ho-inline { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--slate); }
.ho-inline select { padding: 5px 8px; }
#hoGridCount { margin-left: 6px; }
.ho-grid-wrap { background: #fff; border-radius: 6px; }
.ho-grid { table-layout: fixed; width: max-content; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.ho-grid thead th { padding: 0; background: #1c4587; color: #fff; text-transform: none; letter-spacing: 0; border-right: 1px solid #fff; border-bottom: none; position: relative; vertical-align: middle; }
.ho-grid .ho-corner { background: #0f2c5c; cursor: pointer; position: sticky; left: 0; z-index: 3; }
.ho-colhead-in { display: flex; align-items: center; gap: 1px; padding: 3px 2px 3px 0; }
.ho-grid input.ho-collabel { flex: 1 1 auto; min-width: 0; width: 100%; background: transparent; border: 1px solid transparent; color: #fff; font-weight: 700; font-size: 14px; padding: 4px 3px; border-radius: 4px; }
.ho-grid input.ho-collabel:focus { background: #fff; color: var(--ink); outline: none; }
.ho-colmenu { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px; }
.ho-colmenu:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.ho-grip { cursor: grab; color: #9fb4d9; font-size: 14px; padding: 0 2px; user-select: none; letter-spacing: -2px; }
.ho-grip[draggable="false"] { cursor: default; visibility: hidden; }
.ho-resize { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
.ho-grid tbody td { padding: 0; border-bottom: 1px solid #f3c2d4; border-right: 1px solid #f3c2d4; background: #fddce8; vertical-align: top; }
.ho-grid tbody tr:last-child td { border-bottom: 1px solid #f3c2d4; }
.ho-grid .ho-rowhead { position: sticky; left: 0; z-index: 1; background: var(--sub); color: var(--slate); font-size: 12.5px; font-weight: 600; text-align: right; padding: 0 6px 0 2px; border-bottom: 1px solid var(--line); white-space: nowrap; cursor: pointer; vertical-align: middle; }
.ho-grid .ho-rowhead .ho-grip { color: var(--slate-light); float: left; }
.ho-grid .ho-rowhead.selh { background: #c9d7f2; color: var(--navy); }
.ho-grid textarea.ho-cell { display: block; width: 100%; border: none; border-radius: 0; background: transparent; resize: none; font-size: 14.5px; line-height: 1.35; padding: 4px 5px; min-height: 26px; overflow: hidden; color: var(--ink); }
.ho-grid textarea.ho-cell:focus { outline: 2px solid var(--navy); outline-offset: -2px; background: #fff; }
.ho-grid td.sel { background: #c9d7f2; }
.ho-grid tr.drop-before td, .ho-grid tr.drop-before th { box-shadow: inset 0 3px 0 var(--navy); }
.ho-grid tr.drop-after td, .ho-grid tr.drop-after th { box-shadow: inset 0 -3px 0 var(--navy); }
.ho-grid th.drop-before { box-shadow: inset 4px 0 0 #ffd54a; }
.ho-grid th.drop-after { box-shadow: inset -4px 0 0 #ffd54a; }
.ho-menu { position: absolute; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: 4px; display: flex; flex-direction: column; min-width: 180px; }
.ho-menu button { background: none; border: none; text-align: left; padding: 8px 10px; font-size: 15px; border-radius: 5px; cursor: pointer; color: var(--ink); }
.ho-menu button:hover:not(:disabled) { background: #eef2fb; }
.ho-menu button:disabled { color: #a0a8b4; cursor: default; }
.ho-import-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.ho-import-list .btn { text-align: left; }
.ho-blocks { display: grid; gap: 12px 16px; align-items: start; }
.ho-block { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.ho-block.is-empty { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M10 10L90 90M90 10L10 90' stroke='%23e4e6ea' stroke-width='6'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.ho-block.drop-before { box-shadow: -4px 0 0 var(--navy); } .ho-block.drop-after { box-shadow: 4px 0 0 var(--navy); }
.ho-block-head { display: flex; align-items: center; gap: 4px; background: #999; border-radius: 6px; padding: 3px 4px; }
.ho-block-head .ho-grip { color: #eee; }
.ho-block-head input.ho-block-title { flex: 1 1 auto; min-width: 0; background: transparent; border: 1px solid transparent; color: #ffff00; font-weight: 700; padding: 5px 6px; }
.ho-block-head input.ho-block-title:focus { background: #fff; color: var(--ink); }
.ho-block-head .ho-colmenu { color: #fff; }
.ho-block textarea { width: 100%; resize: vertical; font-size: 15px; padding: 6px 8px; background: rgba(255,255,255,.9); }
.ho-brow { display: grid; grid-template-columns: 92px 1fr 22px; gap: 4px; align-items: start; }
.ho-brow input.ho-brow-label { padding: 6px; font-size: 14px; font-weight: 600; background: #ececec; }
.ho-brow textarea { background: #f6f6f6; }
.ho-addrow { align-self: flex-start; background: none; border: none; color: var(--navy); font-size: 14px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.ho-block-x { text-align: center; }
#sigPreview iframe { height: 170px; }

/* ---------- v1.2.6: Overview & Team in two columns; Companies / Contacts boxes ---------- */
.proj-layout { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.proj-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 100%; }
.proj-col-left { width: 544px; } /* inside: 544 - 2 x 20 padding - 2 x 1 border = 502 */
.proj-col-left > .editor-card { width: 100%; }
.proj-col-right { flex: 1 1 500px; }
.proj-col-right > .editor-card { max-width: 100%; }
.proj-col-right .block-hint { max-width: 560px; }
#projTodoList .wait-row strong { white-space: nowrap; }
.proj-info-card .field-grid { gap: 10px 12px; }
/* Three fields across = 500px, the card's inside width (540 - 2 x 20 padding). */
.field-grid > .pi-name { width: 254px; } .field-grid > .pi-num { width: 108px; } .field-grid > .pi-status { width: 114px; }
.field-grid > .pi-po { width: 260px; }
.field-grid > .pi-a1 { width: 260px; } .field-grid > .pi-a2 { width: 228px; }
.field-grid > .pi-city { width: 260px; } .field-grid > .pi-st { width: 84px; } .field-grid > .pi-zip { width: 132px; }
#projTeamTable td, #projSpecTable td { white-space: normal; padding: 8px 10px; }
#projTeamTable th, #projSpecTable th { padding: 8px 10px; }
#projTeamTable td:last-child, #projSpecTable td:last-child { white-space: nowrap; }
#projTeamTable td:nth-child(4) { max-width: 240px; overflow-wrap: anywhere; }
@media (max-width: 1500px) {
  .proj-col-left { width: 496px; } /* inside 454 = 208 + 108 + 114 + 2 x 12 */
  .field-grid > .pi-name, .field-grid > .pi-a1, .field-grid > .pi-city, .field-grid > .pi-po { width: 220px; }
  .field-grid > .pi-name { width: 208px; } .field-grid > .pi-po { width: 254px; }
  .field-grid > .pi-num { width: 108px; } .field-grid > .pi-status { width: 114px; }
  .field-grid > .pi-a2 { width: 206px; } .field-grid > .pi-st { width: 84px; } .field-grid > .pi-zip { width: 110px; }
}
#projSpecTable td.cell-wrap { max-width: 220px; }
.dir-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; max-width: 1560px; }
.dir-grid > .dir-card { width: auto; min-width: 0; }
.dir-card .card-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.dir-card .card-toolbar input { flex: 1 1 262px; min-width: 0; }
.dir-card .table-wrap { width: 100%; }
.dir-card table { width: 100%; }
.dir-card td { white-space: normal !important; overflow-wrap: anywhere; padding: 8px 10px; }
.dir-card th { padding: 8px 10px; }
.dir-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px; }
.dir-head h2 { border: none; padding: 0; margin: 0; }
.dir-list { max-height: calc(100vh - 220px); overflow: auto; }
.dir-list thead th { position: sticky; top: 0; z-index: 1; }
.row-btns { white-space: nowrap; }

/* Two columns that sit side by side when there is room (Settings > Email, ...). */
.two-col { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.two-col > div { display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 100%; }
.two-col-left { width: 520px; }
.two-col-left > .editor-card, .two-col-right > .editor-card { width: 100%; }
.two-col-right { flex: 1 1 520px; max-width: 860px !important; }
#projListTable td.cell-wrap { max-width: 240px; white-space: normal; }
/* Bigger text (v1.3.0): lists fit the screen -- long headers, and on Home the names, wrap onto a second line
   when there is not room, instead of the list scrolling sideways: the Submittal Log and Home > Projects from
   1366 wide down, every list on narrower screens (phones: as before). */
@media (min-width: 901px) {
  #logTable thead th, #projectsTable thead th { white-space: normal; }
  #projectsTable td:nth-child(1), #projectsTable td:nth-child(3), #projectsTable td:nth-child(4) { white-space: normal; min-width: 120px; }
}
@media (min-width: 901px) and (max-width: 1365px) {
  .table-wrap:not(.ho-grid-wrap) thead th { white-space: normal; }
}

/* =====================================================================================
   v1.2.6 PHONE AND TABLET (900px and narrower). The desktop layout above is untouched.
   - The sidebar becomes a top bar: menu button, logo, the open project's name. The menu opens over
     the page.
   - Every box is the screen's width (on a phone the width is the "needed" case); tables and the
     handoff grid scroll sideways inside their box; the page itself never scrolls sideways.
   - Buttons and fields are at least 44px tall; fields use 16px text so iPhones do not zoom in.
   ===================================================================================== */
@media (max-width: 900px) {
  .note-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  #app { flex-direction: column; }
  .sidebar { position: sticky; top: 0; z-index: 40; width: 100%; height: auto; min-height: 58px; overflow: visible; flex-direction: row; align-items: center; gap: 10px; padding: 7px 12px; }
  .menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 44px; padding: 0 11px; background: none; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; cursor: pointer; flex: 0 0 auto; }
  .menu-btn span { display: block; height: 2px; background: #fff; border-radius: 1px; }
  body.menu-open .menu-btn { background: rgba(255,255,255,.15); }
  .brand { padding: 4px 8px; border-radius: 6px; flex: 0 0 auto; }
  .brand-logo { max-height: 34px; }
  .brand-sub { display: none; }
  .m-where { display: block; flex: 1 1 auto; min-width: 0; color: #fff; font-size: 17.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-menu { display: none; position: fixed; left: 0; right: 0; top: 58px; bottom: 0; z-index: 45; background: var(--navy-dark); padding: 10px 16px 28px; overflow-y: auto; }
  body.menu-open .sidebar-menu { display: flex; }
  body.menu-open { overflow: hidden; }
  .nav { gap: 2px; }
  .nav-btn { min-height: 46px; font-size: 18.5px; }
  .sidebar-project { margin-top: 14px; padding-top: 12px; }
  .sp-switch, .su-signout { min-height: 44px; font-size: 16px; padding: 8px 14px; }
  .sidebar-foot { margin-top: 22px; font-size: 15px; }

  .main { padding: 14px 12px 44px; max-width: 100vw; }
  .topbar { gap: 8px 10px; margin-bottom: 14px; }
  .topbar h1 { flex: 1 1 100%; max-width: 100%; font-size: 22px; order: -1; }
  .topbar-actions { margin-left: 0; gap: 8px; }
  .topbar .btn-delete { margin-left: 0; }
  .btn { min-height: 44px; }
  .btn.small { min-height: 44px; padding: 8px 12px; }
  .row-remove, .rm, .cutsheet-rm, .ho-mini { min-width: 44px; min-height: 44px; }
  select, input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], input[type=email], input[type=search], textarea { font-size: 18.5px; }
  select, input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], input[type=email] { min-height: 44px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }

  .editor-grid, .editor-stack, .two-col, .two-col > div, .proj-layout, .proj-col { gap: 12px; }
  .editor-card, .editor-card.w-sm, .editor-card.w-md, .editor-card.w-lg, .editor-card.w-xl, .editor-card.w-fit { width: 100% !important; max-width: 100%; padding: 14px 13px 16px; }
  .editor-grid > *, .editor-stack, .two-col > div, .two-col-left, .two-col-right, .proj-col, .proj-col-left, .proj-col-right { width: 100% !important; max-width: 100% !important; flex: 1 1 100%; }
  .dir-grid { grid-template-columns: minmax(0, 1fr); }
  .dir-list { max-height: none; }
  .table-wrap { max-width: 100%; width: 100%; }
  .card-toolbar { gap: 8px; }
  .card-toolbar input[type=text] { width: 100%; }
  .modal-bg { align-items: flex-start; padding-top: 8px; }
  .modal, .modal.modal-narrow, .modal.modal-wide { width: calc(100vw - 16px) !important; max-width: none; max-height: calc(100dvh - 16px); padding: 18px 14px; border-radius: 10px; }
  .modal-actions { flex-wrap: wrap; }
  .tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-btn { min-height: 44px; }
  .om-doc-groups { grid-template-columns: 1fr; }
  .ho-blocks { grid-template-columns: minmax(0, 1fr) !important; }
  .ho-toolbar { gap: 8px; }
  /* Every field 16px (iPhone zooms in on anything smaller), every checkbox big enough to tap. */
  input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]), select, textarea { font-size: 18.5px !important; }
  input[type=checkbox], input[type=radio] { width: 22px !important; height: 22px !important; min-width: 22px; flex: 0 0 22px; }
  .row-move, .row-ins, .cutsheet-attach-btn, .ho-addrow, .ho-colmenu, .ho-blockmenu { min-height: 44px; min-width: 44px; }
  .ho-block-head input.ho-block-title, .ho-brow input.ho-brow-label, .ho-brow textarea { min-height: 44px; }
  .ho-brow { grid-template-columns: 110px minmax(0, 1fr) 44px; }
  .rfi-spec-row { flex-wrap: wrap; }
  .rfi-spec-row select { width: 100%; }
  .rfi-spec-row input { flex: 1 1 120px; width: auto; }
  /* bigger text on phones: titles wrap instead of being cut off; pickers use the width */
  .topbar h1 { white-space: normal; overflow-wrap: anywhere; }
  .cc-add-row select, .rfi-toolbar label, .rfi-toolbar select { width: 100%; }
  #projTodoList .wait-row { flex-wrap: wrap; }
  .om-field-grid label.fw-s { width: 161px; }
  .items-table .ir-row label.ir-st select { width: 228px; }
  .items-table-wrap { max-width: 100%; }
}
@media (max-width: 700px) {
  .field-grid > label, .field-grid > .field, .field-grid > .fw-m, .field-grid > .fw-l, .field-grid > .fw-xl, .field-grid > .fw-full,
  .field-grid > .pi-name, .field-grid > .pi-po, .field-grid > .pi-a1, .field-grid > .pi-a2, .field-grid > .pi-city, .fg-row > label, .fg-row > label.fw-l { width: 100% !important; }
  .field-grid > .fw-xs, .field-grid > .fw-s, .field-grid > .pi-num, .field-grid > .pi-status, .field-grid > .pi-st, .field-grid > .pi-zip { width: calc(50% - 6px) !important; }
  .field-grid > label:has(> input[type=checkbox]) { width: 100% !important; }
  .checkbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkbox-grid .chk-item { white-space: normal; }
  .ho-pair .ho-pair-label, .ho-pair .ho-pair-value { width: 100%; }
  .ho-pair-hint { margin-left: 0; }
}
.r2-err { color: var(--danger); } .r2-where { margin: 0 0 10px; }

/* Client Credentials, wide screen (handoff.js fitCredsLayout adds .ho-side only when it fits). */
#mainHandoffEditor.ho-side .editor-grid { display: grid; grid-template-columns: max-content max-content; grid-template-rows: auto 1fr; grid-template-areas: "details blocks" "stack blocks"; justify-content: start; align-items: start; }
#mainHandoffEditor.ho-side #hoDetailsCard { grid-area: details; }
#mainHandoffEditor.ho-side .editor-grid > .editor-stack { grid-area: stack; }
#mainHandoffEditor.ho-side #hoBlocksCard { grid-area: blocks; }
/* Bigger text (v1.3.0), Settings > My Account when the three boxes do not fit across: Two-Step Sign-In under
   Password, My Details beside both (no box alone on a second row). */
@media (min-width: 1310px) and (max-width: 1757px) {
  #stabAccount > .editor-grid { display: grid; grid-template-columns: max-content max-content; justify-content: start; align-items: start; }
  #stabAccount > .editor-grid > #acctEmailCard { grid-column: 2; grid-row: 1 / span 2; }
}

#rfiMidStack[hidden] { display: none; }

/* =====================================================================================
   v1.2.9 MOVABLE SECTIONS (board.js) -- the submittal and transmittal screens.
   One 12-column board as wide as the screen; each section a card spanning 3/4/6/8/9/12 columns
   (set by board.js, widened when a size would squeeze its fields). Cards in a row are the same height
   (grid rows stretch). Collapsed: only the header row. Only the wide tables span the board by default.
   ===================================================================================== */
.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: stretch; position: relative; }
.board > .sec { width: auto; max-width: none; min-width: 0; position: relative; }
.board > .sec[hidden] { display: none; }
.sec-head { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.editor-card .sec-head h2 { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; overflow: hidden; text-overflow: ellipsis; white-space: normal; overflow-wrap: break-word; }
.sec-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; margin-right: -8px; }
.sec-grip { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 5px; color: var(--slate-light); cursor: grab; font-size: 15px; letter-spacing: -3px; user-select: none; -webkit-user-select: none; touch-action: none; }
.sec-grip:hover { background: var(--sub); color: var(--navy); }
.sec-size, .sec-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; min-width: 26px; padding: 0 7px; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--slate); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sec-size:hover, .sec-toggle:hover, .sec-size[aria-expanded="true"] { border-color: var(--line); background: var(--field); color: var(--navy); }
.sec-size .sz { font-size: 15px; line-height: 1; }
.sec-size .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.sec-toggle { padding: 0; width: 26px; }
.sec-toggle .chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.sec.collapsed .sec-toggle .chev { transform: translateX(-1px) rotate(-45deg); }
.sec.collapsed { align-self: start; padding-top: 12px; padding-bottom: 12px; }
.sec.collapsed > .sec-head { margin: 0; padding: 0; border-bottom: 0; }
.sec.collapsed > :not(.sec-head) { display: none !important; }
.sec-resize { position: absolute; top: 8px; bottom: 8px; right: -8px; width: 13px; cursor: ew-resize; touch-action: none; z-index: 2; }
.sec-resize::after { content: ''; position: absolute; top: 50%; right: 5px; width: 3px; height: 36px; margin-top: -18px; border-radius: 2px; background: transparent; }
.sec:hover > .sec-resize::after, .sec.sec-resizing > .sec-resize::after { background: #9fb4d9; }
.sec.sec-resizing { outline: 2px dashed #9fb4d9; outline-offset: 2px; }
.sec.sec-dragging { opacity: 0.45; }
.sec-drop { position: absolute; z-index: 5; background: var(--navy); border-radius: 2px; pointer-events: none; }
.sec-drop[hidden] { display: none; }
.sec-ghost { position: fixed; z-index: 1100; pointer-events: none; background: var(--navy); color: #fff; padding: 5px 10px; border-radius: 6px; font-size: 14px; font-weight: 700; box-shadow: 0 6px 18px rgba(10,20,40,0.3); white-space: nowrap; }
body.board-dragging, body.board-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
body.board-resizing, body.board-resizing * { cursor: ew-resize !important; user-select: none !important; -webkit-user-select: none !important; }
.sec-menu { position: absolute; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); padding: 4px; display: flex; flex-direction: column; min-width: 190px; }
.sec-menu button { display: flex; align-items: center; gap: 6px; background: none; border: none; text-align: left; padding: 7px 10px; font: inherit; font-size: 15px; border-radius: 5px; cursor: pointer; color: var(--ink); }
.sec-menu button:hover:not(:disabled), .sec-menu button:focus-visible { background: #eef2fb; outline: none; }
.sec-menu button:disabled { color: #a0a8b4; cursor: default; }
.sec-menu .mk { width: 14px; flex: 0 0 14px; color: var(--navy); font-weight: 700; }
.sec-menu-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-light); padding: 6px 10px 2px; }
.sec-menu-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.board-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 10px; min-height: 24px; }
.board-msg { font-size: 14px; color: var(--danger); font-weight: 600; }
.board-msg:empty { display: none; }
.board-reset, .board-link { background: none; border: none; padding: 2px 4px; font: inherit; font-size: 14px; color: var(--slate-light); text-decoration: underline; cursor: pointer; }
.board-reset:hover { color: var(--navy); }
.board-link { color: var(--navy); font-weight: 600; }
/* Inside sections: things that must fit a narrow card. */
.board .checkbox-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 7px 14px; }
.board .checkbox-grid .chk-item { white-space: normal; align-items: flex-start; }
.board .checkbox-grid .chk-item input { margin-top: 2px; }
.board .attach-item { gap: 8px; }
.board .attach-item a { min-width: 0; overflow-wrap: anywhere; }
.board .revision-row { flex-wrap: wrap; gap: 4px 12px; }
.board .sh-meta-row { gap: 10px 24px; }
/* Line Items: the table fills its card; inputs grow with their columns (board.js tableColumns). */
.board .items-table-wrap { position: relative; }
.items-table.fit-cols { table-layout: fixed; }
.board .items-table.fit-cols input { width: 100%; padding-left: 5px; padding-right: 5px; }
.items-table th[data-col] { position: relative; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; overflow: hidden; text-overflow: ellipsis; }
.items-table th.col-dragging { opacity: 0.45; }
.col-resize { position: absolute; top: 0; right: 0; width: 9px; height: 100%; cursor: col-resize; touch-action: none; }
.col-resize::after { content: ''; position: absolute; top: 25%; bottom: 25%; right: 3px; width: 2px; border-radius: 1px; background: var(--line); }
.col-resize:hover::after { background: var(--navy); }
.col-drop { position: absolute; top: 0; width: 4px; background: var(--navy); border-radius: 2px; pointer-events: none; z-index: 3; }
/* Transmittal: Contents table across its card; the Project summary. */
.contents-wrap { width: 100%; }
.contents-table { width: 100%; }
.contents-table[hidden] { display: none; }
.contents-table td.ct-wrap { white-space: normal; min-width: 110px; }
.contents-table td.ct-title { min-width: 180px; }
.contents-table th.num, .contents-table td.num { text-align: right; }
.contents-table .cutsheet-status { display: inline; white-space: nowrap; }
.ct-rev { font-size: 13px; color: var(--slate); font-weight: 600; }
.field-static { margin-top: 9px; font-weight: normal; }
/* The titles that now name the project (transmittal screen, Transmittals list) get more room. */
#transmittalEditorTitle, #transmittalsTitle { max-width: 874px; }
/* A date box is as wide as a date (two side by side in a third of a 1366 screen). */
.field-grid > .fw-date { width: 144px; }
/* The submittal Status box fits its longest status ("Revise and Resubmit"). */
.field-grid > .sh-status { width: 204px; }
/* Distribution rows shrink with their card instead of running past its edge. */
.board .cc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.board .cc-row input { min-width: 0; width: 100%; }
.proj-sum .ps-name { font-size: 17.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; overflow-wrap: anywhere; }
.ps-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 12px; font-size: 15px; }
.ps-grid dt { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--slate-light); padding-top: 2px; }
.ps-grid dd { margin: 0; overflow-wrap: anywhere; }
.ps-team { display: flex; flex-direction: column; gap: 9px; margin: 2px 0 4px; }
.ps-member { font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.ps-role { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--slate-light); }
.ps-contact { color: var(--slate); }
.ps-none { display: block; margin: 0; }
@media (max-width: 900px) {
  .board { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .board > .sec { grid-column: 1 / -1 !important; }
  .sec-grip, .sec-resize, .col-resize { display: none !important; }
  .items-table th[data-col] { cursor: default; touch-action: auto; }
  .sec-head { margin-top: -6px; }
  .sec-size, .sec-toggle { min-height: 44px; min-width: 44px; }
  .sec-tools { gap: 4px; margin-right: -6px; }
  .sec.collapsed { padding-top: 6px; padding-bottom: 6px; }
  .sec-menu button { min-height: 44px; font-size: 17.5px; }
  .board-reset, .board-link { min-height: 44px; }
  .board .cc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .board .cc-row input[data-f="email"] { grid-column: 1 / 3; }
  .board .cc-row .row-remove { grid-row: 1 / 3; grid-column: 3; }
  /* the row tools are 44px tap targets here: give them 44px tracks (they used to overlap) */
  .reorder-col { grid-template-columns: repeat(3, 44px); }
}
@media (max-width: 700px) {
  .field-grid > .fw-date { width: calc(50% - 6px) !important; }
  .field-grid > .sh-status { width: 100% !important; }
  /* bigger text: a small field with a picker, and Short Name with its note, take the width */
  .field-grid > .fw-s:has(> select), .field-grid > label:has(> #setShortName) { width: 100% !important; }
}

/* ---------- v1.3.0: a line's review (under the line in Line Items) ---------- */
.items-table tr.item-sub td { padding: 0 6px 8px; border-bottom: 1px solid var(--line); }
.items-table tr.item-sub.prev-review td { padding-top: 2px; }
.items-table tr.item-sub.prev-review + tr.item-sub.item-review td { padding-top: 0; }
.items-table tbody tr:has(+ tr.item-sub) > td { border-bottom: none; }
.items-table tr.item-sub.prev-review:has(+ tr.item-review) td { border-bottom: none; }
.ir-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ir-label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--slate); }
.ir-comment { color: var(--ink); font-size: 15px; }
.ir-row label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--slate); margin: 0; }
.ir-row label.ir-st select { width: 218px; }
.ir-row label.ir-cm { flex: 1 1 320px; max-width: 874px; }
.ir-row label.ir-cm input { flex: 1; min-width: 0; }
.ir-by { white-space: nowrap; }
table.review-log td { vertical-align: top; }

/* ---------- v1.3.0: previews on the screens (pdf-viewer.js) ---------- */
body.pv-open { overflow: hidden; }
.pv-bg { position: fixed; inset: 0; background: rgba(15, 23, 38, 0.55); z-index: 900; display: flex; align-items: stretch; justify-content: center; padding: 18px; }
.pv-bg[hidden] { display: none; }
.pv { background: var(--card); border-radius: 12px; width: 100%; max-width: 1180px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.pv-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.pv-title { font-weight: 700; color: var(--navy); font-size: 17.5px; flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv-tools a.btn { text-decoration: none; }
.pv-tools [hidden] { display: none !important; }
.pv-zoom { display: inline-flex; align-items: center; gap: 6px; }
/* v1.3.2 (his list, item 3): "Leave out spec sheets" beside Print / Save as PDF */
.pv-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--ink); cursor: pointer; white-space: nowrap; margin-right: 4px; }
.pv-opt input { width: 17px; height: 17px; margin: 0; }
.pv-pct { min-width: 46px; text-align: center; font-size: 14.5px; color: var(--slate); }
.pv-body { flex: 1 1 auto; min-height: 0; overflow: auto; background: #d5d9e0; position: relative; }
.pv-body.pv-doc { overflow: hidden; }
.pv-frame { border: 0; display: block; width: 100%; height: 100%; background: #d5d5d5; }
.pv-pages { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; }
.pv-page { background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.25); max-width: none; }
.pv-img { display: block; margin: 16px auto; max-width: none; width: 100%; height: auto; background: #fff; }
.pv-msg { padding: 40px 20px; text-align: center; color: var(--slate); font-size: 16px; }
.pv-msg .btn { margin-top: 12px; display: inline-block; text-decoration: none; }
@media (max-width: 899px) {
  .pv-bg { padding: 0; }
  .pv { border-radius: 0; }
  .pv-tools { width: 100%; }
  .pv-title { white-space: normal; overflow-wrap: anywhere; }
}
/* Bigger text (v1.3.0), tablets 701-900px wide: fields use the phone's 18.5px text there but keep their own
   widths (two or three to a row), so each box is about 16% wider than on a desktop. */
@media (min-width: 701px) and (max-width: 900px) {
  .field-grid > label, .field-grid > .field, .field-grid > .fw-m, .fg-row > label { width: 278px; }
  .field-grid > .fw-xs { width: 104px; }
  .field-grid > .fw-s { width: 186px; }
  .field-grid > .fw-l, .fg-row > label.fw-l { width: 418px; }
  .field-grid > .fw-xl { width: 626px; }
  .field-grid > .fw-date { width: 168px; }
  .field-grid > .sh-status { width: 236px; }
  .field-grid > label:has(> #setShortName) { width: 232px; }
  .field-grid > label:has(> #gType) { width: 304px; }
  .field-grid > label:has(> #rGcNumber) { width: 170px; }
  .field-grid > label:has(> #rDateNeededBy) { width: 244px; }
  .field-grid > .pi-name { width: 241px; } .field-grid > .pi-num { width: 126px; } .field-grid > .pi-status { width: 132px; }
  .field-grid > .pi-po { width: 295px; } .field-grid > .pi-a1, .field-grid > .pi-city { width: 255px; } .field-grid > .pi-a2 { width: 239px; }
  .field-grid > .pi-st { width: 98px; } .field-grid > .pi-zip { width: 128px; }
  .om-field-grid label { width: 197px; }
  .om-field-grid label.fw-xs { width: 81px; }
  .om-field-grid label.fw-s { width: 181px; }
  .om-field-grid label.fw-l { width: 274px; }
  .om-field-grid label.fw-xl { width: 418px; }
  .ho-pair .ho-pair-label { width: 232px; }
  .ho-pair .ho-pair-value { width: 290px; }
  .ho-pair-hint { margin-left: 238px; }
}
/* Small phones (360px): an empty date box shows all of mm/dd/yyyy. */
@media (max-width: 380px) {
  .field-grid > .fw-date, .field-grid > label:has(> input[type=date]) { width: 100% !important; }
}

/* =====================================================================================
   v1.4.0 PROJECT FILES (files.js): the Files screen, its windows, Settings > Project Files, and on a phone the
   search on Home and Scan to PDF. Same text scale (16 / 14 / 12.5) and the same "only as wide as needed" rule:
   the folders box is 300px, the list box as wide as its columns.
   ===================================================================================== */
@media (min-width: 901px) { .phone-only { display: none !important; } }
.files-layout { display: flex; gap: 18px; align-items: flex-start; }
.files-side { display: flex; flex-direction: column; gap: 18px; flex: 0 0 300px; width: 300px; }
.files-folders-card { width: 100%; padding: 16px 12px 14px; }
.files-folders-card h2 { margin-left: 8px; margin-right: 8px; }
.files-list-card { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.folder-list { display: flex; flex-direction: column; gap: 2px; }
.fl-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 6px; padding: 7px 9px; font: inherit; font-size: 15.5px; color: var(--ink); cursor: pointer; }
.fl-item:hover { background: var(--field); border-color: var(--line); }
.fl-item.active { background: #d3dcec; border-color: var(--navy); color: var(--navy); font-weight: 600; }
.fl-item.fl-sub { padding-left: 26px; font-size: 15px; }
.fl-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fl-count { flex: 0 0 auto; min-width: 22px; text-align: right; font-size: 13.5px; color: var(--slate); }
.fl-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: var(--sub); color: var(--slate); font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.fl-head { margin: 12px 9px 4px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-light); }
.fl-sub-line { display: block; font-size: 13.5px; font-weight: normal; color: var(--slate); }
.files-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.files-head h2 { margin: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
.files-toolbar { align-items: center; }
.files-toolbar input[type=search] { width: 300px; font-family: inherit; font-size: 15.5px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.files-toolbar [hidden] { display: none !important; }
.f-check { display: flex; align-items: center; gap: 7px; font-size: 15px; color: var(--ink); cursor: pointer; }
.f-check input { margin: 0; }
.f-check[hidden] { display: none; }
.files-table td.f-name { white-space: normal; min-width: 180px; max-width: 360px; overflow-wrap: anywhere; }
.files-table td.f-desc { white-space: normal; min-width: 140px; max-width: 320px; overflow-wrap: anywhere; }
.files-table td.f-folder, .files-table td.f-from { white-space: normal; max-width: 240px; overflow-wrap: anywhere; font-size: 14px; color: var(--slate); }
.files-table .f-size { text-align: right; }
.files-table .f-tick { width: 36px; padding-right: 2px; }
.files-table .f-tick input { width: 17px; height: 17px; margin: 0; vertical-align: middle; }
.files-table a { color: var(--navy); font-weight: 600; text-decoration: none; }
.files-table a:hover { text-decoration: underline; }
.files-table tr.f-sup td { color: var(--slate-light); }
.files-table tr.f-sup a { color: var(--slate); font-weight: normal; }
#fTable[hidden] { display: none; }
.files-list-card.f-dropping { outline: 3px dashed var(--navy); outline-offset: -3px; background: #dfe6f2; }
.f-note { color: var(--ink); font-size: 14.5px; padding: 7px 10px; border-radius: 6px; background: var(--field); border: 1px solid var(--line); max-width: 760px; }
.f-note.f-note-err { color: var(--danger); }
.f-note-flash { color: var(--ink); }
.f-note > div + div { margin-top: 4px; }
.f-note .link-btn, .modal .link-btn { background: none; border: 0; padding: 0 2px; color: var(--navy); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.f-err { color: var(--danger); font-weight: 600; }
.modal-hold-note { display: block; color: #a35a00; font-weight: 600; font-size: 14.5px; margin: 4px 0 10px; }
.modal-hold-note.ss-flash { animation: ssflash 0.9s ease 2; }
/* uploads: one line per file, its progress under it */
.up-list { max-height: 40vh; overflow-y: auto; margin-bottom: 6px; }
.up-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px 12px; align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.up-row:last-child { border-bottom: 0; }
.up-name { overflow-wrap: anywhere; color: var(--ink); }
.up-size { color: var(--slate); white-space: nowrap; }
.up-state { font-weight: 600; white-space: nowrap; color: var(--ink); }
.up-row.up-bad .up-state, .up-row.up-big .up-state, .up-row.up-empty .up-state { color: var(--danger); white-space: normal; }
.up-row.up-ok .up-state { color: var(--ok); }
.up-bar { display: block; grid-column: 1 / -1; height: 7px; border-radius: 4px; background: #cfd5de; overflow: hidden; }
.up-bar[hidden] { display: none; }
.up-bar > span { display: block; height: 100%; width: 0; background: var(--navy); transition: width 0.2s; }
.up-msg { display: block; min-height: 1em; margin: 6px 0 10px; font-size: 14.5px; color: var(--ink); }
/* a zip's line: unpacking progress, then (when something was skipped or left out) what the zip did, under it */
.up-row.up-unpack .up-state { color: var(--ink); }
.up-zipres { grid-column: 1 / -1; padding: 2px 0 0 12px; }
.up-zipres .zip-result p { margin: 2px 0; }
.zip-one + .zip-one { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.zip-result { font-size: 15px; }
.zip-result details { margin: 6px 0; }
.zip-result summary { cursor: pointer; font-weight: 600; }
.zip-list { max-height: 200px; overflow-y: auto; margin: 6px 0; padding-left: 22px; font-size: 14px; overflow-wrap: anywhere; }
/* the file window */
.fd-title { overflow-wrap: anywhere; }
.fd-meta { display: block; margin: -6px 0 12px; font-size: 13.5px; overflow-wrap: anywhere; }
.fd-revs .table-wrap { margin-top: 4px; }
.fd-revs td { padding: 7px 10px; }
.fd-revs td.f-name { white-space: normal; max-width: 220px; overflow-wrap: anywhere; }
.fd-revs tr.fd-this td { background: #d3dcec; }
.fd-newrev { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 12px; }
.fd-newrev label { display: block; font-size: 14px; font-weight: 600; color: var(--slate); }
.fd-newrev label input { display: block; margin-top: 5px; }
.fd-nr-no input { width: 110px; }
.fd-newrev .up-bar { flex: 1 1 100%; }
/* Settings > Project Files */
.ftpl-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.ftpl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 8px 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); }
.ftpl-row.ftpl-sub { margin-left: 28px; }
.ftpl-name { font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.ftpl-tags { flex: 1 1 auto; }
.ftpl-tags .fl-tag:first-child { margin-left: 0; }
.ftpl-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.ftpl-mv { min-width: 36px; padding-left: 9px; padding-right: 9px; }
/* phone: the search on Home */
.home-search input[type=search] { width: 100%; font-family: inherit; min-height: 50px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.search-results { display: flex; flex-direction: column; gap: 14px; }
.search-results:not(:empty) { margin-top: 12px; }
.sr-group { display: flex; flex-direction: column; gap: 6px; }
.sr-head { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-light); }
.sr-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 54px; text-align: left; background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: inherit; color: var(--ink); cursor: pointer; }
.sr-row:active { border-color: var(--navy); background: #dfe6f2; }
.sr-main { font-size: 17.5px; font-weight: 600; overflow-wrap: anywhere; max-width: 100%; }
.sr-sub { font-size: 15px; color: var(--slate); overflow-wrap: anywhere; max-width: 100%; }
.sr-rev { font-size: 14px; font-weight: 600; color: var(--slate); }
.sr-none { display: block; padding: 4px 2px; font-size: 15.5px; }
/* phone: Scan to PDF */
.scan-pages { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.scan-page { margin: 0; width: 132px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.scan-page img { width: 132px; height: 170px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.scan-page figcaption { font-size: 14px; color: var(--slate); }
.scan-btns { display: flex; gap: 4px; }
.scan-btns .btn { min-width: 40px; padding-left: 8px; padding-right: 8px; }
.scan-none { display: block; margin: 4px 0; font-size: 15px; }
.scan-add { margin: 0 0 14px; }
@media (max-width: 900px) {
  .home-search { margin-bottom: 12px; }
  .files-layout { flex-direction: column; gap: 12px; }
  .files-side { flex: 1 1 auto; width: 100%; gap: 12px; }
  #filesHandoffCard { order: -1; } /* the client's passwords etc. first: the reason he opens a project on the phone */
  .files-list-card { width: 100% !important; }
  #mainFiles.f-in-folder .files-side { display: none; }
  #mainFiles:not(.f-in-folder) .files-list-card { display: none; }
  .folder-list { gap: 6px; }
  .fl-item { min-height: 54px; padding: 10px 12px; font-size: 17.5px; border-color: var(--line); background: var(--field); }
  .fl-item.fl-sub { width: calc(100% - 22px); margin-left: 22px; padding-left: 12px; font-size: 17px; }
  .fl-count { font-size: 15.5px; }
  .fl-head { margin: 10px 2px 2px; font-size: 13px; }
  .files-head h2 { font-size: 16px; }
  .files-toolbar input[type=search] { width: 100%; min-height: 46px; }
  .f-check { font-size: 16.5px; min-height: 44px; }
  /* the list as lines of text (no sideways scrolling): the tick, the name and what is known about it, Details */
  .files-table, .files-table tbody { display: block; width: 100%; }
  .files-table thead { display: none; }
  .files-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 3px 12px; padding: 11px 8px; border-bottom: 1px solid var(--line); }
  .files-table tbody tr:last-child { border-bottom: 0; }
  .files-table td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; max-width: none; grid-column: 2; font-size: 15px; color: var(--slate); }
  .files-table td.f-tick { grid-column: 1; grid-row: 1 / span 6; align-self: center; width: auto; }
  .files-table td.f-act { grid-column: 3; grid-row: 1 / span 6; align-self: center; }
  .files-table td.f-name { font-size: 17.5px; color: var(--ink); }
  .files-table td.f-name a { display: inline-block; padding: 2px 0; }
  .files-table td.f-size, .files-table td.f-from { display: none; }
  .files-table td:empty { display: none; }
  .files-table td.f-rev:not(:empty)::before { content: 'Rev '; }
  .files-table td.f-desc { color: var(--ink); }
  .scan-page, .scan-page img { width: calc((100vw - 76px) / 2); }
  .scan-page img { height: calc((100vw - 76px) / 2 * 1.29); }
  .scan-btns .btn { min-width: 44px; }
  .ftpl-row.ftpl-sub { margin-left: 16px; }
  .ftpl-mv { min-width: 44px; }
  .fd-newrev label, .fd-nr-file input { width: 100%; }
  .up-row { grid-template-columns: minmax(0, 1fr) auto; }
  /* tap targets: the tick's whole cell ticks it; the links in the note above the list */
  .files-table td.f-tick { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: -8px; }
  .f-note .link-btn { min-height: 44px; padding: 0 8px; }
  /* the file window's revisions: one block per revision (no sideways scrolling in the window) */
  .fd-revs .table-wrap { overflow-x: visible; }
  .fd-revs table, .fd-revs tbody { display: block; width: 100%; }
  .fd-revs tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 9px 8px; border-bottom: 1px solid var(--line); }
  .fd-revs tbody tr:last-child { border-bottom: 0; }
  .fd-revs td { display: block; padding: 0; border: 0; white-space: normal; max-width: none !important; }
  .fd-revs td.f-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
}

/* v1.4.0 chat 3: Scan to PDF -- pictures dropped on the window (desktop), and the camera IN the page (phone / tablet):
   the photo never goes through the phone's camera app, so nothing is kept in the phone's photos. */
.modal.f-dropping { outline: 3px dashed var(--navy); outline-offset: -6px; }
.cam-view { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; }
.cam-view video { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.cam-msg { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 16px; right: 16px; margin: 0; color: #fff; font-size: 17px; line-height: 1.4; text-align: center; text-shadow: 0 1px 3px #000; }
.cam-msg:empty { display: none; }
.cam-bar { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: #000; }
.cam-done { justify-self: start; min-height: 48px; min-width: 92px; font-size: 17px; }
.cam-shutter { width: 76px; height: 76px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 0 0 4px #000, 0 0 0 8px #fff; cursor: pointer; padding: 0; }
.cam-shutter:disabled { opacity: 0.35; cursor: default; }
.cam-count { justify-self: end; color: #fff; font-size: 16px; text-align: right; }
.cam-view.cam-flash video { animation: camflash 0.25s ease; }
@keyframes camflash { from { opacity: 0.15; } to { opacity: 1; } }
.cam-view.cam-failed .cam-shutter { visibility: hidden; }

/* ---------- v1.4.0 chat 6: on site (check-in) ---------- */
.nav-btn[hidden], .sp-switch[hidden], .sp-label[hidden], .sp-name[hidden], .onsite-box[hidden], .onsite-on[hidden] { display: none !important; }
/* the On Site box: top of the menu (a phone: top of the opened menu) */
.onsite-box { margin: 0 0 18px; }
.onsite-on { background: rgba(46, 160, 90, 0.16); border: 1px solid rgba(110, 210, 140, 0.5); border-radius: 8px; padding: 10px 12px; }
.onsite-on .sp-label { color: #b8e8c8; }
.onsite-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4cd07d; margin-right: 6px; vertical-align: 1px; }
.onsite-name { display: block; width: 100%; background: none; border: 0; padding: 0; margin: 4px 0 2px; text-align: left; color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.onsite-name:hover { text-decoration: underline; }
body.is-field .onsite-name { cursor: default; }
body.is-field .onsite-name:hover { text-decoration: none; }
.onsite-since { font-size: 13px; color: #c9d6ea; margin-bottom: 8px; }
.onsite-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.onsite-btns .sp-switch { font-size: 14px; color: #fff; border-color: rgba(255,255,255,0.4); }
.onsite-in { width: 100%; font-size: 14px; padding: 8px 10px; color: #fff; }
/* a Field Tech: the On Site box, then their project's menu, then Settings */
body.is-field .sidebar-project { order: 1; margin-top: 0; padding-top: 0; border-top: 0; }
body.is-field .nav-main { order: 2; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); }
body.is-field .sidebar-foot { order: 3; }
/* "Which project are you at?" */
.ci-note { font-size: 16px; color: var(--ink); background: var(--field); border-left: 3px solid var(--navy); padding: 9px 12px; margin: 0 0 14px; border-radius: 4px; }
.ci-note[hidden] { display: none; }
#ciSearch { width: 100%; margin-bottom: 12px; font-family: inherit; font-size: 16px; padding: 10px 12px; min-height: 44px; border-radius: 6px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.ci-list { display: flex; flex-direction: column; gap: 8px; }
.ci-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 58px; padding: 10px 14px; text-align: left; font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.ci-row:hover:not(:disabled) { border-color: var(--navy); background: #eef2fb; }
.ci-row:disabled { opacity: 0.6; cursor: progress; }
.ci-row.ci-here { border-color: var(--ok); }
.ci-name { font-size: 17px; font-weight: 600; color: var(--navy); }
.ci-sub { font-size: 14.5px; color: var(--slate); }
.ci-head { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate); margin: 10px 0 0; }
.ci-more { align-self: flex-start; margin-top: 4px; }
.ci-msg { color: var(--danger); min-height: 1em; }
/* Site Visits (Overview & Team, office) */
.visits-table td.v-time { white-space: nowrap; }
.visits-table td.v-time .hint { white-space: normal; }
.proj-visits-card[hidden] { display: none; }
@media (max-width: 900px) {
  .onsite-box { margin: 4px 0 12px; }
  .onsite-btns .sp-switch, .onsite-in { min-height: 44px; font-size: 16px; }
  .onsite-name { min-height: 44px; font-size: 18px; }
  .visits-table td.v-time { white-space: normal; }
  #ciSearch { min-height: 48px; }
  .ci-row { min-height: 64px; }
  .ci-name { font-size: 19px; }
  .ci-sub { font-size: 16px; }
}
.ho-check[hidden] { display: none; }

/* ---------- v1.4.0 chat 7: Photos (photos.js) ---------- */
/* the photos card grows with its photos, never past 1100px (his rule: no box wider than its content needs) */
.photos-card { flex: 1 1 auto; min-width: 0; max-width: 1100px; }
.ph-toolbar { align-items: center; }
.ph-toolbar #phSearch { width: 320px; }
.ph-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 12px; }
.ph-f { display: flex; align-items: center; gap: 7px; font-size: 15px; color: var(--ink); }
.ph-f select, .ph-f input { font: inherit; font-size: 15px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.ph-f select { max-width: 220px; }
.ph-tagpick { position: relative; }
.ph-tagmenu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 220px; max-height: 340px; overflow-y: auto; padding: 8px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(20,30,50,0.18); display: flex; flex-direction: column; gap: 6px; }
.ph-tagmenu[hidden] { display: none; }
.ph-tagmenu .f-check { min-height: 30px; }
.btn.ph-on { background: #d3dcec; font-weight: 600; }
.ph-clear[hidden], .ph-visit[hidden], .ph-bulk[hidden] { display: none !important; }
.ph-visit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; }
.ph-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: #d3dcec; border: 1px solid var(--navy); }
.ph-selcount { font-weight: 600; color: var(--navy); margin-right: 6px; }
.ph-bulk .ph-bulk-del { margin-left: 14px; }
.ph-day { margin: 0 0 18px; }
.ph-day-head { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.ph-day-n { font-size: 14px; font-weight: normal; color: var(--slate); margin-left: 6px; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, 184px); gap: 12px; }
.ph-tile { position: relative; width: 184px; }
.ph-open { display: block; position: relative; width: 184px; height: 184px; padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #b8c0cc; cursor: zoom-in; }
.ph-open img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-open:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.ph-tile.ph-ticked .ph-open { outline: 3px solid var(--navy); outline-offset: 2px; }
.ph-nothumb { display: flex; align-items: center; justify-content: center; height: 100%; padding: 8px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--sub); }
.ph-badge { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 10px; background: rgba(8,42,102,0.86); color: #fff; font-size: 12.5px; font-weight: 600; }
.ph-tick { position: absolute; top: 6px; left: 6px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: rgba(255,255,255,0.88); cursor: pointer; }
.ph-tick input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.ph-cap { display: flex; justify-content: space-between; gap: 6px; margin-top: 4px; font-size: 13.5px; color: var(--slate); }
.ph-cap-room { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.ph-cap-time { flex: 0 0 auto; }
.ph-cap-note { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-more[hidden], #phMoreBtn[hidden] { display: none; }
.photos-card.f-dropping { outline: 3px dashed var(--navy); outline-offset: -3px; background: #dfe6f2; }
.ph-room-acts { margin: 10px 8px 0; }
.ptag-row .hint { flex: 1 1 auto; }
/* windows */
.ph-newroom { display: flex; gap: 8px; margin-top: 6px; }
.ph-newroom[hidden] { display: none; }
.ph-newroom input { min-width: 0; flex: 1 1 auto; }
.ph-newroom input.fw-xs { flex: 0 0 110px; width: 110px; }
.ph-tagchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.ph-chip { display: inline-flex; cursor: pointer; }
.ph-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ph-chip span { display: inline-block; padding: 5px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--field); font-size: 14.5px; color: var(--ink); }
.ph-chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.ph-chip input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
.ph-chip-ro { cursor: default; }
.ph-tagchecks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ph-uplist .up-row { grid-template-columns: minmax(0, 1fr) auto auto 36px; }
.ph-uprow.ph-st-done .up-state { color: var(--ok); }
.ph-uprow.ph-st-dup .up-state, .ph-uprow.ph-st-skip .up-state { color: var(--slate); white-space: normal; }
.ph-uprow.ph-st-fail .up-state { color: var(--danger); white-space: normal; }
.ph-batch { margin-top: 10px; }
.phv-label { font-size: 14px; font-weight: 600; color: var(--slate); margin: 6px 0 2px; }
.ph-roomrows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ph-roomrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 8px 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); }
.ph-rr-name { flex: 1 1 auto; font-weight: 600; overflow-wrap: anywhere; }
.ph-roles { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 8px; }
.ph-pickgrid { display: grid; grid-template-columns: repeat(auto-fill, 128px); gap: 10px; max-height: 50vh; overflow-y: auto; margin-bottom: 8px; }
.ph-pick { display: flex; flex-direction: column; gap: 3px; width: 128px; padding: 3px; border: 2px solid transparent; border-radius: 6px; background: none; font: inherit; cursor: pointer; text-align: left; }
.ph-pick img, .ph-pick .ph-nothumb { width: 120px; height: 120px; object-fit: cover; border-radius: 4px; }
.ph-pick.ph-picked { border-color: var(--navy); background: #d3dcec; }
.ph-pick-cap { font-size: 13px; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the viewer: full screen, above the menu, below the windows (a window opened from it shows over it) */
body.phv-on { overflow: hidden; }
.phv { position: fixed; inset: 0; z-index: 48; display: flex; flex-direction: column; background: #10161f; color: #e8edf5; }
.phv-top { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; background: #0b1018; }
.phv-pos { font-size: 15px; color: #c9d4e4; }
.phv-zoomnote { font-size: 14px; color: #9fb3cf; flex: 1 1 auto; }
.phv-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.phv .btn.subtle { background: #1c2533; color: #e8edf5; border-color: #3a4a63; }
.phv .btn.subtle:hover { background: #26324a; }
.phv .phv-zb { min-width: 42px; font-size: 18px; font-weight: 700; padding-top: 4px; padding-bottom: 4px; }
.phv-body { flex: 1 1 auto; min-height: 0; display: flex; }
.phv-stage { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; outline: none; cursor: zoom-in; }
.phv-stage.phv-zoomed { cursor: grab; }
.phv-pan { flex: 0 0 auto; transform-origin: 50% 50%; will-change: transform; }
.phv-pan[hidden] { display: none; }
.phv-img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.phv-msg { position: absolute; top: 14px; left: 0; right: 0; margin: 0; text-align: center; font-size: 15.5px; color: #fff; text-shadow: 0 1px 3px #000; pointer-events: none; }
.phv-msg:empty { display: none; }
.phv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 72px; border: 0; border-radius: 8px; background: rgba(15,22,32,0.55); color: #fff; font-size: 44px; line-height: 1; cursor: pointer; }
.phv-nav:hover { background: rgba(15,22,32,0.8); }
.phv-nav[hidden] { display: none; }
.phv-prev { left: 10px; }
.phv-next { right: 10px; }
.phv-panel { flex: 0 0 360px; width: 360px; overflow-y: auto; padding: 16px 18px 24px; background: var(--card); color: var(--ink); border-left: 1px solid #2a3547; }
.phv-panel[hidden], .phv.phv-nopanel .phv-panel { display: none; }
.phv-taken { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.phv-edit label, .phv-ro > div { display: block; font-size: 14px; }
.phv-edit label { font-weight: 600; color: var(--slate); margin-bottom: 10px; }
.phv-edit select, .phv-edit textarea, .phv-edit input[type=date], .phv-edit input[type=text] { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 15.5px; font-weight: normal; padding: 7px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.phv-edit .ph-newroom input { margin-top: 0; }
.phv-edit label.fw-m { width: 200px; }
.phv-actions { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.phv-ro { font-size: 15.5px; margin-top: 10px; }
.phv-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.phv-pair { margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; }
.phv-pair-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.phv-facts { font-size: 14px; color: var(--slate); display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.phv-del { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.phv-cmp { position: absolute; inset: 0; display: flex; gap: 10px; padding: 12px 12px 64px; }
.phv-cmp[hidden] { display: none; }
.phv-cmp-one { flex: 1 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.phv-cmp-one figcaption { font-size: 15px; font-weight: 700; letter-spacing: 0.5px; color: #fff; }
.phv-cmp-one figcaption span { font-weight: normal; letter-spacing: 0; color: #c9d4e4; margin-left: 6px; }
.phv-cmp-one img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; }
.phv-cmp-back { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); }
/* Take Photos: the room the next photos go to, and the flash, over the camera picture */
.cam-top { position: absolute; top: calc(52px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; pointer-events: none; }
.cam-room { padding: 5px 12px; border-radius: 14px; background: rgba(0,0,0,0.55); color: #fff; font-size: 16px; }
.cam-flashbtn { pointer-events: auto; min-height: 44px; }
.cam-flashbtn[hidden] { display: none; }
#tpCamView .cam-count { white-space: pre-line; }
@media (max-width: 1500px) {
  .ph-grid { grid-template-columns: repeat(auto-fill, 168px); }
  .ph-tile, .ph-open { width: 168px; }
  .ph-open { height: 168px; }
}
@media (max-width: 900px) {
  #phRoomsCard { display: none; }
  .photos-card { width: 100% !important; max-width: none; }
  .ph-toolbar { gap: 8px; }
  .ph-toolbar #phRoomSel { width: 100%; min-height: 48px; font: inherit; font-size: 17px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
  .ph-toolbar #phSearch { width: 100%; min-height: 46px; }
  .ph-filters { display: none; }
  .ph-filters.ph-open, .ph-filters.ph-filtered { display: flex; }
  .ph-f { width: 100%; justify-content: space-between; font-size: 16.5px; }
  .ph-f select, .ph-f input { min-height: 44px; font-size: 16.5px; flex: 0 1 62%; max-width: none; }
  .ph-tagpick, .ph-tagpick .btn { width: 100%; }
  .ph-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .ph-tile, .ph-open { width: 100%; }
  .ph-open { height: auto; aspect-ratio: 1 / 1; border-radius: 3px; }
  .ph-cap, .ph-cap-note, .ph-tick { display: none; }
  .ph-day-head { font-size: 16.5px; }
  .ph-bulk { position: sticky; bottom: 8px; z-index: 5; }
  .ph-bulk .btn { min-height: 44px; }
  .ph-bulk .ph-bulk-del { margin-left: 0; }
  .ph-pickgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-pick { width: 100%; }
  .ph-pick img, .ph-pick .ph-nothumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .ph-chip span { padding: 9px 14px; font-size: 16px; }
  .phv-top { padding: 8px 10px; gap: 6px 8px; }
  .phv-zoomnote { display: none; }
  .phv .phv-zb { display: none; }
  .phv-tools .btn, .phv-close { min-height: 44px; }
  .phv-body { flex-direction: column; }
  .phv-nav { display: none; }
  /* the details as a sheet over the bottom of the photo */
  .phv-panel { position: absolute; left: 0; right: 0; bottom: 0; flex: none; width: auto; max-height: 62dvh; border-left: 0; border-top: 1px solid #2a3547; border-radius: 12px 12px 0 0; padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); z-index: 2; }
  .phv-edit select, .phv-edit textarea, .phv-edit input[type=date], .phv-edit input[type=text] { min-height: 44px; font-size: 16.5px; }
  .phv-edit label.fw-m { width: 100%; }
  .phv-cmp { flex-direction: column; }
  .sr-photo { flex-direction: row; align-items: center; gap: 12px; }
}
.sr-photo { flex-direction: row; align-items: center; gap: 12px; }
.sr-thumb { flex: 0 0 auto; width: 64px; height: 64px; object-fit: cover; border-radius: 4px; background: var(--sub); }
.sr-ptext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* v1.4.0 chat 7 (review): what a tech typed for a photo that could not be saved, shown to copy */
.ci-lost-note { display: block; width: 100%; margin: 4px 0 12px; font: inherit; font-size: 15.5px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--field); color: var(--ink); resize: vertical; }
/* phone: tap targets 44px+, text 16px+ (his rule) */
@media (max-width: 900px) {
  .ph-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; font-size: 16.5px; }
  .ph-tagmenu .f-check { min-height: 44px; font-size: 16.5px; }
  #tpInfo, #tpMsg, #apMsg, #apSum, #phCount, #phNote, .ph-visit, .phv-facts, .phv-label, .ph-day-n, .phv-pair { font-size: 16px; }
  .ph-toolbar .btn, .ph-filters .btn, .ph-bulk .btn, #mainPhotos .topbar .btn { font-size: 16px; }
  .ph-badge { font-size: 14px; }
  .ph-uplist .up-row { font-size: 16px; }
}

/* ======================= v1.4.0 chat 8: the markup editor (markup.js) =======================
   Full screen like the photo viewer (z 49: above the viewer, under the windows). Tools on the left on a computer, along
   the bottom on a phone; the picture / page in the middle, the marks drawn on it as SVG. */
.mku { position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column; background: #10161f; color: #e8edf5; }
.mku-top { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; background: #0b1018; }
.mku-title { flex: 1 1 160px; min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mku-pager, .mku-zoom, .mku-save { display: flex; align-items: center; gap: 8px; }
.mku-pager[hidden], .mku-save[hidden] { display: none; }
.mku-pager span { font-size: 15px; color: #c9d4e4; white-space: nowrap; }
.mku .btn.subtle { background: #1c2533; color: #e8edf5; border-color: #3a4a63; }
.mku .btn.subtle:hover { background: #26324a; }
.mku .btn:disabled { opacity: 0.45; }
.mku .mku-zb, .mku .mku-pg { min-width: 42px; font-size: 18px; font-weight: 700; padding-top: 4px; padding-bottom: 4px; }
.mku .save-state { font-size: 14px; min-width: 70px; text-align: right; color: #c9d4e4; }
.mku .save-state.ss-dirty { color: #ffd27a; }
.mku-body { flex: 1 1 auto; min-height: 0; display: flex; }
.mku-tools { flex: 0 0 184px; width: 184px; overflow-y: auto; padding: 12px; background: #151d29; border-right: 1px solid #2a3547; display: flex; flex-direction: column; gap: 14px; }
.mku-tools[hidden] { display: none; }
.mku-group { display: flex; flex-wrap: wrap; gap: 6px; }
.mku-group[hidden] { display: none; }
.mku-tool, .mku-opt { flex: 1 1 74px; min-height: 40px; padding: 6px 8px; border-radius: 6px; border: 1px solid #3a4a63; background: #1c2533; color: #e8edf5; font: inherit; font-size: 15px; cursor: pointer; }
.mku-tool:hover, .mku-opt:hover { background: #26324a; }
.mku-tool[aria-pressed="true"], .mku-opt[aria-pressed="true"] { background: #e8edf5; color: #10161f; border-color: #e8edf5; font-weight: 700; }
.mku-opt[hidden] { display: none; }
.mku-del { color: #ffb4b4; }
.mku-colors { gap: 8px; }
.mku-color { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #3a4a63; background: var(--c); cursor: pointer; padding: 0; }
.mku-color[aria-pressed="true"] { outline: 3px solid #e8edf5; outline-offset: 2px; }
.mku-tools.mku-off, .mku-tools.mku-busy { opacity: 0.4; pointer-events: none; }
.mku-hint { margin: 0; font-size: 14px; line-height: 1.4; color: #9fb3cf; }
.mku-stage { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; touch-action: none; user-select: none; outline: none; cursor: crosshair; }
.mku-stage[data-tool="move"], .mku-ro .mku-stage { cursor: grab; }
.mku-stage[data-tool="text"] { cursor: text; }
.mku-pan { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; background: #fff; box-shadow: 0 2px 18px rgba(0,0,0,0.5); }
.mku-base { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.mku-base[hidden], .mku-detail[hidden] { display: none; }
.mku-detail { position: absolute; display: block; pointer-events: none; }
.mku-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mku-selbox { fill: none; stroke: #1e90ff; }
.mku-msg { position: absolute; top: 14px; left: 0; right: 0; margin: 0; text-align: center; font-size: 15.5px; color: #fff; text-shadow: 0 1px 3px #000; pointer-events: none; }
.mku-msg:empty { display: none; }
.mku-foot { flex: 0 0 auto; margin: 0; padding: 7px 14px; font-size: 14px; color: #c9d4e4; background: #0b1018; }
.mku-foot[hidden] { display: none; }
.mk-ask { font-size: 15.5px; }
.mku-sizes-pick { display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 900px) {
  .mku-top { padding: 8px 10px; gap: 6px 8px; }
  .mku-title { flex-basis: 100%; order: -1; font-size: 15px; }
  .mku .btn { min-height: 44px; }
  .mku-zoom { display: none; }
  .mku-body { flex-direction: column-reverse; }
  /* the tools along the bottom, one row that scrolls sideways */
  .mku-tools { flex: 0 0 auto; width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 10px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid #2a3547; }
  .mku-group { flex-wrap: nowrap; flex: 0 0 auto; }
  .mku-tool, .mku-opt { flex: 0 0 auto; min-height: 44px; font-size: 16px; }
  .mku-color { width: 40px; height: 40px; flex: 0 0 auto; }
  .mku-hint { display: none; }
  .mku-foot { font-size: 16px; }
}

/* v1.4.0: the cut sheet in the one markup tool -- Insert / Delete Page, the line item beside the page (v1.3.2, his list
   item 1: Type, Part#, Color, Description, Location, Notes), and the More Options window */
.mku-pagetools { display: flex; align-items: center; gap: 8px; }
.mku-pagetools[hidden] { display: none; }
.mku-line { flex: 0 0 270px; width: 270px; overflow-y: auto; padding: 14px 16px; background: #151d29; border-left: 1px solid #2a3547; }
.mku-line[hidden] { display: none; }
.mku-line-h { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #e8edf5; }
.mku-line-rows { display: flex; flex-direction: column; gap: 10px; }
.mku-line-lb { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9fb3cf; }
.mku-line-v { font-size: 16px; line-height: 1.35; color: #e8edf5; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.35em; }
.mku-line-row[data-f="type"] .mku-line-v, .mku-line-row[data-f="part"] .mku-line-v { font-weight: 700; }
.mku-mo { display: flex; flex-direction: column; gap: 12px; }
.mku-mo .hint { margin: 0; }
.mku-mo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 15px; font-weight: 600; color: var(--slate); }
.mku-mo-row > span { flex: 0 0 13em; }
.mku-mo-row input[type=range] { flex: 1 1 140px; min-width: 0; }
.mku-mo-row input[type=color] { width: 52px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.mku-mo-row select { font-size: 15.5px; padding: 5px 8px; }
.mku-mo-row output { flex: 0 0 3.6em; text-align: right; font-weight: 400; color: var(--slate-light); }
.mku-mo-pair { display: flex; flex-direction: column; gap: 8px; }
.mku-mo-ticks { display: flex; flex-wrap: wrap; gap: 10px 18px; }
@media (max-width: 900px) {
  .mku-line { flex: 0 0 auto; width: auto; max-height: 22vh; padding: 8px 12px; border-left: 0; border-bottom: 1px solid #2a3547; }
  .mku-line-h { display: none; }
  .mku-line-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
  .mku-line-row { display: contents; }
  .mku-mo-row > span { flex: 1 1 100%; }
}
/* markup on the photo viewer and the photo tiles, and on a file's line */
.phv-mk { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.phv-mk[hidden] { display: none; }
.phv-pan { position: relative; }
.f-mk { margin-left: 6px; }
.fd-mk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 10px; }
.fd-mk .hint { font-size: 14px; }
.phv-mkdl { margin: 12px 0; }

/* v1.4.0 chat 9: the Photo Report window (photos.js openReport) */
.pr-show-h { margin-top: 12px; }
.pr-show { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 12px; }
#modal #prBar { margin: 8px 0 0; }

/* v1.4.0 item 10a: Delete Project (app/screens/project-delete.js) */
.pd-lead { font-size: 15.5px; margin: 0 0 10px; }
.pd-list { margin: 0 0 12px 20px; font-size: 15.5px; }
.pd-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; max-height: 52vh; overflow: auto; margin: 0 0 10px; }
.pd-tile { margin: 0; }
.pd-tile img, .pd-noimg { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--sub); }
.pd-noimg { font-size: 12px; overflow: hidden; padding: 4px; }
.pd-tile figcaption { font-size: 12px; color: var(--slate); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* v1.4.0 item 10: sign-off -- notes and signatures on a project file (markup.js kind 'signoff', signature-pad.js) */
.mku-signoff .mku-style { display: none !important; }
.f-signed { margin-left: 6px; }
.fd-sign { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 10px; }
.fd-sign .hint { font-size: 14px; flex: 1 1 100%; }
.sp-me { align-self: end; margin-bottom: 2px; }
.sp-pad { position: relative; max-width: 640px; border: 1px solid #c3cad5; border-radius: 6px; background: #fff; }
.sp-pad canvas { display: block; width: 100%; touch-action: none; cursor: crosshair; }
.sp-baseline { position: absolute; left: 7%; right: 4%; bottom: 24%; border-bottom: 1.5px solid #9aa3af; pointer-events: none; }
.sp-x { position: absolute; left: 3%; bottom: 24%; font-size: 20px; line-height: 1; color: #9aa3af; pointer-events: none; }

/* v1.4.0 item 11: the no-signal camera -- the photos kept on the phone (Photos screen, Take Photos) and the no-signal
   page (offline.html: what the program opens to when the phone cannot reach the server). */
.ph-held { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #fff7e0; border: 1px solid #ecd9a3; font-size: 15px; color: var(--ink); }
.ph-held[hidden] { display: none; }
.ph-held .btn { margin-left: 8px; }
.ph-notsent { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ph-notsent-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); margin-top: 8px; }
.ph-notsent-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.ns-body { min-height: 100%; }
.ns-head { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--navy-dark); color: #fff; }
.ns-logo { height: 34px; width: auto; }
.ns-title { font-size: 18px; font-weight: 600; }
.ns-main { max-width: 560px; margin: 0 auto; padding: 14px 12px 40px; }
.ns-banner { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: #fff7e0; border: 1px solid #ecd9a3; font-size: 16.5px; line-height: 1.4; }
.ns-banner.ns-back { background: #e3f4e8; border-color: #a9d8b6; }
.ns-banner .btn { margin-left: 6px; }
.ns-card { margin-bottom: 12px; }
.ns-card p { font-size: 16.5px; line-height: 1.45; }
.ns-card .hint { font-size: 15px; }
.ns-search { width: 100%; font-size: 17px; min-height: 48px; margin-bottom: 10px; }
.ns-list { display: flex; flex-direction: column; gap: 8px; }
.ns-proj { text-align: left; padding: 12px 14px; min-height: 56px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); font: inherit; font-size: 17px; cursor: pointer; }
.ns-proj:active { background: #eef2fb; }
.ns-fields { margin-top: 14px; }
.ns-fields select, .ns-fields input { font-size: 17px; min-height: 46px; }
.ns-big { min-height: 52px; font-size: 17px; padding: 10px 18px; }

/* ======================= v1.4.0 item 12: the Project Home and the work orders =======================
   (app/screens/site-home.js, app/screens/work-order.js). His rules: no card wider than its content needs, body 16px. */
.badge-inprogress { background: #fff2d9; color: #8a5a00; }
.badge-completed { background: #e3f6e9; color: #1f7a3d; }
.badge-reschedule { background: #fbe2e1; color: #b3261e; }
.sh-address { margin: -10px 0 14px; font-size: 16px; color: var(--slate); }
.sh-address[hidden] { display: none; }
.sh-go { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.sh-layout, .wo-layout { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.sh-side { display: flex; flex-direction: column; gap: 18px; flex: 0 0 auto; max-width: 100%; }
/* a card's heading with its button on the same line */
.sh-card-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sh-card-head h2 { flex: 1 1 auto; margin: 0; padding: 0; border: 0; }
.sh-card-head .btn[hidden] { display: none; }
.sh-sub-head { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-light); margin: 0 0 6px; }
.sh-text { font-size: 16px; margin: 0 0 10px; line-height: 1.4; }
.sh-text[hidden], .sh-pin-info[hidden], .sh-locks[hidden], .sh-pin-row[hidden] { display: none; }
/* the work orders: each one's later days indented under it */
.sh-wo-table[hidden] { display: none; }
.sh-wo-table td { font-size: 16px; }
.sh-wo-table .sh-num { white-space: nowrap; }
.sh-wo-table .sh-wo-title { min-width: 180px; max-width: 360px; }
.sh-wo-table .sh-date, .sh-wo-table .sh-tasks { white-space: nowrap; }
.sh-wo-table tr.sh-wo-day td { padding-top: 6px; padding-bottom: 6px; background: var(--field); }
.sh-wo-table td.sh-indent { padding-left: 36px; white-space: nowrap; color: var(--slate); }
.sh-today, .wo-day-today { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 600; vertical-align: 1px; }
/* the access codes */
.sh-pin-row { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.sh-pin-row input { width: 130px; font-size: 22px; letter-spacing: 6px; text-align: center; }
.sh-msg { margin: 0 0 8px; font-size: 14.5px; color: var(--danger); }
.sh-msg:empty { display: none; }
.sh-codes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sh-codes:empty { display: none; }
.sh-code { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.sh-code-label { font-size: 15px; font-weight: 600; color: var(--slate); overflow-wrap: anywhere; }
.sh-code-value { font-size: 19px; font-weight: 700; color: var(--ink); font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
.sh-pin-info { margin: 6px 0 0; font-size: 14.5px; }
.sh-locks { margin-top: 12px; }
.sh-lock { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; border-top: 1px solid var(--line); }
/* the contacts */
.sh-site-contact { margin-bottom: 16px; }
.sh-sc-name { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.sh-sc-sub { font-size: 15px; color: var(--slate); overflow-wrap: anywhere; }
.sh-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 16px; }
.sh-links a { color: var(--navy); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.sh-links a:hover { text-decoration: underline; }
.sh-person { padding: 8px 0; border-top: 1px solid var(--line); font-size: 16px; overflow-wrap: anywhere; }
.sh-person:first-of-type { border-top: 0; }
.sh-sc-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #e3f6e9; color: #1f7a3d; font-size: 12.5px; font-weight: 600; }
.sh-none { font-size: 15px; margin: 0; }
/* the Site Info window */
.si-hint { margin: -4px 0 12px; }
.si-title { margin: 12px 0 8px; }
.si-codes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.si-code { display: flex; gap: 8px; align-items: center; }
.si-code .si-label { width: 170px; flex: 0 0 auto; }
.si-code .si-value { flex: 1 1 auto; min-width: 0; }
.si-typed[hidden] { display: none; }
.si-msg, .wo-msg { color: var(--danger); font-size: 14.5px; min-height: 1em; }

/* the work order */
.wo-main { display: flex; flex-direction: column; gap: 18px; width: 660px; max-width: 100%; flex: 0 1 auto; }
.wo-card { width: 100%; }
.wo-days-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wo-days { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
.wo-day { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.wo-day.active { border-color: var(--navy); background: #eef2fb; box-shadow: inset 0 0 0 1px var(--navy); }
.wo-day-num { font-size: 16px; font-weight: 700; color: var(--navy); }
.wo-day-date { font-size: 13px; color: var(--slate); }
.wo-day-new { border-style: dashed; }
.wo-day .wo-day-today { margin-left: 0; }
.wo-day-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.wo-day-acts[hidden], .wo-day-acts .btn[hidden] { display: none; }
.wo-count { font-size: 14.5px; }
.wo-list { display: flex; flex-direction: column; }
.wo-empty { font-size: 15px; margin: 0 0 8px; }
.wo-empty[hidden] { display: none; }
.wo-task { display: flex; align-items: flex-start; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.wo-task:last-child { border-bottom: 0; }
.wo-task-main { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 6px 0; cursor: pointer; }
.wo-tick { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; cursor: pointer; }
.wo-tick:disabled { cursor: default; }
.wo-task-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wo-task-text { font-size: 16.5px; overflow-wrap: anywhere; }
.wo-task-sub { font-size: 13px; color: var(--slate-light); }
.wo-task-sub:empty { display: none; }
.wo-task.is-done .wo-task-text { color: var(--slate); }
.wo-task.is-moved .wo-task-text { text-decoration: line-through; color: var(--slate-light); }
.wo-task .btn, .wo-task .row-remove { margin-top: 6px; }
.wo-add-row { display: flex; gap: 8px; margin-top: 12px; }
.wo-add-row input { flex: 1 1 auto; min-width: 0; }
.wo-add-row[hidden], .wo-add[hidden] { display: none; }
.wo-add { margin-top: 12px; }
.wo-add textarea { width: 100%; }
.wo-add-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.wo-note, .wo-mat { padding: 8px 0; border-bottom: 1px solid var(--line); }
.wo-note:last-child, .wo-mat:last-child { border-bottom: 0; }
.wo-note-text, .wo-instructions { font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.wo-note-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.wo-note-sub, .wo-mat-sub { font-size: 13px; color: var(--slate-light); flex: 1 1 auto; }
.wo-note-customer { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #e5eefc; color: var(--navy); font-size: 12.5px; font-weight: 600; }
.wo-mat-head { display: flex; align-items: baseline; gap: 10px; }
.wo-mat-kind { flex: 0 0 auto; padding: 1px 8px; border-radius: 10px; font-size: 12.5px; font-weight: 700; background: #fff2d9; color: #8a5a00; }
.wo-mat-kind.wo-mat-additional, .wo-mat-kind.wo-mat-purchased { background: #eceff3; color: #4a5568; }
.wo-mat-item { font-size: 16.5px; font-weight: 600; overflow-wrap: anywhere; }
.wo-mat-note { font-size: 15px; color: var(--slate); margin-top: 2px; overflow-wrap: anywhere; }
.wo-mat-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.wo-mat-add label { display: block; font-size: 14px; font-weight: 600; color: var(--slate); }
.wo-mat-add label input, .wo-mat-add label select { display: block; margin-top: 4px; font-weight: normal; color: var(--ink); }
.wo-mat-item-f input { width: 220px; }
.wo-mat-qty-f input { width: 100px; }
.wo-mat-note-f input { width: 220px; }
.wo-info-card .wo-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0 0 12px; font-size: 16px; align-items: center; }
.wo-dl dt { font-size: 14px; font-weight: 600; color: var(--slate); }
.wo-dl dd { margin: 0; }
.wo-dl select[hidden], .wo-dl span[hidden] { display: none; }
.wo-dl-label { font-size: 14px; font-weight: 600; color: var(--slate); margin-bottom: 4px; }
.wo-instr { margin-bottom: 12px; }
.wo-instr[hidden], .wo-moved-from[hidden], .wo-closed-note[hidden] { display: none; }
.wo-moved-from { background: none; border: 0; padding: 0; margin: 0 0 10px; color: var(--navy); font: inherit; font-size: 15px; text-decoration: underline; cursor: pointer; }
.wo-closed-note { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: #fff7e0; border: 1px solid #ecd9a3; font-size: 15px; }
.wo-made { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.mv-tasks { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 14px; max-height: 260px; overflow-y: auto; }
.mv-task { font-size: 15.5px; }

/* phone / tablet: everything one column, the details first; tap targets 44px+, text 16px+ (his rule) */
@media (max-width: 900px) {
  .sh-layout, .wo-layout, .sh-side { flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100%; }
  .sh-layout > .editor-card, .sh-side > .editor-card, .wo-main, .wo-info-card { width: 100% !important; }
  .wo-info-card { order: -1; }
  .sh-go .btn, .wo-day-acts .btn, .wo-add-row .btn, .wo-add .btn, .sh-card-head .btn, #shHideCodesBtn, .sh-lock .btn { min-height: 44px; font-size: 16px; }
  .wo-task .btn, .wo-note .btn, .wo-mat .btn { min-height: 44px; font-size: 16px; }
  .sh-pin-row input, .sh-pin-row .btn { min-height: 48px; }
  .wo-add-row input, .wo-add textarea, .wo-mat-add input, .wo-mat-add select { font-size: 16px; min-height: 44px; }
  .wo-mat-add label, .wo-mat-item-f input, .wo-mat-note-f input { width: 100%; }
  .wo-mat-qty-f { width: calc(50% - 5px); }
  .wo-mat-qty-f input { width: 100%; }
  .wo-task-sub, .wo-note-sub, .wo-mat-sub, .wo-day-date { font-size: 14px; }
  .sh-wo-table .sh-wo-title { min-width: 140px; }
  .sh-wo-table tr.sh-wo-day td { height: 46px; } /* (a later day's row is a tap target too) */
}

/* ---------- v1.4.0 item 13 (chat 19): the calendar and Settings > Crew (app/screens/calendar.js, settings-crew.js) ---------- */
/* His rules: only the week and month grids use the screen's width (seven days need it); everything else is as wide as
   its content. Body text 16px, labels 14px, nothing under 12px. */
/* the bar: Day / Week / Month, back / Today / ahead, then what is shown */
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 16px; }
.cal-modes { display: inline-flex; border: 1px solid var(--navy); border-radius: 6px; overflow: hidden; }
.cal-modes button { font: inherit; font-size: 15px; padding: 9px 18px; border: 0; border-right: 1px solid var(--navy); background: var(--field); color: var(--navy); cursor: pointer; }
.cal-modes button:last-child { border-right: 0; }
.cal-modes button:hover { background: #eef2fb; }
.cal-modes button[aria-pressed="true"] { background: var(--navy); color: #fff; font-weight: 600; }
.cal-nav { display: inline-flex; gap: 6px; }
#calPrev, #calNext { min-width: 44px; padding: 5px 12px; font-size: 22px; line-height: 1; }
.cal-range { font-size: 18px; font-weight: 700; color: var(--ink); }
.cal-msg { margin: 0 0 12px; font-size: 16px; color: var(--danger); }
.cal-msg:empty { display: none; }
.cal-loading { font-size: 16px; margin: 0; }
.cal-empty { margin: 0; padding: 8px 0; font-size: 16px; color: var(--slate-light); }
/* one work-order day */
.cal-entry { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; min-width: 0; padding: 8px 10px; text-align: left; font: inherit; font-size: 16px; line-height: 1.3; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: 8px; overflow-wrap: anywhere; }
.cal-entry > span { display: block; min-width: 0; }
button.cal-entry { cursor: pointer; }
button.cal-entry:hover { border-color: var(--navy); background: #eef2fb; }
.cal-entry.cal-locked { background: var(--sub); border-left-color: var(--slate-light); color: var(--slate); cursor: default; }
.cal-entry > .cal-top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.cal-time { font-weight: 700; white-space: nowrap; }
.cal-time:empty { display: none; }
.cal-num { font-weight: 700; color: var(--navy); white-space: nowrap; }
.cal-locked .cal-num { color: var(--slate); }
.cal-status { margin-left: auto; }
.cal-project { font-weight: 600; }
.cal-phase { color: var(--slate); }
.cal-entry > .cal-people { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.cal-entry > .cal-people:empty { display: none; }
.cal-person { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; }
.cal-person-hours { font-weight: 600; white-space: nowrap; }
.cal-compact { gap: 0; padding: 4px 7px; border-left-width: 3px; }
/* the day; a phone's list of days (as wide as a card, not the page) */
.cal-day, .cal-list { display: flex; flex-direction: column; gap: 10px; width: 640px; max-width: 100%; }
.cal-list { gap: 18px; }
.cal-list-day { display: flex; flex-direction: column; gap: 8px; }
.cal-list-head { padding-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 700; color: var(--slate); }
.cal-list-day.is-today .cal-list-head { color: var(--navy); }
/* the week: seven columns, Sunday first (empty columns keep their place) */
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: start; }
.cal-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 140px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.cal-col-head { padding: 2px 4px 6px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-col.is-today, .cal-cell.is-today { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.cal-col.is-today .cal-col-head { color: var(--navy); }
/* the month: weekday headings, then the whole weeks holding the month (other months' days greyed) */
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { padding: 2px 6px; font-size: 14px; font-weight: 700; color: var(--slate); }
.cal-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 104px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.cal-cell.is-other { background: var(--sub); }
.cal-cell-num { align-self: flex-start; min-width: 34px; padding: 2px 6px; font: inherit; font-size: 15px; font-weight: 700; color: var(--navy); background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.cal-cell-num:hover { border-color: var(--navy); background: #eef2fb; }
.cal-cell.is-other .cal-cell-num { color: var(--slate-light); }
.cal-cell.is-today .cal-cell-num { background: var(--navy); color: #fff; }
/* Settings > Crew: the card as wide as its list */
#crewCard .crew-hint { max-width: 560px; }
.crew-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#crewNewName { width: 280px; max-width: 100%; }
.crew-msg { margin: 6px 0 10px; min-height: 1em; font-size: 15px; color: var(--danger); }
.crew-table[hidden] { display: none; }
.crew-table td { font-size: 16px; }
.crew-table td.crew-name { min-width: 160px; max-width: 320px; white-space: normal; overflow-wrap: anywhere; }
.crew-table td.crew-acts .btn + .btn { margin-left: 6px; }
.crew-table tr.is-off .crew-name, .crew-table tr.is-off .crew-status { color: var(--slate); }
.cr-msg { color: var(--danger); font-size: 14.5px; min-height: 1em; }
/* (with the Crew tab, the admin's nine Settings tabs would run almost the whole width of a 1366 screen: closer together;
   v1.4.0 item 18's Backups tab makes ten: a little closer still, on a wide screen too) */
.settings-tabs .tab-btn { padding-left: 15px; padding-right: 15px; }
@media (min-width: 901px) and (max-width: 1500px) {
  .settings-tabs .tab-btn { padding-left: 9px; padding-right: 9px; }
}
/* phone / tablet: tap targets 44px+ (his rule); on a phone each crew member is a block with his buttons under him */
@media (max-width: 900px) {
  .cal-bar { gap: 8px 10px; }
  .cal-modes button { min-height: 44px; font-size: 16px; }
  button.cal-entry, .cal-cell-num { min-height: 44px; }
  .cal-cell-num { min-width: 44px; }
  .cal-week { gap: 4px; }
  .cal-col { padding: 4px; }
  .cal-month { gap: 3px; }
  .cal-cell { padding: 3px; min-height: 92px; }
  .cal-compact { padding: 4px 5px; }
}
@media (max-width: 700px) {
  .cal-range { flex: 1 1 100%; }
  .crew-add input { flex: 1 1 180px; width: auto; }
  .crew-table thead { display: none; }
  .crew-table, .crew-table tbody, .crew-table tr.crew-row { display: block; }
  .crew-table tr.crew-row { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .crew-table tr.crew-row:last-child { border-bottom: 0; }
  .crew-table tr.crew-row td { display: block; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .crew-table tr.crew-row td.crew-name { min-width: 0; max-width: none; font-weight: 600; }
  .crew-table tr.crew-row td.crew-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .crew-table tr.crew-row td.crew-acts .btn + .btn { margin-left: 0; }
}

/* ---------- v1.4.0 item 13 (chat 19): the work-order screen's people, start times, task notes, report window (work-order.js) ---------- */
/* a day's start time, beside its date on the day's tab (3a) */
.wo-day-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.wo-day-time { font-size: 13px; font-weight: 600; color: var(--slate); }
/* a task's own notes and materials (3c): under the task's text (past the tick, 22 + 12 px), a line on the left ties them
   to their task; then its "+ Note" / "+ Material" */
.wo-task { flex-wrap: wrap; }
.wo-task-extras { flex: 0 0 calc(100% - 34px); display: flex; flex-direction: column; margin: 0 0 6px 34px; padding-left: 12px; border-left: 3px solid var(--line); min-width: 0; }
.wo-task-extras:empty { display: none; }
.wo-task-note-row, .wo-task-mat-row { padding: 6px 0; border-bottom: 1px solid var(--line); }
.wo-task-note-row:last-child, .wo-task-mat-row:last-child { border-bottom: 0; }
.wo-task .wo-task-extras .btn, .wo-task .wo-task-extras .row-remove { margin-top: 0; }
.wo-task-acts { flex: 0 0 calc(100% - 34px); display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px 34px; }
.wo-task .wo-task-acts .btn { margin-top: 0; }
.wtn-task { margin: -4px 0 14px; padding: 8px 12px; border-left: 3px solid var(--navy); background: #f3f5f9; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* the people on the day (3b): name and tags, then the times; the hours at the right */
#woHoursTotal { font-size: 16px; font-weight: 700; color: var(--ink); }
.wo-person { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.wo-person:last-child { border-bottom: 0; }
.wo-person-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wo-person-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.wo-person-name { font-size: 16.5px; font-weight: 600; overflow-wrap: anywhere; }
.wo-person-crew, .wo-person-onsite, .wo-person-warn { padding: 1px 8px; border-radius: 10px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.wo-person-crew { background: #eceff3; color: #4a5568; }
.wo-person-onsite { background: #e3f6e9; color: #1f7a3d; }
.wo-person-warn { background: #fff2d9; color: #8a5a00; }
.wo-person-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.wo-person-sub > span:empty { display: none; }
.wo-person-times { font-size: 16px; color: var(--slate); }
.wo-person-from { font-size: 14px; color: var(--slate-light); }
/* the hours and the row's buttons go together (margin-left: auto: when the row wraps on a phone, they stay at the right) */
.wo-person-right { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.wo-person-hours { min-width: 3.5em; text-align: right; font-size: 16.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wo-people-add { margin-top: 12px; }
.wo-people-add:has(> .btn[hidden]) { display: none; }
.wp-none { font-size: 16px; margin: 0 0 14px; }
.wp-none-hint { display: block; font-size: 14px; margin: -8px 0 14px; }
.wh-hint { display: block; font-size: 14px; margin: -6px 0 14px; }
/* the report window (3d) */
.wr-which { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.wr-which .f-check { font-size: 16px; align-items: flex-start; }
.wr-which input[type=radio] { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }
.wr-msg { display: block; min-height: 1.4em; margin: 0 0 10px; font-size: 14.5px; color: var(--slate); }
@media (max-width: 900px) {
  .wo-person .btn { min-height: 44px; font-size: 16px; }
  .wo-person .row-remove { min-width: 44px; min-height: 44px; }
  .wo-people-add .btn { min-height: 44px; font-size: 16px; }
  .wo-day-time { font-size: 14px; }
}

/* v1.4.0 item 16: Reading Text in Files */
/* The Settings > Project Files card (app/screens/settings-ocr.js), the file window's "Text:" line and a search result's
   "Page 3: ..." line (files.js). His rules: as wide as the content (the card is w-md beside the folder card), text 16px. */
#ocrCard p, #ocrCard li { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink); }
#ocrCard .ocr-lines { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
#ocrCard .ocr-lines:empty, #ocrCard .ocr-lines[hidden] { display: none; }
#ocrReader { margin: 0 0 8px; font-weight: 600; }
#ocrCard .ocr-failed-wrap { margin: 0 0 12px; }
#ocrCard .ocr-failed-wrap[hidden], #ocrFailed[hidden] { display: none; }
#ocrFailed td { font-size: 16px; white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
#ocrFailed td.ocr-f-file, #ocrFailed td.ocr-f-project { min-width: 110px; max-width: 200px; }
#ocrFailed td.ocr-f-reason { min-width: 150px; max-width: 240px; }
#ocrCard .ocr-google { margin: 0 0 12px; }
#ocrCard .field-grid > label { font-size: 16px; }
#ocrCard .ocr-key-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 16px; }
#ocrCard .ocr-key-saved[hidden], #ocrCard .ocr-line[hidden], #ocrCard p[hidden] { display: none; }
#ocrLimitNote { margin-top: -6px; color: var(--slate); }
#ocrCard .ocr-error p { color: var(--danger); overflow-wrap: anywhere; }
#ocrSteps { margin: 0; padding-left: 24px; color: var(--ink); }
.ocr-msg { font-size: 16px; color: var(--slate); overflow-wrap: anywhere; }
.fd-text { display: block; margin: -4px 0 12px; font-size: 16px; color: var(--slate); overflow-wrap: anywhere; }
.fd-text strong { color: var(--ink); }
.files-table td.f-name .f-found, .sr-found { font-size: 16px; color: var(--slate); overflow-wrap: anywhere; max-width: 100%; }
.f-found b, .sr-found b { color: var(--ink); font-weight: 700; }

/* v1.4.0 item 18: Settings > Backups (app/screens/settings-backups.js). The points table needs a little more than the
   usual left column. */
#stabBackups .two-col-left { width: 600px; }
#stabBackups .two-col-right { flex-basis: 440px; }
#stabBackups .bk-line { margin: 0 0 6px; font-size: 16px; line-height: 1.4; color: var(--ink); }
#stabBackups .bk-line[hidden], #bkWarn[hidden], #stabBackups .table-wrap[hidden] { display: none; }
.bk-warns { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; }
.bk-warn { margin: 0; color: var(--danger); font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.bk-msg { font-size: 16px; color: var(--slate); overflow-wrap: anywhere; }
.bk-steps { margin: 14px 0 0; padding-left: 22px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.bk-steps li { margin: 0 0 4px; }
#bkPoints td { vertical-align: middle; }