/* Truck Inspection form styles.
 *
 * ONE COPY, TWO HOSTS. This block used to live inside public/truck-inspection.html's own
 * <style>. It moved here 2026-09-08 when the form became the Form tab's content on
 * public/truck-inspections.html as well (Josh: "the form tab does not need buttons that say
 * open approval queue or new truck inspection" - the tab should BE the form, the way
 * trailer-inspection.html's Form tab already is). Both pages link this file, and the markup
 * itself is rendered from a single template in assets/truck-inspection.js, so neither the
 * look nor the fields can drift between the standalone route and the tab.
 *
 * Every rule below is byte-for-byte what truck-inspection.html carried, including its
 * comments about what was deliberately NOT restated here. Nothing was restyled in the move.
 */
  /* `.row` was here and restated the shared rule in different words: gap `0.75rem` against
     `var(--space-3)`, which holds 0.75rem. Deleted 2026-08-24; the shared rule is identical. */
  /* No bare `.photo-thumbs` rule here. The `gap: 0.5rem` this used to carry had no
     justification and now inherits the shared 0.35rem. `margin-top: 0.5rem` is real - both
     places this page draws thumbs put them directly under a label or an Add Photo button
     with no bottom margin of its own, so they would go flush - kept as the `.ti-thumbs`
     modifier below. */
  .photo-thumbs.ti-thumbs { margin-top: 0.5rem; }
  /* No bare `.req-mark` or `.field-hint` rule here any more either - both silently drifted
     from the shared rule (req-mark had dropped `font-weight: 600`; field-hint had grown to
     0.8rem and lost its margin/italic) with no comment ever explaining why, so both are
     drift and now inherit the shared declarations in styles.css. */
  /* No bare `.photo-thumb` rule here any more, deliberately. The 8px corner was the last
  thing this page still said for itself, and Josh ruled 2026-08-24 that the SHARED rule
  carries 8px -- so size, corner, border, background, position and overflow ALL come from
  public/assets/styles.css now. Re-adding a bare `.photo-thumb` here puts this page back in
  disagreement with the shared rule; scope it (`.some-parent .photo-thumb`) if a page ever
  genuinely needs to differ. */
  .photo-thumb button { position:absolute; top:2px; right:2px; width:22px; height:22px; border-radius:50%; border:none; background:rgba(0,0,0,.6); color:#fff; font-size:15px; line-height:22px; cursor:pointer; }
  /* Re-crop, on the document slots only. Bottom-left so it cannot overlap the remove
     button — the two are one mis-tap apart and one of them is destructive. */
  .photo-thumb button.ph-crop { top:auto; right:auto; bottom:2px; left:2px; width:auto; height:auto; padding:1px 5px; border-radius:6px; font-size:10px; line-height:14px; font-weight:600; }
  .add-photo-btn { display:inline-flex; align-items:center; gap:0.4rem; }

  /* ---- Walk-around diagram ---- */
  .ti-walk { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
  .ti-diagram { flex:1 1 220px; max-width:300px; margin:0 auto; }
  .ti-diagram svg { width:100%; height:auto; display:block; }
  .ti-zone { cursor:pointer; }
  .ti-zone-rect { fill:#eef2f7; stroke:#94a3b8; stroke-width:2; transition:fill .15s; }
  .ti-zone:hover .ti-zone-rect, .ti-zone:focus-visible .ti-zone-rect { fill:#dbe4ef; outline:none; }
  .ti-zone.done .ti-zone-rect { fill:#22c55e; stroke:#16a34a; }
  .ti-zone-label { font:600 12px Manrope,sans-serif; fill:#334155; pointer-events:none; }
  .ti-zone.done .ti-zone-label { fill:#fff; }
  .ti-zone-count { font:700 11px Manrope,sans-serif; fill:#fff; pointer-events:none; }
  .ti-ring-wrap { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:0.35rem; margin:0 auto; }
  .ti-ring { width:88px; height:88px; border-radius:50%; display:grid; place-items:center;
    background:conic-gradient(#22c55e calc(var(--pct,0)*1%), #e5e7eb 0); }
  .ti-ring > span { width:66px; height:66px; border-radius:50%; background:var(--card,#fff); display:grid; place-items:center; font-weight:700; font-size:1.05rem; }
  .ti-ring-label { font-size:0.8rem; color:var(--text-muted); }

  /* ---- Rating rows (stars) ---- */
  .rr { padding:0.6rem 0; border-bottom:1px solid var(--border,#eef0f3); }
  .rr:last-child { border-bottom:none; }
  .rr-top { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
  .rr-label { font-weight:600; }
  .rr-label .opt { font-weight:400; color:var(--text-muted); font-size:0.8rem; }
  .rr-stars { display:inline-flex; gap:2px; }
  .rr-star { background:none; border:none; cursor:pointer; font-size:1.5rem; line-height:1; color:#cbd5e1; padding:0 1px; }
  .rr-star.on { color:#f5a623; }
  .rr-defect { margin-top:0.5rem; padding:0.5rem; border:1px solid #fca5a5; background:#fef2f2; border-radius:8px; }
  .rr-defect label { color:#991b1b; font-size:0.82rem; font-weight:600; }
  .rr-defect textarea { margin-top:0.25rem; }
  .ph-block { padding:0.5rem 0; }
  .ph-block > label { font-weight:600; display:block; }
  #damage-card.needs { border:1px solid #fca5a5; }
  #damage-need { color:#991b1b; font-size:0.82rem; }
  .loc-row { display:flex; gap:0.5rem; align-items:flex-end; }
  .loc-row > div { flex:1; min-width:0; }

  /* ---- 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 /truck-inspection route and the Form tab get it in one place.
     🔴 z-index 1200, ABOVE the 1000 the detail sheets on both truck pages now use and above
     assets/bottom-nav.js's #pulse-tabbar at 900. That bar covering a sheet at z-index 60 is
     the whole reason the History popup could not be scrolled (see truck-inspections.html);
     this sheet is not repeating it. */
  .ti-src-modal { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1200;
                  align-items:flex-end; justify-content:center; }
  .ti-src-modal[hidden] { display:none; }
  .ti-src-modal.is-open { display:flex; }
  .ti-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; }
  .ti-src-sheet h3 { margin:0.1rem 0 0.3rem; font-size:1rem; }
  .ti-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); cursor:pointer; }