/* Task Helper — Import screen (job-intake.md §21 "Native importer" + "Screen layout", BRIEF-865).
   Namespace .thi-  Uses the app's own colour tokens (index.html :root). Desktop only: under
   768 px the screen says so and shows nothing else.
   LAYOUT (Gary 2026-10-02): the WHOLE width of the window on every step; panels STACKED, each
   full width; one page scroll (no scrolling box inside a box on the Columns step); table headers
   stay in view under the top bar (--thi-top is set by import.js to the top bar's height). */

/* The app shell styles bare elements for its phone forms (main 640 px wide, full-width blue
   buttons, 16 px padded inputs, upper-case h2). Inside this view they are set back here. */
main.thi-view { max-width:none; width:100%; margin:0; padding:16px 24px 48px; }
.thi-view button { width:auto; padding:0 14px; font-size:14px; font-weight:500; border-radius:6px; }
.thi-view input, .thi-view select { width:auto; padding:0 8px; font-size:14px; border-radius:6px; background:var(--card); }
.thi-view input[type="checkbox"] { width:18px; height:18px; padding:0; }
.thi-view input[type="file"] { padding:6px 8px; height:auto; }
.thi-view label { margin:0; }
.thi-view h2, .thi-view h3, .thi-view h4 { text-transform:none; letter-spacing:0; }

.thi-phone { display:none; padding:40px 16px; text-align:center; color:var(--muted); font-size:16px; }
@media (max-width:767px) { .thi-phone { display:block; } .thi-desk { display:none; } }

.thi-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.thi-view .thi-title { margin:0; font-size:20px; color:var(--ink); }
.thi-proj { color:var(--muted); font-weight:400; font-size:15px; margin-left:8px; }
.thi-steps { display:flex; gap:6px; list-style:none; margin:0 0 0 auto; padding:0; }
.thi-view .thi-step { min-height:36px; border:1px solid var(--line); border-radius:18px; background:var(--card); color:var(--ink); cursor:pointer; }
.thi-view .thi-step:hover:not(:disabled) { background:var(--hover); }
.thi-view .thi-step.thi-on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.thi-view .thi-step:disabled { color:var(--muted); cursor:default; opacity:.6; }

.thi-msg { margin:0 0 12px; padding:10px 12px; border:1px solid var(--line); border-left:4px solid var(--ok); border-radius:6px; background:var(--card); color:var(--ink); }
.thi-msg.thi-bad { border-left-color:var(--err); }
.thi-note { color:var(--muted); }

.thi-card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; min-width:0; margin-bottom:16px; }
.thi-view .thi-card h3 { margin:0 0 6px; font-size:16px; color:var(--ink); }
.thi-view .thi-card h4 { margin:16px 0 4px; font-size:14px; color:var(--ink); }
.thi-help { margin:4px 0 10px; color:var(--muted); font-size:13px; }
.thi-help.thi-bad, .thi-errors { color:var(--err); }
.thi-errors { margin:10px 0 0; padding-left:18px; font-size:13px; }
.thi-sum { margin:4px 0 10px; color:var(--ink); font-size:13px; }
@media (min-width:1280px) { .thi-sum { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } }
.thi-sum.thi-bad { color:var(--err); font-weight:600; white-space:normal; }

