/* Task Helper — the Tables screen (job-intake.md §31; slice TB-1, BRIEF-956). Copyright Rapid Surveys Pty Ltd.
 * App tokens only (--bg --card --ink --muted --line --accent --accent-ink --ok --err --hover). Namespaced .tb-. Phone first:
 * cards below 768 px, a grid above it (its own sideways scroll inside its box — the page never scrolls sideways). */
.tb-screen.overlay { display: block; background: var(--bg); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
html.tb-open, html.tb-open body { overflow: hidden; }
.tb-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; min-height: 56px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px; background: var(--ink); color: #fff; }
.tb-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tb-titles h2 { margin: 0; font-size: 18px; line-height: 1.25; color: #fff; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; outline: none; }
.tb-co { font-size: 12px; color: #9aa6b5; overflow-wrap: anywhere; }
.tb-back, .tb-x { width: auto; flex: none; margin: 0; min-height: 44px; min-width: 44px; padding: 0 8px; border: 0; border-radius: 8px;
  background: transparent; color: #fff; font-size: 15px; font-weight: 600; }
.tb-back { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-x { font-size: 20px; }
.tb-back:focus-visible, .tb-x:focus-visible { outline-color: #fff; }
.tb-wrap { max-width: 1200px; margin: 0 auto; padding: 12px 16px 96px; }
.tb-msg { margin: 0 0 10px; }
.tb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.tb-actions:empty { display: none; }
.tb-primary, .tb-ghost { width: auto; margin: 0; min-height: 44px; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 15px; }
.tb-primary { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); }
.tb-ghost { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.tb-danger { color: var(--err) !important; }
.tb-chip { width: auto; margin: 0; min-height: 36px; min-width: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); font-size: 13px; font-weight: 600; }
.tb-chip:disabled { opacity: .4; }
.tb-check { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; min-height: 44px; font-size: 14px; color: var(--ink); cursor: pointer; }
.tb-check input { width: 20px; height: 20px; margin: 0; }
.tb-pill { display: inline-block; padding: 0 7px; border: 1px solid var(--line); border-radius: 9px; font-size: 11px; font-weight: 600;
  color: var(--muted); background: var(--bg); vertical-align: middle; }
.tb-pill-name { color: var(--accent); border-color: var(--accent); background: var(--card); }
.tb-note { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 14px; }
.tb-count { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.tb-none { color: var(--muted); }
.tb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* cards: the table list, and rows on a phone */
.tb-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tb-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; margin: 0; padding: 12px 14px; text-align: left;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; font: inherit; min-height: 52px; }
button.tb-card:hover { background: var(--hover, var(--bg)); }
.tb-card-name { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.tb-card-sub, .tb-card-line { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.tb-card-line b { color: var(--ink); font-weight: 600; }
.tb-retired { opacity: .7; }

/* search */
.tb-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 4px; }
.tb-filter input[type="search"] { flex: 1 1 220px; min-width: 0; margin: 0; padding: 10px 12px; font-size: 16px; }
.tb-filter .tb-check { margin: 0; }

/* the grid (desktop) */
.tb-gridwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.tb-grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
.tb-grid th, .tb-grid td { padding: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tb-grid thead th { position: sticky; top: 0; padding: 10px 12px; background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; z-index: 1; }
.tb-grid tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--card); border-right: 1px solid var(--line); min-width: 180px; font-weight: 600; }
.tb-grid thead tr > :first-child { background: var(--bg); z-index: 2; }
.tb-grid tbody tr:last-child > * { border-bottom: 0; }
.tb-grid td, .tb-grid tbody th { min-width: 120px; max-width: 320px; }
.tb-grid .tb-cell > :not(button):not(.tb-cell-edit), .tb-grid .tb-cell { overflow-wrap: anywhere; }
.tb-grid .tb-cell:not(:has(button)):not(:has(.tb-cell-edit)) { padding: 10px 12px; }
.tb-cellbtn { display: block; width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border: 0; border-radius: 0; background: transparent;
  color: var(--ink); font: inherit; font-weight: inherit; text-align: left; cursor: text; overflow-wrap: anywhere; }
.tb-cellbtn:hover { background: var(--hover, var(--bg)); }
.tb-cellbtn a { color: var(--accent); }
.tb-long .tb-cellbtn, .tb-long { white-space: pre-line; }
.tb-num .tb-cellbtn { font-variant-numeric: tabular-nums; }
.tb-cell-edit { padding: 4px; }
.tb-cell-edit input, .tb-cell-edit select, .tb-cell-edit textarea { width: 100%; margin: 0; padding: 8px 10px; font-size: 15px; }
.tb-act { width: 1%; padding: 6px 8px !important; white-space: nowrap; }
.tb-act-h { width: 1%; }
.tb-more { margin-top: 12px; }

/* forms (new table, a row, Columns & settings) */
.tb-form { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); max-width: 640px; }
.tb-f { display: flex; flex-direction: column; gap: 4px; }
.tb-f label, .tb-f > span { font-size: 13px; color: var(--muted); margin: 0; }
.tb-f input, .tb-f select, .tb-f textarea { margin: 0; color: var(--ink); width: 100%; }
.tb-f select { padding: 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.tb-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-danger-row { padding-top: 8px; border-top: 1px solid var(--line); }
.tb-form .hint { margin: 0; font-size: 13px; color: var(--muted); }
.tb-fielderr { margin: 2px 0 0; font-size: 13px; }
[aria-invalid="true"] { border-color: var(--err) !important; }
.tb-h3 { margin: 18px 0 8px; font-size: 15px; }
.tb-form .tb-h3 { margin: 0; }

/* the column list (design) */
.tb-cols { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); max-width: 640px; }
.tb-colrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); min-height: 56px; }
.tb-colrow:first-child { border-top: 0; }
.tb-colmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tb-colname { font-weight: 600; overflow-wrap: anywhere; }
.tb-coltype { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.tb-colbtns { display: flex; gap: 6px; flex: none; }
.tb-colrow .tb-colform { flex: 1; margin: 4px 0; border: 0; padding: 4px 0; max-width: none; }

@media (pointer: coarse) { .tb-chip { min-height: 44px; min-width: 44px; } }
@media (max-width: 420px) { .tb-colrow { flex-wrap: wrap; } .tb-colbtns { width: 100%; justify-content: flex-end; } }

/* the LOOKUP field on a task form + its settings (public/tables/lookup-field.js; TB-2, BRIEF-959) */
.lk-pick { position: relative; display: flex; align-items: stretch; gap: 6px; }
.lk-pick input { flex: 1; min-width: 0; margin: 0; }
.lk-pick input.lk-retired { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.lk-clear { width: auto; flex: none; margin: 0; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--muted); font-size: 16px; }
.lk-show { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.lk-show:empty { display: none; }
.lk-line { overflow-wrap: anywhere; } .lk-line b { color: var(--ink); font-weight: 600; } .lk-line a { color: var(--accent); }
.lk-pill { align-self: flex-start; display: inline-block; padding: 0 7px; border: 1px solid var(--line); border-radius: 9px; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); }
.lk-warn { margin: 6px 0 0; padding: 8px 10px; border: 1px solid var(--err); border-radius: 10px; font-size: 13px; color: var(--ink); background: var(--card); overflow-wrap: anywhere; }
.lk-act { width: auto; margin: 0; min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; }
.lk-err { color: var(--err); }
.lk-cfg { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.lk-cfg select { width: 100%; padding: 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.lk-cols { margin: 6px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.lk-cols legend { padding: 0 4px; font-size: 13px; color: var(--muted); }
.lk-colopt { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; font-size: 15px; color: var(--ink); cursor: pointer; }
.lk-colopt input { width: 20px; height: 20px; margin: 0; }
@media (pointer: coarse) { .lk-act { min-height: 44px; } }
/* TB-3 (BRIEF-964): a dependent's "isn't in" flag, the address offer, the settings' extra rows, link cells */
.lk-mis, .lk-offer { margin: 6px 0 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--ink); background: var(--card); overflow-wrap: anywhere; }
.lk-mis { border-color: var(--err); }
.lk-sub { margin: 8px 0 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.lk-cfgrow { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; }
.lk-cfgrow select { width: 100%; padding: 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.lk-when { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; }
.lk-pick input:disabled { background: var(--bg); color: var(--muted); }
.tb-link { position: relative; }
.tb-link input[type="text"] { width: 100%; margin: 0; }
/* the client page door (§36): Open beside Edit in the grid; under the card on a phone */
.tb-act .tb-door { margin-right: 4px; }
.tb-door-card { display: block; width: 100%; min-height: 44px; margin: 4px 0 0; text-align: left; font-size: 14px; }