/* Dorset Rewires EICR capture app - phone first.
   Design tokens mirror public/assets/css/styles.css so the app feels like the business.
   Everything is sized for a thumb in a loft, not a mouse on a desk. */

:root {
  --colour-navy: #0F2540;
  --colour-navy-deep: #08182C;
  --colour-amber: #F4A300;
  --colour-amber-soft: #FFF8EC;
  --colour-green: #1FA45A;
  --colour-danger: #C0392B;
  --colour-text: #22293A;
  --colour-text-soft: #4A5468;
  --colour-text-faint: #7E8EA8;
  --colour-background: #FCFCFA;
  --colour-surface: #FFFFFF;
  --colour-border: #E3E7ED;

  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-pill: 999px;

  /* One thumb target. Never make anything tappable smaller than this. */
  --tap-target-minimum: 56px;

  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* touch-action manipulation stops the double-tap-to-zoom gesture (annoying when
   tapping Back/Next fast) while keeping scroll and pinch-zoom. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-stack);
  color: var(--colour-text);
  background: var(--colour-background);
  font-size: 17px;
  line-height: 1.45;
}

/* ---------- App frame: fixed header, scrolling slide, fixed footer ---------- */

.app-frame {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

/* Desktop: the app is phone-first, so on a wide screen cap it to a centred
   phone-ish column instead of stretching edge to edge (Pete, 2026-07-28). */
@media (min-width: 900px) {
  .app-frame {
    max-width: 560px;
    margin: 0 auto;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    border-right: 1px solid rgba(0, 0, 0, 0.12);
  }
}

.app-header {
  flex: 0 0 auto;
  background: var(--colour-navy);
  color: #fff;
  /* Installed on the home screen the app draws UNDER the iPhone status bar, so
     pad the top by the safe area to clear the clock, battery and signal icons.
     The navy fills behind them, which looks right. */
  padding: calc(10px + env(safe-area-inset-top)) 14px 0;
}

.app-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.app-header-title {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header-subtitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: #A9BBD2;
  font-weight: 400;
}

#header-job-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Amber page counter, always visible. Lets Pete say "page 34 needs a change"
   without scrolling to find where he is. Also shows how far through he is. */
.header-page-number {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--colour-amber);
}

.header-button {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.header-button:active { background: rgba(255, 255, 255, 0.25); }

.progress-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  margin: 8px -14px 0;
}

.progress-fill {
  height: 100%;
  background: var(--colour-amber);
  width: 0;
  transition: width 0.18s ease-out;
}

/* ---------- The slide ---------- */

.slide-area {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 18px 28px;
}

.slide-step {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-amber);
  margin-bottom: 6px;
}

.slide-question {
  font-size: 27px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--colour-navy);
}

.slide-note {
  font-size: 14px;
  color: var(--colour-text-soft);
  margin: 0 0 20px;
}

.slide-note.is-reg {
  font-size: 12px;
  color: var(--colour-text-faint);
}

/* ---------- Fields ---------- */

.field-block { margin-bottom: 22px; }

.field-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--colour-text);
}

.field-unit {
  font-weight: 400;
  color: var(--colour-text-faint);
}

.field-hint {
  font-size: 13px;
  color: var(--colour-text-faint);
  margin: 6px 0 0;
}

.field-input,
.field-textarea {
  width: 100%;
  min-height: var(--tap-target-minimum);
  padding: 14px 16px;
  font-size: 19px;
  font-family: inherit;
  color: var(--colour-text);
  background: var(--colour-surface);
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-medium);
}

.field-textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.4;
}

.field-input:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--colour-amber);
  box-shadow: 0 0 0 4px var(--colour-amber-soft);
}

/* Big tappable answers. These replace dropdowns everywhere - a native select
   on a phone is a fiddly wheel, and this is a gloved-hand job. */
.choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.choice-button {
  min-height: var(--tap-target-minimum);
  padding: 15px 18px;
  text-align: left;
  font-size: 18px;
  font-family: inherit;
  font-weight: 500;
  color: var(--colour-text);
  background: var(--colour-surface);
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-medium);
  cursor: pointer;
}

.choice-button:active { background: var(--colour-amber-soft); }

.choice-button.is-selected {
  border-color: var(--colour-navy);
  background: var(--colour-navy);
  color: #fff;
}

.choice-code {
  display: inline-block;
  min-width: 30px;
  font-weight: 700;
  color: var(--colour-amber);
}

.choice-button.is-selected .choice-code { color: var(--colour-amber); }

