:root {
  /* Brand: taken from the company logo (red #AB2632, charcoal #535352, light grey #ACACAB) */
  --brand-red: #ab2632;      /* 6.9:1 on white */
  --brand-red-dark: #8c1e28; /* hover and pressed; 7.7:1 on the red tint */
  --brand-red-tint: #f8e9eb;
  --brand-charcoal: #535352; /* 7.7:1 on white */
  --brand-ink: #2b2b2a;
  --brand-grey: #acacab;
  --bg: #f4f4f3;
  --panel: #ffffff;
  --ink: #2b2b2a;
  --muted: #5b5b5a;          /* 6.2:1 on the page background */
  --line: #dddddc;
  --accent: var(--brand-red);
  --accent-ink: #ffffff;
  --pass: #166b34;           /* success: 5.6:1 on its light background */
  --pass-bg: #e3f4e8;
  --inv: #9a6400;
  --inv-bg: #fff2d6;
  --fail: #b42318;
  --fail-bg: #fde7e5;
  --rec-bg: #ececeb;
  --radius: 8px;
  /* type scale */
  /* type scale, in rem so a reader's browser font-size setting is honoured (12 / 13 / 14 / 16 / 18 / 22 / 26 px at the default 16px);
     nothing on screen is smaller than --fs-xs. The printed report (.page, @media print) keeps its own point sizes. */
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .875rem; --fs-lg: 1rem; --fs-xl: 1.125rem; --fs-2xl: 1.375rem; --fs-3xl: 1.625rem;
  /* spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* state colours (always paired with an icon or words, never colour alone) */
  --info: var(--brand-charcoal); --info-bg: #ececeb;
  --warn: #7a4f00; --warn-bg: #fff2d6;
  --error: #b42318; --error-bg: #fde7e5;
  --success: var(--pass); --success-bg: var(--pass-bg);
  --focus: var(--brand-red);
  --focus-ring: rgba(171, 38, 50, .4);   /* the focus outline on controls (brand red, see-through) */
  /* neutrals, one warm grey family from the brand (no second blue-grey palette) */
  --ink-2: var(--brand-charcoal);  /* secondary text, labels, calculated values: 7.7:1 on white */
  --muted-2: #6f6f6e;              /* placeholders and previous-value hints: 4.9:1 on white */
  --faint: #8a8a89;                /* icons, dashed outlines, strike-through: not for text */
  --line-2: #c9c9c8;               /* control borders, a step darker than --line */
  --surface-2: #f7f7f6;            /* hover, striped rows, card headings */
  --surface-3: #ececeb;            /* table bands, sticky headings, the selected tab */
  /* state tones beyond the base pair */
  --fail-dark: #7a1a12; --fail-line: #e6b4ae;
  --pass-dark: #0f4d25; --pass-line: #b9e0c5;
  --warn-dark: #5c3c00; --warn-mark: #c98a00; --warn-line: #f0d9a6;
  --prog: #5b8fd6;                 /* the In progress bar colour (the only blue left) */
  --link: #1f5fa8;
  --scrim: rgba(20, 28, 38, .45);  /* behind panels and dialogs */
  --shadow-color: rgba(0, 0, 0, .18);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, .16); --shadow-3: 0 12px 40px rgba(0, 0, 0, .26);
  --control-h: 36px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font: var(--fs-md)/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
h1 { font-size: var(--fs-2xl); margin: 0; }
h2 { font-size: var(--fs-xl); margin: 0; }
h3 { font-size: var(--fs-lg); margin: 0 0 12px; }
h4 { font-size: var(--fs-sm); margin: 16px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-xs); }
.pad { padding: 16px; }
.hint { color: var(--muted); font-size: var(--fs-xs); }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.gap { gap: 8px; }
.spacer { flex: 1; }
.pre { white-space: pre-wrap; }

/* Chrome */
.topbar { height: 56px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 16px; background: #fff; color: var(--ink); border-bottom: 3px solid var(--brand-red); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-app { font-weight: 600; font-size: var(--fs-md); color: var(--brand-charcoal); padding-left: 12px; border-left: 1px solid var(--brand-grey); letter-spacing: .01em; white-space: nowrap; }
@media (max-width: 700px) { .brand-app { display: none; } .brand-logo { height: 28px; } .topbar { padding: 0 10px; } }
.topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; min-width: 0; }
.save-state { font-size: var(--fs-xs); color: var(--brand-charcoal); opacity: 1; }
.save-state.error { color: var(--fail); opacity: 1; font-weight: 600; }
.topbar .btn.ghost { background: transparent; color: var(--brand-charcoal); border-color: var(--brand-grey); }
.topbar .btn.ghost:hover { border-color: var(--brand-charcoal); background: var(--bg); }
.layout { display: grid; grid-template-columns: 240px 1fr; height: calc(100% - 59px); transition: grid-template-columns .15s ease; }
.sidebar { background: var(--panel); border-right: 1px solid var(--line); padding: 12px 10px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 12px; }
main { overflow-y: auto; padding: 20px 24px 48px; }

