/* 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;
}

.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 */
.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-5) var(--row-pad-x) var(--space-2);
}

/* ══════════════════════════════════════════════════════
   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; }
.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); }
.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%; }

/* 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); }

/* ── 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;
}
.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); }

/* ── 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);
  z-index: 999; white-space: nowrap; box-shadow: var(--shadow-lg); pointer-events: none;
}
.toast.visible       { transform: translateX(-50%) translateY(0); }
.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;
}