/* ---------- Footer navigation ---------- */

.app-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--colour-surface);
  border-top: 1px solid var(--colour-border);
}

.footer-nav {
  display: flex;
  gap: 10px;
}

/* The add-observation button now lives in the footer, below Back/Next, so it
   never floats over the answer buttons on a short slide. */
.observation-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: var(--colour-danger);
  border: 0;
  border-radius: var(--radius-medium);
  cursor: pointer;
}

.observation-bar:active { background: #a5301f; }

.navigation-button {
  min-height: var(--tap-target-minimum);
  border: 0;
  border-radius: var(--radius-medium);
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.navigation-button.is-back {
  flex: 0 0 34%;
  background: #EDF0F5;
  color: var(--colour-text-soft);
}

.navigation-button.is-next {
  flex: 1 1 auto;
  background: var(--colour-navy);
  color: #fff;
}

.navigation-button:disabled { opacity: 0.4; }

/* ---------- Overview sheet ---------- */

.overview-sheet {
  position: fixed;
  inset: 0;
  background: var(--colour-background);
  z-index: 20;
  display: flex;
  flex-direction: column;
}

.overview-sheet[hidden] { display: none; }

.overview-body { flex: 1 1 auto; overflow-y: auto; padding: 18px; }

.overview-deck-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-text-faint);
  margin: 22px 0 10px;
}

.overview-deck-title:first-child { margin-top: 0; }

.overview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--tap-target-minimum);
  padding: 12px 14px;
  margin-bottom: 8px;
  text-align: left;
  font-size: 16px;
  font-family: inherit;
  color: var(--colour-text);
  background: var(--colour-surface);
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-medium);
  cursor: pointer;
}

.overview-item.is-current { border-color: var(--colour-amber); }

.overview-status {
  flex: 0 0 auto;
  width: 24px;
  font-weight: 700;
  color: var(--colour-green);
}

.overview-status.is-empty { color: var(--colour-border); }

.deck-locked {
  font-size: 13px;
  color: var(--colour-text-faint);
  padding: 10px 14px;
  background: #F4F6FA;
  border-radius: var(--radius-medium);
  margin-bottom: 8px;
}

/* ---------- Client picker ---------- */

.client-search {
  width: 100%;
  min-height: var(--tap-target-minimum);
  padding: 14px 16px;
  font-size: 18px;
  font-family: inherit;
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-medium);
  margin-bottom: 12px;
}

.client-result {
  display: block;
  width: 100%;
  min-height: var(--tap-target-minimum);
  padding: 12px 14px;
  margin-bottom: 8px;
  text-align: left;
  font-family: inherit;
  background: var(--colour-surface);
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-medium);
  cursor: pointer;
}

.client-result-name { font-size: 17px; font-weight: 600; }
.client-result-detail { font-size: 14px; color: var(--colour-text-faint); }

.picker-message {
  font-size: 14px;
  color: var(--colour-text-soft);
  padding: 14px;
  background: var(--colour-amber-soft);
  border-radius: var(--radius-medium);
}

/* ---------- Circuits ---------- */

/* Wraps instead of side-scrolling - on a phone, off-screen chips are invisible
   chips. A 21-circuit board just gets a taller block. */
.board-strip,
.circuit-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.board-chip,
.circuit-chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  background: var(--colour-surface);
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
}

.board-chip.is-current,
.circuit-chip.is-current {
  background: var(--colour-navy);
  border-color: var(--colour-navy);
  color: #fff;
}

/* Test-by-meter tab bar. One tab per test type; scrolls sideways on a narrow
   phone. Tap a tab and the whole board screen switches to that test. */
/* Wraps instead of side-scrolling, so no test tab ever hides off-screen. */
.mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 8px;
}

.mode-tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--colour-text-soft);
  background: var(--colour-surface);
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
}

.mode-tab.is-current {
  background: var(--colour-amber-soft);
  border-color: var(--colour-amber);
  color: var(--colour-navy);
}

/* Board setup wizard: Back and Next sit side by side, not full width each. */
.wizard-nav { display: flex; gap: 10px; }
.wizard-nav .action-button { flex: 1; margin-top: 12px; }
.wizard-nav .action-button:disabled { opacity: 0.45; cursor: default; }

/* One circuit's row on a batch test screen: its label, then the reading box. */
.batch-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--colour-border);
}

.batch-row-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--colour-navy);
  margin-bottom: 8px;
}

.batch-row .field-block {
  margin-bottom: 8px;
}

