/* Design tokens — fonts loaded via <link> in index.html */
:root {
  --ea-green-900: #2f4a23; --ea-green-800: #3d6230; --ea-green-700: #4a763b;
  --ea-green-600: #578842; --ea-green-500: #6a9d54; --ea-green-400: #88b573;
  --ea-green-300: #adcc9c; --ea-green-200: #d0e2c5; --ea-green-100: #e8f0e2; --ea-green-50: #f4f8f1;
  --ea-charcoal-900: #1f2022; --ea-charcoal-800: #2c2d2f; --ea-charcoal-700: #3a3b3d;
  --ea-charcoal-600: #4f5052; --ea-charcoal-500: #6e6f72; --ea-charcoal-400: #909195;
  --ea-charcoal-300: #b6b7ba; --ea-charcoal-200: #d5d6d8; --ea-charcoal-100: #ececed; --ea-charcoal-50: #f6f6f7;
  --ea-sky-600: #2b80b8; --ea-sky-500: #3a9ed6; --ea-sky-100: #e2f1f9;
  --ea-amber-600: #c6822a; --ea-amber-500: #e09a3a; --ea-amber-100: #fcefd6;
  --ea-medgas-red: #c8362d; --ea-medgas-red-100: #fbe4e2;
  --ea-white: #ffffff; --ea-paper: #fafaf8;
  --bg-page: #edf3ea; --bg-surface: var(--ea-white);
  --bg-subtle: var(--ea-charcoal-50); --bg-muted: var(--ea-charcoal-100);
  --fg-primary: var(--ea-charcoal-900); --fg-secondary: var(--ea-charcoal-600);
  --fg-tertiary: var(--ea-charcoal-500); --fg-muted: var(--ea-charcoal-400);
  --fg-brand: var(--ea-green-700);
  --border-subtle: var(--ea-charcoal-100); --border-default: var(--ea-charcoal-200);
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px;
  --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px;
  --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6;
  --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wider: 0.12em;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(31,32,34,.06);
  --shadow-sm: 0 1px 2px rgba(31,32,34,.06), 0 1px 3px rgba(31,32,34,.05);
  --shadow-md: 0 2px 4px rgba(31,32,34,.06), 0 4px 12px rgba(31,32,34,.06);
  --shadow-lg: 0 4px 8px rgba(31,32,34,.06), 0 12px 28px rgba(31,32,34,.08);
  --dur-fast: 160ms; --dur-base: 240ms;
  --ease-out: cubic-bezier(0.22,1,0.36,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);

  /* Field-app design system tokens */
  --touch-min:    44px;
  --touch-comfy:  52px;
  --touch-large:  64px;
  --row-pad-y:    14px;
  --row-pad-x:    16px;
  --f-border:     #C5C7CB;
  --status-ok:    #2E7A1E;  --status-ok-bg:   #E4F1DB;
  --status-warn:  #B5651D;  --status-warn-bg: #FCEBD2;
  --status-fail:  #B5251C;  --status-fail-bg: #FBE0DD;
  --status-na:    #6E6F72;  --status-na-bg:   #ECECED;

  /* Legacy bridge */
  --pass: var(--status-ok); --fail: var(--status-fail);
  --field-border: var(--f-border);
  --field-status-ok: var(--status-ok); --field-status-ok-bg: var(--status-ok-bg);
  --field-status-warn: var(--status-warn); --field-status-warn-bg: var(--status-warn-bg);
  --field-status-fail: var(--status-fail); --field-status-fail-bg: var(--status-fail-bg);
  --field-status-na: var(--status-na); --field-status-na-bg: var(--status-na-bg);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--fg-primary);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: var(--lh-relaxed);
}

/* ── Screens ──────────────────────────────────────────── */
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }

/* ══════════════════════════════════════════════════════
   TOP BAR — white, neutral (matches Claude Design fa-topbar)
   ══════════════════════════════════════════════════════ */
.header {
  background: var(--bg-surface);
  color: var(--fg-primary);
  padding: 0 var(--row-pad-x);
  display: flex; align-items: center; gap: var(--space-3);
  position: sticky; top: 0; z-index: 30;
  height: 56px;
  border-bottom: 1px solid var(--f-border);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
/* Title is absolutely centered so it's always in the middle of the full header width */
#header-name,
.header > span:not(.header-brand) {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font-size: 16px; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight); color: var(--fg-primary);
  pointer-events: none;
}

.header-brand {
  font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-bold);
  color: var(--ea-green-700); letter-spacing: 0.04em;
  flex-shrink: 0; margin-left: auto; z-index: 1;
}

/* ══════════════════════════════════════════════════════
   ROOT MENU HEADER — the only screen that is a block, not a bar
   ══════════════════════════════════════════════════════
   Every other screen in eGO opens with the same 56px white bar, so nothing said at a
   glance that you were back at the top of the app. The signal here is SHAPE — a taller
   block with the wordmark, who is signed in, and the date.

   ⚠️ Deliberately NOT brand green. The field-app kit reserves green for primary actions
   and the active tab: "colour appears where it earns attention". A green chrome bar was
   the obvious idea and it is the wrong one — the moment green decorates, it stops meaning
   "press this". Everything here is neutral. (Sign out, once a green link here, moved into the
   person menu on 2026-11-03 and stays green there.) */
.root-head {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--f-border);
  padding: var(--space-3) var(--row-pad-x) var(--space-5);
}
.root-head-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); min-height: var(--touch-min);
}
/* The fan, the app's name and the company on one baseline — "eGO by Enviroair". James chose
   this over three taller variants on 2026-09-02: it gives the mark real size without spending
   the height, and the menu below keeps its room. */
/* 7px, not 12. At 12 the fan and the name read as two things sitting near each other; at 7
   they read as one mark. James, 2026-09-02. */
.root-head-lockup { display: flex; align-items: center; gap: 7px; min-width: 0; }
.root-head-mark { width: 40px; height: 40px; flex-shrink: 0; }

/* ⚠️ Two-tone, echoing the enviro/air split in the logo — green "e", charcoal "GO".
   Both colours were SAMPLED OUT OF `icons/enviroair-wordmark.png` rather than assumed:
   the logo contains exactly two, #578842 and #4F5052, which are `--ea-green-600` and
   `--ea-charcoal-600`.

   The first build used `--fg-primary` (#1F2022) for the name, which is the app's body text
   colour and is not in the logo at all. James spotted it reading as black. If this ever needs
   changing, sample the file again — do not reason from a token name, because "charcoal" in
   this palette spans #1F2022 to #B6B7BA and only one value is the logo's. */
/* 25px and no tracking adjustment. It shipped at 23px with `letter-spacing: -.02em`, which
   actively pulled the three letters together — James read that as too tight, and the fix was
   to stop tightening rather than to add space. Both chosen off rendered comparisons. */
.root-head-ego {
  font-family: var(--font-display);
  font-size: 25px; font-weight: var(--fw-extra);
  letter-spacing: normal; line-height: 1.15;
  color: var(--ea-charcoal-600);
}
.root-head-e { color: var(--ea-green-600); }
/* Quiet, and lighter than the app name. The company owns the mark to the left of it; this
   line is the attribution, not a second title. */
.root-head-by {
  margin-left: 7px;
  font-size: 13px; font-weight: var(--fw-medium);
  color: var(--fg-tertiary);
}
/* Notifications bell (2026-10-08) — a full touch target, red count when unread. The person
   button beside it (2026-11-03) uses the same class, so the two match exactly. */
.root-head-actions { position: relative; display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
/* Person menu (2026-11-03) — drops from the person button, right-aligned to it. Sits above the
   menu cards; closed by a tap anywhere else (toggleMeMenu). Full-width touch rows. */
.me-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
  min-width: 220px; background: var(--bg-surface);
  border: 1px solid var(--f-border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14); overflow: hidden;
}
.me-menu[hidden] { display: none; }
.me-menu-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  min-height: var(--touch-min); padding: 0 var(--space-4);
  background: none; border: none; border-bottom: 1px solid var(--f-border);
  font-family: inherit; font-size: var(--text-base, 16px); color: var(--fg-primary);
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.me-menu-item:last-child { border-bottom: none; }
.me-menu-item:active { background: var(--bg-alt); }
.me-menu-item svg { flex-shrink: 0; color: var(--ea-charcoal-600); }
.me-menu-item span.me-menu-label { flex: 1; }
.me-menu-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #c0392b;
  color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; box-sizing: border-box;
}
/* Sign out stays green — what every navigation link in the app does (see .root-head above). */
.me-menu-signout, .me-menu-signout svg { color: var(--ea-green-700); font-weight: var(--fw-semibold); }
.root-head-bell {
  position: relative; background: none; border: none; color: var(--ea-charcoal-600);
  width: var(--touch-min); height: var(--touch-min); display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
}
.root-head-bell:active { opacity: .6; }
.root-bell-count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 700;
  line-height: 18px; text-align: center; box-sizing: border-box;
}
.root-bell-count[hidden] { display: none; }
/* The list — newest first; unread in bold with a green edge. */
.notif-item {
  display: block; width: 100%; text-align: left; background: var(--bg-surface); border: none;
  border-bottom: 1px solid var(--f-border); padding: var(--space-3) var(--row-pad-x);
  font-family: inherit; color: var(--fg-primary); -webkit-tap-highlight-color: transparent;
}
button.notif-item { cursor: pointer; }
button.notif-item:active { background: var(--bg-alt); }
.notif-item.is-unread { box-shadow: inset 3px 0 0 var(--ea-green-600); }
.notif-head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.notif-title { font-size: 15px; font-weight: 500; }
.notif-item.is-unread .notif-title { font-weight: 700; }
.notif-when { font-size: 12px; color: var(--fg-tertiary); white-space: nowrap; }
.notif-body { font-size: 14px; color: var(--fg-secondary); margin-top: 2px; line-height: 1.4; }
/* ⚠️ Who is signed in is a caption, not a headline. The first version of this screen set the
   name at 30px bold and James rejected it — "takes focus away from the app and the business".
   It is deliberately the same size and colour as the date beside it. Do not promote it. */
.root-head-meta {
  margin: 13px 0 0;
  font-size: var(--text-xs); color: var(--fg-tertiary);
  overflow-wrap: anywhere;
}
.root-head-meta strong { font-weight: var(--fw-semibold); color: var(--fg-secondary); }

.btn-back {
  background: none; border: none; color: var(--ea-green-700);
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  cursor: pointer; padding: 0; white-space: nowrap;
  min-height: var(--touch-min); display: flex; align-items: center; gap: 4px;
}

/* ── Content shell ────────────────────────────────────── */
.content { max-width: 600px; margin: 0 auto; padding: 0; }

/* Section heading above a list group */
/* Equal padding top and bottom (James, 2026-09-02). It had 20px above and 8px below, which
   made the band taller than the label inside it needed and pushed the first row down. 8px
   both sides. Two headings use this — "What are you working on?" and "Which vehicle?" — and
   they should stay the same shape as each other. */
.content h2 {
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-tertiary);
  padding: var(--space-2) var(--row-pad-x);
}

/* ══════════════════════════════════════════════════════
   LANDING — same light palette as rest of app
   ══════════════════════════════════════════════════════ */
#screen-tech { background: var(--bg-page); }
#screen-tech .content { padding: var(--space-6) var(--space-5) 0; }
#screen-login { background: var(--bg-page); }
#screen-login .content { padding: var(--space-6) var(--space-5) 0; }
.login-subtitle {
  font-size: 15px; color: var(--fg-muted);
  margin: calc(-1 * var(--space-4)) 0 var(--space-7);
}
.login-btn-wrap { display: flex; justify-content: flex-start; margin-bottom: var(--space-5); }
.login-error {
  display: none; font-size: 14px; color: var(--color-red-500, #ef4444);
  padding: var(--space-3) var(--space-4);
  background: var(--color-red-50, #fef2f2); border-radius: 8px;
}
.landing-mark {
  position: absolute; top: 64px; right: 20px; z-index: 0;
  width: 120px; height: 120px; opacity: 0.06; pointer-events: none;
}
.landing-wordmark { height: 22px; }
.landing-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-brand); margin-bottom: var(--space-2);
}
.landing-heading {
  font-family: var(--font-display); font-size: 28px; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight); line-height: var(--lh-tight);
  color: var(--fg-primary); margin-bottom: var(--space-6);
}
.landing-header { justify-content: center; }

.landing-mantra {
  display: flex; justify-content: center; gap: var(--space-5);
  padding: var(--space-5) var(--row-pad-x) var(--space-6);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
}

/* Tech selector grid */
.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tech-btn {
  background: var(--bg-surface); border: 1px solid var(--f-border);
  border-radius: 14px; padding: 20px 14px;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform 80ms;
}
.tech-btn:active { transform: scale(.96); background: var(--bg-subtle); }
.tech-initial {
  width: 44px; height: 44px; background: var(--ea-green-600); color: white;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: var(--fw-bold);
}
.tech-name { font-size: 14px; font-weight: var(--fw-semibold); color: var(--fg-primary); }

