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

:root {
  --brand: #8B3030;
  --brand-dark: #6B2020;
  --green: #2e7d52;
  --red: #c0392b;
  --grey-1: #f5efee;
  --grey-2: #ede5e4;
  --grey-3: #d9cece;
  --grey-5: #8a7878;
  --grey-7: #3c2e2e;
  --text: #1a1212;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(80,20,20,.10), 0 1px 2px rgba(80,20,20,.07);
  --hex-bg: #f0e6e4;
  --hex-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='92' viewBox='0 0 80 92'%3E%3Cpath d='M40 4 L74 22 L74 70 L40 88 L6 70 L6 22 Z' fill='none' stroke='%238B3030' stroke-width='1' stroke-opacity='0.08'/%3E%3C/svg%3E");
  /* Height of the sticky #status-bar — used by overlays/banners that sit
     just below it (e.g. #update-banner) so the offset is a single source
     of truth instead of a magic number duplicated in calc(). */
  --status-bar-h: 50px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  color: var(--text);
  background: var(--hex-bg) var(--hex-pattern);
  background-size: 80px 92px;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Status bar ── */
#status-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid var(--grey-3);
  font-size: 13px;
  font-weight: 500;
}

.brand {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
}

.brand-sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--grey-5);
}

#sync-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  margin-right: 6px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  background: #fff3e0;
  color: #b56000;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#sync-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d97706;
}

/* Stuck submissions get a red dot/tint so operatives can't miss them. */
#sync-badge.has-stuck { background: #f9e5e3; color: #a02020; }
#sync-badge.has-stuck::before { background: var(--red); }

#online-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  transition: background .3s, color .3s;
}

#online-badge.online  { background: #e3f0e8; color: #1e6e3e; }
#online-badge.offline { background: #f9e5e3; color: #a02020; }

#online-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

#online-badge.online::before  { background: var(--green); }
#online-badge.offline::before { background: var(--red); }

/* Tiny version pill — always visible on screen so admins can ask
   operatives to read it out. */
.app-version {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--grey-1);
  color: var(--grey-5);
  font-size: 11px;
  font-weight: 600;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

/* ── Progress bar ── */
#progress-wrap {
  background: #fff;
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--grey-3);
}

#progress-steps {
  display: flex;
  gap: 0;
  margin-bottom: 0;
}

.progress-step {
  flex: 1;
  text-align: center;
  padding: 8px 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--grey-5);
  border-bottom: 3px solid var(--grey-3);
  cursor: default;
  transition: color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}

.progress-step.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.progress-step.done {
  color: var(--green);
  border-bottom-color: var(--green);
  cursor: pointer;
}
/* Subtle press feedback so operatives know a completed step is tappable
   (jumps them back to that section to edit). Was an unaffordable cursor
   change only — invisible on touch devices. */
.progress-step.done:hover,
.progress-step.done:active {
  background: rgba(46, 125, 82, .07);
}

/* ── Main content ── */
main {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

/* ── Step panels ── */
.step-panel { display: none; }
.step-panel.active { display: block; }

.step-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text);
}

/* ── Cards / field groups ── */
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}

.card-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-7);
  margin-bottom: 8px;
  line-height: 1.4;
}

/* ── Radio / toggle groups ── */
.radio-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.radio-btn {
  flex: 1;
  min-width: 80px;
  position: relative;
}

.radio-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-btn label {
  display: block;
  text-align: center;
  padding: 13px 10px;
  border: 2px solid var(--grey-3);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  user-select: none;
}

.radio-btn input:checked + label {
  border-color: var(--brand);
  background: #f5e7e7;
  color: var(--brand);
}

/* 3-up status chips — top-level status of meter */
.radio-group--3 .radio-btn { min-width: 0; }
.radio-group--3 .radio-btn label { font-size: 13px; padding: 10px 4px; }

/* ── Text inputs ── */
.text-input, .textarea-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--grey-3);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}

.text-input:focus, .textarea-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(139,48,48,.15);
}

/* Select input — matches .text-input dimensions and typography. Native
   browser chevron is replaced with a custom SVG so it renders identically
   on iOS, Android, and desktop (their defaults are all visually different).
   Right padding leaves room for the chevron without text overlap. */
.select-input {
  width: 100%;
  padding: 11px 38px 11px 12px;
  border: 1px solid var(--grey-3);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  /* Custom chevron — matches grey-5 (#8a7878). Inline SVG, no extra HTTP req. */
  background:
    #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%238a7878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat
    right 14px center;
  background-size: 12px 8px;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.select-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(139,48,48,.15);
}

