/* Batch 33 (C2, migration 340): inspection lists. The Inspection tab's template run (inspection-run.js, .ir) reuses the
   classic tab's pieces (.ji-*: band head, sections, rows, result buttons); Settings › Inspection lists
   (inspection-templates.js, .it) uses the shared band panel. Touch targets are 44px; everything wraps at 375. */

/* ---------- the picker and the pinned inspection ---------- */
.ir-host { display: grid; gap: 14px; min-width: 0; }
.ir-pick-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ir-select { flex: 1 1 260px; min-width: 0; max-width: 100%; min-height: 44px; }
.ir-pick-row .primary { min-height: 44px; }
.ir-msg { font-size: 13px; margin: 8px 0 0; }
.ir-msg.is-bad { color: var(--red); }
.ir-msg.is-info { color: var(--ink-2); }
.ir-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ji-sum-n.g-none strong { color: var(--ink-2); }
.ir-pin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--ink-2); }
.ir-pin p { margin: 0; flex: 1 1 320px; }
.ir-pin .ir-done { color: var(--green); font-weight: 600; flex-basis: 100%; }
.ir-pin button { min-height: 44px; }
.ir-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ir-req, .ir-need { font: 600 12px/1.3 var(--font); border-radius: 999px; padding: 2px 8px; }
.ir-req { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair-strong); }
.ir-need { color: var(--ink); background: var(--amber-soft, #fff3d6); }
.ir-extra { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 8px; min-width: 0; }
.ir-extra:empty { display: none; }
.ir-measure { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ir-measure .ji-field { flex: 0 1 180px; min-width: 0; }
.ir-measure .ji-num { width: 100%; min-width: 0; }
.ir-save { min-height: 44px; }
.ir-note { display: grid; gap: 6px; width: 100%; }
.ir-note textarea { width: 100%; box-sizing: border-box; }
.ir-note .ir-save { justify-self: start; }
.ir-finish .ji-sec-h .primary, .ir-finish .ji-sec-h .ir-blocked { min-height: 44px; }
/* batch 37: Finish while required items are open: still tappable (it lists them), reads as blocked */
.ir-blocked { font: 600 15px/1.2 var(--font); padding: 10px 16px; border-radius: var(--r-m, 10px); border: 0; background: var(--fill, #eee); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair-strong); cursor: pointer; }
.ir-open { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.ir-open a { font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.ir-req.is-optional { color: var(--ink-3, var(--ink-2)); box-shadow: inset 0 0 0 1px var(--hair); }
.ir-row:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) {
  .ir-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ir-row { grid-template-columns: 1fr; grid-template-areas: "h" "seg" "f"; }
  .ir-finish .ji-sec-h .primary, .ir-finish .ji-sec-h .ir-blocked, .ir-pick-row .primary { width: 100%; }
}

/* ---------- Settings › Inspection lists ---------- */
.it-page { display: grid; gap: 16px; min-width: 0; }
.it-panel { min-width: 0; }
.it-bar:empty { display: none; }
.it-bar { padding: 10px 18px 0; }
.it-store { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.it-store select { min-height: 44px; max-width: 100%; }
.it-panel > .sf-list { margin: 0; }
.it-row .sf-acts { flex-wrap: wrap; }
.it-row .sf-acts .btn { min-height: 44px; display: inline-flex; align-items: center; }
.sf-chip.is-off { background: var(--fill); color: var(--ink-2); }
.it-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.it-top .btn { min-height: 44px; display: inline-flex; align-items: center; }
.it-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 14px 18px; }
.it-meta label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); min-width: 0; }
.it-meta input, .it-meta select { min-height: 44px; width: 100%; box-sizing: border-box; }
.it-meta .sf-fine { margin: 0; align-self: end; }
.it-sec { margin: 0 18px 14px; padding: 12px; border-radius: var(--r-m); background: var(--surface); box-shadow: 0 0 0 .5px var(--hair-strong); min-width: 0; }
.it-sec .section-label { margin: 0 0 6px; }
.it-sec-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.it-sec-h > input { flex: 1 1 200px; min-width: 0; min-height: 44px; font-weight: 700; box-sizing: border-box; }
.it-items { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.it-item { display: grid; gap: 8px; padding: 10px; border-radius: var(--r-s); background: var(--surface-2); min-width: 0; }
.it-item-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.it-item-a > input { flex: 1 1 220px; min-width: 0; min-height: 44px; box-sizing: border-box; }
.it-item-b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.it-item-b select { min-height: 44px; max-width: 100%; }
.it-item > input { min-height: 44px; width: 100%; box-sizing: border-box; }
.it-chk { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; }
.it-chk input { width: 20px; height: 20px; }
/* batch 37: Required / Optional, a two-way choice per item */
.it-need { display: inline-flex; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-strong); padding: 2px; gap: 2px; }
.it-need-b { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 14px/1 var(--font); cursor: pointer; }
.it-need-b.is-on { background: var(--ink, #1d1d1f); color: var(--surface, #fff); }
.it-req-n { font-weight: 500; }
.it-mini { display: inline-flex; gap: 4px; }
.it-mini button { min-width: 44px; min-height: 44px; }
.it-add { margin-top: 8px; min-height: 44px; }
.it-acts { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 18px 14px; }
.it-acts button, .it-acts .btn { min-height: 44px; }
.it-cap { padding: 10px 18px 0; margin: 0; }
.it-items.is-ro .it-item { gap: 2px; }
.it-hist { margin: 0; }
@media (max-width: 860px) {
  .it-meta { padding: 12px 8px; grid-template-columns: 1fr; }
  .it-sec { margin: 0 8px 12px; padding: 10px 8px; }
  .it-acts { padding: 0 8px 12px; }
  .it-bar, .it-cap { padding-left: 8px; padding-right: 8px; }
  .it-item { padding: 8px; }
  .it-publish .primary { width: 100%; }
}
/* A control on the accent band: white with accent text (as the band's chosen chip), never white on a light fill. */
.it-panel .band-aside :is(.btn, button) { background: var(--surface); color: var(--accent); border: 0; min-height: 36px; font-weight: 600; display: inline-flex; align-items: center; }
.it-panel .band-aside :is(.btn, button):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* 44px targets win over the shell's 36-40px button default (.focus-app button). */
body.shop-on .ir :is(.ir-save, .ir-pin button, .ir-pick-row .primary, .ir-finish .primary),
body.shop-on .it-page :is(.it-mini button, .it-add, .it-acts button, .it-acts .btn, .it-top .btn),
body.shop-on .it-panel .sf-acts :is(.btn, button) { min-height: 44px; }
/* The number sits inside its field box: one border (the field's), not a second box from the shell's input rule. */
body.shop-on .ir .ji-field input.ji-num.ji-num { border: 0; box-shadow: none; background: transparent; padding: 0; }

/* C2 addition: the compact checklist, "say or type what you found", and an item's flags (incomplete, uncertain,
   conflicting, superseded). Plain words on the white page; colour only repeats what the words say. */
.ir-check { display: grid; gap: 6px; }
.ir-check-n { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ir-check-n li { display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--r-s); background: var(--surface); box-shadow: 0 0 0 .5px var(--hair); font-size: 12.5px; color: var(--ink-2); }
.ir-check-n strong { font: 700 18px/1.1 var(--font-display); color: var(--ink); }
.ir-check-n li.is-zero strong { color: var(--ink-3, var(--ink-2)); }
.ir-check-n li.is-conflicting:not(.is-zero) { box-shadow: inset 3px 0 0 var(--red), 0 0 0 .5px var(--hair); }
.ir-check-n li.is-uncertain:not(.is-zero), .ir-check-n li.is-incomplete:not(.is-zero) { box-shadow: inset 3px 0 0 #e0a100, 0 0 0 .5px var(--hair); }
.ir-check-n li.is-required:not(.is-zero) { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 .5px var(--hair); }
.ir-check-l { margin: 0; font-size: 13px; color: var(--ink-2); }
.ir-check-l b { color: var(--ink); font-weight: 600; }
.ir-say-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.ir-say-in { width: 100%; box-sizing: border-box; min-height: 52px; resize: vertical; font-size: 15px; }
.ir-say-acts { display: grid; gap: 6px; }
body.shop-on .ir .ir-say-acts button { min-height: 44px; }
.ir-mic.is-on { background: var(--accent); color: var(--accent-ink, #fff); }
.ir-reply { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--surface-2); font-size: 14px; line-height: 1.4; }
.ir-said ul { list-style: none; padding-left: 0; }
.ir-said li { padding: 6px 0; border-top: .5px solid var(--hair); }
.ir-photo-ask { margin-top: 10px; }
.ir-flag { font: 600 12px/1.3 var(--font); border-radius: 999px; padding: 2px 8px; background: var(--amber-soft, #fff3d6); color: var(--ink); }
.ir-flag.is-conflict { background: var(--red-soft, #fde8e8); }
.ir-was { font-style: italic; }
.ir-row.is-asked { box-shadow: inset 3px 0 0 var(--accent); padding-left: 8px; }
@media (max-width: 640px) {
  .ir-check-n { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ir-say-row { grid-template-columns: 1fr; }
  .ir-say-acts { grid-template-columns: 1fr 1fr; }
}

/* Brief 32 capture: one Start inspection control, a recording state that stays in view, the camera, cards and the tray. */
.ir-check-n.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ir-check-n li.is-captured:not(.is-zero) { box-shadow: inset 3px 0 0 var(--green), 0 0 0 .5px var(--hair); }
.ir-check-n li.is-review:not(.is-zero) { box-shadow: inset 3px 0 0 #e0a100, 0 0 0 .5px var(--hair); }
.ic-bar { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 0 0 .5px var(--hair); }
.ic-bar .ic-start { min-height: 56px; font-size: 18px; font-weight: 700; }
.ic-guide { margin: 0; font-size: 15px; color: var(--ink); }
.ic-acts { display: flex; flex-wrap: wrap; gap: 8px; }
body.shop-on .ir .ic-acts button { min-height: 44px; min-width: 96px; }
.ic-note { margin: 0; font-size: 13px; color: var(--ink-2); }
.ic-bar.is-on { position: sticky; top: 0; z-index: 5; box-shadow: 0 0 0 1px var(--red), 0 6px 16px rgba(0, 0, 0, .08); }
.ic-bar.is-on.is-paused { box-shadow: 0 0 0 1px var(--hair-strong), 0 6px 16px rgba(0, 0, 0, .06); }
.ic-state { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ic-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--red); animation: ic-pulse 1.2s ease-in-out infinite; }
.is-paused .ic-dot { background: var(--ink-3, #999); animation: none; }
.ic-time { font-variant-numeric: tabular-nums; color: var(--ink-2); }
@keyframes ic-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ic-dot { animation: none; } }
.ic-toast { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ic-toast-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.shop-on .ir .ic-toast button, body.shop-on .ir .ic-toast select { min-height: 40px; }
.ic-cam { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .86); display: grid; place-items: center; padding: 12px; }
.ic-cam-box { width: min(720px, 100%); display: grid; gap: 10px; }
.ic-video { width: 100%; max-height: 70vh; background: #000; border-radius: var(--r-m); object-fit: cover; }
.ic-cam-tip { margin: 0; color: #fff; font-size: 14px; }
.ic-cam-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ic-cam-acts button, .ic-cam-acts .btn { min-height: 48px; min-width: 120px; }
.ic-shutter { font-size: 17px; }
.ir-cards { display: grid; gap: 10px; }
.ir-card { display: grid; gap: 6px; padding: 12px; border-radius: var(--r-m); background: var(--surface-2); box-shadow: inset 3px 0 0 #e0a100; }
.ir-card.is-question { box-shadow: inset 3px 0 0 var(--accent); }
.ir-card-ask { margin: 0; font-weight: 600; }
.ir-card-facts { margin: 0; font-size: 14px; }
.ir-card-acts { display: flex; flex-wrap: wrap; gap: 6px; }
body.shop-on .ir .ir-card-acts button { min-height: 44px; }
.ir-card-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; align-items: end; padding-top: 6px; }
.ir-card-edit label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.ir-card-edit select, .ir-card-edit input, body.shop-on .ir .ir-card-edit button { min-height: 44px; max-width: 100%; box-sizing: border-box; }
.ir-vu { display: flex; gap: 6px; } .ir-vu input { flex: 1 1 80px; min-width: 0; }
.ir-cap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ir-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 0; border-top: .5px solid var(--hair); font-size: 14px; }
.ir-cap:first-child { border-top: 0; }
.ir-cap-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.shop-on .ir .ir-cap-acts button, .ir-cap-acts input, .ir-cap-acts select { min-height: 44px; }
.ir-cap-acts input { width: 90px; box-sizing: border-box; }
.ir-tray-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ir-tray-item { margin: 0; display: grid; gap: 6px; }
.ir-tray-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); background: var(--fill); }
.ir-tray-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ir-tray-acts select { flex: 1 1 100px; min-width: 0; min-height: 44px; }
body.shop-on .ir .ir-tray-acts button { min-height: 44px; }
@media (max-width: 640px) {
  .ic-bar.is-on { top: auto; bottom: 64px; position: sticky; }
  .ic-acts button { flex: 1 1 30%; }
  .ir-card-acts button { flex: 1 1 40%; }
}

/* batch 37: tire and brake grading (a shop setting) */
.it-grade { display: grid; gap: 6px; padding: 10px 0; border-top: .5px solid var(--hair); min-width: 0; }
.it-grade-now { margin: 0; font: 600 15px/1.35 var(--font); color: var(--ink); }
.it-grade-edit { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; min-width: 0; }
.it-grade-edit label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.it-grade-in { display: inline-flex; align-items: center; gap: 6px; }
.it-grade-in input { width: 72px; min-height: 44px; box-sizing: border-box; }
.it-grade-edit select, .it-grade-edit button { min-height: 44px; }
@media (max-width: 600px) { .it-grade-edit > button, .it-grade-edit > select { width: 100%; } }

/* U31-A (a16[6]): Describe it — a list drafted from plain words */
.it-describe { margin: 12px 0 16px; padding: 12px 14px; border-radius: var(--r-m, 12px); box-shadow: 0 0 0 .5px var(--hair); background: var(--surface); }
.it-describe-t { font-size: 15px; margin: 0 0 4px; }
.it-describe textarea { width: 100%; box-sizing: border-box; min-height: 96px; font: inherit; }
.it-told ul { margin: 6px 0; padding-left: 18px; }
.it-unclear li { color: var(--warn-ink, var(--ink-2)); }