/* csv-import-wizard.css -- CSV Import Wizard (.ciw-* prefix)
   All variables from tokens.css. No redefined tokens. */

/* ── Backdrop + modal ────────────────────────────────────────────── */
.ciw-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 2rem 1rem;
  z-index: 60;
  overflow-y: auto;
}
.ciw-backdrop[hidden] { display: none !important; }

.ciw-modal {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
}

.ciw-close-btn {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 1.75rem; height: 1.75rem; border-radius: var(--rm);
  background: transparent; border: none;
  color: var(--text-secondary); line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background 0.15s, color 0.15s;
}
.ciw-close-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.ciw-close-btn i { width: 1rem; height: 1rem; }

/* ── Step bar ────────────────────────────────────────────────────── */
.ciw-steps {
  display: flex; align-items: center;
  padding: 0.85rem 1.25rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
  font-size: 0.75rem; color: var(--text-faint);
  font-weight: 600; letter-spacing: 0.04em;
  flex-wrap: wrap;
}
.ciw-step {
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: color 0.15s;
}
.ciw-step .ciw-step-num {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--bg-base); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 700;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.ciw-step.active { color: var(--text-primary); }
.ciw-step.active .ciw-step-num { background: var(--green); color: var(--bg-base); border-color: var(--green); }
.ciw-step.done { color: var(--green); }
.ciw-step.done .ciw-step-num { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.ciw-step.clickable { cursor: pointer; }
.ciw-step.clickable:hover { color: var(--text-primary); }
.ciw-step.clickable:not(.active):hover .ciw-step-num { border-color: var(--green); }
.ciw-step-sep { flex: 0 0 1rem; height: 1px; background: var(--border); }

/* ── Body ────────────────────────────────────────────────────────── */
.ciw-body {
  padding: 1.25rem 1.5rem;
  max-height: calc(100vh - 13rem);
  overflow-y: auto;
}
.ciw-body h2 { font-size: 0.95rem; color: var(--text-primary); margin: 0 0 0.3rem; font-weight: 600; }
.ciw-body .ciw-sub { color: var(--text-muted); font-size: 0.8125rem; margin-bottom: 1rem; line-height: 1.5; max-width: 48rem; }

/* ── Nav bar ────────────────────────────────────────────────────── */
/* Wizard density override: every other surface in this modal runs
   tighter than the canonical app (h2 at 0.95rem vs spec 1.125rem,
   table at 0.8125rem with 0.5rem padding, summary cards at 0.875rem
   value font, etc.). The footer row + its buttons need to match that
   visual rhythm rather than the standard 2.25rem app button height
   from STYLE-GUIDE §7, which feels oversized in this context. Token
   values, weights, and border-radius all stay on spec. */
.ciw-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.55rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
.ciw-btn {
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-primary);
  padding: 0.3rem 0.75rem; min-height: 1.85rem; border-radius: var(--rm);
  font-size: 0.8125rem; font-weight: 500; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ciw-btn:hover { background: var(--bg-surface); }
.ciw-btn-primary {
  background: var(--btn-primary-bg); border-color: var(--btn-primary-border); color: var(--green);
}
.ciw-btn-primary:hover { background: var(--btn-primary-hover); color: var(--btn-primary-text-hover); }
.ciw-btn-primary:disabled { opacity: 0.4; cursor: default; }
.ciw-btn-link {
  background: none; border: none; color: var(--text-secondary);
  font-size: 0.75rem; cursor: pointer; padding: 0;
}
.ciw-btn-link:hover { color: var(--text-primary); }

/* ── Auto-skip note ─────────────────────────────────────────────── */
.ciw-auto-skip-note {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.85rem; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--rm);
  font-size: 0.75rem; color: var(--text-muted); margin-bottom: 1rem;
}
.ciw-auto-skip-note strong { color: var(--text-primary); font-weight: 600; }
.ciw-auto-skip-note .ciw-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--green); }
.ciw-auto-skip-note.medium .ciw-dot { background: var(--orange); }
.ciw-auto-skip-note.low .ciw-dot { background: var(--red); }

/* ── Upload step quick-re-import chip strip ─────────────────────── */
/* Mirrors the Trade Log toolbar's chip strip but lives inside the wizard
   for users who entered via the Import (any broker) button. Reuses the
   .ciw-chip styling defined further down. The bottom border separates
   "use a saved template" from "drop a new file" as distinct paths. */
