Page polish + print styles + skeletons + responsive

Case view:
- Header card gets gold right-border, serif display title, pill-style
  action links with gold hover
- Document groups: gold-underlined section headers, hover rows with
  parchment background

Wizard (new case):
- Step tabs in display font with separators; active/done states use
  navy/success colors with proper background contrast
- Nav buttons separated by hairline divider

Skills page:
- Pill badges for ok/warn, gold icon, hover elevation

Upload zone:
- Larger dashed border, serif header, gold-wash hover state

Loading skeletons:
- .skeleton / .skeleton-line classes with shimmer animation
- Case list shows 3 skeleton cards while loading
- Style report shows skeleton hero while loading

Empty states:
- Case list gets ornamental ❦ + emotional copy in display font
- Error messages include underlying error detail

Print stylesheet:
- Hides header/nav/sidebar/buttons
- Forces card borders and page-break-inside for portrait printing
- Expands details elements so content prints

Responsive:
- Mobile: simplified hero, narrower process panel, wrapping header
- Tablet: home grid collapses to single column

Fixes:
- DONUT_COLORS reverts to hex literals (was var(--color-gold) string
  which doesn't interpolate in conic-gradient reliably across browsers)
- Sig-phrase headline now prefers clean phrases over template-heavy ones

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web/static/design-system.css

@@ -242,3 +242,80 @@ a:hover { color: var(--color-gold); }
   );
   margin: var(--space-6) 0;
 }
+
+/* ── Loading skeleton ───────────────────────────────── */
+.skeleton {
+  background: linear-gradient(
+    100deg,
+    var(--color-cream-deep) 30%,
+    var(--color-parchment) 50%,
+    var(--color-cream-deep) 70%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.4s linear infinite;
+  border-radius: var(--radius);
+  color: transparent;
+  user-select: none;
+}
+@keyframes skeleton-shimmer {
+  from { background-position: 100% 0; }
+  to { background-position: -100% 0; }
+}
+.skeleton-line {
+  height: 0.9em;
+  margin: 4px 0;
+  border-radius: var(--radius-sm);
+}
+.skeleton-line.short { width: 40%; }
+.skeleton-line.medium { width: 70%; }
+
+/* ── Print — optimized for Dafna printing the portrait ─ */
+@media print {
+  :root {
+    --color-bg: #fff;
+    --color-surface: #fff;
+    --color-navy: #000;
+    --color-ink: #000;
+    --color-ink-muted: #444;
+  }
+  body { background: #fff; color: #000; font-size: 11pt; }
+  header, .status-bar, .process-panel, .toast, .btn, nav,
+  #navDiagnostics, .home-sidebar, .home-hero-actions,
+  #processPanel, #trainingAnalysisCard, #trainingTasksCard {
+    display: none !important;
+  }
+  .main { max-width: 100% !important; padding: 0 !important; }
+  .page { display: none !important; }
+  .page.active { display: block !important; }
+  .portrait-card, .card {
+    box-shadow: none !important;
+    border: 1px solid #ccc !important;
+    page-break-inside: avoid;
+    margin-bottom: 16px !important;
+  }
+  .portrait-headline {
+    background: #fafafa !important;
+    border-right: 3px solid #000 !important;
+    color: #000 !important;
+  }
+  h1, h2, h3 { color: #000 !important; page-break-after: avoid; }
+  .growth-curve, .donut, .hero-timeline { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+  .phrase-filters, .btn, button { display: none !important; }
+  /* Force expand all details */
+  details { display: block !important; }
+  summary::marker, summary::-webkit-details-marker { display: none; }
+}
+
+/* ── Responsive (desktop-first, minimal mobile) ────── */
+@media (max-width: 900px) {
+  .main { padding: var(--space-5) var(--space-4); }
+  header { padding: 14px 20px; flex-wrap: wrap; gap: 10px; }
+  header nav { gap: 2px; }
+  header nav a { padding: 6px 10px; font-size: 0.82em; }
+  .home-hero-title { font-size: 2em; }
+  .style-report-header h1 { font-size: 2em; }
+  .portrait-card { padding: var(--space-6) var(--space-5); }
+  .portrait-hero .hero-body { grid-template-columns: 1fr; }
+  .hero-donut-wrap { justify-content: center; }
+  .process-panel { width: 280px; }
+}