/* Advanced mapping and image review. Mask bounds must remain exact. */
#card-2 table.mapping th { font-size: 12px; letter-spacing: .06em; }
#card-2 table.mapping input { min-height: 44px; font-size: 13px; }
#card-2 table.mapping .del-btn { min-width: 44px; min-height: 44px; opacity: 1; color: var(--text-2); }
#card-2 .mapping-empty td { padding: 18px 0; color: var(--text-2); font: 13px/1.6 var(--sans); }
#image-review .review-head { align-items: flex-start; margin-bottom: 8px; color: var(--text); font-size: 13px; }
#image-review .review-filename { min-width: 0; flex: 1 1 220px; font-weight: 550; overflow-wrap: anywhere; }
#image-review .review-head > .hint { flex-basis: 100%; }
#image-review .review-head button { flex: none; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 8px; }
#image-review .image-review-help, #image-review .image-draw-status { margin: 8px 0 12px; font: 13px/1.6 var(--sans); color: var(--text-2); overflow-wrap: anywhere; }
#image-review .image-draw-status:empty { display: none; }
#image-review .image-draw-status { padding: 10px 12px; border-left: 3px solid var(--text-2); background: var(--input); }
#image-review .img-stage { isolation: isolate; overflow: hidden; border-radius: var(--r-ctl); }
#image-review button.region-box { min-width: 0; min-height: 0; padding: 0; margin: 0; box-sizing: border-box; appearance: none; line-height: 1; transform: none; }
#image-review .region-box { border: 2px solid var(--invert-bg); box-shadow: 0 0 0 1px var(--invert-text); background: color-mix(in srgb, var(--invert-text) 10%, transparent); }
#image-review .region-box.off { opacity: 1; border-style: dashed; border-color: var(--invert-text); box-shadow: 0 0 0 1px var(--invert-bg); background: transparent; }
#image-review .region-box .tag { max-width: 180px; overflow: hidden; text-overflow: ellipsis; background: var(--invert-bg); color: var(--invert-text); font-size: 11px; letter-spacing: 0; padding: 3px 6px; top: -24px; }
#image-review .region-box.off .tag { background: var(--surface); color: var(--text-2); border: 1px dashed var(--border-strong); }
#image-review .region-draft { pointer-events: none; }
#image-review .draw-layer { touch-action: none; z-index: 2; }
#image-review .region-name-row { display: grid; grid-template-columns: minmax(100px, 140px) minmax(0, 1fr); align-items: center; gap: 10px; }
#image-review .region-toggle { min-height: 44px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 8px; text-align: left; overflow-wrap: anywhere; font-size: 13px; }
#image-review .region-toggle[aria-pressed="true"] { background: var(--input); color: var(--text); }
#image-review .region-toggle[aria-pressed="true"]::before { content: "✓ "; }
#image-review .region-toggle[aria-pressed="false"] { color: var(--text-2); border-style: dashed; }
#image-review .region-name-row input { min-width: 0; width: 100%; min-height: 44px; padding: 10px 12px; font-size: 14px; }
#image-review .region-name-row input:disabled { opacity: .6; }
#image-review :is(button, input):focus-visible, #card-2 table.mapping :is(button, input):focus-visible { outline: 2px solid var(--pc-focus, var(--text)); outline-offset: 3px; }
#image-review button.region-box:focus-visible { outline-color: var(--invert-bg); box-shadow: 0 0 0 4px var(--invert-text); }
@media (max-width: 640px) {
  #card-2 .card-body { overflow-x: visible; }
  #card-2 table.mapping { display: block; min-width: 0; }
  #card-2 table.mapping thead { display: none; }
  #card-2 table.mapping tbody { display: grid; gap: 12px; }
  #card-2 table.mapping tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
  #card-2 table.mapping td { min-width: 0; border: 0; padding: 0; }
  #card-2 table.mapping td[data-label] { grid-column: 1 / -1; }
  #card-2 table.mapping td[data-label]::before { content: attr(data-label); display: block; font: 13px/1.5 var(--sans); color: var(--text-2); margin-bottom: 5px; }
  #card-2 table.mapping .arrow { display: none; }
  #card-2 table.mapping input { font-size: 16px; background: var(--input); border-color: var(--border-strong); }
  #card-2 table.mapping td:nth-child(4) { align-self: center; }
  #card-2 table.mapping .chip { white-space: normal; overflow-wrap: anywhere; font-size: 11px; }
  #card-2 table.mapping .mapping-empty td { grid-column: 1 / -1; padding: 0; }
  #image-review .region-name-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  #image-review .region-name-row input { font-size: 16px; }
  #image-review .region-toggle { justify-self: start; min-width: 120px; }
}