import improvements

web/static/app.css

@@ -315,6 +315,30 @@
   .cell-closed { color: #c3cad4; }
   .cell-inherited { color: #1d4ed8; }
 
+  /* ---------- Import preparation (pages/import_export/import) ---------- */
+
+  /* The one question the page must not answer for the user: whether the first
+     row is a header. It is a fieldset rather than a row of loose checkboxes so
+     the three answers read as one choice. */
+  .source-mode { margin: 0; border: 1px solid #e1e6ee; border-radius: 8px; padding: 12px 14px; background: #fbfcfe; }
+  .source-mode legend { padding: 0 6px; color: #33415c; font-size: 13px; font-weight: 600; }
+  .source-mode .check { margin: 4px 0; font-size: 13px; color: #33415c; }
+  .source-mode .hint { margin: 8px 0 0; font-size: 12px; }
+
+  /* A mapping row is read left to right as a sentence: position 3, which holds
+     "12345678", goes to company_number. The example is what people actually
+     recognise their data by, so it gets the room. */
+  .mapping-table .source-name { color: #7a8496; font-size: 12px; }
+  .mapping-table .example { max-width: 320px; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #33415c; }
+  .mapping-table select { width: 100%; min-width: 180px; }
+  .template-table .check { justify-content: center; }
+
+  /* A secondary action in a form's action row — "back a step". The row's own
+     rule paints every button as the primary one, so this has to say otherwise
+     at the same specificity. */
+  .form-actions button.secondary { margin-top: 0; border: 1px solid #c9d2de; color: #24324a; background: #f4f6fa; }
+  .form-actions button.secondary:hover { background: #e9edf4; }
+
   /* ---------- Narrow screens ---------- */
 
   @media (max-width: 850px) {