.text-input--locked {
  /* Locked because the field is auto-filled from the signed-in operative
     (server-side from PIN). The padlock icon makes the read-only-ness
     glanceable without forcing the operative to tap and fail. */
  background: var(--grey-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a7878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 16px 16px;
  color: var(--grey-7);
  cursor: not-allowed;
  padding-right: 38px;
}

.textarea-input {
  resize: vertical;
  min-height: 90px;
}

/* Postcode field with inline status indicator */
.postcode-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.postcode-row .text-input { flex: 1; text-transform: uppercase; }

.postcode-status {
  font-size: 18px;
  font-weight: 700;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.postcode-status.valid   { color: var(--green); }
.postcode-status.invalid { color: var(--red); }
.postcode-status.loading {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--grey-3);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: rotate .7s linear infinite;
}

@keyframes rotate { to { transform: rotate(360deg); } }

.postcode-detail {
  margin-top: 8px;
  font-size: 13px;
  color: var(--grey-5);
}

/* ── Nested / conditional blocks ── */
.nested {
  margin-top: 12px;
  padding: 14px;
  background: var(--grey-1);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.nested .card-label { margin-bottom: 10px; }

/* ── Photo section ── */
/* Section dividers between photo groups (e.g. "Existing meter", "Manhole
   chamber"). Demoted from a bold near-heading to a lighter eyebrow label
   so they read as group separators, not competing titles. */
.photo-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--grey-5);
  margin: 24px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--grey-3);
}

.photo-slot {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  margin-bottom: 10px;
}

.photo-slot-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--grey-7);
  padding-top: 2px;
}

.photo-slot-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}

.photo-btn:active { background: var(--brand-dark); }

.photo-btn svg { flex-shrink: 0; }

.photo-input { display: none; }

.thumb-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.thumb-strip img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--grey-3);
}

.thumb-strip .video-thumb,
.review-thumb-grid .video-thumb {
  width: 160px;
  height: auto;
  max-height: 120px;
  border-radius: 4px;
  border: 1px solid var(--grey-3);
  background: #000;
}

/* ── Navigation buttons ── */
/* Sticky to the viewport bottom so the operative can always tap Back /
   Next / Submit without scrolling to the end of a long survey page.
   The negative horizontal margin + restored padding lets the nav span
   edge-to-edge with the blurred backdrop so content scrolling
   underneath stays legible. */
.step-nav {
  display: flex;
  gap: 12px;
  margin: 24px -16px 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  position: sticky;
  bottom: 0;
  background: rgba(240, 230, 228, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--grey-3);
  z-index: 50;
}

.btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}

.btn-primary:active { background: var(--brand-dark); }

.btn-secondary {
  background: var(--grey-2);
  color: var(--grey-7);
}

.btn-secondary:active { background: var(--grey-3); }

.btn-success {
  background: var(--green);
  color: #fff;
}

.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Review panel ── */
#review-content {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}

.review-row {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--grey-2);
  font-size: 14px;
}

.review-row:last-child { border-bottom: none; }

.review-key {
  flex: 0 0 48%;
  color: var(--grey-5);
  font-weight: 500;
}

.review-val {
  flex: 1;
  color: var(--text);
  word-break: break-word;
}

.review-photos {
  margin-top: 16px;
}

.review-photos-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-7);
  margin-bottom: 8px;
}

.review-thumb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.review-thumb-grid img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--grey-3);
}

/* ── Toast ── */
#toast {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--grey-7);
  color: #fff;
  padding: 12px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: transform .3s, opacity .3s;
  z-index: 999;
  max-width: 90vw;
  text-align: center;
}

#toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

#toast.success { background: var(--green); }
#toast.error   { background: var(--red); }

/* ── Submit loading state ── */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin  { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-8px); }
  40%,80% { transform: translateX(8px); }
}

/* ── Confirmation screen ── */
#confirm-screen {
  text-align: center;
  padding: 48px 24px;
}

#confirm-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
/* SVG glyph inside the confirm circle (success / offline states). Inherits
   `color` from the parent state class so the colour stays in CSS, not JS. */
#confirm-icon svg {
  width: 36px;
  height: 36px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#confirm-icon.success { background: #e3f0e8; color: var(--green); }
#confirm-icon.offline { background: #fff3e0; color: #b56000; }

#confirm-icon.pending {
  background: transparent;
  border: 5px solid var(--grey-3);
  border-top-color: var(--brand);
  animation: rotate .9s linear infinite;
}

#confirm-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}

#confirm-msg {
  font-size: 15px;
  color: var(--grey-5);
  margin-bottom: 12px;
  line-height: 1.5;
}

#confirm-id {
  display: inline-block;
  background: var(--grey-2);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-7);
  margin-bottom: 32px;
  font-family: monospace;
}

