/* The files a screen is sending (client portal slice 3, js/uploads.js): square tiles with the state on each, a refused
   file as a row with the server's sentence and Remove, and the one calm line while anything is on its way. White
   theme, the v2 tokens, 44 px targets, no text under 14 px. */
.up-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-top: 12px; }
.up-tiles[hidden] { display: none; }
.up-tile { position: relative; min-width: 0; border-radius: var(--v-r-ctl); }
.up-tile:focus { outline: none; }
html.kbd .up-tile:focus-visible { box-shadow: 0 0 0 2px var(--v-white), 0 0 0 4px var(--v-ink); }
.up-thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--v-r-ctl); background: var(--v-fill);
  box-shadow: inset 0 0 0 1px var(--v-hair); }
.up-face { display: block; width: 100%; height: 100%; object-fit: cover; }
.up-face-mark, .up-face-doc, .up-face-video { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--v-mute); }
.up-face-doc { padding: 8px 8px 30px; color: var(--v-ink); }
.up-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 18px;
  font-weight: 500; }
.up-face-video { background: #2B3138; }
.up-len { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px 0; border-radius: 4px; background: rgba(14, 17, 22, .72); color: var(--v-white);
  font-family: var(--v-din); font-size: 16px; line-height: 20px; letter-spacing: .3px; }
/* a clip's length shows once nothing lies over it */
.up-tile[data-state="sending"] .up-len, .up-tile[data-state="queued"] .up-len, .up-tile[data-state="preparing"] .up-len,
.up-tile[data-state="failed"] .up-len, .up-tile[data-state="sending"] .up-face-video svg, .up-tile[data-state="queued"] .up-face-video svg,
.up-tile[data-state="preparing"] .up-face-video svg, .up-tile[data-state="failed"] .up-face-video svg { visibility: hidden; }
/* the state over the picture */
.up-veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: rgba(255, 255, 255, .8); color: var(--v-ink); }
.up-meter { display: block; line-height: 0; }
.up-ring-track { stroke: #B3B9C0; }                 /* reads on the white veil; the arc is ink */
.up-ring-arc { stroke: var(--v-ink); }
.up-pct { font-family: var(--v-din); font-size: 16px; line-height: 18px; letter-spacing: .3px; color: var(--v-ink); }
.up-spin { display: block; width: 28px; height: 28px; margin: 6px; border: 3px solid var(--v-hair-2); border-top-color: var(--v-ink); border-radius: 50%;
  animation: up-spin 800ms linear infinite; }
@keyframes up-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .up-spin { animation: none; } }
.up-again { width: 100%; border: 0; border-radius: var(--v-r-ctl); background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 2px var(--v-red);
  font: inherit; font-size: 14px; line-height: 18px; font-weight: 600; cursor: pointer; }
.up-again:hover { background: var(--v-white); }
.up-done { position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--v-green); color: var(--v-white); box-shadow: 0 0 0 2px var(--v-white); }
/* Remove: a 44 px target over the corner, the visible mark smaller */
.up-x { position: absolute; top: 0; right: 0; display: flex; align-items: flex-start; justify-content: flex-end; width: 44px; height: 44px;
  padding: 6px; border: 0; background: none; cursor: pointer; }
.up-x svg { box-sizing: border-box; width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: rgba(14, 17, 22, .72); color: var(--v-white); }
/* a refused file: a row across the grid, its picture small, the server's sentence and Remove */
.up-refused { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--v-hair);
  border-bottom: 1px solid var(--v-hair); border-radius: 0; }
.up-refused .up-thumb { flex: none; width: 64px; height: 64px; }
.up-why { flex: 1 1 auto; min-width: 0; }
.up-why-t { display: flex; gap: 8px; margin: 0; font-size: 15px; line-height: 21px; font-weight: 600; color: var(--v-ink); }
.up-why-t svg { flex: none; margin-top: 1px; color: var(--v-red); }
.up-remove { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px;
  font-weight: 600; color: var(--v-ink); text-decoration: underline; text-decoration-color: var(--v-hair-2); text-underline-offset: 3px; cursor: pointer; }
/* the calm line while a file is on its way */
.up-keep { margin: 8px 0 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v-mute); }
.up-keep[hidden] { display: none; }
.up-count { margin: 8px 0 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v-mute); }
.up-count:empty { display: none; }

/* Order a repair and the inspection booking: the line under the bar, three add tiles, and the wait at the foot */
.v2.v-order > .up-keep { margin: 0 var(--v-gut) 12px; padding-bottom: 10px; border-bottom: 1px solid var(--v-hair); }
.v2.v-order .o-step > .up-tiles { margin: 0 0 20px; }
.v2.v-order .o-tiles.o-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v2.v-order .o-tiles.o-tiles-3 .o-tile { min-height: 96px; padding: 10px 6px; text-align: center; font-size: 15px; line-height: 19px; }
.v2.v-order .order-foot.sbar { flex-wrap: wrap; }
.v2.v-order .o-wait { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.v2.v-order .o-wait[hidden] { display: none; }
.v2.v-order .o-wait-t { flex: 1 1 200px; margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-ink); }
.v2.v-order .o-wait .link { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; cursor: pointer; }
@media (min-width: 1024px) {
  .v2.v-order > .up-keep { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
  .v2.v-order .o-wait { max-width: 560px; }
}

/* a video the client sent, on the order and the job: its still frame with a play mark and the length; a tap downloads */
.up-vids { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.up-vid { position: relative; display: block; width: 120px; height: 120px; overflow: hidden; border-radius: var(--v-r-ctl); background: #2B3138;
  color: var(--v-white); text-decoration: none; }
.up-vid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.up-vid .up-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.up-vid .up-len { visibility: visible; }

/* a job's photos on their way, and the quote sheets' files */
.up-panel { margin: 0 0 16px; }
.v2.jp-v2 .up-panel { margin: 24px 0 16px; }          /* clear of the cover's action above it, at every width */
.up-panel[hidden] { display: none; }
.up-panel-h { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--v-ink); }
.qa-pick .up-tiles { margin-top: 12px; }
.qa-wait { margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-ink); }
.qa-wait[hidden] { display: none; }
.qa-wait .qa-without { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit;
  font-size: 15px; color: var(--v-ink); text-decoration: underline; text-decoration-color: var(--v-hair-2); text-underline-offset: 3px; cursor: pointer; }

/* Waiting for files (or photos): the button looks as it is, with nothing to tap until the files are in */
.v2.v-order .order-foot .btn.o-waiting, .v2.v-msheet .btn.o-waiting { background: var(--v-fill); color: var(--v-mute);
  box-shadow: inset 0 0 0 1px var(--v-hair-2); cursor: default; }
.v2.v-order .order-foot .btn.o-waiting:hover, .v2.v-msheet .btn.o-waiting:hover { background: var(--v-fill); color: var(--v-mute); }
/* a file the server asked to wait: its sentence and a quiet second line */
.up-waits .up-why-t svg { color: var(--v-mute); }
.up-why-s { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--v-mute); }