.ciw-upload-chips {
  display: flex; align-items: center; gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-sub);
}
.ciw-upload-chips-list { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }

/* ── Upload drop zone ───────────────────────────────────────────── */
.ciw-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--r);
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.ciw-dropzone:hover,
.ciw-dropzone.drag { border-color: var(--green); background: rgba(74,222,128,0.04); }
.ciw-dropzone .ciw-drop-icon { margin-bottom: 0.75rem; color: var(--text-faint); }
.ciw-dropzone .ciw-drop-icon i { width: 2rem; height: 2rem; }
.ciw-dropzone p { margin: 0 0 0.25rem; color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; }
.ciw-dropzone small { color: var(--text-faint); font-size: 0.75rem; }
.ciw-file-info {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--rm);
  padding: 0.85rem 1rem; display: flex; align-items: center;
  justify-content: space-between; margin-top: 1rem;
}
.ciw-file-info .ciw-file-name { font-size: 0.875rem; color: var(--text-primary); font-weight: 500; }
.ciw-file-info .ciw-file-meta { font-size: 0.75rem; color: var(--text-faint); margin-top: 0.15rem; }

/* ── Banner ─────────────────────────────────────────────────────── */
.ciw-banner {
  background: var(--bg-elevated); border-left: 3px solid var(--orange); border-radius: var(--rm);
  padding: 0.7rem 1rem; display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1rem;
}
.ciw-banner.green { border-left-color: var(--green); }
.ciw-banner.red { border-left-color: var(--red); }
.ciw-banner-body { flex: 1; }
.ciw-banner-icon { flex-shrink: 0; display: flex; align-items: center; }
.ciw-banner-icon i { width: 1rem; height: 1rem; }
.ciw-banner-title { font-size: 0.8125rem; color: var(--text-primary); font-weight: 600; margin-bottom: 0.2rem; }
.ciw-banner-text { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.45; }
.ciw-banner-reason { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.4rem; }

/* ── Map step ────────────────────────────────────────────────────── */
.ciw-map-broker-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
  font-size: 0.75rem; color: var(--text-faint);
}
.ciw-map-broker-field { flex: 1; max-width: 22rem; }
.ciw-map-broker-field label { display: block; color: var(--text-muted); margin-bottom: 0.25rem; font-size: 0.75rem; }
.ciw-map-broker-field .ciw-req { color: var(--red); margin-left: 0.15rem; font-weight: 700; }
.ciw-map-broker-field input { min-height: 1.85rem; padding: 0.35rem 0.55rem; font-size: 0.8125rem;
  background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--rm);
  color: var(--text-primary); outline: none; width: 100%; }
.ciw-map-broker-field input:focus { border-color: var(--green); }
.ciw-map-broker-sig { white-space: nowrap; padding-bottom: 0.5rem; }
.ciw-map-broker-sig code { color: var(--green); font-family: ui-monospace, SF Mono, Menlo, monospace; }

.ciw-map-grid {
  display: grid; gap: 0.4rem 1rem;
  grid-template-columns: 1fr 1fr;
}
.ciw-map-row {
  display: grid; gap: 0.4rem; align-items: center;
  grid-template-columns: 5.5rem 1fr 6.5rem 2.5rem;
}
.ciw-map-row .ciw-map-label {
  font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
  display: flex; align-items: center; gap: 0.3rem;
}
.ciw-map-row .ciw-map-label.required::after { content: '*'; color: var(--red); font-size: 0.8125rem; }
.ciw-map-row .ciw-map-label.optional { color: var(--text-faint); font-weight: 500; }
.ciw-map-row .ciw-map-sample {
  background: var(--bg-base); border: 1px solid var(--border-sub); border-radius: var(--rm);
  padding: 0.3rem 0.5rem; font-size: 0.6875rem; color: var(--text-muted);
  font-family: ui-monospace, SF Mono, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-height: 1.65rem;
}
.ciw-map-row select {
  background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--rm);
  color: var(--text-primary); font-size: 0.75rem;
  padding: 0.3rem 0.45rem; min-height: 1.65rem; outline: none; width: 100%;
}
.ciw-map-row .ciw-conf {
  font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.04em;
  text-align: right; color: var(--text-faint); padding: 0 0.2rem;
}
.ciw-conf.high { color: var(--green); }
.ciw-conf.med  { color: var(--orange); }
.ciw-conf.low  { color: var(--red); }

