/* ============================================================
   Northgate DRA — design system
   Brand: Blue #0057B8 | Green #509E2F | Gold #FFC000
          Orange #F47E42 | Red #B4292E | Ink #1A1A1A
   ============================================================ */

:root {
  --blue: #0057B8;
  --blue-dark: #00458F;
  --blue-tint: #E8F0FA;
  --green: #509E2F;
  --green-dark: #3F7D25;
  --green-tint: #EDF6E8;
  --gold: #FFC000;
  --gold-tint: #FFF6DC;
  --orange: #F47E42;
  --orange-tint: #FDEEE5;
  --red: #B4292E;
  --red-tint: #F9E9EA;
  --ink: #1A1A1A;
  --gray-7: #444444;
  --gray-5: #767676;
  --gray-3: #C9C9C9;
  --gray-2: #E4E4E4;
  --gray-1: #F4F5F7;
  --white: #FFFFFF;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 3px rgba(26, 26, 26, 0.12);
  --shadow-lg: 0 4px 16px rgba(26, 26, 26, 0.16);

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  --tap: 52px; /* minimum tap target */
  --font: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* cool neutrals + extras used by the professional Observations redesign */
  --line: #E4E8EE;
  --line-soft: #EEF1F5;
  --muted: #5F6B78;
  --faint: #8A94A0;
  --canvas: #F4F6F9;
  --gold-ink: #8A6D00;
  --radius-lg: 14px;
  --shadow-card: 0 2px 10px rgba(21, 27, 35, 0.06);

  /* Observation severity — one scale, used by the picker, the list pill, the
     card stripe and the close-out header so a level reads the same everywhere.
     Four levels: High and Urgent used to collapse into one.
     The solids all carry white text and the tints all carry the matching dark
     ink, so both stay legible in sunlight. Note --sev-low is a dark amber, not
     the brand gold: gold-on-white is roughly 1.6:1 and unreadable outdoors. */
  --sev-low:  #8A6D00;  --sev-low-tint:  #FFF6DC;
  --sev-med:  #BD5620;  --sev-med-tint:  #FDEEE5;
  --sev-hi:   #B4292E;  --sev-hi-tint:   #F9E9EA;
  --sev-urg:  #7A1418;  --sev-urg-tint:  #F0D9DA;
}

/* Bundled Noto Sans (offline-first — no CDN) */
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/noto-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/noto-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/noto-sans-700.woff2") format("woff2"); }

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--gray-1);
  font-size: 17px;
  line-height: 1.45;
}

button { font-family: var(--font); cursor: pointer; }
input, textarea, select { font-family: var(--font); }

/* ---------- Header ---------- */
.app-header {
  background: var(--white);
  border-bottom: 4px solid var(--blue);
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  position: sticky;
  top: 0;
  z-index: 50;
}
.app-header .logo { height: 44px; display: block; }

/* The logo doubles as the Home button. It should read as the logo, not as a
   button — no chrome — but it still needs a full tap target and a visible
   focus ring for keyboard use. */
.app-header .logo-btn {
  background: none; border: 0; padding: 0; margin: 0;
  display: flex; align-items: center;
  min-height: var(--tap);
  cursor: pointer;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
}
.app-header .logo-btn:active { opacity: 0.55; }
.app-header .logo-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.logo-fallback {
  font-size: 24px; font-weight: 800; color: var(--blue); letter-spacing: -0.5px;
}
.logo-fallback span { color: var(--green); font-size: 13px; font-weight: 700; font-style: italic; display: block; letter-spacing: 0; }

.menu-btn {
  min-width: var(--tap); min-height: var(--tap);
  background: var(--white); border: 1px solid var(--gray-3);
  border-radius: var(--radius-sm); font-size: 22px; color: var(--gray-7);
}
.menu-btn:active { background: var(--gray-1); }

.menu-panel {
  position: absolute; right: var(--s4); top: 64px;
  background: var(--white); border: 1px solid var(--gray-2);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 230px; overflow: hidden; z-index: 100;
}
.menu-panel button {
  display: block; width: 100%; text-align: left;
  padding: var(--s4); font-size: 16px; background: none; border: none;
  border-bottom: 1px solid var(--gray-1); color: var(--ink);
}
.menu-panel button:last-child { border-bottom: none; }
.menu-panel button:active { background: var(--blue-tint); }
.hidden { display: none !important; }

/* ---------- Layout containers ---------- */
/* overflow-x:clip is the backstop behind the date/time min-width:0 rules. We
   cannot prove on a desktop engine what width iOS gives a native date control
   (Playwright's WebKit says 152px; a real iPhone is wider), so rather than
   trust the measurement, this makes "a child drags the page sideways"
   structurally impossible.
   `clip`, not `hidden`: hidden would create a scroll container and force
   overflow-y to auto, which would trap the combo dropdowns and the menu inside
   the screen. clip leaves vertical overflow escaping normally. */
.screen { max-width: 640px; margin: 0 auto; padding: var(--s4) var(--s4) 120px; overflow-x: clip; }
body[data-layout="grid"] .screen.wide { max-width: 1200px; }

/* ---------- Typography ---------- */
h1 { font-size: 26px; font-weight: 800; margin-bottom: var(--s2); letter-spacing: -0.3px; }
h2 { font-size: 21px; font-weight: 700; }
.sub { color: var(--gray-5); font-size: 16px; margin-bottom: var(--s5); }

.section-bar {
  background: var(--blue); color: var(--white);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 18px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center;
}
.section-bar .hint { font-size: 13px; font-weight: 600; opacity: 0.85; }

.card {
  background: var(--white);
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: var(--s5);
  overflow: hidden;
}
.card-body { padding: var(--s4); }
/* Let combo dropdowns escape the card's overflow:hidden so long job/name lists aren't clipped */
.card:has(.combo-list) { overflow: visible; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap);
  padding: var(--s3) var(--s5);
  border-radius: var(--radius);
  font-size: 18px; font-weight: 700;
  border: none; width: 100%;
  /* Was nowrap, which made long labels ("Fill activity & foreman from that day's
     DRA", "Take photo / choose from library") run outside the button on a phone.
     They wrap onto a second line now instead of spilling. */
  white-space: normal;
  text-align: center;
  overflow-wrap: break-word;
  min-width: 0;
  transition: filter 0.1s, transform 0.05s;
}
.btn:active { transform: scale(0.985); filter: brightness(0.93); }
.btn:disabled { opacity: 0.45; pointer-events: none; }

