/* ===========================================================================
   import.css — Import cards (js/import.js): the four-step dialog that brings a
   collection in from another app's CSV, a spreadsheet or a pasted list.

   A big sheet on a wide screen, the whole screen on a phone (like the card
   picker, search.css): the head with its step dots and the foot with its
   buttons stay put and the body between them scrolls. Everything is drawn
   from the design tokens, so both themes and the accent colour follow; the
   only movement is the app's own short transitions, stilled below for
   Preferences → Motion → Off and for reduced motion.
   =========================================================================== */

/* ------------------------------------------------------------ the frame */
/* Solid rather than glass: a long list of card art reads badly over the page ghosting through it. */
.modal.modal-import {
  width: min(1000px, 100%); height: min(860px, 92vh); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-2); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.imp { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* The first step is two boxes side by side: the dialog is only as tall as they are. */
.modal.modal-import:has(.imp[data-step="source"]) { height: auto; }

.imp-head {
  flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px;
  padding: 16px 56px 12px 20px;
  border-bottom: 1px solid var(--line); box-shadow: var(--glass-edge);
}
.imp-titles { min-width: 0; flex: 1 1 320px; }
.imp-head h2 { margin: 0 0 3px; font-size: var(--fs-h2); letter-spacing: -0.02em; }
.imp-lede { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }

.imp-steps { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.imp-step {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 4px;
  border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--ink-3);
}
.imp-step-n {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font-size: 10.5px; font-weight: 700; background: var(--bg-3); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.imp-step.is-done { color: var(--ink-2); }
.imp-step.is-done .imp-step-n { background: color-mix(in srgb, var(--accent) 18%, var(--bg-3)); color: var(--accent-text); box-shadow: none; }
.imp-step.is-on { color: var(--ink); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.imp-step.is-on .imp-step-n { background: var(--accent-fill); color: var(--accent-ink); box-shadow: none; }

.imp-body {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 16px 20px 22px;
}
.imp-foot {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  padding: 10px 20px 14px; border-top: 1px solid var(--line); box-shadow: var(--glass-edge);
}
.imp-foot-note { min-width: 0; flex: 1 1 auto; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.imp-foot .foot-spacer { flex: 0 1 0; }
.imp-total b { color: var(--ink); font-variant-numeric: tabular-nums; }
.imp-total-v { color: var(--gold-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.imp-total-u, .imp-total-w { color: var(--ink-3); font-weight: 500; }

/* ------------------------------------------------------------ shared bits */
.imp-ico { display: inline-grid; place-items: center; flex: none; line-height: 0; }
.imp-h3 {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.imp-sec { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.imp-sec:first-child { margin-top: 0; }
.imp-help { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.imp-fine { margin: 18px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.imp-error {
  margin: 14px 0 0; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.45; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line-soft));
}
.imp-warn { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-text); font-weight: 600; }
.imp-warn-text { color: var(--gold-text); }
.imp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* ------------------------------------------------------------ 1. file */
.imp-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.imp-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 70%, transparent); box-shadow: var(--glass-edge);
}
.imp-drop {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 168px; padding: 18px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--line); border-radius: 12px; background: var(--bg); color: var(--ink-2);
  font-size: 13px;
  transition: border-color var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out);
}
.imp-drop:hover, .imp-drop.is-over {
  border-color: var(--accent); color: var(--ink);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}
.imp-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.imp-drop-ico { color: var(--accent-text); }
.imp-drop-t { font-size: 14.5px; color: var(--ink); }
.imp-drop-t b { color: var(--accent-text); }
.imp-drop-s { max-width: 34ch; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.imp-paste { flex: 1; min-height: 168px; font-family: var(--mono); font-size: 12.5px; }
.imp-apps { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.imp-apps span { color: var(--ink-2); font-weight: 600; }

/* ------------------------------------------------------------ 2. columns */
.imp-detect { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13.5px; color: var(--ink-2); }
.imp-detect b { color: var(--ink); }
.imp-badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.imp-badge.is-plain { color: var(--ink-2); background: var(--bg-3); border-color: var(--line); }
.imp-game { max-width: 420px; }

.imp-map {
  display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 250px) minmax(0, 1fr);
  gap: 6px 12px; align-items: center;
}
.imp-map-row { display: contents; }
.imp-map-l { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.imp-map-row.is-kept .imp-map-l { color: var(--ink-2); font-weight: 550; }
.imp-map-tag {
  font-size: 10.5px; font-weight: 650; padding: 1px 6px; border-radius: var(--radius-pill);
  color: var(--ink-3); background: var(--bg-3); border: 1px solid var(--line);
}
.imp-map .input-sm { width: 100%; }
.imp-map-sample {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.imp-headerbox { margin-top: 2px; }

.imp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.imp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.imp-table th, .imp-table td {
  padding: 6px 10px; text-align: left; white-space: nowrap; max-width: 280px;
  overflow: hidden; text-overflow: ellipsis;
}
.imp-table th {
  font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  background: color-mix(in srgb, var(--bg-3) 60%, transparent); border-bottom: 1px solid var(--line);
}
.imp-table td { border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.imp-table tr:last-child td { border-bottom: none; }
.imp-table td:nth-child(3) { color: var(--ink); font-weight: 550; }
.imp-table .is-num { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ matching */
.imp-matching { max-width: 560px; margin: 40px auto 0; }
.imp-progress-label { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--ink-2); }
.imp-progress-pct { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 650; }
.progress.imp-progress { height: 8px; }

.imp-missing { max-width: 640px; }
.imp-missing p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.imp-missing .imp-h3 { color: var(--gold-text); }
.imp-missing-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.imp-missing-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
}
.imp-missing-t { font-size: 13.5px; color: var(--ink-2); }
.imp-missing-t b { color: var(--ink); }
.imp-missing-bar, .imp-missing-row > .imp-help { grid-column: 1 / -1; }
.imp-missing-row > .imp-help:empty { display: none; }

/* ------------------------------------------------------------ 3. review */
.imp-tabs {
  position: sticky; top: -16px; z-index: 3;
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: -16px -20px 0; padding: 12px 20px 10px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-soft);
}
.imp-tab {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg-3);
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: background var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out);
}
.imp-tab:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 20%, var(--line)); }
.imp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.imp-tab.is-on { color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, var(--bg-3)); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.imp-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.imp-tab.is-matched .imp-tab-dot { background: var(--st-ok); }
.imp-tab.is-choice .imp-tab-dot { background: var(--gold); }
.imp-tab.is-none .imp-tab-dot { background: var(--danger); }
.imp-tab-n { font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 650; }
.imp-tab.is-empty:not(.is-on) { opacity: .62; }
.imp-tab.is-on .imp-tab-n { color: var(--ink); }

.imp-bulk {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin-top: 12px; padding: 8px 10px 8px 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-3) 55%, transparent); border: 1px solid var(--line-soft);
}
.imp-bulk-t { font-size: 12.5px; color: var(--ink-2); }

