/* Field Audit form styles.
 *
 * ONE COPY, TWO HOSTS. This file used to hold only the photo-source-sheet rules, moved out of
 * public/field-audit.html's own <style> 2026-09-21 (projects/field-audit-photo-and-buttons/
 * PROJECT.md step 2) because that <style> never reached field-audits.html's Form tab
 * (data-hosted="1") - the standalone /field-audit route rendered the Add Photo sheet over the
 * form and the /field-audits tab host rendered it in normal document flow, below Submit (Josh,
 * 2026-09-21: "the 'take a photo' and 'select from gallery' options appear all the way below
 * the submit button"). That move's own comment claimed "every rule" from field-audit.html's
 * <style> had come here - it had not: the checklist row/button rules (.chk-row, .chk-btns,
 * .chk-writeup, .chk-sub-label) were left behind, so the SAME gap it fixed for the photo sheet
 * stayed open for every answer button in the form. On the hosted tab those rules never loaded at
 * all, so .seg rendered as a bare, unstyled <button> - small, grey, and with no colour change on
 * tap, in all four checklist sections (Fall Protection, Dropped Objects and Hoisting, Planning
 * and Paperwork, The Crew - SECTIONS in field-audit.js, every one of them, this being the whole
 * checklist) while the Yes/No .toggle-btn controls elsewhere on the form looked and behaved
 * correctly because .toggle-btn is styles.css shared core. Fixed 2026-09-23 (Josh's iPhone
 * report) by moving the rest of that <style> block here too, so this file now really does carry
 * every field-audit-form rule field-audit.html used to keep local, and field-audit.html's own
 * <style> is gone. Both pages link this one file, and the markup itself renders from
 * field-audit.js's single FORM_HTML template, so neither the look nor the fields can drift
 * between the standalone route and the tab.
 */

/* The check-row markup, QC Installation's own shape (public/qc-installation.html:49-56,
   public/assets/qc-installation.js:360-367): a label plus a row of segmented pill buttons.
   Extended here from QC's two segments (Pass / N-A - an installer's self-attestation only ever
   offers those two, Fail is reviewer-only) to THREE (Correct / Not Correct / N-A), this form's
   own ANSWER vocabulary - an auditor's observation, not a self-attestation, so "not correct" is
   a thing the person filling the form can say about someone else's work. */
