/* ================= Task import wizard — shared by two pages, two dialogs =================
   One stylesheet for both the board wizard (team_board.html #taskImportModal) and the personal
   one (tasks.html #personalTaskImportModal) — same step content, scoped under the shared
   `.tiw-modal` class rather than duplicated per page (CLAUDE.md core rule 4). The chrome itself
   is CSS/components.css + alt-shared-dialogs.css; this file is only the step content, reusing
   `.import-table`/`.import-modes`/`.cfg-status` rather than restating them. */

.tiw-modal .tiw-intro{
  font-size:13px; line-height:1.55; color:var(--text-dim); margin:0 0 12px;
}
.tiw-modal .tiw-formats{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; padding:0; list-style:none;
}
.tiw-modal .tiw-formats li{
  font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--text-dim);
  background:var(--panel-2); border:1px solid var(--border); border-radius:999px;
  padding:3px 10px;
}

/* ---------- choose a file ---------- */
.tiw-modal .tiw-file-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px;
}
.tiw-modal .tiw-file-name{
  font-size:13px; color:var(--text); word-break:break-all;
}
.tiw-modal .tiw-file-name.tiw-muted{ color:var(--text-faint); font-style:italic; }

/* ---------- the field/legend/select block, including the nested-under-a-radio input ---------- */
.tiw-modal .tiw-field{ margin-bottom:14px; }
.tiw-modal .tiw-field label,
.tiw-modal .tiw-field legend{
  display:block; font-size:12px; font-weight:600; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; padding:0;
}
.tiw-modal .tiw-field select,
.tiw-modal .tiw-field input[type="text"]{
  width:100%; box-sizing:border-box;
}
/* The "create a new topic" row nests a text input under its own radio — indented so it reads as
   belonging to that choice, not a third field. */
.tiw-modal .tiw-topic-new{ margin-left:24px; margin-top:6px; }
.tiw-modal .tiw-topic-new input[type="text"]{ width:100%; box-sizing:border-box; }
.tiw-modal .tiw-empty{
  font-size:13px; color:var(--text-dim); background:var(--panel-2);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 12px;
}

/* ---------- processing ---------- */
.tiw-modal .tiw-processing{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:34px 10px; text-align:center;
}

/* ---------- preview ---------- */
/* The select column stays narrow and centred so it never competes with the title's own
   ellipsis — `.import-table`'s th/td rule already gives every cell its border/padding; checked
   boxes use the base control's accent-color (design-system §2). */
.tiw-modal .tiw-select-th,
.tiw-modal .tiw-select-cell{
  width:28px; max-width:28px; text-align:center; white-space:nowrap;
}
.tiw-modal .tiw-select-cell input[type="checkbox"],
.tiw-modal .tiw-select-th input[type="checkbox"]{
  width:auto; margin:0; vertical-align:middle;
}
.tiw-modal .tiw-unassigned{ color:var(--text-faint); font-style:italic; }
/* A pill rather than plain text, so an unresolved name reads as visibly different from one that
   simply has no owner by design — hovering names what the file said and why. */
.tiw-modal .tiw-flag{
  display:inline-block; margin-left:5px; font-size:10px; font-weight:700; line-height:1;
  color:var(--orange-text); background:var(--orange-soft); border-radius:999px;
  padding:2px 6px; vertical-align:middle; cursor:help;
}

/* ---------- complete and undo ---------- */
.tiw-modal .tiw-result{
  font-size:14px; line-height:1.55; color:var(--text); margin:6px 0 4px;
}
.tiw-modal .tiw-danger-box{
  border:1px solid var(--red); background:var(--red-soft); border-radius:var(--radius-sm);
  padding:12px 14px; font-size:13px; line-height:1.55; color:var(--text);
}