/* Client upload portal — Wet Roller neo-brutalist skin.
   Tokens + base components come from the shared wet-roller.css; this file is
   only the page-specific layout. */

body { background: var(--color-surface-alt); -webkit-tap-highlight-color: transparent; }

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-5) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
}

.head { text-align: center; padding: var(--space-4) 0 var(--space-5); }
.wordmark { font-size: clamp(3rem, 14vw, var(--text-display)); color: var(--color-ink); }
.sub { font-size: var(--text-lg); margin: 0 auto; max-width: 32ch; }

.screen.hidden, .hidden { display: none !important; }

.error-card { text-align: center; }
.error-card .pill { margin-bottom: var(--space-3); }
.error-card h2 { margin-bottom: var(--space-2); }
.error-card p { margin: 0 auto; }

/* Big + tile — the hero action */
.add-tile {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface);
  text-align: center;
}
.plus {
  width: 110px; height: 110px; border-radius: var(--radius-full);
  background: var(--color-accent); color: var(--color-accent-ink);
  border: var(--border-width-thick) solid var(--color-ink);
  box-shadow: var(--shadow-md);
  font-family: var(--font-heading); font-weight: 700; font-size: 72px; line-height: 1;
  display: grid; place-items: center;
}
.add-label { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.02em; }
.add-sub { font-size: var(--text-sm); margin: 0; }

/* File list */
.file-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.file-item {
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
  display: flex; align-items: center; gap: var(--space-3);
}
.thumb {
  width: 48px; height: 48px; flex: 0 0 auto;
  border: var(--border-width) solid var(--color-ink); border-radius: var(--radius-md);
  object-fit: cover; background: var(--color-surface-alt);
  display: grid; place-items: center; font-size: 22px;
}
.file-meta { flex: 1 1 auto; min-width: 0; }
.file-name { font-weight: 700; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-status { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.03em; }
.file-status.ok { color: var(--color-success); }
.file-status.err { color: var(--color-danger); }
.bar { height: 8px; border-radius: var(--radius-full); background: var(--color-surface-alt); border: var(--border-width) solid var(--color-ink); overflow: hidden; margin-top: var(--space-2); }
.bar > i { display: block; height: 100%; width: 0%; background: var(--color-accent); transition: width .2s; }
.retry { margin-top: var(--space-2); }

.done-banner {
  margin-top: var(--space-5);
  background: var(--color-success-surface);
  border: var(--border-width) solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4);
  font-weight: 700; display: flex; gap: var(--space-2); align-items: center;
}
.done-check { color: var(--color-success); font-size: var(--text-xl); }
.hint { font-size: var(--text-sm); text-align: center; margin-top: var(--space-5); }