/* Import from iPhone or iCloud — the dialog (public/icloud.js).
 *
 * Its own small sheet, like cleanup.css. No tokens of its own: every colour is a theme token,
 * and every control is the app's (.btn, .check, .field, .tree, .spin), so all seven themes dress
 * it with no rule of their own. Only the layout around those controls is new.
 */

.ic { display: flex; flex-direction: column; gap: 10px; }
.ic .hint { margin-bottom: 0; }

/* what was picked */
.ic-src { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ic-src li {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: calc(5 * var(--sp)) calc(6 * var(--sp)) calc(5 * var(--sp)) calc(10 * var(--sp));
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--panel);
}
.ic-src li > i { flex: none; display: inline-flex; color: var(--mut); }
.ic-src li > i svg { width: 18px; height: 18px; }
.ic-src li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); }
.ic-src .iconbtn { flex: none; width: 28px; height: 28px; }

.ic-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.ic-pick .btn { gap: 7px; }
.ic-pick .btn svg { width: 16px; height: 16px; }

.ic-tree .tree { margin-top: 2px; }
.ic-tree-ok { display: flex; justify-content: flex-end; margin-top: 8px; }

/* what is in there */
.ic-big { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semi); color: var(--text); line-height: 1.3; }
.ic-sub { margin-top: -4px; }
.ic-facts { margin: 0; padding-left: 1.15em; color: var(--text2); font-size: var(--fs-md); line-height: 1.55; }
.ic-dest { margin: 4px 0 0; }
/* The label, styled as .field's own caption is (that rule only reaches a direct <span>). */
.ic-dest > label { display: block; font-size: var(--fs-md); color: var(--mut); margin-bottom: 6px; font-weight: var(--fw-medium); }
.ic-dest-row { display: flex; gap: 8px; align-items: center; }
.ic-dest-row input { flex: 1; min-width: 0; }
.ic-dest-row .btn { flex: none; }
.ic .check { margin: 2px 0; }

/* while it runs */
.ic-wait { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--text2); }
.ic-wait p { margin: 0; }
.ic-run { display: flex; flex-direction: column; gap: 9px; }
.ic-run p { margin: 0; }
.ic-bar { height: 6px; border-radius: var(--r-4xs); background: var(--track); overflow: hidden; position: relative; }
.ic-bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .4s var(--ease); }
/* Not knowing how long is said by a short bar drifting, slowly — never a spinner race. */
.ic-bar.ind > i { position: absolute; animation: icDrift 1.8s ease-in-out infinite alternate; }
@keyframes icDrift { from { left: 0; } to { left: 70%; } }
@media (prefers-reduced-motion: reduce) { .ic-bar.ind > i { animation: none; } }
.ic-now { min-height: 1.4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* afterwards */
.ic-notes { font-size: var(--fs-md); color: var(--mut); }
.ic-notes summary { cursor: pointer; }
.ic-notes ul { margin: 6px 0 0; padding-left: 1.15em; max-height: 160px; overflow: auto; }
.ic-zips .linkbtn, .ic-last .linkbtn { margin-top: 0; }
.ic-err { margin: 0; color: var(--danger); font-size: var(--fs-md); }

@media (max-width: 560px) {
  .ic-pick .btn { flex: 1 1 100%; justify-content: center; }
}