.thi-view .thi-f { display:flex; flex-direction:column; gap:4px; margin:8px 0; font-size:13px; color:var(--muted); max-width:520px; }
.thi-view .thi-f input, .thi-view .thi-f select, .thi-view .thi-table select { min-height:34px; border:1px solid var(--line); color:var(--ink); font-family:inherit; }
.thi-view .thi-f input[type="text"], .thi-view .thi-f select { width:100%; }
.thi-row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
.thi-row .thi-f { flex:0 1 320px; }
.thi-view .thi-chk { display:flex; align-items:center; gap:8px; margin:8px 0 14px; font-size:13px; color:var(--ink); }
.thi-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }
.thi-view .thi-btn { min-height:36px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.thi-view .thi-btn:hover:not(:disabled) { background:var(--hover); }
.thi-view .thi-btn:disabled { opacity:.5; cursor:default; }
.thi-view .thi-btn.thi-go { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
.thi-view .thi-btn.thi-danger { color:var(--err); border-color:var(--err); margin-left:auto; }
.thi-view .thi-btn.thi-small { min-height:30px; padding:0 10px; font-size:12px; }

/* Tables: full width; the header stays under the top bar while the PAGE scrolls. A table only
   gets its own sideways scroll (.thi-xscroll, added by import.js) when it is truly wider than
   the window. */
.thi-table { width:100%; border-collapse:collapse; font-size:13px; color:var(--ink); }
.thi-table th, .thi-table td { padding:5px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; white-space:nowrap; max-width:340px; overflow:hidden; text-overflow:ellipsis; }
.thi-table thead th { position:sticky; top:var(--thi-top, 0px); background:var(--bg); z-index:2; color:var(--muted); font-weight:600; }
.thi-table th[scope="row"] { color:var(--muted); font-weight:400; width:1%; }
.thi-xscroll { overflow-x:auto; }
.thi-xscroll .thi-table thead th { position:static; }
.thi-hrow td { font-weight:600; background:var(--hover); }
.thi-dim { color:var(--muted); }
.thi-map td:first-child { font-weight:600; max-width:200px; }
.thi-map td:nth-child(2) { max-width:180px; }   /* long headings / examples are cut with … (full text on hover) so the table fits 1280 (BRIEF-972) */
.thi-map td { padding-top:2px; padding-bottom:2px; }
.thi-view .thi-map select { min-height:28px; }
.thi-prev th, .thi-prev td { max-width:220px; }      /* more mapped fields across the width */
.thi-map .thi-c-field { width:260px; } .thi-map .thi-c-field select { width:100%; max-width:260px; }   /* a long "used by" label must not widen the table (BRIEF-972) */
.thi-map .thi-c-keymark { width:70px; } .thi-map .thi-c-warn { width:220px; }
.thi-keymark { display:inline-block; padding:1px 8px; border-radius:10px; background:var(--accent); color:var(--accent-ink); font-size:12px; font-weight:600; }
.thi-words { max-width:760px; margin-bottom:8px; border:1px solid var(--line); }
.thi-warn { color:var(--err); }
td.thi-warn { text-decoration:underline dotted; cursor:help; }
.thi-kept { color:var(--ink); text-decoration:none; display:inline-block; }
.thi-warnlist { margin:8px 0 0; padding-left:18px; font-size:13px; color:var(--err); columns:2; }

/* ── Review ── */
.thi-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px; }
.thi-view .thi-tab { min-height:36px; padding:0 12px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.thi-view .thi-tab:hover:not(:disabled) { background:var(--hover); }
.thi-view .thi-tab.thi-on { border-color:var(--accent); box-shadow:inset 0 -3px 0 var(--accent); font-weight:600; }
.thi-view .thi-tab:disabled { color:var(--muted); cursor:default; opacity:.6; }
.thi-count { display:inline-block; min-width:22px; margin-left:4px; padding:0 6px; border-radius:10px; background:var(--bg); color:var(--ink); font-size:12px; text-align:center; }
.thi-wrapcells td { white-space:normal; max-width:none; }

/* The Review list draws only the rows in view, so it needs a box of its own to scroll in; it
   takes the height the window has left. */
.thi-whead, .thi-wrow { display:grid; grid-template-columns:40px 64px minmax(140px, 1fr) 130px minmax(0, 5fr); align-items:center; gap:0 8px; padding:0 8px; font-size:13px; }
.thi-whead { height:34px; border:1px solid var(--line); border-bottom:0; border-radius:6px 6px 0 0; background:var(--bg); color:var(--muted); font-weight:600; }
.thi-win { position:relative; height:calc(100vh - 430px); min-height:308px; overflow:auto; border:1px solid var(--line); border-radius:0 0 6px 6px; }
.thi-pad { position:relative; min-height:100%; }
.thi-wrow { position:absolute; left:0; right:0; height:44px; border-bottom:1px solid var(--line); color:var(--ink); }
.thi-wrow span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thi-wrow.thi-haswarn .thi-c-what { color:var(--err); }
.thi-c-n { color:var(--muted); }
.thi-tight { margin-top:4px; margin-bottom:8px; }

/* ── Apply, history ── */
.thi-bar { width:100%; height:14px; accent-color:var(--accent); }
.thi-jobhead { margin:6px 0; font-size:15px; font-weight:600; color:var(--ink); }

/* ── Create a field from a file column (BRIEF-875) ── */
.thi-newrow td { background:var(--hover); white-space:normal; max-width:none; overflow:visible; }
.thi-newfield { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:flex-end; padding:8px 4px; }
.thi-newfield .thi-f { flex:0 1 280px; margin:0; }
.thi-newfield .thi-f.thi-wide { flex:1 1 420px; max-width:none; }
.thi-view .thi-newfield textarea { width:100%; min-height:84px; padding:6px 8px; font:inherit; font-size:14px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink); }
.thi-nf-foot { flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.thi-nf-foot .thi-help { margin:0; }
.thi-bulk { display:block; margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--hover); }
.thi-view .thi-bulkt input[type="text"] { width:100%; min-height:28px; border:1px solid var(--line); color:var(--ink); }
.thi-bulkt td { white-space:normal; }
.thi-okmark { color:var(--ok); font-weight:600; }

/* ── I-5: heading row with the bulk button, large-file note ── */
.thi-cardhead { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.thi-view .thi-cardhead h3 { margin:0; }
.thi-allrow { max-width:320px; }
.thi-bigfile { color:var(--ink); border-left:4px solid var(--accent); padding:6px 10px; background:var(--hover); border-radius:4px; }

/* ── Cancel import, linked notice, prefix / suffix (BRIEF-883) ── */
.thi-view .thi-btn.thi-cancel { color:var(--err); border-color:var(--line); }
.thi-msg.thi-linked { border-left-color:var(--accent); }
.thi-bulktop { margin-bottom:8px; }
.thi-bulktop .thi-allrow { flex:0 1 260px; }

/* ── BRIEF-894: the action bar stays at the bottom of the window; readable sizes ── */
.thi-actions.thi-stickybar { position:sticky; bottom:0; z-index:6; margin:12px -16px -16px; padding:12px 16px;
  background:var(--card); border-top:1px solid var(--line); border-radius:0 0 8px 8px; box-shadow:0 -6px 12px -10px var(--ink); }
.thi-barline { margin:0; font-weight:600; }
.thi-view { font-size:16px; }
.thi-table { font-size:15px; }
.thi-help, .thi-sum { font-size:14px; }
.thi-whead, .thi-wrow { font-size:15px; }
.thi-wrow { height:60px; align-items:center; }
.thi-wrow .thi-c-what { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.35; }
.thi-win { height:calc(100vh - 470px); min-height:300px; }

/* ── ADD-871a: key on the table, hints ── */
.thi-keypick { display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--muted); cursor:pointer; }
.thi-view .thi-keypick input { width:16px; height:16px; }
.thi-msg.thi-hint { border-left-color:var(--accent); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Smart match (BRIEF-972) */
.thi-smart { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 12px; padding:8px 0 2px; }
.thi-smart .thi-affix { flex:0 1 180px; margin:0; }
.thi-smart #thiSmCount { align-self:center; }
.thi-view p.thi-smhelp { margin:2px 0 8px; }
.thi-automarks { margin-top:3px; white-space:nowrap; }
.thi-automark { display:inline-block; padding:1px 8px; border-radius:10px; border:1px solid var(--accent); color:var(--accent); font-size:12px; white-space:nowrap; }
.thi-exists { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:4px; }
.thi-msg.thi-exists { margin:4px 0; }
/* A row's task key opens the task (BRIEF-977) */
.thi-view .thi-tasklink { all:unset; cursor:pointer; color:var(--accent); text-decoration:underline; }
.thi-view .thi-tasklink:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* "Should this be the task's Title?" (BRIEF-978) */
.thi-hintline { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; color:var(--accent); }
/* Several files (BRIEF-979) */
.thi-drop { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; padding:10px; border:2px dashed var(--line); border-radius:8px; margin:6px 0 10px; }
.thi-drop.thi-dropon { border-color:var(--accent); background:var(--hover); }
.thi-drop .thi-f { margin:0; }
.thi-files td { vertical-align:top; }
.thi-nowrap { white-space:nowrap; }
.thi-multi .thi-whead, .thi-multi .thi-wrow { grid-template-columns:40px 170px minmax(140px, 1fr) 130px minmax(0, 5fr); }
/* Priority values in the file (§40 PR-4) */
.thi-prio tr.thi-unmatched td { background:color-mix(in srgb, var(--err) 8%, transparent); }