/* upload.css: Upload and validate (component 29). Owner: group E (P2.T8). Tokens only, logical properties only. 02 "29". */
[data-component="upload"] { display: grid; gap: var(--space-5); inline-size: 100%; min-inline-size: 0; color: var(--text); }
[data-component="upload"] [hidden] { display: none; }

/* The drop zone. */
[data-component="upload"] .upload__zone {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-3);
  min-block-size: var(--size-dropzone-min);
  padding: var(--space-6);
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius-region);
  background: var(--surface);
  text-align: center;
}
[data-component="upload"] .upload__zone .icon { color: var(--text-secondary); }
[data-component="upload"] .upload__zone[data-drag="over"],
[data-component="upload"] .upload__zone[data-force="drag"] { border-color: var(--brand); background: var(--brand-subtle); }
[data-component="upload"] .upload__prompt { margin: 0; font: var(--type-body); }
[data-component="upload"] .upload__caption { margin: 0; color: var(--text-secondary); font: var(--type-caption); }

/* Skeleton for the loading state. */
[data-component="upload"] .upload__skeleton { min-block-size: var(--size-dropzone-min); border-radius: var(--radius-region); background: var(--border); animation: upload-pulse var(--duration-pulse) var(--ease-standard) infinite alternate; }
@keyframes upload-pulse { from { opacity: 1; } to { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { [data-component="upload"] .upload__skeleton { animation: none; } }

/* A critical banner above the zone for a file that cannot be read. */
[data-component="upload"] .upload__banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--border);
  border-inline-start: var(--border-width-accent) solid var(--critical);
  border-radius: var(--radius-control);
  background: var(--critical-subtle);
}
[data-component="upload"] .upload__banner .icon { flex: none; color: var(--critical); }
[data-component="upload"] .upload__banner p { margin: 0; font: var(--type-body); }
[data-component="upload"] .upload__banner strong { font-weight: 600; }

/* File chosen: name, size, remove, progress. */
[data-component="upload"] .upload__file { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: var(--border-width) solid var(--border); border-radius: var(--radius-region); background: var(--surface); }
[data-component="upload"] .upload__file-line { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
[data-component="upload"] .upload__file-line .icon { flex: none; color: var(--text-secondary); }
[data-component="upload"] .upload__file-name { font: var(--type-button); overflow-wrap: anywhere; }
[data-component="upload"] .upload__file-size { color: var(--text-secondary); font: var(--type-caption); margin-inline-end: auto; }
[data-component="upload"] .upload__icon-btn { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--size-control-sm); block-size: var(--size-control-sm); padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-secondary); }
[data-component="upload"] .upload__icon-btn:hover { background: var(--surface-hover); color: var(--text); }
[data-component="upload"] .upload__icon-btn:active { background: var(--border); }
[data-component="upload"] .upload__progress { block-size: var(--size-bar); border-radius: var(--radius-bar); background: var(--border); overflow: hidden; }
[data-component="upload"] .upload__progress-fill { display: block; block-size: 100%; border-radius: var(--radius-bar); background: var(--brand); }

/* Summary bar: counts as chips, segmented control, error report. */
[data-component="upload"] .upload__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); min-block-size: var(--size-toolbar); }
[data-component="upload"] .upload__chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-inline-end: auto; }
[data-component="upload"] .upload__chip { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--size-chip); padding-inline: var(--space-3); border-radius: var(--radius-chip); background: var(--good-subtle); color: var(--good); font: var(--type-label); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
[data-component="upload"] .upload__chip[data-tone="critical"] { background: var(--critical-subtle); color: var(--critical); }

/* The validation grid: comfortable rows, 44 high. */
[data-component="upload"] .upload__scroll { overflow: auto; max-block-size: calc(var(--size-results-max-h) + var(--size-header-row)); border: var(--border-width) solid var(--border); border-radius: var(--radius-region); background: var(--surface); }
[data-component="upload"] .upload__table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font: var(--type-body); }
[data-component="upload"] .upload__table th { box-sizing: border-box; position: sticky; inset-block-start: 0; z-index: var(--z-sticky); min-block-size: var(--size-header-row); block-size: var(--size-header-row); padding-inline: var(--space-4); background: var(--surface-sunken); color: var(--text-secondary); font: var(--type-label); white-space: nowrap; border-block-end: var(--border-width) solid var(--border); }
[data-component="upload"] .upload__table td { box-sizing: border-box; block-size: var(--size-row-comfortable); padding-inline: var(--space-4); border-block-end: var(--border-width) solid var(--border); white-space: nowrap; max-inline-size: var(--size-field-max); overflow: hidden; text-overflow: ellipsis; }
[data-component="upload"] .upload__table th.upload__th-status,
[data-component="upload"] .upload__table td.upload__status { inline-size: var(--col-icon); min-inline-size: var(--col-icon); padding-inline: 0; text-align: center; }
[data-component="upload"] .upload__status .icon { color: var(--good); vertical-align: middle; }
[data-component="upload"] tr[data-valid="false"] .upload__status .icon { color: var(--critical); }
[data-component="upload"] .upload__table td[data-invalid="true"] { background: var(--critical-subtle); padding-inline: 0; }
[data-component="upload"] .upload__cell { display: flex; align-items: center; gap: var(--space-2); inline-size: 100%; block-size: calc(var(--size-row-comfortable) - var(--border-width)); padding-inline: var(--space-4); border: 0; background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
[data-component="upload"] .upload__cell .icon { flex: none; color: var(--critical); }
[data-component="upload"] .upload__cell:hover { background: var(--surface-hover); }
[data-component="upload"] .upload__cell:focus-visible { outline-offset: calc(-1 * var(--border-width-thick)); }
[data-component="upload"] .upload__cell-text { overflow: hidden; text-overflow: ellipsis; }
[data-component="upload"] .upload__cell-empty { color: var(--text-secondary); }
[data-component="upload"] .upload__table td[data-editing="true"] { padding-block: var(--space-2); white-space: normal; overflow: visible; min-inline-size: var(--size-field-mid); }
[data-component="upload"] .upload__editor { display: grid; gap: var(--space-1); }
[data-component="upload"] .upload__input { min-block-size: var(--size-control-sm); padding-inline: var(--space-3); border: var(--border-width) solid var(--critical); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font: var(--type-body); }
[data-component="upload"] .upload__error { margin: 0; color: var(--critical); font: var(--type-caption); }

[data-component="upload"] .upload__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
[data-component="upload"] .upload__showing { color: var(--text-secondary); font: var(--type-caption); }
[data-component="upload"] .upload__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
[data-component="upload"] .upload__submit-note { margin: 0; flex: 1 1 var(--size-popover-md); color: var(--text-secondary); font: var(--type-caption); }

/* Kitchen sink sample column (the demo only). */
.upload-demo { inline-size: 100%; min-inline-size: 0; max-inline-size: var(--size-overview-max); }