/* PDF to Word - scoped additions on top of the shared marketing design system
   (tokens.css / components.css already loaded via renderHead()). Only styles
   this tool actually needs live here; nothing here affects any other page. */

.ptw-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-50);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.ptw-dropzone:hover,
.ptw-dropzone:focus-visible {
  border-color: var(--brand-500);
  background: var(--brand-50);
  outline: none;
}
.ptw-dropzone.ptw-dragover {
  border-color: var(--brand-600);
  background: var(--brand-100);
}
.ptw-dropzone h4 { font-size: var(--fs-16); }
.ptw-dropzone p { font-size: var(--fs-14); color: var(--ink-400); margin-top: var(--sp-2); }

.ptw-file-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-50);
}
.ptw-file-icon {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: var(--brand-100); color: var(--brand-700);
}
.ptw-file-icon svg { width: 20px; height: 20px; }
.ptw-file-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ptw-file-meta strong { font-size: var(--fs-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptw-file-meta span { font-size: var(--fs-13); color: var(--ink-400); }

.ptw-spinner {
  width: 32px; height: 32px; margin: 0 auto var(--sp-4);
  border: 3px solid var(--border);
  border-top-color: var(--brand-600);
  border-radius: 50%;
  animation: ptw-spin 0.8s linear infinite;
}
@keyframes ptw-spin { to { transform: rotate(360deg); } }

.ptw-progress-track {
  height: 6px; border-radius: var(--r-pill); background: var(--surface-200);
  overflow: hidden; margin-top: var(--sp-4);
}
.ptw-progress-fill {
  height: 100%; width: 35%; background: var(--brand-500); border-radius: var(--r-pill);
  animation: ptw-indeterminate 1.2s ease-in-out infinite;
}
@keyframes ptw-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(280%); }
}

.ptw-note {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--surface-50);
  border: 1px solid var(--border);
}
.ptw-note p { font-size: var(--fs-13); color: var(--ink-400); }