.btn-primary { background: var(--blue); color: var(--white); }
.btn-green { background: var(--green); color: var(--white); }
.btn-outline { background: var(--white); color: var(--blue); border: 2px solid var(--blue); }
.btn-ghost { background: var(--gray-1); color: var(--gray-7); border: 1px solid var(--gray-3); }
.btn-danger-ghost { background: var(--white); color: var(--red); border: 1px solid var(--red); }
.btn-xl { min-height: 74px; font-size: 20px; }
.btn-sm { min-height: 40px; font-size: 15px; padding: var(--s2) var(--s3); width: auto; font-weight: 600; }

.btn .icon { font-size: 26px; line-height: 1; flex: none; }

/* Inline Lucide icons (see icon() in app.js). Sized in em so one icon suits a
   btn-sm and a btn-xl alike, and coloured by inheritance via currentColor. */
.ic { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -0.18em; }

.btn-row { display: flex; gap: var(--s3); }
.btn-row .btn { flex: 1; min-width: 0; }

/* Loading spinner inside buttons */
.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.35); border-top-color: var(--white);
  animation: spin 0.8s linear infinite; display: inline-block;
}
.spinner.dark { border-color: rgba(0,87,184,0.25); border-top-color: var(--blue); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Inputs ---------- */
/* min-width:0 matters: a .field is often a grid/flex child, and those default to
   min-width:auto — they refuse to shrink below their content's intrinsic width.
   iOS gives date/time inputs a wide intrinsic width, so without this they burst
   out of the column and off the side of the page. */
.field { margin-bottom: var(--s4); min-width: 0; }
.field label {
  display: block; font-size: 15px; font-weight: 700;
  color: var(--gray-7); margin-bottom: var(--s1);
}
/* `email` and `tel` belong in this list. Without them the browser default
   applies — a small, differently-sized box that looks broken next to the
   password field beside it. Caught on the login screen, which was the first
   place in the app to use an email input at all. */
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="password"], .field input[type="datetime-local"], .field input[type="date"], .field input[type="time"], .field input[type="number"], .field textarea, .field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--tap);
  padding: var(--s3);
  font-size: 18px;
  border: 1.5px solid var(--gray-3);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}
/* Safari sizes these from the control's own content unless told otherwise.
   On iOS the width comes from the inner ::-webkit-date-and-time-value box, not
   from the <input> itself — so constraining only the input leaves the real
   culprit untouched. `display:block` matters too: these default to
   inline-block, where width:100% is measured against a line box rather than
   the field. Verified in Playwright's WebKit; iOS Safari renders the same
   pseudo-elements. */
.field input[type="date"], .field input[type="time"], .field input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
}
.field input[type="date"]::-webkit-date-and-time-value,
.field input[type="time"]::-webkit-date-and-time-value,
.field input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  min-width: 0;
  width: 100%;
}
.field input[type="date"]::-webkit-datetime-edit,
.field input[type="time"]::-webkit-datetime-edit,
.field input[type="datetime-local"]::-webkit-datetime-edit {
  min-width: 0;
  overflow: hidden;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.15);
}

/* ---------- Searchable job picker ---------- */
.combo { position: relative; }
.combo > input { padding-right: 44px; }
.combo-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 8px;
  border: none; background: var(--gray-1); color: var(--gray-5);
  font-size: 16px; line-height: 1;
}
.combo-clear:active { background: var(--gray-2); }
.combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--white); border: 1.5px solid var(--gray-3);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  max-height: 320px; overflow-y: auto; z-index: 60;
  -webkit-overflow-scrolling: touch;
}
.combo-item {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 50px; padding: var(--s3);
  border-bottom: 1px solid var(--gray-1);
  font-size: 16px; cursor: pointer;
}
.combo-item:active { background: var(--blue-tint); }
.combo-item .jn { font-weight: 800; color: var(--blue); flex: none; }
.combo-item.combo-other { font-weight: 700; color: var(--blue); background: var(--blue-tint); }
.combo-empty { padding: var(--s3); color: var(--gray-5); font-size: 15px; }

/* ---------- Big checkboxes ---------- */
.check-item {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--tap);
  padding: var(--s3);
  border: 1.5px solid var(--gray-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s2);
  background: var(--white);
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  font-size: 17px;
}
.check-item:active { background: var(--gray-1); }
.check-item .box {
  flex: none; width: 30px; height: 30px;
  border: 2.5px solid var(--gray-3); border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: transparent; background: var(--white);
}
.check-item.checked { border-color: var(--green); background: var(--green-tint); }
.check-item.checked .box { background: var(--green); border-color: var(--green); color: var(--white); }
.check-item.gold.checked { border-color: var(--gold); background: var(--gold-tint); }
.check-item.gold.checked .box { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.ai-flag {
  font-size: 12px; font-weight: 700; color: var(--blue);
  background: var(--blue-tint); border-radius: 5px; padding: 2px 7px; margin-left: auto; flex: none;
}

/* ---------- Hazard cards ---------- */
.hazard-card {
  border: 1.5px solid var(--gray-2);
  border-radius: var(--radius);
  background: var(--white);
  margin-bottom: var(--s3);
  overflow: hidden;
}
.hazard-card.present { border-color: var(--orange); }
.hazard-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3); width: 100%;
}
.hazard-head img { width: 56px; height: 56px; flex: none; }
.hazard-title { flex: 1; min-width: 0; }
.hazard-title .energy {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--orange);
}
.hazard-title .name { font-size: 17px; font-weight: 700; line-height: 1.25; }

.present-toggle { display: flex; gap: var(--s2); flex: none; }
.present-toggle button {
  min-width: 56px; min-height: 48px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--gray-3);
  background: var(--white);
  font-size: 15px; font-weight: 800; color: var(--gray-5);
}
.present-toggle button.on-yes { background: var(--orange); border-color: var(--orange); color: var(--white); }
.present-toggle button.on-no { background: var(--gray-7); border-color: var(--gray-7); color: var(--white); }