/* Controls */
/* buttons: secondary by default; primary filled; destructive outlined red, or solid red when it confirms; one block for every size */
.btn { font: inherit; font-weight: 500; line-height: 1.2; min-height: var(--control-h); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); cursor: pointer; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--faint); background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover:not(:disabled) { background: var(--brand-red-dark); border-color: var(--brand-red-dark); }
.btn.danger { color: var(--error); border-color: var(--fail-line); }
.btn.danger:hover:not(:disabled) { background: var(--error-bg); border-color: var(--error); }
.btn.danger-solid { background: var(--fail); border-color: var(--fail); color: #fff; }
.btn.danger-solid:hover:not(:disabled) { background: var(--fail-dark); border-color: var(--fail-dark); }
.btn.small { padding: 4px 10px; min-height: 30px; font-size: var(--fs-sm); }
.btn.block { width: 100%; display: flex; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon { border: 0; background: none; font-size: var(--fs-xl); line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 4px; }
.icon:hover { color: var(--fail); background: var(--fail-bg); }
input[type=text], input[type=date], input[type=search], select, textarea {
  font: inherit; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus-ring); border-color: var(--accent); }
textarea { resize: vertical; }
input.num { text-align: right; min-width: 80px; }
input.short { min-width: 90px; }
input.tiny { width: 56px; }
.chk { display: flex; align-items: center; gap: 6px; padding-top: 6px; }

/* Job list */
.job-list { display: flex; flex-direction: column; gap: 4px; }
.job-item, .asset-item { text-align: left; font: inherit; background: none; border: 1px solid transparent; border-radius: 6px; padding: 8px 10px; cursor: pointer; color: inherit; width: 100%; }
.job-item:hover, .asset-item:hover { background: var(--bg); }
.job-item.active, .asset-item.active { background: var(--brand-red-tint); border-color: var(--fail-line); }
.job-title { font-weight: 600; }
.job-sub { font-size: var(--fs-xs); color: var(--muted); }

/* Home */
.home { max-width: 620px; margin: 48px auto; }
.home h1 { font-size: var(--fs-3xl); margin-bottom: 12px; }
.home p { color: var(--ink-2); margin-bottom: 18px; }

/* Job */
.job-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }   /* a long customer name and the buttons share the row, or wrap */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab { font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; cursor: pointer; color: var(--muted); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-head h3 { margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; margin-bottom: 12px; }
.grid.g8 { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.grid.g-wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.det-assign { margin: 4px 0 12px; }
.det-assign .field-label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.danger-zone { border-color: var(--fail-line); margin-top: 28px; }
.danger-zone h3 { color: var(--fail); }
.field label { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 3px; }
.field.wide { margin-top: 10px; }
.static { padding: 6px 0; font-weight: 600; }

/* Tables */
.tbl-wrap { overflow-x: auto; margin-bottom: 8px; }
table.data { width: 100%; border-collapse: collapse; }
table.data.narrow { width: auto; }
table.data th { text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 4px 6px; border-bottom: 1px solid var(--surface-3); vertical-align: middle; }
table.data td.calc, .calc { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .w-sel { width: 140px; }
tr.row-bad td { background: var(--inv-bg); }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.b-pass { background: var(--pass-bg); color: var(--pass); }
.b-investigate { background: var(--inv-bg); color: var(--inv); }
.b-fail { background: var(--fail-bg); color: var(--fail); }
.b-recorded, .b-none { background: var(--rec-bg); color: var(--muted); }

/* Assets */
.assets { display: grid; grid-template-columns: 250px 1fr; gap: 16px; align-items: start; }
.asset-list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; position: sticky; top: 0; max-height: calc(100vh - 200px); overflow-y: auto; }
.add-asset { display: flex; gap: 6px; margin-bottom: 8px; }
.asset-name { font-weight: 600; }
.asset-sub { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.editor-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.storage-problem ul { color: var(--ink-2); }

/* Company account */
.wo-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -4px 0 12px; font-size: var(--fs-sm); }
.cloud-state { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); }
.cloud-pill { font: inherit; font-size: var(--fs-xs); border: 1px solid var(--brand-grey); background: transparent; color: var(--brand-charcoal); border-radius: 12px; padding: 2px 10px; cursor: pointer; }
.cloud-pill.warn { background: var(--inv); border-color: var(--inv); color: #fff; }
.cloud-pill.error { background: var(--fail); border-color: var(--fail); color: #fff; }
.who { color: var(--brand-charcoal); }
.who-short { display: none; }
.menu-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; font-size: var(--fs-sm); }
/* signed in, Settings is in the person's menu */
body:not(.signed-out) .topbar-actions:has(.user-menu) > .btn[data-act="settings"] { display: none; }
body.signed-out .sidebar, body.signed-out [data-act="settings"] { display: none; }
body.signed-out .layout { grid-template-columns: 1fr; }
.signin form { padding: 20px; display: flex; flex-direction: column; gap: 12px; max-width: 380px; }
.signin input[type=email], .signin input[type=password] { font: inherit; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.notices { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.notice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 6px; font-size: var(--fs-sm); }
.notice.warn { background: var(--inv-bg); color: var(--warn-dark); }
.notice.error { background: var(--fail-bg); color: var(--fail-dark); }
.workflow { padding: 10px 16px; }
.workflow .history { margin-top: 6px; font-size: var(--fs-sm); }
.workflow .history summary { cursor: pointer; color: var(--muted); }
.review-notes { margin: 8px 0 0; padding: 8px 10px; background: var(--fail-bg); border-radius: 6px; }
.review-notes.ok { background: var(--pass-bg); }
.b-progress { background: var(--surface-3); color: var(--brand-charcoal); }
.b-submitted { background: var(--brand-ink); color: #fff; }
.b-hold { background: var(--surface-3); color: var(--ink-2); border: 1px dashed var(--faint); }
.status-summary { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.asset-item > .badge { margin-top: 4px; font-size: var(--fs-xs); }
.job-item .badge { margin-top: 4px; font-size: var(--fs-xs); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-3); color: var(--ink-2); }

/* Word template form */
details.tpl-sec { border-top: 1px solid var(--line); padding: 8px 0 2px; }
details.tpl-sec > summary { cursor: pointer; font-weight: 600; padding: 4px 0 8px; }
details.tpl-sec > summary .hint { font-weight: 400; margin-left: 6px; }
details.tpl-sec h4 { margin-top: 6px; }
.tpl-tests { margin-bottom: 8px; }
.tpl-tests .chk { padding-top: 0; }
.word-bar { margin-top: -6px; }
.render-status { flex-basis: 100%; font-size: var(--fs-sm); }
.render-status:empty { display: none; }

/* Forms tab (Z Platform layout) */
.zf { display: grid; grid-template-columns: 280px 1fr; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-height: 420px; }
.zf-types { border-right: 1px solid var(--line); padding: 8px; max-height: calc(100vh - 260px); overflow-y: auto; }
.zf-types-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; color: var(--muted); font-size: var(--fs-sm); }
.zf-all { font: inherit; font-size: var(--fs-xs); border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.zf-all.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.zf-type { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: 6px; padding: 9px 10px; cursor: pointer; }
.zf-type:hover { background: var(--bg); }
.zf-type.active { background: var(--surface-3); }
.zf-type-name { display: block; font-size: var(--fs-sm); }
.zf-type-sub { display: block; font-size: var(--fs-xs); color: var(--muted); }
.zf-count { flex: none; min-width: 20px; height: 20px; border-radius: 10px; background: var(--fail); color: #fff; font-size: var(--fs-xs); font-weight: 700; display: grid; place-items: center; padding: 0 6px; }
.zf-main { min-width: 0; padding: 12px; }
.zf-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.zf-bulk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.zf-search { max-width: 260px; }
.zf-table tbody tr { cursor: pointer; }
.zf-table tbody tr:hover td { background: var(--surface-2); }
.zf-table tr.selected td { background: var(--brand-red-tint); }
.zf-chk { width: 32px; }
.zf-done { color: var(--pass); font-weight: 600; }
.zf-table td { white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1300px) { .zf { grid-template-columns: 210px 1fr; } }
@media (max-width: 1000px) { .zf { grid-template-columns: 1fr; } .zf-types { border-right: 0; border-bottom: 1px solid var(--line); max-height: 220px; } }

/* Job page: equipment grouped by category */
.eq-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.eq-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eq-find .eq-search { flex: 1 1 260px; }
.eq-count { white-space: nowrap; }
.eq-bulkbar { background: var(--brand-red-tint); border: 1px solid var(--fail-line); border-radius: 8px; padding: 6px 10px; }
/* a drop-down menu: <details class="menu"><summary class="btn">…</summary><div class="menu-pop">buttons.menu-item / labels</div></details> */
details.menu { position: relative; display: inline-block; }
details.menu > summary { list-style: none; margin: 0; font-weight: inherit; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 200px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow-2); padding: 4px; display: flex; flex-direction: column; }
.menu-pop.menu-right { left: auto; right: 0; }
.menu-pop.menu-up { top: auto; bottom: calc(100% + 4px); }
.menu-pop.menu-flip { left: auto; right: 0; }
.menu-pop.menu-right.menu-flip { left: 0; right: auto; }
.menu-item { font: inherit; text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px 10px; cursor: pointer; color: var(--ink); white-space: nowrap; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-3); }
.menu-item.danger { color: var(--fail); }
.menu-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.menu-form { gap: 8px; padding: 10px; }
.menu-form label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); color: var(--muted); }
.menu-form select { min-width: 180px; }
/* the equipment list's tables share their column widths (.eq-table below), so a group's later tables need no headings of their own */
.eq-user .eq-sub ~ .eq-sub + table.eq-table > thead { visibility: collapse; }   /* still sets the column widths, so the tables line up */
.btn-group { display: inline-flex; }
.btn-group .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.btn-group .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.eq-search { max-width: 280px; }
.eq-block { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.eq-block.eq-user { border-left: 4px solid var(--accent); }
.eq-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.eq-head h3 { margin: 0; font-size: var(--fs-md); }
.eq-caret { width: 12px; color: var(--muted); }
.eq-sub { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 14px 2px; }
.eq-table { margin: 0; table-layout: fixed; width: 100%; }
.eq-table td { padding: 8px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-table :is(td, th):nth-last-child(7) { width: 17%; }   /* equipment */
.eq-table :is(td, th):nth-last-child(6) { width: 14%; }   /* location */
.eq-table :is(td, th):nth-last-child(5) { width: auto; }  /* form type */
.eq-table :is(td, th):nth-last-child(4) { width: 72px; }  /* sections */
.eq-table :is(td, th):nth-last-child(3) { width: 104px; } /* checks */
.eq-table :is(td, th):nth-last-child(2) { width: 130px; } /* status */
.eq-table :is(td, th):nth-last-child(1) { width: 160px; } /* last change */
.eq-table .zf-chk { width: 36px; }
.eq-add-here { margin: 8px 14px 12px; }
.eq-add .zg-body { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }
.eq-add textarea, .eq-add input, .eq-add select { width: 100%; }
/* copy sections to other equipment (forms.js viewCopyTo): a list of tick boxes; on a phone it fills the screen and the buttons stack */
.cpy { width: min(640px, calc(100vw - 48px)); }
.cpy-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; }
.cpy-body .search { width: 100%; }
.cpy-list { display: flex; flex-direction: column; gap: 2px; }
.cpy-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-radius: 6px; cursor: pointer; }
.cpy-item:hover { background: var(--surface-2); }
.cpy-item input { margin-top: 3px; flex: none; }
.cpy-item small { display: block; }
.cpy-item.off { opacity: .6; cursor: default; }
.cpy-sum { background: var(--inv-bg); padding: 8px 10px; border-radius: 6px; margin: 0; }
.cpy-title:focus { outline: none; }
.cpy-phone.zg { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
.cpy-overlay:has(.cpy-phone) { padding: 0; }
.cpy-phone .cpy-foot { flex-direction: column-reverse; align-items: stretch; }
.cpy-phone .cpy-foot .btn { width: 100%; min-height: 44px; }
.cpy-phone .cpy-foot .spacer { display: none; }
.eq-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
.eq-scope { width: auto; min-width: 240px; }

/* Excel import preview */
.xl-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 14px; }
.xl-summary > div { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.xl-summary b { display: block; font-size: var(--fs-2xl); }
.xl-summary span { font-size: var(--fs-xs); color: var(--muted); }
.xl-summary .xl-warn b { color: var(--inv); }
.xl-list { margin: 6px 0 12px; padding-left: 18px; font-size: var(--fs-sm); max-height: 260px; overflow: auto; }
details > summary { cursor: pointer; font-weight: 600; margin-top: 6px; }

/* Report panel */
.zp-overlay { position: fixed; inset: 0; background: var(--scrim); z-index: 50; display: flex; justify-content: flex-end; }
.zp { background: #fff; width: max(80vw, min(100%, 720px)); height: 100%; display: flex; flex-direction: column; box-shadow: -4px 0 24px var(--shadow-color); }
.zp-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; background: #fff; flex: none; }
.zp-head h2 { font-size: var(--fs-xl); }
.zp-mode { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.zp-mode button { font: inherit; font-size: var(--fs-sm); border: 0; background: #fff; padding: 6px 12px; cursor: pointer; color: var(--muted); }
.zp-mode button.active { background: var(--surface-3); color: var(--ink); font-weight: 600; }
.zp-x { font-size: var(--fs-2xl); }
.zp-editing { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 20px; border-bottom: 1px solid var(--line); }
.zp-editing .search { max-width: 220px; }
.zp-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 14px; padding: 2px 4px 2px 10px; font-size: var(--fs-xs); background: #fff; }
.zp-chip .icon { font-size: var(--fs-md); padding: 0 4px; }
.zp-main { flex: 1; display: grid; grid-template-columns: 188px 1fr; min-height: 0; }
.zp-nav { border-right: 1px solid var(--line); padding: 8px 6px; overflow-y: auto; }
.zp-nav-item { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; text-align: left; font: inherit; font-size: var(--fs-sm); background: none; border: 0; border-radius: 6px; padding: 5px 8px; cursor: pointer; color: var(--ink); }
.zp-nav-item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-nav-item:hover { background: var(--bg); }
.zp-nav-item.active { background: var(--surface-3); font-weight: 600; }
.zp-full { border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; margin-bottom: 8px; }
.zp-group { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 10px 8px 3px; border-top: 1px solid var(--line); margin-top: 6px; }
.zp-group:first-of-type { border-top: 0; margin-top: 0; }
.zp-gap { height: 10px; }
.zp-check { color: #fff; background: var(--pass); border-radius: 50%; width: 16px; height: 16px; font-size: var(--fs-xs); display: inline-grid; place-items: center; flex: none; }
.zp-count { font-size: var(--fs-xs); color: var(--muted); flex: none; }
.zp-content { overflow-y: auto; padding: 16px 20px; background: #fff; container-type: inline-size; }
/* a narrow form panel: the label / value tables (Equipment, Nameplate) take one pair per line instead of two, so values are not cut off */
@container (max-width: 820px) {
  table.wt.nameplate, table.wt.nameplate tbody { display: block; width: 100%; }
  table.wt.nameplate tr { display: grid; grid-template-columns: minmax(120px, 32%) 1fr; }
  table.wt.nameplate td { display: block; min-width: 0; width: auto !important; }
  table.wt.nameplate td:empty { display: none; }
  table.wt.nameplate td.wt-l { white-space: normal; align-self: center; }
}
.zp-card { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 14px; }
.zp-card-head { border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 10px 14px; }
.zp-card-head h3 { margin: 0; font-size: var(--fs-sm); }
.zp-card-body { padding: 12px 14px; }
.zp-card-body .grid { grid-template-columns: 1fr; gap: 10px; }
.zp-card-body .field label { color: var(--ink); font-size: var(--fs-xs); }
.zp-label { font-size: var(--fs-xs); margin: 4px 0 6px; }
.zp-test { padding: 4px 0; }
.zp-done { font-size: var(--fs-md); border: 1.5px solid var(--faint); border-radius: 50%; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; color: var(--faint); }
.zp-done.on { background: var(--pass); border-color: var(--pass); color: #fff; }
.zp-form { border: 1.5px dashed var(--faint); border-radius: 10px; padding: 12px; margin-bottom: 16px; }
.zp-form-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.zp-copy { font-size: var(--fs-lg); }
.zp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.zp-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.zp-seg input { position: absolute; opacity: 0; pointer-events: none; }
.zp-seg label { text-align: center; padding: 8px 6px; font-size: var(--fs-sm); cursor: pointer; border-left: 1px solid var(--line); color: var(--muted); }
.zp-seg label:first-of-type { border-left: 0; }
.zp-seg input:checked + label { background: var(--ink); color: #fff; font-weight: 600; }
.zp-seg input:disabled + label { cursor: default; }
.zp-viewing .zp-content input:disabled, .zp-viewing .zp-content select:disabled, .zp-viewing .zp-content textarea:disabled { background: var(--surface-3); color: var(--ink-2); border-color: var(--line); }
.zp-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); }

/* Grid Edit */
.zg-overlay { position: fixed; inset: 0; background: var(--scrim); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
.zg { background: #fff; border-radius: 10px; width: min(980px, calc(100vw - 48px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; box-shadow: var(--shadow-3); }
.zg-wide { width: min(1400px, calc(100vw - 48px)); height: calc(100vh - 48px); }
.zg-head { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px 8px; }
.zg-head h2 { font-size: var(--fs-xl); }
.zg > .search { margin: 0 20px 8px; width: auto; }
.zg-body { overflow: auto; padding: 4px 20px 12px; flex: 1; min-height: 0; }
.zg-group { margin-bottom: 14px; }
.zg-group-head { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.zg-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 14px; }
.zg-fields .chk { padding-top: 2px; font-size: var(--fs-sm); }
.zg-table { border-collapse: collapse; font-size: var(--fs-sm); }
.zg-table th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font-weight: 600; padding: 6px 8px; border: 1px solid var(--line); white-space: nowrap; min-width: 130px; z-index: 1; }
.zg-table th:nth-child(-n+2) { min-width: 0; }
.zg-sec { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.zg-table td { border: 1px solid var(--line); padding: 0; position: relative; }
.zg-num { color: var(--muted); text-align: center; padding: 0 8px !important; }
.zg-asset { padding: 6px 10px !important; white-space: nowrap; font-weight: 600; }
.zg-cell input[type=text], .zg-cell input[type=date], .zg-cell select { border: 0; border-radius: 0; padding: 6px 8px; background: transparent; min-width: 120px; }
.zg-cell input[type=checkbox] { margin: 8px; }
.zg-cell.sel { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--brand-red-tint); }
.zg-cell.staged { background: var(--warn-bg); }
.zg-cell.fill-target { background: var(--brand-red-tint); }
.zg-fill { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; background: var(--accent); cursor: crosshair; display: none; z-index: 2; }
.zg-cell.sel .zg-fill, .zg-cell:hover .zg-fill { display: block; }
.zg-ro td { background: var(--surface-3); color: var(--muted); }

/* Report (screen) */
.report-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.report { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.page { background: #fff; width: 8.5in; max-width: 100%; min-height: 11in; padding: .6in; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.page h2 { margin: 18px 0 8px; font-size: 16px; }
.page h3 { margin: 16px 0 6px; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.page-header { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); border-bottom: 2px solid var(--brand-red); padding-bottom: 6px; margin-bottom: 8px; }
.cover { display: flex; flex-direction: column; }
.cover-company { border-bottom: 3px solid var(--brand-red); padding-bottom: 10px; margin-bottom: 60px; color: var(--muted); }
.cover-name { font-size: 20px; font-weight: 700; color: var(--brand-ink); }
.cover h1 { font-size: 30px; margin-bottom: 6px; }
.cover-std { color: var(--muted); margin-bottom: 28px; font-size: 15px; }
.summary-chips { display: flex; gap: 10px; margin: 28px 0; }
.summary-chips > div { flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 10px; text-align: center; }
.summary-chips b { display: block; font-size: 24px; }
.summary-chips span { font-size: 12px; color: var(--muted); }
.c-pass b { color: var(--pass); } .c-investigate b { color: var(--inv); } .c-fail b { color: var(--fail); }
.signatures { margin-top: auto; display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 24px; padding-top: 40px; font-size: 12px; color: var(--muted); }
.signatures span { display: block; border-bottom: 1px solid var(--ink); height: 28px; }
table.kv { border-collapse: collapse; font-size: 12.5px; margin: 6px 0 4px; }
table.kv th { text-align: left; color: var(--muted); font-weight: 500; padding: 2px 18px 2px 0; vertical-align: top; }
table.kv td { padding: 2px 0; }
table.rpt { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 4px; }
table.rpt th { background: #edf1f6; text-align: left; padding: 4px 6px; border: 1px solid #d4dbe4; font-weight: 600; }
table.rpt td { padding: 3px 6px; border: 1px solid #e1e6ec; }
table.rpt .badge { font-size: 10.5px; padding: 1px 6px; }
.rpt-meta { font-size: 11.5px; color: var(--muted); margin: 0 0 4px; }
.rpt-comment { font-size: 11.5px; margin: 4px 0 0; }
.asset-title { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.asset-title h2 { margin: 0; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr !important; height: auto; }
  .assets { grid-template-columns: 1fr; }
  .asset-list { position: static; max-height: 240px; }
  main { padding: 16px; }
}

@media print {
  @page { size: letter; margin: 0.5in; }
  body { background: #fff; }
  .no-print, .report-bar { display: none !important; }
  .layout { display: block; height: auto; }
  main { overflow: visible; padding: 0; }
  .report { display: block; }
  .page { width: auto; min-height: 0; padding: 0; box-shadow: none; break-after: page; }
  .page:last-child { break-after: auto; }
  .cover { min-height: 9.8in; }
  table.rpt tr { break-inside: avoid; }
  .page h3 { break-after: avoid; }
}

/* ---------- technician workflow ---------- */
/* dialogs */
dialog.dlg { border: 0; border-radius: 10px; padding: 0; width: min(480px, calc(100vw - 32px)); box-shadow: var(--shadow-3); color: var(--ink); }
dialog.dlg::backdrop { background: var(--scrim); }
dialog.dlg form { padding: 20px 22px 16px; display: flex; flex-direction: column; gap: 10px; }
dialog.dlg h2 { font-size: var(--fs-xl); }
dialog.dlg p { margin: 0; }
dialog.dlg footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
dialog.dlg .field span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 4px; }
.dlg-list { margin: 0; padding: 8px 12px 8px 28px; background: var(--inv-bg); color: var(--warn-dark); border-radius: 6px; max-height: 220px; overflow: auto; font-size: var(--fs-sm); }
.dlg-err { color: var(--fail); font-size: var(--fs-sm); margin: 0; }
/* compare and choose (cloud.js conflictDialog): the two values side by side, stacked on a phone */
dialog.cmp-dlg { width: min(760px, calc(100vw - 32px)); }
.cmp-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow: auto; }
.cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 6px 8px 8px; border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
.cmp-row legend { font-weight: 600; font-size: var(--fs-sm); padding: 0 4px; }
.cmp-opt { display: grid; grid-template-columns: auto 1fr; gap: 0 6px; align-items: start; padding: 4px 6px; border-radius: 6px; cursor: pointer; min-width: 0; }
.cmp-opt:has(input:checked) { background: var(--inv-bg); }
.cmp-who { font-size: var(--fs-xs); color: var(--muted); }
.cmp-val { grid-column: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmp-stack .cmp-row { grid-template-columns: 1fr; }
@media (max-width: 600px) { .cmp-row { grid-template-columns: 1fr; } }
.dlg-danger h2 { color: var(--fail); }
.btn:focus-visible, .zf-row:focus-visible, .eq-head:focus-visible, .linklike:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

/* save / sync status: shape and colour both carry the state */
.save-state, .cloud-pill, .st { display: inline-flex; align-items: center; gap: 5px; }
.save-state { opacity: 1; font-weight: 600; border-radius: 12px; padding: 2px 10px; }
.save-state::before, .cloud-pill::before, .st::before { font-weight: 700; }
.save-state.busy::before, .st-busy::before { content: '⟳'; }
.save-state.ok::before, .st-ok::before { content: '✓'; }
.save-state.warn::before, .st-warn::before { content: '⚠'; }
.save-state.error::before, .st-error::before { content: '✕'; }
.save-state.busy { color: var(--brand-charcoal); }
.save-state.ok { color: var(--pass); }
.save-state.warn { background: var(--inv); color: #fff; }
.save-state.error { background: var(--fail); color: #fff; }
.cloud-pill.st-ok { background: transparent; border-color: var(--pass); color: var(--pass); }
.cloud-pill.st-busy { background: transparent; border-color: var(--brand-grey); color: var(--brand-charcoal); }
.cloud-pill.st-warn { background: var(--inv); border-color: var(--inv); color: #fff; }
.cloud-pill.st-error { background: var(--fail); border-color: var(--fail); color: #fff; }
.panel-status { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.st { font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px; border-radius: 12px; background: var(--rec-bg); color: var(--muted); }
.st-ok { background: var(--pass-bg); color: var(--pass); }
.st-busy { background: var(--info-bg); color: var(--brand-charcoal); }
.st-warn { background: var(--inv-bg); color: var(--warn); }
.st-error { background: var(--fail-bg); color: var(--fail); }

/* equipment finder */
.eq-search { max-width: 420px; min-width: 200px; }
.eq-filter { width: auto; max-width: 220px; }
.eq-table thead th { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); text-align: left; padding: 6px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.eq-table .eq-name .hint { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.zf-row { cursor: pointer; }
.chk-chip { display: inline-block; font-size: var(--fs-xs); font-weight: 700; border-radius: 10px; padding: 1px 7px; margin-right: 4px; white-space: nowrap; }
.chk-warn { background: var(--inv-bg); color: var(--warn); }
.chk-fail { background: var(--fail-bg); color: var(--fail); }

/* report panel */
.zp-title { min-width: 0; }
.zp-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zp-title h2 { font-size: var(--fs-2xl); }
.zp-job { color: var(--accent); font-weight: 600; margin-top: 2px; }
.zp-stepper { display: flex; align-items: center; gap: 6px; }
.zp-step-sec { display: flex; align-items: center; gap: 8px; padding: 6px 0 24px; }
.zp-danger { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); text-align: right; }
.zp-checks { display: inline-flex; gap: 2px; }
.zp-checks .chk-chip { margin: 0; }
.chk-list { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.chk-list li { border-radius: 6px; padding: 6px 10px; }
.chk-list li.chk-warn::before { content: '⚠ '; }
.chk-list li.chk-fail::before { content: '✕ '; font-weight: 700; }
.chk-ok { color: var(--pass); font-weight: 600; }
.linklike { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--faint); }
.zp-content input.fld-warn, .zp-content select.fld-warn { border-color: var(--warn-mark); background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn-mark); }
.zp-content .fld-fail, .zp-content select.res-fail { border-color: var(--fail); background: var(--fail-bg); color: var(--fail); font-weight: 600; }
.zp-content select.res-pass { border-color: var(--pass); background: var(--pass-bg); color: var(--pass); font-weight: 600; }
.zp-content input:focus, .zp-content select:focus { outline: 3px solid var(--focus-ring); }

/* tablets and small laptops */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 200px 1fr; }
  main { padding: 16px 14px 40px; }
  .eq-table :is(td, th):nth-last-child(1) { display: none; }   /* last change */
  .eq-table :is(td, th):nth-last-child(4) { display: none; }   /* sections */
  .zp-head { flex-wrap: wrap; padding: 10px 14px; }
  .zp-title h2 { font-size: var(--fs-xl); }
}
@media (max-width: 820px) {
  .eq-table :is(td, th):nth-last-child(6) { display: none; }   /* location */
  .eq-find .eq-search { max-width: none; flex: 1 1 100%; }
  .zp-main { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; }
  .zp-nav { display: flex; overflow-x: auto; gap: 4px; border-right: 0 !important; border-bottom: 1px solid var(--line); padding: 6px !important; }
  .zp-nav .zp-nav-item { width: auto; white-space: nowrap; }
  .zp-nav .zp-group, .zp-nav .zp-gap { display: none; }
  .zp-foot { flex-wrap: wrap; }
  .btn, .zp-nav-item { min-height: 40px; }
  input[type=text], input[type=date], input[type=search], select, textarea { min-height: 40px; font-size: var(--fs-lg); }
}

/* ---------- dashboard (home) ---------- */
.dash { max-width: 1280px; }
.dash-head { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-head h1 { font-size: var(--fs-2xl); }
.dash-attn { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-tile { font: inherit; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  text-align: left; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 8px; padding: 8px 14px; cursor: pointer; min-width: 190px; color: var(--ink); }
.dash-tile:hover { border-color: var(--line-2); }
.dash-tile.active { background: var(--brand-red-tint); border-color: var(--accent); }
.dash-n { grid-row: 1 / 3; font-size: var(--fs-2xl); font-weight: 700; line-height: 1; }
.dash-l { font-weight: 600; font-size: var(--fs-sm); }
.dash-j { font-size: var(--fs-xs); color: var(--muted); }
.t-review { border-left-color: var(--warn-mark); }
.t-hold { border-left-color: var(--faint); }
.t-failures { border-left-color: var(--fail); }
.t-failures .dash-n { color: var(--fail); }
.t-flagged { border-left-color: var(--warn-mark); }
.dash-ok { color: var(--pass); font-weight: 600; margin: 0 0 14px; }
.dash-find { margin-bottom: 10px; }
.dash-find .search { flex: 1 1 280px; max-width: 460px; }
.dash-card { padding: 0; overflow: auto; }
.dash-table { width: 100%; margin: 0; }
.dash-table th { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); text-align: left; padding: 8px 12px; background: var(--surface-2); white-space: nowrap; }
.dash-table td { padding: 9px 12px; vertical-align: top; border-top: 1px solid var(--line); }
.dash-row { cursor: pointer; }
.dash-row:hover { background: var(--surface-2); }
.dash-row:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.dj-job { min-width: 180px; }
.dj-site { max-width: 240px; }
.dj-site .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dj-eq { text-align: right; font-variant-numeric: tabular-nums; }
.dj-progress { min-width: 170px; width: 22%; }
.dj-when, .dj-dates { white-space: nowrap; }
.dj-when { color: var(--muted); }
.dj-attn .chk-chip { margin-bottom: 2px; }
.chk-hold { background: var(--surface-3); color: var(--ink-2); }
.chk-review { background: var(--inv-bg); color: var(--warn); }
.chk-ai-flag { background: var(--fail-bg); color: var(--fail-dark); }
.chk-ai-wait { background: var(--surface-3); color: var(--brand-charcoal); }
.chk-ai-ok { background: var(--pass-bg); color: var(--pass-dark); }
.ai-box { margin: 8px 0 0; padding: 8px 10px; border-radius: 6px; background: var(--surface-3); }
.ai-box.ai-ok { background: var(--pass-bg); }
.ai-box.ai-flag { background: var(--fail-bg); }
.ai-box .chk-list { margin: 6px 0 4px; }
.ai-box p.hint { margin: 4px 0 0; }
.pg { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--rec-bg); gap: 1px; }
.pg-seg { min-width: 4px; }
.pg-text { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pg-open, .pg-blank { background: var(--line-2); }
.pg-in_progress, .pg-started { background: var(--prog); }
.pg-hold { background: var(--faint); }
.pg-ready_for_review { background: var(--warn-mark); }
.pg-completed, .pg-sections_done { background: var(--pass); }
.pg-submitted { background: var(--pass-dark); }   /* done, like Completed: a darker green */
.pg-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 2px; vertical-align: -1px; }
.dash-legend { margin-top: 8px; line-height: 1.8; }
.dash-empty { max-width: 560px; margin: 56px auto; }
.dash-empty h1 { margin-bottom: 10px; }
.dash-empty p { color: var(--ink-2); margin-bottom: 16px; }
@media (max-width: 1100px) {
  .dj-table .dj-pm, .dj-table th:nth-child(4), .dj-table .dj-dates, .dj-table th:nth-child(3) { display: none; }
}
@media (min-width: 601px) and (max-width: 820px) {
  .dj-table .dj-site, .dj-table th:nth-child(2) { display: none; }
}
@media (max-width: 820px) {
  .dash-tile { min-width: 0; flex: 1 1 45%; }
}

/* ---------- Word report preparation (Export tab) ---------- */
.rx-controls { margin-bottom: 10px; }
.field-inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.field-inline select { width: auto; }
.rx-table th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.rx-table td { vertical-align: top; }
.rx-table tr.rx-out td { opacity: .45; }
.rx-table .rx-pick { width: 32px; }
.rx-table .rx-pick input { width: 20px; height: 20px; }
.rx-extras { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.rx-extras legend { float: left; padding: 0 16px 0 0; font-size: var(--fs-sm); }
.rx-table tr.rx-detail td { background: var(--surface-2); }
.rx-list { margin: 4px 0 10px; }
.chk-okchip { color: var(--pass); font-weight: 700; }
.rx-summary { margin: 10px 0; }
.rx-ack { display: flex; gap: 8px; align-items: flex-start; background: var(--inv-bg); color: var(--warn-dark); border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; }
.render-status { margin: 10px 0; }
.render-status .notice { margin-top: 8px; display: block; }
.locked-note { margin: 6px 0 0; }
.rx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 10px; }
.rx-toolbar fieldset.ir-images { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.rx-pickall { margin-left: auto; font-size: var(--fs-sm); }
.rx-pickall .linklike { color: var(--link); }
.rx-review { white-space: nowrap; font-size: var(--fs-sm); }
.rx-table td { padding-top: 6px; padding-bottom: 6px; }
.rx-actions { border-top: 1px solid var(--line); padding: 8px 0 4px; margin-top: 10px; }
.rx-actions .rx-summary { margin: 0 0 6px; font-size: var(--fs-sm); }
.rx-actions .render-status { margin: 6px 0 0; }
.rx-include { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 8px; font-size: var(--fs-sm); }
.rx-about { margin-top: 10px; font-size: var(--fs-sm); }
.rx-about summary { cursor: pointer; color: var(--muted); }
.rx-letter { border: 1px solid var(--line); border-radius: 8px; margin: 12px 0 0; padding: 8px 12px; }
.rx-letter-toggle { font-weight: 600; text-decoration: none; }
.rx-letter-body { margin-top: 8px; }
.rx-lp { margin: 0 0 14px; }
.rx-lp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rx-lp p.hint { margin: 2px 0 4px; }
.rx-lp textarea { width: 100%; font: inherit; line-height: 1.4; resize: vertical; }
.rx-lp .notice { margin-top: 6px; }
.rx-lp-new { white-space: pre-wrap; margin: 6px 0; font: inherit; background: var(--panel); padding: 6px 8px; border-radius: 6px; }
@media (max-width: 700px) {
  .rx-pickall { margin-left: 0; }
  .rx-toolbar .field-inline { width: 100%; }
  .rx-toolbar .field-inline select { flex: 1; min-width: 0; }
  .rx-actions .btn.primary { width: 100%; }
}


/* =================================================================================================
   Design system pass: one type scale, spacing, controls, states and focus ring for the whole app.
   These rules refine the components above; they do not change layout structure or behaviour.
   ================================================================================================= */
body { font-size: var(--fs-md); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1 { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: var(--fs-xl); font-weight: 650; }
h3 { font-size: var(--fs-lg); font-weight: 650; }
.hint { font-size: var(--fs-xs); }

/* keyboard focus: always visible, never colour-only (a 2px ring with an offset) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
input:focus, select:focus, textarea:focus { border-color: var(--focus); }
.topbar :focus-visible { outline-color: var(--brand-red); }
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--panel); color: var(--ink); padding: 8px 14px; border-radius: 6px; box-shadow: var(--shadow-2); }
.skip-link:focus { top: 8px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main:focus { outline: none; }

.icon { min-width: 28px; min-height: 28px; }
.linklike { color: var(--info); }
.linklike:hover { text-decoration-color: currentColor; }

/* form controls: one height, readable placeholder, clear disabled state */
input[type=text], input[type=date], input[type=search], input[type=email], input[type=password], select { min-height: var(--control-h); }
input[type=email], input[type=password] { font: inherit; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
input, select, textarea { border-color: var(--line-2); }
::placeholder { color: var(--muted-2); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-3); color: var(--ink-2); border-style: dashed; }
.field label, .field .field-label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.field-error { color: var(--error); font-weight: 600; font-size: var(--fs-sm); margin: 6px 0 0; }
.field-error::before { content: '✕ '; }
input[aria-invalid="true"]:not(.fld-warn) { border-color: var(--error); }

/* tables: quiet header, zebra-free rows with a hover, numbers right-aligned where marked */
table.data th { font-weight: 600; }
/* a form section laid out like the Word table it prints into */
table.wt { table-layout: auto; border: 1px solid var(--line); }
table.wt td, table.wt th { border: 1px solid var(--line); padding: 3px 5px; font-size: var(--fs-xs); }
table.wt th { text-align: center; background: var(--surface-2); color: var(--ink); white-space: normal; vertical-align: middle; }
table.wt td.wt-l { text-align: right; color: var(--muted); white-space: nowrap; }
table.wt tr.wt-band th { text-align: left; background: var(--surface-3); }
table.wt input:not([type="checkbox"]):not([type="radio"]), table.wt select { width: 100%; min-width: 64px; }
table.wt td:has(input[type="checkbox"]) { text-align: center; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data th[scope="row"] { font-weight: 500; text-align: left; color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }

/* notices and state messages: colour + icon + words */
.notice { border: 1px solid transparent; }
.notice.warn { border-color: var(--warn-line); }
.notice.error { border-color: var(--fail-line); }
.notice.ok { background: var(--success-bg); color: var(--pass-dark); border-color: var(--pass-line); display: block; }
.notice.info { background: var(--info-bg); color: var(--brand-ink); border-color: var(--line-2); }
.badge { font-weight: 600; }
.b-pass, .b-fail, .b-investigate { border: 1px solid transparent; }
.busy::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 2px solid var(--line-2); border-top-color: var(--info); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* page hierarchy: breadcrumb above the job title; the current tab is underlined and bold */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 4px; }
.crumbs .linklike { color: var(--info); text-decoration: none; }
.crumbs .linklike:hover { text-decoration: underline; }
.tab[aria-current="page"] { font-weight: 650; }

/* sidebar: calmer job list (one summary line per job) */
.job-item { border-left: 3px solid transparent; }
.job-item.active { border-left-color: var(--accent); }
.job-item .job-sub { font-size: var(--fs-xs); }

/* the "mark section complete" toggle needs 3:1 against its card header */
.zp-done { color: var(--muted-2); }

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* selection circles (Bulk Ops): round, so they read as "pick this row" rather than a form checkbox */
input.sel-circle { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 2px solid var(--muted-2); border-radius: 50%;
  background: #fff; cursor: pointer; display: inline-grid; place-items: center; vertical-align: middle; flex: none; }
input.sel-circle:hover { border-color: var(--accent); }
input.sel-circle:checked { border-color: var(--accent); background: var(--accent); }
input.sel-circle:checked::after { content: '✓'; color: #fff; font-size: var(--fs-xs); font-weight: 700; line-height: 1; }
input.sel-circle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.zf-row.selected { background: var(--brand-red-tint); }

/* scope of work checklist (Job details) */
.scope-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; }
.scope-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.scope-item label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; flex: 1; }
.scope-item input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--pass); }
.scope-item.done .scope-text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.scope-by { white-space: nowrap; }
.scope-head { font-weight: 650; font-size: var(--fs-sm); color: var(--ink-2); padding: 12px 4px 4px; }
.scope-edit summary { cursor: pointer; color: var(--info); font-size: var(--fs-sm); margin-top: 6px; }

/* test equipment: chips and picker at the bottom of each form; the company list in Settings */
.te-card .te-add { width: auto; min-width: 280px; max-width: 100%; margin-top: 8px; }
.zp-chip.te-gone { background: var(--warn-bg); color: var(--warn); }
.te-table input { min-width: 120px; }
.te-actions { white-space: nowrap; text-align: right; }
.te-actions .btn + .btn { margin-left: 6px; }
.te-retired td { color: var(--muted); }

/* Sites and last time's results (sites.js) */
.site-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -4px 0 12px; font-size: var(--fs-sm); }
.site-link .hint { margin: 0; }
.site-pick select { max-width: 260px; }
/* polarization ratio and index: worked out from the readings, locked (autocalc.js) */
input.calc-ro { background: var(--surface-3); cursor: default; }
.calc-src { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.25; }
input.prev::placeholder { color: var(--muted-2); font-style: italic; opacity: 1; }
select.prev:has(> option[value=""]:checked) { color: var(--muted-2); font-style: italic; }
.prev-hint { margin-left: 6px; font-size: var(--fs-xs); color: var(--muted-2); font-style: italic; }
.prev-note { margin: 8px 0; padding: 8px 10px; border-radius: 6px; background: var(--surface-3); font-size: var(--fs-sm); }
.prev-sample { color: var(--muted-2); font-style: italic; }
.site-hist { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.site-hist h3 { margin: 0 0 4px; }
.sh-actions { margin: 6px 0; }
.sh-list { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.sh-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.sh-row:last-child { border-bottom: 0; }
.sh-row .sh-when { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.sh-row.sh-on { opacity: .6; cursor: default; }

/* Site view (siteview.js) */
.site-page { padding: 0 0 24px; }
.site-page h1 { margin: 6px 0 4px; }
.sh-table tr.sh-eq td { vertical-align: top; }
.sh-toggle { font-size: var(--fs-md); width: 22px; }
.sh-hist > td { background: var(--surface-2); padding: 6px 6px 10px 28px; }
.site-jobs { margin: 0; padding-left: 18px; }
.site-jobs li { margin: 4px 0; }
.snap-table td.snap-changed { background: var(--inv-bg); font-weight: 600; }
.snap-table td:first-child { width: 46%; }
.snap-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 16px; margin: 0 0 8px; }
.snap-kv dt { font-size: var(--fs-xs); color: var(--muted); }
.snap-kv dd { margin: 0; }
.snap-compare { max-width: 360px; }

/* "A new version is ready" (pwa.js) */
.update-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 5000; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px 14px; background: var(--brand-ink); color: #fff; border-radius: 8px; box-shadow: var(--shadow-3); max-width: 520px; margin: 0 auto; }
.update-bar span { flex: 1 1 200px; }

/* Main menu (nav.js) */
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--brand-charcoal); cursor: pointer; }
.nav-toggle:hover { background: var(--bg); border-color: var(--line); }
.nav-toggle svg, .nav-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 8px 12px; border: 0; border-left: 3px solid transparent; border-radius: 6px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nav-item:hover { background: var(--bg); }
.nav-item.active { background: var(--brand-red-tint); border-left-color: var(--brand-red); color: var(--brand-red-dark); font-weight: 600; }
.nav-label { white-space: nowrap; }
.nav-count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--brand-red); color: #fff; font-size: var(--fs-xs); font-weight: 700; text-align: center; line-height: 20px; }
.nav-scrim { display: none; }
body.nav-collapsed .layout { grid-template-columns: 60px 1fr; }
body.nav-collapsed .nav-label { display: none; }
body.nav-collapsed .nav-item { justify-content: center; padding: 8px 0; }
body.nav-collapsed .nav-count { position: absolute; top: 2px; right: 3px; margin: 0; min-width: 16px; padding: 0 4px; font-size: var(--fs-xs); line-height: 16px; }
body.signed-out .nav-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .layout, .sidebar { transition: none; } }

/* On a phone or small tablet the menu is a drawer, opened from the top bar's menu button */
@media (max-width: 900px) {
  /* the menu is a drawer, opened from the top bar's menu button */
  .sidebar { position: fixed; top: 59px; left: 0; bottom: 0; width: 264px; z-index: 300; transform: translateX(-104%); transition: transform .18s ease; box-shadow: 4px 0 24px var(--shadow-color); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: 59px 0 0 0; background: var(--scrim); z-index: 250; }
  body.nav-collapsed .nav-label { display: inline; }
  body.nav-collapsed .nav-item { justify-content: flex-start; padding: 8px 12px; }
  body.nav-collapsed .nav-count { position: static; margin-left: auto; min-width: 20px; line-height: 20px; font-size: var(--fs-xs); padding: 0 6px; }
}
.conn-field select { max-width: 360px; }
table.dcir th small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
table.dcir tr.dc-kv td { background: var(--surface-2); }
table.dcir tr.dc-ratio th { font-weight: 500; }
.zp-progress { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); color: var(--muted); min-width: 110px; }
.zp-progress b { color: var(--ink); }
.zp-bar { display: block; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.zp-bar i { display: block; height: 100%; background: var(--pass); }
.zp-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* laid-out tables: stronger rows, headings that stay visible while scrolling */
table.wt tbody tr:nth-child(even) td:not(.wt-l) { background: var(--surface-2); }
table.wt tbody tr:hover td:not(.wt-l), table.wt tbody tr:focus-within td:not(.wt-l) { background: var(--surface-3); }
table.wt, table.wt td, table.wt th { border-color: var(--line-2); }
table.wt.wt-sticky thead th, table.chk-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-3); box-shadow: 0 1px 0 var(--line-2); }
@media (min-width: 900px) { .zp-content .tbl-wrap:has(> table.wt) { overflow-x: visible; } }
table.chk-table th[scope="row"] { min-width: 170px; text-align: left; font-weight: 500; color: var(--ink); background: var(--surface-2); white-space: normal; }
table.chk-table .chk-h { font-size: var(--fs-xs); white-space: normal; text-align: center; }
table.chk-table .chk-cell { text-align: center; padding: 2px 4px; }
table.chk-table input[type="radio"] { width: 26px; height: 26px; accent-color: var(--brand-red); cursor: pointer; pointer-events: none; margin: 0; }
table.chk-table td.chk-cell { cursor: pointer; padding: 0; height: 46px; }
table.chk-table td.chk-cell:hover { background: var(--surface-3) !important; }
table.wt td:has(> input[type="checkbox"]:only-child) { cursor: pointer; }
table.wt input[type="checkbox"] { width: 22px; height: 22px; }
/* Select Tests: big round on / off buttons, the whole row is the click target */
.zp-test { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; cursor: pointer; font-size: var(--fs-md); }
.zp-test:hover { background: var(--surface-2); }
.zp-test:has(input:checked) { background: var(--brand-red-tint); border-color: var(--brand-red); }
.zp-test input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; flex: none; margin: 0; border: 2px solid var(--faint); border-radius: 50%; display: grid; place-content: center; background: #fff; cursor: pointer; }
.zp-test input[type="checkbox"]::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-red); transform: scale(0); transition: transform .08s; }
.zp-test input[type="checkbox"]:checked { border-color: var(--brand-red); }
.zp-test input[type="checkbox"]:checked::before { transform: scale(1); }
.zp-test input[type="checkbox"]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
table.chk-table tr.res-fail-row th, table.chk-table tr.res-fail-row td { background: var(--fail-bg) !important; }
table.chk-table tr.res-pass-row th { box-shadow: inset 3px 0 0 var(--pass); }
table.chk-table .chk-clear { font-size: var(--fs-md); color: var(--muted); }
table.nameplate td.wt-l { width: 17%; }
table.eqhead-table td.wt-l { width: 17%; }
.ph-add { align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.ph-kind { font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 6px; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ph-tile { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.ph-thumb { border: 0; padding: 0; background: var(--surface-3); cursor: zoom-in; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-tile figcaption { padding: 8px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); position: relative; }
.ph-del { position: absolute; top: 4px; right: 4px; font-size: var(--fs-lg); }
.ph-tile figcaption select, .ph-tile figcaption input { width: 100%; }
.ph-state { font-size: var(--fs-xs); color: var(--muted); }
.ph-state.ok { color: var(--pass); }
dialog.photo-view { max-width: min(92vw, 1100px); }
dialog.photo-view img { max-width: 100%; max-height: 70vh; display: block; margin: 8px auto; }
table.wt .wt-t { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 2px; }

/* infrared scanning jobs */
.ir-group { margin: 14px 0 6px; font-size: var(--fs-md); }
.ir-table th[scope="row"] { text-align: left; white-space: normal; }
.ir-actions { white-space: nowrap; }
.ir-btn { min-width: 112px; min-height: 44px; font-size: var(--fs-lg); margin-right: 6px; }
.ir-btn.scanned.on { background: var(--pass); border-color: var(--pass); color: #fff; }
.ir-btn.issue.on { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.ir-row.ir-issue th, .ir-row.ir-issue td { background: var(--brand-red-tint); }
.ir-detail td { background: var(--surface-2); padding: 8px 10px 14px; }
.ir-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ir-grid .wide { grid-column: 1 / -1; }
.ir-bar { margin: 8px 0 12px; flex-wrap: wrap; }
.ir-thumb { height: 44px; border-radius: 4px; margin-right: 4px; vertical-align: middle; }
.ir-rev-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.ir-rev-thumb { width: 150px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
fieldset.ir-images { border: 1px solid var(--line); border-radius: 8px; margin: 8px 0 12px; padding: 8px 12px; }
fieldset.ir-images label { display: block; padding: 4px 0; font-size: var(--fs-md); }

/* sorting and filtering of tables (tablesort.js) */
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--text, inherit); }
table.data th.sortable::after { content: ' ↕'; opacity: .35; font-size: var(--fs-xs); }
table.data th[aria-sort="ascending"]::after { content: ' ▲'; opacity: .9; }
table.data th[aria-sort="descending"]::after { content: ' ▼'; opacity: .9; }
table.data tr[hidden] { display: none; }
.tbl-filter { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.tbl-filter .search { flex: 1 1 240px; max-width: 360px; }
.eq-actions { white-space: nowrap; }

/* QR codes (qr.js) */
.qr-cell { display: flex; gap: 6px; align-items: center; }
.qr-cell input { flex: 1 1 auto; min-width: 0; }
.qr-dlg { width: min(460px, calc(100vw - 32px)); }
.qr-video { position: relative; background: #000; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 8px; }
.qr-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-frame { position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 8px; }
tr.qr-found > * { background: var(--warn-bg); }

/* trip elements: test point, manufacturer's curve and readings, the same widths in every element so they line up (forms.js tripBody) */
.trip-layout { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.trip-layout > .tbl-wrap, .trip-layout > .trip-empty { margin-bottom: 0; }
.trip-layout > .trip-point, .trip-layout > .trip-curve { flex: 1 1 240px; min-width: 0; }
.trip-layout > .trip-read { flex: 2 1 340px; min-width: 0; }
table.trip-settings-table, table.trip-poles { width: 100%; table-layout: fixed; }
table.trip-settings-table caption, table.trip-poles caption { text-align: left; font-size: var(--fs-xs); padding: 0 0 4px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.trip-settings-table th[scope="row"], table.trip-poles th[scope="row"] { text-align: right; white-space: nowrap; background: var(--surface-2); font-weight: 500; font-size: var(--fs-xs); padding: 3px 6px; }
table.trip-settings-table th[scope="row"] { width: 110px; }
table.trip-poles th[scope="row"] { width: 72px; }
table.trip-poles thead th { text-align: center; }
table.trip-poles input, table.trip-settings-table input { width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
.trip-hint { margin: 6px 0 0; }

/* reading a nameplate photo (nameplate.js) */
.np-ocr { margin: 10px 0 4px; align-items: center; flex-wrap: wrap; }
.np-dlg { width: min(640px, calc(100vw - 32px)); }
.np-table input[type="text"] { width: 100%; min-width: 0; box-sizing: border-box; }
.np-table th[scope="row"] { text-align: left; font-weight: 500; white-space: nowrap; }
/* reading handwritten test results (resultsocr.js) */
.ro-ocr { margin: 0 0 10px; align-items: center; flex-wrap: wrap; }
.ro-dlg { width: min(780px, calc(100vw - 32px)); }
.ro-table select { width: 100%; min-width: 0; box-sizing: border-box; }
.ro-table th[scope="row"] { white-space: normal; }
.ro-read { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
.ro-secs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; max-height: 40vh; overflow: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.ro-secs.ro-none { border-color: var(--fail); }
.np-notes { margin-top: 8px; }

/* copying test equipment between forms (instruments.js) */
.te-card .te-copy { margin: 8px 0 0 8px; }
.te-dlg { width: min(640px, calc(100vw - 32px)); }
.te-quick { align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.te-quick .te-find { flex: 1 1 140px; min-width: 120px; }
.te-list { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.te-row { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.te-row:last-child { border-bottom: 0; }
.te-row[hidden] { display: none; }
.te-row .te-now { display: block; }
.te-mode { border: 0; padding: 0; margin: 10px 0 0; display: flex; gap: 16px; flex-wrap: wrap; }

/* infrared scan list: finding items, adding items (infrared.js) */
.ir-find { align-items: center; margin: 10px 0 8px; flex-wrap: wrap; }
.ir-find .search { flex: 1 1 260px; max-width: 460px; }
.ir-table .ir-qr code { font-size: var(--fs-xs); }
.ir-add-tabs { margin: 0 16px; }
.ir-earlier { max-height: 46vh; overflow: auto; margin-top: 8px; }
.ir-earlier code { margin-left: 6px; }

/* one label, several places (qr.js) */
.qr-links { margin-top: 2px; }
.qr-links .linklike { font-size: var(--fs-xs); text-align: left; }
.qr-choose { width: min(520px, calc(100vw - 32px)); }
.qr-choices { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.qr-choice { justify-content: flex-start; text-align: left; white-space: normal; height: auto; padding: 8px 12px; }

/* ---------- phones (600 px and narrower): one column, nothing wider than the screen ---------- */
@media (max-width: 600px) {
  main { padding: 12px 12px 72px; }
  h1 { font-size: var(--fs-2xl); line-height: 1.2; }
  /* top bar: logo, the two status pills (short), Settings; the name and role are in the menu's place on wider screens */
  .topbar { gap: 6px; padding: 0 8px; }
  .brand-logo { height: 24px; width: auto; }
  .topbar-actions { gap: 6px; min-width: 0; }
  .topbar .who { display: none; }
  .topbar .who-short { display: inline; font-weight: 700; }
  .save-state, .cloud-pill { max-width: 112px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; font-size: var(--fs-xs); }
  .topbar .btn.ghost { padding: 4px 8px; min-height: 32px; font-size: var(--fs-sm); }
  /* job page head: title, then the job line and Scan QR on one row */
  .job-head { flex-wrap: wrap; align-items: center; gap: 8px; }
  .job-head > div:first-child { flex: 1 1 100%; min-width: 0; }
  .job-head h1 { font-size: var(--fs-xl); }
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs .tab { white-space: nowrap; }
  /* equipment toolbar: Excel stays on the computer; the two drop-downs side by side */
  .zf-bulk { display: none; }
  .eq-toolbar .eq-row { flex-wrap: wrap; gap: 6px; }
  .eq-toolbar select { flex: 1 1 45%; min-width: 0; }
  .eq-toolbar .search { flex: 1 1 100%; max-width: none; }
  .dash-find { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .dash-find .search { grid-column: 1 / -1; max-width: none; }
  .dash-find select { min-width: 0; width: 100%; }
  .dash-legend { display: none; }
  /* the attention tiles become chips that wrap, so the jobs start near the top of a phone and no chip is hidden off the edge */
  .dash-attn { flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .dash-tile { flex: 0 0 auto !important; display: inline-flex; gap: 6px; padding: 6px 10px; min-height: 0; }
  .dash-tile .dash-n { font-size: var(--fs-lg); }
  .dash-tile .dash-j { display: none; }
  table.dash-table .dj-job { order: -2; }
  table.dash-table .dj-site { order: -1; flex: 1 1 100%; max-width: none; color: var(--muted); font-size: var(--fs-sm); }
  table.dash-table .dj-site .hint { display: inline; }
  table.dash-table .dj-site .hint::before { content: ' · '; }
  /* lists become cards: one item per card, its name first, the rest wrapping under it (sort with the Sort choice above the list) */
  :is(table.eq-table, table.dash-table, table.ir-table) { display: block; width: 100%; min-width: 0; }
  :is(table.eq-table, table.dash-table, table.ir-table) thead { display: none; }
  :is(table.eq-table, table.dash-table, table.ir-table) tbody { display: block; }
  :is(table.eq-table, table.dash-table, table.ir-table) tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  :is(table.eq-table, table.dash-table, table.ir-table) tbody tr[hidden] { display: none; }
  :is(table.eq-table, table.dash-table, table.ir-table) :is(td, th) { display: block; border: 0 !important; padding: 0 !important; width: auto !important; max-width: 100%; white-space: normal; background: transparent; }
  :is(table.eq-table, table.dash-table, table.ir-table) :is(td, th):empty { display: none; }
  :is(table.eq-table, table.dash-table) tbody tr > :first-child:not(.zf-chk), table.eq-table .eq-name { flex: 1 1 100%; font-size: var(--fs-lg); }
  table.eq-table .zf-chk { flex: 0 0 auto; }
  table.eq-table .zf-chk + .eq-name { flex: 1 1 70%; }
  table.dash-table tbody tr > td:last-child .btn { margin-top: 4px; }
  /* the scan list: the item and its label on top, then Scanned / Issue as two big buttons */
  table.ir-table tbody tr.ir-row > th { flex: 1 1 100%; font-size: var(--fs-lg); }
  table.ir-table .ir-actions { flex: 1 1 100%; display: flex !important; gap: 8px; flex-wrap: wrap; order: 5; }
  table.ir-table .ir-actions .ir-btn { flex: 1 1 40%; min-height: 48px; font-size: var(--fs-lg); }
  table.ir-table .ir-actions .linklike { flex: 1 1 100%; text-align: left; }
  table.ir-table tr.ir-detail > td { flex: 1 1 100%; }
  table.ir-table tr.ir-detail { padding-top: 0; }
  .ir-find .search { flex: 1 1 100%; max-width: none; order: -1; }
  .ir-find .qr-btn { flex: 1 1 100%; min-height: 48px; font-size: var(--fs-lg); }
  .ir-bar .btn { flex: 1 1 100%; }
  /* the form panel: a short header (equipment, status, form type), the controls on one row, a slim footer */
  .zp-head { display: grid !important; grid-template-columns: 1fr auto; gap: 6px 8px; padding: 8px 12px !important; }
  .zp-head > .zp-title, .zp-head > div:first-child { grid-column: 1; min-width: 0; }
  .zp-head .zp-x { grid-column: 2; grid-row: 1; align-self: start; }
  .zp-head .spacer, .zp-head .zp-progress, .zp-head .zp-job { display: none; }
  .zp-title h2 { font-size: var(--fs-xl) !important; }
  .zp-title .muted.small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zp-head .zp-stepper, .zp-head .zp-mode { grid-column: 1 / -1; }
  .zp-head .zp-stepper { display: flex; align-items: center; gap: 6px; }
  .zp-head .zp-stepper .btn { flex: 1 1 0; }
  .zp-head .zp-mode { display: flex; }
  .zp-head .zp-mode button { flex: 1 1 0; }
  .zp-foot { padding: 6px 12px !important; gap: 6px; }
  .zp-foot > .btn[data-act="panelClose"] { display: none; }
  .zp-foot .panel-status { flex: 1 1 auto; min-width: 0; display: flex; gap: 4px; overflow: hidden; white-space: nowrap; font-size: var(--fs-xs); }
  main:has(.ir-find) .job-head .qr-btn { display: none; }   /* the scan list has its own, next to the find box */
  .zp-foot .panel-status .st { padding: 1px 6px; }
  .zp-content { padding: 10px !important; }
  /* label / value tables (Equipment, Nameplate): one pair per line */
  table.wt.nameplate, table.wt.nameplate tbody { display: block; width: 100%; }
  /* on a phone the label sits above its box, so neither has to wrap or cut off */
  table.wt.nameplate tr { display: grid; grid-template-columns: 1fr; }
  table.wt.nameplate td { display: block; min-width: 0; border: 0 !important; padding: 2px 6px !important; }
  table.wt.nameplate td:not(.wt-l) { padding-bottom: 8px !important; border-bottom: 1px solid var(--line) !important; }
  table.wt.nameplate td.wt-l { width: auto !important; text-align: left; background: transparent !important; font-size: var(--fs-xs); padding-top: 8px !important; }
  table.wt.nameplate input:not([type="checkbox"]), table.wt.nameplate select { font-size: var(--fs-lg); min-height: 40px; }
  table.wt.nameplate td:empty { display: none; }
  table.wt.nameplate td.wt-l { white-space: normal; }
  .similar-box .row, .np-ocr { flex-wrap: wrap; }
  .similar-box .field-inline { flex: 1 1 100%; }
  /* dialogs use the whole screen width */
  dialog.dlg { width: calc(100vw - 16px) !important; max-width: none; margin: auto; }
}

/* the phone layout of the forms (forms.js phoneLayoutBody, phoneChecklistBody) */
.ph-list { display: flex; flex-direction: column; gap: 10px; }
.ph-band { margin: 6px 0 0; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.ph-card { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.ph-title { font-weight: 600; font-size: var(--fs-md); }
.ph-field { display: flex; flex-direction: column; gap: 4px; }
.ph-field .ph-label { font-size: var(--fs-xs); color: var(--muted); }
.ph-field :is(input, select, textarea) { width: 100%; box-sizing: border-box; }
.ph-chk { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 0; }
.ph-chk legend { font-weight: 600; font-size: var(--fs-md); padding: 0 4px; }
.ph-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ph-opt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 18px; padding: 8px 12px; font-size: var(--fs-md); cursor: pointer; min-height: 40px; }
.ph-opt input { margin: 0; }
.ph-opt:has(input:checked) { border-color: var(--brand-red); background: var(--brand-red-tint); font-weight: 600; }

/* the phone form: a two-row header, and the sections as a menu (forms.js viewPanel) */
.zp-jump { display: none; }
@media (max-width: 600px) {
  .zp-head { grid-template-columns: auto 1fr auto !important; gap: 4px 6px !important; padding: 6px 10px !important; }
  .zp-head > .zp-title, .zp-head > div:first-child { grid-column: 1 / 3 !important; grid-row: 1; }
  .zp-head .zp-x { grid-column: 3 !important; grid-row: 1 !important; }
  .zp-head .zp-jump { display: inline-flex; grid-column: 1; grid-row: 2; max-width: 46vw; min-height: 36px; gap: 4px; }
  .zp-jump-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zp-head .zp-stepper { grid-column: 2 !important; grid-row: 2; justify-content: center; gap: 2px !important; }
  .zp-head .zp-stepper .btn { flex: 0 0 auto !important; min-height: 36px; padding: 2px 12px; font-size: var(--fs-xl); line-height: 1; }
  .zp-head .zp-step-word { display: none; }
  .zp-head .zp-stepper .hint { font-size: var(--fs-xs); white-space: nowrap; }
  .zp-head .zp-mode { grid-column: 3 !important; grid-row: 2; }
  .zp-head .zp-mode button { min-height: 36px; padding: 2px 8px; font-size: var(--fs-sm); white-space: nowrap; }
  .zp-title h2 { font-size: var(--fs-xl) !important; }
  .zp-title .zp-title-row { gap: 6px; }
  /* the section strip is replaced by the menu */
  .zp-main { position: relative; }
  .zp-nav { display: none !important; }
  .zp.jump-open .zp-nav { display: flex !important; flex-direction: column; position: absolute; top: 0; left: 0; right: 0; z-index: 20; max-height: 72vh; overflow-y: auto;
    padding: 6px !important; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2); }
  .zp.jump-open .zp-nav .zp-nav-item { width: 100%; justify-content: space-between; min-height: 44px; white-space: normal; }
  .zp.jump-open .zp-nav .zp-group { display: block !important; margin: 8px 8px 2px; }
}

/* "Show more" under a long list drawn in parts (job list, Equipment tab) */
.eq-more { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 0; }
/* a finished job kept only in the company account (cloud.js): listed, downloaded when opened */
.dj-archived td { color: var(--muted); }
.eq-far h3 { margin: 0 0 8px; }