.claim-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 18px; align-items: start; }
.stepper { display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.step-tab { position: relative; display: flex; min-height: 68px; align-items: center; gap: 10px; padding: 12px 16px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink-soft); text-align: left; }
.step-tab:last-child { border-right: 0; }
.step-number { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; font: 11px "IBM Plex Mono", monospace; }
.step-tab span:last-child { font-size: 12px; font-weight: 600; }
.step-tab.active { color: var(--ink); box-shadow: inset 0 -3px var(--cyan); }
.step-tab.active .step-number { border-color: var(--cyan); background: var(--cyan-wash); color: var(--cyan-dark); }
.step-tab.complete .step-number { border-color: var(--green); background: var(--green); color: white; }
.step-pane { display: none; }
.step-pane.active { display: block; }
.step-pane .panel-body { min-height: 370px; }
.step-copy { margin: 4px 0 22px; color: var(--ink-soft); font-size: 13px; }
.step-actions { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--line); }
/* Forward cluster keeps the gate hint beside the Next button so the reason a
 * step cannot advance sits next to the control the user just tried to press,
 * instead of being buried above the fold in a long medication list. */
.step-actions-forward { display: flex; align-items: center; gap: 12px; min-width: 0; justify-content: flex-end; }
.step-gate-hint { display: none; max-width: 420px; color: var(--ink-soft); font-size: 12px; line-height: 1.4; text-align: right; }
.step-gate-hint.visible { display: block; }
/* Escalates to the error tone only once the user has engaged with the rows, so
 * an untouched form reads as guidance rather than as a failure. */
