.engagement-launch { border-color: rgba(255,255,255,.65); background: #fff; color: var(--brand); }
.engagement-backdrop { position: fixed; z-index: 45; inset: 0; display: flex; justify-content: flex-end; background: rgba(5,18,35,.58); }
.engagement-backdrop[hidden], .engagement-panel[hidden] { display: none; }
.engagement-drawer { width: min(96vw, 1180px); height: 100%; overflow-y: auto; background: var(--surface-soft); box-shadow: -14px 0 34px rgba(10,25,45,.22); }
.engagement-header { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: #fff; }
.engagement-header h2 { margin: 2px 0 0; color: var(--brand); }
.engagement-safety { display: flex; gap: 9px; padding: 10px 20px; background: #fff7df; color: #6b4a00; font-size: .78rem; }
.engagement-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 12px 20px; }
.engagement-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 12px; }
.engagement-routes { display: flex; gap: 6px; padding: 0 20px 12px; overflow-x: auto; scrollbar-width: thin; }
.engagement-routes .button { flex: 0 0 auto; white-space: nowrap; }
.engagement-routes button[aria-selected="true"] { background: var(--brand); color: #fff; }
.engagement-canonical { padding: 0 20px 20px; }
.canonical-heading { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.canonical-heading h3 { margin: 0; color: var(--brand); }
.canonical-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.8fr); gap: 12px; }
.engagement-tabs button[aria-selected="true"] { background: var(--brand); color: #fff; }
.engagement-state { display: grid; gap: 3px; margin: 0 20px 12px; padding: 10px 12px; border-left: 4px solid var(--brand-action); border-radius: 8px; background: #eef5ff; }
.engagement-state[data-kind="error"] { border-color: var(--negative); background: #fff0ee; color: #8e1d14; }
.engagement-state[data-kind="disabled"] { border-color: #7b8797; background: #edf0f4; }
.engagement-state[data-kind="loading"] { border-color: #9a6700; background: #fff7df; }
.engagement-panel { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr); gap: 12px; padding: 0 20px 20px; }
.engagement-card { min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 13px; background: #fff; box-shadow: 0 5px 18px rgba(25,54,94,.05); }
.engagement-card h3 { margin: 0 0 10px; color: var(--brand); font-size: .94rem; }
.engagement-card form, .engagement-wizard { display: grid; gap: 10px; }
.engagement-step { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.engagement-step legend { padding: 0 6px; color: var(--brand); font-size: .74rem; font-weight: 800; }
.engagement-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.engagement-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.engagement-list li { display: grid; gap: 3px; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
.engagement-list span, .engagement-audit { overflow-wrap: anywhere; color: var(--muted); font-size: .72rem; }
.engagement-audit { margin: 0 20px 20px; font-family: ui-monospace, monospace; }
@media (max-width: 1024px) { .engagement-drawer { width: 100vw; } }
@media (max-width: 767px) { .engagement-header, .engagement-toolbar, .engagement-safety { padding-left: 12px; padding-right: 12px; } .engagement-safety, .engagement-toolbar { align-items: stretch; flex-direction: column; } .engagement-tabs, .engagement-routes { padding: 0 12px 10px; } .engagement-state { margin: 0 12px 10px; } .engagement-panel { grid-template-columns: 1fr; padding: 0 12px 14px; } .engagement-canonical { padding: 0 12px 14px; } .canonical-grid { grid-template-columns: 1fr; } .engagement-audit { margin: 0 12px 16px; } }
@media (max-width: 380px) { .engagement-tabs .button, .engagement-actions .button { width: 100%; } .engagement-card { padding: 12px; } }
@media (prefers-reduced-motion: no-preference) { .engagement-drawer { animation: engagement-slide 180ms ease-out both; } @keyframes engagement-slide { from { transform: translateX(24px); opacity: .7; } to { transform: translateX(0); opacity: 1; } } }
@media (prefers-reduced-motion: reduce) { .engagement-drawer { animation: none !important; scroll-behavior: auto !important; } }