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

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

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

.app-header {
  flex: 0 0 auto;
  background: var(--colour-navy);
  color: #fff;
  padding: 10px 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 {
  font-size: 12px;
  color: #A9BBD2;
  font-weight: 400;
}

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

.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 ---------- */

.circuit-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.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;
}

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

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

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