/* Upload drawer (boards 3a and 3). Shares the Edit drawer chrome (.ed-overlay,
   .ed-panel, .ed-head, .ed-body, .ed-foot, fields) and adds the step indicator,
   the source cards, the staged file list and the per-file progress rows. Photos
   keep square corners; controls keep the 6px radius. */

/* Drop highlight on the whole panel (step 1). */
.up-overlay.is-drop .up-panel { box-shadow: var(--glass-edge), inset 0 0 0 2px var(--red); }

.up-head__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.up-eyebrow { color: var(--red-text); }
.up-close { background: transparent; }
.up-close svg { stroke: currentColor; }

/* ---- Step indicator --------------------------------------------------- */
.up-steps {
  display: flex; align-items: center; gap: 22px;
  margin: 0; padding: 16px 32px; list-style: none;
  border-bottom: 1px solid var(--rule); flex-shrink: 0; overflow-x: auto;
}
.up-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-quiet); white-space: nowrap; }
.up-step__n {
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 12px; font-weight: 600;
  background: var(--tone-1); color: var(--text-quiet);
}
.up-step.is-current { color: var(--text); font-weight: 600; }
.up-step.is-current .up-step__n { background: var(--red); color: var(--on-red); }
.up-step.is-done { color: var(--text-2); }
.up-step.is-done .up-step__n { background: var(--tone-2); color: var(--text); }

/* ---- Step 1: sources -------------------------------------------------- */
.up-source { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; background: var(--surface); border-radius: var(--radius); }
.up-source__h { font-size: 15px; font-weight: 600; color: var(--text); }
.up-source__p { margin: 0 0 6px; font-size: 14px; color: var(--text-2); }
.up-choose { height: 44px; padding: 0 20px; border-radius: var(--radius); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.up-choose svg { stroke: currentColor; }

.up-added { display: flex; flex-direction: column; gap: 12px; }
.up-added__h { color: var(--text-2); }
.up-list { display: flex; flex-direction: column; gap: 8px; }
.up-file { display: flex; align-items: center; gap: 14px; padding: 8px; background: var(--tone-1); border-radius: var(--radius); }
.up-file__thumb { width: 48px; height: 48px; flex-shrink: 0; background: var(--surface); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.up-file__thumb img { width: 100%; height: 100%; object-fit: cover; }
.up-file__doc { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--text-quiet); }
.up-file__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.up-file__name { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-file__meta { font-size: 12px; color: var(--text-quiet); }
.up-file__x { width: 34px; height: 34px; flex-shrink: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--text-quiet); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out); }
.up-file__x:hover { background: var(--tone-2); color: var(--text); }
.up-file__x svg { stroke: currentColor; }

.up-skip { margin: 0; font-size: 13px; color: var(--red-text); }
.up-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-quiet); }

/* ---- SharePoint: link row, errors, folder browser --------------------- */
.up-sprow { display: flex; gap: 8px; width: 100%; }
.up-splink { flex: 1; min-width: 0; }
.up-fetch { height: 44px; padding: 0 18px; flex-shrink: 0; }
.up-sperr { margin: 0; font-size: 13px; font-weight: 500; color: var(--red-text); }

.up-browse { display: flex; flex-direction: column; gap: 16px; }
.up-browse__top { display: flex; align-items: center; gap: 12px; }
.up-browse__back { height: 34px; padding: 0 12px; border-radius: var(--radius); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.up-browse__back svg { stroke: currentColor; }
.up-browse__path { font-size: 14px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-browse__subf { margin: 0; font-size: 12px; color: var(--text-quiet); }
.up-selall { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; padding-bottom: 4px; border-bottom: 1px solid var(--rule); }
.up-browse__list { gap: 2px; }

.up-spitem { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; transition: background var(--t-hover) var(--ease-out); }
.up-spitem:hover { background: var(--tone-1); }
.up-spitem__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.up-selall input, .up-spitem input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--red); cursor: pointer; }

/* ---- Step 2: details -------------------------------------------------- */
.up-filesummary { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.up-filesummary .micro { color: var(--text-2); }
.up-addmore { height: 36px; padding: 0 14px; border-radius: var(--radius); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.up-addmore svg { stroke: currentColor; }
.up-detail-lead { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }

/* ---- Step 3: progress ------------------------------------------------- */
.up-prog-head { display: flex; flex-direction: column; gap: 6px; }
.up-prog-head .micro { color: var(--red-text); }
.up-prog-sub { margin: 0; font-size: 14px; color: var(--text-2); }
.up-proglist { gap: 10px; }
.up-pfile { display: flex; align-items: center; gap: 14px; padding: 10px; background: var(--tone-1); border-radius: var(--radius); }
.up-pfile__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.up-bar { height: 4px; border-radius: 3px; background: var(--tone-2); overflow: hidden; }
.up-bar__fill { display: block; height: 100%; width: 100%; background: var(--red); transform-origin: left center; transform: scaleX(0); transition: transform .12s linear; }
.up-pfile.is-ready .up-bar__fill { background: var(--text-quiet); }
.up-pfile.is-failed .up-bar__fill { background: var(--red); }
.up-pfile__status { flex-shrink: 0; font-size: 13px; font-weight: 500; color: var(--text-2); min-width: 92px; text-align: right; }
.up-ok { display: inline-flex; align-items: center; gap: 5px; color: var(--text-quiet); }
.up-ok svg { stroke: currentColor; }
.up-fail { color: var(--red-text); }
.up-wait { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }

.up-wait .spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--tone-2); border-top-color: var(--text-2);
  animation: up-spin .7s linear infinite;
}
@keyframes up-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .up-wait .spinner { animation: none; } }

@media (max-width: 560px) {
  .up-steps { padding-left: 20px; padding-right: 20px; gap: 14px; }
  .up-source { padding: 18px; }
}