.field-group-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-text-faint);
  margin: 26px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--colour-border);
}

.action-button {
  width: 100%;
  min-height: var(--tap-target-minimum);
  margin-top: 12px;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  color: var(--colour-navy);
  background: var(--colour-amber-soft);
  border: 2px solid var(--colour-amber);
  border-radius: var(--radius-medium);
  cursor: pointer;
}

.action-button.is-quiet {
  color: var(--colour-text-soft);
  background: #EDF0F5;
  border-color: var(--colour-border);
}

/* A measured Zs above the maximum permitted is a FAIL. The app knows the OCPD,
   so it can say so on site - no tester does this for you. */
.zs-verdict {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-medium);
  font-size: 15px;
  font-weight: 600;
}

.zs-verdict.is-pass { background: #E8F6EE; color: #14733D; }
.zs-verdict.is-fail { background: #FBEAE7; color: var(--colour-danger); }

.save-flash {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  padding: 8px 16px;
  font-size: 13px;
  color: #fff;
  background: rgba(15, 37, 64, 0.9);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.save-flash.is-visible { opacity: 1; }

/* ---------- Inspection outcomes ----------
   Eight possible answers per item, 66 items. A list of eight full-width
   buttons would mean scrolling on every single one, so they go in a grid
   that fits one screen. Colour carries the meaning at a glance: red is
   dangerous, amber is advisory, grey is "did not apply". */

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.outcome-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  padding: 10px 14px;
  text-align: left;
  font-family: inherit;
  background: var(--colour-surface);
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-medium);
  cursor: pointer;
}

.outcome-symbol { font-size: 20px; font-weight: 700; color: var(--colour-navy); }
.outcome-caption { font-size: 12px; color: var(--colour-text-faint); line-height: 1.2; }

.outcome-button.is-c1 .outcome-symbol,
.outcome-button.is-c2 .outcome-symbol { color: var(--colour-danger); }
.outcome-button.is-c3 .outcome-symbol,
.outcome-button.is-fi .outcome-symbol { color: #B57200; }
.outcome-button.is-acceptable .outcome-symbol { color: var(--colour-green); }

.outcome-button.is-selected {
  border-color: var(--colour-navy);
  background: var(--colour-navy);
}
.outcome-button.is-selected .outcome-symbol,
.outcome-button.is-selected .outcome-caption { color: #fff; }

.outcome-button.is-c1.is-selected,
.outcome-button.is-c2.is-selected {
  background: var(--colour-danger);
  border-color: var(--colour-danger);
}
.outcome-button.is-acceptable.is-selected {
  background: var(--colour-green);
  border-color: var(--colour-green);
}

/* ---------- Inspection checklist ---------- */

/* One tappable line per item. The whole row opens its outcome buttons. */
.checklist-item { margin-bottom: 8px; }

.checklist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--tap-target-minimum);
  padding: 12px 14px;
  text-align: left;
  font-family: inherit;
  background: var(--colour-surface);
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-medium);
  cursor: pointer;
}

.checklist-row.is-open {
  border-color: var(--colour-navy);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.checklist-row-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--colour-navy);
  line-height: 1.3;
}

/* The status badge on the right: green tick when acceptable, red for C1/C2,
   amber for C3/FI, a faint prompt when nothing is set yet. */
.checklist-status {
  flex: 0 0 auto;
  min-width: 40px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border-radius: var(--radius-pill, 999px);
  background: #EDF0F5;
  color: var(--colour-text-soft);
}

