/* The Embroidery Vault — thread inventory (docs/PRD-THREAD-INVENTORY.md §5.4).
   Swatch-forward cards in a drawer-like grid. Leans on the palette custom
   properties from vault.css (--bg, --surface, --ink, --accent, …), with
   fallbacks so the view degrades gracefully if loaded alone. */

.threads-inventory{
  max-width:1120px;margin:0 auto;padding:8px 24px 48px;
  color:var(--ink,#2A2320);
}

/* ── States: loading / error / empty. Each is unmistakably itself. ────────── */

.threads-loading{
  margin:48px auto;text-align:center;font-size:15px;color:var(--ink-2,#6E625A);
}
.threads-loading::before{
  content:"";display:block;width:26px;height:26px;margin:0 auto 12px;
  border-radius:50%;border:3px solid var(--line-2,#DED2C0);
  border-top-color:var(--accent,#864C63);
  animation:threads-spin .8s linear infinite;
}
@keyframes threads-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .threads-loading::before{animation:none}
}

.threads-error{
  max-width:460px;margin:40px auto;padding:26px 28px;text-align:center;
  background:var(--surface,#fff);border:1px solid var(--danger,#b4232a);
  border-radius:18px;box-shadow:var(--shadow-s,0 1px 2px rgba(0,0,0,.06));
}
.threads-error__title{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--danger,#b4232a)}
.threads-error__message{margin:0 0 6px;font-size:14.5px}
.threads-error__reassure{margin:0 0 16px;font-size:13px;color:var(--ink-2,#6E625A)}
.threads-error__retry{
  font:inherit;font-weight:600;padding:10px 20px;border:0;border-radius:11px;
  background:var(--accent,#864C63);color:#fff;cursor:pointer;
}
.threads-error__retry:hover{filter:brightness(1.06)}

.threads-empty{
  max-width:460px;margin:48px auto;text-align:center;padding:34px 30px;
  background:var(--surface,#fff);border:1px dashed var(--line-2,#DED2C0);border-radius:20px;
}
.threads-empty__title{
  margin:0 0 8px;font-family:var(--serif,Georgia,serif);font-weight:500;font-size:24px;
}
.threads-empty__body{margin:0 0 20px;font-size:14.5px;color:var(--ink-2,#6E625A)}
.threads-empty__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.threads-empty__capture{
  font:inherit;font-weight:600;padding:12px 22px;border:0;border-radius:12px;
  background:var(--accent,#864C63);color:#fff;cursor:pointer;box-shadow:var(--shadow-s,none);
}
.threads-empty__capture:hover{filter:brightness(1.06)}
.threads-empty__add{
  font:inherit;font-weight:600;padding:12px 22px;border-radius:12px;cursor:pointer;
  background:none;color:var(--accent,#864C63);
  border:1px solid color-mix(in srgb,var(--accent,#864C63) 35%,transparent);
}

/* ── Status line (CRUD + export feedback, aria-live) ──────────────────────── */

.threads-status{
  margin:10px 0;padding:9px 14px;border-radius:11px;font-size:13.5px;
  background:var(--surface-2,#F3ECE1);color:var(--ink-2,#6E625A);
}
.threads-status--error{
  background:color-mix(in srgb,var(--danger,#b4232a) 10%,transparent);
  color:var(--danger,#b4232a);font-weight:600;
}

/* ── Toolbar: search, sort, filters, actions ──────────────────────────────── */

.threads-toolbar{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;
  padding:14px 16px;margin:0 0 16px;
  background:var(--surface,#fff);border:1px solid var(--line,#EBE2D4);
  border-radius:16px;box-shadow:var(--shadow-s,none);
}
.threads-toolbar__field{display:flex;flex-direction:column;gap:4px;min-width:0}
.threads-toolbar__field--search{flex:1 1 220px}
.threads-toolbar__label{
  font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3,#A99C8F);
}
.threads-toolbar__search,.threads-toolbar__select{
  font:inherit;font-size:14px;color:var(--ink,#2A2320);
  padding:9px 11px;border-radius:10px;border:1px solid var(--line-2,#DED2C0);
  background:var(--bg,#FAF6EF);min-width:0;
}
.threads-toolbar__search:focus,.threads-toolbar__select:focus{
  outline:none;border-color:var(--accent,#864C63);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#864C63) 16%,transparent);
}
.threads-toolbar__actions{display:flex;gap:8px;margin-left:auto}
.threads-toolbar__add,.threads-toolbar__export{
  font:inherit;font-size:13.5px;font-weight:600;padding:10px 16px;border-radius:11px;
  cursor:pointer;white-space:nowrap;
}
.threads-toolbar__add{border:0;background:var(--accent,#864C63);color:#fff}
.threads-toolbar__add:hover:not(:disabled){filter:brightness(1.06)}
.threads-toolbar__export{
  background:none;color:var(--accent,#864C63);
  border:1px solid color-mix(in srgb,var(--accent,#864C63) 35%,transparent);
}
.threads-toolbar__export:hover:not(:disabled){
  background:color-mix(in srgb,var(--accent,#864C63) 8%,transparent);
}
.threads-toolbar__add:disabled,.threads-toolbar__export:disabled{opacity:.6;cursor:progress}

/* ── The drawer: a responsive grid of swatch-forward cards ────────────────── */

.threads-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
@media (max-width:480px){
  .threads-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
}

.threads-no-match{
  margin:36px auto;max-width:420px;text-align:center;
  font-size:14.5px;color:var(--ink-2,#6E625A);
}

.thread-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface,#fff);border:1px solid var(--line,#EBE2D4);
  border-radius:16px;box-shadow:var(--shadow-s,none);
  transition:box-shadow .16s var(--ease,ease),transform .16s var(--ease,ease);
}
.thread-card:hover{box-shadow:var(--shadow-l,0 8px 24px rgba(0,0,0,.12))}
.thread-card[data-busy="true"]{opacity:.65}

/* The swatch is the card's face — big, first, unmistakable. */
.thread-card__swatch{
  position:relative;aspect-ratio:5/3;min-height:76px;
  border-bottom:1px solid var(--line,#EBE2D4);
}
.thread-card__swatch--unknown{
  background:
    repeating-linear-gradient(45deg,
      var(--surface-2,#F3ECE1) 0 10px,
      var(--line,#EBE2D4) 10px 20px);
}
.thread-card__count{
  position:absolute;right:8px;bottom:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;
  background:rgba(20,14,10,.72);color:#fff;
  backdrop-filter:blur(2px);
}

.thread-card__body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;flex:1}
.thread-card__title{margin:0;font-size:15px;font-weight:650;line-height:1.25}
.thread-card--unlabeled .thread-card__title{font-style:italic}
.thread-card__unlabeled-note{margin:0;font-size:12px;color:var(--gold,#B78A4E)}
.thread-card__name{margin:0;font-size:13.5px;color:var(--ink-2,#6E625A)}
.thread-card__weight{
  margin:2px 0 0;align-self:flex-start;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;
  background:var(--surface-2,#F3ECE1);color:var(--ink-2,#6E625A);
}
.thread-card__locations{
  margin:6px 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:4px 8px;font-size:12.5px;color:var(--ink-2,#6E625A);
}
.thread-card__location::before{content:"📍";margin-right:3px;font-size:11px}
.thread-card__updated{margin:6px 0 0;font-size:12px;color:var(--ink-3,#A99C8F)}

.thread-card__actions{
  display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:10px;
  border-top:1px solid var(--line,#EBE2D4);
}
.thread-card__edit,.thread-card__delete{
  font:inherit;font-size:12.5px;font-weight:600;background:none;border:0;
  padding:4px 2px;cursor:pointer;
}
.thread-card__edit{color:var(--accent,#864C63)}
.thread-card__edit:hover:not(:disabled){text-decoration:underline;text-underline-offset:3px}
.thread-card__danger{margin-left:auto}
.thread-card__delete{color:var(--ink-3,#A99C8F)}
.thread-card__delete:hover:not(:disabled){color:var(--danger,#b4232a)}

/* The two-step confirm: names what it destroys, Cancel is the near button. */
.thread-card__confirm{
  margin-top:8px;padding:10px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--danger,#b4232a) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--danger,#b4232a) 35%,transparent);
}
.thread-card__confirm-text{margin:0 0 8px;font-size:12.5px;line-height:1.45}
.thread-card__confirm-actions{display:flex;gap:8px;flex-wrap:wrap}
.thread-card__delete-cancel{
  font:inherit;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:9px;
  background:var(--surface,#fff);border:1px solid var(--line-2,#DED2C0);
  color:var(--ink,#2A2320);cursor:pointer;
}
.thread-card__delete-yes{
  font:inherit;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:9px;
  background:var(--danger,#b4232a);border:0;color:#fff;cursor:pointer;
}
.thread-card__delete-yes:disabled,.thread-card__delete-cancel:disabled{opacity:.6;cursor:progress}

/* ── Add / edit form ──────────────────────────────────────────────────────── */

.threads-form{
  margin:0 0 18px;padding:18px 20px;
  background:var(--surface,#fff);border:1px solid var(--line,#EBE2D4);
  border-radius:16px;box-shadow:var(--shadow-s,none);
}
.threads-form[data-busy="true"]{opacity:.7}
.threads-form__title{margin:0 0 4px;font-size:17px;font-weight:650}
.threads-form__hint{margin:0 0 10px;font-size:13px;color:var(--gold,#B78A4E)}
.threads-form__grid{
  display:grid;gap:10px 14px;margin:12px 0 4px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.threads-form__field{display:flex;flex-direction:column;gap:4px}
.threads-form__label{
  font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3,#A99C8F);
}
.threads-form__input{
  font:inherit;font-size:14px;color:var(--ink,#2A2320);
  padding:9px 11px;border-radius:10px;border:1px solid var(--line-2,#DED2C0);
  background:var(--bg,#FAF6EF);min-width:0;
}
.threads-form__input:focus{
  outline:none;border-color:var(--accent,#864C63);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#864C63) 16%,transparent);
}
.threads-form__error{
  margin:10px 0 0;font-size:13.5px;font-weight:600;color:var(--danger,#b4232a);
}
.threads-form__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.threads-form__cancel{
  font:inherit;font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:11px;
  background:none;border:1px solid var(--line-2,#DED2C0);color:var(--ink-2,#6E625A);cursor:pointer;
}
.threads-form__save{
  font:inherit;font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:11px;
  background:var(--accent,#864C63);border:0;color:#fff;cursor:pointer;
}
.threads-form__save:hover:not(:disabled){filter:brightness(1.06)}
.threads-form__save:disabled,.threads-form__cancel:disabled{opacity:.6;cursor:progress}