/* Arkum Labs — Feedback (Modal) */
.ark-modal-scrim {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
  background: var(--scrim);
  backdrop-filter: blur(4px);
  animation: ark-scrim-in var(--dur-base) var(--ease-standard);
}
@keyframes ark-scrim-in { from { opacity: 0; } to { opacity: 1; } }

.ark-modal {
  position: relative;
  width: 100%; max-width: 480px; max-height: calc(100vh - var(--space-12));
  display: flex; flex-direction: column;
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: ark-modal-in var(--dur-slow) var(--ease-out);
}
@keyframes ark-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.ark-modal--sm { max-width: 380px; }
.ark-modal--lg { max-width: 680px; }
/* portal slit along the top edge */
.ark-modal::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 64px; height: 2px; background: var(--slit-cyan);
}
.ark-modal__header {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-4);
}
.ark-modal__titles { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.ark-modal__eyebrow { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); }
.ark-modal__title { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: 0; }
.ark-modal__close {
  flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted); cursor: pointer; transition: var(--t-control);
}
.ark-modal__close:hover { color: var(--text-strong); background: var(--surface-hover); border-color: var(--border-strong); }
.ark-modal__close:focus-visible { outline: none; box-shadow: var(--glow-focus); }
.ark-modal__body { padding: 0 var(--space-6) var(--space-6); color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); overflow: auto; }
.ark-modal__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle); background: var(--surface-panel);
}