.checklist-status.is-unset { background: var(--colour-amber-soft); color: var(--colour-amber); }
.checklist-status.is-acceptable { background: #E8F6EE; color: var(--colour-green); }
.checklist-status.is-c1,
.checklist-status.is-c2 { background: #FBEAE7; color: var(--colour-danger); }
.checklist-status.is-c3,
.checklist-status.is-fi { background: #FBF1DC; color: #B57200; }

.checklist-item .outcome-grid,
.checklist-item .sub-item-list { margin-top: 10px; }

.sub-item-list {
  margin: 0 0 18px;
  padding-left: 20px;
  font-size: 15px;
  color: var(--colour-text-soft);
}

.sub-item-list li { margin-bottom: 6px; }

/* ---------- Observations ---------- */

.observation-editor { margin-top: 8px; }

.observation-card {
  padding: 14px;
  margin-bottom: 14px;
  background: var(--colour-surface);
  border: 2px solid var(--colour-border);
  border-left-width: 6px;
  border-radius: var(--radius-medium);
}

.observation-card.is-c1,
.observation-card.is-c2 { border-left-color: var(--colour-danger); }
.observation-card.is-c3,
.observation-card.is-fi { border-left-color: var(--colour-amber); }

.observation-code-row { display: flex; gap: 8px; margin-bottom: 12px; }

.code-pill {
  flex: 1 1 auto;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: var(--colour-text-soft);
  background: #EDF0F5;
  border: 2px solid transparent;
  border-radius: var(--radius-small);
  cursor: pointer;
}

.code-pill.is-selected { color: #fff; background: var(--colour-navy); }
.code-pill.is-c1.is-selected,
.code-pill.is-c2.is-selected { background: var(--colour-danger); }
.code-pill.is-c3.is-selected,
.code-pill.is-fi.is-selected { background: #B57200; }

/* ---------- Photos ---------- */

.photo-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }

.photo-thumbnail {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-small);
  overflow: hidden;
  border: 2px solid var(--colour-border);
}

.photo-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 26px;
  height: 26px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: rgba(15, 37, 64, 0.85);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* ---------- Signature ---------- */

.signature-pad {
  width: 100%;
  height: 180px;
  background: var(--colour-surface);
  border: 2px dashed var(--colour-border);
  border-radius: var(--radius-medium);
  touch-action: none;
}

/* ---------- Finish ---------- */

.assessment-banner {
  padding: 20px;
  margin-bottom: 14px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  border-radius: var(--radius-medium);
}

.assessment-banner.is-satisfactory { background: var(--colour-green); }
.assessment-banner.is-unsatisfactory { background: var(--colour-danger); }

.client-result.is-current { border-color: var(--colour-amber); }

/* ---------- Quick-pick chips ----------
   Tap the most likely answer instead of typing. The text box stays below for
   anything the chips do not cover. This is the thumbs-first ADHD win. */
.quick-pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.quick-pick {
  min-height: 44px;
  padding: 10px 16px;
  /* Buttons centre text by default - a long two-line chip then sits centred
     next to left-aligned labels. Left keeps every slide reading one way. */
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  color: var(--colour-navy);
  background: var(--colour-amber-soft);
  border: 2px solid var(--colour-amber-line, #FCE6B6);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.quick-pick:active { background: #FDEFCF; }

.quick-pick.is-selected {
  color: #fff;
  background: var(--colour-navy);
  border-color: var(--colour-navy);
}

/* ---------- Floating "+ Note" button ----------
   Spot a fault anywhere in the flow, capture it there and then without losing
   your place. Sits above the footer, clear of the thumb's Next/Back reach. */
.floating-observation {
  position: fixed;
  right: 16px;
  bottom: calc(72px + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: var(--colour-danger);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(192, 57, 43, 0.4);
  cursor: pointer;
  z-index: 15;
}

.floating-observation svg { flex: 0 0 auto; }

.floating-observation:active { background: #a5301f; }

/* ---------- Home-screen install tip (page 1, hidden once installed) ---------- */
.install-tip {
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--colour-navy);
  background: var(--colour-amber-soft);
  border: 2px solid var(--colour-amber);
  border-radius: var(--radius-medium);
}

/* ---------- Field help accordion ("How do I work this out?") ---------- */
.field-help { margin-top: 10px; }

.field-help-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--colour-navy);
  background: none;
  border: 0;
  cursor: pointer;
}

.field-help-toggle::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--colour-amber);
  border-radius: 50%;
}

.field-help-toggle.is-open { color: var(--colour-amber); }

.field-help-body {
  margin-top: 6px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--colour-text-soft);
  background: var(--colour-amber-soft);
  border-radius: var(--radius-medium);
}

.field-help-body p { margin: 0 0 8px; }
.field-help-body p:last-child { margin-bottom: 0; }
.field-help-body strong { color: var(--colour-navy); }

/* ---------- Update banner (appears after a new version deploys) ---------- */
.update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  min-height: 44px;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: var(--colour-navy);
  background: var(--colour-amber);
  border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.update-banner[hidden] { display: none; }

/* ---------- Photo lightbox (tap a thumbnail to see it big, pinch to zoom) ---------- */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overflow: hidden;
}

.photo-lightbox img {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.photo-lightbox-close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  font-size: 22px;
  font-weight: 700;
  font-family: inherit;
  color: var(--colour-navy);
  background: var(--colour-amber);
  cursor: pointer;
}