.ciw-section-head {
  font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700; margin: 0.65rem 0 0.25rem;
  grid-column: 1 / -1; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border-sub);
}
.ciw-section-head:first-child { margin-top: 0; }

.ciw-map-collapser {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--rm);
  padding: 0.45rem 0.7rem;
  font-size: 0.75rem; color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 0.5rem;
}
.ciw-map-collapser:hover { border-color: var(--green); background: rgba(74,222,128,0.04); }
.ciw-map-collapser strong { color: var(--text-primary); font-weight: 600; }
.ciw-map-collapser-icon { color: var(--text-faint); font-size: 0.75rem; width: 0.75rem; }
.ciw-map-collapser-icon i { width: 0.75rem; height: 0.75rem; }
.ciw-map-collapser-action {
  margin-left: auto;
  font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--green); font-weight: 700;
}

/* ── Map step: side-values inline sub-section ──────────────────── */
.ciw-side-subsection { margin-top: 1.25rem; }
.ciw-side-subsection-divider {
  height: 1px;
  background: var(--border-sub);
  margin-bottom: 0.85rem;
}
.ciw-side-subsection-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.3rem;
}

/* ── Nav right group (Preview only): "Import into [picker] [Import btn]" ─── */
.ciw-nav-right {
  display: flex; align-items: center; gap: 0.65rem;
}
.ciw-nav-dataset {
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.ciw-nav-dataset:empty { display: none; }
.ciw-preview-dataset-label {
  font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap;
}
/* Picker lives in the footer; menu must open UPWARD instead of downward
   so it doesn't fly off the bottom of the modal. */
.ciw-nav-dataset .ciw-dataset-menu {
  top: auto;
  bottom: calc(100% + 0.3rem);
}

/* ── Sides step ─────────────────────────────────────────────────── */
.ciw-sval-row {
  display: grid; grid-template-columns: 12rem 5rem 1fr; gap: 0.6rem; align-items: center;
  padding: 0.55rem 0; border-bottom: 1px solid var(--border-sub);
}
.ciw-sval-row .ciw-sval-raw {
  background: var(--bg-base); border: 1px solid var(--border-sub); border-radius: var(--rm);
  padding: 0.35rem 0.55rem; font-size: 0.8125rem; color: var(--text-primary);
  font-family: ui-monospace, SF Mono, Menlo, monospace;
}
.ciw-sval-row .ciw-sval-arrow { color: var(--text-faint); text-align: center; }
.ciw-sval-row select {
  background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--rm);
  color: var(--text-primary); font-size: 0.8125rem;
  padding: 0.4rem 0.55rem; min-height: 1.85rem; outline: none;
}

