/* Anonymous → permanent conversion modal. Used by /shared/conversion-modal.js
   on the SPA dashboard (header guest-session banner click, specialist hard-
   gate) and on the pathway resource page (specialist hard-gate). */

.conversion-modal h3 { margin-bottom: 0.375rem; }
.conv-error { margin-top: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 4px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 0.875rem; }
.conv-cancel-row { text-align: center; margin-top: 1.25rem; font-size: 0.8125rem; color: var(--text-muted, #56586a); }
.conv-cancel-row a { color: var(--text-muted, #56586a); cursor: pointer; text-decoration: underline; }
.conv-cancel-row a:hover { color: var(--text, #1f2338); }

/* Merge picker — radio cards with the native radio visually hidden;
   selection state shown via border + background + inset shadow. */
.conv-merge-options { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.conv-merge-option { display: block; padding: 0.875rem 1rem; border: 1px solid var(--border, #d9d3c7); border-radius: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; background: var(--surface, #fff); position: relative; }
.conv-merge-option:hover { border-color: var(--brand-primary, #4a7c59); }
.conv-merge-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.conv-merge-option span { display: flex; flex-direction: column; gap: 0.125rem; }
.conv-merge-option strong { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; color: var(--text, #1f2338); }
.conv-merge-option small { font-size: 0.8125rem; color: var(--text-muted, #56586a); line-height: 1.35; }
.conv-merge-option:has(input:checked) { border-color: var(--brand-primary, #4a7c59); background: #f0f3ef; box-shadow: inset 0 0 0 1px var(--brand-primary, #4a7c59); }
.conv-merge-option:focus-within { outline: 2px solid var(--brand-primary, #4a7c59); outline-offset: 2px; }

/* Mobile: take the whole screen so cramped phones don't squeeze the form
   into a tiny scrollable rectangle. Breakpoint matches the resource page
   + SPA's mobile header grid layout so the visual treatment switches
   together. */
@media (max-width: 640px) {
  .modal-backdrop:has(.conversion-modal) .modal {
    max-width: none;
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}