/* Route picker (rp) — used on the main app and the letter page. */
.rp-backdrop { position: fixed; inset: 0; z-index: 1450; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px); font-family: inherit; }
.rp-dialog { display: flex; flex-direction: column; width: min(620px, 100%); max-height: min(88vh, 820px); border-radius: 20px; background: var(--oa-bg, #f8fafc); color: var(--oa-ink, #0f172a); box-shadow: var(--oa-shadow-modal, 0 30px 80px rgba(0, 0, 0, 0.35)); overflow: hidden; }
.rp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--oa-surface, #fff); border-bottom: 1px solid var(--oa-line, #e2e8f0); }
.rp-head h3 { margin: 0; font-size: 1.02rem; font-weight: 900; }
.rp-head small { font-size: 0.76rem; color: var(--oa-ink-faint, #64748b); }
.rp-close { width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--oa-surface-muted, #f1f5f9); color: var(--oa-ink-soft, #334155); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.rp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; overflow-y: auto; }
.rp-routes { display: flex; flex-direction: column; gap: 10px; }
.rp-route { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 14px 16px; border-radius: 15px; border: 2px solid var(--oa-line, #e2e8f0); background: var(--oa-surface, #fff); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.rp-route input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rp-route:hover { border-color: color-mix(in srgb, var(--oa-brand, #2563eb) 40%, var(--oa-line, #e2e8f0)); }
.rp-route.is-selected { border-color: var(--oa-brand, #2563eb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oa-brand, #2563eb) 15%, transparent); }
.rp-route:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--oa-brand-glow, rgba(37, 99, 235, 0.3)); }
.rp-route.is-blocked { cursor: not-allowed; background: var(--oa-surface-soft, #f8fafc); opacity: 0.8; }
.rp-route.is-blocked input { cursor: not-allowed; }
.rp-route-head { display: flex; align-items: center; gap: 8px; }
.rp-route-head strong { font-size: 0.92rem; }
.rp-badge { padding: 0 8px; border-radius: 99px; background: color-mix(in srgb, var(--oa-brand, #2563eb) 12%, transparent); color: var(--oa-brand, #2563eb); font-size: 0.66rem; font-weight: 800; line-height: 1.9; }
.rp-desc { margin: 0; font-size: 0.76rem; line-height: 1.8; color: var(--oa-ink-soft, #475569); }
.rp-problem { margin: 0; font-size: 0.76rem; line-height: 1.8; color: var(--oa-danger, #dc2626); font-weight: 700; }
.rp-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rp-steps li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rp-steps li > div { display: flex; flex-direction: column; min-width: 0; }
.rp-steps strong { font-size: 0.8rem; }
.rp-steps small { font-size: 0.7rem; color: var(--oa-ink-faint, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 0.7rem; font-weight: 900; flex-shrink: 0; }
.rp-brand { background: var(--oa-brand, #2563eb); }
.rp-success { background: var(--oa-success, #16a34a); }
.rp-violet { background: #7c3aed; }
.rp-warning { background: var(--oa-warning, #d97706); }
.rp-teal { background: #0d9488; }
.rp-muted { background: #94a3b8; }
.rp-note { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.rp-note span { font-size: 0.76rem; font-weight: 800; color: var(--oa-ink-soft, #475569); }
.rp-note textarea { width: 100%; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--oa-line, #e2e8f0); background: var(--oa-surface, #fff); color: var(--oa-ink, #0f172a); font-family: inherit; font-size: 0.86rem; line-height: 1.8; resize: vertical; }
.rp-note textarea:focus { outline: 0; border-color: var(--oa-brand, #2563eb); box-shadow: 0 0 0 3px var(--oa-brand-glow, rgba(37, 99, 235, 0.25)); }
.rp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; background: var(--oa-surface, #fff); border-top: 1px solid var(--oa-line, #e2e8f0); }
.rp-error { flex: 1; min-width: 180px; margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--oa-danger, #dc2626); }
.rp-btn { padding: 9px 18px; border-radius: 11px; border: 1px solid transparent; font-family: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; }
.rp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rp-btn-primary { background: var(--oa-success, #16a34a); color: #fff; }
.rp-btn-ghost { background: var(--oa-surface, #fff); color: var(--oa-ink-soft, #475569); border-color: var(--oa-line, #e2e8f0); }

@media (max-width: 560px) {
    .rp-backdrop { padding: 0; align-items: stretch; }
    .rp-dialog { width: 100%; max-height: none; height: 100%; border-radius: 0; }
    .rp-foot .rp-btn { flex: 1 1 auto; }
}