/* ── Verify samples ──────────────────────────────────────────────── */
.ciw-verify-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; align-items: start; }
.ciw-vcard {
  background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r);
  padding: 0.75rem; transition: border-color 0.15s;
}
.ciw-vcard.confirmed { border-color: var(--green); background: rgba(74,222,128,0.04); }
.ciw-vcard.flagged   { border-color: var(--orange); background: var(--orange-bg); }
.ciw-vcard-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.ciw-vcard-num {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--bg-elevated); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 700; color: var(--text-secondary);
  flex-shrink: 0;
}
.ciw-vcard.confirmed .ciw-vcard-num { background: var(--green); color: var(--bg-base); border-color: var(--green); }
.ciw-vcard.flagged .ciw-vcard-num   { background: var(--orange); color: var(--bg-base); border-color: var(--orange); }
.ciw-vcard-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.ciw-vcard-status { margin-left: auto; font-size: 0.6875rem; font-weight: 600; }
.ciw-vcard.confirmed .ciw-vcard-status { color: var(--green); }
.ciw-vcard.flagged .ciw-vcard-status   { color: var(--orange); }
.ciw-vcard-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.75rem;
  background: var(--bg-elevated); border-radius: var(--rm);
  padding: 0.55rem 0.7rem;
}
.ciw-vcard-field { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ciw-vcard-field.full { grid-column: 1 / -1; }
.ciw-vcard-field .lbl { font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.ciw-vcard-field .val { font-size: 0.8125rem; color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; word-break: break-word; }
.ciw-vcard-field .val.missing { color: var(--red); font-style: italic; }
.ciw-vcard-field .val.pos { color: var(--green); font-weight: 700; }
.ciw-vcard-field .val.neg { color: var(--red); font-weight: 700; }
.ciw-vcard-field .val .ciw-time { display: block; font-size: 0.6875rem; color: var(--text-faint); font-weight: 400; margin-top: 0.05rem; }
.ciw-vcard-field.warn-row .lbl { color: var(--orange); }
.ciw-vcard-actions { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; }
.ciw-vcard-actions .ciw-btn { padding: 0.35rem 0.5rem; font-size: 0.75rem; min-height: 0; }
.ciw-btn-ok   { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.4); color: var(--green); }
.ciw-btn-ok:hover   { background: rgba(74,222,128,0.18); }
.ciw-btn-warn { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.4); color: var(--orange); }
.ciw-btn-warn:hover { background: rgba(245,158,11,0.16); }
.ciw-vcard-issues {
  margin-top: 0.6rem; padding: 0.55rem 0.7rem;
  background: var(--bg-elevated); border-radius: var(--rm);
  font-size: 0.75rem; color: var(--text-secondary);
}
.ciw-vcard-issues p { margin: 0 0 0.3rem; color: var(--text-primary); font-weight: 600; font-size: 0.75rem; }
.ciw-vcard-issues ul { margin: 0 0 0.4rem; padding-left: 1rem; line-height: 1.45; }
.ciw-vcard-issues li { margin: 0.1rem 0; }

/* ── Preview step ────────────────────────────────────────────────── */
.ciw-summary-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-bottom: 0.5rem;
}
.ciw-summary-card {
  background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--rm);
  padding: 0.35rem 0.65rem; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.ciw-summary-card:hover { border-color: var(--text-faint); }
.ciw-summary-card.active { border-color: var(--green); background: rgba(74,222,128,0.04); }
.ciw-summary-card.active.warn   { border-color: var(--orange); background: rgba(245,158,11,0.06); }
.ciw-summary-card.active.err    { border-color: var(--red); background: rgba(248,113,113,0.06); }
.ciw-summary-card.active.muted  { border-color: var(--text-muted); background: rgba(156,163,175,0.06); }
.ciw-summary-card .ciw-sc-lbl { font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; line-height: 1.2; }
.ciw-summary-card .ciw-sc-val { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
/* Row-style layout when an action button needs to sit alongside the
   value. Pushes the action to the right edge of the card. */
.ciw-summary-card .ciw-sc-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-top: 0.1rem; min-height: 1.05rem;
}
/* In-card destructive action button. Compact, uppercase, right-aligned.
   Uses the project's red treatment per STYLE-GUIDE §7 destructive actions. */
.ciw-sc-action {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.15rem 0.45rem;
  border-radius: var(--rm);
  font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.ciw-sc-action:hover { color: var(--red); border-color: var(--red); }
.ciw-sc-action.confirming {
  color: var(--red); border-color: var(--red);
  background: var(--red-bg); font-weight: 700;
}
.ciw-summary-card .ciw-sc-val.green { color: var(--green); }
.ciw-summary-card .ciw-sc-val.orange { color: var(--orange); }
.ciw-summary-card .ciw-sc-val.red { color: var(--red); }
.ciw-summary-card .ciw-sc-val.muted { color: var(--text-muted); }

.ciw-preview-scroll {
  border: 1px solid var(--border); border-radius: var(--rm);
  background: var(--bg-surface);
  overflow: auto;
  max-height: calc(100vh - 22rem);
}
/* Informational row — duplicates bucket. No action; clarifies that
   matched rows are already excluded from the import. Subtle treatment
   so it doesn't compete with the bulk-remove button on warn/error. */
.ciw-preview-info-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.5rem; margin-bottom: 0.25rem;
  padding: 0.4rem 0.7rem;
  background: var(--bg-base);
  border: 1px solid var(--border-sub);
  border-radius: var(--rm);
  font-size: 0.75rem; color: var(--text-muted);
}
.ciw-preview-info-icon { color: var(--green); width: 0.85rem; height: 0.85rem; flex-shrink: 0; }
.ciw-preview-info-row i { width: 0.85rem; height: 0.85rem; }

