/* New project from a folder of documents (upload.js): the Projects page's button and its dialog, the
   system's Dialog with a drop zone, the folder's summary and the reading stages. System tokens only. */

/* the Projects page head: the one primary button at the right */
.pagehead .new-project { margin-left: auto; }

/* the dialog: the system's .ov/.dlg; the page behind does not scroll */
body.up-open { overflow: hidden; }
.up-ov { z-index: 60; }                       /* over the chat, its bar and the strip, which sit at 50 and under on a phone */
.up-input { display: none; }
.up-body { display: flex; flex-direction: column; gap: var(--space-12); }

/* the drop zone: a dashed box on the page gray; a file held over it outlines it in blue (it can be dropped) */
.up-drop { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding: var(--space-24) var(--space-16);
  border: 1.5px dashed var(--ghost); border-radius: var(--radius-10); background: var(--page); text-align: center; }
.up-drop.hot { border-color: var(--blue); background: var(--blue-bg); }
.up-ico { color: var(--mute); display: inline-flex; }
.up-drop-t { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.up-drop-or { margin: 0; font-size: 13px; color: var(--mute); }
.up-choose-zip { margin-top: var(--space-2); }
.up-err { margin: 0; font-size: 13px; color: var(--bad); }

/* the folder given: its name and size, then what is in it */
.up-folder { border: 1px solid var(--line); border-radius: var(--radius-10); padding: var(--space-12) var(--space-14); }
.up-folder-h { display: flex; align-items: baseline; gap: var(--space-10); flex-wrap: wrap; }
.up-name { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.up-count { font-size: 13px; }
.up-kinds { margin: var(--space-6) 0 0; font-size: 14px; color: var(--ink2); }

/* the reading stages: waiting ones in gray, the one under way with a quiet turning mark, done ones with a check */
.up-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-10); }
.up-stage { display: flex; align-items: center; gap: var(--space-10); font-size: 14px; color: var(--mute); }
.up-stage.now, .up-stage.done { color: var(--ink); }
.up-mark { flex: 0 0 16px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1; }
.up-stage .up-mark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ghost); }
.up-stage.now .up-mark::before { width: 10px; height: 10px; border-radius: 50%; background: none;
  border: 2px solid var(--line); border-top-color: var(--mute); animation: up-turn .9s linear infinite; }
.up-stage.done .up-mark { color: var(--ok); }
.up-stage.done .up-mark::before { content: none; }
@keyframes up-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .up-stage.now .up-mark::before { animation: none; border-top-color: var(--line); background: var(--mute); width: 6px; height: 6px; border: 0; } }

@media (max-width: 480px) {
  .up-drop { padding: var(--space-18) var(--space-12); }
  .up-dlg .df { flex-wrap: wrap; }
}