/* ══════════════════════════════════════════════════════
   LIST PATTERN — shared by all screens with rows
   ══════════════════════════════════════════════════════ */
.fa-list,
.category-cards,
.checklist-cards,
.submission-list,
#msds-list {
  background: var(--bg-surface);
  border-top: 1px solid var(--f-border);
  border-bottom: 1px solid var(--f-border);
  margin-bottom: var(--space-2);
}
.checklist-cards { margin-bottom: 0; }

/* Row — base */
.fa-list-row,
.category-card,
.checklist-card,
.submission-item,
.msds-item {
  display: flex; align-items: center; gap: 12px;
  padding: var(--row-pad-y) var(--row-pad-x);
  min-height: var(--touch-comfy);
  background: var(--bg-surface);
  border: none; border-radius: 0; width: 100%; text-align: left;
  border-bottom: 1px solid var(--f-border);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.fa-list-row:last-child,
.category-card:last-child,
.checklist-card:last-child,
.submission-item:last-child,
.msds-item:last-child { border-bottom: none; }
.fa-list-row:active,
.category-card:active,
.checklist-card:active,
.submission-item:active,
.msds-item:active { background: var(--bg-subtle); }

/* Row content helpers */
.cat-icon, .card-icon, .sub-icon, .msds-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--fg-secondary);
}
.cat-icon  { width: 38px; }
.card-icon { width: 32px; }
.sub-icon  { width: 28px; }
.msds-icon { width: 28px; }
.cat-text, .card-text, .sub-info, .msds-info { flex: 1; min-width: 0; }
.cat-name  { font-size: 15px; font-weight: var(--fw-bold);    color: var(--fg-primary); }
.card-name { font-size: 15px; font-weight: var(--fw-semibold); color: var(--fg-primary); }
.cat-desc, .card-desc {
  font-size: var(--text-xs); color: var(--fg-tertiary); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-arrow { color: var(--fg-muted); flex-shrink: 0; display: flex; align-items: center; }
.sub-name  { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary); }
.sub-date  { font-size: var(--text-xs); color: var(--fg-muted); margin-top: 2px; }
.sub-meta  { font-size: var(--text-xs); color: var(--ea-green-700); font-weight: var(--fw-medium); margin-top: 2px; }

.msds-name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary); }

/* Section label above a list group */
.section-title, .fa-section-head {
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-tertiary);
  padding: var(--space-4) var(--row-pad-x) var(--space-2);
}

.empty-msg { color: var(--fg-muted); font-size: var(--text-sm); padding: var(--space-4) var(--row-pad-x); }

/* Status badges */
.status-badge, .fa-status {
  font-size: 11px; font-weight: var(--fw-bold); padding: 3px 10px;
  border-radius: var(--radius-pill); white-space: nowrap; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.status-complete, .fa-status.ok   { background: var(--status-ok-bg);   color: var(--status-ok); }
.status-draft,    .fa-status.warn { background: var(--status-warn-bg); color: var(--status-warn); }
/* `.status-fail` was already being written by the card receipt queue and the purchase order
   list without ever existing here, so a "Failed" badge rendered as bare uppercase text on no
   background — the one badge that most needed to be noticed was the only one that was not. */
.status-fail,     .fa-status.fail { background: var(--status-fail-bg); color: var(--status-fail); }
.fa-status.na                     { background: var(--status-na-bg);   color: var(--status-na); }

/* ══════════════════════════════════════════════════════
   FORM — matches Claude Design fa-field pattern
   ══════════════════════════════════════════════════════ */
/* Form fields are full-width grouped rows, same visual weight as list rows */
#form-fields {
  background: var(--bg-surface);
  border-top: 1px solid var(--f-border);
  border-bottom: 1px solid var(--f-border);
}
.field-group {
  padding: 12px var(--row-pad-x);
  border-bottom: 1px solid var(--f-border);
  background: var(--bg-surface);
}
.field-group:last-child { border-bottom: none; }

.field-label {
  display: block; font-size: 11px; font-weight: var(--fw-bold);
  color: var(--fg-tertiary); margin-bottom: var(--space-2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.required { color: var(--status-fail); margin-left: 2px; }

/* All inputs — 16px prevents iOS auto-zoom */
.field-input, .fa-input {
  width: 100%; min-height: var(--touch-comfy);
  padding: 12px 14px;
  border: 1px solid var(--f-border); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 16px;
  background: var(--bg-surface); color: var(--fg-primary);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field-input:focus, .fa-input:focus {
  outline: none; border-color: var(--ea-green-600);
  box-shadow: 0 0 0 3px rgba(87,136,66,.18);
}
.field-input[readonly], .fa-input[readonly] { background: var(--bg-subtle); color: var(--fg-tertiary); }
.field-textarea, .fa-textarea { min-height: 88px; resize: vertical; line-height: var(--lh-relaxed); }

/* Section divider inside a form = section head row */
.section-divider {
  display: flex; align-items: center;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--f-border);
  padding: var(--space-2) var(--row-pad-x);
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-tertiary);
  margin: 0;
}
.section-divider span { flex: 1; }
.section-divider::before, .section-divider::after { display: none; }

/* Pass / Fail / N/A */
.toggle-group {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 6px;
}
.toggle-btn {
  height: var(--touch-comfy); border-radius: 10px;
  background: var(--bg-subtle); color: var(--fg-secondary);
  border: 1px solid var(--f-border);
  font-family: var(--font-body); font-size: 14px; font-weight: var(--fw-bold);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  display: flex; align-items: center; justify-content: center;
}
.toggle-btn.active.toggle-pass { background: var(--status-ok-bg);   color: var(--status-ok);   border-color: var(--status-ok); }
.toggle-btn.active.toggle-fail { background: var(--status-fail-bg); color: var(--status-fail); border-color: var(--status-fail); }
.toggle-btn.active.toggle-na   { background: var(--status-na-bg);   color: var(--status-na);   border-color: var(--status-na); }

/* Field warnings */
.field-warning .field-label { color: var(--status-warn); }
.field-warning .field-input { border-color: var(--status-warn); background: var(--status-warn-bg); }
.field-danger  .field-label { color: var(--status-fail); }
.field-danger  .field-input { border-color: var(--status-fail); background: var(--status-fail-bg); }

.form-actions {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5) var(--row-pad-x) var(--space-12);
}

/* ══════════════════════════════════════════════════════
   BUTTONS — single system, used everywhere
   ══════════════════════════════════════════════════════ */
.btn, .fa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--touch-comfy); padding: 0 var(--space-5);
  border-radius: 10px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 15px; font-weight: var(--fw-bold);
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .fa-btn:active { transform: scale(.98); }

.btn-primary,    .fa-btn-primary    { background: var(--ea-green-600); color: #fff; border-color: var(--ea-green-600); }
.btn-primary:active, .fa-btn-primary:active { background: var(--ea-green-700); }
.btn-secondary,  .fa-btn-secondary  { background: var(--bg-surface); color: var(--fg-primary); border-color: var(--f-border); }
.btn-secondary:active, .fa-btn-secondary:active { background: var(--bg-subtle); }
.btn-danger,     .fa-btn-danger     { background: var(--status-fail-bg); color: var(--status-fail); border-color: var(--status-fail); }
.btn-lg                             { height: var(--touch-large); font-size: var(--text-base); }
.btn-block, .fa-btn-block           { width: 100%; }

/* ⚠️ A disabled button MUST look disabled. Until 2026-08-21 nothing in eGO styled the
   disabled state, so a greyed-out-in-name-only button rendered at full colour and simply
   ignored every tap. Reported on the Card Receipt screen: Send looked ready, and pressing it
   did nothing at all, because no card had been chosen yet.
   The fix there was to stop disabling on missing input and say what is missing instead — but
   any disabled button anywhere should still read as one, so this is the general guard. */
.btn:disabled, .fa-btn:disabled,
.btn[disabled], .fa-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;      /* also kills the :active scale, which otherwise implies a press */
}

/* Helpers used inside form layouts */
.now-btn     { flex-shrink: 0; }
.ai-read-btn { font-size: var(--text-sm); opacity: 0.4; cursor: not-allowed; }
.photo-add-btn { align-self: flex-start; }

.input-with-btn { display: flex; gap: var(--space-2); align-items: center; }
.input-with-btn .field-input { flex: 1; min-width: 0; }

/* ══════════════════════════════════════════════════════
   DETAIL VIEW
   ══════════════════════════════════════════════════════ */
.detail-meta {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--row-pad-y) var(--row-pad-x);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--f-border);
}
.detail-tech { font-weight: var(--fw-bold); font-size: 15px; flex: 1; }
.detail-date { font-size: var(--text-xs); color: var(--fg-muted); }

.detail-fields {
  background: var(--bg-surface);
  border-top: 1px solid var(--f-border);
  border-bottom: 1px solid var(--f-border);
}
.detail-section {
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-tertiary);
  padding: var(--space-3) var(--row-pad-x) var(--space-2);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--f-border);
  border-top: 1px solid var(--f-border);
}
.detail-section:first-child { border-top: none; }
.detail-field {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px var(--row-pad-x); border-bottom: 1px solid var(--f-border); gap: var(--space-3);
}
.detail-field:last-child { border-bottom: none; }
.detail-label { font-size: var(--text-sm); color: var(--fg-secondary); flex: 1; }
.detail-value { font-size: var(--text-sm); font-weight: var(--fw-semibold); text-align: right; white-space: pre-wrap; max-width: 60%; }
.val-pass { color: var(--status-ok); }
.val-fail { color: var(--status-fail); }
.val-na   { color: var(--fg-muted); }

.detail-actions {
  display: flex; gap: var(--space-3);
  padding: var(--space-5) var(--row-pad-x) var(--space-12);
}
.detail-actions .btn { flex: 1; }

/* ── Confirm screen ───────────────────────────────────── */
.confirm-screen {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: var(--space-16) var(--row-pad-x) 0;
}
.confirm-check { color: var(--ea-green-600); margin-bottom: var(--space-5); line-height: 1; display: flex; justify-content: center; }
.confirm-title {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight); margin-bottom: var(--space-2);
}
.confirm-meta  { font-size: var(--text-sm); color: var(--fg-secondary); margin-bottom: var(--space-4); }
.confirm-upload     { font-size: var(--text-xs); color: var(--fg-muted); }
.confirm-upload-ok  { font-size: var(--text-xs); color: var(--ea-green-700); font-weight: var(--fw-semibold); }
.confirm-upload-err { font-size: var(--text-xs); color: var(--status-fail); font-weight: var(--fw-semibold); }
.confirm-screen .fa-btn, .confirm-screen .btn { width: 100%; max-width: 400px; margin-top: var(--space-8); }

/* ── PDF viewer ───────────────────────────────────────── */
.screen-pdf { display: none; flex-direction: column; height: 100vh; }
.screen-pdf.active { display: flex; }
.screen-pdf .header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; }
.pdf-content { flex: 1; overflow: auto; background: var(--bg-page); margin-top: 56px; margin-bottom: 52px; }
#pdf-canvas { display: block; }
.pdf-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-2) var(--row-pad-x); border-top: 1px solid var(--f-border); background: var(--bg-surface); z-index: 10; }
.pdf-nav .btn { min-width: 80px; }
.pdf-nav span { font-size: 0.85rem; color: var(--fg-secondary); }

/* ── MSDS search ──────────────────────────────────────── */
.msds-search-wrap { padding: var(--space-4) var(--row-pad-x) var(--space-2); }

/* ── Tyre grid ────────────────────────────────────────── */
.tyre-grid-wrap { padding: 0; }
.tyre-axle-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-tertiary);
  text-align: center; padding: var(--space-3) var(--row-pad-x) var(--space-1);
  background: var(--bg-subtle); border-top: 1px solid var(--f-border);
}
.tyre-row  { display: grid; grid-template-columns: 1fr 1fr; }
.tyre-cell {
  padding: var(--space-3) var(--row-pad-x);
  background: var(--bg-surface);
  border-right: 1px solid var(--f-border);
  border-bottom: 1px solid var(--f-border);
}
.tyre-cell:nth-child(even) { border-right: none; }
.tyre-cell-label {
  text-align: center; font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--fg-secondary); margin-bottom: var(--space-2);
}
.tyre-cell .toggle-group { gap: 4px; }
.tyre-cell .toggle-btn   { height: 40px; font-size: 13px; }

.detail-tyre-axle {
  text-align: center; font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-bold);
  color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.1em;
  margin: var(--space-2) 0 var(--space-1);
}
.detail-tyre-row  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.detail-tyre-cell { text-align: center; padding: var(--space-2) 0; }
.detail-tyre-pos  { font-size: var(--text-xs); color: var(--fg-muted); margin-bottom: 3px; }
.detail-tyre-val  { font-size: var(--text-sm); font-weight: var(--fw-bold); }