/* ---------- Board photo reader (proposal review panel on the Boards page) ---------- */
.board-ocr-panel {
  border: 1px solid var(--colour-amber);
  border-radius: 10px;
  padding: 14px;
  margin: 0 0 18px;
  background: rgba(244, 163, 0, 0.06);
}

.board-ocr-row { margin-bottom: 12px; }

.ocr-confidence {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ocr-confidence.is-high { background: rgba(31, 164, 90, 0.18); color: #1FA45A; }
.ocr-confidence.is-medium { background: rgba(244, 163, 0, 0.2); color: #B47500; }
.ocr-confidence.is-low { background: rgba(226, 85, 85, 0.16); color: #E25555; }
.ocr-confidence.is-unknown { background: rgba(226, 85, 85, 0.16); color: #E25555; }

/* ---------- PDF field copy (print-styled report view; Save as PDF in the print dialog) ---------- */
.print-report { display: none; }

@media print {
  body > *:not(.print-report) { display: none !important; }
  body { background: #ffffff; }
  .print-report {
    display: block;
    color: #111111;
    background: #ffffff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11pt;
    line-height: 1.4;
    padding: 0;
  }
  .print-report h1 { font-size: 17pt; margin: 0 0 6pt; }
  .print-report h2 {
    font-size: 12pt; margin: 14pt 0 4pt;
    border-bottom: 1.5pt solid #111111; padding-bottom: 2pt;
  }
  .print-report .print-field-copy-note {
    border: 1pt solid #111111; padding: 6pt 8pt; font-size: 9pt; margin: 0 0 8pt;
  }
  .print-report .print-assessment { font-size: 13pt; margin: 0 0 6pt; }
  .print-report table { width: 100%; border-collapse: collapse; page-break-inside: auto; }
  .print-report tr { page-break-inside: avoid; }
  .print-report td, .print-report th {
    border: 0.5pt solid #555555; padding: 2pt 5pt; text-align: left;
    font-size: 9pt; vertical-align: top;
  }
  .print-report .print-pairs td:first-child { width: 45%; color: #333333; }
  .print-report th { background: #eeeeee; font-weight: 700; }
  .print-report .print-code { font-weight: 700; white-space: nowrap; }
}

/* ---------- The in-app AI assistant chat ---------- */

.assistant-chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--colour-background);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.assistant-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--colour-navy);
  color: #FFFFFF;
  font-weight: 700;
}

.assistant-chat-close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  font-family: inherit;
}

.assistant-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.assistant-chat-bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: var(--radius-medium);
  font-size: 16px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.assistant-chat-bubble.is-user {
  align-self: flex-end;
  background: var(--colour-navy);
  color: #FFFFFF;
}

.assistant-chat-bubble.is-assistant {
  align-self: flex-start;
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
}

.assistant-chat-bubble.is-app {
  align-self: center;
  background: var(--colour-amber-soft);
  border: 1px solid var(--colour-amber);
  color: var(--colour-text-soft);
  font-size: 14px;
}

.assistant-chat-bubble.is-thinking { color: var(--colour-text-faint); font-style: italic; }

.assistant-chat-photo-note { color: var(--colour-text-faint); font-size: 13px; }

.assistant-chat-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px;
  border-top: 1px solid var(--colour-border);
  background: var(--colour-surface);
}

.assistant-chat-photo-button {
  min-height: var(--tap-target-minimum);
  padding: 0 14px;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-medium);
  background: var(--colour-surface);
  font-family: inherit;
  font-size: 15px;
}

.assistant-chat-input {
  flex: 1;
  min-height: var(--tap-target-minimum);
  max-height: 120px;
  padding: 14px;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-medium);
  font-family: inherit;
  font-size: 16px;
  resize: none;
}

.assistant-chat-send {
  min-height: var(--tap-target-minimum);
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-medium);
  background: var(--colour-amber);
  color: var(--colour-navy-deep);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
}

.assistant-chat-telegram-fallback {
  border: 0;
  background: none;
  color: var(--colour-text-faint);
  font-family: inherit;
  font-size: 13px;
  text-decoration: underline;
  padding: 8px 0 12px;
}

/* Rewire survey capture (2026-08-16) */
.counter-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.counter-row span:first-child { flex: 1; }
.counter-button { width: 44px; height: 40px; font-size: 20px; border-radius: 10px;
  border: 1px solid var(--line, #ccc); background: var(--card, #fff); }
.counter-value { min-width: 28px; text-align: center; font-weight: 700; }
.field-row { display: flex; gap: 8px; }
.field-row input { flex: 1; }