/* ── PIN screen ── */
#pin-screen {
  position: fixed;
  inset: 0;
  background: var(--hex-bg) var(--hex-pattern);
  background-size: 80px 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

#pin-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(80,20,20,.12);
  padding: 36px 28px 28px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.pin-logo {
  display: block;
  width: 140px;
  height: auto;
  margin: 4px auto 18px;
}

.brand-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 4px;
}

.pin-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--grey-7);
  margin-bottom: 20px;
}

#pin-dots {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
}

#pin-dots span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--grey-3);
  background: transparent;
  transition: background .15s, border-color .15s;
}

#pin-dots span.filled {
  background: var(--brand);
  border-color: var(--brand);
  /* Tactile pop when a key is pressed — replaces the previously flat fill
     so the operative sees their tap register even with gloves on. */
  animation: pin-dot-pop .18s ease-out;
}

@keyframes pin-dot-pop {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

#pin-error {
  font-size: 13px;
  color: var(--red);
  margin-bottom: 8px;
  font-weight: 500;
  min-height: 20px;
}

#pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 16px;
}

.pin-key {
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background: var(--grey-1);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}

.pin-key:active { background: var(--grey-3); }
.pin-key--empty { background: transparent; cursor: default; }
.pin-key--del   { font-size: 18px; background: transparent; color: var(--grey-5); }
.pin-key--del:active { background: var(--grey-2); }

/* PIN screen version — subtle line below the keypad. Visible enough to read
   out when asked, quiet enough not to compete with the title or keypad. */
.pin-version {
  margin-top: 18px;
  color: var(--grey-5);
  font-size: 12px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

/* ── Pending Submissions screen ── */
#pending-screen {
  position: fixed;
  inset: 0;
  background: var(--hex-bg) var(--hex-pattern);
  background-size: 80px 92px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pending-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid var(--grey-3);
}

.pending-header h2 {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.pending-close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--grey-5);
  cursor: pointer;
  padding: 0 8px;
  -webkit-tap-highlight-color: transparent;
}

.btn-small {
  padding: 7px 14px;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: #fff;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-small:disabled { opacity: .5; cursor: not-allowed; }

.pending-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

.pending-row {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 10px;
}

.pending-row-id {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-7);
  letter-spacing: 0.02em;
}

.pending-row-addr {
  font-size: 14px;
  color: var(--text);
  margin-top: 3px;
  word-break: break-word;
}

.pending-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.pending-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}

.pending-status--queued    { background: #fff3e0; color: #b56000; }
.pending-status--retrying  { background: #e3eef9; color: #1e4e96; }
.pending-status--stuck     { background: #f9e5e3; color: #a02020; }

.pending-time {
  font-size: 12px;
  color: var(--grey-5);
}

.pending-row-err {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fdf3f2;
  border-left: 3px solid var(--red);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: #722;
  word-break: break-word;
}

.pending-row-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.pending-action {
  flex: 1;
  padding: 9px 6px;
  border: 1px solid var(--grey-3);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, color .12s;
}

.pending-action:disabled { opacity: .5; cursor: not-allowed; }
.pending-action:active   { background: var(--grey-2); }

.pending-action--retry {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.pending-action--retry:active { background: var(--brand-dark); }

.pending-action--discard   { color: var(--red); }
.pending-action--download  { flex: 0 0 40px; font-size: 15px; }

.pending-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-5);
  text-align: center;
  padding: 40px;
  font-size: 15px;
  line-height: 1.6;
}

/* ── Update-available banner ── */
/* Sticky pill near the top, below the status bar. Tap "Reload" to apply
   the new version. Hidden via .hidden until a waiting SW is detected. */
#update-banner {
  position: fixed;
  /* Sits just below the sticky status bar — uses --status-bar-h so we
     don't have a 56 magic number drifting out of sync with the bar's
     actual height. Add a 6px breathing gap. */
  top: calc(var(--status-bar-h) + env(safe-area-inset-top) + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 16px;
  background: var(--brand);
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(80,20,20,.22);
  font-size: 13px;
  font-weight: 500;
  z-index: 150;
  max-width: calc(100vw - 32px);
}

.update-banner-msg { white-space: nowrap; }

.update-banner-btn {
  padding: 5px 12px;
  background: #fff;
  color: var(--brand);
  border: none;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.update-banner-btn:disabled { opacity: .7; cursor: wait; }

/* ── Video processing overlay ── */
/* Shown while FileReader chews on the captured video. Blocks the page so
   the operative can't tap Next before the read completes — the silent
   FileReader hang on iOS Safari was leaving operatives at the review
   screen with no video attached. */
#video-processing-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 18, 18, 0.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.video-processing-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.video-processing-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--grey-3);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}

/* ── Hidden util ── */
.hidden { display: none !important; }