.step-gate-hint.blocked { color: #b74536; }
.next-step[disabled] { cursor: not-allowed; opacity: .55; }
.claim-file-card { margin-top: 14px; }
.processing-grid { display: grid; gap: 10px; }
.processing-row { display: grid; grid-template-columns: 35px 1fr auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 5px; }
.processing-row .process-symbol { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: #edf1f0; color: var(--ink-soft); }
.processing-row .process-symbol svg { width: 16px; }
.processing-row.active { border-color: var(--cyan); background: #f7fbfa; }
.processing-row.active .process-symbol { background: var(--cyan-wash); color: var(--cyan-dark); }
.processing-row.complete .process-symbol { background: var(--green-wash); color: var(--green); }
.processing-row strong, .processing-row small { display: block; }
.processing-row small { color: var(--ink-soft); }
.summary { position: sticky; top: 98px; }
.summary-top { padding: 20px; background: var(--navy); color: white; }
.summary-top p { margin: 7px 0 0; color: #b8c9cc; font-size: 12px; }
.summary-list { padding: 6px 20px; }
.summary-row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.summary-row:last-child { border-bottom: 0; }
.summary-row span { color: var(--ink-soft); }
.summary-row strong { max-width: 170px; text-align: right; }
.summary-submit { width: calc(100% - 40px); margin: 14px 20px 20px; }
.lock-notice { display: none; align-items: center; gap: 9px; margin-bottom: 16px; padding: 10px 12px; background: var(--amber-wash); color: #805a13; font-size: 12px; }
.lock-notice.visible { display: flex; }
.coverage-grid { margin-top: 18px; }
.source-record { min-height: 250px; }
.source-record-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.source-record-grid > div { min-height: 96px; padding: 16px; border: 1px solid var(--line); border-radius: 5px; background: #f8faf9; }
.source-record-grid span, .source-record-grid strong { display: block; }
.source-record-grid span { margin-bottom: 7px; color: var(--ink-soft); font: 10px "IBM Plex Mono", monospace; text-transform: uppercase; }
.source-record-grid a { color: var(--cyan-dark); text-decoration: underline; }

/* Phase 3: Mode choice, medication rows, upload zone, review */
.mode-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.mode-card { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: white; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.mode-card:hover { border-color: var(--cyan); background: #f7fbfa; }
.mode-card.selected { border-color: var(--cyan); background: var(--cyan-wash); }
.mode-icon { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 4px; border-radius: 8px; background: #edf1f0; color: var(--cyan-dark); }
.mode-icon svg { width: 19px; }
.mode-card strong { font-size: 14px; }
.mode-card small { color: var(--ink-soft); font-size: 12px; }
.mode-workspace { min-height: 120px; }
.upload-zone { display: grid; min-height: 220px; place-items: center; padding: 30px; border: 2px dashed var(--line); border-radius: var(--radius); background: #f8faf9; text-align: center; }
.upload-zone.dragging { border-color: var(--cyan); background: var(--cyan-wash); }
.dropzone-copy { display: grid; gap: 10px; place-items: center; }
.dropzone-copy p { margin: 0; color: var(--ink-soft); font-size: 13px; }
/* Camera + browse controls side by side (grid children stack vertically, so
 * the buttons need a wrapping flex group). Spacing to the copy above comes
 * from .dropzone-copy's 10px gap; no extra margins required. */
.dropzone-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dropzone-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: #e8edeb; color: var(--cyan-dark); }
.dropzone-icon svg { width: 22px; }
.analysis-state { display: grid; min-height: 180px; place-items: center; gap: 10px; color: var(--ink-soft); text-align: center; }
.analysis-state svg { width: 28px; color: var(--cyan); animation: spin .8s linear infinite; }
.analysis-error { display: flex; align-items: center; gap: 13px; padding: 20px; border: 1px solid #efc2bb; border-radius: var(--radius); background: #fff9f7; color: #8c4439; }
.analysis-error svg { width: 25px; flex: 0 0 auto; }
.analysis-error p { margin: 3px 0 8px; font-size: 12px; }
.upload-result { margin-bottom: 18px; }
.upload-preview { max-width: 100%; max-height: 280px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #e7ecea; }
.upload-preview img { display: block; width: 100%; max-height: 280px; object-fit: contain; }
.upload-actions { margin-top: 8px; }
.med-rows-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.med-rows-header strong { font-size: 14px; }
.medication-rows { display: grid; gap: 14px; }
.med-row { padding: 16px; border: 1px solid var(--line); border-radius: 5px; background: #f8faf9; }
.med-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.med-row-head strong { font-size: 12px; color: var(--cyan-dark); font-family: "IBM Plex Mono", monospace; }
.med-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.med-custom-field { grid-column: 1 / -1; }
.review-grid { display: grid; gap: 16px; }
.review-section { display: flex; flex-direction: column; gap: 5px; padding: 14px; border: 1px solid var(--line); border-radius: 5px; background: #f8faf9; }
.review-section .med-label { margin-bottom: 0; }
.review-section strong { font-size: 13px; }
.review-med { display: flex; flex-direction: column; gap: 2px; }
.review-med small { color: var(--ink-soft); font-size: 11px; }
.review-issues { display: flex; gap: 10px; padding: 14px; border: 1px solid #efc2bb; border-radius: 5px; background: #fff9f7; color: #8c4439; }
.review-issues svg { width: 20px; flex: 0 0 auto; }
.review-issues ul { margin: 4px 0 0; padding-left: 18px; font-size: 12px; }
.review-valid { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--green); border-radius: 5px; background: var(--green-wash); color: var(--green); }
.review-valid svg { width: 20px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Automatic Claims step transitions mirror the established RxVerify workspace
 * Clinical Fade lifecycle (css/page-transitions.css + js/workspace-router.js),
 * scoped to .step-pane so the sidebar/stepper/summary shell stays stable.
 * The currently visible SOURCE pane fades out + drops 6px over 300ms (via the
 * transition on .step-pane.active), the swap happens after the leave, then the
 * destination receives the 300ms/6px/ease entrance animation on a committed
 * frame. Reduced-motion suppression is driven ONLY by the root class
 * `rx-reduced-motion` (set by motion-preference.js from the resolved
 * preference), mirroring page-transitions.css and workspace-router.js: the OS
 * prefers-reduced-motion query is deliberately NOT consulted, so the step fade
 * works whether or not Windows animations are enabled, and only the explicit
 * 'reduced' opt-in collapses it to an immediate swap. Manual navigation (Back
 * buttons, step tabs, Validate, Submit) keeps the immediate CSS display swap
 * with no fade — only the automatic Coverage→Medications and
 * Medications→Review advances animate. */
.step-pane.active {
  transition: opacity 300ms ease, transform 300ms ease;
}
.step-pane.rx-step-leaving {
  opacity: 0;
  transform: translateY(6px);
}
.step-pane.rx-step-entering {
  opacity: 0;
  transform: translateY(6px);
  animation: rx-step-enter 300ms ease forwards;
}
@keyframes rx-step-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
html.rx-reduced-motion .step-pane.active,
html.rx-reduced-motion .step-pane.rx-step-leaving,
html.rx-reduced-motion .step-pane.rx-step-entering {
  opacity: 1;
  transform: none;
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
}

@media (max-width: 1040px) { .claim-layout { grid-template-columns: 1fr; } .summary { position: static; } }
@media (max-width: 680px) { .stepper { grid-template-columns: 1fr 1fr; } .step-tab:nth-child(2) { border-right: 0; } .step-tab:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .step-pane .panel-body { min-height: auto; } .source-record-grid { grid-template-columns: 1fr; } .mode-choice { grid-template-columns: 1fr; } .med-grid { grid-template-columns: 1fr; } .step-actions { flex-direction: column; align-items: stretch; } .step-actions-forward { flex-direction: column; align-items: stretch; } .step-gate-hint { max-width: none; text-align: left; } }