/* ── Damage map ───────────────────────────────────────── */
.damage-map-wrap { padding: var(--space-4) var(--row-pad-x); }
.damage-map-hint { font-size: var(--text-xs); color: var(--fg-muted); margin-bottom: var(--space-3); }
.damage-map-svg  { width: 100%; max-width: 280px; display: block; margin: 0 auto; }
.detail-field-damage { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.detail-damage-list  { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.damage-tag       { background: var(--status-fail-bg); color: var(--status-fail); font-size: 12px; font-weight: var(--fw-semibold); padding: 3px 10px; border-radius: var(--radius-pill); }
.damage-tag-light { background: var(--status-warn-bg); color: var(--status-warn); }

/* ── Photos ───────────────────────────────────────────── */
.photo-field    { display: flex; flex-direction: column; gap: var(--space-3); }
.photo-previews { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.photo-thumb {
  position: relative; width: 96px; height: 96px;
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--f-border); flex-shrink: 0;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-remove {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
  background: rgba(31,32,34,.65); color: white; border: none; border-radius: 50%;
  font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
/* ── PhotoInput — the shared photo control (photo-input.js) ──────────────────
   One set of styles for every place photos are taken, so a change to the tap target or
   the thumbnail size lands everywhere at once. See the header of photo-input.js. */
.pi-grid    { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pi-grid:empty { display: none; }
.pi-thumb {
  position: relative; width: 96px; height: 96px;
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--f-border); flex-shrink: 0; background: var(--bg-subtle, #f6f6f7);
}
.pi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-thumb-pdf {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--fg-secondary);
}
.pi-remove {
  position: absolute; top: 4px; right: 4px; width: 28px; height: 28px;
  background: rgba(31,32,34,.65); color: #fff; border: none; border-radius: 50%;
  font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pi-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.pi-btn {
  /* 44px tall — this gets tapped on a phone, often by someone in gloves. */
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--f-accent, #578842); border-radius: var(--radius-md);
  background: var(--f-accent, #578842); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.pi-btn-ghost { background: transparent; color: var(--f-accent, #578842); }
/* Icon only — a camera and a gallery icon, no words (James, 2026-09-25). Square-ish, 48px tall
   so they are still an easy thumb target. */
.pi-btn-icon { min-width: 64px; min-height: 48px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; }
.pi-icon-only { flex: 0 0 64px !important; padding: 0 !important; }
.pi-full { margin-top: var(--space-2); font-size: 12px; color: var(--fg-secondary); }

.detail-field-photos { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.detail-photos { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.detail-photo  { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--f-border); }

/* ── Equipment screen ─────────────────────────────────── */
.equip-scan-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 var(--row-pad-x); width: calc(100% - 32px);
}
.equip-manual-wrap {
  display: flex; gap: var(--space-2); align-items: center;
  padding: var(--space-3) var(--row-pad-x) 0;
}
.equip-manual-wrap .field-input { flex: 1; min-width: 0; }
.equip-manual-wrap .fa-btn { flex-shrink: 0; }
.equip-items { display: flex; flex-direction: column; gap: var(--space-2); min-height: 48px; padding: 0 var(--row-pad-x); }
.equip-item {
  background: var(--bg-surface); border: 1px solid var(--f-border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
}
.equip-code   { flex: 1; font-size: var(--text-sm); font-weight: var(--fw-semibold); font-family: var(--font-mono); }
.equip-remove { background: none; border: none; color: var(--fg-muted); font-size: 20px; cursor: pointer; }

/* ── Temperature correction ───────────────────────────── */
.temp-correction-panel {
  background: var(--ea-sky-100); border: 1px solid #93c5e8;
  border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 var(--space-4);
}
.tcp-header {
  background: var(--ea-sky-600); color: white;
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: var(--space-2) var(--row-pad-x);
}
.tcp-body   { padding: var(--space-3) var(--row-pad-x); display: flex; flex-direction: column; gap: var(--space-2); }
.tcp-empty  { color: var(--fg-muted); font-size: var(--text-sm); }
.tcp-row    { display: flex; justify-content: space-between; align-items: baseline; }
.tcp-label       { font-size: var(--text-sm); color: var(--fg-secondary); }
.tcp-label-bold  { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary); }
.tcp-value       { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary); }
.tcp-value-lg    { font-size: var(--text-base); }
.tcp-divider     { height: 1px; background: #93c5e8; margin: 2px 0; }
.tcp-pos         { color: var(--status-ok); }
.tcp-neg         { color: var(--status-fail); }

/* ── Scanner overlay ──────────────────────────────────── */
.scanner-overlay { display: none; position: fixed; inset: 0; background: #000; z-index: 200; flex-direction: column; }
.scanner-overlay.active { display: flex; }
.scanner-body   { flex: 1; position: relative; overflow: hidden; }
#scanner-video  { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-aim-box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 240px; height: 150px;
  border: 2px solid rgba(255,255,255,.9); border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.5);
}
.scanner-hint { color: rgba(255,255,255,.6); text-align: center; padding: var(--space-5); font-size: var(--text-sm); }
/* Light and zoom under the picture — big, high-contrast, for a gloved thumb in a ceiling space. */
.scanner-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: var(--space-4) var(--space-4) 0; }
.scanner-controls:empty { display: none; }
.scanner-ctl {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; min-width: 56px; padding: 0 16px;
  border-radius: var(--radius-pill); border: 2px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.08); color: #fff;
  font-family: inherit; font-size: var(--text-base); font-weight: var(--fw-bold); cursor: pointer;
}
.scanner-ctl.is-on { background: #fff; color: #111; border-color: #fff; }
/* The "How to install eGO" pill (browser tabs only) sits exactly where Light and zoom are, and
   there is nothing to install from a camera view — hide it while the scanner is open. */
body:has(#scanner-overlay.active) #ego-install-pill { display: none !important; }

/* ── Toast ────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: var(--space-6); left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--ea-charcoal-900); color: white;
  padding: 11px var(--space-5); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  z-index: 999; white-space: nowrap; box-shadow: var(--shadow-lg); pointer-events: none;
  /* Fades as well as slides: sliding 80px down only hides it when it sits at the bottom edge, and
     over the maintenance sheet it is raised above the result buttons, where the slide left it on
     screen for good (James, 2026-09-25). */
  opacity: 0;
}
.toast.visible       { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.toast-success { background: var(--ea-green-700); }
.toast.toast-error   { background: var(--status-fail); }

/* ── Dropbox status strip (landing page) ─────────────── */
.dropbox-status {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-2) var(--row-pad-x);
  font-family: var(--font-mono); font-size: 12px;
  min-height: 36px;
}
.dbx-ok   { display: flex; align-items: center; gap: 6px; color: var(--ea-green-700); font-weight: var(--fw-semibold); }
.dbx-warn { display: flex; align-items: center; gap: 6px; color: var(--ea-amber-600); font-weight: var(--fw-semibold); }
.dbx-btn  {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 var(--space-4);
  background: var(--ea-green-600); color: white;
  border: none; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-semibold);
  cursor: pointer;
}
.dbx-link {
  background: none; border: none; color: var(--fg-brand);
  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold);
  cursor: pointer; text-decoration: underline; padding: 0;
}

/* ── Version badge ────────────────────────────────────── */
#app-version {
  background: rgba(0,0,0,0.28) !important;
  color: rgba(255,255,255,0.7) !important;
  text-shadow: none !important;
  padding: 2px 6px;
  border-radius: 3px;
}

/* ── Checklist hub ────────────────────────────────────── */
.hub-new-wrap {
  padding: var(--space-4) var(--row-pad-x) var(--space-2);
}

/* ── Unsaved changes modal ────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end;
}
.modal-panel {
  background: var(--bg-surface);
  border-radius: 16px 16px 0 0;
  padding: var(--space-6) var(--row-pad-x) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  width: 100%;
}
.modal-title {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  margin: 0 0 var(--space-2);
}
.modal-body {
  font-size: var(--text-sm);
  color: var(--fg-secondary);
  margin: 0 0 var(--space-5);
}
.modal-actions { display: flex; flex-direction: column; gap: var(--space-3); }

/* ── Draft delete button ──────────────────────────────── */
.draft-delete-btn {
  flex-shrink: 0;
  margin-left: var(--space-2);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-md);
  color: var(--fg-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.draft-delete-btn:active { background: var(--status-fail-bg); color: var(--status-fail); }

/* ── Project Photos ───────────────────────────────────── */
.pp-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--bg-surface);
}
/* Pinned to the bottom of the viewport while the screen scrolls. The supplier picker opens
   with sixty rows in it, which pushed Raise off the page — the button a screen exists for
   must not be reachable only by scrolling past a list you are in the middle of using. Opt-in,
   so project photos and card receipts are untouched. */
.pp-footer-stick { position: sticky; bottom: 0; z-index: 20; }
.pp-footer-inner { display: flex; flex-direction: column; gap: var(--space-2); }
.pp-footer-btns  { display: flex; gap: var(--space-3); }
.pp-footer-btns .fa-btn { flex: 1; min-width: 0; }
.pp-success-msg  { font-size: var(--text-sm); color: var(--ea-green-700); font-weight: var(--fw-semibold); text-align: center; margin: 0; }
.pp-last-path {
  font-size: 11px;
  color: var(--fg-secondary);
  word-break: break-all;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 2px 0;
}
.pp-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.pp-photo-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pp-photo-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: var(--border-default);
}
.pp-photo-body {
  padding: var(--space-2) var(--space-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pp-photo-label {
  font-size: 12px;
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--fg-primary);
  font-family: inherit;
}
.pp-photo-label:focus { outline: none; border-color: var(--ea-green); }
.pp-photo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-default);
}
.pp-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pp-status-pending  { background: var(--bg-subtle); color: var(--fg-secondary); }
.pp-status-uploading { background: #dbeafe; color: #1d4ed8; }
.pp-status-done     { background: var(--status-pass-bg); color: var(--status-pass); }
.pp-status-error    { background: var(--status-fail-bg); color: var(--status-fail); }
.pp-photo-remove-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--fg-secondary);
  display: flex;
  align-items: center;
}
.pp-photo-remove-btn:active { color: var(--status-fail); }

/* ── Card Receipts ────────────────────────────────────── */
/* Reuses the Project Photos grid, footer and card. Only what is genuinely different is
   here: the card chooser, and a stand-in thumbnail for a PDF, which has no image to show. */
.cr-payer-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cr-payer-btn {
  flex: 1 1 140px;
  min-height: 48px;              /* a thumb, in a van, in the rain */
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--fg-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  -webkit-tap-highlight-color: transparent;
}
.cr-payer-btn.selected {
  border-color: var(--ea-green);
  background: var(--ea-green-subtle, #e8f5e9);
  color: var(--ea-green-dark, #2e6b2e);
}
.cr-pdf-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  color: var(--fg-secondary);
}
.cr-photo-name {
  font-size: 12px;
  color: var(--fg-secondary);
  word-break: break-word;
}
.pp-job-selected {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--ea-green-subtle, #e8f5e9);
  border: 1px solid var(--ea-green);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--ea-green-dark, #2e6b2e);
}
.pp-job-selected button {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  display: flex;
  align-items: center;
}
/* ⚠️ `.field-hint` is an INLINE label suffix — "Subfolder (optional)" — and nothing else.
   The negative top margin exists to pull it up against the label above it, so putting it on
   a block element BELOW an input drags the text over the input's bottom border. That is
   exactly what happened on the Card Receipt screen (reported 2026-08-21: the hint sat across
   the description box). For a hint under a field use `.field-hint-below`. */
.field-hint {
  font-size: 12px;
  color: var(--fg-secondary);
  margin-top: calc(-1 * var(--space-2));
  padding-bottom: var(--space-1);
}
.field-hint-below {
  font-size: 12px;
  color: var(--fg-secondary);
  margin: var(--space-2) 0 0;
  line-height: 1.4;
}
.pp-api-hint {
  font-size: 12px;
  color: var(--fg-secondary);
  padding: var(--space-2) 0;
}
.pp-empty-msg {
  text-align: center;
  color: var(--fg-secondary);
  font-size: 14px;
  padding: var(--space-6) 0;
}
.pp-error-text {
  display: block;
  font-size: 11px;
  color: var(--status-fail);
  margin-top: 3px;
  word-break: break-word;
}
.pp-upload-path-wrap {
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-3);
  background: var(--status-pass-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--status-pass);
}
.pp-upload-path-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--status-pass);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.pp-upload-path-text {
  font-size: 12px;
  color: var(--fg-primary);
  word-break: break-all;
  font-family: var(--font-mono);
}

/* ── Staff multi-select ───────────────────────────────── */
.staff-multi-group {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-3) 0;
}
.staff-checkbox {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--fw-medium);
  user-select: none;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.staff-checkbox:has(input:checked) {
  border-color: var(--fg-brand);
  background: var(--ea-green-50);
  color: var(--fg-brand);
}
.staff-checkbox input { width: 16px; height: 16px; accent-color: var(--ea-green-600); }