.hazard-controls { padding: var(--s3); border-top: 1.5px solid var(--gray-2); background: #FBFBFC; }
.controls-label {
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  margin: var(--s2) 0 var(--s2);
  padding: var(--s1) var(--s2); border-radius: 5px; display: inline-block;
}
.controls-label.direct { background: var(--green); color: var(--white); }
.controls-label.alt { background: var(--gold); color: var(--ink); }

/* ---------- Progress ---------- */
.progress-wrap { margin-bottom: var(--s4); }
.progress-text { font-size: 14px; font-weight: 700; color: var(--gray-5); margin-bottom: var(--s1); }
.progress-track { height: 8px; background: var(--gray-2); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--blue); border-radius: 4px; transition: width 0.25s; }

/* ---------- Sticky footer nav (phone) ---------- */
.step-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--gray-2);
  padding: var(--s3) var(--s4);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  display: flex; gap: var(--s3);
  z-index: 40;
}
.step-nav .btn-back { flex: 0 0 104px; padding-left: var(--s3); padding-right: var(--s3); }
.step-nav .btn-next { flex: 1; }

/* ---------- Signature ---------- */
.sig-block { margin-bottom: var(--s5); }
.sig-canvas-wrap {
  border: 1.5px dashed var(--gray-3);
  border-radius: var(--radius-sm);
  background: var(--white);
  position: relative;
  overflow: hidden;
  touch-action: none;
}
.sig-canvas-wrap.signed { border-style: solid; border-color: var(--green); }
.sig-canvas-wrap canvas { display: block; width: 100%; height: 140px; touch-action: none; }
.sig-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--gray-3); font-size: 16px; font-weight: 600; pointer-events: none;
}
.sig-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s2); }

.crew-block-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s2);
}
.crew-num { font-size: 15px; font-weight: 800; color: var(--blue); }
.sig-block { padding: var(--s4); border: 1.5px solid var(--gray-2); border-radius: var(--radius); margin-bottom: var(--s4); background: var(--white); }

/* ---------- Voice screen ---------- */
.mic-btn {
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--blue); color: var(--white);
  border: none; font-size: 52px;
  display: flex; align-items: center; justify-content: center;
  margin: var(--s6) auto var(--s3);
  box-shadow: var(--shadow-lg);
  transition: transform 0.1s;
}
.mic-btn:active { transform: scale(0.95); }
.mic-btn.listening { background: var(--red); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 41, 46, 0.45); }
  50% { box-shadow: 0 0 0 22px rgba(180, 41, 46, 0); }
}
.mic-status { text-align: center; font-size: 16px; font-weight: 700; color: var(--gray-5); margin-bottom: var(--s4); }
.mic-status.live { color: var(--red); }

/* ---------- Chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.chip {
  min-height: 44px; padding: var(--s2) var(--s4);
  border-radius: 22px; border: 1.5px solid var(--blue);
  background: var(--blue-tint); color: var(--blue);
  font-size: 16px; font-weight: 700;
}
.chip:active { background: var(--blue); color: var(--white); }

/* ---------- Banners & notices ---------- */
.banner {
  border-radius: var(--radius); padding: var(--s3) var(--s4);
  margin-bottom: var(--s4); font-size: 15px; font-weight: 600;
  display: flex; align-items: center; gap: var(--s3);
  border: 1.5px solid transparent;
}
.banner-blue { background: var(--blue-tint); color: var(--blue-dark); border-color: #BAD2EE; }
.banner-gold { background: var(--gold-tint); color: #7A5C00; border-color: #EAD48A; }
.banner-green { background: var(--green-tint); color: var(--green-dark); border-color: #BCDCA9; }
.banner-red { background: var(--red-tint); color: var(--red); border-color: #E4B7B9; }
.banner .btn-sm { margin-left: auto; flex: none; }

/* Quick-check lines are buttons — tap one and the DRA jumps to the step that
   fixes it. Sized for a gloved thumb on a phone, not a mouse pointer. */
.fix-list { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.fix-item {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; min-height: 48px; text-align: left;
  background: rgba(255, 255, 255, .55); color: inherit;
  border: 1.5px solid rgba(0, 0, 0, .12); border-radius: var(--radius);
  padding: var(--s2) var(--s3); margin-top: var(--s2);
  font: inherit; font-weight: 600; cursor: pointer;
}
.fix-item > span:first-child { flex: 1 1 auto; min-width: 0; }
.fix-go { flex: none; font-weight: 800; }
.fix-item:active { background: var(--white); }
.fix-item:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Unfinished-DRA banner: text + Resume/Delete. On a phone all three on one line
   crushes the message, so the buttons drop to their own full-width row. */
.draft-banner { flex-wrap: wrap; }
.draft-banner > span { min-width: 0; }
.draft-acts { display: flex; gap: var(--s2, 8px); margin-left: auto; flex: none; }
.draft-acts .btn-sm { margin-left: 0; }
@media (max-width: 560px) {
  .draft-acts { width: 100%; margin-left: 0; }
  .draft-acts .btn-sm { flex: 1 1 0; }
}

/* Which database is this build talking to? (see dbEnv() in app.js) */
.env-banner { letter-spacing: .01em; }
.env-banner code {
  font-family: ui-monospace, monospace; font-size: 12.5px;
  font-weight: 700; opacity: .85;
}
.env-pill {
  display: inline-block; margin-bottom: var(--s3);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gray-5); background: var(--gray-1);
  border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 2px 10px;
}

/* The DRA's energy-wheel stop-work line. Deliberately its own class: this used
   to be `.stop-note`, the same name the Stop Button module reuses further down
   for a pale-tinted card. That rule overrode the background but not the color,
   so this line rendered white-on-#F9E9EA — a contrast ratio of about 1.07:1,
   i.e. invisible. It is a safety instruction, so it gets solid red and white. */
.dra-stop-note {
  background: var(--red); color: var(--white);
  border-radius: var(--radius); padding: var(--s4);
  font-weight: 700; font-size: 17px; line-height: 1.4; text-align: center;
  margin: var(--s4) 0;
}

/* ---------- Energy wheel review ---------- */
.wheel-list { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 var(--s4); }
.wheel-list span {
  background: var(--blue-tint); color: var(--blue-dark);
  border-radius: 16px; padding: var(--s1) var(--s3); font-size: 14px; font-weight: 700;
}
.big-toggle {
  display: flex; align-items: center; gap: var(--s3);
  border: 2px solid var(--gray-3); border-radius: var(--radius);
  padding: var(--s4); background: var(--white); width: 100%;
  font-size: 18px; font-weight: 700; color: var(--ink); text-align: left;
}
.big-toggle .box {
  flex: none; width: 36px; height: 36px; border: 2.5px solid var(--gray-3);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: transparent;
}
.big-toggle.on { border-color: var(--green); background: var(--green-tint); }
.big-toggle.on .box { background: var(--green); border-color: var(--green); color: var(--white); }

/* ---------- Crew summary ---------- */
.crew-summary {
  background: var(--white); border: 1.5px solid var(--gray-2);
  border-left: 6px solid var(--green);
  border-radius: var(--radius); padding: var(--s4);
  font-size: 17px; line-height: 1.55;
}
.crew-summary h3 { font-size: 17px; color: var(--blue); margin: var(--s3) 0 var(--s1); }
.crew-summary h3:first-child { margin-top: 0; }
.crew-summary ul { padding-left: 22px; margin-bottom: var(--s2); }
.crew-summary li { margin-bottom: 4px; }

/* ---------- Grid layout (iPad / desktop) ---------- */
body[data-layout="grid"] .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: var(--s5);
  align-items: start;
}
body[data-layout="grid"] .form-grid .card { margin-bottom: 0; }
body[data-layout="grid"] .form-grid .span-all { grid-column: 1 / -1; }
body[data-layout="grid"] .step-nav { position: static; border: none; background: none; padding: var(--s5) 0; }
body[data-layout="grid"] .progress-wrap { display: none; }

/* ---------- Admin ---------- */
.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-table th, .admin-table td {
  text-align: left; padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--gray-2);
}
.admin-table th { background: var(--gray-1); font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gray-5); }
.admin-table .inactive { opacity: 0.45; }
.admin-table input { width: 100%; padding: var(--s1) var(--s2); font-size: 15px; border: 1px solid var(--gray-3); border-radius: 5px; }

/* ---------- Done screen ---------- */
.done-mark {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--green); color: var(--white);
  font-size: 52px; display: flex; align-items: center; justify-content: center;
  margin: var(--s8) auto var(--s5);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  background: var(--ink); color: var(--white);
  padding: var(--s3) var(--s5); border-radius: 24px;
  font-size: 15px; font-weight: 600; z-index: 200;
  box-shadow: var(--shadow-lg);
  max-width: 92vw; text-align: center;
  opacity: 0; transition: opacity 0.25s;
  pointer-events: none;
}
.toast.show { opacity: 1; }

