/* ============================================================
   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;
  /* Home-tile chips for the tools outside the brand palette (styles keyed on data-key below). */
  --teal: #0F8B8D;
  --purple: #6A4CBE;
  --slate: #4F6D86;
  --concrete: #6E7681;
  --asphalt: #3A3A3A;
  --amber: #C77800;
  --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; }
/* On the sign-in screen the logo is branding, not a button (auth.js
   setHeaderNav). Full opacity and a normal cursor: a greyed-out logo reads as
   "this page failed to load", which is the opposite of the message. */
.app-header .logo-btn-inert,
.app-header .logo-btn-inert:active { opacity: 1; cursor: default; }
.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 {
  display: flex; align-items: center; justify-content: center;
  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 > .ic { width: 22px; height: 22px; }
.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;
}
/* flex, not block, so the Lucide icon and the label sit on one baseline. The
   icon is gray-5 against ink text: it labels the row, it isn't the row. */
.menu-panel button {
  display: flex; align-items: center; gap: 12px; 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 > .ic { flex: none; width: 19px; height: 19px; color: var(--gray-5); }
.menu-panel button:active > .ic { color: var(--blue); }
.menu-panel button:last-child { border-bottom: none; }
.menu-panel button:active { background: var(--blue-tint); }
.hidden { display: none !important; }

/* The current screen's title, next to the logo — PZ.setHeaderTitle (app.js),
   filled in by the screen itself. Same "logo | divider | title" look as
   admin/wf-core.js's Job Resources header, so both consoles read the same
   way: .hdr-vr copies admin.css's .wf-hdr-vr exactly (1px, 24px, #E4E4E4),
   and .hdr-title copies admin.css's `.app-header.wf-hdr-active .admin-tag`
   font rule exactly (16px / 600 / --ink) rather than inventing its own.
   Desktop only: a phone-width header has no room for a title next to a
   ~165px wordmark logo, so below 1100px both stay display: none and the
   screen's own in-page h1 carries the title instead, hidden above 1100px
   by each screen's own "hide above desktop breakpoint" class (.qty-h1-narrow).
   flex: 1 1 auto (not the header's justify-content: space-between) is what
   keeps the title hugging the divider rather than floating in the middle of
   the row — it claims all the space between logo and job chip / menu
   button, and its own text sits at the left edge of that space. The job
   chip is unaffected either way: it is position: absolute, centred on the
   header itself, not a sibling in this flex flow. */
.hdr-vr {
  display: none;
  width: 1px;
  height: 24px;
  background: #E4E4E4;
  flex: none;
}
.hdr-title {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1100px) {
  .hdr-title { display: block; }
  /* Only when there is actually a title to divide from the logo — every
     screen that never calls PZ.setHeaderTitle leaves #hdrTitle empty, and
     an empty title should mean no divider either. */
  .hdr-vr:has(+ #hdrTitle:not(:empty)) { display: block; }
}

/* ---------- 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; }
/* Grayed like :disabled but still takes a tap — the DRA's Next uses it to say what the step is waiting for. */
.btn.is-off { opacity: 0.45; }

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

/* The em rule is right almost everywhere, but a handful of places set a big
   font-size purely to grow an emoji glyph. 1.15em of 52px is a 60px icon —
   pin those back to what the emoji actually looked like. */
.btn .icon .ic { width: 26px; height: 26px; vertical-align: 0; }
.mic-btn .ic { width: 56px; height: 56px; }
.scan-add-ic .ic { width: 36px; height: 36px; }
.fix-go .ic { width: 18px; height: 18px; }

.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 input[type="search"], .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%);
  display: flex; align-items: center; justify-content: center;
  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 .ic { width: 16px; height: 16px; }
.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;
  /* The tick is a Lucide <svg> now, not a ✓ character. At 52px the font glyph
     was whatever the phone happened to draw — thin on iOS, chunky on Android,
     and off-centre on both. A little heavier than the 2px default so it holds
     up against the green. */
  margin: var(--s8) auto var(--s5);
}
.done-mark .ic { width: 46px; height: 46px; stroke-width: 2.6; }

/* The crash screen's counterpart to .done-mark — same 44px weight the ⚠️ had,
   but drawn rather than typeset. No circle: this one shouldn't look like a
   badge you earned. */
.err-mark { color: var(--gold); margin-bottom: var(--s3); }
.err-mark .ic { width: 52px; height: 52px; stroke-width: 2.2; }

/* ---------- 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); padding-right: 46px; min-height: 92px; /* right: room for the favorite star */
  transition: transform 0.05s, border-color 0.1s, box-shadow 0.1s;
}
.home-tile:active { transform: scale(0.99); }
/* Work Plans and Schedule fetch their module (dfow.js) on the first tap —
   see lazy.js. On a slow link that is a second or two of nothing happening,
   so the tile dims while it waits. The second tap is swallowed in app.js by
   a `loading` flag rather than by pointer-events here, which would make the
   tile fail Playwright's "receives events" check. Removed as soon as the
   file lands or fails. */
.home-tile.tile-loading { opacity: 0.55; }
.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); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.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; }

/* Many-photo field — the thumbnail grid below reused, plus a count so a long
   row of 88px tiles still says how many pictures are actually attached. */
.photos-field { margin-top: var(--s1); }
.photos-count { margin-top: 6px; font-size: 13px; color: var(--gray-5); }

/* ---------- AI photo tour / form scan ---------- */
.ai-tour { border-left: 4px solid var(--blue); }
.ai-tour-title { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 16px; }
.ai-tour-title .ic { width: 18px; height: 18px; color: var(--blue); }
.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;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; box-shadow: var(--shadow);
}
.tour-del .ic { width: 13px; height: 13px; }
.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-headrow { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.st-gear { flex:none; display:flex; align-items:center; justify-content:center; width:var(--tap); height:var(--tap); padding:0; background:var(--white); border:1px solid var(--gray-3); border-radius:50%; color:var(--gray-7); cursor:pointer; }
.st-gear[hidden] { display:none; }
.st-gear > .ic { width:22px; height:22px; }
.st-gear:active { background:var(--gray-1); }
/* Job settings sheet (job-settings.js) — sits inside the .jp-sheet; the Locations / Columns rows reuse the look-ahead's .la-cx* styles */
.js-wrap { display:grid; gap:14px; min-width:0; }
.js-sec h3 { margin:0 0 6px; font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }
.js-facts { display:grid; grid-template-columns:auto 1fr; gap:3px 12px; margin:0; font-size:14px; }
.js-facts dt { color:var(--muted); }
.js-facts dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.js-win { display:flex; align-items:center; gap:8px; margin:0 0 4px; font-size:14px; }
.js-win select { width:auto; min-width:110px; }
.js-sec .la-chk { padding:5px 0; }
.js-sec .la-lcin { margin-left:0; border-color:var(--line); background:var(--white); }
.js-sec .la-cxtools { padding-right:0; }
.js-sec .la-item { padding-left:0; color:var(--blue); }
.js-sec .la-cxed { padding-left:0; padding-right:0; min-width:0; }
.js-name { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; font-size:14px; padding:4px 0; }
.js-off .js-name { color:var(--muted); font-style:italic; }
.js-msg { margin:2px 0 0; min-height:18px; font-size:13px; color:var(--green); }
.js-msg.err { color:var(--red); }
.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; }
/* Two columns and five tiles leaves DRA — the last one — alone in the left
   cell with a hole beside it. Let it take the row instead: it reads as the
   pair to the crew card directly underneath, which is what sets its goal. */
@media (max-width:480px){ .st-grid .st-tile:last-child { grid-column:1 / -1; } }
.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); }
/* The one tappable tile (Camera Site Audit, status.js openCameraTile()) —
   cursor + press feedback only; the other five tiles are untouched. */
.st-tile.st-tap { cursor:pointer; }
.st-tile.st-tap:active { transform:scale(0.99); }
.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 { flex:1 1 auto; font-weight:700; color:var(--ink); font-size:13.5px; line-height:1.25; }
/* The tile's subject, drawn once, pushed to the end of the numbers row.
   gray-3 and 18px: it is a quiet label for the tile, and anything stronger
   competes with the count beside it. Not coloured by status on purpose —
   three colours in a 130px box reads as noise. */
.st-ic { flex:0 0 auto; display:flex; align-self:center; margin-left:auto; color:var(--gray-3); }
.st-ic .ic { width:18px; height:18px; }
.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; }
/* Label and its ⓘ share the top line. The button is small on purpose — it is
   an aside, not an action — but it keeps a 30px hit area for a gloved thumb. */
.st-tile-head { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; }
.st-info { flex:0 0 auto; width:22px; height:22px; margin:-2px -2px 0 0; border-radius:50%;
  border:1.5px solid var(--gray-3); background:var(--white); color:var(--gray-5);
  font-size:12px; font-weight:800; font-style:italic; line-height:1; font-family:var(--font);
  display:flex; align-items:center; justify-content:center; position:relative; }
.st-info::after { content:""; position:absolute; inset:-8px; } /* the real tap target: 38px */
.st-info:hover, .st-info:focus-visible { border-color:var(--blue); color:var(--blue); background:var(--blue-tint); outline:none; }

/* ===== Check Your Job — the requirements heading and the SOP link =====
   The heading names what the tiles under it are; the link below them opens the
   SOP itself. No roll-up figure between them — see renderTiles in status.js. */
.li-head { margin:16px 0 0; }
.li-head h3 { margin:0; font-size:15px; color:var(--ink); }
.li-head .sub { margin:2px 0 0; font-size:12.5px; }
/* Two ways into the same document: read it here, or open the PDF. */
.li-sop-row { display:flex; gap:8px; margin:0 0 20px; }
.li-sop-btn { flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:10px 12px; text-align:center; font-family:var(--font);
  border:1.5px solid var(--blue); border-radius:var(--radius-sm); background:var(--blue-tint);
  color:var(--blue-dark); font-size:14px; font-weight:700; text-decoration:none; }
.li-sop-btn:active { background:#DBE7F6; }
.li-sop-pdf { flex:0 0 auto; min-width:96px; background:var(--white); }

/* ===== The explainer sheet (status-info.js) ===== */
body.li-locked { overflow:hidden; }
.li-sheet { position:fixed; inset:0; z-index:300; display:flex; align-items:flex-end; justify-content:center; }
.li-backdrop { position:absolute; inset:0; background:rgba(26,26,26,.5); }
.li-panel { position:relative; width:100%; max-width:720px; max-height:92vh; display:flex; flex-direction:column;
  background:var(--white); border-radius:18px 18px 0 0; box-shadow:var(--shadow-lg); overflow:hidden; }
.li-bar { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:14px var(--s4);
  background:var(--blue); color:var(--white); }
.li-bar h2 { flex:1 1 auto; margin:0; font-size:17px; font-weight:800; display:flex; align-items:center; gap:8px; }
.li-bar-ic { flex:0 0 auto; display:flex; font-size:19px; line-height:1; }
.li-bar-ic .ic { width:20px; height:20px; }
.li-x { flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; border:0;
  background:rgba(255,255,255,.18); color:var(--white); font-size:16px; font-weight:700; font-family:var(--font); }
.li-x .ic { width:17px; height:17px; }
.li-x:active { background:rgba(255,255,255,.32); }
.li-scroll { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:var(--s4); padding-bottom:calc(var(--s6) + env(safe-area-inset-bottom, 0px)); }
/* A single requirement carries no heading of its own — the blue bar above it
   is the heading. Read end to end, each one gets its own. */
.li-sec { padding:2px 0 0; }
.li-sec + .li-sec { padding-top:16px; margin-top:16px; border-top:1px solid var(--line-soft); }
.li-sec p { font-size:14.5px; color:var(--gray-7); line-height:1.5; margin:0 0 9px; }
.li-sec-h { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:16px; font-weight:800; color:var(--ink); line-height:1.25; }
/* Blue, not gray: in the end-to-end SOP these headings are the only thing
   breaking up a long scroll, so the icon carries some of that work. */
.li-sec-ic { flex:0 0 auto; display:flex; font-size:19px; line-height:1; color:var(--blue); }
.li-sec-ic .ic { width:19px; height:19px; }
.li-h { margin:12px 0 3px; font-size:14px; font-weight:800; color:var(--ink); }
.li-list { margin:0 0 10px; padding-left:20px; }
.li-list li { font-size:14.5px; color:var(--gray-7); line-height:1.5; margin-bottom:3px; }
.li-note { background:var(--gold-tint); border-left:4px solid var(--gold); border-radius:0 8px 8px 0;
  padding:10px 12px; margin:10px 0; font-size:14px; color:var(--gray-7); line-height:1.45; }
.li-meta { border:1px solid var(--gray-2); border-radius:10px; overflow:hidden; margin:0 0 12px; }
.li-meta-row { display:grid; grid-template-columns:88px 1fr; gap:10px; padding:8px 11px; font-size:13.5px; line-height:1.4; }
.li-meta-row + .li-meta-row { border-top:1px solid var(--line-soft); }
.li-meta-row span { color:var(--gray-5); font-weight:700; }
.li-meta-row b { color:var(--ink); font-weight:600; }
.li-roles { border:1px solid var(--gray-2); border-radius:10px; padding:10px 12px; margin:2px 0 12px; background:var(--gray-1); }
.li-roles-cap { font-size:12.5px; color:var(--gray-5); font-weight:700; margin-bottom:6px; line-height:1.35; }
.li-role { display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:14px; color:var(--gray-7); }
.li-role + .li-role { border-top:1px solid var(--line-soft); }
.li-role b { color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
/* The way out of a single panel and into the whole SOP — either format. */
.li-sop { display:flex; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft); }
.li-sop-a { flex:1 1 auto; min-height:40px; padding:9px 10px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gray-3); border-radius:var(--radius-sm); background:var(--gray-1); font-family:var(--font);
  font-size:13.5px; font-weight:700; color:var(--blue-dark); text-align:center; text-decoration:none; }
.li-sop-a:active { background:var(--gray-2); }
@media (min-width:560px){ .li-sheet { align-items:center; } .li-panel { border-radius:18px; max-height:86vh; } }

/* ===== "Which crew's DRA?" (drapull.js) =====
   Rides in the same sheet as the ⓘ panels above — only the rows are new.
   Each row is a whole tap target, tall enough for a glove, because the cost
   of a mis-tap here is another foreman's name on a safety record. */
.dp-lede { font-size:14.5px; color:var(--gray-7); line-height:1.5; margin:0 0 14px; }
.dp-rows { display:flex; flex-direction:column; gap:10px; }
.dp-row { display:block; width:100%; min-height:64px; padding:11px 13px; text-align:left;
  border:1.5px solid var(--gray-3); border-radius:var(--radius-sm); background:var(--white);
  font-family:var(--font); cursor:pointer; }
.dp-row:active { background:var(--gray-1); }
/* The crew already named on the form — sorted to the top and marked, so the
   likely answer reads as the likely answer without being pre-chosen. */
.dp-row.dp-match { border-color:var(--blue); background:var(--blue-tint); }
.dp-row.dp-all { border-style:dashed; border-color:var(--blue); margin-bottom:10px; }
.dp-row-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.dp-who { font-size:15.5px; font-weight:800; color:var(--ink); }
.dp-time { flex:0 0 auto; font-size:13px; font-weight:700; color:var(--gray-5); font-variant-numeric:tabular-nums; }
/* Two lines of the activity: enough to tell "sawcutting on the north side"
   from "backfilling at the vault", not enough to push the third crew off. */
.dp-act { margin-top:3px; font-size:14px; color:var(--gray-7); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dp-foot { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:7px; }
.dp-crew { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--gray-5); }
.dp-crew .ic { width:13px; height:13px; }
.dp-tag { display:inline-flex; padding:2px 7px; border-radius:20px; background:var(--blue);
  color:var(--white); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; }

.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); }
/* The ⓘ rides with the heading text, not off in the button row. */
.cc-head h3 .st-info { display:inline-flex; vertical-align:middle; margin:-2px 0 0 6px; }
.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 { display:flex; align-items:center; justify-content:center;
  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 .ic { width:16px; height:16px; }
.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; } }
/* 2026-09-29 — people are picked from the list, never typed. A row's name is a
   button that opens the picker under it; the add row is the picker itself.
   min-width:0 everywhere so a long name shrinks instead of pushing the card
   past a 375px phone. */
.tm-e-who { display:flex; align-items:center; gap:6px; min-width:0; }
.tm-edit .tm-e-name { flex:1 1 auto; min-width:0; min-height:40px; padding:8px; text-align:left; font:inherit; font-size:13px; font-weight:650; color:var(--ink);
  background:#fff; border:1px solid var(--gray-3); border-radius:8px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-edit .tm-e-name:hover { border-color:var(--blue); }
.tm-typed { flex:0 0 auto; font-size:11px; color:var(--gray-5); white-space:nowrap; }
.tm-edit select { min-height:40px; }
.tm-e-pickwrap, .tm-a-who { grid-column:1 / -1; min-width:0; }
.tm-add { grid-template-columns:1fr 1fr auto; }
.tm-add .btn { min-height:40px; }
.tm-add.tm-add-jr { grid-template-columns:1fr; }
.tm-edit .tm-a-search, .tm-edit .tm-e-search { min-height:40px; }
.tm-pick-list { max-height:260px; overflow-y:auto; margin-top:6px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.tm-pick-list:empty { display:none; }
.tm-pick { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:6px 10px; text-align:left; font:inherit; color:var(--ink);
  background:none; border:0; border-bottom:1px solid var(--line-soft); cursor:pointer; }
.tm-pick:active { background:var(--blue-tint); }
.tm-pick:disabled { opacity:.55; cursor:default; }
.tm-pick:focus-visible, .tm-a-x:focus-visible, .tm-edit .tm-e-name:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.tm-pick-main { flex:1 1 auto; min-width:0; }
.tm-pick-name { display:block; font-size:14px; font-weight:700; overflow-wrap:anywhere; }
.tm-pick-sub { display:block; font-size:12px; color:var(--gray-5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-pick-right { flex:0 1 40%; font-size:12px; font-weight:600; color:var(--gray-5); text-align:right; overflow-wrap:anywhere; }
.tm-pick-muted { font-weight:700; }
.tm-pick-empty, .tm-pick-help, .tm-pick-more, .tm-pick-note { margin:0; padding:8px 10px; font-size:13px; color:var(--gray-5); }
.tm-pick-empty { color:var(--ink); font-weight:650; padding-bottom:0; }
.tm-pick-more { text-align:center; font-size:12px; }
.tm-pick-err { color:var(--red); }
.tm-a-chosen { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; padding:4px 4px 4px 12px;
  background:var(--blue-tint); border:1px solid var(--blue); border-radius:8px; font-size:13px; font-weight:700; color:var(--ink); }
.tm-a-cname { min-width:0; overflow-wrap:anywhere; }
.tm-a-x { flex:0 0 auto; width:40px; height:40px; font:inherit; font-size:14px; color:var(--gray-5); background:none; border:0; border-radius:8px; cursor:pointer; }
.tm-a-x:hover { color:var(--red); }
@media (max-width:520px){
  .tm-e-who { grid-column:1 / -1; }
  .tm-add { grid-template-columns:1fr 1fr; }
  .tm-add #tmAdd { grid-column:1 / -1; }
}

/* ===== Check Your Job — "This week's activity" rows =====
   Each row opens the record it stands for, so it is a real <button>: keyboard
   focus and Enter come free, which they would not on a tapped <div>. */
.act-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; font:inherit; color:inherit;
  padding:9px 4px; border:0; border-top:1px solid var(--line-soft); background:none; cursor:pointer; border-radius:8px; }
.act-row:hover { background:var(--gray-1); }
.act-row:active { background:var(--gray-2); }
.act-row:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
.act-badge { flex:none; font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.03em; text-transform:uppercase;
  font-weight:700; padding:3px 7px; border-radius:6px; color:#fff; background:var(--gray-5); }
.act-badge.act-dra  { background:var(--blue); }
.act-badge.act-obs  { background:var(--green); }
.act-badge.act-inc  { background:var(--red); }
.act-badge.act-heca { background:var(--orange); }
.act-main { flex:1; min-width:0; }
.act-subject { display:block; font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-meta { display:block; font-size:12.5px; color:var(--gray-5); }
.act-when { flex:none; font-size:12px; color:var(--gray-5); white-space:nowrap; }
.act-go { flex:none; color:var(--gray-3); font-size:17px; font-weight:700; line-height:1; }

/* ===== Record viewer (read-only DRA / HECA / observation / incident) ===== */
.rec-top { display:flex; align-items:center; gap:8px; margin:6px 0 2px; }
.rec-when { color:var(--gray-5); font-size:13px; }
.rec-kv { display:grid; grid-template-columns:minmax(110px,34%) 1fr; gap:0 12px; margin:0; }
.rec-kv dt { color:var(--gray-5); font-size:12.5px; padding:8px 0; border-top:1px solid var(--line-soft); }
.rec-kv dd { margin:0; color:var(--ink); font-size:14px; font-weight:600; padding:8px 0; border-top:1px solid var(--line-soft);
  overflow-wrap:anywhere; white-space:pre-wrap; }
.rec-kv dt:first-of-type, .rec-kv dt:first-of-type + dd { border-top:0; }
.rec-list { list-style:none; margin:0; padding:0; }
.rec-list li { padding:8px 0; border-top:1px solid var(--line-soft); font-size:14px; color:var(--ink); }
.rec-list li:first-child { border-top:0; }
.rec-sub { display:block; font-size:12.5px; color:var(--gray-5); font-weight:400; }
.rec-flag { font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; margin-left:6px; }
.rec-flag.bad { background:var(--red-tint); color:var(--red); }
.rec-flag.ok  { background:var(--green-tint); color:var(--green-dark); }
.rec-photos { display:flex; flex-wrap:wrap; gap:8px; }
.rec-photos img { width:104px; height:104px; object-fit:cover; border-radius:10px; border:1px solid var(--gray-2); }
.rec-sig { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line-soft); }
.rec-sig img { height:44px; max-width:170px; object-fit:contain; }
.rec-sig:first-child { border-top:0; }

/* ===== 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[data-key="stop"] .home-ic { background:var(--red-tint); }
.home-tile[data-key="stop"] .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; }

/* Field-capture vs office-finish split. The device decides: a phone or tablet
   opens on "quick" (the short list), a computer on "full". The only way across
   is the "Show all fields" button at the foot of the form, phones only. */
.inc-v2[data-mode="quick"] .inc-office-tier { display: none; }
.inc-office-ic { flex: none; display: flex; color: var(--gray-5); }
.inc-office-ic .ic { width: 22px; height: 22px; }
.inc-att-ic { flex: none; display: flex; color: var(--gray-5); }
.inc-att-ic .ic { width: 17px; height: 17px; }
.inc-more { border: 1px dashed var(--gray-3); background: var(--gray-1); }
.inc-more-say { display: flex; gap: 10px; align-items: flex-start; }
/* Once the rest is showing, the "office finishes it" note is answered — the
   button alone remains, so it can be closed again. */
.inc-v2[data-mode="full"] .inc-more-say { display: none; }
.inc-more-btn { width: 100%; margin-top: 10px; }
.inc-v2[data-mode="full"] .inc-more-btn { margin-top: 0; }
.inc-more-btn .ic { transition: transform .15s ease; }
.inc-v2[data-mode="full"] .inc-more-btn .ic { transform: rotate(180deg); }

/* 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;
  display: flex; align-items: center; gap: 8px; width: calc(100% - 4px); text-align: left;
  background: none; border: 0; padding: 4px 0; font-family: var(--font); cursor: pointer; min-height: var(--tap); }
/* The chevron sits beside the words, not at the far edge (2026-10-04). */
.home-group-label { flex: 0 0 auto; }
.home-group-chev { display: flex; color: var(--gray-5); transition: transform .15s; }
.home-group-chev .ic { width: 22px; height: 22px; }
.home-group-star { display: flex; color: var(--gold); }
.home-group-star .ic { width: 20px; height: 20px; fill: var(--gold); }
/* Tapped shut: the heading stays, the tiles under it go, the chevron turns. */
.home-group-wrap.shut .home-group-chev { transform: rotate(-90deg); }
.home-group-wrap.shut .home-tiles, .home-group-wrap.shut .home-fav-hint { display: none; }
.home-fav-hint { font-size: 14px; font-weight: 600; color: var(--gray-5); margin: 0 2px 4px; }
/* The star in a tile's corner: outline when it is not a favorite, gold when it
   is. Padded out to a finger-sized target that still reads as small. */
.home-tile { position: relative; }
.home-fav { position: absolute; top: 4px; right: 4px; padding: 10px; display: flex; color: var(--gray-3); cursor: pointer; border-radius: 50%; }
.home-fav .ic { width: 22px; height: 22px; }
.home-fav:hover { color: var(--gold); background: var(--gold-tint); }
.home-tile.is-fav .home-fav { color: var(--gold); }
.home-tile.is-fav .home-fav .ic { fill: var(--gold); }
/* 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-group-wrap + .home-group-wrap { 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 { display: inline-flex; align-items: center; gap: 4px; 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 .ic { width: 13px; height: 13px; }
.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; }
/* Keyed on data-key, not id: a starred tile is drawn twice (Favorites + its
   group) and only the group copy carries the plain id. Every tile is a solid
   chip; the default in .home-ic is brand blue for any tile not named here. */
.home-tile[data-key="dra"] .home-ic { background:var(--blue); }
.home-tile[data-key="heca"] .home-ic { background:var(--orange); }
.home-tile[data-key="toolbox"] .home-ic { background:var(--green); }
.home-tile[data-key="observation"] .home-ic { background:var(--blue-dark); }
.home-tile[data-key="incident"] .home-ic { background:var(--red); }
.home-tile[data-key="status"] .home-ic { background:var(--green-dark); }
.home-tile[data-key="camera"] .home-ic { background:var(--slate); }
.home-tile[data-key="schedule"] .home-ic { background:var(--blue); }
.home-tile[data-key="dfow"] .home-ic { background:var(--purple); }
.home-tile[data-key="workforce"] .home-ic { background:var(--teal); }
.home-tile[data-key="quality"] .home-ic { background:var(--green); }
.home-tile[data-key="concrete"] .home-ic { background:var(--concrete); }
.home-tile[data-key="asphalt"] .home-ic { background:var(--asphalt); }
.home-tile[data-key="quantity"] .home-ic { background:var(--blue-dark); }
.home-tile[data-key="training"] .home-ic { background:var(--amber); }
@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-row.b { border-left-color: var(--blue); }
.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-chip.b { background: var(--blue); 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-stripe.arw { background: var(--red); }
.obs-v2 .ob-pill.arw { background: var(--red-tint); color: var(--red); }
.obs-v2 .ob-stripe.sam { background: var(--blue); }
.obs-v2 .ob-pill.sam { background: var(--blue-tint); color: var(--blue); }

/* ---- Arrowsight: dropping clips in, and watching them back ---- */
/* The zone is a button in every way except the tag, so it gets a pointer and
   a visible focus ring — people drag onto it, but plenty will just click. */
.obs-v2 .ob-drop { border: 2px dashed var(--gray-3); border-radius: var(--radius-lg); background: var(--gray-1); padding: 22px 14px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; margin-bottom: 10px; }
.obs-v2 .ob-drop:hover { border-color: var(--red); }
.obs-v2 .ob-drop.over { border-color: var(--red); background: var(--red-tint); }
.obs-v2 .ob-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; }
.obs-v2 .ob-drop-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--red); display: flex; align-items: center; justify-content: center; margin-bottom: 3px; }
.obs-v2 .ob-drop-ic img { width: 23px; height: 23px; display: block; }
/* Samsara wears blue where Arrowsight wears red. */
.obs-v2 .ob-drop.b:hover { border-color: var(--blue); }
.obs-v2 .ob-drop.b.over { border-color: var(--blue); background: var(--blue-tint); }
.obs-v2 .ob-drop.b .ob-drop-ic { background: var(--blue); }

/* ---- Samsara: one person picked from People, and who the clip goes to ---- */
.obs-v2 .ob-person > input { width: 100%; }
.obs-v2 .ob-person-chosen { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px 6px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--blue-tint); }
.obs-v2 .ob-person-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.obs-v2 .ob-person-x { width: auto; flex: none; }
.obs-v2 .ob-goes { margin: 0 0 12px; padding: 11px 13px; border-radius: 8px; background: var(--blue-tint); border-left: 4px solid var(--blue); }
.obs-v2 .ob-goes b { display: block; font-size: 15.5px; color: var(--ink); }
.obs-v2 .ob-goes span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.obs-v2 .ob-goes + .ob-reach { margin: -4px 0 12px; }
.obs-v2 .ob-drop b { font-size: 15px; color: var(--ink); }
.obs-v2 .ob-drop span { font-size: 12.5px; color: var(--muted); }

.obs-v2 .ob-vid { display: flex; align-items: center; gap: 11px; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.obs-v2 .ob-vid.failed { border-color: #E4B7B9; background: var(--red-tint); }
.obs-v2 .ob-vid-state { width: 22px; flex: none; text-align: center; font-weight: 800; color: var(--muted); }
.obs-v2 .ob-vid.done .ob-vid-state { color: var(--green); }
.obs-v2 .ob-vid.failed .ob-vid-state { color: var(--red); }
.obs-v2 .ob-vid-body { flex: 1; min-width: 0; }
/* Arrowsight names are long and the meaning is at the end, so the clip name
   truncates at the front rather than the back. */
.obs-v2 .ob-vid-name { display: block; font-size: 13px; font-weight: 600; color: var(--ink); direction: rtl; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obs-v2 .ob-vid-meta { display: block; font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.obs-v2 .ob-vid-x { flex: none; display: flex; align-items: center; border: none; background: none; color: var(--faint); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.obs-v2 .ob-vid-x .ic { width: 15px; height: 15px; }
.obs-v2 .ob-vid-x:hover { background: var(--gray-1); color: var(--red); }

/* A job number lifted from a file name that doesn't match any project. Gold,
   not red — the observation still saves, but it lands nowhere useful, and that
   has to be visible without stopping someone mid-task. */
.obs-v2 .ob-jobwarn { margin: 7px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.4;
  background: var(--gold-tint); border-left: 3px solid var(--gold); color: #7A5C00; font-weight: 600; }
.obs-v2 .ob-jobwarn.pending { background: var(--gray-1); border-left-color: var(--gray-3); color: var(--muted); font-weight: 500; }

/* The "they won't be notified" line under an assignee box. Gold, not red:
   assigning somebody unreachable is a thing worth knowing, not an error —
   plenty of work is handed over in person and logged afterwards. */
.obs-v2 .ob-reach {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 6px 0 0; padding: 7px 10px;
  background: var(--gold-tint); border: 1px solid #EAD48A; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600; line-height: 1.35; color: #7A5C00;
}
.obs-v2 .co-videos { margin-top: 12px; }
.obs-v2 .co-video { margin-bottom: 12px; }
.obs-v2 .co-video video { width: 100%; max-height: 60vh; border-radius: 10px; background: #000; display: block; }
.obs-v2 .co-video-name { font-size: 11.5px; color: var(--faint); margin-top: 4px; word-break: break-all; }
/* Stands in for the player when the browser won't decode the clip. Plain grey
   on grey, no red and no warning triangle: this is a note about where to watch
   it, not a fault, and dressing it as one sends crews to the office over a clip
   that opens fine on the next tap. */
.obs-v2 .co-video-plain {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 12px; border-radius: 10px;
  background: var(--panel, #F4F6F8); border: 1px solid var(--line);
  font-size: 13px; color: var(--faint);
}
.obs-v2 .co-video-plain .ic { width: 18px; height: 18px; flex: none; }
/* The way out to the handset's own player. A full-width 44px target rather
   than a text link — this is tapped on a jobsite, sometimes with a glove. */
.obs-v2 .co-video-open {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; margin-top: 6px; padding: 8px 12px;
  border: 1.5px solid var(--blue); border-radius: var(--radius-sm);
  background: var(--blue-tint); color: var(--blue-dark);
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.obs-v2 .co-video-open:active { background: #DBE7F6; }
.obs-v2 .co-video-open .ic { width: 16px; height: 16px; }
.obs-v2 .co-video-gone { font-size: 12px; color: var(--faint); word-break: break-all; padding: 6px 0; border-bottom: 1px solid var(--line); }

/* What the file name turned out to mean — the hazard, the day, the job, the
   camera. This is the line that tells someone the drop was understood. */
.obs-v2 .ob-vid-parsed { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }

/* Where to find the clip once it ages out of here. Gold while the clip is
   still playable (a heads-up), red once it is gone (the only way left). */
.obs-v2 .co-box-note { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--gold-tint); border-left: 4px solid var(--gold); }
.obs-v2 .co-box-note.gone { background: var(--red-tint); border-left-color: var(--red); }
.obs-v2 .co-box-note b { display: block; font-size: 12.5px; color: var(--ink); margin-bottom: 2px; }
.obs-v2 .co-box-note span { display: block; font-size: 12px; color: var(--muted); }
.obs-v2 .co-box-note code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; color: var(--ink); background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.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); }

/* ============================================================
   Languages — the picker, and bilingual safety wording
   ============================================================ */

/* CHIPS — sign-in and PIN screens only, where nothing else is readable yet.
   All three options visible without opening anything: somebody who cannot read
   "Language" can still see the word "Español" and tap it. */
.lang-pick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.lang-chip {
  flex: 0 0 auto;
  padding: 9px 13px; font-size: 14px; font-weight: 650;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--gray-7);
  cursor: pointer; line-height: 1.2;
}
.lang-chip.on { background: var(--blue); border-color: var(--blue); color: var(--white); }
.lang-chip:active { transform: scale(0.97); }

/* ROWS — inside a menu that is already open. Styled as menu items rather than
   as chips: three pills wrapped over two lines was the bulkiest thing in the
   panel, for the one setting a person touches once. The tick marks the current
   language, the same way a native menu would. */
.lang-rows { display: block; }
.lang-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 11px var(--s4); font-size: 15px; font-weight: 500;
  background: none; border: none; color: var(--ink); cursor: pointer;
}
.lang-row::before {
  content: "✓"; width: 14px; flex: 0 0 14px;
  color: var(--blue); font-weight: 800; visibility: hidden;
}
.lang-row.on::before { visibility: visible; }
.lang-row.on { font-weight: 700; }
.lang-row:active { background: var(--blue-tint); }

/* The heading and its top rule; the rows sit flush so they read as menu items. */
.menu-lang { border-top: 1px solid var(--gray-1); padding: var(--s3) 0 var(--s2); }
.menu-lang-hd {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; color: var(--gray-5);
  padding: 0 var(--s4) 6px; letter-spacing: .02em;
}
/* Matched to the icon column above it so "Language" lines up with the five
   menu labels, even though this heading is smaller type. */
.menu-lang-hd > .ic { flex: none; width: 19px; height: 19px; margin-left: 1px; }
/* .menu-panel button is display:block/full-width/bordered-bottom, and it beats
   .lang-row on specificity — which killed the flex layout, so the tick sat
   flush against the word and the three languages did not line up. Restore the
   layout here, where the selector is specific enough to win. */
.menu-panel .lang-row {
  display: flex; border-bottom: none; padding: 10px var(--s4);
}

/* DROPDOWN — a header with no menu of its own (the admin console). A globe and
   the two-letter code, so it reads as a control without spelling out three
   languages across the header. */
.lang-drop { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--gray-7); cursor: pointer;
  font-size: 12.5px; font-weight: 700; line-height: 1;
}
.lang-btn:active { background: var(--gray-1); }
.lang-globe { width: 16px; height: 16px; display: block; }
.lang-code { letter-spacing: .03em; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--white); border: 1px solid var(--gray-2);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 168px; overflow: hidden; z-index: 200; padding: 4px 0;
}

/* Bilingual safety wording: English on top, translation underneath.
   The translation is deliberately lighter and smaller — it is the aid, and
   the English is the phrase that gets filed on the record and printed on the
   PDF. Same reason it is never shown alone. */
.bi-en { display: block; }
.bi-tr {
  display: block; margin-top: 2px;
  font-size: 0.875em; font-weight: 500; font-style: italic;
  color: var(--muted); line-height: 1.3;
}
/* On a solid/dark chip the muted gray drops below contrast — inherit instead. */
.lang-opt .bi-tr, .home-tile .bi-tr { color: inherit; opacity: 0.8; font-style: normal; }

/* ============================================================
   Toolbox Talk
   ============================================================ */

/* The three ways in. Bigger than a normal button because this is the whole
   screen — there is nothing else on it to compete with. */
.tb-ways { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.tb-way {
  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(--s4) var(--s5); min-height: 84px;
  transition: transform 0.05s, border-color 0.1s, box-shadow 0.1s;
}
.tb-way:active { transform: scale(0.99); }
.tb-way:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); }
.tb-way-lead { border-color: var(--orange); background: var(--orange-tint); }
.tb-way-lead:hover { border-color: var(--orange); }
/* Nothing set this week, or no signal to find out. Still a button — it drops
   the crew into the library — so it dims rather than greying out. */
.tb-way-off { background: var(--white); border-color: var(--gray-2); }
.tb-way-off .tb-way-ic { opacity: 0.5; }
.tb-way-ic {
  flex: none; width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue-tint);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.tb-way-lead .tb-way-ic { background: var(--white); }
/* Blue inside the tinted chip — the chip is the shape, the icon is the label. */
.tb-way-ic .ic { width: 26px; height: 26px; color: var(--blue); }
.tb-way-txt { display: block; min-width: 0; }
.tb-way-t { display: block; font-size: 19px; font-weight: 800; color: var(--ink); }
.tb-way-d { display: block; font-size: 14px; color: var(--gray-5); font-weight: 600; margin-top: 2px; }
.tb-way-lead .tb-way-d { color: var(--gray-7); }

/* The library list */
.tb-list { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.tb-item {
  display: block; width: 100%; text-align: left;
  background: var(--white); border: 1.5px solid var(--gray-2);
  border-radius: var(--radius-sm); padding: var(--s3) var(--s4);
}
.tb-item:hover { border-color: var(--blue); }
.tb-item-t { display: block; font-size: 17px; font-weight: 700; color: var(--ink); }
.tb-item-topic {
  display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--blue-tint); color: var(--blue-dark);
  font-size: 12px; font-weight: 700;
}
.tb-item-s { display: block; margin-top: 4px; font-size: 14px; color: var(--gray-5); }
.tb-item-nopdf { display: block; margin-top: 4px; font-size: 12px; color: var(--gold-ink); font-weight: 700; }

/* The talk itself, at the top of the sign-off screen */
.tb-talkcard { border-color: var(--gray-3); }
.tb-talk-h { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: 4px; }
.tb-badge {
  padding: 2px 9px; border-radius: 999px;
  background: var(--orange-tint); color: #8A4A1B; font-size: 12px; font-weight: 800;
}
.tb-topic {
  padding: 2px 9px; border-radius: 999px;
  background: var(--blue-tint); color: var(--blue-dark); font-size: 12px; font-weight: 700;
}
.tb-talk-t { font-size: 22px; font-weight: 800; color: var(--ink); margin: 2px 0 6px; }
.tb-note {
  margin: 6px 0 10px; padding: var(--s2) var(--s3);
  background: var(--gold-tint); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--gray-7); font-weight: 600;
}
/* An <a> wearing a button's clothes — see pdfBtnHtml() for why it is not a
   button with a click handler. */
a.tb-pdf { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.tb-swap {
  margin-top: var(--s3); padding: var(--s3);
  background: var(--blue-tint); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--gray-7); font-weight: 600;
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
}

/* The picker on the sign-in and PIN screens. Centred and set apart from the
   card: it is a way out of the screen, not another field on the form. */
.auth-lang { display: flex; justify-content: center; margin-top: var(--s5); }

/* ============================================================
   Toolbox Talk — reading the talk on the phone
   Set for reading OUT LOUD to a crew standing around a truck: bigger than the
   rest of the app, generous line height, and a measure that stays short so the
   eye can find the next line while the mouth is still on this one.
   ============================================================ */
.tb-read { max-width: 640px; }
.tb-rd-title { font-size: 26px; line-height: 1.2; margin: 0 0 2px; }
.tb-rd-topic { margin: 0 0 14px; }
.tb-rd-sum {
  font-size: 17px; line-height: 1.5; color: var(--ink);
  background: var(--blue-tint); border-radius: var(--radius);
  padding: 12px 14px; margin: 0 0 18px;
}
.tb-rd-sec { margin: 0 0 18px; }
.tb-rd-sec h2 { font-size: 17px; margin: 0 0 6px; color: var(--blue-dark); }
.tb-rd-sec p { font-size: 16px; line-height: 1.55; margin: 0 0 8px; }
.tb-rd-sec ul, .tb-rd-key ul, .tb-rd-ask ul { margin: 0 0 4px; padding-left: 22px; }
.tb-rd-sec li, .tb-rd-key li, .tb-rd-ask li { font-size: 16px; line-height: 1.5; margin-bottom: 7px; }

/* The two blocks a foreman actually reads out. Called out so they can be found
   by scrolling fast, which is how they will be found. */
.tb-rd-key, .tb-rd-ask {
  border-radius: var(--radius); padding: 14px 16px; margin: 22px 0;
}
.tb-rd-key { background: var(--green-tint); border-left: 4px solid var(--green); }
.tb-rd-ask { background: var(--gold-tint); border-left: 4px solid var(--gold); }
.tb-rd-key h2, .tb-rd-ask h2 { font-size: 15px; margin: 0 0 8px; }

/* Sticky so "Run this talk" is reachable from anywhere in a long talk without
   scrolling back — the crew is already standing there waiting. */
.tb-rd-foot {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 0 16px; margin-top: 26px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white) 22%);
}

/* The hazards a talk covers, in the DRA's own words. Sits on the library row,
   the talk card and the reader. Chips rather than a sentence because there are
   usually two or three and they are scanned, not read. bi() puts the
   translation on a second line inside the chip, so the chip sizes to its
   content instead of being given a height. */
.tb-haz { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tb-haz-chip {
  display: inline-block; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--gray-1); color: var(--gray-7);
  font-size: 12px; font-weight: 650; line-height: 1.35; text-align: left;
}
.tb-haz-chip .bi-tr { display: block; font-weight: 500; opacity: .75; }

/* "read it here" on a library row, and the admin's read-state chip. */
.tb-item-read {
  display: inline-block; margin-top: 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--green-dark);
}
.tbx-read { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 650; }
.tbx-read .ic { width: 14px; height: 14px; }
.tbx-read.ok { color: var(--green-dark); }
.tbx-read.retry {
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--gold-tint); color: var(--gold-ink);
  padding: 3px 10px; cursor: pointer;
}

/* ---- Work Plans (dfow.js) --------------------------------------------
   One rule only. The screens reuse .card / .field / .combo / .ob-row and
   the neutral .st-badge pill; the single thing none of those said was
   "this plan is approved", which is the difference between a draft
   somebody is still arguing about and the document a crew may build a
   DRA from. Green, matching .tbx-read.ok rather than inventing a colour. */
.st-badge.df-ok {
  background: var(--green-tint); border-color: var(--green-dark); color: var(--green-dark);
}

/* ---- Work plan job steps (dfow.js) ------------------------------------
   The row used to be a status pill doing duty as a step number, an input,
   and three buttons, all positioned by inline styles. Two things were
   wrong with it beyond the missing CSS: ▲ and ▼ were typed characters
   sitting next to a drawn ✕, so the three never matched each other; and
   .st-badge is the 10px uppercase chip that says "Approved", which reads
   as a label about the step rather than as its number.

   The number is now a plain numeral. Tabular figures matter here — step 9
   and step 10 have to line up, or a 16-step list looks ragged down the
   left edge.

   Up is chevron-down turned over. There is no chevron-up in icons.js, and
   rotating the same glyph is better than adding one anyway: the pair can
   never drift apart later.

   ⚠️ Writing a work plan assumes a WIDE SCREEN — a browser, not a phone.
   That is a deliberate scope decision, not an oversight: a plan with
   sixteen steps, their hazards and their controls is fine on a laptop and
   miserable on a handset. The phone still gets the read-only view, and
   that row is only a number and a line of text, so it has nothing to
   squeeze. flex-wrap stays as a guard against a narrow window, not as a
   layout anybody designs against.

   THE BOX IS THE INPUT. An earlier pass drew a bordered card around the
   whole row as well, and it read as clutter: sixteen boxes each holding
   another box, with the eye given two edges to follow instead of one.
   The row is bare; the field you type in is the thing with corners.

   The field needs its own rule because it is NOT inside a .field wrapper,
   so it was inheriting nothing at all — a raw browser input, 13px, square,
   half the height of every other input in the app. That was the real
   reason this looked wrong, not the arrangement.

   Matched to .field input deliberately: --radius-sm corners, 1.5px
   gray-3, and the same blue focus ring, so a step reads as the same kind
   of thing as every other box you type in. Vertical padding is tighter
   than a form field on purpose — sixteen full-height fields is a very
   long page, and these are one line each, not questions. */
/* ---- Work plan editor: a wider column --------------------------------
   Writing a plan is browser work, decided deliberately: sixteen steps
   with their hazards and controls is fine on a laptop and miserable on a
   handset, and the phone keeps the read-only view.

   This exists because the DFOW screens were asking for .qw-wide, which
   only applies alongside .qw-v2 — a class they do not carry. So they
   were silently sitting at the 640px phone column, and the nine-tab
   strip needs 779px on its own before any content. It read as "the tabs
   overflow" and was really "this screen never got the width it asked
   for".

   1100 rather than the 1200 the grid layout uses: the per-step hazard
   and control lists to come are read down the page, and a line of text
   much past this stops being scannable. */
.screen.df-wide { max-width: 1100px; }

/* ---- Work plan editor: header and tabs -------------------------------
   The job number, the plan name and the status sit together on one line.
   Status is up here rather than inside the Sign-off tab because
   draft-versus-approved decides whether a plan can reach a crew's
   morning at all — the most consequential fact about a plan should not
   need a click to see.

   The tab strip scrolls sideways rather than wrapping. Nine tabs wrapped
   onto two rows reads as two different toolbars, and the row order is
   the order of the paper cover sheet, which is the thing people already
   know. Editing assumes a browser, so sideways scroll is a fallback for
   a narrow window, not the normal case. */
.df-hdr { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.df-hdr-name { margin: 0; font-size: 21px; }
.df-hdr-sub { margin: 2px 0 12px; }
.df-job { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px;
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--gray-2);
  background: var(--gray-1); color: var(--gray-7); }

.df-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line);
  margin-bottom: var(--s4); -webkit-overflow-scrolling: touch; }
.df-tab { flex: 0 0 auto; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 13px; font: inherit; font-size: 14.5px; color: var(--gray-7);
  white-space: nowrap; cursor: pointer; }
.df-tab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
/* Muted, never hidden. A tab with nothing behind it yet has to read as
   "not built" rather than "broken", and hiding it until it works means
   nobody sees the shape of the plan while it is still cheap to change. */
.df-tab.soon { color: var(--gray-3); }
.df-tab-n { color: var(--gray-5); font-weight: 400; }

.df-soon { text-align: center; padding: 26px 18px; }
.df-soon-h { font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.df-soon-note { margin: 10px 0 0; color: var(--gray-3); font-size: 12.5px; }

/* ---- Work plan safety: steps, their hazards, their controls -----------
   Steps run down the page and one opens at a time. Ten steps with every
   hazard expanded is several hundred control chips on one screen, and
   the work here is a pass down the whole plan — go through each step and
   tick what applies — not a deep dive into one of them.

   A step with nothing on it says so in amber. "Nobody has done this step
   yet" and "somebody looked and it is genuinely clean" are different
   facts, and without this they look identical while scrolling. */
.df-sstep { border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); margin-bottom: 6px; overflow: hidden; }
.df-sstep.open { border-color: var(--gray-3); }
.df-sstep-h { display: flex; align-items: center; gap: var(--s2); width: 100%;
  padding: 12px 14px; background: none; border: 0; font: inherit; text-align: left;
  cursor: pointer; color: var(--ink); }
.df-sstep-h:disabled { cursor: default; opacity: .6; }
.df-sstep-name { flex: 1 1 auto; min-width: 0; }
.df-sstep-c { flex: 0 0 auto; font-size: 12.5px; color: var(--gray-5); }
/* --gold-ink, not --orange: the app's orange is #F47E42, which is a fill
   colour and fails badly as 12px text on white. --gold-ink is the darker
   tone the gold banners already use for exactly this. */
.df-sstep-c.df-warn { color: var(--gold-ink); }
.df-sstep-body { padding: 0 14px 14px; border-top: 1px solid var(--line); }

/* Each hazard is its own block with its controls under it. The id is
   printed small beside the name because it is what the DRA, the exports
   and the library all call this row — worth being able to see when two
   hazards read similarly. */
.df-haz { padding: 12px 0; border-bottom: 1px solid var(--line); }
.df-haz:last-child { border-bottom: 0; }
.df-haz-h { display: flex; align-items: center; gap: var(--s2); margin-bottom: 8px; }
/* The hazard's energy-wheel pictogram, the same PNG the DRA and HECA show.
   Unscoped on purpose: the phone read-only plan wants it as much as the
   desktop editor does. object-fit keeps the badge round if a source PNG
   is ever not perfectly square. */
.df-haz-ic { flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; }
.df-haz-name { font-weight: 600; color: var(--ink); }
.df-haz-id { font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; color: var(--gray-5); }
.df-haz-h .df-rm { margin-left: auto; }
.df-ctrl-lbl { font-size: 12px; color: var(--gray-5); margin: 10px 0 6px; }
.df-addhaz { margin: 12px 0 0; }

/* Where a control came from, at a glance. Reading someone else's plan,
   "this is our marine standard" and "somebody made this up on this job"
   are different facts and a tick looks identical either way. Company
   plain, division marked with a left edge, job-typed dashed. */
.df-chip.df-div { border-left: 3px solid var(--gray-3); border-radius: 999px; }
.df-chip.df-own { border-style: dashed; }
.df-chip.df-own.on { border-style: dashed; }

.df-add-ctrl { display: flex; align-items: center; gap: var(--s2); margin-top: 8px; }
.df-add-ctrl input[type="text"] { flex: 1 1 auto; min-width: 0;
  padding: 8px 11px; font-size: 15px; color: var(--ink); background: var(--white);
  border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); }
.df-add-ctrl input[type="text"]:focus { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.15); }
.df-scope { flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--gray-5); white-space: nowrap; }

/* A quality control is indented under the risk it answers. Same row shape
   as a resource line, so the two halves of the plan read alike. */
.df-qc { margin-left: 22px; }

/* ---- Work plan sign-off (dfow.js) ------------------------------------
   Five lines, all five always on screen. An unsigned line showing WHO has
   yet to sign is the tab's message, so nothing is hidden from people who
   cannot sign. The pad itself is the shared .sig-canvas-wrap from app.js
   and brings its own styling. */
.df-sig-line { border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); margin-bottom: 6px; padding: 12px 14px; }
.df-sig-line.signed { border-left: 4px solid var(--green); }
.df-sig-h { display: flex; align-items: center; gap: var(--s2); }
.df-sig-role { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.df-sig-meta { flex: 0 0 auto; font-size: 12.5px; color: var(--gray-5); }
/* Same rule as .df-sstep-c.df-warn: --gold-ink, because the app's orange
   fails as small text on white. */
.df-sig-meta.df-warn { color: var(--gold-ink); }
/* The captured ink, drawn at the pad's own proportions. Capped rather than
   full width: a signature stretched across a laptop screen reads as a
   graphic, not a signature. */
.df-sig-img { display: block; width: 100%; max-width: 340px; height: auto;
  margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); }
.df-sig-open { margin-top: 10px; }
.df-sig-acts { display: flex; align-items: center; gap: var(--s2); margin-top: 8px; }

/* ---- Work plan resources ---------------------------------------------
   Qty and unit sit beside the name rather than in their own columns.
   Most of these lists are four rows of "two rescue skiffs" or nothing at
   all, and a three-heading grid for that is more furniture than content.

   The two number boxes are fixed and narrow so the names line up down
   the page — that is what makes a list scannable, not the headings. */
.df-res-row { display: flex; align-items: center; gap: var(--s2); margin-bottom: 6px; }
.df-res-row input { padding: 10px 12px; font-size: 17px; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--gray-3);
  border-radius: var(--radius-sm); min-width: 0; }
.df-res-row input:focus { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.15); }
.df-res-row input:disabled { background: var(--gray-1); color: var(--gray-7); }
.df-res-name { flex: 1 1 auto; }
.df-res-qty  { flex: 0 0 84px; }
.df-res-unit { flex: 0 0 96px; }

/* ---- Work plan notes --------------------------------------------------
   A note is a dated line with a name on it, and the meta line under the
   text is the point of the tab — when it was said and by whom. It prints
   small and grey because it is a stamp, not content, but it is always
   there: an update with no date is not an update.

   The textarea reuses the resource row's flex so the remove button sits
   beside it, and grows downward because an RFI answer is a paragraph,
   not a phrase. flex-start, not center — a remove button floating in the
   middle of a tall paragraph looks attached to nothing. */
.df-note { margin-bottom: 12px; }
.df-note:last-child { margin-bottom: 0; }
.df-note .df-res-row { align-items: flex-start; margin-bottom: 0; }
.df-note-body { flex: 1 1 auto; min-width: 0; min-height: 56px; resize: vertical;
  padding: 10px 12px; font-size: 16px; line-height: 1.45; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--gray-3);
  border-radius: var(--radius-sm); font-family: inherit; }
.df-note-body:focus { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.15); }
.df-note-body:disabled { background: var(--gray-1); color: var(--gray-7); }
.df-note-meta { font-size: 12.5px; color: var(--gray-5); margin: 4px 0 0 2px; }

/* Specialty PPE: picked, not typed. Chips rather than a checkbox list —
   nine short labels read faster as a wrapped row than as nine lines, and
   the picked ones have to be legible at a glance because this is the
   half of the plan that prefills a crew's form. */
.df-ppe { display: flex; flex-wrap: wrap; gap: 6px; }
.df-chip { font: inherit; font-size: 14px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--gray-3); background: var(--white); color: var(--gray-7);
  cursor: pointer; }
.df-chip.on { background: var(--blue-tint); border-color: var(--blue); color: var(--blue); font-weight: 600; }
.df-chip:disabled { cursor: default; opacity: .75; }

.df-step { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2); margin-bottom: 6px; }
.df-step-n { flex: 0 0 auto; min-width: 22px; text-align: right;
  color: var(--gray-5); font-size: 14px; font-variant-numeric: tabular-nums; }
.df-step-in { flex: 1 1 220px; min-width: 0;
  padding: 10px 12px; font-size: 17px; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--gray-3);
  border-radius: var(--radius-sm); }
.df-step-in:focus { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.15); }
.df-step-in:disabled { background: var(--gray-1); color: var(--gray-7); }
.df-step-acts { flex: 0 0 auto; display: flex; gap: 2px; margin-left: auto; }
.df-btn { width: 34px; height: 34px; min-height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gray-5); }
.df-btn .ic { width: 16px; height: 16px; }
.df-btn:disabled { opacity: .35; }
.df-up .ic { transform: rotate(180deg); }
.df-rm { color: var(--red); }

/* ---- Work plans: the Schedule tab and the job-level import ---- */
.df-dates { display: flex; gap: 28px; }
.df-date-lbl { font-size: 12px; color: var(--gray-5); }
.df-date-val { font-size: 19px; font-weight: 600; color: var(--ink); }

.df-act-row { display: flex; align-items: center; gap: var(--s2);
  padding: 8px 2px; border-bottom: 1px solid var(--line); }
.df-act-row:last-child { border-bottom: 0; }
.df-act-id { flex: 0 0 auto; min-width: 86px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--gray-5); }
.df-act-name { flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--ink); }
.df-act-name .df-warn { color: var(--gold-ink); font-size: 12.5px; }
.df-act-wbs { display: block; font-size: 11.5px; color: var(--gray-5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-act-dates { flex: 0 0 auto; font-size: 12.5px; color: var(--gray-5); white-space: nowrap; }

button.df-act-pick { width: 100%; background: none; border: 0;
  border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; font: inherit; }
button.df-act-pick:hover { background: var(--gray-1); }
button.df-act-pick:last-of-type { border-bottom: 0; }

.df-map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
@media (max-width: 640px) { .df-map-grid { grid-template-columns: 1fr; } }
.df-imp-num { font-weight: 700; color: var(--ink); }
/* Suggested work plans (screenSchedSuggest): one card per feature, the
   tick + editable name as its head; an unticked card fades but stays
   readable, so what is being left out is still visible. */
.df-sug-head { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; cursor: pointer; }
.df-sug-head input[type="checkbox"] { margin-top: 13px; width: 20px; height: 20px; flex: 0 0 auto; }
/* The editable plan name (and the "name for the new plan" box in Separate)
   in the app's own field look — it used to be a bare browser text box. */
.df-sug-head .df-sug-name, .df-sug-mode .df-sug-sp-name {
  width: 100%; min-width: 0; padding: 10px 12px; font-size: 17px; font-weight: 700;
  color: var(--ink); background: var(--white);
  border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); }
.df-sug-mode .df-sug-sp-name { font-weight: 400; font-size: 16px; }
.df-sug-head .df-sug-name:focus, .df-sug-mode .df-sug-sp-name:focus { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.15); }
/* What AI marked on a step: hazards and quality items, under the step. */
.df-sug-risk { margin: 3px 0 6px; padding-left: 10px; border-left: 2px solid var(--line); }
.df-sug-risk .sub { margin: 1px 0; font-size: 13px; }
.df-sug-risk-n { color: var(--gray-5); white-space: nowrap; }
.df-sug-locs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 14px; }

/* ============================================================
   Build the schedule (schedbuild.js) — a desk screen: a settings line,
   three numbers, then the activity table and its bar chart side by side on
   one row height, so a table row and its bar are the same line.
   ============================================================ */
.sb-root { --sb-rowh: 40px; }
.sb-setbar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; }
.sb-setbar label, .sb-saverow label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--muted); }
.sb-setbar input[type="date"], .sb-saverow input[type="date"] { padding: 7px 9px; font-size: 15px; color: var(--ink); background: var(--white); border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); }
.sb-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sb-stat { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius); padding: 10px 14px; }
.sb-stat b { display: block; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sb-stat span { color: var(--muted); font-weight: 600; font-size: 13px; }
.sb-stat.sb-green { border-left-color: var(--green); }
.sb-stat.sb-red { border-left-color: var(--red); }
.sb-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.sb-paste { margin-bottom: 10px; }
.sb-paste textarea { width: 100%; min-height: 120px; padding: 8px 10px; font: 13px/1.4 ui-monospace, Consolas, monospace; color: var(--ink); background: var(--white); border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); resize: vertical; }
.sb-panes { display: grid; grid-template-columns: minmax(0, 15fr) minmax(0, 9fr); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sb-pane { min-width: 0; overflow-x: auto; }
.sb-chartpane { border-left: 1px solid var(--line); }
@media (max-width: 1100px) { .sb-panes { grid-template-columns: minmax(0, 1fr); } .sb-chartpane { border-left: 0; border-top: 1px solid var(--line); } }
.sb-table { border-collapse: collapse; width: 100%; }
.sb-table td input[data-f="name"] { min-width: 250px; }   /* the name is what the row is — it does not get squeezed by the number columns */
.sb-setbar .sub { margin: 0; }
.sb-table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 8px; height: var(--sb-rowh); border-bottom: 1px solid var(--line); white-space: nowrap; }
.sb-table td { padding: 0 8px; height: var(--sb-rowh); border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; font-size: 14px; }
.sb-table tr.sb-head td { background: var(--gray-1); font-weight: 800; }
.sb-table tr.sb-head input[type="text"] { font-weight: 800; }
.sb-table tr.sb-crit td:nth-child(2) input { color: var(--red); font-weight: 700; }
.sb-table td input[type="text"], .sb-table td input[type="number"], .sb-table td input[type="date"] { width: 100%; min-width: 0; padding: 5px 7px; font-size: 14px; color: var(--ink); background: transparent; border: 1.5px solid transparent; border-radius: 6px; }
.sb-table td input[type="text"]:hover, .sb-table td input[type="number"]:hover { border-color: var(--line); }
.sb-table td input:focus { outline: none; border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.15); }
.sb-table td input[type="date"] { width: 138px; border-color: var(--gray-3); }
.sb-table .sb-empty { color: var(--muted); text-align: center; white-space: normal; }
.sb-num { font-variant-numeric: tabular-nums; }
.sb-c-num { width: 38px; text-align: right; color: var(--faint); }
.sb-c-dur { width: 70px; } .sb-c-dur input { text-align: right; }
.sb-c-fol { width: 118px; }
.sb-c-date { width: 150px; }
.sb-c-flt { width: 50px; text-align: right; }
.sb-c-pct { width: 62px; } .sb-c-pct input { text-align: right; }
.sb-c-act { width: 124px; text-align: right; }
.sb-ic { width: 26px; height: 26px; padding: 0; margin-left: 2px; line-height: 1; font-weight: 700; color: var(--muted); background: var(--white); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.sb-ic:hover { color: var(--blue); border-color: var(--blue); }
.sb-ic.on { color: var(--blue); border-color: var(--blue); background: var(--blue-tint); }
.sb-err { color: var(--red); font-weight: 700; font-size: 12px; }
.sb-later { color: var(--faint); font-size: 12px; margin-left: 4px; }
.sb-chartpane svg { display: block; }
.sb-chartpane text { font-family: var(--font); font-size: 11px; font-weight: 700; fill: var(--muted); }
.sb-off { fill: var(--gray-1); }
.sb-ln { stroke: var(--line); }
.sb-sum { fill: var(--gray-5); }
.sb-b { fill: #3D7CC9; }
.sb-b-crit { fill: var(--red); }
.sb-fl { stroke: #3D7CC9; stroke-width: 2; stroke-dasharray: 3 3; }
.sb-lk { fill: none; stroke: var(--faint); stroke-width: 1.3; }
.sb-lk-crit { fill: none; stroke: var(--red); stroke-width: 1.3; }
.sb-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 2px 0; color: var(--muted); font-size: 13px; }
.sb-k { display: inline-block; width: 22px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: middle; }
.sb-k-crit { background: var(--red); } .sb-k-bar { background: #3D7CC9; } .sb-k-off { background: var(--gray-1); border: 1px solid var(--line); }
.sb-saverow { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.sb-help { margin-top: 14px; color: var(--muted); }
.sb-help summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.sb-help li { margin: 4px 0; max-width: 78ch; }
.df-sug-card.df-sug-off { opacity: .55; }
/* A card folds to its name and a one-line count; the chevron turns. */
.df-sug-headrow { display: flex; gap: 8px; align-items: flex-start; }
.df-sug-headrow .df-sug-head { flex: 1 1 auto; min-width: 0; }
.df-sug-fold { flex: 0 0 auto; width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.df-sug-fold svg { transition: transform .15s ease; }
.df-sug-shut .df-sug-fold svg { transform: rotate(-90deg); }
.df-sug-sum { margin: 0 0 0 30px; }
.df-sug-shut .df-sug-head { margin-bottom: 4px; }
/* Combine / Separate on a card: the buttons sit at its foot; a mode opens a
   panel of ticks with its own Go / Cancel. */
.df-sug-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.df-sug-mode { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.df-sug-mode-row { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; cursor: pointer; }
.df-sug-mode-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }
.df-sug-mode-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.df-imp-list { margin: 6px 0 0; padding-left: 20px; }
.df-imp-list li { margin: 2px 0; font-size: 14px; }

/* Critical chip — list view's equivalent of the red Gantt bar (both read
   `critical` off fact_schedule_activity, never computed by the app). */
.df-crit-chip {
  flex: 0 0 auto; display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: var(--red-tint); color: var(--red); font-size: 11px; font-weight: 800;
}

/* ---- Work plan production: step→code picker and the rollup ------------
   The rollup is a real table — the only one in the editor — because seven
   columns of numbers is what a table is for. It scrolls inside its own
   wrapper on a narrow window rather than widening the page.

   Amber (--gold-ink) is for "somebody needs to look at this" — a stale or
   missing split; red is only for "this cannot be saved" — a code claimed
   past 100%. Same split of meanings as the safety tab's df-warn. */
.df-pc-step { padding: 10px 0; border-bottom: 1px solid var(--line); }
.df-pc-step:last-child { border-bottom: 0; }
.df-pc-h { display: flex; align-items: center; gap: var(--s2); margin-bottom: 6px; }
.df-pc-add { margin: 8px 0 0; max-width: 420px; }
.df-file-row input[type="file"] { font-size: 14px; }

.df-prod-wrap { overflow-x: auto; }
.df-prod { width: 100%; border-collapse: collapse; font-size: 14px; }
.df-prod th { text-align: left; font-size: 12px; color: var(--gray-5);
  font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--line);
  white-space: nowrap; }
.df-prod td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.df-prod tr:last-child td { border-bottom: 0; }
.df-prod .num { text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.df-code { font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px; white-space: nowrap; }
.df-was { color: var(--gray-5); font-size: 12px; }
.df-share-warn { color: var(--gold-ink); font-size: 12.5px; font-weight: 600; }

.df-split-code { padding: 12px 0; border-bottom: 1px solid var(--line); }
.df-split-code:last-child { border-bottom: 0; }
.df-split-row { display: flex; align-items: center; gap: var(--s2); margin: 4px 0; }
.df-split-row label { flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--ink); }
.df-split-row input { flex: 0 0 92px; padding: 8px 10px; font-size: 16px;
  text-align: right; color: var(--ink); background: var(--white);
  border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); }
.df-split-row input:focus { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.15); }
.df-split-rem { font-size: 12.5px; color: var(--gray-5); margin-top: 6px; }
.df-split-rem.df-warn { color: var(--gold-ink); }
.df-split-rem.df-over { color: var(--red); font-weight: 600; }

/* ---- Work plan quality: hold points ------------------------------------
   Red, not amber. Amber in this app means "somebody should look at this";
   a hold point is "work stops here until the engineer accepts", which is a
   different sentence and needs the stronger color. */
.df-hold { display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 14px; color: var(--gray-7); cursor: pointer; }
.df-hold input { width: 18px; height: 18px; accent-color: var(--red); flex: 0 0 auto; }
.df-hold.on { color: var(--red); font-weight: 600; }
.df-holdmark { color: var(--red); font-weight: 700; margin-left: 8px; }

/* ---- Work plan editor — desktop readability polish --------------------
   Writing a plan is desktop/tablet work (the phone keeps the read-only
   view), so this whole block hangs off .df-wide — the class only the
   big-screen editor carries — plus the .df-* classes the work plans own.
   The phone view, the DRA and every other screen are left alone. It sits
   at the end of the section on purpose: several selectors below share the
   specificity of the rules they refine and win only by coming later. */

/* A calmer, document-like width. 1100 let the single-column forms sprawl. */
.screen.df-wide { max-width: 980px; }

/* Draft / Approved is the most consequential fact about a plan — it decides
   whether the plan can reach a crew's morning — so it stops being a whisper
   of grey and becomes a real amber / green pill, with the job number beside
   it as a quiet chip. */
.df-hdr { gap: 10px; margin-top: 2px; }
.df-hdr-name { font-size: 24px; letter-spacing: -0.3px; }
.df-wide .df-job {
  background: var(--blue-tint); color: var(--blue-dark);
  border: 1px solid #CFE0F4; padding: 3px 9px; border-radius: 6px;
  font-size: 12px; font-weight: 700;
}
.df-wide .df-hdr .st-badge {
  font-size: 11px; padding: 4px 11px; border-radius: 999px;
  background: var(--gold-tint); color: var(--gold-ink);
  border: 1px solid #EAD79A; letter-spacing: .04em;
}
.df-wide .df-hdr .st-badge.df-ok {
  background: var(--green-tint); color: var(--green-dark); border-color: #BFE0AD;
}

/* Tabs become a wrapping pill group. Nine sections will not sit on one
   desktop row at a legible size, and the scrolling strip hid half the plan's
   map; pills wrap to a tidy second row with every section in view. The phone,
   with no .df-wide, keeps the scrolling underline strip — right for a narrow
   screen where wrapped pills would cost four rows of height. */
.df-wide .df-tabs {
  flex-wrap: wrap; gap: 7px; margin: 16px 0 20px;
  border-bottom: 0; overflow: visible; padding-bottom: 0;
}
.df-wide .df-tab {
  padding: 8px 15px; font-size: 14.5px; color: var(--gray-7);
  background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 999px;
  margin: 0; transition: background .12s, color .12s, border-color .12s;
}
.df-wide .df-tab:hover { background: var(--gray-2); color: var(--ink); }
.df-wide .df-tab.on {
  background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 700;
}
.df-wide .df-tab-n {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px;
  font-size: 12px; font-weight: 700; line-height: 1.6;
  background: var(--gray-3); color: var(--gray-7); border-radius: 999px;
}
.df-wide .df-tab.on .df-tab-n { background: rgba(255, 255, 255, 0.26); color: #fff; }

/* Form-heavy tabs read better in a column than in 980px of stretched input.
   Wired off #df_panel[data-tab], which renderPanel() stamps each render. */
.df-wide #df_panel[data-tab="details"],
.df-wide #df_panel[data-tab="notes"] { max-width: 660px; }
.df-wide #df_panel[data-tab="resources"] { max-width: 780px; }

/* Cards a touch softer, so a page of them reads as one surface. */
.df-wide .card { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* The solid-blue section bar is a wall when Resources stacks four of them.
   Lighten it to a tinted header that still clearly heads its card. */
.df-wide .section-bar {
  background: var(--blue-tint); color: var(--blue-dark);
  border-bottom: 1px solid #D3E2F5; font-size: 13px; letter-spacing: .02em;
}

/* Procedure: a stronger step number, and the three reorder / remove buttons —
   a lot of furniture on every row — quieted to grey until the row is hovered. */
.df-wide .df-step { gap: 10px; }
.df-wide .df-step-n { color: var(--blue); font-weight: 800; font-size: 15px; min-width: 24px; }
.df-wide .df-step-acts .df-btn { border-color: transparent; background: transparent; color: var(--gray-5); }
.df-wide .df-step:hover .df-btn { border-color: var(--gray-3); background: var(--white); }
.df-wide .df-step-acts .df-btn:hover { color: var(--ink); }
.df-wide .df-step-acts .df-rm:hover { color: var(--red); border-color: var(--red); }

/* Safety: real depth for step › hazard › control. The open step gets a faint
   tray so the white hazard cards inside it lift off the page. */
.df-wide .df-sstep { border-radius: var(--radius-lg); }
.df-wide .df-sstep.open { box-shadow: var(--shadow-card); }
.df-wide .df-sstep-h { padding: 15px 16px; }
.df-wide .df-sstep-name { font-size: 16px; }
.df-wide .df-sstep-body {
  background: var(--gray-1); padding: 14px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.df-wide .df-haz {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.df-wide .df-haz:last-child { margin-bottom: 0; }
.df-wide .df-haz-id {
  background: var(--gray-1); color: var(--gray-7); border: 1px solid var(--gray-2);
  padding: 1px 7px; border-radius: 5px;
}

/* Direct vs Alternative: a labelled swatch instead of a whisper of grey. */
.df-wide .df-ctrl-lbl {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 13px 0 8px;
}
.df-wide .df-ctrl-lbl::before {
  content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--blue); flex: none;
}

/* Chips a little more tactile, and the "where did this control come from"
   cues made legible — company plain, division gold-edged, job-typed dashed. */
.df-wide .df-chip { font-size: 14px; padding: 8px 14px; }
.df-wide .df-chip.on { box-shadow: inset 0 0 0 1px var(--blue); }
.df-wide .df-chip.df-div { border-left: 3px solid var(--gold); }
.df-wide .df-chip.df-own { border-style: dashed; border-color: var(--gray-5); }

/* Production reads like a ledger: a firmer header rule and zebra rows. */
.df-wide .df-prod th { color: var(--gray-7); border-bottom: 2px solid var(--gray-3); padding-bottom: 9px; }
.df-wide .df-prod tbody tr:nth-child(even) { background: var(--gray-1); }
.df-wide .df-prod td { padding: 9px 10px; }
.df-wide .df-code { color: var(--blue-dark); }

/* Sign-off: a signed line reads settled (green), the rest read pending. */
.df-wide .df-sig-line { border-radius: var(--radius-lg); padding: 14px 16px; }
.df-wide .df-sig-line.signed { background: var(--green-tint); border-color: #CDE7BE; }

/* The page-wide Save / Delete don't need to span 980px on a desktop. */
.df-wide > .btn { max-width: 320px; }
.df-wide > .btn-primary { font-size: 17px; }

/* ---- Messages from the safety office (notices.js) ---------------------
   Shown before the app when the office has posted something, and again
   from the menu afterwards. The card carries the whole treatment: the
   screen underneath is deliberately bare, because a notice competing with
   page furniture is a notice being skimmed.

   Colour is the only thing that varies by level, and it reuses the
   severity ramp the rest of the app already uses for "how bad is this" —
   a new palette here would mean amber meaning one thing on a hazard and
   another on a warning. */
.nt-screen { max-width: 560px; margin: 0 auto; }

.nt-card { border-left: 6px solid var(--gray-3); }
.nt-card.nt-info    { border-left-color: var(--blue); }
.nt-card.nt-warning { border-left-color: var(--sev-med); }
.nt-card.nt-urgent  { border-left-color: var(--sev-hi); background: var(--sev-hi-tint); }

/* The level, as a word rather than only a colour. Colour alone is not a
   label — it fails in bright sun, on a cracked screen, and for the one
   man in twelve who cannot tell the amber from the red. */
.nt-tag {
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gray-5); margin-bottom: var(--s2);
}
.nt-urgent .nt-tag { color: var(--sev-hi); }
.nt-warning .nt-tag { color: var(--sev-med); }
.nt-count { font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--gray-5); }

.nt-title { font-size: 20px; font-weight: 800; margin: 0 0 var(--s3); }
.nt-body { font-size: 16px; line-height: 1.6; margin: 0 0 var(--s4); white-space: normal; }
.nt-from { font-size: 14px; color: var(--gray-5); margin: 0 0 var(--s4); }
.nt-read { font-size: 14px; font-weight: 700; color: var(--green-dark); margin: 0; }

/* The unread-notice headline on the home screen (notices.js). What "Review
   later" leaves behind: a tappable line carrying the loudest unread notice's
   title, in its level colour, until it is read.

   A <button>, not a div, because it is a real tap target that opens the list —
   and because a gloved thumb on a jobsite deserves the keyboard and screen
   reader behaviour that comes free with the right element. It inherits .banner
   for its box, and only overrides what a button needs. */
.nt-banner {
  width: 100%;
  text-align: left;
  font-family: var(--font);
  cursor: pointer;
  min-height: var(--tap);
}
.nt-banner.nt-info    { background: var(--blue-tint);   color: var(--blue-dark); border-color: #BAD2EE; }
.nt-banner.nt-warning { background: var(--sev-med-tint); color: var(--sev-med);  border-color: #EBC2A6; }
.nt-banner.nt-urgent  { background: var(--sev-hi-tint);  color: var(--sev-hi);   border-color: #E4B7B9; }

/* The level, as a word and not only a colour — same reasoning as the notice
   card itself: colour alone fails in bright sun and for the one man in twelve
   who cannot tell the amber from the red. */
.nt-banner-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; flex: none;
}

/* The headline gets whatever room is left and is clipped rather than wrapped:
   the banner sits above the tiles, and one that grows to three lines pushes the
   DRA button off the screen on a small phone. The full text is one tap away. */
.nt-banner-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700;
}

.nt-banner-more { flex: none; font-weight: 700; opacity: .8; }

/* Says it is a door. Hidden on the narrowest phones, where the title is worth
   more than the invitation. */
.nt-banner-cta { flex: none; font-weight: 800; text-decoration: underline; }

/* ============================================================
   Work plan Submittals & RFIs tabs (dfow.js) — MOCK DATA ONLY.
   ============================================================ */

/* Three more .st-badge colours, the same move as .df-ok above: reused
   tints and ink colours, nothing new mixed. Draft/Answered-adjacent gaps
   in this list are deliberate — Draft prints the plain, uncoloured badge,
   because nothing has happened to a draft yet worth calling out in colour. */
.st-badge.df-warn {
  background: var(--gold-tint); border-color: var(--gold-ink); color: var(--gold-ink);
}
.st-badge.df-bad {
  background: var(--red-tint); border-color: var(--red); color: var(--red);
}
.st-badge.df-info {
  background: var(--blue-tint); border-color: var(--blue-dark); color: var(--blue-dark);
}

/* A linked submittal or RFI. Two flex-wrap groups inside a flex-wrap row,
   not a grid — a grid's columns are fixed widths, and a title running from
   four words to fourteen is exactly the case a grid handles by truncating
   or by leaving the short rows looking ragged. Wrapping is the point: this
   is read on a phone as often as it's edited on a laptop. */
.df-link-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--s2); padding: 10px 2px; border-bottom: 1px solid var(--line); }
.df-link-row:last-child { border-bottom: 0; }
.df-link-main { flex: 1 1 220px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.df-link-num { flex: 0 0 auto; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--gray-5); }
.df-link-title { flex: 1 1 160px; min-width: 0; font-size: 15px; color: var(--ink); }
.df-link-spec { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--gray-7); }
.df-link-meta { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.df-link-boc, .df-link-due { font-size: 12.5px; color: var(--gray-5); white-space: nowrap; }

/* The link picker sheet — the li-* shell drapull.js already established
   (body.li-locked, .li-sheet/.li-backdrop/.li-panel/.li-bar/.li-x/.li-scroll),
   so this is the second sheet in the app and not a new pattern to keep in
   sync with the first. Only the rows and the footer bar are new. */
.df-pick-h { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gray-5); margin: 16px 0 8px; }
.df-pick-h:first-child { margin-top: 0; }
button.df-pick-row { display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: none;
  text-align: left; font: inherit; cursor: pointer; }
button.df-pick-row:last-of-type { border-bottom: 0; }
button.df-pick-row:active, button.df-pick-row.on { background: var(--blue-tint); }
.df-pick-box { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 5px;
  border: 1.5px solid var(--gray-3); background: var(--white);
  display: flex; align-items: center; justify-content: center; color: var(--white); }
.df-pick-box .ic { width: 15px; height: 15px; }
.df-pick-row.on .df-pick-box { background: var(--blue); border-color: var(--blue); }
.df-pick-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.df-pick-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.df-pick-num { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--gray-5); }
.df-pick-title { font-size: 15px; color: var(--ink); }
.df-pick-spec { font-size: 12.5px; font-weight: 700; color: var(--gray-7); }
/* Pinned under .li-scroll rather than inside it — the primary action stays
   reachable without scrolling to the bottom of forty candidate rows. */
.df-pick-bar { flex: 0 0 auto; padding: 12px var(--s4);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--white); }
.df-pick-bar .btn { width: 100%; }
@media (max-width: 380px) { .nt-banner-cta { display: none; } }

/* ---- "N observations are assigned to you" (observation.js) -------------
   The home screen safety net for the SMS journey: when a phone mangles a
   text link down to just the domain, the tap still lands on home — so home
   offers the newest open assignment itself. Injected by assignedNudge();
   a <button>, because it is a real tap target that opens the record. */
.obs-nudge { display: block; width: 100%; text-align: left;
  background: var(--gold-tint); border: 1px solid #EAD79A;
  border-left: 5px solid var(--gold); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: var(--s4);
  font-family: var(--font); cursor: pointer; min-height: var(--tap); }
.obs-nudge b { display: block; font-size: 15px; color: var(--ink); }
.obs-nudge span { display: block; font-size: 13px; color: var(--gray-5); margin-top: 2px; }
.obs-nudge:active { filter: brightness(0.97); }

/* ---- Home: "My tasks" + the computer layout (app.js homeTask) -----------
   Phone: the panel sits above the tools and is simply not there when nothing
   is waiting — the same screen the nudges always gave. Computer (1000px+):
   the page widens, My tasks becomes a column on the left, and the tools turn
   into a grid of compact tiles so the whole app fits without scrolling.
   Nothing waiting, or the heading tapped shut → one slim bar and the tools
   take the full width. */
.home-tasks-head { display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; padding: 0; margin: 14px 2px 12px; cursor: pointer;
  font-family: var(--font); font-size: 16px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); text-align: left; }
.home-tasks-none { display: none; font-size: 13px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--gray-5); }
.home-tasks-chev { margin-left: auto; display: flex; transition: transform .15s; }
.tasks-collapsed .home-tasks-chev { transform: rotate(-90deg); }
.tasks-collapsed .home-tasks-list { display: none; }
.tasks-empty .home-tasks { display: none; }

@media (min-width: 1000px) {
  .screen.home-screen { max-width: 1240px; padding-bottom: 40px; }
  .home-screen .home-group { margin: 6px 2px 10px; }
  .home-screen .home-group-wrap + .home-group-wrap { margin-top: 20px; }
  .home-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr);
    gap: 32px; align-items: start; }
  .home-layout.tasks-empty, .home-layout.tasks-collapsed { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tasks-empty .home-tasks { display: block; }
  .tasks-empty .home-tasks-none { display: inline; }
  .tasks-empty .home-tasks-chev { display: none; }
  .tasks-empty .home-tasks-head { cursor: default; margin-bottom: 0; }
  .tasks-collapsed .home-tasks-head { margin-bottom: 0; }
  .home-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px; margin-top: 0; }
  .home-tile { flex-direction: column; justify-content: flex-start; text-align: center;
    gap: 8px; padding: 14px 10px; min-height: 0; height: 100%; }
  .home-ic { width: 52px; height: 52px; font-size: 28px; }
  .home-title { font-size: 17px; line-height: 1.2; }
  .home-desc { font-size: 12.5px; line-height: 1.3; }
}

/* ============================================================
   Concrete Pour Log (concrete.js). Rides on the obs-v2 / qw-v2
   building blocks; everything here is the pour-specific furniture:
   the PO / mix-line pick buttons, the per-truck ticket cards, and
   the bottom-sheet the ticket form opens in.
   ============================================================ */
.cp-kv { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.cp-kv > span:first-child { color: var(--gray-5); font-size: 13px; min-width: 64px; }
.cp-kv > b { font-size: 15px; }

.cp-lines { display: flex; flex-direction: column; gap: 8px; }
.cp-line {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; padding: 12px 14px;
  border: 1.5px solid var(--gray-2); border-radius: var(--radius);
  background: var(--white); cursor: pointer; font: inherit;
}
.cp-line b { font-size: 16px; }
.cp-line span { font-size: 13px; color: var(--gray-5); }
.cp-line.on { border-color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue); }
/* Mix lines carry a delivered qty on the right: text column left, numbers right. */
.cp-line.qty { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.cp-line .cp-ltext { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cp-line .cp-lqty { display: flex; flex-direction: column; align-items: flex-end; flex: none; font-size: 12px; color: var(--gray-5); white-space: nowrap; }
.cp-line .cp-lqty b { font-size: 15px; color: var(--ink); }
.cp-line .cp-lqty.dim b { color: var(--gray-3); font-weight: 500; }
.cp-line.has:not(.on) { border-color: var(--gray-3); }
.cp-line .cp-lqty i { font-style: normal; font-weight: 700; color: var(--red); }
.cp-line .cp-lqty.over b { color: var(--red); }
.cp-line.over { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.cp-line.over.on { background: var(--red-tint); }
.status-line.status-over { background: var(--red-tint); color: var(--red); margin-top: 6px; }
.cp-byline > span:first-child { min-width: 0; padding-left: 10px; }
.cp-byline.over > b { color: var(--red); }
.cp-byline.over i { font-style: normal; font-size: 13px; }

.cp-btnrow { display: flex; gap: 10px; margin-top: 10px; }
.cp-btnrow .btn { flex: 1; }

.cp-addtruck { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.cp-addtruck:hover { background: #E5AC00; border-color: #E5AC00; }

.cp-ticket { cursor: pointer; margin-bottom: 8px; }
.cp-trow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.cp-tphoto {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--gray-1); border: 1px solid var(--gray-2);
}
.cp-nophoto { display: flex; align-items: center; justify-content: center; color: var(--gray-3); }
.cp-tmain { flex: 1; min-width: 0; }
.cp-tno { font-weight: 600; font-size: 15px; }
.cp-tsub { font-size: 13px; color: var(--gray-5); margin-top: 1px; }
.cp-badge { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; margin-left: 6px; }
.cp-badge.pass { background: var(--green-tint); color: var(--green-dark); }
.cp-badge.fail { background: var(--red-tint); color: var(--red); }

.cp-preview { width: 100%; max-height: 220px; object-fit: contain; background: var(--gray-1); border-radius: var(--radius-sm); margin: 10px 0 4px; }
.cp-note { font-size: 14px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--gray-1); margin: 8px 0; display: flex; gap: 8px; align-items: center; }
.cp-note.ok { background: var(--green-tint); color: var(--green-dark); }
.cp-note.warn { background: var(--gold-tint); color: #7A5C00; }

.cp-insp { margin-bottom: 12px; }
/* The tapped state. Same colors the Quality Walk ratings use, but those
   rules are scoped to .qw-rbtn — without these three the tap records
   silently and the button never lights up, which reads as broken. */
.cp-insp .seg-btn.on-eff { background: var(--green); border-color: var(--green); color: var(--white); }
.cp-insp .seg-btn.on-att { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.cp-insp .seg-btn.on-bar { background: var(--red); border-color: var(--red); color: var(--white); }

.cp-modal {
  position: fixed; inset: 0; z-index: 1000; background: rgba(26, 26, 26, 0.5);
  display: flex; align-items: flex-end; justify-content: center;
}
.cp-sheet {
  background: var(--white); width: 100%; max-width: 560px; max-height: 92vh;
  overflow-y: auto; border-radius: var(--radius) var(--radius) 0 0; padding: 18px 16px 24px;
}
@media (min-width: 700px) {
  .cp-modal { align-items: center; }
  .cp-sheet { border-radius: var(--radius); }
}
.cp-sheet h2 { margin: 0 0 4px; font-size: 20px; }
.cp-noscroll { overflow: hidden; }

.cp-photoview {
  position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, 0.9);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.cp-photoview img { max-width: 96vw; max-height: 96vh; object-fit: contain; }

/* ============================================================
   The job you're on (job.js). One chip in the header, one sheet to
   switch it; the sheet also carries the per-job tool switches.
   ============================================================ */
.job-chip {
  display: flex; align-items: center; gap: 6px; min-height: 36px; max-width: 46vw;
  padding: 4px 8px 4px 10px;
  /* Dead centre of the header, whatever the logo and menu widths are. The
     header is position: sticky, which makes it the containing block. */
  position: absolute; left: 50%; transform: translateX(-50%);
  border: 1px solid var(--blue); border-radius: 999px; background: var(--blue);
  font: inherit; font-size: 13px; color: var(--white); cursor: pointer;
}
.job-chip svg { width: 16px; height: 16px; flex: 0 0 16px; color: rgba(255, 255, 255, 0.85); }
.job-chip-num { font-weight: 800; white-space: nowrap; }
.job-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--blue-tint); }
.job-chip-none { border-color: var(--gold); background: var(--gold-tint); color: var(--ink); }
.job-chip-none svg { color: var(--gray-7); }
.job-chip-none .job-chip-title { color: var(--ink); font-weight: 700; }
/* On a phone the header is too narrow to centre anything: the logo is a
   wide wordmark (~165px), and a chip pinned to the dead centre of a 390px
   screen lands right on top of it (reported 2026-08-22). So on phones the
   chip stops floating and takes its place in the row — pushed over to sit
   beside the menu button, shrinking (title first) before the logo does. */
@media (max-width: 600px) {
  .job-chip { position: static; transform: none; margin-left: auto; max-width: none; flex: 0 1 auto; min-width: 0; }
  .app-header .logo-btn { flex: 0 0 auto; }
}
@media (max-width: 420px) { .job-chip-title { display: none; } }
.job-chip.hidden { display: none; }

.job-sheet-wrap {
  position: fixed; inset: 0; z-index: 1000; background: rgba(26, 26, 26, 0.5);
  display: flex; align-items: flex-end; justify-content: center;
}
.job-sheet {
  background: var(--white); width: 100%; max-width: 560px; max-height: 92vh;
  overflow-y: auto; border-radius: var(--radius) var(--radius) 0 0; padding: 16px 16px 24px;
}
@media (min-width: 700px) { .job-sheet-wrap { align-items: center; } .job-sheet { border-radius: var(--radius); } }
.job-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.job-sheet-head h2 { margin: 0; font-size: 20px; }
.job-sheet-search {
  width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 16px;
  border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); margin-bottom: 8px;
}
.job-sheet-lbl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; color: var(--gray-5); margin: 10px 0 4px; }
.job-sheet-lbl .hint { font-weight: 600; text-transform: none; letter-spacing: 0; }
.job-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  min-height: 48px; padding: 8px 10px; margin-bottom: 4px; font: inherit;
  border: 1.5px solid var(--gray-2); border-radius: var(--radius-sm); background: var(--white); cursor: pointer;
}
.job-row .jn { font-weight: 800; min-width: 56px; }
.job-row .jt { flex: 1; color: var(--gray-7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-row.on { border-color: var(--blue); background: var(--blue-tint); }
/* The no-division banner's button, and the division sheet's footer. Its own
   class rather than a bare .btn because `.banner .btn-sm` pushes a button to
   the right of the text with margin-left:auto — right for a one-line outbox
   banner, wrong under two lines of explanation where it reads as an orphan. */
.nd-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.nd-actions .btn { width: auto; flex: none; margin-left: 0; }
.banner .nd-actions .btn-sm { margin-left: 0; }

.job-tool-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--gray-1); }
.job-tool-name { font-size: 15px; }
.job-tool-btn { width: auto; min-width: 64px; }
/* A chip that is switched on (work-plan "Quality logs this plan needs"). */
.chip.on { background: var(--blue); color: var(--white); border-color: var(--blue); }
.cp-badge.dup { background: var(--gold-tint); color: #7A5C00; }
.cp-badge.other { background: var(--gold-tint); color: #7A5C00; }
/* The job stamp inside a tool — what replaced the per-form job search box. */
.job-stamp {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px;
  padding: 8px 12px; text-align: left; font: inherit; font-size: 15px; color: var(--ink);
  border: 1.5px solid var(--blue-tint); border-radius: var(--radius-sm); background: var(--blue-tint); cursor: pointer;
}
.job-stamp svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--blue); }
.job-stamp-text { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-stamp-change { font-size: 13px; font-weight: 700; color: var(--blue); }
/* DRA start: "Copy my last DRA" carries its own subtitle inside the button. */
.dra-copy { display: flex; align-items: center; gap: 10px; text-align: left; }
.dra-copy-text { display: flex; flex-direction: column; line-height: 1.2; }
.dra-copy-text small { font-weight: 500; font-size: 13px; color: var(--gray-5); }
/* A job shown but not changeable here (DRA form) — the chip is where it changes. */
.job-fixed {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px;
  font-size: 15px; font-weight: 700; color: var(--ink);
  border: 1.5px solid var(--gray-2); border-radius: var(--radius-sm); background: var(--gray-1);
}
.job-fixed svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--gray-5); }
.dra-steps .check-item { margin-bottom: 6px; }
.cp-badge.job { background: var(--red-tint); color: var(--red); }
.cp-note.bad { background: var(--red-tint); color: var(--red); }

/* DRA start screen redesign: the compact date row that replaced the in-card
   date field, and the start-list card that replaced the stack of outline
   buttons for Copy / Talk it out / Snap the paper form / Print a blank form. */
.date-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--gray-2);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px var(--s4); min-height: 56px; margin-bottom: var(--s4);
}
.date-row .ic { color: var(--blue); }
.date-row-label { flex: 1; font-size: 16px; font-weight: 700; }
/* Gloved-thumb target: the small ghost recipe is 40px; this one needs 48px. */
.date-row .btn-sm { min-height: 48px; }
/* Pulls the expanded field up under the row instead of leaving a full .field
   margin-bottom gap between them. */
#dateFieldWrap { margin: -6px 0 var(--s4); }

.start-list { padding: 0; }
.start-row {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  min-height: 60px; padding: 10px var(--s4);
  background: var(--white); border: none; border-bottom: 1px solid var(--gray-2);
  font-family: var(--font); font-size: 17px; font-weight: 600; color: var(--ink);
  text-align: left; cursor: pointer;
}
.start-row:last-child { border-bottom: none; }
.start-row:active { background: var(--blue-tint); }
.start-row-ic {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--blue-tint); color: var(--blue); flex: none;
}
.start-row-ic .ic { width: 22px; height: 22px; }
.start-row-chev { color: var(--gray-5); flex: none; width: 20px; height: 20px; }
.start-row-label { flex: 1; }
/* "Print a blank form" — the visually quieter row, matching its old ghost button. */
#startPrint.start-row { color: var(--gray-7); }
#startPrint .start-row-ic { background: var(--gray-1); color: var(--gray-7); }

/* ---- Camera Site Audit (camera.js) ---- */
.cam-seg .seg-btn.on-yes { background: var(--green); border-color: var(--green); color: var(--white); }
.cam-seg .seg-btn.on-no { background: var(--red); border-color: var(--red); color: var(--white); }
.cam-seg .seg-btn.on-na { background: var(--gray-5); border-color: var(--gray-5); color: var(--white); }
.cam-hero {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 16px; margin-bottom: 6px;
}
.cam-hero-pct { font-size: 32px; font-weight: 800; color: var(--blue); flex: none; min-width: 76px; }
.cam-hero-body { flex: 1; min-width: 0; }
.cam-hero-body b { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cam-hero-body span { display: block; font-size: 14px; color: var(--ink); margin-top: 2px; }
/* Score colour, hero and past-row badge alike — same thresholds as the
   Check Your Job tile (status.js renderTiles(): green 90+, gold 70-89, red
   under 70, gray NA when the latest audit's questions all came back N/A). */
.cam-hero-pct-good { color: var(--green-dark); }
.cam-hero-pct-gold { color: var(--gold-ink); }
.cam-hero-pct-red  { color: var(--red); }
.cam-hero-pct-na   { color: var(--gray-5); }
.cam-badge {
  flex: none; min-width: 54px; text-align: center; padding: 5px 10px; border-radius: 999px;
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.cam-badge-good { background: var(--green-tint); color: var(--green-dark); }
.cam-badge-gold { background: var(--gold-tint); color: var(--gold-ink); }
.cam-badge-red  { background: var(--red-tint); color: var(--red); }
.cam-badge-na   { background: var(--gray-1); color: var(--gray-5); }

/* ============================================================
   Toolbox Talk screen redesign (toolbox.js screenTalk): the talk
   card's Read/PDF action row, the quiet crew-copy and notes-toggle
   rows, and the sticky "Submit talk" bar. The date-row it also uses
   is the shared .date-row block above (~2378) — no new CSS needed
   for that part.
   ============================================================ */
.tb-talk-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* "Copy crew from DRA" — a lookup, not a commitment, so it reads lighter
   than "Add signature" above it. Centered text row, not a button. */
.tb-copycrew {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; margin-top: 6px;
  background: none; border: none; color: var(--blue);
  font-family: var(--font); font-size: 15px; font-weight: 700; cursor: pointer;
}
.tb-copycrew:active { opacity: 0.6; }

/* "Add notes (optional)" — collapsed by default; reveals #tbNotesWrap around
   the same #tb_notes textarea (see screenTalk()). */
.tb-notes-toggle {
  display: flex; align-items: center; width: 100%;
  min-height: 48px; padding: 0 2px;
  background: none; border: none; color: var(--blue);
  font-family: var(--font); font-size: 16px; font-weight: 700;
  text-align: left; cursor: pointer;
}
.tb-notes-toggle:active { opacity: 0.6; }

/* Pinned "Submit talk" — the status line rides inside the bar so submit
   feedback is never hidden underneath it. Sticky, like .tb-rd-foot above. */
.tb-submit-bar {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--white); border-top: 1px solid var(--gray-2);
  box-shadow: 0 -2px 10px rgba(26, 26, 26, 0.08);
  padding: 10px var(--s4); margin-top: 12px;
}
.tb-submit-bar .tb-status { margin-bottom: 8px; }
.tb-submit-bar #tbSubmit { min-height: 60px; width: 100%; }

/* ============================================================
   Truck-ticket sheet redesign (concrete.js openTicketModal): a
   pinned header ("Truck N of total" / "New truck", Save moved in
   beside it) and one big test field per row instead of the old
   two-column grid. Shared by both materials (PROFILES), so this is
   all scoped to .cp-* classes, never to a material's field ids.
   ============================================================ */
.cp-tk-head {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  /* Bleed to the sheet's own edges — cancels .cp-sheet's padding — then
     re-applies it, so the header covers what scrolls under it edge to edge. */
  margin: -18px -16px 12px; padding: 12px 16px;
  background: var(--white); border-bottom: 1px solid var(--gray-2);
  box-shadow: 0 6px 10px -8px rgba(26, 26, 26, 0.35);
}
.cp-tk-head-l { min-width: 0; flex: 1 1 auto; }
.cp-tk-title { font-size: 18px; font-weight: 700; }
.cp-tk-sub {
  font-size: 13px; color: var(--gray-5); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-tk-head .cp-tk-save { flex: 0 0 auto; width: auto; padding: 0 20px; }

/* Save moved into the header, so Remove no longer shares a row with it —
   it drops to a quiet standalone action instead of a second command of
   equal weight next to Cancel's slot. */
.cp-btnrow .cp-tk-remove {
  flex: 0 0 auto; width: auto; margin: 0 auto;
  background: none; border: none; text-decoration: underline;
}

/* One test per row, big enough to read and hit with a glove on. */
.cp-test-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-1);
}
.cp-test-row label { font-size: 17px; font-weight: 700; }
.cp-test-row label .u { font-weight: 500; color: var(--gray-5); }
.cp-test-in {
  width: 130px; min-height: 56px; flex: none;
  font-size: 22px; font-weight: 700; text-align: center;
  border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
}
.cp-test-in:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.15);
}

/* Pass/Fail/Not tested reads a hair taller here than the shared .seg-btn. */
.cp-insp .seg-btn { min-height: 52px; }

/* ==== Job schedule — Gantt (screenSchedImport) ====
   Appended, not interleaved with the rules above — a parallel session has
   in-flight edits elsewhere in this file. Everything below is new: the
   List/Gantt toggle, the Gantt itself (fixed label column + a horizontally-
   scrolling timeline pane, page scroll stays vertical-only), and the wider
   .df-xwide screen it needs room on. Every colour reuses a :root token from
   the top of this file — this app has no dark-mode block to keep in step,
   so none is added here either. */

/* Wider than .df-wide (~1923 above) for the one screen with a chart to
   show, not a form — stacked with .df-wide in the markup so this class only
   has to say how much MORE room it wants, same as .df-wide itself relies on
   the plain .screen rule for padding and centering. */
/* padding-bottom: the plain .screen keeps 120px clear for the fixed bottom
   bar the form screens have. The schedule has no such bar, and that empty
   120px was the one thing pushing the page past the window and putting a
   second scroll bar beside the grid's own. */
.screen.df-xwide { max-width: none; width: 100%; box-sizing: border-box; padding-left: 20px; padding-right: 20px; padding-bottom: 16px; }

/* Schedule on a computer: a one-line header and a card with no title bar, so
   the grid starts near the top and runs the full width of the window. */
.sg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; }
.sg-head h1 { margin: 0; font-size: 22px; }
.sg-head .sub { margin: 0; }
.sg-head-job { font-weight: 600; color: var(--ink); }
.sg-head-gap { flex: 1 1 auto; }
.sg-card > .card-body { padding: 12px 14px; }
.sg-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sg-quick select, .sg-quick input[type="date"] {
  width: auto; min-height: 32px; height: 32px; padding: 2px 8px; font-size: 13px; margin: 0;
}
.sg-quick-d { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--gray-5); margin: 0; white-space: nowrap; }

/* List | Gantt segmented toggle — plain .btn.btn-ghost.btn-sm pairs, same
   "on" idea as .df-tab.on and .ob-seg button.on elsewhere, just named for
   this screen since it isn't either of those controls. */
.df-seg { display: flex; gap: 8px; margin-bottom: 12px; }
.df-seg-on { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Fixed label column: activity ID over the name, both single-line and
   ellipsized rather than wrapping — wrapping would break the row's 1:1
   alignment with its bar on the other side of the split. */
.df-gantt-body { display: flex; align-items: flex-start; }
.df-gantt-labels { flex: 0 0 280px; width: 280px; min-width: 0; }
.df-gantt-labels-hdr { height: 34px; }
.df-gantt-label-row {
  height: 30px; display: flex; flex-direction: column; justify-content: center;
  padding-right: 10px; border-bottom: 1px solid var(--line-soft); overflow: hidden;
}
.df-gantt-label-id { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-gantt-label-name { font-size: 11.5px; color: var(--gray-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The timeline pane is the ONLY thing allowed to scroll sideways — .screen's
   own overflow-x:clip (line ~157) is the backstop behind that, same role it
   already plays for the date/time inputs elsewhere in the app. */
.df-gantt-pane { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.df-gantt-inner { position: relative; }
.df-gantt-hdr { position: relative; height: 34px; border-bottom: 1px solid var(--line); }
.df-gantt-hdr-m {
  position: absolute; top: 8px; padding-left: 4px; border-left: 1px solid var(--gray-3);
  font-size: 11.5px; font-weight: 700; color: var(--gray-5); white-space: nowrap;
}
.df-gantt-hdr-today {
  position: absolute; top: 6px; transform: translateX(-50%);
  font-size: 11px; font-weight: 800; color: var(--gold-ink); background: var(--gold-tint);
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
}
.df-gantt-grid { position: relative; }
.df-gantt-grid-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft); }
.df-gantt-grid-line-m { background: var(--gray-3); }
/* The gold accent, same token the "out for signatures" banner and other
   today-markers in this app already use — a Gantt's "today" is that same
   fact, just drawn as a line instead of a banner. */
.df-gantt-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); z-index: 2; }

/* Bars. Position/width are inline styles the drag handlers in dfow.js read
   and rewrite directly — see wireSchedBar() — so nothing about placement
   lives here, only appearance. touch-action:none stops the browser from
   treating a drag as a page scroll on a touchscreen. */
.df-gantt-bar {
  position: absolute; height: 22px; border-radius: 6px; overflow: hidden;
  background: var(--blue); box-shadow: 0 1px 2px rgba(26, 26, 26, 0.15);
  cursor: grab; touch-action: none;
}
.df-gantt-bar:active { cursor: grabbing; }
.df-gantt-bar-done { background: var(--green); }
/* Critical — the scheduler's own flag (schedule_phase1.sql), never a
   critical path the app computed itself. Declared after -done so a bar that
   is somehow both (a grid import's Critical column, independent of pct)
   reads as critical, which is the more useful thing to notice. */
.df-gantt-bar-critical { background: var(--red); }
.df-gantt-fill { position: absolute; top: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.22); }
.df-gantt-h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; touch-action: none; }
.df-gantt-h-l { left: 0; }
.df-gantt-h-r { right: 0; }

/* "No dates yet" — activities the chart above has nowhere to draw. */
.df-gantt-nodates { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.df-gantt-nd-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft);
}
.df-gantt-nd-label { font-size: 14px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-gantt-nd-row .btn { flex: none; }

/* Edit strip — pinned above the chart inside the card, never a floating
   popover, so it can never end up covering the bar it's editing. */
.df-gantt-edit {
  background: var(--gray-1); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 12px 14px; margin-bottom: 12px;
}

/* ============================================================
   Schedule Table/Gantt — the column grid (schedgrid.js), Phase 2
   (2026-09-18). Non-phone only — the plain List and the phone's original
   fixed-label Gantt (.df-gantt-*, just above) are untouched, and reused
   here where it's the same idea (bars, month header, today line) so the
   two Gantts read as the same drawing. Everything new is prefixed .sg-
   so nothing here can collide with those. Design:
   docs/schedule-START-HERE.md; the table is sql/migrations/
   schedule_phase2.sql.
   ============================================================ */

/* Toolbar — one row of ghost buttons, wraps on a narrow tablet. */
/* List | Table | Gantt and the grid's own toolbar share one row (wrapping on
   a narrow window) — one place to look for "how am I viewing this". */
.sg-toprow { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-bottom: 10px; }
.sg-toprow .df-seg, .sg-toprow .sg-toolbar { margin-bottom: 0; }
/* The toolbar's own wrappers dissolve inside the row, so its buttons wrap one
   at a time alongside the view toggle instead of dropping as a block. */
.sg-toprow #sg_toolbar, .sg-toprow .sg-toolbar { display: contents; }
.sg-count { margin: 0 0 0 auto; white-space: nowrap; font-size: 13px; }
.sg-head-info { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.sg-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.sg-toolbar .btn { width: auto; }
.btn-xs { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.sg-blchk { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--gray-7); white-space: nowrap; }
.sg-blchk input[disabled] { cursor: not-allowed; }
.sg-links { display: flex; align-items: center; gap: 6px; }
.sg-links-label { font-size: 13px; color: var(--gray-5); }

/* Columns / Filters / View dropdown — a plain card under the toolbar, not
   a floating popover (same reasoning as .df-gantt-edit above: it must
   never cover what it's editing). */
.sg-panel { background: var(--gray-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 10px; }
.sg-colgroup-h { font-size: 12px; font-weight: 800; color: var(--gray-5); text-transform: uppercase; letter-spacing: 0.03em; margin: 10px 0 6px; }
.sg-colgroup-h:first-child { margin-top: 0; }

.sg-panel-cols { display: flex; flex-wrap: wrap; gap: 20px; }
.sg-panel-cols-pick { display: flex; flex-wrap: wrap; gap: 16px; flex: 2 1 320px; }
.sg-panel-cols-pick .sg-colgroup-h { margin-top: 0; }
.sg-colgroup { min-width: 140px; }
.sg-colchk { display: block; font-size: 13.5px; padding: 3px 0; cursor: pointer; }
.sg-panel-cols-order { flex: 1 1 220px; min-width: 200px; }
.sg-order-list { list-style: none; margin: 0; padding: 0; }
.sg-order-li { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-bottom: 1px solid var(--line-soft); font-size: 13px; cursor: grab; }
.sg-order-drag { color: var(--gray-3); flex: none; width: 16px; height: 16px; }
.sg-order-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-order-btn { flex: none; width: 24px; height: 24px; border: 1px solid var(--gray-3); background: var(--white); border-radius: 6px; color: var(--gray-5); }
.sg-order-btn[disabled] { opacity: 0.35; }
.sg-order-btn svg { width: 14px; height: 14px; }

.sg-filt-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.sg-filt-row select, .sg-filt-row input { width: auto; min-width: 0; margin-bottom: 0; }
.sg-filt-rm { flex: none; border: none; background: none; color: var(--gray-5); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sg-filt-rm:hover { color: var(--red); }
.sg-filt-rm svg { width: 15px; height: 15px; }

.sg-view-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.sg-view-pick {
  flex: 1 1 auto; min-width: 0; text-align: left; border: none; background: none; padding: 4px 2px;
  font-size: 13.5px; color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sg-view-pick:hover { text-decoration: underline; }
.sg-view-mini { flex: none; border: 1px solid var(--gray-3); background: var(--white); border-radius: 6px; font-size: 11.5px; padding: 3px 8px; color: var(--gray-5); cursor: pointer; }

/* The grid itself — a single vertically-scrolling wrapper holds the grid
   pane and (Gantt only) the chart pane side by side, so ONE scrollbar
   keeps their rows in lockstep. Each pane scrolls sideways on its own
   (overflow-x), never vertically on its own — that would break the sync. */
/* 68vh is only the fallback before script runs: dfow.js schedFitHeight
   sets the real max-height so the box ends exactly where the window does,
   with the hint line under it still in view and no page scroll bar. */
.sg-scroll { max-height: 68vh; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sg-wrap { display: flex; align-items: flex-start; }
.sg-gridpane { flex: 0 0 auto; overflow-x: auto; min-width: 0; }
/* The column header (and .sg-chart-hdr below) must stay in view while the
   rows scroll. position: sticky alone cannot do it here: each header sits
   inside its pane, and a pane with overflow-x is a scroll box of its own,
   so sticky pins the header to the pane — which never moves up or down —
   instead of to .sg-scroll, which does. dfow.js wireSchedStickyHeads
   slides both headers down by .sg-scroll's scrollTop instead (a transform,
   so the header keeps scrolling sideways with its own pane). z-index keeps
   the rows, bars and the today line underneath as it passes over them. */
.sg-header { display: flex; position: relative; top: 0; z-index: 3; background: var(--gray-1); border-bottom: 1px solid var(--line); }
.sg-th {
  position: relative; flex: none; box-sizing: border-box;
  padding: 0 8px; display: flex; align-items: center;
  font-size: 11.5px; font-weight: 800; color: var(--gray-5); text-transform: uppercase; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; user-select: none;
  border-right: 1px solid var(--line-soft);
}
.sg-th:hover { background: var(--gray-2); }
.sg-resize { position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; cursor: col-resize; z-index: 1; }
.sg-body { position: relative; }
.sg-tr { display: flex; box-sizing: border-box; border-bottom: 1px solid var(--line-soft); }
.sg-tr-alt { background: var(--gray-1); }
.sg-tr[data-id] { cursor: pointer; }
.sg-tr[data-id]:hover { background: var(--blue-tint); }
/* An editable cell says so on hover; the input that replaces its text fills
   the cell exactly, so the row never changes height while typing. */
.sg-td-edit { cursor: text; }
.sg-td-edit:hover { box-shadow: inset 0 0 0 1px var(--blue); background: #fff; }
.sg-cell-input {
  width: 100%; height: 24px; min-height: 0; box-sizing: border-box; margin: 0; padding: 0 4px;
  font: inherit; font-size: 13px; border: 1px solid var(--blue); border-radius: 4px; background: #fff;
}
.sg-td {
  flex: none; box-sizing: border-box; padding: 0 8px; display: flex; align-items: center;
  font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid var(--line-soft);
}
/* Late = red ink, early = green ink — same two tokens the app already
   uses for this idea (banner-red/banner-green, cam-hero-pct-*). */
.sg-var-late { color: var(--red); font-weight: 700; }
.sg-var-early { color: var(--green-dark); font-weight: 700; }
.sg-crit { color: var(--red); font-weight: 700; }

/* The draggable splitter between the grid pane and the chart pane
   (Gantt only) — a slim bar, not a full column, so it doesn't eat into
   either pane's own horizontal scroll room. */
.sg-splitter { flex: 0 0 6px; align-self: stretch; cursor: col-resize; background: var(--gray-2); }
.sg-splitter:hover, .sg-splitter.sg-dragging { background: var(--blue); }

.sg-chartpane { flex: 1 1 auto; min-width: 0; overflow-x: auto; position: relative; }
/* Kept in view the same way as .sg-header (see there). z-index 3, not 2:
   the today line is z-index 2 and later in the DOM, so at 2 it would draw
   over the month header once the header has slid down onto it. */
.sg-chart-hdr { position: relative; top: 0; z-index: 3; background: var(--white); border-bottom: 1px solid var(--line); }

/* Sideways scroll bars, pinned to the foot of the window. Each pane's own
   bar sits under its last row — out of reach on a long schedule — so this
   sticky strip holds a stand-in per pane (dfow.js wireSchedHbar keeps the
   two in step) and the panes' own bars are hidden while it is on. */
.sg-hbar { display: none; position: sticky; bottom: 0; z-index: 4; background: var(--gray-1); border-top: 1px solid var(--line); }
.sg-hbar-on > .sg-hbar { display: flex; }
.sg-hbar-pane { flex: none; overflow-x: auto; overflow-y: hidden; }
.sg-hbar-size { height: 1px; }
.sg-hbar-gap { flex: 0 0 6px; background: var(--gray-2); }
.sg-hbar-on .sg-gridpane, .sg-hbar-on .sg-chartpane { scrollbar-width: none; }
.sg-hbar-on .sg-gridpane::-webkit-scrollbar, .sg-hbar-on .sg-chartpane::-webkit-scrollbar { display: none; }
.sg-chart-grid { position: relative; }

/* Baseline strip — a thin gray bar under the current bar in the same
   row. Never draggable: no pointer handlers are ever wired to it, only
   to the .df-gantt-bar sitting above it. */
.sg-bl-strip { position: absolute; height: 5px; border-radius: 3px; background: var(--gray-3); }

.sg-links-svg { position: absolute; top: 0; left: 0; pointer-events: none; }
.sg-link-crit { stroke: var(--red); stroke-width: 1.5px; }
.sg-link-all { stroke: var(--gray-5); stroke-width: 1px; }
.sg-arrow-crit { fill: var(--red); }
.sg-arrow-all { fill: var(--gray-5); }

/* ---- Work plan view (dfow-view.js) ----
   The Work plan button (PZ.wpBtn in lazy.js) on a Daily Log line and a look-ahead row, and the read-only
   viewer it opens: a full-screen layer on a phone, a 520px column on a laptop; six sideways pages, a bar of
   big buttons under them, a slide-up sheet for one step. Phone sizes: text 16px or more, every tap 48px or more. */
.wp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; font: inherit; font-size: 16px; font-weight: 700; color: var(--blue); background: var(--white); border: 2px solid var(--blue); border-radius: var(--radius); cursor: pointer; white-space: nowrap; }
.wp-btn:active { background: var(--blue-tint); }
.wp-btn .ic { width: 22px; height: 22px; flex: none; vertical-align: 0; }
.wp-full { width: 100%; margin-top: 10px; }
.dl-sb > .wp-full { margin-top: 0; }
.wp-sm { min-height: 0; height: 24px; padding: 0 6px; gap: 3px; margin-left: 4px; font-size: 11px; font-weight: 600; line-height: 1; border-width: 1px; border-radius: 6px; vertical-align: middle; }
.wp-sm .ic { width: 13px; height: 13px; }
.wp-ic { width: 24px; padding: 0; flex: none; }   /* icon only (dense laptop tables); the words are in the tooltip */
.wp-ic span { display: none; }
body.wpv-noscroll { overflow: hidden; }
.wpv { position: fixed; inset: 0; z-index: 1020; display: flex; justify-content: center; align-items: stretch; background: rgba(26, 26, 26, .45); }
.wpv-panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 520px; height: 100%; background: var(--gray-1); outline: none; font-size: 17px; }
@media (min-width: 700px) { .wpv { padding: 16px 0; } .wpv-panel { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); } }
.wpv .bi-tr { font-size: 16px; }
.wpv-head { flex: none; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 10px 16px; background: var(--white); border-bottom: 1px solid var(--line); }
.wpv-hrow { display: flex; align-items: center; gap: 10px; }
.wpv-htx { flex: 1; min-width: 0; }
.wpv-title { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.wpv-sm { display: block; font-size: 16px; color: var(--muted); overflow-wrap: anywhere; }
.wpv-sm.late { color: var(--red); font-weight: 700; }
.wpv-x { flex: none; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; color: var(--gray-7); background: var(--gray-1); border: 1px solid var(--gray-3); border-radius: var(--radius); cursor: pointer; }
.wpv-x .ic { width: 24px; height: 24px; vertical-align: 0; }
.wpv-chip { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 12px; font-size: 14px; font-weight: 700; }
.wpv-chip.ok { background: var(--green-tint); color: var(--green-dark); border: 1px solid #BCDCA9; }
.wpv-bn { margin: 10px 0 0; }
.wpv-tabs { position: relative; flex: none; display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; background: var(--white); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.wpv-tabs::-webkit-scrollbar { display: none; }
.wpv-tabs[hidden], .wpv-bar[hidden] { display: none; }
.wpv-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; font: inherit; font-size: 16px; font-weight: 700; color: var(--gray-7); background: var(--white); border: 1.5px solid var(--gray-3); border-radius: 24px; cursor: pointer; white-space: nowrap; }
.wpv-tab.on { color: var(--white); background: var(--blue); border-color: var(--blue); }
.wpv-n, .wpv-hn { min-width: 26px; padding: 0 7px; font-size: 16px; font-weight: 700; line-height: 26px; text-align: center; color: var(--ink); background: var(--gray-2); border-radius: 13px; }
.wpv-tab.on .wpv-n { color: var(--white); background: rgba(255, 255, 255, .25); }
.wpv-pager { flex: 1 1 auto; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.wpv-pager::-webkit-scrollbar { display: none; }
.wpv-page { flex: 0 0 100%; min-width: 0; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-align: start; scroll-snap-stop: always; }   /* y only: "contain" on x would stop a sideways swipe chaining up to the pager */
.wpv-pg { display: grid; gap: 12px; align-content: start; padding: 14px 16px 24px; }
.wpv-msg { flex: 0 0 100%; display: grid; gap: 14px; align-content: start; padding: 24px 16px; }
.wpv-msg .sub { margin: 0; }
.wpv-fail { margin: 0; font-size: 18px; font-weight: 700; }
.wpv-bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(26, 26, 26, .08); }
.wpv-bar .btn, .wpv-sbar .btn { flex: 1; margin: 0; }
.wpv-sbar .btn { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.wpv-of { flex: none; min-width: 64px; text-align: center; font-size: 16px; font-weight: 700; color: var(--gray-7); }
.wpv-card, .wpv-haz { margin: 0; }
.wpv-card { padding: 2px 16px; }
.wpv-kv { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.wpv-kv:last-child { border-bottom: 0; }
.wpv-k, .wpv-cl { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.wpv-v, .wpv-nb, .wpv-desc { font-size: 17px; white-space: pre-wrap; overflow-wrap: anywhere; }
.wpv-desc { margin: 0; }
.wpv-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wpv-tile { display: grid; align-content: center; gap: 2px; min-height: 96px; padding: 12px 16px; text-align: left; font: inherit; color: var(--ink); background: var(--white); border: 1.5px solid var(--gray-2); border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer; }
.wpv-tile:active { background: var(--gray-1); }
.wpv-tile b { font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--blue); }
.wpv-tile span { font-size: 16px; font-weight: 700; color: var(--gray-7); }
.wpv-row { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 64px; padding: 13px 12px; text-align: left; font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); cursor: pointer; }
.wpv-row:active { background: var(--gray-1); }
.wpv-row.hold { border-left-color: var(--gold); }
.wpv-row.static { cursor: default; border-left-color: var(--gray-3); }
.wpv-row.static.ok { border-left-color: var(--green); }
.wpv-no { flex: 0 0 40px; height: 40px; display: grid; place-items: center; font-size: 17px; font-weight: 800; color: var(--blue); background: var(--blue-tint); border-radius: 10px; }
.wpv-row.hold .wpv-no { color: #8A6500; background: var(--gold-tint); }
.wpv-rt { flex: 1; min-width: 0; display: block; text-align: left; }
.wpv-rt b { display: block; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.wpv-rt > .wpv-sm { margin-top: 2px; }
.wpv-chev { flex: none; font-size: 26px; line-height: 1; color: var(--faint); }
.wpv-hzs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wpv-hz { padding: 2px 10px; font-size: 16px; color: var(--gray-7); background: var(--gray-1); border: 1px solid var(--line); border-radius: 12px; }
.wpv-tag { display: inline-block; margin-top: 8px; padding: 2px 8px; font-size: 14px; font-weight: 800; letter-spacing: .06em; color: #7A5C00; background: var(--gold-tint); border: 1px solid #EAD48A; border-radius: 6px; }
.wpv-h { display: flex; align-items: center; gap: 8px; margin: 6px 2px -2px; font-size: 18px; font-weight: 800; }
.wpv-note, .wpv-sub { padding: 13px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.wpv-nm { margin-bottom: 4px; font-size: 16px; font-weight: 700; color: var(--muted); }
.wpv-sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.wpv-sh b { font-size: 17px; }
.wpv-pill { padding: 2px 10px; font-size: 14px; font-weight: 700; color: var(--gray-7); background: var(--gray-1); border: 1px solid var(--gray-3); border-radius: 12px; }
.wpv-pill.open { color: var(--blue-dark); background: var(--blue-tint); border-color: #BAD2EE; }
.wpv-none, .wpv-hint { margin: 0; padding: 0 2px; font-size: 16px; color: var(--muted); }
.wpv-list { padding: 0 16px; }
.wpv-li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.wpv-li:last-child { border-bottom: 0; }
.wpv-li b { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.wpv-li span { flex: none; font-size: 16px; color: var(--muted); }
.wpv-sheetwrap { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; background: rgba(26, 26, 26, .45); }
.wpv-sheet { display: flex; flex-direction: column; width: 100%; max-width: 520px; max-height: 92vh; max-height: 92dvh; overflow: hidden; background: var(--white); border-radius: 18px 18px 0 0; outline: none; }
.wpv-shead { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--gray-2); }
.wpv-shead .wpv-rt b { font-size: 18px; }
.wpv-shdone { flex: none; width: auto; min-height: 48px; padding: 0 22px; font-size: 16px; }
.wpv-sb { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 20px; overflow-y: auto; overscroll-behavior: contain; }
.wpv-sb > * { flex: none; }   /* not a grid: a grid squeezes an overflow:hidden card to less than its content when the sheet is full */
.wpv-sb .banner { margin-bottom: 0; }
.wpv-sbar { flex: none; display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(26, 26, 26, .08); }
.wpv-haz { padding: 12px 14px; }
.wpv-hh { display: flex; align-items: center; gap: 12px; }
.wpv-hi { flex: none; width: 48px; height: 48px; }
.wpv-hname { font-size: 18px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.wpv-cl { margin: 12px 0 6px; }
.wpv-ul { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: 17px; }
/* Documents (dfow-view.js): a row is a 56px picture or file badge, the title with who / when, and a 48px Remove; the proof line on a
   quality item, the Documents page and the list of removed ones all use it. The add sheet is a second slide-up above the step sheet. */
.wpv-docs { display: grid; }
.wpv-doc { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-soft); }
.wpv-doc:last-child { border-bottom: 0; }
.wpv-dl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; color: inherit; text-decoration: none; }
.wpv-dth { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--gray-2); }
.wpv-dk { display: grid; place-items: center; font-size: 14px; font-weight: 800; letter-spacing: .04em; color: var(--blue); background: var(--blue-tint); }
.wpv-drm { flex: none; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; font: inherit; color: var(--red); background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius); cursor: pointer; }
.wpv-drm .ic { width: 22px; height: 22px; vertical-align: 0; }
.wpv-drm.armed { width: auto; min-width: 96px; padding: 0 10px; font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--white); background: var(--red); border-color: var(--red); }
.wpv-drs { flex: none; min-height: 48px; padding: 0 16px; font-size: 16px; }
.wpv-card > .wpv-hname { padding: 12px 0 2px; }
.wpv-gs { margin: 6px 2px 0; }
.wpv-addbtn { margin-top: 10px; }
.wpv-addwrap { z-index: 3; }
.wpv-in { font-weight: 700; color: var(--ink); }
.wpv-abtns { display: grid; gap: 10px; }
@media (min-width: 700px) { .wpv-abtns { grid-template-columns: 1fr 1fr; } }
.wpv-pick { margin: 0; cursor: pointer; }
.wpv-flist { display: grid; gap: 8px; }
.wpv-fr { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; background: var(--gray-1); border: 1px solid var(--line); border-radius: var(--radius); }
.wpv-flist:empty, .wpv-aerr:empty { display: none; }
.wpv-sb .field { margin-bottom: 0; }

/* ============================================================
   Look-ahead (lookahead.js + lookahead-grid.js) — the 4-week plan grid.
   Modeled on docs/lookahead-mockup.html. Light box = planned, solid = done,
   dashed = planned and past without being done, hatched = weekend, shaded
   = last week. Only the checkbox and Activity columns are frozen. On a phone
   the grid scrolls sideways inside its own box; the page never does.
   ============================================================ */
.la-root { --la-plan: #F3B4A9; --la-done: #B8412F; --la-bar: #A6A8A3; --la-past: #F1F1EE; --la-today: #E6F0FF; --la-warn: #C98A1B; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
/* minmax(0, 1fr): a grid track defaults to min-width auto, so the wide day table was stretching the
   whole column past the window and the toolbar / selection bar never wrapped — Save draft, Commit,
   Undo and Clear selection sat off-screen to the right (user, 2026-09-30). */
.la-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.la-top .sub, .la-legend .sub, .la-pop .sub, .la-table .sub { margin: 0; font-size: 12.5px; }
.la-pill { font-size: 12px; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.la-pill.draft { border-color: var(--la-warn); color: var(--la-warn); }
.la-pill.committed { border-color: var(--green); color: var(--green-dark); }
.la-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
.la-bar .btn { width: auto; }
.la-grow { flex: 1; }
.la-status { font-size: 12.5px; color: var(--gray-7); white-space: nowrap; }
.la-status.bad { color: var(--la-warn); }
.la-status .la-retry { background: none; border: 0; padding: 0; margin-left: 6px; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.la-ctl { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--gray-7); }
.la-ctl select { width: auto; font-size: 13.5px; padding: 4px 6px; border: 1px solid var(--gray-3); border-radius: 6px; background: var(--white); }
.la-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; max-height: 72vh; max-width: 100%; }
.la-table { border-collapse: separate; border-spacing: 0; font-size: 13px; }
.la-table th, .la-table td { border-bottom: 1px solid var(--line-soft); padding: 0; height: 30px; white-space: nowrap; }
.la-table thead th { position: sticky; top: 0; background: var(--white); z-index: 2; font-weight: 600; color: var(--muted); font-size: 12px; }
.la-table thead tr.la-wk th { height: 26px; border-bottom: 0; text-align: left; padding-left: 6px; border-left: 2px solid var(--gray-3); }
.la-table thead tr.la-wk th.f { border-left: 0; }
.la-table thead tr.la-dy th { top: 26px; height: 32px; text-align: center; font-size: 11px; min-width: 24px; line-height: 1.2; }
.la-table thead tr.la-dy th.we { color: var(--gray-3); background: #E9E8E2; }
.la-table thead th.today { background: var(--la-today); color: var(--ink); font-weight: 700; }
.la-table thead th.past { background: var(--la-past); }
.la-table th.f, .la-table td.f { background: var(--white); text-align: left; padding: 0 8px; border-right: 1px solid var(--line-soft); }
.la-table .f.c0, .la-table .f.c1 { position: sticky; z-index: 1; }
.la-table thead .f.c0, .la-table thead .f.c1 { z-index: 3; }
/* Column widths: drag the right edge of a text column's header (owner, 2026-09-30). The widths themselves are rules in #laColwStyle,
   written by lookahead-grid.js (applyWidths) from Configure's cfg.widths; a phone ignores them. */
.la-colrz { position: absolute; top: 0; right: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 2; touch-action: none; user-select: none; }
.la-colrz::after { content: ""; position: absolute; top: 4px; bottom: 4px; right: 3px; width: 2px; border-radius: 1px; background: transparent; }
.la-table thead th.f:hover .la-colrz::after { background: var(--gray-4); }
.la-colrz:hover::after, .la-colrz-drag::after { background: var(--blue); }
.la-table.la-colrz-on, .la-table.la-colrz-on th { cursor: col-resize; user-select: none; }
.la-table .f.c0 { left: 0; min-width: 34px; width: 34px; }
.la-table .f.c1 { left: 34px; min-width: 340px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; border-right: 2px solid var(--line); }
.la-table .c-co { min-width: 130px; } .la-table .c-crew { min-width: 140px; } .la-table .c-eq { min-width: 130px; }
.la-table .c-p6s, .la-table .c-p6f { min-width: 78px; font-size: 12px; } .la-table .c-p6p { min-width: 60px; text-align: right; }
.la-table .c-done { min-width: 80px; text-align: right; font-size: 12px; }
.la-table .c-note { min-width: 220px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; }
.la-table .la-click { cursor: pointer; }
/* Columns a team adds itself (lookahead-cols.js): Cost code, Quantity and the job's own columns. Inputs sit in the cell; a drag-set width overrides the min. */
.la-table .c-cc { min-width: 150px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.la-table .c-qty { min-width: 170px; font-size: 12px; }
.la-table [class*="c-x-"] { min-width: 110px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.la-table .la-xin { font: inherit; font-size: 12px; height: 24px; box-sizing: border-box; width: 100%; min-width: 0; padding: 2px 4px; border: 1px solid transparent; border-radius: 5px; background: transparent; }
.la-table .la-xin:hover { border-color: var(--line); background: var(--white); }
.la-table .la-xin:focus { border-color: var(--blue); background: var(--white); outline: none; }
.la-table .la-xq { width: 72px; margin-right: 4px; }
.la-table td.c-qty .la-tag, .la-table td.c-cc .la-tag { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.la-table td.la-xtd { text-align: center; }
.la-table td.la-xd { min-width: 132px; }
.la-cxrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.la-cxrow .la-chk { flex: 1 1 auto; min-width: 0; }
.la-cxtools { display: inline-flex; align-items: center; gap: 4px; padding-right: 10px; flex: none; }
.la-cxtools .la-mv { cursor: pointer; padding: 0 5px; border-radius: 4px; color: var(--muted); font-size: 12px; line-height: 20px; user-select: none; }
.la-cxtools .la-mv:hover { background: var(--gray-2); color: var(--ink); }
.la-cxtools .la-mv.off { opacity: .25; cursor: default; pointer-events: none; }
.la-cxbtn { background: none; border: 0; padding: 2px 4px; font: inherit; font-size: 12px; color: var(--blue); cursor: pointer; text-decoration: underline; }
.la-cxed { padding: 4px 12px 8px; display: grid; gap: 6px; min-width: 240px; }
.la-cxed .la-cxf { display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.la-cxed .la-cxf[hidden] { display: none; }
.la-cxed input, .la-cxed select, .la-cxed textarea { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--gray-3); border-radius: 6px; background: var(--white); width: 100%; box-sizing: border-box; }
.la-cxbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.la-cxbtns .btn { width: auto; }
.la-cxbtns .la-del { color: var(--red); margin-left: auto; }
.la-pop select.la-ask, .la-pop input.la-ask[type=number], .la-pop input.la-ask[type=date] { width: 260px; max-width: calc(100% - 24px); }
.la-table tbody tr:hover td { background: var(--gray-1); }
.la-table tr.la-parent td.f.c1 { font-weight: 700; }
.la-table td.lvl1 { padding-left: 20px; }
.la-table input[type=checkbox] { width: auto; height: auto; margin: 0; vertical-align: middle; }
.la-caret { display: inline-block; width: 14px; color: var(--muted); font-size: 11px; cursor: pointer; user-select: none; }
.la-tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); margin-right: 4px; background: var(--gray-1); }
.la-tag.sub { border-color: var(--blue); color: var(--blue); }
.la-tag.eq { font-family: Consolas, monospace; }
.la-tag.eq.owned { background: var(--blue-tint); border-color: var(--blue); color: var(--blue-dark); }
.la-tag.eq.rental { background: var(--orange-tint); border-color: var(--orange); color: #A4501C; }
.la-tag.add { border-style: dashed; cursor: pointer; }
.la-tag.la-gone { border-color: var(--red); color: var(--red); background: var(--red-tint); }
.la-tag.la-notetag { border-color: var(--la-warn); color: var(--la-warn); cursor: pointer; }
/* Pull from schedule — review: what a pull would add and remove, ticked for approval (lookahead-flow.js) */
.la-pull { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 34px 8px 12px; font-size: 13px; display: grid; gap: 8px; min-width: 0; }
.la-pull .la-flagx { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.la-pull-sec { display: grid; gap: 4px; min-width: 0; }
.la-pull .sub { font-size: 12px; margin: 0; }
.la-pull-all { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.la-pull-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
/* one grid for every row, so the code / name / DFOW / dates line up down the list */
.la-pull-row { display: grid; grid-template-columns: 16px 96px minmax(0, 5fr) minmax(0, 3fr) minmax(150px, 4fr); gap: 8px; align-items: center; cursor: pointer; padding: 3px 8px; border-bottom: 1px solid var(--gray-1); }
.la-pull-row:hover { background: var(--gray-1); }
.la-pull input[type=checkbox] { width: auto; height: auto; margin: 0; flex: none; }
.la-pull-row .la-src { margin-left: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-pull-row .nm, .la-pull-row .dw { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-pull-row .tg { min-width: 0; font-size: 12px; }
.la-pull-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.la-pull-foot .btn { width: auto; }
.la-pull-foot .sub { flex: 1 1 280px; }
.la-tag.la-pdone { border-color: var(--la-warn); color: #7A5C00; background: var(--gold-tint); font-weight: 600; }
.la-warn { color: var(--orange); margin-left: 4px; font-size: 10px; cursor: help; }
.la-src { font-family: Consolas, monospace; font-size: 10px; color: var(--muted); margin-left: 6px; }
.la-src.p6 { color: var(--blue); }
.la-table td.d, .la-table th.d { border-left: 1px solid #DCE1E8; }
.la-table td.d.mon, .la-table th.d.mon { border-left: 2px solid var(--gray-3); }
.la-table td.d { width: 24px; min-width: 24px; text-align: center; cursor: crosshair; position: relative; user-select: none; }
.la-table td.d.we { background: #E9E8E2 repeating-linear-gradient(135deg, transparent 0 4px, var(--line) 4px 5px); }   /* darker than the first cut: "make the weekend shading a little darker" (user, 2026-09-30) */
.la-table td.d.past { background-color: var(--la-past); }
.la-table td.d.today { box-shadow: inset 2px 0 0 var(--blue); }
.la-table td.d .b { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--la-plan); border: 1px solid var(--la-done); vertical-align: middle; }
.la-table td.d .b.e { opacity: 0; }
.la-table td.d .b.done { background: var(--la-done); border-color: #8F2E1F; }
.la-table td.d .b.miss { background: transparent; border: 1px dashed var(--la-done); opacity: .7; }
.la-table td.d .b.note::after { content: ""; position: absolute; right: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--la-warn); }
.la-table td.d.bar span { display: block; height: 8px; background: var(--la-bar); margin: 11px 0; }
.la-table td.d.bar span.l { border-radius: 4px 0 0 4px; } .la-table td.d.bar span.r { border-radius: 0 4px 4px 0; }
.la-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); align-items: center; }
.la-k { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; }
.la-k.plan { background: var(--la-plan); border: 1px solid var(--la-done); } .la-k.done { background: var(--la-done); }
.la-k.miss { border: 1px dashed var(--la-done); } .la-k.note { background: var(--la-warn); border-radius: 50%; }
.la-k.eq.owned { background: var(--blue-tint); border: 1px solid var(--blue); } .la-k.eq.rental { background: var(--orange-tint); border: 1px solid var(--orange); }
.la-pop { position: fixed; z-index: 400; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px 0; min-width: 210px; max-width: 320px; max-height: 300px; overflow-y: auto; font-size: 13.5px; }
.la-pop-h { margin: 6px 12px 3px; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.la-chk { display: flex; gap: 8px; align-items: center; padding: 5px 12px; cursor: pointer; }
.la-chk:hover, .la-item:hover { background: var(--gray-1); }
.la-chk input { width: auto; height: auto; margin: 0; }
.la-chk .mono { font-family: Consolas, monospace; font-size: 12px; }
.la-fixed { color: var(--muted); }
.la-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 12px; font: inherit; color: var(--ink); cursor: pointer; }
.la-item.on { font-weight: 700; }
.la-tip { position: fixed; z-index: 500; pointer-events: none; background: var(--ink); color: #fff; font-size: 12px; padding: 6px 9px; border-radius: 6px; max-width: 260px; white-space: normal; box-shadow: var(--shadow-lg); display: none; }
.la-tip b { display: block; margin-bottom: 2px; }
/* Selection bar and ticked rows (lookahead-bulk.js) */
.la-selbar { display: none; gap: 8px; align-items: center; background: var(--gold-tint); border: 1px solid var(--la-warn); border-radius: var(--radius); padding: 6px 10px; font-size: 13px; }
.la-selbar.on { display: flex; flex-wrap: wrap; }
.la-selbar .btn { width: auto; }
.la-selbar .la-del { color: var(--red); }
.la-table tbody tr.la-sel td, .la-table tbody tr.la-sel td.f, .la-table tbody tr.la-sel td.d.we, .la-table tbody tr.la-sel td.d.past { background-color: var(--gold-tint); }
.la-shift { display: flex; gap: 6px; align-items: center; padding: 4px 12px 8px; }
.la-shift .btn { width: auto; }
.la-shift .la-num { width: 64px; font-size: 13.5px; padding: 4px 6px; border: 1px solid var(--gray-3); border-radius: 6px; }
.la-go { font-weight: 700; border-top: 1px solid var(--line-soft); }
.la-crewadd { border-top: 1px solid var(--line-soft); margin-top: 4px; }
/* Editing in place (lookahead-edit.js): the name line, the note cell, the add lines, the tool cluster, the DFOW picker. */
.la-nmw { display: flex; align-items: center; min-width: 0; }
.la-nmw > * { flex: none; }
.la-nmw > .la-nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.la-nmw > .la-in { flex: 1 1 auto; }
.la-nm.la-click:hover { text-decoration: underline dotted; }
.la-in, .la-ask { font: inherit; font-size: 13px; height: 24px; box-sizing: border-box; padding: 2px 6px; border: 1px solid var(--blue); border-radius: 5px; background: var(--white); min-width: 0; width: 100%; }
.la-ask { width: 260px; margin: 4px 12px 8px; display: block; }
.la-table td.c-note.la-click { cursor: text; }
.la-table td.c-note.la-click:hover { background: var(--blue-tint); }
.la-ph { color: var(--faint); font-style: italic; }
.la-tools { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; padding-left: 6px; }
.la-tools > span, .la-tools > button { cursor: pointer; padding: 0 5px; border-radius: 4px; color: var(--muted); font-size: 12px; line-height: 20px; user-select: none; }
.la-tools > span:hover { background: var(--gray-2); color: var(--ink); }
.la-tools .la-mv.off { opacity: .25; cursor: default; pointer-events: none; }
.la-tools .la-plus { width: 18px; height: 18px; line-height: 17px; padding: 0; text-align: center; border-radius: 50%; border: 1px solid var(--gray-3); font-weight: 700; }
.la-tools .la-x { font-size: 15px; } .la-tools .la-x:hover { color: var(--red); }
.la-tools button.la-x.armed { background: var(--red); color: #fff; border: 0; font: inherit; font-size: 12px; font-weight: 700; line-height: 20px; padding: 0 8px; white-space: nowrap; }
@media (hover: hover) {
  .la-tools { opacity: .3; }
  .la-table tr:hover .la-tools, .la-tools:focus-within, .la-tools.arm { opacity: 1; }
}
.la-addrow td { height: 26px; }
.la-table td.la-addline { color: var(--faint); font-size: 12.5px; cursor: text; }
.la-table td.la-addline:focus { outline: 2px solid var(--blue); outline-offset: -2px; color: var(--ink); }
@media (hover: hover) {
  .la-table td.la-addline { opacity: .45; }
  .la-addrow:hover td.la-addline { opacity: 1; }
}
.la-table td.la-dpick { white-space: normal; height: auto; padding: 8px; cursor: default; opacity: 1; color: var(--ink); }
.la-dps { width: 100%; font-size: 13px; }
.la-dpsteps { max-height: 150px; overflow-y: auto; margin: 4px 0; }
.la-dpick .la-chk { padding: 3px 0; white-space: normal; }
.la-dpbtn { display: flex; gap: 6px; margin-top: 4px; }
.la-dpbtn .btn, .la-dpick .btn { width: auto; }
.la-chip { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
/* look-ahead round 11: job locations and Group by DFOW | Location | None */
.la-seg { display: inline-flex; border: 1px solid var(--gray-3); border-radius: 6px; overflow: hidden; }
.la-seg button { font: inherit; font-size: 13px; padding: 3px 10px; border: 0; background: var(--white); color: var(--gray-7); cursor: pointer; }
.la-seg button + button { border-left: 1px solid var(--gray-3); }
.la-seg button.on { background: var(--blue-tint); color: var(--blue-dark); font-weight: 700; }
.la-table .c-loc, .la-table .c-dfow { min-width: 150px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.la-table .c-dfow { color: var(--muted); }
.la-loc-eff { color: var(--faint); font-style: italic; }
.la-loc-off, .la-table tr.la-moff td.f.c1 { color: var(--faint); }
.la-lcin { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; height: 26px; box-sizing: border-box; margin: 2px 0 2px 12px; padding: 2px 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; }
.la-lcin:hover { border-color: var(--line); background: var(--white); }
.la-lcin:focus { border-color: var(--blue); background: var(--white); outline: none; }
.la-chip.owned { background: var(--blue); } .la-chip.rental { background: var(--orange); }
.la-pop-h.la-sub { text-transform: none; letter-spacing: 0; font-weight: 600; margin-left: 24px; }
.la-qw { position: sticky; top: 0; z-index: 1; background: var(--white); padding: 0 12px 6px; }
.la-q { font: inherit; font-size: 13px; height: 28px; box-sizing: border-box; width: 100%; padding: 2px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); min-width: 0; }
.la-q:focus { outline: none; border-color: var(--blue); }
.la-pop .la-none { font-weight: 400; text-transform: none; letter-spacing: 0; }
.la-else { color: var(--la-warn, #C98A1B);   /* the pop-over lives on <body>, outside .la-root where --la-warn is set */ font-size: 12px; padding: 0 12px 4px 38px; }
.la-flags { position: relative; border: 1px solid var(--la-warn); background: var(--gold-tint); color: #7A5C00; border-radius: var(--radius); padding: 8px 34px 8px 12px; font-size: 13px; }
.la-flags ul { margin: 4px 0 0; padding-left: 18px; } .la-flags li { margin: 2px 0; }
.la-flagx { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; }
/* The Change log panel under the look-ahead toolbar (round 12): counts and the first rows of four lists */
.la-log { border: 1px solid var(--line); background: var(--white); border-radius: var(--radius); padding: 8px 12px; font-size: 13px; }
.la-log-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.la-log .sub { margin: 4px 0; font-size: 12.5px; }
.la-log-s { margin: 8px 0 3px; }
.la-log-w { overflow-x: auto; max-width: 100%; }
.la-log-t { border-collapse: collapse; font-size: 12.5px; }
.la-log-t th { text-align: left; font-weight: 700; color: var(--muted); white-space: nowrap; }
.la-log-t th, .la-log-t td { padding: 3px 10px 3px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.la-logx { border: 0; background: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; }
/* The Change history panel in the Schedule tool's #sg_panel: the "Changes since" picker, and a height cap so the chart below keeps its room */
#sg_panel .la-log { margin-bottom: 10px; max-height: 45vh; overflow-y: auto; }
.la-log-h .btn { width: auto; flex: none; }   /* a .btn is full width by default; here Excel / PDF sit beside the title */
.la-log-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 2px; font-size: 13px; color: var(--gray-7); }
.la-log-pick select, .la-log-pick input[type="date"] { width: auto; font-size: 13px; padding: 4px 6px; border: 1px solid var(--gray-3); border-radius: 6px; background: var(--white); }
.la-else .tri, .la-legend .la-warn { font-size: 10px; }
.la-legend .la-warn { margin: 0 5px 0 0; cursor: default; }
@media (max-width: 560px) {
  .la-table .f.c1 { min-width: 200px; max-width: 200px; }
  .la-colrz { display: none; }
  .la-bar .la-grow { display: none; }
}

/* ============================================================
   DRA hazards-step redesign (dra.js sectionRenderers.hazards,
   redrawHazards/hazardCard/hazardRow), 2026-08-24. A 10-15 item hazard
   library used to be one long scroll of full cards; now unanswered (and
   answered-but-open) hazards stay full cards, answered-and-collapsed ones
   drop into a slim row list, a filter seg switches between "To answer" and
   "Answered", and a sticky bar tracks progress. .hazard-card/.hazard-head/
   .tg-yes/.tg-no/.hazard-controls/.present-toggle are untouched — every
   new class here is prefixed .hz- so nothing collides with them.
   ============================================================ */

/* Back, pulled out of the (now-hidden for this step, see .hz-active below)
   fixed step-nav so it stays reachable at the top of the section. */
.hz-back-slot .btn-back { width: auto; min-height: 44px; margin-bottom: var(--s3); }

/* Filter seg — "To answer" is the default, "Answered" mirrors it. Same
   on/off idea as the .seg-btn pairs elsewhere, sized for two wide buttons. */
.hz-seg { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.hz-seg-btn {
  flex: 1; min-height: 48px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-3);
  background: var(--white);
  font-size: 15px; font-weight: 700; color: var(--gray-7);
}
.hz-seg-btn.on { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* Slim answered rows, listed inside a plain .card — tap one to put the full
   card (with its controls) back in place. */
.hz-row-list { display: flex; flex-direction: column; }
.hz-row {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 52px; padding: var(--s2) var(--s4);
  border-top: 1px solid var(--gray-2);
  cursor: pointer;
}
.hz-row:first-child { border-top: none; }
.hz-row:active { background: var(--gray-1); }
.hz-row-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; }
.hz-row-pill {
  flex: none; font-size: 13px; font-weight: 700; color: var(--white);
  padding: 4px 12px; border-radius: 999px;
}
.hz-pill-yes { background: var(--orange); }
.hz-pill-no { background: var(--gray-7); }
.hz-row-chev { flex: none; width: 18px; height: 18px; color: var(--gray-5); }

/* Collapse affordance on an answered, open card — sits in the header next
   to present-toggle. Same chevron as .hz-row above, so open <-> collapsed
   reads as the same control either way. */
.hz-collapse {
  flex: none; width: 36px; height: 36px; margin-left: var(--s1);
  border: none; background: none; color: var(--gray-5);
  display: flex; align-items: center; justify-content: center;
}
.hz-collapse:active { color: var(--gray-7); }

/* Sticky progress bar — same pinned-bottom pattern as .tb-submit-bar
   (toolbox.js talk screen): position:sticky inside the document's own
   scroll, not a second scroll container. Left = counts, right = the
   step's real Next button, moved in here (see renderStep in dra.js). */
.hz-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: var(--white); border-top: 1px solid var(--gray-2);
  box-shadow: 0 -2px 10px rgba(26, 26, 26, 0.08);
  padding: 10px var(--s4); margin-top: 12px;
}
.hz-bar-text { flex: 1 1 auto; min-width: 0; }
.hz-bar-count { font-size: 15px; font-weight: 800; }
.hz-bar-sub { font-size: 13px; color: var(--gray-5); }
.hz-bar-next { flex: 0 0 auto; }
.hz-bar-next .btn { width: auto; min-width: 140px; }

/* The hazards step relocates Back/Next into the section itself, so the
   always-fixed .step-nav footer would just be an empty white strip under
   the sticky bar above — hide it for this one step (renderStep stamps
   .hz-active on .screen only when step.key === "hazards"). */
.screen.hz-active { padding-bottom: var(--s4); }
.screen.hz-active + .step-nav { display: none; }
.df-gantt-edit-name { font-size: 15px; font-weight: 700; }

/* ---- Camera Site Audit — UI-audit fixes (2026-08-24) ----
   The form's readiness feedback rendered with no styling at all (camera.js
   emits .status-line.status-warn / .status-ok but only the .status-over
   variant ever had CSS), and the Yes/No/N-A answer buttons sat at the
   shared 48px instead of the 52px gloved-hand standard. */
.status-line { font-size: 15px; font-weight: 600; padding: var(--s3); border-radius: var(--radius-sm); margin: 6px 0; }
.status-line.status-warn { background: var(--gold-tint); color: #7A5C00; }
.status-line.status-ok { background: var(--green-tint); color: var(--green-dark); }

/* ---- DRA start screen: Option B single start card (2026-08-25) ----
   Replaces the old standalone .date-row bar + .start-list card stack with
   one card holding the date row, a 2x2 grid of start tiles, and a quiet
   Print row. The .date-row/.date-row-label rules above (~2382) stay as-is —
   they're shared with the Toolbox Talk screen (toolbox.js) — this only adds
   an in-card flattened variant on top. The old .start-list/.start-row rules
   above (~2396) are no longer used by this screen but are left in place. */
.date-row.in-card {
  border: none; box-shadow: none; padding: 0; min-height: 48px; margin-bottom: 0;
}
.start-divider { height: 1px; background: var(--gray-2); border: none; margin: 14px calc(-1 * var(--s4)); }
.start-grid-label { font-size: 15px; font-weight: 700; color: var(--gray-7); margin-bottom: 8px; }
.start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.start-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 96px; padding: 10px; border-radius: var(--radius); border: none;
  font-family: var(--font); font-size: 16px; font-weight: 700; text-align: center; cursor: pointer;
}
.start-tile.btn-primary { background: var(--blue); color: var(--white); }
.start-tile-tint { background: var(--blue-tint); color: var(--blue); }
.start-tile .ic { width: 26px; height: 26px; }
.start-print-row {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 44px; background: var(--white); border: none;
  font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--gray-7); cursor: pointer;
}
.cam-seg .seg-btn { min-height: 52px; }

/* ============================================================
   Review a scanned DRA (dra.js screenDraReviewOne) — read-only tags
   for what the AI read off the sheet. Not .chip: those are 44px
   buttons; nothing here is tappable.
   ============================================================ */
.rv-chip { display: inline-block; padding: 3px 10px; margin: 0 6px 6px 0; border-radius: 14px;
  background: var(--blue-tint); color: var(--blue); font-size: 13px; font-weight: 600; }
.rv-row { margin-bottom: var(--s2); }

/* ============================================================
   Workforce Planning (workforce.js) — everything else on these screens
   is .screen / .card / .section-bar / .chip-row / .field / .banner / the
   job-sheet classes, all reused as-is. Three things here didn't exist
   yet: a list row with a name, a muted sub-line and a right-side value
   (the project list, the Staff/Craft rows, a picker candidate); a status
   pill (Planned / Confirmed / Nobody yet / On this job); and a load bar
   (a candidate's current allocation in the picker).
   ============================================================ */
.wf-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  min-height: var(--tap); padding: 12px 2px; margin: 0; font: inherit;
  background: none; border: none; border-bottom: 1px solid var(--gray-1); cursor: pointer;
}
.wf-row:last-child { border-bottom: none; }
.wf-row:active { background: var(--gray-1); }
.wf-row.wf-past { opacity: 0.55; }
.wf-row-static { cursor: default; }
.wf-row-main { flex: 1; min-width: 0; }
.wf-row-name { display: block; font-weight: 700; font-size: 16px; }
.wf-row-name .jn { font-weight: 800; margin-right: 6px; }
.wf-row-sub { display: block; font-size: 13px; color: var(--gray-5); margin-top: 2px; }
.wf-row-right { flex: none; text-align: right; font-size: 14px; font-weight: 700; color: var(--gray-7); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.wf-pill { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; }
.wf-pill-gold { background: var(--gold-tint); color: #7A5C00; }
.wf-pill-green { background: var(--green-tint); color: var(--green-dark); }
.wf-pill-red { background: var(--red-tint); color: var(--red); }
.wf-pill-grey { background: var(--gray-1); color: var(--gray-5); }

.wf-load { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.wf-load-track { flex: 0 0 70px; height: 6px; border-radius: 3px; background: var(--gray-2); overflow: hidden; }
.wf-load-fill { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.wf-load-fill.wf-load-over { background: var(--red); }
.wf-load-text { font-size: 12px; font-weight: 700; color: var(--gray-5); white-space: nowrap; }
.wf-load-text.wf-load-over { color: var(--red); }

/* The one chip behind step 4 (Starting soon). */
.wf-soon { opacity: 0.5; }

/* step 3 — By person: the "Earlier" divider between upcoming and past
   assignments on the person screen. Everything else it needs (rows, pills,
   the load bar) is the same wf- furniture above. */
.wf-divider { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-5); margin: 14px 0 2px; padding-top: 10px; border-top: 1px solid var(--gray-1); }

/* ============================================================
   Daily Quantity Log (Martins) — quantity.js / quantity-admin.js /
   quantity-billing.js. Generic furniture (back-btn, field-row, btn-link,
   the cp-list/photo-strip/recent-row shapes reused from the modal pattern
   concrete.js established) lives here because nothing upstream had defined
   it yet under these names.
   ============================================================ */
.back-btn { background: none; border: 0; color: var(--blue); font-weight: 700; font-size: 15px; padding: 0; margin-bottom: var(--s4); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.field-row { display: flex; gap: var(--s4); flex-wrap: wrap; }
.field-row .field { flex: 1 1 220px; }
.btn-link { background: none; border: 0; color: var(--blue); font-weight: 600; cursor: pointer; padding: 2px 0; font-size: 14px; }
.btn-link:hover { text-decoration: underline; }

.cp-list { max-height: 50vh; overflow-y: auto; margin: var(--s4) 0; }
.cp-list-item { display: block; width: 100%; text-align: left; background: var(--gray-0, #f7f7f7); border: 1px solid var(--gray-1); border-radius: var(--radius-sm, 8px); padding: 10px 12px; margin-bottom: 6px; cursor: pointer; }
.cp-search { width: 100%; padding: 10px 12px; border: 1px solid var(--gray-2); border-radius: var(--radius-sm, 8px); font-size: 15px; margin-bottom: var(--s3); }
.cp-photo-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s3) 0; }
.cp-photo-thumb { position: relative; width: 74px; height: 74px; border-radius: 8px; overflow: hidden; display: inline-block; }
.cp-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cp-photo-thumb button { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.6); color: #fff; border: 0; border-radius: 50%; width: 20px; height: 20px; line-height: 18px; cursor: pointer; }
.cp-recent-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gray-1); gap: 10px; flex-wrap: wrap; }
.cp-recent-actions { display: flex; gap: 12px; }
.cp-note.qty-import-preview { background: var(--gray-0, #f7f7f7); border-radius: var(--radius-sm, 8px); padding: 12px; margin: var(--s3) 0; }

/* Screen furniture. Back buttons are the app's usual .btn.btn-ghost.btn-sm
   (concrete.js / camera.js / dfow.js) — this just replaces the inline
   width/margin those screens carry. The wide screens (the grid, the items
   list, billing) get the same room as .df-wide / .au-wide. */
.qty-back { width: auto; margin-bottom: 10px; }
@media (min-width: 900px) { .screen.qty-wide { max-width: 980px; } }
.qty-section-head { margin-top: var(--s6); margin-bottom: var(--s3); }
/* Fields that wrap onto their own line on a phone already carry a bottom
   margin — the row gap on top of it left big holes between them. */
.qty-form-screen .field-row, .screen.qty-wide .field-row { row-gap: 0; }
.qty-btn-row { flex-wrap: wrap; margin: var(--s3) 0; }
.qty-btn-row .btn { flex: 1 1 160px; }
.qty-actions { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
/* .qty-actions's own flex-direction:column stretches a child to full width
   by default (align-items:stretch) even with .btn-sm's width:auto — auto
   still triggers stretch. Anything explicitly .btn-sm in here (Add job,
   Save item, Cancel — 2026-09-24 fix pass) opts out to its own content width. */
.qty-actions .btn-sm { align-self: flex-start; }
.qty-link-danger { color: var(--red); }
.qty-past { background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius); padding: 0 var(--s4); }
.qty-past .cp-recent-row { border-bottom-color: var(--gray-2); }
.qty-past .cp-recent-row:last-child { border-bottom: 0; }

/* Day / Night — the shared .seg control, "on" in the app blue. */
.qty-seg .seg-btn.qty-seg-on { background: var(--blue); border-color: var(--blue); color: var(--white); }
.qty-layout-toggle { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: var(--s3); }
/* Crew Shift + View on one row; wraps under each other on a narrow phone. */
.qty-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3) var(--s4); flex-wrap: wrap; margin-bottom: var(--s3); }
.qty-tgroup label { display: block; font-weight: 600; margin-bottom: 4px; }
.qty-btns { display: flex; gap: 8px; }
.qty-btns .btn { min-width: 72px; }
/* Item picker: the description leads, line / item # / qty underneath. */
.qty-pick-desc { display: block; }
.qty-pick-meta { display: block; margin-top: 2px; }
/* The Summary's "Only items with quantity in this period" / "All contract
   items" — same control, labels long enough to wrap on a phone. */
/* Compact — matches .btn-sm's height/font rather than the seg control's
   phone-sized default (2026-09-24 fix pass: the two-line "Only items with
   quantity this month" button was oversized and out of line with the rest
   of the toolbar). Labels are short enough now to never wrap. */
.qty-bill-filter { margin-top: var(--s3); }
.qty-bill-filter .seg-btn { font-size: 14px; padding: 0 var(--s3); min-height: 40px; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; }
.qty-bill-hidden { margin: 0 0 var(--s2); }
.qty-billing .qty-grid-table td.qty-bill-empty { text-align: left; color: var(--gray-7); }

/* Tables scroll sideways inside their own box (au-gridwrap's convention)
   instead of being clipped by .screen's overflow-x: clip. */
.qty-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); margin: var(--s3) 0; }
.qty-grid-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--white); }
.qty-grid-table th, .qty-grid-table td { border: 1px solid var(--gray-2); padding: 6px 8px; text-align: left; vertical-align: top; }
.qty-grid-table th { background: var(--gray-1); font-weight: 700; color: var(--ink); vertical-align: bottom; }
.qty-table-wrap .qty-grid-table tr > :first-child { border-left: 0; }
.qty-table-wrap .qty-grid-table tr > :last-child { border-right: 0; }
.qty-table-wrap .qty-grid-table thead tr:first-child > * { border-top: 0; }
.qty-table-wrap .qty-grid-table tbody tr:last-child > *, .qty-table-wrap .qty-grid-table tfoot tr:last-child > * { border-bottom: 0; }
.qty-grid-table .qty-desc-cell { min-width: 160px; }
.qty-grid-table tfoot td { background: var(--gray-1); }
.qty-grid-table td:nth-child(2) { white-space: nowrap; }
.qty-billing .qty-grid-table td:nth-child(n+4), .qty-billing .qty-grid-table th:nth-child(n+4) { text-align: right; }
.qty-billing .qty-grid-table td:nth-child(n+4) { white-space: nowrap; }
.qty-billing .qty-grid-table tfoot td:first-child { text-align: left; }

/* The daily sheet's grid — the paper form's 7 columns with its ruled lines:
   darker rules than the office tables, a centred header row, and the typed
   cells drawn as blanks to fill in. */
.qty-paper { font-size: 14px; min-width: 720px; }
.qty-paper th, .qty-paper td { border-color: var(--gray-3); }
.qty-paper th { text-align: center; font-size: 12.5px; }
.qty-paper .qty-num-cell { text-align: center; white-space: nowrap; }
.qty-paper .qty-input-cell { padding: 4px; }
.qty-paper td.qty-input-cell:nth-child(5) { width: 32%; min-width: 170px; }
.qty-paper td.qty-input-cell:nth-child(6) { width: 96px; }
.qty-paper .qty-grid-sub td { border-top: 0; background: var(--gray-1); padding: 3px 8px; }
.qty-grid-sub .qty-line-actions { float: right; display: inline-flex; gap: 14px; }
.qty-cell-input { width: 100%; min-height: 36px; border: 1px solid var(--gray-2); border-radius: 4px; background: var(--white); padding: 4px 6px; font-size: 14px; color: var(--ink); }
.qty-cell-input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 1px var(--blue); }
.qty-paper .qty-qty-input { min-width: 70px; }
.qty-todate { font-size: 12px; color: var(--gray-5); }
.qty-item-inactive { opacity: 0.5; }

/* Phone cards — white cards like concrete.js's .cp-line rows. */
.qty-line-card { background: var(--white); border: 1.5px solid var(--gray-2); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.qty-line-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 16px; margin-bottom: 2px; }
.qty-line-card-desc { font-size: 15px; color: var(--ink); }
.qty-line-card-meta { font-size: 13px; color: var(--gray-5); margin-bottom: var(--s3); }
.qty-line-card .field { margin-bottom: var(--s3); }
.qty-line-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.qty-line-card .qty-cell-input { min-height: var(--tap); padding: var(--s3); font-size: 18px; border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); }

/* Photos — concrete.js's tile grid, with a little room under it. */
.qty-photos { margin: var(--s2) 0 var(--s4); }

/* Signatures sit in the shared .sig-block card: name, then the pad. */
.qty-sig-label { display: block; font-size: 15px; font-weight: 700; color: var(--gray-7); margin-bottom: var(--s1); }

/* Modals (item picker, line photos) */
.qty-item-modal .cp-list-item .sub { display: block; margin: 2px 0 0; font-size: 14px; }
.qty-item-modal .cp-list-item .sub + .sub { font-size: 13px; }
.qty-modal-sub { margin-bottom: var(--s3); }

/* "More" — reveals the one thing folded away (the Patches link) inline
   rather than opening a menu; qty-more-hidden starts [hidden] in markup. */
.qty-more-hidden { display: inline; }
.qty-more-hidden[hidden] { display: none; }

/* Patch caption ("n patches · X sq ft") — same small grey line the to-date
   text already uses, sitting right beside it. */
.qty-patch-caption { font-size: 12px; color: var(--gray-5); margin-left: 10px; }
.qty-line-card .qty-patch-caption { display: block; margin: 2px 0 0; }

/* The patch worksheet modal (owner, 2026-09-24) — a wider sheet than the
   photo/item modals so the table doesn't cramp on a phone turned sideways. */
.qty-patch-modal .cp-sheet { max-width: 640px; }
.qty-patch-table th, .qty-patch-table td { text-align: center; padding: 4px 6px; }
.qty-patch-table td:first-child, .qty-patch-table th:first-child { text-align: left; }
.qty-patch-table input.qty-cell-input { min-width: 64px; text-align: center; }
.qty-patch-total-row td { font-weight: 700; background: var(--gray-1); }
.qty-patch-table + .btn { margin-top: var(--s2); }
#qtyPatchAnodeAction, #qtyPatchGroutAction { margin-top: var(--s2); }
#qtyPatchAnodeAction .btn, #qtyPatchGroutAction .btn { width: 100%; }

/* Import preview — the counts, then the Cancel / Apply row, stacked. The
   shared .cp-note is a one-line flex row, which laid this out sideways. */
.cp-note.qty-import-preview { display: block; }
.qty-import-preview p { margin: 0 0 6px; }
.qty-import-preview .sub { font-size: 14px; }

/* <input type="date"> (the Summary's From / To) isn't in the shared .field
   input list; match it. */
.qty-billing .field input[type="date"] {
  display: block; 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);
}

/* Header fields filled from the sign-in and the job chip (Prepared By,
   Project Name, Day of Week, Project No., MCC Project No.) are locked —
   drawn like the app's other read-only inputs (.df-res-row input:disabled):
   grey fill, grey text, no focus ring, no caret. */
.qty-form-screen .field input[readonly] {
  background: var(--gray-1); color: var(--gray-7); border-color: var(--gray-2);
  cursor: default; caret-color: transparent;
}
.qty-form-screen .field input[readonly]:focus { border-color: var(--gray-2); box-shadow: none; outline: none; }

/* Past 100% of the contract quantity — --gold-ink, the app's amber for
   "somebody needs to look at this" (see .df-warn). */
.qty-todate.qty-over { color: var(--gold-ink); font-weight: 700; }
.qty-over-tag { display: inline-block; vertical-align: top; background: var(--gold-tint); border-radius: 4px; padding: 0 5px; }
.qty-over-tag .bi-tr { color: inherit; opacity: 0.8; }
.qty-billing .qty-grid-table td.qty-over { color: var(--gold-ink); background: var(--gold-tint); font-weight: 700; }

/* Jobs & Items. The one-item add/edit form folds behind "Add item" / a
   row's "Edit" at every width now (2026-09-24 fix pass — it used to open
   by default above 560px). iPad and wider: items in the bordered table.
   A phone: items become cards. */
.qty-collapse:not(.qty-open) { display: none; }
/* Edit scrolls the item form into view — clear of the sticky app header. */
.qty-collapse { scroll-margin-top: 96px; }
.qty-item-cards { display: none; }
.qty-item-actions { white-space: nowrap; }
.qty-items-table .qty-item-actions .btn-link + * { margin-left: 12px; }
.qty-item-card { background: var(--white); border: 1.5px solid var(--gray-2); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; }
.qty-item-card-head { font-size: 15px; }
.qty-item-card-desc { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.qty-item-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.qty-item-card-meta { font-size: 13px; color: var(--gray-5); }
.qty-item-card .qty-item-actions { display: inline-flex; align-items: center; gap: 16px; }
.qty-item-card .qty-item-actions .btn-link { font-size: 15px; padding: 6px 0; }
@media (max-width: 560px) {
  .qty-items-table { display: none; }
  .qty-item-cards { display: block; }
}

/* "Needs a quantity" fix rows in the import preview — iPad and wider get
   the bordered table, a phone gets qty-item-cards. Same convention as the
   Jobs & Items list just above: both markups render, this media query
   picks which shows. */
.qty-fix { margin: var(--s4) 0; }
.qty-fix-cards { display: none; }
.qty-fix-qty, .qty-fix-date { min-height: var(--tap); border: 1px solid var(--gray-2); border-radius: 4px; background: var(--white); padding: 4px 6px; font-size: 14px; color: var(--ink); width: 100%; box-sizing: border-box; }
.qty-fix-qty:focus, .qty-fix-date:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 1px var(--blue); }
.qty-fix-table th:last-child, .qty-fix-table td:last-child { min-width: 96px; }
.qty-fix-card .qty-item-card-desc { margin-bottom: 4px; }
.qty-fix-qty-label { display: block; font-size: 13px; color: var(--gray-5); margin-top: 6px; }
.qty-fix-qty-label .qty-fix-qty { display: block; margin-top: 2px; font-size: 18px; padding: var(--s3); }
@media (max-width: 560px) {
  .qty-fix-table-wrap { display: none; }
  .qty-fix-cards { display: block; }
}

/* ============================================================
   Summary (was Monthly Billing) — desktop page (owner, 2026-09-24: "assume it's done on
   the computer, use the space of the screen, controls across the top,
   more like the Job Resources tab"). Below 1100px the toolbar wraps and
   two columns (Item #, Unit Price) drop out; below 768px this rides the
   plain .qty-wide / .qty-table-wrap rules above, same as before this page
   existed — nothing here narrows further than that.
   ============================================================ */
.qty-bill-screen { overflow-x: visible; }
@media (min-width: 1100px) {
  .screen.qty-bill-screen { max-width: none; width: 100%; box-sizing: border-box; padding-left: 24px; padding-right: 24px; }
}

.qty-bill-header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3) var(--s4); flex-wrap: wrap; margin-bottom: var(--s3); }
.qty-bill-title { margin: 0; }
.qty-bill-exports { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qty-bill-exports .btn-link { font-size: 14px; padding: 4px 0; }
.qty-bill-export-sep { color: var(--gray-4); }

/* Job / Dates / filter / search — one line at >=1100px (wf-screen.js's
   toolbar convention: quiet controls in a row, wrapping under each other
   below that). */
.qty-bill-toolbar { display: flex; align-items: flex-end; gap: var(--s3) var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.qty-bill-toolbar .field { margin-bottom: 0; }
.qty-bill-tb-job { flex: 1 1 220px; min-width: 180px; }
.qty-bill-tb-month { flex: 0 0 auto; }
.qty-bill-month-row { display: flex; align-items: center; gap: 6px; }
.qty-bill-month-row input[type="date"] { width: auto; min-width: 140px; }
.qty-bill-range-to { color: var(--gray-5); font-size: 14px; font-weight: 600; }
.qty-bill-tb-search { flex: 1 1 240px; min-width: 180px; }
.qty-bill-toolbar .qty-bill-filter { margin-top: 0; align-self: flex-end; }
.qty-bill-hidden { flex-basis: 100%; margin: 0; }
@media (min-width: 1100px) {
  .qty-bill-toolbar { flex-wrap: nowrap; }
  .qty-bill-tb-job, .qty-bill-tb-search { min-width: 0; }
  .qty-bill-hidden { flex-basis: auto; margin-left: auto; white-space: nowrap; }
}

/* Summary tiles — Contract value / Billed to date / This period / Previous
   / Sheets in this period, all read off the same SUMMARY the table uses. */
.qty-bill-tiles { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
@media (min-width: 700px) { .qty-bill-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.qty-bill-tile { background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius-sm); padding: var(--s3); display: flex; flex-direction: column; gap: 4px; }
.qty-bill-tile-label { font-size: 12.5px; color: var(--gray-5); font-weight: 600; }
.qty-bill-tile-val { font-size: 20px; font-weight: 700; color: var(--ink); }
.qty-bill-tile-sub { display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--gray-5); }

/* The table itself — sticky header, sticky (pinned) totals row, right-
   aligned numbers, sortable headers, an amber pill on an over-contract
   % complete, and an expanding detail row under whichever row was clicked. */
.qty-bill-table-wrap { max-height: min(64vh, 620px); overflow: auto; }
.qty-bill-table { table-layout: fixed; font-size: 13px; }
.qty-bill-table th, .qty-bill-table td { padding: 4px 6px; }
.qty-bill-table thead th { position: sticky; top: 0; z-index: 1; white-space: normal; line-height: 1.2; vertical-align: bottom; }
.qty-bill-table tfoot td { position: sticky; bottom: 0; z-index: 1; }
.qty-bill-table th.qty-bill-sort { cursor: pointer; user-select: none; }
.qty-bill-table th.qty-bill-sort:hover { background: var(--gray-2); }
.qty-bill-row { cursor: pointer; }
.qty-bill-row:hover { background: var(--blue-tint); }
/* Description is the ONLY column allowed to shrink/ellipsize — every
   numeric or code column (Item #, dollars, quantities, %) gets its own
   natural nowrap width instead, so a value never truncates (2026-09-24
   fix pass: "513SD…", "$150,0…" etc. were unreadable). */
.qty-bill-table td.qty-bill-c-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qty-bill-table [class^="qty-bill-c-"]:not(.qty-bill-c-desc) { text-align: right; white-space: nowrap; overflow: visible; }
.qty-bill-table .qty-bill-c-line, .qty-bill-table .qty-bill-c-item, .qty-bill-table .qty-bill-c-unit { text-align: left; }
.qty-bill-table tfoot td:first-child { text-align: left; }
/* Widths sized to the widest real value this table shows (an item code
   like "513SD20-0001", "$1,852,500.00", "1235.0%" over-contract) plus a
   safety margin — Description takes whatever is left over. */
.qty-bill-c-line { width: 50px; }
.qty-bill-c-item { width: 110px; }
.qty-bill-c-unit { width: 36px; }
.qty-bill-c-cqty { width: 76px; }
.qty-bill-c-prev, .qty-bill-c-mo { width: 64px; }
.qty-bill-c-todate { width: 66px; }
.qty-bill-c-pct { width: 70px; }
.qty-bill-c-price { width: 98px; }
.qty-bill-c-amo, .qty-bill-c-aprev { width: 122px; }
.qty-bill-c-atodate { width: 128px; }
/* % complete over 100% of contract — the same amber as .qty-over, drawn as
   a pill (the app's .wf-pill convention) rather than a plain tinted cell. */
.qty-bill-pill { border-radius: 12px; }
.qty-bill-empty { text-align: left; color: var(--gray-7); }

/* Row-click detail: every line this item has for the period (or, with
   "Show all dates", every date loaded), sorted by date, a text-link PDF
   per line. */
.qty-bill-detail-row td { background: var(--gray-0, #f7f7f7); cursor: default; padding: var(--s3) var(--s4); }
.qty-bill-detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3) var(--s4); flex-wrap: wrap; margin-bottom: var(--s2); }
.qty-bill-showall { font-size: 13px; font-weight: 600; color: var(--gray-7); display: inline-flex; align-items: center; gap: 6px; }
.qty-bill-detail-table { background: var(--white); }
.qty-bill-detail-table th:nth-child(4), .qty-bill-detail-table td:nth-child(4) { text-align: right; }

/* iPad landscape and the low end of desktop: the toolbar already wraps
   (no rule needed below 1100px, .qty-bill-toolbar's own flex-wrap does
   it); these two columns are the ones spec'd to drop first so the rest
   keeps its room and nothing scrolls sideways. */
@media (max-width: 1099px) {
  .qty-bill-c-item, .qty-bill-c-price { display: none; }
}

/* Daily Quantity Log home — desktop header strip (D1, 2026-09-24): Home
   back button left, Jobs & Items / Monthly Billing right, when the screen
   picked "desktop" (quantity.js's screenQuantity, same window-width check
   as Grid/Cards). On phone the actions render in their old spot below
   New sheet / Copy previous instead — see quantity.js for which. */
.qty-home-header { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
.qty-home-header .qty-back { margin-bottom: 0; }
.qty-home-header .qty-home-actions { margin: 0; flex-wrap: nowrap; }
.qty-home-desktop .qty-home-actions .btn { flex: 0 0 auto; width: auto; }
/* Desktop New sheet / Copy previous — normal-sized, side by side, not the
   phone's two full-width btn-xl blocks (2026-09-24 fix pass). */
.qty-home-new-row { gap: var(--s3); }
.qty-home-new-row .btn { flex: 0 0 auto; width: auto; }
/* Desktop Past sheets — a full-width table instead of the phone's stacked
   cp-recent-row list. */
.qty-home-past-table { table-layout: auto; }
.qty-home-past-lines { text-align: right; }

/* Past sheets, desktop (owner, 2026-09-25: "this table is hard to read" —
   columns stretched the full width of a 1900px window). Capped and
   left-aligned instead of riding qty-bill-screen's full-width gutter;
   .qty-bill-table's own padding/font-size is overridden here (matching
   specificity, later in the sheet) rather than relying on source order. */
.qty-home-past-count { margin: 0 0 var(--s2); }
.qty-home-past-wrap { max-width: 1040px; margin-left: 0; margin-right: auto; }
.qty-home-past-table th, .qty-home-past-table td { padding: 9px 10px; font-size: 13.5px; }
.qty-home-past-table thead th { position: sticky; top: 0; }
.qty-home-past-table tbody tr:nth-child(even) { background: var(--gray-1); }
.qty-home-past-table tbody tr:hover { background: var(--blue-tint); }
.qty-home-past-table th:nth-child(1), .qty-home-past-table td:nth-child(1) { width: 110px; }
.qty-home-past-table th:nth-child(2), .qty-home-past-table td:nth-child(2) { width: 70px; }
.qty-home-past-table th:nth-child(3), .qty-home-past-table td:nth-child(3) { width: auto; }
.qty-home-past-table th:nth-child(4), .qty-home-past-table td:nth-child(4) { width: 60px; text-align: right; }
.qty-home-past-table th:nth-child(5), .qty-home-past-table td:nth-child(5) { width: 180px; text-align: right; white-space: nowrap; }
.qty-home-past-sep { color: var(--gray-4); margin: 0 8px; }

/* The in-page title on all four Quantity screens (home, Jobs & Items,
   Monthly Billing, the sheet form) — hidden once the header bar is showing
   its own title (PZ.setHeaderTitle, styles.css .hdr-title) at >=1100px, so
   there is exactly one "Daily Quantity Log" / "Jobs & Items" / "Monthly
   Billing" on screen at a time. Below that it's the only title there is,
   same as before this existed. */
@media (min-width: 1100px) {
  .qty-h1-narrow { display: none; }
}

/* Jobs & Items — desktop tabs (C, 2026-09-24), same visual language as
   Monthly Billing: qty-bill-screen (full width + gutter at >=1100px),
   qty-bill-header/-title (the header strip) and qty-bill-sort (sortable
   column headers) are reused as-is — only the tab bar and panel show/hide
   are new. */
/* Text-style tabs with an underline active-state indicator (2026-09-24 fix
   pass) — .seg-btn's base style is a filled, equal-width box (border,
   min-height 48, flex:1), which is right for Day/Night and the billing
   filter but wrong here; this overrides all of it for .qty-admin-tabs. */
.qty-admin-tabs { display: flex; gap: var(--s4); border-bottom: 1px solid var(--gray-2); margin: var(--s3) 0 var(--s4); }
.qty-admin-tabs .seg-btn {
  flex: 0 0 auto; min-height: 40px; border: none; border-bottom: 2px solid transparent;
  border-radius: 0; background: transparent; color: var(--gray-5);
  font-size: 15px; font-weight: 600; padding: 0 2px var(--s2); margin-bottom: -1px;
}
.qty-admin-tabs .seg-btn:hover { color: var(--ink); }
.qty-admin-tabs .seg-btn.qty-seg-on { background: transparent; border-color: transparent; border-bottom-color: var(--blue); color: var(--blue); font-weight: 700; }
.qty-admin-panel { display: none; }
.qty-admin-panel.qty-admin-panel-on { display: block; }
.qty-admin-jobpick { flex: 0 1 360px; margin-bottom: 0; }
.qty-admin-items-table th.qty-bill-sort:hover { background: var(--gray-2); }
.qty-admin-items-table { table-layout: auto; }
/* Right-aligned, formatted Contract Qty / Unit Price, Active as a tinted
   pill rather than plain text (2026-09-24 fix pass). */
.qty-admin-c-qty, .qty-admin-c-price { text-align: right; white-space: nowrap; }
.qty-admin-c-active { text-align: center; white-space: nowrap; }
.qty-admin-c-measured { white-space: nowrap; }
.qty-admin-pill { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; background: var(--gray-1); color: var(--gray-5); }
.qty-admin-pill-on { background: var(--green-tint); color: var(--green-dark); }

/* Contract items toolbar (2026-09-24 fix pass): Job picker on the left,
   Search + Download/Upload template + Add item — all compact, right-
   aligned, reusing qty-bill-toolbar's one-line-at->=1100px layout. */
.qty-admin-items-toolbar { align-items: flex-end; }
/* All four actions stay on the toolbar's own line together (2026-09-24 fix
   pass: this container's own flex-wrap:wrap was dropping "Add item" onto a
   second line by itself even though the outer .qty-bill-toolbar had room) —
   the search box is what shrinks first if space is tight. */
.qty-admin-toolbar-actions { display: flex; align-items: flex-end; gap: var(--s2); flex-wrap: nowrap; margin-left: auto; }
.qty-admin-search { width: auto; flex: 1 1 160px; min-width: 110px; margin: 0; }
.qty-admin-toolbar-actions .btn { width: auto; flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 1099px) {
  .qty-admin-toolbar-actions { flex-wrap: wrap; }
}

/* Previous quantities tab: a normal-sized "Choose file" button with help
   text beside it (wraps under it below ~700px, same field-row convention
   the rest of the app uses). */
.qty-admin-prevqty-row { display: flex; align-items: center; gap: var(--s3) var(--s4); flex-wrap: wrap; margin-bottom: var(--s3); }
.qty-admin-prevqty-row .btn { width: auto; flex: 0 0 auto; }

/* crew check — 2026-09-28, crew check — sql/migrations/workforce_crew_need_check.sql
   Check Your Job's weekly crew-check card, right after .team-card (reuses
   its wrapper). Rows wrap rather than scroll — this has to sit flat on a
   375px phone same as the team card above it. */
.cc-crew-groups { margin-bottom: 4px; }
.cc-crew-group + .cc-crew-group { margin-top: 12px; }
.cc-crew-heading { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--gray-5); margin-bottom: 4px; }
.cc-person-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 7px 0; border-top: 1px solid var(--gray-2); }
.cc-crew-heading + .cc-person-row { border-top: none; }
.cc-person-main { flex: 1 1 160px; min-width: 0; }
.cc-person-name { display: block; font-size: 14px; color: var(--ink); }
/* 2026-09-28 — sql/migrations/workforce_crew_need_check.sql: a temp
   agency person's own small muted tag, inline right after the name —
   same quiet look as the admin console's .wf-temptag (wf-temp.js). */
.crewcheck-temp { font-size: 11px; font-weight: 700; color: var(--gray-5); background: var(--gray-1); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.cc-person-role { display: block; font-size: 12px; color: var(--gray-5); }
.cc-person-dates { flex: 0 0 auto; font-size: 12px; color: var(--gray-5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-pill { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.cc-pill-new { background: var(--gold); color: var(--ink); }
.cc-pill-muted { background: var(--gray-1); color: var(--gray-5); }
.cc-status { font-size: 13px; color: var(--gray-5); margin: 10px 0 0; }
.cc-status-wrong { color: var(--gold-ink); font-weight: 600; }
.cc-status-note { font-size: 13px; color: var(--ink); margin: 4px 0 0; font-style: italic; }
.cc-status-handled { font-size: 12.5px; color: var(--gray-5); margin: 4px 0 0; }
.cc-status-muted { font-size: 13px; color: var(--gray-5); margin: 10px 0 0; }
.cc-actions { display: flex; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
.cc-actions .btn { flex: 1 1 auto; min-width: 140px; }
/* 2026-09-30: Check Your Job's cards sit in three real columns (status.js
   loadAndRender draws them). Each .st-col stacks its own cards top to bottom,
   so a short card never leaves a hole beside a tall one — the old grid put
   the five cards into rows and the second row was two cards and a gap.
     phone (< 720px)    one column, in source order
     tablet (720–1119)  two columns: score + crews | team + crew list, and the
                        activity log full width underneath
     desktop (1120+)    score + crews | team + crew list | activity log
   The Back button, the heading, the job chip and the week nav stay full width
   above. An empty card (no crew-check schema, no activity) leaves no gap. */
.st-cols { display: grid; gap: var(--s4); align-items: start; grid-template-columns: minmax(0, 1fr); }
.st-col { min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }
.st-col-item { min-width: 0; }
.st-col-item:empty, .st-col-item:has(> #crewCheckCard:empty), .st-col-item:has(> #stActivity:empty) { display: none; }
.st-col-log:has(> .st-col-item > #stActivity:empty) { display: none; }
@media (min-width: 720px) {
  .st-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-col-log { grid-column: 1 / -1; }
}
@media (min-width: 1120px) {
  .st-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-col-log { grid-column: auto; }
}
.st-col-item > .li-head, .st-col-item > .cc-card, .st-col-item > .team-card,
.st-col-item > #crewCheckCard > .team-card, .st-col-item > #stActivity > .team-card { margin-top: 0; margin-bottom: 0; }
@media (min-width: 760px) { .screen.st-wide { max-width: 1500px; } }
.qty-admin-prevqty-help { margin: 0; flex: 1 1 320px; }

/* job people
   2026-09-29 — sql/migrations/workforce_job_requests.sql
   job-people.js / job-people-add.js: the sheet a tap on a person (or "+ Add")
   opens from the crew card and the project team card, and the taps and pills
   on those two cards. Bottom sheet on a phone, centred 520px card from 700px.
   Sits above the header and above .job-sheet-wrap (1000). */
.jp-wrap {
  position: fixed; inset: 0; z-index: 1050; background: rgba(26, 26, 26, 0.5);
  display: flex; align-items: flex-end; justify-content: center;
}
.jp-sheet {
  background: var(--white); width: 100%; max-width: 100%; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-lg);
}
@media (min-width: 700px) {
  .jp-wrap { align-items: center; }
  .jp-sheet { width: 520px; border-radius: var(--radius); }
}
.jp-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s4) var(--s2); }
.jp-head h2 { margin: 0; font-size: 20px; min-width: 0; overflow-wrap: anywhere; }
.jp-close {
  flex: 0 0 auto; width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--gray-7); border-radius: var(--radius-sm);
}
.jp-close:active { background: var(--gray-1); }
.jp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s4) var(--s6); }
.jp-who { margin: 0 0 var(--s2); font-size: 14px; color: var(--ink); }
.jp-mode { margin: 0 0 var(--s3); font-size: 13px; color: var(--gray-5); }
.jp-dates-read { margin: 0 0 var(--s2); font-size: 14px; color: var(--gray-7); font-variant-numeric: tabular-nums; }
.jp-answer { margin: 0 0 var(--s3); font-size: 13px; color: var(--gray-5); }
.jp-ask { margin: 0 0 var(--s3); padding: var(--s3); background: var(--gold-tint); border: 1px solid var(--gold); border-radius: var(--radius-sm); }
.jp-ask b { display: block; font-size: 14px; color: var(--ink); }
.jp-ask span { display: block; font-size: 13px; color: var(--gold-ink); margin-top: 2px; }
.jp-ask .btn-link { margin-top: var(--s2); }
.jp-dates { display: grid; grid-template-columns: 1fr; gap: 0 var(--s3); }
@media (min-width: 380px) { .jp-dates { grid-template-columns: 1fr 1fr; } }
.jp-err { margin: 0 0 var(--s3); font-size: 14px; font-weight: 600; color: var(--red); }
.jp-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); margin-top: var(--s3); }
.jp-actions .btn-link { align-self: center; min-height: 40px; }
.jp-back { display: inline-block; min-height: 36px; margin-bottom: var(--s2); }
.jp-empty { margin: var(--s3) 0; font-size: 14px; color: var(--gray-5); }
.jp-choice {
  display: block; width: 100%; min-height: var(--tap); margin-bottom: var(--s2); padding: var(--s3) var(--s4);
  text-align: left; font: inherit; font-size: 17px; font-weight: 700; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--gray-3); border-radius: var(--radius); cursor: pointer;
}
.jp-choice:hover { border-color: var(--blue); }
.jp-choice:active { filter: brightness(0.96); }
.jp-list { margin-bottom: var(--s2); }
.jp-row {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: var(--tap);
  padding: var(--s2) 2px; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--gray-2);
}
.jp-row:active { background: var(--gray-1); }
.jp-row:disabled { opacity: 0.55; cursor: default; }
.jp-row-main { flex: 1 1 auto; min-width: 0; }
.jp-row-name { display: block; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.jp-row-sub { display: block; font-size: 12.5px; color: var(--gray-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-row-right { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--green-dark); text-align: right; }
.jp-row-right.jp-muted { color: var(--gray-5); font-weight: 600; }
.jp-row:focus-visible, .jp-choice:focus-visible, .jp-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* a new crew: tick people from the list, a Foreman radio beside each ticked one; a crew request's labour lines */
.jp-multi { cursor: default; }
.jp-multi-pick { display: flex; align-items: center; gap: var(--s3); flex: 1 1 auto; min-width: 0; cursor: pointer; }
.jp-multi-pick input { width: 20px; height: 20px; flex: 0 0 auto; }
.jp-multi-fm { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.jp-lines { width: 100%; border-collapse: collapse; margin-bottom: var(--s1); }
.jp-lines th { text-align: left; font-size: 12.5px; font-weight: 700; color: var(--gray-5); padding: 0 4px 4px 0; }
.jp-lines td { padding: 0 4px 6px 0; }
.jp-lines select { width: 100%; }
.jp-lines input[type=number] { width: 72px; }
.jp-line-x { font-size: 20px; line-height: 1; padding: 4px 8px; }

/* the taps on the crew card and the project team card */
.cc-person-tap {
  width: 100%; min-height: 44px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: none; border-left: 0; border-right: 0; border-bottom: 0;
}
.cc-person-tap:active, .tm-tap:active { filter: brightness(0.94); }
.cc-person-tap:focus-visible, .tm-tap:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cc-chev, .tm-chev { flex: 0 0 auto; color: var(--gray-5); font-size: 20px; font-weight: 400; line-height: 1; }
.tm-chev { margin-left: 8px; }
.tm-tap {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--gray-1);
}
.cc-pill-ask { background: none; border: 1px solid var(--gold); color: var(--gold-ink); }
.tm-role .cc-pill-ask { display: inline-block; margin-left: 6px; }
.btn.cc-add { margin-top: var(--s3); min-height: 44px; font-size: 15px; }
.tm-addbtn { margin-top: var(--s2); }
/* 2026-09-29 (later): the Add / Request pair, side by side, wrapping to two
   lines on a narrow phone. */
.cc-addrow { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.cc-addrow .btn { flex: 1 1 auto; width: auto; margin-top: 0; }
.cc-addrow.tm-addrow { margin-top: var(--s2); }
/* 2026-09-29 — sql/migrations/division_crew_card.sql: "Crews per day" now has
   two buttons (Copy last week, Use Job Resources); the second sits right
   against the first instead of taking its own share of the free space. */
.cc-head > .btn + .btn { margin-left:0; }

/* "Asked for": people and crews somebody asked the planner for */
.jp-asked { margin-top: var(--s3); }
.jp-asked-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 7px 0; border-top: 1px solid var(--gray-2); }
.jp-asked-row > div:first-child { min-width: 0; }
.jp-asked-main { display: block; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.jp-asked-sub { display: block; font-size: 12px; color: var(--gray-5); }
.jp-asked-right { flex: 0 0 auto; font-size: 12.5px; color: var(--gray-5); text-align: right; }
.jp-pill { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--gold-tint); color: var(--gold-ink); }
.jp-pill-accepted { background: var(--green-tint); color: var(--green-dark); }
.jp-pill-declined { background: var(--red-tint); color: var(--red); }
/* Billing detail: the patch sizes under a worksheet line's quantity. */
.qty-bill-patches { font-size: 12px; white-space: normal; }

/* ============================================================
   Summary: Status / Daily grid views, pay period, paid boxes
   (2026-09-29, from the office tracking workbook). Scoped qty-*.
   ============================================================ */
.qty-bill-viewbar { display: flex; align-items: center; gap: var(--s2) var(--s4); flex-wrap: wrap; margin-bottom: var(--s3); }
.qty-bill-view { margin-top: 0; }
.qty-bill-view .seg-btn { font-size: 14px; padding: 0 var(--s3); min-height: 40px; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; }
.qty-bill-period { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--gray-7); margin: 0; }
.qty-bill-period input[type="number"] { width: 64px; min-height: 36px; padding: 0 6px; text-align: center; }
.qty-bill-savenote { min-width: 64px; }
.qty-bill-view-extra { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s2); }
.qty-bill-view-extra .sub { margin: 0; }

/* Seven tiles across on a desktop (five before Paid / Installed-not-paid). */
@media (min-width: 1100px) {
  .qty-bill-tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .qty-bill-tile-val { font-size: 17px; }
  .qty-bill-tile-sub { margin-left: 4px; font-size: 12px; }
}

/* Paid columns in the Summary table. */
.qty-bill-c-paid { width: 84px; }
.qty-bill-c-ptd { width: 76px; }
/* Room for a six-figure quantity (297,081.66) in the Summary's quantity columns
   now that two paid columns share the row; the amounts and the price give a
   few pixels back. */
.qty-bill-c-item { width: 104px; }
.qty-bill-c-cqty { width: 78px; }
.qty-bill-c-prev, .qty-bill-c-mo, .qty-bill-c-todate { width: 84px; }
.qty-bill-c-price { width: 80px; }
.qty-bill-c-pct { width: 62px; }
.qty-bill-c-amo, .qty-bill-c-aprev { width: 104px; }
.qty-bill-c-atodate { width: 106px; }
.qty-bill-table th, .qty-bill-table td { padding-left: 4px; padding-right: 4px; }
.qty-bill-table .qty-bill-c-paid { padding-top: 2px; padding-bottom: 2px; }
.qty-paid-in { width: 100%; box-sizing: border-box; min-height: 0; height: 26px; padding: 0 4px; font-size: 13px; text-align: right; border: 1px solid var(--gray-3); border-radius: 4px; background: var(--white); }
.qty-paid-in:focus { outline: 2px solid var(--blue); outline-offset: 0; }

/* Pills shared by the Status view. */
.qty-st-pill { display: inline-block; padding: 0 8px; border-radius: 12px; font-size: 12.5px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.qty-st-pill-amber { background: var(--gold-tint); color: var(--gold-ink); }
.qty-st-pill-ok { background: var(--green-tint); color: var(--green-dark); }
.qty-st-pill-blue { background: var(--blue-tint); color: var(--blue-dark); }
.qty-st-asof { margin: 0 0 var(--s2); }

/* Status: wide, scrolls inside its own box, Line # / Item # / Description
   stay put on the left. */
.qty-st-wrap, .qty-dg-wrap { overflow: auto; max-height: min(66vh, 680px); background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); }
.qty-st-table, .qty-dg-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.qty-st-table th, .qty-st-table td, .qty-dg-table th, .qty-dg-table td { border-width: 0 1px 1px 0; }
.qty-st-table th, .qty-st-table td { padding: 4px 8px; white-space: nowrap; }
.qty-st-table thead th, .qty-dg-table thead th { position: sticky; top: 0; z-index: 2; line-height: 1.2; vertical-align: bottom; }
.qty-st-table thead th { white-space: normal; }
.qty-st-table tfoot td, .qty-dg-table tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--gray-1); border-top: 1px solid var(--gray-3); }
.qty-billing .qty-st-table td, .qty-billing .qty-st-table th { text-align: right; }
.qty-billing .qty-st-table td.qty-st-c-line, .qty-billing .qty-st-table th.qty-st-c-line,
.qty-billing .qty-st-table td.qty-st-c-item, .qty-billing .qty-st-table th.qty-st-c-item,
.qty-billing .qty-st-table td.qty-st-c-desc, .qty-billing .qty-st-table th.qty-st-c-desc,
.qty-billing .qty-st-table td.qty-st-c-unit, .qty-billing .qty-st-table th.qty-st-c-unit,
.qty-billing .qty-st-table td.qty-st-c-status, .qty-billing .qty-st-table th.qty-st-c-status { text-align: left; }
.qty-st-c-price { min-width: 84px; }
.qty-st-c-qty { min-width: 88px; }
.qty-st-c-money { min-width: 112px; }
.qty-st-c-year { min-width: 76px; }
.qty-st-c-unit { min-width: 44px; }
.qty-st-c-status { min-width: 170px; }
.qty-st-table .qty-st-c-line, .qty-st-table .qty-st-c-item, .qty-st-table .qty-st-c-desc { position: sticky; z-index: 1; background: var(--white); }
.qty-st-table thead .qty-st-c-line, .qty-st-table thead .qty-st-c-item, .qty-st-table thead .qty-st-c-desc { z-index: 4; background: var(--gray-1); }
.qty-st-table tfoot .qty-st-c-line, .qty-st-table tfoot .qty-st-c-item, .qty-st-table tfoot .qty-st-c-desc { z-index: 4; background: var(--gray-1); }
.qty-st-table .qty-st-c-line { left: 0; width: 56px; min-width: 56px; max-width: 56px; }
.qty-st-table .qty-st-c-item { left: 56px; width: 108px; min-width: 108px; max-width: 108px; }
.qty-st-table .qty-st-c-desc { left: 164px; width: 230px; min-width: 230px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; box-shadow: 2px 0 0 var(--gray-3); }
.qty-st-table tbody tr:hover td { background: var(--blue-tint); }

/* Daily grid: one narrow column per day; Line # / Item # / Description on
   the left and Total Quantity / Total Amount on the right stay put. */
.qty-dg-table th, .qty-dg-table td { padding: 3px 4px; white-space: nowrap; }
.qty-dg-table thead tr:first-child th { height: 26px; box-sizing: border-box; }
.qty-dg-table thead tr:nth-child(2) th { top: 26px; height: 26px; box-sizing: border-box; }
.qty-billing .qty-dg-table td.qty-dg-c, .qty-billing .qty-dg-table th.qty-dg-day { text-align: center; }
.qty-billing .qty-dg-table th.qty-dg-month { text-align: left; padding-left: 8px; }
.qty-dg-day, .qty-dg-c { min-width: 34px; width: 34px; padding-left: 2px; padding-right: 2px; }
.qty-dg-table th.qty-dg-month { font-weight: 700; }
.qty-dg-we { background: var(--gray-1); }
.qty-dg-table thead th.qty-dg-we { background: var(--gray-2); }
.qty-dg-has { cursor: pointer; font-weight: 700; color: var(--blue-dark); }
.qty-dg-has:hover { background: var(--blue-tint); }
.qty-dg-picked { outline: 2px solid var(--blue); outline-offset: -2px; background: var(--blue-tint); }
.qty-dg-table .qty-dg-line, .qty-dg-table .qty-dg-item, .qty-dg-table .qty-dg-desc, .qty-dg-table .qty-dg-tq, .qty-dg-table .qty-dg-ta { position: sticky; z-index: 1; background: var(--white); }
.qty-dg-table thead .qty-dg-line, .qty-dg-table thead .qty-dg-item, .qty-dg-table thead .qty-dg-desc, .qty-dg-table thead .qty-dg-tq, .qty-dg-table thead .qty-dg-ta,
.qty-dg-table tfoot .qty-dg-line, .qty-dg-table tfoot .qty-dg-item, .qty-dg-table tfoot .qty-dg-desc, .qty-dg-table tfoot .qty-dg-tq, .qty-dg-table tfoot .qty-dg-ta { z-index: 4; background: var(--gray-1); }
.qty-dg-table .qty-dg-line { left: 0; width: 52px; min-width: 52px; max-width: 52px; }
.qty-dg-table .qty-dg-item { left: 52px; width: 104px; min-width: 104px; max-width: 104px; }
.qty-dg-table .qty-dg-desc { left: 156px; width: 210px; min-width: 210px; max-width: 210px; overflow: hidden; text-overflow: ellipsis; box-shadow: 2px 0 0 var(--gray-3); }
.qty-dg-table .qty-dg-tq { right: 118px; width: 86px; min-width: 86px; text-align: right; box-shadow: -2px 0 0 var(--gray-3); }
.qty-dg-table .qty-dg-ta { right: 0; width: 118px; min-width: 118px; text-align: right; }
.qty-billing .qty-dg-table td.qty-dg-tq, .qty-billing .qty-dg-table td.qty-dg-ta, .qty-billing .qty-dg-table th.qty-dg-tq, .qty-billing .qty-dg-table th.qty-dg-ta { text-align: right; }
.qty-dg-table tbody tr:hover td.qty-dg-line, .qty-dg-table tbody tr:hover td.qty-dg-item, .qty-dg-table tbody tr:hover td.qty-dg-desc { background: var(--blue-tint); }
/* Column widths: drag the right edge of a header (owner, 2026-09-30). The
   handle sits on the header's right edge; the widths themselves are written
   into #qtyColwStyle by quantity-billing.js (applyColWidths). */
.qty-colrz { position: absolute; top: 0; right: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 2; touch-action: none; user-select: none; }
.qty-colrz::after { content: ""; position: absolute; top: 4px; bottom: 4px; right: 3px; width: 2px; border-radius: 1px; background: transparent; }
th.qty-bill-sort:hover .qty-colrz::after, .qty-colrz:hover::after { background: var(--gray-4); }
.qty-colrz:hover::after, .qty-colrz-drag::after { background: var(--blue); }
.qty-colrz-on, .qty-colrz-on th { cursor: col-resize; user-select: none; }
.qty-dg-detail { margin-top: var(--s3); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); background: var(--gray-0, #f7f7f7); padding: var(--s3) var(--s4); }

/* Pieces worksheet, piece types and the lump-sum schedule (owner, 2026-09-30).
   The pieces modal reuses the patch worksheet's table; it only needs a wider
   sheet for the piece-type select. */
.qty-pieces-modal .cp-sheet { max-width: 720px; }
.qty-pieces-table td { vertical-align: middle; }
.qty-pieces-table td:nth-child(3), .qty-pieces-table td:nth-child(4) { white-space: nowrap; }
.qty-pieces-table th:nth-child(n+2), .qty-pieces-table td:nth-child(n+2) { text-align: right; }
.qty-pieces-table th:nth-child(5), .qty-pieces-table td:nth-child(5) { text-align: center; }
.qty-pieces-table select.qty-piece-select { min-width: 200px; width: 100%; text-align: left; }
.qty-pieces-table input.qty-cell-input { min-width: 72px; text-align: right; }
#qtyPieceCyAction, #qtyPieceLbsAction { margin-top: var(--s2); }
#qtyPieceCyAction .btn, #qtyPieceLbsAction .btn { width: 100%; }
.qty-pieces-admin-table th, .qty-pieces-admin-table td { text-align: left; }
.qty-pieces-admin-table th.qty-bill-c-cqty, .qty-pieces-admin-table td.qty-bill-c-cqty { text-align: right; }
.qty-ls-plan { margin-top: var(--s4); scroll-margin-top: 96px; }
.qty-ls-plan .qty-table-wrap { max-width: 640px; }
.qty-ls-table th, .qty-ls-table td { text-align: left; padding: 2px 6px; vertical-align: middle; }
.qty-ls-table input.qty-cell-input { width: 100%; min-width: 72px; }
.qty-ls-table td:first-child input { max-width: 120px; }
.qty-ls-table td:nth-child(2) input { max-width: 90px; text-align: right; }
.qty-ls-actions { display: flex; gap: var(--s3); margin-top: var(--s3); }
.qty-ls-warn { color: var(--gold-ink); font-weight: 700; }
.qty-bill-plan { font-size: 11px; color: var(--gray-5); white-space: normal; }

/* ---- Specs (specs.js) -----------------------------------------------------
   The job's spec books, the upload form, and the read-only split proposal:
   status chips, a confidence dot per section and flag chips. */
.specs-back { width: auto; margin-bottom: 10px; }
.specs-up { margin-top: var(--s3); }
.specs-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); width: 100%; text-align: left;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 12px 14px; margin-top: var(--s3); font-family: var(--font); cursor: pointer; min-height: var(--tap); }
.specs-row:active { background: var(--gray-1); }
.specs-row-main { flex: 1 1 200px; min-width: 0; }
.specs-row-title { display: block; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.specs-row-sub { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.specs-progress { flex-basis: 100%; font-size: 13px; color: var(--blue-dark); }
.specs-progress:empty { display: none; }
.specs-note { flex-basis: 100%; font-size: 13px; color: var(--red); overflow-wrap: anywhere; }
.specs-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.specs-chip-busy { background: var(--blue-tint); color: var(--blue-dark); }
.specs-chip-review { background: var(--gold-tint); color: var(--gold-ink); }
.specs-chip-ok { background: var(--green-tint); color: var(--green-dark); }
.specs-chip-bad { background: var(--red-tint); color: var(--red); }
.specs-proposal-status { margin-bottom: var(--s3); }
.specs-coverage { font-weight: 700; color: var(--ink); margin-bottom: var(--s4); }
.specs-sec { display: flex; align-items: flex-start; gap: var(--s3); padding: 10px 0; border-top: 1px solid var(--line-soft); }
.specs-sec-main { flex: 1; min-width: 0; }
.specs-sec-num { display: block; font-weight: 700; color: var(--ink); }
.specs-sec-title { display: block; color: var(--gray-7); overflow-wrap: anywhere; }
.specs-sec-pages { font-size: 13px; color: var(--muted); white-space: nowrap; }
.specs-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; }
.specs-dot-hi { background: var(--green); }
.specs-dot-mid { background: var(--amber); }
.specs-dot-lo { background: var(--red); }
.specs-flags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
.specs-flag { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--gray-1); color: var(--gray-7); border: 1px solid var(--gray-2); }

/* ===== Daily Log ===== */
/* dailylog.js + dailylog-lines.js (the laptop) and dailylog-phone.js (the phone, further down). One log per job per day: a week strip, a toolbar, a rail of sections and the sections as cards with tables inside (each in its own overflow-x box, so the page never scrolls sideways). Dressed like the rest of the app: Noto Sans, .card sections, .btn buttons, .banner notices, pills like .cp-badge. */
.screen.dl-wide { max-width: 1280px; }
.dl-headrow { margin-bottom: 6px; }
.dl-headrow .btn { width: auto; }
.dl-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: var(--s3); }
.dl-chip { font-size: 13px; font-weight: 700; border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; background: var(--white); color: var(--gray-7); max-width: 100%; overflow-wrap: anywhere; }
#dlBody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.dl-weekrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; align-items: stretch; min-width: 0; }
.dl-weekrow .dl-wk { width: auto; min-height: 56px; padding: 0; }
.dl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; min-width: 0; }
.dl-day { min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 2px 7px; font: inherit; color: var(--ink); background: var(--white); border: 1.5px solid var(--gray-2); border-radius: 9px; cursor: pointer; }
.dl-day b { display: block; font-size: 13px; font-weight: 700; line-height: 1.2; }
.dl-dword { font-size: 11px; font-weight: 700; color: var(--gray-5); }
.dl-dword.ok { color: var(--green-dark); } .dl-dword.wn { color: #8A6500; }
.dl-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--gray-3); }
.dl-dot.ok { background: var(--green); } .dl-dot.wn { background: var(--gold); }
.dl-dshort { display: none; }
.dl-day.today b { text-decoration: underline; }
.dl-day.sel { border-color: var(--blue); background: var(--blue-tint); }
.dl-day:disabled { opacity: .45; cursor: default; }
.dl-m .dl-dfull, .dl-m .dl-dword { display: none; }
.dl-m .dl-dshort { display: inline-flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 700; color: var(--gray-5); line-height: 1.1; }
.dl-m .dl-dshort em { font-style: normal; font-size: 17px; color: var(--ink); line-height: 1.2; }
.dl-day:focus-visible, .dl-sh:focus-visible, .dl-rail-a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dl-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px; }
.dl-bar .btn { width: auto; }
.dl-grow { flex: 1; }
.dl-status { font-size: 14px; color: var(--gray-7); white-space: nowrap; }
.dl-status.bad { color: #7A5C00; font-weight: 600; }
.dl-status .dl-retry { background: none; border: 0; padding: 0; margin-left: 6px; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.dl-pill { display: inline-block; flex: none; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--gray-2); background: var(--gray-1); color: var(--gray-7); white-space: nowrap; vertical-align: middle; }
.dl-pill.open { background: var(--gold-tint); border-color: #E8C55A; color: #8A6500; }
.dl-pill.done, .dl-pill.ok { background: var(--green-tint); border-color: #B7D9A5; color: var(--green-dark); }
.dl-pill.warn { background: var(--orange-tint); border-color: #F3C3A6; color: #B5551F; }
.dl-pill.bad { background: var(--red-tint); border-color: #E5B5B7; color: var(--red); }
.dl-pill.info { background: var(--blue-tint); border-color: #BCD3EE; color: var(--blue-dark); }
.dl-donenote { margin: 0; }
.dl-notice { margin: 0; }
.dl-notice[hidden] { display: none; }
.dl-empty { background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s6) var(--s4); text-align: center; }
.dl-empty .btn { width: auto; display: inline-flex; }
.dl-empty .sub { margin: var(--s3) 0 0; font-size: 15px; }
.dl-cols { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: start; }
.dl-rail { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 8px); background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 0; font-size: 15px; }
.dl-rail h4 { margin: 4px 14px 6px; font-size: 11px; font-weight: 700; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.dl-rail-a { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; min-height: 36px; padding: 6px 14px; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.dl-rail-a:hover { background: var(--gray-1); }
.dl-rail-a i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--muted); }
.dl-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.dl-sec { background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.dl-sh { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px 16px; cursor: pointer; user-select: none; }
.dl-sh h2 { font-size: 18px; font-weight: 700; margin: 0; }
.dl-sh .dl-sum { color: var(--muted); font-size: 14px; }
.dl-car { color: var(--muted); font-size: 11px; width: 12px; transition: transform .12s; }
.dl-sec.shut .dl-car { transform: rotate(-90deg); }
.dl-sec.shut > .dl-body { display: none; }
.dl-body { border-top: 1px solid var(--gray-2); min-width: 0; }
.dl-line { padding: 12px 16px; color: var(--muted); font-size: 15px; }
.dl-tbl { overflow-x: auto; max-width: 100%; }
.dl-table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 15px; }
.dl-table th { font-weight: 700; color: var(--muted); font-size: 13px; text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--gray-2); white-space: nowrap; }
.dl-table td { padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dl-table tbody tr:hover td { background: var(--gray-1); }
.dl-table td.n, .dl-table th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-table tfoot td { border-bottom: 0; font-weight: 700; color: var(--gray-7); font-size: 15px; padding: 10px 8px; }
.dl-table tr.dl-none td { color: var(--muted); font-size: 15px; padding: 12px 16px; }
.dl-table .dl-foot-note { font-weight: 400; }
/* lowest specificity, so the named column widths below still win */
:where(.dl-table td) { min-width: 72px; }
:where(.dl-table td:first-child) { min-width: 110px; }
:where(.dl-t-items td:first-child) { min-width: 150px; }
.dl-c-act { min-width: 130px; } .dl-c-note { min-width: 100px; } .dl-c-pk { min-width: 140px; } .dl-c-unit { min-width: 180px; } .dl-c-comp { min-width: 150px; } .dl-c-po { min-width: 220px; } .dl-c-unitq { width: 80px; }
.dl-c-x { width: 34px; text-align: center; position: relative; }   /* position: relative keeps the screen-reader text inside its own scroll box */
.dl-pht { color: var(--muted); font-size: 14px; white-space: nowrap; }
.dl-in, .dl-sel { font: inherit; font-size: 16px; height: 40px; width: 100%; min-width: 0; padding: 4px 8px; border: 1.5px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink); }
.dl-sel { width: auto; min-width: 110px; }
.dl-in:hover, .dl-sel:hover { border-color: var(--gray-3); background: var(--white); }
.dl-in:focus, .dl-sel:focus { border-color: var(--blue); background: var(--white); outline: none; box-shadow: 0 0 0 3px rgba(0, 87, 184, .15); }
.dl-num { width: 60px; padding-left: 4px; padding-right: 4px; text-align: right; font-variant-numeric: tabular-nums; }
.dl-table td.n { min-width: 0; }
input.dl-chk { width: auto; height: auto; margin: 0; }
.dl-ro { padding: 0 8px; overflow-wrap: anywhere; }
.dl-pick { font: inherit; font-size: 15px; min-height: 40px; min-width: 96px; max-width: 100%; text-align: left; padding: 4px 28px 4px 10px; border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; overflow-wrap: anywhere;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238A94A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; }
.dl-pick:hover { border-color: var(--gray-5); }
.dl-pick:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 87, 184, .15); }
.dl-ph { color: var(--faint); }
.dl-tog { font: inherit; font-size: 14px; font-weight: 700; min-width: 56px; min-height: 36px; border-radius: var(--radius-sm); border: 1.5px solid var(--gray-3); background: var(--white); color: var(--gray-7); cursor: pointer; padding: 0 12px; }
.dl-tog.yes { background: var(--green); border-color: var(--green); color: var(--white); }
.dl-tog.no { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.dl-ok { color: var(--green-dark); } .dl-warn { color: #7A5C00; font-weight: 600; }
.dl-pick.dl-warn { border-color: #E8C55A; background-color: var(--gold-tint); }
.dl-table tr.dl-miss td { color: var(--muted); background: var(--gray-1); }
.dl-x { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1.5px solid var(--gray-3); background: var(--white); color: var(--gray-7); font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; }
.dl-x:hover { border-color: var(--red); background: var(--red-tint); color: var(--red); }
.dl-src { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; margin-left: 8px; white-space: nowrap; vertical-align: middle; background: var(--gray-1); color: var(--gray-7); }
.dl-src.la { background: var(--blue-tint); color: var(--blue-dark); } .dl-src.new { background: var(--orange-tint); color: #B5551F; } .dl-src.tool { background: var(--gray-1); color: var(--gray-7); }
.dl-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--gray-2); margin-right: 8px; white-space: nowrap; background: var(--gray-1); color: var(--gray-7); }
.dl-tag.own { background: var(--blue-tint); border-color: #BCD3EE; color: var(--blue-dark); }
.dl-tag.rent { background: var(--orange-tint); border-color: #F3C3A6; color: #B5551F; }
.dl-tag.sub { border-color: #BCD3EE; color: var(--blue-dark); background: var(--blue-tint); }
.dl-add { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.dl-add .sub { margin: 0; font-size: 14px; }
.dl-add .btn { width: auto; }
.dl-note { padding: 12px 16px; border-bottom: 1px solid var(--gray-2); max-width: 78ch; font-size: 15px; }
.dl-who { font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.dl-who b { color: var(--ink); font-weight: 700; }
.dl-nbody { overflow-wrap: anywhere; white-space: pre-wrap; }
.dl-nta { font: inherit; font-size: 16px; width: 100%; padding: 8px 10px; border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); background: var(--white); resize: vertical; }
.dl-nta:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(0, 87, 184, .15); }
.dl-nrm { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; color: var(--blue); text-decoration: underline; cursor: pointer; }
.dl-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.dl-kv > div { padding: 10px 16px; border-right: 1px solid var(--gray-2); border-bottom: 1px solid var(--gray-2); }
.dl-kv span { display: block; font-size: 13px; color: var(--muted); }
.dl-kv b { font-weight: 700; font-size: 16px; }
.dl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dl-pop { position: fixed; z-index: 400; background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 320px; max-width: calc(100vw - 16px); font-size: 15px; display: flex; flex-direction: column; max-height: min(360px, 60vh); }
.dl-pop-q { margin: 8px; width: calc(100% - 16px); font: inherit; font-size: 16px; height: 40px; padding: 4px 10px; border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); flex: none; }
.dl-pop-list { overflow-y: auto; padding-bottom: 6px; position: relative; }
.dl-pop-typed { font-weight: 700; color: var(--blue-dark); background: var(--blue-tint); }
.dl-pop-h { margin: 6px 14px 3px; font-size: 11px; font-weight: 700; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.dl-pop-i { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 14px; font: inherit; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.dl-pop-i:hover, .dl-pop-i:focus-visible { background: var(--gray-1); outline: none; }
.dl-pop-none { color: var(--muted); }
.dl-pop-sub { color: var(--muted); font-size: 13px; }
.dl-pop-empty { padding: 12px 14px; color: var(--muted); }
.dl-tkts { display: grid; gap: 12px; padding: 12px 16px 0; min-width: 0; }
.dl-tkts > .dl-line { padding: 0; }
.dl-tkt { border: 1px solid var(--gray-2); border-radius: var(--radius); background: var(--white); min-width: 0; }
.dl-tkt-h { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 12px; align-items: end; padding: 10px 12px; background: var(--gray-1); border-bottom: 1px solid var(--gray-2); border-radius: var(--radius) var(--radius) 0 0; position: relative; padding-right: 52px; }
.dl-tkt-h > .dl-x { position: absolute; top: 10px; right: 12px; }
.dl-tf { min-width: 0; display: grid; gap: 2px; }
.dl-tf-note { grid-column: span 2; }
.dl-tl { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.dl-tkt-h .dl-in { background: var(--white); border-color: var(--gray-3); }
.dl-t-items { min-width: 560px; }
.dl-tkt .dl-add { padding: 8px 12px; }
@media (max-width: 560px) { .dl-tf-note { grid-column: auto; } }
.dl-phbtn { min-width: 0; white-space: nowrap; }
/* in the Work table a pick sits on one line (a long name ends in an ellipsis) so DFOW, Location and Crew stay readable at 1280 px */
.dl-t-work .dl-pick { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; display: block; width: 100%; }
.dl-phbtn.on { border-color: var(--blue); background-color: var(--blue-tint); }
.dl-pstrip td { background: var(--gray-1); padding: 8px 12px; }
.dl-pstrip-card { padding: 8px 12px; background: var(--gray-1); border-bottom: 1px solid var(--gray-2); }
.dl-pstripin { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dl-th { position: relative; display: inline-block; width: 88px; height: 68px; border: 1.5px solid var(--gray-2); border-radius: 8px; background: var(--white); overflow: hidden; }
.dl-th a { display: block; width: 100%; height: 100%; }
.dl-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-phpdf { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--blue); text-decoration: none; }
.dl-phtag { position: absolute; left: 3px; bottom: 3px; font-style: normal; font-size: 10px; background: rgba(26, 26, 26, .7); color: #fff; border-radius: 3px; padding: 0 4px; }
.dl-phx { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; font-size: 16px; }
/* the day's photos: a crew / subcontractor line's album line, the camera count on its row, and the Photos section's grid */
.dl-table td.dl-c-ph, .dl-table th.dl-c-ph { min-width: 0; width: 1%; text-align: center; padding-left: 2px; padding-right: 2px; }
.dl-phc { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 40px; width: auto; padding: 4px 6px; background-image: none; }
/* with the Photos column on, the Work table's DFOW, Location and Crew give back the width it takes (not below 120 px) so it still fits at 1280 px */
.dl-t-work:has(th.dl-c-ph) .dl-c-pk { min-width: 120px; }
.dl-t-work:has(th.dl-c-ph) .dl-pick { max-width: 132px; }
.dl-phc svg { width: 16px; height: 16px; flex: none; }
.dl-phc b { font-size: 14px; }
.dl-phalbum { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.dl-phn { display: flex; }
.dl-phn .dl-pill { display: inline-flex; align-items: center; gap: 5px; }
.dl-phn .dl-pill svg { width: 15px; height: 15px; }
.dl-phsec { display: grid; gap: 12px; }
.dl-phsec > p { margin: 0; }
.dl-phgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 12px; }
.dl-phcell { display: grid; gap: 4px; align-content: start; min-width: 0; }
.dl-phimg { position: relative; display: block; }
.dl-phimg a { display: block; aspect-ratio: 1; border: 1.5px solid var(--gray-2); border-radius: 8px; overflow: hidden; background: var(--white); }
.dl-phimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-phcap { font-size: 12px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.dl-phback { width: 100%; min-height: 48px; }
.dl-phoff { font-size: 14px; color: var(--muted); }
.dl-newtag { display: inline-block; font-size: 12px; font-weight: 700; margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: var(--gold-tint); color: #8A6500; white-space: nowrap; }
.dl-flag { margin: 0; }
.dl-flag[hidden] { display: none; }
.dl-flagline { margin: 2px 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.dl-flagline .btn { width: auto; }
.dl-link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: underline; cursor: pointer; }
.dl-wxhead { padding: 10px 16px 0; font-size: 15px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.dl-wxloc { padding: 10px 16px; display: grid; gap: 10px; }
.dl-wxask { margin: 0; font-size: 15px; color: var(--gray-7); }
.dl-wxways { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dl-wxll { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dl-wxll .dl-in { width: 130px; border-color: var(--gray-3); background: var(--white); }
.dl-wxpend, .dl-wxmsg { margin: 0; padding: 0 16px 10px; font-size: 15px; }
.dl-wxloc .dl-wxpend, .dl-wxloc .dl-wxmsg { padding: 0; }
.dl-wx { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
.dl-wx > div { flex: 1 1 140px; padding: 10px 12px; background: var(--gray-1); border-radius: var(--radius-sm); min-width: 0; }
.dl-wx b { font-weight: 800; font-size: 20px; display: block; }
.dl-wx span { font-size: 13px; color: var(--muted); }
.dl-wxsrc { margin: 0; padding: 0 16px 12px; font-size: 13px; color: var(--muted); }
.dl-pill.dl-wxpill { background: var(--gold-tint); border-color: #E8C55A; color: #8A6500; }
.dl-pill[hidden] { display: none; }
.dl-tick { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--green-dark); white-space: nowrap; }
.dl-tkt-scan { padding: 14px; }
.dl-scanmsg { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 15px; }
.dl-scanhelp { flex-basis: 100%; }
.dl-twarn { margin: 0; padding: 8px 12px; display: flex; gap: 8px; align-items: center; justify-content: space-between; background: var(--gold-tint); border-bottom: 1px solid #EAD48A; font-size: 15px; font-weight: 600; color: #7A5C00; }
/* round 3: the sections editor, Export, and the ticket card / weather polish */
.dl-panel { background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.dl-panel[hidden] { display: none; }
.dl-expmenu { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-exprange { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 10px; font-size: 15px; }
.dl-exprange[hidden] { display: none; }
.dl-exprange .dl-in { width: auto; border-color: var(--gray-3); background: var(--white); }
.dl-exprange .btn { width: auto; }
.dl-expmsg { font-size: 14px; color: var(--gray-7); }
.dl-cfg .sub { font-size: 14px; margin: 0 0 10px; }
.dl-cfg-list { display: grid; gap: 6px; margin-bottom: 8px; }
.dl-cfg-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--gray-2); border-radius: var(--radius); min-width: 0; }
.dl-cfg-row.off .dl-cfg-name { color: var(--muted); }
.dl-cfg-row.gone { opacity: .6; }
.dl-cfg-mv { display: inline-flex; gap: 2px; }
.dl-cfg-b { border: 1.5px solid var(--gray-3); background: var(--white); border-radius: var(--radius-sm); width: 32px; height: 32px; cursor: pointer; font-size: 11px; padding: 0; color: var(--gray-7); }
.dl-cfg-b:disabled { opacity: .35; cursor: default; }
.dl-cfg-name { font-weight: 700; font-size: 15px; flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.dl-cfg-nm { flex: 1 1 160px; border-color: var(--gray-3); background: var(--white); width: auto; }
.dl-cfg-fields { flex-basis: 100%; border-top: 1px solid var(--gray-2); padding-top: 10px; display: grid; gap: 8px; min-width: 0; }
.dl-cfg-f { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-width: 0; }
.dl-cfg-f .dl-in { flex: 1 1 140px; width: auto; border-color: var(--gray-3); background: var(--white); }
.dl-cfg-f .dl-sel { border-color: var(--gray-3); background: var(--white); }
.dl-cfg-ob { flex-basis: 100%; min-width: 0; }
.dl-cfg-ob h5 { margin: 4px 0; font-size: 13px; font-weight: 700; color: var(--gray-7); }
.dl-cfg-ol { display: grid; gap: 4px; min-width: 0; }
.dl-cfg-o { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-width: 0; }
.dl-cfg-o.off .dl-cfg-name { color: var(--muted); text-decoration: line-through; }
.dl-cfg-o .dl-in { flex: 1 1 140px; width: auto; border-color: var(--gray-3); background: var(--white); }
.dl-cfg-o .dl-cfg-name { flex: 1 1 120px; font-weight: 400; }
.dl-cfg-opts { flex: 1 1 200px; font: inherit; font-size: 15px; padding: 6px 8px; border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); background: var(--white); min-width: 0; }
.dl-cfg-wide { font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.dl-cfg-wide input { width: auto; height: auto; }
.dl-cfg-msg { margin: 10px 0 0; font-size: 15px; min-height: 1em; }
.dl-cfg-btns { display: flex; gap: 8px; margin-top: 10px; }
.dl-cfg-btns .btn { width: auto; }
.dl-tph { display: inline-flex; gap: 6px; align-items: center; }
.dl-hthumb { width: 48px; height: 36px; padding: 0; border: 1.5px solid var(--gray-2); border-radius: 6px; overflow: hidden; background: var(--white); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: var(--blue); flex: none; }
.dl-hthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-posays { display: block; font-size: 13px; color: #7A5C00; margin-top: 2px; }
.dl-nb { white-space: nowrap; }
.dl-ta { resize: none; overflow: hidden; white-space: pre; line-height: 1.3; padding-top: 6px; padding-bottom: 6px; font-family: inherit; }
.dl-rail-mk { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
/* laptop: "None today" beside the add button, the confirmed state on the section, the checklist under the toolbar, a ticket's warnings */
.dl-nonebox { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.dl-add:has(> .dl-nonebox:only-child:empty) { display: none; }
.dl-noneok { font-size: 15px; font-weight: 600; color: var(--green-dark); }
.dl-sec.none-ok { border-left: 4px solid var(--green); }
.dl-chk { background: var(--white); }
.dl-chk .dl-chk-h { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.dl-chk .dl-chkrows { max-width: 520px; margin: 10px 0; }
.dl-chk .dl-chkbtn { min-height: 48px; font-size: 16px; }
.dl-chk .dl-chk-btns { display: flex; gap: 8px; }
.dl-dup { border-top: 0; }
.dl-noqty { display: block; max-width: 120px; font-size: 12px; line-height: 1.25; text-align: left; white-space: normal; }
.dl-wxday { padding: 4px 16px 10px; display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 700; }
/* a compact Worked / Not worked on a table row, and Weather day: the two buttons of the app's .seg, 36px */
.dl-seg-s, .dl-wxday .dl-seg { display: inline-flex; margin: 0; gap: 4px; }
.dl-seg-s .seg-btn, .dl-wxday .dl-seg .seg-btn { flex: none; min-height: 36px; min-width: 48px; padding: 0 12px; font-size: 14px; }
/* ---- Daily Log on a phone (dailylog-phone.js; .screen.dl-m, and the sheets, which carry dl-m too) ----
   The Pour Log's pieces at the Pour Log's sizes: 52px fields with 18px text, 48px or taller buttons, white cards and rows with a coloured left edge, a slide-up sheet. */
.dl-m [hidden], .dl-sheetwrap [hidden] { display: none !important; }
.dl-m #dlBody { gap: 12px; }
.dl-m .card { margin-bottom: 0; }
.dl-m .eyebrow, .dl-sheetwrap .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 8px 2px -4px; }
.dl-ph-head { display: grid; gap: 6px; }
.dl-ph-head h1 { margin: 0; }
.dl-ph-head .sub { margin: 0; font-size: 16px; }
.dl-back { width: auto; justify-self: start; min-height: 48px; padding: 0 16px; }
.dl-ph-date { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dl-m .dl-status { font-size: 13px; min-height: 1.2em; white-space: normal; }
.dl-m .dl-status .dl-retry { min-height: 44px; padding: 0 8px; }
.dl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dl-two.one { grid-template-columns: 1fr; }
.dl-two .btn { min-height: 56px; font-size: 17px; padding: 8px 10px; }
.dl-m .dl-bn { margin-bottom: 0; }
.dl-hire { display: grid; gap: 10px; align-items: stretch; }
.dl-hireline { display: grid; gap: 8px; }
.dl-hireline .btn { justify-self: stretch; width: 100%; min-height: 48px; }
.dl-m .dl-notice { margin: 0; }
.dl-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dl-links .btn { width: 100%; min-height: 48px; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.dl-links .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dl-m .dl-panel { padding: 14px; }
/* the rows of the day, a ticket, a unit */
.dl-rows, .dl-list, .dl-adds { display: grid; gap: 11px; min-width: 0; }
.dl-row { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 64px; padding: 13px 12px; text-align: left; font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); cursor: pointer; }
.dl-row:active { background: var(--gray-1); }
.dl-row.g { border-left-color: var(--green); } .dl-row.o { border-left-color: var(--orange); } .dl-row.y { border-left-color: var(--gold); }
.dl-row.n { border-left-color: var(--gray-3); } .dl-row.r { border-left-color: var(--red); }
.dl-static { cursor: default; }
.dl-ico { flex: 0 0 40px; height: 40px; border-radius: 10px; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.dl-row.g .dl-ico { background: var(--green-tint); color: var(--green-dark); }
.dl-row.o .dl-ico { background: var(--orange-tint); color: #B5551F; }
.dl-row.y .dl-ico { background: var(--gold-tint); color: #8A6500; }
.dl-row.n .dl-ico { background: var(--gray-1); color: var(--gray-5); }
.dl-rt { flex: 1; min-width: 0; display: block; text-align: left; }
.dl-rt b { display: block; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.dl-rt > span { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.dl-rt .dl-rowbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dl-rowbtns .btn { min-height: 48px; }
.dl-chev { flex: none; color: var(--gray-3); font-size: 22px; font-weight: 700; line-height: 1; }
.dl-thumb { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--gray-1); border: 1px solid var(--gray-2); display: grid; place-items: center; color: var(--gray-3); }
.dl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-unit { flex: 0 0 auto; max-width: 42%; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); overflow-wrap: anywhere; }
.dl-unit.own { background: var(--blue-tint); border-color: #BCD3EE; color: var(--blue-dark); }
.dl-unit.rent { background: var(--orange-tint); border-color: #F3C3A6; color: #B5551F; }
/* a line as a card: the title opens the sheet, Worked / Not worked is answered on the card */
.dl-m .cb { padding: 13px 13px 14px; display: grid; gap: 10px; }
.dl-lcard { cursor: pointer; }
.dl-lcard.miss { background: var(--gray-1); }
.dl-lt { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 48px; padding: 0; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.dl-lt .dl-rt b { font-size: 17px; }
.dl-facts { font-size: 15px; font-weight: 700; }
.dl-facts small { font-weight: 400; color: var(--muted); font-size: 13px; white-space: nowrap; }
.dl-fill { background: var(--white); color: #7A5C00; border: 2px solid var(--gold); min-height: 52px; font-size: 17px; }
.dl-rt > .dl-rpill { margin-top: 5px; }
.dl-total { margin: 0; font-size: 16px; font-weight: 700; }
.dl-note2 { margin: 0; font-size: 13px; color: var(--muted); }
.dl-ncard { display: block; width: 100%; text-align: left; font: inherit; color: inherit; }
.dl-ncard .cb { display: grid; gap: 4px; }
.dl-ncard.mine { cursor: pointer; }
.dl-m .dl-who { display: block; font-size: 13px; color: var(--muted); margin: 0; }
.dl-m .dl-who b { color: var(--ink); font-weight: 700; }
.dl-m .dl-nbody, .dl-sheetwrap .dl-nbody { display: block; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Worked / Not worked, Working / Idle / Down, Yes / No: the chosen one takes its colour */
.dl-m .dl-seg { margin-bottom: 0; }
.dl-seg .seg-btn { min-width: 0; padding: 0 6px; }
.dl-seg .seg-btn.g { background: var(--green); border-color: var(--green); color: var(--white); }
.dl-seg .seg-btn.r { background: var(--red); border-color: var(--red); color: var(--white); }
.dl-seg .seg-btn.y { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.dl-seg .seg-btn.n { background: var(--blue-tint); border-color: var(--blue); color: var(--blue-dark); }
/* fields: label above, 52px, 18px */
.dl-m .field { margin-bottom: 0; }
.dl-f label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 5px; }
.dl-m .dl-in, .dl-sheetwrap .dl-in { display: block; width: 100%; height: auto; min-height: 52px; padding: 12px; font: inherit; font-size: 18px; color: var(--ink); background: var(--white); border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); }
.dl-m .dl-in:focus, .dl-sheetwrap .dl-in:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 87, 184, .15); }
.dl-m .dl-ta, .dl-sheetwrap .dl-ta { resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.35; }
.dl-m input[type="date"].dl-in, .dl-sheetwrap input[type="date"].dl-in { -webkit-appearance: none; appearance: none; }
.dl-ro { padding: 4px 2px; font-size: 17px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dl-ph { color: var(--faint); }
.dl-pickrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 52px; padding: 12px; text-align: left; font: inherit; font-size: 18px; color: var(--ink); background: var(--white); border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); cursor: pointer; overflow-wrap: anywhere; }
.dl-pickrow .dl-chev { font-size: 18px; }
.dl-pickrow.warn { border-color: #EAD48A; background: var(--gold-tint); color: #7A5C00; }
.dl-step { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 8px; align-items: center; }
.dl-stepb { height: 56px; padding: 0; font: 800 26px var(--font); color: var(--blue); background: var(--white); border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); cursor: pointer; }
.dl-stepb:active { background: var(--blue-tint); }
.dl-m .dl-f .dl-in.dl-stepin, .dl-sheetwrap .dl-f .dl-in.dl-stepin { height: 56px; padding: 0 6px; text-align: center; font-size: 24px; font-weight: 800; }
.dl-rm { justify-self: center; min-height: 48px; padding: 0 16px; font: 700 16px var(--font); color: var(--red); text-decoration: underline; background: none; border: 0; cursor: pointer; }
.dl-sheetwrap .btn-sm { min-height: 48px; }
.dl-sheetwrap .btn { margin: 0; }
/* the sheet: the Pour Log's truck editor */
.dl-sheetwrap { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; background: rgba(26, 26, 26, .45); }
.dl-pickwrap { z-index: 1010; }
.dl-sheet { display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: 92vh; max-height: 92dvh; overflow: hidden; overflow: clip; background: var(--white); border-radius: 18px 18px 0 0; outline: none; }
.dl-shead { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--gray-2); }
.dl-shead .dl-rt b { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-shead .dl-rt > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-shead .dl-unit { max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-sb .field, .dl-sb .dl-in, .dl-sb .dl-pickrow { scroll-margin: 12px 0 20px; }
.dl-donebtm { min-height: 56px; }
.dl-sb [data-dupbox] { display: contents; }
.dl-wraptitle .dl-shead .dl-rt b { white-space: normal; }
.dl-wraptitle .dl-shead .dl-rt > span { white-space: normal; }
/* the Mark day complete checklist (a sheet on a phone, a panel under the toolbar on a laptop) */
.dl-chkrows { display: grid; gap: 10px; }
.dl-chkrow { display: grid; gap: 2px; justify-items: start; }
.dl-chkbtn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px; text-align: left; font: inherit; font-size: 18px; font-weight: 700; color: var(--ink); background: var(--white); border: 1.5px solid var(--gray-3); border-radius: var(--radius); cursor: pointer; }
.dl-chkbtn.on { background: var(--green-tint); border-color: var(--green); color: var(--green-dark); }
.dl-box { flex: none; width: 32px; height: 32px; display: grid; place-items: center; font-size: 22px; font-weight: 800; color: var(--white); background: var(--white); border: 2px solid var(--gray-3); border-radius: 8px; }
.dl-chkbtn.on .dl-box { background: var(--green); border-color: var(--green); }
.dl-chkrow .dl-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.dl-chkgo { margin-top: 6px; }
.dl-noneline { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.dl-noneline > span { flex: 1; min-width: 0; }
.dl-noneline .dl-link { min-height: 44px; }
.dl-shdone { flex: none; width: auto; min-height: 48px; padding: 0 22px; font-size: 16px; }
.dl-sb { flex: 1 1 auto; min-height: 0; display: grid; align-content: start; gap: 14px; padding: 14px 14px calc(26px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.dl-sb .banner { margin-bottom: 0; }
.dl-warnb { align-items: flex-start; }
.dl-warnb > span { flex: 1; min-width: 0; }
.dl-dismiss { flex: none; width: 44px; height: 44px; margin: -8px -10px -8px 0; font-size: 24px; line-height: 1; color: inherit; background: none; border: 0; cursor: pointer; }
.dl-posays { display: block; margin-top: 4px; font-size: 13px; color: #7A5C00; }
.dl-item { background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius); }
.dl-item.open { border-color: var(--blue); }
.dl-itemh { display: grid; gap: 3px; width: 100%; min-height: 48px; padding: 10px 12px; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.dl-itemh b { font-size: 16px; overflow-wrap: anywhere; }
.dl-itemh span { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.dl-itemh .m { color: var(--green-dark); font-weight: 700; } .dl-itemh .w { color: #B5551F; font-weight: 700; }
.dl-itemb { display: grid; gap: 12px; padding: 2px 12px 14px; }
.dl-two2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dl-two2 .field { min-width: 0; }
/* photos */
.dl-photos { display: grid; gap: 10px; }
.dl-pgrid { display: flex; flex-wrap: wrap; gap: 14px; }
.dl-pt { position: relative; width: 88px; height: 88px; }
.dl-pthumb { display: block; padding: 0; background: none; border: 0; }
.dl-pdf { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; font-weight: 700; color: var(--blue); text-decoration: none; border: 1.5px solid var(--gray-2); border-radius: 8px; }
.dl-ptx { position: absolute; top: -13px; right: -13px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: none; border: 0; cursor: pointer; }
.dl-ptx span { width: 26px; height: 26px; display: grid; place-items: center; font-size: 17px; line-height: 1; color: #fff; background: var(--red); border-radius: 50%; box-shadow: var(--shadow); }
.dl-phtag { position: absolute; left: 4px; bottom: 4px; font-style: normal; font-size: 11px; color: #fff; background: rgba(26, 26, 26, .7); border-radius: 4px; padding: 0 5px; }
.dl-pbusy { width: 88px; height: 88px; display: grid; place-items: center; }
.dl-addph { cursor: pointer; }
/* the list sheet (and the time sheet) */
.dl-pickwrap .dl-sb { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.dl-pqw { flex: none; padding: 12px 14px 10px; }
.dl-plist { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.dl-pr { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; padding: 6px 14px; text-align: left; font: inherit; font-size: 17px; color: var(--ink); background: none; border: 0; border-top: 1px solid var(--gray-2); cursor: pointer; overflow-wrap: anywhere; }
.dl-pr small { flex: none; font-size: 13px; color: var(--muted); }
.dl-pr.on { background: var(--blue-tint); font-weight: 700; color: var(--blue-dark); }
.dl-pr-typed { font-weight: 700; color: var(--blue-dark); background: var(--blue-tint); }
.dl-pr-none { color: var(--muted); }
.dl-pgh { padding: 12px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.dl-pempty { margin: 0; padding: 14px; color: var(--muted); }
/* weather, the sections editor and Export, in the same look */
.dl-wxbox { display: grid; gap: 12px; padding: 14px; background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius); box-shadow: var(--shadow); }
.dl-m .dl-wxhead, .dl-m .dl-wxloc, .dl-m .dl-wxpend, .dl-m .dl-wxmsg, .dl-m .dl-wxsrc, .dl-m .dl-wxday { padding: 0; }
.dl-m .dl-wxhead { font-size: 16px; display: grid; gap: 0; justify-items: start; }
.dl-m .dl-wxhead .dl-link { min-height: 44px; padding: 0; }
.dl-m .dl-wx { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 0; }
.dl-m .dl-wx > div { padding: 10px; background: var(--gray-1); border: 0; border-radius: var(--radius-sm); }
.dl-m .dl-wx b { font-family: inherit; font-weight: 800; font-size: 22px; }
.dl-m .dl-wx span { font-size: 13px; }
.dl-m .dl-wxday { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.dl-m .dl-wxday .dl-seg { display: flex; }
.dl-m .dl-wxday .dl-seg .seg-btn { flex: 1; min-height: 48px; font-size: 16px; }
.dl-m .dl-wxsrc, .dl-m .dl-wxpend, .dl-m .dl-wxmsg, .dl-m .dl-wxask { font-size: 14px; line-height: 1.4; }
.dl-m .dl-wxsrc { display: grid; gap: 0; justify-items: start; }
.dl-m .dl-wxsrc .dl-link { padding: 0; min-height: 44px; }
.dl-m .dl-wxways { display: grid; gap: 8px; }
.dl-m .dl-wxways .btn { width: 100%; min-height: 52px; }
.dl-m .dl-wxll { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dl-m .dl-wxll .dl-in { width: 100%; }
.dl-m .dl-wxll .btn { grid-column: 1 / -1; width: 100%; min-height: 52px; }
.dl-m .dl-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; font-size: 16px; }
.dl-m .dl-panel .dl-in, .dl-m .dl-panel .dl-sel, .dl-m .dl-cfg-opts { min-height: 52px; font-size: 18px; padding: 12px; }
.dl-m .dl-cfg-row, .dl-m .dl-cfg-f, .dl-m .dl-cfg-o { gap: 10px; }
.dl-m .dl-cfg-b, .dl-m .dl-x { width: 48px; height: 48px; font-size: 18px; }
.dl-m .dl-tog { min-height: 48px; min-width: 64px; font-size: 16px; padding: 0 14px; }
.dl-m .dl-pill { font-size: 12px; }
.dl-m .dl-cfg .btn, .dl-m .dl-cfg-btns .btn, .dl-m .dl-cfg .dl-addbtn { min-height: 48px; font-size: 16px; padding: 0 16px; }
.dl-m .dl-cfg-btns { display: grid; grid-template-columns: 1fr 1fr; }
.dl-m .dl-cfg-btns .btn { width: 100%; }
.dl-m .dl-cfg input[type="checkbox"], .dl-m .dl-cfg-wide input { width: 24px; height: 24px; }
.dl-m .dl-cfg-name { font-size: 16px; }
.dl-m .dl-expmenu { display: grid; gap: 10px; }
.dl-m .dl-expmenu .btn { width: 100%; min-height: 52px; font-size: 17px; }
.dl-m .dl-exprange { display: grid; gap: 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dl-m .dl-exprange label { display: grid; gap: 5px; }
.dl-m .dl-exprange .btn { width: 100%; min-height: 52px; font-size: 17px; }
.dl-m .dl-expmsg { font-size: 14px; text-transform: none; letter-spacing: 0; }
.dl-m .dl-kv { display: grid; grid-template-columns: 1fr; background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius); box-shadow: var(--shadow); }
.dl-m .dl-kv > div { padding: 12px 14px; }
.dl-m .dl-kv span { font-size: 13px; }
.dl-m .dl-kv b { font-size: 16px; }
body.dl-sheeted .toast { z-index: 1200; }
@media (prefers-reduced-motion: reduce) { .dl-car { transition: none; } }

/* ---- Specs: Verify the split (specs-verify.js) ----------------------------
   Desktop first (office work): the table of contents, the sections and the
   pages side by side. Under 900px the three panes stack, each collapsible. */
.screen.specs-v-screen { max-width: none; width: 100%; box-sizing: border-box; padding-bottom: var(--s4); }
.specs-v-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s2); }
.specs-v-top .specs-back { margin-bottom: 0; }
.specs-v-title { flex: 1 1 200px; min-width: 0; margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.specs-v-cov { display: flex; align-items: center; gap: var(--s2); flex: 0 1 280px; min-width: 200px; }
.specs-v-cov .specs-coverage { margin: 0; font-size: 13px; white-space: nowrap; }
.specs-v-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--gray-2); overflow: hidden; }
.specs-v-barfill { height: 100%; width: 0; background: var(--green); transition: width 0.2s; }
.specs-v-save { font-size: 13px; color: var(--muted); min-width: 120px; }
.specs-v-save.bad { color: var(--red); font-weight: 700; }
.specs-v-more { position: relative; }
.specs-v-more summary { list-style: none; cursor: pointer; padding: 4px 12px; border-radius: var(--radius-sm); border: 1px solid var(--gray-3); background: var(--gray-1); font-weight: 700; min-height: 40px; box-sizing: border-box; display: flex; align-items: center; }
.specs-v-more summary::-webkit-details-marker { display: none; }
.specs-v-menu { position: absolute; right: 0; top: 100%; z-index: 30; margin-top: 4px; padding: var(--s2); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); white-space: nowrap; }
.specs-v-block { margin: 0 0 var(--s3); font-weight: 700; color: var(--red); min-height: 1.4em; }
.specs-v-block.ok { color: var(--green-dark); font-weight: 600; }
.specs-v-placing { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); background: var(--gold-tint); color: var(--gold-ink); border-radius: var(--radius-sm); font-weight: 600; }
.specs-v-placing[hidden] { display: none; }

.specs-v-panes { display: grid; grid-template-columns: minmax(240px, 300px) minmax(320px, 1fr) minmax(300px, 1fr); gap: var(--s3); align-items: start; }
.specs-v-pane { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); min-width: 0; display: flex; flex-direction: column; }
.specs-v-h { display: flex; align-items: baseline; gap: var(--s2); width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line-soft); padding: 10px 14px; font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--ink); cursor: default; }
.specs-v-hsub { font-size: 12.5px; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.specs-v-body { padding: var(--s2) 14px var(--s3); overflow: auto; max-height: calc(100vh - 230px); min-height: 200px; }
.specs-v-note { margin: 0; font-size: 13px; color: var(--red); }
.specs-v-note:empty { display: none; }

.specs-v-toc-item { display: grid; grid-template-columns: auto 1fr auto; gap: 2px var(--s2); align-items: baseline; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-soft); padding: 8px 0; font-family: var(--font); font-size: 13.5px; color: var(--ink); }
.specs-v-toc-item:first-child { border-top: 0; }
button.specs-v-toc-item { cursor: pointer; }
button.specs-v-toc-item:hover { background: var(--gray-1); }
.specs-v-toc-num { font-weight: 700; white-space: nowrap; }
.specs-v-toc-title { color: var(--gray-7); overflow-wrap: anywhere; }
.specs-v-toc-pg { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.specs-v-toc-item .specs-chip { grid-column: 1 / -1; justify-self: start; font-size: 11.5px; padding: 1px 8px; }
.specs-v-toc-item .btn { grid-column: 1 / -1; justify-self: start; min-height: 34px; padding: 4px 12px; }
.specs-v-warns { margin: var(--s3) 0 0; padding-left: 18px; font-size: 13px; color: var(--gold-ink); }

.specs-v-item { border-top: 1px solid var(--line-soft); }
.specs-v-item:first-child { border-top: 0; }
.specs-v-item.sel { background: var(--blue-tint); border-radius: var(--radius-sm); }
.specs-v-rowhead { display: flex; align-items: flex-start; gap: var(--s3); width: 100%; text-align: left; background: none; border: 0; padding: 10px 6px; font-family: var(--font); cursor: pointer; color: inherit; }
.specs-v-main { flex: 1; min-width: 0; display: block; }
.specs-v-main .specs-flags { display: flex; }
.specs-v-pseudo .specs-sec-title { font-weight: 600; color: var(--muted); }
.specs-v-pseudo.bad .specs-sec-title { color: var(--red); font-weight: 700; }
.specs-v-item.bad { background: var(--red-tint); border-radius: var(--radius-sm); }
.specs-v-editor { padding: var(--s2) 10px var(--s3) 10px; }
.specs-v-fields { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr; gap: var(--s3); }
.specs-v-titles { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s3); }
.specs-v-quote { display: block; margin: 2px 0 0 2px; font-size: 13px; color: var(--gray-7); overflow-wrap: anywhere; }
.specs-v-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.specs-v-start .btn-sm { min-width: 40px; padding: var(--s1) var(--s3); }
.specs-v-check { display: flex; align-items: center; gap: var(--s2); font-size: 14px; }
.specs-v-evidence { margin-top: var(--s3); font-size: 12.5px; color: var(--muted); }
.specs-v-evidence ul { margin: 4px 0 0; padding-left: 18px; }
.specs-v-form { margin-top: var(--s3); padding: var(--s3); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }

.specs-v-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s3); }
.specs-v-thumb { cursor: pointer; border-radius: var(--radius-sm); outline-offset: 2px; }
.specs-v-thumb:focus-visible { outline: 2px solid var(--blue); }
.specs-v-thumbimg { position: relative; aspect-ratio: 8.5 / 11; background: var(--gray-1); border: 1px solid var(--gray-3); border-radius: 4px; overflow: hidden; }
.specs-v-thumb.bad .specs-v-thumbimg { border-color: var(--red); }
.specs-v-thumbimg img { display: block; width: 100%; height: 100%; object-fit: contain; }
.specs-v-thumbimg img:not([src]) { visibility: hidden; }
.specs-v-cut { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--red); pointer-events: none; }
.specs-v-cap { margin-top: 2px; font-size: 12px; color: var(--muted); text-align: center; }
.specs-v-kind { display: block; font-size: 11px; color: var(--faint); }

.specs-v-bigback { position: fixed; inset: 0; z-index: 200; background: rgba(21, 27, 35, 0.55); display: flex; align-items: stretch; justify-content: center; padding: var(--s3); }
.specs-v-bigback[hidden] { display: none; }
.specs-v-big { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 1200px; display: flex; flex-direction: column; min-height: 0; }
.specs-v-bigbar { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-soft); }
.specs-v-grow { flex: 1; }
.specs-v-bigbody { display: flex; gap: var(--s3); padding: var(--s3); min-height: 0; flex: 1; }
.specs-v-bigscroll { flex: 1 1 auto; min-width: 0; overflow: auto; text-align: center; }
.specs-v-bigwrap { position: relative; display: inline-block; max-width: 100%; vertical-align: top; box-shadow: var(--shadow-card); }
.specs-v-bigimg { display: block; max-width: 100%; max-height: calc(100vh - 150px); height: auto; width: auto; }
.specs-v-biglines, .specs-v-rules { position: absolute; inset: 0; pointer-events: none; }
.specs-v-line { position: absolute; left: 0; right: 0; pointer-events: auto; cursor: pointer; }
.specs-v-line:hover { background: rgba(0, 87, 184, 0.12); }
.specs-v-line.on { background: rgba(255, 192, 0, 0.35); }
.specs-v-biglines.placing .specs-v-line { cursor: crosshair; }
.specs-v-rule { position: absolute; left: 0; right: 0; height: 14px; margin-top: -7px; pointer-events: auto; cursor: ns-resize; touch-action: none; }
.specs-v-rule::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; border-top: 2px dashed var(--red); }
.specs-v-rule:focus-visible { outline: 2px solid var(--blue); }
.specs-v-rule-tag { position: absolute; right: 4px; top: -6px; max-width: 70%; padding: 0 6px; background: var(--red); color: var(--white); font-size: 11px; font-weight: 700; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.specs-v-bigpanel { flex: 0 0 300px; overflow: auto; }
.specs-v-rulerow { margin-bottom: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-soft); }
.specs-v-rulebtns { display: flex; gap: var(--s2); margin: var(--s2) 0; }
.specs-v-sline { margin-bottom: var(--s3); font-size: 13px; }
.specs-v-bigbtns { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s3); }
.specs-v-bigbtns .btn { width: 100%; text-align: left; }

.specs-v-busy { position: fixed; inset: 0; z-index: 300; background: rgba(21, 27, 35, 0.55); display: flex; align-items: center; justify-content: center; }
.specs-v-busy[hidden] { display: none; }
.specs-v-busybox { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--s6) var(--s8); font-weight: 700; color: var(--ink); }
.specs-v-busybox p { margin: 0; }
.specs-pdf-link { flex: none; font-size: 13px; font-weight: 700; color: var(--blue); text-decoration: underline; white-space: nowrap; }

@media (max-width: 899px) {
  .specs-v-panes { grid-template-columns: 1fr; }
  .specs-v-h { cursor: pointer; }
  .specs-v-h::after { content: "\25BE"; margin-left: auto; color: var(--muted); }
  .specs-v-pane.collapsed .specs-v-h::after { content: "\25B8"; }
  .specs-v-pane.collapsed .specs-v-body { display: none; }
  .specs-v-body { max-height: 60vh; }
  .specs-v-fields { grid-template-columns: 1fr; }
  .specs-v-bigback { padding: 0; }
  .specs-v-big { border-radius: 0; }
  .specs-v-bigbody { flex-direction: column; overflow: auto; }
  .specs-v-bigpanel { flex: 0 0 auto; overflow: visible; }
  .specs-v-bigimg { max-height: 70vh; }
}

/* Specs — the AI read card (build step 5): estimate, the three passes, totals and the proposed items. */
.specs-x-card { margin: 0 0 var(--s4); }
.specs-x-h { margin: 0 0 var(--s2); font-size: 18px; }
.specs-x-line { margin: 0 0 var(--s1); font-weight: 700; color: var(--ink); }
.specs-x-note { margin: var(--s2) 0 0; }
.specs-x-pass { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); padding: 10px 0; border-top: 1px solid var(--line-soft); }
.specs-x-pass:first-of-type { border-top: 0; }
.specs-x-pname { flex: 0 0 120px; font-weight: 700; color: var(--ink); }
.specs-x-pn { flex: 1 1 160px; font-size: 14px; color: var(--gray-7); }
.specs-x-pcost { flex: 0 0 auto; min-width: 56px; text-align: right; font-size: 14px; color: var(--muted); }
.specs-x-fail { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-soft); }
.specs-x-list { margin: 0 0 var(--s3); padding-left: 20px; font-size: 14px; overflow-wrap: anywhere; }
.specs-x-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s2); margin-bottom: var(--s2); }
.specs-x-stat { display: flex; flex-direction: column; padding: var(--s2) var(--s3); background: var(--gray-1); border-radius: var(--radius-sm); }
.specs-x-stat b { font-size: 20px; color: var(--ink); }
.specs-x-stat span { font-size: 12.5px; color: var(--muted); }
.specs-x-group { border-top: 1px solid var(--line-soft); padding: 6px 0; }
.specs-x-group > summary { cursor: pointer; padding: 6px 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.specs-x-num { margin-right: var(--s1); }
.specs-x-count { margin-left: var(--s2); font-size: 12.5px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.specs-x-item { padding: var(--s2) 0 var(--s2) var(--s3); border-top: 1px dashed var(--line-soft); }
.specs-x-ihead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); }
.specs-x-type { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--blue-tint); color: var(--blue-dark); }
.specs-x-title { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.specs-x-quote { margin: var(--s1) 0 0; font-size: 14px; font-style: italic; color: var(--gray-7); overflow-wrap: anywhere; }
.specs-x-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.specs-x-flag-quote_unverified, .specs-x-flag-disputed_by_audit { background: var(--gold-tint); color: var(--gold-ink); border-color: transparent; }
.specs-x-flag-general { background: var(--blue-tint); color: var(--blue-dark); border-color: transparent; }
@media (max-width: 480px) {
  .specs-x-pname { flex-basis: 100%; }
  .specs-x-pcost { margin-left: auto; }
}
.specs-r-barbtns { display: inline-flex; flex-wrap: wrap; gap: var(--s2); }
.specs-r-pop textarea { width: 100%; box-sizing: border-box; font-family: var(--font); font-size: 14px; padding: 6px 8px; border: 1px solid var(--gray-3); border-radius: var(--radius-sm); }
.specs-r-pagein { display: flex; align-items: center; gap: var(--s1); font-size: 13px; }
.specs-r-pagein input { width: 80px; font-family: var(--font); font-size: 14px; padding: 6px 8px; border: 1px solid var(--gray-3); border-radius: var(--radius-sm); }

/* ---- Specs & Submittals: Review submittals (specs-review.js, step 6a) ---- */
.specs-r-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s2); }
.specs-r-top .specs-back { margin-bottom: 0; }
.specs-r-title { flex: 1 1 220px; min-width: 0; margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.specs-r-sub { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.specs-r-progress { font-size: 14px; font-weight: 600; color: var(--ink); }
.specs-r-filter { display: inline-flex; gap: var(--s1); }
.specs-r-filter .btn { min-height: 36px; }
.specs-r-why { margin: 0 0 var(--s3); min-height: 1.4em; font-size: 14px; font-weight: 600; color: var(--gold-ink); }
.specs-r-why:empty { display: none; }
.specs-r-panes { display: grid; grid-template-columns: minmax(220px, 280px) minmax(360px, 1.3fr) minmax(300px, 1fr); gap: var(--s3); align-items: start; }
.specs-r-pane { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); min-width: 0; display: flex; flex-direction: column; }
.specs-r-h { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); font-size: 15px; font-weight: 700; }
.specs-r-body { padding: var(--s2) 14px var(--s3); overflow: auto; max-height: calc(100vh - 230px); min-height: 200px; }
.specs-r-sec { display: flex; align-items: flex-start; gap: var(--s2); width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-soft); padding: 9px 4px; font-family: var(--font); color: var(--ink); cursor: pointer; }
.specs-r-sec:first-child { border-top: 0; }
.specs-r-sec:hover { background: var(--gray-1); }
.specs-r-sec.sel { background: var(--blue-tint); border-radius: var(--radius-sm); }
.specs-r-sec.muted .specs-r-secname { color: var(--muted); }
.specs-r-tick { flex: 0 0 18px; color: var(--green-dark); font-weight: 700; }
.specs-r-secmain { flex: 1; min-width: 0; }
.specs-r-secname { display: block; font-size: 14px; overflow-wrap: anywhere; }
.specs-r-counts { display: flex; flex-wrap: wrap; gap: 2px var(--s1); margin-top: 3px; }
.specs-r-count { padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--gray-1); color: var(--gray-7); }
.specs-r-count.todo { background: var(--gold-tint); color: var(--gold-ink); }
.specs-r-count.acc { background: var(--green-tint); color: var(--green-dark); }
.specs-r-count.rej { background: var(--red-tint); color: var(--red); }
.specs-r-count.hit { background: var(--blue-tint); color: var(--blue-dark); }
.specs-r-count.nothing { background: none; font-weight: 400; color: var(--muted); }
.specs-r-head { padding-bottom: var(--s3); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s3); }
.specs-r-sech { margin: 0 0 var(--s1); font-size: 17px; overflow-wrap: anywhere; }
.specs-r-summary { margin: 0 0 var(--s2); color: var(--gray-7); }
.specs-r-meta { margin: 0 0 var(--s2); font-size: 13.5px; }
.specs-r-secnone { margin: 0 0 var(--s2); }
.specs-r-audit summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.specs-r-audit ul { margin: var(--s2) 0 0; padding: 0; list-style: none; }
.specs-r-audit li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.specs-r-auditlabel { font-weight: 600; flex: 1 1 220px; }
.specs-r-auditnote { flex: 1 1 100%; color: var(--gray-7); font-size: 13px; }
.specs-r-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin: var(--s2) 0; }
.specs-r-h3 { margin: 0; font-size: 15px; }
.specs-r-n { margin-left: var(--s1); padding: 0 8px; border-radius: 999px; background: var(--gray-1); font-size: 12.5px; font-weight: 700; color: var(--gray-7); }
.specs-r-empty { margin: var(--s2) 0; }
.specs-r-card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); margin-bottom: var(--s3); background: var(--white); }
.specs-r-card.proposed:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.specs-r-card.flagged { border-left: 4px solid var(--gold); }
.specs-r-card.decided { background: var(--gray-1); }
.specs-r-card.decided.accepted { border-left: 4px solid var(--green); }
.specs-r-card.decided.rejected { border-left: 4px solid var(--red); }
.specs-r-row1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.specs-r-card select, .specs-r-card input[type="text"], .specs-r-pop select, .specs-r-pop input[type="text"] { font-family: var(--font); font-size: 14px; padding: 6px 8px; border: 1px solid var(--gray-3); border-radius: var(--radius-sm); background: var(--white); min-width: 0; }
.specs-r-titlein { width: 100%; box-sizing: border-box; font-weight: 700; }
.specs-r-typetag { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--blue-tint); color: var(--blue-dark); }
.specs-r-dtitle { overflow-wrap: anywhere; }
.specs-r-confwrap { display: inline-flex; align-items: center; gap: var(--s1); margin-left: auto; }
.specs-r-conf { display: inline-block; width: 64px; height: 8px; border-radius: 999px; background: var(--gray-2); overflow: hidden; }
.specs-r-conf i { display: block; height: 100%; background: var(--green); }
.specs-r-confn { font-size: 12.5px; color: var(--muted); }
.specs-r-quote { margin: var(--s2) 0; padding: var(--s2) var(--s3); border-left: 3px solid var(--gray-3); background: var(--gray-1); font-size: 14px; font-style: italic; color: var(--gray-7); overflow-wrap: anywhere; }
.specs-r-whereline { margin-bottom: var(--s2); font-size: 13px; color: var(--muted); }
.specs-r-pg { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: underline; cursor: pointer; }
.specs-r-fields { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-bottom: var(--s2); font-size: 13px; }
.specs-r-fields label { display: flex; align-items: center; gap: var(--s1); }
.specs-r-fields input[type="text"] { width: 150px; }
.specs-r-auditnote-box { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); background: var(--gold-tint); color: var(--gold-ink); border-radius: var(--radius-sm); font-size: 13px; }
.specs-r-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.specs-r-pop { margin-top: var(--s2); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.specs-r-pop select { max-width: 100%; }
.specs-r-popq { margin: 0 0 var(--s2); font-weight: 600; }
.specs-r-reasons { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); }
.specs-r-typed { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.specs-r-typed input { flex: 1 1 180px; }
.specs-r-decision { margin: var(--s1) 0 0; font-size: 13.5px; }
.specs-r-decided > summary, .specs-r-handled > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.specs-r-hit { display: flex; gap: var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--line-soft); }
.specs-r-hitcheck { flex: 0 0 auto; padding-top: 2px; }
.specs-r-hitmain { flex: 1; min-width: 0; }
.specs-r-sentence { margin: 0 0 var(--s1); font-size: 14px; overflow-wrap: anywhere; }
.specs-r-hitmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.specs-r-handledas { font-size: 13px; color: var(--gray-7); }
.specs-r-pnav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.specs-r-pdf { margin-left: auto; font-size: 13.5px; font-weight: 600; }
.specs-r-pagewrap { position: relative; display: inline-block; max-width: 100%; box-shadow: var(--shadow-card); }
.specs-r-img { display: block; max-width: 100%; height: auto; }
.specs-r-bands { position: absolute; inset: 0; pointer-events: none; }
.specs-r-band { position: absolute; background: rgba(255, 192, 0, 0.38); border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 160, 0, 0.55); }
.specs-r-nofind { margin: var(--s2) 0 0; font-size: 13px; color: var(--muted); }
.specs-r-hint { margin: 0 0 var(--s2); }
@media (max-width: 900px) {
  .specs-r-panes { grid-template-columns: 1fr; }
  .specs-r-body { max-height: none; }
  .specs-r-confwrap { margin-left: 0; }
}

/* ---- Specs: Submittal register (specs-register.js) -------------------------
   The job's submittals as a sortable table, with the whole record in a side
   panel on a laptop and as a full screen under 900px. */
.screen.specs-g-screen { max-width: none; width: 100%; box-sizing: border-box; padding-bottom: var(--s4); }
.specs-g-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.specs-g-top .specs-back { margin-bottom: 0; }
.specs-g-title { margin: 0; font-size: 20px; }
.specs-g-job { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.specs-g-grow { flex: 1 1 auto; }
.specs-g-save { font-size: 13px; color: var(--muted); }
.specs-g-save.bad { color: var(--red); font-weight: 700; }

.specs-g-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-items: start; }
.specs-g-wrap.has-detail { grid-template-columns: minmax(0, 1fr) minmax(420px, 520px); }
.specs-g-listpane { min-width: 0; }
.specs-g-panel { display: none; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--s3) var(--s4) var(--s4); }
.specs-g-wrap.has-detail .specs-g-panel { display: block; position: sticky; top: var(--s2); max-height: calc(100vh - 96px); overflow-y: auto; }

.specs-g-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.specs-g-q { flex: 1 1 220px; min-width: 0; box-sizing: border-box; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font); font-size: 15px; }
.specs-g-sel { display: flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--muted); }
.specs-g-sel select { min-height: 40px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font); font-size: 15px; background: var(--white); }
.specs-g-chk { display: flex; align-items: center; gap: var(--s2); font-size: 14px; color: var(--gray-7); }
.specs-g-count { margin-left: auto; font-size: 13px; color: var(--muted); }
.specs-g-empty { margin: var(--s4) 0; color: var(--gray-7); }

.specs-g-tablewrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.specs-g-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.specs-g-table th, .specs-g-table td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.specs-g-table thead th { border-top: 0; background: var(--gray-1); padding: 0; white-space: nowrap; }
.specs-g-sort { display: flex; align-items: center; gap: var(--s1); width: 100%; min-height: 40px; padding: 6px 10px; background: none; border: 0; font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--gray-7); text-align: left; cursor: pointer; }
.specs-g-sort.on { color: var(--blue-dark); }
.specs-g-arrow { font-size: 10px; }
.specs-g-table tbody tr { cursor: pointer; }
.specs-g-table tbody tr:hover { background: var(--gray-1); }
.specs-g-table tbody tr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.specs-g-table tbody tr.sel { background: var(--blue-tint); }
.specs-g-num { font-weight: 700; white-space: nowrap; }
.specs-g-ttl { min-width: 160px; overflow-wrap: anywhere; }
.specs-g-date { white-space: nowrap; }

.specs-g-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.specs-g-chip-draft { background: var(--gray-1); color: var(--gray-7); border: 1px solid var(--gray-2); }
.specs-g-chip-open { background: var(--blue-tint); color: var(--blue-dark); }
.specs-g-chip-closed { background: var(--green-tint); color: var(--green-dark); }
.specs-g-chip-late { background: var(--red-tint); color: var(--red); }

.specs-g-dhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.specs-g-dtitle { flex: 1 1 auto; margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.specs-g-rev { font-size: 13px; font-weight: 600; color: var(--muted); }
.specs-g-h { margin: var(--s4) 0 var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line-soft); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.specs-g-note { margin: 0 0 var(--s3); font-size: 13px; color: var(--gold-ink); }
.specs-g-none { margin: 0 0 var(--s2); font-size: 14px; }
.specs-g-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 var(--s3); }

.specs-g-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s2) var(--s3); margin: var(--s3) 0 0; }
.specs-g-facts-wide { grid-template-columns: 1fr; margin-top: 0; }
.specs-g-facts dt { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.specs-g-facts dd { margin: 2px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.specs-g-quote { margin: var(--s3) 0 0; padding: var(--s2) var(--s3); border-left: 3px solid var(--gray-3); background: var(--gray-1); color: var(--gray-7); font-size: 14px; overflow-wrap: anywhere; }

.specs-g-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.specs-g-pick-name { flex: 1 1 140px; min-width: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.specs-g-pick-name.none { font-weight: 400; color: var(--muted); }
.specs-g-pickbox { flex-basis: 100%; padding: var(--s2); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.specs-g-pick-search { width: 100%; box-sizing: border-box; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font); font-size: 15px; }
.specs-g-pick-list { max-height: 240px; overflow-y: auto; margin-top: var(--s2); }
.specs-g-pick-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s3); width: 100%; min-height: 44px; padding: 8px 10px; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-soft); font-family: var(--font); color: var(--ink); cursor: pointer; }
.specs-g-pick-row:first-child { border-top: 0; }
.specs-g-pick-row:hover, .specs-g-pick-row:focus-visible { background: var(--blue-tint); }
.specs-g-pick-main { font-weight: 600; }
.specs-g-pick-sub { font-size: 12.5px; color: var(--muted); }
.specs-g-pick-empty, .specs-g-pick-help, .specs-g-pick-more { margin: var(--s2) 0 0; font-size: 13px; color: var(--muted); }
.specs-g-pick-err { margin: var(--s2) 0 0; font-size: 13px; color: var(--red); }

.specs-g-ap { margin-bottom: var(--s3); padding: var(--s3); background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: var(--radius-sm); }
.specs-g-ap-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.specs-g-ap-step { display: flex; align-items: center; gap: var(--s2); font-size: 14px; font-weight: 700; color: var(--ink); }
.specs-g-ap-step input { width: 64px; min-height: 40px; box-sizing: border-box; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font); font-size: 15px; }
.specs-g-ap .field { margin-bottom: var(--s2); }

.specs-g-revs { display: flex; flex-direction: column; gap: var(--s1); }
.specs-g-rev-row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 44px; padding: 6px 10px; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font); font-weight: 600; color: var(--ink); cursor: pointer; }
.specs-g-rev-row.on { background: var(--blue-tint); border-color: var(--blue); }
.specs-g-rev-d { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--muted); }

@media (max-width: 899px) {
  .specs-g-wrap.has-detail { grid-template-columns: minmax(0, 1fr); }
  .specs-g-wrap.has-detail .specs-g-listpane { display: none; }
  .specs-g-wrap.has-detail .specs-g-panel { position: static; max-height: none; overflow: visible; }
}

/* ---- Delivery Log (deliverylog.js; .screen.dv-m on a phone, .screen.dv-wide on a laptop; its sheet is on the body) ----
   The app's own pieces (.btn, .seg-btn, .field, .chip, .banner) and the Pour Log's look: one column, 52 px fields, 48 px or more to tap,
   a card per ticket with a coloured left edge, a slide-up sheet. Above 820 px it is the computer log (the block after the phone rules). */
.screen.dv-wide { max-width: 1680px; padding-left: 24px; padding-right: 24px; }
.dv-headrow { margin-bottom: 6px; }
.dv-headrow .btn { width: auto; min-height: 48px; }
#dvAdd .btn { margin-bottom: 12px; }
#dvAdd .dv-goes { margin: -2px 2px 16px; }
.dv-seg { margin-bottom: 12px; }
.dv-seg .seg-btn.on { background: var(--blue); border-color: var(--blue); color: var(--white); }
.dv-seg .seg-btn:disabled { opacity: .45; }
.dv-search { margin-bottom: 12px; }
.dv-chips { margin: 0 0 12px; }
.chip.dv-flag { min-height: 48px; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.dv-flag .dv-n { display: inline-block; min-width: 24px; padding: 1px 7px; border-radius: 12px; background: var(--white); color: var(--blue); font-size: 13px; font-weight: 700; text-align: center; }
.dv-sum { margin: 4px 2px 12px; font-weight: 600; color: var(--gray-7); }
.dv-card { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 64px; padding: 15px 14px; text-align: left; font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: 11px; cursor: pointer; }
.dv-card.bad { border-left-color: var(--red); }
.dv-card:active { background: var(--gray-1); }
.dv-ct { flex: 1; min-width: 0; display: block; }
.dv-ct b { display: block; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.dv-cs { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.dv-chev { flex: none; color: var(--faint); font-size: 24px; line-height: 1; }
.dv-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.dv-pill { display: inline-block; flex: none; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--gray-2); background: var(--gray-1); color: var(--gray-7); white-space: nowrap; }
.dv-pill.ok { background: var(--green-tint); border-color: #B7D9A5; color: var(--green-dark); }
.dv-pill.warn { background: var(--orange-tint); border-color: #F3C3A6; color: #B5551F; }
.dv-pill.gold { background: var(--gold-tint); border-color: #E8C55A; color: #8A6500; }
.dv-pill.bad { background: var(--red-tint); border-color: #E5B5B7; color: var(--red); }
.dv-red { color: var(--red); font-weight: 700; }
/* the computer log: title row, summary cards that are the flag filters, a toolbar, the scan queue, the table */
.dv-wide .dv-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 14px; }
.dv-wide .dv-titlerow { display: flex; align-items: center; gap: 14px; }
.dv-wide .dv-titlerow h1 { margin: 0; }
.dv-wide .dv-titlerow .btn { width: auto; min-height: 36px; font-size: 14px; padding: 0 12px; }
.dv-wide .dv-lede { margin: 4px 0 0; font-size: 14px; }
.dv-wide .dv-tr2 { margin-left: auto; text-align: right; }
.dv-wide .dv-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.dv-wide #dvAdd .btn.dv-act { width: auto; min-width: 0; min-height: 40px; margin: 0; padding: 0 18px; font-size: 15px; }
.dv-wide #dvAdd .dv-goes { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.dv-cards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.dv-stat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 11px 16px 12px; font: inherit; color: var(--ink); text-align: left; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.dv-stat .dv-n { font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dv-stat > span { font-size: 13px; font-weight: 600; color: var(--muted); }
button.dv-fc { cursor: pointer; transition: background .1s; }
button.dv-fc:hover { background: var(--gray-1); }
.dv-fc.k-over, .dv-fc.k-vendor { border-left-color: var(--red); }
.dv-fc.k-not_on_po { border-left-color: var(--orange); }
.dv-fc.k-no_po { border-left-color: var(--gold); }
.dv-fc.zero { border-left-color: var(--gray-3); }
.dv-fc.zero .dv-n, .dv-fc.zero > span { color: var(--faint); }
.dv-fc.on { border-width: 1px 1px 1px 4px; }
.dv-fc.on::after { content: "✓"; position: absolute; top: 8px; right: 12px; font-size: 15px; font-weight: 800; color: inherit; }
.dv-fc.on.k-over, .dv-fc.on.k-vendor { background: var(--red-tint); border-color: var(--red); color: var(--red); }
.dv-fc.on.k-not_on_po { background: var(--orange-tint); border-color: var(--orange); color: #B5551F; }
.dv-fc.on.k-no_po { background: var(--gold-tint); border-color: var(--gold); color: #8A6500; }
.dv-fc.k-wrong { border-left-color: var(--purple); }
.dv-fc.on.k-wrong { background: #EFEAFA; border-color: var(--purple); color: var(--purple); }
.dv-fc.on > span { color: inherit; }
.dv-fc:focus-visible, .dv-vbtn:focus-visible, .dv-qbtn:focus-visible, .dv-sel:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.dv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.dv-views, .dv-quick { display: inline-flex; flex: none; overflow: hidden; background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); }
.dv-vbtn, .dv-qbtn { height: 34px; padding: 0 14px; font-size: 14px; font-weight: 700; color: var(--gray-5); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.dv-qbtn { padding: 0 10px; font-size: 13px; }
.dv-vbtn + .dv-vbtn, .dv-qbtn + .dv-qbtn { border-left: 1px solid var(--gray-3); }
.dv-vbtn:hover, .dv-qbtn:hover { background: var(--gray-1); }
.dv-vbtn.on, .dv-qbtn.on { background: var(--blue-tint); color: var(--blue); }
.dv-exp { display: inline-flex; flex: none; gap: 2px; }
.dv-lnk { height: 34px; padding: 0 8px; font-size: 14px; font-weight: 600; color: var(--blue); background: none; border: 0; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.dv-lnk:hover { background: var(--blue-tint); }
.dv-job { position: relative; flex: none; }
.dv-sel { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; height: 36px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); cursor: pointer; }
.dv-sel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-sel i { flex: none; font-size: 11px; font-style: normal; color: var(--muted); }
.dv-sel.on { color: var(--blue); background: var(--blue-tint); border-color: var(--blue); }
.dv-jobpanel { position: absolute; z-index: 60; top: 40px; left: 0; min-width: 320px; max-height: 340px; overflow-y: auto; padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.dv-jobpanel[hidden] { display: none; }
.dv-jopt { display: block; width: 100%; padding: 8px 10px; font-size: 14px; font-weight: 600; color: var(--blue); text-align: left; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.dv-jopt:hover { background: var(--blue-tint); }
.dv-jsep { height: 1px; margin: 4px 0; background: var(--line); }
.dv-jchk { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 14px; border-radius: 6px; cursor: pointer; }
.dv-jchk:hover { background: var(--gray-1); }
.dv-jchk input { flex: none; width: 16px; height: 16px; margin: 0; }
.dv-jchk span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-jchk i { flex: none; font-size: 12px; font-style: normal; color: var(--muted); }
.dv-dates { display: inline-flex; flex: none; align-items: center; gap: 6px; }
.dv-date { width: 120px; height: 36px; box-sizing: border-box; padding: 0 8px; font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); }
.dv-dash { color: var(--faint); }
.dv-dates .dv-quick { margin-left: 4px; }
.dv-wsearch { flex: 1 1 260px; min-width: 260px; max-width: 420px; height: 36px; box-sizing: border-box; padding: 0 12px; font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); }
.dv-wsearch:focus, .dv-date:focus { outline: none; border-color: var(--blue); }
.dv-wide .btn.dv-clear { width: auto; min-height: 36px; height: 36px; padding: 0 12px; font-size: 14px; }
.dv-clear[hidden] { display: none; }
.dv-queue { margin: 0 0 10px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.dv-qhead { display: flex; align-items: center; gap: 14px; padding: 6px 8px 6px 14px; background: var(--gray-1); border-bottom: 1px solid var(--line); }
.dv-qhead b { font-size: 14px; }
.dv-qprog { flex: 1; max-width: 320px; height: 6px; overflow: hidden; background: var(--gray-2); border-radius: 3px; }
.dv-qprog i { display: block; height: 100%; background: var(--blue); transition: width .2s; }
.dv-queue:not(.run) .dv-qprog i { background: var(--green); }
.dv-qx { width: 28px; height: 28px; margin-left: auto; font-size: 20px; line-height: 1; color: var(--muted); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.dv-qx:hover { background: var(--gray-2); }
.dv-qlist { position: relative; max-height: 190px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.dv-q { display: flex; align-items: baseline; gap: 16px; padding: 5px 14px; font-size: 13px; border-bottom: 1px solid var(--line-soft); }
.dv-q:last-child { border-bottom: 0; }
.dv-qn { flex: none; width: 240px; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dv-qs { flex: 1; min-width: 0; color: var(--muted); }
.dv-q.read .dv-qs { color: var(--blue); font-weight: 600; }
.dv-q.ok .dv-qs { color: var(--green-dark); }
.dv-q.gold .dv-qs { color: #8A6500; }
.dv-q.fail .dv-qs { color: var(--red); }
.dv-q .dv-lnk { height: 22px; padding: 0 6px; font-size: 13px; }
.dv-hint { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.dv-loading { opacity: .55; pointer-events: none; transition: opacity .15s; }
.dv-empty { display: grid; justify-items: center; gap: 8px; padding: 64px 24px; text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.dv-empty b { font-size: 19px; }
.dv-empty p { margin: 0; font-size: 15px; color: var(--muted); }
/* the table: the page scrolls and the two header rows stay under the app's header (--dv-top, set by the screen) */
.dv-tablewrap { overflow: clip; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
@media (max-width: 1180px) { .dv-tablewrap { overflow-x: auto; } }
.dv-table { width: 100%; min-width: 1040px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.dv-table th { box-sizing: border-box; position: sticky; z-index: 3; padding: 0 10px; text-align: left; background: #FAFBFC; border-bottom: 1px solid var(--line); }
.dv-hrow th { top: var(--dv-top, 0px); height: 36px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.dv-frow th { top: calc(var(--dv-top, 0px) + 36px); height: 36px; padding-top: 5px; padding-bottom: 5px; font-weight: 400; }
.dv-sortable { cursor: pointer; user-select: none; }
.dv-sortable:hover, .dv-sortable.on { color: var(--ink); }
.dv-arrow { display: inline-block; width: 12px; margin-left: 4px; font-size: 9px; color: var(--blue); }
.dv-arrow:empty { display: none; }
.dv-cfi { display: block; width: 100%; min-width: 0; height: 26px; box-sizing: border-box; padding: 0 8px; font-family: var(--font); font-size: 13px; color: var(--ink); background: #F1F3F6; border: 1px solid transparent; border-radius: 5px; }
.dv-cfi:focus { background: var(--white); border-color: var(--blue); outline: none; }
select.dv-cfi { padding: 0 2px; }
.dv-table td { height: 36px; padding: 3px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; border-bottom: 1px solid var(--line-soft); }
.dv-table th.n, .dv-table td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-nw { white-space: nowrap; }
.dv-table td.dv-cx { padding-left: 4px; padding-right: 0; }
.dv-table td.dv-cfl { white-space: normal; }
.dv-cj span { color: var(--muted); }
.dv-vc { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dv-vn { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.dv-vc .dv-pill { flex: none; }
.dv-vdot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dv-vdot.bad { background: var(--red); }
.dv-vdot.gold { background: var(--gold); }
.dv-pill.sm { padding: 0 7px; font-size: 11px; vertical-align: middle; }
.dv-table .dv-pills { margin: 0; gap: 4px; }
.dv-cpo { white-space: nowrap; }
.dv-nopo { font-weight: 700; color: #8A6500; }
.dv-ts { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.dv-tr { cursor: pointer; }
.dv-tr.ok td:first-child { box-shadow: inset 4px 0 var(--green); }
.dv-tr.bad td:first-child { box-shadow: inset 4px 0 var(--red); }
.dv-tr:hover td { background: #F1F5FB; }
.dv-tr.open td { background: #F7F9FC; border-bottom-color: transparent; }
.dv-tr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.dv-tog { width: 26px; height: 26px; padding: 0; font-size: 13px; color: var(--muted); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.dv-tog:hover { color: var(--ink); background: var(--gray-2); }
.dv-thumb { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; overflow: hidden; font-size: 11px; font-weight: 700; color: var(--blue); background: var(--gray-1); border: 1px solid var(--gray-3); border-radius: 6px; vertical-align: middle; }
.dv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dv-none { padding: 32px 10px !important; text-align: center; color: var(--muted); }
.dv-table td.dv-xrow-c, .dv-xrow > td { height: auto; padding: 4px 14px 12px 44px; overflow: visible; white-space: normal; background: #F7F9FC; }
.dv-itbl { width: auto; min-width: 720px; max-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dv-itbl th { padding: 5px 12px; text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); background: #FAFBFC; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dv-itbl td { padding: 5px 12px; vertical-align: middle; border-bottom: 1px solid var(--line-soft); }
.dv-itbl tr:last-child td { border-bottom: 0; }
.dv-itbl th.n, .dv-itbl td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-itbl tr.flag td:first-child { box-shadow: inset 3px 0 var(--red); }
.dv-itbl .dv-none { padding: 14px 12px !important; }
.dv-prog { display: inline-flex; width: 88px; height: 8px; overflow: hidden; vertical-align: middle; background: var(--gray-2); border-radius: 4px; }
.dv-prog i { display: block; height: 100%; }
.dv-prog .b { background: var(--blue); }
.dv-prog .r { background: var(--red); }
.dv-pct { display: inline-block; min-width: 44px; margin-left: 8px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: middle; }
.dv-foot { margin: 8px 2px 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.dv-drop { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 87, 184, .10); pointer-events: none; }
.dv-drop > div { position: absolute; inset: 14px; display: grid; place-items: center; border: 3px dashed var(--blue); border-radius: var(--radius-lg); }
.dv-drop b { padding: 14px 28px; font-size: 24px; color: var(--blue); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
/* the ticket sheet */
.dv-sheetwrap { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; background: rgba(26, 26, 26, .45); }
.dv-sheet { display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: 92vh; max-height: 92dvh; overflow: hidden; overflow: clip; background: var(--white); border-radius: 18px 18px 0 0; outline: none; }
.dv-shead { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--gray-2); }
.dv-rt { flex: 1; min-width: 0; display: block; text-align: left; }
.dv-rt b { display: block; font-size: 18px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-rt > span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-shx { flex: none; width: auto; min-height: 48px; padding: 0 22px; font-size: 16px; }
.dv-sb { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 14px 14px calc(26px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.dv-sb > * { flex: none; min-width: 0; }
.dv-sb .banner, .dv-sb .sub, .dv-sb .dv-pills { margin: 0; }
.dv-sb .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 4px 2px -6px; }
.dv-mrow { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.dv-mrow span { flex: none; font-size: 14px; color: var(--muted); }
.dv-mrow b { font-size: 16px; text-align: right; overflow-wrap: anywhere; }
.dv-photo { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; overflow: hidden; border: 1px solid var(--gray-3); border-radius: var(--radius-sm); background: var(--gray-1); color: var(--blue); font-weight: 700; text-decoration: none; }
.dv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-item { padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--radius); background: var(--white); }
.dv-item.flag { border-left-color: var(--red); }
.dv-ihead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dv-ihead b { font-size: 16px; overflow-wrap: anywhere; }
.dv-ihead span { flex: none; font-size: 16px; font-weight: 700; }
.dv-note { padding: 12px 14px; font-size: 15px; background: var(--gray-1); border-radius: var(--radius); overflow-wrap: anywhere; white-space: pre-wrap; }
/* the computer's drawer: from the right, ~540 px, the table stays visible behind a light scrim */
.dv-sheetwrap.dv-drawer { align-items: stretch; justify-content: flex-end; background: rgba(26, 26, 26, .18); }
.dv-drawer .dv-sheet { width: min(580px, 100vw); max-width: none; height: 100%; max-height: none; border-radius: 0; box-shadow: var(--shadow-lg); animation: dv-in .18s ease-out; }
@keyframes dv-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.dv-drawer .dv-shead { padding: 14px 20px; }
.dv-drawer .dv-shx { min-height: 36px; padding: 0 16px; font-size: 15px; }
.dv-drawer .dv-sb { gap: 16px; padding: 18px 20px 28px; }
.dv-big { display: flex; justify-content: center; overflow: hidden; background: var(--gray-1); border: 1px solid var(--line); border-radius: var(--radius); }
.dv-big img { display: block; max-width: 100%; max-height: 320px; object-fit: contain; }
.dv-pdf { display: flex; align-items: center; justify-content: center; height: 110px; font-size: 16px; font-weight: 700; color: var(--blue); text-decoration: none; background: var(--gray-1); border: 1px dashed var(--gray-3); border-radius: var(--radius); }
.dv-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.dv-fact { display: grid; gap: 1px; min-width: 0; }
.dv-fact.w { grid-column: 1 / -1; }
.dv-fact span { font-size: 12px; font-weight: 700; color: var(--muted); }
.dv-fact b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.dv-itbl-d { width: 100%; min-width: 0; table-layout: fixed; font-size: 13px; }
.dv-itbl-d th, .dv-itbl-d td { padding: 5px 6px; white-space: normal; overflow-wrap: break-word; }
.dv-itbl-d th.n, .dv-itbl-d td.n { white-space: normal; }
.dv-itbl-d.p7 th:nth-child(1) { width: 30%; } .dv-itbl-d.p7 th:nth-child(2) { width: 8%; } .dv-itbl-d.p7 th:nth-child(3) { width: 8%; } .dv-itbl-d.p7 th:nth-child(4) { width: 16%; } .dv-itbl-d.p7 th:nth-child(5) { width: 11%; } .dv-itbl-d.p7 th:nth-child(6) { width: 14%; } .dv-itbl-d.p7 th:nth-child(7) { width: 13%; }
.dv-itbl-d.p9 { font-size: 12px; } .dv-itbl-d.p9 th, .dv-itbl-d.p9 td { padding: 5px 4px; } .dv-itbl-d.p9 th:nth-child(1) { width: 18%; } .dv-itbl-d.p9 th:nth-child(2) { width: 7%; } .dv-itbl-d.p9 th:nth-child(3) { width: 6%; } .dv-itbl-d.p9 th:nth-child(4) { width: 12%; } .dv-itbl-d.p9 th:nth-child(5) { width: 10%; } .dv-itbl-d.p9 th:nth-child(6) { width: 9%; } .dv-itbl-d.p9 th:nth-child(7) { width: 11%; } .dv-itbl-d.p9 th:nth-child(8) { width: 11%; } .dv-itbl-d.p9 th:nth-child(9) { width: 16%; }
.dv-itbl-d .dv-pill { padding: 1px 6px; font-size: 11px; }
/* the action row of the drawer: a bar under the scrolling content with its own solid background, never over it */
.dv-dfoot { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 20px; background: var(--white); border-top: 1px solid var(--line); }
.dv-dact, .dv-dask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.dv-dact[hidden], .dv-dask[hidden] { display: none; }
.dv-dact .dv-rm { margin-left: auto; }
.dv-dask > span { font-size: 14px; font-weight: 700; color: var(--red); margin-right: auto; }
.dv-sb .btn.dv-dbtn, .dv-dfoot .btn.dv-dbtn { width: auto; min-height: 40px; padding: 0 20px; font-size: 15px; }
.dv-dfoot .dv-goes { font-size: 13px; color: var(--muted); }
.dv-tval { margin: 0; text-align: right; font-size: 14px; font-weight: 700; }
.dv-sheetwrap:not(.dv-drawer) .dv-dfoot { display: none; }
/* round 4: groups, POs, the vendor drill-in, the ticket form, the recycle bin */
.dv-pill.quiet { background: var(--gray-1); border-color: var(--gray-2); color: var(--muted); font-weight: 600; }
.dv-ctk { white-space: normal !important; }
.dv-ctk .dv-pill { margin-left: 6px; vertical-align: middle; }
.dv-grp { display: inline-flex; flex: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.dv-gsel { height: 36px; padding: 0 6px; font-family: var(--font); font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); }
.dv-chk { display: inline-flex; flex: none; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--gray-7); cursor: pointer; }
.dv-chk input { width: 16px; height: 16px; margin: 0; }
.dv-gh td { padding: 0 10px; height: 36px; background: #F1F4F9; border-bottom: 1px solid var(--line); cursor: pointer; }
.dv-gh.lv1 td { background: #F7F9FC; }
.dv-gh.lv1 .dv-ghc { padding-left: 22px; }
.dv-gh.dv-gj td { cursor: default; background: #EAEFF6; }
.dv-gh:hover td { background: #E8EEF7; }
.dv-gh.dv-gj:hover td { background: #EAEFF6; }
.dv-ghc { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dv-ghc b { overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.dv-ghn { margin-left: auto; flex: none; font-size: 13px; font-weight: 600; color: var(--muted); }
.dv-gh:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.dv-table td.dv-lv1 { padding-left: 26px; }
.dv-table td.dv-lv2 { padding-left: 42px; }
.dv-table td.dv-lv3 { padding-left: 58px; }
.dv-table td.dv-pon, .dv-table td.dv-lnum { white-space: normal; }
.dv-poh { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.dv-poh b { font-size: 14px; }
.dv-pod, .dv-pom { font-size: 13px; font-weight: 400; color: var(--muted); }
.dv-pom { margin-left: 10px; }
.dv-pov { flex-basis: 100%; font-size: 13px; font-weight: 600; color: var(--gray-7); }
.dv-po td { background: #FAFBFC; }
.dv-po:hover td { background: #F1F5FB; }
.dv-ln.q0 td { color: var(--muted); }
.dv-sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.dv-sub.dv-red { color: var(--red); }
.dv-lnum .dv-ts { display: block; }
.dv-binhead { display: flex; align-items: center; gap: 16px; margin: 0 0 4px; }
.dv-binhead h2 { margin: 0; font-size: 21px; }
.dv-binact { white-space: normal !important; text-align: right; }
.dv-binact .dv-rowbtn { width: auto; min-height: 30px; padding: 0 10px; margin-left: 6px; font-size: 13px; }
.dv-ask { margin-right: 6px; font-size: 13px; font-weight: 700; color: var(--red); }
.dv-binbtn.on { color: var(--blue); border-color: var(--blue); background: var(--blue-tint); }
.dv-wform .dv-sheet { width: min(680px, 100vw); }
.dv-drawer.dv-wprice .dv-sheet { width: min(720px, 100vw); }
.dv-form { display: flex; flex-direction: column; gap: 12px; }
.dv-form > * { flex: none; }
.dv-frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dv-form .field { margin: 0; min-width: 0; }
.dv-fnote { margin: -4px 0 0; font-size: 13px; color: var(--muted); }
.dv-drawer .dv-form .field label { margin: 0 0 3px; font-size: 12px; color: var(--muted); }
.dv-drawer .dv-form .field select, .dv-drawer .dv-form .field input[type="text"], .dv-drawer .dv-form .field input[type="date"] { min-height: 36px; height: 36px; padding: 0 8px; font-size: 14px; border-width: 1px; }
.dv-drawer .dv-form .field textarea { min-height: 56px; padding: 6px 8px; font-size: 14px; border-width: 1px; }
.dv-eitbl { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 6px; }
.dv-eitbl th { padding: 0 4px; text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); }
.dv-eitbl th:nth-child(1) { width: 30%; } .dv-eitbl th:nth-child(2) { width: 12%; } .dv-eitbl th:nth-child(3) { width: 12%; } .dv-eitbl th:nth-child(4) { width: 38%; } .dv-eitbl th:nth-child(5) { width: 8%; }
.dv-eitbl td { padding: 0 4px; }
.dv-eitbl th.n { text-align: right; }
.dv-fin { display: block; width: 100%; min-width: 0; height: 34px; box-sizing: border-box; padding: 0 8px; font-family: var(--font); font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); }
.dv-fin.n { text-align: right; }
.dv-fin:focus { outline: none; border-color: var(--blue); }
.dv-fin:disabled { background: var(--gray-1); color: var(--faint); }
.dv-fxc { text-align: center; }
.dv-fx { font-size: 18px; color: var(--muted); }
.dv-fadd { align-self: flex-start; }
.dv-fphoto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; background: var(--gray-1); border: 1px dashed var(--gray-3); border-radius: var(--radius); }
.dv-fphoto .btn { width: auto; min-height: 32px; padding: 0 12px; font-size: 14px; }
.dv-fpn { font-size: 13px; color: var(--muted); }
/* job contacts: the project team over the drawer's content, or in a drawer of its own */
.dv-sheet { position: relative; }
.dv-shct { margin-left: auto; }
.dv-rt { margin-right: 4px; }
.dv-cpanel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; overflow-y: auto; padding: 18px 20px 24px; background: var(--white); animation: dv-in .16s ease-out; }
.dv-cbody { display: flex; flex-direction: column; gap: 10px; }
.dv-ch { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
.dv-ch h3 { margin: 0; font-size: 17px; font-weight: 800; }
.dv-cl2 { list-style: none; margin: 0; padding: 0; }
.dv-cp { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1.1fr); gap: 4px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dv-cp b { font-size: 15px; overflow-wrap: anywhere; }
.dv-crole { font-size: 13px; color: var(--muted); }
.dv-cem, .dv-cph2 { color: var(--blue); text-decoration: none; overflow-wrap: anywhere; }
.dv-cem:hover, .dv-cph2:hover { text-decoration: underline; }
.dv-cno { font-size: 13px; font-style: italic; color: var(--faint); }
.dv-cact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.dv-cact .btn.dv-ctbtn2 { width: auto; min-height: 40px; padding: 0 18px; font-size: 15px; text-decoration: none; }
.dv-cact span.dv-ctbtn2[aria-disabled] { opacity: .45; }
.dv-ctline { margin: 0; font-size: 14px; color: var(--muted); }
.dv-ctline .dv-ctbtn { height: auto; padding: 0 4px; font-size: 14px; text-decoration: underline; }
.dv-ctl { height: 24px; margin-left: 10px; padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.dv-ctl:hover { color: var(--blue); }
.dv-sheetwrap:not(.dv-drawer) .dv-cp { grid-template-columns: 1fr; }
.dv-sheetwrap:not(.dv-drawer) .dv-cact .btn.dv-ctbtn2 { width: 100%; min-height: 52px; }
.dv-sheetwrap:not(.dv-drawer) .dv-ctline .dv-ctbtn { min-height: 48px; padding: 0 12px; }
.dv-sheetwrap:not(.dv-drawer) .dv-cpanel { padding: 14px 14px 26px; }
.dv-sheetwrap:not(.dv-drawer) .dv-cpanel .dv-lnk { min-height: 48px; padding: 0 10px; font-size: 16px; }
/* moving a ticket: the banners with their buttons, the small form, the bulk banner over the table */
.dv-mvb { flex-wrap: wrap; justify-content: space-between; }
.dv-mvb > span:first-child { flex: 1 1 220px; min-width: 0; }
.dv-mvacts { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-mvb .btn.dv-mvbtn { margin-left: 0; min-height: 34px; padding: 0 12px; font-size: 14px; background: var(--white); }
.dv-mvq, .dv-moved { margin: 0; font-size: 13px; color: var(--muted); }
.dv-sheetwrap:not(.dv-drawer) .dv-mvb .btn { width: 100%; }
.dv-mvform { display: grid; gap: 10px; padding: 12px 14px; background: var(--gray-1); border: 1px solid var(--line); border-radius: var(--radius); }
.dv-mvform[hidden] { display: none; }
.dv-mvform .field { margin: 0; }
.dv-mvrow { display: flex; gap: 10px; }
.dv-drawer .dv-mvform .field label { margin: 0 0 3px; font-size: 12px; color: var(--muted); }
.dv-drawer .dv-mvform .field select, .dv-drawer .dv-mvform .field input[type="date"] { min-height: 36px; height: 36px; padding: 0 8px; font-size: 14px; border-width: 1px; }
.dv-drawer .dv-mvrow .btn { width: auto; min-height: 36px; padding: 0 18px; font-size: 14px; }
.dv-bulk { margin: 0 0 10px; flex-wrap: wrap; }
.dv-bulk > span { flex: 1 1 300px; }
.dv-bulk .btn.dv-mvbtn { margin-left: auto; min-height: 34px; padding: 0 12px; font-size: 14px; background: var(--white); }

/* ---- Invoices (invoices.js; .screen.iv-root) ----
   The computer screen first (the Delivery Log's look: summary cards that filter, a toolbar, the scan queue, a table, a drawer-like detail), then 820 px and
   narrower: the list full width, a picked invoice full screen with a "‹ Invoices" link. The page never scrolls sideways; a wide table sits in its own wrapper that does. */
.screen.iv-root { max-width: 1680px; padding-left: 24px; padding-right: 24px; }
.iv-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 14px; }
.iv-titlerow { display: flex; align-items: center; gap: 14px; }
.iv-titlerow h1 { margin: 0; }
.iv-titlerow .btn { width: auto; min-height: 36px; font-size: 14px; padding: 0 12px; }
.iv-lede { margin: 4px 0 0; max-width: 760px; font-size: 14px; }
.iv-tr2 { margin-left: auto; text-align: right; }
.iv-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
#ivAdd .btn.iv-act { width: auto; min-width: 0; min-height: 40px; margin: 0; padding: 0 18px; font-size: 15px; }
#ivAdd .iv-goes { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.iv-binbtn.on { color: var(--blue); border-color: var(--blue); background: var(--blue-tint); }
.iv-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.iv-stat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 11px 16px 12px; font: inherit; color: var(--ink); text-align: left; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.iv-stat .iv-n { font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.iv-stat > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.iv-stat.k-ok { border-left-color: var(--green); }
button.iv-fc { cursor: pointer; transition: background .1s; }
button.iv-fc:hover { background: var(--gray-1); }
.iv-fc.k-look { border-left-color: var(--red); }
.iv-fc.k-tax { border-left-color: var(--purple); }
.iv-fc.k-hold { border-left-color: var(--gold); }
.iv-fc.zero { border-left-color: var(--gray-3); }
.iv-fc.zero .iv-n, .iv-fc.zero > span { color: var(--faint); }
.iv-fc.on { border-width: 1px 1px 1px 4px; }
.iv-fc.on::after { content: "✓"; position: absolute; top: 8px; right: 12px; font-size: 15px; font-weight: 800; color: inherit; }
.iv-fc.on.k-look { background: var(--red-tint); border-color: var(--red); color: var(--red); }
.iv-fc.on.k-tax { background: #EFEAFA; border-color: var(--purple); color: var(--purple); }
.iv-fc.on.k-hold { background: var(--gold-tint); border-color: var(--gold); color: #8A6500; }
.iv-fc.on > span { color: inherit; }
.iv-fc:focus-visible, .iv-vbtn:focus-visible, .iv-qbtn:focus-visible, .iv-sel:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.iv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.iv-views, .iv-quick { display: inline-flex; flex: none; overflow: hidden; background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); }
.iv-vbtn, .iv-qbtn { height: 34px; padding: 0 14px; font-size: 14px; font-weight: 700; color: var(--gray-5); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.iv-qbtn { padding: 0 10px; font-size: 13px; }
.iv-vbtn + .iv-vbtn, .iv-qbtn + .iv-qbtn { border-left: 1px solid var(--gray-3); }
.iv-vbtn:hover, .iv-qbtn:hover { background: var(--gray-1); }
.iv-vbtn.on, .iv-qbtn.on { background: var(--blue-tint); color: var(--blue); }
.iv-job { position: relative; flex: none; }
.iv-sel { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; height: 36px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); cursor: pointer; }
.iv-sel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-sel i { flex: none; font-size: 11px; font-style: normal; color: var(--muted); }
.iv-sel.on { color: var(--blue); background: var(--blue-tint); border-color: var(--blue); }
.iv-jobpanel { position: absolute; z-index: 60; top: 40px; left: 0; min-width: 320px; max-height: 340px; overflow-y: auto; padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.iv-jobpanel[hidden] { display: none; }
.iv-jopt { display: block; width: 100%; padding: 8px 10px; font-size: 14px; font-weight: 600; color: var(--blue); text-align: left; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.iv-jopt:hover { background: var(--blue-tint); }
.iv-jsep { height: 1px; margin: 4px 0; background: var(--line); }
.iv-jchk { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 14px; border-radius: 6px; cursor: pointer; }
.iv-jchk:hover { background: var(--gray-1); }
.iv-jchk input { flex: none; width: 16px; height: 16px; margin: 0; }
.iv-jchk span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-jchk i { flex: none; font-size: 12px; font-style: normal; color: var(--muted); }
.iv-grp { display: inline-flex; flex: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.iv-gsel { height: 36px; padding: 0 6px; font-family: var(--font); font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); }
.iv-wsearch { flex: 1 1 240px; min-width: 200px; max-width: 420px; height: 36px; box-sizing: border-box; padding: 0 12px; font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); }
.iv-wsearch:focus { outline: none; border-color: var(--blue); }
.iv-root .btn.iv-clear { width: auto; min-height: 36px; height: 36px; padding: 0 12px; font-size: 14px; }
.iv-clear[hidden] { display: none; }
.iv-queue { margin: 0 0 10px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.iv-qhead { display: flex; align-items: center; gap: 14px; padding: 6px 8px 6px 14px; background: var(--gray-1); border-bottom: 1px solid var(--line); }
.iv-qhead b { font-size: 14px; }
.iv-qprog { flex: 1; max-width: 320px; height: 6px; overflow: hidden; background: var(--gray-2); border-radius: 3px; }
.iv-qprog i { display: block; height: 100%; background: var(--blue); transition: width .2s; }
.iv-queue:not(.run) .iv-qprog i { background: var(--green); }
.iv-qx { width: 28px; height: 28px; margin-left: auto; font-size: 20px; line-height: 1; color: var(--muted); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.iv-qx:hover { background: var(--gray-2); }
.iv-qlist { position: relative; max-height: 190px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.iv-q { display: flex; align-items: baseline; gap: 16px; padding: 5px 14px; font-size: 13px; border-bottom: 1px solid var(--line-soft); }
.iv-q:last-child { border-bottom: 0; }
.iv-qn { flex: none; width: 240px; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.iv-qs { flex: 1; min-width: 0; color: var(--muted); }
.iv-q.read .iv-qs { color: var(--blue); font-weight: 600; }
.iv-q.ok .iv-qs { color: var(--green-dark); }
.iv-q.gold .iv-qs { color: #8A6500; }
.iv-q.fail .iv-qs { color: var(--red); }
.iv-q .dv-lnk { height: 22px; padding: 0 6px; font-size: 13px; }
.iv-hint { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.iv-loading { opacity: .55; pointer-events: none; transition: opacity .15s; }
.iv-empty { display: grid; justify-items: center; gap: 8px; padding: 64px 24px; text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.iv-empty b { font-size: 19px; }
.iv-drop { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 87, 184, .10); pointer-events: none; }
.iv-drop > div { position: absolute; inset: 14px; display: grid; place-items: center; border: 3px dashed var(--blue); border-radius: var(--radius-lg); }
.iv-drop b { padding: 14px 28px; font-size: 24px; color: var(--blue); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
/* the two panes: the list 5 : the detail 6; the detail stays in view while the list scrolls */
.iv-panes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .iv-panes { grid-template-columns: minmax(0, 1fr); } .iv-detailpane { position: static !important; max-height: none !important; } }
.iv-listpane { min-width: 0; }
.iv-detailpane { min-width: 0; position: sticky; top: calc(var(--iv-top, 0px) + 10px); max-height: calc(100vh - var(--iv-top, 0px) - 20px); overflow-y: auto; }
.iv-card { min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.iv-tablewrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.iv-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.iv-table th { padding: 0 8px; height: 36px; text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; background: #FAFBFC; border-bottom: 1px solid var(--line); }
.iv-table td { padding: 8px; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.iv-table th.n, .iv-table td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-sortable { cursor: pointer; user-select: none; }
.iv-sortable:hover, .iv-sortable.on { color: var(--ink); }
.iv-arrow { display: inline-block; width: 12px; margin-left: 4px; font-size: 9px; color: var(--blue); }
.iv-arrow:empty { display: none; }
.iv-tr { cursor: pointer; }
.iv-tr.ok td:first-child { box-shadow: inset 4px 0 var(--green); }
.iv-tr.bad td:first-child { box-shadow: inset 4px 0 var(--red); }
.iv-tr:hover td { background: #F1F5FB; }
.iv-tr.sel td { background: var(--blue-tint); }
.iv-tr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.iv-vend { font-weight: 700; overflow-wrap: break-word; }
.iv-table td.iv-cinv, .iv-table th.iv-cinv { min-width: 128px; }
.iv-table td.iv-cchk, .iv-table th.iv-cchk { min-width: 126px; }
.iv-table td.iv-cappr, .iv-table th.iv-cappr { min-width: 96px; }
.iv-small { font-size: 12px; color: var(--muted); }
.iv-cjob span { color: var(--muted); }
.iv-cpo, .iv-ctot { white-space: nowrap; }
.iv-table .iv-pills { display: flex; flex-wrap: wrap; gap: 3px; margin: 0; }
.iv-table .iv-pill { max-width: 100%; white-space: normal; }
.iv-pill { display: inline-block; flex: none; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--gray-2); background: var(--gray-1); color: var(--gray-7); }
.iv-pill.red { background: var(--red-tint); border-color: #E5B5B7; color: var(--red); }
.iv-pill.orange { background: var(--orange-tint); border-color: #F3C3A6; color: #B5551F; }
.iv-pill.gold { background: var(--gold-tint); border-color: #E8C55A; color: #8A6500; }
.iv-pill.green { background: var(--green-tint); border-color: #B7D9A5; color: var(--green-dark); }
.iv-pill.purple { background: #EFEAFA; border-color: #C9BBEC; color: var(--purple); }
.iv-pill.blue { background: var(--blue-tint); border-color: #BAD2EE; color: var(--blue); }
.iv-pill.grey { background: var(--gray-1); border-color: var(--gray-2); color: var(--muted); font-weight: 600; }
.iv-ai { display: inline-block; margin-left: 5px; padding: 0 4px; font-size: 10px; font-weight: 800; line-height: 1.4; color: var(--blue); border: 1px solid var(--blue); border-radius: 4px; vertical-align: 1px; }
.iv-foot { margin: 8px 2px 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.iv-none { padding: 32px 10px !important; text-align: center; color: var(--muted); }
.iv-none p { margin: 6px 0 0; font-size: 13px; font-weight: 400; }
.iv-nodetail { padding: 40px 24px; text-align: center; }
.iv-nodetail p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
/* the picked invoice */
.iv-detail { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.iv-back { display: none; align-self: flex-start; height: 40px; }
.iv-dhead { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 14px; }
.iv-dtitle { min-width: 0; flex: 1 1 220px; }
.iv-dhead h2 { margin: 0; font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
.iv-tot { margin-left: auto; text-align: right; }
.iv-tot b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.iv-dfix .btn { width: auto; }
.iv-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.iv-eyenote { font-weight: 400; letter-spacing: 0; text-transform: none; }
.iv-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.iv-leg { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; }
.iv-leg h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.iv-leg b { font-size: 15px; }
.iv-leg.bad { border-color: var(--red); background: var(--red-tint); }
.iv-leg.warn { border-color: var(--gold); background: var(--gold-tint); }
.iv-leg.good { border-color: var(--green); background: var(--green-tint); }
.iv-scroll { overflow-x: auto; }
.iv-match { width: 100%; border-collapse: collapse; font-size: 13px; }
.iv-match th { padding: 7px 8px; text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--line); }
.iv-match td { padding: 7px 8px; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.iv-match th.n, .iv-match td.n { text-align: right; font-variant-numeric: tabular-nums; }
.iv-match tr.bad td:first-child { box-shadow: inset 3px 0 var(--red); }
.iv-match .iv-pill { margin: 1px 3px 1px 0; white-space: normal; }
.iv-match tr.iv-tix td { padding-top: 0; border-bottom: 1px solid var(--line-soft); }
.iv-nw { white-space: nowrap; }
.iv-x { color: var(--red); font-weight: 700; }
.iv-ok { color: var(--green-dark); font-weight: 700; }
.iv-checks { display: grid; gap: 6px; }
.iv-check { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.iv-check.bad { border-color: var(--red); background: var(--red-tint); }
.iv-mark { flex: none; width: 16px; font-weight: 800; }
.iv-mark.x { color: var(--red); }
.iv-mark.ok { color: var(--green-dark); }
.iv-exnote { margin: 0; }
.iv-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.iv-rung { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; }
.iv-rung h3 { margin: 0; font-size: 13px; font-weight: 800; }
.iv-lim { font-size: 12px; color: var(--muted); }
.iv-who { margin-top: 6px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.iv-rung.done { border-color: var(--green); background: var(--green-tint); }
.iv-rung.now { border-color: var(--blue); background: var(--blue-tint); box-shadow: 0 0 0 2px var(--blue); }
.iv-rung.hold { border-color: var(--gold); background: var(--gold-tint); box-shadow: 0 0 0 2px var(--gold); }
.iv-rung.rej { border-color: var(--red); background: var(--red-tint); }
.iv-rung.skip { opacity: .55; }
.iv-rung.gap { border-color: var(--gold); background: var(--gold-tint); }
.iv-need { margin: 8px 0 0; }
.iv-decide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.iv-decide .btn { width: auto; min-height: 38px; padding: 0 16px; font-size: 14px; }
.iv-note { flex: 1 1 240px; min-width: 0; height: 38px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); }
.iv-note.need { border-color: var(--red); background: var(--red-tint); }
.iv-note:focus { outline: none; border-color: var(--blue); }
.iv-dbtn.iv-red { color: var(--red); border-color: var(--red); }
.iv-waitline { flex: 1 1 240px; font-size: 14px; }
.iv-hint { color: var(--muted); }
.iv-paper { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; font-size: 13px; background: var(--gray-1); border: 1px solid var(--line); border-radius: 8px; }
.iv-paper .btn { width: auto; min-height: 38px; padding: 0 16px; font-size: 14px; text-decoration: none; }
.iv-img { display: block; max-width: 100%; max-height: 520px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.iv-hist { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
.iv-hist li { padding: 4px 0; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.iv-hat { color: var(--muted); }
.iv-hnote { font-style: italic; }
/* job contacts: the project team under the buttons */
.iv-cpanel { padding: 12px 14px; background: var(--gray-1); border: 1px solid var(--line); border-radius: 8px; }
.iv-ch h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.iv-cl { margin: 0; padding: 0; list-style: none; }
.iv-cp { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1.1fr); gap: 4px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.iv-crole { font-size: 13px; color: var(--muted); }
.iv-cem { color: var(--blue); text-decoration: none; overflow-wrap: anywhere; }
.iv-cno { font-size: 13px; font-style: italic; color: var(--faint); }
.iv-cact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.iv-cact .btn.iv-ctb2 { width: auto; min-height: 38px; padding: 0 16px; font-size: 14px; text-decoration: none; }
.iv-cact span.iv-ctb2[aria-disabled] { opacity: .45; }
/* Fix: the detail as a form */
.iv-ff { margin: 0; min-width: 0; }
.iv-ff label { display: block; margin: 0 0 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.field.iv-ff input, .field.iv-ff select { width: 100%; min-width: 0; min-height: 36px; height: 36px; padding: 0 8px; font: inherit; font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); }
.field.iv-ff input:focus, .field.iv-ff select:focus { outline: none; border-color: var(--blue); box-shadow: none; }
.iv-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; }
.iv-fline { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; }
.iv-fl-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.iv-flabel { display: block; margin: 0 0 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.iv-tklist { display: grid; gap: 2px; max-height: 168px; overflow-y: auto; padding: 4px; background: var(--gray-1); border: 1px solid var(--line); border-radius: 6px; }
.iv-tk { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 13px; border-radius: 5px; cursor: pointer; }
.iv-tk:hover { background: var(--white); }
.iv-tk input { flex: none; width: 16px; height: 16px; margin: 0; }
.iv-showall { margin-top: 2px; height: 28px; font-size: 13px; }
.iv-warn { margin: 0; padding: 8px 12px; font-size: 14px; font-weight: 600; color: #7A5C00; background: var(--gold-tint); border: 1px solid #EAD48A; border-radius: 8px; }
.iv-factions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.iv-factions .btn { width: auto; min-height: 38px; padding: 0 16px; font-size: 14px; }
.iv-factions .iv-rm { margin-left: auto; }
.iv-ask { font-size: 13px; font-weight: 700; color: var(--red); }
/* the recycle bin */
.iv-binhead { display: flex; align-items: center; gap: 16px; margin: 0 0 4px; }
.iv-binhead h2 { margin: 0; font-size: 21px; }
.iv-t-bin { table-layout: fixed; min-width: 900px; }
.iv-t-bin td { vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-binact { text-align: right; }
.iv-binact .iv-rowbtn { width: auto; min-height: 30px; padding: 0 10px; font-size: 13px; }
/* set up: once per job, by accounting */
.iv-setup { margin-top: 18px; padding: 16px; }
.iv-setup h2 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.iv-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px 28px; margin-top: 10px; }
.iv-stbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.iv-stbl th { padding: 6px 8px; text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line); }
.iv-stbl td { padding: 7px 8px; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.iv-stbl th.n, .iv-stbl td.n { text-align: right; white-space: nowrap; }
.iv-ladnote { margin: 8px 0 0; }
.iv-kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 12px; margin: 0 0 10px; }
.iv-kv dt { font-size: 14px; font-weight: 600; color: var(--muted); }
.iv-kv dd { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.iv-nosetup { margin: 0 0 10px; padding: 8px 12px; font-weight: 600; color: #7A5C00; background: var(--gold-tint); border: 1px solid #EAD48A; border-radius: 8px; }
.iv-setup .btn-sm { width: auto; }
.iv-sform { display: grid; gap: 12px; }
/* 820 px and narrower: the list, then a picked invoice full screen */
@media (max-width: 820px) {
  .screen.iv-root { padding-left: 16px; padding-right: 16px; }
  .iv-top { gap: 6px; }
  .iv-tr2 { margin-left: 0; width: 100%; text-align: left; }
  .iv-acts { justify-content: flex-start; }
  .iv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .iv-stat { padding: 9px 12px 10px; }
  .iv-stat .iv-n { font-size: 24px; }
  .iv-wsearch { flex: 1 1 100%; max-width: none; }
  .iv-jobpanel { min-width: 0; width: min(320px, calc(100vw - 32px)); }
  .iv-panes { grid-template-columns: minmax(0, 1fr); }
  .iv-detailpane { display: none; position: static; max-height: none; overflow: visible; }
  .iv-d .iv-detailpane { display: block; }
  .iv-d .iv-top, .iv-d .iv-cards, .iv-d .iv-bar, .iv-d #ivQueue, .iv-d #ivSetup, .iv-d .iv-listpane { display: none; }
  .iv-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
  .iv-detail { padding: 12px; }
  .iv-tablewrap { overflow: visible; background: none; border: 0; box-shadow: none; }
  .iv-table thead { display: none; }
  .iv-table, .iv-table tbody { display: block; }
  .iv-table tr.iv-tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; margin-bottom: 10px; padding: 12px 12px 12px 14px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
  .iv-table tr.iv-tr.bad { border-left-color: var(--red); }
  .iv-table tr.iv-tr.sel { background: var(--white); }
  .iv-table tr.iv-tr td { display: block; padding: 0; border: 0; box-shadow: none !important; background: none !important; }
  .iv-table td.iv-cinv { grid-column: 1; }
  .iv-table td.iv-ctot { grid-column: 2; grid-row: 1; font-size: 16px; }
  .iv-table td.iv-cjob { grid-column: 1 / -1; font-size: 12px; }
  .iv-table td.iv-cpo { grid-column: 1 / -1; font-size: 12px; }
  .iv-table td.iv-cchk, .iv-table td.iv-cappr { grid-column: 1 / -1; }
  .iv-table tr.iv-tr td:first-child { box-shadow: none; }
  .iv-table tr:has(.iv-none) { display: block; }
  .iv-t-bin { min-width: 0; }
  .iv-tablewrap:has(.iv-t-bin) { overflow-x: auto; }
  .iv-three { grid-template-columns: minmax(0, 1fr); }
  .iv-match thead { display: none; }
  .iv-match, .iv-match tbody { display: block; }
  .iv-match tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 10px 0 10px 10px; border-bottom: 1px solid var(--line); }
  .iv-match tr.bad { border-left: 3px solid var(--red); }
  .iv-match tr.bad td:first-child { box-shadow: none; }
  .iv-match td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  .iv-match td.n { text-align: left; }
  .iv-match td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; font-weight: 700; color: var(--faint); }
  .iv-match td.iv-cb { grid-column: 1 / -1; font-weight: 700; }
  .iv-match td.iv-cpl, .iv-match td.iv-cck { grid-column: 1 / -1; }
  .iv-match tr.iv-tix { display: block; padding: 0 0 8px 10px; }
  .iv-match tr.iv-tix td:first-child { display: none; }
  .iv-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-tot { margin-left: 0; text-align: left; }
  .iv-decide .btn, .iv-factions .btn { flex: 1 1 auto; min-height: 48px; }
  .iv-note { flex-basis: 100%; height: 48px; }
  .iv-cp { grid-template-columns: minmax(0, 1fr); }
  .iv-cact .btn.iv-ctb2 { width: 100%; min-height: 48px; }
  .iv-fgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field.iv-ff input, .field.iv-ff select { min-height: 44px; height: 44px; font-size: 16px; }
  .iv-kv { grid-template-columns: 110px minmax(0, 1fr); }
  .iv-q { flex-wrap: wrap; gap: 2px 10px; }
  .iv-qn { width: 100%; }
}

/* ===== Photos tool ===== */
/* photos.js: a job's photos in albums. Phone first (one column, 52 px fields, slide-up sheets); a laptop is the same screens, wider. */
@media (min-width: 821px) { .screen.ph-screen { max-width: 1100px; } }
.ph-headrow { margin-bottom: 6px; }
.ph-headrow .btn { width: auto; min-height: 48px; }
.ph-addrow { display: flex; gap: 12px; margin-bottom: 14px; }
.ph-addrow .ph-addbtn { flex: 1 1 0; min-width: 0; min-height: 74px; flex-direction: column; gap: 4px; padding: 10px 8px; line-height: 1.2; text-align: center; cursor: pointer; }
.ph-addrow .ph-addbtn .ic { width: 26px; height: 26px; }
.ph-seg { margin-bottom: 12px; }
.ph-seg .seg-btn.on { background: var(--blue); border-color: var(--blue); color: var(--white); }
.ph-eb { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 18px 2px 9px; }
.ph-gap { margin-top: 18px; }
.ph-list { display: grid; gap: 11px; }
@media (min-width: 821px) { .ph-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } }
.ph-row { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 64px; padding: 15px 14px; text-align: left; font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); cursor: pointer; }
.ph-row:active { background: var(--gray-1); }
.ph-row.quiet { border-left-color: var(--line); box-shadow: none; background: var(--gray-1); }
.ph-rt { flex: 1; min-width: 0; }
.ph-rt b { display: block; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.ph-rt > span { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.ph-chev { flex: none; color: var(--faint); font-size: 20px; }
.ph-cover { flex: none; width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; background: var(--gray-2); display: flex; align-items: center; justify-content: center; }
.ph-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-cover-none { color: var(--faint); }
.ph-cover-none .ic { width: 24px; height: 24px; }
.ph-covers { flex: none; display: flex; gap: 4px; }
.ph-covers img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--gray-2); }
.ph-chips { margin: 0 0 12px; }
.chip.ph-chip { min-height: 48px; font-size: 15px; }
.ph-dayh { margin: 16px 2px 8px; font-size: 15px; font-weight: 700; color: var(--gray-7); }
.ph-dayh span { font-weight: 600; color: var(--muted); }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
@media (min-width: 821px) { .ph-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } }
.ph-cell { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--gray-2); cursor: pointer; }
.ph-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* sheets (the Pour Log's .cp-modal > .cp-sheet) */
.ph-sheet { outline: none; overscroll-behavior: contain; }
.ph-sheet .ph-cancel { width: auto; min-height: 48px; padding: 0 20px; font-size: 16px; }
.ph-sheet .field label { font-size: 15px; font-weight: 700; }
.ph-sheet .btn { margin: 0; }
.ph-sthumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ph-sthumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); background: var(--gray-2); }
.ph-smore { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); }
.ph-pickrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 52px; padding: 12px; text-align: left; font: inherit; font-size: 18px; color: var(--ink); background: var(--white); border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); cursor: pointer; overflow-wrap: anywhere; }
.ph-pickrow small, .ph-ro small { display: block; font-size: 13px; color: var(--muted); }
.ph-ph { color: var(--faint); }
.ph-ro { min-height: 52px; display: flex; flex-direction: column; justify-content: center; padding: 6px 2px; font-size: 18px; overflow-wrap: anywhere; }
.ph-sheet .ph-seg { margin-bottom: 8px; }
.ph-save { margin-top: 8px; }
.ph-pq { margin-bottom: 8px; }
.ph-plist { display: grid; gap: 6px; }
.ph-pgh { margin: 10px 2px 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ph-pr { display: block; width: 100%; min-height: 52px; padding: 12px 14px; text-align: left; font: inherit; font-size: 17px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; overflow-wrap: anywhere; }
.ph-pr.on { border-color: var(--blue); background: var(--blue-tint); font-weight: 700; }
.ph-pr-none { color: var(--muted); border-style: dashed; }
.ph-pempty { margin: 0; padding: 14px; color: var(--muted); }
/* the viewer */
.ph-viewer { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--white); overflow-y: auto; overscroll-behavior: contain; outline: none; }
.ph-vbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--white); border-bottom: 1px solid var(--gray-2); position: sticky; top: 0; z-index: 2; }
.ph-vbar .btn { width: auto; min-height: 48px; padding: 0 22px; font-size: 16px; }
.ph-vpos { font-size: 15px; font-weight: 700; color: var(--muted); }
.ph-vimgwrap { flex: none; display: flex; align-items: center; justify-content: center; background: #111; min-height: 240px; }
.ph-vimg { display: block; max-width: 100%; max-height: 60vh; max-height: 60dvh; object-fit: contain; }
.ph-vnav { flex: none; display: flex; gap: 12px; padding: 12px 14px 0; width: 100%; max-width: 640px; margin: 0 auto; }
.ph-vnav .btn { flex: 1 1 0; min-width: 0; margin: 0; }
.ph-vbody { width: 100%; max-width: 640px; margin: 0 auto; padding: 14px 14px calc(30px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 0; }
.ph-vbody .field label { font-size: 15px; font-weight: 700; }
.ph-vbody .btn { margin: 0 0 12px; }
.ph-by { margin: 4px 2px 16px; font-size: 14px; color: var(--muted); }
.ph-remove.armed { background: var(--red); border-color: var(--red); color: var(--white); }
@media (min-width: 821px) { .ph-vimg { max-height: 62vh; } }

/* ---- Specs settings (specs-admin.js) --------------------------------------
   Step 8 of the Specs module: types, agencies, numbering and estimate, AI spend,
   behind one segmented control. An office screen, so wider than the phone column,
   but the same fields, buttons and cards as everywhere else. */
.screen.specs-a-screen { max-width: 960px; }
.specs-a-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.specs-a-top .specs-back { margin-bottom: 0; }
.specs-a-title { margin: 0; font-size: 20px; flex: 1 1 auto; }
.specs-a-status { font-size: 13px; color: var(--muted); min-height: 1.2em; }
.specs-a-status.bad { color: var(--red); font-weight: 700; }
.specs-a-seg { margin-bottom: var(--s4); }
.specs-a-seg .seg-btn { font-size: 15px; padding: 0 var(--s2); }
.specs-a-seg .seg-btn.on { background: var(--blue); border-color: var(--blue); color: var(--white); }
.specs-a-note { margin: 0 0 var(--s3); font-size: 14px; color: var(--gray-7); }
.specs-a-hint { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.specs-a-list { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s4); }
.specs-a-row, .specs-a-ag { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.specs-a-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 170px 88px auto; gap: 0 var(--s3); align-items: end; padding: 12px 14px 0; }
.specs-a-ag .specs-a-row { border: 0; box-shadow: none; border-radius: 0; }
.specs-a-row .field { margin-bottom: var(--s3); }
.specs-a-row.off, .specs-a-ag.off { background: var(--gray-1); }
.specs-a-code { align-self: center; margin-bottom: var(--s3); overflow-wrap: anywhere; }
.specs-a-off { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--gray-2); color: var(--gray-7); }
.specs-a-acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.specs-a-chk { display: flex; align-items: center; gap: var(--s2); font-weight: 600; margin-bottom: var(--s3); min-height: 40px; }
.specs-a-chk input { width: 22px; height: 22px; }
.specs-a-ag-foot { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s3); }
.specs-a-gen { border-top: 1px solid var(--line-soft); padding: 12px 14px var(--s3); }
.specs-a-g { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) auto; gap: 0 var(--s3); align-items: start; padding-top: var(--s2); border-top: 1px dashed var(--line); }
.specs-a-g:first-of-type { border-top: 0; }
.specs-a-g .field textarea { min-height: 96px; font-size: 16px; }
.specs-a-g-acts { display: flex; flex-wrap: wrap; gap: var(--s2); padding-top: 26px; }
.specs-a-gbar { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.specs-a-add { margin-top: var(--s4); }
.specs-a-addgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 0 var(--s3); }
.specs-a-card { max-width: 640px; }
.specs-a-tokens { margin: 0 0 var(--s3); padding-left: 18px; font-size: 14px; color: var(--gray-7); }
.specs-a-tokens code, .specs-a-card code { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--gray-1); padding: 1px 5px; border-radius: 4px; }
.specs-a-presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: calc(var(--s2) * -1) 0 var(--s3); }
.specs-a-presets-l { font-size: 14px; font-weight: 700; color: var(--gray-7); }
.specs-a-presets .btn { font-family: ui-monospace, Menlo, Consolas, monospace; }
.specs-a-preview { margin: 0 0 var(--s3); font-size: 15px; color: var(--ink); }
.specs-a-preview strong { font-family: ui-monospace, Menlo, Consolas, monospace; }
.specs-a-err { margin: 0 0 var(--s3); font-size: 14px; font-weight: 700; color: var(--red); }
.specs-a-err:empty { display: none; }
.specs-a-missing { margin-bottom: var(--s4); }
.specs-a-empty { margin: var(--s4) 0; color: var(--gray-7); }
.specs-a-tablewrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.specs-a-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.specs-a-table th, .specs-a-table td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--line-soft); vertical-align: middle; white-space: nowrap; }
.specs-a-table thead th { border-top: 0; background: var(--gray-1); font-weight: 700; color: var(--gray-7); }
.specs-a-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.specs-a-table td.specs-a-ttl { white-space: normal; min-width: 180px; overflow-wrap: anywhere; }
.specs-a-table tfoot td { font-weight: 700; background: var(--gray-1); border-top: 2px solid var(--line); }
@media (max-width: 820px) {
  .specs-a-row, .specs-a-ag .specs-a-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .specs-a-code { grid-column: 1 / -1; margin-bottom: var(--s2); }
  .specs-a-f-label, .specs-a-acts, .specs-a-chk, .specs-a-ag-foot { grid-column: 1 / -1; }
  .specs-a-g { grid-template-columns: minmax(0, 1fr); }
  .specs-a-g-acts { padding-top: 0; margin-bottom: var(--s3); }
  .specs-a-addgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   My time (mytime.js) — docs/mytime-START-HERE.md, docs/my-time-phone-mockup.html.
   The shared pieces (.screen, .btn, .field, .seg, .banner-*, .obs-nudge, .cp-modal > .cp-sheet with .cp-tk-head) do most of it;
   only what has no shared class is here: the pill, the week navigator, the total card, day / line rows, the steppers, the
   equipment tick rows, the pick-sheet rows.
   ============================================================ */
.mt .mt-headrow { margin-bottom: var(--s3); }
.mt .mt-headrow .btn { width: auto; }
.mt h1 { margin-bottom: var(--s2); }
.mt .sub { margin-bottom: var(--s4); }
.mt .mt-status { margin-top: -4px; }
.mt .eyebrow, .mt-modal .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 18px 2px 8px; }
.mt-pill { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 20px; padding: 2px 10px; vertical-align: middle; border: 1px solid transparent; }
.mt-pill-open { background: var(--gold-tint); color: #8A6500; border-color: #E8C55A; }
.mt-pill-ok { background: var(--green-tint); color: var(--green-dark); border-color: #B7D9A5; }
.mt-pill-bad { background: var(--red-tint); color: var(--red); border-color: #E5B5B7; }
.mt-pill-info { background: var(--blue-tint); color: var(--blue-dark); border-color: #BCD3EE; }
.mt-tabs .seg-btn.mt-on { background: var(--blue); border-color: var(--blue); color: var(--white); }
.mt-gap { margin-top: var(--s4); }
.mt-gap0 { margin-top: var(--s2); }
.mt-note { font-size: 13px; color: var(--muted); margin: var(--s2) 2px 0; }

/* the week navigator: ‹  Sep 28 – Oct 4  › */
.mt-wk { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: var(--s2); align-items: center; margin-bottom: var(--s3); }
.mt-wk button { height: 52px; border-radius: var(--radius-sm); border: 1.5px solid var(--gray-3); background: var(--white); font: 800 24px var(--font); color: var(--blue); }
.mt-wk button:disabled { color: var(--gray-3); cursor: default; }
.mt-wk div { text-align: center; background: var(--white); border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); min-height: 52px; display: grid; place-items: center; padding: 4px; }
.mt-wk div b { font-size: 17px; line-height: 1.2; }
.mt-wk div span { font-size: 12px; color: var(--muted); font-weight: 700; }


/* a day, a line, a person: one row style, a coloured left edge */
.mt-row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 64px; margin-bottom: 10px; padding: 13px 12px; text-align: left; font: inherit; color: var(--ink);
  background: var(--white); border: 0; border-left: 4px solid var(--blue); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
button.mt-row:active { filter: brightness(0.97); }
.mt-row.mt-g { border-left-color: var(--green); } .mt-row.mt-y { border-left-color: var(--gold); } .mt-row.mt-r { border-left-color: var(--red); } .mt-row.mt-n { border-left-color: var(--gray-3); }
.mt-rt { flex: 1; min-width: 0; }
.mt-rt b { display: block; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.mt-rt span { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.mt-rt .mt-eq, .mt-eq { color: #8A6500; font-weight: 700; }
.mt-rt span .mt-eq { display: inline; }
.mt-hrs { font-size: 20px; font-weight: 800; white-space: nowrap; }
.mt-hrs small { font-size: 12px; color: var(--muted); font-weight: 700; }
.mt-chev { color: var(--gray-3); font-size: 22px; font-weight: 700; }

/* the line sheet and the pick sheets */
.mt-modal { z-index: 1000; }
.mt-modal.mt-pick { z-index: 1010; }
/* a refusal ("Pick a cost code.", the 24-hour stop) must show over the sheet it is about, as the Daily Log's does */
body:has(.mt-modal) .toast { z-index: 1200; }
/* a sticky head inside a padded scroller sits one padding lower than where it flowed, and then covers the first label: no top padding, the head carries it */
.mt-sheet { padding-top: 0; }
.mt-sheet .cp-tk-head { margin-top: 0; }
.mt-sheet .field { margin-bottom: var(--s4); }
.mt-sheet .field label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mt-pickbtn { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%; min-height: 52px; padding: 8px 12px; text-align: left;
  font: inherit; font-size: 18px; color: var(--ink); background: var(--white); border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); }
.mt-pickbtn small { display: block; font-size: 13px; color: var(--muted); }
.mt-pickbtn span { min-width: 0; overflow-wrap: anywhere; }
.mt-pickbtn .mt-ph { color: var(--faint); }
.mt-pickbtn i { font-style: normal; font-weight: 700; color: var(--gray-3); font-size: 20px; }
.mt-check { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 52px; margin-bottom: var(--s2); padding: 8px 12px; text-align: left; font: inherit; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); }
.mt-check i { flex: 0 0 30px; height: 30px; border-radius: 6px; border: 2px solid var(--gray-3); display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--white); }
.mt-check.mt-on i { background: var(--blue); border-color: var(--blue); }
.mt-check > span { flex: 1; min-width: 0; }
.mt-check b { display: block; font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.mt-check small { display: block; font-size: 13px; color: var(--muted); }
.mt-tag { flex: none; font-style: normal; font-size: 11px; font-weight: 700; color: #8A6500; background: var(--gold-tint); border: 1px solid #E8C55A; border-radius: 12px; padding: 2px 8px; }
.mt-rm { display: block; margin: var(--s2) auto 0; min-height: 48px; padding: 6px 12px; background: none; border: 0; font: 700 15px var(--font); color: var(--red); text-decoration: underline; }
.mt-pk { margin: 0 -16px; }
.mt-prow { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 54px; padding: 6px 16px; text-align: left; font: inherit; color: var(--ink);
  background: var(--white); border: 0; border-bottom: 1px solid var(--gray-2); }
.mt-prow b { font-size: 17px; overflow-wrap: anywhere; }
.mt-prow span { font-size: 13px; color: var(--muted); }
.mt-prow.mt-on { background: var(--blue-tint); color: var(--blue-dark); }
.mt-grp { min-height: 30px; display: flex; align-items: center; padding: 0 16px; background: var(--gray-1); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.mt-pk .sub, .mt-pk .mt-note { padding: 0 16px; }

/* ---- My time: the week on one screen (mytime.js; docs/my-time-one-screen-mockup.html) ----
   A card per job and cost code with a box per day. Boxes 50 px tall, 18 px bold text; seven across with 4 px gaps (about 43 px wide on a 390 px phone). */
.mt [hidden], .mt-modal [hidden] { display: none !important; }
.mt-saved { margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--green-dark); opacity: 0; transition: opacity .15s; }
.mt-saved.on { opacity: 1; }
.mt-saved.bad { color: var(--red); }
.mt-rowc { display: grid; gap: 8px; margin-bottom: 12px; padding: 12px 10px; background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.mt-rh { display: flex; align-items: flex-start; gap: 8px; }
.mt-rh .mt-rt { flex: 1; min-width: 0; }
.mt-rsum { padding-top: 2px; font-size: 18px; font-weight: 800; white-space: nowrap; }
.mt-more { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; font: 800 20px var(--font); line-height: 1; color: var(--gray-7); background: var(--white); border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); }
.mt-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mt-box { display: grid; gap: 2px; min-width: 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.mt-box input { width: 100%; min-width: 0; height: 50px; padding: 0; text-align: center; font: 800 18px var(--font); color: var(--ink); background: var(--white); border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); }
.mt-box input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.15); }
.mt-box input.mt-we { background: var(--gray-1); }
.mt-ot .mt-box input { background: var(--gold-tint); border-color: #E8C55A; }
.mt-box input.mt-over, .mt-box input.mt-flash { color: var(--red); background: var(--red-tint); border-color: var(--red); }
.mt-box input[readonly] { color: var(--gray-7); background: var(--gray-1); border-color: var(--gray-2); }
.mt-rowlab { margin: 2px 2px -4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.mt-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.btn.mt-sm { min-height: 44px; font-size: 14px; }
.mt-rownote { padding: 6px 9px; font-size: 13px; color: var(--gray-7); background: var(--gray-1); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.mt-eqrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; text-align: left; font: 600 14px var(--font); color: #8A6500; background: none; border: 0; }
.mt-eqrow i { flex: 0 0 28px; height: 28px; display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--white); background: var(--blue); border-radius: 6px; }
.mt-eqrow.off i { background: var(--white); border: 2px solid var(--gray-3); }
.mt-eqrow > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mt-eqrow.ro { cursor: default; }
.mt-dayhead { display: none; }
.mt-copy { flex-direction: column; align-items: stretch; gap: 8px; }
.mt-copyrows { display: grid; }
.mt-sumrow { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; font-size: 14px; border-bottom: 1px solid #BCD3EE; }
.mt-sumrow b { font-weight: 800; }
.mt-tot { display: grid; gap: 6px; margin-top: 12px; padding: 10px 10px 12px; background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius); box-shadow: var(--shadow); }
.mt-tot .mt-days > div { text-align: center; font-size: 16px; font-weight: 800; }
.mt-tot small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); }
.mt-tot .mt-bad { color: var(--red); }
.mt-big { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; }
.mt-big b { font-size: 26px; }
.mt-big b small { display: inline; font-size: 15px; }
.mt-big span { font-size: 13px; font-weight: 600; color: var(--muted); }
.mt-warn { font-size: 14px; font-weight: 700; color: var(--red); }
.mt-copywrap .mt-sheet .btn { margin-bottom: 0; }
/* wide: a card is ONE line — the job and cost code at the left, the seven boxes in day columns, the total, the buttons; the overtime boxes sit on a second line
   in the same columns; the day letters are said once above the first card and the totals line sits under the same columns */
@media (min-width: 1100px) {
  .screen.mt.mt-weekwide { max-width: 1320px; }
  .mt-rowc, .mt-tot, .mt-dayhead { --mtcols: minmax(0, 30%) repeat(7, minmax(0, 1fr)) 64px 52px 250px; }
  .mt-rowc { grid-template-columns: var(--mtcols); column-gap: 6px; row-gap: 4px; align-items: center; padding: 10px; }
  .mt-rh, .mt-days { display: contents; }
  .mt-rowc .mt-rt { grid-column: 1; grid-row: 1; padding-right: 8px; }
  .mt-rowc .mt-rsum { grid-column: 9; grid-row: 1; padding: 0; text-align: right; }
  .mt-rowc .mt-more { grid-column: 10; grid-row: 1; justify-self: end; }
  .mt-rowc .mt-acts { grid-column: 11; grid-row: 1; justify-content: flex-end; flex-wrap: nowrap; }
  .mt-rowc .mt-box > span { display: none; }
  .mt-rowc .mt-days > .mt-box:nth-child(1) { grid-column: 2; } .mt-rowc .mt-days > .mt-box:nth-child(2) { grid-column: 3; }
  .mt-rowc .mt-days > .mt-box:nth-child(3) { grid-column: 4; } .mt-rowc .mt-days > .mt-box:nth-child(4) { grid-column: 5; }
  .mt-rowc .mt-days > .mt-box:nth-child(5) { grid-column: 6; } .mt-rowc .mt-days > .mt-box:nth-child(6) { grid-column: 7; }
  .mt-rowc .mt-days > .mt-box:nth-child(7) { grid-column: 8; }
  .mt-rowc .mt-days[data-kind="reg"] > .mt-box { grid-row: 1; }
  .mt-rowc .mt-days[data-kind="ot"] > .mt-box { grid-row: 2; }
  .mt-rowc .mt-rowlab { grid-column: 1; grid-row: 2; margin: 0; text-align: right; padding-right: 8px; }
  .mt-rowc .mt-rownote, .mt-rowc .mt-eqrow { grid-column: 1 / -1; }
  .mt-dayhead { display: grid; grid-template-columns: var(--mtcols); column-gap: 6px; margin: 0 0 4px; padding: 0 11px; font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
  .mt-tot { grid-template-columns: var(--mtcols); column-gap: 6px; align-items: center; padding: 10px; }
  .mt-tot .mt-days { display: contents; }
  .mt-tot .mt-days > div { grid-row: 1; }
  .mt-tot .mt-days > div:nth-child(1) { grid-column: 2; } .mt-tot .mt-days > div:nth-child(2) { grid-column: 3; }
  .mt-tot .mt-days > div:nth-child(3) { grid-column: 4; } .mt-tot .mt-days > div:nth-child(4) { grid-column: 5; }
  .mt-tot .mt-days > div:nth-child(5) { grid-column: 6; } .mt-tot .mt-days > div:nth-child(6) { grid-column: 7; }
  .mt-tot .mt-days > div:nth-child(7) { grid-column: 8; }
  .mt-tot small { display: none; }
  .mt-tot .mt-big { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 2px; }
  .mt-tot .mt-warn { grid-column: 1 / -1; }
}

/* ---- My time: the Payroll check (mytime-payroll.js) — an office screen: summary strip that filters, a dense table with a row per person.
   The page never scrolls sideways; the table sits in its own wrapper that does. Look taken from the Delivery Log's computer table (.dv-). ---- */
.screen.mt.mtp-wide { max-width: 1680px; }
@media (min-width: 821px) {
  .screen.mt.mtp-wide { padding-left: 24px; padding-right: 24px; }
  .mtp-wide .mt-wk, .mtp-wide .mt-tabs { max-width: 460px; }
}
.mtp-strip { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.mtp-stat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 130px; max-width: 220px; min-width: 0; min-height: 64px; padding: 10px 14px 11px;
  font: inherit; color: var(--ink); text-align: left; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow-card); cursor: pointer; }
.mtp-stat b { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mtp-stat span { font-size: 13px; font-weight: 600; color: var(--muted); }
.mtp-stat:hover { background: var(--gray-1); }
.mtp-stat.k-all { border-left-color: var(--gray-5); } .mtp-stat.k-ready { border-left-color: var(--green); } .mtp-stat.k-returned { border-left-color: var(--red); }
.mtp-stat.k-notsent { border-left-color: var(--gold); } .mtp-stat.k-exported { border-left-color: var(--gray-3); }
.mtp-stat.zero b, .mtp-stat.zero span { color: var(--faint); }
.mtp-stat.on { background: var(--blue-tint); border-color: var(--blue); border-left-width: 4px; }
.mtp-stat.on::after { content: "✓"; position: absolute; top: 8px; right: 12px; font-size: 15px; font-weight: 800; color: var(--blue); }
.mtp-hours { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 14px; color: var(--muted); }
.mtp-hours b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mtp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 10px; }
.mtp-last { flex: 1 1 220px; margin: 0; font-size: 14px; color: var(--muted); }
.mtp-acts { margin-left: auto; }
.btn.mtp-export, .btn.mtp-retry { width: auto; padding-left: 24px; padding-right: 24px; }
.mtp-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.mtp-table { width: 100%; min-width: 1180px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.mtp-table th { height: 36px; padding: 0 10px; text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; background: #FAFBFC; border-bottom: 1px solid var(--line); }
.mtp-table td { padding: 6px 10px; vertical-align: middle; border-bottom: 1px solid var(--line-soft, var(--line)); }
.mtp-table th.n, .mtp-table td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mtp-table td small { color: var(--muted); font-size: 11px; font-weight: 600; }
.mtp-sortable { cursor: pointer; user-select: none; }
.mtp-sortable:hover, .mtp-sortable.on { color: var(--ink); }
.mtp-arrow { display: inline-block; width: 12px; margin-left: 4px; font-size: 9px; color: var(--blue); }
.mtp-arrow:empty { display: none; }
.mtp-name { min-width: 150px; }
.mtp-name b { display: block; font-size: 14px; }
.mtp-name small { display: block; font-size: 12px; }
.mtp-st, .mtp-fl { min-width: 150px; }
.mtp-click { cursor: pointer; }
.mtp-click:hover td { background: var(--gray-1); }
.mtp-click:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.mtp-none { padding: 18px 10px; color: var(--muted); }
.mtp-table tfoot td { background: #FAFBFC; font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; }
.mtp-pill { display: inline-block; flex: none; font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 99px; border: 1px solid var(--gray-2); background: var(--gray-1); color: var(--gray-7); white-space: nowrap; margin: 1px 0; }
.mtp-pill.quiet { color: var(--muted); font-weight: 600; }
.mtp-pill.ok { background: var(--green-tint); border-color: #B7D9A5; color: var(--green-dark); }
.mtp-pill.info { background: var(--blue-tint); border-color: #BCD3EE; color: var(--blue-dark); }
.mtp-pill.gold { background: var(--gold-tint); border-color: #E8C55A; color: #8A6500; }
.mtp-pill.warn { background: var(--orange-tint); border-color: #F3C3A6; color: #B5551F; }
.mtp-pill.bad { background: var(--red-tint); border-color: #E5B5B7; color: var(--red); }
.mtp-pill.dark { background: var(--gray-7); border-color: var(--gray-7); color: var(--white); }
.mtp-info { margin: 0 2px var(--s3); font-size: 14px; color: var(--muted); }
.mtp-radio i { border-radius: 50%; }
/* where the time was booked: a caret on the row, a tinted detail row per job and phase code under it (same columns as the table) */
.mtp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.btn.mtp-expall { min-height: 40px; }
.mtp-nm { display: flex; align-items: flex-start; gap: 6px; }
.mtp-caret, .mtp-caret-sp { flex: none; width: 30px; height: 30px; margin: -2px 0 0 -6px; }
.mtp-caret { display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 15px; line-height: 1; color: var(--blue); background: none; border: 1px solid transparent; border-radius: 6px; }
.mtp-caret:hover { background: var(--blue-tint); border-color: #BCD3EE; }
.mtp-caret:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
@media (max-width: 820px) { .mtp-caret, .mtp-caret-sp { width: 48px; height: 48px; margin: -8px 0 -8px -12px; font-size: 18px; } }
.mtp-d td { background: #F4F8FD; padding-top: 5px; padding-bottom: 5px; font-size: 13px; border-bottom: 1px solid var(--line-soft, var(--line)); }
.mtp-d .mtp-dname { padding-left: 44px; border-left: 3px solid var(--blue-tint); }
.mtp-d .mtp-dname b { display: block; font-size: 13px; }
.mtp-d .mtp-dname small { display: block; font-size: 12px; font-weight: 400; }
.mtp-d .mtp-dname .mtp-dnote { margin-top: 2px; font-style: italic; color: var(--gray-7); }
.mtp-dmsg { padding-left: 44px !important; color: var(--muted); }
.mtp-dmsg.bad { color: var(--red); }

/* ---- My time on a wide screen (1100px: where the app header shows the tool's own name, styles.css .hdr-title) ----
   The name "My time" is in the header, so the in-page heading goes; the way back, the tabs and the week navigator are ONE row, and the Payroll
   check's last export, hours and buttons are ONE row. A phone and anything narrower stack exactly as before. */
@media (min-width: 1100px) {
  .screen.mt { max-width: 900px; padding-top: 12px; }
  .screen.mt.mtp-wide { max-width: 1680px; }
  .mt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
  .mt-bar .mt-headrow { margin: 0; }
  .mt-bar h1 { margin: 0; font-size: 22px; }
  .mt-bar h1.mt-h1-app { display: none; }
  .mt-bar .mt-tabs { display: inline-flex; flex: 0 0 auto; width: auto; max-width: none; margin: 0; }
  .mt-bar .mt-tabs .seg-btn { flex: 0 0 auto; padding: 0 22px; }
  .mt-bar .mt-wk { flex: 0 0 300px; width: 300px; max-width: 300px; margin: 0; grid-template-columns: 48px minmax(0, 1fr) 48px; }
  .mt-bar .mt-wk button, .mt-bar .mt-wk div { height: 48px; min-height: 48px; padding-top: 0; padding-bottom: 0; }
  .mt-bar .mt-wk div b { font-size: 15px; line-height: 1.15; }
  .mt-bar .mt-wk div span { font-size: 11px; line-height: 1.1; }
  .mt-bar .mt-status { order: 9; margin: 0; white-space: nowrap; }
  .mtp-strip { gap: 8px; margin-bottom: 8px; }
  .mtp-stat { flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: 8px; min-height: 40px; padding: 6px 16px 6px 12px; }
  .mtp-stat b { font-size: 20px; }
  .mtp-stat span { font-size: 13px; }
  .mtp-stat.on::after { top: 2px; right: 5px; font-size: 11px; }
  .mtp-bar { flex-wrap: nowrap; gap: 8px 20px; margin-bottom: 8px; }
  .mtp-last { flex: 1 1 auto; min-width: 0; }
  .mtp-hours { flex: none; white-space: nowrap; }
  .mtp-acts { flex: none; }
  .btn.mtp-export { min-height: 40px; }
}