/* ==========================================================================
   FormReady — document-pack.css  (page stylesheet, Document Pack tool)
   Owner: Kai (frontend) · Tokens/components come from styles.css +
   components.css (loaded first); this file only adds pack-specific
   layout built from the same :root tokens — no new colours, no page-level
   overrides of shared components. Mobile-first (usable at 390px).
   ========================================================================== */

/* --- step indicator ------------------------------------------------------- */
/* Rio v2: the four step pills ride ONE scrollable row (nowrap +
   overflow-x auto + smooth touch scroll + no visible scrollbar) instead
   of wrapping — the row can never squeeze a pill or push the page
   sideways. The small padding keeps the pills' clay shadows from being
   clipped by the scroll container, balanced by the negative top margin. */
.pack-steps {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  list-style: none;
  margin: calc(var(--space-1) * -1) 0 var(--space-5);
  padding: var(--space-1) var(--space-1) var(--space-2);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}
.pack-steps::-webkit-scrollbar { display: none; }
.pack-step-dot {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-1) var(--space-4);
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-card);
  color: var(--color-muted-foreground);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-clay-sm);
}
.pack-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-muted);
  color: var(--color-muted-foreground);
  font-size: var(--text-xs);
  font-weight: 800;
}
.pack-step-dot.active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}
.pack-step-dot.active .pack-step-num {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.pack-step-dot.done { color: var(--color-accent-strong); }
.pack-step-dot.done .pack-step-num {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

/* --- step 1: niche groups + exam chips ------------------------------------ */
.pack-niche { margin-top: var(--space-6); }
.pack-niche:first-of-type { margin-top: var(--space-4); }
.pack-niche-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

/* --- wizard navigation row ------------------------------------------------- */
.pack-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.pack-nav .btn { flex: 1 1 140px; }
@media (min-width: 768px) {
  .pack-nav .btn { flex: 0 1 auto; min-width: 180px; }
  .pack-nav .btn-ghost { margin-inline-end: auto; }
}

/* --- document cards (steps 2 + 3) ------------------------------------------ */
.pack-doc-list { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.pack-doc-card {
  background: var(--color-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay);
  padding: var(--space-5);
}
@media (min-width: 1440px) { .pack-doc-card { padding: var(--space-6); } }
.pack-doc-card.is-ready { border-color: var(--color-accent); }
.pack-doc-card.is-error { border-color: var(--color-destructive); }
.pack-doc-card.is-skipped { opacity: 0.75; }

.pack-doc-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.pack-doc-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  flex: 1 1 160px;
}
.pack-doc-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-muted-foreground);
}
.pack-doc-status svg { width: 18px; height: 18px; }
.pack-doc-card.is-ready .pack-doc-status { color: var(--color-accent-strong); }
.pack-doc-card.is-error .pack-doc-status { color: var(--color-destructive); }

.pack-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 2px solid var(--color-border);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}
.pack-badge--optional {
  background: var(--color-muted);
  color: var(--color-muted-foreground);
}

.pack-target {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-foreground);
}
.pack-guidance {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-warning-soft);
  border: 2px solid var(--color-warning-border);
  border-radius: var(--radius-md);
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: 700;
}
.pack-doc-meta {
  margin-top: var(--space-2);
  color: var(--color-muted-foreground);
  font-size: var(--text-sm);
}
.pack-doc-note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}
.pack-doc-note--warn { color: var(--color-warning); font-weight: 700; }

/* --- per-doc editor (step 3) ----------------------------------------------- */
.pack-doc-editor { margin-top: var(--space-4); }
.pack-crop-stage {
  position: relative;
  height: 300px;
  margin-top: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-card);
}
.pack-doc-preview {
  margin-top: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-muted);
  padding: var(--space-3);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pack-doc-preview img { border-radius: var(--radius-sm); max-height: 260px; width: auto; max-width: 100%; }
.pack-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.pack-doc-actions .btn { flex: 1 1 150px; }
@media (min-width: 768px) { .pack-doc-actions .btn { flex: 0 1 auto; } }

/* --- step 4: review ---------------------------------------------------------- */
.pack-review-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.pack-review-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-clay-sm);
  padding: var(--space-3) var(--space-4);
}
.pack-review-item.is-ready { border-color: var(--color-accent); }
.pack-review-info { flex: 1; min-width: 0; display: grid; }
.pack-review-name { font-weight: 800; font-size: var(--text-sm); overflow-wrap: anywhere; }
.pack-review-meta {
  color: var(--color-muted-foreground);
  font-size: var(--text-xs);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* --- checklist info rows (live capture / details-only) ---------------------- */
.pack-doc-card--info {
  border-style: dashed;
  box-shadow: none;
  background: var(--color-muted);
}

/* --- step 4: formal checklist summary table --------------------------------- */
.pack-summary-section { margin-top: var(--space-6); }
.pack-summary-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.pack-summary-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.pack-summary-table-wrap::-webkit-scrollbar { display: none; }
.pack-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--color-card);
}
.pack-summary-table th,
.pack-summary-table td {
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.pack-summary-table thead th {
  font-family: var(--font-heading);
  font-weight: 600;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  white-space: nowrap;
}
.pack-summary-table tbody tr.is-ready .pack-summary-status {
  color: var(--color-accent-strong);
  font-weight: 800;
}
.pack-summary-table tbody tr.is-info {
  color: var(--color-muted-foreground);
  background: var(--color-muted);
}
.pack-summary-actions { margin-top: var(--space-3); }

/* --- print: ONLY the checklist summary ---------------------------------------
   Everything else on the page (site chrome, steps, wizard panels, review
   list, buttons) is hidden; the summary section prints clean. */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .toast-region,
  .pack-steps,
  #pkStepLabel,
  #pkPanel1,
  #pkPanel2,
  #pkPanel3,
  #pkPanel4 .card > *:not(.pack-summary-section),
  .pack-summary-actions,
  .section {
    display: none !important;
  }
  .pack-summary-section { margin-top: 0; }
  .pack-summary-table th,
  .pack-summary-table td {
    border: 1px solid #999;
    box-shadow: none;
  }
  .pack-summary-table thead th { background: #eee; color: #111; }
  .pack-doc-card, .pack-review-item, #pkPanel4 .card { box-shadow: none; border: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pack-step-dot, .pack-doc-card, .pack-review-item { transition: none !important; }
  .pack-steps, .pack-summary-table-wrap { scroll-behavior: auto; }
}