.imp-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.imp-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 40px 0; color: var(--ink-2); font-size: 14px; }
.imp-empty .imp-ico { color: var(--st-ok); }
.imp-more { align-self: center; margin-top: 6px; }

.imp-row {
  --st: var(--ink-3);
  position: relative;
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 10px 12px 10px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); box-shadow: var(--glass-edge);
}
.imp-row::before {
  content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--st);
}
.imp-row.is-matched { --st: var(--st-ok); }
.imp-row.is-choice { --st: var(--gold); }
.imp-row.is-none { --st: var(--danger); }
.imp-row.is-skipped { opacity: .62; }

.imp-art {
  display: block; width: 54px; aspect-ratio: 0.714; border-radius: 4px; object-fit: cover;
  background: var(--bg-3); box-shadow: var(--shadow-1);
}
.imp-art.is-blank { box-shadow: inset 0 0 0 1px var(--line); background:
  repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ink) 5%, transparent) 6px 7px), var(--bg-3); }

.imp-row-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.imp-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.imp-status {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 650; color: var(--st, var(--ink-3));
}
.imp-status.is-matched { color: var(--st-ok-text); }
.imp-status.is-choice { color: var(--gold-text); }
.imp-status.is-none { color: var(--danger); }
.imp-status.is-skipped { color: var(--ink-3); }
.imp-from { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-3); }
.imp-card-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.imp-name { font-size: 14px; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.imp-name.is-missing { color: var(--ink-2); }
.imp-meta { font-size: 12.5px; color: var(--ink-2); }
.imp-price { font-size: 12.5px; font-weight: 650; color: var(--gold-text); font-variant-numeric: tabular-nums; }

.imp-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.imp-qty { display: inline-flex; align-items: center; gap: 4px; }
.imp-qty-n { width: 58px; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.imp-qty-n::-webkit-outer-spin-button, .imp-qty-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.imp-row-acts { display: inline-flex; gap: 4px; }
.imp-row-acts .btn.is-on { border-color: var(--accent); color: var(--accent-text); }

/* The cards a row could be: a strip to pick from. */
.imp-cands {
  display: flex; gap: 8px; margin-top: 6px; padding: 2px 2px 6px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.imp-cand {
  flex: none; display: flex; align-items: center; gap: 9px; width: 214px; padding: 6px 8px 6px 6px;
  scroll-snap-align: start; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--ink);
  transition: border-color var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out), box-shadow var(--t-1) var(--ease-out);
}
.imp-cand:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); }
.imp-cand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.imp-cand.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); box-shadow: var(--glow-accent); }
.imp-cand-art { flex: none; width: 40px; aspect-ratio: 0.714; border-radius: 3px; object-fit: cover; background: var(--bg-3); }
.imp-cand-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.imp-cand-name { font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-cand-meta { font-size: 11.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-cand-price { font-size: 11.5px; font-weight: 650; color: var(--gold-text); font-variant-numeric: tabular-nums; }

.imp-search { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.imp-search-bar { display: flex; gap: 6px; max-width: 460px; }
.imp-search-bar .input { flex: 1; width: auto; }
.imp-search-results { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------ 4. where */
.imp-where { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.imp-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.imp-mode { padding: 14px 10px 13px; gap: 5px; }
.imp-mode-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 12%, transparent); margin-bottom: 3px; line-height: 0; }
.imp-mode .opt-help { max-width: 24ch; }
.imp-detail, .imp-options { display: flex; flex-direction: column; gap: 14px; }
.imp-options:empty { display: none; }
.imp-detail .layout-pick { max-width: 520px; }
.imp-order .input { max-width: 280px; }
/* What Import will do, said before it is done. */
.imp-plan {
  margin: 0; padding: 10px 12px 10px 14px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line-soft));
  border-left: 3px solid var(--accent);
}
.imp-plan.is-error {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line-soft)); border-left-color: var(--danger);
}
.imp-plan:empty, .imp-plan[hidden] { display: none; }