/* ── Job link field ───────────────────────────────────── */
.job-link-field { display: flex; flex-direction: column; gap: var(--space-2); }
.job-link-results {
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface); margin-top: 4px;
}
.job-link-result {
  display: block; width: 100%;
  padding: var(--space-3) var(--row-pad-x);
  text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm); color: var(--fg-primary);
  cursor: pointer; line-height: 1.4;
  transition: background var(--dur-fast);
}
.job-link-result:last-child { border-bottom: none; }
.job-link-result:active { background: var(--ea-green-50); }
.job-link-sub { display: block; font-size: var(--text-xs); color: var(--fg-muted); margin-top: 2px; }
.jp-recent-label { font-size: 11px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 12px 2px; }
.job-link-selected {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--ea-green-50); border: 1px solid var(--ea-green-300);
  border-radius: var(--radius-md); margin-top: 4px;
}
.job-link-selected-text {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-brand);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.field-label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-2);
}
.field-label-row .field-label { margin-bottom: 0; }
.jl-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.jl-header .toggle-group { flex: 1; display: flex; flex-direction: row; gap: 6px; }
.jl-header .toggle-group .toggle-btn { flex: 1; }
.jp-toggle-slot { flex-shrink: 0; }
.jp-archive-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--fg-muted); cursor: pointer;
  user-select: none;
}
.jp-toggle-switch { position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; }
.jp-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.jp-toggle-track {
  position: absolute; inset: 0;
  background: var(--border-default); border-radius: 9px;
  transition: background var(--dur-fast); cursor: pointer;
}
.jp-toggle-track::before {
  content: ''; position: absolute;
  width: 14px; height: 14px; left: 2px; top: 2px;
  background: white; border-radius: 50%;
  transition: transform var(--dur-fast);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.jp-toggle-switch input:checked + .jp-toggle-track { background: var(--ea-green-600); }
.jp-toggle-switch input:checked + .jp-toggle-track::before { transform: translateX(14px); }

/* ── Meeting section list ─────────────────────────────── */
.meeting-section-list { display: flex; flex-direction: column; gap: var(--space-3); }
.meeting-section {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
}
.meeting-section-header {
  display: flex; align-items: center;
  padding: var(--space-3) var(--row-pad-x);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.meeting-section-title {
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--fg-secondary); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; font-family: var(--font-mono);
}
.meeting-add-btn {
  height: 32px; padding: 0 var(--space-3);
  font-size: 13px;
}
.meeting-section-footer {
  padding: var(--space-2) var(--row-pad-x) var(--space-3);
}
.meeting-section-items { padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.meeting-section-items:empty { display: none; }
.meeting-item {
  background: var(--bg-subtle); border-radius: var(--radius-md);
  padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2);
}
.meeting-item-main { display: flex; gap: var(--space-2); align-items: flex-start; }
.meeting-item-text { flex: 1; resize: vertical; min-height: 56px; }
.meeting-item-remove {
  flex-shrink: 0; width: 32px; height: 32px;
  border: none; border-radius: var(--radius-md); background: var(--bg-muted);
  color: var(--fg-tertiary); font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.meeting-item-remove:active { background: var(--status-fail-bg); color: var(--status-fail); }
.meeting-followup-label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--fg-secondary); cursor: pointer;
  padding: var(--space-1) 0;
}
.meeting-followup-label input[type=checkbox] {
  width: 18px; height: 18px; accent-color: var(--ea-amber-600); flex-shrink: 0;
}
.meeting-followup-label:has(input:checked) { color: var(--ea-amber-600); font-weight: var(--fw-semibold); }
.meeting-followup-fields {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-1);
}