/* ---------- "A newer version is ready" bar (see checkForUpdate in error.js) ----------
   Pinned to the bottom rather than pushing the header down: it can appear at
   any moment, including mid-form, and must not move what the user is tapping. */
.update-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 220;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: var(--blue); color: var(--white);
  font-size: 15px; font-weight: 600; line-height: 1.3;
  box-shadow: 0 -2px 12px rgba(26, 26, 26, 0.22);
}
.update-bar .btn {
  flex: none; margin-left: auto; width: auto;
  background: var(--white); color: var(--blue-dark);
  border: 0; font-weight: 800; white-space: nowrap;
}
.update-bar .btn:active { background: var(--blue-tint); }

/* ---------- Home app picker ---------- */
.home-tiles { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s5); }
.home-tile {
  display: flex; align-items: center; gap: var(--s4);
  width: 100%; text-align: left;
  background: var(--white); border: 1.5px solid var(--gray-2);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--s5); min-height: 92px;
  transition: transform 0.05s, border-color 0.1s, box-shadow 0.1s;
}
.home-tile:active { transform: scale(0.99); }
.home-tile:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); }
.home-ic {
  flex: none; width: 60px; height: 60px; border-radius: 14px;
  background: var(--blue-tint); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.home-tile:nth-child(2) .home-ic, .home-tile#tileHeca .home-ic { background: var(--gold-tint); }
.home-tile#tileTbt .home-ic { background: var(--orange-tint); }
.home-title { display: block; font-size: 22px; font-weight: 800; color: var(--ink); }
.home-desc { display: block; font-size: 14px; color: var(--gray-5); font-weight: 600; margin-top: 2px; }

/* ---------- Under construction (Toolbox Talk) ---------- */
.uc-cone { font-size: 92px; line-height: 1; margin: 12px auto 8px; }

/* ---------- Section title (plain, between cards) ---------- */
.section-title {
  font-size: 20px; font-weight: 800; color: var(--ink);
  margin: var(--s5) 0 var(--s2);
}

/* ---------- HECA inspection ---------- */
.heca-card { margin-bottom: var(--s4); }
.heca-card.present { border-color: var(--orange); }
.heca-top {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4);
}
.heca-ic { flex: none; width: 116px; height: 116px; object-fit: contain; }
.heca-top-r { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--s3); }
.heca-name { font-size: 18px; font-weight: 700; line-height: 1.2; }
.heca-top-r .seg { margin-bottom: 0; }
.heca-expand { padding: 0 var(--s4) var(--s4); }

/* Present / Not Present segmented control */
.seg { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.seg-btn {
  flex: 1; min-height: 48px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-3); background: var(--white);
  font-size: 16px; font-weight: 700; color: var(--gray-7);
}
.seg-btn.on-yes { background: var(--orange); border-color: var(--orange); color: var(--white); }
.seg-btn.on-no { background: var(--green); border-color: var(--green); color: var(--white); }

.heca-sub-label { font-size: 14px; font-weight: 800; color: var(--gray-7);
  text-transform: uppercase; letter-spacing: 0.3px; margin: var(--s2) 0 var(--s2); }
.heca-sub-label .hint { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--gray-5); }
.heca-sub-label.alt { color: var(--gold); }
.heca-alt {
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px dashed var(--gray-3);
}
.heca-other { margin-top: var(--s2); }
.heca-item-photo { margin-top: var(--s3); }