/* ------------------------------------------------------------ elsewhere */
/* Home's first-run panel: the way in for a collection kept in another app. */
.home-first-import {
  margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.home-first-import button {
  padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; font-weight: 650; color: var(--accent-text);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.home-first-import button:hover { color: var(--accent-hover); }
.home-first-import button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Found is green — Home's "up" green on the dark ground, a deeper one that reads at 5:1 on paper. */
.modal.modal-import { --st-ok: #34d399; --st-ok-text: #34d399; }
:root[data-theme="light"] .modal.modal-import { --st-ok: #059669; --st-ok-text: #047857; }

/* ------------------------------------------------------------ phones */
@media (max-width: 720px) {
  .imp-sources { grid-template-columns: minmax(0, 1fr); }
  .imp-drop, .imp-paste { min-height: 120px; }
  .imp-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4px 10px; }
  .imp-map-sample { grid-column: 2; margin-top: -2px; }
  .imp-map-sample:empty { display: none; }
}

/* The whole screen, as the card picker takes it; clear of the notch and the home indicator. */
@media (max-width: 640px), (max-height: 520px) {
  .modal.modal-import {
    position: fixed; inset: 0;
    width: auto; height: auto; max-height: none;
    border: none; border-radius: 0;
    padding: max(env(safe-area-inset-top, 0px), var(--safe-top, 0px)) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
    background: var(--bg-2);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .modal.modal-import .modal-x { top: 8px; right: 8px; }
  .imp-head { padding: 10px 52px 10px 14px; gap: 8px; }
  .imp-head h2 { font-size: 17px; }
  .imp-lede { font-size: 12.5px; }
  .imp-steps { width: 100%; }
  .imp-step { padding-right: 7px; }
  .imp-step:not(.is-on) .imp-step-l { display: none; }
  .imp-body { padding: 14px 14px 20px; }
  .imp-foot { padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .imp-foot-note { flex-basis: 100%; font-size: 12.5px; }
  .imp-foot .foot-spacer { flex: 1; }
  .imp-tabs { top: -14px; margin: -14px -14px 0; padding: 10px 14px 8px; gap: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .imp-tabs::-webkit-scrollbar { display: none; }
  .imp-tab { flex: none; height: 32px; padding: 0 10px; font-size: 12.5px; }
}

@media (max-width: 560px) {
  .imp-row { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 10px; padding: 10px 10px 10px 12px; }
  .imp-art { width: 44px; }
  .imp-row-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .imp-row.is-skipped .imp-row-side { justify-content: flex-end; }
  .imp-cand { width: 196px; }
  .imp-modes { grid-template-columns: minmax(0, 1fr); }
  .imp-mode { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; text-align: left;
    align-items: center; justify-items: start; column-gap: 12px; row-gap: 1px; padding: 10px 12px; }
  .imp-mode-ico { grid-row: 1 / 3; margin: 0; }
  .imp-mode .opt-help { max-width: none; }
  .imp-bulk { padding: 8px 10px; }
  .imp-bulk .btn { width: 100%; }
}

@media (hover: none) {
  .imp-qty .btn-icon { width: 36px; height: 36px; }
  .imp-qty-n { height: 36px; }
  .imp-cand { min-height: 60px; }
}

/* ------------------------------------------------------------ calmer motion */
:root[data-motion="off"] .imp-drop, :root[data-motion="off"] .imp-tab, :root[data-motion="off"] .imp-cand,
:root[data-motion="off"] .imp .progress-bar { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .imp-drop, .imp-tab, .imp-cand, .imp .progress-bar { transition: none; }
}