/* ── Guest attendees ───────────────────────────────────── */
.staff-guest-section {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.staff-guest-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 0; }
.staff-guest-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px 4px 10px;
  background: var(--ea-amber-50, #fffbeb);
  border: 1px solid var(--ea-amber-200, #fde68a);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); color: var(--ea-amber-700, #b45309);
}
.staff-guest-tag-remove {
  width: 20px; height: 20px;
  border: none; border-radius: 50%; background: transparent;
  cursor: pointer; color: var(--ea-amber-600, #d97706);
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.staff-guest-tag-remove:active { background: var(--ea-amber-100, #fef3c7); }
.staff-guest-input { display: flex; gap: var(--space-2); }
.staff-guest-input .field-input { flex: 1; }

/* ── Attendee sign-off ─────────────────────────────────── */
.attendee-signoff-wrap { display: flex; flex-direction: column; gap: var(--space-3); }
.signoff-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.signoff-person { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.signoff-btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  font-size: var(--text-sm); font-weight: var(--fw-medium);
  cursor: pointer; color: var(--fg-primary);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.signoff-btn-signed {
  border-color: var(--fg-brand);
  background: var(--ea-green-50);
  color: var(--fg-brand);
}
.sig-pad-wrap {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: white;
}
.sig-canvas {
  display: block; width: 100%; height: 150px;
  cursor: crosshair; touch-action: none;
  background: white;
}
.sig-actions {
  display: flex; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
}

/* ── Action items ─────────────────────────────────────── */
/* ── Action sort bar ─────────────────── */
.action-sort-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--row-pad-x) 6px;
}
.action-sort-label {
  font-size: 12px; font-weight: var(--fw-semibold); color: var(--fg-muted);
}
.action-sort-btn {
  font-size: 12px; font-weight: var(--fw-semibold); color: var(--fg-secondary);
  background: var(--bg-subtle); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 4px 12px; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.action-sort-btn.active {
  background: var(--ea-green-600); color: #fff; border-color: var(--ea-green-600);
}

/* ── Action cards ────────────────────── */
.action-list-inner { display: flex; flex-direction: column; }
.action-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px var(--row-pad-x);
  background: var(--bg-surface);
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
}
.action-card:first-child { border-top: 1px solid var(--border-subtle); }
.action-card:active, .action-card-open { background: var(--bg-subtle); }
.action-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.action-card-title {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary);
  line-height: var(--lh-normal);
}
.action-card-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.action-type-chip {
  font-size: 11px; font-weight: var(--fw-bold);
  padding: 2px 8px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center;
}
.action-chip-hs      { background: var(--ea-green-50);  color: var(--ea-green-800); }
.action-chip-vehicle { background: #fef3c7;              color: #92400e; }
.action-chip-qa      { background: #eff6ff;              color: #1e40af; }
.action-chip-default { background: var(--bg-alt);        color: var(--fg-secondary); }
.action-due { font-size: 12px; font-weight: var(--fw-semibold); white-space: nowrap; }
.action-due-normal  { color: var(--fg-tertiary); }
.action-due-today   { color: #c2410c; }
.action-due-overdue { color: var(--ea-red-600, #dc2626); }

.action-chevron {
  color: var(--fg-muted); flex-shrink: 0;
  transition: transform var(--dur-fast);
  display: flex; align-items: center;
}
.action-card-open .action-chevron { transform: rotate(90deg); }
.action-panel {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 10px var(--row-pad-x) 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.action-field-row {
  display: flex; align-items: center; gap: 8px;
}
.action-field-label {
  font-size: 11px; font-weight: var(--fw-bold); color: var(--fg-tertiary);
  text-transform: uppercase; letter-spacing: 0.07em;
  min-width: 68px; flex-shrink: 0;
}
.action-field-row input[type="date"],
.action-field-row select {
  flex: 1; font-size: var(--text-sm); font-family: var(--font-body);
  padding: 5px 8px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--fg-primary);
}
.action-note-wrap { display: flex; flex-direction: column; gap: 5px; }
.action-note-wrap textarea,
.action-complete-section textarea {
  width: 100%; box-sizing: border-box;
  font-size: var(--text-sm); font-family: var(--font-body); line-height: var(--lh-normal);
  padding: 7px 8px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--fg-primary);
  resize: none;
}
.action-complete-section { display: flex; flex-direction: column; gap: 6px; }
.action-btn-row { display: flex; gap: 8px; }
.action-full-desc {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary);
  line-height: var(--lh-normal); padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.action-history { display: flex; flex-direction: column; gap: 6px; }
.action-event {
  font-size: 13px; line-height: var(--lh-normal);
}
.action-event-meta {
  font-size: 11px; font-weight: var(--fw-bold); color: var(--fg-tertiary);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.action-event-text {
  color: var(--fg-secondary); margin-top: 2px;
  padding-left: 8px; border-left: 2px solid var(--border-default);
}

/* ── Timesheets ──────────────────────────────────────────────────────────── */
/* Timesheet screen — app-shell layout so content never scrolls behind header */
#screen-timesheets.active {
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden;
}
#screen-timesheets .header { flex-shrink: 0; position: static; }
#ts-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; max-width: none; margin: 0; }
#ts-footer { flex-shrink: 0; }

.ts-footer { background: var(--bg-surface); border-top: 1px solid var(--border-subtle); padding: 12px 16px; }
.ts-footer-inner { display: flex; flex-direction: column; gap: 8px; }
.ts-footer-row { display: flex; gap: 8px; }

.ts-week-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; gap: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.ts-week-label {
  flex: 1; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.ts-week-range { font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--fg-primary); }
.ts-week-meta-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ts-week-summary { font-family: var(--font-mono); font-size: 12px; color: var(--ea-green-700); font-weight: var(--fw-semibold); }
.ts-week-no-entries { font-size: var(--text-xs); color: var(--fg-muted); }
.ts-nav-btn {
  background: none; border: none; padding: 8px; cursor: pointer;
  color: var(--fg-secondary); display: flex; align-items: center; border-radius: var(--radius-sm);
}
.ts-nav-btn:active { background: var(--bg-subtle); }

.ts-status-badge {
  font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 2px 8px; border-radius: 99px;
}
.ts-status-draft       { background: var(--bg-alt); color: var(--fg-tertiary); }
.ts-status-submitted   { background: var(--ea-blue-50, #eff6ff); color: var(--ea-blue-700, #1d4ed8); }
.ts-status-amending    { background: #fff7ed; color: #c2410c; }
.ts-status-approved    { background: var(--ea-green-50, #f0fdf4); color: var(--ea-green-700); }

.ts-days-list { display: flex; flex-direction: column; }

/* ── Day rows ──────────────────────────────────────────── */
.ts-day-row { border-bottom: 1px solid var(--border-subtle); }

.ts-day-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; cursor: pointer; gap: 8px; min-height: 52px;
}
.ts-day-header:active { background: var(--bg-subtle); }

/* Weekend styling */
.ts-weekend .ts-day-header { background: var(--bg-subtle); }
.ts-weekend .ts-block-list { background: var(--bg-subtle); }
.ts-weekend.ts-day-empty .ts-day-header { min-height: 36px; padding: 8px 16px; }
.ts-weekend.ts-day-empty .ts-day-name { color: var(--fg-tertiary); font-weight: var(--fw-medium); }
.ts-weekend.ts-day-empty .ts-day-add { color: var(--fg-muted); }

/* Holiday */
.ts-holiday .ts-day-header { background: #fffbeb; }

/* Today indicator */
.ts-day-today .ts-day-name { color: var(--ea-green-700); }
.ts-day-today .ts-day-header { border-left: 3px solid var(--ea-green-600); padding-left: 13px; }

.ts-day-label { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.ts-day-name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary); white-space: nowrap; }
.ts-day-name-holiday { color: #d97706; }
.ts-holiday-inline { font-size: 11px; color: #92400e; font-style: italic; }
.ts-amended-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #c2410c; }

.ts-day-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ts-day-total { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--ea-green-700); }
.ts-day-add { color: var(--fg-tertiary); display: flex; align-items: center; }

/* ── Block rows ─────────────────────────────────────────── */
.ts-block-list { display: flex; flex-direction: column; }

.ts-block-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 11px;
  min-height: 48px; cursor: pointer;
  background: var(--bg-surface);
  border-left: 5px solid var(--border-default);
  border-bottom: 1px solid var(--border-subtle);
}
.ts-block-row:last-child { border-bottom: none; }
.ts-block-row:active { background: var(--bg-subtle); }

/* Block type accent colours — match ts-type-btn palette */
.ts-btype-job      { border-left-color: #15803d; }
.ts-btype-activity { border-left-color: #1d4ed8; }
.ts-btype-leave    { border-left-color: #c2410c; }

/* Manager amended */
.ts-block-row.ts-block-amended { background: #fff7ed; border-left-color: #f97316; }

/* Locked / pending leave */
.ts-block-locked  { background: var(--ea-amber-50); opacity: 0.85; }
.ts-block-pending { background: var(--ea-amber-100); }

.ts-block-time { font-family: var(--font-mono); font-size: 12px; color: var(--fg-tertiary); white-space: nowrap; flex-shrink: 0; }
.ts-block-hrs { font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-bold); white-space: nowrap; flex-shrink: 0; }
.ts-block-hrs-job      { color: #15803d; }
.ts-block-hrs-activity { color: #1d4ed8; }
.ts-block-hrs-leave    { color: #c2410c; }
.ts-block-label { font-size: var(--text-sm); color: var(--fg-primary); flex: 1; display: flex; align-items: center; gap: 5px; min-width: 0; }
.ts-block-ref { font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary); }

/* Two-line entry: the site on top, the job it was booked to underneath. Only job entries
   with a site take this shape — everything else stays the single flex line above. */
.ts-block-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ts-block-main .ts-block-label { flex: 0 0 auto; }
.ts-block-sub {
  font-size: 11px; color: var(--fg-tertiary);
  display: flex; align-items: center; gap: 5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Brought in from SimPRO ──────────────────────────────
   A quiet tag, not a status: these entries are correct and finished. It is there so the
   difference between "typed here" and "already on SimPRO's calendar" is visible, because
   only the first kind is posted back when the week is approved. */
.ts-block-src {
  display: inline-block; margin-left: 6px; padding: 0 5px;
  border: 1px solid var(--border-default); border-radius: 9px;
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg-tertiary); vertical-align: 1px; white-space: nowrap;
}

.ts-import-btn {
  width: 100%; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--row-pad-x); margin-bottom: var(--space-3);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); color: var(--fg-primary);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ts-import-btn:active { background: var(--bg-subtle); }
.ts-import-btn span { flex: 1; min-width: 0; }

.ts-import-panel { max-height: 85vh; overflow-y: auto; }
.ts-import-list  { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.ts-import-day {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}
.ts-import-day-skipped { opacity: 0.6; }
.ts-import-day-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); margin-bottom: 2px;
}
.ts-import-day-note { font-size: 11px; font-weight: 400; color: var(--fg-tertiary); }
.ts-import-line { display: flex; gap: var(--space-2); padding: 3px 0; font-size: var(--text-sm); }
.ts-import-time { font-family: var(--font-mono); font-size: 12px; color: var(--fg-secondary); white-space: nowrap; }
.ts-import-what { min-width: 0; }
.ts-import-sub  { display: block; font-size: 11px; color: var(--fg-tertiary); }
.ts-import-problem {
  display: flex; align-items: flex-start; gap: 5px;
  font-size: 11px; color: #c2410c; padding: 4px 0 2px;
}
.ts-import-day-note-inline {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12px; color: var(--fg-secondary);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2);
  background: var(--bg-subtle); border-radius: var(--radius-md);
}
.ts-block-status-icon { display: inline-flex; align-items: center; color: var(--ea-amber-600); }
.ts-block-note { font-size: 11px; color: #c2410c; display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.ts-block-delete-btn {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: none; border: none; cursor: pointer;
  color: var(--fg-muted); border-radius: var(--radius-sm);
}
.ts-block-delete-btn:active { color: #dc2626; background: #fee2e2; }

/* Cost centre picker */
.ccp-search { margin-bottom: 0; }
.ccp-results {
  max-height: 180px; overflow-y: auto;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface); margin-top: 4px;
}
.ccp-results:empty { display: none; }
.ccp-result {
  display: block; width: 100%;
  padding: var(--space-3) var(--row-pad-x);
  text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm); color: var(--fg-primary);
  cursor: pointer; line-height: 1.4;
  transition: background var(--dur-fast);
}
.ccp-result:last-child { border-bottom: none; }
.ccp-result:active { background: var(--ea-green-50); }
.ccp-selected {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--ea-green-50); border: 1px solid var(--ea-green-300);
  border-radius: var(--radius-md); margin-top: 4px;
}
.ccp-selected-text {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-brand);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Section heading inside a picker list — "Recently used" above "All suppliers". */
.ccp-group-label {
  padding: var(--space-2) var(--row-pad-x) 4px;
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--fg-tertiary); background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle); margin: 0;
}
/* Offered when a cost centre list could not be loaded — a flat network is not an empty job,
   and the person needs a way to ask again without leaving the screen. */
.ccp-retry {
  background: none; border: none; padding: 0;
  font-size: inherit; font-weight: var(--fw-semibold);
  color: var(--fg-brand); text-decoration: underline; cursor: pointer;
}

/* ── Purchase order confirmation ──────────────────────────────────────────────
   The PO number is read aloud across a trade counter, often in a noisy yard by someone
   holding something in the other hand. It is set as large as the screen allows, in the mono
   face so a 5 cannot be mistaken for an S, and given room to breathe. Everything else on the
   confirmation is deliberately quieter than it. */
.po-done {
  text-align: center;
  padding: var(--space-6) var(--space-4) var(--space-4);
}
.po-done-icon { color: var(--ea-green-600); line-height: 1; }
.po-done-label {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .08em; color: var(--fg-tertiary);
}
.po-done-number {
  margin: 2px 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 44px; font-weight: 600; line-height: 1.1;
  letter-spacing: .02em; color: var(--fg-primary);
  word-break: break-all;
}
.po-done-sub {
  margin: 0; font-size: var(--text-base); font-weight: var(--fw-semibold);
  color: var(--fg-secondary); line-height: 1.4;
}
.po-done-meta {
  margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--fg-tertiary);
}

/* The way through to the recent orders screen. A quiet line under the number — the
   confirmation exists to show one thing, and a second thing on it competes with the first. */
.po-done-link {
  display: inline-block;
  margin: var(--space-5) 0 0;
  padding: var(--space-2) var(--space-3);
  background: none; border: none;
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--fg-brand); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.po-done-link:active { opacity: .6; }

/* ── My recent orders — the rows open out ─────────────────────────────────────
   A row is a button so it takes a tap, but it must look exactly like the list rows it sits
   among. The detail sits under the row rather than inside it, so the row keeps its height and
   the number stays where the eye last found it. */
.po-recent-row  { font-family: inherit; }
.po-recent-link { font-family: inherit; }
.po-recent-caret { color: var(--fg-muted); flex-shrink: 0; display: flex; align-items: center; }
/* An open order is ONE shaded block, not a white row above a grey one. The row takes the
   same background as its detail and drops the line between them, so the pair reads as a
   single panel. The line under the detail still separates this order from the next. */
.po-recent-row.is-open {
  background: var(--bg-subtle);
  border-bottom: none;
}
.po-recent-detail {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--f-border);
  padding: 0 var(--row-pad-x) var(--space-3);
}
.po-recent-line {
  display: flex; gap: var(--space-3); align-items: baseline;
  padding: 3px 0;
}
.po-recent-key {
  flex: 0 0 68px;
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .06em; color: var(--fg-tertiary);
}
.po-recent-val {
  flex: 1; min-width: 0;
  font-size: var(--text-sm); color: var(--fg-primary);
  overflow-wrap: anywhere;
}


.ts-manager-note {
  display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px;
  background: #fff7ed; border-left: 3px solid #f97316;
  font-size: var(--text-sm); color: #c2410c; line-height: var(--lh-normal);
}

/* Day view */
.ts-lunch-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.ts-lunch-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.ts-lunch-btn {
  background: var(--bg-alt); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 5px 10px; font-size: var(--text-sm);
  font-family: var(--font-body); cursor: pointer; color: var(--fg-secondary);
}
.ts-lunch-btn.active {
  background: var(--ea-green-700); border-color: var(--ea-green-700);
  color: #fff; font-weight: var(--fw-semibold);
}

.ts-block-form {
  margin: 0 16px 8px; padding: 10px; border: 1px solid var(--border-default);
  border-radius: var(--radius-md); background: var(--bg-surface);
  display: flex; flex-direction: column; gap: 8px;
}
.ts-block-form .field-group {
  padding: 6px 0; border-bottom: none; background: transparent;
}
.ts-block-form .field-input, .ts-block-form .fa-input {
  padding: 8px 12px; min-height: unset; font-size: 15px;
}
.ts-block-form-header {
  display: flex; justify-content: space-between; align-items: center;
}
.ts-block-form-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary); }
.ts-remove-block-btn {
  background: none; border: none; cursor: pointer; color: var(--fg-tertiary);
  padding: 2px; display: flex; align-items: center;
}

.ts-type-toggle { display: flex; gap: 0; }
.ts-type-toggle .toggle-btn { flex: 1; }

.ts-time-row { display: flex; gap: 10px; }
.ts-time-field { flex: 1; margin: 0; }
.ts-time-field .field-label { margin-bottom: 4px; }

.ts-add-block-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 4px 16px 16px; padding: 11px;
  background: none; border: 1.5px dashed var(--border-default);
  border-radius: var(--radius-md); font-size: var(--text-sm);
  color: var(--fg-secondary); cursor: pointer; font-family: var(--font-body);
  width: calc(100% - 32px);
}

.ts-block-header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.ts-type-selector { display: flex; gap: 4px; flex: 1; }
.ts-type-btn {
  flex: 1; padding: 10px 6px; min-height: 44px; border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); font-family: var(--font-body);
  cursor: pointer; border: 1.5px solid transparent;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  opacity: 0.55; transition: opacity 0.1s;
}
.ts-type-btn.active { opacity: 1; }
.ts-type-job      { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.ts-type-activity { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ts-type-leave    { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.ts-type-job.active      { background: #dcfce7; border-color: #86efac; }
.ts-type-activity.active { background: #dbeafe; border-color: #93c5fd; }
.ts-type-leave.active    { background: #ffedd5; border-color: #fdba74; }

.ts-notes-field {
  resize: none; width: 100%; box-sizing: border-box;
  font-size: 14px; line-height: 1.4;
}
/* "Manager to assign" tick on a job entry, and the time-and-a-half note (2026-10-08) */
.ts-assign-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--fg-secondary); margin: 2px 0 6px; cursor: pointer; }
.ts-assign-toggle input { width: 20px; height: 20px; flex: none; }
.ts-rate-note { font-size: 12px; font-weight: 600; color: #c2410c; margin-bottom: 6px; }
.ts-block-readonly { background: var(--bg-alt); }
.ts-ro-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ts-ro-chip { flex: 0 0 auto; pointer-events: none; padding: 3px 8px; font-size: 11px; }
.ts-ro-time { font-family: var(--font-mono); font-size: 13px; color: var(--fg-tertiary); }
.ts-ro-detail { font-size: var(--text-sm); color: var(--fg-primary); line-height: 1.4; }
.ts-ro-sub { font-size: 11px; color: var(--fg-tertiary); }
.ts-ro-notes { font-size: 12px; color: var(--fg-secondary); padding-top: 6px; border-top: 1px solid var(--border-subtle); margin-top: 6px; font-style: italic; }

.ts-holiday-info {
  display: flex; align-items: center; gap: 6px; padding: 10px 16px;
  background: #fffbeb; font-size: var(--text-sm); color: #92400e;
}

/* Submit / confirm view */
.ts-submit-header { padding: 14px 16px 8px; border-bottom: 1px solid var(--border-subtle); }
.ts-submit-week { font-size: var(--text-sm); font-weight: var(--fw-semibold); margin: 0 0 2px; }
.ts-submit-total { font-size: var(--text-sm); color: var(--fg-secondary); margin: 0; }

.ts-summary-list { display: flex; flex-direction: column; }
.ts-summary-row {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.ts-summary-date { font-size: 12px; font-weight: var(--fw-semibold); color: var(--fg-secondary); min-width: 80px; }
.ts-summary-blocks { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ts-summary-block { font-size: 12px; color: var(--fg-primary); }
.ts-summary-lunch { font-size: 11px; color: var(--fg-tertiary); }
.ts-summary-total { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--ea-green-700); white-space: nowrap; }

.ts-declaration {
  padding: 12px 16px; background: var(--bg-alt);
  font-size: var(--text-sm); color: var(--fg-secondary); line-height: var(--lh-normal);
}
.ts-declaration p { margin: 0; }

.ts-flex-balance-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 16px; margin-bottom: 4px;
  background: var(--ea-green-50); border: 1px solid var(--ea-green-200); border-radius: var(--radius-md);
  cursor: pointer; text-align: left;
}
.ts-flex-balance-inner { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ea-green-800); }
.ts-flex-history-link  { font-size: 12px; color: var(--ea-green-700); display: flex; align-items: center; gap: 2px; }
.ts-flex-hist-balance  { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--ea-green-50); border-bottom: 1px solid var(--ea-green-200); font-size: 14px; font-weight: 600; color: var(--ea-green-800); }
.ts-flex-hist-header   { display: grid; grid-template-columns: 1fr 80px; padding: 8px 16px; font-size: 11px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-subtle); }
.ts-flex-hist-row      { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); gap: 8px; }
.ts-flex-hist-left     { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ts-flex-hist-right    { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; min-width: 60px; }
.ts-flex-hist-type     { font-size: 13px; font-weight: 600; }
.ts-flex-hist-date     { font-size: 12px; color: var(--fg-secondary); }
.ts-flex-hist-note     { font-size: 11px; color: var(--fg-muted); font-style: italic; }
.ts-flex-hist-hrs      { font-size: 14px; font-weight: 700; font-family: var(--font-mono); }
.ts-flex-hist-bal      { font-size: 11px; color: var(--fg-secondary); font-family: var(--font-mono); }

.ts-flex-bank-panel {
  margin: 12px 16px; padding: 12px 14px;
  background: var(--ea-green-50); border: 1px solid var(--ea-green-200); border-radius: var(--radius-md);
}
.ts-flex-bank-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ea-green-800); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.ts-flex-bank-desc  { font-size: 12px; color: var(--ea-green-700); margin: 0 0 10px; }
.ts-flex-bank-row   { display: flex; align-items: center; gap: 12px; }
.ts-flex-bank-row input[type=range] { flex: 1; accent-color: var(--ea-green-600); }
.ts-flex-val        { font-size: 13px; font-weight: var(--fw-semibold); color: var(--ea-green-700); min-width: 90px; text-align: right; }

.ts-sig-canvas {
  display: block; width: 100%; max-width: 320px; height: 140px;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: #fff; touch-action: none;
}
.ts-sig-actions { margin-top: 6px; }

/* My details — section menu and one-section edit (2026-11-01) */
.md-pad { padding: 4px var(--row-pad-x) 24px; }
.md-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--border-subtle, #eee); padding: 14px var(--row-pad-x); font: inherit; color: inherit; cursor: pointer; }
.md-row-text { flex: 1; min-width: 0; }
.md-row-title { font-weight: 700; font-size: 15px; }
.md-row-sum { font-size: 13px; color: var(--fg-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.md-row-sum.md-missing { color: var(--status-warn, #b7791f); }
.md-sec { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-secondary); margin: 18px 0 8px; }
.md-choice { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.md-choice label { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border-default);
  border-radius: 10px; font-size: 15px; font-weight: 600; background: #fff; }
.md-choice label:has(input:checked) { border-color: var(--ea-green-600); background: var(--ea-green-50, #f1f7ee); }
.md-choice input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--ea-green-600); flex-shrink: 0; }
.md-choice small { display: block; font-weight: 500; color: var(--fg-secondary); font-size: 13px; }
.md-fixed { font-size: 16px; font-weight: 600; padding: 4px 0 2px; color: var(--fg-primary, #2c2d2f); }
.md-q { font-size: 14px; font-weight: 700; margin: 14px 0 8px; }
.md-note { font-size: 13px; color: var(--fg-secondary); background: var(--bg-subtle, #f4f4f2); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.md-result { text-align: center; border: 1px solid var(--ea-green-600); background: var(--ea-green-50, #f1f7ee); border-radius: 12px; padding: 12px; margin: 14px 0; }
.md-result b { display: block; font-size: 28px; }
.md-check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 600; margin: 16px 0 10px; }
.md-check input { width: 22px; height: 22px; accent-color: var(--ea-green-600); flex-shrink: 0; }
.md-err { color: var(--status-fail); font-size: 14px; margin: 10px 0; }


/* Locked / pending block indicators */
.ts-block-locked  { background: var(--ea-amber-50); opacity: 0.85; }
.ts-block-pending { background: var(--ea-amber-100); }
.ts-block-status-icon { display: inline-flex; align-items: center; margin-left: 4px; color: var(--fg-tertiary); }
.ts-block-locked  .ts-block-status-icon { color: var(--ea-amber-600); }
.ts-block-pending .ts-block-status-icon { color: var(--ea-amber-600); }

/* Leave button bar */
.ts-leave-notif {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 14px; margin-bottom: 10px; border-radius: var(--radius-sm);
  background: var(--ea-amber-100); border: 1px solid var(--ea-amber-400);
  color: var(--ea-amber-700); font-size: var(--text-sm); font-weight: var(--fw-semibold);
  cursor: pointer; text-align: left;
}
.ts-leave-notif span { flex: 1; }
.ts-leave-bar { padding: 0 0 10px; }
.ts-leave-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: var(--bg-surface);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary);
  cursor: pointer;
}
.ts-leave-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--ea-red-600); color: #fff;
  border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1;
}

/* Leave form — flat field-group section */
.ts-leave-form { background: var(--bg-surface); border-top: 1px solid var(--f-border); border-bottom: 1px solid var(--f-border); margin-bottom: var(--space-2); }
.ts-leave-dates-row { display: flex; gap: 10px; }
.ts-leave-date-col { flex: 1; }
.ts-leave-day-count { margin-top: 8px; font-size: var(--text-xs); color: var(--ea-green-700); font-weight: var(--fw-semibold); }
.ts-leave-notes { min-height: 44px; max-height: none; resize: none; overflow: hidden; line-height: var(--lh-relaxed); }
.ts-leave-submit-row { padding: 12px var(--row-pad-x); }
.ts-leave-day-none { color: var(--fg-muted); font-weight: var(--fw-regular); }
.field-label-opt { font-weight: var(--fw-regular); text-transform: none; letter-spacing: 0; color: var(--fg-muted); }

/* Leave request list — list row pattern */
.ts-leave-req-list { background: var(--bg-surface); border-top: 1px solid var(--f-border); border-bottom: 1px solid var(--f-border); }
.ts-leave-req-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px var(--row-pad-x); border-bottom: 1px solid var(--f-border); min-height: var(--touch-comfy); }
.ts-leave-req-row:last-child { border-bottom: none; }
.ts-leave-req-new { background: var(--ea-green-50); }
.ts-leave-req-body { flex: 1; min-width: 0; }
.ts-leave-req-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.ts-leave-req-ref { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-tertiary); margin-bottom: 2px; }
.ts-leave-req-label { font-size: var(--text-sm); color: var(--fg-primary); font-weight: var(--fw-medium); margin-top: 2px; }
.ts-leave-req-meta  { font-size: var(--text-xs); color: var(--fg-secondary); margin-top: 2px; }
.ts-leave-req-note { font-size: var(--text-xs); color: var(--ea-amber-600); display: flex; align-items: flex-start; gap: 4px; margin-top: 5px; }
.ts-leave-cancel-btn {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: var(--fw-semibold); color: var(--fg-secondary);
  background: none; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 3px 8px; cursor: pointer;
}

/* Leave status chips */
.ts-leave-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.ts-leave-status-pending  { background: var(--ea-amber-100); color: var(--ea-amber-600); }
.ts-leave-status-approved { background: var(--ea-green-100); color: var(--ea-green-700); }
.ts-leave-status-partial  { background: var(--ea-sky-100);   color: var(--ea-sky-600); }
.ts-leave-status-rejected { background: var(--ea-red-100);   color: var(--ea-red-600); }

/* ── Timesheets hub screen ──────────────────────────────── */
.ts-hub-week-current { background: var(--ea-green-50); }
.ts-hub-week-current .cat-name { color: var(--ea-green-700); }
.ts-hub-current-tag {
  display: inline-block;
  font-size: 10px; font-weight: var(--fw-bold);
  color: var(--ea-green-600); text-transform: uppercase;
  letter-spacing: 0.06em; background: var(--ea-green-100);
  border-radius: var(--radius-pill); padding: 2px 6px;
  margin-left: 6px; vertical-align: middle;
}
.ts-hub-week-meta {
  font-size: var(--text-xs); color: var(--fg-tertiary);
  margin-top: 2px; font-family: var(--font-mono);
}
.ts-hub-week-empty { color: var(--fg-muted); font-family: inherit; }
.action-cat-icon { position: relative; }
.action-cat-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--ea-green-600); color: #fff;
  border-radius: var(--radius-pill);
  font-size: 9px; font-weight: var(--fw-bold);
  min-width: 16px; height: 16px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
}
.ts-hub-leave-icon { position: relative; }
.ts-hub-leave-badge {
  position: absolute; top: -4px; right: -2px;
  background: var(--ea-green-600); color: white;
  border-radius: var(--radius-pill);
  font-size: 9px; font-weight: var(--fw-bold);
  min-width: 16px; height: 16px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}

/* ── JSA Steps ─────────────────────────────────────────────── */
.jsa-steps-wrap { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.jsa-step-row { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; background: var(--bg-subtle, #f8fafc); }
.jsa-step-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jsa-step-num { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--ea-blue-600, #2563eb); }
.jsa-step-remove { font-size: var(--text-xs); color: var(--danger, #dc2626); background: none; border: none; cursor: pointer; padding: 2px 6px; }
.jsa-risk-row { display: flex; gap: 8px; align-items: flex-end; }
.jsa-risk-chip-group { flex-shrink: 0; min-width: 90px; }
.jsa-add-step-btn { margin-top: 4px; width: 100%; }
.jsa-risk-chip { display: inline-block; padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.jsa-risk-very_low, .jsa-risk-low { background: #d1fae5; color: #065f46; }
.jsa-risk-moderate  { background: #fef9c3; color: #854d0e; }
.jsa-risk-high      { background: #fee2e2; color: #991b1b; }
.jsa-risk-critical  { background: #991b1b; color: #fff; font-weight: 700; }
.jsa-risk-unknown   { background: var(--bg-muted, #e2e8f0); color: var(--fg-tertiary, #94a3b8); }

/* ── Hot Works sign-off role label ─────────────────────────── */
.signoff-role-label { font-size: var(--text-xs); color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }

/* ── JSA late sign-off panel ───────────────────────────────── */
#jsa-add-sig-panel { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }

/* ── JSA inline sign-off ───────────────────────────────────── */
.jsa-signoff-wrap { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 16px; }
.jsa-sig-block { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle, #f8fafc); }
.jsa-sig-block-signed { border-color: var(--ea-green-400, #4ade80); background: var(--ea-green-50, #f0fdf4); }
.jsa-sig-name { font-size: var(--text-sm); font-weight: var(--fw-bold); margin-bottom: 6px; }
.jsa-sig-img  { width: 100%; max-height: 60px; object-fit: contain; }

/* ── Medical gas test forms ────────────────────────────────── */
.mg-leak-field { gap: 12px; }
.mg-blocks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.mg-block { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px; background: var(--bg-surface); }
.mg-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mg-block-title { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--ea-green-700); text-transform: uppercase; letter-spacing: 0.04em; }
.mg-block-remove { background: none; border: none; color: var(--status-fail); font-size: var(--text-sm); font-weight: var(--fw-semibold); padding: 4px 6px; }
.mg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mg-add-btn { width: 100%; }
.mg-photo-row { margin-top: 10px; }
.mg-photo-btn { width: 100%; }
.mg-photo-thumb { position: relative; display: inline-block; }
.mg-photo-thumb img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-default); }
.mg-photo-x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--status-fail); color: #fff; font-size: 16px; line-height: 1; }
.mg-result { margin-top: 12px; }
.mg-sub { margin: 14px 0 8px; }
.mg-sub span { font-size: var(--text-xs); }
.mg-verdict-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.mg-verdict-row.mg-result-pass { background: var(--status-ok-bg); color: var(--status-ok); }
.mg-verdict-row.mg-result-fail { background: var(--status-fail-bg); color: var(--status-fail); }
.mg-result-pending { font-size: var(--text-xs); color: var(--fg-muted); }
.mg-result-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--text-sm); padding: 8px 10px; border-radius: var(--radius-sm); }
.mg-result-row.mg-result-pass { background: var(--status-ok-bg); color: var(--status-ok); }
.mg-result-row.mg-result-fail { background: var(--status-fail-bg); color: var(--status-fail); }
.mg-result-limit { color: var(--fg-tertiary); font-size: var(--text-xs); }
.mg-result-verdict { margin-left: auto; font-weight: var(--fw-bold); letter-spacing: 0.06em; }

.mg-qa-list { display: flex; flex-direction: column; gap: 12px; }
.mg-qa-row { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 12px; }
.mg-qa-item { font-size: var(--text-sm); font-weight: var(--fw-medium); margin-bottom: 8px; }
.mg-seg { display: flex; gap: 0; margin-bottom: 8px; }
.mg-seg-btn { flex: 1; padding: 8px 4px; font-size: var(--text-xs); font-weight: var(--fw-semibold); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--fg-secondary); }
.mg-seg-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.mg-seg-btn:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.mg-seg-btn:not(:first-child) { border-left: none; }
.mg-seg-btn.mg-seg-on { background: var(--ea-green-600); color: #fff; border-color: var(--ea-green-600); }
.mg-qa-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.mg-sig-grid { display: flex; flex-direction: column; gap: 16px; }
.mg-sig-cell { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mg-sig-role { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--ea-green-700); text-transform: uppercase; letter-spacing: 0.04em; }
.mg-sig-canvas { width: 100%; height: 140px; border: 1px dashed var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); touch-action: none; }
.mg-sig-actions { display: flex; align-items: center; gap: 8px; }
.mg-sig-actions .btn { flex: 0 0 auto; }
.mg-sig-state { margin-left: auto; font-size: var(--text-xs); color: var(--ea-green-700); font-weight: var(--fw-semibold); }

/* Accordion gas-test tiles */
.mg-tile { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--ea-green-200); border-radius: var(--radius-md); background: var(--ea-green-50); margin-bottom: 8px; cursor: pointer; }
.mg-tile:active { background: var(--ea-green-100); }
.mg-tile-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-tile-chip { font-size: var(--text-xs); font-weight: var(--fw-bold); padding: 3px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.mg-tile-chip.mg-result-pass { background: var(--status-ok-bg); color: var(--status-ok); }
.mg-tile-chip.mg-result-fail { background: var(--status-fail-bg); color: var(--status-fail); }
.mg-tile-chip.mg-tile-pending { background: var(--bg-muted); color: var(--fg-tertiary); }
.mg-tile-caret { color: var(--fg-tertiary); font-size: 12px; }
.mg-block-open { margin-bottom: 8px; border-color: var(--ea-green-300); background: var(--ea-green-50); }
/* Open-block header bar — green so the active gas test stands out from the page */
.mg-block-head { cursor: pointer; margin: -12px -12px 10px; padding: 10px 12px; background: var(--ea-green-100); border-bottom: 1px solid var(--ea-green-200); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.mg-block-remove-btn { width: 100%; margin-top: 12px; color: var(--status-fail); }

/* Read-only test-pressure info label (carcass values are predetermined) */
.mg-info-value { padding: 10px 12px; border: 1px dashed var(--ea-green-300); border-radius: var(--radius-md); background: var(--ea-green-50); color: var(--ea-green-800); font-weight: var(--fw-semibold); }
.mg-info-value.mg-info-empty { color: var(--fg-muted); font-weight: var(--fw-regular); font-style: italic; border-style: dashed; border-color: var(--border-default); background: var(--bg-subtle); }

/* Carcass hub list item — 3-line layout (site—job / section / date + status) */
.mg-sub-item { align-items: flex-start; }
.mg-sub-info { display: flex; flex-direction: column; gap: 2px; }
.mg-sub-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary); white-space: normal; word-break: break-word; }
.mg-sub-section { font-size: var(--text-xs); color: var(--fg-secondary); white-space: normal; word-break: break-word; }
.mg-sub-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; }
.mg-gas-row { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.mg-gas { font-size: 10px; font-weight: var(--fw-semibold); line-height: 1.5; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--ea-green-100); color: var(--ea-green-800); white-space: nowrap; }
.mg-gas-none { font-size: var(--text-xs); color: var(--fg-muted); font-style: italic; }
.mg-sub-date { font-size: var(--text-xs); color: var(--fg-muted); white-space: nowrap; flex-shrink: 0; }

/* medgas gas-select chips (B2 cross-connection) */
.mg-gassel-hint { font-size: var(--text-xs); color: var(--fg-secondary); margin: 0 0 8px; }
.mg-gassel-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-gassel-chip { font-size: var(--text-sm); font-weight: var(--fw-semibold); padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--fg-secondary); cursor: pointer; }
.mg-gassel-chip.mg-gassel-on { background: var(--ea-green-100); border-color: var(--ea-green-300); color: var(--ea-green-800); }

/* Completed-test detail view (medgas) */
.detail-mg-table { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font-size: var(--text-sm); }
.detail-mg-table th, .detail-mg-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); }
.detail-mg-table th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-tertiary); font-weight: var(--fw-semibold); }
.detail-mg-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.detail-mg-table .center { text-align: center; }
.detail-sign-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 8px; }
.detail-sign-cell { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px; }
.detail-sign-role { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-tertiary); font-weight: var(--fw-semibold); margin-bottom: 6px; }
.detail-sign-img { max-width: 100%; height: 48px; object-fit: contain; display: block; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
.detail-sign-name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary); }
.detail-sign-status { font-size: var(--text-xs); color: var(--fg-secondary); }

/* Multi-step wizard */
#form-stepper { margin-bottom: 16px; }
.stepper { display: flex; align-items: center; }
.stepper-item { display: flex; align-items: center; gap: 6px; min-width: 0; }
.stepper-dot { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--fw-bold); background: var(--bg-muted); color: var(--fg-tertiary); }
.stepper-item.active .stepper-dot { background: var(--ea-green-600); color: #fff; }
.stepper-item.done .stepper-dot { background: var(--ea-green-100); color: var(--ea-green-700); }
.stepper-label { font-size: var(--text-xs); color: var(--fg-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper-item.active .stepper-label { color: var(--fg-primary); font-weight: var(--fw-semibold); }
.stepper-sep { flex: 1; height: 1px; background: var(--border-default); margin: 0 6px; min-width: 8px; }
.step-footer-row { display: flex; gap: 8px; align-items: stretch; }
.step-btn { flex: 0 0 auto; }
.step-btn-grow { flex: 1; }

/* ── Maintenance jobs (v63) ───────────────────────────────────────────────────
   The job list, and one job in three tabs: Assets, Notes, Site. Rows follow the list rows
   used elsewhere in eGO (full-width, 1px dividers, row padding); an open asset reuses the
   recent-orders detail panel so the two read the same. */
/* v71 — tighter throughout (James, 2026-09-25: "make better use of available screen size"):
   row, section and heading padding and button heights all come down a step. Controls stay at
   least 40px tall, so they are still easy to hit with a glove. */
.mj-search-wrap { padding: var(--space-2) var(--row-pad-x); }
.mj-search-wrap .field-input { width: 100%; box-sizing: border-box; }
#screen-maintenance .field-input, #screen-maintenance-job .field-input { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
/* eGO's button is a fixed height (52px), so it is the height that is changed, not a minimum. */
#screen-maintenance-job .fa-btn { height: 42px; }
.mj-empty { padding: var(--space-5) var(--row-pad-x); }
.mj-foot {
  padding: var(--space-2) var(--row-pad-x) var(--space-5);
  font-size: var(--text-xs); color: var(--fg-tertiary);
}
.mj-list { display: flex; flex-direction: column; }
.mj-job-row, .mj-asset-row {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left; font-family: inherit;
  padding: 9px var(--row-pad-x);
  background: var(--bg-surface); border: none;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mj-list > .mj-job-row:first-child,
.mj-list > .mj-asset-row:first-child { border-top: 1px solid var(--border-subtle); }
.mj-job-row:active, .mj-asset-row:active { background: var(--bg-subtle); }
.mj-asset-row.is-open { background: var(--bg-subtle); border-bottom: none; }
.mj-job-row.is-done { background: var(--bg-subtle); }
.mj-job-row.is-done .mj-job-site { color: var(--fg-secondary); }
.mj-job-main, .mj-asset-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mj-job-site { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--fg-primary); }
.mj-job-meta { font-size: var(--text-sm); color: var(--fg-secondary); overflow-wrap: anywhere; }
.mj-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.mj-chip {
  font-size: 11px; font-weight: var(--fw-bold); white-space: nowrap;
  padding: 2px 8px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center;
}
.mj-chip-due      { background: var(--bg-muted);     color: var(--fg-secondary); }
.mj-chip-overdue  { background: #fee2e2;             color: #b91c1c; }
.mj-chip-progress { background: var(--ea-amber-100); color: #92400e; }
.mj-chip-done     { background: var(--ea-green-50);  color: var(--ea-green-800); }

.mj-banner {
  margin: var(--space-2) var(--row-pad-x) 0;
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: var(--text-sm); line-height: var(--lh-normal);
}
.mj-banner-warn { background: #fef3c7; color: #78350f; }
.mj-banner-info { background: var(--ea-sky-100); color: #0c4a6e; }
.mj-link {
  background: none; border: none; padding: 0; margin-left: 4px;
  font: inherit; font-weight: var(--fw-semibold); color: var(--fg-link, var(--ea-green-700));
  text-decoration: underline; cursor: pointer;
}
.mj-link[disabled] { opacity: .5; }
.mj-refresh { margin-left: auto; font-size: var(--text-xs); }

.mj-head { padding: var(--space-3) var(--row-pad-x) var(--space-2); background: var(--bg-surface); }
.mj-head-site { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--fg-primary); line-height: var(--lh-snug); }
.mj-head-job { font-size: var(--text-sm); color: var(--fg-secondary); margin-top: 1px; overflow-wrap: anywhere; }

/* Tabs stay put under the 56px header while the list scrolls.
   v71 — they look like tabs (James, 2026-09-25): a shaded strip, the unselected tabs sitting
   in it greyed, the selected one lifted out in the page colour with a green top edge and no
   line underneath, so it reads as joined to the content below. */
.mj-tabs {
  position: sticky; top: 56px; z-index: 20;
  display: flex; gap: 4px;
  padding: 6px var(--row-pad-x) 0;
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-default);
}
.mj-tab {
  flex: 1; padding: 8px 4px 9px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default); border-bottom: none;
  border-top: 3px solid transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-bottom: -1px;
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--fg-tertiary); cursor: pointer;
}
.mj-tab.active {
  background: var(--bg-surface); color: var(--fg-primary);
  border-top-color: var(--ea-green-600);
  border-bottom: 1px solid var(--bg-surface);
}
.mj-tab-n {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px;
  border-radius: var(--radius-pill); background: var(--bg-muted);
  font-size: 11px; color: var(--fg-secondary);
}
.mj-tab.active .mj-tab-n { background: var(--ea-green-50); color: var(--ea-green-800); }
/* Room at the bottom so the last button can scroll clear of the floating "How to install eGO"
   pill, which covers the bottom ~90px in a browser tab. Found by the browser check: the
   Enviroair notes' Add note button sat underneath it and could not be tapped. */
.mj-tab-body { padding-bottom: 110px; }
#mj-list-content { padding-bottom: 110px; }

.mj-asset-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.mj-asset-ref { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--fg-primary); }
.mj-asset-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-tertiary); }
.mj-asset-sub { font-size: var(--text-sm); color: var(--fg-secondary); overflow-wrap: anywhere; }

.mj-notes-block, .mj-section {
  padding: var(--space-3) var(--row-pad-x);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 6px;
}
.mj-section > .mj-link { margin-left: 0; align-self: flex-start; }
.mj-notes-internal { background: var(--bg-subtle); }
/* Who can see a note — a tag on the heading instead of a sentence under it (2026-09-25). */
.mj-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-pill);
  font-size: 10px; letter-spacing: .03em; text-transform: none; font-weight: var(--fw-bold);
  background: var(--ea-sky-100); color: #0c4a6e; vertical-align: 1px;
}
.mj-tag-internal { background: var(--bg-muted); color: var(--fg-secondary); }
.mj-notes-title, .mj-section-title {
  font-size: 11px; font-weight: var(--fw-bold); color: var(--fg-tertiary);
  text-transform: uppercase; letter-spacing: .07em;
}
.mj-notes-sub { font-size: var(--text-xs); color: var(--fg-tertiary); margin-top: -4px; }
.mj-note { padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.mj-note-meta { font-size: 11px; font-weight: var(--fw-semibold); color: var(--fg-tertiary); }
.mj-note-text, .mj-text {
  font-size: var(--text-sm); color: var(--fg-primary); line-height: var(--lh-normal);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.mj-note-text { margin-top: 2px; }
.mj-text-small { font-size: var(--text-xs); color: var(--fg-secondary); }
.mj-note-warn { font-size: var(--text-xs); color: #92400e; margin-top: 4px; }
.mj-note-none { font-size: var(--text-sm); color: var(--fg-tertiary); margin: 0; }
.mj-textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: var(--font-body); }
.mj-btn-row { display: flex; gap: 8px; }
.mj-btn-row .fa-btn { flex: 1; }
.mj-subhead { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--fg-tertiary); margin-top: 6px; }
.mj-contact { padding: 6px 0; }
.mj-contact + .mj-contact { border-top: 1px solid var(--border-subtle); }
.mj-contact-name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary); }
.mj-contact-pos { font-size: var(--text-xs); color: var(--fg-secondary); }
.mj-contact-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: var(--text-sm); }
.mj-contact-links .mj-link { margin-left: 0; }