/* ---------- Photo field ---------- */
.photo-field { margin-top: var(--s1); }
.photo-add { width: 100%; }
.photo-add input { position: absolute; width: 0; height: 0; opacity: 0; }
.photo-thumb { position: relative; display: flex; flex-direction: column; gap: var(--s2); }
.photo-thumb img {
  width: 100%; max-height: 240px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1.5px solid var(--gray-2);
}
.photo-remove { align-self: flex-start; width: auto; }

/* ---------- AI photo tour / form scan ---------- */
.ai-tour { border-left: 4px solid var(--blue); }
.ai-tour-title { font-weight: 800; font-size: 16px; }
.ai-tour-title span { font-weight: 600; color: var(--gray-5); font-size: 13px; }
.tour-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.tour-thumb { position: relative; width: 88px; height: 88px; }
.tour-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--gray-2); }
.tour-del {
  position: absolute; top: -8px; right: -8px; width: 26px; height: 26px;
  border-radius: 50%; border: none; background: var(--red); color: #fff;
  font-size: 14px; line-height: 1; box-shadow: var(--shadow);
}
.tour-add {
  width: 88px; height: 88px; border: 2px dashed var(--gray-3); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-5); font-size: 34px; background: var(--white); cursor: pointer;
}
.tour-add:active { background: var(--gray-1); }

/* ---------- Multi-page document scanner ---------- */
.scan-pages { display: flex; flex-wrap: wrap; gap: var(--s3); }
.scan-page {
  position: relative; width: 120px; border: 1.5px solid var(--gray-2);
  border-radius: var(--radius-sm); overflow: hidden; background: var(--white);
}
.scan-page img { width: 100%; display: block; aspect-ratio: 8.5/11; object-fit: cover; background: var(--gray-1); }
.scan-page-badge {
  position: absolute; top: 6px; left: 6px; background: var(--blue); color: #fff;
  font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
}
.scan-page-actions { display: flex; gap: 4px; padding: 6px; }
.scan-page-actions .btn { flex: 1; min-height: 34px; font-size: 13px; padding: 4px; }
.scan-add {
  width: 120px; aspect-ratio: 8.5/11.9; border: 2px dashed var(--gray-3);
  border-radius: var(--radius-sm); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: var(--gray-5); background: var(--white); cursor: pointer;
}
.scan-add:active { background: var(--gray-1); }
.scan-add-ic { font-size: 34px; }
.scan-add-lbl { font-size: 13px; font-weight: 700; }

/* Cropper */
.cropper { align-items: center; }
.crop-stage { position: relative; margin: 0 auto; touch-action: none; user-select: none; }
.crop-stage img { border-radius: 6px; }
.crop-lines { position: absolute; inset: 0; pointer-events: none; }
.crop-lines polygon { fill: rgba(0, 87, 184, 0.14); stroke: var(--blue); stroke-width: 2; }
.crop-h {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; background: var(--white); border: 3px solid var(--blue);
  box-shadow: var(--shadow); touch-action: none; cursor: grab;
}
.crop-h:active { cursor: grabbing; background: var(--blue-tint); }
.crop-actions { display: flex; gap: var(--s3); margin-top: var(--s4); width: 100%; max-width: 520px; }
.crop-actions .btn { flex: 1; }

/* ---------- Small screens ---------- */
@media (max-width: 380px) {
  body { font-size: 16px; }
  .app-header .logo { height: 36px; }
  .home-ic { width: 52px; height: 52px; font-size: 28px; }
  .home-title { font-size: 20px; }
  .heca-ic { width: 100px; height: 100px; }
}

/* ================= Safety Status ("Check Your Job") ================= */
.st-weeknav { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 0 6px;
  background:var(--gray-1); border:1px solid var(--gray-2); border-radius:12px; padding:8px 10px; }
.st-week { text-align:center; }
.st-week-lbl { font-weight:800; color:var(--ink); font-size:15px; }
.st-week-sub { color:var(--gray-5); font-size:12.5px; }
.st-loading { color:var(--gray-5); padding:24px 0; text-align:center; }

