.nexus-flow-page { display: grid; gap: var(--ui-space-4); min-width: 0; }
.nexus-flow-page > .op-page-header { margin-bottom: 0; }
.nexus-flow-kicker { display: block; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nexus-flow-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); }
.nexus-flow-guide > div { display: flex; align-items: flex-start; gap: var(--ui-space-3); min-width: 0; padding: var(--ui-space-4); border: 1px solid var(--border); border-radius: var(--ui-radius-md); background: var(--surface); }
.nexus-flow-guide .material-symbols-rounded, .nexus-flow-next > .material-symbols-rounded { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: var(--ui-radius-sm); background: var(--accent-l); color: var(--accent); font-size: 20px; }
.nexus-flow-guide strong, .nexus-flow-next strong { display: block; color: var(--text); font-size: 13px; }
.nexus-flow-guide p, .nexus-flow-next p { margin: 4px 0 0; color: var(--text2); font-size: 12px; line-height: 1.5; }
.nexus-flow-list { display: grid; gap: var(--ui-space-3); min-width: 0; }
.nexus-flow-card { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4); min-width: 0; padding: var(--ui-space-4) var(--ui-space-5); border: 1px solid var(--border); border-radius: var(--ui-radius-md); background: var(--surface); }
.nexus-flow-card > div:first-child { min-width: 0; }
.nexus-flow-card h2, .nexus-flow-card strong { display: block; margin: 4px 0; color: var(--text); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.nexus-flow-card p { margin: 4px 0; color: var(--text2); font-size: 12px; overflow-wrap: anywhere; }
.nexus-flow-card small { color: var(--text3); font-size: 11px; overflow-wrap: anywhere; }
.nexus-flow-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--ui-space-2); flex-wrap: wrap; }

