:root {
  /* blue scheme (Russell, 2026-10-17) */
  --bg: #edf2f7;
  --panel: #ffffff;
  --ink: #15212e;
  --muted: #5a6878;
  --line: #d2dce7;
  --head: #f2f6fa;
  --accent: #1f5f99;
  --accent-ink: #ffffff;
  --input: #fbfdff;
  --input-line: #b7c6d6;
  --good: #1f7a45;
  --bad: #b3261e;
  --warn-bg: #fff4d6;
  --warn-ink: #6b4a00;
  --zebra: #f6f9fc;
  --shade: #e9f0f8;      /* every other column */
  --bar: #14385c;        /* top bar, sheet headings */
  --bar-2: #23507d;      /* buttons on the top bar */
  --bar-line: #3b6894;
  --bar-ink: #d4e3f2;
  --on: #2f7fcf;         /* the page or tab you are on */
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.4 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
button { font: inherit; cursor: pointer; }
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  background: var(--bar); color: #fff; padding: 8px 16px; min-height: 46px;
}
.brand { background: none; border: 0; color: #fff; font-weight: 700; font-size: 16px; padding: 4px 0; }
.brand:hover { text-decoration: underline; }
@media (max-width: 600px) { .brand { font-size: 14px; text-align: left; } }   /* the full name is long on a phone */
.jobline { color: var(--bar-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spacer { flex: 1; }
.save { font-size: 13px; padding: 3px 10px; border-radius: 12px; background: var(--bar-2); color: var(--bar-ink); white-space: nowrap; }
.save.ok { background: #1f4d33; color: #dff5e7; }
.save.busy { background: #5a4a1c; color: #fff1c2; }
.save.bad { background: var(--bad); color: #fff; font-weight: 600; }
.banner { background: var(--bad); color: #fff; padding: 10px 16px; font-weight: 600; }
.banner button { margin-left: 12px; }
main { padding: 16px; }

.btn { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 6px; padding: 6px 12px; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.small { padding: 2px 8px; font-size: 12px; }
.btn.danger { color: var(--bad); }
.btn.danger.armed { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 10px; }
.card p.hint { margin: -4px 0 10px; color: var(--muted); font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* home */
.home-actions { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: middle; }
th { background: var(--head); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 700; background: var(--head); border-top: 2px solid var(--line); }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--zebra); }
.muted { color: var(--muted); }

/* workspace */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin-bottom: 14px; }
.tab { border: 0; background: none; padding: 8px 14px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; font-weight: 600; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.side { position: sticky; top: 62px; }
.side .card { padding: 12px 14px; }
.kv { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.kv.big { font-size: 18px; font-weight: 700; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.kv .k { color: var(--muted); }
.kv.big .k { color: var(--ink); }
.warn { background: var(--warn-bg); color: var(--warn-ink); border-radius: 6px; padding: 8px 10px; font-size: 13px; margin-top: 10px; }
.warn ul { margin: 4px 0 0; padding-left: 18px; }
.codenote { background: var(--warn-bg); color: var(--warn-ink); border-radius: 4px; padding: 2px 6px; font-size: 12px; margin-top: 3px; max-width: 320px; }

/* forms */
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
input[type=text], input[type=date], input[type=password], select {
  font: inherit; color: var(--ink); background: var(--input); border: 1px solid var(--input-line);
  border-radius: 4px; padding: 4px 6px; width: 100%;
}
input.num { text-align: right; font-variant-numeric: tabular-nums; }
td input[type=text] { min-width: 44px; }
td.cell { padding: 2px 3px; }
td.cell input { border-color: transparent; background: transparent; padding: 3px 5px; }
td.cell input:hover { border-color: var(--input-line); }
td.cell input:focus { background: var(--input); border-color: var(--accent); }
.check { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.check input { margin-top: 3px; }

/* crew grid */
.scroll { overflow-x: auto; }
.grid th { text-align: center; white-space: normal; line-height: 1.15; vertical-align: bottom; }
.grid th small { display: block; font-weight: 400; color: var(--muted); }
.grid th.left, .grid td.left { text-align: left; }
.grid td.stage { min-width: 150px; }
.grid th { font-size: 11.5px; padding: 5px 4px; }
.grid td { padding: 4px 6px; }
.grid td.cell input { width: 46px; text-align: center; }
.grid td.cell.wide input { width: 68px; }
.grid td.cell.name input { width: 150px; text-align: left; }
.grid td.calc { background: var(--head); }
.grid tr.off td { opacity: .5; }
.grid th.sep, .grid td.sep { border-left: 2px solid var(--line); }
.tools { display: inline-flex; gap: 2px; }
.icon { border: 0; background: none; color: var(--muted); padding: 2px 5px; border-radius: 4px; }
.icon:hover { background: var(--head); color: var(--ink); }
.icon.armed { background: var(--bad); color: #fff; }

.delta-pos { color: var(--bad); }
.delta-neg { color: var(--good); }
.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: var(--head); color: var(--muted); }
.pill.good { background: #dff5e7; color: var(--good); }
.pill.bad { background: #fde3e1; color: var(--bad); }
.pill.warnpill { background: #fff3cd; color: #7a5a00; }

@media (max-width: 1100px) {
  .work { grid-template-columns: 1fr; }
  .side { position: static; }
}

.pane-summary table, .pane-rates table, .pane-consumables table { max-width: 1050px; }
.pane-job .card { max-width: 1050px; }

/* pay items */
.pane-pay .card > table { max-width: 1050px; }
.paytable td.cell.item input { width: 62px; text-align: left; }
.paytable td.cell.desc input { width: 300px; text-align: left; }
.paytable td.cell.wide input { width: 92px; text-align: right; }
td.cell select { border-color: transparent; background: transparent; min-width: 84px; padding: 3px 4px; }
td.cell select:hover, td.cell select:focus { border-color: var(--input-line); background: var(--input); }

/* the client's bid sheet */
.sheet { max-width: 1100px; padding: 28px 32px; }
.sheet-head { text-align: center; margin-bottom: 14px; }
.sheet-head .t1 { font-size: 20px; font-weight: 700; letter-spacing: .03em; }
.sheet-head .t2 { font-size: 16px; font-weight: 600; margin-top: 2px; }
.sheet-head .t3 { color: var(--muted); margin-top: 2px; }
.sheet-meta { margin-bottom: 12px; }
.sheet-meta td { border: 0; padding: 2px 8px 2px 0; }
.sheet-items th { background: var(--bar); color: #fff; }
.sheet-items td, .sheet-items th { border: 1px solid var(--line); vertical-align: top; }
.sheet-items td.n, .sheet-items th.n { white-space: nowrap; }
.sheet-items td.note { color: var(--muted); font-size: 13px; }
.sheet-items tr.sec td { background: var(--head); font-weight: 700; }
.sheet-items tr.sub td { font-weight: 600; background: var(--zebra); }
.sheet-items tr.grand td { font-weight: 700; font-size: 16px; background: var(--head); border-top: 2px solid var(--ink); }
.sheet-notes { margin-top: 14px; font-size: 13px; }
.sheet-notes p { margin: 4px 0; }
.sheet-sign { margin-top: 26px; max-width: 560px; }
.sheet-sign td { border: 0; padding: 12px 8px 2px 0; }
.sheet-sign td.rule { border-bottom: 1px solid var(--ink); width: 70%; }

@media print {
  @page { size: letter landscape; margin: 0.45in; }
  body { background: #fff; font-size: 11px; }
  .top, .tabs, .side, .noprint, .banner { display: none !important; }
  main { padding: 0; }
  .work { display: block; }
  .sheet { border: 0; padding: 0; max-width: none; margin: 0; }
  .sheet-items tr { break-inside: avoid; }
  .sheet-items th, .sheet-items tr.sec td, .sheet-items tr.sub td, .sheet-items tr.grand td {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* a negative number is never the same colour as the rest */
.neg, input.neg, td.cell input.neg { color: var(--bad); font-weight: 700; }
@media print { .neg { color: #b3261e !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

.pane-separate .card > table { max-width: 1050px; }

/* cost codes */
.codetable td.cell.code input { width: 64px; text-align: left; }
.codetable td.cell.cname input { width: 210px; text-align: left; }
.codetable td.cell.csec input { width: 150px; text-align: left; }
.codetable td.cell.wide input { width: 96px; text-align: right; }
.codetable tr.sec td { background: var(--head); font-weight: 700; }
.codetable th.left, .codetable td { text-align: left; }
.codetable td.n { text-align: right; }
.small { font-size: 12px; }
.pane-codes .card > table { max-width: 900px; }

/* work in process */
.wiptable td.cell.wide input { width: 92px; text-align: right; }
.wiptable td.cell input[type=date], .cotable td.cell input[type=date] { width: 128px; text-align: left; }
.wipcodes tr.sec td { background: var(--head); font-weight: 700; }
.wipcodes td { white-space: nowrap; }
.qbtable td.cell.code input { width: 170px; text-align: left; }
.qbtable td.cell.wide input, .cotable td.cell.wide input { width: 104px; text-align: right; }
.qbtable td.cell.desc input { width: 260px; text-align: left; }
.cotable td.cell.desc input { width: 300px; text-align: left; }
textarea { width: 100%; max-width: 640px; font: inherit; padding: 6px 8px; border: 1px solid var(--input-line); border-radius: 6px; background: var(--input); color: inherit; }

/* schedule bar chart */
.gantt { font-size: 12px; }
.g-row { display: grid; grid-template-columns: 170px 1fr 150px; align-items: center; gap: 8px; min-height: 24px; border-bottom: 1px solid var(--line); }
.g-head { min-height: 20px; border-bottom: 2px solid var(--line); }
.g-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-dates { color: var(--muted); white-space: nowrap; }
.g-track { position: relative; height: 22px; }
.g-tick { position: absolute; top: 3px; font-size: 10.5px; color: var(--muted); border-left: 1px solid var(--line); padding-left: 2px; white-space: nowrap; }
.g-bar { position: absolute; top: 3px; height: 11px; background: #b9d3ee; border-radius: 2px; overflow: hidden; min-width: 2px; }
.g-done { display: block; height: 100%; background: #1f5f99; }
.g-actual { position: absolute; top: 16px; height: 3px; background: #3a3a3a; border-radius: 1px; min-width: 2px; }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bad); }
.g-other .g-bar { background: repeating-linear-gradient(45deg, #d8cfa8, #d8cfa8 4px, #efe9cf 4px, #efe9cf 8px); }
.g-other .g-done { background: #8a7a2e; }
@media print { .g-bar, .g-done, .g-actual, .g-today { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* manpower and equipment by day */
.mpgrid th.d, .mpgrid td.d { min-width: 26px; padding: 3px 2px; text-align: center; font-variant-numeric: tabular-nums; }
.mpgrid th.d small { font-size: 9.5px; }
.mpgrid td.d.on { background: #dbe9f6; font-weight: 600; }
.mpgrid th.d.off, .mpgrid td.d.off { background: var(--head); color: var(--muted); }
.mpgrid th.d.today, .mpgrid td.d.today { box-shadow: inset 2px 0 0 var(--bad), inset -2px 0 0 var(--bad); }
.mpgrid td.name { white-space: nowrap; position: sticky; left: 0; background: var(--card, #fff); }
.mpgrid tr.sec td { background: var(--head); font-weight: 700; }

/* time-distance chart */
.tdchart { width: 100%; height: auto; max-height: 560px; display: block; }
.tdchart .td-grid { stroke: var(--line); stroke-width: 1; }
.tdchart .td-axis { stroke: var(--muted); stroke-width: 1; }
.tdchart .td-lab { font-size: 11px; fill: var(--muted); }
.tdchart .td-plan { stroke-width: 1.5; }
.tdchart .td-actual { stroke-width: 4.5; stroke-linecap: round; opacity: 0.85; }
.tdchart .td-other { stroke-width: 2.5; stroke-dasharray: 7 5; }
.tdchart .td-today { stroke: var(--bad); stroke-width: 2; }
.td-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.td-key i { display: inline-block; width: 20px; height: 3px; vertical-align: middle; margin-right: 5px; }
.td-key i.dash { height: 0; border-top: 3px dashed currentColor; }
@media print { .td-key i, .tdchart line { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* holidays */
.g-hol { position: absolute; top: 0; bottom: 0; background: #d9d9d9; opacity: 0.75; min-width: 2px; }
.tdchart .td-hol { fill: #d9d9d9; opacity: 0.6; }
.mpgrid th.d.hol { color: var(--bad); font-weight: 700; }
@media print { .g-hol, .tdchart .td-hol { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* weather days */
.g-hol.g-wx { background: #9cc3e6; }
.tdchart .td-hol.td-wx { fill: #9cc3e6; }
.mpgrid th.d.wx { color: #1f5f99; font-weight: 700; }

/* ---------- signing in, users ---------- */
.userbox { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.userbox .who { color: var(--bar-ink); font-size: 13px; margin-right: 4px; }
.userbox .btn { background: var(--bar-2); border-color: var(--bar-line); color: #fff; }
.signin { position: fixed; inset: 0; z-index: 50; background: rgba(20, 56, 92, .92); display: flex; align-items: flex-start;
  justify-content: center; padding: 10vh 16px 16px; overflow-y: auto; }
.signin[hidden] { display: none; }
.signin-card { background: var(--panel); border-radius: 10px; padding: 22px 22px 14px; width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 6px; }
.signin-card h1 { font-size: 20px; margin: 0 0 8px; color: var(--accent); }
.signin-card label { font-size: 13px; color: var(--muted); margin-top: 6px; }
.signin-card input { font-size: 17px; padding: 9px 10px; }
.signin-card .btn { margin-top: 12px; padding: 10px; font-size: 16px; }
.signin-msg { background: var(--warn-bg); color: var(--warn-ink); border-radius: 6px; padding: 8px 10px; margin: 0 0 4px; font-size: 14px; }
.signin-err, .err { color: var(--bad); font-size: 14px; margin: 6px 0 0; min-height: 1em; }
.card.narrow { max-width: 460px; }
.card.narrow .field { margin-bottom: 10px; }
.temp-pw { margin-top: 12px; background: var(--warn-bg); color: var(--warn-ink); border-radius: 6px; padding: 10px 12px; }
.temp-pw code { font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--ink); background: #fff; padding: 2px 6px; border-radius: 4px; }
.w-user { max-width: 200px; }
.w-name { max-width: 240px; }
.w-role { max-width: 120px; }
.scroll { overflow-x: auto; }
.nowrap { white-space: nowrap; }
@media (max-width: 700px) {
  .userbox .who { display: none; }
}
/* the menu wraps instead of running off the side: 11 admin buttons ran past a phone and past an upright iPad
   (browser check 2026-10-15: Shop and Rates off a 390 px phone; Users, Password and Sign out off a 768 px iPad) */
@media (max-width: 1100px) {
  .top { flex-wrap: wrap; gap: 8px; }
  .userbox { flex-wrap: wrap; white-space: normal; min-width: 0; }
}
tr.off td { color: var(--muted); }

/* ---------- projects, people ---------- */
.nav { display: flex; flex-wrap: wrap; gap: 4px; margin-right: 8px; }
.project-box p { margin: 6px 0; }
.small-note { font-size: 12px; }
.w-emp { max-width: 140px; }
.add-row { margin-top: 10px; }

/* ---------- time ---------- */
.time-head select#tProject { max-width: 360px; }
.time-head input[type=date] { width: auto; }
.tline { display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(150px, 1.4fr) minmax(130px, 1fr) 80px minmax(100px, 1fr) auto; gap: 6px 10px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tline.approved { background: #f3faf5; }
.tline .tstate { grid-column: 1 / 3; font-size: 13px; }
.tline .tbtns { grid-column: 3 / 7; text-align: right; }
.tline .thist { grid-column: 1 / -1; font-size: 12px; }
.tline .thist:empty { display: none; }
.tline .tallow { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-left: 14px; }
.tline .tallow .thist:empty { display: none; }
.thours { text-align: right; }
.tadd { display: grid; grid-template-columns: minmax(160px, 1.3fr) 100px minmax(150px, 1.4fr) minmax(130px, 1fr) 90px minmax(120px, 1fr) auto; gap: 8px; }
/* the stacked layout up to 900 px: the add row (with the pay code since 10/15) ran 64-140 px off an upright iPad */
@media (max-width: 900px) {
  .tline, .tadd { grid-template-columns: 1fr 90px; }
  .tline .tname, .tline select, .tline .tnote, .tline .tstate, .tline .tbtns, .tadd select, .tadd #taNote, .tadd .btn { grid-column: 1 / -1; }
  .tline .tbtns { text-align: left; }
  .tline input, .tline select, .tadd input, .tadd select { font-size: 16px; padding: 8px; }
  .tadd .btn { padding: 10px; font-size: 16px; }
}

/* ---------- footage ---------- */
.fline { display: grid; grid-template-columns: minmax(200px, 2fr) 100px 100px minmax(120px, 1.2fr); gap: 6px 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.fline.approved { background: #f3faf5; }
.fline .fstate { grid-column: 1 / -1; font-size: 13px; }
.fline .fstate:empty { display: none; }
.fline .thist { grid-column: 1 / -1; font-size: 12px; }
.fline .thist:empty { display: none; }
.ffin { display: flex; gap: 6px; align-items: center; font-size: 14px; white-space: nowrap; }
.ffeet { text-align: right; }
/* bid / added / total / done / left on a stage or item (2026-10-20) */
.fq { display: inline-flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--muted); margin-left: 6px; }
.fq strong { color: var(--ink); }
.co-adds { white-space: nowrap; min-width: 250px; }
.co-adds select { width: 160px; margin-top: 4px; }
.co-stg label.chk, .batch-lines label.chk { display: inline-block; margin: 2px 10px 2px 0; font-size: 13px; }
@media (max-width: 700px) {
  .fline { grid-template-columns: 1fr 1fr; }
  .fline .fname, .fline .fnote { grid-column: 1 / -1; }
  .fline input { font-size: 16px; padding: 8px; }
  .ffin input { width: 22px; height: 22px; }
}

/* ---------- actual cost ---------- */
textarea.paste { width: 100%; font: 13px/1.4 Consolas, "Courier New", monospace; border: 1px solid var(--input-line); border-radius: 4px;
  background: var(--input); padding: 6px 8px; margin: 8px 0; }
.cpreview { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 8px 0; background: var(--head); }
.scroll.short { max-height: 240px; overflow-y: auto; }
h3.sub { font-size: 13px; color: var(--muted); margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- change orders ---------- */
.w-co { max-width: 90px; }
.w-unit { min-width: 170px; max-width: 200px; }
.w-code { min-width: 230px; max-width: 280px; }
.w-pct { max-width: 60px; }

/* ---------- shop inventory ---------- */
.invform { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 4px; }
.invform .row input, .invform .row select { width: auto; }
.aline { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }

/* billing: pay applications (stage 19) */
.pa-table td.desc { max-width: 380px; white-space: normal; font-size: 12.5px; }
.pa-table tr.sec td { background: var(--head); }
@media print {
  body.printing-pa main > *:not(.pa-print) { display: none !important; }
  body.printing-pa .pa-print { border: 0; box-shadow: none; }
  body.printing-pa .pa-table td.desc { max-width: none; }
  body.printing-sched main > *:not(.sched-print) { display: none !important; }
  body.printing-sched .sched-print { display: block !important; border: 0; box-shadow: none; }
  body.printing-report main > *:not(.report), body.printing-report header { display: none !important; }   /* the demo strip stays: made-up numbers never pass for real ones */
  body.printing-report .report { border: 0; box-shadow: none; padding: 0; margin: 0; }
  body.printing-report .r-table, body.printing-report .rkpis { break-inside: auto; }
  body.printing-report .r-table tr { break-inside: avoid; }
  body.printing-report h2 { break-after: avoid; }
  body.printing-portfolio main > *:not(#portfolio), body.printing-portfolio header, body.printing-portfolio .noprint { display: none !important; }
  body.printing-portfolio #portfolio { border: 0; box-shadow: none; padding: 0; }
}

/* the project status report (2026-10-20) */
.report { max-width: 1100px; }
.report h1 { font-size: 22px; margin: 0; color: var(--ink); }
.report h2 { font-size: 15px; margin: 18px 0 6px; text-transform: none; letter-spacing: 0; display: flex; gap: 10px; align-items: center; }
.r-head { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; flex-wrap: wrap; }
.r-sub { color: var(--muted); margin-top: 4px; }
.r-meta { font-size: 13px; text-align: right; color: var(--muted); }
.rkpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.rk { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.rk-l { font-size: 12px; color: var(--muted); }
.rk-v { font-size: 20px; font-weight: 600; margin: 2px 0; }
.rk-s { font-size: 11.5px; color: var(--muted); }
.r-flags { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: #9b2c22; }
.r-comments { margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--ink); background: #f6f8fb; font-size: 13.5px; white-space: pre-wrap; }
.r-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.r-table th, .r-table td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; }
.r-table th.n, .r-table td.n { text-align: right; }
.r-table td.c { text-align: center; }
.r-two { width: 100%; }
.r-two > tbody > tr > td { vertical-align: top; width: 50%; padding-right: 12px; }
.r-two table { width: 100%; font-size: 13px; border-collapse: collapse; }
.r-two table td { padding: 3px 6px; border-bottom: 1px solid var(--line); }
.r-two table td.n { text-align: right; }
.r-foot { font-size: 11.5px; color: var(--muted); margin-top: 14px; }
#rComments { width: 100%; }
.r-total td { border-top: 2px solid var(--ink); }
.report tr.clickable { cursor: pointer; }
.report tr.clickable:hover td { background: #f3f6fa; }

/* phone width: the top bar wraps instead of pushing the page sideways (found in the stage 19 browser check) */
@media (max-width: 600px) {
  .top { flex-wrap: wrap; }
  .userbox { flex-wrap: wrap; white-space: normal; }
  .save { white-space: normal; }
}

/* phone walk 2026-10-26 (hosting/PHONE-WALK-2026-10-26.md), Russell: "do all 7 fixes"
   1. top bar buttons were 23 px tall: a thumb needs about 44; Sign out pushed to the far end, away from POs
   2. iPhone Safari zooms on any form box under 16 px text (Project picker and Day box were 15 px)
   3. tick boxes were 22 px: bigger box, and the whole label is the tap target */
@media (max-width: 600px) {
  .userbox .btn.small { min-height: 44px; padding: 8px 12px; font-size: 14px; }
  .userbox [data-act="password"] { margin-right: 28px; }   /* Sign out sits apart: at the far end, or alone on the next line */
  .userbox [data-act="sign-out"] { margin-left: auto; }
  input[type=text], input[type=date], input[type=password], input[type=number], select, textarea { font-size: 16px; }
  input[type=checkbox] { width: 26px; height: 26px; vertical-align: middle; }
  label:has(> input[type=checkbox]) { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-right: 8px; }
}

details.fold { margin-top: 8px; border-top: 1px solid var(--line); }
details.fold > summary { cursor: pointer; padding: 12px 0; color: var(--accent); font-weight: 600; min-height: 24px; }

/* field tickets (stage 20): phone first */
.ticket textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 6px; }
.tk-table select { max-width: 220px; }
.tk-table td.c, td.c { text-align: center; }
.tk-actions { flex-wrap: wrap; }
@media (max-width: 600px) {
  .tk-table select { max-width: 150px; }
  .tk-actions .btn { flex: 1 1 45%; }
  /* personnel on a phone: each person is a grid row with room for the name and craft; a check message gets its own line */
  .tk-crew, .tk-crew tbody { display: block; }
  .tk-crew tr { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 50px 50px 34px; column-gap: 0; align-items: center; }
  .tk-crew th, .tk-crew td { padding: 4px 2px; }
  .tk-crew th { align-self: stretch; white-space: nowrap; font-size: 0.85em; }
  .tk-crew th:nth-child(5) { display: none; }
  .tk-crew td:nth-child(5) { grid-column: 1 / -1; order: 9; }
  .tk-crew td:nth-child(5):empty { display: none; }
  .tk-crew select { max-width: none; width: 100%; }
  .tk-crew input.num { width: 100%; box-sizing: border-box; }
  /* materials on a phone: quantity, a wide description and remove on the first line; vendor or yard and PO# under them (cost, office only, under those) */
  .tk-mat, .tk-mat tbody { display: block; }
  .tk-mat tr { display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr) 34px; column-gap: 0; align-items: center; }
  .tk-mat tr + tr { border-top: 1px solid var(--line); }
  .tk-mat th, .tk-mat td { padding: 3px 2px; border: 0; }
  .tk-mat th { align-self: stretch; white-space: nowrap; font-size: 0.85em; text-align: left; }
  .tk-mat tr > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .tk-mat tr > :nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
  .tk-mat tr > :last-child { grid-column: 4; grid-row: 1; }
  .tk-mat tr > :nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .tk-mat tr > :nth-child(4) { grid-column: 3 / 5; grid-row: 2; }
  .tk-mat tr > :nth-child(5):not(:last-child) { grid-column: 1 / 3; grid-row: 3; }
  .tk-mat input { width: 100%; max-width: none; box-sizing: border-box; }
}

/* weekly timesheet on a phone or an upright iPad: each line is a block (job and pay code, then task and state) with its seven
   days and total under it, lined up with the day headings at the top, so nothing sits off the side of the screen (browser check
   2026-10-15: the table ran off a 390 px phone and 15 to 39 px off an upright iPad). A landscape iPad (1024 px) has the table.
   The last eight cells of every row are the seven days and the total. */
@media (max-width: 900px) {
  .ts-table, .ts-table tbody { display: block; }
  .ts-table tr { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.25fr); align-items: baseline; }
  .ts-table tr + tr { border-top: 1px solid var(--line); }
  .ts-table th, .ts-table td { padding: 2px 1px; border: 0; }
  .ts-table th { align-self: stretch; }
  .ts-table tr:first-child { background: var(--head); }
  .ts-table tr.total { background: var(--head); border-top: 2px solid var(--line); }
  .ts-table tr.total > td { border: 0; background: none; }
  .ts-table th:nth-child(-n+4) { display: none; }
  .ts-table tr:not(.total) > :nth-child(1) { grid-column: 1 / 7; grid-row: 1; font-weight: 600; }
  .ts-table tr:not(.total) > :nth-child(4) { grid-column: 7 / -1; grid-row: 1; text-align: right; }
  .ts-table tr:not(.total) > :nth-child(2) { grid-column: 1 / 7; grid-row: 2; color: var(--muted); }
  .ts-table tr:not(.total) > :nth-child(3) { grid-column: 7 / -1; grid-row: 2; text-align: right; }
  .ts-table tr.total > :first-child { grid-column: 1 / -1; grid-row: 1; }
  .ts-table tr > :nth-last-child(-n+8) { grid-row: 3; font-size: 0.85em; text-align: right; }
  .ts-table tr.total > :nth-last-child(-n+8) { grid-row: 2; }
  .ts-table tr > :nth-last-child(8) { grid-column: 1; }
  .ts-table tr > :nth-last-child(7) { grid-column: 2; }
  .ts-table tr > :nth-last-child(6) { grid-column: 3; }
  .ts-table tr > :nth-last-child(5) { grid-column: 4; }
  .ts-table tr > :nth-last-child(4) { grid-column: 5; }
  .ts-table tr > :nth-last-child(3) { grid-column: 6; }
  .ts-table tr > :nth-last-child(2) { grid-column: 7; }
  .ts-table tr > :nth-last-child(1) { grid-column: 8; }
}
@media (max-width: 400px) { .ts-table tr > :nth-last-child(-n+8) { font-size: 0.75em; } }   /* 11.00 11.00 ran together at 360 px */

/* demo copy (Start Demo.cmd): a strip no one can mistake for the real app */
.demo-strip { background: #b3261e; color: #fff; text-align: center; font-weight: 700; padding: 4px 8px; letter-spacing: 0.05em; }
@media print { .demo-strip { display: block; } }

/* purchase orders (stage 21) */
.po-form textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 6px; }

/* ---------- walkthrough fixes, 2026-10-15 (Russell drove the demo; WALKTHROUGH-2026-10-15.md) ---------- */
/* every column heading sits centered over its column; the numbers under it stay right-aligned so the decimals line up */
th, th.n, th.left, .grid th.left, .codetable th.left, .sheet-items th { text-align: center; }
/* the save badge is a blank grey pill when there is nothing to say (the Estimates list) */
.save:empty { display: none; }
/* even columns with real space between them: the table splits its width evenly, except the name, description and
   delete columns, which are sized by their <col> */
table.even { table-layout: fixed; }
table.even col.c-name { width: 17%; }
table.even col.c-desc { width: 30%; }
table.even col.c-mid { width: 12%; }
table.even col.c-amt { width: 170px; }
table.even col.c-del { width: 46px; }
table.even th { white-space: normal; }
table.even td { overflow: hidden; text-overflow: ellipsis; }
table.even td.cell input, table.even td.cell select { width: 100%; min-width: 0; }
table.even td.cell { padding: 2px 6px; }
td.cell.ctr input { text-align: center; }
.pane-rentals table.even { min-width: 1280px; }
/* rentals: four money columns need room for $53,400.00; quantity and duration do not (screenshot check at 1366 px) */
table.rentaltable col.c-v { width: 11%; } table.rentaltable col.c-e { width: 12%; } table.rentaltable col.c-n { width: 9%; }
table.rentaltable col.c-sm { width: 62px; } table.rentaltable col.c-unit { width: 86px; }
/* subcontractor amounts sit under their own heading, right-aligned like every other amount */
table.subgrid td.cell input { width: 100%; min-width: 0; text-align: right; }
table.subgrid { min-width: 1150px; }   /* room for $12,000.00 in every column */
/* the estimate's tab row stays on screen while the page scrolls, just under the dark top bar, on one line that
   scrolls sideways when the window is narrow (it used to wrap "Work in process" onto a second line) */
.tabs { position: sticky; top: var(--toph, 46px); z-index: 15; background: var(--bg); flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: thin; padding-top: 4px; }
.tab { white-space: nowrap; flex: 0 0 auto; }
.side { top: calc(var(--toph, 46px) + 56px); }
/* client bid sheet header fields: wide text gets wide boxes; the four section heading boxes start at one left edge */
.sheetfields .span2 { grid-column: span 2; }
.sheetfields .span-all { grid-column: 1 / -1; }
@media (max-width: 700px) { .sheetfields .span2 { grid-column: 1 / -1; } }
.fixedval { border: 1px dashed var(--input-line); border-radius: 4px; padding: 4px 6px; background: var(--head); }
.secrow { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 6px; }
.secrow .seckey { text-align: center; overflow: hidden; text-overflow: ellipsis; }
.warn-card { background: var(--warn-bg); color: var(--warn-ink); }
.warn-card .btn { margin-left: 8px; }
/* time-distance chart: each line carries its name; a stage done on the whole section at once is a block */
/* a name at the chart's edge may run past it rather than be cut off (Codex, 2026-10-15) */
.tdchart { overflow: visible; }
.tdchart .td-name { font-size: 11px; font-weight: 600; stroke: #fff; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; }
.tdchart .td-block { fill-opacity: 0.22; stroke-width: 1.5; }
.tdchart .td-block.td-block-actual { fill-opacity: 0.5; }
.td-key i.blk { height: 10px; opacity: 0.5; }
@media print { .tdchart .td-name, .tdchart .td-block { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Job & margins: every entry centered in its box (Russell, 2026-10-15) */
.pane-job .fields input[type=text], .pane-job .fields input[type=date] { text-align: center; }
/* Rates: Position and Equipment names left-justified, cost codes centered; the dollar columns take the right-justified
   format below with the other tabs (Russell, 2026-10-16) */
.pane-rates td.cell:first-child input { text-align: left; }
.pane-rates table.even col.c-name { width: 22%; }   /* "Bending Support Truck" fits */
/* Crews: every other position and equipment column shaded, so a count lines up with its heading (Russell, 2026-10-15) */
.pane-crews .grid th.alt, .pane-crews .grid td.alt, .pane-crews .grid tr.total td.alt,
.pane-subs th.alt, .pane-subs td.alt, .pane-subs tr.total td.alt { background: var(--shade); }   /* and on Subs & fuel */
@media print { .pane-crews .grid .alt, .pane-subs .alt { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Rentals: entries placed under their headings (Russell, 2026-10-15). Columns: 1 Vendor, 2 Equipment, 3 Qty, 4 Duration,
   5 Unit, 6 Rate per unit, 7 Mob per unit, 8 Mob total, 9 Total, 10 Stage, 11 Notes */
table.rentaltable tr:not(.total) td:nth-child(2) input { padding-left: 12px; }
table.rentaltable tr:not(.total) td:nth-child(3) input, table.rentaltable tr:not(.total) td:nth-child(4) input,
table.rentaltable tr:not(.total) td:nth-child(11) input { text-align: center; }
table.rentaltable tr:not(.total) td:nth-child(5) select, table.rentaltable tr:not(.total) td:nth-child(10) select { text-align: center; text-align-last: center; }
/* the money columns stay right-aligned (decimals line up) but stand in from the right edge, under their centered heading */
table.rentaltable tr:not(.total) td:nth-child(6) input, table.rentaltable tr:not(.total) td:nth-child(7) input { padding-right: 16px; }
table.rentaltable tr:not(.total) td:nth-child(8), table.rentaltable tr:not(.total) td:nth-child(9),
table.rentaltable tr.total td:nth-child(2) { padding-right: 22px; }
/* Rentals: the same light shade on every other column (Russell, 2026-10-15) */
table.rentaltable th:nth-child(even):not(:last-child), table.rentaltable tr:not(.total) td:nth-child(even):not(:last-child) { background: var(--shade); }
@media print { table.rentaltable .alt, table.rentaltable td, table.rentaltable th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Consumables & tools: the same light shade on every other column, starting after Description */
table.alttable th:nth-child(even):not(:last-child), table.alttable tr:not(.total) td:nth-child(even):not(:last-child) { background: var(--shade); }
@media print { table.alttable td, table.alttable th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Consumables (Russell, 2026-10-15): a Unit column wide enough for "0 (not in the list)"; Qty, Unit cost and Total stay
   right-justified but stand in from the right edge; Stage centered. Columns: 1 Description, 2 Qty, 3 Unit, 4 Unit cost,
   5 Total, 6 Stage */
table.constable col.c-desc { width: 24%; }
table.constable col.c-unitw { width: 190px; }
table.constable tr:not(.total) td:nth-child(2) input, table.constable tr:not(.total) td:nth-child(4) input { padding-right: 24px; }
table.constable tr:not(.total) td:nth-child(5), table.constable tr.total td:nth-child(2) { padding-right: 30px; }
table.constable tr:not(.total) td:nth-child(6) select { text-align: center; text-align-last: center; }
/* Tool purchase: Qty centered; the other columns right-justified, standing in from the right edge. Columns: 1 Description,
   2 Qty, 3 Unit cost, 4 % charged to job, 5 Purchase, 6 Charged to job */
table.tooltable tr:not(.total) td:nth-child(2) input { text-align: center; }
table.tooltable tr:not(.total) td:nth-child(3) input, table.tooltable tr:not(.total) td:nth-child(4) input { padding-right: 30px; }
table.tooltable tr:not(.total) td:nth-child(5), table.tooltable tr:not(.total) td:nth-child(6),
table.tooltable tr.total td:nth-child(2), table.tooltable tr.total td:nth-child(3) { padding-right: 36px; }
/* Every other estimate tab (Russell, 2026-10-15: "I like this format"): numbers, dollars and percents stay right-justified,
   standing in from the right edge so they sit under their centered headings. Rates and Subs & fuel joined 2026-10-16; Job & margins keeps
   its centered boxes; Rentals and Consumables & tools have their own spacing above. */
:is(.pane-crews, .pane-separate, .pane-summary, .pane-pay, .pane-codes, .pane-schedule, .pane-manpower, .pane-wip) table:not(.grid) td.n,
:is(.pane-crews, .pane-separate, .pane-summary, .pane-pay, .pane-codes, .pane-schedule, .pane-manpower, .pane-wip) table:not(.grid) td.cell input.num { padding-right: 22px; }
:is(.pane-crews, .pane-rates, .pane-subs, .pane-separate, .pane-summary, .pane-pay, .pane-codes, .pane-schedule, .pane-manpower, .pane-wip) table.grid td.n,
:is(.pane-crews, .pane-rates, .pane-subs, .pane-separate, .pane-summary, .pane-pay, .pane-codes, .pane-schedule, .pane-manpower, .pane-wip) table.grid td.cell input.num:not([data-col]) { padding-right: 14px; }
/* Rates and the fuel table have wide columns, where a right margin alone leaves the numbers far right of their headings.
   There each number sits right-justified in a fixed-width box (decimals line up) and the box is centered under the heading. */
:is(.pane-rates, .pane-subs, .pane-separate) table:not(.grid) td.n { text-align: center; padding-right: 8px; }
:is(.pane-rates, .pane-subs, .pane-separate) table:not(.grid) td.n span[data-out] { display: inline-block; min-width: 12ch; text-align: right; }
:is(.pane-rates, .pane-subs, .pane-separate) table:not(.grid) td.cell input.num { display: block; width: calc(12ch + 10px); margin: 0 auto; padding-right: 5px; text-align: right; }
/* Rentals (Russell, 2026-10-16: "line up the numbers the same way"): Rate per unit, Mob per unit, Mob total and Total sit
   right-justified in a fixed-width box centered under the heading, like Rates and the fuel table. Overrides the
   right-margin spacing above. Qty and Duration stay centered as he asked on 10/15. */
table.rentaltable tr:not(.total) td:nth-child(6) input, table.rentaltable tr:not(.total) td:nth-child(7) input {
  display: block; width: calc(12ch + 10px); margin: 0 auto; padding-right: 5px; text-align: right; }
table.rentaltable tr:not(.total) td:nth-child(8), table.rentaltable tr:not(.total) td:nth-child(9),
table.rentaltable tr.total td:nth-child(2) { text-align: center; padding-right: 8px; }
table.rentaltable tr:not(.total) td:nth-child(8) span[data-out], table.rentaltable tr:not(.total) td:nth-child(9) span[data-out],
table.rentaltable tr.total td:nth-child(2) span[data-out] { display: inline-block; min-width: 12ch; text-align: right; }
/* the bold Total is wider than the plain columns: its box gets the cell's full width */
table.rentaltable tr:not(.total) td:nth-child(9), table.rentaltable tr.total td:nth-child(2) { padding-left: 4px; padding-right: 4px; text-overflow: clip; }
table.rentaltable tr:not(.total) td:nth-child(9) span[data-out], table.rentaltable tr.total td:nth-child(2) span[data-out] { min-width: 12.5ch; }
/* Consumables & tools (Russell, 2026-10-16: "line up the numbers the same way"): numbers right-justified in a fixed-width
   box centered under the heading, like Rates, fuel and Rentals. Overrides the right-margin spacing above. Tool Qty stays
   centered as he asked on 10/15. Consumables: 2 Qty, 4 Unit cost, 5 Total. Tools: 3 Unit cost, 4 %, 5 Purchase, 6 Charged. */
:is(table.constable tr:not(.total) td:nth-child(2), table.constable tr:not(.total) td:nth-child(4),
    table.tooltable tr:not(.total) td:nth-child(3), table.tooltable tr:not(.total) td:nth-child(4)) input {
  display: block; width: calc(12ch + 10px); margin: 0 auto; padding-right: 5px; text-align: right; }
:is(table.constable tr:not(.total) td:nth-child(5), table.constable tr.total td:nth-child(2),
    table.tooltable tr:not(.total) td:nth-child(5), table.tooltable tr:not(.total) td:nth-child(6),
    table.tooltable tr.total td:nth-child(2), table.tooltable tr.total td:nth-child(3)) { text-align: center; padding-left: 4px; padding-right: 4px; }
:is(table.constable tr:not(.total) td:nth-child(5), table.constable tr.total td:nth-child(2),
    table.tooltable tr:not(.total) td:nth-child(5), table.tooltable tr:not(.total) td:nth-child(6),
    table.tooltable tr.total td:nth-child(2), table.tooltable tr.total td:nth-child(3)) span[data-out] {
  display: inline-block; min-width: 12.5ch; text-align: right; }
/* Fab, mats & bores (Russell, 2026-10-16) joins the centered-box rule above; its tables take the card's full width so the
   boxes have room ($ amounts in nine columns did not fit in 1050px). */
.pane-separate .card > table:not(.sumtable) { max-width: none; }
.pane-separate table:not(.grid) td.n { padding-left: 4px; padding-right: 4px; text-overflow: clip; }   /* 118px columns: box + 8px fits */
/* Mats and Bores (Russell, 2026-10-16): Description cut to 5/8 of its width (375px -> 234px) to save screen area; the table
   narrows by the same amount so the number columns keep their 118px. */
.pane-separate .card > table.unittable { max-width: 1106px; }
table.unittable col.c-desc { width: 234px; }
/* Mats and Bores: a long Description wraps onto more lines inside its 234px column (Russell, 2026-10-26) */
table.unittable td.cell textarea.wrap { width: 100%; box-sizing: border-box; }
/* Pay items tab (Russell, 2026-10-16: "line up the numbers the same way ... center under, and shade every other column"):
   the stage table, the pay items grid and the profit-by-item table. Numbers sit right-justified in a fixed-width box centered
   under the heading; codes, units and picks are centered; descriptions and notes stay left; every other column shaded. */
:is(.paystages, .paytable, .profitbyitem) td.n { text-align: center; padding-left: 4px; padding-right: 4px; text-overflow: clip; }
:is(.paystages, .paytable, .profitbyitem) td.n span:is([data-out], .nb) { display: inline-block; min-width: 12ch; text-align: right; }
.paystages td.n.shares { text-align: center; }
.paystages td.n.shares span[data-out] { min-width: 0; }
.paystages td.cell input.num { display: block; width: calc(9ch + 10px); margin: 0 auto; padding-right: 5px; text-align: right; }
.paystages td.cell select { text-align: center; text-align-last: center; }
.paytable td.cell.item input { text-align: center; }
.paytable td.cell.wide input { display: block; margin: 0 auto; padding-right: 5px; }
.paytable tr.total td.n[colspan] { text-align: right; }
.paytable td.calc { background: transparent; }
:is(.paystages, .paytable, .profitbyitem) tr:not(.total) > :nth-child(even) { background: var(--shade); }
@media print { :is(.paystages, .paytable, .profitbyitem) td, :is(.paystages, .paytable, .profitbyitem) th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Pay items: Description and the client sheet note wrap onto more lines when they run long, and the row grows to fit
   (Russell, 2026-10-16) */
td.cell textarea.wrap { display: block; width: 300px; min-height: 0; resize: none; overflow: hidden; field-sizing: content;
  font: inherit; line-height: 1.3; padding: 3px 5px; border: 1px solid transparent; background: transparent; border-radius: 6px;
  text-align: left; white-space: pre-wrap; }
td.cell textarea.wrap:hover { border-color: var(--input-line); }
td.cell textarea.wrap:focus { background: var(--input); border-color: var(--accent); outline: none; }
/* Pay items, Profit: room on each side of the dollar column, between the labels and the notes (Russell, 2026-10-16) */
.pane-pay table.profitsum td.n { padding-left: 40px; padding-right: 40px; }
.pane-pay table.profitsum td:first-child { white-space: nowrap; }
/* Mats and Bores (Russell, 2026-10-16): every other column shaded; Qty and Unit centered under their headings like Rentals.
   Columns: 1 Description, 2 Qty, 3 Unit, 4 Unit cost, 5 Markup $ / unit, 6 Cost, 7 Markup, 8 Total */
table.unittable tr:not(.total) > :nth-child(even):not(:last-child) { background: var(--shade); }
table.unittable tr:not(.total) td:nth-child(2) input.num { text-align: center; padding-right: 5px; }
table.unittable tr:not(.total) td:nth-child(3) select { text-align: center; text-align-last: center; }
@media print { table.unittable td, table.unittable th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* the amounts here run to $99,999.99, so a narrower box sits them closer under their headings */
table.unittable td.cell input.num:not(:is(td:nth-child(2) input)) { width: calc(9.5ch + 10px); }
.pane-separate table.unittable td.n span[data-out] { min-width: 10ch; }
/* Bid summary, By stage: every other column shaded (Russell, 2026-10-16) */
table.bystage tr > :nth-child(even) { background: var(--shade); }
@media print { table.bystage td, table.bystage th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Client bid sheet: contact, phone, email, printed name and title each on a line of their own; the title box wider for long
   titles (Russell, 2026-10-16) */
.sheetfields .newline.span2 { grid-column: 1 / span 2; }
.sheetfields .newline.span3 { grid-column: 1 / span 3; }
@media (max-width: 700px) { .sheetfields .newline.span2, .sheetfields .newline.span3 { grid-column: 1 / -1; } }
/* Cost codes (Russell, 2026-10-16: "line up the numbers the same way"): amounts right-justified in a fixed-width box centered
   under the heading; the code number centered */
.pane-codes table.codetable td.n { text-align: center; padding-left: 4px; padding-right: 4px; }
.pane-codes table.codetable td.n span[data-out] { display: inline-block; min-width: 12ch; text-align: right; }
.pane-codes table.codetable td.cell.wide input.num:not([data-col]) { display: block; width: calc(12ch + 10px); margin: 0 auto; padding-right: 5px; }
.codetable td.cell.code input { text-align: center; }
.sheetfields textarea.sigblock { width: 100%; resize: vertical; font: inherit; line-height: 1.4; }
/* Bid contacts: the Contact and Signer picks on the Client bid sheet, and the list they come from (Russell, 2026-10-16) */
.sheetfields .field select[data-pick] { width: 100%; margin-bottom: 6px; }
.sheetfields .sigshow { white-space: pre-line; line-height: 1.4; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 6px;
  background: var(--head); min-height: 2.8em; }
table.bctable td.cell input { width: 100%; }
/* Estimates list: "Start from a copy" picks the estimate to start from, on one line with its Start button */
#copyPick:not([hidden]) { display: inline-flex; gap: 8px; align-items: center; }
#copyPick select { width: auto; max-width: 360px; }
/* Cost codes, bottom card (Russell, 2026-10-16): the code in each "which code" box centered; the overhead % centered under
   its heading */
.pane-codes .coderules input { text-align: center; }
.pane-codes table.ohsplit td.cell input.num { text-align: center; padding-right: 5px; }
/* Schedule (Russell, 2026-10-16): numbers and dates right-justified in a box centered under their headings, stage names on
   one line, every other column shaded; the summary card's figures get room on each side */
.pane-schedule table.schsum td.n { padding-left: 40px; padding-right: 40px; }
.pane-schedule table.schsum td:first-child { white-space: nowrap; }
.pane-schedule :is(table.schstages, table.schacts) td.n { text-align: center; padding-left: 6px; padding-right: 6px; }
.pane-schedule :is(table.schstages, table.schacts) td.n span[data-out] { display: inline-block; min-width: 10ch; text-align: right; }
.pane-schedule :is(table.schstages, table.schacts) td.cell input.num:not([data-col]) { display: block; width: calc(9ch + 10px); margin: 0 auto;
  padding-right: 5px; text-align: right; }
.pane-schedule :is(table.schstages, table.schacts) td.cell select { display: block; margin: 0 auto; }
.pane-schedule table.schstages td.left { white-space: nowrap; }
.pane-schedule :is(table.schstages, table.schacts) td.calc { background: transparent; }
.pane-schedule :is(table.schstages, table.schacts) tr > :nth-child(even) { background: var(--shade); }
@media print { .pane-schedule :is(table.schstages, table.schacts) :is(td, th) { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* the Schedule's figures are short (14,683 · 100.0% · -3.5); dates 10/19/2026 need a little more */
.pane-schedule :is(table.schstages, table.schacts) td.n span[data-out] { min-width: 7ch; }
.pane-schedule :is(table.schstages, table.schacts) td.n span[data-fmt="date"] { min-width: 9.5ch; }
.pane-schedule :is(table.schstages, table.schacts) td.cell input.num:not([data-col]) { width: calc(6ch + 10px); }
.pane-schedule table.schacts td.cell.wide input.num:not([data-col]) { width: calc(8ch + 10px); }
/* Manpower & equipment (Russell, 2026-10-16): figures and dates centered under their headings (days on the job and a
   subcontractor's cost right-justified in a box, so the decimals line up), cost codes centered, every other column shaded.
   The day-by-day grid is left as it was. */
.pane-manpower table.mptable td.n { text-align: center; padding-left: 6px; padding-right: 6px; }
.pane-manpower table.mptable td.n span:is([data-out], .nb) { display: inline-block; min-width: 7ch; text-align: right; }
.pane-manpower table.mptable td.n span[data-fmt="date"] { min-width: 9.5ch; }
.pane-manpower table.mptable td.c { text-align: center; }
.pane-manpower table.mptable td.calc { background: transparent; }
.pane-manpower table.mptable tr:not(.total) > :nth-child(even) { background: var(--shade); }
@media print { .pane-manpower table.mptable :is(td, th) { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Manpower & equipment, Subcontractors (Russell, 2026-10-16): the Work and "Cost is in" entries centered under their headings */
.pane-manpower table.mptable td.cell.desc:nth-child(2) input { text-align: center; }
.pane-manpower table.mptable td.cell select { text-align: center; text-align-last: center; }
.pane-manpower table.mptable td.n span:is([data-out], .nb) { min-width: 5ch; }
.pane-manpower table.mptable td.n span[data-fmt="date"] { min-width: 10ch; }
/* Vendors & subcontractors (Russell, 2026-10-16) */
table.vendtable td.c { text-align: center; }
table.vendtable input.vlist { min-width: 220px; }
table.vendtable td:last-child .btn { white-space: nowrap; }
/* the delete column has room for "Sure?" on the second-click check, not just the ✕ (Russell, 2026-10-16: it showed "Sur") */
table.even col.c-del { width: 66px; }
.icon.armed { white-space: nowrap; }
/* BCC Lists & Info (Russell, 2026-10-16) */
.linkbtn { border: 0; background: none; padding: 0 0 0 6px; color: var(--accent); font-size: 12px; cursor: pointer; text-decoration: underline; }
ol.clarlist { padding-left: 22px; margin: 6px 0 10px; }
ol.clarlist li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
textarea.clartext { flex: 1; width: 100%; max-width: 900px; resize: none; overflow: hidden; field-sizing: content; font: inherit; line-height: 1.4;
  padding: 5px 8px; border: 1px solid var(--input-line); border-radius: 6px; background: var(--input); }
.row textarea#clarNew { min-width: 420px; }
textarea.insbox { width: 100%; max-width: 900px; font: inherit; line-height: 1.4; padding: 8px 10px; border: 1px solid var(--input-line); border-radius: 6px;
  background: var(--input); resize: vertical; }
table.holtable td { white-space: nowrap; }
/* Work in process, Progress by stage (Russell, 2026-10-16): figures right-justified in a box centered under the heading (decimals
   line up), dates centered, stage names on one line, every other column shaded */
.pane-wip table.wipstages td.n { text-align: center; padding-left: 4px; padding-right: 4px; text-overflow: clip; }
.pane-wip table.wipstages td.n span[data-out] { display: inline-block; min-width: 7ch; text-align: right; }
.pane-wip table.wipstages td.n span[data-out][data-fmt="money"], .pane-wip table.wipstages td.n span[data-out][data-fmt="blank0"] { min-width: 12.5ch; }
.pane-wip table.wipstages td.cell.wide input.num { display: block; width: calc(7ch + 10px); margin: 0 auto; padding-right: 5px; text-align: right; }
.pane-wip table.wipstages td.cell input[type=date] { display: block; margin: 0 auto; text-align: center; }
.pane-wip table.wipstages td.left { white-space: nowrap; }
.pane-wip table.wipstages td.calc { background: transparent; }
.pane-wip table.wipstages tr:not(.total) > :nth-child(even) { background: var(--shade); }
@media print { .pane-wip table.wipstages :is(td, th) { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Work in process, Cost by code (Russell, 2026-10-16): amounts right-justified in a box centered under the heading, codes
   centered, every other column shaded (section rows and totals keep their own look) */
.pane-wip table.wipcodes td.n { text-align: center; padding-left: 4px; padding-right: 4px; }
.pane-wip table.wipcodes td.n span[data-out] { display: inline-block; min-width: 12.5ch; text-align: right; }
.pane-wip table.wipcodes td.n span[data-out][data-fmt="pct4"] { min-width: 7ch; }
.pane-wip table.wipcodes td.c { text-align: center; }
.pane-wip table.wipcodes tr:not(.total):not(.sec) > :nth-child(even) { background: var(--shade); }
@media print { .pane-wip table.wipcodes :is(td, th) { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.pane-wip table.wipcodes td.n span[data-out] { min-width: 11.5ch; }
.pane-wip table.wipcodes td.n span[data-out][data-fmt="pct4"] { min-width: 6.5ch; }
.pane-wip table.wipcodes tr:not(.sec) td:nth-child(2) { white-space: normal; min-width: 130px; }
.pane-wip table.wipcodes tr.unrow > td { background: transparent; }
/* Work in process, Billing by pay item (Russell, 2026-10-16): Description wraps in a narrower column so the figures have room;
   item and unit centered; figures right-justified in a box centered under the heading; every other column shaded */
.pane-wip table.wipbill td.desc { white-space: normal; min-width: 220px; max-width: 320px; }
.pane-wip table.wipbill td.c { text-align: center; }
.pane-wip table.wipbill td.n { text-align: center; padding-left: 4px; padding-right: 4px; }
.pane-wip table.wipbill td.n span:is([data-out], .nb) { display: inline-block; min-width: 11.5ch; text-align: right; }
.pane-wip table.wipbill td.n span[data-out][data-fmt="pct4"], .pane-wip table.wipbill td.n span.nb { min-width: 7ch; }
.pane-wip table.wipbill td.cell.wide input.num { display: block; width: calc(8ch + 10px); margin: 0 auto; padding-right: 5px; text-align: right; }
.pane-wip table.wipbill td.calc { background: transparent; }
.pane-wip table.wipbill tr:not(.sum) > :nth-child(even) { background: var(--shade); }
.pane-wip table.wipbill tr.sum td:first-child { text-align: right; padding-right: 12px; }
@media print { .pane-wip table.wipbill :is(td, th) { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Work in process, QuickBooks actuals and Change orders (Russell, 2026-10-16): amounts right-justified in a box centered under the
   heading, picks and percents centered, every other column shaded */
.pane-wip :is(table.wipqb, table.wipcos) td.cell.wide input.num { display: block; width: calc(12ch + 10px); margin: 0 auto; padding-right: 5px; text-align: right; }
.pane-wip :is(table.wipqb, table.wipcos) td.n { text-align: center; padding-left: 4px; padding-right: 4px; }
.pane-wip :is(table.wipqb, table.wipcos) td.n span[data-out] { display: inline-block; min-width: 11.5ch; text-align: right; }
.pane-wip table.wipcos td.cell select { display: block; margin: 0 auto; text-align: center; text-align-last: center; }
.pane-wip table.wipcos td.cell input.num:not(.wide input) { text-align: center; }
.pane-wip table.wipcos td:nth-child(6) input.num { display: block; width: calc(7ch + 10px); margin: 0 auto; text-align: center; }
.pane-wip :is(table.wipqb, table.wipcos) td.calc { background: transparent; }
.pane-wip :is(table.wipqb, table.wipcos) tr:not(.total) > :nth-child(even) { background: var(--shade); }
@media print { .pane-wip :is(table.wipqb, table.wipcos) :is(td, th) { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.pane-wip table.wipcos td:nth-child(6) input.num { width: calc(9ch + 10px); }
/* Work in process, The job to date: room on each side of the figures, labels on one line */
.pane-wip table.wipsum td.n { padding-left: 40px; padding-right: 40px; }
.pane-wip table.wipsum td:first-child { white-space: nowrap; }
/* Project page (Russell, 2026-10-16): the estimate tabs' layout. lineUpTables() boxes each figure (width of its column's widest),
   these rules center the box under the heading and shade every other column */
.projpage table td.n { text-align: center; padding-left: 6px; padding-right: 6px; }
.projpage table td.n > .nb { display: inline-block; text-align: right; }
.projpage table td.c { text-align: center; }
.projpage table td.altcol { background: var(--shade); }
@media print { .projpage table td.altcol { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.projpage .kvshort { max-width: 520px; }
.projpage #chDate { width: auto; flex: 0 0 auto; }
.projpage .kv { max-width: 620px; }
.projpage #coStatus, .projpage #paNewEnd, .projpage #paEnd { width: auto; flex: 0 0 auto; }
/* People (Russell, 2026-10-16): narrower name and position, the rest centered under their headings, pay figures right-justified
   in a box centered under the heading, every other column shaded */
table.pptable td { text-align: center; }
table.pptable td:first-child, table.pptable td:first-child input { text-align: left; }
table.pptable td:first-child input { width: 240px; }
table.pptable td:nth-child(2) select { width: 190px; }
table.pptable input.w-emp:not(.num) { text-align: center; }
table.pptable.postable td:first-child input { width: 260px; }
table.pptable.postable td:nth-child(2) input { text-align: center; }
table.paytable2 td:nth-child(2) select { width: auto; }
table.paytable2 td.n input.num { display: block; width: calc(11ch + 10px); margin: 0 auto; padding-right: 5px; text-align: right; }
table.paytable2 td.n .hint { text-align: center; }
table.paytable2 td:last-child input { margin: 0 auto; display: block; }
table.pptable tr > :nth-child(even) { background: var(--shade); }
table.pptable tr.off > :nth-child(even) { background: transparent; }
/* Daily sheet on a desk screen (Russell, 2026-10-16): each person's line on one row, buttons included, with narrower code and stage
   picks; each footage line with its boxes close to the stage name. Phone and upright-iPad layouts above are unchanged. */
@media (min-width: 1200px) {
  .tline { grid-template-columns: minmax(200px, 1.2fr) 230px 180px 80px minmax(140px, 1fr) auto; }
  .tline .tstate { grid-column: 1 / 2; grid-row: 2; }
  .tline .tbtns { grid-column: 6 / 7; grid-row: 1; white-space: nowrap; }
  .tline .tstate { grid-row: auto; grid-column: 1 / 5; }
  .fline { grid-template-columns: minmax(420px, 560px) 100px 110px minmax(160px, 360px); justify-content: start; }
}
/* the top-bar button of the page on screen (Russell, 2026-10-16) */
#userbox .btn.navon { background: var(--on); border-color: var(--on); color: #fff; }
/* finished payroll weeks not processed (Russell, 2026-10-17): red so it is not missed */
#userbox .btn.paypend { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 700; }
/* Tickets (Russell, 2026-10-16): the new-ticket boxes at normal width on one line; the list centered under its headings, hours
   right-justified in a box, every other column shaded */
#ntDate { width: auto; flex: 0 0 auto; }
table.tktable td.c { text-align: center; }
table.tktable td.n { text-align: center; }
table.tktable td.n .nb { display: inline-block; min-width: 7ch; text-align: right; }
table.tktable tr > :nth-child(even) { background: var(--shade); }
/* the estimate tab on screen is green too, like the top-bar button (Russell, 2026-10-16) */
.tab.on { color: #fff; background: var(--on); border-bottom-color: var(--on); border-radius: 6px 6px 0 0; }
/* Field ticket (Russell, 2026-10-16): every box centered under its heading, every other column shaded, cost as money, the client
   representative given room */
.ticket table.tk-table td.c { text-align: center; }
.ticket table.tk-table td.c > select, .ticket table.tk-table td.c > input:not([type=checkbox]) { margin: 0 auto; }
.ticket table.tk-table td.c > select { min-width: 220px; }
.ticket table.tk-mat td:nth-child(2) input { width: 100%; max-width: 420px; }
.ticket table.tk-table tr > :nth-child(even) { background: var(--shade); }
.ticket .tk-rep { margin-top: 18px; margin-bottom: 8px; }
/* New PO request (Russell, 2026-10-16): "Bought on" beside the emergency tick, lines centered and shaded, the total on its own line */
.po-form #poBought { width: auto; }
.po-form .po-emerg { align-items: center; margin-top: 8px; }
.po-form .po-why { margin-top: 14px; }
.po-form table.po-lines td.c { text-align: center; }
.po-form table.po-lines td.c > input:not([type=checkbox]), .po-form table.po-lines td.c > select { margin: 0 auto; display: block; }
.po-form table.po-lines tr > :nth-child(even) { background: var(--shade); }
.po-form .po-total { font-weight: 700; margin: 10px 0; }
.projpage #niKind { width: auto; flex: 0 0 auto; }
/* Rates (Russell, 2026-10-16): the new-sheet boxes on one line at normal widths; rate tables centered under their headings,
   every other column shaded */
#nrRule, #nrCopy { width: auto; flex: 0 0 auto; }
table.ratetable td.c { text-align: center; }
table.ratetable td.c > input:not([type=checkbox]), table.ratetable td.c > select { display: block; margin: 0 auto; }
table.ratetable td.c > select { width: auto; }
table.ratetable tr > :nth-child(even) { background: var(--shade); }

/* Users page: the Modules pick opens under its summary */
details.mods summary { cursor: pointer; white-space: nowrap; }
details.mods[open] { min-width: 150px; }
.modpick { display: block; white-space: nowrap; font-weight: normal; margin: 2px 0; }
/* Users page: picks as wide as their words (not cut off), centered under the headings; buttons at the right */
.userpage td select { width: auto; max-width: 260px; }
.userpage td select[data-user-pos] { max-width: 150px; }
.userpage td.acts { text-align: right; min-width: 170px; }
.userpage td.acts .btn { margin: 2px 0 2px 4px; }
.userpage details.mods { display: inline-block; text-align: left; max-width: 120px; position: relative; }
.userpage details.mods summary { white-space: normal; }
/* the tick boxes drop down over the rows below, so opening them does not widen the table */
.userpage details.mods .modlist { position: absolute; left: 0; top: 100%; z-index: 5; background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px; padding: 6px 10px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
/* on a desk-width screen the users table fits, so its box need not scroll, and the drop-down is not cut off at the last row */
@media (min-width: 1100px) { .userpage .scroll { overflow: visible; } }

/* schedule forecast (stage 23): the client's report prints alone and is never shown on screen */
.sched-print { display: none; }
.sched-alert ul { margin: 4px 0 0 18px; padding: 0; }
.sched-alert.late { background: var(--bad); color: #fff; }
.sched-dates { margin: 10px 0; }
#wxDate.w-date { width: 160px; flex: 0 0 auto; }

/* the day's sheet: open, submitted to the PM, committed (2026-10-20) */
.day-banner { margin-top: 8px; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--line); background: #f6f8fb; font-size: 14px; }
.day-banner.submitted { background: #fff8e6; border-color: #e8c66a; }
.day-banner.committed { background: #f3faf5; border-color: #9fd3ad; }
.day-banner.late { background: #fdecea; border-color: #e0a19a; }
.day-banner .row { margin-top: 6px; }
.day-banner #tReason { width: 100%; max-width: 560px; flex: 1 1 320px; }   /* the note or reason, readable in full */
.day-banner details { margin-top: 6px; font-size: 12px; }