/*
 * The import canvas (docs/designs/import-canvas.md, 6): the tiles of what will be imported, the
 * mapping and values cards, the windowed grid with its red and amber cells and issues panel, the
 * task card, and the generic action contract's pieces (a withheld action's reason, the Undo toast,
 * the confirm's table). Drawn by web/import-grid.js and web/capabilities.js; every colour is a
 * `light-dark()` token of style.css, so light and dark follow the Desk's theme. A tone is never
 * colour alone: each one rides with its words and a glyph.
 */

/* Tones on chips and badges: the server's word for a state, coloured. */
.chip.tone-success, .badge.tone-success { color: var(--success-ink); background: var(--success-soft); border-color: var(--success-line); }
.chip.tone-warning, .badge.tone-warning { color: var(--warning-ink); background: var(--warning-soft); border-color: var(--warning-line); }
.chip.tone-danger, .badge.tone-danger { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger-line); }
.chip.tone-neutral, .badge.tone-neutral { color: var(--secondary); background: var(--surface-low); border-color: var(--line); }
.chip.tone-accent, .badge.tone-accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); }

/* The generic action contract (capabilities.js header). */
.capability-disabled-action { display: inline-flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.capability-disabled-action button:disabled { cursor: not-allowed; opacity: .6; }
.capability-disabled-reason { font-size: 13px; line-height: 1.4; color: var(--secondary); overflow-wrap: anywhere; }
.settings-status:has(.capability-undo) { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); color: var(--ink); }
.capability-undo { padding: 2px 6px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.capability-undo:hover { background: transparent; text-decoration-thickness: 2px; }
.confirm-dialog-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.confirm-dialog-table td { padding: 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.confirm-dialog-table td:first-child { padding-right: 16px; font-weight: 500; color: var(--ink); }
.confirm-dialog-table td + td { text-align: right; color: var(--secondary); }
.capability-upload > label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; color: var(--secondary); }
.capability-upload > label select, .capability-upload > select { width: auto; max-width: 100%; }

/* What the canvas's sections share. */
.capability-import > h4, .import-tiles > h4, .import-values > h4, .import-grid > h4 { font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); margin-bottom: 10px; }
.import-status { margin: 8px 0 0; }
.import-labelled { display: grid; gap: 4px; max-width: 440px; margin: 0; font-size: 13px; font-weight: 500; }
.import-label { color: var(--secondary); }
.import-progress { margin: 4px 0 10px; }
.import-progress .capability-progress-line { margin-top: 6px; font-size: 12px; color: var(--secondary); font-variant-numeric: tabular-nums; }
.import-required { margin-left: 2px; color: var(--danger-ink); font-weight: 700; text-decoration: none; cursor: help; }
.import-samples { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- tiles */
.import-totals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; }
.import-totals-line { margin: 0; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.import-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.import-canvas-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; }
.import-app { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; }
.import-app select { width: auto; min-width: 12rem; max-width: 100%; }
.import-app-line { margin: 0; font-size: 13px; font-weight: 500; color: var(--secondary); }
.import-filters, .import-grid-filters, .import-grid-modes { flex-wrap: wrap; height: auto; max-width: 100%; }
.import-filter, .import-mode { gap: 6px; }
.app-cards.import-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.import-empty { grid-column: 1 / -1; margin: 8px 0; font-size: 13px; }
.import-tile { gap: 0; padding: 16px; }
.import-tile.tone-danger { border-color: var(--danger-line); box-shadow: inset 3px 0 0 var(--danger), var(--shadow); }
.import-tile.tone-warning { border-color: var(--warning-line); box-shadow: inset 3px 0 0 var(--warning), var(--shadow); }
.import-tile.tone-success { box-shadow: inset 3px 0 0 var(--success), var(--shadow); }
.import-tile-excluded { background: var(--surface-low); }
.import-tile-excluded .import-tile-title, .import-tile-excluded .import-lines { color: var(--muted); }
.import-tile .app-card-heading { flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 8px; }
/* The chip under the title, so a long one ("3 held back · 12 to check · 397 ready") never squeezes it. */
.import-tile .app-card-badges { justify-content: flex-start; }
.import-tile .app-card-badges .chip { white-space: normal; line-height: 18px; padding-block: 1px; }
.import-tile-title { margin: 0 0 2px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.import-subtitle { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.import-tile > .import-rows-line { margin: 0 0 8px; font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.import-lines { display: grid; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; }
.import-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--secondary); }
.import-line-glyph { flex: none; width: 14px; text-align: center; font-weight: 700; color: var(--faint); }
.import-line-text { min-width: 0; overflow-wrap: anywhere; }
.import-line.tone-danger { color: var(--danger-ink); }
.import-line.tone-danger .import-line-glyph { color: var(--danger); }
.import-line.tone-warning { color: var(--warning-ink); }
.import-line.tone-warning .import-line-glyph { color: var(--warning); }
.import-line.tone-success { color: var(--success-ink); }
.import-line.tone-success .import-line-glyph { color: var(--success); }
.import-line-link { padding: 0; min-height: 0; font-size: 13px; color: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; white-space: normal; }
.import-line-link:hover { background: transparent; text-decoration-thickness: 2px; }
.import-outcome { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-size: 13px; }
.import-tile-footer { gap: 8px; }
.import-include { margin: 0; font-size: 13px; }
.import-include input[type="checkbox"] { margin-top: 2px; }
.import-tile-footer select { width: auto; max-width: 100%; min-height: 32px; padding: 4px 8px; font-size: 13px; }
.import-tile-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.import-tile-actions .capability-disabled-action { justify-content: flex-end; }
.import-primary { justify-content: flex-end; align-items: center; }

/* ---------------------------------------------------------------- mapping */
.import-mapping { padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.import-mapping > summary { padding: 12px 16px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.import-mapping[open] > summary { border-bottom: 1px solid var(--line-soft); }
.import-mapping-body { display: grid; gap: 16px; padding: 14px 16px 16px; min-width: 0; }
.import-banner { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); font-size: 13px; }
.import-banner.tone-danger { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger-line); }
.import-banner.tone-warning { color: var(--warning-ink); background: var(--warning-soft); border-color: var(--warning-line); }
.import-banner.tone-success { color: var(--success-ink); background: var(--success-soft); border-color: var(--success-line); }
.import-fields { display: grid; border: 1px solid var(--line); border-radius: var(--radius); }
.import-field { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(160px, 1fr) minmax(0, 2fr); align-items: center; gap: 6px 12px; padding: 8px 12px; border-top: 1px solid var(--line-soft); min-width: 0; }
.import-field:first-child { border-top: 0; }
.import-fields > p { margin: 0; padding: 8px 12px; font-size: 13px; }
.import-field-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.import-field-name small { font-size: 11px; }
.import-field select { min-height: 32px; padding: 4px 8px; font-size: 13px; }
.import-field-aside { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font-size: 12px; }
.import-confidence { padding: 0 6px; border-radius: 999px; background: var(--surface-low); color: var(--secondary); font-size: 11px; line-height: 18px; white-space: nowrap; }
.import-suggestion { border-style: dashed; color: var(--accent); cursor: pointer; white-space: normal; text-align: left; }
.import-suggestion:hover { background: var(--accent-soft); }
.import-default { overflow-wrap: anywhere; }
.import-fill { padding: 2px 8px; font-size: 12px; }
.import-children { display: grid; gap: 6px; margin: 0; padding: 8px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.import-children legend { padding: 0 4px; font-size: 13px; font-weight: 600; }
.import-unused h5, .import-formats h5, .import-policy h5 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.import-unused ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.import-unused li { display: flex; gap: 10px; min-width: 0; }
.import-unused-column { flex: none; font-weight: 500; }
.import-kept { display: flex; gap: 10px; min-width: 0; margin: 0; font-size: 13px; }
.import-format { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.import-format:first-of-type { border-top: 0; }
.import-format select { width: auto; min-height: 32px; padding: 4px 8px; font-size: 13px; }
.import-format-column { min-width: 120px; font-weight: 500; }
.import-format-sample { font-variant-numeric: tabular-nums; }
.import-format button { padding: 2px 10px; font-size: 13px; }
.import-policy { display: grid; gap: 8px; }
.import-policy select, .import-mapping .import-page select, .import-mapping-body > .import-labelled select { min-height: 32px; }
.import-consequence { margin: 0; font-size: 12px; }
.import-mapping-actions { margin-top: 0; }
.import-mapping .capability-chat { margin-top: 0; }

/* ---------------------------------------------------------------- values */
.import-values { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.import-bulk { margin: 0 0 8px; }
.import-value-list { display: grid; }
.import-value { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line-soft); min-width: 0; }
.import-value:first-child { border-top: 0; }
.import-value-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.import-value-text { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.import-value-count { font-variant-numeric: tabular-nums; }
.import-value-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.import-value-actions button { padding: 4px 10px; font-size: 13px; }
.import-value-search { display: flex; gap: 6px; max-width: 480px; }
.import-value-search input { min-height: 32px; }

/* ---------------------------------------------------------------- grid */
.import-grid-layout { display: grid; gap: 12px; min-width: 0; }
.import-grid-layout.import-grid-wide { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); align-items: start; }
.import-grid-main { min-width: 0; }
.import-issues { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 13px; min-width: 0; }
.import-issues-rail { position: sticky; top: 8px; max-height: min(80vh, 760px); overflow: auto; padding: 10px; }
.import-issues-rail h5 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.import-issues-band > summary { padding: 10px 12px; cursor: pointer; font-weight: 500; }
.import-issues-band .import-issue-list { padding: 0 10px 10px; }
.import-issue-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.import-issue { display: grid; gap: 4px; padding: 6px 8px; border-left: 3px solid var(--warning); border-radius: var(--radius-sm); background: var(--surface-low); }
.import-issue.severity-blocked { border-left-color: var(--danger); }
.import-issue-pick { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2px 6px; width: 100%; padding: 2px 0; background: transparent; color: var(--ink); font-size: 13px; text-align: left; white-space: normal; }
.import-issue-pick:hover { background: transparent; text-decoration: underline; }
.import-issue-pick[aria-pressed="true"] .import-issue-label { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.import-issue-glyph { font-weight: 700; color: var(--warning-ink); }
.severity-blocked .import-issue-glyph { color: var(--danger-ink); }
.import-issue-count { font-variant-numeric: tabular-nums; }
.import-issue-fix { justify-self: start; padding: 2px 8px; font-size: 12px; white-space: normal; text-align: left; }

.import-grid-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; }
.import-grid-toolbar input[type="search"] { flex: 1 1 200px; width: auto; max-width: 320px; min-height: 36px; }

.import-grid-scroll { max-height: min(70vh, 720px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overscroll-behavior: contain; }
.import-grid-table { min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.import-grid-table th, .import-grid-table td { box-sizing: border-box; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); background: var(--surface); text-align: left; vertical-align: top; white-space: nowrap; }
.import-grid-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-low); color: var(--secondary); font-weight: 500; vertical-align: bottom; border-bottom-color: var(--line); }
/* The number and the status stay in view while the rest scrolls sideways. */
.import-grid-table .import-n { position: sticky; left: 0; z-index: 1; width: 56px; min-width: 56px; max-width: 56px; text-align: right; color: var(--muted); font-weight: 400; }
.import-grid-table .import-status-col { position: sticky; left: 56px; z-index: 1; min-width: 128px; box-shadow: 1px 0 0 var(--line); }
.import-grid-table thead .import-n, .import-grid-table thead .import-status-col { z-index: 3; }
.import-grid-table .import-n:has(.import-menu[open]), .import-grid-table thead th:has(.import-menu[open]) { z-index: 4; }
.import-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.import-cell-text { white-space: pre; }
.import-cell:focus-visible { outline: 2px solid var(--focus-border); outline-offset: -2px; }
.import-cell.cell-issue { cursor: pointer; }
.import-cell.cell-blocked { background: var(--danger-soft); color: var(--danger-ink); box-shadow: inset 0 0 0 1px var(--danger-line); }
.import-cell.cell-check { background: var(--warning-soft); color: var(--warning-ink); box-shadow: inset 0 0 0 1px var(--warning-line); }
/* The fourth mark: a value the import changed, or a person edited, is underlined; hover says what the file had. */
.import-cell.cell-changed .import-cell-text { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.import-cell.cell-edited .import-cell-text { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.import-cell.cell-editing { padding: 2px; overflow: visible; }
.import-cell.cell-editing :is(input, select) { min-width: 160px; min-height: 30px; padding: 3px 6px; font-size: 13px; }
.import-row.row-blocked > .import-n { box-shadow: inset 3px 0 0 var(--danger); }
.import-row.row-check > .import-n { box-shadow: inset 3px 0 0 var(--warning); }
.import-row.row-skipped > td.import-cell { color: var(--faint); }
.import-row.row-skipped .import-cell-text { text-decoration: line-through; }
.import-row-empty td { padding: 16px; white-space: normal; }
.import-grid .status-chip { gap: 4px; padding: 0 8px; line-height: 20px; white-space: nowrap; }
.status-chip.status-ready, .status-chip.status-written { color: var(--success-ink); background: var(--success-soft); border-color: var(--success-line); }
.status-chip.status-check { color: var(--warning-ink); background: var(--warning-soft); border-color: var(--warning-line); }
.status-chip.status-blocked, .status-chip.status-failed { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger-line); }
.status-chip.status-skipped { color: var(--muted); background: var(--surface-low); border-color: var(--line); }
.import-status-icon { font-weight: 700; }
.import-col-name { display: flex; align-items: center; gap: 6px; }
.import-col-header { color: var(--ink); font-weight: 600; }
.import-col-field { font-size: 11px; font-weight: 400; }
.import-col-issues { padding: 0 6px; font-size: 11px; line-height: 16px; }
.import-grid-table thead th.import-col.tone-danger { box-shadow: inset 0 3px 0 var(--danger); }
.import-grid-table thead th.import-col.tone-warning { box-shadow: inset 0 3px 0 var(--warning); }
.import-grid-table thead th.col-picked { background: var(--accent-wash); }
.import-grid-table th.col-ignored .import-col-header { color: var(--faint); text-decoration: line-through; }

.import-menu { position: relative; display: inline-block; }
.import-menu > summary { min-width: 24px; padding: 0 6px; border-radius: var(--radius-sm); color: var(--muted); text-align: center; list-style: none; cursor: pointer; }
.import-menu > summary::-webkit-details-marker { display: none; }
.import-menu > summary:hover, .import-menu[open] > summary { background: var(--surface-high); color: var(--ink); }
.import-row .import-n .import-menu > summary { min-width: 36px; text-align: right; }
.import-menu-items { position: fixed; z-index: 20; display: grid; min-width: 220px; max-width: calc(100vw - 16px); padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); }
.import-menu-item { justify-content: flex-start; padding: 6px 10px; background: transparent; color: var(--ink); font-size: 13px; text-align: left; white-space: normal; }
.import-menu-item:hover { background: var(--surface-low); }

.import-popover { z-index: 20; width: min(320px, calc(100vw - 16px)); padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.import-popover-message { margin: 0 0 8px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.import-popover-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; }
.import-popover-suggestions button { padding: 2px 8px; font-size: 13px; }
.import-popover .tool-output { max-height: 160px; overflow: auto; white-space: pre-wrap; font: 11px/1.5 var(--mono); }
.import-popover-actions { margin-top: 8px; }
.import-popover-actions button { padding: 4px 10px; font-size: 13px; }

.import-grid-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.import-grid-footer .capability-footer { margin: 0; font-variant-numeric: tabular-nums; }

.import-ask select, .import-ask input { margin-top: 4px; }

/* ---------------------------------------------------------------- task */
.import-task { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.import-task.task-paused, .import-task.task-completed_with_issues { border-color: var(--warning-line); }
.import-task.task-failed { border-color: var(--danger-line); }
.import-task.task-completed { border-color: var(--success-line); }
.import-task.task-paused .capability-progress-fill { background: var(--warning); }
.import-task.task-failed .capability-progress-fill { background: var(--danger); }
.import-task.task-completed .capability-progress-fill { background: var(--success); }
.import-task-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 10px; }
.import-task-head h4 { margin: 0; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); overflow-wrap: anywhere; }
.import-task-head .chip { white-space: normal; }
.import-task-stage { margin: 0 0 8px; font-size: 13px; }
.import-task-counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.import-counter { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-low); }
.import-counter dt { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.import-counter dd { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.import-counter-held:not(.import-counter-zero) { border-color: var(--warning-line); background: var(--warning-soft); }
.import-counter-held:not(.import-counter-zero) dd { color: var(--warning-ink); }
.import-counter-failed:not(.import-counter-zero) { border-color: var(--danger-line); background: var(--danger-soft); }
.import-counter-failed:not(.import-counter-zero) dd { color: var(--danger-ink); }
.import-task-activity { display: grid; gap: 2px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 12px; color: var(--secondary); }
.import-task-activity li { overflow-wrap: anywhere; }
.import-task-updated { margin: 0; font-size: 12px; }
.import-task-stale { color: var(--warning-ink); }

/* ---------------------------------------------------------------- narrow and touch */
@media (max-width: 760px) {
  .import-field { grid-template-columns: minmax(0, 1fr); }
  .import-grid-toolbar input[type="search"] { max-width: none; flex-basis: 100%; }
  .import-canvas-head { align-items: stretch; }
  .import-app, .import-app select { width: 100%; }
  /* The Desk's narrow filter tabs stretch every pill; the canvas's wrap instead. */
  .import-filters, .import-grid-filters, .import-grid-modes { width: 100%; }
  .import-filters button, .import-grid-filters button, .import-grid-modes button { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .import-tile { padding: 14px; }
  .import-tile-footer { align-items: stretch; }
  .import-tile-footer select { width: 100%; }
  .import-tile-actions { margin-left: 0; justify-content: flex-start; }
  .import-tile-actions .capability-disabled-action, .import-primary .capability-disabled-action { justify-content: flex-start; }
  .import-primary { justify-content: stretch; }
  .import-primary > button { width: 100%; }
  .import-grid-table .import-n { width: 48px; min-width: 48px; max-width: 48px; padding-inline: 6px; }
  .import-grid-table .import-status-col { left: 48px; min-width: 0; padding-inline: 6px; }
  .import-cell { max-width: 200px; }
  .import-grid-scroll { max-height: 64vh; }
  .import-task-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .import-value-search { max-width: none; }
}
/* A finger, not a pointer: every target is at least 44 px tall. */
@media (hover: none) and (pointer: coarse) {
  .filter-tabs :is(.import-filter, .import-mode), .import-issue-pick, .import-issue-fix, .import-issues-band > summary, .import-mapping > summary,
  .import-menu > summary, .import-menu-item, .import-load-more, .import-value-actions button, .import-value-search :is(input, button),
  .import-tile-footer :is(button, select), .import-include, .import-popover button, .import-mapping :is(select, button),
  .import-task-actions button, .import-line-link, .import-grid-toolbar input, .import-app select, .capability-undo,
  .capability-disabled-action button, .import-primary button, .import-bulk button, .capability-upload :is(button, select) { min-height: 44px; }
  .import-menu > summary { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 44px; }
  .import-grid-table td, .import-grid-table th { padding-block: 10px; }
  .import-cell.cell-editing :is(input, select) { min-height: 40px; }
}