dialog.nexus-flow-dialog { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--ui-radius-lg); background: var(--ui-surface-elevated); color: var(--text); box-shadow: var(--ui-shadow-modal); }
dialog.nexus-flow-dialog::backdrop { background: rgba(2,6,23,.68); }
.nexus-flow-shell { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); min-width: 0; }
.nexus-flow-head, .nexus-flow-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); flex: 0 0 auto; min-width: 0; padding: 16px 20px; }
.nexus-flow-head { border-bottom: 1px solid var(--border); }
.nexus-flow-head > div { min-width: 0; }
.nexus-flow-head .modal-kicker { display: block; margin-bottom: var(--ui-space-1); color: var(--ui-text-muted); font-size: 10px; font-weight: 700; }
.nexus-flow-head .modal-title { margin: 0; overflow-wrap: anywhere; }
.nexus-flow-head .icon-btn { flex: 0 0 40px; min-width: 40px; min-height: 40px; padding: 0; }
.nexus-flow-body { flex: 1 1 auto; min-height: 0; min-width: 0; padding: 20px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.nexus-flow-body > :first-child { margin-top: 0; }
.nexus-flow-body p, .nexus-flow-body li, .nexus-flow-body dd { overflow-wrap: anywhere; }
.nexus-flow-intro { margin: 0 0 18px; color: var(--text2); font-size: 13px; line-height: 1.55; }
.nexus-flow-foot { justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--border); }
.nexus-flow-foot .btn { min-height: 42px; }
.nexus-flow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-4); }
.nexus-flow-body label { display: grid; gap: 6px; min-width: 0; margin: 0 0 16px; color: var(--text2); font-size: 11px; font-weight: 700; }
.nexus-flow-grid label { margin: 0; }
.nexus-flow-grid + label { margin-top: 16px; }
.nexus-flow-body input, .nexus-flow-body select, .nexus-flow-body textarea { width: 100%; min-width: 0; min-height: 42px; padding: 9px 12px; border: 1px solid var(--border2, var(--border)); border-radius: var(--ui-radius-sm); background: var(--surface2); color: var(--text); font: inherit; font-size: 16px; font-weight: 400; }
.nexus-flow-body textarea { min-height: 88px; line-height: 1.5; resize: vertical; }
.nexus-flow-body input:focus, .nexus-flow-body select:focus, .nexus-flow-body textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 1px; border-color: var(--accent); }
.nexus-flow-hint { display: block; color: var(--text3); font-size: 11px; font-weight: 400; line-height: 1.45; }
.nexus-flow-next { display: flex; align-items: flex-start; gap: var(--ui-space-3); margin-top: 18px; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--ui-radius-md); background: var(--accent-l); }
.nexus-flow-next > .material-symbols-rounded { background: var(--surface); }
.nexus-flow-section { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--border); }
.nexus-flow-section h3 { margin: 0 0 var(--ui-space-3); font: 700 15px/1.4 var(--ui-font-sans); }
.nexus-flow-section h4 { margin: var(--ui-space-4) 0 var(--ui-space-2); font: 700 13px/1.4 var(--ui-font-sans); }
.nexus-flow-answer { white-space: pre-wrap; }
.nexus-flow-error { color: var(--ui-danger); font-size: 13px; line-height: 1.5; }
.nexus-flow-error:empty { display: none; }
.nexus-flow-body [hidden] { display: none !important; }
.nexus-flow-section dl { display: grid; grid-template-columns: minmax(100px, 170px) minmax(0, 1fr); gap: 8px; overflow-wrap: anywhere; }
.nexus-flow-section dt { font-weight: 700; }
.nexus-flow-section dd { margin: 0; }
.nexus-flow-body canvas { display: block; width: 100%; height: auto; margin-top: -8px; border: 1px solid var(--border); border-radius: var(--ui-radius-sm); background: #fff; touch-action: none; }
.nexus-flow-clear { margin-top: 10px; }

/* Older contract dialogs use the same visual shell as the other detail windows. */
dialog.confirm-dialog:has(> .confirm-dialog-card) { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); border-color: var(--border); border-radius: var(--ui-radius-lg); background: var(--ui-surface-elevated); }
dialog.confirm-dialog > .confirm-dialog-card { max-width: none !important; padding: 20px; color: var(--text); }
dialog.confirm-dialog > .confirm-dialog-card h3 { margin: -20px -20px 18px; padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 20px; line-height: 1.3; }
dialog.confirm-dialog > .confirm-dialog-card .form-input { display: block; width: 100%; margin-bottom: 12px; }
dialog.confirm-dialog > .confirm-dialog-card .confirm-actions { margin: 18px -20px -20px; padding: 14px 20px; border-top: 1px solid var(--border); }

@media (max-width: 640px) {
  .nexus-flow-guide { grid-template-columns: 1fr; }
  .nexus-flow-card { align-items: stretch; flex-direction: column; padding: 16px; }
  .nexus-flow-actions { justify-content: space-between; }
  .nexus-flow-actions .btn { flex: 1; }
  dialog.nexus-flow-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .nexus-flow-shell { height: 100%; max-height: none; }
  .nexus-flow-head { padding: max(14px, env(safe-area-inset-top)) 16px 14px; }
  .nexus-flow-body { padding: 17px 16px; }
  .nexus-flow-grid, .nexus-flow-section dl { grid-template-columns: 1fr; }
  .nexus-flow-grid { gap: var(--ui-space-4); }
  .nexus-flow-foot { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .nexus-flow-foot .btn { flex: 1 1 100%; }
  dialog.confirm-dialog:has(> .confirm-dialog-card) { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  dialog.confirm-dialog > .confirm-dialog-card { min-height: 100%; padding: 16px; }
  dialog.confirm-dialog > .confirm-dialog-card h3 { margin: -16px -16px 18px; padding: max(16px, env(safe-area-inset-top)) 16px 16px; }
  dialog.confirm-dialog > .confirm-dialog-card .confirm-actions { margin: 18px -16px -16px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
}