* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy: #1a1a1a;
  --navy-dark: #000000;
  /* Brand accent — REVEAL green. Renamed from --amber (v48 held the green
     under the old orange name); see split plan §slice 1. */
  --accent: #637947;
  --accent-hover: #4e5d38;
  --accent-soft: #eef3e9;
  /* Semantic attention/pending — deliberately NOT green, per brand kit. */
  --amber-soft: #fff7ed;
  --amber-strong: #92400e;
  --bg: #fafafa;
  --border: #e5e5e5;
  --text: #1a1a1a;
  --muted: #525252;   /* v31: bumped from #707070 to clear WCAG AA (4.5:1 on #fafafa) */
  --green: #15803d;          /* v36: 4.5:1 on white — #16a34a failed AA at 3.3:1 */
  --green-dark: #166534;
  --red: #dc2626;
  --red-dark: #991b1b;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --readonly-bg: #f7f7f7;
  --pbg: #1a1a1a;
  --pbga: #404040;
  --pdg: #707070;
  --client: #525252;
  --highlight: #fef3c7;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; color: var(--text); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }

.header { background: var(--navy); color: #fff; padding: 12px 24px; display: flex; align-items: center; gap: 18px; }
.brand { font-size: 16px; font-weight: 600; }
.brand .accent { color: var(--accent); }
.header .pill { padding: 4px 10px; background: rgba(255,255,255,0.1); border-radius: 12px; font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; }
.header .project-select { padding: 4px 10px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; color: #fff; font-size: 12px; font-family: inherit; }
.header .who { margin-left: auto; font-size: 11px; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 8px; }
.header .who-pill { background: rgba(255,255,255,0.1); padding: 3px 9px; border-radius: 10px; font-size: 10px; font-weight: 600; color: #fff; letter-spacing: 0.04em; }
/* Role colours and the Sign out control match dcr.css and the dashboard
   (6 Sep): the same badge was red on DCR and grey here. */
.header .who-pill.role-admin    { background: rgba(220, 38, 38, 0.85); }
.header .who-pill.role-editor   { background: rgba(37, 99, 235, 0.85); }
.header .who-pill.role-ca       { background: rgba(124, 58, 237, 0.85); }
.header .who-pill.role-approver { background: rgba(22, 163, 74, 0.85); }
.header .who-pill.role-readonly { background: rgba(107, 114, 128, 0.85); }
.header .logout { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); padding: 5px 12px; border-radius: 6px; font-size: 11px; font-family: inherit; cursor: pointer; }
.header .logout:hover { background: rgba(255,255,255,0.1); }

.tabs { background: var(--navy-dark); padding: 0 24px; display: flex; gap: 2px; }
.tab { padding: 10px 18px; color: rgba(255,255,255,0.55); cursor: pointer; font-size: 13px; font-weight: 500; letter-spacing: 1px; border: none; background: transparent; font-family: inherit; transition: color 0.15s, background 0.15s; border-radius: 6px 6px 0 0; display: inline-flex; align-items: center; gap: 8px; }
.tab:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.05); }
.tab.active { color: var(--navy); background: var(--bg); }
.tab .badge { padding: 1px 7px; background: var(--accent); color: #fff; border-radius: 10px; font-size: 10px; font-weight: 600; }

.panel { display: none; flex: 1; overflow: auto; }
.panel.active { display: block; }
/* v31: normalised to 8/12/16/24 spacing scale (was 14px). */
.panel-header { background: #fff; border-bottom: 1px solid var(--border); padding: 16px 24px; display: flex; align-items: center; gap: 16px; }
.panel-header h1 { font-size: 16px; font-weight: 600; color: var(--navy); }
.panel-header .sub { color: var(--muted); font-size: 12px; }
.panel-header .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* v31: btn now clears the 32px touch-target floor (was ~28px) and locks to the 12/13/14 type scale. */
.btn { padding: 8px 14px; min-height: 32px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer; font-size: 12px; font-family: inherit; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover { background: #334155; }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover { background: #4e5d38; }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover { background: var(--red-dark); }
.btn-success { background: var(--green); color: #fff; border-color: var(--green); }
.btn-success:hover { background: var(--green-dark); }

/* REGISTER (mostly unchanged from v3) */
/* v31: normalised to 8/12/16/24 spacing scale (was 10px). */
.toolbar { padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.toolbar input[type=search], .toolbar select { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; background: #fff; }
.toolbar input[type=search] { width: 260px; }
.toolbar label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; }
.filter-pill { padding: 6px 12px; background: var(--accent-soft); color: var(--accent-hover); border: 1px solid #fde68a; border-radius: 6px; font-size: 12px; cursor: pointer; font-family: inherit; font-weight: 500; }
.filter-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.density-toggle { display: inline-flex; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; }
.density-toggle button { padding: 5px 10px; border: 0; background: #fff; cursor: pointer; font-size: 11px; font-family: inherit; color: var(--muted); }
.density-toggle button.active { background: var(--navy); color: #fff; }

.table-scroll {
  overflow: auto;
  padding: 0 24px 0;
  max-height: calc(100vh - 230px);
  margin: 16px 0 0;
  border-bottom: 1px solid var(--border);
}
/* v18: Editor role — can edit Status, PACE Comments, Alt Spec, Alt Description,
   Subcontractor, Tech Data, Phys Sample. Cannot set Sample Required (PDG-only). */
body.role-editor table.register tbody td .will-submit { opacity: 0.45; pointer-events: none; }
/* Everything else stays interactive for Editor */

/* Approver — can only edit Sample Required (when also PDG). All other Register
   cells locked. Sign-off still happens via the Form. */
body.role-approver table.register tbody td .tri-toggle,
body.role-approver table.register tbody td .sub-cell,
body.role-approver table.register tbody td .status-select,
body.role-approver table.register tbody td .date-input,
body.role-approver table.register tbody td .alt-desc-input,
body.role-approver table.register tbody td .pace-input,
body.role-approver table.register tbody td .tech-attach-btn { opacity: 0.45; pointer-events: none; }
body.role-approver .tab[data-tab="stickers"] { display: none; }   /* no Sticker access */

/* v32: Add Sample button is admin + editor only. Default hidden; the roles that
   are allowed re-show it. The "editor" role isn't explicitly named on the body
   in this prototype (it's the absence of role-* classes for the default user),
   so we default to visible and hide only for approver / readonly. Matches how
   other editor-permitted actions behave. */
body.role-approver #add-sample-btn,
body.role-readonly #add-sample-btn { display: none !important; }

/* v32: ADDED badge — marks samples added inside the app (not pulled from the
   architect's finishes schedule). Sits beside the sample code so the
   distinction is obvious at a glance. */
.added-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: #ede9fe;
  color: #5b21b6;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Read-only — everything locked including printing */
body.role-readonly table.register tbody td .tri-toggle,
body.role-readonly table.register tbody td .will-submit,
body.role-readonly table.register tbody td .sub-cell,
body.role-readonly table.register tbody td .status-select,
body.role-readonly table.register tbody td .date-input,
body.role-readonly table.register tbody td .alt-desc-input,
body.role-readonly table.register tbody td .pace-input,
body.role-readonly table.register tbody td .tech-attach-btn,
body.role-readonly .form-action-zone,
body.role-readonly button[onclick*="print"],
body.role-readonly button[onclick*="Print"] { opacity: 0.45; pointer-events: none; }

/* v12: full-row colour on approval-terminal states.
   v31: added Pending Review (yellow) so the four working states match the visual language:
        TBC = neutral · Pending Review = yellow · Approved = green · Approved w/ comments = blue · Rejected = red */
/* v36: colour discipline — status is the only row colour, at low intensity, with a
   4px coloured edge on the sticky # cell doing the fast-scan work. */
tr.row-approved td { background: #f2fdf5 !important; }
tr.row-approved td.readonly, tr.row-approved td.sticky, tr.row-approved:hover td { background: #e3f9ea !important; }
tr.row-approved td.sticky-1 { box-shadow: inset 4px 0 0 var(--green); }
tr.row-approved-comments td { background: #f3f8ff !important; }
tr.row-approved-comments td.readonly, tr.row-approved-comments td.sticky, tr.row-approved-comments:hover td { background: #e4effe !important; }
tr.row-approved-comments td.sticky-1 { box-shadow: inset 4px 0 0 var(--blue); }
tr.row-rejected td { background: #fef5f5 !important; }
tr.row-rejected td.readonly, tr.row-rejected td.sticky, tr.row-rejected:hover td { background: #fde8e8 !important; }
tr.row-rejected td.sticky-1 { box-shadow: inset 4px 0 0 var(--red); }
tr.row-pending-review td { background: #fefce8 !important; }
tr.row-pending-review td.readonly, tr.row-pending-review td.sticky, tr.row-pending-review:hover td { background: #fdf7d7 !important; }
tr.row-pending-review td.sticky-1 { box-shadow: inset 4px 0 0 #eab308; }
tr.row-resubmit td { background: #fff8f0 !important; }
tr.row-resubmit td.readonly, tr.row-resubmit td.sticky, tr.row-resubmit:hover td { background: #ffeeda !important; }
tr.row-resubmit td.sticky-1 { box-shadow: inset 4px 0 0 var(--accent); }

/* v12: column resize handle on TH */
table.register thead th { position: relative; }
/* v28: invisible spacer column at the table's right edge.
   WAS width: 4000px — "headroom to grow" for column resizing. Combined
   with `width: max-content` that made the table ~5.5k px wide and left a
   screen of dead whitespace past the last column. `auto` collapses it to
   nothing when the columns already exceed the viewport, and `min-width:
   100%` on the table (below) makes it absorb the remainder when they do
   not. Same job, without inventing 4000px of scroll. */
table.register thead th.register-spacer,
table.register tbody td.register-spacer {
  width: auto !important;
  border: 0 !important;
  background: transparent !important;
  cursor: default !important;
  padding: 0 !important;
}
/* v28: Alt Description + PACE Comments as auto-growing textareas that fill their cell */
/* v31: textarea sized to body-text scale (13px) to match table cell text. */
.cell-textarea {
  display: block;
  width: 100%;
  min-height: 28px;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: #1f2937;
  padding: 4px 8px;
  border-radius: 4px;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
  box-sizing: border-box;
}
.cell-textarea:hover { border-color: #d1d5db; background: #fff; }
.cell-textarea:focus {
  border-color: var(--accent); background: #fff; outline: none;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.15);
}
/* v26: wider handle (20px) + direct per-element listeners + Pointer Events */
/* v32: removed `position: relative` from .resizable — it was conflicting with the
   sticky thead rule below and the handle still anchors correctly because
   `position: sticky` also creates a positioning context for absolute children. */
.col-resize {
  position: absolute; top: 0; right: -10px; bottom: 0; width: 20px;
  cursor: col-resize;
  z-index: 1000;
  background: transparent;
  touch-action: none;
}
.col-resize::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 9px; width: 2px;
  background: #cbd5e1;
  border-radius: 0;
  /* Was 25%–75% at 2px: present on 15 columns since slice 2C and reported
     as "missing" on 5 Sep. A handle nobody can see is a handle nobody uses. */
}
.col-resize:hover { background: rgba(37, 99, 235, 0.15); }
.col-resize:hover::after { background: var(--blue); width: 3px; }
.col-resize.active { background: rgba(37, 99, 235, 0.3); }
.col-resize.active::after { background: var(--blue-dark); width: 3px; }
/* v12: Subs project-chip checkboxes */
.proj-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; margin: 0 3px 3px 0; background: #f3f4f6; color: #4b5563; border-radius: 8px; font-size: 11px; cursor: pointer; user-select: none; border: 1px solid transparent; }
.proj-chip input { margin: 0; width: 12px; height: 12px; cursor: pointer; }
.proj-chip.active { background: #d1fae5; color: #065f46; font-weight: 500; border-color: #6ee7b7; }
.proj-chip input:disabled + * { opacity: 0.5; }
.projects-list { display: flex; flex-wrap: wrap; gap: 2px; }

tr.not-in-use td { background: #f0f0f0 !important; color: #909090 !important; font-style: italic; }
tr.not-in-use td .trade-badge,
tr.not-in-use td .sub-cell,
tr.not-in-use td .tri-toggle,
tr.not-in-use td .cell-text,
tr.not-in-use td .cell-date,
tr.not-in-use td .approvals-cell,
tr.not-in-use td .status-chip { opacity: 0.45; pointer-events: none; }
.will-submit { display: inline-flex; border: 1px solid #d1d5db; border-radius: 5px; overflow: hidden; }
/* v31: each Yes/No button clears the 32px touch-target floor (was ~22px). */
.will-submit button { padding: 7px 14px; min-height: 32px; border: 0; background: #fff; cursor: pointer; font-size: 12px; font-family: inherit; color: var(--muted); font-weight: 600; }
.will-submit button.yes.active { background: var(--green); color: #fff; }
.will-submit button.no.active  { background: var(--red); color: #fff; }
.will-submit button:hover:not(.active) { background: #f3f4f6; }
.will-submit.locked { opacity: 0.55; pointer-events: none; cursor: not-allowed; }
.locked-hint { font-size: 9.5px; color: var(--muted); margin-left: 4px; font-style: italic; }

/* ── v38: COLUMN GROUPING BAND (Excel-style) ──
   A thin band row sits above the column headers. Each group gets a labelled,
   clickable cell (▾ minimises). Minimised groups collapse to a 26px ▸ stub
   IN PLACE, so the hidden columns' location stays visible and re-expansion is
   one click, right where you are.
     G1 = Rev · Trade · Sample Required           (cols 3-5, stub col 3)
     G2 = Spec Description · Location · Ver       (cols 9-11, stub col 9)
     G3 = Date · Alt · Sub · Tech · Phys          (cols 12-17, stub col 12) */
tr.group-band th {
  position: sticky; top: 0; z-index: 6;
  height: 24px; box-sizing: border-box;
  background: #eef0f3; padding: 4px 10px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--muted); text-transform: none; text-align: left;
  border-bottom: 1px solid var(--border); cursor: default;
  white-space: nowrap; overflow: hidden;
}
tr.group-band th.band { cursor: pointer; color: #374151; }
tr.group-band th.band:hover { background: #e2e5e9; color: var(--navy); }
tr.group-band th.corner { left: 0; z-index: 25; }
/* main header row sits below the band */
table.register thead tr.cols th { top: 24px; }
/* group-minimised: hide all but the stub column; stub shrinks to a ▸ handle */
body.g1-min #register-table tr.cols th:nth-child(4),  body.g1-min #register-table tbody tr:not(.expansion-row) td:nth-child(4),
body.g1-min #register-table tr.cols th:nth-child(5),  body.g1-min #register-table tbody tr:not(.expansion-row) td:nth-child(5),
body.g2-min #register-table tr.cols th:nth-child(10), body.g2-min #register-table tbody tr:not(.expansion-row) td:nth-child(10),
body.g2-min #register-table tr.cols th:nth-child(11), body.g2-min #register-table tbody tr:not(.expansion-row) td:nth-child(11),
body.g3-min #register-table tr.cols th:nth-child(13), body.g3-min #register-table tbody tr:not(.expansion-row) td:nth-child(13),
body.g3-min #register-table tr.cols th:nth-child(14), body.g3-min #register-table tbody tr:not(.expansion-row) td:nth-child(14),
body.g3-min #register-table tr.cols th:nth-child(15), body.g3-min #register-table tbody tr:not(.expansion-row) td:nth-child(15),
body.g3-min #register-table tr.cols th:nth-child(16), body.g3-min #register-table tbody tr:not(.expansion-row) td:nth-child(16),
body.g3-min #register-table tr.cols th:nth-child(17), body.g3-min #register-table tbody tr:not(.expansion-row) td:nth-child(17) { display: none; }
body.g1-min #register-table tr.cols th:nth-child(3),
body.g2-min #register-table tr.cols th:nth-child(9),
body.g3-min #register-table tr.cols th:nth-child(12) { width: 26px !important; padding: 4px !important; }
body.g1-min #register-table tr.cols th:nth-child(3) > *,
body.g2-min #register-table tr.cols th:nth-child(9) > *,
body.g3-min #register-table tr.cols th:nth-child(12) > * { display: none; }
body.g1-min #register-table tbody tr:not(.expansion-row) td:nth-child(3),
body.g2-min #register-table tbody tr:not(.expansion-row) td:nth-child(9),
body.g3-min #register-table tbody tr:not(.expansion-row) td:nth-child(12) {
  padding: 4px 2px !important; cursor: pointer; background: #f3f4f6 !important; text-align: center;
  /* v38.2: kill raw TEXT content too — G2's stub column (Spec Description) holds a bare
     text node, which `> * { display:none }` can't hide. font-size:0 removes it; the
     ::after caret restores its own size below. */
  font-size: 0 !important; line-height: 0 !important; white-space: nowrap !important; overflow: hidden !important;
}
body.g1-min #register-table tbody tr:not(.expansion-row) td:nth-child(3) > *,
body.g2-min #register-table tbody tr:not(.expansion-row) td:nth-child(9) > *,
body.g3-min #register-table tbody tr:not(.expansion-row) td:nth-child(12) > * { display: none; }
body.g1-min #register-table tbody tr:not(.expansion-row) td:nth-child(3)::after,
body.g2-min #register-table tbody tr:not(.expansion-row) td:nth-child(9)::after,
body.g3-min #register-table tbody tr:not(.expansion-row) td:nth-child(12)::after {
  content: "▸"; color: #9ca3af; font-size: 9px; line-height: normal;
}

/* ── STICKERS TAB (v13: Excel-style A4 sticker, one sample per sheet) ── */
.stickers-tab { padding: 24px; }
.stickers-tab .picker { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.stickers-tab .picker .nav { display: inline-flex; gap: 4px; align-items: center; }
.stickers-tab .picker .nav .nav-btn { padding: 4px 10px; border: 1px solid #d1d5db; background: #fff; border-radius: 5px; cursor: pointer; font-family: inherit; font-size: 12px; }
.stickers-tab .picker .nav .nav-btn:hover { background: #f3f4f6; }
.sticker-stack { display: flex; flex-direction: column; gap: 24px; align-items: center; }
/* v30: sheet is now locked to a fixed 2×3 grid so 6 stickers always fit on a
   single A4 page, regardless of how long the Description / Location / Alt Desc
   text is. Each sticker clips overflow internally rather than pushing taller. */
.es-sheet {
  width: 210mm; height: 297mm; background: #fff;
  padding: 8mm 6mm;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3mm;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  border: 1px dashed #cbd5e1;
  box-sizing: border-box;
}
.excel-sticker {
  background: #fff; border: 1.5px solid #000;
  font-family: Calibri, Arial, sans-serif;
  font-size: 7pt; color: #000;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 0;   /* allow the grid row to constrain this cell */
  min-width: 0;
}
/* v31: watermark removed entirely (was reducing 6.5pt body-text legibility on screen and adding
   one decoded PNG per sticker). The sticker now relies on its own border + header as identity. */
.excel-sticker .es-header {
  background: #fff; border-bottom: 1px solid #000;
  padding: 3px 6px; font-weight: 700; font-size: 7pt;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.3px;
  position: relative; z-index: 1;
}
.excel-sticker table.es-grid {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  position: relative; z-index: 1;
}
.excel-sticker table.es-grid td {
  border: 1px solid #555; padding: 3px 5px; vertical-align: top;
  font-size: 7pt; line-height: 1.22;
  background: rgba(255,255,255,0.9);
}
.excel-sticker table.es-grid td[colspan] { border-left-color: #555; }
/* v19: inline split inside a value cell */
.excel-sticker .es-inline-split { display: flex; align-items: center; gap: 8px; }
.excel-sticker .es-inline-split > span { white-space: nowrap; }
/* v20: full visibility on Description / Location / Alt Spec / Alt DESC'PT.
   v22: Alt Description sized to match Description cell.
   v29: all four cells auto-grow to whatever the Register feeds in.
   v30: cells clip overflow inside the sticker so the 6-up A4 grid stays intact —
        long text wraps and is hidden past the cell boundary rather than pushing
        the sticker beyond its row. */
.excel-sticker .es-desc-cell,
.excel-sticker .es-location-cell,
.excel-sticker .es-altdesc-cell {
  font-size: 6.5pt;
  line-height: 1.3;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  display: table-cell;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  height: auto;
  min-height: 0;
  resize: none;
}
/* v29: sign-off table sits tight against the body rows */
.excel-sticker table.es-signoff { margin-top: 3px; }
/* Ensure these four rows share the exact same border + padding treatment as every other cell */
.excel-sticker .es-desc-cell,
.excel-sticker .es-location-cell,
.excel-sticker .es-altdesc-cell {
  border: 1px solid #555 !important;
  padding: 3px 5px !important;
  background: rgba(255,255,255,0.92);
}
.excel-sticker .es-label {
  font-weight: 700; font-size: 7pt; width: 22%;
  background: rgba(255,255,255,0.95);
  vertical-align: top;
}
.excel-sticker .es-half-label {
  font-weight: 700; font-size: 7pt; background: rgba(255,255,255,0.95);
}
.excel-sticker .es-cell-num { font-weight: 700; font-variant-numeric: tabular-nums; }
/* v21: removed the old -webkit-line-clamp rules. Visibility + border consistency
   is now solely enforced by the rule further down with !important. */
.excel-sticker .es-altdesc-cell.real { color: #000; font-style: normal; }
.excel-sticker table.es-signoff {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  border-top: 2px solid #000;
  margin-top: auto;
  position: relative; z-index: 1;
}
.excel-sticker table.es-signoff th {
  background: #fff; border: 1px solid #555; padding: 2px 4px;
  font-size: 6pt; font-weight: 700; text-align: left; text-transform: uppercase;
  letter-spacing: 0.3px;
}
.excel-sticker table.es-signoff th.es-status-th { text-align: center; }
.excel-sticker table.es-signoff td {
  border: 1px solid #555; padding: 3px 5px;
  font-size: 6.5pt; background: rgba(255,255,255,0.92);
}
.excel-sticker table.es-signoff td.es-role { font-weight: 700; font-size: 6.5pt; line-height: 1.15; }
.excel-sticker table.es-signoff td.es-status { padding: 0; text-align: center; }
.excel-sticker table.es-signoff tr.es-current-user td { background: #d4edda !important; }
.excel-sticker .es-status-row { display: grid; grid-template-columns: 1fr 1fr 1fr; height: 100%; }
.excel-sticker .es-status-row > div {
  border-right: 1px dotted #aaa; padding: 2px 1px; text-align: center;
  font-size: 6.5pt; font-weight: 700;
}
.excel-sticker .es-status-row > div:last-child { border-right: 0; }
.excel-sticker .es-status-row > div.app { background: #d4edda; color: #155724; }
.excel-sticker .es-status-row > div.astc { background: #fff3cd; color: #856404; }
.excel-sticker .es-status-row > div.rej { background: #f8d7da; color: #721c24; }
.excel-sticker .es-status-row > div.faint { background: transparent; color: #888; font-weight: 600; }
.excel-sticker .es-rev-cell { font-weight: 700; }

@media print {
  body.printing-stickers .header,
  body.printing-stickers .tabs,
  body.printing-stickers .panel-header,
  body.printing-stickers .stickers-tab .picker,
  body.printing-stickers .footer-status,
  body.printing-stickers .notif-bell,
  body.printing-stickers .notif-drawer { display: none !important; }
  body.printing-stickers .panel:not(.active) { display: none !important; }
  body.printing-stickers .stickers-tab { padding: 0 !important; }
  body.printing-stickers .sticker-stack { gap: 0; }
  body.printing-stickers .es-sheet { box-shadow: none; border: 0; page-break-after: always; }
  @page { size: A4 portrait; margin: 0; }
}
/* v29: table-layout: fixed + width: max-content so columns honour their set widths
   and the table grows horizontally as columns are resized (the .table-scroll container
   provides the horizontal scrollbar). Row + cell height locked to auto so vertical
   alignment doesn't stretch when columns shrink. */
table.register { min-width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); table-layout: fixed !important; width: max-content !important; }
table.register tbody tr { height: auto !important; }
table.register tbody td { height: auto !important; min-height: initial !important; }
table.register thead tr { height: auto !important; }
table.register thead th { height: auto !important; min-height: initial !important; }
table.register thead { background: #f9fafb; }
table.register thead th { padding: 11px 12px; text-align: left; font-size: 10.5px; font-weight: 600; color: #4b5563; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); cursor: default; user-select: none; position: relative; }
table.register thead th[data-sort] { cursor: pointer; }
table.register thead th[data-sort]:hover { color: var(--navy); }
.sort-ind { font-size: 8px; color: var(--accent); margin-left: 3px; }
/* v27: header text wraps naturally, no overflow clipping */
table.register thead th .th-text { display: block; padding-right: 14px; word-break: break-word; }
table.register thead th.editable { background: #fffbeb; color: var(--amber-strong); }
table.register thead th.docusign { background: #eff6ff; color: var(--blue-dark); }
/* v31: locked to the 12/13/14 type scale (was 12.5px / 11.5px). */
table.register tbody td { padding: 8px 12px; border-bottom: 1px solid #f3f4f6; vertical-align: top; font-size: 13px; word-break: break-word; white-space: normal; }
table.register tbody td.readonly { background: var(--readonly-bg); color: #374151; }
table.register tbody tr:hover td { background: #fafbfc; }
table.register tbody tr:hover td.readonly { background: #f3f4f6; }
table.register.compact tbody td { padding: 4px 12px; font-size: 12px; }
table.register tbody tr.changed td { background: var(--amber-soft); }
table.register tbody tr.changed td.readonly { background: #fef3c7; }
table.register tbody tr.changed:hover td { background: #fef3c7; }
table.register tbody tr.changed td:first-child { border-left: 4px solid var(--accent); padding-left: 8px; }

/* v32: header row locked to top during vertical scroll. Every thead th sticks at
   top:0, all share #f9fafb so the scrolled content doesn't bleed through.
   z-index ladder: regular tbody td (0) < thead th (5) < sticky tbody td (10) <
   sticky thead th corner (20). Corner cells need the highest so they stay on top
   when the user scrolls both axes simultaneously. */
table.register thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f9fafb;
}
table.register tbody td.sticky { position: sticky; z-index: 10; }
table.register thead th.sticky { z-index: 20; background: #f9fafb; }
table.register .sticky-1 { left: 0; width: 84px; }
table.register .sticky-2 { left: 84px; width: 95px; border-right: 1px solid var(--border); }
/* v36: bulk selection */
.bulk-check { width: 13px; height: 13px; cursor: pointer; margin-right: 6px; vertical-align: -2px; accent-color: var(--accent); }
/* Hidden state relied on an 80px translate carrying it clear of the
   viewport. It does not when the bar is taller than the offset — it sat
   half-visible as a black slab across the bottom of the register for the
   whole of slice 2. Hide it properly and let the transform do the
   animation only. */
.bulk-bar { visibility: hidden; pointer-events: none;
  position: fixed; left: 50%; transform: translateX(-50%) translateY(80px); bottom: 34px; z-index: 80;
  background: var(--navy); color: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  padding: 10px 16px; display: flex; align-items: center; gap: 8px; transition: transform 0.18s ease; }
.bulk-bar.show { visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.bulk-bar .bulk-count { font-size: 12px; font-weight: 600; margin-right: 6px; white-space: nowrap; }
.bulk-bar .btn { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); color: #fff; }
.bulk-bar .btn:hover { background: rgba(255,255,255,0.22); }
.bulk-bar select { padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.12); color: #fff; font-family: inherit; font-size: 12px; }
.bulk-bar select option { color: #1a1a1a; }
body.role-approver .bulk-bar, body.role-readonly .bulk-bar,
body.role-approver .bulk-check, body.role-readonly .bulk-check,
body.role-approver #bulk-check-all, body.role-readonly #bulk-check-all { display: none !important; }
table.register tbody td.sticky { background: var(--readonly-bg); }
table.register tbody tr.changed td.sticky { background: #fef3c7; }

.code { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: #4b5563; }
.sample { font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.trade-badge { display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: 11px; font-weight: 500; white-space: nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; background: #f3f4f6; color: #4b5563; }
.trade-badge::before { content: "●"; font-size: 8px; margin-right: 5px; vertical-align: 1px; color: #9ca3af; }
.trade-badge[data-trade="Sanitary Hardware"]::before { color: #1e40af; }
.trade-badge[data-trade="Stone & Tiling"]::before { color: #9d174d; }
.trade-badge[data-trade="Joiner"]::before { color: #92400e; }
.trade-badge[data-trade="Metalwork"]::before { color: #374151; }
.trade-badge[data-trade="Flooring"]::before { color: #065f46; }
.trade-badge[data-trade="Electrical"]::before { color: #854d0e; }
.trade-badge[data-trade="Painting / Render"]::before { color: #9f1239; }
.trade-badge[data-trade="Windows / Facades"]::before { color: #155e75; }
.trade-badge[data-trade="Carpenter"]::before { color: #9a3412; }
.trade-badge[data-trade="Carpet"]::before { color: #6b21a8; }
.trade-badge[data-trade="Hardware Supplier"]::before { color: #075985; }
.trade-badge[data-trade="Blinds & Curtains"]::before { color: #581c87; }
.trade-badge[data-trade="Whitegoods"]::before { color: #3f6212; }
.trade-badge[data-trade="Signage"]::before { color: #991b1b; }
.trade-badge[data-trade="Structure"]::before { color: #1e293b; }
.trade-badge[data-trade="Membrane / Tanking"]::before { color: #115e59; }
.trade-badge[data-trade="Roofer"]::before { color: #3730a3; }

.rev-pill { display: inline-flex; align-items: center; padding: 1px 6px; background: var(--accent); color: #fff; border-radius: 8px; font-size: 9px; font-weight: 700; margin-left: 4px; }

.status-chip { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.status-chip[data-status="TBC"] { background: #f3f4f6; color: #6b7280; }
.status-chip[data-status="Pending Review"] { background: #fef3c7; color: var(--amber-strong); }
.status-chip[data-status="Approved"] { background: #d1fae5; color: var(--green-dark); }
.status-chip[data-status="Approved w/ comments"] { background: #dbeafe; color: var(--blue-dark); }
.status-chip[data-status="Rejected"] { background: #fee2e2; color: var(--red-dark); }
.status-chip[data-status="Withdrawn"] { background: #e5e5e5; color: #707070; text-decoration: line-through; }
.status-chip[data-status="Resubmit Required"] { background: #ffedd5; color: #9a3412; }
/* Submission Required (0037, 13 Sep): required, not yet sent for review. */
.status-chip[data-status="Submission Required"] { background: #e0e7ff; color: #3730a3; }
.qrp-status.sub { background: #e0e7ff; color: #3730a3; }
.qrp-status.rej { background: #fee2e2; color: #991b1b; }
/* v34: Status is now a button that opens the sample's Form */
button.status-chip { border: 0; cursor: pointer; font-family: inherit; }
button.status-chip:hover { filter: brightness(0.94); box-shadow: 0 0 0 2px rgba(0,0,0,0.07); }
/* v34: Rev column button — lights up (and becomes clickable) when the spec changed since last print */
.rev-btn { padding: 3px 10px; border: 1px solid #d1d5db; background: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; font-family: inherit; cursor: default; color: var(--muted); white-space: nowrap; }
.rev-btn.has-changes { background: var(--highlight); border-color: #f59e0b; color: #92400e; cursor: pointer; }
.rev-btn.has-changes:hover { background: #fde68a; }

.tri-toggle { display: inline-flex; gap: 1px; border: 1px solid #d1d5db; border-radius: 5px; overflow: hidden; background: #fff; }
/* v31: Yes / No / N/A buttons each clear the 32px touch-target floor (was ~22px). */
.tri-toggle button { padding: 7px 12px; min-height: 32px; border: 0; background: transparent; cursor: pointer; font-size: 12px; font-family: inherit; color: #525252; font-weight: 600; }
.tri-toggle button.active.yes { background: var(--green); color: #fff; }
.tri-toggle button.active.no  { background: var(--red); color: #fff; }
.tri-toggle button.active.na  { background: var(--muted); color: #fff; }
.tri-toggle button:hover:not(.active) { background: #f3f4f6; }

select.cell-select, input.cell-text, input.cell-date {
  width: 100%; border: 1px solid transparent; padding: 4px 8px; border-radius: 4px;
  font-family: inherit; font-size: 12px; background: transparent; color: #1f2937;
}
select.cell-select:hover, input.cell-text:hover, input.cell-date:hover { border-color: #d1d5db; background: #fff; }
select.cell-select:focus, input.cell-text:focus, input.cell-date:focus { border-color: var(--accent); background: #fff; outline: none; box-shadow: 0 0 0 2px rgba(245,158,11,0.15); }

.sub-cell { position: relative; display: flex; align-items: center; gap: 4px; }
.sub-cell select { flex: 1; }
.auto-pill, .override-pill, .none-pill { padding: 1px 6px; border-radius: 8px; font-size: 9px; font-weight: 600; cursor: help; flex-shrink: 0; }
.auto-pill { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.override-pill { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; }
.none-pill { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Approvals */
.approvals-cell { cursor: pointer; padding: 4px 6px; border-radius: 4px; display: inline-flex; gap: 4px; align-items: center; transition: background 0.15s; }
.approvals-cell:hover { background: #eff6ff; }
.approvals-cell.expanded { background: #dbeafe; }
.approver { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: #fff; border: 1.5px solid; cursor: help; position: relative; }
.approver.approved { background: var(--green); border-color: var(--green-dark); }
.approver.approved::after { content: "✓"; }
.approver.approved-comments { background: var(--blue); border-color: var(--blue-dark); }
.approver.approved-comments::after { content: "✓"; }
.approver.approved-comments::before { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; background: #fff; border-radius: 50%; border: 1.5px solid var(--blue-dark); }
.approver.rejected { background: var(--red); border-color: var(--red-dark); }
.approver.rejected::after { content: "✗"; }
.approver.pending { background: #fff; color: #9ca3af; border-color: #d1d5db; border-style: dashed; }
.approver-tier {
  display: inline-block; width: 1px; height: 16px; margin: 0 5px;
  background: #d1d5db; vertical-align: middle; flex: 0 0 auto;
}
/* A panel slot that CANNOT be signed yet because a consultant on this
   sample has not signed. Muted and struck through: it is not merely
   unsigned, it is not yet available. app.sample_panel_unlocked() decides
   this, never the client. */
.approver.locked {
  background: #f3f4f6; color: #b6bcc5; border-color: #e5e7eb;
  border-style: dotted; opacity: .75;
}
.approver-letters { font-size: 9.5px; line-height: 1; }
/* v44: consultant signers — purple accent, always first in the strip */
.approver.consult.pending { border-color: #7c3aed; color: #7c3aed; border-style: dashed; }
.approver.consult.approved, .approver.consult.approved-comments { background: #7c3aed; border-color: #5b21b6; }
.approver.consult.rejected { background: var(--red); border-color: var(--red-dark); }
.consult-add { width: 20px; height: 20px; border-radius: 50%; border: 1px dashed #a78bfa; background: #fff; color: #7c3aed; font-size: 12px; line-height: 1; cursor: pointer; font-family: inherit; padding: 0; }
.consult-add:hover { background: #f5f3ff; border-style: solid; }
body.role-approver .consult-add, body.role-readonly .consult-add { display: none !important; }
.consult-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 12.5px; }
.consult-row:last-child { border-bottom: 0; }
.consult-tag { font-size: 10px; font-weight: 700; background: #7c3aed; color: #fff; padding: 3px 8px; border-radius: 8px; }
.form-approver-card.consultant { border-left: 3px solid #7c3aed; }
.form-approver-card.consultant .ac-role { color: #5b21b6; }

tr.expansion-row td { padding: 0; }
tr.expansion-row td.approval-bg { background: #eff6ff; border-bottom: 1px solid #93c5fd; }
tr.expansion-row td.diff-bg { background: var(--amber-soft); border-bottom: 1px solid #fde68a; }
.diff-panel, .approvals-panel { padding: 16px 24px 18px 36px; }
.diff-panel h4, .approvals-panel h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; font-weight: 600; }
.diff-panel h4 { color: var(--amber-strong); }
.approvals-panel h4 { color: var(--blue-dark); }
.diff-grid { display: grid; grid-template-columns: 160px 1fr 1fr; gap: 6px 16px; align-items: start; }
.diff-grid .field-label { font-size: 12px; color: #6b7280; font-weight: 500; padding-top: 5px; }
.diff-grid .before { background: #fee2e2; padding: 5px 10px; border-radius: 4px; font-size: 12px; color: #7f1d1d; text-decoration: line-through; }
.diff-grid .after  { background: #d1fae5; padding: 5px 10px; border-radius: 4px; font-size: 12px; color: #064e3b; font-weight: 500; }
.diff-actions, .approvals-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #fde68a; align-items: center; }
.approvals-actions { border-top-color: #93c5fd; }
.diff-actions .source, .approvals-actions .source { font-size: 11px; }
.diff-actions .source { color: var(--amber-strong); }
.approvals-actions .source { color: var(--blue-dark); }
.diff-actions .source code, .approvals-actions .source code { padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.diff-actions .source code { background: #fde68a; }
.approvals-actions .source code { background: #bfdbfe; }
.spacer { flex: 1; }
.row-toggle { cursor: pointer; padding: 3px 9px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--amber-strong); background: rgba(245,158,11,0.1); border: 1px solid #fde68a; white-space: nowrap; }
.row-toggle:hover { background: rgba(245,158,11,0.2); }

.signatory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.sig-card { background: #fff; border: 1px solid #d1d5db; border-radius: 8px; padding: 12px 14px; }
.sig-card.signed { border-color: var(--green); border-left: 4px solid var(--green); }
.sig-card.signed_with_comments { border-color: var(--blue); border-left: 4px solid var(--blue); }
.sig-card.rejected { border-color: var(--red); border-left: 4px solid var(--red); }
.sig-card.pending { border-style: dashed; }
.sig-card .role-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sig-card .role-row .role-tag { padding: 2px 7px; border-radius: 8px; font-size: 9px; font-weight: 700; color: #fff; }
.role-tag.PBG  { background: var(--pbg); }
.role-tag.PBGA { background: var(--pbga); }
.role-tag.PDG  { background: var(--pdg); }
.role-tag.CLIENT { background: var(--client); }
.sig-card .role { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.sig-card .name { font-weight: 600; color: var(--navy); margin-bottom: 6px; font-size: 13px; }
.sig-card .meta { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sig-card .meta .status-chip { font-size: 10.5px; padding: 1px 7px; }
.sig-card .channel { font-size: 10px; color: var(--muted); margin-bottom: 6px; }
.sig-card .channel .ch-badge { display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: 9px; font-weight: 600; }
.sig-card .channel .ch-badge.inapp { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.sig-card .channel .ch-badge.docusign { background: #eff6ff; color: var(--blue-dark); border: 1px solid #93c5fd; }
.sig-card .comments { font-size: 12px; color: #1f2937; padding: 7px 10px; background: #fafbfc; border-radius: 4px; border-left: 2px solid var(--blue); margin-top: 6px; font-style: italic; }
.sig-card.rejected .comments { border-left-color: var(--red); background: #fef2f2; }
.sig-card .approval-actions { margin-top: 10px; display: flex; gap: 4px; flex-wrap: wrap; }
.sig-card .approval-actions button { padding: 4px 8px; font-size: 11px; }
.sig-card .pdf-link { font-size: 11px; color: var(--blue); cursor: pointer; margin-top: 4px; display: inline-block; }

.pace-cell { position: relative; }
.pace-cell input { width: 100%; }
.pace-cell .has-comment { position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }

/* SETTINGS */
.settings-tab { padding: 24px; max-width: 1100px; }
.settings-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 16px; }
.settings-card-head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.settings-card-head h2 { font-size: 14px; font-weight: 600; color: var(--navy); }
.settings-card-head .sub { color: var(--muted); font-size: 12px; }
.settings-card-head .right { margin-left: auto; }
.settings-card-body { padding: 18px 20px; }
.form-row { display: grid; grid-template-columns: 200px 1fr; gap: 12px; margin-bottom: 12px; align-items: center; }
.form-row label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.form-row input, .form-row select, .form-row textarea { padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; }
/* v32: textarea in the form-row should align top, not centre */
.form-row textarea { resize: vertical; min-height: 64px; }
.form-row.row-textarea { align-items: flex-start; }
.form-row.row-textarea label { padding-top: 8px; }

/* Approver editor */
table.approvers { width: 100%; border-collapse: separate; border-spacing: 0; }
table.approvers thead { background: #f9fafb; }
table.approvers th, table.approvers td { padding: 10px 12px; text-align: left; font-size: 12px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
table.approvers th { font-size: 10.5px; color: #4b5563; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
table.approvers .drag-handle { color: #9ca3af; cursor: grab; user-select: none; font-size: 14px; }
table.approvers .role-tag { padding: 3px 9px; border-radius: 10px; font-size: 10px; font-weight: 700; color: #fff; }
table.approvers input, table.approvers select { padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 5px; font-size: 12px; font-family: inherit; width: 100%; }
table.approvers .entity { font-weight: 500; color: var(--navy); }
table.approvers .order-pill { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: #f3f4f6; color: #4b5563; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.client-toggle-card { background: linear-gradient(135deg, #fef3c7, #fde68a); border: 1px solid #f59e0b; padding: 14px 16px; border-radius: 8px; margin-top: 12px; display: flex; align-items: center; gap: 14px; }
.client-toggle-card .note { font-size: 12px; color: var(--amber-strong); flex: 1; }
.client-toggle-card .note strong { display: block; font-size: 13px; margin-bottom: 2px; }
.preview-strip { background: #fafbfc; border: 1px dashed #d1d5db; padding: 12px 16px; border-radius: 6px; margin-top: 12px; display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); }
.preview-strip strong { color: var(--navy); }

.footer-status { padding: 8px 24px; background: #fff; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); display: flex; gap: 18px; }
.footer-status .ok { color: var(--green); font-weight: 500; }

.placeholder-panel { padding: 60px 40px; text-align: center; color: var(--muted); }
.placeholder-panel h2 { color: var(--navy); margin-bottom: 8px; font-size: 18px; }

/* ───── NOTIFICATIONS ───── */
.notif-bell { position: relative; cursor: pointer; padding: 4px 6px; border-radius: 6px; transition: background 0.15s; }
.notif-bell:hover { background: rgba(255,255,255,0.1); }
.notif-bell .notif-icon { font-size: 18px; }
.notif-bell .notif-count { position: absolute; top: -2px; right: -2px; background: var(--red); color: #fff; border-radius: 10px; min-width: 18px; height: 18px; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.notif-drawer { position: absolute; top: 56px; right: 24px; width: 380px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.15); z-index: 50; display: none; max-height: 70vh; overflow-y: auto; }
.notif-drawer.open { display: block; }
.notif-drawer-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.notif-drawer-head h3 { font-size: 14px; color: var(--navy); flex: 1; }
.notif-drawer-head .mark-all { font-size: 11px; color: var(--blue); cursor: pointer; }
.notif-item { padding: 12px 16px; border-bottom: 1px solid #f3f4f6; cursor: pointer; transition: background 0.15s; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; }
.notif-item:hover { background: #f9fafb; }
.notif-item.unread { background: #eff6ff; }
.notif-item .nicon { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.notif-item .nicon.review { background: var(--accent); }
.notif-item .nicon.reject { background: var(--red); }
.notif-item .nicon.approve { background: var(--green); }
.notif-item .ncontent { font-size: 12px; color: var(--text); line-height: 1.45; }
.notif-item .ncontent strong { color: var(--navy); }
.notif-item .ncontent .when { color: var(--muted); font-size: 11px; display: block; margin-top: 3px; }
.notif-item .nactions { display: flex; flex-direction: column; gap: 4px; }
.notif-item .nactions button { padding: 3px 8px; font-size: 10px; border-radius: 4px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; }

/* ───── FORM TAB ───── */
.form-tab { display: grid; grid-template-columns: 320px 1fr; min-height: calc(100vh - 200px); }
.form-list-pane { background: #fff; border-right: 1px solid var(--border); overflow-y: auto; }
.form-list-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.form-list-head h3 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.form-list-head .filter-tabs { display: inline-flex; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; margin-left: auto; }
.form-list-head .filter-tabs button { padding: 4px 9px; border: 0; background: #fff; cursor: pointer; font-size: 10.5px; font-family: inherit; color: var(--muted); }
.form-list-head .filter-tabs button.active { background: var(--navy); color: #fff; }
.form-list-item { padding: 10px 16px; border-bottom: 1px solid #f3f4f6; cursor: pointer; display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; align-items: center; }
.form-list-item:hover { background: #f9fafb; }
.form-list-item.active { background: #eff6ff; border-left: 3px solid var(--blue); padding-left: 13px; }
.form-list-item .fl-sample-num { font-weight: 700; font-size: 13px; color: var(--navy); font-variant-numeric: tabular-nums; }
.form-list-item .fl-code-inline { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.form-list-item .fl-title { font-size: 12.5px; font-weight: 500; color: var(--navy); margin-bottom: 2px; }
.form-list-item .fl-trade { font-size: 10.5px; color: var(--muted); }
.form-list-item .fl-status { font-size: 10px; padding: 1px 7px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
.form-list-item .fl-status.review { background: var(--amber-soft); color: var(--amber-strong); border: 1px solid #fde68a; }
.form-list-item .fl-status.signed { background: #d1fae5; color: var(--green-dark); }
.form-list-item .fl-status.rejected { background: #fee2e2; color: var(--red-dark); }
.form-list-item .fl-status.pending { background: #f3f4f6; color: var(--muted); }

/* Empty state for the form list pane. NOT from the prototype — that
   rendered an empty div, which reads as a broken pane rather than an
   answer. Added with slice 3 because the Awaiting-me tab is the default
   and is legitimately empty most of the time. */
.form-list-empty { padding: 18px 14px; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* Three classes the port introduces that the prototype did not have. All
   checked against the stylesheet before shipping — slice 5 of the DCR
   split emitted 26 mtg-* classes with zero rules and rendered the meeting
   overlay as unstyled flow content. Nothing automated catches that: the
   element-id gate has no CSS equivalent. */

/* An inline action that reads as a link but is a button, because the
   prototype used <a href="#" onclick="...return false"> and an inline
   handler cannot see module scope. */
.linklike { background: none; border: 0; padding: 0; font: inherit;
  color: var(--blue); cursor: pointer; text-decoration: underline; }
.linklike:hover { color: var(--blue-dark); }

/* Sign-off blockers list. */
.form-action-zone .blockers { font-size: 12.5px; color: #7f1d1d;
  line-height: 1.55; padding-left: 20px; margin-bottom: 12px; }
.form-action-zone.blocked { background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border-color: #fca5a5; }
.form-action-zone.blocked h3 { color: var(--red-dark); }

/* The parallel-run caveat on the signature certificate. It has to survive
   monochrome printing, so the border carries the emphasis rather than the
   background alone. */
.sig-cert .print-parallel { border: 1pt solid #b45309; border-left-width: 3pt;
  background: #fffbeb; padding: 3mm 4mm; margin-top: 4mm; }
@media print { .sig-cert .print-parallel { background: transparent; } }

.form-page { padding: 24px 32px 100px; background: var(--bg); overflow-y: auto; }
.form-doc { background: #fff; max-width: 820px; margin: 0 auto; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); overflow: hidden; }
.form-doc-banner { background: linear-gradient(90deg, #fef3c7, #fde68a); color: var(--amber-strong); padding: 10px 24px; font-size: 12px; display: flex; align-items: center; gap: 10px; }
.form-doc-banner.signed { background: linear-gradient(90deg, #ecfdf5, #d1fae5); color: var(--green-dark); }
.form-doc-banner.rejected { background: linear-gradient(90deg, #fef2f2, #fee2e2); color: var(--red-dark); }
.form-doc-banner strong { font-weight: 600; }
.form-doc-banner .spacer { flex: 1; }
.form-doc-head { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; padding: 24px 28px 18px; border-bottom: 2px solid var(--navy); }
.form-doc-head h2 { font-size: 22px; color: var(--navy); font-weight: 700; letter-spacing: -0.01em; }
.form-doc-head .form-sub { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.form-doc-head .meta-right { text-align: right; font-size: 11px; color: var(--muted); }
.form-doc-head .meta-right .status-chip { margin-top: 4px; }
.form-doc-body { padding: 18px 28px 24px; }
.form-doc-meta { display: grid; grid-template-columns: 110px 1fr 110px 1fr; gap: 10px 14px; font-size: 12px; padding: 14px 16px; background: #fafafa; border: 1px solid #e5e7eb; border-radius: 6px; margin-bottom: 18px; }
.form-doc-meta .lbl { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; font-weight: 600; padding-top: 2px; }
.form-doc-meta .val { color: var(--text); font-weight: 500; }
.form-section { margin-bottom: 18px; }
/* Flex in the STYLESHEET, not inline on every h3. The prototype carried
   `style="display:flex;align-items:center;gap:8px"` on each one, and
   rewriting the markup dropped it — so `margin-left:auto` on the attach
   button did nothing and the button sat against the heading text instead
   of at the right edge, unlike the DCR form. */
.form-section h3 { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.form-section h3 .btn { margin-left: auto; }

/* Matches app/dcr/dcr.css:84 so the two forms' section buttons are the
   same size as well as the same position. */
.btn-sm { padding: 4px 8px; min-height: 26px; font-size: 11px; }
.form-section p { font-size: 13px; line-height: 1.6; color: #1f2937; }
.form-attachments { padding: 12px 14px; background: #f9fafb; border: 1px solid var(--border); border-radius: 6px; }
.form-attach-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; padding: 8px 0; align-items: center; border-bottom: 1px solid #f3f4f6; }
.form-attach-item:last-child { border-bottom: 0; }
.form-attach-icon { width: 32px; height: 32px; border-radius: 6px; background: #fee2e2; color: #991b1b; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.form-attach-name { font-size: 12.5px; font-weight: 500; color: var(--navy); display: block; }
.form-attach-meta { font-size: 11px; color: var(--muted); }
.form-attach-actions { display: flex; gap: 4px; }
.form-attach-actions button { padding: 4px 10px; font-size: 11px; border: 1px solid #d1d5db; background: #fff; border-radius: 4px; cursor: pointer; }
.form-attach-actions button:hover { background: #f3f4f6; }
.form-attachments-empty { color: var(--muted); font-style: italic; font-size: 12px; padding: 8px 0; }

/* Approvals strip inside Form */
.form-approvals-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.form-approver-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.form-approver-card.signed { border-color: var(--green); border-left: 3px solid var(--green); }
.form-approver-card.signed_with_comments { border-color: var(--blue); border-left: 3px solid var(--blue); }
.form-approver-card.rejected { border-color: var(--red); border-left: 3px solid var(--red); }
.form-approver-card.pending { border-style: dashed; }
.form-approver-card .ac-role { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.form-approver-card .ac-name { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.form-approver-card .ac-status { font-size: 11px; }
.form-approver-card .ac-comments { font-size: 11.5px; color: #1f2937; padding: 6px 8px; background: #fafbfc; border-radius: 4px; border-left: 2px solid var(--blue); margin-top: 6px; font-style: italic; }
.form-approver-card.rejected .ac-comments { border-left-color: var(--red); background: #fef2f2; }

/* Sign-off action zone */
.form-action-zone { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 1px solid #93c5fd; border-radius: 8px; padding: 18px 22px; margin-top: 20px; }
.form-action-zone h3 { font-size: 13px; color: var(--blue-dark); font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.form-action-zone .your-role { padding: 2px 9px; background: var(--blue); color: #fff; border-radius: 10px; font-size: 10px; font-weight: 700; }
.form-action-zone textarea { width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-family: inherit; font-size: 12.5px; min-height: 60px; margin-bottom: 12px; resize: vertical; }
.form-action-zone .action-buttons { display: flex; gap: 8px; }
.form-action-zone .action-buttons button { padding: 8px 16px; font-size: 13px; font-weight: 500; }

.form-doc-footer { padding: 14px 28px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); background: #fafafa; }
.form-doc-footer .actions { margin-left: auto; display: flex; gap: 8px; }

/* ───── UPLOAD MODAL ───── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.55); display: none; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(2px); }
.modal-backdrop.open { display: flex; }
.modal { background: #fff; border-radius: 12px; max-width: 580px; width: 92%; max-height: 80vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.modal-head { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.modal-head h2 { font-size: 16px; color: var(--navy); }
.modal-head .close { margin-left: auto; cursor: pointer; padding: 4px 10px; border-radius: 4px; color: var(--muted); }
.modal-head .close:hover { background: #f3f4f6; }
.modal-body { padding: 18px 24px; }
.drop-zone { border: 2px dashed #cbd5e1; border-radius: 8px; padding: 32px 20px; text-align: center; transition: all 0.15s; cursor: pointer; }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--accent); background: #fffbeb; }
.drop-zone .drop-icon { font-size: 32px; color: var(--muted); margin-bottom: 8px; }

/* Inline dropzones — first attachment without a modal step. Ported from
   app/dcr/dcr.css:760 verbatim, because the DCR form learned this the
   hard way: an "Attach files" button that opens a modal to reach a drop
   zone is two steps to do what one drop should. Same class names, so the
   two modules behave identically. */
.inline-drop{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border:1.5px dashed #cbd5e1; border-radius:9px; padding:18px 14px;
  cursor:pointer; background:#fcfcfd; transition:border-color .12s, background .12s;
}
.inline-drop:hover, .inline-drop:focus{ border-color:var(--accent); background:#f7f9f4; outline:none; }
.inline-drop.over{ border-color:var(--accent); background:#f0f4ec; }
.inline-drop-title{ font-size:12.5px; font-weight:600; color:#334155; }
.inline-drop-sub{ font-size:11px; color:var(--muted); }
.drop-zone .drop-title { font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.drop-zone .drop-sub { color: var(--muted); font-size: 12px; }
.attach-list { margin-top: 18px; }
.attach-list-head { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; font-weight: 600; }
.attach-list .form-attach-item { background: #fafbfc; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border); margin-bottom: 6px; }
.modal-foot { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* Tech-data inline attach button on Register */
.tech-cell-wrap { display: flex; gap: 4px; align-items: center; }
.tech-attach-btn { padding: 4px 8px; min-height: 32px; box-sizing: border-box; border-radius: 4px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 11px; color: var(--blue-dark); display: inline-flex; align-items: center; gap: 3px; }
.tech-attach-btn:hover { background: #eff6ff; border-color: var(--blue); }
.tech-attach-btn.has-files { background: #eff6ff; color: var(--blue-dark); border-color: #93c5fd; font-weight: 500; }

/* ── FORM PRINT (A4 portrait) ── */
.form-print-techdata-pages { display: none; }
.form-print-techdata-pages .techdata-page { padding: 14mm; }
.form-print-techdata-pages .techdata-page h2 { font-size: 20px; color: var(--navy); border-bottom: 2px solid var(--navy); padding-bottom: 8px; margin-bottom: 10px; }
.form-print-techdata-pages .techdata-page .sub { color: var(--muted); font-size: 11px; margin-bottom: 18px; }
.form-print-techdata-pages .techdata-page .file-name { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; font-family: "SF Mono", Menlo, Consolas, monospace; }
.form-print-techdata-pages .techdata-page .file-meta { font-size: 11px; color: var(--muted); margin-bottom: 12px; }
.form-print-techdata-pages .techdata-page .placeholder-img { border: 2px dashed #cbd5e1; background: #fafbfc; padding: 50px 30px; text-align: center; color: var(--muted); font-size: 12.5px; border-radius: 8px; }

/* ── v42: SAMPLES MEETING (in-person signing) ── */
#meeting-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 95; display: none; flex-direction: column; }
#meeting-overlay.open { display: flex; }
.mo-head { background: var(--navy); color: #fff; padding: 0 20px; height: 52px; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.mo-head .mo-sub { font-size: 11px; color: rgba(255,255,255,0.65); margin-left: 10px; }
.mo-head .btn { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); color: #fff; }
.mo-body { flex: 1; overflow-y: auto; padding: 24px; max-width: 980px; margin: 0 auto; width: 100%; }
.mo-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.mo-card h3 { font-size: 14px; color: var(--navy); margin-bottom: 10px; }
/* Setup as a compact centred card, the DCR meeting's look, which Nathan
   preferred (12 Sep). The overlay carries "setup" only until Start; the
   walk keeps the full-screen layout above. */
#meeting-overlay.setup { background: rgba(15,23,42,0.5); align-items: center; justify-content: center; padding: 20px; }
#meeting-overlay.setup .mo-head { width: 720px; max-width: 100%; border-radius: 12px 12px 0 0; }
#meeting-overlay.setup .mo-body { flex: 0 1 auto; width: 720px; max-width: 100%; max-height: 78vh; margin: 0; padding: 18px 20px; background: #fff; border-radius: 0 0 12px 12px; box-shadow: 0 24px 64px rgba(0,0,0,0.3); }
.mo-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.mo-section { margin-bottom: 16px; }
.mo-section h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 8px; }
.mo-agenda-item { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 12.5px; }
.mo-agenda-item:last-child { border-bottom: 0; }
.mo-agenda-item .code { font-family: "SF Mono", Menlo, monospace; font-size: 11px; color: var(--muted); min-width: 96px; }
.mo-agenda-item .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-agenda-item .tr { font-size: 11px; color: var(--muted); white-space: nowrap; }
.mo-agenda-links { font-size: 11px; margin-left: auto; }
.mo-agenda-links a { color: var(--blue); cursor: pointer; margin-left: 10px; }
/* v43: the meeting shows the sample exactly as the Sample Submission Form */
#meeting-overlay .form-doc { max-width: none; margin: 0 0 14px; }
.mo-attendee-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
.mo-attendee-row:last-child { border-bottom: 0; }
.mo-attendee-row .role-tag2 { font-size: 10px; font-weight: 700; background: var(--navy); color: #fff; padding: 3px 8px; border-radius: 8px; flex-shrink: 0; }
.mo-attendee-row input[type=text] { flex: 1; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-family: inherit; font-size: 13px; }
.mo-sample-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.mo-sample-head .code { font-family: "SF Mono", Menlo, monospace; color: var(--muted); }
.mo-sample-head h2 { font-size: 18px; color: var(--navy); }
.mo-detail-grid { display: grid; grid-template-columns: 130px 1fr; gap: 5px 14px; font-size: 12.5px; margin: 10px 0 4px; }
.mo-detail-grid .lb { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; padding-top: 1px; }
.mo-signer-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; background: #fcfcfd; }
.mo-signer-card.done { background: #f2fdf5; border-color: #bbf7d0; }
.mo-signer-card .head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mo-signer-card .head strong { font-size: 13px; }
.mo-decide { display: inline-flex; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; }
.mo-decide button { padding: 7px 12px; min-height: 32px; border: 0; background: #fff; cursor: pointer; font-size: 12px; font-family: inherit; color: var(--muted); font-weight: 600; }
.mo-decide button.on-app { background: var(--green); color: #fff; }
.mo-decide button.on-wc { background: var(--blue); color: #fff; }
.mo-decide button.on-rej { background: var(--red); color: #fff; }
.mo-signer-card textarea { width: 100%; margin-top: 8px; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-family: inherit; font-size: 12.5px; resize: vertical; min-height: 34px; }
.mo-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.mo-progress { font-size: 12px; color: var(--muted); margin-left: auto; }
.mo-photos { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mo-photos img { height: 74px; border-radius: 6px; border: 1px solid var(--border); }
#meeting-summary table { width: 100%; border-collapse: collapse; margin-top: 10px; }
#meeting-summary th, #meeting-summary td { border: 1px solid var(--border); padding: 8px 10px; font-size: 12px; text-align: left; }
#meeting-summary th { background: #f8fafc; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
body.role-approver #start-meeting-btn, body.role-readonly #start-meeting-btn, body.role-editor #start-meeting-btn { display: none !important; }
@media print {
  body.printing-meeting .header, body.printing-meeting .tabs, body.printing-meeting .panel,
  body.printing-meeting .footer-status, body.printing-meeting .notif-drawer, body.printing-meeting .bulk-bar { display: none !important; }
  body.printing-meeting #meeting-overlay { position: static; display: block; }
  body.printing-meeting .mo-head .btn, body.printing-meeting .mo-actions { display: none !important; }
}

/* ── v41: SAMPLE PHOTOS ── */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 10px; }
.photo-thumb { position: relative; margin: 0; }
.photo-thumb img { width: 100%; height: 104px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; background: #f3f4f6; }
.photo-thumb figcaption { font-size: 10px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.photo-thumb .photo-rm { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.55); color: #fff; font-size: 11px; cursor: pointer; line-height: 1; }
.photo-thumb .photo-rm:hover { background: var(--red); }
.photo-drop { border: 2px dashed #cbd5e1; border-radius: 8px; padding: 22px; text-align: center; cursor: pointer; color: var(--muted); font-size: 12px; transition: all 0.15s; }
.photo-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.photo-drop .big { font-size: 26px; display: block; margin-bottom: 6px; }

/* ── v39: E-SIGNATURE ── */
.sig-modal-attest { background: #f8fafc; border: 1px solid var(--border); border-left: 3px solid var(--navy); border-radius: 6px; padding: 10px 14px; font-size: 12px; line-height: 1.55; color: #334155; margin-bottom: 14px; }
.sig-script { font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive; font-size: 16px; color: #1e293b; }
.sig-meta { font-size: 10px; color: var(--muted); font-family: "SF Mono", Menlo, Consolas, monospace; }
.sig-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #334155; margin: 12px 0 4px; line-height: 1.45; }
/* v40: Type / Draw signature (ported from the DCR v21 signing module) */
.sig-segmented { display: inline-flex; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.sig-segmented button { padding: 6px 16px; border: 0; background: #fff; cursor: pointer; font-size: 12px; font-family: inherit; color: var(--muted); font-weight: 500; }
.sig-segmented button.active { background: var(--navy); color: #fff; }
#sig-canvas { border: 1px dashed #cbd5e1; border-radius: 6px; background: #fff; touch-action: none; width: 100%; max-width: 440px; height: 130px; cursor: crosshair; display: block; }
.ac-sig-img { max-height: 34px; max-width: 150px; display: block; margin: 2px 0; }
.sig-cert .ac-sig-img { max-height: 40px; }
.sig-consent input { margin-top: 2px; width: 14px; height: 14px; flex-shrink: 0; }
.sig-cert { padding: 14mm; }
.sig-cert h2 { font-size: 20px; color: var(--navy); border-bottom: 2px solid var(--navy); padding-bottom: 8px; margin-bottom: 10px; }
.sig-cert .sub { color: var(--muted); font-size: 11px; margin-bottom: 18px; }
.sig-cert table { width: 100%; border-collapse: collapse; margin: 14px 0 18px; }
.sig-cert th, .sig-cert td { border: 1px solid #cbd5e1; padding: 8px 10px; font-size: 11px; text-align: left; vertical-align: top; }
.sig-cert th { background: #f8fafc; text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.04em; color: #475569; }
.sig-cert .attest-copy { font-size: 10.5px; color: #475569; line-height: 1.6; margin-bottom: 8px; }
/* The printed-by line, as the DCR print block carries. A distributed copy
   has to say who produced it and when — the register moves underneath it. */
.sig-cert .print-stamp { font-size: 9.5px; color: #64748b; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--border); }

.print-banner { background: linear-gradient(135deg,#d1fae5,#a7f3d0); border: 1px solid var(--green); border-left: 4px solid var(--green-dark); border-radius: 8px; padding: 12px 16px; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #065f46; }
.print-banner strong { color: #064e3b; }
.print-banner .spacer { flex: 1; }
.print-banner code { background: #fff; padding: 2px 7px; border-radius: 4px; font-size: 11px; color: var(--navy); border: 1px solid #6ee7b7; }

@media print {
  body { background: #fff; }
  /* Print: hide everything chrome, print only Form-doc + tech data pages */
  body.printing-form .header,
  body.printing-form .tabs,
  body.printing-form .panel-header,
  body.printing-form .form-list-pane,
  body.printing-form .form-doc-footer,
  body.printing-form .form-action-zone,
  body.printing-form .form-doc-banner,
  body.printing-form .print-banner,
  body.printing-form .footer-status,
  body.printing-form .modal-backdrop,
  body.printing-form .notif-drawer { display: none !important; }
  /* Every control inside the document. .form-action-zone is hidden
     above, but the section-header buttons (Attach files, + Consultant,
     Add photo) and the inline .linklike prompts are not — they printed
     onto the page, where a button is an instruction nobody can follow. */
  body.printing-form .form-doc .btn,
  body.printing-form .form-doc button,
  body.printing-form .form-doc .linklike { display: none !important; }
  body.printing-form .panel:not(.active) { display: none !important; }
  body.printing-form .form-tab { display: block !important; }
  body.printing-form .form-page { padding: 0 !important; background: #fff !important; overflow: visible !important; }
  body.printing-form .form-doc {
    max-width: none !important; width: 100% !important; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  body.printing-form .form-doc-head { padding: 14mm 14mm 6mm !important; }
  body.printing-form .form-doc-body { padding: 6mm 14mm 14mm !important; }
  body.printing-form .form-attach-actions { display: none !important; }
  /* THE CARDS AND THE CERTIFICATE ARE THE SAME FACTS TWICE. The strip is
     the on-screen view — four cards that wrap, break the page and leave
     most of it empty — and the certificate below is the printed record,
     with the attestation, the decision and the seal. Compare the DCR
     print block, which prints one clean table and no cards. Screen keeps
     the strip; paper keeps the certificate. */
  body.printing-form .form-approvals-section { display: none !important; }
  /* An upload dropzone on a printed page invites nothing and says
     "max 25 MB" on a signed document. */
  body.printing-form .inline-drop { display: none !important; }
  body.printing-form .form-print-techdata-pages { display: block !important; }
  body.printing-form .form-print-techdata-pages .techdata-page { page-break-before: always; }
  body.printing-form .form-print-techdata-pages .sig-cert { page-break-before: always; }
  @page { size: A4 portrait; margin: 0; }
}


/* v13: trade badges keep colour (it improves scanning at 265-row scale) */


/* v49: enlarged header actions */
.btn-hero { font-size: 15px !important; font-weight: 600; padding: 9px 16px !important; letter-spacing: 0.3px; }
/* v49: QR label overlay + Avery L7126 sheet */
#qr-overlay { display: none; position: fixed; inset: 0; background: #eef1f5; z-index: 90; overflow: auto; flex-direction: column; }
#qr-overlay.open { display: flex; }
.qr-ov-bar { position: sticky; top: 0; background: var(--navy); color: #fff; display: flex; align-items: center; gap: 12px; padding: 10px 18px; z-index: 2; }
.qr-ov-bar .qr-ov-count { color: rgba(255,255,255,0.7); font-size: 12px; margin-right: auto; }
.qr-ov-bar .btn { background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.qr-ov-bar .btn:hover { background: rgba(255,255,255,0.24); }
.qr-ov-scroll { padding: 24px; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.qr-none { color: var(--muted); padding: 60px; font-size: 13px; }
.qr-sheet { width: 210mm; height: 297mm; background: #fff; box-sizing: border-box; display: grid; grid-template-columns: repeat(4, 45mm); grid-template-rows: repeat(5, 45mm); column-gap: 3.5mm; row-gap: 6mm; place-content: center; box-shadow: 0 4px 24px rgba(0,0,0,0.10); }
.qr-label { width: 45mm; height: 45mm; box-sizing: border-box; padding: 2mm; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.qr-label.qr-empty-cell { visibility: hidden; }
.qr-label .qr-svg { width: 29mm; height: 29mm; }
.qr-label .qr-svg svg { width: 100%; height: 100%; display: block; }
.qr-label .qr-code { font-size: 7pt; font-weight: 700; color: #000; margin-top: 1mm; line-height: 1.1; font-family: Calibri, Arial, sans-serif; }
.qr-label .qr-title { font-size: 5.5pt; color: #333; line-height: 1.1; max-height: 5.5mm; overflow: hidden; font-family: Calibri, Arial, sans-serif; }
@media print {
  body.printing-qr > *:not(#qr-overlay) { display: none !important; }
  body.printing-qr #qr-overlay { position: static; display: block; background: #fff; overflow: visible; }
  body.printing-qr .qr-ov-bar { display: none !important; }
  body.printing-qr .qr-ov-scroll { padding: 0; gap: 0; display: block; }
  body.printing-qr .qr-sheet { box-shadow: none; page-break-after: always; break-after: page; }
  body.printing-qr .qr-sheet:last-child { page-break-after: auto; break-after: auto; }
  @page { size: A4; margin: 0; }
}

/* v49: QR sample picker modal */
.qrp-modal { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 98; align-items: center; justify-content: center; padding: 20px; }
.qrp-modal.open { display: flex; }
.qrp-card { background: #fff; border-radius: 12px; width: 640px; max-width: 100%; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.3); }
.qrp-head { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.qrp-head h2 { font-size: 15px; margin: 0; color: var(--navy); }
.qrp-head .qrp-close { margin-left: auto; cursor: pointer; color: var(--muted); font-size: 16px; }
.qrp-sub { padding: 12px 20px; font-size: 12px; color: var(--muted); line-height: 1.5; border-bottom: 1px solid var(--border); background: #fafbfc; }
.qrp-tools { display: flex; gap: 8px; align-items: center; padding: 12px 20px; flex-wrap: wrap; }
.qrp-tools input { flex: 1; min-width: 160px; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 12px; font-family: inherit; }
.qrp-tools button { padding: 6px 10px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; font-size: 11.5px; cursor: pointer; color: var(--navy); }
.qrp-tools button:hover { border-color: var(--accent); color: var(--accent); }
.qrp-list { flex: 1; overflow: auto; padding: 0 8px; }
.qrp-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #f3f4f6; font-size: 12px; cursor: pointer; }
.qrp-row:hover { background: #fafbfc; }
.qrp-row input { width: 15px; height: 15px; flex-shrink: 0; }
.qrp-n { font-family: "SF Mono", Menlo, monospace; color: var(--muted); min-width: 40px; }
.qrp-code { font-weight: 600; color: var(--navy); min-width: 76px; }
.qrp-status { font-size: 9.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.qrp-status.pend { background: #fef3c7; color: #92400e; }
.qrp-status.appr { background: #dcfce7; color: #166534; }
.qrp-status.rej { background: #fee2e2; color: #991b1b; }
.qrp-status.resub { background: #ffedd5; color: #9a3412; }
.qrp-status.other { background: #f3f4f6; color: #4b5563; }
.qrp-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.qrp-empty { padding: 30px; text-align: center; color: var(--muted); font-size: 12px; }
.qrp-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--border); }
.qrp-foot #qrp-count { font-size: 12px; color: var(--muted); margin-right: auto; }
.reg-pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 14px;border-top:1px solid var(--border);background:#fff}
.reg-pageinfo{font-size:12px;color:var(--muted);min-width:120px;text-align:center}
.ei{width:1.05em;height:1.05em;vertical-align:-0.16em;margin-right:4px;flex-shrink:0}

/* Toast. samples.css inherited every modal rule from the prototype but no
   toast, because the Samples prototype had no feedback mechanism at all.
   Matched to dcr.css so the two modules behave identically. */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(90px);
  z-index: 120; background: var(--navy); color: #fff; border-radius: 9px;
  padding: 11px 18px; font-size: 12.5px; font-weight: 500;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none; transition: transform .2s ease, opacity .2s ease;
  max-width: min(560px, calc(100vw - 40px));
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }

/* ─────────────────────────────────────────────────────────────────────
   AUDIT TAB — STP-10 slice 5a.

   PORTED FROM dcr.css RATHER THAN FROM THE PROTOTYPE, deliberately. The
   Samples prototype styled its audit tab entirely with inline styles on
   a grid; the DCR module has a timeline with day separators and a
   per-actor icon, and one audit experience across two registers is worth
   more than two.

   Written BEFORE the module that emits these classes, for once. The
   meeting stylesheet was never ported at all — meeting.js emitted 26
   classes against zero rules — and nothing in CI can see that, because a
   class with no rule is valid CSS and valid JavaScript.

   Icon colours use this file's own tokens: samples.css has no --amber or
   --purple (v48 remapped --amber to the brand green and it was split
   into --accent* here), so the DCR block's status and price colours are
   re-pointed rather than copied into variables that do not exist.
   ───────────────────────────────────────────────────────────────────── */
.audit-tab-body { padding: 24px; }
.audit-timeline { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 0; }
.audit-day { padding: 12px 20px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px dashed var(--border); margin-bottom: 4px; background: #fafafa; }
.audit-entry { display: grid; grid-template-columns: 90px 36px 1fr; gap: 12px; padding: 10px 20px; border-bottom: 1px solid #f3f4f6; align-items: start; }
.audit-entry:last-child { border-bottom: 0; }
.audit-entry .au-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 4px; }
.audit-entry .au-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.audit-entry .au-icon.create   { background: var(--green); }
.audit-entry .au-icon.status   { background: var(--accent); }
.audit-entry .au-icon.approval { background: var(--blue); }
.audit-entry .au-icon.file     { background: #0ea5e9; }
.audit-entry .au-icon.settings { background: var(--muted); }
.audit-entry .au-icon.system   { background: #94a3b8; }
.audit-entry .au-body { font-size: 13px; line-height: 1.5; color: var(--text); }
.audit-entry .au-body strong { color: var(--navy); }
.audit-entry .au-body .sample-id { font-family: ui-monospace, monospace; color: var(--blue-dark); font-weight: 600; }
.audit-entry .au-body .user { color: var(--navy); font-weight: 600; }
.audit-entry .au-body .field { font-family: ui-monospace, monospace; background: #f3f4f6; padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.audit-entry .au-body .old { color: var(--red-dark); text-decoration: line-through; }
.audit-entry .au-body .new { color: var(--green-dark); font-weight: 500; }
.empty-state { padding: 60px 24px; text-align: center; color: var(--muted); }
.empty-state h2 { font-size: 18px; color: var(--text); margin-bottom: 8px; font-weight: 500; }

/* Seal verification. The DCR module carries this as a wall of inline
   styles inside audit.js; here it is a stylesheet, because the render
   code is long enough already and a colour repeated six times inline is
   a colour that gets changed five times. */
.verify-note { border-radius: 9px; padding: 12px 14px; margin-bottom: 10px; font-size: 12.5px; border: 1px solid var(--border); background: #fff; color: var(--text); }
.verify-note.verify-good { background: var(--accent-soft); border-color: #d5dfc8; color: #41502f; }
.verify-note.verify-bad  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.verify-list { background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; }
.verify-row { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 11.5px; }
.verify-row:last-of-type { border-bottom: 0; }
.verify-row .v-ref { min-width: 74px; font-weight: 600; font-family: ui-monospace, monospace; }
.verify-row .v-rev { min-width: 34px; color: var(--muted); }
.verify-row .v-slot { min-width: 84px; }
.verify-row .v-when { min-width: 150px; color: var(--muted); }
.verify-row .v-mark { min-width: 70px; }
.verify-row .v-detail { color: var(--muted); }
.verify-row .v-ok { color: #166534; }
.verify-row .v-bad { color: #991b1b; font-weight: 700; }
.verify-row .v-legacy { color: var(--muted); }
.verify-foot { margin-top: 10px; font-size: 10.5px; color: var(--muted); line-height: 1.5; }

/* Settings — STP-10 slice 5b. The panel is entirely read-only, so the
   two rules it needs are for saying so: the banner at the top, and the
   reason printed under every disabled control. A title attribute is not
   discoverable on a touchscreen, and the site device is a tablet. */
.permission-banner { background: var(--accent-soft); border: 1px solid #d5dfc8; color: #41502f; border-radius: 9px; padding: 12px 14px; margin-bottom: 14px; font-size: 12.5px; line-height: 1.55; }
.setting-why { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 4px; max-width: 560px; }
/* .approver sets colour but not BACKGROUND — on the register every one
   carries a state class (pending/approved/rejected) that supplies it, so
   a bare .approver renders white-on-transparent and is invisible. The
   settings table and the preview strip show slots that have no state at
   all, so they set their own. Found by reading the rule rather than by
   printing a blank circle and wondering. */
.approvers .approver, #live-preview .approver, #meeting-overlay .approver { background: var(--navy); border-color: var(--navy); }
.approvers .approver.consultant, #live-preview .approver.consultant { background: var(--accent); border-color: var(--accent); }

/* Meeting summary table — slice 5c. Written here rather than emitted
   against dcr.css's .mtg-summary, which this stylesheet does not carry.
   The DCR meeting shipped its JS without its stylesheet and emitted 26
   classes against zero rules; the check that catches it is reading the
   file, because a class with no rule is valid CSS and valid JavaScript
   and no gate can see it. */
.mo-summary { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 12.5px; }
.mo-summary th { text-align: left; padding: 7px 10px; background: #f9fafb; border-bottom: 1px solid var(--border); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.mo-summary td { padding: 7px 10px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.mo-summary tr:last-child td { border-bottom: 0; }

/* STACKING, corrected 30 Aug. The QR overlay was 300 and its picker 320,
   both ABOVE .modal-backdrop (100) and .toast (120) — so the confirm
   dialog raised by "Mark as printed" would have opened invisibly BEHIND
   the sheet it was about, and every toast the label route produces was
   unreachable. Same defect the DCR meeting overlay had on 22 Aug, in the
   one module that had not been checked.

   The ladder, low to high: meeting overlay 95 < QR overlay 90/picker 98
   < confirm 100 < toast 120. THE THING THAT REPORTS AN OUTCOME MUST SIT
   ABOVE THE THING THAT CAUSED IT. */

/* Drawn signature image (0028). Sized like the script line it sits above. */
.sig-img { display: block; height: 40px; max-width: 220px; object-fit: contain; object-position: left; margin: 2px 0; }
@media print { .sig-img { height: 34px; } }

/* Audit table view (5 Sep) — the prototype's columns. */
.audit-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; }
.audit-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); background: #fafafa; white-space: nowrap; }
.audit-table td { padding: 8px 12px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.audit-table tr:last-child td { border-bottom: 0; }
.audit-table .at-time { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; white-space: nowrap; color: var(--muted); }
.audit-table .at-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; white-space: nowrap; }
.audit-table .at-actor { font-weight: 600; white-space: nowrap; }
.audit-table .at-role { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.audit-table .at-col { white-space: nowrap; }
.audit-table .at-before { color: #b91c1c; text-decoration: line-through; }
.audit-table .at-after { color: #15803d; }
.audit-table .at-blank { color: #9ca3af; text-decoration: none; font-style: italic; }
.audit-table .at-src { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 8px; background: #f3f4f6; color: #374151; }
.audit-table .at-src.approval { background: #dcfce7; color: #166534; }
.audit-table .at-src.admin { background: #fee2e2; color: #991b1b; }
.audit-table .at-src.pdf { background: #ffedd5; color: #9a3412; }

/* A header is never wider than its column, and a select never narrower than its text (6 Sep). */
table.approvers th, table.approvers-table th, table.simple th { white-space: nowrap; }
table.approvers td select, table.approvers-table td select { max-width: none; }

/* Buttons keep to one line (6 Sep): a wrapped label reads as a broken control. */
.btn { white-space: nowrap; }

/* Bulk tech data (6 Sep) */
.bt-drop { border: 2px dashed #cbd5e1; border-radius: 8px; padding: 26px 20px; text-align: center; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.bt-drop.over { border-color: var(--accent); background: #f6f8f2; }
.bt-empty { font-size: 12px; color: var(--muted); padding: 8px 2px; }
.bt-row { display: grid; grid-template-columns: 1.1fr 1.6fr 28px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; background: #fff; }
.bt-row.unmatched { border-color: #fde68a; background: #fffbeb; }
.bt-row.invalid { border-color: #fecaca; background: #fef2f2; }
.bt-file { display: flex; flex-direction: column; gap: 2px; font-size: 12px; overflow: hidden; }
.bt-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-file span { font-size: 11px; color: var(--muted); }
.bt-target { display: flex; flex-direction: column; gap: 3px; }
.bt-pick { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 6px; max-width: 100%; }
.bt-why { font-size: 11px; color: var(--muted); }
.bt-remove { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; }

/* The outbox's note box, as the Directory and DCR pages draw it (12 Sep). */
.dir-note { background: #f0f4ec; border: 1px solid #d5dfc8; border-radius: 9px; padding: 12px 14px; font-size: 11.5px; line-height: 1.6; color: #41502f; margin: 16px 0; }

/* Header cells centre vertically whatever their neighbours wrap to (6 Sep). */
table.register thead tr.cols th { vertical-align: middle; }
/* And they do not wrap: a two-line label reads as sitting higher than its
   neighbours. Widths in REGISTER_INITIAL_WIDTHS fit every label; a column
   dragged narrower shows an ellipsis rather than a second line. */
table.register thead tr.cols th .th-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; vertical-align: middle; }

/* 15 Sep (Nathan): header name the same size as the DCR register. */
.brand .name { font-weight: 500; letter-spacing: 1px; font-size: 14px; text-transform: uppercase; }
/* The project list opened white-on-white. */
.header .project-select option { color: #1a1a1a; background: #fff; }
/* Parallel / Sequential and Add approver: one button style, both registers. */
.segmented { display: inline-flex; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; }
.segmented button { padding: 6px 14px; border: 0; background: #fff; cursor: pointer; font-size: 12px; font-family: inherit; color: var(--muted); }
.segmented button + button { border-left: 1px solid #d1d5db; }
.segmented button.active { background: var(--navy); color: #fff; }
.segmented button:disabled { cursor: default; }
.btn-seg { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer; font-size: 12px; font-family: inherit; color: var(--text); }
.btn-seg:hover:not(:disabled) { background: #f3f4f6; }
.btn-seg:disabled { opacity: 0.55; cursor: default; }
.btn-seg .ei { width: 13px; height: 13px; }
.setting-fact { font-size: 12.5px; color: var(--text); line-height: 1.5; max-width: 560px; }
/* Approval slot reordering (drag or arrows). */
tr.slot-dragging { opacity: 0.45; }
tr.slot-drop-target td { box-shadow: inset 0 2px 0 var(--navy); }
.slot-grip { cursor: grab; color: #9ca3af; user-select: none; margin-right: 4px; }
.slot-move { border: 1px solid #d1d5db; background: #fff; border-radius: 4px; font-size: 10px; line-height: 1; padding: 2px 5px; cursor: pointer; margin-left: 2px; }
.slot-move:disabled { opacity: 0.35; cursor: default; }
.form-attach-actions .attach-remove-btn { color: #991b1b; }
.form-doc-head .withdraw-btn { margin-top: 6px; }
/* Meeting sample card laid out like the Form (15 Sep). */
.mo-card.mo-form { padding: 0; overflow: hidden; }
.mo-card.mo-form .form-doc-head h2 { font-size: 16px; text-transform: none; letter-spacing: 0; }
.mo-card.mo-form .form-doc-body { padding: 16px 20px; }
.outbox-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.outbox-filters input, .outbox-filters select { font: inherit; font-size: 12px; padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; }
.outbox-filters label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
/* Audit view switch: the highlight lived in inline styles, so it never
   moved when another view was picked (15 Sep). */
.audit-view-btn { padding: 6px 12px; border: 0; background: #fff; color: var(--muted); font-size: 11.5px; font-family: inherit; cursor: pointer; }
.audit-view-btn + .audit-view-btn { border-left: 1px solid #d1d5db; }
.audit-view-btn.active { background: var(--navy); color: #fff; }

/* 18 Sep (Nathan): the approver table stays inside its card, and the
   card head wraps rather than squashing the Order switch. */
.approvers-scroll { overflow-x: auto; max-width: 100%; }
.settings-card-head { flex-wrap: wrap; row-gap: 8px; }
.settings-card-head .segmented, .settings-card-head .btn-seg { flex-shrink: 0; white-space: nowrap; }
.segmented button { white-space: nowrap; }

/* 18 Sep (Nathan): the sign-off panel in the REVEAL palette, with a softer Reject. */
.form-action-zone:not(.blocked):not(.docusign) { background: #f6f8f2; border-color: #cfd9c0; }
.form-action-zone:not(.blocked):not(.docusign) h3 { color: #4e5d38; }
.form-action-zone .your-role { background: #637947; }
.form-action-zone .action-buttons .btn-success { background: #637947; border-color: #637947; color: #fff; }
.form-action-zone .action-buttons .btn-success:hover { background: #4e5d38; border-color: #4e5d38; }
.form-action-zone .action-buttons .btn-primary { background: #e6ecdc; border-color: #bfcca9; color: #3e4a2c; }
.form-action-zone .action-buttons .btn-primary:hover { background: #d9e2cb; border-color: #aebd95; }
.form-action-zone .action-buttons .btn-danger { background: #fbe7e7; border-color: #efc0c0; color: #9b2c2c; }
.form-action-zone .action-buttons .btn-danger:hover { background: #f6d6d6; border-color: #e5a9a9; }

/* 18 Sep: one sample handed to a colleague, from its approver card (0041). */
.ho-line { font-size: 11px; color: #4e5d38; margin-top: 6px; }
.ho-host { margin-top: 6px; }
.ho-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ho-pick select { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid #d1d5db; border-radius: 6px; max-width: 100%; }

/* 27 and 30 Sep (Nathan): hand-over sits with the sign-off buttons, on the
   same line as Approve / Approve w/ Comments / Reject, at the end of it. */
.form-action-zone .action-buttons { align-items: center; flex-wrap: wrap; row-gap: 8px; }
.form-action-zone .action-buttons .ho-host,
.form-action-zone .action-buttons .ho-line { margin: 0 0 0 auto; font-weight: 500; }
.form-action-zone .action-buttons .ho-pick { margin: 0; }