/* =============================================
   ClaimMax — Claim Flow Styles
   ============================================= */

.claim-main {
  min-height: 100svh;
  padding-top: calc(var(--space-20) + var(--space-8));
  padding-bottom: var(--space-24);
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
  background: var(--color-bg);
}

.claim-container {
  max-width: 740px;
  margin: 0 auto;
}

.claim-header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.claim-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-2);
}

.claim-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

/* ── STEP PANELS ─────────────────────────── */
.step-panel {
  display: none;
}
.step-panel.active {
  display: block;
  animation: fadeSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.panel-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.panel-desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  line-height: 1.6;
  max-width: none;
}

.panel-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  flex-wrap: wrap;
}

/* ── FORM ────────────────────────────────── */
.form-group {
  margin-bottom: var(--space-5);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
  display: block;
}

/* ── UPLOAD PREVIEW ──────────────────────── */
.upload-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-highlight);
  border: 1px solid color-mix(in oklab, var(--color-primary), transparent 70%);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
}

.upload-preview-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.upload-title {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.upload-link { color: var(--color-primary); text-decoration: underline; cursor: pointer; }
.upload-note { font-size: var(--text-xs); color: var(--color-text-faint); }

/* Photo upload zone */
.photo-upload-zone {
  padding: var(--space-8);
}

/* Photo grid */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.photo-thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}
.photo-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ── EVIDENCE CHECKLIST ──────────────────── */
.evidence-checklist {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}

.evidence-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.checklist-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

.checklist-check {
  width: 18px; height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── SCORE CARD ──────────────────────────── */
.score-card { text-align: center; }

/* Analyzing spinner */
.analyzing-spinner {
  width: 48px; height: 48px;
  border: 3px solid var(--color-surface-offset);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto var(--space-6);
}

@keyframes spin { to { transform: rotate(360deg); } }

.progress-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  text-align: center;
}

/* Score result */
.score-result { text-align: left; }

.score-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.score-breakdown {
  background: var(--color-surface-offset);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

@media (max-width: 500px) {
  .score-breakdown { grid-template-columns: 1fr; }
}

.breakdown-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.breakdown-item.highlight {
  padding: var(--space-3);
  background: var(--color-primary-highlight);
  border-radius: var(--radius-lg);
}

.breakdown-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
}

.breakdown-val {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.breakdown-val.muted { color: var(--color-text-muted); }
.breakdown-val.primary { color: var(--color-text); }
.breakdown-val.green { color: var(--color-primary); }

/* Score findings */
.score-findings { margin-bottom: var(--space-8); }

.findings-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.findings-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }

.finding-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.finding-good { color: var(--color-text); }
.finding-good svg { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.finding-warn svg { color: var(--color-warning); flex-shrink: 0; margin-top: 2px; }

/* ── LETTER PREVIEW ──────────────────────── */
.letter-preview {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
  font-family: 'Georgia', serif;
  font-size: var(--text-sm);
  line-height: 1.8;
}

.letter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

.letter-date {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-family: var(--font-body);
}

.letter-body p { max-width: none; color: var(--color-text); }
.letter-body ul { padding-left: var(--space-6); margin: var(--space-3) 0; }
.letter-body li { color: var(--color-text); margin-bottom: var(--space-2); max-width: none; }

/* ── DEADLINE TRACKER ────────────────────── */
.deadline-tracker {
  background: color-mix(in oklab, var(--color-warning), transparent 90%);
  border: 1px solid color-mix(in oklab, var(--color-warning), transparent 70%);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.deadline-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.deadline-header h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-warning);
}

.deadline-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
}

.deadline-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.deadline-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
}

.deadline-val {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-text);
}

.deadline-red { color: var(--color-warning); }