/* The Embroidery Vault — thread inventory capture & review.
   Loaded by the app shell after vault.css:
     <link rel="stylesheet" href="/css/threads-capture.css">
   Uses vault.css's custom properties (palette, shadows, easing) so the thread
   screens stay visually identical to the rest of the app, light and dark. */

/* ─── capture: the drop zone ─────────────────────────────────────────────── */

.threads-capture{max-width:760px;margin:0 auto}

.threads-zone{position:relative;background:var(--surface);border:1.5px dashed var(--line-2);
  border-radius:18px;padding:34px 28px;text-align:center;transition:.16s var(--ease)}
.threads-zone.is-over{border-color:var(--accent);background:var(--surface-2)}

.threads-title{font-family:var(--serif);font-weight:500;font-size:24px;margin:6px 0 8px}
.threads-lead{color:var(--ink-2);font-size:14.5px;max-width:52ch;margin:0 auto 18px}
.threads-fine{color:var(--ink-3);font-size:12.5px;margin:14px 0 0}
.threads-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* Visually hidden, never removed from the tab order: the input stays real,
   focusable and operable by keyboard — the label is only its visible face. */
.threads-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.threads-input:focus-visible + label,
.threads-input:focus-visible ~ label{outline:2px solid var(--accent);outline-offset:3px}

/* ─── capture: the photo queue ───────────────────────────────────────────── */

.capture-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}

.capture-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;box-shadow:var(--shadow-s)}
.capture-item-head{display:flex;align-items:center;gap:12px}
.capture-thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.capture-name{font-weight:560;font-size:14px;overflow-wrap:anywhere}
.capture-note{color:var(--ink-2);font-size:13px;margin:8px 0 0}
.capture-actions{display:flex;gap:10px;margin-top:8px}

/* The state chip — one per honest progress state. Busy states pulse; terminal
   states hold still and hold their color. */
.capture-state{margin-left:auto;font-size:12px;font-weight:600;letter-spacing:.02em;
  padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.capture-item[data-state="preparing"] .capture-state,
.capture-item[data-state="uploading"] .capture-state,
.capture-item[data-state="analyzing"] .capture-state{color:var(--accent);animation:capture-pulse 1.2s var(--ease) infinite alternate}
.capture-item[data-state="review"] .capture-state{background:var(--accent);color:#fff}
.capture-item[data-state="confirmed"] .capture-state{background:var(--gold);color:#fff}
.capture-item[data-state="error"] .capture-state{color:var(--danger)}
.capture-item[data-state="retake"] .capture-state{color:var(--gold)}

@keyframes capture-pulse{from{opacity:1}to{opacity:.55}}
@media (prefers-reduced-motion:reduce){.capture-state{animation:none !important}}

/* Failure is a sentence, not a shrug. */
.capture-error{color:var(--danger);font-size:13.5px;margin:10px 0 0}

/* The retake suggestion is the whole answer — it gets the loudest block. */
.capture-retake{margin:10px 0 0;padding:12px 14px;border-left:3px solid var(--gold);
  background:var(--surface-2);border-radius:0 10px 10px 0;font-size:14px}

/* ─── review: the photo with bounding-box overlays ───────────────────────── */

.threads-review{max-width:760px;margin:0 auto}

.review-stage{position:relative;border-radius:14px;overflow:hidden;background:var(--surface-2)}
.review-photo{display:block;width:100%;max-width:100%;height:auto}

/* Boxes are positioned from the normalized bboxes: left/top/width/height in
   percentages of the stage, so they track the img at any rendered size. */
.review-box{position:absolute;border:2px solid var(--accent);border-radius:6px;cursor:pointer;
  background:transparent;transition:box-shadow .16s var(--ease)}
.review-box.confidence-medium,
.review-box.confidence-low{border-style:dashed;border-color:var(--gold)}
.review-box.is-active{box-shadow:0 0 0 3px var(--accent),var(--shadow-s);z-index:1}
.review-box:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.review-lead{color:var(--ink-2);font-size:14px;margin:14px 0 10px}

/* ─── review: the checklist ──────────────────────────────────────────────── */

.review-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}

.review-row{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.review-row.is-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}

/* Confidence classes: a high read looks settled; anything less is visibly a
   question. A guess is never presented as a fact. */
.review-row.confidence-medium,
.review-row.confidence-low{background:var(--surface-2);border-style:dashed}
.review-fix{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:2px 8px}
.review-row-added{border-left:3px solid var(--accent)}

.review-row-main{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14.5px}
.review-include{width:17px;height:17px;accent-color:var(--accent);flex:none}
.review-title{font-weight:560}
.review-swatch{width:18px;height:18px;border-radius:50%;border:1px solid var(--line-2);flex:none}

.review-edit{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.review-field{font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line-2);border-radius:9px;padding:7px 10px;min-width:0;flex:1 1 110px}
.review-field:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.review-field-count{flex:0 1 76px}

.review-add{margin:12px 0}

/* ─── review: location + recount diff ────────────────────────────────────── */

.review-location-block{margin:8px 0 12px;display:flex;flex-direction:column;gap:6px}
.review-label{font-size:13px;color:var(--ink-2);font-weight:560}
.review-location{max-width:280px}

.review-diff{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface)}
.review-diff-title{font-family:var(--serif);font-size:17px;font-weight:500;margin:0 0 8px}
.review-diff-status{font-size:13px;color:var(--ink-2);margin:8px 0 0}
.review-diff-status.is-error{color:var(--danger)}
.review-diff-empty{color:var(--ink-2);font-size:13.5px;margin:0}

.review-diff-section{margin:8px 0;padding:0 0 0 18px;font-size:13.5px}
ul.review-diff-added li{color:var(--accent)}
ul.review-diff-changed li{color:var(--gold)}

/* Removals are the dangerous edge: each one is its own explicit decision. */
.review-diff-removed{list-style:none;padding:10px 12px;border-left:3px solid var(--danger);
  background:var(--surface-2);border-radius:0 10px 10px 0}
.review-diff-removed ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.review-diff-warning{color:var(--ink-2);font-size:13px;margin:0}
.review-removal-label{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--danger)}
.review-accept-removal{width:16px;height:16px;accent-color:var(--danger);flex:none}

/* ─── review: confirm ─────────────────────────────────────────────────────── */

.review-confirm-block{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.review-status{font-size:13.5px;color:var(--ink-2);margin:0}
.review-status.is-error{color:var(--danger)}
.review-status.is-confirmed{color:var(--accent);font-weight:600}
.threads-review.is-confirmed .review-list{opacity:.75}

/* ── Manufacturer-chart chips on review rows ─────────────────────────────── */
.review-chart{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:0 14px 10px 46px}
.review-chart-note{font-size:12.5px;color:var(--ink-2)}
.review-chart-chip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:560;
  color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  padding:4px 12px 4px 5px;cursor:pointer;transition:.16s var(--ease)}
.review-chart-chip:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.review-chart-chip-match{border-color:color-mix(in srgb,var(--gold) 45%,transparent);
  background:color-mix(in srgb,var(--gold) 9%,var(--surface))}
.review-chip-swatch{width:18px;height:18px;border-radius:50%;border:1px solid var(--line);flex:none}

/* Name-only brands (DIME, Robison-Anton) publish no RGB: a neutral hatched
   mark instead of an invented color. */
.review-chip-swatch-none{background:
  repeating-linear-gradient(45deg,var(--line) 0 3px,var(--surface) 3px 6px)}