/* Density matches the production Recent Trades widget (Linear/Notion).
   See [trades.css#recent-trades-table] — same paddings, same font sizes,
   same header treatment so the two tables read as one family. */
.ciw-preview-table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8125rem;
}
.ciw-preview-table thead {
  background: var(--bg-surface);
  font-size: 0.6875rem; text-transform: uppercase;
  color: var(--text-faint); font-weight: 500;
  position: sticky; top: 0; z-index: 1;
}
.ciw-preview-table tbody tr:hover td { background: var(--bg-elevated); }
.ciw-preview-table thead th {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-sub);
}
.ciw-preview-table th, .ciw-preview-table td {
  padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border-sub);
  line-height: 1.4;
}
.ciw-preview-table th:first-child, .ciw-preview-table td:first-child { padding-left: 1rem; }
.ciw-preview-table th:last-child, .ciw-preview-table td:last-child { padding-right: 0.75rem; }

/* Issues column. left-aligned, wraps for multi-issue rows, bounded width.
   Shared by wizard Preview and Health Check (both use .ciw-preview-table). */
.ciw-preview-table .hc-issues-cell {
  text-align: left;
  max-width: 18rem;
  white-space: normal;
  vertical-align: middle;
}
.ciw-preview-table .hc-issues-cell .ciw-issue-chip {
  margin: 0.1rem 0.15rem 0.1rem 0;
  word-break: break-word;
}
.ciw-preview-table tr:last-child td { border-bottom: none; }
.ciw-preview-table th.num,
.ciw-preview-table td.num { font-variant-numeric: tabular-nums; }
.ciw-preview-table td.green { color: var(--green); }
.ciw-preview-table td.red { color: var(--red); }
.ciw-preview-table tr.warn { background: rgba(245,158,11,0.04); }
.ciw-preview-table tr.error { background: rgba(248,113,113,0.04); }
.ciw-preview-table th:last-child, .ciw-preview-table td:last-child { width: 1.5rem; padding-left: 0; padding-right: 0.5rem; text-align: center; }
.ciw-row-remove {
  background: transparent; border: none; cursor: pointer; color: var(--text-faint);
  width: 1.1rem; height: 1.1rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rm);
  transition: color 0.15s, background 0.15s;
}
.ciw-row-remove:hover { color: var(--red); background: var(--red-bg); }
.ciw-row-remove i { width: 0.7rem; height: 0.7rem; }
.ciw-preview-table .ciw-badge {
  display: inline-block; padding: 0.1rem 0.35rem; border-radius: 0.25rem;
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em;
}
.ciw-badge.dup  { background: rgba(245,158,11,0.15); color: var(--orange); }
.ciw-badge.new  { background: rgba(74,222,128,0.15); color: var(--green); }
.ciw-badge.err  { background: rgba(248,113,113,0.15); color: var(--red); }
.ciw-badge.warn { background: rgba(245,158,11,0.15); color: var(--orange); }
.ciw-issue-chip {
  display: inline-block; padding: 0.05rem 0.4rem; border-radius: 0.25rem;
  border: 1px solid transparent;
  font-size: 0.75rem; line-height: 1.35;
  margin: 0.08rem 0.15rem 0.08rem 0; white-space: normal;
}
.ciw-issue-chip.warn { background: rgba(245,158,11,0.1);  border-color: rgba(245,158,11,0.35); color: var(--orange); }
.ciw-issue-chip.err  { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.35); color: var(--red); }
.ciw-issue-chip.dup  { background: rgba(156,163,175,0.1); border-color: rgba(156,163,175,0.3);  color: var(--text-muted); }

.ciw-preview-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1rem; padding: 0.5rem 0.25rem;
}
.ciw-pg-info { font-size: 0.8125rem; color: var(--text-muted); }
.ciw-pg-btn {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--rm);
  color: var(--text-primary); padding: 0.4rem 0.85rem; font-size: 0.8125rem; cursor: pointer;
}
.ciw-pg-btn:disabled { opacity: 0.4; cursor: default; }
.ciw-pg-btn:not(:disabled):hover { border-color: var(--green); }