/* ── Maintenance: working through the assets (v64) ─────────────────────────── */
.mj-head-actions { display: flex; gap: 6px; margin-top: var(--space-2); }
.mj-head-btn { flex: 1; min-width: 0; padding-left: 6px; padding-right: 6px; white-space: nowrap; gap: 6px; font-size: 14px; }
/* Three buttons share the row (v71). Without this the icon is what gives way first: Log time's
   clock was squeezed to a dot at 390 wide while its text still fitted, so a text-only check passed. */
.mj-head-btn svg { flex-shrink: 0; }
.mj-head-btn.is-done { border-color: var(--ea-green-600); color: var(--ea-green-800); }
.mj-head-btn.is-open { background: var(--bg-muted); }
.mj-search-row { display: flex; gap: 8px; align-items: stretch; }
.mj-search-row .field-input { flex: 1; min-width: 0; }
.mj-scan-btn { flex: 0 0 auto; white-space: nowrap; }
.mj-filter-bar { display: flex; gap: 6px; padding: 0 var(--row-pad-x) var(--space-2); }
.mj-fchip {
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--fg-secondary); background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  padding: 4px 12px; cursor: pointer;
}
.mj-fchip.active { background: var(--ea-green-600); border-color: var(--ea-green-600); color: #fff; }
.mj-fchip-n { font-weight: var(--fw-bold); margin-left: 2px; }
.mj-chip-fu     { background: #fef3c7; color: #92400e; }
.mj-chip-na     { background: var(--bg-muted); color: var(--fg-secondary); }
.mj-chip-missed { background: #fee2e2; color: #b91c1c; }
.mj-extras { font-size: 11px; color: var(--fg-tertiary); }
.mj-panel { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.mj-last { font-size: var(--text-xs); color: var(--fg-secondary); padding: 6px 8px; border-radius: var(--radius-sm); background: var(--bg-surface); }
.mj-last.is-missed { background: #fee2e2; color: #991b1b; font-weight: var(--fw-semibold); }
/* Three results, still big enough for a gloved thumb (48px → 42px in v71). */
.mj-rbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 2px; }
.mj-rbtn {
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-bold);
  min-height: 42px; padding: 4px 4px; border-radius: var(--radius-md);
  border: 2px solid var(--border-default); background: var(--bg-surface); color: var(--fg-primary);
  cursor: pointer; line-height: 1.15;
}
.mj-rbtn[disabled] { opacity: .5; }
.mj-rbtn-ok { border-color: var(--ea-green-600); color: var(--ea-green-800); }
.mj-rbtn-fu { border-color: #d97706; color: #92400e; }
.mj-rbtn-na { border-color: var(--border-strong); color: var(--fg-secondary); }
.mj-rbtn-ok.is-set { background: var(--ea-green-600); color: #fff; }
.mj-rbtn-fu.is-set { background: #d97706; color: #fff; }
.mj-rbtn-na.is-set { background: var(--ea-charcoal-600); border-color: var(--ea-charcoal-600); color: #fff; }
.mj-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.mj-reasons .mj-subhead { flex-basis: 100%; }
.mj-reason {
  font-family: inherit; font-size: var(--text-sm); padding: 6px 12px; min-height: 38px;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  background: var(--bg-surface); color: var(--fg-primary); cursor: pointer;
}
.mj-reason.is-set { background: var(--ea-charcoal-600); border-color: var(--ea-charcoal-600); color: #fff; }
.mj-result-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mj-result-line .mj-link { margin-left: auto; }
.mj-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.mj-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
/* The × sits on the photo's corner, big enough to hit with a thumb, clear of the tap that
   opens the photo full size. */
.mj-thumb { position: relative; display: inline-block; }
.mj-thumb-remove {
  position: absolute; top: -8px; right: -8px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #fff; background: var(--ea-charcoal-800); color: #fff;
  font-size: 18px; line-height: 1; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mj-thumbs { padding-top: 8px; }
/* Completing (v65) */
.mj-complete-btn { margin-top: var(--space-3); }
.mj-complete-box {
  margin-top: var(--space-3); padding: 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: var(--bg-subtle);
  display: flex; flex-direction: column; gap: 8px;
}
.mj-complete-box.is-done { background: var(--ea-green-50); border-color: var(--ea-green-200); }
.mj-complete-box .mj-link { margin-left: 0; align-self: flex-start; }
.mj-complete-title {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--fg-primary);
}
.mj-complete-box.is-done .mj-complete-title { color: var(--ea-green-800); }
.mj-thumb-missing {
  width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-muted); border-radius: var(--radius-sm); color: var(--fg-tertiary);
}
/* ── Layout A2 (v72, James 2026-09-25) ────────────────────────────────────────
   The site is the title bar; one line of chips and one row of four slim buttons (Time, PO,
   BWOF, Complete) under it; the open asset is a sheet from the bottom with the results at thumb
   height; Scan floats bottom right. Chosen from mockups — see ego-maintenance-jobs.md → "Layout A2". */
/* The header centres its title across the full width; a long site name must stop short of the
   Jobs button and the eGO mark rather than run under them. */
.header > span.mj-header-title {
  display: block; padding: 0 92px; line-height: 56px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mj-pills { display: flex; gap: 6px; margin-top: var(--space-2); }
/* Sized to their labels, spare room shared out: at 360 wide four equal buttons cut "Complete"
   off (found by the A2 browser check), while "PO" needs a third of the room. */
.mj-pill {
  flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface); color: var(--fg-secondary);
  font-family: inherit; font-size: 13px; font-weight: var(--fw-bold); cursor: pointer; white-space: nowrap;
}
.mj-pill svg { flex-shrink: 0; }
.mj-pill span { overflow: hidden; text-overflow: ellipsis; }
.mj-pill[disabled] { opacity: .45; cursor: default; }
.mj-pill.is-warn { border-color: #d97706; background: #fef3c7; color: #92400e; }
.mj-pill.is-ok   { border-color: var(--ea-green-600); background: var(--ea-green-50); color: var(--ea-green-800); }
.mj-pill.is-go   { border-color: var(--ea-green-600); background: var(--ea-green-600); color: #fff; }
.mj-pill.is-open { box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); }

/* Follow-up and Not accessible filter chips: the row's own circle, small, with the count. */
.mj-fchip-icon { display: inline-flex; align-items: center; gap: 5px; padding-left: 6px; padding-right: 10px; }
.mj-fchip-icon .mj-dot { width: 20px; height: 20px; font-size: 12px; }
.mj-fchip-icon.active .mj-dot { border-color: #fff; }

/* Status circle on each asset row */
.mj-dot {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--border-strong, #c9ccc5); color: #fff; font-weight: 800; font-size: 13px;
}
.mj-dot-missed { border-color: #dc2626; }
.mj-dot-ok { border-color: var(--ea-green-600); background: var(--ea-green-600); }
.mj-dot-follow_up { border-color: #d97706; background: #d97706; }
.mj-dot-not_accessible { border-color: var(--ea-charcoal-600); background: var(--ea-charcoal-600); }

/* Scan, floating bottom right */
.mj-scan-fab {
  position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  height: 54px; padding: 0 22px; border: none; border-radius: 27px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ea-green-600); color: #fff; font-family: inherit; font-size: 16px; font-weight: var(--fw-bold);
  box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer;
}
.mj-scan-fab:active { background: var(--ea-green-700); transform: scale(.97); }
.mj-scan-fab.is-lifted { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* The asset sheet */
body.mj-sheet-open { overflow: hidden; }
body.mj-sheet-open #ego-install-pill { display: none !important; }
body.mj-sheet-open .toast { bottom: 120px; }
#mj-sheet-host .mj-scrim { position: fixed; inset: 0; z-index: 900; background: rgba(12,14,12,.4); }
#mj-sheet-host .mj-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 901;
  max-height: 86vh; display: flex; flex-direction: column;
  background: var(--bg-surface); border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,.25);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform .2s ease-out;
}
#mj-sheet-host .mj-sheet.is-entering { animation: mj-sheet-up .2s ease-out; }
@keyframes mj-sheet-up { from { transform: translateY(40%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #mj-sheet-host .mj-sheet { animation: none; transition: none; } }
.mj-grab { display: block; width: 100%; height: 22px; padding: 0; border: none; background: none; cursor: pointer; }
.mj-grab span { display: block; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--border-default); }
.mj-sheet-head { padding: 2px var(--row-pad-x) 8px; }
.mj-sheet-ref { font-size: 20px; font-weight: var(--fw-bold); color: var(--fg-primary); margin-right: 8px; }
.mj-sheet-body {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 var(--row-pad-x) 10px; display: flex; flex-direction: column; gap: 8px;
}
.mj-sheet-body .mj-last { background: var(--bg-subtle); }
.mj-details-toggle { margin-left: 0; align-self: flex-start; font-size: var(--text-sm); }
.mj-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: var(--text-sm); }
.mj-kv span:nth-child(odd) { color: var(--fg-tertiary); font-size: var(--text-xs); font-weight: var(--fw-semibold); padding-top: 1px; }
.mj-kv span:nth-child(even) { color: var(--fg-primary); overflow-wrap: anywhere; }
/* Asset edit (v74.1.0): the Edit button under Details, and the edit sheet's fields. */
.mj-edit-btn { align-self: flex-start; min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.mj-edit-body { gap: 10px; }
.mj-edit-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mj-edit-field > span { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--fg-tertiary); display: flex; gap: 8px; align-items: baseline; }
.mj-edit-field > span em { font-style: normal; font-weight: var(--fw-semibold); color: #1d4ed8; }
.mj-edit-field.is-suggested .field-input { border-color: #60a5fa; background: #eff6ff; }
.mj-edit-scan {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px dashed var(--border-default); border-radius: 10px; background: var(--bg-subtle);
}
.mj-edit-scan-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.mj-edit-scan-text span { font-size: var(--text-xs); color: var(--fg-tertiary); }
.mj-edit-scan-photo { flex: none; }
.mj-edit-scan-photo .pi-grid:empty { display: none; }
.mj-edit-scan-photo .pi-actions { display: flex; gap: 6px; margin: 0; }
.mj-edit-scan-photo .pi-btn { min-height: 44px; min-width: 44px; margin: 0; }
.mj-edit-pending { padding: 10px 12px; border-radius: 10px; background: #fef3c7; color: #78350f; font-size: var(--text-sm); display: flex; flex-direction: column; gap: 8px; }
.mj-edit-pending-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mj-edit-pending-btns .fa-btn { min-height: 44px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mj-edit-field > span em { color: #93c5fd; }
  :root:not([data-theme="light"]) .mj-edit-field.is-suggested .field-input { border-color: #3b82f6; background: rgba(59, 130, 246, .12); }
  :root:not([data-theme="light"]) .mj-edit-pending { background: rgba(245, 158, 11, .15); color: #fcd34d; }
}
/* Note, Take photo and Choose existing in one row of equal buttons. The shared photo control
   draws its own two buttons, so its wrappers step aside (display: contents) and its buttons join
   this grid; any photos waiting to upload span the full row above. At 360 wide the old flex row
   pushed "Choose existing" onto a line of its own. */
.mj-sheet-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: stretch; }
.mj-sheet-tools .mj-sheet-photo, .mj-sheet-tools .pi-actions { display: contents; }
.mj-sheet-tools .pi-grid { grid-column: 1 / -1; }
.mj-sheet-tools .pi-grid:empty { display: none; }
.mj-sheet-tools .pi-btn, .mj-sheet-tools .mj-note-btn {
  min-height: 44px; margin: 0; padding: 0 6px; font-size: 13px; line-height: 1.15;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; text-align: center;
}
.mj-sheet-tools .pi-full { grid-column: 2 / -1; align-self: center; }
.mj-sheet-foot {
  flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 10px var(--row-pad-x) 12px; border-top: 1px solid var(--border-subtle); background: var(--bg-surface);
}
.mj-sheet-foot .mj-rbtn { min-height: 56px; font-size: 14px; }
/* Complete and Log time: two buttons in the foot, Cancel and the action. */
.mj-sheet-foot-2 { grid-template-columns: 1fr 1.4fr; }
.mj-sheet-foot-2 .fa-btn { height: 52px; font-size: 15px; }
.mj-sheet-head .mj-sheet-ref { display: block; }
/* Log time */
.mj-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mj-time-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mj-time-field > span { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--fg-tertiary); }
.mj-time-field .field-input { width: 100%; box-sizing: border-box; height: 48px; font-size: 16px; }
/* BWOF: the photo control's two buttons side by side, full width */
.mj-sheet-photo-row .pi-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mj-sheet-photo-row .pi-btn { min-height: 48px; }

/* v71 — general photos with a label beside each, the BWOF box, and the completion reminder. */
.mj-complete-btn { margin-top: var(--space-2); }
.mj-complete-box { margin-top: var(--space-2); padding: 10px 12px; }
.mj-gphotos { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.mj-gphoto { display: flex; gap: 12px; align-items: flex-start; }
.mj-gphoto .mj-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.mj-gphoto-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mj-gphoto-body .mj-link { margin-left: 0; align-self: flex-start; font-size: var(--text-sm); }
.mj-gphoto-label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary); overflow-wrap: anywhere; }
.mj-gphoto-label.is-empty { color: var(--fg-tertiary); font-weight: normal; font-style: italic; }
.mj-bwof-box {
  margin-top: var(--space-2); padding: 10px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: var(--bg-subtle);
  display: flex; flex-direction: column; gap: 6px;
}
.mj-bwof-box > .mj-link { margin-left: 0; align-self: flex-start; }
.mj-warn-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  background: #fef3c7; color: #78350f; font-size: var(--text-sm); font-weight: var(--fw-semibold);
}
.mj-warn-line .mj-link { margin-left: auto; color: #78350f; }