/* ============================================================
   product-import-csv.css — Mode B (worker-6, t-006)
   Page-specific styling layered over product-shared.css.
   Visual tokens come from ../colors_and_type.css.
   Namespace: .pic-* (Product Import CSV)
   ============================================================ */

[hidden] { display: none !important; }

.pic-body {
  margin: 0;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  color: var(--ink, #1A1412);
  background: var(--canvas, #FBF7F1);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   Auth gate
   ============================================================ */
.pic-authgate {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  background: var(--canvas, #FBF7F1);
  z-index: 50;
}
.pic-authgate[hidden] { display: none !important; }
.pic-authgate-msg { color: var(--ink-muted, #7A6F68); font-size: 14px; margin: 0; }

.pic-spinner {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 3px solid var(--canvas-soft, #F3EADC);
  border-top-color: var(--terra-500, #B8451F);
  animation: pic-spin 800ms linear infinite;
}
@keyframes pic-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Top bar
   ============================================================ */
.pic-topbar {
  background: #fff;
  border-bottom: 1px solid var(--border, rgba(26, 20, 18, 0.10));
  position: sticky; top: 0; z-index: 20;
}
.pic-topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.pic-topbar h1 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: var(--ink, #1A1412);
  flex: 1;
  min-width: 0;
}
.pic-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft, #3A2F2A);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 150ms ease;
}
.pic-back:hover { background: var(--canvas-soft, #F3EADC); color: var(--terra-500, #B8451F); }
.pic-mode-hint {
  font-size: 12px;
  color: var(--ink-muted, #7A6F68);
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--canvas-soft, #F3EADC);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ============================================================
   Mobile-only notice
   ============================================================ */
.pic-mobile-notice {
  max-width: 1240px;
  margin: 16px auto 0;
  width: calc(100% - 32px);
  display: none;
  align-items: flex-start;
  gap: 16px;
}
.pic-mobile-notice p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
.pic-mobile-notice .ps-btn { flex-shrink: 0; }
@media (max-width: 900px) { .pic-mobile-notice { display: flex; } }
@media (max-width: 520px) {
  .pic-mobile-notice { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Stage stepper
   ============================================================ */
.pic-steps {
  max-width: 1240px;
  margin: 24px auto 0;
  padding: 0 24px;
}
.pic-steps ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.pic-steps li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-muted, #7A6F68);
  font-size: 14px;
  font-weight: 500;
  padding-right: 24px;
  position: relative;
}
.pic-steps li::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--border, rgba(26, 20, 18, 0.10));
  margin-left: 12px;
}
.pic-steps li:last-child { padding-right: 0; }
.pic-steps li:last-child::after { display: none; }
.pic-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--canvas-soft, #F3EADC);
  color: var(--ink-muted, #7A6F68);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.pic-steps li.is-current {
  color: var(--ink, #1A1412);
}
.pic-steps li.is-current .pic-step-dot {
  background: var(--terra-500, #B8451F);
  color: #fff;
}
.pic-steps li.is-done .pic-step-dot {
  background: var(--moss-500, #3F5E3F);
  color: #fff;
}
.pic-steps li.is-done .pic-step-dot::before {
  content: '✓';
}
.pic-steps li.is-done .pic-step-dot > * { display: none; }

@media (max-width: 640px) {
  .pic-step-label { display: none; }
  .pic-steps li { padding-right: 12px; }
  .pic-steps li::after { width: 12px; margin-left: 6px; }
}

/* ============================================================
   Main + stages
   ============================================================ */
.pic-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px;
}
.pic-stage {
  background: #fff;
  border: 1px solid var(--border, rgba(26, 20, 18, 0.10));
  border-radius: var(--radius-card, 20px);
  padding: 28px;
  box-shadow: var(--shadow-warm-sm, 0 2px 8px -2px rgb(26 20 18 / 0.06));
}
.pic-stage[hidden] { display: none; }
.pic-stage + .pic-stage { margin-top: 16px; }

.pic-stage-head {
  margin-bottom: 24px;
}
.pic-stage-head h2 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--ink, #1A1412);
}
.pic-stage-head p {
  margin: 0;
  color: var(--ink-soft, #3A2F2A);
  font-size: 15px;
  line-height: 1.55;
  max-width: 70ch;
}

.pic-stage-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border, rgba(26, 20, 18, 0.10));
  flex-wrap: wrap;
}
.pic-stage-foot .ps-btn-primary { margin-left: auto; }
@media (max-width: 640px) {
  .pic-stage { padding: 20px 16px; border-radius: 16px; }
  .pic-stage-head h2 { font-size: 22px; }
  .pic-stage-foot { flex-direction: column; align-items: stretch; }
  .pic-stage-foot .ps-btn-primary { margin-left: 0; }
}

/* ============================================================
   Stage 1 — upload + template panel
   ============================================================ */
.pic-upload-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .pic-upload-grid { grid-template-columns: 1fr; }
}

.pic-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 56px 24px;
  border: 2px dashed var(--border, rgba(26, 20, 18, 0.20));
  border-radius: var(--radius-md, 12px);
  background: var(--canvas-soft, #F3EADC);
  color: var(--ink-muted, #7A6F68);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  min-height: 280px;
}
.pic-dropzone:hover,
.pic-dropzone:focus-visible {
  border-color: var(--terra-500, #B8451F);
  background: var(--terra-50, #FBF3EC);
  color: var(--ink, #1A1412);
  outline: none;
}
.pic-dropzone.is-dragover {
  border-color: var(--terra-500, #B8451F);
  background: var(--terra-100, #F6E2D1);
  color: var(--ink, #1A1412);
}
.pic-dropzone-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: 999px;
  color: var(--terra-500, #B8451F);
  border: 1px solid var(--border, rgba(26, 20, 18, 0.10));
}
.pic-dropzone-text { display: flex; flex-direction: column; gap: 4px; }
.pic-dropzone-text strong { font-size: 18px; color: var(--ink, #1A1412); font-weight: 600; }
.pic-dropzone-text span { font-size: 14px; }
.pic-dropzone-text small { font-size: 12px; color: var(--ink-muted, #7A6F68); margin-top: 4px; }
.pic-dropzone-text code {
  background: rgba(0,0,0,0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
}

.pic-template-panel {
  background: var(--canvas-soft, #F3EADC);
  border: 1px solid var(--border, rgba(26, 20, 18, 0.10));
  border-radius: var(--radius-md, 12px);
  padding: 20px;
}
.pic-template-panel h3 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--ink, #1A1412);
}
.pic-template-panel > p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft, #3A2F2A);
  margin: 0 0 14px;
}

.pic-schema-help {
  margin-top: 16px;
  border-top: 1px solid var(--border, rgba(26, 20, 18, 0.10));
  padding-top: 14px;
}
.pic-schema-help summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink, #1A1412);
  padding: 4px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pic-schema-help summary::-webkit-details-marker { display: none; }
.pic-schema-help summary::before {
  content: '▸';
  display: inline-block;
  font-size: 10px;
  color: var(--ink-muted, #7A6F68);
  transition: transform 150ms ease;
}
.pic-schema-help[open] summary::before { transform: rotate(90deg); }

.pic-schema-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 10px;
}
.pic-schema-table th,
.pic-schema-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border, rgba(26, 20, 18, 0.06));
  vertical-align: top;
  color: var(--ink-soft, #3A2F2A);
}
.pic-schema-table thead th {
  font-weight: 600;
  color: var(--ink, #1A1412);
  background: rgba(255,255,255,0.5);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pic-schema-table td:first-child {
  font-weight: 600;
  color: var(--ink, #1A1412);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  white-space: nowrap;
}
.pic-schema-table code {
  background: rgba(0,0,0,0.04);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.pic-schema-note {
  font-size: 11px;
  color: var(--ink-muted, #7A6F68);
  line-height: 1.5;
  margin: 10px 0 0;
  font-style: italic;
}

/* ============================================================
   Stage 2 — preview
   ============================================================ */
.pic-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pic-preview-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.pic-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-muted, #7A6F68);
}
.pic-stat strong {
  font-size: 22px;
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 500;
  color: var(--ink, #1A1412);
  margin-right: 4px;
}
.pic-stat.is-ok strong { color: var(--moss-500, #3F5E3F); }
.pic-stat.is-err strong { color: var(--ps-danger, #B91C1C); }

.pic-preview-filters {
  display: inline-flex;
  background: var(--canvas-soft, #F3EADC);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.pic-filter {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft, #3A2F2A);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.pic-filter:hover { color: var(--terra-500, #B8451F); }
.pic-filter.is-active {
  background: #fff;
  color: var(--ink, #1A1412);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.pic-file-meta {
  font-size: 12px;
  color: var(--ink-muted, #7A6F68);
  margin-bottom: 12px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.pic-file-meta strong { color: var(--ink, #1A1412); font-family: var(--font-body, 'DM Sans', system-ui, sans-serif); }

.pic-preview-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, rgba(26, 20, 18, 0.10));
  border-radius: var(--radius-sm, 8px);
  background: #fff;
  max-height: 540px;
}
.pic-preview-table {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
  table-layout: auto;
}
.pic-preview-table th,
.pic-preview-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border, rgba(26, 20, 18, 0.06));
  border-right: 1px solid var(--border, rgba(26, 20, 18, 0.04));
  vertical-align: top;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-soft, #3A2F2A);
}
.pic-preview-table thead th {
  position: sticky;
  top: 0;
  background: var(--canvas-soft, #F3EADC);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink, #1A1412);
  z-index: 2;
}
.pic-preview-table th[data-col="_row"],
.pic-preview-table td[data-col="_row"] {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--canvas-soft, #F3EADC);
  font-weight: 600;
  color: var(--ink-muted, #7A6F68);
  width: 56px;
  text-align: right;
  border-right: 1px solid var(--border, rgba(26, 20, 18, 0.10));
}
.pic-preview-table tbody tr:nth-child(even) td { background: #FBF7F1; }
.pic-preview-table tbody tr:nth-child(even) td[data-col="_row"] { background: var(--canvas-soft, #F3EADC); }

.pic-preview-table tr.is-row-error td[data-col="_row"] {
  background: #FEE2E2;
  color: var(--ps-danger, #B91C1C);
}
.pic-preview-table tbody tr.is-row-error:nth-child(even) td[data-col="_row"] { background: #FEE2E2; }

.pic-preview-table td.is-cell-error {
  background: #FEF2F2 !important;
  color: var(--ps-danger, #B91C1C);
  font-weight: 600;
  position: relative;
}
.pic-preview-table td.is-cell-error[title]::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  background: var(--ps-danger, #B91C1C);
  border-radius: 999px;
}

.pic-preview-empty {
  padding: 36px;
  text-align: center;
  color: var(--ink-muted, #7A6F68);
  font-size: 14px;
}

/* ============================================================
   Stage 3 — image match
   ============================================================ */
.pic-dropzone-images {
  min-height: 220px;
  padding: 36px 24px;
}

.pic-match-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.pic-match-stat {
  background: var(--canvas-soft, #F3EADC);
  padding: 14px 16px;
  border-radius: var(--radius-sm, 8px);
  font-size: 12px;
  color: var(--ink-muted, #7A6F68);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pic-match-stat strong {
  font-size: 24px;
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 500;
  color: var(--ink, #1A1412);
}
.pic-match-stat.is-matched strong { color: var(--moss-500, #3F5E3F); }
.pic-match-stat.is-orphan strong { color: var(--ps-danger, #B91C1C); }
@media (max-width: 640px) {
  .pic-match-summary { grid-template-columns: 1fr; }
}

.pic-match-list {
  margin-top: 18px;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border, rgba(26, 20, 18, 0.10));
  border-radius: var(--radius-sm, 8px);
  background: #fff;
}
.pic-match-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, rgba(26, 20, 18, 0.06));
  align-items: center;
  font-size: 13px;
}
.pic-match-row:last-child { border-bottom: 0; }
.pic-match-row strong { color: var(--ink, #1A1412); font-weight: 600; }
.pic-match-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.pic-match-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--canvas-soft, #F3EADC);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--ink-soft, #3A2F2A);
}
.pic-match-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pic-match-badge.is-ok { background: rgba(63, 94, 63, 0.12); color: var(--moss-500, #3F5E3F); }
.pic-match-badge.is-none { background: rgba(122, 111, 104, 0.12); color: var(--ink-muted, #7A6F68); }
.pic-match-badge.is-orphan { background: var(--ps-danger-soft, #FEE2E2); color: var(--ps-danger, #B91C1C); }

.pic-import-opts {
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--canvas-soft, #F3EADC);
  border-radius: var(--radius-sm, 8px);
}
.pic-checkbox {
  display: flex;
  gap: 10px;
  cursor: pointer;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink-soft, #3A2F2A);
  line-height: 1.5;
}
.pic-checkbox input {
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--terra-500, #B8451F);
}
.pic-checkbox strong { color: var(--ink, #1A1412); font-weight: 600; display: block; }

/* ============================================================
   Stage 4 — progress + summary
   ============================================================ */
.pic-progress-block {
  text-align: center;
  padding: 32px 24px;
}
.pic-progress-block h2 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--ink, #1A1412);
}
.pic-progress-block p { color: var(--ink-soft, #3A2F2A); margin: 4px 0; }
.pic-progress-sub { font-size: 12px; color: var(--ink-muted, #7A6F68) !important; }

.pic-progress {
  max-width: 480px;
  margin: 20px auto;
  height: 10px;
  background: var(--canvas-soft, #F3EADC);
  border-radius: 999px;
  overflow: hidden;
}
.pic-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--terra-400, #D17A40), var(--terra-500, #B8451F));
  transition: width 200ms ease;
  border-radius: 999px;
}

.pic-summary {
  text-align: center;
  padding: 32px 16px;
  max-width: 640px;
  margin: 0 auto;
}
.pic-summary-ring {
  width: 72px; height: 72px;
  border-radius: 999px;
  background: rgba(63, 94, 63, 0.12);
  color: var(--moss-500, #3F5E3F);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.pic-summary.has-failures .pic-summary-ring {
  background: var(--ps-danger-soft, #FEE2E2);
  color: var(--ps-danger, #B91C1C);
}
.pic-summary-ring svg { width: 36px; height: 36px; }
.pic-summary h2 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 30px;
  font-weight: 500;
  margin: 0 0 8px;
}
.pic-summary > p { color: var(--ink-soft, #3A2F2A); font-size: 16px; margin: 0 0 16px; }
.pic-summary-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

.pic-failures {
  text-align: left;
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 18px;
  background: var(--ps-danger-soft, #FEE2E2);
  border-radius: var(--radius-sm, 8px);
  max-height: 240px;
  overflow-y: auto;
  font-size: 13px;
  color: var(--ps-danger, #B91C1C);
}
.pic-failures li { margin: 2px 0; line-height: 1.5; }
.pic-failures li strong { font-weight: 600; }

/* ============================================================
   Reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pic-progress-bar { transition: none; }
  .pic-spinner { animation: none; border-top-color: var(--terra-500, #B8451F); }
}