/* Word to PDF - scoped additions on top of the shared marketing design
   system (tokens.css / components.css already loaded via renderHead()).
   Upload UI mirrors ../pdf-to-word/styles.css conventions (ptw-*); the
   rendered-document preview/print rules are new to this tool. Prefix: wtp. */

.wtp-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);
}
.wtp-dropzone:hover,
.wtp-dropzone:focus-visible {
  border-color: var(--brand-500);
  background: var(--brand-50);
  outline: none;
}
.wtp-dropzone.wtp-dragover {
  border-color: var(--brand-600);
  background: var(--brand-100);
}
.wtp-dropzone h4 { font-size: var(--fs-16); }
.wtp-dropzone p { font-size: var(--fs-14); color: var(--ink-400); margin-top: var(--sp-2); }
.wtp-format-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-4); padding: 4px 10px;
  border-radius: var(--r-pill); background: var(--surface-200); color: var(--ink-600);
  font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.03em;
}

.wtp-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);
}
.wtp-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);
}
.wtp-file-icon svg { width: 20px; height: 20px; }
.wtp-file-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wtp-file-meta strong { font-size: var(--fs-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtp-file-meta span { font-size: var(--fs-13); color: var(--ink-400); }

.wtp-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: wtp-spin 0.8s linear infinite;
}
@keyframes wtp-spin { to { transform: rotate(360deg); } }

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

.wtp-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);
}
.wtp-note p { font-size: var(--fs-13); color: var(--ink-400); }
.wtp-note p + p { margin-top: var(--sp-2); }

.wtp-warning-banner { margin-top: var(--sp-4); }

/* -------------------- Rendered document preview -------------------- */
.wtp-preview-wrap { margin-top: var(--sp-6); }
.wtp-preview-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.wtp-preview-top b { color: var(--ink-700); font-size: var(--fs-12); letter-spacing: 0.03em; }
.wtp-preview-top span { color: var(--ink-400); font-size: var(--fs-12); }
.wtp-preview-scroll {
  max-height: 720px; overflow: auto; padding: var(--sp-6) 0;
  background: var(--surface-100); border-radius: var(--r-lg); border: 1px solid var(--border);
  display: flex; justify-content: center;
}

/* The reconstructed Word document itself - font/size/line-height are set
   from the source DOCX's Normal style and per-run formatting; padding here
   simulates the source page margins for the ON-SCREEN preview only (print
   removes it and relies on the real @page margin instead - see below). */
.wtp-sheet {
  background: #fff; color: #1a1a1a; box-shadow: var(--shadow-md); border: 1px solid var(--border-strong);
  font-family: Arial, Helvetica, sans-serif; font-size: 10.5pt;
  box-sizing: border-box; flex: none;
}
/* Every paragraph carries its own resolved margin-top/margin-bottom/
   line-height as an inline style (see resolveParagraphSpacing/pickSpacing
   in core.js, which reads the source document's actual docDefaults/style
   spacing) - this class only supplies wrapping behaviour, not spacing. */
.wtp-p { margin: 0; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; }
/* The site-wide reset (base.css) sets `ul, ol { list-style: none }` for
   navigation menus etc. - explicitly restored here since this is real
   document content, not chrome, and bullets/numbers must be visible. */
ul.wtp-list { list-style-type: disc; }
ol.wtp-list { list-style-type: decimal; }
.wtp-list { margin: 6pt 0; padding-left: 26pt; }
.wtp-list li { list-style: inherit; margin-bottom: 3pt; white-space: pre-wrap; }
.wtp-img { display: inline-block; max-width: 100%; height: auto; }
.wtp-tab { display: inline-block; width: 36pt; }
.wtp-page-break { break-after: page; page-break-after: always; height: 0; }

.wtp-table { border-collapse: collapse; margin: 8pt 0; }
.wtp-table td { border: 0.75pt solid #444; padding: 4pt 6pt; vertical-align: top; font-size: 9pt; }

.wtp-footer { margin-top: 18pt; padding-top: 8pt; border-top: 1px solid #ccc; text-align: center; font-size: 8pt; color: #444; }

.wtp-preview-actions { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.wtp-preview-actions .btn { min-width: 190px; }
.wtp-pdf-status { min-height: 14px; margin: var(--sp-2) 0 0; color: var(--ink-400); text-align: center; font-size: var(--fs-12); }

/* -------------------- Print: only the reconstructed document -------------------- */
@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  body > header, body > .service-hero, body > footer, body > script { display: none !important; }
  #wtp-card, .wtp-preview-top, .wtp-preview-actions, #wtpPdfStatus, .wtp-note { display: none !important; }

  .section { padding: 0 !important; }
  .container { max-width: none !important; width: auto !important; padding: 0 !important; }
  .wtp-preview-wrap { margin: 0 !important; }
  .wtp-preview-scroll { max-height: none !important; overflow: visible !important; padding: 0 !important; background: #fff !important; border: 0 !important; display: block !important; }

  .wtp-sheet {
    width: auto !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; box-shadow: none !important; background: #fff !important; color: #000 !important;
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
  .wtp-table tr, .wtp-img { break-inside: avoid !important; page-break-inside: avoid !important; }
}