.st-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:12px 0 18px; }
.st-tile { border:1px solid var(--gray-2); border-left:5px solid var(--gray-3); border-radius:14px;
  background:#fff; padding:12px 13px 13px; display:flex; flex-direction:column; gap:6px; box-shadow:0 1px 2px rgba(16,30,55,.05); }
.st-tile.st-good    { border-left-color:var(--green); }
.st-tile.st-partial { border-left-color:var(--gold); }
.st-tile.st-none    { border-left-color:var(--red); }
.st-tile.st-pending { border-left-color:var(--gray-3); }
.st-top { display:flex; align-items:center; justify-content:space-between; }
.st-ic { font-size:22px; line-height:1; }
.st-badge { font-size:10px; font-weight:800; letter-spacing:.03em; color:var(--gray-5);
  background:var(--gray-1); border:1px solid var(--gray-2); border-radius:999px; padding:2px 8px; white-space:nowrap; }
.st-label { font-weight:700; color:var(--ink); font-size:13.5px; line-height:1.25; }
.st-nums { display:flex; align-items:baseline; gap:5px; }
.st-done { font-size:26px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.st-good .st-done { color:var(--green-dark); }
.st-none .st-done { color:var(--red); }
.st-of { color:var(--gray-5); font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; }
.st-per { color:var(--gray-5); font-size:11px; margin-left:auto; }
.st-track { height:6px; border-radius:4px; background:var(--gray-2); overflow:hidden; }
.st-fill { height:100%; background:var(--green); border-radius:4px; }
.st-partial .st-fill { background:var(--gold); }
.st-none .st-fill { background:var(--red); }
.st-pending .st-fill { background:var(--gray-3); }
.st-note { font-size:11.5px; color:var(--gray-5); line-height:1.35; }

.cc-card { border:1px solid var(--gray-2); border-radius:14px; background:var(--gray-1); padding:14px; margin-bottom:20px; }
/* Heading and button share the top row; the explanatory line drops to its own
   full-width row underneath instead of being squeezed into a narrow column
   beside the button. */
.cc-head { display:flex; align-items:center; justify-content:space-between; gap:6px 10px; margin-bottom:10px; flex-wrap:wrap; }
.cc-head h3 { flex:1 1 auto; min-width:0; margin:0; font-size:15px; color:var(--ink); }
.cc-head > .btn { flex:0 0 auto; width:auto; margin-left:auto; font-size:12.5px; padding:6px 10px; min-height:0; }
.cc-head .sub { flex:1 1 100%; margin:0; font-size:12.5px; }
.cc-days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cc-day { display:flex; flex-direction:column; align-items:center; gap:4px; }
.cc-day label { font-size:11px; font-weight:700; color:var(--gray-7); text-align:center; line-height:1.1; }
.cc-day label span { display:block; font-weight:500; color:var(--gray-5); font-size:10px; }
.cc-input { width:100%; text-align:center; font-size:16px; font-weight:700; padding:8px 2px;
  border:1px solid var(--gray-3); border-radius:8px; background:#fff; }
.cc-input:focus { border-color:var(--blue); outline:none; }
.cc-fallback { font-size:11.5px; color:var(--gray-5); margin:10px 0 0; line-height:1.4; }
@media (max-width:480px){ .cc-days { grid-template-columns:repeat(4,1fr); } }

/* ===== Check Your Job — Project team & goal ===== */
.team-card { border:1px solid var(--gray-2); border-radius:14px; background:#fff; padding:14px; margin-bottom:20px; }
.team-card h3 { margin:0 0 2px; font-size:15px; color:var(--ink); }
.team-card .cc-head .sub { margin:0; font-size:12.5px; }
.tm-row { display:grid; grid-template-columns:1fr auto; grid-template-areas:"name goal" "role goal"; align-items:center; gap:0 10px;
  padding:9px 2px; border-bottom:1px solid var(--gray-1); }
.tm-name { grid-area:name; font-weight:650; color:var(--ink); font-size:14px; }
.tm-role { grid-area:role; color:var(--gray-5); font-size:12px; }
.tm-goal { grid-area:goal; font-weight:800; color:var(--green-dark); font-variant-numeric:tabular-nums; font-size:14px; white-space:nowrap; }
.tm-row.tm-out { opacity:.55; }
.tm-row.tm-out .tm-goal { color:var(--gray-5); font-weight:600; font-size:12px; }
.tm-total { display:flex; align-items:baseline; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:2px solid var(--gray-2); }
.tm-total span { font-weight:700; color:var(--ink); }
.tm-total b { font-size:22px; color:var(--blue); font-variant-numeric:tabular-nums; }
.tm-total b small { font-size:13px; color:var(--gray-5); font-weight:600; }
.tm-edit { display:grid; grid-template-columns:1fr 1.2fr .9fr auto; gap:6px; align-items:center; padding:6px 0; border-bottom:1px solid var(--gray-1); }
.tm-edit input, .tm-edit select { width:100%; padding:8px 8px; border:1px solid var(--gray-3); border-radius:8px; font-size:13px; background:#fff; }
.tm-edit input:focus, .tm-edit select:focus { border-color:var(--blue); outline:none; }
.tm-del { border:1px solid var(--gray-3); background:var(--gray-1); color:var(--red); border-radius:8px; width:34px; height:34px; font-size:14px; cursor:pointer; }
.tm-del:hover { background:var(--red-tint); border-color:var(--red); }
.tm-add { margin-top:6px; border-bottom:none; }
.tm-add input { background:var(--gold-tint); }
@media (max-width:520px){ .tm-edit { grid-template-columns:1fr 1fr; } .tm-edit .tm-del { grid-column:2; justify-self:end; } }

/* ===== Observations ===== */
.obs-status { min-height:0; }

/* ===== Observations — close-out summary (severity pill + meta) ===== */
.om-top { display:flex; align-items:center; gap:8px; }
.om-sev { font-size:11px; font-weight:800; letter-spacing:.03em; padding:2px 8px; border-radius:999px; text-transform:uppercase; background:var(--gray-1); color:var(--gray-5); border:1px solid var(--gray-2); }
/* Urgent is a solid, not a tint — it is the one level that should stop you. */
.om-sev.om-urgent { background:var(--sev-urg); color:#fff; border-color:var(--sev-urg); }
.om-sev.om-high { background:var(--sev-hi-tint); color:var(--sev-hi); border-color:var(--sev-hi); }
.om-sev.om-medium { background:var(--sev-med-tint); color:var(--sev-med); border-color:var(--sev-med); }
.om-sev.om-low { background:var(--sev-low-tint); color:var(--sev-low); border-color:var(--sev-low); }
.om-haz { font-weight:700; color:var(--ink); font-size:14px; }
.om-title { font-size:15px; color:var(--ink); margin:6px 0 4px; font-weight:550; }
.om-meta { font-size:12px; color:var(--gray-5); }
.co-summary { border-left:4px solid var(--orange); }

/* ===== Observations — multi-hazard controls ===== */
.obs-haz-list { display:flex; flex-direction:column; }
.check-item .haz-ic { flex:none; width:34px; height:34px; object-fit:contain; }
.check-item .haz-emoji { display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--gray-5); }
.obs-haz-other { border-style:dashed; }
/* Hazards use an "at-risk" orange checked state; controls keep the standard green */
.check-item.hz.checked { border-color:var(--orange); background:var(--orange-tint); }
.check-item.hz.checked .box { background:var(--orange); border-color:var(--orange); color:var(--white); }
.obs-ctrl-haz { border:1px solid var(--gray-2); border-radius:10px; padding:10px 12px; margin-bottom:10px; background:var(--gray-1); }
.obs-ctrl-hazname { font-weight:800; color:var(--blue); font-size:14px; margin-bottom:6px; }
.obs-ctrl-sub { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-5); margin:8px 0 2px; }
.hint { font-weight:500; color:var(--gray-5); font-size:12px; }

/* ===== Stop Button — Change to Today's Plan ===== */
.stop-note { display:flex; align-items:center; gap:12px; background:var(--red-tint); border:1px solid #eccbcc;
  border-radius:12px; padding:12px 14px; margin-bottom:16px; }
.stop-note .octo { flex:none; width:40px; height:40px; display:block; }
.stop-note b { display:block; font-size:15px; color:var(--ink); line-height:1.3; }
.stop-note span { display:block; font-size:13px; color:var(--gray-5); margin-top:2px; line-height:1.35; }
.sec-note { font-size:13px; color:var(--gray-5); margin:-2px 2px 12px; line-height:1.4; }
.pulled-line { background:var(--blue-tint); border:1px solid #cfe0f5; border-radius:10px; padding:9px 12px;
  margin-top:10px; font-size:13px; font-weight:600; color:var(--blue-dark); }
.new-badge { font-size:10px; font-weight:800; letter-spacing:.04em; color:var(--white); background:var(--blue);
  border-radius:999px; padding:2px 8px; margin-left:auto; flex:none; }
.stop-haz-head span:not(.box):not(.new-badge) { flex:1; }
.stop-haz-ctrls { padding:2px 2px 8px 10px; }
.stop-haz-ctrls:empty { padding:0; }
.stop-add-sig { margin-top:2px; }
.sig-row { position:relative; }
.sig-del-btn { position:absolute; top:2px; right:2px; background:none; border:none; color:var(--gray-5);
  font-size:13px; font-weight:600; padding:4px 8px; cursor:pointer; }
.sig-del-btn:active { color:var(--red); }
/* Stop Button home tile — red octagon icon */
.home-tile#tileStop .home-ic { background:var(--red-tint); }
.home-tile#tileStop .home-ic svg { width:42px; height:42px; display:block; }

/* Incident form v2 — wider on desktop, paired fields side-by-side */
.inc-v2.inc-wide { max-width: 800px; margin-left: auto; margin-right: auto; }

/* Stage D — field-capture vs office-finish mode split */
.inc-mode { margin-bottom: 0; }
.inc-mode .seg-btn { font-weight: 600; }
.seg-btn.on-mode { background: var(--blue); border-color: var(--blue); color: var(--white); }
.inc-mode-hint { color: var(--muted); font-size: 13px; }
.inc-office-note { border: 1px dashed var(--gray-3); background: var(--gray-1); }
.inc-office-note .sub a { color: var(--blue); font-weight: 600; }
.inc-office-note { display: none; }
.inc-v2[data-mode="quick"] .inc-office-tier { display: none; }
.inc-v2[data-mode="quick"] .inc-office-note { display: block; }

/* Home — group headers (Safety / Quality) */
/* Home's only headings since the "Home" title and strapline came off
   (2026-08-07). Sized up from 12px because they now carry the screen on their
   own rather than sitting under an h1. */
.home-group { font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 14px 2px 12px; }
/* Extra air above any group that FOLLOWS a block of tiles, so "Quality" is
   separated from the Safety tiles while the first group still sits close to
   the top. This was `.home-group:first-of-type`, which never matched a thing:
   :first-of-type counts by element type, and the first <div> in .screen is the
   hidden outbox banner, so no .home-group was ever "first". */
.home-tiles + .home-group { margin-top: 26px; }

/* Quality Essentials Walk */
.qw-v2.qw-wide { max-width: 800px; margin-left: auto; margin-right: auto; }
.qw-v2 .qw-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.qw-v2 .qw-row2 > .field { margin-bottom: var(--s3, 12px); }
@media (max-width: 560px) { .qw-v2 .qw-row2 { grid-template-columns: 1fr; } }
.qw-prompt { margin: 0 0 10px; }
.qw-rating { flex-wrap: wrap; }
.qw-rating .qw-rbtn { flex: 1 1 30%; min-width: 92px; font-size: 13px; font-weight: 600; }
.qw-rbtn.on-eff { background: var(--green); border-color: var(--green); color: var(--white); }
.qw-rbtn.on-att { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.qw-rbtn.on-bar { background: var(--red); border-color: var(--red); color: var(--white); }
.qw-ifbad { border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 12px; }
.qw-suggest { background: var(--blue-tint); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 12px; font-size: 13px; color: var(--gray-7); }
.qw-suggest-lbl { font-weight: 700; color: var(--blue-dark); }
.qw-suggest-apply { margin-left: 6px; border: 0; background: var(--blue); color: #fff; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.qw-ess.card { border-left: 3px solid var(--green); }

/* per-walk score card (shows once every picked essential is rated) */
.qw-score { margin-top: 16px; }
.qw-score-card { display: flex; align-items: center; gap: 16px; border-radius: var(--radius); padding: 14px 16px; border: 1px solid var(--line); }
.qw-score-card.good { background: var(--green-tint); }
.qw-score-card.mid  { background: var(--gold-tint); }
.qw-score-card.low  { background: var(--red-tint); }
.qw-score-pct { font-size: 32px; font-weight: 800; line-height: 1; }
.qw-score-card.good .qw-score-pct { color: var(--green-dark); }
.qw-score-card.mid  .qw-score-pct { color: var(--gold-ink); }
.qw-score-card.low  .qw-score-pct { color: var(--red); }
.qw-score-lbl { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.qw-score-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qw-score-chips .qc { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); }
.qw-score-chips .qc.eff { color: var(--green-dark); }
.qw-score-chips .qc.att { color: var(--gold-ink); }
.qw-score-chips .qc.bar { color: var(--red); }
/* minmax(0,1fr), not 1fr: a bare 1fr floors the track at the content's intrinsic
   width, which is what let the date/time inputs push off-screen. */
.inc-v2 .inc-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.inc-v2 .inc-row2 > .field { margin-bottom: var(--s3, 12px); }
@media (max-width: 560px) { .inc-v2 .inc-row2 { grid-template-columns: 1fr; } }

/* Home-tile icons — clean two-color (solid chip + white line icon) */
.home-ic svg.tic { width:32px; height:32px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
.home-tile#tileDra .home-ic { background:var(--blue); }
.home-tile#tileHeca .home-ic { background:var(--orange); }
.home-tile#tileTbt .home-ic { background:var(--green); }
.home-tile#tileObs .home-ic { background:var(--blue-dark); }
.home-tile#tileIncident .home-ic { background:var(--red); }
.home-tile#tileStatus .home-ic { background:var(--green-dark); }
@media (max-width:600px){ .home-ic svg.tic { width:28px; height:28px; } }

/* ===== Observations — professional redesign (scoped under .obs-v2) ===== */
.obs-v2 .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 20px 2px 9px; }
.obs-v2 .eyebrow.first { margin-top: 6px; }

/* type-picker list rows */
.obs-v2 .ob-row { display: flex; align-items: center; gap: 13px; padding: 15px 14px; width: 100%; text-align: left; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: 11px; }
.obs-v2 .ob-row:active { background: var(--gray-1); }
.obs-v2 .ob-row.g { border-left-color: var(--green); }
.obs-v2 .ob-row.o { border-left-color: var(--orange); }
.obs-v2 .ob-row.d { border-left-color: var(--gold); }
.obs-v2 .ob-row.r { border-left-color: var(--red); }
.obs-v2 .ob-chip { width: 40px; height: 40px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; }
.obs-v2 .ob-chip img { width: 22px; height: 22px; display: block; }
.obs-v2 .ob-chip.g { background: var(--green); color: #fff; }
.obs-v2 .ob-chip.o { background: var(--orange); color: #fff; }
.obs-v2 .ob-chip.d { background: var(--gold); color: #4a3a00; }
.obs-v2 .ob-chip.r { background: var(--red); color: #fff; }
.obs-v2 .ob-rtext { flex: 1; min-width: 0; }
.obs-v2 .ob-rtext b { font-size: 16px; font-weight: 700; color: var(--ink); display: block; }
.obs-v2 .ob-rtext span { font-size: 13px; color: var(--muted); display: block; margin-top: 1px; }
.obs-v2 .ob-chev { color: var(--faint); flex: none; display: flex; }
.obs-v2 .ob-chev img { width: 18px; height: 18px; display: block; }

/* form heading — carries the same chip the picker row showed, a little smaller
   so it sits on the type-1 line rather than towering over it */
.obs-v2 .ob-form-title { display: flex; align-items: center; gap: 10px; }
.obs-v2 .ob-form-title .ob-chip { width: 34px; height: 34px; border-radius: 10px; }
.obs-v2 .ob-form-title .ob-chip img { width: 19px; height: 19px; }

/* assigned card */
.obs-v2 .ob-assigned { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius-lg); padding: 15px 14px; box-shadow: var(--shadow-card); margin-bottom: 4px; }
.obs-v2 .ob-assigned:active { background: var(--gray-1); }
.obs-v2 .ob-assigned .ob-chip { background: var(--blue-tint); color: var(--blue); }
.obs-v2 .ob-count { flex: none; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.obs-v2 .ob-count:empty { display: none; }

/* form labels + inputs refined */
.obs-v2 .field label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.obs-v2 .field input[type="text"], .obs-v2 .field input[type="date"], .obs-v2 .field textarea, .obs-v2 .field select, .obs-v2 .combo > input { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.obs-v2 .heca-sub-label { color: var(--muted); }

/* severity segmented control */
.obs-v2 .ob-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.obs-v2 .ob-seg button { min-height: 46px; text-align: center; font-size: 13.5px; font-weight: 600; padding: 9px 4px; border-radius: 9px; border: 1px solid var(--line); background: var(--white); color: var(--muted); }
/* The picked severity carries its own colour rather than a blanket red — the
   point of the control is to tell the four levels apart. Keyed off the
   data-sev the button already renders with. */
.obs-v2 .ob-seg button.on { color: #fff; font-weight: 800; }
.obs-v2 .ob-seg button.on[data-sev="Low"]    { background: var(--sev-low); border-color: var(--sev-low); }
.obs-v2 .ob-seg button.on[data-sev="Medium"] { background: var(--sev-med); border-color: var(--sev-med); }
.obs-v2 .ob-seg button.on[data-sev="High"]   { background: var(--sev-hi);  border-color: var(--sev-hi); }
.obs-v2 .ob-seg button.on[data-sev="Urgent"] { background: var(--sev-urg); border-color: var(--sev-urg); }
/* Unpicked buttons hint at their level so the scale reads before you tap. */
.obs-v2 .ob-seg button:not(.on)[data-sev="Low"]    { color: var(--sev-low); }
.obs-v2 .ob-seg button:not(.on)[data-sev="Medium"] { color: var(--sev-med); }
.obs-v2 .ob-seg button:not(.on)[data-sev="High"]   { color: var(--sev-hi); }
.obs-v2 .ob-seg button:not(.on)[data-sev="Urgent"] { color: var(--sev-urg); font-weight: 700; }

/* assigned-to-me list cards */
.obs-v2 .ob-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 14px; margin-bottom: 12px; display: flex; gap: 12px; align-items: stretch; width: 100%; text-align: left; }
.obs-v2 .ob-card:active { background: var(--gray-1); }
.obs-v2 .ob-stripe { width: 4px; align-self: stretch; border-radius: 4px; flex: none; background: var(--gray-3); }
.obs-v2 .ob-stripe.urg { background: var(--sev-urg); }
.obs-v2 .ob-stripe.hi { background: var(--sev-hi); }
.obs-v2 .ob-stripe.med { background: var(--sev-med); }
.obs-v2 .ob-stripe.low { background: var(--sev-low); }
.obs-v2 .ob-cbody { flex: 1; min-width: 0; }
.obs-v2 .ob-cardtop { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.obs-v2 .ob-pill { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--gray-1); color: var(--gray-5); }
.obs-v2 .ob-pill.urg { background: var(--sev-urg); color: #fff; }
.obs-v2 .ob-pill.hi { background: var(--sev-hi-tint); color: var(--sev-hi); }
.obs-v2 .ob-pill.med { background: var(--sev-med-tint); color: var(--sev-med); }
.obs-v2 .ob-pill.low { background: var(--sev-low-tint); color: var(--sev-low); }
.obs-v2 .ob-cardhaz { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.obs-v2 .ob-cardtitle { font-size: 15px; color: var(--ink); font-weight: 600; margin: 0 0 5px; line-height: 1.35; }
.obs-v2 .ob-cardmeta { font-size: 12px; color: var(--faint); }
.obs-v2 .ob-cardmeta b { font-weight: 600; color: var(--muted); }
.obs-v2 .ob-cchev { align-self: center; color: var(--faint); display: flex; }
.obs-v2 .ob-cchev img { width: 18px; height: 18px; display: block; }

/* refined checkboxes for hazard + control rows (match the clean look, not the old big box) */
.obs-v2 .check-item { min-height: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; font-size: 14px; gap: 12px; }
.obs-v2 .check-item .box { width: 21px; height: 21px; border-width: 2px; border-radius: 6px; font-size: 13px; }
.obs-v2 .check-item .haz-ic { width: 30px; height: 30px; }
.obs-v2 .obs-ctrl-sub { color: var(--muted); }