/* ── Done step ───────────────────────────────────────────────────── */
.ciw-confirm-card {
  background: var(--bg-base); border: 1px solid var(--green); border-radius: var(--r);
  padding: 1.5rem; margin-bottom: 1rem;
}
.ciw-confirm-card h3 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--green); font-weight: 600; }
.ciw-confirm-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.4rem 0; border-bottom: 1px solid var(--border-sub); font-size: 0.8125rem;
}
.ciw-confirm-row:last-child { border-bottom: none; }
.ciw-confirm-row .ciw-row-lbl { color: var(--text-muted); }
.ciw-confirm-row .ciw-row-val { color: var(--text-primary); font-weight: 600; }
.ciw-saved-map {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--rm);
  padding: 1rem 1.25rem; font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.5;
}
.ciw-saved-map .ciw-key { color: var(--green); font-family: ui-monospace, SF Mono, Menlo, monospace; font-size: 0.75rem; }

/* Dataset picker -- <details> based */
.ciw-dataset-picker { position: relative; }
.ciw-dataset-picker > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--rm);
  padding: 0.3rem 0.55rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-primary);
  transition: border-color 0.15s;
}
.ciw-dataset-picker > summary::-webkit-details-marker { display: none; }
.ciw-dataset-picker > summary:hover { border-color: var(--green); }
.ciw-dataset-picker[open] > summary { border-color: var(--green); }
.ciw-dataset-chev { width: 0.85rem; height: 0.85rem; color: var(--text-faint); transition: transform 0.15s; }
.ciw-dataset-picker[open] .ciw-dataset-chev { transform: rotate(180deg); color: var(--green); }
.ciw-dataset-menu {
  position: absolute; top: calc(100% + 0.3rem); right: 0;
  min-width: 12rem; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-md); padding: 0.375rem 0; z-index: 70;
}
.ciw-dataset-opt {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  background: transparent; border: none; padding: 0.5rem 0.875rem;
  font-size: 0.8125rem; color: var(--text-secondary); cursor: pointer; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.ciw-dataset-opt:hover { background: var(--bg-surface); color: var(--text-primary); }
.ciw-dataset-opt.active { color: var(--green); }
/* Radio-circle selection indicator. Matches .ds-item-radio in
   datasets.css so the wizard's dataset picker reads as a member of the
   same family as the toolbar dataset selector. Filled green when
   active; outlined --text-muted otherwise. */
.ciw-dataset-opt-radio {
  width: 0.75rem; height: 0.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--text-muted);
  flex-shrink: 0;
}
.ciw-dataset-opt-radio--active {
  background: var(--green);
  border-color: var(--green);
}
/* Separator between dataset list and the create-row. Mirrors the rule
   the toolbar dataset dropdown applies to its own <hr>. */
.ciw-dataset-menu .ciw-dataset-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.375rem 0;
}
/* Bump min-width so the create-row (input + Add button) fits without
   wrapping. The list-only state is unaffected — content sets the width. */
.ciw-dataset-menu { min-width: 14rem; }

/* ── Toolbar chip strip (Variant C: .tlr-btn + bookmark icon) ──────── */
#ciw-toolbar-chip-list[hidden] { display: none !important; }
#ciw-toolbar-chip-list { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
/* Target both <i> (pre-Lucide) and <svg> (post-Lucide replacement). The
   icon markup ships as `<i data-lucide="bookmark">`; lucide.createIcons
   then replaces the <i> with an <svg> and the original tag-name selector
   stops matching. Without the svg branch, the icon falls back to
   Lucide's default 24×24 and the chip renders taller than its sibling
   .tlr-btn buttons. */
.ciw-chip i,
.ciw-chip svg { width: 1rem; height: 1rem; color: var(--text-faint); transition: color 0.15s; flex-shrink: 0; }
.ciw-chip:hover i,
.ciw-chip:hover svg { color: var(--green); }

/* ── Template context menu ──────────────────────────────────────────── */
#ciw-template-ctx-menu {
  display: none;
  position: fixed;
  z-index: 65;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  padding: 0.375rem 0;
  width: fit-content;
  min-width: 180px;
}

/* ── Light theme overrides ───────────────────────────────────────── */
body.light .ciw-map-row select,
body.light .ciw-sval-row select,
body.light .ciw-map-broker-field input {
  background: var(--bg-base);
  border-color: var(--border);
  color: var(--text-primary);
}
body.light .ciw-dropzone { border-color: var(--border); }
body.light .ciw-preview-table thead { background: var(--bg-elevated); }