.chk-row { display:flex; flex-direction:column; gap:0.5rem; padding:0.65rem 0; border-bottom:1px solid var(--border,#eef0f3); }
.chk-row:last-child { border-bottom:none; }
.chk-row .chk-label { font-size:0.88rem; line-height:1.35; }
.chk-btns { display:flex; gap:0.35rem; flex-wrap:wrap; }
/* Shape and size match the app's shared .toggle-btn pill exactly (styles.css:1463-1483 -
   padding 0.5rem 0.85rem, radius 999px, font 0.85rem/500). font-family is explicit here for the
   same reason .toggle-btn declares it: a bare <button> does not inherit the page font in every
   engine. The three pressed colours stay distinct per Josh's ruling and are expressed as tokens
   wherever the file already has one to hand: not_correct was already var(--error);
   not_applicable's #6b7280 is exactly --text-muted, so it is now that token. correct's #16a34a
   has no matching token - --success is #065f46 and --success-accent is #00c875, both different
   colours - and styles.css:344-347 already treats #16a34a as a deliberate literal for this exact
   reason (its own Approve/Verify buttons), so it stays a literal here too rather than being
   forced onto a token that would change its colour. */
.chk-btns .seg {
  border:1px solid var(--border,#cbd5e1); background:var(--card,#fff); border-radius:999px;
  font-family:var(--font-sans); padding:0.5rem 0.85rem; font-size:0.85rem; font-weight:500;
  cursor:pointer; color:var(--text-muted,#6b7280); flex:1 1 auto;
}
.chk-btns .seg[aria-pressed="true"][data-v="correct"] { background:#16a34a; border-color:#16a34a; color:#fff; }
.chk-btns .seg[aria-pressed="true"][data-v="not_correct"] { background:var(--error,#b91c1c); border-color:var(--error,#b91c1c); color:#fff; }
.chk-btns .seg[aria-pressed="true"][data-v="not_applicable"] {
  background:var(--text-muted,#6b7280); border-color:var(--text-muted,#6b7280); color:#fff;
}
.chk-writeup { background:var(--surface-soft,#f8fafc); border:1px solid var(--border,#eef0f3); border-radius:10px; padding:0.65rem 0.75rem; display:flex; flex-direction:column; gap:0.4rem; }
.chk-writeup textarea { width:100%; }
.chk-sub-label { font-size:0.8rem; font-weight:600; color:var(--text-muted,#6b7280); }

.fa-stopwork-note { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; border-radius:10px; padding:0.65rem 0.85rem; font-size:0.85rem; line-height:1.4; margin-bottom:0.75rem; }
.fa-stopwork-note ul { margin:0.35rem 0 0; padding-left:1.15rem; }

/* styles.css's own .photo-thumbs carries margin-bottom but no margin-top, and both sibling forms
   that share this exact button-then-thumbs shape add one back with their own modifier class -
   public/ppe-inspection.html's `.photo-thumbs.ppg-thumbs` and
   public/assets/truck-inspection-form.css's `.photo-thumbs.ti-thumbs`. 0.5rem, this file's own
   established value for the identical purpose. */
.photo-thumbs.fa-thumbs { margin-top:0.5rem; }

/* Date / Time of Visit (and the Close-Out section's own second datetime-local) - Josh's iPhone
   screenshot, 2026-09-23: on iOS Safari, a datetime-local input gets its own intrinsic width and
   centred text from the OS-native control chrome, which styles.css's shared `input { width:100%
   }` (styles.css:256) does not override - the compound date/time sub-fields refuse to shrink to
   the container, so the control renders wider than Site/Customer/Turbine/Crew Names below it and
   runs past the right edge of the card. -webkit-appearance:none drops that native chrome so the
   rest of the shared input rule (padding, border, font-size, monospace - all of which already
   apply to this input and were never the problem) governs the box the same way it does for every
   text input on this form. Scoped to #fa-form-root, not styles.css: the same widening has not
   been reported anywhere else this app uses datetime-local (loto.html, swa.html,
   incident-report.js, good-catch.html), so this fixes the two inputs this form renders rather
   than every datetime-local in the app sight unseen. */
#fa-form-root input[type="datetime-local"] {
  width:100%; min-width:0; max-width:100%; box-sizing:border-box;
  -webkit-appearance:none; appearance:none; text-align:left;
}

/* ---- Photo source sheet (Josh, 2026-09-09: "make sure photos can be taken directly from
   the app or selected from the gallery") ----
   A bottom sheet with two buttons and a cancel. Both hosts of this form link this file, so the
   standalone /field-audit route and the Form tab get it in one place.
   z-index 1200, ABOVE the 1000 the detail sheets on both truck pages use and above
   assets/bottom-nav.js's #pulse-tabbar at 900 - the same reasoning truck-inspection-form.css
   states for .ti-src-modal. */
.fa-src-modal { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1200; align-items:flex-end; justify-content:center; }
.fa-src-modal[hidden] { display:none; }
.fa-src-modal.is-open { display:flex; }
.fa-src-sheet { background:var(--card,#fff); width:100%; max-width:420px; border-radius:16px 16px 0 0; padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:0.6rem; }
.fa-src-sheet h3 { margin:0.1rem 0 0.3rem; font-size:1rem; }
.fa-src-cancel { border:1px solid var(--border,#e5e9ee); background:var(--card,#fff); border-radius:10px; padding:0.7rem; font:inherit; font-weight:600; color:var(--text-muted,#6b7280); cursor:pointer; }