/* P2 Upload: Dropzone, FileChip, UploadProgressCard, ResultCard and resume card (spec §2.2). Tokens only. */
.upload-form { gap: var(--space-4); }
.field { display: grid; gap: var(--space-1); }
.file-picker { display: grid; gap: var(--space-2); }
.file-picker > .label { font-weight: 600; font-size: var(--text-sm); }

.dropzone { display: grid; justify-items: center; align-content: center; gap: var(--space-2); min-height: 13.75rem; padding: var(--space-4); text-align: center; border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-muted); color: var(--color-text-secondary); font-weight: 400; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
@media (min-width: 768px) { .dropzone { min-height: 17.5rem; } }
.dropzone[hidden] { display: none; }
.dropzone:hover, .dropzone.is-dragover { border-style: solid; border-color: var(--color-primary); background: var(--color-primary-subtle); }
.file-picker:focus-within .dropzone { outline: var(--focus-ring) solid var(--color-focus-ring); outline-offset: 2px; }
.dropzone.is-disabled { opacity: 0.5; cursor: not-allowed; }
.dropzone__motif { width: 7.5rem; height: auto; transition: transform var(--duration-fast) var(--ease-standard); }
.dropzone:hover .dropzone__motif, .dropzone.is-dragover .dropzone__motif { transform: translateY(-4px) scale(1.03); }
.dropzone__title { font-size: var(--text-md); font-weight: 600; color: var(--color-text); }
.dropzone__or { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.dropzone__pick { pointer-events: none; }

.file-chip { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); animation: rise-in var(--duration-base) var(--ease-standard) both; }
.file-chip__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 3rem; border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border-strong); background: var(--color-paper); color: var(--color-danger-text); font-size: var(--text-kbd); font-weight: 700; letter-spacing: var(--tracking-caps); }
.file-chip__body { display: grid; min-width: 0; flex: 1 1 auto; }
.file-chip__name { font-weight: 600; overflow-wrap: anywhere; }
.file-chip__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.file-chip .btn { cursor: pointer; }
#resume-hint { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border-left: 4px solid var(--color-info-border); background: var(--color-info-bg); color: var(--color-text); }

.upload-progress { gap: var(--space-3); }
.upload-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.upload-progress progress { height: var(--progress-height); }
.upload-progress .row .btn { margin-left: auto; }
@media (max-width: 479px) { .upload-progress .row .btn { width: 100%; } }

.result-card__head { display: flex; align-items: center; gap: var(--space-3); }
.result-card__badge { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-pill); background: var(--color-success-bg); color: var(--color-success-text); font-weight: 700; animation: pop-in var(--duration-base) var(--ease-out) both; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); }
.checklist li { display: inline-flex; align-items: center; gap: var(--space-1); }
.checklist__icon { color: var(--color-success-text); font-weight: 700; }
.result-list { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-muted); }
@media (min-width: 640px) { .result-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.result-list__item { display: grid; gap: var(--space-1); min-width: 0; }
.result-list dt { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.result-list dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); overflow-wrap: anywhere; font-weight: 600; }
.resume-card { border-left: 4px solid var(--color-info-border); }

/* Bundle and client brief side by side (brief on the right, marked Optional); stacked below 960px. */
.upload-layout { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 960px) { .upload-layout { grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 1fr); } .upload-layout__side { position: sticky; top: calc(var(--topbar-height) + var(--space-3)); } }
.upload-layout__main, .upload-layout__side { min-width: 0; }
.brief-card { position: relative; overflow: hidden; gap: var(--space-3); }
.brief-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--band-4), var(--band-6)); }
.brief-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.brief-card__head h2 { font-size: var(--text-md); }
.brief-card__tag { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--text-kbd); }
.brief-card__lede { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-body); }
.brief-card__uses { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.brief-card__uses li { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--color-primary-subtle); color: var(--color-primary); font-size: var(--text-xs); font-weight: 600; }
.brief-card__uses li::before { content: '✓'; font-weight: 700; }
.brief-drop { display: flex; align-items: center; gap: var(--space-3); min-height: 5.5rem; padding: var(--space-3); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-muted); color: var(--color-text-secondary); font-weight: 400; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.brief-drop:hover, .brief-drop.is-dragover { border-style: solid; border-color: var(--color-primary); background: var(--color-primary-subtle); }
.brief-card:focus-within .brief-drop { outline: var(--focus-ring) solid var(--color-focus-ring); outline-offset: 2px; }
.brief-drop.is-disabled { opacity: 0.5; cursor: not-allowed; }
.brief-drop__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--color-surface); border: var(--border-width) solid var(--color-border); color: var(--color-primary); font-size: var(--text-lg); font-weight: 600; transition: transform var(--duration-fast) var(--ease-standard); }
.brief-drop:hover .brief-drop__icon { transform: rotate(90deg); }
.brief-drop__text { display: grid; font-size: var(--text-sm); }
.brief-drop__text strong { color: var(--color-text); font-size: var(--text-base); }
.brief-chip.is-done .file-chip__icon { color: var(--color-success-text); border-color: var(--color-success-border); font-size: var(--text-sm); }
.brief-card__status { font-size: var(--text-sm); color: var(--color-info-text); }
.brief-card__status.is-done { color: var(--color-success-text); font-weight: 600; }
.brief-card--success { border-color: var(--color-success-border); }
.brief-card .field-error:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .dropzone:hover .dropzone__motif, .dropzone.is-dragover .dropzone__motif, .brief-drop:hover .brief-drop__icon { transform: none; }
  .file-chip, .result-card__badge { animation: none; }
}
.required { color: var(--color-danger-text); font-weight: 700; margin-left: 2px; }