/* ── folder-modal (<dialog> element) ─────────────────────────────────────── */
dialog.folder-modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  width: 440px;
  max-width: calc(100vw - var(--space-8));
  box-shadow: var(--shadow-3);
  background: var(--bg-surface);
}

dialog.folder-modal::backdrop {
  background: rgba(30, 44, 55, 0.35);
}

dialog.folder-modal > .-body {
  padding: var(--space-8) var(--space-8) var(--space-6);
}

dialog.folder-modal > .-body form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

dialog.folder-modal > .-body .-title {
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  color: var(--slate-800);
  margin: 0;
}

dialog.folder-modal > .-body .-description {
  font-size: var(--fs-14);
  color: var(--fg-2);
  margin: -8px 0 0;
}

dialog.folder-modal > .-body .-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--fg-1);
  background: var(--paper-2);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}

dialog.folder-modal > .-body .-name-input::placeholder {
  color: var(--fg-3);
}

dialog.folder-modal > .-body .-name-input:focus {
  border-color: var(--slate-400);
  outline: 0;
}

dialog.folder-modal > .-body .-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

dialog.folder-modal .-footer .btn-primary:disabled {
  background: var(--slate-200);
  color: var(--slate-400);
  cursor: not-allowed;
}