/* ===================== DATA SOURCE CARDS ===================== */
.ds-hd{margin-bottom:var(--sp4)}
.ds-hd-t{font-size:13px;font-weight:600;margin-bottom:3px}
.ds-hd-d{font-size:13px;color:var(--txd);line-height:1.55;max-width:70ch}

/* SMALL CARDS, AND THE MAX-WIDTH IS WHAT MAKES THEM SMALL.
   This was minmax(320px,1fr) across the full page width, so with one
   connector the single card stretched the whole screen — a banner with a
   button in it rather than something to choose between. auto-fill lays out as
   many 230px tracks as fit inside the cap, and a card occupies one of them;
   the empty tracks to the right are what leave it card-sized. */
.src-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--sp3);max-width:760px}
.src-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);
  padding:var(--sp4);cursor:pointer;display:flex;flex-direction:column;gap:9px;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.src-card:hover{border-color:color-mix(in srgb,var(--card-accent,var(--accent)) 45%,transparent);
  box-shadow:var(--shadow-lg)}
.src-card .sc-top{display:flex;align-items:center;gap:10px;min-width:0}
.src-card .sc-icon{width:30px;height:30px;border-radius:9px;display:grid;
  place-items:center;font-size:14px;flex-shrink:0}
.src-card .sc-name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src-card .sc-sub{font-size:11.5px;color:var(--txd);margin-top:1px}
.src-card .sc-detail{font-size:12px;color:var(--txm);line-height:1.55;flex:1}
.src-card .sc-go{font-size:12px;font-weight:600}

/* --- the CSV sample, shown rather than described ------------------------
   The format used to live in a textarea placeholder, which vanishes the
   moment anybody types — so the one reference for what the file should look
   like was destroyed by the first keystroke. */
.csv-sample{background:var(--ibg);border:1px solid var(--bdr);border-radius:var(--r-sm);
  padding:10px 12px;font-family:'JetBrains Mono',monospace;font-size:11.5px;
  line-height:1.7;color:var(--txm);overflow-x:auto;white-space:pre}
.csv-sample b{color:var(--tx);font-weight:600}
.csv-cols{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.csv-col{font-size:11px;padding:3px 8px;border-radius:5px;background:var(--ibg);
  border:1px solid var(--bdr);color:var(--txm)}
.csv-col b{color:var(--tx);font-weight:600;font-family:'JetBrains Mono',monospace}
.csv-col.req{border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--tx)}

/* Data sources: where data comes in, and how each import's emails came out */
.ds-top{display:flex;align-items:center;min-height:20px;margin-bottom:var(--sp4)}
.ds-ver{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--txm)}
.ds-ver i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.ds-ver.off i{background:var(--txd)}
.ds-ver b{color:var(--amber);font-weight:600}
.ds-imp{margin-top:var(--sp6,28px)}
.ds-imp-t{font-size:13px;font-weight:650;color:var(--tx);margin-bottom:10px}
.ds-tw{overflow-x:auto;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md)}
.ds-tw table{width:100%}
.ds-tw th.n,.ds-tw td.n{text-align:right}
.ds-prog{display:inline-flex;align-items:center;gap:7px}
.ds-prog em{display:inline-block;width:70px;height:5px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--tx) 8%,transparent)}
.ds-prog em i{display:block;height:100%;background:var(--green)}